/* ============================================================
   Crisisium · Resilience Platform
   Design system — Executive Dark (2026-04-12)

   Single source of truth: dashboard-demo.html dark palette.
   All UI tokens (`--surface`, `--canvas`, `--ink`, `--brand-*`, …)
   are re-pointed at the dashboard's charcoal/emerald theme so the
   whole SPA inherits the dashboard look without per-component edits.

   Palette:
     Surfaces : #0a0e1a (canvas) · #0f1420 (card) · #141a2a (elev)
     Text     : #f1f5f9 (primary) · #94a3b8 (secondary) · #64748b (muted)
     Brand    : #10b981 (emerald)  — active nav / primary action / success
     Warning  : #f59e0b (ambre)    — critical values, trends, risk hover
     Danger   : #ef4444 (red)      — overdue, critical status
     Info     : #22d3ee (cyan)     — BIA / info chips
     Borders  : rgba(255,255,255,0.06) subtle · 0.14 strong

   Design principles:
   - Emerald = primary accent, always on dark charcoal bg.
   - Hairline rgba borders, no heavy rules, no shadows on cards.
   - Ubuntu everywhere; Ubuntu Mono only for numeric tabular values.
   - Single motion: 120ms opacity fade on view change.
   ============================================================ */

/* ============================================================
   DESIGN TOKENS  (dark theme — locked)
   ============================================================ */
:root {
  /* ── Brand ────────────────────────────────────────── */
  --brand-1:        #059669;   /* deepest — active marker rails        */
  --brand-2:        #10b981;   /* primary emerald — links, buttons, focus */
  --brand-3:        #34d399;   /* soft  — success hover tints            */
  --brand-4:        #141a2a;   /* neutral surface (elev)                 */

  /* ── Surfaces ─────────────────────────────────────── */
  --surface:        #0f1420;   /* cards, modals, sidebar, inputs        */
  --canvas:         #0a0e1a;   /* page background                       */
  --canvas-alt:     #141a2a;   /* secondary fill (hover, icon tiles)    */
  --veil:           rgba(3,7,18,.68);   /* modal backdrop               */

  /* ── Type ─────────────────────────────────────────── */
  --ink:            #f1f5f9;   /* headings, body emphasis               */
  --graphite:       #94a3b8;   /* secondary labels                      */
  --muted:          #64748b;   /* tertiary, placeholders                */
  --on-brand:       #ffffff;   /* text on emerald                       */

  /* ── Rules ────────────────────────────────────────── */
  --rule:           rgba(255,255,255,.06);   /* hairline dividers      */
  --rule-strong:    rgba(255,255,255,.14);   /* emphatic dividers      */
  --rule-brand:     rgba(16,185,129,.28);    /* brand-tinted hairline  */

  /* ── Focus ring ───────────────────────────────────── */
  --focus:          rgba(16,185,129,.35);
  --focus-strong:   rgba(16,185,129,.60);

  /* ── Status ──── (tuned for dark bg — deep tints) ─── */
  --critical:       #ef4444;
  --critical-ink:   #fca5a5;
  --critical-tint:  rgba(239,68,68,.12);
  --critical-rule:  rgba(239,68,68,.32);

  --warning:        #f59e0b;
  --warning-ink:    #fcd34d;
  --warning-tint:   rgba(245,158,11,.12);
  --warning-rule:   rgba(245,158,11,.32);

  --success:        #10b981;
  --success-ink:    #6ee7b7;
  --success-tint:   rgba(16,185,129,.12);
  --success-rule:   rgba(16,185,129,.32);

  --info:           #22d3ee;
  --info-ink:       #67e8f9;
  --info-tint:      rgba(34,211,238,.12);
  --info-rule:      rgba(34,211,238,.32);

  /* ── Type families ────────────────────────────────── */
  --font-sans:   'Ubuntu', ui-sans-serif, system-ui, -apple-system,
                 'Segoe UI', sans-serif;
  --font-serif:  'Ubuntu', ui-sans-serif, system-ui, sans-serif;
  --font-mono:   'Ubuntu Mono', ui-monospace, SFMono-Regular,
                 Menlo, Consolas, monospace;

  /* ── Type scale (fixed rem, app UI) ───────────────── */
  --fs-10: .625rem;       /* 10px · micro                */
  --fs-11: .6875rem;      /* 11px · small label          */
  --fs-12: .75rem;        /* 12px · table cell small     */
  --fs-13: .8125rem;      /* 13px · UI default           */
  --fs-14: .875rem;       /* 14px · body, form-control   */
  --fs-16: 1rem;          /* 16px · lead                 */
  --fs-18: 1.125rem;      /* 18px · card title           */
  --fs-22: 1.375rem;      /* 22px · section title        */
  --fs-26: 1.625rem;      /* 26px · page title           */
  --fs-34: 2.125rem;      /* 34px · KPI value            */
  --fs-44: 2.75rem;       /* 44px · hero number          */

  /* ── Layout ───────────────────────────────────────── */
  --sidebar-w:       248px;
  --header-h:        64px;
  --content-px:      32px;

  /* ── Radius (restrained) ──────────────────────────── */
  --radius-xs:       2px;
  --radius-sm:       4px;
  --radius-md:       6px;
  --radius-lg:       8px;
  --radius-xl:       12px;
  --radius:          var(--radius-md);   /* alias         */

  /* ── Shadows (deep, for dark bg) ──────────────────── */
  --shadow-xs: 0 1px 0 rgba(0,0,0,.20);
  --shadow-sm: 0 1px 0 rgba(0,0,0,.25), 0 1px 3px rgba(0,0,0,.35);
  --shadow:    var(--shadow-sm);
  --shadow-md: 0 1px 0 rgba(0,0,0,.25),
               0 8px 20px -8px rgba(0,0,0,.55);
  --shadow-lg: 0 1px 0 rgba(0,0,0,.25),
               0 18px 36px -14px rgba(0,0,0,.65);
  --shadow-xl: 0 1px 0 rgba(0,0,0,.25),
               0 28px 56px -18px rgba(0,0,0,.75);

  /* ── Easing (single, used sparingly) ──────────────── */
  --ease: cubic-bezier(.4, 0, .2, 1);

  /* ── BACKWARD-COMPAT ALIASES ──────────────────────────
     `app.js` sprinkles `color:var(--danger)`, `var(--primary)`,
     `var(--text-light)`, `var(--bg)` and similar in inline styles.
     We preserve all legacy variable names so template strings keep
     rendering correctly without a single JS edit.                */
  --primary:        var(--brand-1);
  --primary-dark:   var(--brand-1);
  --primary-light:  var(--brand-2);
  --primary-soft:   var(--brand-3);
  --accent:         var(--brand-2);
  --accent-light:   var(--brand-3);
  --accent-bg:      var(--success-tint);
  --teal:           var(--brand-2);
  --teal-deep:      var(--brand-1);
  --teal-light:     var(--brand-3);
  --teal-mist:      var(--brand-3);
  --teal-ink:       var(--brand-1);

  --bg:             var(--canvas);
  --bg-alt:         var(--canvas-alt);
  --card:           var(--surface);
  --card-glass:     var(--surface);
  --border:         var(--rule);
  --border-teal:    var(--rule);
  --border-glass:   var(--rule);

  --text:           var(--ink);
  --text-light:     var(--graphite);
  --text-muted:     var(--muted);

  --danger:         var(--critical);
  --danger-ink:     var(--critical-ink);

  /* ── Crisisium mark tokens (dark) ───────────────────── */
  --mark-bg:        #0f1923;
  --mark-track:     #1e3448;
  --mark-teal:      #2dd4a0;
  --mark-orange:    #f97316;
}

/* ============================================================
   LIGHT THEME — activated via <html data-theme="light">
   Overrides only the surface/ink/rule tokens; brand emerald,
   status colors and typography stay identical to dark.
   ============================================================ */
html[data-theme="light"] {
  --surface:        #ffffff;
  --canvas:         #f6f8fb;
  --canvas-alt:     #eef2f7;
  --veil:           rgba(15,23,42,.48);

  --ink:            #0f172a;
  --graphite:       #475569;
  --muted:          #64748b;

  --rule:           rgba(15,23,42,.08);
  --rule-strong:    rgba(15,23,42,.16);
  --rule-brand:     rgba(5,150,105,.24);

  --focus:          rgba(5,150,105,.30);
  --focus-strong:   rgba(5,150,105,.55);

  /* Status inks reverse — darker hues read better on white */
  --critical-ink:   #b91c1c;
  --warning-ink:    #b45309;
  --success-ink:    #047857;
  --info-ink:       #0e7490;

  --critical-tint:  rgba(239,68,68,.08);
  --warning-tint:   rgba(245,158,11,.10);
  --success-tint:   rgba(5,150,105,.10);
  --info-tint:      rgba(14,116,144,.10);

  /* Shadows: softer, single-direction drop */
  --shadow-xs: 0 1px 0 rgba(15,23,42,.04);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 1px rgba(15,23,42,.04);
  --shadow-md: 0 4px 12px -4px rgba(15,23,42,.10);
  --shadow-lg: 0 12px 32px -12px rgba(15,23,42,.16);
  --shadow-xl: 0 24px 56px -18px rgba(15,23,42,.22);

  /* Mark tokens (light) */
  --mark-bg:        #ffffff;
  --mark-track:     #e8f4f0;
  --mark-teal:      #0d9e76;
  --mark-orange:    #ea6c0a;
}

/* ============================================================
   GLOBAL RESET
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

html, body {
  font-family: var(--font-sans);
  font-size: var(--fs-14);
  line-height: 1.5;
  color: var(--ink);
  background: var(--canvas);
  font-feature-settings: "ss01", "cv11";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

a { color: var(--brand-1); text-decoration: none; }
a:hover { text-decoration: underline; text-decoration-color: var(--brand-3); text-underline-offset: 3px; text-decoration-thickness: 1px; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
  line-height: 1.2;
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

hr {
  border: none;
  border-top: 1px solid var(--rule);
  margin: 16px 0;
}

::selection { background: var(--brand-3); color: var(--brand-1); }

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

/* Tabular numerics by default — BIA is a numbers tool */
table, .tabular, .kpi-value, .dash-stat-val,
.progress-ring-label, td, th, input[type="number"] {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "lnum" 1;
}

/* ============================================================
   ANIMATIONS (single, restrained)
   ============================================================ */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ============================================================
   SIDEBAR
   ============================================================ */
.sidebar {
  position: fixed;
  top: 0; left: 0;
  width: var(--sidebar-w);
  height: 100vh;
  background: var(--surface);
  border-right: 1px solid var(--rule);
  display: flex;
  flex-direction: column;
  padding: 20px 14px 16px;
  z-index: 100;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 10px 22px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}

.sidebar-brand .brand-logo {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}

.sidebar-brand .brand-text {
  font-family: var(--font-serif);
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.1;
}

.sidebar-brand .brand-sub {
  display: block;
  font-size: var(--fs-10);
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .14em;
  text-transform: uppercase;
  margin-top: 3px;
}

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0 16px;
  margin-right: -4px;
  padding-right: 4px;
}

.sidebar-section {
  padding: 18px 12px 6px;
  font-size: var(--fs-10);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px 9px 14px;
  margin: 1px 0;
  border-radius: var(--radius-sm);
  color: var(--graphite);
  font-size: var(--fs-13);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  transition: background .12s var(--ease), color .12s var(--ease);
}

.sidebar-nav a:hover {
  background: var(--canvas-alt);
  color: var(--ink);
  text-decoration: none;
}

.sidebar-nav a.active {
  background: var(--success-tint);
  color: var(--brand-2);
  font-weight: 600;
}

.sidebar-nav a.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--brand-1);
  border-radius: 0 1px 1px 0;
}

.sidebar-nav a .nav-icon {
  width: 18px;
  text-align: center;
  font-size: var(--fs-13);
  opacity: .7;
  flex-shrink: 0;
}

.sidebar-nav a.active .nav-icon { opacity: 1; }

.sidebar-footer {
  margin-top: auto;
  padding: 14px 12px 2px;
  border-top: 1px solid var(--rule);
}

.sidebar-footer .footer-title {
  font-size: var(--fs-11);
  font-weight: 700;
  color: var(--graphite);
  letter-spacing: .01em;
}

.sidebar-footer .footer-sub {
  display: block;
  font-size: var(--fs-10);
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
  letter-spacing: .01em;
}

/* ============================================================
   MAIN + HEADER
   ============================================================ */
.main {
  margin-left: var(--sidebar-w);
  min-height: 100vh;
  background: var(--canvas);
}

.header {
  height: var(--header-h);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--content-px);
  position: sticky;
  top: 0;
  z-index: 50;
}

.header-title {
  font-family: var(--font-serif);
  font-size: var(--fs-22);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.01em;
  line-height: 1.2;
}

.header-actions {
  display: flex;
  gap: 20px;
  align-items: center;
}

.header-actions > span {
  font-size: var(--fs-11) !important;
  color: var(--graphite) !important;
  font-weight: 600 !important;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.content {
  padding: 24px var(--content-px) 48px;
  animation: fadeIn .12s var(--ease);
}

/* Language switcher — text toggle, no pill */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 0;
}

.lang-btn {
  padding: 4px 8px;
  font-size: var(--fs-11);
  font-weight: 600;
  background: transparent;
  border: none;
  color: var(--muted);
  cursor: pointer;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-radius: var(--radius-xs);
  transition: color .12s var(--ease);
}
.lang-btn + .lang-btn { margin-left: 2px; }
.lang-btn:hover { color: var(--ink); }
.lang-btn.active { color: var(--brand-1); }
.lang-switcher::before {
  content: "";
  width: 1px;
  height: 14px;
  background: var(--rule-strong);
  align-self: center;
  margin: 0 4px;
  order: 2;
}
.lang-switcher .lang-btn:first-child { order: 1; }
.lang-switcher .lang-btn:last-child { order: 3; }

/* Theme toggle button — sits next to the lang switcher */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  margin-left: 4px;
  background: transparent;
  border: 1px solid var(--rule-strong);
  color: var(--graphite);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: color .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease);
}
.theme-toggle:hover {
  color: var(--brand-2);
  border-color: var(--rule-brand);
  background: var(--success-tint);
}
.theme-toggle svg { display: block; }
/* Icon visibility: dark theme shows sun (click to go light), light shows moon */
html[data-theme="dark"]  .theme-toggle .icon-moon { display: none; }
html[data-theme="dark"]  .theme-toggle .icon-sun  { display: block; }
html[data-theme="light"] .theme-toggle .icon-moon { display: block; }
html[data-theme="light"] .theme-toggle .icon-sun  { display: none; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.card-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--surface);
}

.card-header h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-16);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
  line-height: 1.3;
}

.card-body {
  padding: 20px;
}

.card-body.table-wrap,
.card-body .table-wrap {
  padding: 0;
}

.card-body > .table-wrap > table { margin: 0; }

/* ============================================================
   KPI GRID
   ============================================================ */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}

.kpi-card {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  min-width: 0;
  position: relative;
}

.kpi-card > * { min-width: 0; }

.kpi-icon {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  flex-shrink: 0;
  background: var(--canvas-alt);
  color: var(--graphite);
}
.kpi-icon.blue   { background: var(--info-tint);     color: var(--info-ink); }
.kpi-icon.green  { background: var(--success-tint);  color: var(--success-ink); }
.kpi-icon.orange { background: var(--warning-tint);  color: var(--warning-ink); }
.kpi-icon.red    { background: var(--critical-tint); color: var(--critical-ink); }
.kpi-icon.purple { background: var(--canvas-alt);    color: var(--graphite); }

.kpi-value {
  font-family: var(--font-mono);
  font-size: var(--fs-34);
  font-weight: 500;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -.025em;
  display: block;
  min-width: 0;
  word-break: break-word;
}

.kpi-label {
  display: block;
  font-size: var(--fs-11);
  color: var(--graphite);
  margin-top: 8px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  line-height: 1.3;
}

/* Dashboard link (clickable KPI values) */
.dash-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color .12s var(--ease);
}
.dash-link:hover {
  text-decoration: none;
  border-bottom-color: currentColor;
}

/* ============================================================
   DASHBOARD GRID
   ============================================================ */
.dashboard-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.dash-stat-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  justify-content: space-between;
}

.dash-stat {
  min-width: 60px;
  flex: 1 1 auto;
  text-align: center;
}

.dash-stat-val {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.1;
  color: var(--ink);
  letter-spacing: -.02em;
}

.dash-stat-lbl {
  display: block;
  font-size: var(--fs-10);
  color: var(--graphite);
  margin-top: 6px;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 600;
}

.progress-ring-container {
  position: relative;
  display: inline-block;
}

.progress-ring-label {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  font-family: var(--font-mono);
  font-size: 1.35rem;
  font-weight: 500;
  color: var(--brand-1);
  letter-spacing: -.02em;
}

/* ============================================================
   CHARTS
   ============================================================ */
.charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 24px;
}

.chart-box { min-height: 280px; }

.chart-box canvas,
canvas { max-width: 100%; }

/* ============================================================
   TABLES
   ============================================================ */
.table-wrap {
  overflow-x: auto;
  border-radius: 0;
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-13);
  background: var(--surface);
}

thead {
  background: var(--canvas-alt);
}

thead tr {
  border-bottom: 1px solid var(--rule-strong);
}

th {
  padding: 10px 16px;
  text-align: left;
  font-weight: 700;
  color: var(--graphite);
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: .1em;
  white-space: nowrap;
  font-family: var(--font-sans);
}

td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--rule);
  color: var(--ink);
  vertical-align: top;
}

td strong { font-weight: 600; color: var(--ink); }

tbody tr:hover td {
  background: var(--canvas-alt);
}

tbody tr:last-child td {
  border-bottom: none;
}

/* ============================================================
   BADGES
   ============================================================ */
.badge {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--radius-xs);
  font-size: var(--fs-10);
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
  border: 1px solid transparent;
  font-family: var(--font-sans);
}

.badge-critique,
.badge-critical,
.badge-vitale {
  background: var(--critical-tint);
  color: var(--critical-ink);
  border-color: var(--critical-rule);
}

.badge-elevee,
.badge-elevated,
.badge-haute {
  background: var(--warning-tint);
  color: var(--warning-ink);
  border-color: var(--warning-rule);
}

.badge-moyenne,
.badge-secondary {
  background: var(--warning-tint);
  color: var(--warning-ink);
  border-color: var(--warning-rule);
}

.badge-secondaire {
  background: var(--info-tint);
  color: var(--info-ink);
  border-color: var(--info-rule);
}

.badge-faible {
  background: var(--success-tint);
  color: var(--success-ink);
  border-color: var(--success-rule);
}

.badge-nonprioritaire {
  background: var(--canvas-alt);
  color: var(--graphite);
  border-color: var(--rule-strong);
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
  font-weight: 600;
  border: 1px solid transparent;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
  transition: background .12s var(--ease),
              border-color .12s var(--ease),
              color .12s var(--ease);
  font-family: var(--font-sans);
  line-height: 1.3;
  white-space: nowrap;
}

.btn:focus-visible {
  outline: 2px solid var(--brand-2);
  outline-offset: 2px;
}

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
}

.btn-primary {
  background: var(--brand-2);
  color: var(--on-brand);
  border-color: var(--brand-2);
}
.btn-primary:hover {
  background: var(--brand-3);
  border-color: var(--brand-3);
  color: #0a0e1a;
  text-decoration: none;
}

.btn-success {
  background: var(--brand-2);
  color: var(--on-brand);
  border-color: var(--brand-2);
}
.btn-success:hover {
  background: var(--brand-3);
  border-color: var(--brand-3);
  color: #0a0e1a;
  text-decoration: none;
}

.btn-danger {
  background: var(--critical);
  color: var(--on-brand);
  border-color: var(--critical);
}
.btn-danger:hover {
  background: #dc2626;
  border-color: #dc2626;
  color: var(--on-brand);
  text-decoration: none;
}

.btn-outline {
  background: transparent;
  border-color: var(--rule-strong);
  color: var(--ink);
}
.btn-outline:hover {
  background: var(--canvas-alt);
  border-color: var(--brand-2);
  color: var(--brand-2);
  text-decoration: none;
}

.btn-ghost {
  background: transparent;
  border-color: transparent;
  color: var(--graphite);
}
.btn-ghost:hover {
  background: var(--canvas-alt);
  color: var(--ink);
  text-decoration: none;
}

.btn-sm {
  padding: 6px 12px;
  font-size: var(--fs-12);
}

.btn-xs {
  padding: 4px 10px;
  font-size: var(--fs-11);
}

/* ============================================================
   FORMS
   ============================================================ */
.form-group { margin-bottom: 16px; }

.form-group label {
  display: block;
  font-size: var(--fs-11);
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--graphite);
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.form-control {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-14);
  color: var(--ink);
  background: var(--canvas-alt);
  font-family: var(--font-sans);
  line-height: 1.4;
  transition: border-color .12s var(--ease),
              box-shadow .12s var(--ease);
}
.form-control::placeholder { color: var(--muted); }
.form-control:hover { border-color: var(--graphite); }
.form-control:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px var(--focus);
}

select.form-control {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--graphite) 50%),
    linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 11px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}

textarea.form-control {
  resize: vertical;
  min-height: 88px;
  font-family: var(--font-sans);
  line-height: 1.5;
}

.form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
.form-row-4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 14px; }
.form-grid  { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--veil);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: fadeIn .12s var(--ease);
}
.modal-overlay.show { display: flex; }

.modal {
  background: var(--surface);
  border-radius: var(--radius-lg);
  width: 100%;
  max-width: 640px;
  max-height: calc(100vh - 40px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-xl);
  border: 1px solid var(--rule);
}

.modal-header {
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-shrink: 0;
}

.modal-header h3 {
  font-family: var(--font-serif);
  font-size: var(--fs-18);
  font-weight: 500;
  color: var(--ink);
  letter-spacing: -.005em;
  line-height: 1.3;
}

.modal-close {
  background: transparent;
  border: 1px solid var(--rule);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--graphite);
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background .12s var(--ease), color .12s var(--ease);
}
.modal-close:hover {
  background: var(--canvas-alt);
  color: var(--ink);
}

.modal-body {
  padding: 22px 24px;
  overflow-y: auto;
  flex: 1 1 auto;
}

.modal-footer {
  padding: 14px 24px;
  border-top: 1px solid var(--rule);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  background: var(--canvas-alt);
  flex-shrink: 0;
}

/* ============================================================
   TABS
   ============================================================ */
.tabs {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 20px;
}

.tab-btn {
  padding: 10px 16px;
  font-size: var(--fs-13);
  font-weight: 600;
  background: none;
  border: none;
  color: var(--graphite);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-sans);
  transition: color .12s var(--ease), border-color .12s var(--ease);
  position: relative;
}
.tab-btn:hover { color: var(--ink); }
.tab-btn.active,
.tab-active {
  color: var(--brand-2);
  border-bottom-color: var(--brand-2);
  font-weight: 700;
}

/* ============================================================
   TOOLBAR
   ============================================================ */
.toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}

.toolbar .search-box {
  position: relative;
  flex: 1 1 260px;
  max-width: 340px;
}
.toolbar .search-box input {
  padding-left: 34px;
  min-width: 0;
  width: 100%;
  background: var(--canvas-alt);
  border-radius: var(--radius-sm);
}
.toolbar .search-box::before {
  content: "\1F50D";
  position: absolute;
  left: 11px;
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--fs-12);
  opacity: .5;
  pointer-events: none;
}

.filter-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.filter-group label {
  font-size: var(--fs-10);
  color: var(--graphite);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-weight: 700;
  margin: 0;
}

.filter-group select {
  padding: 7px 28px 7px 11px;
  border: 1px solid var(--rule-strong);
  border-radius: var(--radius-sm);
  font-size: var(--fs-13);
  background: var(--canvas-alt);
  font-family: var(--font-sans);
  color: var(--ink);
  line-height: 1.4;
  cursor: pointer;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--graphite) 50%),
    linear-gradient(135deg, var(--graphite) 50%, transparent 50%);
  background-position:
    calc(100% - 14px) 50%,
    calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .12s var(--ease),
              box-shadow .12s var(--ease);
}
.filter-group select:hover { border-color: var(--graphite); }
.filter-group select:focus {
  outline: none;
  border-color: var(--brand-2);
  box-shadow: 0 0 0 3px var(--focus);
}

/* ============================================================
   CRITICALITY MATRIX
   ============================================================ */
.matrix-grid {
  display: grid;
  grid-template-columns: 100px repeat(4, 1fr);
  gap: 2px;
  font-size: var(--fs-12);
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: var(--radius-sm);
  overflow: hidden;
  padding: 1px;
}

.matrix-cell {
  padding: 14px 10px;
  text-align: center;
  font-weight: 600;
  background: var(--surface);
  min-height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.matrix-header {
  background: var(--canvas-alt);
  color: var(--graphite);
  font-weight: 700;
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.matrix-label {
  background: var(--canvas-alt);
  color: var(--graphite);
  font-weight: 700;
  font-size: var(--fs-10);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.level-low {
  background: var(--success-tint);
  color: var(--success-ink);
}

.level-med {
  background: var(--warning-tint);
  color: var(--warning-ink);
}

.level-high {
  background: var(--warning-tint);
  color: var(--warning-ink);
}

.level-crit {
  background: var(--critical-tint);
  color: var(--critical-ink);
}

/* ============================================================
   STATUS DOTS
   ============================================================ */
.status-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
  flex-shrink: 0;
}
.status-dot.green  { background: var(--brand-2); }
.status-dot.orange { background: var(--warning); }
.status-dot.red    { background: var(--critical); }

/* ============================================================
   EMPTY STATE
   ============================================================ */
.empty-state {
  text-align: center;
  padding: 56px 20px;
  color: var(--graphite);
  font-size: var(--fs-14);
}

.empty-state .empty-icon {
  font-size: 2.2rem;
  margin-bottom: 12px;
  opacity: .4;
  color: var(--graphite);
}

/* ============================================================
   MISC COMPONENTS
   ============================================================ */

/* Ramp-up sparkline (exercise rampup) */
.rampup-bar {
  display: inline-flex;
  align-items: flex-end;
  gap: 2px;
  height: 22px;
  padding: 2px 0;
}
.rampup-bar span {
  width: 6px;
  background: var(--brand-2);
  border-radius: 1px 1px 0 0;
  min-height: 2px;
}

.exercise-card .card-header h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: var(--fs-16);
}

.exercise-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 24px;
  font-size: var(--fs-13);
  color: var(--graphite);
}
.exercise-meta strong { color: var(--ink); font-weight: 600; }

.dep-arrow { color: var(--muted); margin: 0 4px; }

/* Tooltip */
[data-tooltip] { position: relative; cursor: help; }
[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--canvas-alt);
  color: var(--ink);
  border: 1px solid var(--rule-strong);
  padding: 6px 10px;
  border-radius: var(--radius-sm);
  font-size: var(--fs-11);
  font-weight: 500;
  white-space: nowrap;
  z-index: 10;
  pointer-events: none;
  box-shadow: var(--shadow-md);
}

/* ============================================================
   LOGIN PAGE
   app.js renders the login view with inline styles that
   reference --card, --radius-lg, --shadow-lg, --border, --text,
   --text-light, --primary-light. All of those resolve to our
   new palette via the backward-compat aliases declared at the
   top of this file, so the login view picks up the new identity
   without any JS edits.
   ============================================================ */
#loginError {
  /* Override the hardcoded inline pink/red with palette critical */
  background: var(--critical-tint) !important;
  color: var(--critical-ink) !important;
  border: 1px solid var(--critical-rule);
  border-radius: var(--radius-sm) !important;
  padding: 10px 14px !important;
  font-size: var(--fs-13) !important;
  font-weight: 500;
  letter-spacing: -.002em;
}

#loginForm .btn,
#registerForm .btn {
  padding: 11px 16px !important;
  font-size: var(--fs-14) !important;
}

/* ============================================================
   SCROLLBAR (webkit)
   ============================================================ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: var(--canvas);
}
::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 6px;
  border: 2px solid var(--canvas);
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--graphite);
  background-clip: padding-box;
  border: 2px solid var(--canvas);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1100px) {
  .dashboard-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 900px) {
  :root { --content-px: 20px; }
  .sidebar {
    transform: translateX(-100%);
    transition: transform .2s var(--ease);
  }
  .sidebar.open { transform: translateX(0); }
  .main { margin-left: 0; }
  .charts-row,
  .dashboard-grid { grid-template-columns: 1fr; }
  .form-row,
  .form-row-3,
  .form-row-4,
  .form-grid { grid-template-columns: 1fr; }
  .exercise-meta { grid-template-columns: 1fr; }
  .header { padding: 0 20px; }
  .kpi-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 560px) {
  .kpi-grid { grid-template-columns: 1fr; }
  .header { padding: 0 16px; }
  .header-title { font-size: var(--fs-18); }
  .header-actions > span { display: none; }
  .modal { border-radius: var(--radius-md); }
  .card-body { padding: 16px; }
  .content { padding: 18px 16px 36px; }
}

/* ============================================================
   PRINT
   ============================================================ */
@media print {
  :root { --content-px: 0; }
  .sidebar,
  .header,
  .toolbar,
  .btn,
  .modal-overlay { display: none !important; }
  .main { margin-left: 0 !important; }
  .content { padding: 0 !important; }
  .card,
  .kpi-card {
    border: 1px solid #333 !important;
    box-shadow: none !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
  a { color: var(--ink) !important; text-decoration: underline; }
  body { background: #fff !important; }
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ---- Embedded executive dashboard iframe ---- */
.exec-dash-frame {
  display: block;
  width: calc(100% + (var(--content-px) * 2));
  /* Full viewport height minus the SPA header (~72px) */
  height: calc(100vh - 72px);
  min-height: 900px;
  border: 0;
  background: transparent;
  /* Negate .content padding so iframe spans the full main area */
  margin: -24px calc(-1 * var(--content-px)) -48px calc(-1 * var(--content-px));
}

/* ============================================================
   Hamburger Menu Toggle (mobile/tablet)
   ============================================================ */
.sidebar-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--text);
  cursor: pointer;
  padding: 6px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}
.sidebar-toggle:hover { background: var(--hover-bg); }
@media (max-width: 900px) {
  .sidebar-toggle { display: flex; align-items: center; }
}
/* Sidebar overlay backdrop on mobile */
.sidebar-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 99;
}
.sidebar-backdrop.show { display: block; }

/* ============================================================
   Toast Notifications
   ============================================================ */
.toast-container {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
  max-width: 420px;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: var(--radius);
  font-size: var(--fs-13);
  line-height: 1.4;
  box-shadow: var(--shadow-lg);
  animation: toastIn .3s ease;
  cursor: pointer;
  border-left: 4px solid;
}
.toast.toast-success { background: var(--surface); border-color: var(--brand-1); color: var(--text); }
.toast.toast-error   { background: var(--surface); border-color: var(--critical); color: var(--text); }
.toast.toast-warning { background: var(--surface); border-color: var(--warning); color: var(--text); }
.toast.toast-info    { background: var(--surface); border-color: var(--info); color: var(--text); }
.toast-icon { font-size: 1.1rem; flex-shrink: 0; margin-top: 1px; }
.toast-body { flex: 1; }
.toast.removing { animation: toastOut .3s ease forwards; }
@keyframes toastIn { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: translateX(0); } }
@keyframes toastOut { from { opacity: 1; transform: translateX(0); } to { opacity: 0; transform: translateX(40px); } }

/* ============================================================
   Loading Spinner
   ============================================================ */
.spinner-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  gap: 16px;
  color: var(--muted);
}
.spinner {
  width: 36px;
  height: 36px;
  border: 3px solid var(--border);
  border-top-color: var(--brand-1);
  border-radius: 50%;
  animation: spin .8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spinner-text { font-size: var(--fs-13); }

/* Form validation error highlight */
.form-error-highlight {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.25) !important;
}
.form-error-highlight:focus {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3) !important;
}