/* ============================================================================
 * app.css — 予実管理アプリ デザインシステム（ゼロから再設計）
 * ============================================================================ */
:root {
    --c-bg: #f4f6fa;
    --c-surface: #ffffff;
    --c-border: #e2e6ee;
    --c-text: #2b3550;
    --c-text-sub: #7a849c;
    --c-primary: #2f6fed;
    --c-primary-d: #2257c9;
    --c-budget: #1f8a5b;     /* 予算=緑 */
    --c-actual: #2f6fed;     /* 実績=青 */
    --c-meisai: #5a3fc0;     /* 明細=紫 */
    --c-analysis: #b8434f;   /* 分析=赤系 */
    --c-danger: #d3413f;
    --c-warn: #e08b1f;
    --radius: 10px;
    --shadow: 0 1px 3px rgba(20,30,60,.08), 0 4px 16px rgba(20,30,60,.06);
    --font: "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Meiryo", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
    font-family: var(--font);
    background: var(--c-bg);
    color: var(--c-text);
    font-size: 14px;
    line-height: 1.5;
}

/* ---- アプリヘッダ ---- */
.app-header {
    height: 52px;
    background: linear-gradient(90deg, #1d2b4d, #28406f);
    color: #fff;
    display: flex; align-items: center;
    padding: 0 18px; gap: 14px;
    position: sticky; top: 0; z-index: 100;
    box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.app-header .brand { font-weight: 700; font-size: 16px; letter-spacing: .04em; cursor: pointer; display:flex; align-items:center; gap:8px; }
.app-header .brand .logo { width: 22px; height: 22px; background: var(--c-warn); border-radius: 6px; display:inline-block; }
.app-header .spacer { flex: 1; }
.app-header .hbtn { color: #cdd6ec; background: transparent; border: 0; cursor: pointer; font-size: 13px; padding: 6px 10px; border-radius: 6px; }
.app-header .hbtn:hover { background: rgba(255,255,255,.12); color:#fff; }
.app-header .user { font-size: 13px; color: #e7ecf8; display:flex; align-items:center; gap:6px; }

/* ---- パンくず ---- */
.breadcrumb { padding: 10px 22px 0; color: var(--c-text-sub); font-size: 12.5px; }
.breadcrumb a { color: var(--c-primary); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---- ページ枠 ---- */
.page { padding: 16px 22px 60px; max-width: 1840px; margin: 0 auto; }
.page-title { font-size: 19px; font-weight: 700; margin: 8px 0 16px; display:flex; align-items:center; gap:10px; }
.page-title .accent { width: 5px; height: 22px; border-radius: 3px; background: var(--c-primary); }

/* ---- ツールバー（リボン） ---- */
.toolbar {
    background: var(--c-surface); border: 1px solid var(--c-border);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 10px 14px; margin-bottom: 14px;
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.toolbar .sep { width: 1px; height: 26px; background: var(--c-border); margin: 0 4px; }
.toolbar .grow { flex: 1; }
.toolbar label { font-size: 12px; color: var(--c-text-sub); margin-right: 4px; }

/* ---- ボタン ---- */
.ui-btn {
    border: 1px solid var(--c-border); background: #fff; color: var(--c-text);
    padding: 7px 14px; border-radius: 7px; cursor: pointer; font-size: 13px;
    font-family: var(--font); transition: .12s; display:inline-flex; align-items:center; gap:6px;
}
.ui-btn:hover { background: #f0f3f9; }
.ui-btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.ui-btn-primary:hover { background: var(--c-primary-d); }
.ui-btn-danger { background: var(--c-danger); border-color: var(--c-danger); color: #fff; }
.ui-btn-danger:hover { filter: brightness(.94); }
.ui-btn-ghost { background: transparent; }
.ui-btn:disabled { opacity: .5; cursor: not-allowed; }
.ui-btn-sm { padding: 4px 10px; font-size: 12px; }

/* ---- 入力 ---- */
.ui-input, .ui-select {
    border: 1px solid var(--c-border); border-radius: 7px; padding: 7px 10px;
    font-size: 13px; font-family: var(--font); background: #fff; color: var(--c-text);
}
.ui-input:focus, .ui-select:focus { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px rgba(47,111,237,.12); }

/* ---- カード ---- */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); }

/* ---- ステータスバー ---- */
.statusbar {
    display:flex; align-items:center; gap:18px; font-size:12.5px; color: var(--c-text-sub);
    padding: 8px 14px; background:#fff; border:1px solid var(--c-border); border-radius: var(--radius); margin-top: 12px;
}
.statusbar b { color: var(--c-text); }

/* ---- データテーブル（明細表等） ---- */
.dtable { width: 100%; border-collapse: collapse; font-size: 12.5px; background:#fff; }
.dtable th, .dtable td { border: 1px solid var(--c-border); padding: 6px 8px; }
.dtable th { background: #eef2f9; color: var(--c-text); font-weight: 600; position: sticky; top: 0; z-index: 2; }
.dtable td.num { text-align: right; font-variant-numeric: tabular-nums; }
.dtable td.neg { color: var(--c-danger); }
.dtable tr:nth-child(even) td { background: #fafbfe; }
.dtable .grp-row td { background: #e8f0e8; font-weight: 700; }
.dtable .total-row td { background: #fff6e6; font-weight: 700; }
.table-scroll { overflow: auto; max-height: calc(100vh - 230px); border:1px solid var(--c-border); border-radius: var(--radius); }

/* ---- Handsontable 微調整 ---- */
.ky-hot { font-size: 12.5px; }
.handsontable .htDimmed { color: #444; }

/* ---- トースト ---- */
.ui-toast-wrap { position: fixed; right: 20px; bottom: 20px; z-index: 11000; display:flex; flex-direction:column; gap:8px; }
.ui-toast {
    background: #2b3550; color:#fff; padding: 11px 16px; border-radius: 8px; font-size: 13px;
    box-shadow: 0 6px 20px rgba(0,0,0,.2); opacity: 0; transform: translateY(8px); transition: .25s; max-width: 360px;
}
.ui-toast.show { opacity: 1; transform: translateY(0); }
.ui-toast-success { background: #1f8a5b; }
.ui-toast-error { background: var(--c-danger); }
.ui-toast-warn { background: var(--c-warn); }

/* ---- ローディング ---- */
.ui-loading { position: fixed; inset: 0; background: rgba(255,255,255,.5); display:flex; align-items:center; justify-content:center; z-index: 12000; }
.ui-spinner { width: 42px; height: 42px; border: 4px solid #d6deef; border-top-color: var(--c-primary); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- モーダル ---- */
.ui-modal-overlay { position: fixed; inset: 0; background: rgba(20,28,48,.45); display:flex; align-items:center; justify-content:center; z-index: 11000; }
.ui-modal { background:#fff; border-radius: 12px; box-shadow: 0 12px 48px rgba(0,0,0,.28); max-height: 84vh; display:flex; flex-direction:column; }
.ui-confirm { width: 380px; padding: 22px; }
.ui-confirm-msg { font-size: 14px; margin-bottom: 18px; }
.ui-confirm-btns { display:flex; justify-content:flex-end; gap:10px; }

/* 担当者ピッカー */
.ep-modal { width: 420px; }
.ep-header { padding: 16px 20px 12px; border-bottom: 1px solid var(--c-border); }
.ep-title { font-size: 15px; font-weight: 700; margin-bottom: 10px; }
.ep-search { width: 100%; padding: 8px 12px; border: 2px solid var(--c-primary); border-radius: 6px; font-size: 14px; box-sizing: border-box; }
.ep-body { overflow-y: auto; padding: 8px 0; flex: 1; }
.ep-dept { padding: 6px 20px 4px; font-size: 11px; font-weight: 700; color: var(--c-primary); background: #f5f7fb; position: sticky; top: 0; }
.ep-item { padding: 10px 20px; cursor: pointer; font-size: 13px; display:flex; align-items:center; gap:8px; }
.ep-item:hover { background: #e9f1ff; }
.ep-item-name { flex: 1; }
.ep-item-dept { font-size: 11px; color: #98a2bb; }
.ep-empty { padding: 20px; text-align:center; color:#99a; }
.ep-footer { padding: 10px 20px; border-top: 1px solid var(--c-border); display:flex; justify-content:flex-end; gap:8px; }

/* ---- ホーム（ダッシュボード） ---- */
.home-grid { display:grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.cat-card { background:#fff; border:1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); overflow:hidden; }
.cat-card .cat-head { padding: 12px 16px; color:#fff; font-weight:700; font-size:14px; display:flex; align-items:center; gap:8px; }
.cat-card.budget .cat-head { background: var(--c-budget); }
.cat-card.actual .cat-head { background: var(--c-actual); }
.cat-card.meisai .cat-head { background: var(--c-meisai); }
.cat-card.analysis .cat-head { background: var(--c-analysis); }
.cat-menu { padding: 6px; }
.cat-item { padding: 11px 14px; border-radius: 8px; cursor:pointer; display:flex; align-items:center; gap:10px; font-size:13.5px; }
.cat-item:hover { background:#f0f4fb; }
.cat-item .arrow { margin-left:auto; color: var(--c-text-sub); }

.dash-panel { background:#fff; border:1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; }
.dash-panel h3 { margin: 0 0 12px; font-size: 14px; }
.donut-row { display:flex; gap: 10px; flex-wrap: wrap; justify-content: space-around; }
.donut { width: 150px; text-align:center; }
.donut .label { margin-top: 4px; font-size: 12px; color: var(--c-text-sub); }
.donut .sub { font-size: 11px; color: var(--c-text-sub); }

/* ---- ログイン ---- */
.login-wrap { min-height: 100vh; display:flex; align-items:center; justify-content:center; background: linear-gradient(135deg,#1d2b4d,#28406f); }
.login-card { width: 360px; background:#fff; border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.3); padding: 32px 30px; }
.login-card h1 { font-size: 18px; margin: 0 0 4px; }
.login-card .sub { color: var(--c-text-sub); font-size: 12px; margin-bottom: 22px; }
.login-card .field { margin-bottom: 14px; }
.login-card label { display:block; font-size: 12px; color: var(--c-text-sub); margin-bottom: 6px; }
.login-card input { width: 100%; padding: 10px 12px; border:1px solid var(--c-border); border-radius: 8px; font-size: 14px; }
.login-card .err { color: var(--c-danger); font-size: 12.5px; margin-bottom: 12px; min-height: 16px; }

/* ---- バッジ ---- */
.badge { display:inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.badge.b-設備 { background:#e8f5ee; color:#1f8a5b; }
.badge.b-事業費 { background:#e9f1ff; color:#2f6fed; }
.badge.b-販管費 { background:#f3edff; color:#5a3fc0; }

.empty-state { text-align:center; color: var(--c-text-sub); padding: 40px; }
.right { text-align: right; }
.muted { color: var(--c-text-sub); }