/* ════════════════════════════════════════════════════════════════════════════
   factur-track.css — v4 « Hybride » (brand bleu + accent gold + ivory bg)
   ─────────────────────────────────────────────────────────────────────────
   Évolution de v3 « Banque privée ». Conservé : Fraunces serif pour titres
   et KPI values, bg ivory, KPI hero gold accent, structure des cards/tables.
   Changé : brand primaire = bleu #2563eb (CTA, focus, sidebar active),
   sidebar nav-bg slate dark #0f1729, contrastes WCAG AA, focus-visible
   global, warning bump pour AA sur ivory, semantics canoniques.
   ════════════════════════════════════════════════════════════════════════════ */

/* ─── Fonts ─────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&display=swap');

/* ─── Tokens ────────────────────────────────────────────────────────────── */
:root {
  /* === Surfaces === */
  --bg:           #faf7f0;     /* warm ivory — signature */
  --bg-alt:       #f3eee2;     /* deeper cream */
  --surface:      #ffffff;
  --surface-soft: #fbfaf6;

  /* === Brand (bleu — canonical primary) === */
  --brand:         #2563eb;
  --brand-hover:   #1d4ed8;
  --brand-active:  #1e40af;
  --brand-soft:    #eff6ff;
  --brand-line:    rgba(37, 99, 235, 0.25);
  --brand-ring:    rgba(37, 99, 235, 0.18);

  /* === Accent (gold — premium highlights only) === */
  --gold:          #c69a4f;
  --gold-deep:     #a07a36;
  --gold-soft:     rgba(198, 154, 79, 0.12);
  --gold-line:     rgba(198, 154, 79, 0.35);

  /* === Ink (text — WCAG AA compliant) === */
  --ink:          #15171c;
  --ink-soft:     #475569;     /* body — was #4a4d54 */
  --ink-muted:    #6b7280;     /* secondary — was #87898f (failed AA) */
  --ink-faint:    #c5c4be;
  --ink-inverse:  #ffffff;

  /* === Lines === */
  --line:         rgba(21, 23, 28, 0.08);
  --line-strong:  rgba(21, 23, 28, 0.16);

  /* === Semantics (canonical, WCAG AA on ivory) === */
  --success:      #059669;
  --success-soft: #d1fae5;
  --success-line: rgba(5, 150, 105, 0.25);
  --warning:      #b45309;     /* bumped from #d97706 for AA on ivory */
  --warning-soft: #fef3c7;
  --warning-line: rgba(180, 83, 9, 0.25);
  --danger:       #dc2626;
  --danger-soft:  #fee2e2;
  --danger-line:  rgba(220, 38, 38, 0.25);
  --info:         #0891b2;
  --info-soft:    #cffafe;
  --info-line:    rgba(8, 145, 178, 0.25);

  /* Legacy aliases — kept for templates not yet migrated */
  --positive:      var(--success);
  --positive-soft: var(--success-soft);
  --negative:      var(--danger);
  --negative-soft: var(--danger-soft);
  --warn:          var(--warning);
  --warn-soft:     var(--warning-soft);
  --neutral:       var(--ink-muted);
  --blue:          var(--brand);
  --blue-d:        var(--brand-hover);
  --blue-bg:       var(--brand-soft);
  --red:           var(--danger);
  --red-bg:        var(--danger-soft);
  --green:         var(--success);
  --green-bg:      var(--success-soft);
  --amber:         var(--warning);
  --amber-bg:      var(--warning-soft);
  --purple:        #7c3aed;
  --purple-bg:     #f5f3ff;

  /* === Sidebar (slate dark — matches cool brand) === */
  --sb-bg:           #0f1729;     /* was #15171c — slate dark */
  --sb-bg-deep:      #0a0f1c;
  --sb-text:         #94a3b8;
  --sb-text-strong:  #f1f5f9;
  --sb-text-dim:     #64748b;
  --sb-active-bg:    rgba(37, 99, 235, 0.18);   /* was gold-soft */
  --sb-active-text:  #93c5fd;                    /* was gold */
  --sb-active-border: var(--brand);
  --sb-divider:      rgba(255, 255, 255, 0.06);

  /* === Geometry === */
  --r-sm:  4px;
  --r:     6px;
  --r-lg:  8px;
  --r-xl:  12px;
  --w-nav: 240px;
  --w-nav-collapsed: 56px;

  /* Legacy alias for templates referencing it */
  --bg-color: var(--bg);
  --bg-2:     var(--bg-alt);
  --border:   var(--line);
  --text:     var(--ink);
  --text-1:   var(--ink);
  --text-2:   var(--ink-soft);
  --text-3:   var(--ink-muted);
  --muted:    var(--ink-muted);
  --accent:   var(--gold);
  --accent-soft: var(--gold-soft);
  --nav-bg:   var(--sb-bg);
  --radius:   var(--r-lg);

  /* === Shadows — barely there, premium === */
  --shadow-1: 0 1px 0 rgba(21, 23, 28, 0.04);
  --shadow-2: 0 1px 2px rgba(21, 23, 28, 0.04), 0 1px 1px rgba(21, 23, 28, 0.03);
  --shadow-3: 0 4px 6px -1px rgba(21, 23, 28, 0.06), 0 2px 4px -2px rgba(21, 23, 28, 0.04);
  --shadow:   var(--shadow-2);

  /* === Type === */
  --serif: "Fraunces", "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --sans:  "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --mono:  ui-monospace, "SF Mono", "Menlo", Consolas, monospace;
}

/* ─── Reset & base ──────────────────────────────────────────────────────── */
body {
  background: var(--bg) !important;
  color: var(--ink) !important;
  font-family: var(--sans) !important;
  font-feature-settings: "ss01", "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
  letter-spacing: -0.005em;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--ink-faint); border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-muted); }
::selection { background: var(--brand-soft); color: var(--ink); }

/* ─── Focus rings (a11y — keyboard navigation) ──────────────────────────── */
:focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px !important;
  border-radius: var(--r-sm);
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--brand) !important;
  outline-offset: 2px !important;
}
/* Sidebar links focus uses lighter ring on dark bg */
body .sidebar a:focus-visible,
body .injected-sidebar a:focus-visible,
body .sidebar button:focus-visible,
body .injected-sidebar button:focus-visible {
  outline-color: #93c5fd !important;
  outline-offset: 0 !important;
}

/* ─── Sidebar ───────────────────────────────────────────────────────────── */
body .sidebar,
body .injected-sidebar {
  background: var(--sb-bg) !important;
  border-right: 1px solid var(--sb-bg-deep) !important;
  padding: 1.5rem 0 1rem !important;
  width: var(--w-nav) !important;
  transition: width .18s ease !important;
}

/* Collapsible sidebar — state in localStorage('ft-sidebar') = 'collapsed' | 'expanded' */
body.sb-collapsed .sidebar,
body.sb-collapsed .injected-sidebar {
  width: var(--w-nav-collapsed) !important;
  overflow-x: hidden !important;
}
/* Pages using `.main { margin-left: var(--w-nav) }` (dashboard, ledger_account) */
body.sb-collapsed { --w-nav: var(--w-nav-collapsed) !important; }
/* Pages setting body margin-left directly (legacy partial) */
body.sb-collapsed[style*="margin-left:240"] { margin-left: var(--w-nav-collapsed) !important; }

body.sb-collapsed .sb-logo .sb-logo-text,
body.sb-collapsed .sb-logo-flex .sb-logo-text,
body.sb-collapsed .sb-logo .sb-logo-name,
body.sb-collapsed .sb-logo .sb-logo-sub,
body.sb-collapsed .sb-logo .sb-brand,
body.sb-collapsed .sb-logo .sb-sub,
body.sb-collapsed .sb-logo .brand,
body.sb-collapsed .sb-logo .sub,
body.sb-collapsed .sb-logo-flex .brand,
body.sb-collapsed .sb-logo-flex .sub,
body.sb-collapsed .sb-logo a,
body.sb-collapsed .sb-section,
body.sb-collapsed .sb-label,
body.sb-collapsed .sb-link > span:not(.icon),
body.sb-collapsed .sb-link > .sb-text,
body.sb-collapsed .sb-badge,
body.sb-collapsed .sb-count,
body.sb-collapsed .sb-dark-toggle span:not(.icon),
body.sb-collapsed .sb-dark-toggle .sb-text { display: none !important; }

body.sb-collapsed .sb-logo,
body.sb-collapsed .sb-logo-flex {
  overflow: hidden !important;
  justify-content: center !important;
  padding: .4rem .25rem 1rem !important;
}
body.sb-collapsed .sb-logo { padding: .4rem .5rem 1rem !important; justify-content: center !important; }
body.sb-collapsed .sb-link { justify-content: center !important; padding: .55rem 0 !important; }
body.sb-collapsed .sb-link .icon { width: auto !important; }

/* Tooltip on collapsed link hover */
body.sb-collapsed .sb-link[data-tip] { position: relative; }
body.sb-collapsed .sb-link[data-tip]:hover::after {
  content: attr(data-tip);
  position: absolute; left: 60px; top: 50%; transform: translateY(-50%);
  background: var(--ink); color: var(--ink-inverse);
  padding: .35rem .65rem; border-radius: var(--r);
  font-size: 12px; font-weight: 500;
  white-space: nowrap; z-index: 1000;
  box-shadow: 0 6px 20px rgba(0,0,0,.4);
  pointer-events: none;
}

.sb-toggle {
  background: rgba(255,255,255,.04) !important;
  border: 1px solid rgba(255,255,255,.06) !important;
  color: var(--sb-text) !important; cursor: pointer;
  padding: .25rem .5rem !important;
  font-size: 14px !important; line-height: 1 !important;
  border-radius: var(--r) !important;
  transition: background .12s, color .12s;
  flex-shrink: 0; position: absolute; top: 14px; right: 12px;
  z-index: 5;
}
.sb-toggle:hover { background: rgba(255,255,255,.08) !important; color: var(--sb-text-strong) !important; }
body.sb-collapsed .sb-toggle { right: 8px; padding: .2rem .35rem !important; }

/* Sidebar logo */
body .sidebar .sb-logo,
body .injected-sidebar .sb-logo,
body .sidebar .sb-logo-flex {
  padding: .2rem 1.4rem 1.6rem !important;
  border-bottom: 1px solid var(--sb-divider) !important;
  margin-bottom: 1.2rem !important;
  display: flex !important;
  align-items: center !important;
  gap: .8rem !important;
}

body .sidebar .sb-logo-mark,
body .injected-sidebar .sb-logo-mark {
  width: 38px; height: 38px;
  border-radius: var(--r);
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-active) 100%);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.25), 0 4px 12px rgba(0, 0, 0, 0.3);
  /* Wordmark monogramme : Fraunces 600, T blanc */
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 600;
  color: #fff;
  letter-spacing: -0.02em;
  line-height: 1;
  user-select: none;
}
body .sidebar .sb-logo-mark svg,
body .injected-sidebar .sb-logo-mark svg { width: 24px; height: 24px; }
/* Hide mark text only when SVG is provided inside */
body .sidebar .sb-logo-mark:has(svg),
body .injected-sidebar .sb-logo-mark:has(svg) {
  font-size: 0;  /* hide any stray text content */
}

body .sidebar .sb-logo-text { display: flex; flex-direction: column; line-height: 1.2; }
body .sidebar .sb-logo-text .brand,
body .sidebar .sb-brand,
body .injected-sidebar .sb-brand {
  font-family: var(--serif) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  color: var(--sb-text-strong) !important;
  letter-spacing: -0.01em;
  font-feature-settings: "ss01";
}
body .sidebar .sb-logo-text .sub,
body .sidebar .sb-sub,
body .injected-sidebar .sb-sub {
  font-size: 11px !important;
  color: var(--sb-text-dim) !important;
  font-weight: 400 !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}

/* Sidebar section labels */
body .sidebar .sb-section,
body .injected-sidebar .sb-section {
  font-family: var(--sans) !important;
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sb-text-dim) !important;
  padding: 1.2rem 1.4rem .4rem !important;
  background: transparent !important;
}

/* Sidebar links */
body .sidebar .sb-link,
body .injected-sidebar .sb-link {
  display: flex !important;
  align-items: center !important;
  gap: .7rem !important;
  padding: .55rem 1.4rem !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  color: var(--sb-text) !important;
  text-decoration: none !important;
  border-left: 2px solid transparent !important;
  transition: color .15s ease, background .15s ease, border-color .15s ease !important;
  text-transform: none !important;
  letter-spacing: -0.005em !important;
  border-radius: 0 !important;
  background: transparent !important;
}
body .sidebar .sb-link:hover,
body .injected-sidebar .sb-link:hover {
  color: var(--sb-text-strong) !important;
  background: rgba(255,255,255,.025) !important;
}
body .sidebar .sb-link.active,
body .injected-sidebar .sb-link.active {
  color: var(--sb-active-text) !important;
  background: var(--sb-active-bg) !important;
  border-left-color: var(--sb-active-border) !important;
  font-weight: 600 !important;
}
body .sidebar .sb-link.active::before,
body .injected-sidebar .sb-link.active::before {
  display: none !important;
}
body .sidebar .sb-link .icon,
body .injected-sidebar .sb-link .icon {
  width: 16px;
  text-align: center;
  font-size: 13px;
  opacity: .75;
  flex-shrink: 0;
}
body .sidebar .sb-link.active .icon,
body .injected-sidebar .sb-link.active .icon { opacity: 1; }

body .sb-dark-toggle {
  margin: auto 1rem .8rem !important;
  padding: .55rem .8rem !important;
  background: rgba(255,255,255,.04) !important;
  color: var(--sb-text) !important;
  border: 1px solid var(--sb-divider) !important;
  border-radius: var(--r) !important;
  font-size: 11.5px !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  cursor: pointer;
  display: flex; align-items: center; gap: .5rem;
  transition: background .15s ease;
}
body .sb-dark-toggle:hover { background: rgba(255,255,255,.08) !important; }

/* ─── Main content ──────────────────────────────────────────────────────── */
body .main {
  background: var(--bg) !important;
  padding: 2.4rem 3rem 4rem !important;
  max-width: none !important;
}

/* ─── Page header — serif title ─────────────────────────────────────────── */
body .page-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  margin-bottom: 2.2rem !important;
  padding-bottom: 1.4rem !important;
  border-bottom: 1px solid var(--line) !important;
  gap: 1.5rem;
  flex-wrap: wrap;
}
body .page-header h1 {
  font-family: var(--serif) !important;
  font-weight: 500 !important;
  font-size: 32px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  margin: 0 0 .4rem !important;
  font-feature-settings: "ss01";
}
body .page-header .sub {
  font-size: 14px !important;
  color: var(--ink-soft) !important;
  font-weight: 400 !important;
  letter-spacing: 0;
  max-width: 600px;
}

/* ─── Cards / panels ────────────────────────────────────────────────────── */
body .panel,
body .card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xl) !important;
  margin-bottom: 1.4rem !important;
  box-shadow: var(--shadow-1) !important;
}
body .panel { padding: 1.6rem 1.8rem !important; }
body .panel h2 {
  font-family: var(--serif) !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  letter-spacing: -0.01em !important;
  color: var(--ink) !important;
  margin: 0 0 1.2rem !important;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
}

/* ─── KPI row — banque privée style ─────────────────────────────────────── */
body .kpi-row {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xl) !important;
  margin-bottom: 2rem !important;
  overflow: hidden;
  box-shadow: var(--shadow-1) !important;
}
body .kpi {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid var(--line) !important;
  border-radius: 0 !important;
  padding: 1.5rem 1.75rem !important;
  position: relative;
  transition: background .2s ease;
}
body .kpi:last-child { border-right: none !important; }
body .kpi::before { display: none !important; }
body .kpi:hover { background: var(--surface-soft) !important; }

body .kpi .k-label {
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-muted) !important;
  margin-bottom: .55rem !important;
}
body .kpi .k-value {
  font-family: var(--serif) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  font-feature-settings: "tnum", "ss01";
  line-height: 1.1;
}
body .kpi .k-sub {
  font-size: 12px !important;
  color: var(--ink-muted) !important;
  margin-top: .35rem !important;
  font-weight: 400 !important;
  letter-spacing: 0;
}

/* Color modulations — sober, sophisticated */
body .kpi.blue   .k-value { color: var(--brand) !important; }
body .kpi.green  .k-value { color: var(--success) !important; }
body .kpi.red    .k-value { color: var(--danger) !important; }
body .kpi.orange .k-value,
body .kpi.amber  .k-value { color: var(--warning) !important; }
body .kpi.gray   .k-value { color: var(--neutral) !important; }
body .kpi.purple .k-value { color: var(--gold-deep) !important; }

/* Hero / featured KPI uses gold underline (premium signature) */
body .kpi.gold .k-value,
body .kpi.featured .k-value { color: var(--gold-deep) !important; }
body .kpi.featured::after,
body .kpi.gold::after {
  content: ''; position: absolute; left: 1.75rem; right: 1.75rem; bottom: 0;
  height: 2px; background: var(--gold);
}

/* ─── Tables ────────────────────────────────────────────────────────────── */
body table {
  width: 100% !important;
  border-collapse: collapse !important;
  font-size: 13.5px !important;
  font-family: var(--sans) !important;
}
body table th {
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-muted) !important;
  padding: .9rem 1rem !important;
  border-bottom: 1px solid var(--line) !important;
  background: transparent !important;
  text-align: left;
}
body table td {
  padding: 1rem !important;
  border-bottom: 1px solid var(--line) !important;
  color: var(--ink) !important;
  font-weight: 400;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
}
body table tr:last-child td { border-bottom: none !important; }
body table tr:hover td { background: var(--surface-soft) !important; }
body table .amount,
body table td.amount {
  text-align: right !important;
  font-weight: 500 !important;
  font-family: var(--serif) !important;
  font-size: 14.5px !important;
  font-variant-numeric: tabular-nums !important;
  letter-spacing: -0.01em;
  color: var(--ink) !important;
  white-space: nowrap !important;
  min-width: 120px;
}
body table th.amount,
body table th[class*="amount"] { text-align: right !important; }

body table td { white-space: nowrap; }
body table td:first-child,
body table td.wrap { white-space: normal; }

/* ─── Buttons ───────────────────────────────────────────────────────────── */
/* Primary — brand bleu (canonical CTA) */
body .btn-primary,
body button.btn-primary,
body a.btn-primary {
  background: var(--brand) !important;
  color: var(--ink-inverse) !important;
  border: 1px solid var(--brand) !important;
  border-radius: var(--r) !important;
  padding: .6rem 1.2rem !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: -0.005em;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .05s ease;
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none;
  box-shadow: var(--shadow-1);
}
body .btn-primary:hover,
body button.btn-primary:hover,
body a.btn-primary:hover {
  background: var(--brand-hover) !important;
  border-color: var(--brand-hover) !important;
  color: var(--ink-inverse) !important;
}
body .btn-primary:active { transform: translateY(1px); }

/* Dark — charcoal (legacy, for non-CTA emphasis) */
body .btn-dark,
body button.btn-dark,
body a.btn-dark {
  background: var(--ink) !important;
  color: var(--bg) !important;
  border: 1px solid var(--ink) !important;
  border-radius: var(--r) !important;
  padding: .6rem 1.2rem !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background .15s ease;
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none;
}
body .btn-dark:hover { background: #2a2d33 !important; border-color: #2a2d33 !important; }

/* Ghost / secondary — bordered white */
body .btn-ghost,
body button.btn-ghost,
body a.btn-ghost,
body .btn-secondary,
body button.btn-secondary,
body a.btn-secondary {
  background: var(--surface) !important;
  color: var(--ink-soft) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r) !important;
  padding: .55rem 1rem !important;
  font-family: var(--sans) !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
  display: inline-flex; align-items: center; gap: .4rem;
  text-decoration: none;
}
body .btn-ghost:hover,
body .btn-secondary:hover {
  background: var(--bg-alt) !important;
  border-color: var(--ink-soft) !important;
  color: var(--ink) !important;
}

/* Semantic buttons */
body .btn-success { background: var(--success) !important; color: #fff !important; border: 1px solid var(--success) !important; border-radius: var(--r) !important; padding: .55rem 1rem !important; font-weight: 500 !important; cursor: pointer; }
body .btn-success:hover { background: #047857 !important; }
body .btn-danger  { background: var(--surface) !important; color: var(--danger) !important; border: 1px solid var(--line-strong) !important; border-radius: var(--r) !important; padding: .55rem 1rem !important; font-weight: 500 !important; cursor: pointer; }
body .btn-danger:hover  { background: var(--danger-soft) !important; border-color: var(--danger) !important; }
body .btn-amber   { background: var(--warning) !important; color: #fff !important; border: 1px solid var(--warning) !important; border-radius: var(--r) !important; padding: .55rem 1rem !important; font-weight: 500 !important; cursor: pointer; }
body .btn-amber:hover { background: #92400e !important; }

/* Sizes */
body .btn-sm {
  padding: .35rem .8rem !important;
  font-size: 11.5px !important;
  font-family: var(--sans) !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface) !important;
  color: var(--ink) !important;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease;
}
body .btn-sm:hover { background: var(--bg-alt) !important; }
body .btn-xs {
  padding: .3rem .65rem !important;
  font-size: 11.5px !important;
  font-weight: 500 !important;
  border-radius: var(--r-sm) !important;
  min-height: 28px;
  cursor: pointer;
}

/* Specific colored small buttons keep their meaning but quiet */
body .btn-sm.btn-lib,
body .btn-sm[style*="43a047"] {
  background: var(--success) !important;
  color: #fff !important;
  border-color: var(--success) !important;
}
body .btn-sm.btn-lib:hover { background: #047857 !important; }

/* ─── Filter pills ──────────────────────────────────────────────────────── */
body .filters .filter-btn,
body .chip {
  padding: .5rem 1rem !important;
  border: 1px solid var(--line-strong) !important;
  background: var(--surface) !important;
  border-radius: var(--r) !important;
  font-family: var(--sans) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  cursor: pointer;
  color: var(--ink-soft) !important;
  transition: all .15s ease;
  letter-spacing: -0.005em;
}
body .filters .filter-btn:hover,
body .chip:hover {
  border-color: var(--brand) !important;
  color: var(--brand) !important;
}
body .filters .filter-btn.active,
body .chip.active {
  background: var(--brand) !important;
  color: var(--ink-inverse) !important;
  border-color: var(--brand) !important;
  box-shadow: none !important;
}
body .filters {
  display: flex !important;
  gap: .5rem !important;
  flex-wrap: wrap;
  margin-bottom: 1.6rem !important;
}

/* ─── Badges ────────────────────────────────────────────────────────────── */
body .badge,
body .status-badge,
body .pill {
  display: inline-flex !important;
  align-items: center;
  gap: .25rem;
  padding: .25rem .65rem !important;
  border-radius: 999px !important;
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0;
  line-height: 1.4;
  border: 1px solid transparent;
  background: var(--bg-alt) !important;
  color: var(--ink) !important;
  white-space: nowrap;
}
body .badge.b-prov,
body .status-pending,
body .badge.b-due-soon,
body .badge-amber,
body .pill-amber,
body .pill-warn,
body .badge-warning   { background: var(--warning-soft) !important; color: var(--warning) !important; border-color: var(--warning-line) !important; }

body .badge.b-def,
body .badge.b-future,
body .status-sent,
body .badge-neutral,
body .badge-gray      { background: var(--bg-alt) !important; color: var(--ink-soft) !important; border-color: var(--line) !important; }

body .badge.b-active,
body .badge-gold,
body .badge-purple    { background: var(--gold-soft) !important; color: var(--gold-deep) !important; border-color: var(--gold-line) !important; }

body .badge.b-liberee,
body .status-received,
body .badge-green,
body .pill-green,
body .pill-ok,
body .badge-success   { background: var(--success-soft) !important; color: var(--success) !important; border-color: var(--success-line) !important; }

body .badge.b-overdue,
body .status-overdue,
body .badge-red,
body .pill-red,
body .badge-danger    { background: var(--danger-soft) !important; color: var(--danger) !important; border-color: var(--danger-line) !important; }

body .badge-blue,
body .pill-blue,
body .badge-info,
body .badge-brand     { background: var(--brand-soft) !important; color: var(--brand) !important; border-color: var(--brand-line) !important; }

body .status-cancelled { background: var(--bg-alt) !important; color: var(--ink-muted) !important; }

/* Status dots (used inside badges) */
body .dot {
  display: inline-block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ─── Alert banners ─────────────────────────────────────────────────────── */
body .alert-banner {
  padding: 1rem 1.2rem !important;
  border-radius: var(--r-lg) !important;
  margin-bottom: 1.2rem !important;
  font-family: var(--sans) !important;
  font-size: 13.5px !important;
  font-weight: 400 !important;
  letter-spacing: -0.005em;
  background: var(--warning-soft) !important;
  color: var(--warning) !important;
  border: 1px solid var(--warning-line) !important;
  border-left: 3px solid var(--warning) !important;
}
body .alert-banner.danger {
  background: var(--danger-soft) !important;
  color: var(--danger) !important;
  border-color: var(--danger-line) !important;
  border-left-color: var(--danger) !important;
}
body .alert-banner.info {
  background: var(--brand-soft) !important;
  color: var(--brand) !important;
  border-color: var(--brand-line) !important;
  border-left-color: var(--brand) !important;
}
body .alert-banner.success {
  background: var(--success-soft) !important;
  color: var(--success) !important;
  border-color: var(--success-line) !important;
  border-left-color: var(--success) !important;
}
body .alert-banner strong { font-weight: 600; }

/* ─── Forms ─────────────────────────────────────────────────────────────── */
body input[type="text"],
body input[type="number"],
body input[type="date"],
body input[type="email"],
body input[type="password"],
body input[type="tel"],
body input[type="file"],
body input[type="search"],
body select,
body textarea {
  font-family: var(--sans) !important;
  font-size: 14px !important;
  color: var(--ink) !important;
  border: 1px solid var(--line-strong) !important;
  border-radius: var(--r) !important;
  background: var(--surface) !important;
  padding: .65rem .85rem !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body input:focus,
body select:focus,
body textarea:focus {
  outline: none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-ring) !important;
}
body input:focus-visible,
body select:focus-visible,
body textarea:focus-visible {
  outline: none !important;
  border-color: var(--brand) !important;
  box-shadow: 0 0 0 3px var(--brand-ring) !important;
}

/* Validation states */
body input.is-valid,
body select.is-valid {
  border-color: var(--success) !important;
}
body input.is-invalid,
body select.is-invalid {
  border-color: var(--danger) !important;
}
body input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15) !important;
}

body label {
  font-family: var(--sans) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--ink-muted) !important;
  display: block;
  margin-bottom: .4rem;
}

body .hint,
body .form-help {
  font-size: 12px !important;
  color: var(--ink-muted) !important;
  margin-top: .35rem;
  font-weight: 400;
}
body .hint.italic { font-style: italic; }

/* Form grids */
body .form-grid-2 {
  display: grid !important;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
@media (max-width: 640px) {
  body .form-grid-2 { grid-template-columns: 1fr; }
}

/* ─── Account / list cards ──────────────────────────────────────────────── */
body .acc-card {
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-lg) !important;
  margin-bottom: .8rem !important;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body .acc-card:hover {
  border-color: var(--line-strong) !important;
  box-shadow: var(--shadow-2) !important;
}
body .acc-card.breach {
  border-color: var(--danger) !important;
  background: linear-gradient(180deg, var(--surface) 0%, var(--danger-soft) 100%) !important;
}
body .acc-card.warn {
  border-color: var(--gold) !important;
  background: linear-gradient(180deg, var(--surface) 0%, var(--gold-soft) 100%) !important;
}

/* ─── Code / monospace ──────────────────────────────────────────────────── */
body code, body pre {
  font-family: var(--mono) !important;
  font-size: 12.5px !important;
}
body code {
  background: var(--bg-alt) !important;
  border: 1px solid var(--line) !important;
  padding: 1px 6px;
  border-radius: var(--r-sm);
  color: var(--ink-soft);
}

/* ─── Empty states ──────────────────────────────────────────────────────── */
body .empty {
  text-align: center;
  padding: 4rem 1.5rem !important;
  color: var(--ink-muted) !important;
  font-family: var(--serif) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  font-style: italic;
}

/* ─── Drag & drop zone ──────────────────────────────────────────────────── */
body .dropzone {
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-xl);
  padding: 2.5rem 1.5rem;
  text-align: center;
  background: var(--surface-soft);
  transition: all .15s ease;
  cursor: pointer;
}
body .dropzone:hover,
body .dropzone.drag-over {
  border-color: var(--brand);
  background: var(--brand-soft);
}
body .dropzone-icon { font-size: 32px; opacity: .5; margin-bottom: .8rem; display: block; }
body .dropzone-title { font-weight: 600; font-size: 14px; margin-bottom: .25rem; color: var(--ink); }
body .dropzone-sub { font-size: 12px; color: var(--ink-muted); }

/* ─── Progress bar ──────────────────────────────────────────────────────── */
body .progress {
  height: 6px;
  background: var(--line);
  border-radius: 3px;
  overflow: hidden;
}
body .progress-bar {
  height: 100%;
  background: var(--brand);
  transition: width .3s ease;
}
body .progress-bar.success { background: var(--success); }
body .progress-bar.warning { background: var(--warning); }
body .progress-bar.danger  { background: var(--danger); }
body .progress-bar.gold    { background: var(--gold); }

/* ─── Links ─────────────────────────────────────────────────────────────── */
body a { color: var(--ink) !important; text-decoration: none; }
body a:hover { color: var(--brand) !important; }
body a.text-link {
  color: var(--brand) !important;
  text-decoration: none;
}
body a.text-link:hover { color: var(--brand-hover) !important; text-decoration: underline; }
body .breadcrumb { font-family: var(--sans); font-size: 12px; color: var(--ink-muted); margin-bottom: .8rem; }
body .breadcrumb a { color: var(--ink-muted); }

/* ─── Dashboard-specific overrides (uses .kpi-val / .kpi-lbl / .kpi-hero) ── */

body .kpi-row.kpi-row-dyn {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  gap: 0 !important;
  background: var(--surface) !important;
  border: 1px solid var(--line) !important;
  border-radius: var(--r-xl) !important;
  overflow: hidden;
  box-shadow: var(--shadow-1) !important;
}
body .kpi-row.kpi-row-dyn > .kpi {
  background: transparent !important;
  border: none !important;
  border-right: 1px solid var(--line) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 1.5rem 1.75rem !important;
}
body .kpi-row.kpi-row-dyn > .kpi:last-child { border-right: none !important; }

body .kpi-lbl {
  font-family: var(--sans) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: var(--ink-muted) !important;
  margin-bottom: .55rem !important;
}
body .kpi-val {
  font-family: var(--serif) !important;
  font-size: 28px !important;
  font-weight: 500 !important;
  letter-spacing: -0.02em !important;
  color: var(--ink) !important;
  font-variant-numeric: tabular-nums lining-nums !important;
  line-height: 1.1 !important;
}
body .kpi-sub {
  font-size: 12px !important;
  color: var(--ink-muted) !important;
  margin-top: .35rem !important;
  font-weight: 400 !important;
  letter-spacing: 0;
}

body .kpi-blue   .kpi-val { color: var(--brand) !important; }
body .kpi-purple .kpi-val { color: var(--gold-deep) !important; }
body .kpi-green  .kpi-val { color: var(--success) !important; }
body .kpi-red    .kpi-val { color: var(--danger) !important; }
body .kpi-amber  .kpi-val { color: var(--warning) !important; }
body .kpi-gray   .kpi-val { color: var(--neutral) !important; }

body .kpi.kpi-blue::before,
body .kpi.kpi-red::before,
body .kpi.kpi-green::before,
body .kpi.kpi-amber::before,
body .kpi.kpi-purple::before,
body .kpi.kpi-gray::before { display: none !important; }

/* HERO Position Nette — full-width, ink+gold accent (premium signature) */
body .kpi.kpi-hero,
body .kpi-hero {
  grid-column: 1 / -1 !important;
  background: linear-gradient(135deg, var(--ink) 0%, #1f2229 100%) !important;
  color: var(--bg) !important;
  border: none !important;
  border-top: 1px solid var(--line) !important;
  border-radius: 0 !important;
  text-align: center !important;
  padding: 2.4rem 2rem !important;
  position: relative;
}
body .kpi.kpi-hero::before,
body .kpi-hero::before { display: none !important; }
body .kpi.kpi-hero::after,
body .kpi-hero::after {
  content: '';
  position: absolute;
  left: 50%; bottom: 1.4rem;
  transform: translateX(-50%);
  width: 60px; height: 2px;
  background: var(--gold);
}
body .kpi-hero .kpi-lbl,
body .kpi.kpi-hero .kpi-lbl {
  color: rgba(255,255,255,0.55) !important;
  letter-spacing: .18em !important;
  font-size: 11px !important;
  margin-bottom: .8rem !important;
}
body .kpi-hero .kpi-val,
body .kpi.kpi-hero .kpi-val {
  color: var(--gold) !important;
  font-family: var(--serif) !important;
  font-size: 56px !important;
  font-weight: 400 !important;
  letter-spacing: -0.025em !important;
  line-height: 1.05 !important;
}
body .kpi-hero .kpi-sub,
body .kpi.kpi-hero .kpi-sub {
  color: rgba(255,255,255,0.45) !important;
  margin-top: .6rem !important;
  font-size: 12px !important;
  letter-spacing: .04em;
  text-transform: uppercase;
}
body .kpi-hero.danger,
body .kpi.kpi-hero.danger {
  background: linear-gradient(135deg, #2a1814 0%, #3d1f18 100%) !important;
}
body .kpi-hero.danger .kpi-val,
body .kpi.kpi-hero.danger .kpi-val { color: #d77565 !important; }

/* ─── Card variants (used by routes/admin templates) ────────────────────── */
body .card-header {
  padding: .85rem 1.2rem !important;
  border-bottom: 1px solid var(--line) !important;
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
}
body .card-title {
  font-family: var(--serif) !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
  letter-spacing: -0.01em;
}
body .card-subtitle {
  font-size: 12px;
  color: var(--ink-muted);
  margin-top: 2px;
}
body .card-body { padding: 1.2rem !important; }
body .card-body-flush { padding: 0 !important; }

/* ─── Topbar (used by routes/views templates) ───────────────────────────── */
body .topbar {
  background: var(--surface) !important;
  border-bottom: 1px solid var(--line) !important;
  padding: .85rem 1.75rem !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  flex-wrap: wrap;
}
body .topbar-title {
  font-family: var(--serif) !important;
  font-size: 17px !important;
  font-weight: 500 !important;
  color: var(--ink) !important;
}
body .topbar-sub {
  font-size: 12px;
  color: var(--ink-muted);
}

/* ─── Utility classes ───────────────────────────────────────────────────── */
.text-mono { font-family: var(--mono) !important; }
.text-num  { font-variant-numeric: tabular-nums !important; }
.text-success { color: var(--success) !important; font-weight: 500; }
.text-danger  { color: var(--danger) !important; font-weight: 500; }
.text-muted   { color: var(--ink-muted) !important; }
.text-soft    { color: var(--ink-soft) !important; }
.text-right   { text-align: right; }
.text-center  { text-align: center; }
.font-serif   { font-family: var(--serif) !important; }
.font-sans    { font-family: var(--sans) !important; }
.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ─── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
  body .main { padding: 1.6rem 1.8rem 2.5rem !important; }
  body .page-header h1 { font-size: 26px !important; }
  body .kpi { padding: 1.1rem 1.2rem !important; }
  body .kpi .k-value { font-size: 22px !important; }
  body .kpi-val { font-size: 22px !important; }
}
@media (max-width: 768px) {
  body { display: block !important; }
  body .sidebar, body .injected-sidebar {
    position: relative !important; width: 100% !important;
    min-height: auto !important;
    flex-direction: row !important; overflow-x: auto;
  }
  body .main { padding: 1.2rem !important; margin-left: 0 !important; }
  body .kpi-row { grid-template-columns: 1fr 1fr !important; }
  body .kpi { border-right: 1px solid var(--line) !important; border-bottom: 1px solid var(--line); }
}

/* ─── Print ─────────────────────────────────────────────────────────────── */
@media print {
  body .sidebar, body .injected-sidebar, body .topbar, body .sb-toggle { display: none !important; }
  body .main { padding: 0 !important; }
  body { background: white !important; }
}