/* =========================================================================
   Design system + light/dark theming.
   Loaded LAST on every page, so the tokens and html.dark overrides here win.

   Theming is token-driven: every page styles itself from the CSS custom
   properties below. :root holds the light palette; html.dark (set by theme.js
   before first paint, from the "darkmode" cookie) swaps the same tokens to the
   dark palette. Because everything reads from var(--token), the whole app --
   landing, settings, auth, and every report -- follows the toggle for free.
   ========================================================================= */

:root {
    /* ---- Type ---- */
    --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        Helvetica, Arial, sans-serif;
    --font-mono: "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

    /* ---- Surfaces ---- */
    --bg: #f5f7fb;
    --surface: #ffffff;
    --surface-2: #eef2f8;
    --surface-3: #e4ebf4;

    /* ---- Text ---- */
    --text: #1b2330;
    --text-muted: #5b6776;
    --text-subtle: #8a94a3;
    --text-inverse: #ffffff;

    /* ---- Brand / accent ---- */
    --brand: #3056d3;
    --brand-strong: #2442b0;
    --brand-soft: #eaf0ff;
    --accent: #3056d3;
    --link: #2e5bd6;
    --link-hover: #1b3fae;

    /* ---- Top bar (consistent rich blue in both modes) ---- */
    --header-grad: linear-gradient(120deg, #1b3a5b 0%, #2b5e92 58%, #2f6dad 100%);
    --header-text: #ffffff;
    --header-text-dim: rgba(255, 255, 255, 0.72);

    /* ---- Lines ---- */
    --border: #e4e8ef;
    --border-strong: #d2d9e3;

    /* ---- Status ---- */
    --success: #1f9d55;
    --success-soft: #e7f6ec;
    --warn: #e0900b;
    --danger: #d64545;

    /* ---- Tables ---- */
    --table-head-bg: #d3deee;
    --table-head-text: #2c3850;
    --row-even: #f5f8fc;
    --row-hover: #c7dcfb;
    --cell-text: #1b2330;

    /* ---- Shape / depth / motion ---- */
    --radius-lg: 16px;
    --radius: 12px;
    --radius-sm: 8px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
    --shadow: 0 6px 22px rgba(16, 24, 40, 0.09);
    --shadow-lg: 0 18px 46px rgba(16, 24, 40, 0.16);
    --ring: 0 0 0 3px rgba(48, 86, 211, 0.25);
    --transition: 0.18s ease;
}

html.dark {
    /* ---- Surfaces ---- */
    --bg: #0e1116;
    --surface: #171b22;
    --surface-2: #1e242e;
    --surface-3: #262d39;

    /* ---- Text ---- */
    --text: #e3e8ef;
    --text-muted: #9aa5b4;
    --text-subtle: #6b7585;

    /* ---- Brand / accent ---- */
    --brand: #5b8cff;
    --brand-strong: #6e9bff;
    --brand-soft: #18233e;
    --accent: #6ea8fe;
    --link: #7aa6ff;
    --link-hover: #9bbcff;

    /* ---- Top bar ---- */
    --header-grad: linear-gradient(120deg, #122036 0%, #1b3a5c 58%, #225781 100%);

    /* ---- Lines ---- */
    --border: #2a313c;
    --border-strong: #39424f;

    /* ---- Status ---- */
    --success: #4ade80;
    --success-soft: #16271c;
    --warn: #fbbf24;
    --danger: #f87171;

    /* ---- Tables ---- */
    --table-head-bg: #273550;
    --table-head-text: #d6e0f0;
    --row-even: #1a1f28;
    --row-hover: #38496b;
    --cell-text: #e3e8ef;

    /* ---- Depth ---- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 22px 52px rgba(0, 0, 0, 0.6);
    --ring: 0 0 0 3px rgba(110, 168, 254, 0.3);
}

/* Smoothly cross-fade surfaces/text when the theme flips. Wrapped in :where()
   so this rule carries zero specificity -- any element that declares its own
   transition (cards, buttons, the gear) keeps its custom timing and wins. */
:where(html.theme-ready body *) {
    transition: background-color var(--transition), border-color var(--transition),
        color var(--transition), box-shadow var(--transition), fill var(--transition);
}

/* Cell text colour is driven by a token that is always applied to td, so
   toggling the theme only swaps the value. */
td {
    color: var(--cell-text);
}

/* ---- Dark-mode toggle ----
   A self-contained chip (its own surface + border) fixed top-right. Being
   self-contained keeps it legible on any backdrop -- the blue header on most
   pages, or the plain page background on the login screen. */
.darkmode-toggle {
    position: fixed;
    top: 12px;
    right: 16px;
    z-index: 1000;
    display: inline-flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.3px;
    color: var(--text);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    padding: 6px 12px 6px 11px;
    box-shadow: var(--shadow-sm);
}
.darkmode-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.darkmode-track {
    position: relative;
    width: 38px;
    height: 20px;
    border-radius: var(--radius-pill);
    background: var(--surface-3);
    box-shadow: inset 0 0 0 1px var(--border-strong);
    transition: background var(--transition);
}
.darkmode-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
    transition: transform var(--transition);
}
.darkmode-checkbox:checked + .darkmode-track {
    background: var(--accent);
    box-shadow: none;
}
.darkmode-checkbox:checked + .darkmode-track .darkmode-thumb {
    transform: translateX(18px);
}
.darkmode-label {
    letter-spacing: 0.3px;
}

/* =========================================================================
   Highcharts (Pies / Epic / Burndown): true dark.
   Highcharts paints in non-styled mode, so colours arrive as inline styles or
   presentation attributes; override them with !important under html.dark.
   ========================================================================= */
html.dark .highcharts-background {
    fill: #171b22 !important;
}
html.dark .highcharts-title,
html.dark .highcharts-subtitle,
html.dark .highcharts-axis-title,
html.dark .highcharts-axis-labels text,
html.dark .highcharts-legend-item text,
html.dark .highcharts-data-labels text,
html.dark .highcharts-data-label text {
    fill: #e3e8ef !important;
}
/* Highcharts paints a "contrast" outline (white, for the original black labels)
   as duplicate .highcharts-text-outline tspans behind each label. On the dark
   background that white halo makes the light text look bold and smeared, so
   repaint the outline in the surface colour to neutralise it. */
html.dark .highcharts-text-outline {
    fill: #171b22 !important;
    stroke: #171b22 !important;
}
/* Light text reads thinner on a dark background; nudge the title back to bold. */
html.dark .highcharts-title {
    font-weight: 600 !important;
}
html.dark .highcharts-legend-box {
    fill: #1e242e !important;
    stroke: #2a313c !important;
}
html.dark .highcharts-data-label-connector {
    stroke: #6b7585 !important;
}
html.dark .highcharts-grid-line {
    stroke: rgba(255, 255, 255, 0.07) !important;
}
html.dark .highcharts-axis-line,
html.dark .highcharts-tick {
    stroke: #39424f !important;
}
html.dark .highcharts-data-table caption,
html.dark .highcharts-linked-description {
    color: var(--text-muted);
}