/* Cadence: layered surfaces, generous rhythm, and TickerHub green. */
:root {
  color-scheme: dark;
  --bg: #0e0f12;
  --bg2: #14161a;
  --bg3: #1a1d22;
  --border: #22252b;
  --rule: #1b1e23;
  --text: #f0f1f3;
  --text-dim: #b9bdc4;
  --muted: #9296a0;
  --faint: #6b6f79;
  --accent: #22c55e;
  --accent-hi: #3ddc78;
  --accent-ink: #05210f;
  --accent-tint: rgba(34,197,94,.11);
  --accent-line: rgba(34,197,94,.30);
  --accent-ring: rgba(34,197,94,.16);
  --pos: #22c55e;
  --pos-tint: rgba(34,197,94,.14);
  --pos-line: rgba(34,197,94,.30);
  --neg: #ef4444;
  --neg-tint: rgba(239,68,68,.14);
  --neg-line: rgba(239,68,68,.30);
  --warn: #eab308;
  --warn-tint: rgba(234,179,8,.14);
  --warn-line: rgba(234,179,8,.30);
  --gold: var(--warn);
  --info: #60a5fa;
  --info-tint: rgba(96,165,250,.12);
  --info-line: rgba(96,165,250,.30);
  --overlay: rgba(0,0,0,.55);
  /* White plate behind company logos on the economic calendar cards. */
  --logo-plate: #ffffff;
  --logo-plate-ink: rgba(255,255,255,.85);
  --overlay-strong: rgba(0,0,0,.75);
  --topbar-bg: rgba(14,15,18,.86);
  --radius-lg: 16px;
  --radius-md: 12px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgba(0,0,0,.40);
  --shadow-2: 0 8px 24px -12px rgba(0,0,0,.65);
  --shadow-3: 0 18px 40px -20px rgba(0,0,0,.70);
  --glow: radial-gradient(720px 360px at 50% -8%, rgba(34,197,94,.07), transparent 68%);
  --font: 'Plus Jakarta Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
}

body.theme-nova { background: var(--bg); }

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
body.theme-nova .sidebar {
  background: var(--bg2);
  border-right: 1px solid var(--border);
}
body.theme-nova .sidebar-logo-wrap { padding: 1.4rem 1.1rem 1rem; }

body.theme-nova .sidebar-search-input {
  border-radius: var(--radius-pill);
  background: var(--bg3);
  border-color: var(--border);
}
body.theme-nova .sidebar-search-input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
body.theme-nova .sidebar-search-btn {
  border-radius: var(--radius-pill);
  background: var(--accent);
  border: none;
  color: var(--accent-ink);
}
body.theme-nova .sidebar-search-btn:hover { filter: brightness(1.1); }

body.theme-nova .nav-section-label { color: var(--faint); }
body.theme-nova .nav-section-label::after { background: var(--border); }

body.theme-nova .nav-item {
  border-radius: var(--radius-sm);
  padding: .5rem .7rem;
  display: flex;
  align-items: center;
  gap: .65rem;
}
body.theme-nova .nav-icon-svg { flex-shrink: 0; opacity: .8; transition: opacity .15s; }
body.theme-nova .nav-item span:first-of-type { flex: 1; min-width: 0; }
body.theme-nova .nav-item:hover { background: var(--bg3); }
body.theme-nova .nav-item:hover .nav-icon-svg { opacity: 1; }
body.theme-nova .nav-item.active {
  background: var(--bg3);
  color: var(--text);
  box-shadow: inset 0 0 0 1px var(--border);
}
body.theme-nova .nav-item.active .nav-icon-svg { opacity: 1; color: var(--accent); }
body.theme-nova .nav-wip {
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--accent);
  background: var(--accent-tint);
  border: 1px solid var(--accent-line);
  padding: .1rem .35rem;
  border-radius: var(--radius-pill);
  flex-shrink: 0;
}

/* ── Top bar ─────────────────────────────────────────────────────────────── */
body.theme-nova .topbar {
  background: var(--glow), var(--topbar-bg);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
}
body.theme-nova .topbar-date {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: .3rem .8rem;
  color: var(--text);
}
body.theme-nova .btn-refresh {
  background: var(--accent);
  border: none;
  color: var(--accent-ink);
  font-weight: 700;
  border-radius: var(--radius-sm);
  min-height: 44px;
  padding: .55rem 1.1rem;
  box-shadow: var(--shadow-2);
  transition: transform .15s, filter .15s;
}
body.theme-nova .btn-refresh:hover { background: var(--accent-hi); }
body.theme-nova .btn-refresh.large { padding: .7rem 1.8rem; }

/* ── Cards, generally: rounder corners + soft lift on hover ────────────────
   Catches headline/metric/stock/risk/sector/outlook/swot/catalyst cards
   at once, since they all share the `*-card` naming convention. */
body.theme-nova [class$="-card"],
body.theme-nova [class*="-card "] {
  border-radius: var(--radius-lg);
  background: var(--bg2);
  border-color: var(--border);
  box-shadow: var(--shadow-1);
  transition: border-color .15s, box-shadow .15s;
}
body.theme-nova [class$="-card"]:hover { box-shadow: var(--shadow-2); }

/* ── Sections ────────────────────────────────────────────────────────────── */
body.theme-nova .section {
  border-radius: var(--radius-lg);
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 1.6rem;
  box-shadow: var(--shadow-1);
}
body.theme-nova .section-title {
  display: flex;
  align-items: center;
  gap: .55rem;
  border-bottom: none;
  padding-bottom: .8rem;
  position: relative;
  color: var(--text);
}
body.theme-nova .section-title::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--border);
}

/* ── Risk banner → status chip ──────────────────────────────────────────── */

body.theme-nova .stale-banner { border-radius: var(--radius-sm); }

/* ── Metric cards ────────────────────────────────────────────────────────── */
body.theme-nova .metric-card { border-radius: var(--radius-sm); }
body.theme-nova .metric-change {
  display: inline-block;
  padding: .1rem .45rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
}
body.theme-nova .metric-change.pos { background: var(--pos-tint); color: var(--pos); }
body.theme-nova .metric-change.neg { background: var(--neg-tint); color: var(--neg); }

/* ── Macro / news panels ─────────────────────────────────────────────────── */
body.theme-nova .outlook-card,
body.theme-nova .swot-card,
body.theme-nova .catalyst-card {
  border-radius: var(--radius-md);
}
body.theme-nova .panel-title {
  color: var(--accent);
  opacity: .9;
}

/* ── App-wide panel containers (audit pass) ─────────────────────────────────
   Every other page's main box-like container that doesn't happen to match
   the `*-card` naming convention already caught above — rounding these
   keeps every page consistent with the rest of the rollout. */
body.theme-nova .mc-panel,
body.theme-nova .mc-tenor,
body.theme-nova .yc-chart-wrap,
body.theme-nova .yc-panel,
body.theme-nova .fx-group,
body.theme-nova .corr-wrap,
body.theme-nova .pf-value-chart,
body.theme-nova .pf-rebalance-modal,
body.theme-nova .cio-status,
body.theme-nova .cio-verdict,
body.theme-nova .eco-events-section,
body.theme-nova .opt-grid .opt-card,
body.theme-nova .fin-table-wrap,
body.theme-nova .comp-search-input,
body.theme-nova .wl-add-input {
  border-radius: var(--radius-md);
}

/* Filter/tab pill buttons used across several pages (screener, news feed,
   technicals, analyst, range bars) — match the pill language used
   elsewhere (topbar date, refresh button, chart-range buttons). */
body.theme-nova .scr-tab,
body.theme-nova .nf-tab,
body.theme-nova .tech-tab,
body.theme-nova .an-tab,
body.theme-nova .range-btn {
  border-radius: var(--radius-pill);
}
body.theme-nova .scr-tab.active,
body.theme-nova .nf-tab.active,
body.theme-nova .tech-tab.active,
body.theme-nova .an-tab.active,
body.theme-nova .range-btn.active {
  background: var(--pos-tint);
  border-color: var(--accent-line);
  color: var(--accent);
}

/* ── News / movers items ─────────────────────────────────────────────────── */
body.theme-nova .news-title:hover { color: var(--accent); }

/* ── Misc ────────────────────────────────────────────────────────────────── */
body.theme-nova .toast { border-radius: var(--radius-sm); box-shadow: var(--shadow-2); }
body.theme-nova .footer { color: var(--faint); }

body.theme-nova ::-webkit-scrollbar-thumb { background: var(--border); border-radius: var(--radius-pill); }

body.theme-nova .today-hero, body.theme-nova .mb-page { background-image:var(--glow); background-repeat:no-repeat; }
body.theme-nova table, body.theme-nova .metric-price, body.theme-nova [class^="pf-"], body.theme-nova [class*=" pf-"] { font-variant-numeric:tabular-nums; }
body.theme-nova input, body.theme-nova select, body.theme-nova textarea { background:var(--bg3); border-color:var(--border); border-radius:var(--radius-sm); }
body.theme-nova input:focus, body.theme-nova select:focus, body.theme-nova textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-ring); outline:none; }
 body.theme-nova .metric-change, body.theme-nova .nav-wip, body.theme-nova [class^="badge-"], body.theme-nova [class^="pf-badge-"] { display:inline-flex; align-items:center; gap:.4rem; border-radius:var(--radius-pill); }
 body.theme-nova .metric-change::before, body.theme-nova .nav-wip::before, body.theme-nova [class^="badge-"]::before, body.theme-nova [class^="pf-badge-"]::before { width:6px; height:6px; flex:0 0 6px; border-radius:var(--radius-pill); background:currentColor; content:""; }

@media (max-width: 900px) {
  body.theme-nova .section { border-radius: var(--radius-md); }
}

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE (≤768px): collapsible sidebar + reflowed layout.
   style.css lays the app out as a fixed 200px sidebar + `body{margin-left:200px}`
   at every width — fine on desktop, unusable on a phone. Everything below is
   gated to this one breakpoint so desktop is untouched.
   ══════════════════════════════════════════════════════════════════════════ */
.mobile-nav-toggle { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 768px) {
  /* Sidebar becomes an off-canvas drawer, toggled via body.sidebar-open
     (see toggleMobileSidebar() in app.js). */
  body { margin-left: 0; }
  body.theme-nova .sidebar {
    transform: translateX(-100%);
    transition: transform .2s ease;
    z-index: 300;
  }
  body.theme-nova.sidebar-open .sidebar {
    transform: translateX(0);
    box-shadow: var(--shadow-2);
  }
  body.sidebar-open .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: var(--overlay);
    z-index: 250;
  }

  .mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--bg3);
    color: var(--text);
    flex-shrink: 0;
  }
  body.theme-nova .topbar {
    padding: .5rem .8rem;
    flex-wrap: wrap;
    row-gap: .4rem;
  }
  body.theme-nova .topbar-left { display: flex; align-items: center; gap: .6rem; }

  /* Page padding: shrink the common page-wrapper classes so content isn't
     squeezed further on top of the narrow viewport. */
  body.theme-nova .main-content,
  body.theme-nova .section,
  body.theme-nova .opt-page,
  body.theme-nova .corr-page,
  body.theme-nova .wl-page,
  body.theme-nova .cio-page,
  body.theme-nova .mc-page,
  body.theme-nova .pf-page,
  body.theme-nova .scr-page,
  body.theme-nova .fx-page,
  body.theme-nova .hm-page,
  body.theme-nova .an-page,
  body.theme-nova .nf-page,
  body.theme-nova .mb-page,
  body.theme-nova .comp-page,
  body.theme-nova .rot-page,
  body.theme-nova .eco-page,
  body.theme-nova .ec-page,
  body.theme-nova .div-page,
  body.theme-nova .tech-page,
  body.theme-nova .yc-page {
    padding-left: .8rem;
    padding-right: .8rem;
  }

  /* Data tables: most are rendered without a scrollable wrapper (only
     .fin-table-wrap/.pf-table-wrap/.comp-table/.corr-wrap already had one) —
     turn each table itself into a horizontally-scrollable block so its
     columns don't force the whole page wider than the viewport. */
  body.theme-nova .wl-table,
  body.theme-nova .opt-table,
  body.theme-nova .scr-table,
  body.theme-nova .fx-table,
  body.theme-nova .mb-table,
  body.theme-nova .rot-table,
  body.theme-nova .div-table,
  body.theme-nova .tech-table,
  body.theme-nova .an-table {
    display: block;
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
  }

  /* Card/metric grids: their minmax() pixel floors don't fit a phone width —
     collapse to a single column. */
  body.theme-nova .metrics-grid,
  body.theme-nova .news-list.wide,
  body.theme-nova .hm-indices {
    grid-template-columns: 1fr !important;
  }
  body.theme-nova .mb-gauge-wrap {
    grid-template-columns: 1fr !important;
    row-gap: .4rem;
  }

  /* Chart Builder's multi-select sizes itself to its longest option text
     (some series names run long, e.g. "ECB Deposit Rate (... shared by all
     euro area countries)") — unconstrained, that blows out the whole page's
     width on a phone. Cap it to the viewport. */
  body.theme-nova .mc-builder-field select[size] {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }
  body.theme-nova .mc-builder-row { width: 100%; }
  body.theme-nova .mc-builder-field { max-width: 100%; }

  /* Chart heights: fixed desktop heights are too tall relative to a short
     mobile viewport. */
  body.theme-nova .mc-canvas-wrap { height: 220px; }
  #td-chart-container { height: 200px !important; }
  #td-rsi-container { height: 60px !important; }
  body.theme-nova .modal-box {
    max-width: calc(100vw - 1.5rem);
    margin: .75rem;
  }
}

/* ── Chart Builder toolbar — pill controls, fiscal.ai-inspired ─────────────── */
body.theme-nova .mc-builder-field select,
body.theme-nova .mc-builder-field input {
  border-radius: var(--radius-sm);
}
body.theme-nova .mc-b-add {
  border-radius: var(--radius-sm);
  min-height: 44px;
  background: var(--accent);
  color: var(--accent-ink);
  border: none;
  font-weight: 700;
}
body.theme-nova .mc-b-add:hover { filter: brightness(1.08); }
body.theme-nova .mc-b-chip-type.active { background: var(--accent); color: var(--accent-ink); }