/* ===========================================================================
   Design direction B -- "Console": dark-first, dense, technical.

   Scoped under html[data-design="console"], so inert until selected.

   This one is meant to be seen in the DARK theme -- that is the design, and
   the light set below is a derived companion for anyone who cannot work on a
   dark screen all day. Structure differs from the other two directions as much
   as the colour does: hairlines instead of shadows, 6px corners, 40px rows,
   and a monospace face on every figure so columns align down the page.
   =========================================================================== */

/* --- light companion ----------------------------------------------------- */

html[data-design="console"] {
    --surface-lowest: #ffffff;
    --surface-low: #f3f5f8;
    --surface: #e9edf2;
    --surface-high: #dfe4ec;
    --surface-highest: #d3dae4;
    --surface-bg: #f7f9fb;
    /* bg-body-tertiary paints from the -rgb form, so the page ground needs
       this as well as --surface-bg. */
    --bs-tertiary-bg-rgb: 247, 249, 251;
    --on-surface: #0b1118;
    --on-surface-variant: #46525f;
    --outline: #6d7a88;
    --outline-variant: #cdd5de;

    --inverse-surface: #0e141c;
    --inverse-surface-deep: #080c12;
    --inverse-on-surface: #d7e3ee;

    /* app.css hardcodes the rail's palette instead of deriving it, so each
       direction has to restate it or the sidebar stays baseline navy. */
    --app-sidebar-bg: #0e141c;
    --app-sidebar-header-bg: #080c12;
    --app-sidebar-fg: #8698aa;

    --accent-700: #064e5c;
    --accent-600: #0d7490;
    --accent-500: #0e94b5;
    --accent-400: #22b8d8;
    --accent-200: #a5e7f5;
    --accent-100: #d3f3fb;
    --accent-50: #ecfbff;

    --console-lime: #4d7c0f;
    --console-grid: rgba(11, 17, 24, .09);

    --bs-primary: #0d7490;
    --bs-primary-rgb: 13, 116, 144;
    --bs-link-color-rgb: 13, 116, 144;
    --bs-link-hover-color-rgb: 6, 78, 92;

    --bs-font-sans-serif: 'IBM Plex Sans', 'Open Sans', system-ui, sans-serif;
    --bs-font-monospace: 'IBM Plex Mono', 'JetBrains Mono', ui-monospace, Consolas, monospace;

    /* Sharp, not soft. Structure is drawn with hairlines, so the shadows that
       carry the other directions are switched off entirely here. */
    --bs-border-radius: 5px;
    --bs-border-radius-sm: 4px;
    --bs-border-radius-lg: 6px;
    --bs-border-radius-xl: 8px;
    --bs-card-border-radius: 6px;
    --elev-1: none;
    --elev-2: 0 8px 28px rgba(8, 12, 18, .18);
    --bs-card-box-shadow: none;
}

/* --- the real thing ------------------------------------------------------ */

html[data-design="console"][data-bs-theme="dark"] {
    --surface-lowest: #0e141c;
    --surface-low: #121a24;
    --surface: #16202c;
    --surface-high: #1c2836;
    --surface-highest: #243141;
    --surface-bg: #080c12;
    /* bg-body-tertiary paints from the -rgb form, so the page ground needs
       this as well as --surface-bg. */
    --bs-tertiary-bg-rgb: 8, 12, 18;
    --on-surface: #d7e3ee;
    --on-surface-variant: #93a3b4;
    --outline: #6a7b8d;
    --outline-variant: #223040;

    --inverse-surface: #0b1118;
    --inverse-surface-deep: #05080c;
    --inverse-on-surface: #d7e3ee;

    --accent-700: #cffafe;
    --accent-600: #22d3ee;
    --accent-500: #06b6d4;
    --accent-400: #0891b2;
    --accent-200: #164e63;
    --accent-100: #113c4d;
    --accent-50: #0c2d3a;

    --console-lime: #a3e635;
    --console-grid: rgba(215, 227, 238, .07);

    --status-success: #a3e635;
    --status-success-bg: #16250a;
    --status-success-border: #3f6212;
    --status-danger: #fb7185;
    --status-danger-bg: #2b0b11;
    --status-danger-border: #7f1d2b;
    --status-warning: #fbbf24;
    --status-warning-bg: #2a1d02;
    --status-warning-border: #78500a;

    --bs-primary-rgb: 34, 211, 238;
    --bs-link-color-rgb: 34, 211, 238;
    --bs-link-hover-color-rgb: 207, 250, 254;
    --bs-success-rgb: 163, 230, 53;
    --bs-danger-rgb: 251, 113, 133;
    --bs-warning-rgb: 251, 191, 36;
    --bs-emphasis-color: #f1f7fc;
    --elev-1: none;
    --elev-2: 0 10px 34px rgba(0, 0, 0, .6);
}

/* --- structure is hairlines, not shadows --------------------------------- */

html[data-design="console"] .card,
html[data-design="console"] .filter-bar,
html[data-design="console"] .kpi-card {
    background: var(--surface-lowest);
    border: 1px solid var(--outline-variant);
    box-shadow: none;
}

/* The primary action is the one glowing thing on the screen. */
html[data-design="console"][data-bs-theme="dark"] .btn-primary {
    color: #04141a;
    font-weight: 600;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .4), 0 0 18px rgba(34, 211, 238, .22);
}

html[data-design="console"] .sidebar-link.active {
    background: var(--accent-100);
    color: var(--accent-700);
    border-left: 2px solid var(--accent-600);
    border-radius: 0 5px 5px 0;
}

html[data-design="console"][data-bs-theme="dark"] .sidebar-link.active i {
    color: var(--accent-600);
}

/* --- density: fit more on screen ----------------------------------------- */

html[data-design="console"] .table > tbody > tr > td,
html[data-design="console"] .table > thead > tr > th {
    padding-top: .45rem;
    padding-bottom: .45rem;
    font-size: .8125rem;
}

html[data-design="console"] .table > thead th {
    text-transform: uppercase;
    letter-spacing: .08em;
    font-size: .6875rem;
    color: var(--on-surface-variant);
    border-bottom: 1px solid var(--outline-variant);
}

html[data-design="console"] .form-control,
html[data-design="console"] .form-select,
html[data-design="console"] .btn {
    font-size: .8125rem;
    padding-top: .3rem;
    padding-bottom: .3rem;
}

/* --- numbers are the hero ------------------------------------------------ */

/* Every figure in a mono face, so columns line up character for character --
   the single biggest readability win on a screen that is almost all numbers. */
html[data-design="console"] .kpi-value,
html[data-design="console"] .table td.text-end,
html[data-design="console"] .table th.text-end,
html[data-design="console"] .font-monospace,
html[data-design="console"] code {
    font-family: var(--bs-font-monospace);
    font-variant-numeric: tabular-nums;
}

html[data-design="console"] .kpi-value {
    font-size: 1.45rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

html[data-design="console"][data-bs-theme="dark"] .kpi-value {
    text-shadow: 0 0 20px rgba(34, 211, 238, .18);
}

/* The KPI strip reads as one divided bar rather than eight separate cards:
   collapse the gap and let the hairlines do the separating. */
html[data-design="console"] .kpi-row {
    gap: 0;
}

html[data-design="console"] .kpi-row > [class*="col"] .kpi-card {
    border-radius: 0;
    border-left-width: 0;
}

html[data-design="console"] .kpi-row > [class*="col"]:first-child .kpi-card {
    border-left-width: 1px;
    border-radius: 6px 0 0 6px;
}

html[data-design="console"] .kpi-row > [class*="col"]:last-child .kpi-card {
    border-radius: 0 6px 6px 0;
}

html[data-design="console"] .kpi-card .kpi-label {
    font-size: .625rem;
    letter-spacing: .1em;
}

/* The dashboard's five tiles are .stat-card, a separate component from the
   reports' .kpi-card. Same treatment: one divided bar, mono figures. */
html[data-design="console"] .stat-card {
    border: 1px solid var(--outline-variant) !important;
    border-radius: 5px;
    box-shadow: none;
}

html[data-design="console"] .stat-value {
    font-family: var(--bs-font-monospace);
    font-variant-numeric: tabular-nums;
    font-size: 1.75rem;
    font-weight: 600;
}

html[data-design="console"][data-bs-theme="dark"] .stat-value {
    text-shadow: 0 0 22px rgba(34, 211, 238, .16);
}

html[data-design="console"] .stat-card .card-body {
    padding: .8rem .9rem;
}

/* --- chrome -------------------------------------------------------------- */

html[data-design="console"] .badge {
    border-radius: 3px;
    text-transform: uppercase;
    letter-spacing: .06em;
    font-size: .65rem;
    font-weight: 600;
}

html[data-design="console"] .app-topbar {
    border-bottom: 1px solid var(--outline-variant);
}

html[data-design="console"] h1,
html[data-design="console"] .h1,
html[data-design="console"] h1.h3 {
    font-size: 1.5rem;
    font-weight: 600;
    letter-spacing: -.01em;
}

/* A live status dot, so the tool looks like it is watching something. The
   Replay/Live mode badge is the only always-present element that means
   "system state", and it is the sole pill badge in the top bar. */
html[data-design="console"] .app-topbar .badge.rounded-pill::before {
    content: "";
    display: inline-block;
    width: .4rem;
    height: .4rem;
    margin-right: .35rem;
    border-radius: 50%;
    background: var(--console-lime);
    animation: console-pulse 2.4s ease-in-out infinite;
}

@keyframes console-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: .35; }
}

@media (prefers-reduced-motion: reduce) {
    html[data-design="console"] .app-topbar .badge.rounded-pill::before {
        animation: none;
    }
}