/* Direction: BillPort — midnight charcoal sidebar, electric blue actions, cool silver workspace */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #e9eef5;
  --surface: #ffffff;
  --surface-2: #f2f5fa;
  --border: #d3dce8;
  --border-strong: #a4abb6;
  --ink: #111a2b;
  --muted: #52607a;
  --accent: #1f6bff;
  --accent-hover: #1a5bd9;
  --accent-ink: #ffffff;
  --accent-text: #1450d4;
  --accent-strong: #1b5ad8;
  --accent-soft: #e0eaff;
  --accent-border: #8eb3fa;
  --success: #12805c;
  --success-ink: #ffffff;
  --success-soft: #cfe1e3;
  --success-strong: #106d4e;
  --warning: #d98a0b;
  --warning-ink: #111a2b;
  --warning-soft: #e7e2d9;
  --warning-strong: #845406;
  --danger: #cc2f45;
  --danger-ink: #ffffff;
  --danger-soft: #e6d7e0;
  --danger-strong: #ad283a;
  --chart-1: #1f6bff;
  --chart-2: #cb4ddf;
  --chart-3: #b8092a;
  --chart-4: #af7f00;
  --chart-5: #1a7311;
  --chart-6: #17979f;

  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, monospace;
  --display-weight: 800;
  --display-tracking: -0.02em;
  --radius-card: 12px;
  --radius-btn: 8px;
  --radius-input: 8px;
  --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.06), 0 4px 12px rgba(16, 24, 40, 0.05);
  --x-side: #0d1320;
  --x-side-ink: #c5cfde;
  --x-side-dim: #8d9ab0;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #030710;
  --surface: #1c2028;
  --surface-2: #10131c;
  --border: #262a31;
  --border-strong: #4f5158;
  --ink: #e9eef5;
  --muted: #8d9299;
  --accent: #1f6bff;
  --accent-hover: #4181ff;
  --accent-ink: #ffffff;
  --accent-text: #4182ff;
  --accent-strong: #4182ff;
  --accent-soft: #091d45;
  --accent-border: #10347c;
  --success: #12805c;
  --success-ink: #ffffff;
  --success-soft: #062221;
  --success-strong: #469c80;
  --warning: #d98a0b;
  --warning-ink: #ffffff;
  --warning-soft: #32240f;
  --warning-strong: #d98a0b;
  --danger: #cc2f45;
  --danger-ink: #ffffff;
  --danger-soft: #2f101c;
  --danger-strong: #d75d6f;
  --chart-1: #1f6bff;
  --chart-2: #d254e6;
  --chart-3: #eb1a3b;
  --chart-4: #b58511;
  --chart-5: #1b9b0e;
  --chart-6: #10a5ae;
}

.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
.tbl { width: 100%; font-size: 0.8125rem; border-collapse: collapse; }
.tbl th {
  text-align: left; padding: 0.55rem 0.75rem; font-size: 0.6875rem; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); font-weight: 600; white-space: nowrap; background: var(--surface-2);
}
.tbl td { padding: 0.65rem 0.75rem; border-top: 1px solid var(--border); vertical-align: middle; }
.tbl tbody tr:hover { background: var(--surface-2); }
.tbl th.num, .tbl td.num, .num { font-variant-numeric: tabular-nums; text-align: right; white-space: nowrap; }
.mono { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: -0.01em; }

#sidebar { transition: transform 0.22s ease; border-right: 1px solid var(--border); }
body.nav-open #sidebar { transform: none; translate: none; }
.nav-scrim { display: none; }
body.nav-open .nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.5); z-index: 30; }
@media (min-width: 1024px) { .nav-scrim, body.nav-open .nav-scrim { display: none; } }

.side-link {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0.8rem; border-radius: 8px;
  color: var(--x-side-ink); font-size: 0.875rem; font-weight: 500; transition: background 0.15s, color 0.15s;
}
.side-link:hover { background: color-mix(in srgb, var(--x-side-ink) 12%, transparent); }
.side-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.side-link[aria-current="page"] { background: var(--accent); color: var(--accent-ink, #fff); }

.kpi { display: block; padding: 1rem 1.1rem; transition: transform 0.15s, border-color 0.15s; }
.kpi:hover { transform: translateY(-2px); border-color: var(--accent); }
.kpi:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.kpi-dark { background: var(--x-side); color: var(--x-side-ink); border-color: var(--x-side); }

.bar-track { height: 0.5rem; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; background: var(--accent); }
.bar-fill.alt { background: var(--success); }

.auth-art {
  background: radial-gradient(900px 500px at 10% 0%, color-mix(in srgb, var(--accent) 45%, transparent), transparent 60%), var(--x-side);
}
.results-busy.htmx-request, .htmx-request .results-busy { opacity: 0.55; transition: opacity 0.15s; }
dialog.modal .modal-body { padding: 1.5rem; }
@media print { #sidebar, header.topbar { display: none; } }
@media (prefers-reduced-motion: reduce) { .kpi, #sidebar { transition: none; } }
html.reduced-motion .kpi, html.reduced-motion #sidebar { transition: none; }