/* ===== Statement Analyzer — themed: light (default) / dark via CSS variables ===== */

/* ---------- LIGHT (default) ---------- */
:root, html[data-theme="light"] {
  --bg: #f4f6fb;
  --header-bg: rgba(255,255,255,.92);
  --line: #dbe3ef;
  --line-soft: #e6ebf3;
  --card: #ffffff;
  --card-border: #e2e8f0;
  --card-shadow: 0 10px 30px -20px rgba(15,30,61,.25);
  --panel: #ffffff;
  --banner: linear-gradient(90deg,#eef3fa,#f7f9fd);
  --ink-strong: #0a1428;
  --ink: #1e293b;
  --ink-soft: #334155;
  --muted: #64748b;
  --input-bg: #f1f5f9;
  --input-border: #cbd5e1;
  --btn2-bg: #e7ecf4;  --btn2-hover: #d9e1ee;  --btn2-ink: #122347;
  --seg-wrap: #cbd5e1;
  --seg-on-bg: #1a3161;  --seg-on-ink: #ffffff;
  --seg-off-bg: #f1f5f9; --seg-off-hover: #e2e8f0; --seg-off-ink: #334155;
  --drop-bg: #fbfcfe; --drop-border: #b9c6da; --drop-hover: #f2f6fc;
  --gold: #ca8a04;  --gold-ink: #a16207;
  --heat-empty: #e8edf5;
  --sel-bg: #31599f; --sel-ink: #fff;
  --scroll-thumb: #c3cede;
  --k-in: #15803d; --k-out: #dc2626; --k-net: #a16207; --k-bal: #1d4ed8; --k-rate: #0f766e;
  --c-in: #15803d; --c-out: #dc2626;
  --kpi-grad: linear-gradient(160deg,#ffffff,#f1f5fa);
  --srcrow-bg: #f1f5f9; --srcrow-hover: #e8edf6; --srcbar-bg: #dde5f0;
  --tt-bg: #ffffff; --tt-border: #cbd5e1; --tt-title: #0a1428; --tt-body: #334155;
  --pill-out-bg: rgba(220,38,38,.10);  --pill-out-ink: #b91c1c;
  --pill-in-bg:  rgba(22,163,74,.12);  --pill-in-ink:  #15803d;
  --pill-ch-bg:  rgba(49,89,159,.14);  --pill-ch-ink:  #1d4ed8;
  --toast-bg: #ffffff; --toast-border: #16a34a; --toast-ink: #14532d;
  /* chart tokens */
  --ch-tick: #475569;
  --ch-grid: rgba(15,30,61,.08);
  --ch-card: #ffffff;
  --ch-steel: #31599f;
  --ch-green: #16a34a;
  --ch-red: #dc2626;
  --ch-gold: #ca8a04;
  --ch-fill-green: rgba(22,163,74,.10);
  --ch-fill-red: rgba(220,38,38,.08);
  --ch-fill-blue-top: rgba(49,89,159,.22);
  --ch-fill-blue-bot: rgba(49,89,159,.02);
  --ch-fill-cum-top: rgba(22,163,74,.18);
  --ch-fill-cum-bot: rgba(22,163,74,0);
  --ch-bar-green: rgba(22,163,74,.8);
  --ch-bar-red: rgba(220,38,38,.75);
  color-scheme: light;
}

/* ---------- DARK ---------- */
html[data-theme="dark"] {
  --bg: #060d1f;
  --header-bg: rgba(10,20,40,.90);
  --line: rgba(26,49,97,.6);
  --line-soft: #16294f;
  --card: #0e1a33;
  --card-border: #16294f;
  --card-shadow: 0 10px 30px -18px rgba(0,0,0,.8);
  --panel: #0a1428;
  --banner: linear-gradient(90deg,#122347,#0a1428);
  --ink-strong: #ffffff;
  --ink: #e2e8f0;
  --ink-soft: #cbd5e1;
  --muted: #94a3b8;
  --input-bg: #122347;
  --input-border: #1a3161;
  --btn2-bg: #1a3161;  --btn2-hover: #24447f;  --btn2-ink: #e2e8f0;
  --seg-wrap: #1a3161;
  --seg-on-bg: #24447f;  --seg-on-ink: #ffffff;
  --seg-off-bg: #122347; --seg-off-hover: #1a3161; --seg-off-ink: #cbd5e1;
  --drop-bg: rgba(10,20,40,.6); --drop-border: #24447f; --drop-hover: #0e1a33;
  --gold: #eab308;  --gold-ink: #facc15;
  --heat-empty: #122347;
  --sel-bg: #31599f; --sel-ink: #fff;
  --scroll-thumb: #1a3161;
  --k-in: #22c55e; --k-out: #f87171; --k-net: #facc15; --k-bal: #93c5fd; --k-rate: #2dd4bf;
  --c-in: #22c55e; --c-out: #f87171;
  --kpi-grad: linear-gradient(160deg,#0e1a33,#0a1428);
  --srcrow-bg: #122347; --srcrow-hover: #16294f; --srcbar-bg: #0a1428;
  --tt-bg: rgba(10,20,40,.96); --tt-border: #24447f; --tt-title: #ffffff; --tt-body: #e2e8f0;
  --pill-out-bg: rgba(220,38,38,.15);  --pill-out-ink: #f87171;
  --pill-in-bg:  rgba(22,163,74,.15);  --pill-in-ink:  #4ade80;
  --pill-ch-bg:  rgba(49,89,159,.25);  --pill-ch-ink:  #93c5fd;
  --toast-bg: #0a1428; --toast-border: #16a34a; --toast-ink: #dcfce7;
  --ch-tick: #94a3b8;
  --ch-grid: rgba(148,163,184,.10);
  --ch-card: #0e1a33;
  --ch-steel: #31599f;
  --ch-green: #22c55e;
  --ch-red: #f87171;
  --ch-gold: #facc15;
  --ch-fill-green: rgba(34,197,94,.10);
  --ch-fill-red: rgba(248,113,113,.10);
  --ch-fill-blue-top: rgba(96,165,250,.28);
  --ch-fill-blue-bot: rgba(49,89,159,.02);
  --ch-fill-cum-top: rgba(34,197,94,.25);
  --ch-fill-cum-bot: rgba(34,197,94,0);
  --ch-bar-green: rgba(34,197,94,.85);
  --ch-bar-red: rgba(248,113,113,.85);
  color-scheme: dark;
}

::selection { background:var(--sel-bg); color:var(--sel-ink); }
html { font-size:17px; }
body { background:var(--bg); color:var(--ink); transition: background .25s, color .25s; }

body::-webkit-scrollbar, .scroll-slim::-webkit-scrollbar { width:8px; height:8px; }
.scroll-slim::-webkit-scrollbar-thumb { background:var(--scroll-thumb); border-radius:8px; }

/* ---------- semantic helpers (theme-aware) ---------- */
.t-header  { background:var(--header-bg); border-bottom:1px solid var(--line); }
.t-panel   { background:var(--panel); border:1px solid var(--line); }
.t-banner  { background:var(--banner); border:1px solid var(--line); }
.t-input   { background:var(--input-bg); border:1px solid var(--input-border); color:var(--ink); }
.t-input:focus { border-color:var(--gold); outline:none; }
.t-muted   { color:var(--muted); }
.t-soft    { color:var(--ink-soft); }
.t-strong  { color:var(--ink-strong); }
.t-gold    { color:var(--gold-ink); }
.t-danger  { background:var(--pill-out-bg); color:var(--pill-out-ink); }
.t-error   { background:var(--pill-out-bg); color:var(--pill-out-ink); }
.t-btn2    { background:var(--btn2-bg); color:var(--btn2-ink); }
.t-btn2:hover { background:var(--btn2-hover); }
.t-segwrap { border:1px solid var(--seg-wrap); }
.t-seg-on  { background:var(--seg-on-bg); color:var(--seg-on-ink); }
.t-seg-off { background:var(--seg-off-bg); color:var(--seg-off-ink); }
.t-seg-off:hover { background:var(--seg-off-hover); }
.t-drop    { background:var(--drop-bg); }
.t-drop:hover { border-color:var(--gold)!important; background:var(--drop-hover); }
.t-th      { color:var(--muted); border-bottom:1px solid var(--line); }
.t-icon    { stroke:var(--ink-strong); }

/* ---------- cards ---------- */
.card {
  background:var(--card);
  border:1px solid var(--card-border);
  border-radius:1rem;
  box-shadow:var(--card-shadow);
  transition: background .25s, border-color .25s;
}
.card-head { padding:1rem 1rem .25rem; }
.card-head h2 { font-size:.95rem; font-weight:700; color:var(--ink-strong); }

.chart-wrap { position:relative; padding:.5rem .75rem 1rem; }

.dropzone.dragover { border-color:var(--gold)!important; background:var(--card)!important; transform:scale(1.005); }

/* ---------- KPI cards ---------- */
.kpi { border-radius:1rem; padding:1rem 1.1rem; border:1px solid var(--card-border); background:var(--kpi-grad); }
.kpi .k-label { font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; color:var(--muted); }
.kpi .k-value { font-size:1.35rem; font-weight:800; margin-top:.25rem; color:var(--ink-strong); }
.kpi .k-sub { font-size:.72rem; color:var(--muted); margin-top:.2rem; }
.kpi.in  { border-top:3px solid var(--k-in); } .kpi.in  .k-value { color:var(--k-in); }
.kpi.out { border-top:3px solid var(--k-out); } .kpi.out .k-value { color:var(--k-out); }
.kpi.net { border-top:3px solid var(--k-net); } .kpi.net .k-value { color:var(--k-net); }
.kpi.bal { border-top:3px solid var(--k-bal); } .kpi.bal .k-value { color:var(--k-bal); }
.kpi.rate { border-top:3px solid var(--k-rate); } .kpi.rate .k-value { color:var(--k-rate); }

/* ---------- source rows ---------- */
.srcrow { display:grid; grid-template-columns:1fr auto; gap:.25rem .75rem; align-items:center;
  padding:.55rem .7rem; border-radius:.6rem; background:var(--srcrow-bg); }
.srcrow:hover { background:var(--srcrow-hover); }
.srcrow .bar { grid-column:1/-1; height:5px; border-radius:99px; background:var(--srcbar-bg); overflow:hidden; }
.srcrow .bar i { display:block; height:100%; border-radius:99px; }
.srcrow .amt { font-variant-numeric:tabular-nums; font-weight:700; }

/* ---------- heatmap ---------- */
.heatgrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(34px,1fr)); gap:4px; padding:1rem 1rem 0; min-width:640px; }
.heatcell { aspect-ratio:1; border-radius:6px; background:var(--heat-empty); position:relative; cursor:default; }
html[data-theme="dark"] .heatcell { border:1px solid rgba(148,163,184,.25); }
.heatcell:hover { outline:2px solid var(--gold); outline-offset:1px; z-index:2; }
.heat-key { width:14px; height:14px; border-radius:4px; display:inline-block; }
/* heatmap ramp: lighter = smaller amounts, darker = bigger (both themes) */
html[data-theme="light"] .hk0{background:#e8f0fb} html[data-theme="light"] .hk1{background:#c9dcf3}
html[data-theme="light"] .hk2{background:#94b8e6} html[data-theme="light"] .hk3{background:#4f83d1}
html[data-theme="light"] .hk4{background:#1e3a8a}
html[data-theme="dark"] .hk0{background:#dbeafe} html[data-theme="dark"] .hk1{background:#93c5fd}
html[data-theme="dark"] .hk2{background:#60a5fa} html[data-theme="dark"] .hk3{background:#2563eb}
html[data-theme="dark"] .hk4{background:#1e40af}

/* ---------- heatmap tooltip ---------- */
.tt { position:fixed; z-index:60; pointer-events:none; background:var(--tt-bg); border:1px solid var(--tt-border);
  border-radius:.5rem; padding:.45rem .6rem; font-size:.72rem; color:var(--tt-body); box-shadow:0 8px 24px rgba(0,0,0,.25);
  max-width:280px; opacity:0; transition:opacity .12s; }
.tt.show { opacity:1; }
.tt b { color:var(--tt-title); }

/* ---------- table ---------- */
#txBody tr { border-bottom:1px solid var(--line-soft); }
#txBody tr:hover { background:var(--srcrow-bg); }
#txBody tr.op-transfer td { opacity:.62; }
body.page-dragover::after { content:''; position:fixed; inset:0; z-index:60; pointer-events:none;
  border:3px dashed var(--gold); background:rgba(250,204,21,.06); }
#txBody td { padding:.5rem .75rem; vertical-align:top; }
.num { font-variant-numeric:tabular-nums; white-space:nowrap; }
.pill { display:inline-block; padding:.12rem .5rem; border-radius:99px; font-size:.68rem; font-weight:600; white-space:nowrap; }
.pill.out { background:var(--pill-out-bg); color:var(--pill-out-ink); }
.pill.in  { background:var(--pill-in-bg);  color:var(--pill-in-ink); }
.pill.chan{ background:var(--pill-ch-bg);  color:var(--pill-ch-ink); }
th.sortable { cursor:pointer; user-select:none; }
th.sortable:hover { color:var(--gold-ink); }
th.sorted-asc::after { content:" ▲"; color:var(--gold-ink); }
th.sorted-desc::after { content:" ▼"; color:var(--gold-ink); }

.muted { color:var(--muted); }
.wrapdesc { max-width:280px; }

/* ---------- toast ---------- */
#toast { position:fixed; bottom:1.2rem; left:50%; transform:translateX(-50%); z-index:80;
  background:var(--toast-bg); border:1px solid var(--toast-border); color:var(--toast-ink); padding:.6rem 1rem; border-radius:.7rem;
  font-size:.85rem; opacity:0; pointer-events:none; transition:opacity .25s; }
#toast.show { opacity:1; }

/* ---------- spinner (LLM progress) ---------- */
.spinner { width:16px; height:16px; border-radius:50%; flex:none;
  border:2px solid var(--seg-wrap); border-top-color:var(--k-in); animation:spin .8s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.chg-row { display:flex; align-items:center; gap:.5rem; font-size:.78rem; padding:.3rem .5rem; border-radius:.45rem; background:var(--srcrow-bg); }
.chg-row .chg-name { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--ink); }
.chg-arrow { color:var(--muted); flex:none; }
.chg-cat { flex:none; font-weight:600; }

/* ---------- sticky filter bar (docks under header on scroll) ---------- */
#filterSentinel { height:0; }
.sticky-filters { position:sticky; top:var(--header-h, 64px); z-index:30; transition:box-shadow .2s, border-radius .2s; }
.sticky-filters.docked { border-radius:.9rem; box-shadow:0 6px 18px rgba(0,0,0,.18); margin:0 auto; max-width:100%; }
.sticky-filters.docked .sticky-hide { display:none; }

@media (max-width:640px){
  .kpi .k-value{font-size:1.05rem}
  .wrapdesc{max-width:150px}
}