/* =====================================================================
   Closebolt Pipeline - theme (default dark, light toggle)
   Spreadsheet-style, no gradients, no one-sided colored borders.
   ===================================================================== */

/* Default = a lighter dark theme */
:root, [data-theme="dark"] {
    --bg-body:#353b48; --bg-panel:#3d4452; --bg-card:#404757; --bg-card-2:#454d5e;
    --bg-input:#2f343f; --bg-row:#3d4452; --bg-row-alt:#373d4a; --bg-head:#2f343f;
    --text:#e8ecf3; --text-muted:#9aa4b8; --text-strong:#ffffff;
    --border:#4b5366; --border-soft:#434a5a;
    --primary:#4a9fd4; --primary-hover:#5cb0e0; --on-primary:#0f1722;
    --success:#5cb85c; --success-bg:rgba(92,184,92,.16);
    --warning:#e0a44a; --warning-bg:rgba(224,164,74,.16);
    --danger:#d9534f; --danger-bg:rgba(217,83,79,.16);
    --info:#5b8fd0; --info-bg:rgba(91,143,208,.16);
    --muted-bg:rgba(154,164,184,.16);
    --shadow:0 2px 10px rgba(0,0,0,.35);
    --radius:8px;
}

[data-theme="light"] {
    --bg-body:#eef1f5; --bg-panel:#ffffff; --bg-card:#ffffff; --bg-card-2:#f6f8fa;
    --bg-input:#ffffff; --bg-row:#ffffff; --bg-row-alt:#f6f8fa; --bg-head:#f1f4f8;
    --text:#2e3440; --text-muted:#6b7488; --text-strong:#1b2430;
    --border:#d4dae3; --border-soft:#e4e9f0;
    --primary:#3884b8; --primary-hover:#2f74a3; --on-primary:#ffffff;
    --success:#3c9a3c; --success-bg:rgba(60,154,60,.12);
    --warning:#c98a2e; --warning-bg:rgba(201,138,46,.12);
    --danger:#c9433f; --danger-bg:rgba(201,67,63,.12);
    --info:#3884b8; --info-bg:rgba(56,132,184,.12);
    --muted-bg:rgba(107,116,136,.12);
    --shadow:0 2px 10px rgba(20,30,50,.08);
}

* { box-sizing:border-box; }
html,body { margin:0; padding:0; }
body {
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:var(--bg-body); color:var(--text); font-size:14px; line-height:1.45;
}
a { color:var(--primary); text-decoration:none; }
a:hover { color:var(--primary-hover); }
h1,h2,h3 { color:var(--text-strong); margin:0 0 .4em; font-weight:650; }
.muted { color:var(--text-muted); }

/* ── Top bar ─────────────────────────────────────────────────────── */
.topbar { background:var(--bg-panel); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:40; }
.topbar-inner { display:flex; align-items:center; gap:24px; max-width:1320px; margin:0 auto; padding:10px 18px; }
.topbar-brand { display:flex; align-items:center; gap:10px; color:var(--text-strong); }
.brand-mark { display:inline-grid; place-items:center; width:30px; height:30px; border-radius:7px;
    background:var(--primary); color:var(--on-primary); font-weight:800; font-size:13px; letter-spacing:.5px; }
.brand-text { font-size:16px; font-weight:600; }
.topnav { display:flex; gap:4px; flex:1; }
.topnav a { padding:8px 14px; border-radius:7px; color:var(--text-muted); font-weight:550; }
.topnav a:hover { background:var(--bg-card-2); color:var(--text); }
.topnav a.active { background:var(--primary); color:var(--on-primary); }
.topbar-right { display:flex; align-items:center; gap:14px; }
.user-chip { display:flex; align-items:center; gap:10px; }
.user-name { font-weight:600; }
.logout-link { color:var(--text-muted); font-size:13px; }
.icon-btn { background:var(--bg-card-2); border:1px solid var(--border); color:var(--text);
    width:34px; height:34px; border-radius:7px; cursor:pointer; font-size:15px; line-height:1; }
.icon-btn:hover { border-color:var(--primary); }
.theme-ico-light { display:none; }
[data-theme="light"] .theme-ico-dark { display:none; }
[data-theme="light"] .theme-ico-light { display:inline; }

.app-main { max-width:1320px; margin:0 auto; padding:20px 18px 60px; }
.page-wrap { display:flex; flex-direction:column; gap:18px; }
.page-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px; }
.page-head h1 { margin:0; font-size:22px; }
.subnav { display:flex; gap:4px; }
.subnav a { padding:6px 12px; border-radius:7px; color:var(--text-muted); }
.subnav a:hover { background:var(--bg-card-2); color:var(--text); }
.subnav a.active { background:var(--bg-card-2); color:var(--text); }
.app-footer { text-align:center; color:var(--text-muted); padding:24px; font-size:12px; }

/* ── Buttons ─────────────────────────────────────────────────────── */
.btn { display:inline-flex; align-items:center; gap:6px; background:var(--bg-card-2); color:var(--text);
    border:1px solid var(--border); border-radius:7px; padding:8px 14px; font-size:13px; font-weight:600;
    cursor:pointer; transition:background .15s,border-color .15s; }
.btn:hover { border-color:var(--primary); }
.btn-primary { background:var(--primary); color:var(--on-primary); border-color:var(--primary); }
.btn-primary:hover { background:var(--primary-hover); border-color:var(--primary-hover); }
.btn-danger { color:var(--danger); }
.btn-danger:hover { background:var(--danger-bg); border-color:var(--danger); }
.btn-sm { padding:5px 10px; font-size:12px; }
.btn-block { width:100%; justify-content:center; }
.btn-ghost { background:transparent; }

/* ── Cards & stats ───────────────────────────────────────────────── */
.card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow); }
.card-head { display:flex; align-items:center; justify-content:space-between; gap:12px;
    padding:14px 16px; border-bottom:1px solid var(--border-soft); }
.card-head h2 { margin:0; font-size:16px; }
.card-body { padding:16px; }
.stat-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:12px; }
.stat-card { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px; }
.stat-label { color:var(--text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
.stat-value { font-size:24px; font-weight:750; color:var(--text-strong); margin-top:4px; }

/* ── Chips filter row ────────────────────────────────────────────── */
.chips-bar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; padding:12px 14px;
    background:var(--bg-panel); border:1px solid var(--border); border-radius:var(--radius);
    position:sticky; top:56px; z-index:20; }
.chips-bar .chips-label { color:var(--text-muted); font-size:12px; text-transform:uppercase; letter-spacing:.4px; margin-right:4px; }
.chip { display:inline-flex; align-items:center; gap:6px; padding:6px 13px; border-radius:999px;
    border:1px solid var(--border); background:var(--bg-card-2); color:var(--text-muted);
    font-size:13px; font-weight:600; cursor:pointer; user-select:none; }
.chip .chip-count { background:var(--muted-bg); border-radius:999px; padding:0 7px; font-size:11px; }
.chip:hover { color:var(--text); border-color:var(--primary); }
.chip.active { background:var(--primary); border-color:var(--primary); color:var(--on-primary); }
.chip.active .chip-count { background:rgba(255,255,255,.25); color:inherit; }
.chips-bar .chips-tools { margin-left:auto; display:flex; gap:8px; }

/* ── Sections (stacked) ──────────────────────────────────────────── */
.section { background:var(--bg-card); border:1px solid var(--border); border-radius:var(--radius);
    box-shadow:var(--shadow); overflow:hidden; }
.section.collapsed .section-body { display:none; }
.section-head { display:flex; align-items:center; gap:12px; padding:12px 16px;
    background:var(--bg-head); border-bottom:1px solid var(--border-soft); }
.section-head .sec-toggle { cursor:pointer; color:var(--text-muted); font-size:13px; width:16px; }
.section-title { font-size:15px; font-weight:700; color:var(--text-strong); display:flex; align-items:center; gap:8px; }
.section-sub { color:var(--text-muted); font-size:12px; }
.section-head .sec-actions { margin-left:auto; display:flex; gap:8px; align-items:center; }
.section-body { padding:0; }

/* ── Spreadsheet grid table ──────────────────────────────────────── */
.table-scroll { overflow-x:auto; }
.grid-table { width:100%; border-collapse:collapse; font-size:13px; }
.grid-table th, .grid-table td { padding:0; border:1px solid var(--border-soft); text-align:left; }
.grid-table thead th { background:var(--bg-head); color:var(--text-muted); font-weight:650;
    text-transform:uppercase; font-size:11px; letter-spacing:.4px; padding:9px 10px; white-space:nowrap; }
.grid-table tbody tr:nth-child(even) { background:var(--bg-row-alt); }
.grid-table tbody tr:hover { background:var(--info-bg); }
.grid-table td .cell-input, .grid-table td .cell-select, .grid-table td .cell-date {
    width:100%; border:0; background:transparent; color:var(--text); font:inherit; padding:8px 10px; }
.grid-table td { vertical-align:middle; }
.grid-table td.col-num .cell-input { text-align:right; }
.cell-input:focus, .cell-select:focus, .cell-date:focus {
    outline:2px solid var(--primary); outline-offset:-2px; background:var(--bg-input); border-radius:4px; }
.cell-textarea { width:100%; border:0; background:transparent; color:var(--text); font:inherit;
    padding:8px 10px; resize:vertical; min-height:34px; }
.col-actions { width:1%; white-space:nowrap; text-align:center; }
.col-drag { width:26px; text-align:center; color:var(--text-muted); cursor:grab; }
.row-del { background:transparent; border:0; color:var(--text-muted); cursor:pointer; font-size:15px; padding:4px 8px; }
.row-del:hover { color:var(--danger); }
.table-foot { padding:10px 14px; border-top:1px solid var(--border-soft); display:flex; gap:10px; align-items:center; }

/* Standalone inputs */
input[type=text], input[type=email], input[type=password], input[type=date], input[type=number], select, textarea {
    background:var(--bg-input); color:var(--text); border:1px solid var(--border);
    border-radius:6px; padding:8px 10px; font:inherit; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--primary); }
label { display:block; font-size:13px; color:var(--text-muted); margin-bottom:10px; }
label input, label select, label textarea { display:block; width:100%; margin-top:5px; color:var(--text); }
.checkbox-row { display:flex; align-items:center; gap:8px; }
.checkbox-row input { width:auto; margin:0; }

/* date picker icon tint for dark */
[data-theme="dark"] input[type=date]::-webkit-calendar-picker-indicator { filter:invert(.8); }

/* ── Status pills ────────────────────────────────────────────────── */
.pill { display:inline-block; padding:3px 10px; border-radius:999px; font-size:11px; font-weight:700; letter-spacing:.2px; }
.pill-Unmapped, .pill-off { background:var(--muted-bg); color:var(--text-muted); }
.pill-Mapped { background:var(--info-bg); color:var(--info); }
.pill-Locked { background:var(--warning-bg); color:var(--warning); }
.pill-Installed, .pill-ok { background:var(--success-bg); color:var(--success); }
.pill-Signed { background:var(--info-bg); color:var(--primary); }
.pill-admin { background:var(--info-bg); color:var(--primary); }
.pill-user { background:var(--muted-bg); color:var(--text-muted); }

/* ── Drag & drop ─────────────────────────────────────────────────── */
.grid-table tbody tr.dragging { opacity:.5; }
.section.drop-target { outline:2px dashed var(--primary); outline-offset:-2px; }
.grid-table tbody tr.drop-above td { box-shadow:inset 0 2px 0 var(--primary); }
.grid-table tbody tr.drop-below td { box-shadow:inset 0 -2px 0 var(--primary); }

/* ── Alerts ──────────────────────────────────────────────────────── */
.alert { border-radius:7px; padding:10px 14px; margin-bottom:14px; font-size:13px; border:1px solid var(--border); }
.alert-danger { background:var(--danger-bg); color:var(--danger); border-color:var(--danger); }
.alert-success { background:var(--success-bg); color:var(--success); border-color:var(--success); }
.alert-info { background:var(--info-bg); color:var(--info); border-color:var(--info); }

/* ── Toast / save indicator ──────────────────────────────────────── */
.toast { position:fixed; bottom:20px; right:20px; background:var(--bg-card); color:var(--text);
    border:1px solid var(--border); border-radius:8px; padding:10px 16px; box-shadow:var(--shadow);
    opacity:0; transform:translateY(8px); transition:opacity .2s,transform .2s; z-index:80; }
.toast.show { opacity:1; transform:translateY(0); }
.toast.toast-ok { border-color:var(--success); }
.toast.toast-err { border-color:var(--danger); }

/* ── Modal ───────────────────────────────────────────────────────── */
.modal-overlay { position:fixed; inset:0; background:rgba(10,15,25,.55); display:flex;
    align-items:center; justify-content:center; z-index:100; padding:20px; }
.modal { background:var(--bg-card); border:1px solid var(--border); border-radius:10px;
    width:100%; max-width:440px; box-shadow:var(--shadow); }
.modal-head { display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--border-soft); }
.modal-head h3 { margin:0; font-size:16px; }
.modal-body { padding:16px; }
.modal-foot { display:flex; justify-content:flex-end; gap:10px; padding:14px 16px; border-top:1px solid var(--border-soft); }
.modal-msg { color:var(--danger); font-size:13px; min-height:18px; }

/* ── Leaderboard ─────────────────────────────────────────────────── */
.lb-table .rank { font-weight:800; color:var(--text-muted); width:40px; text-align:center; }
.lb-table tr.me { background:var(--info-bg); }
.lb-table .rank-1 { color:#e6b450; } .lb-table .rank-2 { color:#b9c2d0; } .lb-table .rank-3 { color:#cd8b5a; }
.lb-table td, .lb-table th { padding:10px 12px; }
.lb-bar { height:6px; border-radius:999px; background:var(--muted-bg); overflow:hidden; margin-top:5px; }
.lb-bar > span { display:block; height:100%; background:var(--primary); }

/* ── Auth pages ──────────────────────────────────────────────────── */
.auth-body { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; }
.auth-card { background:var(--bg-card); border:1px solid var(--border); border-radius:12px;
    box-shadow:var(--shadow); width:100%; max-width:380px; padding:28px; }
.auth-brand { text-align:center; margin-bottom:20px; }
.auth-brand .brand-mark { width:46px; height:46px; font-size:18px; margin:0 auto 12px; }
.auth-brand h1 { font-size:20px; margin:0; }
.auth-form label { margin-bottom:14px; }
.auth-foot { text-align:center; margin:16px 0 0; color:var(--text-muted); font-size:13px; }

/* ── Misc ────────────────────────────────────────────────────────── */
.toolbar { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }
.spacer { flex:1; }
[hidden] { display:none !important; }
@media (max-width:720px){
    .topnav { order:3; width:100%; overflow-x:auto; }
    .chips-bar { top:0; position:relative; }
}

/* =====================================================================
   Excel-style spreadsheet look (v1.0) - overrides
   ===================================================================== */

/* Gridlines on every cell, fixed row height, clipped overflow. */
.grid-table { border-collapse:collapse; }
.grid-table th, .grid-table td { border:1px solid var(--border-soft); padding:0; }
.grid-table thead th {
    background:var(--bg-head); color:var(--text-secondary); font-weight:700;
    text-transform:uppercase; font-size:10.5px; letter-spacing:.4px; padding:7px 9px;
    white-space:nowrap; position:sticky; top:0; z-index:2;
}
.grid-table tbody tr { height:34px; }
.grid-table tbody tr:nth-child(odd)  { background:var(--bg-row); }
.grid-table tbody tr:nth-child(even) { background:var(--bg-row-alt); }
.grid-table tbody tr:hover { background:var(--info-bg); }
.grid-table td { height:34px; overflow:hidden; }
.grid-table td .cell-input, .grid-table td .cell-select, .grid-table td .cell-date {
    width:100%; height:32px; border:0; background:transparent; color:var(--text);
    font:inherit; padding:6px 9px; white-space:nowrap; text-overflow:ellipsis;
}
.grid-table td.col-num .cell-input { text-align:right; }
.cell-label { padding:6px 10px; font-weight:600; white-space:nowrap; }
.cell-input:focus, .cell-select:focus, .cell-date:focus {
    outline:2px solid var(--primary); outline-offset:-2px; background:var(--bg-input); border-radius:3px;
}
.grid-table td .cell-select { cursor:pointer; }
.grid-table tbody td { vertical-align:top; }

/* Notes: one collapsed line; on focus it grows and the whole row gets taller. */
.cell-notes { min-width:200px; max-width:360px; }
.cell-notes .cell-textarea {
    width:100%; height:32px; border:0; background:transparent; color:inherit;
    font:inherit; padding:6px 9px; resize:none; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
}
.cell-notes .cell-textarea:focus {
    outline:2px solid var(--primary); outline-offset:-2px;
    height:110px; overflow:auto; white-space:normal; border-radius:3px;
}

/* Column sizing */
.col-drag { width:24px; text-align:center; color:var(--text-muted); cursor:grab; user-select:none; }
.col-check { width:48px; text-align:center; }
.col-check input { margin:0; }
.col-pct { width:74px; }
.col-sar { width:96px; }
.col-date { width:150px; }
.col-num { width:120px; }
.col-actions { width:34px; text-align:center; }
.col-sar .sar-out { display:block; padding:6px 9px; text-align:right; font-weight:700; color:var(--text-strong); }
.row-del { background:transparent; border:0; color:var(--text-muted); cursor:pointer; font-size:16px; line-height:1; padding:4px 7px; }
.row-del:hover { color:var(--danger); }

/* Section bands: subtle accent tint + colored dot. Clean in both themes. */
.section { margin-bottom:0; border:1px solid var(--border); border-radius:10px; overflow:hidden; box-shadow:var(--shadow); }
#sectionsWrap { display:flex; flex-direction:column; gap:12px; }
.sec-band { display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--border-soft); background:var(--bg-head); }
.section.collapsed .sec-band { border-bottom:0; }
.sec-dot { width:9px; height:9px; border-radius:50%; flex:0 0 auto; background:var(--accent,#4a9fd4); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent,#4a9fd4) 22%, transparent); }
.sec-band .sec-toggle { cursor:pointer; color:var(--text-secondary); font-size:12px; }
.sec-name {
    flex:0 1 auto; min-width:150px; max-width:460px; font-size:14px; font-weight:750; color:var(--text-strong);
    background:transparent; border:1px solid transparent; border-radius:6px; padding:5px 8px; text-overflow:ellipsis;
}
.sec-name:hover { border-color:var(--border); }
.sec-name:focus { border-color:var(--primary); background:var(--bg-input); outline:none; }
.sec-meta { color:var(--text-secondary); font-size:12px; font-weight:600; white-space:nowrap; }
.sec-count { display:flex; align-items:center; gap:5px; font-size:11px; color:var(--text-secondary); margin:0; white-space:nowrap; }
.sec-count input { width:auto; margin:0; }
.sec-band .sec-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }

/* Excel-style pastel section bands (same colors in both themes, dark text) */
.sec-yellow .sec-band { background:#f5e08a; } .sec-orange .sec-band { background:#f6cf9f; }
.sec-rose   .sec-band { background:#f1c8d3; } .sec-green  .sec-band { background:#bfe3c0; }
.sec-purple .sec-band { background:#d8cdf0; } .sec-blue   .sec-band { background:#bcd4ef; }
.sec-amber  .sec-band { background:#f3dca0; } .sec-slate  .sec-band { background:#ccd5e2; }
.sec-gray   .sec-band { background:#d8dce3; } .sec-teal   .sec-band { background:#bfe3dd; }
.sec-indigo .sec-band { background:#cdd2f0; } .sec-red    .sec-band { background:#f1c4c4; }
.section[class*="sec-"] .sec-band,
.section[class*="sec-"] .sec-band .sec-name,
.section[class*="sec-"] .sec-band .sec-meta,
.section[class*="sec-"] .sec-band .sec-count,
.section[class*="sec-"] .sec-band .sec-toggle { color:#27313f; }
.section[class*="sec-"] .sec-band .sec-name:focus { background:rgba(255,255,255,.65); color:#1b2530; }
.section[class*="sec-"] .sec-band .sec-count input { accent-color:#3a4654; }

/* View filter (single clean dropdown, no overflow row) */
.view-filter { display:flex; align-items:center; gap:10px; }
.view-filter .view-select { min-width:280px; }

/* Empty-section affordance */
.sec-empty { padding:14px; color:var(--text-muted); font-size:13px; }

/* Styled dropdowns everywhere (custom caret, no muddy native look) */
select, .cell-select, .view-select {
    -webkit-appearance:none; -moz-appearance:none; appearance:none;
    background-image:url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%238a96aa' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");
    background-repeat:no-repeat; background-position:right 10px center; padding-right:26px; cursor:pointer;
}
.grid-table td .cell-select { background-position:right 6px center; padding-right:20px; }
select option { background:var(--bg-card); color:var(--text); }

/* Drag handle: comfortable padding + clear affordance */
.col-drag { width:30px; padding:0 8px; text-align:center; color:var(--text-muted);
    cursor:grab; user-select:none; letter-spacing:1px; }
.col-drag:hover { color:var(--text); background:var(--muted-bg); }

/* Right-click row/section context menu */
.ctx-menu { position:fixed; z-index:200; min-width:170px; background:var(--bg-card);
    border:1px solid var(--border); border-radius:8px; box-shadow:var(--shadow); padding:5px; }
.ctx-menu button { display:block; width:100%; text-align:left; background:transparent; border:0;
    color:var(--text); font:inherit; padding:8px 12px; border-radius:6px; cursor:pointer; }
.ctx-menu button:hover { background:var(--bg-card-2); }
.ctx-menu button.danger:hover { background:var(--danger-bg); color:var(--danger); }
.ctx-hint { color:var(--text-muted); font-size:11px; padding:4px 12px 6px; }

/* Weekly "this week" quick entry */
.week-now { border-bottom:1px solid var(--border-soft); }
.week-now-head { font-weight:700; margin-bottom:10px; color:var(--text-strong); }

/* Drag feedback */
.grid-table tbody tr.dragging { opacity:.45; }
.grid-table tbody tr.drop-above td { box-shadow:inset 0 2px 0 var(--primary); }
.grid-table tbody tr.drop-below td { box-shadow:inset 0 -2px 0 var(--primary); }

.pill-super_admin { background:var(--info-bg); color:var(--primary); }

/* Even, tidy stat cards */
.stat-card { display:flex; flex-direction:column; gap:6px; min-height:90px; justify-content:flex-start; }
.stat-label { min-height:28px; line-height:1.25; }
.stat-value { margin-top:auto; }

/* Section body breathing room + clean empty look */
.section .section-body > .table-scroll { padding:0; }
.week-now { padding:16px; }
.chips-label { font-weight:600; }

/* =====================================================================
   Light spreadsheet by default on the dashboard (toggle darkens rows only)
   ===================================================================== */
.page-dashboard .section .section-body {
    --srow:#ffffff; --salt:#eaf1fb; --sline:#cbd4e1; --stext:#27313f; --smuted:#5d6b80;
    --shead:#e7ecf3; --sinput:#ffffff; --shover:#dceafb;
    background:var(--srow); color:var(--stext);
}
html.pre-sheet-dark .page-dashboard .section .section-body,
.page-dashboard.sheet-dark .section .section-body {
    --srow:#3d4452; --salt:#373d4a; --sline:#4b5366; --stext:#e8ecf3; --smuted:#9aa4b8;
    --shead:#2f343f; --sinput:#313644; --shover:#454d61;
}
.page-dashboard .grid-table th { background:var(--shead); color:var(--smuted); border-color:var(--sline); }
.page-dashboard .grid-table td { border-color:var(--sline); color:var(--stext); }
.page-dashboard .grid-table tbody tr:nth-child(odd)  { background:var(--srow); }
.page-dashboard .grid-table tbody tr:nth-child(even) { background:var(--salt); }
.page-dashboard .grid-table tbody tr:hover { background:var(--shover); }
.page-dashboard .grid-table .cell-input,
.page-dashboard .grid-table .cell-select,
.page-dashboard .grid-table .cell-date,
.page-dashboard .grid-table .cell-textarea,
.page-dashboard .grid-table .cell-label,
.page-dashboard .col-sar .sar-out { color:var(--stext); }
.page-dashboard .grid-table .cell-input:focus,
.page-dashboard .grid-table .cell-select:focus,
.page-dashboard .grid-table .cell-date:focus,
.page-dashboard .cell-notes .cell-textarea:focus { background:var(--sinput); }
.page-dashboard .col-drag { color:var(--smuted); }
.page-dashboard .col-drag:hover { background:rgba(0,0,0,.06); color:var(--stext); }
/* date-picker glyph: dark on light sheet, light on dark sheet */
.page-dashboard .section-body input[type=date]::-webkit-calendar-picker-indicator { filter:none; }
html.pre-sheet-dark .page-dashboard .section-body input[type=date]::-webkit-calendar-picker-indicator,
.page-dashboard.sheet-dark .section-body input[type=date]::-webkit-calendar-picker-indicator { filter:invert(.8); }

/* ===== Excel-style forecast summary (top, below the bar) ===== */
.fc-section .fc-bandtitle { background:#3e4a5f; border-bottom:0; }
.fc-bandtitle .sec-toggle, .fc-bandtitle .sec-name-static, .fc-bandtitle .sec-meta { color:#fff; }
.sec-name-static { font-size:14px; font-weight:750; }
.fc-bandtitle .sec-meta { margin-left:auto; }
.fc-body { padding:16px; display:flex; flex-direction:column; gap:14px; }
.fc-meta-row { display:flex; gap:10px; flex-wrap:wrap; }
.fc-cell { display:flex; flex-direction:column; gap:4px; background:var(--shead); border:1px solid var(--sline); border-radius:6px; padding:8px 10px; min-width:170px; }
.fc-cell span { font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--smuted); }
.fc-cell input { background:var(--sinput); color:var(--stext); border:1px solid var(--sline); border-radius:5px; padding:6px 8px; }
.fc-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(248px,1fr)); gap:14px; align-items:start; }
.sheet-mini { border-collapse:collapse; width:100%; font-size:13px; }
.sheet-mini th, .sheet-mini td { border:1px solid var(--sline); padding:7px 10px; text-align:left; color:var(--stext); }
.sheet-mini td.num { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.sheet-mini .mini-head th { background:#3e4a5f; color:#fff; font-weight:700; text-transform:uppercase; font-size:11px; letter-spacing:.4px; }
.sheet-mini .cell-gold { background:#f3d27a; padding:0; }
.sheet-mini .cell-gold input { width:100%; border:0; background:transparent; color:#2a2110; font-weight:700; text-align:right; padding:7px 10px; font:inherit; }
.sheet-mini .cell-gold input:focus { outline:2px solid var(--primary); outline-offset:-2px; }
.st-installed td:first-child { background:#bfe3c0; } .st-locked td:first-child { background:#bcd4ef; }
.st-mapped   td:first-child { background:#d8cdf0; } .st-unmapped td:first-child { background:#d9dde4; }
.st-total    td:first-child { background:#f5e08a; } .st-gap td:first-child { background:#bfe3c0; }
.sheet-mini tr[class^="st-"] td:first-child { color:#27313f; font-weight:700; }
.sheet-mini .cell-amberval { background:#f5e08a; color:#2a2110; }
.sheet-mini .cell-purpleval { background:#d8cdf0; color:#27313f; }