/* =============================================================================
   Maruzeti — application stylesheet, v3.

   Layout uses CSS variables to drive resizable splitters:
       --left-width  : width of the left column (rest = right pane)
       --top-height  : height of the top section inside the left column
   These are mutated by JS as the user drags the splitters.

   Two themes:
       body.theme-light  — soft white/blue (default)
       body.theme-dark   — pure black + lime green (matches the original Tk dark)
   ============================================================================= */

:root {
    /* Resizable layout variables (defaults; JS overwrites at runtime) */
    --left-width:  50vw;
    --top-height:  60%;
    --splitter:    6px;

    /* Brand */
    --navy-deep:   #14375a;
    --navy-mid:    #1f4f7d;

    /* ---- LIGHT THEME (default) ---- */
    --bg:           #f5f7fa;
    --bg-pane:      #ffffff;
    --bg-hdr:       #e6edf3;
    --bg-hdr-2:     #d9e3ed;
    --bg-toolbar:   #cfdbe7;
    --bg-row-alt:   #fbfcfe;
    --bg-row-hover: #eef3f9;
    --bg-group:     #d9e3ed;
    --bg-group-2:   #c9d6e3;

    --row-sel-bg:   #4a90e2;
    --row-sel-fg:   #ffffff;

    --tab-bg:       #e6edf3;
    --tab-bg-active:#b9d3ec;

    --text:         #1a1f2c;
    --text-muted:   #6b7280;
    --text-faint:   #9aa3af;
    --text-title:   var(--navy-deep);

    --border:       #c5d0db;
    --border-soft:  #e3e8ee;

    --pos:          #15803d;
    --neg:          #dc2626;

    /* Alert rows (HIDDEN BUYING / HIDDEN SELLING) match the orange tier
       used in the Strategy Logic Reference — kept light enough that the
       dark amber text on top stays readable. */
    --alert-bg:     #fff4e0;
    --alert-bg-sel: #d97706;
    --alert-fg:     #b45309;
    --alert-fg-sel: #ffffff;
    --accent:       #2563eb;

    --splitter-bg:  #cfdbe7;
    --splitter-bg-hover: #4a90e2;

    --modal-overlay: rgba(15, 25, 40, 0.55);
    --modal-bg:      #ffffff;

    --font-stack:   "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto,
                    "Helvetica Neue", Arial, sans-serif;
    --font-mono:    "Consolas", ui-monospace, "SF Mono", Menlo, monospace;
}

/* ---- DARK THEME — Bloomberg amber on black (matches original Tk dark) ----
   Exact colors lifted from Maruzeti.py self.themes['dark']:
       bg #000000 / fg #FF9800 / row_fg #FFB74D / status #1A1A1A
       header_bg #222222 / green_tag #00FF00 / red_tag #FF0000
       grid #333333 / selection_bg #333333 / selection_fg #FF9800
       Font: Consolas
*/
body.theme-dark {
    --bg:           #000000;
    --bg-pane:      #000000;
    --bg-hdr:       #222222;
    --bg-hdr-2:     #1a1a1a;
    --bg-toolbar:   #1a1a1a;
    --bg-row-alt:   #000000;
    --bg-row-hover: #1a1a1a;
    --bg-group:     #444444;       /* ind_header bg */
    --bg-group-2:   #222222;       /* cat_header bg */

    --row-sel-bg:   #333333;
    --row-sel-fg:   #FF9800;

    --tab-bg:       #1a1a1a;
    --tab-bg-active:#FF9800;

    --text:         #FFB74D;       /* row_fg — primary amber */
    --text-muted:   #FF9800;       /* fg — full amber */
    --text-faint:   #8d6e2a;
    --text-title:   #FF9800;       /* orange titles */

    --border:       #333333;
    --border-soft:  #222222;

    --pos:          #00FF00;       /* green_tag */
    --neg:          #FF0000;       /* red_tag */

    --alert-bg:     transparent;
    --alert-bg-sel: #333333;
    --alert-fg:     #FFB300;       /* amber ALERT rows — matches Strategy Logic legend */
    --alert-fg-sel: #FFB300;       /* keep amber on selection (dark bg) */
    --accent:       #FF9800;       /* orange to match dark-theme highlights */

    --splitter-bg:  #222222;
    --splitter-bg-hover: #FF9800;

    --modal-overlay: rgba(0, 0, 0, 0.78);
    --modal-bg:      #000000;
}
body.theme-dark, body.theme-dark code {
    font-family: var(--font-mono);
}
body.theme-dark .panel-title { color: var(--text-title); }
body.theme-dark .demo-banner { background:#3a2e00; color:#ffd54f; border-bottom-color:#6b5400; }

/* =============================================================================
   Reset + globals
============================================================================= */

*, *::before, *::after { box-sizing: border-box; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    overflow: hidden;
    font-family: var(--font-stack);
    color: var(--text);
    background: var(--bg);
    font-size: 12px;
    -webkit-font-smoothing: antialiased;
}
.hidden { display: none !important; }
button { font-family: inherit; cursor: pointer; }
code {
    font-family: var(--font-mono);
    background: var(--bg-hdr);
    padding: 1px 4px;
    border-radius: 2px;
    font-size: 11px;
    color: var(--text);
}

/* =============================================================================
   Splash
============================================================================= */

.splash {
    position: fixed; inset: 0; z-index: 1000;
    background: #ffffff;
    display: flex; align-items: center; justify-content: center;
    transition: opacity 400ms ease-out;
}
.splash.fading { opacity: 0; pointer-events: none; }
.splash-stage { display: flex; flex-direction: column; align-items: center; padding: 24px; }
.splash-logo  { max-width: min(80vw, 480px); height: auto; }
.splash-bar {
    margin-top: 28px;
    width: min(70vw, 360px);
    height: 6px;
    background: #e5ecf3;
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}
.splash-bar-fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--navy-deep) 0%, var(--navy-mid) 100%);
    transition: width 240ms ease-out;
}
/* Indeterminate shimmer that sweeps across the filled portion of the bar.
   Driven entirely by the compositor (CSS transform animation), so it keeps
   moving even when the JS main thread is blocked by the synchronous
   Pyodide computeDashboard call — that's why the bar previously appeared
   "frozen at 85 %" for the ~2 s of the first compute. */
.splash-bar-fill::after {
    content: "";
    position: absolute;
    top: 0; bottom: 0; left: 0;
    width: 40%;
    background: linear-gradient(90deg,
        rgba(255,255,255,0) 0%,
        rgba(255,255,255,0.65) 50%,
        rgba(255,255,255,0) 100%);
    animation: splash-shimmer 1.2s linear infinite;
    will-change: transform;
}
@keyframes splash-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(350%); }
}
.splash-meta {
    margin-top: 14px;
    display: flex;
    align-items: baseline;
    gap: 10px;
    color: #5a738c;
    font-size: clamp(12px, 1.3vw, 14px);
    letter-spacing: 1.5px;
    text-transform: uppercase;
}
.splash-pct {
    font-family: var(--font-mono);
    color: var(--navy-deep);
    font-weight: 600;
    letter-spacing: 0;
}
@media (prefers-reduced-motion: reduce) { .splash, .splash-bar-fill { transition: none; } }

/* =============================================================================
   App shell
============================================================================= */

.app {
    display: grid;
    grid-template-rows: auto auto 1fr;
    height: 100vh;
    background: var(--bg);
}

/* Demo data banner */
.demo-banner {
    background: #fff3cd;
    color: #5c4400;
    border-bottom: 1px solid #f5c66b;
    padding: 4px 14px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
}
body.theme-dark .demo-banner {
    background: #3a2e00;
    color: #ffd54f;
    border-bottom-color: #6b5400;
}

/* ---- Toolbar ---- */
.toolbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: var(--bg-toolbar);
    border-bottom: 1px solid var(--border);
}
.tb-btn {
    background: var(--tab-bg);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 5px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
    transition: background 120ms ease;
}
/* Brand logo sized to match the toolbar button height (5+5 padding +
   12px font + 2px border ≈ 26px). Auto width preserves aspect ratio. */
.tb-brand { margin: 0; padding: 0; line-height: 0; font-size: inherit; font-weight: inherit; }
.tb-logo {
    height: 26px;
    width: auto;
    display: block;
    user-select: none;
    -webkit-user-drag: none;
}
body.theme-dark .tb-btn { color: var(--text-muted); border-color: var(--border); }
.tb-btn:hover { background: var(--bg-hdr); }
.tb-btn-active {
    background: var(--tab-bg-active);
    border-color: var(--navy-mid);
    color: var(--navy-deep);
    font-weight: 600;
}
body.theme-dark .tb-btn-active { color: #000000; background: var(--text-title); border-color: var(--text-title); }

.tb-spacer { width: 18px; }

.tabs { display: flex; gap: 4px; flex: 1; }
.tab {
    background: var(--tab-bg);
    color: var(--text);
    border: 1px solid var(--border);
    padding: 5px 14px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 500;
}
body.theme-dark .tab { color: var(--text-muted); border-color: var(--border); }
.tab:hover { background: var(--bg-hdr); }
.tab-active {
    background: var(--tab-bg-active);
    border-color: var(--navy-mid);
    color: var(--navy-deep);
    font-weight: 600;
}
body.theme-dark .tab-active { color: #000000; background: var(--text-title); border-color: var(--text-title); }

/* =============================================================================
   3-pane resizable body
============================================================================= */

.body {
    display: grid;
    grid-template-columns: var(--left-width) var(--splitter) 1fr;
    overflow: hidden;
    min-height: 0;
}

.left-col {
    display: grid;
    grid-template-rows: var(--top-height) var(--splitter) 1fr;
    min-height: 0;
    min-width: 0;
}

.left-top { overflow: hidden; min-height: 0; min-width: 0; }
.left-bot {
    overflow: hidden;
    min-height: 0;
    background: var(--bg-pane);
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
}

/* ---- Splitters ---- */
.vsplitter, .hsplitter {
    background: var(--splitter-bg);
    transition: background 100ms ease;
    /* Larger touch targets on all devices */
    position: relative;
}
.vsplitter { 
    cursor: col-resize; 
    width: var(--splitter);
}
.hsplitter { 
    cursor: row-resize; 
    height: var(--splitter);
}
/* Invisible larger touch area for splitters */
.vsplitter::after, .hsplitter::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: transparent;
}
.vsplitter::after {
    width: 20px;
    height: 100%;
}
.hsplitter::after {
    width: 100%;
    height: 20px;
}
.vsplitter:hover, .hsplitter:hover, .vsplitter.is-dragging, .hsplitter.is-dragging {
    background: var(--splitter-bg-hover);
}

/* ---- Left pane (top) — holds the active panel ---- */
.left-pane {
    background: var(--bg-pane);
    overflow: auto;
    height: 100%;
    min-width: 0;
}
.panel { display: none; padding: 14px 18px 24px 18px; min-height: 100%; }
.panel-active { display: block; }

.panel-head { text-align: center; margin-bottom: 10px; }
.panel-title {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-title);
    margin: 4px 0 2px 0;
}
.panel-subtitle {
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
}
.panel-meta {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 4px;
}
.panel-meta span { font-family: var(--font-mono); color: var(--text); }

/* Sub-tabs */
.subtabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin: 6px 0 0 0; }
.subtab {
    background: transparent;
    color: var(--text-muted);
    border: 1px solid transparent;
    border-bottom: none;
    padding: 5px 14px;
    font-size: 12px;
    border-radius: 4px 4px 0 0;
}
.subtab:hover { color: var(--text); }
.subtab-active {
    background: var(--bg-pane);
    color: var(--text-title);
    font-weight: 600;
    border-color: var(--border);
    border-bottom: 2px solid var(--bg-pane);
    margin-bottom: -2px;
}

/* Symbol table */
.subpanel-wrap {
    border: 1px solid var(--border);
    border-top: none;
    background: var(--bg-pane);
    max-height: 100%;
    overflow: auto;
}
.symbol-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
.symbol-table thead th {
    position: sticky; top: 0;
    background: var(--bg-hdr);
    color: var(--text);
    text-align: left;
    padding: 6px 10px;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.symbol-table th.num, .symbol-table td.num { text-align: right; }
.symbol-table tbody td {
    padding: 4px 10px;
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
}
.symbol-table tbody tr { cursor: default; }
.symbol-table tbody tr:hover { background: var(--bg-row-hover); }
.symbol-table tbody tr.row-selected { background: var(--row-sel-bg) !important; color: var(--row-sel-fg); }
.symbol-table tbody tr.non-clickable { cursor: default; }
.symbol-table tbody tr.non-clickable:hover { background: transparent; }
.symbol-table tbody tr.symbol-group { cursor: default; background: var(--bg-hdr); }
.symbol-table tbody tr.symbol-group:hover { background: var(--bg-hdr); }
.symbol-table tbody tr.symbol-group td {
    padding: 6px 10px;
    color: var(--text-title);
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
}
.yield-curve { width: 100%; min-height: 260px; }
.yield-curve.hidden { display: none; }

/* ---- Bottom chart pane ---- */
.chart-title {
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--text);
    padding: 8px 12px;
    background: var(--bg-pane);
    border-bottom: 1px solid var(--border-soft);
    flex-shrink: 0;
}
.chart-canvas {
    flex: 1;
    min-height: 0;
    background: var(--bg-pane);
}
.chart-empty {
    height: 100%;
    display: flex; align-items: center; justify-content: center;
    color: var(--text-faint);
    font-style: italic;
    font-size: 12px;
}

/* Generic stub for unwired tabs */
.stub {
    padding: 24px 22px;
    color: var(--text-muted);
    font-size: 13px;
    line-height: 1.6;
    background: var(--bg-pane);
    border: 1px dashed var(--border);
    border-radius: 4px;
    margin-top: 12px;
}

/* ---- Analyst Ratings dashboard --------------------------------------- */
.ratings-content { padding-top: 6px; }
.ratings-h2 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 18px 0 6px;
}
.ratings-h2:first-child { margin-top: 4px; }
.ratings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.ratings-table th {
    text-align: left;
    padding: 6px 10px;
    background: var(--bg-hdr);
    color: var(--text-title);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
}
.ratings-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-body);
    font-family: var(--font-mono);
}
.ratings-table tbody tr:last-child td { border-bottom: 0; }
.ratings-consensus-cell { font-weight: 600; }
.ratings-scroll { max-height: 320px; overflow-y: auto; border: 1px solid var(--border); border-radius: 4px; }
.ratings-scroll .ratings-table { border: 0; border-radius: 0; }
/* Consensus colouring matches the original Tkinter title colour rule. */
.panel-title.consensus-buy  { color: var(--pos) !important; }
.panel-title.consensus-bear { color: var(--neg) !important; }

/* ---- Events dashboard (Dividends / Splits / Earnings / Upcoming) ---- */
.events-content { padding-top: 6px; }
.events-h2 {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin: 4px 0 6px;
}
.events-h2-spaced { margin-top: 18px; }
.events-footnote { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; }
.events-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.events-table th {
    text-align: left;
    padding: 6px 10px;
    background: var(--bg-hdr);
    color: var(--text-title);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.events-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-body);
    font-family: var(--font-mono);
    vertical-align: top;
}
.events-table tbody tr:last-child td { border-bottom: 0; }
.events-table th.ev-date,   .events-table td.ev-date   { width: 110px; white-space: nowrap; }
.events-table th.ev-num,    .events-table td.ev-num    { text-align: right; white-space: nowrap; }
.events-table th.ev-ticker, .events-table td.ev-ticker { width: 80px; }
.events-table td.ev-empty { text-align: center; color: var(--text-muted); font-style: italic; }
/* Category pill bar inside the Upcoming Events Summary. */
.ev-cat-bar { display: flex; gap: 6px; margin: 6px 0 10px; flex-wrap: wrap; }
.ev-cat-pill {
    background: var(--bg-pane);
    color: var(--text-body);
    border: 1px solid var(--border);
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.ev-cat-pill:hover { background: var(--bg-hdr); border-color: var(--text-muted); }
.ev-cat-pill-active {
    background: var(--accent, #2563eb);
    color: #fff;
    border-color: var(--accent, #2563eb);
}
.ev-cat-pill-active:hover { background: var(--accent, #2563eb); }
/* Mirror the dark-theme toolbar/tab styling (orange bg, black text) so the
   active Earnings/Dividends/Splits pill matches the Events tab exactly. */
body.theme-dark .ev-cat-pill-active,
body.theme-dark .ev-cat-pill-active:hover {
    background:    var(--text-title);
    border-color:  var(--text-title);
    color:         #000000;
}
.ev-cat-pill .ev-cat-count { opacity: 0.75; font-weight: 500; margin-left: 2px; }

/* ---- Fundamentals dashboard (DuPont / Capital / Liquidity / Valuation) */
.fund-content { padding-top: 6px; }
.fund-header { margin: 2px 0 12px; }
.fund-title {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-title);
    display: inline;
}
.fund-subtitle {
    margin-left: 12px;
    font-size: 12px;
    color: var(--text-muted);
}
.fund-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 18px;
}
.fund-card {
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.fund-card-head {
    padding: 7px 12px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    letter-spacing: 0.3px;
}
.fund-head-dupont    { background: #4682B4; } /* SteelBlue */
.fund-head-capital   { background: #DAA520; } /* GoldenRod */
.fund-head-liquidity { background: #2E8B57; } /* SeaGreen */
.fund-head-valuation { background: #CD5C5C; } /* IndianRed */
.fund-card-body {
    padding: 8px 12px 10px;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.fund-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-top: 6px;
}
.fund-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-body);
}
.fund-value {
    font-family: var(--font-mono);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title);
}
.fund-value.fund-pos { color: var(--pos); }
.fund-value.fund-neg { color: var(--neg); }
.fund-note {
    font-size: 10px;
    color: var(--text-muted);
    font-style: italic;
    margin: 1px 0 4px 8px;
}
.fund-profile {
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 12px 14px;
}
.fund-profile-title {
    margin: 0 0 6px;
    font-size: 13px;
    font-weight: 700;
    color: var(--text-title);
}
.fund-profile-text {
    margin: 0;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-body);
    text-align: justify;
}
.ratings-consensus-cell.consensus-buy  { color: var(--pos); }
.ratings-consensus-cell.consensus-bear { color: var(--neg); }

/* Smart Analysis */
.smart-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; }
.smart-signal {
    font-size: 13px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--text-muted);
    letter-spacing: 0.4px;
}
.smart-signal.signal-buy  { color: #32CD32; }
.smart-signal.signal-sell { color: #FF4500; }
.smart-signal.signal-alert{ color: #FFB300; }
.smart-content { display: flex; flex-direction: column; gap: 12px; }
.smart-chart-card {
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 6px 8px 4px;
}
.smart-chart-card .smart-chart-title {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-title);
    text-align: center;
    padding: 2px 0 4px;
    letter-spacing: 0.3px;
}
.smart-chart { width: 100%; height: 220px; }

/* Smart Analysis tiles */
.smart-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 8px;
    margin: 14px 0;
}
.smart-tile { background: var(--bg-pane); border: 1px solid var(--border); padding: 10px 12px; border-radius: 4px; }
.smart-tile-label { font-size: 10px; color: var(--text-muted); letter-spacing: 1.2px; text-transform: uppercase; }
.smart-tile-val { font-size: 18px; font-weight: 600; font-family: var(--font-mono); color: var(--text-title); margin-top: 2px; }
.smart-lines { background: var(--bg-pane); border: 1px solid var(--border); padding: 14px 18px; border-radius: 4px; line-height: 1.7; }
.smart-line { font-size: 13px; color: var(--text); }

/* =============================================================================
   RIGHT PANE — categorized ticker table
============================================================================= */

.right-pane {
    display: flex;
    flex-direction: column;
    background: var(--bg-pane);
    overflow: hidden;
    min-width: 0;
}

.rp-statusbar {
    background: var(--bg-hdr-2);
    border-bottom: 1px solid var(--border);
    padding: 5px 10px;
    font-size: 11px;
    font-family: var(--font-mono);
    color: var(--text);
    display: flex;
    gap: 6px;
    align-items: baseline;
}
.rp-status-label { color: var(--text-muted); }
.rp-status-val   { color: var(--text); font-weight: 600; }
.rp-status-sep   { color: var(--text-faint); }

.rp-tablewrap { flex: 1; overflow: auto; min-height: 0; }
.rp-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; table-layout: auto; }
.rp-table thead th {
    position: sticky; top: 0; z-index: 4;
    background: var(--bg-hdr);
    color: var(--text);
    padding: 6px 8px;
    text-align: left;
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
.rp-table th.num, .rp-table td.num { text-align: right; }
.rp-table tbody td {
    padding: 3px 8px;
    border-bottom: 1px solid var(--border-soft);
    white-space: nowrap;
    color: var(--text);
}
.rp-table tbody tr.rp-cat td {
    background: var(--bg-group-2);
    color: var(--text-title);
    font-weight: 700;
    padding: 6px 8px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    cursor: pointer;
    user-select: none;
    border-top: 1px solid var(--border);
}
.rp-table tbody tr.rp-ind td {
    background: var(--bg-group);
    color: var(--text);
    font-weight: 600;
    padding: 4px 8px;
    cursor: pointer;
    user-select: none;
}
.rp-table tbody tr.rp-ind .caret { display: inline-block; width: 10px; color: var(--text-muted); }
.rp-table tbody tr.rp-row { cursor: default; }
.rp-table tbody tr.rp-row:hover { background: var(--bg-row-hover); }
.rp-table tbody tr.rp-row.row-selected { background: var(--row-sel-bg) !important; color: var(--row-sel-fg); }
.rp-table tbody tr.rp-row.row-selected td { color: var(--row-sel-fg); }
/* Per-strategy row tinting — matches the colour buckets in the
   Strategy Logic Reference modal (alert=amber, bull=green, bear=red). */
.rp-table tbody tr.rp-row.is-alert td { background: var(--alert-bg); color: var(--alert-fg); }
.rp-table tbody tr.rp-row.is-alert.row-selected td { background: var(--alert-bg-sel) !important; color: var(--alert-fg-sel); }
body.theme-dark .rp-table tbody tr.rp-row.is-alert td { color: var(--alert-fg); }
.rp-table tbody tr.rp-row.is-bull td { color: var(--pos); }
.rp-table tbody tr.rp-row.is-bear td { color: var(--neg); }
/* Selection wins over the strategy tint so the highlighted row stays
   readable; the strategy column itself keeps its bucket colour. */
.rp-table tbody tr.rp-row.is-bull.row-selected td,
.rp-table tbody tr.rp-row.is-bear.row-selected td { color: var(--row-sel-fg); }
.rp-table .rp-strategy { font-weight: 600; }
.rp-table .rp-strategy.strategy-alert { color: var(--alert-fg); }
.rp-table .rp-strategy.strategy-bull  { color: var(--pos); }
.rp-table .rp-strategy.strategy-bear  { color: var(--neg); }
.rp-table .num.pos { color: var(--pos); }
.rp-table .num.neg { color: var(--neg); }
.rp-table .num.muted { color: var(--text-muted); }
.rp-row.is-hidden, .rp-ind.is-hidden { display: none; }
.rp-table .rp-ticker { font-weight: 700; padding-left: 16px; }

/* =============================================================================
   Modal (Strategy Logic)
============================================================================= */

.modal-overlay {
    position: fixed; inset: 0; z-index: 500;
    background: var(--modal-overlay);
    display: flex; align-items: center; justify-content: center;
    padding: 30px;
}
.modal-dialog {
    background: var(--modal-bg);
    color: var(--text);
    border: 1px solid var(--border);
    border-radius: 6px;
    box-shadow: 0 24px 64px rgba(0,0,0,0.4);
    width: min(1180px, 100%);
    max-height: 88vh;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.modal-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 18px;
    border-bottom: 1px solid var(--border);
    background: var(--bg-hdr);
}
.modal-head h2 { margin: 0; font-size: 16px; color: var(--text-title); }
.modal-close {
    background: transparent; border: none; color: var(--text);
    font-size: 22px; line-height: 1; padding: 0 6px; cursor: pointer;
}
.modal-close:hover { color: var(--neg); }
.modal-body { padding: 14px 22px; overflow: auto; line-height: 1.6; font-size: 13px; }
.modal-body h3 { color: var(--text-title); font-size: 14px; margin: 18px 0 6px 0; }
.modal-body h3:first-child { margin-top: 4px; }
.modal-body p  { margin: 4px 0 6px 0; color: var(--text); }
.modal-body code { color: var(--text-title); }

/* ---- News tables (Stock News + General News) ------------------------ */
.news-content { padding-top: 6px; }
.news-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 4px;
    overflow: hidden;
}
.news-table th {
    text-align: left;
    padding: 6px 10px;
    background: var(--bg-hdr);
    color: var(--text-title);
    font-weight: 600;
    border-bottom: 1px solid var(--border);
    font-size: 11px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.news-table td {
    padding: 6px 10px;
    border-bottom: 1px solid var(--border-soft);
    color: var(--text-body);
    vertical-align: top;
}
.news-table tbody tr:last-child td { border-bottom: 0; }
.news-table tbody tr.news-row { cursor: default; }
.news-table tbody tr.news-row:hover { background: var(--row-hover, rgba(127,127,127,0.08)); }
.news-table th.news-date,   .news-table td.news-date   { width: 110px; font-family: var(--font-mono); white-space: nowrap; }
.news-table th.news-source, .news-table td.news-source { width: 140px; color: var(--text-muted); white-space: nowrap; }
.news-table th.news-headline { width: auto; }
.news-table td.news-headline { color: var(--text); }
.news-footer {
    margin-top: 6px;
    padding: 4px 10px;
    font-size: 11px;
    color: var(--text-muted);
    background: var(--bg-hdr);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-align: right;
}

/* ---- Article viewer modal ------------------------------------------- */
.article-dialog { max-width: 760px; width: 90%; max-height: 80vh; display: flex; flex-direction: column; }
.article-meta {
    padding: 6px 22px 10px;
    font-size: 11px;
    color: var(--text-muted);
    font-style: italic;
    border-bottom: 1px solid var(--border);
}
.article-body {
    flex: 1;
    overflow: auto;
    white-space: normal;
    color: var(--text);
}
.article-footer {
    padding: 12px 22px;
    border-top: 1px solid var(--border);
    text-align: center;
    background: var(--bg-hdr);
}
.article-link-btn {
    display: inline-block;
    padding: 7px 16px;
    background: var(--bg-pane);
    color: var(--text-title);
    border: 1px solid var(--border);
    border-radius: 4px;
    text-decoration: none;
    font-size: 12px;
    font-weight: 600;
}
.article-link-btn:hover { background: var(--bg-hdr); border-color: var(--text-muted); }

/* Two-column body for the Strategy Logic modal (params | summary) */
.strategy-modal-grid {
    display: grid;
    grid-template-columns: minmax(280px, 360px) 1fr;
    gap: 18px;
    align-items: start;
}
.sml-col-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-title);
    text-align: center;
    padding: 4px 0 10px 0;
    border-bottom: 1px solid var(--border-soft);
    margin-bottom: 10px;
}
.sml-params { font-family: var(--font-mono); font-size: 12px; }
.sml-param-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    padding: 3px 6px;
    border-bottom: 1px solid var(--border-soft);
}
.sml-param-key { color: var(--text-muted); }
.sml-param-val {
    color: var(--text);
    font-weight: 700;
    background: var(--bg-hdr);
    padding: 1px 8px;
    border-radius: 2px;
    min-width: 60px;
    text-align: right;
}
.sml-section { margin-top: 14px; }
.sml-section h4 {
    color: var(--text-title);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin: 12px 0 6px 0;
    border-bottom: 1px solid var(--border-soft);
    padding-bottom: 3px;
}
.sml-def { font-size: 12px; margin: 2px 0; line-height: 1.5; }
.sml-def b { color: var(--text); }
.sml-trigger { margin: 6px 0 10px 0; font-size: 12px; line-height: 1.5; }
.sml-trigger .label { font-weight: 700; display: block; }
.sml-trigger.green   .label { color: #32CD32; }
.sml-trigger.red     .label { color: #FF4500; }
.sml-trigger.orange  .label { color: #FFA500; }
.sml-trigger.blue    .label { color: #1E90FF; }
.sml-trigger .rule { color: var(--text-muted); font-family: var(--font-mono); font-size: 11px; }

/* =============================================================================
   Add / Remove Ticker panel
============================================================================= */
.ar-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    padding: 8px 4px 4px;
    min-height: 0;
    flex: 1 1 auto;
}
@media (max-width: 1100px) { .ar-wrap { grid-template-columns: 1fr; } }
.ar-section {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background: var(--bg-pane);
    border: 1px solid var(--border-soft);
    border-radius: 6px;
    padding: 10px 12px 12px;
}
.ar-h3 {
    margin: 0 0 8px;
    font-size: 13px;
    color: var(--text-title);
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 700;
}
.ar-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.ar-search {
    flex: 1 1 auto;
    font-family: inherit;
    font-size: 13px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    background: var(--bg);
    color: var(--text);
    border-radius: 4px;
    outline: none;
    transition: border-color 120ms;
}
.ar-search:focus { border-color: var(--text-title); }
.ar-meta { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.ar-list {
    flex: 1 1 auto;
    min-height: 160px;
    max-height: 380px;
    overflow-y: auto;
    border: 1px solid var(--border-soft);
    background: var(--bg);
    border-radius: 4px;
    padding: 4px 0;
    font-family: var(--font-mono);
    font-size: 12px;
}
.ar-list-empty {
    display: block;
    padding: 12px;
    color: var(--text-muted);
    font-style: italic;
    font-family: var(--font-base);
}
.ar-item {
    display: grid;
    grid-template-columns: 70px 1fr 110px;
    gap: 10px;
    padding: 4px 10px;
    cursor: default;
    user-select: none;
    align-items: baseline;
    border-bottom: 1px solid transparent;
}
.ar-item:hover { background: var(--bg-row-hover); }
.ar-item.selected {
    background: var(--row-sel-bg);
    color: var(--row-sel-fg);
}
.ar-item.selected .ar-item-meta { color: var(--row-sel-fg); opacity: 0.85; }
.ar-item-sym { font-weight: 700; }
.ar-item-name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-item-meta { color: var(--text-muted); font-size: 11px; text-align: right; }
/* "NEW" tag for tickers in the FMP stock list but not in the snapshot
   universe yet — they'll only get live data once the backend universe
   includes them, so we flag them visually. */
.ar-item-meta.ar-item-newuniv { color: var(--navy-mid); font-weight: 700; }
body.theme-dark .ar-item-meta.ar-item-newuniv { color: #9ad0ff; }
/* Pin star next to symbols already in My Tickers. */
.ar-pin { color: #d4a017; font-size: 11px; }
/* Placeholder row in the right pane for pinned tickers that aren't in the
   poller's snapshot universe yet — italicised + faded so it's obvious
   they're "pending data". */
.rp-row.rp-stub { font-style: italic; color: var(--text-muted); }
.rp-row.rp-stub .rp-strategy { color: var(--text-muted); }
.rp-row.rp-stub:hover { background: var(--bg-row-hover); }
.ar-action-row {
    margin-top: 10px;
    display: flex;
    justify-content: flex-end;
}
.ar-btn {
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 16px;
    border: 1px solid var(--border);
    background: var(--bg-hdr);
    color: var(--text);
    border-radius: 4px;
    cursor: pointer;
    transition: background 120ms, border-color 120ms, color 120ms;
}
.ar-btn:hover:not(:disabled) {
    border-color: var(--text-title);
    color: var(--text-title);
}
.ar-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* =============================================================================
   Toast (transient confirmation, e.g. "Added AAPL to My Tickers")
============================================================================= */
.toast-host {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.toast {
    min-width: 240px;
    max-width: 360px;
    padding: 10px 14px;
    border-radius: 6px;
    background: var(--bg-pane);
    color: var(--text);
    border-left: 3px solid var(--text-title);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    font-size: 13px;
    line-height: 1.4;
    pointer-events: auto;
    opacity: 0;
    transform: translateX(20px);
    transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.toast.show { opacity: 1; transform: translateX(0); }
.toast.toast-warn { border-left-color: var(--neg); }

/* =============================================================================
   Plotly tweaks (the SVG stays inline, just give it room)
============================================================================= */
.chart-canvas .js-plotly-plot, .chart-canvas .plotly { width: 100% !important; height: 100% !important; }

/* =============================================================================
   Responsive — Mobile & Tablet Support
============================================================================= */

/* ---- TABLET (768px - 1024px): 2-column with collapsible right pane ---- */
@media (max-width: 1024px) {
    :root {
        --left-width: 65vw;
    }

    /* Right pane becomes a slide-out drawer */
    .right-pane {
        position: fixed;
        top: 0;
        right: 0;
        width: 80vw;
        max-width: 400px;
        height: 100vh;
        z-index: 500;
        transform: translateX(100%);
        transition: transform 300ms ease-out;
        box-shadow: -4px 0 20px rgba(0,0,0,0.3);
        background: var(--bg-pane);
    }

    .right-pane.drawer-open {
        transform: translateX(0);
    }

    /* Overlay when drawer is open */
    .drawer-overlay {
        position: fixed;
        inset: 0;
        background: rgba(0,0,0,0.5);
        z-index: 499;
        opacity: 0;
        pointer-events: none;
        transition: opacity 300ms ease;
    }

    .drawer-overlay.visible {
        opacity: 1;
        pointer-events: auto;
    }

    /* Hide vertical splitter, keep horizontal */
    .vsplitter { display: none; }
    .body { grid-template-columns: 1fr 0; }

    /* Toolbar adjustments */
    .toolbar {
        flex-wrap: wrap;
        padding: 8px;
    }

    .tabs {
        order: 3;
        width: 100%;
        margin-top: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .tabs::-webkit-scrollbar { display: none; }

    .tab {
        flex-shrink: 0;
        padding: 8px 16px;
        font-size: 13px;
    }

    /* Touch targets */
    .tb-btn {
        padding: 8px 16px;
        font-size: 13px;
        min-height: 36px;
    }

    /* Mobile drawer toggle button */
    .drawer-toggle {
        display: flex !important;
    }
}

/* ---- MOBILE (< 768px): Single column stack ---- */
@media (max-width: 768px) {
    :root {
        font-size: 14px;
        --splitter: 0px;  /* No splitters on mobile */
    }

    html, body {
        font-size: 14px;
        overflow: auto;
        height: auto;
    }

    /* App becomes scrollable single column */
    .app {
        height: auto;
        min-height: 100vh;
        display: block;
    }

    /* Hide ALL splitters on mobile */
    .vsplitter, .hsplitter { display: none !important; }

    /* Body stacks vertically */
    .body {
        display: block;
        height: auto;
    }

    .left-col {
        display: block;
        height: auto;
        min-height: 0;
    }

    .left-top {
        height: auto;
        min-height: 400px;
    }

    .left-bot {
        height: 350px;
        min-height: 250px;
        border-top: 2px solid var(--border);
    }

    /* Collapsible chart - collapsed by default on mobile */
    .chart-title {
        cursor: pointer;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px;
        background: var(--bg-hdr);
        user-select: none;
    }

    .chart-title::after {
        content: "▼";
        font-size: 14px;
        transition: transform 200ms;
    }

    .chart-title.collapsed::after {
        transform: rotate(-90deg);
    }

    .chart-canvas {
        height: calc(100% - 40px);
    }

    .chart-canvas.collapsed {
        display: none;
    }

    /* Right pane as overlay drawer on mobile */
    .right-pane {
        position: fixed;
        top: 0;
        right: 0;
        width: 90vw;
        max-width: 380px;
        height: 100vh;
        z-index: 500;
        transform: translateX(100%);
        transition: transform 300ms ease-out;
        box-shadow: -4px 0 20px rgba(0,0,0,0.3);
        background: var(--bg-pane);
    }

    .right-pane.drawer-open {
        transform: translateX(0);
    }

    /* Tables scroll horizontally with momentum */
    .rp-tablewrap, .subpanel-wrap {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-x;
    }

    .symbol-table, .rp-table {
        min-width: 750px;
        font-size: 13px;
    }

    /* Touch-friendly table rows */
    .symbol-table tbody td, .rp-table tbody td {
        padding: 10px 12px;
    }

    /* Larger touch targets for buttons */
    .tb-btn, .tab, .subtab {
        min-height: 44px;
        min-width: 44px;
    }

    /* Panels have more breathing room */
    .panel {
        padding: 16px 12px 24px;
    }

    .panel-title {
        font-size: 20px;
    }

    /* Modals take full screen on small devices */
    .modal-dialog {
        width: 95vw;
        max-height: 90vh;
        margin: 20px auto;
    }

    /* Toast at bottom on mobile */
    .toast-host {
        top: auto;
        bottom: 20px;
        right: 50%;
        transform: translateX(50%);
        align-items: center;
    }

    .toast {
        min-width: 280px;
        max-width: 90vw;
        text-align: center;
    }

    /* Article modal full height */
    .article-dialog {
        height: 90vh;
    }
}

/* ---- Small Mobile (< 480px): Compact mode ---- */
@media (max-width: 480px) {
    .toolbar {
        padding: 6px;
    }

    .tb-logo {
        height: 22px;
    }

    .tb-btn {
        padding: 6px 10px;
        font-size: 12px;
    }

    .tab {
        padding: 6px 10px;
        font-size: 12px;
    }

    /* Simplified panel headers */
    .panel-head {
        text-align: left;
    }

    .panel-title {
        font-size: 18px;
    }

    .panel-subtitle {
        font-size: 11px;
    }
}

/* ---- Drawer toggle button (hidden on desktop) ---- */
.drawer-toggle {
    display: none;
    align-items: center;
    gap: 6px;
    background: var(--tab-bg-active);
    border-color: var(--navy-mid);
    color: var(--navy-deep);
    font-weight: 600;
}

body.theme-dark .drawer-toggle {
    color: #000000;
    background: var(--text-title);
    border-color: var(--text-title);
}

.drawer-toggle::before {
    content: "📊";
    font-size: 14px;
}

/* ---- Touch improvements ---- */
@media (hover: none) and (pointer: coarse) {
    /* Remove hover effects on touch devices */
    .symbol-table tbody tr:hover,
    .rp-table tbody tr:hover {
        background: transparent;
    }

    .symbol-table tbody tr:active,
    .rp-table tbody tr:active {
        background: var(--bg-row-hover);
    }

    /* Larger touch targets everywhere */
    button, .tab, .subtab, .tb-btn {
        touch-action: manipulation;
    }

    /* Prevent text selection on UI elements */
    .toolbar, .tabs, .subtabs, .panel-head, .chart-title {
        user-select: none;
        -webkit-user-select: none;
    }
}

/* =============================================================================
   MOBILE-NATIVE INTERFACE (completely replaces desktop UI on mobile/tablet)
   This is a separate app-like experience optimized for touch
============================================================================= */

/* Hide desktop UI and show the mobile-native UI on ANY touch-first device.
   Detection is by input capability, not resolution: a device whose primary
   pointer is coarse and cannot hover is a phone/tablet (incl. hi-res iPads,
   large Samsung tablets and any future high-DPI touch device). A narrow
   desktop window (<=1024px) also gets the mobile layout. */
@media (max-width: 1024px), (hover: none) and (pointer: coarse) {
    #app {
        display: none !important;
    }

    #mobile-app {
        display: flex !important;
        flex-direction: column;
        height: 100vh;
        width: 100vw;
        overflow: hidden;
        background: var(--bg);
    }

    #mobile-app.hidden {
        display: none !important;
    }
}

/* Hide the mobile UI on true desktops & laptops: a wide-enough viewport whose
   input supports hovering or a fine pointer (mouse / trackpad). */
@media (min-width: 1025px) and (hover: hover), (min-width: 1025px) and (pointer: fine) {
    #mobile-app {
        display: none !important;
    }
}

/* ---- Mobile Header ---- */
.mobile-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-toolbar);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.mobile-logo {
    height: 28px;
    width: auto;
}

.mobile-header-actions {
    display: flex;
    gap: 8px;
}

.mobile-icon-btn {
    width: 40px;
    height: 40px;
    border: none;
    background: var(--bg-hdr);
    border-radius: 50%;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    touch-action: manipulation;
}

/* ---- Mobile Content Area ---- */
.mobile-content {
    flex: 1;
    overflow: hidden;
    position: relative;
}

.mobile-tab {
    display: none;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 12px;
}

.mobile-tab-active {
    display: block;
}

/* ---- Mobile Search ---- */
.mobile-search-bar {
    margin-bottom: 12px;
}

.mobile-search-input {
    width: 100%;
    padding: 14px 16px;
    font-size: 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--bg-pane);
    color: var(--text);
}

.mobile-search-input:focus {
    outline: none;
    border-color: var(--accent);
}

/* ---- Mobile Ticker Cards ---- */
.mobile-ticker-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-ticker-card {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    touch-action: manipulation;
    transition: transform 100ms, box-shadow 100ms;
}

.mobile-ticker-card:active {
    transform: scale(0.98);
    background: var(--bg-row-hover);
}

.mobile-ticker-main {
    flex: 1;
}

.mobile-ticker-symbol {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-title);
    font-family: var(--font-mono);
}

.mobile-ticker-name {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 2px;
}

.mobile-ticker-strategy {
    font-size: 11px;
    padding: 3px 8px;
    border-radius: 10px;
    background: var(--bg-hdr);
    color: var(--text-muted);
    margin-top: 4px;
    display: inline-block;
}

.mobile-ticker-price {
    text-align: right;
}

.mobile-ticker-price-value {
    font-size: 20px;
    font-weight: 600;
    font-family: var(--font-mono);
}

.mobile-ticker-change {
    font-size: 14px;
    font-weight: 600;
    font-family: var(--font-mono);
}

.mobile-ticker-change.pos { color: var(--pos); }
.mobile-ticker-change.neg { color: var(--neg); }

/* ---- Mobile Market Section ---- */
.mobile-market-nav {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.mobile-market-nav::-webkit-scrollbar { display: none; }

.mobile-market-btn {
    flex-shrink: 0;
    padding: 10px 18px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 20px;
    background: var(--bg-pane);
    color: var(--text);
    cursor: pointer;
    touch-action: manipulation;
}

.mobile-market-btn.mobile-market-active {
    background: var(--tab-bg-active);
    border-color: var(--navy-mid);
    color: var(--navy-deep);
    font-weight: 600;
}

body.theme-dark .mobile-market-btn.mobile-market-active {
    color: #000000;
    background: var(--text-title);
    border-color: var(--text-title);
}

.mobile-market-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.mobile-market-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 12px;
}

.mobile-market-name {
    font-size: 16px;
    font-weight: 600;
}

.mobile-market-value {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-mono);
}

/* ---- Mobile Momentum ---- */
.mobile-momentum-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px;
    background: var(--bg-hdr);
    border-radius: 12px;
    margin-bottom: 12px;
}

.mobile-momentum-header h2 {
    margin: 0;
    font-size: 24px;
    font-family: var(--font-mono);
}

.mobile-signal {
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
}

.mobile-signal.buy { background: var(--pos); color: white; }
.mobile-signal.sell { background: var(--neg); color: white; }
.mobile-signal.neutral { background: var(--bg-hdr-2); color: var(--text-muted); }

.mobile-momentum-body {
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}

.mobile-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 60%;
    color: var(--text-muted);
    text-align: center;
    padding: 20px;
}

.mobile-empty-state p {
    font-size: 16px;
    line-height: 1.5;
}

/* ---- Mobile News ---- */
.mobile-news-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.mobile-news-tab {
    flex: 1;
    padding: 12px;
    font-size: 14px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--bg-pane);
    color: var(--text);
    cursor: pointer;
}

.mobile-news-tab.mobile-news-active {
    background: var(--tab-bg-active);
    border-color: var(--navy-mid);
    font-weight: 600;
}

.mobile-news-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mobile-news-card {
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
}

.mobile-news-title {
    font-size: 15px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 8px;
}

.mobile-news-meta {
    font-size: 12px;
    color: var(--text-muted);
    display: flex;
    gap: 12px;
}

/* ---- Mobile Analysis (Chart) ---- */
.mobile-analysis-ticker {
    font-size: 24px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 12px;
    font-family: var(--font-mono);
}

.mobile-chart-container {
    height: 300px;
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 12px;
    margin-bottom: 12px;
}

.mobile-fundamentals {
    background: var(--bg-pane);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
}

.mobile-fund-row {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--border-soft);
}

.mobile-fund-row:last-child { border-bottom: none; }

.mobile-fund-label { color: var(--text-muted); font-size: 14px; }
.mobile-fund-value { font-weight: 600; font-family: var(--font-mono); }

/* ---- Mobile Top Navigation ---- */
.mobile-header { order: 0; }
.mobile-nav { order: 1; }
.mobile-content { order: 2; }

.mobile-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
    background: var(--bg-pane);
    border-bottom: 1px solid var(--border);
    padding: 6px 0;
    flex-shrink: 0;
}

.mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    touch-action: manipulation;
    flex: 1;
}

.mobile-nav-icon {
    font-size: 24px;
    line-height: 1;
}

.mobile-nav-label {
    font-size: 11px;
    font-weight: 500;
}

.mobile-nav-btn.mobile-nav-active {
    color: var(--accent);
}

body.theme-dark .mobile-nav-btn.mobile-nav-active {
    color: var(--text-title);
}

/* ---- Mobile Modal ---- */
.mobile-modal {
    position: fixed;
    inset: 0;
    background: var(--bg);
    z-index: 1000;
    display: flex;
    flex-direction: column;
}

.mobile-modal.hidden {
    display: none;
}

.mobile-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-toolbar);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
}

.mobile-back-btn {
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--accent);
    font-size: 16px;
    cursor: pointer;
}

.mobile-modal-title {
    font-size: 18px;
    font-weight: 600;
    font-family: var(--font-mono);
}

.mobile-modal-content {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 16px;
}

/* ---- Mobile: selected ticker card highlight ---- */
.mobile-ticker-card.is-selected {
    border-color: var(--accent);
    box-shadow: 0 0 0 1px var(--accent) inset;
}

/* ---- Mobile: strategy badge colors ---- */
.mobile-ticker-strategy.strategy-bull { background: rgba(21,128,61,0.15); color: var(--pos); }
.mobile-ticker-strategy.strategy-bear { background: rgba(220,38,38,0.15); color: var(--neg); }
.mobile-ticker-strategy.strategy-alert { background: var(--alert-bg); color: var(--alert-fg); }

/* ---- Mobile: change color helpers (shared) ---- */
.mobile-ticker-change.pos, .mobile-market-value.pos { color: var(--pos); }
.mobile-ticker-change.neg, .mobile-market-value.neg { color: var(--neg); }
.mobile-ticker-change.muted, .mobile-market-value.muted { color: var(--text-muted); }

/* ---- Mobile: market group header ---- */
.mobile-market-group {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 12px 4px 4px;
}
.mobile-market-card > div:first-child { min-width: 0; }
.mobile-market-card .mobile-ticker-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- Mobile: momentum KPI tiles ---- */
.mobile-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}
.mobile-tile {
    background: var(--bg-hdr);
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
}
.mobile-tile-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
}
.mobile-tile-val {
    font-size: 18px;
    font-weight: 700;
    font-family: var(--font-mono);
    margin-top: 2px;
}

/* ---- Mobile: momentum report lines ---- */
.mobile-report {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.mobile-report-line {
    font-size: 14px;
    line-height: 1.45;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border-soft);
}
.mobile-report-line:last-child { border-bottom: none; padding-bottom: 0; }
.mobile-report-line strong { color: var(--text-title); }

/* ---- Mobile: fundamentals section label ---- */
.mobile-fund-section {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-muted);
    padding-bottom: 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* On smaller phones, drop tiles to 2 columns */
@media (max-width: 380px) {
    .mobile-tiles { grid-template-columns: repeat(2, 1fr); }
}