/* =========================================================================
   NEXT BULLISH TRADE — DESIGN SYSTEM
   -------------------------------------------------------------------------
   Visual identity: dense, mono-heavy Bloomberg-terminal vibe. Hierarchy comes
   from dividers + typography, not heavy card chrome. Accent colors are used
   sparingly to signal state (bullish / bearish / warn / live).

   --- COLOR TOKENS -------------------------------------------------------
   Backgrounds (ink scale, dark → very dark):
     --ink-950 #05070c   page
     --ink-900 #0a0e1a   panels, sticky bars
     --ink-800 #10141e   inputs, raised rows
     --ink-700 #1a1f2e   hover rows
     --ink-600 #252a3a   selection
   Foreground:
     --text   #e5e7eb    primary
     --muted  #9ca3af    secondary / labels
     --dim    #6b7280    captions
   Dividers:
     --line   #1f2937    every border, every separator
   Semantic accents:
     --mint   #00d4a8    bullish / positive / live
     --coral  #ff5c5c    bearish / negative / alert
     --amber  #ffa726    warn / caution / B-tier
     --azure  #42a5f5    info / C-tier

   --- TYPE SCALE ---------------------------------------------------------
   UI font: Inter. Numbers/tickers/prices: JetBrains Mono (.num class).
     display     28/32  font-weight 700   page hero
     h1          22/28  font-weight 700   page title
     h2          16/22  font-weight 700   section title
     body        14/20  font-weight 400   default
     caption     12/16  font-weight 500   labels
     micro       10/14  font-weight 600   uppercase tags
     mono-lg     20/24  mono             big numbers (.stat-num)
     mono-sm     12/16  mono             inline numbers

   --- SPACING SCALE ------------------------------------------------------
   Use Tailwind's default 4px scale. Conventions:
     section vertical:   py-6 (mobile) / py-8 (desktop)
     section gutter:     px-4
     card padding:       p-4 (compact) / p-5 (default)
     row padding:        py-2.5 px-3
     gap between tiles:  gap-3 (compact) / gap-4 (default)

   --- RADII --------------------------------------------------------------
     button/chip:  6px (rounded-md)
     card:         10px (rounded-xl)
     pill:         9999px
     input:        8px (rounded-lg)

   --- ELEVATION ----------------------------------------------------------
   Dividers do most of the work. Reserve shadows for floating UI only.
     shadow-soft   subtle lift on hover/focus
     shadow-pop    dropdowns, mega-panels, dialogs
   ========================================================================= */

:root {
  --ink-950:#05070c; --ink-900:#0a0e1a; --ink-800:#10141e; --ink-700:#1a1f2e; --ink-600:#252a3a;
  --text:#e5e7eb; --muted:#9ca3af; --dim:#6b7280;
  --line:#1f2937;
  --mint:#00d4a8; --coral:#ff5c5c; --amber:#ffa726; --azure:#42a5f5;
  --header-h:84px; /* tape (36px) + nav row (~48px) — sticky offset for sub-headers */
}

/* Pre-JS fallback: the mobile chrome (smaller tape + nav) is shorter than the
   desktop 84px. base.html's script overrides this with the measured value. */
@media (max-width: 767px) { :root { --header-h:76px; } }

html, body { background: var(--ink-950); color: var(--text); }
body { font-family: 'Inter', system-ui, sans-serif; }

/* =========================================================================
   MOBILE FIT & OVERFLOW SAFETY
   -------------------------------------------------------------------------
   On phones a single too-wide child (an unwrapped table, a no-wrap flex row,
   a long unbroken ticker/URL string) used to stretch the whole page wider
   than the viewport. The page then scrolled sideways and the right edge of
   the sticky header — search box, page titles, body copy — got clipped.

   `overflow-x: clip` stops that sideways scroll at the root WITHOUT turning
   html/body into a scroll container, so it does NOT break the `position:
   sticky` global chrome (unlike `overflow-x: hidden`, which would). Wide
   blocks that genuinely need to scroll horizontally (tables, the ticker
   tape) opt back in locally via their own `overflow-x-auto` wrapper.
   `overflow-wrap: anywhere` lets long unbroken strings break instead of
   forcing the layout wide. ========================================== */
html, body { overflow-x: clip; max-width: 100%; }
body { overflow-wrap: anywhere; }
/* But keep numbers and table cells intact — wrapping mid-number hurts the
   tabular price/financial columns this terminal leans on. */
.num, td, th, kbd, .tape-item { overflow-wrap: normal; word-break: normal; }
img, svg, video, canvas { max-width: 100%; }

/* Sub-page sticky headers (e.g. the ticker hub identity bar) anchor just
   below the global chrome. --header-h is the chrome's real height, kept in
   sync at every breakpoint by base.html's measure script, so the offset is
   correct on mobile instead of assuming the desktop 84px. */
.sub-sticky { position: sticky; top: var(--header-h); }

/* Mono numbers: tabular figures so columns of prices line up. */
.num { font-family: 'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }

.bg-grad-hero {
  background:
    radial-gradient(60% 80% at 50% -10%, rgba(0,212,168,0.15) 0%, transparent 60%),
    radial-gradient(40% 60% at 90% 10%, rgba(62,224,208,0.08) 0%, transparent 70%),
    linear-gradient(180deg, #0a0e1a 0%, #05070c 100%);
}

/* =========================================================================
   COMPONENT PRIMITIVES — ONE source of truth, reused across every page.
   ========================================================================= */

/* ── Card ─────────────────────────────────────────────────────────────────
   Default = flat: transparent, no chrome. Hierarchy from spacing + dividers.
   `.card.card--bordered` (or `.card-panel`) gives the bordered variant when
   a tile genuinely needs to feel like a container (dashboard tile, etc).
   Both still accept hover:border-mint-500/40 to indicate clickability. */
.card { background: transparent; border: 1px solid transparent; border-radius: 10px; box-shadow: none; transition: border-color .15s, background .15s; }
.card--bordered, .card-panel { background: var(--ink-900); border-color: var(--line); }

/* ── Section header ───────────────────────────────────────────────────────
   Tiny uppercase eyebrow + bold title + optional subtitle/action. */
.section-h { display:flex; align-items:flex-end; justify-content:space-between; gap:1rem; flex-wrap:wrap; margin-bottom:.75rem; }
.section-h__eyebrow { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); font-weight:600; }
.section-h__title { font-size:16px; font-weight:700; color:#fff; letter-spacing:-.01em; }
.section-h__sub { font-size:12px; color:var(--muted); }

/* ── Pill / tag ──────────────────────────────────────────────────────────
   Single definition. Color via inline style or utility classes on the element. */
.pill { display:inline-flex; align-items:center; gap:6px; padding:3px 9px; border-radius:999px; font-size:10px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--line); }

/* ── Stat block ──────────────────────────────────────────────────────────
   Label + big mono number + optional delta. The bread-and-butter of the
   terminal look — used on every dashboard. */
.stat { display:flex; flex-direction:column; gap:2px; }
.stat__label { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--dim); font-weight:600; }
.stat__num { font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size:20px; font-weight:600; color:#fff; line-height:1.15; }
.stat__num--lg { font-size:24px; }
.stat__delta { font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size:12px; font-weight:500; }
.stat__delta.up { color: var(--mint); }
.stat__delta.down { color: var(--coral); }

/* ── Data table row ──────────────────────────────────────────────────────
   Flat row, divider underneath, hover lift. Pair with mono in cells. */
.data-row { display:grid; gap:.75rem; padding:.6rem .75rem; border-bottom:1px solid var(--line); align-items:center; transition: background .12s; }
.data-row:last-child { border-bottom:none; }
.data-row:hover { background: var(--ink-800); }
.data-row__sym { font-family:'JetBrains Mono', ui-monospace, monospace; font-weight:600; color:#fff; }
.data-row__num { font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; text-align:right; }

/* ── Tab strip ───────────────────────────────────────────────────────────
   Horizontal tabs with underline-on-active. Used on ticker hub etc. */
.tab-strip { display:flex; gap:0; overflow-x:auto; white-space:nowrap; }
.tab-strip__tab { display:inline-block; padding:.6rem 1rem; font-size:13px; color:var(--muted); border-bottom:2px solid transparent; transition: color .12s, border-color .12s; }
.tab-strip__tab:hover { color:#fff; }
.tab-strip__tab.active { color: var(--mint); border-bottom-color: var(--mint); font-weight:600; }

/* ── Side-rail nav item ──────────────────────────────────────────────────
   For vertical sidebars (ticker workbench, intel dashboard side rails). */
.side-item { display:flex; align-items:center; gap:.6rem; padding:.5rem .75rem; border-radius:8px; color:var(--muted); font-size:13px; transition: background .12s, color .12s; }
.side-item:hover { background: var(--ink-800); color: #fff; }
.side-item.active { background: rgba(0,212,168,.08); color: var(--mint); }
.side-item__icon { width:14px; height:14px; flex-shrink:0; }

/* ── Grade badge (A/B/C) ─────────────────────────────────────────────────
   Inline mono-style badge. Color encodes tier. */
.grade-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:18px; padding:0 5px; border-radius:4px; font-family:'JetBrains Mono', ui-monospace, monospace; font-size:11px; font-weight:700; letter-spacing:.02em; border:1px solid currentColor; }
.grade-badge--a { color: var(--mint); background: rgba(0,212,168,.12); }
.grade-badge--b { color: var(--amber); background: rgba(255,167,38,.12); }
.grade-badge--c { color: var(--azure); background: rgba(66,165,245,.12); }

/* =========================================================================
   HEADER NAV (desktop ≥ md)
   ========================================================================= */
.nav-link { color: var(--muted); padding:8px 12px; border-radius:8px; font-size:13px; font-weight:500; transition:all .15s; white-space:nowrap; }
.nav-link:hover { color:#fff; background: var(--ink-800); }
.nav-link.active { color: var(--mint); background: rgba(0,212,168,.08); }
.nav-link.disabled { color:#4b5563; cursor:not-allowed; }
.nav-link.disabled:hover { background:transparent; color:#4b5563; }

/* Yahoo-style mega panels. */
.mega-panel {
  position:absolute; left:0; top:100%; margin-top:4px; z-index:50;
  display:grid; grid-template-columns:1fr; gap:4px;
  padding:10px; width:280px;
  background: var(--ink-900); border:1px solid var(--line); border-radius:12px;
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition: opacity .12s, transform .12s, visibility 0s linear .12s;
}
.group:hover > .mega-panel,
.group:focus-within > .mega-panel {
  opacity:1; visibility:visible; transform:translateY(0);
  transition: opacity .12s, transform .12s, visibility 0s;
}
.mega-panel--two   { grid-template-columns: repeat(2, minmax(190px, 1fr)); width:440px; }
.mega-panel--three { grid-template-columns: repeat(3, minmax(180px, 1fr)); width:620px; }
.mega-panel--right { left:auto; right:0; }
.mega-col { display:flex; flex-direction:column; gap:2px; }
.mega-h { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color: var(--dim); padding:6px 10px 2px; }
.mega-link { display:flex; flex-direction:column; gap:1px; padding:8px 10px; border-radius:8px; transition: background .12s; cursor:pointer; }
.mega-link:hover { background: rgba(0,212,168,.08); }
.mega-t { color: var(--text); font-size:13px; font-weight:600; }
.mega-link:hover .mega-t { color: var(--mint); }
.mega-d { color: var(--dim); font-size:11px; }

/* =========================================================================
   TICKER TAPE — Bloomberg-strip look. Mono numbers, tight dividers.
   ========================================================================= */
.tape-row { font-size:12px; line-height:1; padding:10px 16px; }
.tape-item { display:inline-flex; gap:6px; align-items:baseline; padding:0 14px; border-right:1px solid var(--line); white-space:nowrap; }
.tape-item:last-child { border-right:none; }
.tape-label { color: var(--muted); font-size:10px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; font-family:'Inter', sans-serif; }
.tape-price { color:#fff; font-weight:500; font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; }
.tape-item .up,
.tape-item .down { font-family:'JetBrains Mono', ui-monospace, monospace; font-variant-numeric: tabular-nums; font-size:11px; }
.up { color: var(--mint); }
.down { color: var(--coral); }
@media (max-width: 640px) {
  .tape-row { padding:8px 12px; font-size:11px; }
  .tape-item { padding:0 10px; }
}

/* =========================================================================
   MOBILE — drawer, bottom tab bar
   ========================================================================= */
.mnav-link { display:block; color: var(--text); padding:11px 16px; border-radius:10px; font-size:14px; font-weight:500; }
.mnav-link:hover { background: var(--ink-800); color: var(--mint); }
.mnav-link.active { color: var(--mint); background: rgba(0,212,168,.10); }
.mnav-link.disabled { color:#4b5563; cursor:not-allowed; pointer-events:none; }

.mnav-group { border-bottom:1px solid var(--line); }
.mnav-group:last-child { border-bottom:none; }
.mnav-group > summary { list-style:none; cursor:pointer; padding:12px 16px; font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color: var(--muted); display:flex; align-items:center; justify-content:space-between; }
.mnav-group > summary::-webkit-details-marker { display:none; }
.mnav-group > summary::after { content:"+"; color: var(--dim); font-size:16px; font-weight:400; }
.mnav-group[open] > summary::after { content:"−"; }
.mnav-group[open] > summary { color: var(--mint); }
.mnav-group-body { padding:0 8px 8px; display:flex; flex-direction:column; gap:2px; }

.tabbar { box-shadow: 0 -8px 24px -8px rgba(0,0,0,.6); }
.tabbar-link { display:flex; flex:1; flex-direction:column; align-items:center; justify-content:center; gap:2px; padding:7px 2px; color: var(--muted); font-size:10px; font-weight:600; letter-spacing:.03em; border:0; background:transparent; cursor:pointer; }
.tabbar-link svg { width:20px; height:20px; }
.tabbar-link.active { color: var(--mint); }
.tabbar-link:hover { color: var(--mint); }
@media (max-width: 767px) { body { padding-bottom: calc(64px + env(safe-area-inset-bottom, 0px)); } }

/* =========================================================================
   BELL PANEL
   ========================================================================= */
.bell-chip { padding:3px 9px; border-radius:999px; font-weight:600; font-size:10px; letter-spacing:.04em; text-transform:uppercase; border:1px solid var(--line); background: var(--ink-800); color: var(--muted); transition:all .12s; }
.bell-chip:hover { color: var(--mint); border-color: rgba(0,212,168,.4); }
.bell-chip.on { color: var(--mint); background: rgba(0,212,168,.10); border-color: rgba(0,212,168,.5); }

/* =========================================================================
   FOOTER
   ========================================================================= */
.footer-h { font-size:10px; letter-spacing:.08em; text-transform:uppercase; color: var(--dim); font-weight:700; margin-bottom:.6rem; }
.footer-link { display:block; color: var(--muted); font-size:13px; padding:3px 0; }
.footer-link:hover { color: var(--mint); }
.status-dot { display:inline-block; width:7px; height:7px; border-radius:999px; background: var(--mint); box-shadow: 0 0 0 3px rgba(0,212,168,.15); animation: pulse-dot 2s ease-in-out infinite; }
@keyframes pulse-dot { 0%,100% { opacity:1; } 50% { opacity:.45; } }