/* ═══════════════════════════════════════════════════════════════════
   NovaTrade Design System
   Shared styles for all dashboard pages
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design Tokens ────────────────────────────────────────────────── */
:root {
    --bg: #0b0d12;
    --surface: #141720;
    --surface2: #1a1e2a;
    --surface3: #1f2435;
    --border: #252a38;
    --border-light: #2e3548;
    --text: #e1e4ea;
    --text-dim: #6b7080;
    --text-muted: #4b5060;
    --green: #22c55e;
    --green-dim: rgba(34,197,94,0.15);
    --red: #ef4444;
    --red-dim: rgba(239,68,68,0.15);
    --blue: #3b82f6;
    --blue-dim: rgba(59,130,246,0.15);
    --gold: #eab308;
    --gold-dim: rgba(234,179,8,0.15);
    --orange: #f97316;
    --cyan: #06b6d4;
    --lime: #84cc16;
    --purple: #a855f7;
    --purple-dim: rgba(168,85,247,0.15);
    --amber: #f59e0b;
    --amber-dim: rgba(245,158,11,0.15);
    --pink: #ec4899;
    --pink-dim: rgba(236,72,153,0.15);
    --font-sans: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Cascadia Code', monospace;
    --text-xs: 10px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-lg: 18px;
    --text-xl: 24px;
    --text-2xl: 32px;
    --text-hero: 28px;
    --radius-sm: 4px;
    --radius: 8px;
    --radius-lg: 10px;
    --shadow-0: 0 1px 2px rgba(0,0,0,0.2);
    --shadow-1: 0 2px 8px rgba(0,0,0,0.25);
    --shadow-2: 0 4px 16px rgba(0,0,0,0.35), 0 0 0 1px rgba(59,130,246,0.08);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow: 0 4px 12px rgba(0,0,0,0.3);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
    --transition: 0.15s ease;
    --overlay-light: rgba(255,255,255,0.03);
    --overlay-hover: rgba(255,255,255,0.05);
}

/* ── Theme: Ocean ────────────────────────────────────────────────── */
[data-theme="ocean"] {
    --bg: #0a1628; --surface: #0f1f38; --surface2: #152847; --surface3: #1b3156;
    --border: #1e3a5f; --border-light: #27466e;
    --text: #d8e8f8; --text-dim: #6892b8; --text-muted: #4a7498;
    --blue: #38bdf8; --blue-dim: rgba(56,189,248,0.15);
    --purple: #7dd3fc; --purple-dim: rgba(125,211,252,0.15);
    --overlay-light: rgba(56,189,248,0.03); --overlay-hover: rgba(56,189,248,0.05);
}

/* ── Theme: Emerald ──────────────────────────────────────────────── */
[data-theme="emerald"] {
    --bg: #071210; --surface: #0c1d19; --surface2: #122a24; --surface3: #18362e;
    --border: #1e4237; --border-light: #275545;
    --text: #d1f0e5; --text-dim: #5da88c; --text-muted: #3d8a6d;
    --blue: #34d399; --blue-dim: rgba(52,211,153,0.15);
    --purple: #6ee7b7; --purple-dim: rgba(110,231,183,0.15);
    --green: #34d399; --green-dim: rgba(52,211,153,0.15);
    --overlay-light: rgba(52,211,153,0.03); --overlay-hover: rgba(52,211,153,0.05);
}

/* ── Theme: Crimson ──────────────────────────────────────────────── */
[data-theme="crimson"] {
    --bg: #120808; --surface: #1d0f0f; --surface2: #2a1515; --surface3: #361b1b;
    --border: #422323; --border-light: #552d2d;
    --text: #f0d5d5; --text-dim: #a86868; --text-muted: #8a4d4d;
    --blue: #f87171; --blue-dim: rgba(248,113,113,0.15);
    --purple: #fca5a5; --purple-dim: rgba(252,165,165,0.15);
    --overlay-light: rgba(248,113,113,0.03); --overlay-hover: rgba(248,113,113,0.05);
}

/* ── Theme: Slate ────────────────────────────────────────────────── */
[data-theme="slate"] {
    --bg: #111113; --surface: #1a1a1d; --surface2: #222226; --surface3: #2a2a2f;
    --border: #333338; --border-light: #3d3d44;
    --text: #e4e4e7; --text-dim: #71717a; --text-muted: #52525b;
    --blue: #a1a1aa; --blue-dim: rgba(161,161,170,0.15);
    --purple: #d4d4d8; --purple-dim: rgba(212,212,216,0.15);
    --overlay-light: rgba(255,255,255,0.03); --overlay-hover: rgba(255,255,255,0.05);
}

/* ── Theme: Light ────────────────────────────────────────────────── */
[data-theme="light"] {
    --bg: #f8f9fb; --surface: #ffffff; --surface2: #f1f3f5; --surface3: #e9ecef;
    --border: #dee2e6; --border-light: #ced4da;
    --text: #1a1a2e; --text-dim: #6c757d; --text-muted: #adb5bd;
    --blue: #2563eb; --blue-dim: rgba(37,99,235,0.1);
    --purple: #7c3aed; --purple-dim: rgba(124,58,237,0.1);
    --green: #16a34a; --green-dim: rgba(22,163,74,0.1);
    --red: #dc2626; --red-dim: rgba(220,38,38,0.1);
    --gold: #ca8a04; --gold-dim: rgba(202,138,4,0.1);
    --orange: #ea580c; --cyan: #0891b2; --lime: #65a30d;
    --shadow-0: 0 1px 2px rgba(0,0,0,0.05);
    --shadow-1: 0 2px 8px rgba(0,0,0,0.08);
    --shadow-2: 0 4px 16px rgba(0,0,0,0.1);
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
    --shadow: 0 4px 12px rgba(0,0,0,0.1);
    --shadow-lg: 0 8px 32px rgba(0,0,0,0.12);
    --overlay-light: rgba(0,0,0,0.02); --overlay-hover: rgba(0,0,0,0.04);
}
[data-theme="light"] .header { background: linear-gradient(135deg, rgba(37,99,235,0.06) 0%, rgba(255,255,255,0.98) 50%, rgba(124,58,237,0.04) 100%); }
[data-theme="light"] .header::after { background: linear-gradient(90deg, var(--blue), rgba(37,99,235,0.3) 40%, rgba(124,58,237,0.3) 60%, var(--purple)); }
[data-theme="light"] th { background: rgba(0,0,0,0.02); }
[data-theme="light"] tr:hover td { background: rgba(37,99,235,0.04); }
[data-theme="light"] tr:nth-child(even) td { background: rgba(0,0,0,0.015); }
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { background: var(--surface); }
[data-theme="light"] ::-webkit-scrollbar-thumb { background: var(--border-light); }

/* ── Reset & Base ─────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
    font-family: var(--font-sans);
    background: var(--bg);
    color: var(--text);
    font-size: 13px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.container { max-width: 1440px; margin: 0 auto; padding: 16px 24px; }
.section-gap { margin-bottom: 24px; }
.mono { font-family: var(--font-mono); }

/* ── Header ──────────────────────────────────────────────────────── */
.header {
    background: linear-gradient(135deg, rgba(59,130,246,0.08) 0%, rgba(14,17,24,0.95) 50%, rgba(168,85,247,0.06) 100%);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 12px;
    overflow: visible;
    position: relative;
}
.header::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, var(--blue), rgba(59,130,246,0.3) 40%, rgba(168,85,247,0.3) 60%, var(--purple));
}
.header-top {
    display: flex; align-items: center; justify-content: space-between;
    padding: 12px 20px 8px;
}
.header-brand { display: flex; align-items: center; gap: 14px; }
.header-logo {
    font-size: 20px; font-weight: 800; letter-spacing: -0.5px;
    background: linear-gradient(135deg, var(--blue) 0%, #60a5fa 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text;
}
.header-logo .logo-accent {
    background: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
    background-clip: text; font-weight: 600;
}
.header-divider { width: 1px; height: 20px; background: var(--border); }
.system-switcher { display: flex; gap: 3px; align-items: center; background: var(--bg); border-radius: 6px; padding: 2px; }
.system-switcher a {
    text-decoration: none; font-size: 11px; font-weight: 600;
    padding: 4px 14px; border-radius: var(--radius-sm); transition: all var(--transition); border: none;
}
.switcher-day { color: var(--text-dim); background: transparent; }
.switcher-day.active { color: var(--blue); background: var(--blue-dim); }
.switcher-swing { color: var(--text-dim); background: transparent; }
.switcher-swing.active { color: var(--purple); background: var(--purple-dim); }
.header-pnl {
    display: flex; align-items: baseline; gap: 8px;
    font-family: var(--font-mono); margin-left: auto; margin-right: 16px;
}
.header-pnl .pnl-label {
    font-size: var(--text-xs); color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.5px; font-family: var(--font-sans);
}
.header-pnl .pnl-value {
    font-size: var(--text-hero); font-weight: 800; letter-spacing: -1px; line-height: 1;
    transition: color 0.3s ease;
}
.header-pnl .pnl-value.positive { color: var(--green); }
.header-pnl .pnl-value.negative { color: var(--red); }
.header-pnl .pnl-value.zero { color: var(--text-dim); }
.header-right { display: flex; gap: 10px; align-items: center; }
.header-clock {
    font-family: var(--font-mono);
    font-size: 13px; font-weight: 600; color: var(--text-dim);
    letter-spacing: 0.5px;
}
.nav-meta { display: flex; gap: 6px; align-items: center; }
.nav-meta a {
    color: var(--text-dim); text-decoration: none; font-size: 10px; font-weight: 500;
    padding: 3px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    transition: all var(--transition); text-transform: uppercase; letter-spacing: 0.3px;
}
.nav-meta a:hover { border-color: var(--text-dim); color: var(--text); background: var(--surface2); }
.nav-meta a.logout { color: var(--red); border-color: rgba(239,68,68,0.3); }
.nav-meta a.logout:hover { background: var(--red-dim); }
.context-nav {
    display: flex; gap: 2px; align-items: center; padding: 0 16px 8px; flex-wrap: wrap;
}
.context-nav a, .context-nav .nav-trigger, .context-nav .nav-item {
    color: var(--text-dim); text-decoration: none; font-size: 11px; font-weight: 500;
    padding: 4px 12px; border-radius: 5px; transition: all var(--transition);
    background: transparent; border: none; cursor: pointer; font-family: inherit;
    line-height: 1.4;
}
.context-nav a:hover, .context-nav .nav-trigger:hover, .context-nav .nav-item:hover {
    background: var(--overlay-hover); color: var(--text);
}
.context-nav .nav-item.active, .context-nav .nav-trigger.active {
    color: var(--blue); background: rgba(59,130,246,0.12); font-weight: 600;
}
.context-nav.purple .nav-item.active, .context-nav.purple .nav-trigger.active {
    color: var(--purple); background: rgba(168,85,247,0.12);
}
.context-nav .nav-sep {
    width: 1px; height: 14px; background: var(--border); margin: 0 4px; flex-shrink: 0;
}

/* ── Dropdown menus ──────────────────────────────────────────────── */
.context-nav .nav-group { position: relative; display: inline-flex; }
.context-nav .nav-trigger {
    display: inline-flex; align-items: center; gap: 4px;
}
.context-nav .nav-caret {
    font-size: 8px; opacity: 0.55; transition: transform var(--transition);
}
.context-nav .nav-group.open .nav-trigger {
    background: var(--surface2); color: var(--text);
}
.context-nav .nav-group.open .nav-caret { transform: rotate(180deg); opacity: 0.9; }
.context-nav .nav-dropdown {
    position: absolute; top: calc(100% + 4px); left: 0; min-width: 160px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 4px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.35), 0 2px 6px rgba(0,0,0,0.15);
    display: none; flex-direction: column; gap: 1px;
    z-index: 100;
}
.context-nav .nav-group.open .nav-dropdown { display: flex; }
.context-nav .nav-drop-item {
    display: block; color: var(--text-dim); text-decoration: none;
    font-size: 11px; font-weight: 500; padding: 6px 12px; border-radius: var(--radius-sm);
    white-space: nowrap; transition: all var(--transition);
}
.context-nav .nav-drop-item:hover { background: var(--overlay-hover); color: var(--text); }
.context-nav .nav-drop-item.active { color: var(--blue); background: rgba(59,130,246,0.12); font-weight: 600; }
.context-nav.purple .nav-drop-item.active { color: var(--purple); background: rgba(168,85,247,0.12); }

/* ── Panels ──────────────────────────────────────────────────────── */
.panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: visible;
    box-shadow: var(--shadow-0);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.panel:hover { border-color: var(--border-light); }
.panel.full { grid-column: 1 / -1; }
.panel.accent-blue { border-left: 3px solid var(--blue); background: linear-gradient(135deg, var(--surface) 0%, rgba(59,130,246,0.02) 100%); box-shadow: var(--shadow-2); }
.panel.accent-purple { border-left: 3px solid var(--purple); }
.panel.accent-green { border-left: 3px solid var(--green); }
.panel-header {
    padding: 10px 16px; border-bottom: 1px solid var(--border);
    font-weight: 600; font-size: 11px; text-transform: uppercase;
    color: var(--text-dim); letter-spacing: 0.5px;
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(180deg, var(--overlay-light) 0%, transparent 100%);
}
.panel-header .count { font-family: var(--font-mono); color: var(--text); }
.panel-body { padding: 0; overflow-x: auto; }

/* ── Shared Operator Components (v3.66.0) ─────────────────────────── */
.nt-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 999px; border: 1px solid var(--border);
    font-size: 10px; font-weight: 700; letter-spacing: .35px;
    color: var(--text-dim); background: var(--surface2);
}
.nt-pill.ok { color: var(--green); border-color: rgba(34,197,94,.35); background: rgba(34,197,94,.08); }
.nt-pill.warn { color: var(--gold); border-color: rgba(234,179,8,.35); background: rgba(234,179,8,.08); }
.nt-pill.bad { color: var(--red); border-color: rgba(239,68,68,.35); background: rgba(239,68,68,.08); }
.nt-action-row {
    display: grid; grid-template-columns: 64px 1fr auto; gap: 10px;
    padding: 8px 0; border-bottom: 1px solid var(--border);
}
.nt-action-row:last-child { border-bottom: none; }
.nt-action-severity { font-size: 10px; font-weight: 800; color: var(--text-dim); }
.nt-action-severity.P0, .nt-action-severity.P1 { color: var(--red); }
.nt-action-severity.P2 { color: var(--gold); }
.nt-metric-grid { display:grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.nt-metric { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.nt-metric .label { color: var(--text-dim); font-size: 10px; text-transform: uppercase; letter-spacing:.5px; }
.nt-metric .value { margin-top: 4px; font-family: var(--font-mono); font-size: 18px; font-weight: 800; }
.nt-preview-banner {
    margin-bottom: 12px;
    border: 1px dashed var(--blue);
    border-radius: var(--radius);
    padding: 10px 14px;
    background: rgba(59,130,246,0.06);
    color: var(--text-dim);
    font-size: 12px;
}
.nt-preview-banner.swing { border-color: var(--purple); background: rgba(168,85,247,0.06); }
.nt-preview-banner strong { color: var(--text); }

/* ── Grid Layouts ────────────────────────────────────────────────── */
.grid, .grid-2, .grid-3 { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px; }
@media (min-width: 900px) { .grid-2 { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1200px) { .grid-3 { grid-template-columns: 1fr 1fr 1fr; } }

/* ── Tables ──────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; }
th {
    text-align: left; padding: 8px 14px; font-size: 10px;
    text-transform: uppercase; color: var(--text-dim);
    border-bottom: 1px solid var(--border); white-space: nowrap;
    letter-spacing: 0.3px; font-weight: 600;
    background: rgba(255,255,255,0.01);
    position: sticky; top: 0; z-index: 1;
}
td {
    padding: 8px 14px; border-bottom: 1px solid rgba(37,42,56,0.5);
    white-space: nowrap; font-size: 12px;
    transition: background var(--transition);
}
tr:last-child td { border-bottom: none; }
tr:hover td { background: rgba(59,130,246,0.03); }
tr:nth-child(even) td { background: rgba(255,255,255,0.008); }
tr:hover:nth-child(even) td { background: rgba(59,130,246,0.03); }

/* ── Buttons ─────────────────────────────────────────────────────── */
button, .btn {
    padding: 6px 14px; border: 1px solid var(--border); border-radius: 6px;
    background: var(--surface); color: var(--text); cursor: pointer;
    font-family: inherit; font-size: 11px; transition: all var(--transition);
    display: inline-flex; align-items: center; gap: 5px;
}
button:hover { border-color: var(--text-dim); background: var(--surface2); }
.btn-primary {
    background: linear-gradient(135deg, var(--blue), #2563eb);
    border-color: var(--blue); color: #fff;
}
.btn-primary:hover { opacity: 0.9; }
.btn-danger { border-color: rgba(239,68,68,0.4); color: var(--red); }
.btn-danger:hover { background: var(--red); color: #fff; }
.btn-sm { padding: 3px 10px; font-size: 10px; }

/* ── Stat Cards ──────────────────────────────────────────────────── */
.stats-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px;
    margin-bottom: 14px;
}
.stat-card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 16px 18px 14px;
    position: relative;
    overflow: hidden;
    box-shadow: var(--shadow-1);
    transition: all 0.25s ease;
}
.stat-card:hover {
    border-color: rgba(59,130,246,0.3);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0,0,0,0.25), 0 0 0 1px rgba(59,130,246,0.1);
}
.stat-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 3px;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    opacity: 1;
}
.stat-card:nth-child(1)::before { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.stat-card:nth-child(2)::before { background: linear-gradient(90deg, #a855f7, #c084fc); }
.stat-card:nth-child(3)::before { background: linear-gradient(90deg, #06b6d4, #22d3ee); }
.stat-card:nth-child(4)::before { background: linear-gradient(90deg, #6366f1, #818cf8); }
.stat-card:nth-child(5)::before { background: linear-gradient(90deg, #22c55e, #4ade80); }
.stat-card:nth-child(6)::before { background: linear-gradient(90deg, #ef4444, #f87171); }
.stat-card::after {
    content: '';
    position: absolute; top: 0; right: 0; width: 80px; height: 80px;
    border-radius: 50%;
    opacity: 0.03;
    pointer-events: none;
    transform: translate(20px, -20px);
}
.stat-card:nth-child(1)::after { background: #3b82f6; }
.stat-card:nth-child(2)::after { background: #a855f7; }
.stat-card:nth-child(3)::after { background: #06b6d4; }
.stat-card:nth-child(4)::after { background: #6366f1; }
.stat-card:nth-child(5)::after { background: #22c55e; }
.stat-card:nth-child(6)::after { background: #ef4444; }
.stat-card .stat-icon {
    width: 28px; height: 28px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 13px; margin-bottom: 10px;
}
.stat-card:nth-child(1) .stat-icon { background: rgba(59,130,246,0.12); color: #60a5fa; }
.stat-card:nth-child(2) .stat-icon { background: rgba(168,85,247,0.12); color: #c084fc; }
.stat-card:nth-child(3) .stat-icon { background: rgba(6,182,212,0.12); color: #22d3ee; }
.stat-card:nth-child(4) .stat-icon { background: rgba(99,102,241,0.12); color: #818cf8; }
.stat-card:nth-child(5) .stat-icon { background: rgba(34,197,94,0.12); color: #4ade80; }
.stat-card:nth-child(6) .stat-icon { background: rgba(239,68,68,0.12); color: #f87171; }
.stat-card .stat-label {
    font-size: 10px; color: var(--text-dim); text-transform: uppercase;
    letter-spacing: 0.6px; margin-bottom: 6px; font-weight: 500;
    display: flex; align-items: center; gap: 4px;
}
.stat-card .stat-value {
    font-size: 24px; font-weight: 700;
    font-family: var(--font-mono);
    line-height: 1.1;
    letter-spacing: -0.5px;
}
.stat-card .stat-sub {
    font-size: 10px; color: var(--text-dim); margin-top: 5px;
    font-family: var(--font-mono);
}

/* ── Chart Panels ────────────────────────────────────────────────── */
.charts-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 14px;
}
.charts-grid .chart-full { grid-column: 1 / -1; }
@media (max-width: 900px) { .charts-grid { grid-template-columns: 1fr; } }

.chart-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--blue);
    border-radius: var(--radius-lg);
    padding: 16px 18px 12px;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-0);
    transition: all 0.25s ease;
}
.chart-panel:hover {
    border-color: rgba(59,130,246,0.25);
    border-left-color: var(--blue);
    box-shadow: var(--shadow-1);
}
.chart-panel:nth-child(2) { border-left-color: var(--purple); }
.chart-panel:nth-child(3) { border-left-color: var(--cyan); }
.chart-panel:nth-child(4) { border-left-color: var(--gold); }
.chart-panel:nth-child(5) { border-left-color: var(--green); }
.chart-panel.chart-xs { min-height: 180px; }
.chart-panel.chart-sm { min-height: 220px; }
.chart-panel.chart-md { min-height: 260px; }
.chart-panel.chart-lg { min-height: 340px; }
.chart-panel .chart-canvas-wrap {
    flex: 1;
    position: relative;
    min-height: 0;
}
.chart-panel canvas {
    position: absolute;
    top: 0; left: 0;
    width: 100% !important;
    height: 100% !important;
}
.chart-panel .chart-title {
    font-size: 10px; font-weight: 600; color: var(--text-dim);
    text-transform: uppercase; letter-spacing: 0.7px; margin-bottom: 10px;
    display: flex; align-items: center; justify-content: space-between;
    flex-shrink: 0;
}
.chart-panel .chart-title .chart-value {
    font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: var(--text);
}
.chart-empty {
    display: flex; align-items: center; justify-content: center;
    height: 100%; color: var(--text-muted); font-size: 12px;
}

/* ── Badges ──────────────────────────────────────────────────────── */
.badge {
    padding: 1px 7px; border-radius: var(--radius-sm); font-size: 10px;
    font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    display: inline-flex; align-items: center;
}
.badge.paper { background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(59,130,246,0.3); }
.badge.live { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,0.3); animation: pulse 2s infinite; }
.badge.on { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
.badge.off { background: rgba(107,112,128,0.1); color: var(--text-dim); border: 1px solid var(--border); }

.trade-status {
    padding: 2px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; text-transform: uppercase;
}
.trade-status.pending { background: rgba(107,112,128,0.15); color: #9ca3af; }
.trade-status.entry_placed { background: var(--blue-dim); color: var(--blue); }
.trade-status.entry_filled { background: rgba(6,182,212,0.15); color: var(--cyan); }
.trade-status.tp1_filled { background: var(--green-dim); color: var(--green); }
.trade-status.tp2_filled { background: rgba(132,204,22,0.15); color: var(--lime); }
.trade-status.runner_active { background: var(--gold-dim); color: var(--gold); }
.trade-status.closed { background: rgba(107,112,128,0.1); color: var(--text-dim); }

.regime-badge {
    padding: 2px 6px; border-radius: 3px; font-size: 9px; font-weight: 700; text-transform: uppercase;
}
.regime-badge.trending { background: var(--blue-dim); color: var(--blue); }
.regime-badge.ranging { background: rgba(249,115,22,0.15); color: var(--orange); }
.regime-badge.volatile { background: var(--red-dim); color: var(--red); }
.regime-badge.unknown { background: rgba(107,112,128,0.1); color: var(--text-dim); }

.risk-badge {
    display: inline-block; padding: 2px 10px;
    border-radius: var(--radius-sm); font-size: 12px; font-weight: 700;
}
.risk-badge.score-1 { background: var(--green-dim); color: var(--green); border: 1px solid rgba(34,197,94,0.3); }
.risk-badge.score-2 { background: rgba(132,204,22,0.15); color: var(--lime); border: 1px solid rgba(132,204,22,0.3); }
.risk-badge.score-3 { background: var(--gold-dim); color: var(--gold); border: 1px solid rgba(234,179,8,0.3); }
.risk-badge.score-4 { background: rgba(249,115,22,0.15); color: var(--orange); border: 1px solid rgba(249,115,22,0.3); }
.risk-badge.score-5 { background: var(--red-dim); color: var(--red); border: 1px solid rgba(239,68,68,0.3); }

/* ── Status Indicators ───────────────────────────────────────────── */
.dot { width: 7px; height: 7px; border-radius: 50%; display: inline-block; }
.dot.green { background: var(--green); box-shadow: 0 0 6px var(--green); }
.dot.red { background: var(--red); box-shadow: 0 0 6px var(--red); }
.dot.gold { background: var(--gold); box-shadow: 0 0 6px var(--gold); }

.side-long { color: var(--green); font-weight: 600; }
.side-short { color: var(--red); font-weight: 600; }
.pnl-cell.positive { color: var(--green); }
.pnl-cell.negative { color: var(--red); }
.empty-state {
    padding: 28px 24px; text-align: center; color: var(--text-muted); font-size: 12px;
    display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.empty-state .empty-icon { font-size: 20px; opacity: 0.4; }
.empty-state .empty-hint { font-size: 11px; color: var(--text-dim); max-width: 280px; }
.empty-state .empty-action {
    margin-top: 4px; padding: 4px 14px; font-size: 11px;
    background: var(--blue-dim); color: var(--blue); border: 1px solid rgba(59,130,246,0.3);
    border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition);
}
.empty-state .empty-action:hover { background: var(--blue); color: #fff; }

/* ── Info Tooltips ───────────────────────────────────────────────── */
.info-tip {
    position: relative; display: inline-flex; align-items: center;
    margin-left: 4px; cursor: help; vertical-align: middle;
}
.info-tip .info-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 14px; height: 14px; border-radius: 50%;
    background: var(--blue-dim); color: var(--blue);
    font-size: 9px; font-weight: 700; font-style: normal;
    border: 1px solid rgba(59,130,246,0.3); flex-shrink: 0;
}
.info-tip .info-bubble {
    display: none; position: absolute; bottom: calc(100% + 8px);
    left: 50%; transform: translateX(-50%);
    background: var(--surface2); border: 1px solid var(--border);
    color: var(--text); padding: 8px 12px; border-radius: var(--radius);
    font-size: 11px; line-height: 1.5; width: 260px; z-index: 300;
    box-shadow: var(--shadow-lg);
    text-transform: none; letter-spacing: 0; font-weight: 400; white-space: normal;
}
.info-tip .info-bubble::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%); border: 6px solid transparent;
    border-top-color: var(--border);
}
.info-tip:hover .info-bubble { display: block; }

/* ── Animations ──────────────────────────────────────────────────── */
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.6} }
@keyframes tick-up   { 0% { background: rgba(34,197,94,0.35); color: #fff; } 100% { background: transparent; } }
@keyframes tick-down { 0% { background: rgba(239,68,68,0.35); color: #fff; } 100% { background: transparent; } }
.tick-up   { animation: tick-up   0.8s ease-out; }
.tick-down { animation: tick-down 0.8s ease-out; }

@keyframes fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.fade-in { animation: fade-in 0.3s ease-out; }

@keyframes shimmer {
    0% { background-position: -200px 0; }
    100% { background-position: 200px 0; }
}
.skeleton {
    background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 50%, var(--surface2) 75%);
    background-size: 400px 100%;
    animation: shimmer 1.5s infinite ease-in-out;
    border-radius: var(--radius-sm);
}
.skeleton-row { height: 32px; margin: 4px 14px; border-radius: var(--radius-sm); }

@keyframes trade-glow {
    0% { background: rgba(59,130,246,0.15); }
    100% { background: transparent; }
}
.trade-new td { animation: trade-glow 2s ease-out; }

/* ── System Strip (merged health + status bar) ────────────────────── */
.system-strip {
    background: var(--surface); border: 1px solid var(--border);
    border-radius: var(--radius); margin-bottom: 16px;
    overflow: visible;
}
.system-strip-row {
    display: flex; align-items: center; gap: 16px; padding: 6px 16px; flex-wrap: wrap;
}
.system-strip-row + .system-strip-row {
    border-top: 1px solid var(--border);
    padding: 7px 16px;
}

/* ── Forms ────────────────────────────────────────────────────────── */
input, select, textarea {
    background: var(--bg); border: 1px solid var(--border); border-radius: 6px;
    color: var(--text); padding: 8px 12px; font-family: inherit; font-size: 12px;
    transition: border-color var(--transition);
    width: 100%;
}
input:focus, select:focus, textarea:focus {
    outline: none; border-color: var(--blue);
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
label { font-size: 11px; color: var(--text-dim); font-weight: 500; margin-bottom: 4px; display: block; }

/* ── Theme Picker ────────────────────────────────────────────────── */
.theme-toggle {
    width: 30px; height: 30px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 14px;
    background: var(--surface2); border: 1px solid var(--border);
    color: var(--text-dim); transition: all var(--transition);
    position: relative;
}
.theme-toggle:hover { border-color: var(--blue); color: var(--blue); background: var(--blue-dim); }
.theme-picker {
    display: none; position: absolute; top: calc(100% + 8px); right: 0;
    background: var(--surface2); border: 1px solid var(--border);
    border-radius: var(--radius); padding: 8px; z-index: 200;
    box-shadow: var(--shadow-lg); min-width: 160px;
}
.theme-picker.open { display: block; }
.theme-option {
    display: flex; align-items: center; gap: 8px; padding: 6px 10px;
    border-radius: var(--radius-sm); cursor: pointer; font-size: 11px;
    font-weight: 500; color: var(--text-dim); transition: all var(--transition);
    border: none; background: none; width: 100%; text-align: left;
    font-family: var(--font-sans);
}
.theme-option:hover { background: var(--overlay-hover); color: var(--text); }
.theme-option.active { color: var(--blue); background: var(--blue-dim); }
.theme-dots { display: flex; gap: 3px; margin-left: auto; }
.theme-dot {
    width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1);
}

/* ── Table Compact ───────────────────────────────────────────────── */
.table-compact th { padding: 6px 10px; font-size: 9px; }
.table-compact td { padding: 6px 10px; font-size: 11px; }

/* ── Scrollbar ───────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-light); }

/* ── Mobile responsive ───────────────────────────────────────────── */
.hamburger {
    display: none; cursor: pointer; padding: 6px 8px; font-size: 18px;
    color: var(--text-dim); background: none; border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

@media (max-width: 768px) {
    .container { padding: 10px; }
    .header-top { flex-wrap: wrap; gap: 8px; padding: 10px 12px 6px; }
    .header-brand { gap: 10px; }
    .header-logo { font-size: 17px; }
    .header-pnl { display: none; }
    .header-divider { height: 16px; }
    .nav-meta { display: none; }
    .nav-meta.open { display: flex; flex-wrap: wrap; }
    .hamburger { display: inline-block; }
    .context-nav { gap: 1px; padding: 0 10px 6px; }
    .context-nav a, .context-nav .nav-trigger, .context-nav .nav-item {
        font-size: 10px; padding: 3px 8px;
    }
    .context-nav .nav-sep { display: none; }
    .context-nav .nav-dropdown { min-width: 140px; }
    .stats-row { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .grid-2 { grid-template-columns: 1fr !important; }
    /* Default fallback for tables that don't opt into mobile-cards:
       horizontal scroll. Tables with class="mobile-cards" override
       this in the dedicated rule below — they get block-level rows
       rendered as stacked cards instead of a scrolled grid. */
    table:not(.mobile-cards) { display: block; overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
    .info-tip .info-bubble { width: 200px; left: 0; transform: none; }
    .info-tip .info-bubble::after { left: 10px; }
    .charts-grid { grid-template-columns: 1fr; }
    .system-strip-row { gap: 8px; padding: 6px 10px; font-size: 11px; }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .stats-row { grid-template-columns: repeat(3, 1fr); }
}

/* ── Mobile Card Layout for Tables ──────────────────────────────────
   Audit 2026-05-03 / NovaTrade phase 1.

   Pre-fix this rule was scoped to `.panel-body table.mobile-cards`
   and gated at 640px. The .panel-body scope meant tables inside
   `.table-wrap` (used by index.html, positions.html, swing.html)
   never picked the rule up. Result: 0 of 27 templates with tables
   actually used mobile-cards.

   New form:
   - Drop the `.panel-body` ancestor — `table.mobile-cards` now works
     anywhere (panels, table-wrap, raw page body).
   - Raise breakpoint to 768px to match the Nova Control md:
     boundary, so phones AND narrow tablets get the card layout.
   - Pair with `table:not(.mobile-cards)` above so the global
     horizontal-scroll fallback still applies to tables that
     haven't opted in.

   Migration: add class="mobile-cards" to the <table>, and put
   data-label="Column Header" on each <td>. Header text is what
   shows as the key in the stacked card. Server-rendered Jinja
   templates do this inline; JS-rendered tables (positions.html,
   swing.html) do it where rows are appended.
*/
@media (max-width: 768px) {
    table.mobile-cards,
    table.mobile-cards thead,
    table.mobile-cards tbody,
    table.mobile-cards tr,
    table.mobile-cards td { display: block; }
    table.mobile-cards thead { display: none; }
    table.mobile-cards tr {
        background: var(--surface2); border: 1px solid var(--border);
        border-radius: var(--radius); margin: 8px 0; padding: 10px 14px;
        white-space: normal;
    }
    table.mobile-cards td {
        display: flex; justify-content: space-between; align-items: center;
        gap: 12px;
        padding: 4px 0; border-bottom: 1px solid rgba(37,42,56,0.3);
        font-size: 12px;
        white-space: normal;
        text-align: right;
    }
    table.mobile-cards td:last-child { border-bottom: none; }
    /* Only render the label slot if data-label has actual content.
       Tables migrated incrementally may have some <td>s without
       data-label — those should render as full-width values rather
       than an empty 70px ghost column. */
    table.mobile-cards td[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        font-size: 10px; font-weight: 600; color: var(--text-dim);
        text-transform: uppercase; letter-spacing: 0.3px;
        min-width: 70px; flex-shrink: 0;
        text-align: left;
    }
    /* Cells without data-label span the full row centred. */
    table.mobile-cards td:not([data-label]),
    table.mobile-cards td[data-label=""] {
        justify-content: flex-start;
    }
}