/* ============================================================
   INTRADAY PRO TERMINAL — Theme tokens & base (Sprint 11 redesign)
   Rebuilt to match the reference dashboard image. Pure CSS, no framework.
   ============================================================ */
:root {
  /* Surfaces */
  --bg-0: #03101F;      /* app background */
  --bg-1: #062138;      /* panels */
  --bg-2: #083049;      /* raised cards / rows */
  --bg-3: #16203400;    /* transparent hover base */
  --bg-hover: #0B3A57;
  --bg-inset: #020A16;  /* wells, chart bg */
  --bg-header: #041828;

  /* Lines */
  --line: #12496E;
  --line-soft: #0C3350;
  --line-strong: #1B6493;

  /* Text */
  --text-0: #E6F3FB;    /* primary */
  --text-1: #A9C4D6;    /* secondary */
  --text-2: #7FA3BC;    /* muted */
  --text-3: #4A7089;    /* faint */

  /* Market semantics */
  --up: #2EE5C8;
  --up-2: #4FF0D6;
  --up-soft: rgba(46, 229, 200, 0.12);
  --up-line: rgba(46, 229, 200, 0.38);
  --down: #FF6B8A;
  --down-2: #FF87A0;
  --down-soft: rgba(255, 107, 138, 0.12);
  --down-line: rgba(255, 107, 138, 0.38);
  --flat: #7FA3BC;

  /* Accents */
  --teal: #3FB9FF;          /* active nav / primary accent */
  --teal-2: #2EE5C8;
  --teal-soft: rgba(63, 185, 255, 0.14);
  --accent: #FFC94B;        /* amber (WATCH, sim) */
  --accent-soft: rgba(255, 201, 75, 0.14);
  --info: #3FB9FF;
  --info-soft: rgba(63, 185, 255, 0.14);
  --purple: #8FA6FF;
  --purple-soft: rgba(143, 166, 255, 0.16);
  --sim: #FFC94B;

  /* EMA palette (chart) */
  --ema9: #f59e0b;
  --ema20: #3b82f6;
  --ema50: #ef4444;
  --ema200: #a855f7;

  /* Typography */
  --font-ui: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-disp: "Chakra Petch", "Inter", sans-serif;
  --font-mono: "IBM Plex Mono", "JetBrains Mono", "SF Mono", "Consolas", monospace;

  /* Metrics */
  --h-header: 62px;
  --h-newsbar: 34px;
  --w-sidebar: 210px;
  --w-sidebar-collapsed: 62px;
  --radius: 10px;
  --radius-sm: 7px;
  --gap: 12px;
  --shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  --glow-up: rgba(46,229,200,.45); --glow-dn: rgba(255,107,138,.4);
  --glow-amber: rgba(255,201,75,.4); --glow-cyan: rgba(63,185,255,.5);
}

/* ------------------------------ LIGHT THEME ------------------------------ */
/* One override block — every component reads the same variables, so flipping
   the class on <body> re-skins the whole terminal without touching a panel.
   Market semantics (up/down/accents) keep their hues; only surfaces, lines and
   text invert. The chart canvas keeps its own dark inset (charts read better
   dark, and the candle themes are tuned for it). */
body.theme-light {
  --bg-0: #f2f4f8;
  --bg-1: #ffffff;
  --bg-2: #f5f7fb;
  --bg-hover: #eaeef5;
  --bg-inset: #e8ecf3;
  --bg-header: #ffffff;

  --line: #d8dfea;
  --line-soft: #e4e9f1;
  --line-strong: #c3cddd;

  --text-0: #17202e;
  --text-1: #3d4a5f;
  --text-2: #6d7a92;
  --text-3: #9aa6ba;

  --up-soft: rgba(22, 158, 108, 0.12);
  --down-soft: rgba(214, 48, 58, 0.10);
  --teal-soft: rgba(13, 148, 136, 0.12);
  --accent-soft: rgba(217, 144, 15, 0.14);

  --shadow: 0 8px 30px rgba(23, 32, 46, 0.14);
}
/* The chart well stays dark in light mode: candle palettes are dark-tuned. */
body.theme-light .chart-wrap { background: #0d1220; border-radius: 8px; }

/* ---------------------------- COLOURFUL THEMES --------------------------- */
/* The user's ask: "I need colourful terminal" — deep TINTED darks, so every
   panel takes the hue while numbers stay readable and the market up/down
   semantics keep their meaning. Same variable contract as light/dark: one
   class on <body> re-skins everything. */

/* OCEAN — deep navy blues, cyan accents. */
body.theme-ocean {
  /* 🌊 OCEAN SIGNAL — the flagship skin */
  --bg-0: #03101F; --bg-1: #062138; --bg-2: #083049;
  --bg-hover: #0B3A57; --bg-inset: #020A16; --bg-header: #041828;
  --line: #12496E; --line-soft: #0C3350; --line-strong: #1B6493;
  --text-0: #E6F3FB; --text-1: #A9C4D6; --text-2: #7FA3BC; --text-3: #4A7089;
  --teal-soft: rgba(63, 185, 255, 0.14); --accent-soft: rgba(255, 201, 75, 0.16);
  --shadow: 0 10px 34px rgba(1, 8, 18, 0.6);
}
/* ROYAL — deep purples, violet accents. */
body.theme-royal {
  --bg-0: #140b26; --bg-1: #1c1136; --bg-2: #241745;
  --bg-hover: #2f1f57; --bg-inset: #170d2e; --bg-header: #180e2f;
  --line: #3a2866; --line-soft: #2c1e50; --line-strong: #4f3a85;
  --text-0: #f2ecff; --text-1: #d3c6ee; --text-2: #a291c9; --text-3: #77689d;
  --teal-soft: rgba(167, 139, 250, 0.16); --accent-soft: rgba(192, 132, 252, 0.18);
  --shadow: 0 10px 34px rgba(10, 4, 24, 0.65);
}
/* FOREST — deep greens, mint accents. */
body.theme-forest {
  --bg-0: #07170f; --bg-1: #0b2116; --bg-2: #0f2a1c;
  --bg-hover: #153a27; --bg-inset: #091c12; --bg-header: #091b11;
  --line: #1e4530; --line-soft: #163524; --line-strong: #2c5f43;
  --text-0: #eafff3; --text-1: #bfe6cf; --text-2: #85b499; --text-3: #5c8570;
  --teal-soft: rgba(52, 211, 153, 0.15); --accent-soft: rgba(52, 211, 153, 0.18);
  --shadow: 0 10px 34px rgba(2, 16, 8, 0.6);
}
/* SUNSET — warm charcoal, amber/orange accents. */
body.theme-sunset {
  --bg-0: #1c1008; --bg-1: #26160c; --bg-2: #301c10;
  --bg-hover: #402715; --bg-inset: #20120a; --bg-header: #21130a;
  --line: #4a2e1a; --line-soft: #392313; --line-strong: #654028;
  --text-0: #fff3e8; --text-1: #eed4bd; --text-2: #c2a086; --text-3: #93755c;
  --teal-soft: rgba(251, 146, 60, 0.15); --accent-soft: rgba(251, 191, 36, 0.18);
  --shadow: 0 10px 34px rgba(20, 8, 0, 0.65);
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--bg-0);
  color: var(--text-0);
  font-family: var(--font-ui);
  font-size: 13px; line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body { overflow: hidden; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: 600; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul { margin: 0; padding: 0; list-style: none; }
table { border-collapse: collapse; width: 100%; }

.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.up { color: var(--up); }
.down { color: var(--down); }
.flat { color: var(--flat); }
.muted { color: var(--text-2); }
.dim { color: var(--text-3); }
.right { text-align: right; }
.nowrap { white-space: nowrap; }
.tnum { font-variant-numeric: tabular-nums; }

/* Scrollbars */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #30425f; }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

/* Simulated-data badge */
.sim-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 9px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--sim); background: var(--accent-soft);
  border: 1px solid rgba(245, 166, 35, 0.3);
  padding: 1px 6px; border-radius: 4px; cursor: help;
}
.sim-badge::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--sim); }

:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Toasts */
.toasts { position: fixed; right: 16px; bottom: 46px; display: flex; flex-direction: column; gap: 8px; z-index: 60; }
.toast { background: var(--bg-2); border: 1px solid var(--line-strong); border-left: 3px solid var(--teal);
  border-radius: 8px; padding: 9px 13px; font-size: 12px; color: var(--text-0); box-shadow: var(--shadow);
  max-width: 320px; animation: toastin .2s ease; }
@keyframes toastin { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }