/* Silvey design tokens — see docs/superpowers/specs/2026-08-13-training-attendance-design.md
 *
 * Self-hosted fonts are mandatory: the site CSP is style-src 'self' with no
 * font-src, so any Google Fonts stylesheet reference fails silently.
 *
 * Outfit and Space Grotesk are served by Google as variable fonts: fetching
 * discrete weights 400/500/600/700 from the css2 endpoint returns the exact
 * same physical file for every weight (verified by SHA-256). There is
 * intentionally one file per family, not four — a single-value font-weight
 * descriptor in @font-face clamps a variable font's weight axis to that
 * value, so declaring separate rules per weight against the same file still
 * renders each weight correctly. Do not re-split these into per-weight
 * files; that would just re-add duplicate bytes with no benefit.
 *
 * SCOPE — read before loading this alongside styles.css:
 * Everything in this file is namespaced .sv-* EXCEPT the two base rules under
 * "Base" below: the `*, *::before, *::after { box-sizing }` reset and the bare
 * `body { ... }` rule. Both are global, and styles.css defines the same two
 * selectors with a different font-family. No page loads both today, but any
 * page that does must link theme.css AFTER styles.css — the two collide at
 * equal specificity, so <link> order alone decides the winner.
 */

@font-face {
  font-family: 'Outfit';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/outfit-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  /* Space Grotesk's wght axis is 300-700; Outfit's is 100-900. Declaring a
     wider range than the file supports makes the browser clamp silently. */
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-variable.woff2') format('woff2');
}

:root {
  /* Tells the UA to render scrollbars, autofill and native <select> popups
     in the matching theme. Without it those chrome elements stay light. */
  color-scheme: light;

  --background: #f4f6f8;
  --foreground: #333333;
  --card: #ffffff;
  --card-foreground: #333333;
  --popover: #ffffff;
  --popover-foreground: #333333;
  --primary: #2055ce;
  --primary-foreground: #ffffff;
  --secondary: #e8e8e8;
  --secondary-foreground: #0a1d4f;
  --muted: #eef1f4;
  --muted-foreground: #667085;
  --accent: #eaf0fb;
  --accent-foreground: #0a1d4f;
  --destructive: #dc2626;
  --destructive-foreground: #ffffff;
  --border: #e1e5e9;
  --input: #e1e5e9;
  --ring: #2055ce;
  --radius: 0.5rem;
  --success: #16a34a;
  --success-foreground: #ffffff;
  --warning: #f59e0b;
  --warning-foreground: #1a1a1a;

  --navy: #0a1d4f;
  --brand-blue: #2055ce;

  --sidebar-background: #0a1d4f;
  --sidebar-foreground: #dbe3f3;
  --sidebar-primary: #6f9bf2;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #15265c;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #1b2c63;

  --chart-1: #2055ce;
  --chart-2: #16a34a;
  --chart-3: #f59e0b;
  --chart-4: #dc2626;
  --chart-5: #7b1fa2;

  --font-sans: 'Space Grotesk', system-ui, -apple-system, sans-serif;
  --font-display: 'Outfit', 'Space Grotesk', system-ui, sans-serif;

  /* Layout shell — THEME.md section 6 */
  --sidebar-w: 232px;
}

.dark {
  color-scheme: dark;

  --background: #0b1220;
  --foreground: #e7ebf2;
  --card: #121a2b;
  --card-foreground: #e7ebf2;
  --popover: #121a2b;
  --popover-foreground: #e7ebf2;
  --primary: #4f7fe8;
  --primary-foreground: #ffffff;
  --secondary: #1c2740;
  --secondary-foreground: #d8e0ee;
  --muted: #1c2740;
  --muted-foreground: #9aa6bd;
  --accent: #18223a;
  --accent-foreground: #d8e0ee;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: #243149;
  --input: #243149;
  --ring: #4f7fe8;
  --success: #22c55e;
  --success-foreground: #04130a;
  --warning: #fbbf24;
  --warning-foreground: #1a1200;

  --navy: #0a1d4f;
  --brand-blue: #2055ce;

  --sidebar-background: #071233;
  --sidebar-foreground: #cdd7ec;
  --sidebar-primary: #6f9bf2;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #102046;
  --sidebar-accent-foreground: #ffffff;
  --sidebar-border: #18254d;

  --chart-1: #4f7fe8;
  --chart-2: #22c55e;
  --chart-3: #fbbf24;
  --chart-4: #ef4444;
  --chart-5: #a855f7;
}

/* ------------------------------------------------------------------ */
/* Base                                                                */
/* ------------------------------------------------------------------ */

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

body {
  margin: 0;
  background-color: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  min-height: 100vh;
}

/* ------------------------------------------------------------------ */
/* Typography                                                          */
/* ------------------------------------------------------------------ */

.sv-heading {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--navy);
}

/* Navy is unreadable on a dark background — THEME.md section 7, rule 1. */
.dark .sv-heading { color: var(--foreground); }

.sv-page-title { font-size: 1.5rem; font-weight: 700; }

.sv-stat {
  font-family: var(--font-display);
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--brand-blue);
  line-height: 1;
}

/* #2055ce on the dark --card (#121a2b) is 2.69:1 — below the 3:1 WCAG AA
   floor for large text. --primary (#4f7fe8) is the dark-mode blue. */
.dark .sv-stat { color: var(--primary); }

/* ------------------------------------------------------------------ */
/* Shape — always top-left / bottom-right. Never flip the diagonal.     */
/* ------------------------------------------------------------------ */

.sv-section {
  border-radius: 16px 0 16px 0;
  border-left: 4px solid var(--brand-blue);
  background: var(--card);
  color: var(--card-foreground);
  padding: 1.5rem;
}

/* Same contrast problem as .sv-stat: the brand blue rail disappears against
   the dark card. */
.dark .sv-section { border-left-color: var(--primary); }

.sv-card {
  border-radius: 20px 0 20px 0;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--card-foreground);
  padding: 1.25rem;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}

.sv-card--clickable:hover {
  transform: translateY(-2px);
  border-color: var(--brand-blue);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.08);
}

/* ------------------------------------------------------------------ */
/* Controls                                                            */
/* ------------------------------------------------------------------ */

.sv-btn {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  background: var(--primary);
  color: var(--primary-foreground);
  padding: 0.625rem 1rem;
  cursor: pointer;
}

.sv-btn:hover { filter: brightness(0.92); }

.sv-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

.sv-btn--outline {
  background: var(--background);
  color: var(--foreground);
  border-color: var(--input);
}

.sv-input, .sv-select {
  font-family: var(--font-sans);
  font-size: 0.875rem;
  height: 2.5rem;
  border-radius: var(--radius);
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  padding: 0 0.75rem;
}

.sv-input:focus-visible, .sv-select:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring);
}

/* ------------------------------------------------------------------ */
/* Status chips — tint, never solid fill (THEME.md section 2)          */
/* ------------------------------------------------------------------ */

.sv-chip {
  display: inline-block;
  border-radius: 999px;
  padding: 0.125rem 0.625rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.sv-chip--info    { background: rgb(32 85 206 / 0.10);  color: var(--brand-blue); }
.sv-chip--success { background: rgb(22 163 74 / 0.15);  color: var(--success); }
.sv-chip--warning { background: rgb(245 158 11 / 0.25); color: #a86a04; }
.sv-chip--danger  { background: rgb(220 38 38 / 0.10);  color: var(--destructive); }
.sv-chip--muted   { background: var(--muted);           color: var(--muted-foreground); }

.dark .sv-chip--info    { color: var(--primary); }
.dark .sv-chip--warning { color: var(--warning); }

/* ------------------------------------------------------------------ */
/* Layout shell — THEME.md section 6                                   */
/*                                                                     */
/* Structure follows the pmtool prototype (fixed left sidebar, top bar, */
/* eyebrow + page title, stat strip, table with tinted status chips,    */
/* pagination footer). Colors stay on THEME.md's tokens, so the sidebar */
/* is navy rather than pmtool's surface tone.                          */
/* ------------------------------------------------------------------ */

.sv-app {
  display: grid;
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 100vh;
}

/* --- Sidebar --- */

.sv-sidebar {
  background: var(--sidebar-background);
  color: var(--sidebar-foreground);
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  padding: 1.25rem 0.875rem;
  border-right: 1px solid var(--sidebar-border);
}

.sv-brand {
  display: block;
  padding: 0 0.5rem;
  text-decoration: none;
}

.sv-brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: 0.06em;
  color: #fff;
}

.sv-brand__sub {
  display: block;
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--sidebar-foreground);
  margin-top: 0.125rem;
}

.sv-nav {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  flex: 1;
}

.sv-nav__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-radius: var(--radius);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--sidebar-foreground);
  text-decoration: none;
}

.sv-nav__item:hover { background: var(--sidebar-accent); }

.sv-nav__item--active {
  background: var(--sidebar-accent);
  color: var(--sidebar-accent-foreground);
}

.sv-nav__item svg { width: 1rem; height: 1rem; flex: none; }

.sv-sidebar__foot {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  border-top: 1px solid var(--sidebar-border);
  padding-top: 0.875rem;
}

.sv-user {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0 0.25rem;
  font-size: 0.8125rem;
  color: var(--sidebar-foreground);
  min-width: 0;
}

.sv-user__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- Top bar --- */

.sv-topbar {
  height: 4rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--border);
  background: var(--card);
}

.sv-topbar__context {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

.sv-topbar__right { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }

/* --- Main --- */

.sv-main { display: flex; flex-direction: column; min-width: 0; }

.sv-content {
  flex: 1;
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.sv-page-head { display: flex; align-items: flex-end; gap: 1rem; flex-wrap: wrap; }

.sv-eyebrow {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}

.sv-page-head__actions { margin-left: auto; display: flex; gap: 0.5rem; }

/* --- Stat strip --- */

.sv-stat-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 1rem;
}

.sv-stat-tile {
  background: var(--card);
  border: 1px solid var(--border);
  border-left: 4px solid var(--brand-blue);
  border-radius: 16px 0 16px 0;
  padding: 0.875rem 1rem;
}

/* The brand blue rail is 2.69:1 on the dark card — same failure as .sv-stat. */
.dark .sv-stat-tile { border-left-color: var(--primary); }

.sv-stat-tile--success { border-left-color: var(--success); }
.sv-stat-tile--warning { border-left-color: var(--warning); }
.sv-stat-tile--danger  { border-left-color: var(--destructive); }

.dark .sv-stat-tile--success { border-left-color: var(--success); }
.dark .sv-stat-tile--warning { border-left-color: var(--warning); }
.dark .sv-stat-tile--danger  { border-left-color: var(--destructive); }

.sv-stat-tile__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-foreground);
  margin-bottom: 0.375rem;
}

.sv-stat-tile__meta { font-size: 0.75rem; color: var(--muted-foreground); margin-top: 0.25rem; }

.sv-stat--success { color: var(--success); }
.sv-stat--warning { color: var(--warning); }
.sv-stat--danger  { color: var(--destructive); }

/* --- Table --- */

.sv-panel {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 16px 0 16px 0;
  overflow: hidden;
}

.sv-table-scroll { overflow-x: auto; }

.sv-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }

.sv-table th {
  text-align: left;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-foreground);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

.sv-table td {
  padding: 0.875rem 1rem;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}

.sv-table tbody tr:last-child td { border-bottom: none; }
.sv-table tbody tr:hover { background: var(--muted); }

.sv-cell { display: flex; align-items: center; gap: 0.625rem; }
.sv-cell__title { font-weight: 600; color: var(--foreground); }
.sv-cell__sub { font-size: 0.6875rem; color: var(--muted-foreground); margin-top: 0.0625rem; }
.sv-num { text-align: center; font-weight: 600; font-variant-numeric: tabular-nums; }
.sv-muted { color: var(--muted-foreground); }

.sv-icon-tile {
  width: 2rem;
  height: 2rem;
  border-radius: 8px 0 8px 0;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--accent);
  color: var(--accent-foreground);
}

.sv-icon-tile svg { width: 1rem; height: 1rem; }

.sv-avatar {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--accent);
  color: var(--accent-foreground);
  font-size: 0.6875rem;
  font-weight: 700;
}

.sv-progress {
  width: 100%;
  min-width: 5rem;
  height: 0.375rem;
  border-radius: 999px;
  background: var(--muted);
  overflow: hidden;
}

.sv-progress__fill { height: 100%; border-radius: 999px; background: var(--primary); }
.sv-progress__fill--success { background: var(--success); }
.sv-progress__fill--warning { background: var(--warning); }
.sv-progress__fill--danger  { background: var(--destructive); }

.sv-table-foot {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  font-size: 0.6875rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-foreground);
}

.sv-pagination { margin-left: auto; display: flex; gap: 0.375rem; }

.sv-pagination button {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius);
  border: 1px solid var(--input);
  background: var(--background);
  color: var(--foreground);
  cursor: pointer;
  line-height: 1;
}

.sv-pagination button:disabled { opacity: 0.45; cursor: default; }

/* --- Gradient CTA — THEME.md section 4. One per page at most. --- */

.sv-cta {
  border-radius: 20px 0 20px 0;
  background: linear-gradient(135deg, var(--brand-blue), var(--navy));
  color: #fff;
  padding: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.sv-cta__body { flex: 1; min-width: 14rem; }
.sv-cta__title { font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; }
.sv-cta__text { font-size: 0.8125rem; opacity: 0.85; margin-top: 0.25rem; }

.sv-cta__btn {
  border-radius: 999px;
  background: #fff;
  color: var(--navy);
  border: none;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 0.8125rem;
  padding: 0.625rem 1.25rem;
  cursor: pointer;
}

/* --- Sample-data banner --- */
/* Removed once the views render real records. Until then it must stay
   visible: this page is reachable without auth and shows what looks like
   compliance data. */

.sv-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 16px 0 16px 0;
  border: 1px solid var(--warning);
  background: rgb(245 158 11 / 0.12);
  color: var(--foreground);
  padding: 0.75rem 1rem;
  font-size: 0.8125rem;
}

.sv-banner svg { width: 1.125rem; height: 1.125rem; flex: none; color: var(--warning); }

/* --- Session detail --- */

.sv-back {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  color: var(--muted-foreground);
  text-decoration: none;
  margin-bottom: 0.5rem;
}

.sv-back:hover { color: var(--primary); }
.sv-back svg { width: 0.875rem; height: 0.875rem; }

.sv-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 1rem 1.5rem;
}

.sv-meta__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-foreground);
  margin-bottom: 0.1875rem;
}

.sv-meta__value { font-size: 0.875rem; }

.sv-attest {
  margin-top: 1.25rem;
  padding: 0.875rem 1rem;
  border-left: 3px solid var(--brand-blue);
  background: var(--muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.dark .sv-attest { border-left-color: var(--primary); }

.sv-attest__label {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--muted-foreground);
  margin-bottom: 0.25rem;
}

/* Row links. An explicit anchor per row rather than a JS row-click handler:
   keyboard-reachable, works without script, and needs no extra markup. */

.sv-link { color: var(--primary); text-decoration: none; font-weight: 600; white-space: nowrap; }
.sv-link:hover { text-decoration: underline; }

/* --- Access gating --- */
/* The app markup ships hidden and is revealed by training-guard.js only
   after /api/admin/check confirms the caller is an admin. A class rather
   than an inline style attribute, so the no-inline-style guard holds and
   a .dark rule can still reach these elements. */

.sv-hidden { display: none !important; }

.sv-denied {
  max-width: 30rem;
  margin: 4rem auto;
  padding: 1.5rem;
  border-radius: 16px 0 16px 0;
  border-left: 4px solid var(--destructive);
  background: var(--card);
  color: var(--card-foreground);
}

.sv-denied__title {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: var(--destructive);
  margin-bottom: 0.5rem;
}

.sv-denied__text { font-size: 0.875rem; line-height: 1.5; }
.sv-denied__text a { color: var(--primary); }

/* --- Narrow screens: sidebar becomes a top strip --- */

@media (max-width: 860px) {
  .sv-app { grid-template-columns: 1fr; }
  .sv-sidebar { flex-direction: row; align-items: center; gap: 1rem; border-right: none; border-bottom: 1px solid var(--sidebar-border); flex-wrap: wrap; }
  .sv-nav { flex-direction: row; flex-wrap: wrap; flex: 1; }
  .sv-sidebar__foot { border-top: none; padding-top: 0; flex-direction: row; align-items: center; }
  .sv-brand__sub { display: none; }
}