/*
  Stable design tokens + Bootstrap-5 overrides.
  Matches docs/05-ui-wireframes.md.
*/
:root {
    --c-primary: #3B82F6;
    --c-success: #10B981;
    --c-warn: #F59E0B;
    --c-danger: #EF4444;
    --c-info:  #6366F1;
    --r-sm: 4px;  --r-md: 8px;  --r-lg: 12px;  --r-xl: 16px;
    --dur-fast: 120ms;  --dur-med: 200ms;
    --ease: cubic-bezier(.2,.7,.2,1);
    --font-ui:  "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, monospace;
}
[data-bs-theme="light"] {
    --c-bg: #FAFBFC;
    --c-surface: #FFFFFF;
    --c-surface-alt: #F3F5F8;
    --c-border: #DEE3EA;
    --c-text: #0B0E14;
    --c-text-mute: #5A6272;
}
[data-bs-theme="dark"] {
    --c-bg: #0E1013;
    --c-surface: #171A1F;
    --c-surface-alt: #1C2027;
    --c-border: #2A2F38;
    --c-text: #E6EAF0;
    --c-text-mute: #96A0AF;
}

html, body { font-family: var(--font-ui); }
body { background: var(--c-bg); color: var(--c-text); }

.brand { font-weight: 700; letter-spacing: .5px; }
.brand::before { content: "★"; color: var(--c-primary); margin-right: .3rem; }

.topbar {
    background: var(--c-surface);
    border-bottom: 1px solid var(--c-border);
    height: 52px;
    position: sticky; top: 0; z-index: 20;
}
.topbar .search { min-width: 320px; }
.topbar .badge-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-left: 2px; }
.topbar .badge-dot.ok  { background: var(--c-success); }
.topbar .badge-dot.warn { background: var(--c-warn); }
.topbar .badge-dot.err  { background: var(--c-danger); }

.sidebar {
    width: 240px; min-width: 240px; background: var(--c-surface);
    border-right: 1px solid var(--c-border);
    padding: 1rem .5rem; overflow-y: auto;
}
.sidebar h6 {
    color: var(--c-text-mute); text-transform: uppercase;
    font-size: 11px; letter-spacing: 1px; margin: .75rem .5rem .25rem;
}
.sidebar a.nav-link {
    color: var(--c-text); border-radius: var(--r-sm); padding: .35rem .5rem;
    display: flex; align-items: center; gap: .5rem;
}
.sidebar a.nav-link:hover { background: var(--c-surface-alt); }
.sidebar a.nav-link.active { background: color-mix(in oklab, var(--c-primary) 15%, transparent); color: var(--c-primary); }

.statusbar {
    background: var(--c-surface); border-top: 1px solid var(--c-border);
    padding: .3rem 1rem; font-size: 12px; color: var(--c-text-mute);
}
.status-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: .35rem; vertical-align: middle; }
.status-dot.ok { background: var(--c-success); }
.status-dot.warn { background: var(--c-warn); }

.card-widget {
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--r-md);
    padding: 1rem; height: 100%;
}
.card-widget h6 { color: var(--c-text-mute); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.card-widget .kpi { font-size: 28px; font-weight: 700; line-height: 1.1; }

.live-region { position: relative; }
.live-region::after {
    content: "Live"; position: absolute; top: 8px; right: 12px;
    font-size: 10px; color: var(--c-text-mute); background: var(--c-surface-alt);
    padding: 1px 6px; border-radius: 10px;
}

.table-dense th, .table-dense td { padding: .45rem .6rem; }
.table-dense thead th {
    background: var(--c-surface-alt); color: var(--c-text-mute);
    font-size: 12px; text-transform: uppercase; letter-spacing: .5px;
    border-bottom: 1px solid var(--c-border);
}

.pulse { animation: pulse 1.6s var(--ease) infinite; }
@keyframes pulse {
    0% { opacity: 1; } 50% { opacity: .4; } 100% { opacity: 1; }
}

.sparkline { width: 100%; height: 32px; }

.cmdk-mask {
    position: fixed; inset: 0; background: rgba(0,0,0,.5); backdrop-filter: blur(4px);
    display: flex; justify-content: center; padding-top: 12vh; z-index: 50;
}
.cmdk {
    width: min(640px, 92vw); background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--r-lg);
    box-shadow: 0 20px 60px rgba(0,0,0,.4);
}
.cmdk input {
    width: 100%; background: transparent; border: 0; padding: 1rem 1.25rem;
    color: var(--c-text); font-size: 15px; outline: none;
    border-bottom: 1px solid var(--c-border);
}
.cmdk ul { list-style: none; margin: 0; padding: .5rem; max-height: 50vh; overflow-y: auto; }
.cmdk li {
    padding: .5rem .75rem; border-radius: var(--r-sm); cursor: pointer;
    display: flex; align-items: center; gap: .75rem;
}
.cmdk li.active, .cmdk li:hover { background: var(--c-surface-alt); }
.cmdk .kbd {
    margin-left: auto; font-family: var(--font-mono); font-size: 11px;
    color: var(--c-text-mute); background: var(--c-surface-alt);
    padding: 2px 6px; border-radius: var(--r-sm); border: 1px solid var(--c-border);
}

/* Login page */
.login-hero {
    min-height: 100vh; display: grid; place-items: center; padding: 2rem;
    background: radial-gradient(ellipse at top left, color-mix(in oklab, var(--c-primary) 25%, transparent), transparent 60%),
                radial-gradient(ellipse at bottom right, color-mix(in oklab, var(--c-info) 20%, transparent), transparent 60%),
                var(--c-bg);
}
.login-card {
    width: 100%; max-width: 380px; background: var(--c-surface);
    border: 1px solid var(--c-border); border-radius: var(--r-lg);
    padding: 2rem;
}

.trend-up   { color: var(--c-success); }
.trend-down { color: var(--c-danger); }
.trend-flat { color: var(--c-text-mute); }