/*
 * CFO Command — styles.css
 * Dashboard-specific styles only.
 *
 * Brand tokens : ../_shared/tokens.css  (already loaded)
 * Global resets: ../_shared/global.css  (already loaded)
 *
 * Split from: command-center/cfo-command.html
 */

body{min-height:100vh;}

/* ===== APP SHELL — same grid as PM Command ===== */
.app{display:grid;grid-template-columns:320px 1fr;grid-template-rows:80px 1fr auto;grid-template-areas:"header header" "sidebar main" "footer footer";min-height:100vh;}
.header{grid-area:header;display:flex;align-items:center;justify-content:space-between;padding:0 32px;background:var(--slate);color:var(--text-inverse);position:sticky;top:0;z-index:50;box-shadow:0 4px 12px rgba(44,62,80,.08);}
.brand{display:flex;align-items:center;gap:14px;cursor:pointer;border-radius:var(--radius-sm);transition:var(--transition);}
.brand:hover{background:rgba(255,255,255,.06);}
.brand-mark{height:44px;width:auto;}.brand-mark polygon{fill:var(--copper);}
.brand-divider{width:1px;height:32px;background:rgba(255,255,255,.18);}
.brand-text{display:flex;flex-direction:column;line-height:1.15;}
.brand-name{font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--white);}
.brand-sub{font-size:11px;color:rgba(255,255,255,.7);font-weight:500;letter-spacing:.12em;text-transform:uppercase;margin-top:2px;}
.header-meta{display:flex;align-items:center;gap:24px;}
.meta-item{display:flex;flex-direction:column;align-items:flex-end;line-height:1.2;}
.meta-label{font-size:10px;color:rgba(255,255,255,.55);text-transform:uppercase;letter-spacing:.12em;font-weight:500;}
.meta-value{font-family:var(--font-mono);font-weight:500;font-size:13px;color:var(--white);margin-top:2px;}
.meta-value.warn{color:var(--warning);}.meta-value.ok2{color:#7FD8A6;}.meta-value.bad{color:#F0807A;}
.refresh{display:inline-flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;background:var(--copper);color:#fff;font-weight:600;font-size:13px;box-shadow:0 1px 3px var(--copper-glow);transition:var(--transition);}
.refresh:hover{background:var(--copper-deep);}.refresh .ri{display:inline-block;font-size:15px;}.refresh.spin .ri{animation:spin .7s linear infinite;}
@keyframes spin{from{transform:rotate(0)}to{transform:rotate(360deg)}}
.gear{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);display:grid;place-items:center;font-size:16px;color:#fff;transition:var(--transition);}
.gear:hover{background:rgba(255,255,255,.16);}
.user-pill{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:999px;}
.user-avatar{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--copper),var(--copper-deep));display:grid;place-items:center;font-family:var(--font-display);font-size:11px;font-weight:700;color:#fff;}
.user-name{font-size:12px;font-weight:600;color:#fff;}

.sidebar{grid-area:sidebar;background:var(--bg-elevated);border-right:1px solid var(--border);padding:24px 0;overflow-y:auto;position:sticky;top:80px;height:calc(100vh - 80px);}
.sidebar-section{padding:0 22px 22px;}
.sidebar-section + .sidebar-section{border-top:1px solid var(--border);padding-top:22px;}
.sidebar-title{font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.14em;color:var(--text-muted);margin-bottom:12px;}
.cat-list{list-style:none;}
.cat-item{display:grid;grid-template-columns:14px 22px 1fr auto;align-items:center;gap:9px;padding:9px 12px;border-radius:var(--radius-sm);margin-bottom:1px;font-size:13px;color:var(--text-secondary);transition:var(--transition);cursor:pointer;}
.cat-item:hover{background:var(--bg-stone);}
.cat-item.active{background:var(--white);color:var(--text-primary);font-weight:500;box-shadow:var(--shadow-xs);border-left:2px solid var(--copper);padding-left:10px;}
.cat-status{width:13px;height:13px;border-radius:50%;border:1.5px solid var(--stone);background:var(--stone);}
.cat-item.full .cat-status{background:var(--copper);border-color:var(--copper);}
.cat-item.red .cat-status{background:var(--danger);border-color:var(--danger);}
.cat-item.yellow .cat-status{background:var(--warning);border-color:var(--warning);}
.cat-item.green .cat-status{background:var(--success);border-color:var(--success);}
.cat-num{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);font-weight:500;}
.cat-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cat-count{font-family:var(--font-mono);font-size:11px;font-weight:500;color:var(--text-muted);background:var(--bg-stone);padding:2px 7px;border-radius:4px;min-width:24px;text-align:center;}
.cat-item.active .cat-count{background:var(--copper-soft);color:var(--copper-deep);}

.main{grid-area:main;padding:38px 48px 80px;max-width:1400px;width:100%;}
.category-header{margin-bottom:24px;}
.cat-eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--font-mono);font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:12px;font-weight:500;}
.cat-eyebrow .pill{padding:3px 9px;border-radius:4px;background:var(--copper-soft);color:var(--copper-deep);font-weight:600;letter-spacing:.10em;}
.cat-eyebrow .pill.red{background:var(--danger-bg);color:var(--danger);}
.cat-eyebrow .pill.yellow{background:var(--warning-bg);color:var(--warning);}
.cat-eyebrow .pill.green{background:var(--success-bg);color:var(--success);}
.cat-title{font-family:var(--font-display);font-size:34px;font-weight:700;letter-spacing:-.025em;line-height:1.1;margin-bottom:10px;}
.cat-desc{font-size:15px;color:var(--text-secondary);max-width:760px;line-height:1.6;}
.action-banner{display:flex;align-items:center;gap:10px;margin-top:16px;padding:12px 16px;background:var(--copper-soft);border:1px solid var(--copper-edge);border-left:3px solid var(--copper);border-radius:var(--radius-sm);font-size:13px;color:var(--copper-deep);font-weight:500;}
.info-banner{display:flex;align-items:flex-start;gap:10px;margin-top:16px;padding:12px 16px;background:var(--info-bg);border:1px solid rgba(44,62,80,.16);border-left:3px solid var(--slate);border-radius:var(--radius-sm);font-size:13px;color:var(--slate-70);}

/* ===== KPI rail — same vocabulary as PM Command's railchip, but tuned for CFO numbers ===== */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px;margin-bottom:28px;}
.kpi{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-xs);transition:var(--transition);position:relative;cursor:pointer;}
.kpi:hover{border-color:var(--border-strong);background:var(--bg-card-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.kpi.red{border-left:3px solid var(--danger);}
.kpi.yellow{border-left:3px solid var(--warning);}
.kpi.green{border-left:3px solid var(--success);}
.kpi.unknown{border-left:3px solid var(--stone);opacity:.85;}
.kpi-l{font-family:var(--font-mono);font-size:10px;letter-spacing:.10em;color:var(--text-muted);text-transform:uppercase;font-weight:600;display:flex;justify-content:space-between;align-items:center;}
.kpi-status{font-size:10px;font-weight:700;padding:2px 7px;border-radius:4px;letter-spacing:.06em;}
.kpi-status.red{color:var(--danger);background:var(--danger-bg);}
.kpi-status.yellow{color:var(--copper-deep);background:var(--warning-bg);}
.kpi-status.green{color:var(--success);background:var(--success-bg);}
.kpi-status.unknown{color:var(--text-muted);background:var(--bg-stone);}
.kpi-n{font-family:var(--font-mono);font-size:26px;font-weight:600;margin-top:10px;letter-spacing:-.01em;color:var(--text-primary);}
.kpi-n.bad{color:var(--danger);}.kpi-n.warn{color:var(--copper-deep);}.kpi-n.ok{color:var(--success);}
.kpi-sub{font-family:var(--font-mono);font-size:11px;color:var(--text-secondary);margin-top:6px;display:flex;gap:6px;align-items:center;}
.kpi-trend{font-family:var(--font-mono);font-size:10px;font-weight:600;padding:1px 5px;border-radius:3px;}
.kpi-trend.up{color:var(--success);background:var(--success-bg);}
.kpi-trend.down{color:var(--danger);background:var(--danger-bg);}
.kpi-trend.flat{color:var(--text-muted);background:var(--bg-stone);}

/* ===== Pulse card — the W0 8-line read, surfaced visually ===== */
.pulse-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:0;box-shadow:var(--shadow-xs);margin-bottom:28px;overflow:hidden;}
.pulse-h{background:var(--slate);color:var(--white);padding:14px 22px;display:flex;align-items:center;justify-content:space-between;}
.pulse-h-title{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;}
.pulse-h-meta{font-family:var(--font-mono);font-size:11px;color:rgba(255,255,255,.65);}
.pulse-body{padding:18px 22px;}
.pulse-row{display:grid;grid-template-columns:28px 110px 1fr auto;gap:12px;align-items:center;padding:9px 0;font-family:var(--font-mono);font-size:13px;border-bottom:1px dashed var(--border);}
.pulse-row:last-child{border-bottom:none;}
.pulse-row .pn{color:var(--text-muted);font-size:10px;}
.pulse-row .pl{color:var(--text-secondary);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;}
.pulse-row .pv{color:var(--text-primary);font-weight:600;}
.pulse-row .ps{font-size:14px;}
.pulse-today{margin-top:14px;padding:14px 16px;background:var(--copper-soft);border:1px solid var(--copper-edge);border-left:3px solid var(--copper);border-radius:var(--radius-sm);}
.pulse-today-l{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--copper-deep);font-weight:700;margin-bottom:6px;}
.pulse-today-v{font-size:14px;color:var(--text-primary);font-weight:500;line-height:1.5;}

/* ===== Section blocks ===== */
.section{margin-top:32px;}
.section-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px;}
.section-h h3{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--text-secondary);font-weight:600;}
.section-h .right{font-family:var(--font-mono);font-size:10px;color:var(--text-muted);}

/* ===== Flags table — same st-pill skin as PM Command ===== */
.tbl{width:100%;border-collapse:collapse;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-xs);}
.tbl th{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--text-muted);text-align:left;padding:12px 14px;border-bottom:1px solid var(--border);background:var(--bg-elevated);font-weight:600;}
.tbl td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:top;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr.clk{cursor:pointer;}.tbl tr.clk:hover td{background:var(--bg-card-hover);}
.tbl .mono{font-family:var(--font-mono);}
.tbl .num{font-family:var(--font-mono);text-align:right;}
.st-pill{font-family:var(--font-mono);font-size:9px;font-weight:600;padding:4px 8px;border-radius:4px;letter-spacing:.04em;text-transform:uppercase;display:inline-block;}
.s-red{color:var(--danger);background:var(--danger-bg);}
.s-yellow{color:var(--copper-deep);background:var(--warning-bg);}
.s-green{color:var(--success);background:var(--success-bg);}
.s-unknown{color:var(--text-muted);background:var(--bg-stone);}

/* ===== Department split — two-column card row ===== */
.dept-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;}
.dept-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px 20px;box-shadow:var(--shadow-xs);}
.dept-h{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px;}
.dept-h .dn{font-family:var(--font-display);font-size:15px;font-weight:700;}
.dept-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;}
.dept-stat{}.dept-stat .l{font-family:var(--font-mono);font-size:9px;letter-spacing:.1em;color:var(--text-muted);text-transform:uppercase;}
.dept-stat .n{font-family:var(--font-mono);font-size:17px;font-weight:600;margin-top:5px;}

/* ===== Empty / Loading ===== */
.empty{text-align:center;padding:54px 24px;background:var(--bg-card);border:1px dashed var(--stone);border-radius:var(--radius);}
.empty-mark{width:46px;height:46px;border-radius:50%;background:var(--info-bg);color:var(--slate);display:grid;place-items:center;margin:0 auto 14px;font-size:20px;font-weight:700;}
.empty-title{font-family:var(--font-display);font-size:19px;font-weight:600;margin-bottom:6px;}
.empty-desc{color:var(--text-secondary);font-size:13px;max-width:480px;margin:0 auto;}

/* ===== Modal / Scrim — same as PM Command ===== */
.scrim{position:fixed;inset:0;background:var(--bg-overlay);backdrop-filter:blur(3px);z-index:100;display:grid;place-items:center;padding:24px;}
.modal{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:min(560px,100%);max-height:90vh;overflow-y:auto;}
.modal-h{padding:24px 26px 18px;border-bottom:1px solid var(--border);position:relative;}
.modal-h h2{font-family:var(--font-display);font-size:22px;font-weight:700;}
.modal-h p{font-size:13px;color:var(--text-secondary);margin-top:8px;line-height:1.55;}
.modal-h .x{position:absolute;top:20px;right:22px;width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--bg-elevated);font-size:18px;color:var(--text-muted);display:grid;place-items:center;cursor:pointer;}
.modal-b{padding:22px 26px;}
.field{margin-bottom:18px;}
.field label{display:block;font-family:var(--font-display);font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin-bottom:8px;}
.field input,.field textarea{width:100%;background:var(--bg-elevated);border:1px solid var(--border-strong);border-radius:var(--radius-sm);padding:10px 13px;font-family:var(--font-mono);font-size:12.5px;color:var(--text-primary);outline:none;}
.field input:focus,.field textarea:focus{border-color:var(--copper);background:var(--white);}
.field .hint{font-size:11px;color:var(--text-muted);margin-top:7px;line-height:1.5;}
.modal-f{padding:16px 26px 24px;display:flex;justify-content:flex-end;gap:10px;border-top:1px solid var(--border);}
.btn{display:inline-flex;align-items:center;gap:6px;padding:8px 14px;border-radius:var(--radius-sm);font-family:var(--font-body);font-size:13px;font-weight:500;border:1px solid var(--border-strong);background:var(--white);color:var(--text-primary);transition:var(--transition);white-space:nowrap;}
.btn:hover{background:var(--bg-elevated);border-color:var(--slate-30);}
.btn.primary{background:var(--copper);border-color:var(--copper);color:#fff;font-weight:600;}.btn.primary:hover{background:var(--copper-deep);}
.btn.slate{background:var(--slate);border-color:var(--slate);color:#fff;font-weight:600;}.btn.slate:hover{background:var(--slate-90);}
.btn.ghost{background:transparent;border-color:var(--border);color:var(--text-secondary);}.btn.ghost:hover{background:var(--bg-elevated);color:var(--text-primary);}

/* ===== Footer — mirror PM Command ===== */
.footer{grid-area:footer;padding:18px 48px;background:var(--bg-elevated);border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;font-size:12px;color:var(--text-muted);}
.footer-brand{display:flex;align-items:center;gap:8px;}.footer-mark{width:14px;height:14px;}.footer-mark polygon{fill:var(--copper);}
.footer .links{display:flex;gap:22px;align-items:center;}.footer .links a{font-weight:500;color:var(--text-secondary);}.footer .links a:hover{color:var(--copper);}
.footer .mono{font-family:var(--font-mono);}

/* ===== Launcher (Command Center) — identical to PM Command ===== */
.launcher{background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);width:min(680px,100%);max-height:90vh;overflow-y:auto;}
.lx-head{display:flex;align-items:center;gap:14px;padding:22px 26px;background:var(--slate);color:var(--white);border-radius:var(--radius-lg) var(--radius-lg) 0 0;position:relative;}
.lx-mark{height:38px;width:auto;}.lx-mark polygon{fill:var(--copper);}
.lx-eyebrow{font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,255,255,.62);font-weight:600;}
.lx-title{font-family:var(--font-display);font-weight:700;font-size:20px;line-height:1.2;margin-top:2px;}
.lx-head .x{position:absolute;top:18px;right:20px;width:32px;height:32px;border-radius:var(--radius-sm);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);font-size:18px;color:rgba(255,255,255,.85);display:grid;place-items:center;cursor:pointer;}.lx-head .x:hover{background:rgba(255,255,255,.16);}
.lx-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:24px 26px;}
@media(max-width:560px){.lx-grid{grid-template-columns:1fr;}}
.lx-tile{border:1px solid var(--border-strong);border-radius:var(--radius);padding:18px;cursor:pointer;transition:var(--transition);background:var(--bg-elevated);}
.lx-tile:hover{border-color:var(--copper);background:var(--bg-card-hover);transform:translateY(-1px);box-shadow:var(--shadow-sm);}
.lx-tile.here{border-left:3px solid var(--copper);}
.lx-tile.pending{opacity:.74;}.lx-tile.pending:hover{transform:none;border-color:var(--border-accent);}
.lx-glyph{font-size:22px;line-height:1;color:var(--copper);margin-bottom:11px;}
.lx-name{font-family:var(--font-display);font-weight:700;font-size:15px;color:var(--text-primary);display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.lx-desc{font-size:12.5px;color:var(--text-secondary);margin-top:7px;line-height:1.45;}
.lx-badge{font-size:9px;letter-spacing:.07em;text-transform:uppercase;font-weight:700;padding:2px 8px;border-radius:99px;}
.lx-badge.bhere{background:var(--copper-soft);color:var(--copper-deep);border:1px solid var(--copper-edge);}
.lx-badge.bsoon{background:var(--warning-bg);color:var(--warning);border:1px solid rgba(201,155,69,.32);}
.lx-foot{padding:14px 26px 22px;font-size:12px;color:var(--text-muted);border-top:1px solid var(--border);line-height:1.5;}

/* ===== Toast (parity with PM Command's toast pattern) ===== */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--slate);color:#fff;padding:11px 18px;border-radius:8px;font-size:13px;font-weight:500;box-shadow:0 14px 34px rgba(0,0,0,.30);z-index:200;opacity:0;transition:opacity .2s;}
.toast.show{opacity:1;}

@media(max-width:900px){.app{grid-template-columns:1fr;grid-template-areas:"header" "main" "footer";}.sidebar{display:none;}.kpi-grid{grid-template-columns:1fr 1fr;}.dept-row{grid-template-columns:1fr;}.header-meta .meta-item{display:none;}}

/* ---- logo-as-refresh + LL snake ---- */
.brand-logo-btn{background:none;border:0;padding:0;margin:0;cursor:pointer;display:inline-flex;line-height:0}
.brand-logo-btn:focus{outline:none}
.brand-mark .ll-fill{fill:var(--copper,#B87333);transition:opacity .25s}
.brand-mark .ll-snake{fill:none;stroke:none}
.brand-logo-btn:hover .ll-fill{fill:#9A5F26}
.brand-logo-btn.refreshing .ll-fill{opacity:.20}
.brand-logo-btn.refreshing .ll-snake{stroke:#EBB079;stroke-width:7;stroke-linejoin:round;stroke-linecap:round;animation:llsnake 1.05s linear infinite}