/* Financials — redesign styling for the ported classic dashboard.
   Loaded by financials.html; all colours come from tokens.css. */

.fin-head{display:flex;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:2px}
.fin-head .eyebrow{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3)}
.fin-head h1{font-size:24px;font-weight:750;letter-spacing:-.02em;margin:3px 0 2px}
.fin-head .sub{font-size:13px;color:var(--ink-3);margin:0}

/* ── controls ── */
.fin-controls{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0 4px}
.fin-seg{display:inline-flex;background:var(--surface);border:1px solid var(--border-2);border-radius:10px;padding:3px;gap:2px}
.fin-seg button{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink-3);background:none;border:0;border-radius:7px;padding:6px 13px;cursor:pointer}
.fin-seg button:hover{color:var(--ink)}
.fin-seg button.on{background:var(--ink);color:#fff}
.fin-month{font:inherit;font-size:12.5px;font-weight:600;color:var(--ink);background:var(--surface);border:1px solid var(--border-2);border-radius:10px;padding:7px 12px;cursor:pointer}
.fin-toggle{margin-left:auto;display:flex;align-items:center;gap:9px;font-size:12px;color:var(--ink-3)}
.fin-toggle span.on{color:var(--ink);font-weight:600}
.fin-sw{position:relative;width:44px;height:24px;background:var(--surface-3);border-radius:20px;cursor:pointer;transition:background .15s;flex-shrink:0}
.fin-sw.on{background:var(--accent)}
.fin-sw::after{content:'';position:absolute;top:2px;left:2px;width:20px;height:20px;background:#fff;border-radius:50%;transition:left .15s;box-shadow:0 1px 3px rgba(20,24,40,.25)}
.fin-sw.on::after{left:22px}
.fin-sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* ── section titles ── */
.fin-sectitle{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);margin:26px 0 2px}

/* ── stat tiles ── */
.fin-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin:12px 0}
.fin-stat{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-lg);padding:15px 16px;box-shadow:var(--shadow-sm)}
.fin-stat .fin-n{font-size:24px;font-weight:750;line-height:1.1;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.fin-stat .fin-l{font-size:11.5px;color:var(--ink-3);margin-top:9px;display:flex;align-items:center;gap:6px;line-height:1.35}
.fin-stat .fin-subn{font-size:11px;color:var(--ink-4);margin-top:3px}
.fin-stat.warn{border-color:rgba(225,68,52,.35);background:var(--red-bg)}
.fin-stat.warn .fin-n{color:var(--red)}
.fin-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.fin-trend{font-size:12px;font-weight:700;margin-left:7px;white-space:nowrap;vertical-align:3px;letter-spacing:.01em}

.fin-note{font-size:11.5px;color:var(--ink-3);margin-top:8px;line-height:1.5}

/* ── per-client card ── */
.fin-card{padding:18px 20px;margin-top:16px}
.fin-ch{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.fin-cs{font-size:12px;color:var(--ink-3);margin-top:3px}

/* ── table ── */
.fin-tblwrap{overflow-x:auto}
.fin-tbl{width:100%;border-collapse:collapse;font-size:12.5px;margin-top:4px;font-variant-numeric:tabular-nums}
.fin-tbl th{text-align:right;font-size:10px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-3);padding:9px 10px;border-bottom:1px solid var(--border);cursor:pointer;white-space:nowrap;user-select:none}
.fin-tbl th:hover{color:var(--ink-2)}
.fin-tbl th.on{color:var(--accent)}
.fin-tbl th:first-child,.fin-tbl td:first-child{text-align:left}
.fin-tbl td{text-align:right;padding:9px 10px;border-bottom:1px solid var(--border);white-space:nowrap;color:var(--ink-2)}
.fin-tbl tr:hover td{background:var(--surface-1)}
.fin-tbl td.name{font-weight:650;color:var(--ink)}
.fin-tbl td.strong{font-weight:700;color:var(--ink)}
.fin-tbl td.lft{text-align:left}
.fin-tbl td.neg{color:var(--red)}
.fin-tbl td.posv{color:var(--accent);font-weight:650}
.fin-tbl td.warnv{color:var(--amber);font-weight:650}
.fin-empty{text-align:center;color:var(--ink-4);padding:22px}
.fin-brandtag{font-size:10.5px;font-weight:700;color:var(--ink-4)}
.fin-load{display:inline-block;min-width:34px;text-align:center;font-weight:700;border-radius:6px;padding:2px 6px;font-size:11px;color:var(--ink-2)}
.fin-sms{margin-left:5px}
.fin-cupd{font-size:11px;color:var(--ink-4);margin-top:14px;line-height:1.55}
.fin-cupd b{color:var(--ink-3)}

@media (max-width:1200px){ .fin-stats{grid-template-columns:repeat(2,1fr)} }
@media (max-width:640px){ .fin-stats{grid-template-columns:1fr} .fin-toggle{margin-left:0} }