/*
 * PredictAI dashboard — single stylesheet.
 *
 * Design goals
 * ------------
 *   1. Dark theme by default, readable in a late-night tmux pane.
 *   2. Zero build step: plain CSS, custom properties, no preprocessor.
 *   3. Dense but legible — this is a stats tool, not a marketing page.
 *   4. Status / outcome colours are reused across every table so a
 *      glance is enough to read the state of the recorder.
 *
 * Structure
 * ---------
 *   - :root / reset / typography
 *   - layout primitives (.site-header, .site-main, .site-footer)
 *   - nav
 *   - cards + panels
 *   - tables (health, windows, ticks)
 *   - status pills / traffic lights
 *   - charts (uPlot overrides)
 *   - utility classes
 *   - responsive breakpoints
 *   - light-theme override via prefers-color-scheme
 */


/* ─────────────────────────────────────────────────────────────────────
 * Tokens
 * ───────────────────────────────────────────────────────────────────── */

:root {
    color-scheme: dark light;

    /* Backgrounds */
    --bg:           #0e1117;
    --bg-elev-1:    #161b22;
    --bg-elev-2:    #1d232c;
    --bg-inline:    #0a0d12;

    /* Surfaces & borders */
    --border:       #262c36;
    --border-soft:  #1b2029;
    --divider:      #20262f;

    /* Text */
    --fg:           #e6edf3;
    --fg-muted:     #9aa4af;
    --fg-dim:       #6b7480;
    --fg-link:      #7fb7ff;
    --fg-link-hov:  #a7cbff;

    /* Brand */
    --accent:       #7c5cff;
    --accent-soft:  rgba(124, 92, 255, 0.14);

    /* Status */
    --ok:           #3fb950;
    --ok-bg:        rgba(63, 185, 80, 0.12);
    --warn:         #d29922;
    --warn-bg:      rgba(210, 153, 34, 0.15);
    --stale:        #f85149;
    --stale-bg:     rgba(248, 81, 73, 0.14);
    --empty:        #8b949e;
    --empty-bg:     rgba(139, 148, 158, 0.12);
    --error:        #ff6b6b;
    --error-bg:     rgba(255, 107, 107, 0.14);

    /* Outcome */
    --up:           #3fb950;
    --up-bg:        rgba(63, 185, 80, 0.12);
    --down:         #f85149;
    --down-bg:      rgba(248, 81, 73, 0.14);
    --unknown:      #8b949e;
    --unknown-bg:   rgba(139, 148, 158, 0.12);

    /* Scale */
    --radius-sm:    4px;
    --radius-md:    8px;
    --radius-lg:    12px;

    --shadow-1:     0 1px 2px rgba(0, 0, 0, 0.35);
    --shadow-2:     0 6px 20px rgba(0, 0, 0, 0.45);

    /* Typography */
    --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                 Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "JetBrains Mono",
                 Menlo, Consolas, "Liberation Mono", monospace;

    --fs-xs:        0.75rem;
    --fs-sm:        0.8125rem;
    --fs-md:        0.875rem;
    --fs-lg:        1rem;
    --fs-xl:        1.25rem;
    --fs-2xl:       1.5rem;

    --lh-tight:     1.25;
    --lh-normal:    1.5;

    /* Layout */
    --max-width:    1280px;
    --pad-page-x:   clamp(12px, 2vw, 28px);
    --pad-page-y:   20px;
    --gap-md:       16px;
    --gap-lg:       24px;
}


/* ─────────────────────────────────────────────────────────────────────
 * Reset / base
 * ───────────────────────────────────────────────────────────────────── */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: var(--bg);
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--fs-md);
    line-height: var(--lh-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

h1, h2, h3, h4 {
    margin: 0 0 0.4em;
    font-weight: 600;
    line-height: var(--lh-tight);
    color: var(--fg);
}

h1 { font-size: var(--fs-2xl); }
h2 { font-size: var(--fs-xl); }
h3 { font-size: var(--fs-lg); }
h4 { font-size: var(--fs-md); }

p { margin: 0 0 0.75em; }

code, pre, samp, kbd {
    font-family: var(--font-mono);
    font-size: 0.92em;
}

code {
    background: var(--bg-inline);
    padding: 0.08em 0.4em;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-soft);
}

a {
    color: var(--fg-link);
    text-decoration: none;
}
a:hover,
a:focus-visible {
    color: var(--fg-link-hov);
    text-decoration: underline;
    text-underline-offset: 2px;
}

hr {
    border: 0;
    border-top: 1px solid var(--divider);
    margin: var(--gap-lg) 0;
}

::selection {
    background: var(--accent-soft);
    color: var(--fg);
}

:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}


/* ─────────────────────────────────────────────────────────────────────
 * Layout primitives
 * ───────────────────────────────────────────────────────────────────── */

.site-header {
    background: var(--bg-elev-1);
    border-bottom: 1px solid var(--border);
    position: sticky;
    top: 0;
    z-index: 10;
    backdrop-filter: blur(8px);
}

.site-header__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 10px var(--pad-page-x);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--gap-md);
}

.site-title {
    color: var(--fg);
    font-weight: 600;
    font-size: var(--fs-lg);
    letter-spacing: 0.01em;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    text-decoration: none;
}
.site-title:hover {
    color: var(--fg);
    text-decoration: none;
}

.site-title__mark {
    color: var(--accent);
    font-size: 1.1em;
    line-height: 1;
}

.site-main {
    flex: 1 0 auto;
    max-width: var(--max-width);
    width: 100%;
    margin: 0 auto;
    padding: var(--pad-page-y) var(--pad-page-x);
}

.site-footer {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    background: var(--bg-elev-1);
    color: var(--fg-dim);
    font-size: var(--fs-xs);
}

.site-footer__inner {
    max-width: var(--max-width);
    margin: 0 auto;
    padding: 12px var(--pad-page-x);
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.site-footer a {
    color: var(--fg-dim);
    font-family: var(--font-mono);
}
.site-footer a:hover {
    color: var(--fg-link-hov);
}

.site-footer__sep {
    opacity: 0.4;
}

.site-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    color: var(--fg-muted);
}

.site-meta__label {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--fg-dim);
}


/* ─────────────────────────────────────────────────────────────────────
 * Nav
 * ───────────────────────────────────────────────────────────────────── */

.site-nav {
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
}

.site-nav__link {
    color: var(--fg-muted);
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.2;
    transition: background-color 0.12s ease, color 0.12s ease;
}

.site-nav__link:hover,
.site-nav__link:focus-visible {
    color: var(--fg);
    background: var(--bg-elev-2);
    text-decoration: none;
}

.site-nav__link.is-active {
    color: var(--fg);
    background: var(--accent-soft);
    box-shadow: inset 0 0 0 1px rgba(124, 92, 255, 0.35);
}


/* ─────────────────────────────────────────────────────────────────────
 * Cards / panels
 * ───────────────────────────────────────────────────────────────────── */

.card {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-1);
    margin-bottom: var(--gap-lg);
    overflow: hidden;
}

.card__header {
    padding: 14px 18px;
    border-bottom: 1px solid var(--divider);
    display: flex;
    flex-wrap: wrap;
    gap: var(--gap-md);
    align-items: baseline;
    justify-content: space-between;
}

.card__title {
    margin: 0;
    font-size: var(--fs-lg);
    font-weight: 600;
}

.card__subtitle {
    margin: 4px 0 0;
    color: var(--fg-muted);
    font-size: var(--fs-sm);
}

.card__body {
    padding: 14px 18px;
}

.card__body--flush {
    padding: 0;
}

.card__footer {
    padding: 12px 18px;
    border-top: 1px solid var(--divider);
    color: var(--fg-muted);
    font-size: var(--fs-sm);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    justify-content: space-between;
}


/* ─────────────────────────────────────────────────────────────────────
 * Summary metric tiles (for the top of pages)
 * ───────────────────────────────────────────────────────────────────── */

.metric-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
    margin-bottom: var(--gap-lg);
}

.metric {
    background: var(--bg-elev-1);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric__label {
    color: var(--fg-dim);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    font-size: var(--fs-xs);
}

.metric__value {
    font-family: var(--font-mono);
    font-size: var(--fs-xl);
    font-weight: 600;
    color: var(--fg);
}

.metric__sub {
    color: var(--fg-muted);
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
}


/* ─────────────────────────────────────────────────────────────────────
 * Tables
 * ───────────────────────────────────────────────────────────────────── */

.table-wrap {
    width: 100%;
    overflow-x: auto;
}

.table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-variant-numeric: tabular-nums;
    font-size: var(--fs-sm);
}

.table th,
.table td {
    padding: 10px 14px;
    text-align: left;
    vertical-align: middle;
    border-bottom: 1px solid var(--divider);
    white-space: nowrap;
}

.table thead th {
    position: sticky;
    top: 0;
    background: var(--bg-elev-2);
    color: var(--fg-muted);
    font-weight: 600;
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    border-bottom: 1px solid var(--border);
}

.table tbody tr:last-child td {
    border-bottom: 0;
}

.table tbody tr {
    transition: background-color 0.1s ease;
}

.table tbody tr:hover {
    background: rgba(255, 255, 255, 0.02);
}

.table td.is-mono,
.table th.is-mono,
.table td.num,
.table th.num,
.table td.ts {
    font-family: var(--font-mono);
}

.table td.num,
.table th.num {
    text-align: right;
}

.table td.ts {
    color: var(--fg-muted);
}

.table td.is-dim {
    color: var(--fg-dim);
}

.table a {
    color: var(--fg-link);
    font-family: var(--font-mono);
}

.table__caption {
    caption-side: bottom;
    padding: 10px 14px;
    color: var(--fg-dim);
    font-size: var(--fs-xs);
    text-align: left;
}

.empty-state {
    padding: 40px 18px;
    text-align: center;
    color: var(--fg-muted);
}

.empty-state__title {
    color: var(--fg);
    font-weight: 600;
    margin-bottom: 4px;
}


/* ─────────────────────────────────────────────────────────────────────
 * Pills / traffic lights
 * ───────────────────────────────────────────────────────────────────── */

.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: var(--fs-xs);
    font-family: var(--font-mono);
    font-weight: 600;
    letter-spacing: 0.04em;
    line-height: 1.5;
    border: 1px solid transparent;
    white-space: nowrap;
}

.pill::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
    display: inline-block;
}

.pill--ok      { color: var(--ok);      background: var(--ok-bg); }
.pill--warn    { color: var(--warn);    background: var(--warn-bg); }
.pill--stale   { color: var(--stale);   background: var(--stale-bg); }
.pill--empty   { color: var(--empty);   background: var(--empty-bg); }
.pill--error   { color: var(--error);   background: var(--error-bg); }

.pill--up      { color: var(--up);      background: var(--up-bg); }
.pill--down    { color: var(--down);    background: var(--down-bg); }
.pill--unknown { color: var(--unknown); background: var(--unknown-bg); }

/* Compact variant for inline use in dense tables */
.pill--tight {
    padding: 1px 8px;
    font-size: 0.72rem;
}


/* ─────────────────────────────────────────────────────────────────────
 * Direction / delta colouring
 * ───────────────────────────────────────────────────────────────────── */

.delta-up    { color: var(--up); }
.delta-down  { color: var(--down); }
.delta-zero  { color: var(--fg-muted); }


/* ─────────────────────────────────────────────────────────────────────
 * Forms / filter bars
 * ───────────────────────────────────────────────────────────────────── */

.toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin-bottom: var(--gap-md);
}

.toolbar__label {
    color: var(--fg-muted);
    font-size: var(--fs-xs);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin-right: 4px;
}

.toolbar select,
.toolbar input[type="number"],
.toolbar input[type="text"] {
    background: var(--bg-elev-1);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 5px 10px;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: 1.3;
}

.toolbar select:focus,
.toolbar input:focus {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

.btn {
    appearance: none;
    background: var(--bg-elev-2);
    color: var(--fg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: var(--fs-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease;
}
.btn:hover {
    background: var(--bg-elev-1);
    border-color: var(--fg-dim);
}
.btn:active {
    background: var(--bg);
}
.btn--primary {
    background: var(--accent-soft);
    border-color: rgba(124, 92, 255, 0.4);
    color: var(--fg);
}
.btn--primary:hover {
    background: rgba(124, 92, 255, 0.22);
    border-color: var(--accent);
}


/* ─────────────────────────────────────────────────────────────────────
 * Charts (uPlot overrides)
 * ───────────────────────────────────────────────────────────────────── */

.chart {
    width: 100%;
    min-height: 260px;
}

.chart-wrap {
    padding: 12px 8px 0;
}

.uplot {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--fg-muted);
}

.uplot .u-legend {
    color: var(--fg-muted);
    margin-top: 6px;
}

.uplot .u-legend .u-marker {
    border-radius: 2px;
}

.uplot .u-title {
    color: var(--fg);
    font-family: var(--font-sans);
    font-size: var(--fs-sm);
    font-weight: 600;
}

.uplot .u-axis,
.uplot .u-grid {
    stroke: var(--divider);
}

.uplot .u-cursor-x,
.uplot .u-cursor-y {
    border-color: var(--fg-dim) !important;
}


/* ─────────────────────────────────────────────────────────────────────
 * Misc utility
 * ───────────────────────────────────────────────────────────────────── */

.stack      { display: flex; flex-direction: column; gap: var(--gap-md); }
.stack-sm   { display: flex; flex-direction: column; gap: 6px; }
.row        { display: flex; flex-wrap: wrap; gap: var(--gap-md); align-items: center; }
.row-sm     { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.spacer     { flex: 1 1 auto; }

.text-mono  { font-family: var(--font-mono); }
.text-muted { color: var(--fg-muted); }
.text-dim   { color: var(--fg-dim); }
.text-xs    { font-size: var(--fs-xs); }
.text-sm    { font-size: var(--fs-sm); }
.text-right { text-align: right; }
.text-nowrap { white-space: nowrap; }

.hidden     { display: none !important; }

.pulse {
    animation: pai-pulse 1.6s ease-in-out infinite;
}

@keyframes pai-pulse {
    0%, 100% { opacity: 0.5; }
    50%      { opacity: 1; }
}


/* ─────────────────────────────────────────────────────────────────────
 * Responsive
 * ───────────────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
    .site-header__inner {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .site-nav {
        justify-content: center;
    }

    .site-meta {
        justify-content: center;
    }

    .table th,
    .table td {
        padding: 8px 10px;
    }

    .card__header,
    .card__body,
    .card__footer {
        padding-left: 14px;
        padding-right: 14px;
    }
}


/* ─────────────────────────────────────────────────────────────────────
 * Light theme (opt-in via OS preference)
 * ───────────────────────────────────────────────────────────────────── */

@media (prefers-color-scheme: light) {
    :root {
        --bg:           #fafbfc;
        --bg-elev-1:    #ffffff;
        --bg-elev-2:    #f1f3f5;
        --bg-inline:    #f4f6f8;

        --border:       #d8dee4;
        --border-soft:  #e4e8ec;
        --divider:      #e7eaee;

        --fg:           #1f2328;
        --fg-muted:     #57606a;
        --fg-dim:       #7d858f;
        --fg-link:      #0969da;
        --fg-link-hov:  #0550ae;

        --accent:       #6547ff;
        --accent-soft:  rgba(101, 71, 255, 0.12);

        --ok-bg:        rgba(31, 136, 61, 0.12);
        --warn-bg:      rgba(154, 103, 0, 0.14);
        --stale-bg:     rgba(207, 34, 46, 0.12);
        --empty-bg:     rgba(87, 96, 106, 0.1);
        --error-bg:     rgba(207, 34, 46, 0.12);

        --up-bg:        rgba(31, 136, 61, 0.12);
        --down-bg:      rgba(207, 34, 46, 0.12);
        --unknown-bg:   rgba(87, 96, 106, 0.1);

        --shadow-1:     0 1px 2px rgba(27, 31, 36, 0.06);
        --shadow-2:     0 6px 20px rgba(27, 31, 36, 0.1);
    }

    .site-header {
        backdrop-filter: none;
    }
}