/* ========================================
   1. Design Tokens
   ======================================== */
:root {
    --bg-base: #0a0e14;
    --bg-surface: #0f1318;
    --bg-elevated: #151a21;
    --bg-hover: #1a2029;
    --bg-active: #1e2530;

    --border-subtle: #1c2230;
    --border-default: #252d3a;
    --border-bright: #344054;

    --text-primary: #e8ecf1;
    --text-secondary: #8b95a5;
    --text-muted: #525c6b;

    --color-long: #00c087;
    --color-long-dim: #00c08720;
    --color-short: #ef4444;
    --color-short-dim: #ef444420;
    --color-neutral: #3b82f6;
    --color-warning: #f59e0b;
    --color-critical: #ef4444;
    --color-info: #525c6b;
    --color-accent: #6366f1;

    --font-mono: 'JetBrains Mono', 'Fira Code', 'SF Mono', 'Consolas', monospace;
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* ========================================
   2. Reset & Base
   ======================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; min-width: 1024px; }
body {
    background: var(--bg-base);
    color: var(--text-primary);
    font-family: var(--font-ui);
    font-size: 13px;
    line-height: 1.4;
    overflow: hidden;
}
a { color: var(--color-neutral); text-decoration: none; transition: color 0.1s; }
a:hover { color: var(--text-primary); }

/* ========================================
   3. Typography
   ======================================== */
h1 {
    font-size: 14px; font-weight: 600; color: var(--text-primary);
    text-transform: uppercase; letter-spacing: 0.5px;
}
h2 {
    font-size: 11px; font-weight: 600; color: var(--text-secondary);
    text-transform: uppercase; letter-spacing: 1px;
}

/* ========================================
   4. Page Layout
   ======================================== */
.page-wrap { display: flex; flex-direction: column; height: 100vh; }
.page-body { flex: 1; overflow: hidden; }
.page-body-scroll { flex: 1; overflow-y: auto; padding: 12px 16px; }

/* Dashboard terminal grid */
.terminal-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 1px;
    background: var(--border-subtle);
    height: 100%;
}
.terminal-grid .panel:first-child { grid-row: 1 / 3; }

/* Detail pages */
.detail-page { display: flex; flex-direction: column; height: 100%; overflow-y: auto; padding: 12px 16px; }
.detail-header {
    display: flex; align-items: center; justify-content: space-between;
    padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--border-subtle);
}
.section-gap { margin-bottom: 16px; }

/* ========================================
   5. Navigation
   ======================================== */
.nav {
    display: flex; align-items: center; height: 40px;
    padding: 0 16px; background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-default); flex-shrink: 0;
}
.nav-brand {
    font-size: 13px; font-weight: 700; color: var(--color-accent);
    text-transform: uppercase; letter-spacing: 2px; margin-right: 24px;
}
.nav-brand:hover { color: var(--color-accent); }
.nav-links { display: flex; gap: 4px; flex: 1; }
.nav-links a {
    font-size: 12px; color: var(--text-secondary); padding: 8px 12px;
    border-bottom: 2px solid transparent; transition: color 0.1s, border-color 0.1s;
}
.nav-links a:hover { color: var(--text-primary); }
.nav-links a.active { color: var(--text-primary); border-bottom-color: var(--color-accent); }
.nav-status {
    display: flex; align-items: center; gap: 8px;
    font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
}
.live-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--color-long); animation: pulse-live 2s ease-in-out infinite;
}
.live-label {
    color: var(--color-long); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px;
}

/* Status bar */
.status-bar {
    display: flex; align-items: center; height: 28px; padding: 0 16px;
    background: var(--bg-surface); border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-mono); font-size: 11px; color: var(--text-muted);
    gap: 16px; flex-shrink: 0; position: relative;
}
.status-bar::after {
    content: ''; position: absolute; bottom: 0; left: 0; height: 2px;
    background: var(--color-accent); animation: refresh-bar 10s linear infinite;
}
.status-sep { color: var(--border-default); }

/* ========================================
   6. Panels
   ======================================== */
.panel { display: flex; flex-direction: column; background: var(--bg-surface); overflow: hidden; }
.panel-header {
    display: flex; align-items: center; justify-content: space-between;
    height: 32px; padding: 0 12px; background: var(--bg-elevated);
    border-bottom: 1px solid var(--border-subtle); flex-shrink: 0;
}
.panel-title {
    font-size: 10px; font-weight: 600; text-transform: uppercase;
    letter-spacing: 1px; color: var(--text-secondary);
}
.panel-count {
    font-family: var(--font-mono); font-size: 10px; color: var(--text-muted);
    background: var(--bg-active); padding: 1px 6px; border-radius: 2px;
}
.panel-body { flex: 1; overflow-y: auto; }

/* ========================================
   7. Tables
   ======================================== */
table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12px; }
thead th {
    font-family: var(--font-ui); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.5px; color: var(--text-secondary);
    background: var(--bg-elevated); padding: 6px 8px; text-align: left;
    border-bottom: 1px solid var(--border-default); position: sticky; top: 0; z-index: 1;
}
td {
    padding: 5px 8px; border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap; color: var(--text-primary);
}
tr:hover td { background: var(--bg-hover); }
.text-right { text-align: right; }

/* Value coloring */
.nop-positive { color: var(--color-long); }
.nop-negative { color: var(--color-short); }
.nop-zero { color: var(--text-muted); }
.dir-long, .dir-buy { color: var(--color-long); font-weight: 500; }
.dir-short, .dir-sell { color: var(--color-short); font-weight: 500; }

/* Row severity borders */
tr.row-critical td:first-child { border-left: 3px solid var(--color-critical); }
tr.row-warning td:first-child { border-left: 3px solid var(--color-warning); }
tr.row-critical-pulse td:first-child { animation: critical-pulse 2s ease-in-out infinite; }

/* ========================================
   8. Stat Cards
   ======================================== */
.stats { display: flex; gap: 1px; background: var(--border-subtle); flex-shrink: 0; }
.stat { flex: 1; background: var(--bg-surface); padding: 10px 14px; min-width: 100px; }
.stat-label {
    font-size: 10px; font-weight: 500; text-transform: uppercase;
    letter-spacing: 0.8px; color: var(--text-muted); margin-bottom: 4px;
}
.stat-value {
    font-family: var(--font-mono); font-size: 20px; font-weight: 700;
    color: var(--text-primary); font-variant-numeric: tabular-nums;
}
.stat-value.nop-positive { color: var(--color-long); }
.stat-value.nop-negative { color: var(--color-short); }
.stat-accent-long { border-left: 3px solid var(--color-long); }
.stat-accent-short { border-left: 3px solid var(--color-short); }
.stat-accent-neutral { border-left: 3px solid var(--color-neutral); }
.stat-accent-warning { border-left: 3px solid var(--color-warning); }

/* ========================================
   9. Badges
   ======================================== */
.badge {
    display: inline-block; font-family: var(--font-ui); font-size: 10px;
    font-weight: 600; text-transform: uppercase; padding: 2px 6px; border-radius: 2px;
}
.severity-critical { background: var(--color-critical); color: #fff; }
.severity-warning { background: var(--color-warning); color: var(--bg-base); }
.severity-info { background: var(--bg-elevated); color: var(--text-secondary); border: 1px solid var(--border-default); }

/* ========================================
   10. Timeline
   ======================================== */
.timeline { padding: 8px 0; }
.timeline-item {
    position: relative; padding: 10px 14px; margin: 0 0 1px 0;
    background: var(--bg-surface); border-left: 3px solid var(--border-default);
    transition: background 0.1s;
}
.timeline-item:hover { background: var(--bg-hover); }
.timeline-item.severity-critical { border-left-color: var(--color-critical); }
.timeline-item.severity-warning { border-left-color: var(--color-warning); }
.timeline-item.severity-info { border-left-color: var(--color-info); }
.timeline-row { display: flex; align-items: center; gap: 12px; }
.timeline-time { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); flex-shrink: 0; }
.timeline-type { font-family: var(--font-mono); font-size: 12px; font-weight: 500; color: var(--text-primary); }
.timeline-filled { font-family: var(--font-mono); font-size: 11px; color: var(--text-secondary); margin-left: auto; }

/* ========================================
   11. Time Selector
   ======================================== */
.time-selector { display: inline-flex; background: var(--bg-elevated); border: 1px solid var(--border-default); }
.time-selector a {
    font-family: var(--font-mono); font-size: 11px; padding: 4px 12px;
    color: var(--text-secondary); border-right: 1px solid var(--border-default);
    transition: background 0.1s, color 0.1s;
}
.time-selector a:last-child { border-right: none; }
.time-selector a:hover { background: var(--bg-hover); color: var(--text-primary); }
.time-selector a.active { background: var(--color-accent); color: #fff; }

/* ========================================
   12. Charts
   ======================================== */
.chart-container { background: var(--bg-surface); border: 1px solid var(--border-subtle); padding: 12px; margin-bottom: 12px; }

/* ========================================
   13. Payload Toggle
   ======================================== */
.payload-toggle {
    cursor: pointer; font-size: 11px; color: var(--color-neutral); user-select: none;
}
.payload-toggle:hover { color: var(--text-primary); }
.payload-content {
    max-height: 0; overflow: hidden; transition: max-height 0.2s ease;
    background: var(--bg-base); font-family: var(--font-mono); font-size: 11px;
    color: var(--text-secondary); white-space: pre-wrap; word-break: break-all;
    border: 1px solid var(--border-subtle); padding: 0 8px; margin-top: 0;
}
.payload-content.open { max-height: 300px; overflow-y: auto; padding: 8px; margin-top: 6px; }

/* ========================================
   14. Animations
   ======================================== */
@keyframes pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
@keyframes refresh-bar { from { width: 100%; } to { width: 0%; } }
@keyframes critical-pulse {
    0%, 100% { border-left-color: var(--color-critical); }
    50% { border-left-color: transparent; }
}

/* ========================================
   15. Scrollbar
   ======================================== */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-default); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-bright); }

/* ========================================
   16. Utilities
   ======================================== */
.empty { text-align: center; padding: 32px 16px; color: var(--text-muted); font-size: 12px; }
footer {
    padding: 6px 16px; font-size: 10px; color: var(--text-muted); text-align: center;
    border-top: 1px solid var(--border-subtle); background: var(--bg-surface); flex-shrink: 0;
}

/* ========================================
   17. Responsive
   ======================================== */
@media (max-width: 1280px) {
    .terminal-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; }
    .terminal-grid .panel:first-child { grid-row: auto; max-height: 40vh; }
    .terminal-grid .panel { max-height: 35vh; }
}