:root {
    /* Gruvbox (dark) palette — warm, low-glare, terminal-native. */
    --bg: #282828;          /* bg   — page background            */
    --surface: #3c3836;     /* bg1  — cards                      */
    --surface-2: #504945;   /* bg2  — raised / hover surfaces    */
    --border: #665c54;      /* bg4  — hairlines                  */
    --fg: #ebdbb2;          /* fg   — primary text               */
    --muted: #a89984;       /* fg4  — secondary text             */

    --accent: #fe8019;      /* bright orange  */
    --accent-soft: rgba(254, 128, 25, .18);

    --ok: #b8bb26;          /* bright green   */
    --ok-soft: rgba(184, 187, 38, .18);
    --warn: #fabd2f;        /* bright yellow  */
    --warn-soft: rgba(250, 189, 47, .18);
    --danger: #fb4934;      /* bright red     */
    --danger-soft: rgba(251, 73, 52, .18);
    --info: #83a598;        /* bright blue    */
}

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

html, body { height: 100%; }
body {
    margin: 0;
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    background: var(--bg);
    color: var(--fg);
    -webkit-font-smoothing: antialiased;
    font-size: 14px;
    line-height: 1.5;
}

#app { min-height: 100vh; }

a { color: var(--info); }

.empty-layout { min-height: 100vh; }

/* Loading splash rendered before Blazor hydrates. */
.loading-splash {
    position: fixed; inset: 0;
    display: flex; align-items: center; justify-content: center;
    flex-direction: column; gap: 16px;
    background: var(--bg); color: var(--muted);
}
.loading-splash .spinner {
    width: 32px; height: 32px; border-radius: 50%;
    border: 3px solid var(--surface-2); border-top-color: var(--accent);
    animation: spin 0.9s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

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

/* ─────────────────────────────────────────────────────────────────────────────
   Nav links — declared GLOBALLY (not just in MainLayout.razor.css) so they are
   applied reliably regardless of scoped-CSS load order or caching.
   ───────────────────────────────────────────────────────────────────────────── */
.topnav .nav-link {
    text-decoration: none;
    color: var(--muted);
    padding: 8px 14px;
    border-radius: 8px;
    font-size: 14px;
    transition: background .15s, color .15s;
}
.topnav .nav-link:hover { background: var(--surface-2); color: var(--fg); }
.topnav .nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }

/* ─────────────────────────────────────────────────────────────────────────────
   Predicted-vs-Realised chart. These styles MUST live here in global CSS: the
   SVG is emitted by ChartView.razor as a MarkupString, and Blazor does not add
   scope attributes to MarkupString content — so the equivalent rules in the
   scoped Dashboard.razor.css never reach the SVG and the chart fell back to
   browser defaults (black fill/stroke on a dark card = unreadable).
   ───────────────────────────────────────────────────────────────────────────── */
.chart-wrap { width: 100%; }
.chart-svg { width: 100%; height: 220px; display: block; }
.chart-svg .grid { stroke: var(--border); stroke-width: 1; }
.chart-svg .axis-label { fill: var(--muted); font-size: 10px; }
.chart-svg .series-pred { fill: none; stroke: var(--accent); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart-svg .series-act { fill: none; stroke: var(--ok); stroke-width: 2; stroke-dasharray: 4 3; stroke-linejoin: round; }
.chart-svg .dot-pred { fill: var(--accent); }
.chart-svg .dot-act { fill: var(--ok); }
.legend { display: flex; gap: 18px; justify-content: center; font-size: 12px; color: var(--muted); margin-top: 6px; }
.legend .sw { display: inline-block; width: 18px; height: 2px; margin-right: 6px; vertical-align: middle; }
.legend .sw.pred { background: var(--accent); }
.legend .sw.act { background: var(--ok); border-top: 2px dashed var(--ok); height: 0; }

/* Dashboard location dropdown */
.loc-select {
    background: var(--surface-2); color: var(--fg);
    border: 1px solid var(--border); border-radius: 6px;
    padding: 2px 6px; margin-left: 4px;
    font-size: 12px; font-family: inherit; cursor: pointer;
}