/* =====================================================================
   Visora — theme tokens
   ---------------------------------------------------------------------
   Two themes (dark / light) x six accents. Everything else in the app
   reads ONLY these variables, so a new palette never needs a code change.

     <html data-theme="dark|light" data-accent="gold|blue|teal|indigo|emerald|rose">

   --on-accent  = the text colour that sits ON a solid accent background.
                  (it used to be hard-coded #20160a everywhere, which broke
                  as soon as the accent stopped being gold)
   --chart-*    = tokens Chart.js reads at draw time, so charts follow the
                  theme instead of staying dark-on-white.
   ===================================================================== */

:root{
  /* ---------- dark (default) ---------- */
  --bg:#0a0d13; --surface:#10141c; --surface2:#161b25; --raise:#1b2130;
  --line:#232a37; --line2:#2e3646;
  --txt:#d7dce4; --txt2:#aab3c2; --muted:#79839a; --faint:#565f72;
  --ok:#4fb0a5; --warn:#c9974a; --bad:#c76a6a; --info:#6b8cc7;
  --ok-dim:rgba(79,176,165,.14); --warn-dim:rgba(201,151,74,.15); --bad-dim:rgba(199,106,106,.15);
  --shadow:0 10px 34px rgba(0,0,0,.5);
  --code-bg:#0c0f16; --code-txt:#c8d3e2;
  --sel-ring:#ffffff;
  --scroll:#2e3646;
  /* the emoji faces are appended to BOTH stacks: Consolas has almost no emoji coverage, so
     every icon inside a mono element fell back to a flat monochrome glyph on Windows. */
  --mono:ui-monospace,"SF Mono","Cascadia Code","JetBrains Mono",Consolas,"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Segoe UI Symbol",monospace;
  --sans:"Inter",system-ui,"Segoe UI",Roboto,"Segoe UI Emoji","Apple Color Emoji","Noto Color Emoji","Segoe UI Symbol",sans-serif;
  /* charts */
  --chart-grid:rgba(120,131,154,.14);
  --chart-tick:#79839a;
  --chart-text:#aab3c2;
  --chart-border:#10141c;
  /* pdf (mirrors the theme unless the user pins one in Settings) */
  --pdf-bg:#0d1016; --pdf-card:#12161f; --pdf-panel:#0f131b; --pdf-line:#232a37; --pdf-line2:#2e3646;
  --pdf-txt:#d7dce4; --pdf-txt2:#c4ccd8; --pdf-muted:#aab3c2; --pdf-faint:#79839a;
  --pdf-head:#f2f4f8; --pdf-accent:#d8a24a; --pdf-accent-soft:#e2b866; --pdf-th:#1b2130;
}

/* ---------- light: a genuinely bright, calm workspace (no muddy mustard) ---------- */
:root[data-theme="light"]{
  --bg:#f1f4f9; --surface:#ffffff; --surface2:#f5f7fb; --raise:#ffffff;
  --line:#e3e8f0; --line2:#ccd4e0;
  --txt:#141b25; --txt2:#3b4553; --muted:#657182; --faint:#94a1b3;
  --ok:#0e8a78; --warn:#b07d1d; --bad:#c0392f; --info:#2f6fd0;
  --ok-dim:rgba(14,138,120,.12); --warn-dim:rgba(176,125,29,.13); --bad-dim:rgba(192,57,47,.11);
  --shadow:0 6px 22px rgba(24,38,64,.10), 0 1px 3px rgba(24,38,64,.06);
  --code-bg:#f3f6fa; --code-txt:#26303d;
  --sel-ring:#141b25;
  --scroll:#c3ccda;
  --chart-grid:rgba(70,86,110,.13);
  --chart-tick:#657182;
  --chart-text:#3b4553;
  --chart-border:#ffffff;
  --pdf-bg:#ffffff; --pdf-card:#fbfcfe; --pdf-panel:#f5f7fb; --pdf-line:#e3e8f0; --pdf-line2:#ccd4e0;
  --pdf-txt:#1c242f; --pdf-txt2:#39434f; --pdf-muted:#5b6675; --pdf-faint:#8390a2;
  --pdf-head:#0f1620; --pdf-th:#eef2f8;
}

/* =====================  ACCENTS  =====================
   Dark values first, then the light-theme override. --on-accent always
   guarantees a readable label on a filled accent button.               */

/* gold — the original Visora brand tone (default in dark) */
:root,
:root[data-accent="gold"]{ --accent:#d8a24a; --accent-dim:rgba(216,162,74,.14); --accent-line:rgba(216,162,74,.42); --on-accent:#20160a; }
:root[data-theme="light"][data-accent="gold"]{ --accent:#8a6410; --accent-dim:rgba(138,100,16,.11); --accent-line:rgba(138,100,16,.38); --on-accent:#ffffff; --pdf-accent:#8a6410; --pdf-accent-soft:#6d4f0c; }

/* blue — the light-theme default: clean, high contrast, zero mustard */
:root[data-accent="blue"]{ --accent:#74a9fb; --accent-dim:rgba(116,169,251,.15); --accent-line:rgba(116,169,251,.45); --on-accent:#07142a; }
:root[data-theme="light"][data-accent="blue"]{ --accent:#1c5cc4; --accent-dim:rgba(28,92,196,.10); --accent-line:rgba(28,92,196,.38); --on-accent:#ffffff; --pdf-accent:#1c5cc4; --pdf-accent-soft:#164a9e; }

/* teal */
:root[data-accent="teal"]{ --accent:#4fc7b4; --accent-dim:rgba(79,199,180,.15); --accent-line:rgba(79,199,180,.45); --on-accent:#04201c; }
:root[data-theme="light"][data-accent="teal"]{ --accent:#0d7d6d; --accent-dim:rgba(13,125,109,.11); --accent-line:rgba(13,125,109,.38); --on-accent:#ffffff; --pdf-accent:#0d7d6d; --pdf-accent-soft:#0a6558; }

/* indigo */
:root[data-accent="indigo"]{ --accent:#a297f8; --accent-dim:rgba(162,151,248,.15); --accent-line:rgba(162,151,248,.45); --on-accent:#100b2b; }
:root[data-theme="light"][data-accent="indigo"]{ --accent:#4740c9; --accent-dim:rgba(71,64,201,.10); --accent-line:rgba(71,64,201,.38); --on-accent:#ffffff; --pdf-accent:#4740c9; --pdf-accent-soft:#3a34a6; }

/* emerald */
:root[data-accent="emerald"]{ --accent:#63c983; --accent-dim:rgba(99,201,131,.15); --accent-line:rgba(99,201,131,.45); --on-accent:#062012; }
:root[data-theme="light"][data-accent="emerald"]{ --accent:#12764a; --accent-dim:rgba(18,118,74,.11); --accent-line:rgba(18,118,74,.38); --on-accent:#ffffff; --pdf-accent:#12764a; --pdf-accent-soft:#0e5f3b; }

/* rose */
:root[data-accent="rose"]{ --accent:#ec8ca3; --accent-dim:rgba(236,140,163,.15); --accent-line:rgba(236,140,163,.45); --on-accent:#2a0912; }
:root[data-theme="light"][data-accent="rose"]{ --accent:#b23755; --accent-dim:rgba(178,55,85,.10); --accent-line:rgba(178,55,85,.38); --on-accent:#ffffff; --pdf-accent:#b23755; --pdf-accent-soft:#8f2b44; }

/* ---------- light-theme surface corrections that variables alone can't reach ---------- */
:root[data-theme="light"] .topbar{ background:var(--surface); }
:root[data-theme="light"] td.cell.sel{ outline-color:var(--sel-ring); }
:root[data-theme="light"] .cm-bar{ color:#0f1620; box-shadow:0 1px 2px rgba(24,38,64,.18); }
:root[data-theme="light"] .cm-track{ background-color:rgba(28,92,196,.035); }
:root[data-theme="light"] .fl-bubble,
:root[data-theme="light"] .fl-pop,
:root[data-theme="light"] .mspop,
:root[data-theme="light"] .xl{ box-shadow:0 12px 34px rgba(24,38,64,.16); }
:root[data-theme="light"] .vm-back{ background:rgba(24,38,64,.38); }
:root[data-theme="light"] .cm-bar.cancelled{
  background:repeating-linear-gradient(45deg,#e7ebf2,#e7ebf2 5px,#d3dae5 5px,#d3dae5 10px)!important;
  color:#4b5566!important; box-shadow:inset 0 0 0 1px #b9c3d2; }
:root[data-theme="light"] #loginView{ background:
  radial-gradient(900px 500px at 70% -10%, var(--accent-dim), transparent 60%), var(--bg); }

/* ---------- base elements ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:var(--sans);background:var(--bg);color:var(--txt);font-size:13.5px;-webkit-font-smoothing:antialiased}
::selection{background:var(--accent-dim)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-thumb{background:var(--scroll);border-radius:6px}
::-webkit-scrollbar-track{background:transparent}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
button{font-family:var(--sans)}
button.act{background:var(--accent);color:var(--on-accent);border:0;padding:9px 16px;border-radius:8px;font-weight:700;cursor:pointer;font-size:12.5px}
button.act:hover{filter:brightness(1.07)}
button.act:disabled{opacity:.5;cursor:not-allowed}
button.ghost{background:var(--surface2);color:var(--txt);border:1px solid var(--line);padding:8px 13px;border-radius:8px;font-weight:600;cursor:pointer;font-size:12.5px}
button.ghost:hover{border-color:var(--line2)}
.fld{display:flex;flex-direction:column;gap:4px}
.fld label{font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:var(--faint)}
.fld input,.fld select{background:var(--surface2);border:1px solid var(--line);color:var(--txt);padding:8px 10px;border-radius:8px;font-size:12.5px;font-family:var(--mono)}
.fld input:focus{outline:2px solid var(--accent-line);outline-offset:0;border-color:var(--accent-line)}
.chip{padding:2px 9px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:.3px}
.c-ok{background:var(--ok-dim);color:var(--ok)}
.c-warn{background:var(--warn-dim);color:var(--warn)}
.c-bad{background:var(--bad-dim);color:var(--bad)}
.c-mut{background:var(--surface2);color:var(--muted);border:1px solid var(--line)}
.spin{display:inline-block;width:15px;height:15px;border:2px solid var(--line);border-top-color:var(--accent);border-radius:50%;animation:sp .7s linear infinite;vertical-align:middle}
@keyframes sp{to{transform:rotate(360deg)}}
.toast{position:fixed;bottom:22px;left:22px;background:var(--raise);border:1px solid var(--bad);color:var(--txt);padding:12px 18px;border-radius:10px;box-shadow:var(--shadow);z-index:400;display:none;max-width:420px;font-size:12.5px}
.toast.good{border-color:var(--ok)}
table{width:100%;border-collapse:collapse;font-size:12.5px}
thead th{position:sticky;top:0;background:var(--surface2);color:var(--muted);font-weight:600;text-align:left;padding:9px 12px;white-space:nowrap;border-bottom:1px solid var(--line);font-size:11px;letter-spacing:.3px}
tbody td{padding:8px 12px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap;font-family:var(--mono)}
tbody tr:hover{background:var(--surface2)}
tbody tr:last-child td{border-bottom:0}
pre.dax{background:var(--code-bg);border:1px solid var(--line);border-radius:10px;padding:14px;overflow:auto;font-family:var(--mono);font-size:12px;line-height:1.6;color:var(--code-txt);max-height:340px;white-space:pre-wrap}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}