/* ====================================================================
   DESIGN TOKENS — Single source of truth for all colours
   Extracted from chart.html (the canonical dark theme)

   Usage:  var(--bg-base)  /  var(--text-primary)  /  etc.
   Every page should reference these tokens, never raw hex values.

   To add a light theme later:
     [data-theme="light"] { --bg-base: #f5f5f7; ... }
   ==================================================================== */

:root {

  /* ── Backgrounds (darkest → lightest) ── */
  --bg-base:        #08080e;   /* body / deepest layer                */
  --bg-panel:       #06060c;   /* panels, header, sidebars            */
  --bg-surface:     #0a0a14;   /* inputs, controls, cards             */
  --bg-elevated:    #14141e;   /* hover states, active inputs, menus  */
  --bg-chart:       #0e1118;   /* chart area / canvas background      */
  --bg-overlay:     #0c0c16;   /* overlays, feed item hover           */
  --bg-modal:       #0e0e1a;   /* modals, popovers, context menus     */
  --bg-table-head:  #0e0e16;   /* table header rows                   */
  --bg-table-hover: #0e0e18;   /* table row hover                     */

  /* ── Text (brightest → dimmest) ── */
  --text-primary:   #e0e0e8;   /* body text, main content             */
  --text-secondary: #c8c8d0;   /* supporting text, dropdown items     */
  --text-muted:     #888888;   /* labels, inactive UI, axis text      */
  --text-dim:       #555555;   /* placeholders, disabled, timestamps  */
  --text-ghost:     #333333;   /* barely visible, scrollbar thumbs    */
  --text-bright:    #ffffff;   /* headings, active/hover states       */
  --text-inverse:   #000000;   /* text on bright backgrounds          */

  /* ── Borders (subtle → prominent) ── */
  --border-subtle:  #1a1a24;   /* fine dividers, header borders       */
  --border-primary: #1e1e2e;   /* panel edges, section dividers       */
  --border-input:   #2a2a3a;   /* input borders, filter separators    */
  --border-strong:  #334155;   /* elevated borders, dropdown edges    */

  /* ── Scrollbar ── */
  --scrollbar-track: #0a0a10;
  --scrollbar-thumb: #2a2a3a;
  --scrollbar-hover: #3a3a4a;

  /* ── Status: positive / negative (softer, desaturated) ── */
  --color-positive:       #26a69a;   /* up / buy / bullish              */
  --color-positive-bold:  #22c55e;   /* strong positive (live dot, %)   */
  --color-positive-dark:  #056656;   /* positive backgrounds, candle up */
  --color-positive-bg:    #064e3b;   /* badge/chip backgrounds          */

  --color-negative:       #ef5350;   /* down / sell / bearish            */
  --color-negative-bold:  #ef4444;   /* strong negative (alerts, errors) */
  --color-negative-dark:  #b22833;   /* negative backgrounds, candle dn  */
  --color-negative-bg:    #7f1d1d;   /* badge/chip backgrounds           */

  /* ── Accent: primary (amber/gold — current, user reviewing) ── */
  --accent:            #f59e0b;
  --accent-hover:      #d97706;
  --accent-text:       #fbbf24;   /* lighter amber for small text     */
  --accent-bg:         rgba(245, 158, 11, 0.06);  /* tint for hovers */
  --accent-bg-active:  rgba(245, 158, 11, 0.10);  /* tint for active */
  --accent-border:     rgba(245, 158, 11, 0.44);  /* focus rings     */

  /* ── Accent: secondary (blue — used for checkboxes, single sweeps) ── */
  --accent2:           #60a5fa;
  --accent2-bold:      #3b82f6;
  --accent2-bg:        rgba(96, 165, 250, 0.12);
  --accent2-border:    rgba(96, 165, 250, 0.44);

  /* ── Sweep event type colours ── */
  --color-daily:    #f59e0b;   /* daily / clusterbomb — amber   */
  --color-single:   #3b82f6;   /* single sweeps — blue          */
  --color-rare:     #a78bfa;   /* rare sweeps — purple          */
  --color-rare-lt:  #c4b5fd;   /* rare light (text, markers)    */
  --color-monster:  #f97316;   /* monster sweeps — orange        */
  --color-cb:       #eab308;   /* clusterbomb markers — gold     */

  /* ── Momentum histogram (TTM Squeeze) ── */
  --mom-pos-rise:   #0097a7;   /* aqua — positive rising    */
  --mom-pos-fall:   #1848cc;   /* blue — positive falling   */
  --mom-neg-fall:   #b22833;   /* red — negative falling    */
  --mom-neg-rise:   #fbc02d;   /* yellow — negative rising  */

  /* ── Squeeze state dots ── */
  --sqz-off:        #388e3c;   /* green — no squeeze  */
  --sqz-mid:        #b22833;   /* red — mid squeeze   */
  --sqz-high:       #f57c00;   /* orange — high       */
  --sqz-low:        #363a45;   /* dark — low squeeze  */

  /* ── Chart: moving averages & overlays ── */
  --ma-30w:         #ff8c00;   /* 30-week / 200-day MA      */
  --ma-50d:         #0097a7;   /* 50-day SMA                */
  --ma-200d:        #b22833;   /* 200-day SMA               */
  --bb-band:        #b2af9d;   /* Bollinger Band lines      */
  --bb-mid:         #FF9800;   /* Bollinger mid line         */
  --vwap:           #22c55e;   /* VWAP line                  */

  /* ── Chart: candles (default theme) ── */
  --candle-up:       #056656;
  --candle-up-wick:  #056656;
  --candle-down:     #b22833;
  --candle-down-wick:#b22833;

  /* ── Chart: grid & axes ── */
  --chart-grid:        #1a1a26;
  --chart-border:      #1e1e2e;
  --chart-axis-text:   #888888;
  --chart-crosshair:   rgba(245, 158, 11, 0.20);

  /* ── Chart: volume ── */
  --volume-line:     rgba(245, 158, 11, 0.8);
  --volume-fill:     rgba(245, 158, 11, 0.7);

  /* ── Shadows ── */
  --shadow-dropdown:  rgba(0, 0, 0, 0.6);
  --shadow-modal:     rgba(0, 0, 0, 0.8);
  --shadow-tooltip:   rgba(0, 0, 0, 0.92);

  /* ── Branding: Darkpool pool/ladder logo ── */
  --brand-red:       #c44448;
  --brand-red-light: #d55558;
  --brand-red-glow:  rgba(196, 68, 72, 0.65);

  /* ── Live status ── */
  --live-connected:  #22c55e;
  --live-offline:    #555555;
  --live-glow:       rgba(34, 197, 94, 0.6);

  /* ── MTF timeframe colours ── */
  --tf-1h:   #00bcd4;
  --tf-4h:   #2962ff;
  --tf-8h:   #9c27b0;
  --tf-1d:   #e6c619;
  --tf-2d:   #ff9800;
  --tf-3d:   #8bc34a;
  --tf-5d:   #800000;
  --tf-1w:   #e040fb;
  --tf-6w:   #009688;
  --tf-1m:   #ef5350;
  --tf-3m:   #ffffff;

  /* ── Overlay palette (multi-ticker chart overlays) ── */
  --overlay-1:  #60a5fa;
  --overlay-2:  #fbbf24;
  --overlay-3:  #34d399;
  --overlay-4:  #f87171;
  --overlay-5:  #a78bfa;
  --overlay-6:  #fb923c;
  --overlay-7:  #f472b6;
  --overlay-8:  #22d3ee;
  --overlay-9:  #c084fc;
  --overlay-10: #2dd4bf;
}


/* ====================================================================
   LIGHT THEME — FT-inspired warm off-white
   Activated by <html data-theme="light">
   ==================================================================== */

[data-theme="light"] {

  /* ── Backgrounds ── */
  --bg-base:        #F8F5F0;   /* warm parchment                      */
  --bg-panel:       #F0ECE4;   /* panels, header, sidebars            */
  --bg-surface:     #FFFFFF;   /* inputs, controls, cards             */
  --bg-elevated:    #E8E4DC;   /* hover states, active inputs, menus  */
  --bg-chart:       #F5F2EC;   /* chart area — warm off-white          */
  --bg-overlay:     #F4F0E8;   /* overlays, feed item hover           */
  --bg-modal:       #FFFFFF;   /* modals, popovers, context menus     */
  --bg-table-head:  #EDE9E0;   /* table header rows                   */
  --bg-table-hover: #F4F0E8;   /* table row hover                     */

  /* ── Text ── */
  --text-primary:   #33302E;   /* warm charcoal                       */
  --text-secondary: #5C5854;   /* mid-weight labels                   */
  --text-muted:     #8C8680;   /* soft stone                          */
  --text-dim:       #B0AAA2;   /* placeholders                        */
  --text-ghost:     #D0CBC4;   /* barely visible                      */
  --text-bright:    #1A1816;   /* headings, active states             */
  --text-inverse:   #FFFFFF;   /* text on dark accents                */

  /* ── Borders ── */
  --border-subtle:  #E0DCD4;   /* fine dividers                       */
  --border-primary: #D4CFC6;   /* panel edges                         */
  --border-input:   #C8C2B8;   /* input borders                       */
  --border-strong:  #A8A198;   /* elevated borders                    */

  /* ── Scrollbar ── */
  --scrollbar-track: #F0ECE4;
  --scrollbar-thumb: #C8C2B8;
  --scrollbar-hover: #A8A198;

  /* ── Status: darker for legibility on light bg ── */
  --color-positive:       #0C7A6E;
  --color-positive-bold:  #15803D;
  --color-positive-dark:  #166534;
  --color-positive-bg:    #DCFCE7;

  --color-negative:       #B91C1C;
  --color-negative-bold:  #991B1B;
  --color-negative-dark:  #7F1D1D;
  --color-negative-bg:    #FEE2E2;

  /* ── Accent: darken slightly for contrast on light ── */
  --accent:            #D97706;
  --accent-hover:      #B45309;
  --accent-text:       #92400E;
  --accent-bg:         rgba(217, 119, 6, 0.08);
  --accent-bg-active:  rgba(217, 119, 6, 0.14);
  --accent-border:     rgba(217, 119, 6, 0.50);

  /* ── Accent2: blue ── */
  --accent2:           #2563EB;
  --accent2-bold:      #1D4ED8;
  --accent2-bg:        rgba(37, 99, 235, 0.08);
  --accent2-border:    rgba(37, 99, 235, 0.40);

  /* ── Sweep event colours (richer for light bg) ── */
  --color-daily:    #D97706;
  --color-single:   #2563EB;
  --color-rare:     #7C3AED;
  --color-rare-lt:  #6D28D9;
  --color-monster:  #EA580C;
  --color-cb:       #CA8A04;

  /* ── Momentum histogram ── */
  --mom-pos-rise:   #0E7490;
  --mom-pos-fall:   #1E40AF;
  --mom-neg-fall:   #B91C1C;
  --mom-neg-rise:   #CA8A04;

  /* ── Squeeze state dots ── */
  --sqz-off:        #16A34A;
  --sqz-mid:        #DC2626;
  --sqz-high:       #EA580C;
  --sqz-low:        #A8A198;

  /* ── Chart ── */
  --candle-up:       #15803D;
  --candle-up-wick:  #166534;
  --candle-down:     #B91C1C;
  --candle-down-wick:#991B1B;

  --chart-grid:        #E8E4DC;
  --chart-border:      #D4CFC6;
  --chart-axis-text:   #8C8680;
  --chart-crosshair:   rgba(217, 119, 6, 0.25);

  --volume-line:     rgba(217, 119, 6, 0.6);
  --volume-fill:     rgba(217, 119, 6, 0.3);

  /* ── Shadows (softer for light) ── */
  --shadow-dropdown:  rgba(0, 0, 0, 0.12);
  --shadow-modal:     rgba(0, 0, 0, 0.20);
  --shadow-tooltip:   rgba(0, 0, 0, 0.75);

  /* ── Branding: keep red logo ── */
  --brand-red:       #c44448;
  --brand-red-light: #d55558;
  --brand-red-glow:  rgba(196, 68, 72, 0.40);

  /* ── Live status ── */
  --live-connected:  #16A34A;
  --live-offline:    #A8A198;
  --live-glow:       rgba(22, 163, 74, 0.4);
}


/* ====================================================================
   LIGHT THEME OVERRIDES — Catch hardcoded colours across all pages
   These use higher specificity + !important to override inline <style>
   blocks that haven't been migrated to tokens yet.
   ==================================================================== */

/* ── Body & scrollbars ── */
[data-theme="light"] body {
  background: var(--bg-base) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] ::-webkit-scrollbar-track { background: var(--scrollbar-track) !important; }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb) !important; }
[data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover) !important; }
[data-theme="light"] * { scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track) !important; }

/* ── Panels, sidebars ── */
[data-theme="light"] .left-panel,
[data-theme="light"] .right-panel,
[data-theme="light"] .filter-col {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}

/* ── Chart area ── */
[data-theme="light"] .chart-area,
[data-theme="light"] .chart-container,
[data-theme="light"] .chart-wrap {
  background: var(--bg-chart) !important;
  border-color: var(--border-primary) !important;
}

/* ── Headers, toolbars, sub-bars ── */
[data-theme="light"] .header-row2,
[data-theme="light"] .header-row3,
[data-theme="light"] .chart-toolbar,
[data-theme="light"] .sweep-toolbar {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}

/* ── Inputs, selects, buttons ── */
[data-theme="light"] select,
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="number"],
[data-theme="light"] input[type="date"] {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

/* ── Tables ── */
[data-theme="light"] th {
  background: var(--bg-table-head) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] td {
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] tr:hover td {
  background: var(--bg-table-hover) !important;
}

/* ── Dropdowns, modals, menus ── */
[data-theme="light"] .dropdown-menu,
[data-theme="light"] .sweep-dd-menu,
[data-theme="light"] .ind-dd-menu,
[data-theme="light"] .more-menu,
[data-theme="light"] .settings-modal {
  background: var(--bg-modal) !important;
  border-color: var(--border-input) !important;
  box-shadow: 0 8px 24px var(--shadow-dropdown) !important;
}

/* ── Cards, stat boxes ── */
[data-theme="light"] .tracker-card,
[data-theme="light"] .stat-box,
[data-theme="light"] .flow-card {
  background: var(--bg-surface) !important;
  border-color: var(--border-primary) !important;
}

/* ── HUD overlay rows ── */
[data-theme="light"] .hud-row {
  background: rgba(248, 245, 240, 0.92) !important;
  border-color: var(--border-primary) !important;
}

/* ── TTM Squeeze pane ── */
[data-theme="light"] .ttm-container {
  background: var(--bg-chart) !important;
  border-color: var(--border-primary) !important;
}

/* ── Panel tabs ── */
[data-theme="light"] .panel-tab {
  color: var(--text-muted) !important;
}
[data-theme="light"] .panel-tab:hover {
  color: var(--text-primary) !important;
}
[data-theme="light"] .panel-tab.active {
  color: var(--accent) !important;
}

/* ── Flow, feed items ── */
[data-theme="light"] .flow-row,
[data-theme="light"] .feed-item,
[data-theme="light"] .trade-feed-item {
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .flow-row:hover,
[data-theme="light"] .feed-item:hover {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .flow-row .card-ticker,
[data-theme="light"] .flow-row .rank,
[data-theme="light"] .flow-row .card-notional,
[data-theme="light"] .flow-row .card-time {
  color: var(--text-primary) !important;
}
[data-theme="light"] .flow-row .row-price {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .flow-row .row-gain {
  color: var(--text-muted);
}
[data-theme="light"] .flow-row .row-gain.pos {
  color: var(--color-positive) !important;
}
[data-theme="light"] .flow-row .row-gain.neg {
  color: var(--color-negative) !important;
}
[data-theme="light"] .flow-row .row-details,
[data-theme="light"] .flow-row .card-type {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .flow-row.hero-row .rank {
  color: var(--accent) !important;
}

/* ── Overlay feed (sweep trade feed in overlay tab) ── */
[data-theme="light"] .tf-summary {
  background: var(--bg-surface) !important;
  border-color: var(--border-subtle) !important;
  color: #555 !important;
}
[data-theme="light"] .tf-summary-val {
  color: var(--text-bright) !important;
}
[data-theme="light"] .tf-item {
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .tf-item:hover {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .tf-time {
  color: #555 !important;
}
[data-theme="light"] .tf-ticker-tag {
  color: var(--text-bright) !important;
}
[data-theme="light"] .tf-notional {
  color: #555 !important;
}
[data-theme="light"] .tf-item.big .tf-notional {
  color: var(--accent) !important;
}
[data-theme="light"] .tf-item.big .tf-time {
  color: var(--accent) !important;
}
[data-theme="light"] .tf-details {
  color: #888 !important;
}
[data-theme="light"] .tf-type.dp {
  background: rgba(37, 99, 235, 0.08) !important;
  color: #2563EB !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
}
[data-theme="light"] .tf-type.lit {
  background: rgba(13, 148, 136, 0.08) !important;
  color: #0D9488 !important;
  border-color: rgba(13, 148, 136, 0.25) !important;
}
[data-theme="light"] .feed-time {
  color: #555 !important;
}
[data-theme="light"] .feed-ticker {
  color: var(--text-bright) !important;
}
[data-theme="light"] .feed-notional {
  color: var(--accent) !important;
}
[data-theme="light"] #overlayFeedSection {
  border-color: var(--border-subtle) !important;
}

/* ── Bubble tooltip ── */
[data-theme="light"] #tooltipDiv {
  background: rgba(248, 245, 240, 0.96) !important;
  border-color: var(--border-input) !important;
  color: var(--text-bright) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.12) !important;
}

/* ── Chart events (London Open, NYSE Open, price alerts) ── */
[data-theme="light"] .chart-event .ce-label {
  color: #2A2725 !important;
  text-shadow: none !important;
}

/* ── Ticker list ── */
[data-theme="light"] .ticker-list-item {
  color: var(--text-secondary) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .ticker-list-item:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-bright) !important;
}
[data-theme="light"] .ticker-list-item.active {
  background: var(--accent-bg-active) !important;
}

/* ── Generic button overrides ── */
[data-theme="light"] .sweep-btn,
[data-theme="light"] .ind-btn,
[data-theme="light"] .sweep-dd-btn,
[data-theme="light"] .ctrl-btn,
[data-theme="light"] .seg-ctrl button,
[data-theme="light"] .page-btn {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-input) !important;
}

/* ── Tooltip ── */
[data-theme="light"] .tooltip {
  background: rgba(26, 24, 22, 0.92) !important;
  color: #fff !important;
}

/* ====================================================================
   CHART PAGE — Light theme overrides for hardcoded chart.html styles
   ==================================================================== */

/* ── Chart sub-header (ticker box, dropdowns, controls) ── */
[data-theme="light"] .header {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .header input[type="text"] {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .header select {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .header-title {
  color: var(--accent) !important;
}
[data-theme="light"] .hdr-sep {
  background: var(--border-input) !important;
}
[data-theme="light"] .hdr-rank-ctrl {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .hdr-rank-input {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .hdr-rank-label {
  color: var(--text-muted) !important;
}
[data-theme="light"] .hdr-rank-dash {
  color: var(--text-dim) !important;
}

/* ── Sweep / indicator dropdown menus ── */
[data-theme="light"] .sweep-dd-menu,
[data-theme="light"] .ind-menu {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  box-shadow: 0 8px 24px var(--shadow-dropdown) !important;
}
[data-theme="light"] .sweep-dd-btn,
[data-theme="light"] .ind-btn {
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .sweep-dd-item,
[data-theme="light"] .ind-item {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .sweep-dd-item:hover,
[data-theme="light"] .ind-item:hover {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .sweep-dd-item .sw-range input,
[data-theme="light"] .lyr-cfg input[type="number"],
[data-theme="light"] .sweep-filter input[type="number"] {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

/* ── Sweep mode buttons ── */
[data-theme="light"] .sweep-mode-btn {
  background: var(--bg-surface) !important;
  color: var(--text-dim) !important;
  border-color: var(--border-input) !important;
}

/* ── Ticker overlay (top-right of chart: ticker name + company) ── */
[data-theme="light"] #tickerOverlay .overlay-ticker {
  color: rgba(26, 24, 22, 0.40) !important;
}
[data-theme="light"] #tickerOverlay .overlay-name {
  color: rgba(26, 24, 22, 0.30) !important;
}

/* ── Price change colours (ticker list) — darker for light bg ── */
[data-theme="light"] .tl-change.pos,
[data-theme="light"] .tl-ext.pos {
  color: var(--color-positive) !important;
}
[data-theme="light"] .tl-change.neg,
[data-theme="light"] .tl-ext.neg {
  color: var(--color-negative) !important;
}
[data-theme="light"] .tl-price,
[data-theme="light"] .tl-price .d-up,
[data-theme="light"] .tl-price .d-dn,
[data-theme="light"] .tl-price .d-fade,
[data-theme="light"] .tl-price .d-n {
  color: var(--text-secondary) !important;
}

/* ── Ticker list item text ── */
[data-theme="light"] .ticker-list-item .tl-ticker {
  color: var(--text-primary) !important;
}

/* ── Ticker list active: softer highlight ── */
[data-theme="light"] .ticker-list-item.active {
  background: rgba(217, 119, 6, 0.07) !important;
  border-right-color: var(--accent) !important;
}

/* ── Ticker group dividers ── */
[data-theme="light"] .ticker-group-divider {
  color: var(--text-secondary) !important;
  border-color: var(--border-subtle) !important;
}

/* ── Placeholder buttons ── */
[data-theme="light"] .placeholder-btn {
  background: var(--bg-surface) !important;
  color: var(--text-dim) !important;
  border-color: var(--border-input) !important;
}

/* ── Left panel background + border ── */
[data-theme="light"] .left-col {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}

/* ── Right panel (flow) ── */
[data-theme="light"] .right-col {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}

/* ── Settings modal ── */
[data-theme="light"] .stg-overlay {
  background: rgba(0, 0, 0, 0.25) !important;
}
[data-theme="light"] .stg-modal {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  box-shadow: 0 16px 48px var(--shadow-modal) !important;
}
[data-theme="light"] .stg-header,
[data-theme="light"] .stg-footer {
  border-color: var(--border-primary) !important;
}

/* ── HUD items ── */
[data-theme="light"] .hud-item {
  color: var(--text-muted) !important;
}

/* ── Scrollbar track for ticker list ── */
[data-theme="light"] .ticker-list {
  background: var(--bg-panel) !important;
}

/* ── Chart settings gear button ── */
[data-theme="light"] .settings-gear-btn {
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .settings-gear-btn:hover {
  color: var(--accent) !important;
}

/* ── Add ticker (+) button & overlay toggle buttons ── */
[data-theme="light"] .overlay-toggle-btn {
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .overlay-toggle-btn:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
[data-theme="light"] .overlay-toggle-btn.active {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: var(--accent-bg-active) !important;
}

/* ── Flow tab: day headers, collapse buttons, mode buttons, selects ── */
[data-theme="light"] .flow-day-header {
  color: var(--text-secondary) !important;
  background: var(--bg-panel) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .overlay-day-header {
  color: var(--text-secondary) !important;
  background: var(--bg-panel) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .flow-collapse-btn {
  background: var(--bg-surface) !important;
  color: var(--text-dim) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .flow-collapse-btn:hover {
  color: var(--accent) !important;
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .flow-mode-btn {
  background: var(--bg-surface) !important;
  color: var(--text-dim) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .flow-mode-btn:hover {
  color: var(--accent) !important;
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .flow-mode-btn.active {
  color: var(--accent) !important;
  background: var(--accent-bg-active) !important;
}
[data-theme="light"] #flowlistSelect {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .flow-star-btn {
  background: rgba(185, 28, 28, 0.06) !important;
  border-color: rgba(185, 28, 28, 0.25) !important;
  color: #B91C1C !important;
}

/* ── Flow feed items & summary ── */
[data-theme="light"] .tf-summary {
  background: var(--bg-elevated) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-muted) !important;
}
[data-theme="light"] .tf-summary-val {
  color: var(--text-primary) !important;
}
[data-theme="light"] .tf-item {
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .tf-item:hover {
  background: var(--bg-elevated) !important;
}

/* ── Overlay tab: group headers, rows, dots ── */
[data-theme="light"] .ticker-group-hdr span {
  color: var(--text-muted) !important;
}
[data-theme="light"] .ticker-group-hdr:hover span {
  color: var(--text-primary) !important;
}
[data-theme="light"] .ticker-row:hover {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .ticker-label {
  color: var(--text-primary) !important;
}
[data-theme="light"] #tabOverlay.active {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track) !important;
}

/* ── Overlay section headers (inline styles in HTML) ── */
[data-theme="light"] .overlay-section > div[style] {
  color: var(--text-secondary) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] #overlayFeedSection {
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] #overlayFeedSection > div[style] {
  color: var(--text-secondary) !important;
}

/* ── HUD rows (events, rank, overlay, percentile, dollar) ── */
[data-theme="light"] .hud-row {
  background: rgba(245, 242, 236, 0.92) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .hud-label {
  color: #555 !important;
}

/* ── Events HUD — darker text for legibility ── */
[data-theme="light"] #eventsHud .ehud-item {
  color: #555 !important;
}
[data-theme="light"] #eventsHud .ehud-item:hover {
  color: var(--text-primary) !important;
}
[data-theme="light"] #eventsHud .ehud-item.active {
  color: #C2410C !important;
  background: rgba(194, 65, 12, 0.10) !important;
}

/* ── Other HUD items (rank, overlay, pctl, dollar) ── */
[data-theme="light"] .rhud-item,
[data-theme="light"] .ohud-item,
[data-theme="light"] .phud-item,
[data-theme="light"] .dhud-item {
  color: #555 !important;
}
[data-theme="light"] .rhud-item:hover,
[data-theme="light"] .ohud-item:hover,
[data-theme="light"] .phud-item:hover,
[data-theme="light"] .dhud-item:hover {
  color: var(--text-primary) !important;
}
[data-theme="light"] .rhud-item.active {
  color: var(--accent) !important;
  background: var(--accent-bg-active) !important;
}
[data-theme="light"] .ohud-item.active {
  color: var(--accent2) !important;
  background: var(--accent2-bg) !important;
}

/* ── Panel tabs border ── */
[data-theme="light"] .panel-tabs {
  border-color: var(--border-primary) !important;
}

/* ── Watchlist select ── */
[data-theme="light"] #watchlistSelect {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

/* ── Add section button (dashed) ── */
[data-theme="light"] .add-section-btn {
  border-color: var(--border-input) !important;
  color: var(--text-dim) !important;
}
[data-theme="light"] .add-section-btn:hover {
  color: var(--text-primary) !important;
  border-color: var(--text-muted) !important;
}

/* ── Collapse panel button ── */
[data-theme="light"] .collapse-btn {
  background: var(--bg-panel) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-input) !important;
}

/* ====================================================================
   CHAT — Light theme
   ==================================================================== */

/* Chat passive messages (floating over chart when toggled off) */
[data-theme="light"] .chat-passive-msg {
  color: var(--text-primary) !important;
  text-shadow: 0 1px 3px rgba(248,245,240,0.9), 0 0 8px rgba(248,245,240,0.7) !important;
}

/* Chat box container */
[data-theme="light"] #chatBox {
  background: rgba(248, 245, 240, 0.95) !important;
  border-color: var(--border-input) !important;
  box-shadow: 0 8px 32px var(--shadow-dropdown) !important;
}

/* Chat room tabs bar */
[data-theme="light"] .chat-rooms {
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .chat-room-pinned {
  background: rgba(240, 236, 228, 0.98) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .chat-room-tab {
  color: var(--text-dim) !important;
}
[data-theme="light"] .chat-room-tab:hover {
  color: var(--text-primary) !important;
}
[data-theme="light"] .chat-room-tab.active {
  color: var(--accent) !important;
  border-bottom-color: var(--accent) !important;
}

/* Chat messages area */
[data-theme="light"] .chat-messages {
  scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track) !important;
}
[data-theme="light"] .chat-messages::-webkit-scrollbar-track {
  background: var(--scrollbar-track) !important;
}
[data-theme="light"] .chat-messages::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb) !important;
}
[data-theme="light"] .chat-msg .cm-time {
  color: var(--text-dim) !important;
}
[data-theme="light"] .chat-msg .cm-text {
  color: var(--text-primary) !important;
}

/* Chat input */
[data-theme="light"] .chat-input {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .chat-input:focus {
  border-top-color: var(--accent) !important;
  background: var(--bg-surface) !important;
}
[data-theme="light"] .chat-input::placeholder {
  color: var(--text-dim) !important;
}

/* Chat context menu */
[data-theme="light"] #chatRoomMenu {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  box-shadow: 0 4px 16px var(--shadow-dropdown) !important;
}
[data-theme="light"] #chatRoomMenu .crm-item {
  color: var(--text-secondary) !important;
}
[data-theme="light"] #chatRoomMenu .crm-item:hover {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] #chatRoomMenu .crm-sep {
  background: var(--border-subtle) !important;
}

/* Chat resize / reset handles */
[data-theme="light"] #chatBox .chat-resize::after {
  border-color: var(--text-dim) !important;
}
[data-theme="light"] #chatBox .chat-reset {
  color: var(--text-dim) !important;
}

/* React picker */
[data-theme="light"] .react-picker {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
}

/* ====================================================================
   FLOW CARDS — Light theme (warm tint, not pure white)
   ==================================================================== */

[data-theme="light"] .flow-card {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .flow-card:hover {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .flow-card.active {
  border-color: var(--accent) !important;
}
[data-theme="light"] .flow-card .card-ticker,
[data-theme="light"] .flow-card .rank,
[data-theme="light"] .flow-card .card-notional,
[data-theme="light"] .flow-card .card-time,
[data-theme="light"] .flow-card .card-percentile {
  color: var(--text-primary) !important;
}
[data-theme="light"] .flow-card .card-row2,
[data-theme="light"] .flow-card .card-row3 {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .flow-card .card-name {
  color: var(--text-muted) !important;
}
[data-theme="light"] .flow-card .card-label,
[data-theme="light"] .flow-card .card-daily-notional {
  color: var(--text-primary) !important;
}
[data-theme="light"] .flow-card .card-daily-label {
  color: var(--text-muted) !important;
}
[data-theme="light"] .flow-card .card-ref {
  color: var(--text-dim) !important;
}
[data-theme="light"] .flow-card .card-star {
  color: var(--text-dim) !important;
}
[data-theme="light"] .flow-card .pct-move.positive {
  color: var(--color-positive) !important;
}
[data-theme="light"] .flow-card .pct-move.negative {
  color: var(--color-negative) !important;
}


/* ====================================================================
   CROSS-PAGE LIGHT OVERRIDES — Common dark patterns caught broadly
   ==================================================================== */

/* ── All buttons with dark backgrounds ── */
[data-theme="light"] .btn-action,
[data-theme="light"] .btn-secondary,
[data-theme="light"] .btn-pine,
[data-theme="light"] .btn-configure,
[data-theme="light"] .filter-toggle,
[data-theme="light"] .tab-btn,
[data-theme="light"] .ac-btn,
[data-theme="light"] .tracker-tab,
[data-theme="light"] .chart-setting-btn,
[data-theme="light"] .tracker-filter-btn,
[data-theme="light"] .info-btn,
[data-theme="light"] .action-btn,
[data-theme="light"] .ss-btn,
[data-theme="light"] .exclude-chip,
[data-theme="light"] .period-btn,
[data-theme="light"] .nav-link {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .btn-action:hover,
[data-theme="light"] .btn-secondary:hover,
[data-theme="light"] .btn-pine:hover,
[data-theme="light"] .btn-configure:hover,
[data-theme="light"] .filter-toggle:hover,
[data-theme="light"] .tab-btn:hover,
[data-theme="light"] .ac-btn:hover,
[data-theme="light"] .chart-setting-btn:hover,
[data-theme="light"] .tracker-filter-btn:hover,
[data-theme="light"] .info-btn:hover,
[data-theme="light"] .action-btn:hover,
[data-theme="light"] .ss-btn:hover,
[data-theme="light"] .exclude-chip:hover,
[data-theme="light"] .period-btn:hover,
[data-theme="light"] .nav-link:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-bright) !important;
}

/* Active states — keep accent colours but fix backgrounds */
[data-theme="light"] .filter-toggle.active,
[data-theme="light"] .tab-btn.active,
[data-theme="light"] .ac-btn.active,
[data-theme="light"] .chart-setting-btn.active,
[data-theme="light"] .action-btn.running {
  background: var(--accent-bg-active) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}

/* Type-specific active filter buttons — keep their colours */
[data-theme="light"] .tracker-filter-btn.flt-daily.active,
[data-theme="light"] .tab-btn.dtab-daily.active {
  color: var(--color-daily) !important;
  border-color: var(--color-daily) !important;
  background: rgba(217, 119, 6, 0.08) !important;
}
[data-theme="light"] .tracker-filter-btn.flt-single.active,
[data-theme="light"] .tab-btn.dtab-single.active {
  color: var(--accent2) !important;
  border-color: var(--accent2-bold) !important;
  background: var(--accent2-bg) !important;
}
[data-theme="light"] .tracker-filter-btn.flt-rare.active,
[data-theme="light"] .tab-btn.dtab-rare.active {
  color: var(--color-rare) !important;
  border-color: var(--color-rare) !important;
  background: rgba(124, 58, 237, 0.08) !important;
}
[data-theme="light"] .tracker-filter-btn.flt-all.active,
[data-theme="light"] .tab-btn.dtab-all.active {
  color: var(--text-primary) !important;
  border-color: var(--border-strong) !important;
  background: var(--bg-elevated) !important;
}

/* ── Tracker tabs ── */
[data-theme="light"] .tracker-tab {
  color: var(--text-muted) !important;
  background: transparent !important;
}
[data-theme="light"] .tracker-tab.active {
  color: var(--accent) !important;
  background: transparent !important;
}
[data-theme="light"] .tracker-tab .tab-count {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
}
[data-theme="light"] .tracker-tab.active .tab-count {
  background: var(--accent-bg-active) !important;
  color: var(--accent) !important;
}

/* ── Tracker cards ── */
[data-theme="light"] .tracker-card {
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .tracker-card:hover {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .tracker-card.selected {
  background: var(--accent-bg-active) !important;
}

/* ── Header row2/row3 (sub-headers across pages) ── */
[data-theme="light"] .header-row2,
[data-theme="light"] .header-row3 {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .header-row2 select,
[data-theme="light"] .header-row3 select,
[data-theme="light"] .header-row2 input,
[data-theme="light"] .header-row3 input {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .header-row3 label {
  color: var(--text-muted) !important;
}

/* ── Filter dividers ── */
[data-theme="light"] .filter-divider,
[data-theme="light"] .section-divider {
  background: var(--border-primary) !important;
}

/* ── Asset class bar ── */
[data-theme="light"] .asset-class-bar {
  border-color: var(--border-primary) !important;
}

/* ── Left panel & filter column (sweeps, RS) ── */
[data-theme="light"] .left-panel {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .left-panel-header {
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .filter-col {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}

/* ====================================================================
   CHART SETTINGS MODAL — Light theme
   ==================================================================== */

[data-theme="light"] .stg-tab {
  color: var(--text-muted) !important;
  border-color: transparent !important;
  background: transparent !important;
}
[data-theme="light"] .stg-tab:hover {
  color: var(--text-primary) !important;
}
[data-theme="light"] .stg-tab.active {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
  background: var(--accent-bg-active) !important;
}
[data-theme="light"] .stg-body {
  background: var(--bg-surface) !important;
}
[data-theme="light"] .stg-section-title {
  color: var(--accent) !important;
}
[data-theme="light"] .stg-label {
  color: var(--text-muted) !important;
}
[data-theme="light"] .stg-select,
[data-theme="light"] .stg-input {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .stg-cycle {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .stg-cycle:hover {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .stg-cycle.active {
  background: var(--accent-bg-active) !important;
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
[data-theme="light"] .stg-toggle {
  background: var(--bg-elevated) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .stg-toggle.on {
  background: var(--color-positive-dark) !important;
  border-color: var(--color-positive) !important;
}
[data-theme="light"] .stg-divider {
  background: var(--border-primary) !important;
}
[data-theme="light"] .stg-footer-btn {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .stg-footer-btn:hover {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .stg-footer-btn.primary {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
  border-color: var(--accent) !important;
}
[data-theme="light"] .stg-color-swatch {
  border-color: var(--border-input) !important;
}
[data-theme="light"] .stg-preset-chip {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .stg-preset-chip.active {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}

/* ====================================================================
   EXPLORER (sweeps_unified) — Light theme specifics
   ==================================================================== */

/* ── Tracker card text (white on light bg fix) ── */
[data-theme="light"] .tracker-card .tk-ticker,
[data-theme="light"] .tracker-card .tk-name,
[data-theme="light"] .tracker-card .tk-val,
[data-theme="light"] .tracker-card .tk-notional {
  color: var(--text-primary) !important;
}
[data-theme="light"] .tracker-card .tk-label,
[data-theme="light"] .tracker-card .tk-date,
[data-theme="light"] .tracker-card .tk-meta {
  color: var(--text-muted) !important;
}

/* ── Pine script menu ── */
[data-theme="light"] .pine-menu {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .pine-menu select {
  background: var(--bg-elevated) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .pine-menu label {
  color: var(--text-muted) !important;
}

/* ── Fetch progress ── */
[data-theme="light"] .fetch-progress {
  background: var(--bg-elevated) !important;
  border-color: var(--border-primary) !important;
}

/* ── Sub-pills ── */
[data-theme="light"] .sub-pill {
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-input) !important;
}

/* ── Detail table ── */
[data-theme="light"] .detail-table th {
  background: var(--bg-table-head) !important;
  color: var(--text-secondary) !important;
}
[data-theme="light"] .detail-table td {
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}

/* ── Stats bar ── */
[data-theme="light"] .stat-bar {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .stat-bar .stat-label {
  color: var(--text-muted) !important;
}
[data-theme="light"] .stat-bar .stat-val {
  color: var(--text-primary) !important;
}

/* ── API banner ── */
[data-theme="light"] .api-banner {
  background: rgba(217, 119, 6, 0.08) !important;
  border-color: var(--accent) !important;
  color: var(--accent-text) !important;
}

/* ====================================================================
   RS PAGE — Light theme specifics
   ==================================================================== */

/* ── RS table text ── */
[data-theme="light"] .ticker {
  color: var(--text-bright) !important;
}
[data-theme="light"] .price {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .change-up {
  color: var(--color-positive) !important;
}
[data-theme="light"] .change-down {
  color: var(--color-negative) !important;
}

/* ── RS badges — keep coloured but adjust for light bg ── */
[data-theme="light"] .rs-99 {
  background: rgba(251, 146, 36, 0.15) !important;
  color: #C2410C !important;
}
[data-theme="light"] .rs-90 {
  background: rgba(251, 191, 36, 0.12) !important;
  color: #92400E !important;
}
[data-theme="light"] .rs-80 {
  background: rgba(37, 99, 235, 0.10) !important;
  color: #1D4ED8 !important;
}
[data-theme="light"] .rs-70 {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
}
[data-theme="light"] .rs-low {
  background: var(--bg-elevated) !important;
  color: var(--text-dim) !important;
}

/* ── RS change ── */
[data-theme="light"] .rs-chg.up {
  color: var(--color-positive) !important;
}
[data-theme="light"] .rs-chg.down {
  color: var(--color-negative) !important;
}
[data-theme="light"] .rs-chg.flat {
  color: var(--text-dim) !important;
}

/* ── Saved search row ── */
[data-theme="light"] .saved-search-row {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .saved-search-row label {
  color: var(--text-muted) !important;
}
[data-theme="light"] .saved-search-row select {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

/* ── Right panel ── */
[data-theme="light"] .right-panel {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .right-panel-placeholder {
  color: var(--text-dim) !important;
}

/* ── Section titles ── */
[data-theme="light"] .section-title {
  color: var(--text-bright) !important;
}
[data-theme="light"] .section-title .count-badge {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
}

/* ── Stat boxes ── */
[data-theme="light"] .stat-box {
  background: var(--bg-surface) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .stat-label {
  color: var(--text-muted) !important;
}
[data-theme="light"] .stat-value {
  color: var(--text-bright) !important;
}

/* ── Chart containers (RS, detail) ── */
[data-theme="light"] .rs-chart-container,
[data-theme="light"] .chart-container-detail {
  background: var(--bg-chart) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .chart-header {
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .chart-header h3 {
  color: var(--text-bright) !important;
}
[data-theme="light"] .chart-header .sub {
  color: var(--text-muted) !important;
}

/* ── Sector bars ── */
[data-theme="light"] .sector-bar {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .sector-name {
  color: var(--text-muted) !important;
}

/* ── NH badge ── */
[data-theme="light"] .nh-badge {
  background: rgba(251, 146, 36, 0.15) !important;
  color: #C2410C !important;
}

/* ── WMA dots ── */
[data-theme="light"] .wma-na {
  background: var(--border-input) !important;
}

/* ── Modal ── */
[data-theme="light"] .modal {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .modal h2 {
  color: var(--text-bright) !important;
}
[data-theme="light"] .modal-close {
  color: var(--text-muted) !important;
}
[data-theme="light"] .modal-close:hover {
  color: var(--text-bright) !important;
}

/* ── Toast ── */
[data-theme="light"] .toast {
  background: var(--bg-surface) !important;
  color: var(--accent) !important;
  border-color: var(--border-input) !important;
  box-shadow: 0 4px 12px var(--shadow-dropdown) !important;
}

/* ── Explainer ── */
[data-theme="light"] .explainer-section p {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .explainer-section code {
  background: var(--bg-elevated) !important;
  color: var(--accent-text) !important;
}
[data-theme="light"] .explainer-formula {
  background: var(--bg-panel) !important;
  border-color: var(--border-input) !important;
}

/* ====================================================================
   WATCHLISTS PAGE — Light theme specifics
   ==================================================================== */

/* ── Main centre panel ── */
[data-theme="light"] .main {
  background: var(--bg-surface) !important;
  border-color: var(--border-primary) !important;
}

/* ── Left/mid panels ── */
[data-theme="light"] .panel-left,
[data-theme="light"] .panel-mid,
[data-theme="light"] .ovl-panel-left,
[data-theme="light"] .ovl-panel-mid {
  background: var(--bg-panel) !important;
}

/* ── Panel headers ── */
[data-theme="light"] .ph {
  color: var(--text-muted) !important;
}
[data-theme="light"] .ph button {
  color: var(--accent) !important;
}

/* ── Watchlist items ── */
[data-theme="light"] .wi {
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .wi .nm {
  color: var(--text-primary) !important;
}
[data-theme="light"] .wi .mt {
  color: var(--text-muted) !important;
}
[data-theme="light"] .wi.active {
  background: var(--accent-bg-active) !important;
}
[data-theme="light"] .wi-del {
  color: var(--text-ghost) !important;
}

/* ── Group items ── */
[data-theme="light"] .gi {
  border-color: var(--border-subtle) !important;
  color: var(--text-primary) !important;
}
[data-theme="light"] .gi .cnt {
  color: var(--text-muted) !important;
}
[data-theme="light"] .gi.active {
  background: var(--accent-bg-active) !important;
}

/* ── Ticker rows ── */
[data-theme="light"] .tr {
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .tr:hover {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .tr .tn {
  color: var(--text-primary) !important;
}
[data-theme="light"] .tr .ta {
  color: var(--text-muted) !important;
}
[data-theme="light"] .tr .tx {
  color: var(--text-dim) !important;
}

/* ── Ticker header ── */
[data-theme="light"] .tk-hdr {
  background: var(--bg-table-head) !important;
}

/* ── Tags (stock/ETF/index) ── */
[data-theme="light"] .ts {
  background: rgba(21, 128, 61, 0.10) !important;
  color: #15803D !important;
}
[data-theme="light"] .te {
  background: rgba(37, 99, 235, 0.10) !important;
  color: #1D4ED8 !important;
}
[data-theme="light"] .ti {
  background: rgba(217, 119, 6, 0.10) !important;
  color: #B45309 !important;
}

/* ── Paste/textarea ── */
[data-theme="light"] .paste {
  background: var(--bg-panel) !important;
}
[data-theme="light"] .paste textarea {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .paste textarea::placeholder {
  color: var(--text-dim) !important;
}
[data-theme="light"] .paste-hint {
  color: var(--text-dim) !important;
}
[data-theme="light"] .paste-row button {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
}

/* ── Move bar ── */
[data-theme="light"] .move-bar {
  background: var(--bg-panel) !important;
}
[data-theme="light"] .move-bar button {
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .move-bar button:hover {
  color: var(--accent) !important;
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .move-bar .label {
  color: var(--text-dim) !important;
}

/* ── Save bar ── */
[data-theme="light"] .save-bar {
  background: var(--bg-table-head) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .save-bar button {
  background: var(--accent-bg-active) !important;
  color: var(--accent) !important;
  border-color: var(--accent-border) !important;
}

/* ── Empty state ── */
[data-theme="light"] .empty {
  color: var(--text-dim) !important;
}

/* ── Tab buttons (watchlist page) ── */
[data-theme="light"] .tab-btn {
  color: var(--text-muted) !important;
}
[data-theme="light"] .tab-btn.active {
  color: var(--accent) !important;
}

/* ── Category rename ── */
[data-theme="light"] .cat-rename {
  color: var(--text-primary) !important;
}
[data-theme="light"] .cat-rename:hover {
  color: var(--accent) !important;
}


/* ====================================================================
   EVENT LOG — Light theme
   ==================================================================== */

[data-theme="light"] .row2-btn,
[data-theme="light"] .btn-save,
[data-theme="light"] .btn-del,
[data-theme="light"] .tf-toggle,
[data-theme="light"] .tf-all-btn,
[data-theme="light"] .dd-btn,
[data-theme="light"] .dd-controls button {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .row2-btn:hover,
[data-theme="light"] .btn-save:hover,
[data-theme="light"] .btn-del:hover,
[data-theme="light"] .tf-toggle:hover,
[data-theme="light"] .dd-btn:hover,
[data-theme="light"] .dd-controls button:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-bright) !important;
}
[data-theme="light"] .tf-toggle.active {
  background: var(--bg-elevated) !important;
  color: var(--text-bright) !important;
  border-color: var(--border-strong) !important;
}
[data-theme="light"] .tf-all-btn:hover {
  color: var(--accent) !important;
  border-color: var(--accent) !important;
}
[data-theme="light"] .dd-btn .active-name {
  color: var(--accent) !important;
}
[data-theme="light"] .dd-menu {
  background: var(--bg-surface) !important;
  border-color: var(--border-input) !important;
  box-shadow: 0 8px 24px var(--shadow-dropdown) !important;
}
[data-theme="light"] .dd-item {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .dd-item:hover {
  background: var(--bg-elevated) !important;
}
[data-theme="light"] .dd-item.wl-active {
  background: var(--accent-bg-active) !important;
  color: var(--accent) !important;
}
[data-theme="light"] .ticker-input {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .saved-select {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

/* ── Event log rows ── */
[data-theme="light"] .ev-row {
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .ev-row:hover {
  background: var(--bg-elevated) !important;
}

/* ── Session separators ── */
[data-theme="light"] .session-sep {
  background: var(--bg-panel) !important;
}

/* ====================================================================
   BACKTEST — Light theme
   ==================================================================== */

[data-theme="light"] .btn-add-cond {
  background: var(--bg-panel) !important;
  border-color: var(--border-input) !important;
  color: var(--text-dim) !important;
}
[data-theme="light"] .btn-add-cond:hover {
  border-color: var(--border-strong) !important;
  color: var(--text-muted) !important;
}
[data-theme="light"] .btn-sm {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .btn-sm:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-bright) !important;
}
[data-theme="light"] .btn-sm.danger {
  background: rgba(185, 28, 28, 0.06) !important;
  color: #B91C1C !important;
  border-color: rgba(185, 28, 28, 0.25) !important;
}
[data-theme="light"] .btn-sm.nuke {
  background: rgba(124, 58, 237, 0.06) !important;
  color: #7C3AED !important;
  border-color: rgba(124, 58, 237, 0.25) !important;
}
[data-theme="light"] .btn-run {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
}
[data-theme="light"] .btn-run:hover {
  background: var(--accent-hover) !important;
}

/* ── Condition/exit rows ── */
[data-theme="light"] .cond-row,
[data-theme="light"] .exit-row {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .cond-row:hover,
[data-theme="light"] .exit-row:hover {
  border-color: var(--border-input) !important;
}

/* ── Condition selects ── */
[data-theme="light"] .cond-sel,
[data-theme="light"] .filter-sel {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}

/* ── Condition joins ── */
[data-theme="light"] .cond-join.j-if {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
}

/* ── Stat cards ── */
[data-theme="light"] .stat-card {
  background: var(--bg-surface) !important;
  border-color: var(--border-primary) !important;
}

/* ── Panel titles ── */
[data-theme="light"] .bt-panel-title {
  color: var(--text-muted) !important;
}

/* ── Trade table ── */
[data-theme="light"] .trade-table th {
  background: var(--bg-table-head) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .trade-table th:hover {
  color: var(--accent) !important;
}
[data-theme="light"] .trade-table tbody tr:hover {
  background: var(--bg-table-hover) !important;
}
[data-theme="light"] .trade-table tbody tr.selected {
  background: var(--accent-bg-active) !important;
  border-left-color: var(--accent) !important;
}
[data-theme="light"] .trade-table .td-return.pos {
  color: var(--color-positive) !important;
}
[data-theme="light"] .trade-table .td-return.neg {
  color: var(--color-negative) !important;
}

/* ── Chart zoom buttons ── */
[data-theme="light"] .chart-zoom-btn {
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .chart-zoom-btn:hover {
  color: var(--text-primary) !important;
}

/* ── Pagination ── */
[data-theme="light"] .pag-btn {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .pag-btn:hover:not(:disabled) {
  background: var(--bg-elevated) !important;
  color: var(--text-bright) !important;
}

/* ── Adj button ── */
[data-theme="light"] .adj-btn {
  background: var(--bg-surface) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .adj-btn.active {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
  border-color: var(--accent) !important;
}

/* ── Run bar ── */
[data-theme="light"] .run-bar {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}

/* ── Chart panel ── */
[data-theme="light"] .chart-panel {
  background: var(--bg-panel) !important;
}
[data-theme="light"] .bt-chart-title {
  color: var(--text-secondary) !important;
}

/* ── Distribution bars — keep coloured ── */

/* ====================================================================
   SCREENER (search.html) — Light theme
   ==================================================================== */

[data-theme="light"] .btn-search {
  background: var(--accent) !important;
  color: var(--text-inverse) !important;
}
[data-theme="light"] .btn-search:hover {
  background: var(--accent-hover) !important;
}
[data-theme="light"] .btn-add,
[data-theme="light"] .btn-save-search {
  background: var(--bg-surface) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .btn-add:hover,
[data-theme="light"] .btn-save-search:hover {
  background: var(--bg-elevated) !important;
  color: var(--text-bright) !important;
}
[data-theme="light"] .btn-remove,
[data-theme="light"] .btn-del-search {
  background: rgba(185, 28, 28, 0.06) !important;
  color: #B91C1C !important;
  border-color: rgba(185, 28, 28, 0.25) !important;
}
[data-theme="light"] .join-and {
  background: #1D4ED8 !important;
  color: #fff !important;
}
[data-theme="light"] .join-or {
  background: #C2410C !important;
  color: #fff !important;
}

/* ── Criteria bar & results bar ── */
[data-theme="light"] .criteria-bar {
  background: var(--bg-panel) !important;
}
[data-theme="light"] .results-bar {
  background: var(--bg-panel) !important;
}
[data-theme="light"] .criteria-row select {
  background: var(--bg-surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-input) !important;
}
[data-theme="light"] .compound-sub {
  background: rgba(37, 99, 235, 0.06) !important;
  color: #1D4ED8 !important;
  border-color: rgba(37, 99, 235, 0.25) !important;
}

/* ── Results table ── */
[data-theme="light"] .results-table th {
  background: var(--bg-table-head) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .results-table th:hover {
  color: var(--accent) !important;
}
[data-theme="light"] .ticker-row {
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] .ticker-row:hover {
  background: var(--bg-table-hover) !important;
}
[data-theme="light"] .ticker-row .td-ticker {
  color: var(--text-bright) !important;
}
[data-theme="light"] .ticker-row .td-price {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .td-change.positive {
  color: var(--color-positive) !important;
}
[data-theme="light"] .td-change.negative {
  color: var(--color-negative) !important;
}

/* ── Ticker strip ── */
[data-theme="light"] .ticker-strip {
  background: var(--bg-panel) !important;
}

/* ── Enrichment rows ── */
[data-theme="light"] .enrichment-row td {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}

/* ── Indicator no-data/empty ── */
[data-theme="light"] .ind-nodata {
  background: var(--bg-table-head) !important;
}
[data-theme="light"] .ind-empty {
  background: var(--bg-panel) !important;
}

/* ====================================================================
   HVC — Light theme specifics
   ==================================================================== */

/* ── Ratio & gap badges — adjust for light bg ── */
[data-theme="light"] .ratio-badge {
  background: rgba(251, 191, 36, 0.12) !important;
  color: #92400E !important;
}
[data-theme="light"] .ratio-extreme {
  background: rgba(251, 146, 36, 0.15) !important;
  color: #C2410C !important;
}
[data-theme="light"] .gap-up {
  background: rgba(22, 163, 74, 0.10) !important;
  color: #15803D !important;
}
[data-theme="light"] .gap-down {
  background: rgba(185, 28, 28, 0.10) !important;
  color: #B91C1C !important;
}
[data-theme="light"] .gap-open {
  border-color: var(--accent) !important;
  color: var(--accent) !important;
}
[data-theme="light"] .gap-closed {
  border-color: var(--border-input) !important;
  color: var(--text-muted) !important;
}

/* ── Status badges ── */
[data-theme="light"] .status-live {
  background: rgba(22, 163, 74, 0.10) !important;
  color: #15803D !important;
  border-color: #15803D !important;
}
[data-theme="light"] .status-final {
  background: var(--bg-elevated) !important;
  color: var(--text-muted) !important;
  border-color: var(--border-input) !important;
}

/* ── Sub rows ── */
[data-theme="light"] .sub-row td {
  background: var(--bg-panel) !important;
}

/* ── Explainer visuals ── */
[data-theme="light"] .explainer-visual {
  background: var(--bg-panel) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] .explainer-bar.normal {
  background: var(--border-input) !important;
}

/* ====================================================================
   GLOBAL TABLE TEXT — Ensure readability on light backgrounds
   All pages use th/td with light text that becomes unreadable.
   ==================================================================== */

[data-theme="light"] th {
  background: var(--bg-table-head) !important;
  color: var(--text-secondary) !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] th:hover {
  color: var(--accent) !important;
}
[data-theme="light"] td {
  color: var(--text-primary) !important;
  border-color: var(--border-subtle) !important;
}
[data-theme="light"] tr:hover td {
  background: var(--bg-table-hover) !important;
}
[data-theme="light"] .ticker {
  color: var(--text-bright) !important;
}
[data-theme="light"] .price {
  color: var(--text-secondary) !important;
}
[data-theme="light"] .change-up {
  color: var(--color-positive) !important;
}
[data-theme="light"] .change-down {
  color: var(--color-negative) !important;
}

/* ====================================================================
   HOTKEY MODAL — Light theme
   ==================================================================== */
[data-theme="light"] #hotkeyModal {
  background: rgba(0,0,0,0.25) !important;
}
[data-theme="light"] #hotkeyModal .hk-box {
  background: var(--bg-surface) !important;
  border-color: var(--border-strong) !important;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15) !important;
}
[data-theme="light"] #hotkeyModal .hk-title {
  color: var(--text-primary) !important;
}
[data-theme="light"] #hotkeyModal .hk-section {
  color: #2563EB !important;
  border-color: var(--border-primary) !important;
}
[data-theme="light"] #hotkeyModal .hk-key {
  color: #B45309 !important;
}
[data-theme="light"] #hotkeyModal .hk-desc {
  color: var(--text-secondary) !important;
}
[data-theme="light"] #hotkeyModal .hk-close {
  color: var(--text-muted) !important;
}

/* ====================================================================
   HEADER LOGO — Light theme (burgundy bg, off-white text)
   ==================================================================== */
[data-theme="light"] .header-logo {
  background: rgb(117,28,31) !important;
}
[data-theme="light"] .header-logo h1 {
  color: #f0e6dc !important;
}

/* ====================================================================
   TTM SQUEEZE PANE — Light theme
   ==================================================================== */
[data-theme="light"] #ttmContainer {
  background: var(--bg-base) !important;
  border-top: 1px solid var(--border-primary) !important;
}