/* SelectHQ huisstijl -- casco en primitieven.
   Bron: SelectHQ_Design_System_v1.0.md (hoofdstuk 2, 3, 4, 5, 7, 8, 9, 10, 11,
   12, 14, 16, 29, 30, 35) EN reference-overview-dark.png. Deze bladzijde staat
   LOS van app.css: de bestaande tabs draaien nog op hun eigen stijl tot ze een
   voor een overgaan.

   RONDE 1b -- DE REFERENTIE IS LEIDEND. Waar de png en het .md elkaar
   tegenspreken wint de png (besluit David 09-09); het .md wint alleen bij
   contrast (AA) en bij de inhoudsregels. Alle maten hieronder komen uit een
   pixelmeting op die png, gedeeld door 1,1611 -- want de png is een ontwerp van
   1440 breed, uitgeschreven op 1672. Dat die schaal klopt blijkt uit drie
   onafhankelijke maten: zijbalk 261/1,1611 = 225 (regel: 220), paginamarge
   39/1,1611 = 34 (regel: 32) en de labelhoogte 7,8 -> 11 px letter (regel: 11).

   DRIE REGELS DIE ALLES STUREN:
   - goud is een accent, nooit een vlak (logo, actieve stand, eigen rij, korte
     verticale streep, grafieklijn, kleine iconen);
   - kaarten zijn plat: radius 12, 1 px rand, GEEN schaduw -- de gouden gloed op
     de bovenrand doet het werk dat een schaduw niet mag doen;
   - donker en licht zijn twee volwaardige producten, geen omkering. */

/* ============================================================ 2. tokens */
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 16px;
  --space-4: 24px;
  --space-5: 32px;
  --space-6: 48px;

  --radius-card: 12px;
  --radius-control: 10px;
  --radius-pill: 999px;

  --sidebar-width: 208px;
  --page-padding: 32px;
  --mobile-padding: 16px;

  /* Gemeten op de referentie: kaartvak 120 px hoog, kaartvulling 20 px,
     rasterkier 16 px, tabelrij 30 px (ranglijst) en 22 px (dichte lijst). */
  --kaart-vulling: 18px;
  --kaart-kier: 14px;

  --transition-fast: 140ms ease-out;
  --transition-chart: 220ms ease-out;

  --font-titel: "Archivo Black", Impact, sans-serif;
  --font-ui: "Outfit", system-ui, -apple-system, sans-serif;
  /* 14-09-2026: de app draagt overal dezelfde letter. Zie app.css. */
  --font-cijfer: "Outfit", system-ui, -apple-system, sans-serif;
}

:root, :root[data-thema="donker"] {
  --bg-canvas: #111511;
  --bg-sidebar: #141814;
  --bg-surface: #1B1F1B;
  --bg-surface-strong: #20241F;
  --bg-hover: #252A24;

  --text-primary: #F7F7F4;
  --text-secondary: #BFC5BE;
  --text-muted: #8F9790;

  --border: #343A33;
  --border-soft: rgba(247, 247, 244, .08);
  --gridline: rgba(247, 247, 244, .11);

  --gold: #E8A820;
  --gold-dark: #B98A18;
  --gold-soft: rgba(232, 168, 32, .10);
  --gold-border: rgba(232, 168, 32, .42);

  --success: #39C873;
  --danger: #E05D5D;
  --warning: #D6A13A;
  --info: #5A9FD4;

  /* De gouden gloed op de bovenrand van een kaart. Gemeten: bovenrand
     (48,54,50) tegen (46,50,44) opzij en (38,42,39) onderaan. */
  --kaartrand-boven: rgba(232, 168, 32, .62);
  --kaartglans: rgba(247, 247, 244, .022);
  /* HALF DOORZICHTIG, zodat de lichtval van de pagina door de kaart heen
     loopt. Dekkend zou elke kaart even donker zijn, waar hij ook staat. */
  --kaartvulling: rgba(247, 247, 244, .034);
}

:root[data-thema="licht"] {
  --bg-canvas: #F7F5EF;
  --bg-sidebar: #FAF8F2;
  --bg-surface: #FFFFFF;
  --bg-surface-strong: #FAFAF7;
  --bg-hover: #F0F1EC;

  --text-primary: #171A17;
  --text-secondary: #5F675F;
  /* AFWIJKING VAN HOOFDSTUK 2.2, met reden. Het document geeft #899087, maar
     dat haalt op wit 3,2:1 en hoofdstuk 32 eist WCAG AA (4,5:1) voor tekst.
     Labels, hulpteksten en tabelkoppen draaien allemaal op deze kleur, dus dat
     is geen randgeval. #676E65 haalt 4,6:1 en blijft dezelfde koele grijstint. */
  --text-muted: #676E65;

  --border: #DDE1DA;
  --border-soft: rgba(23, 26, 23, .08);
  --gridline: rgba(23, 26, 23, .10);

  --gold: #E8A820;
  --gold-dark: #B98A18;
  --gold-soft: rgba(232, 168, 32, .09);
  --gold-border: rgba(185, 138, 24, .42);

  --success: #278F55;
  --danger: #C84848;
  --warning: #A9771F;
  --info: #3F7CA6;

  /* Zelfde opbouw, zachter: in licht mag de gloed niet gaan glimmen. */
  --kaartrand-boven: rgba(185, 138, 24, .40);
  --kaartglans: rgba(23, 26, 23, .014);
  /* In licht laat de kaart de lichtbanen bijna een op een door: gemeten
     verschil kaart 243-249 tegen schil 243-250. */
  --kaartvulling: rgba(255, 255, 255, .30);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-primary);
  background: var(--bg-canvas);
  -webkit-font-smoothing: antialiased;
}

/* ====================================================== AppShell (4.2) */
/* DE SCHIL IS NIET EGAAL. Gemeten op de referentie loopt de achtergrond van
   (17,21,18) aan de randen naar (23,29,26) rechtsboven: een brede, zachte
   lichtval. Eén zwakke radiaal gaf een vlakke lap; deze twee samen geven de
   diepte die in ronde 1 ontbrak. De waas zit ALLEEN in de schil, nooit in een
   kaart, en is zo zwak dat weghalen de leesbaarheid niet verandert (2.1). */
.app-shell {
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  min-height: 100vh;
  background:
    radial-gradient(22% 26% at 62% -6%, rgba(104, 148, 118, .30), transparent 72%),
    radial-gradient(52% 62% at 0% 106%, rgba(0, 0, 0, .48), transparent 74%),
    linear-gradient(90deg,
      rgba(150, 194, 168, 0) 0%,
      rgba(150, 194, 168, .008) 40%,
      rgba(150, 194, 168, .016) 78%,
      rgba(150, 194, 168, .022) 100%),
    var(--bg-canvas);
  background-attachment: fixed;
}
/* MIN-WIDTH 0 op de kolommen van het raster. Zonder deze regel krijgt een
   grid-item min-width:auto en groeit het mee met zijn breedste inhoud -- de
   tabel duwde de hele pagina dan 21 px voorbij de 390 px en de telefoon kreeg
   een horizontale schuifbalk. */
.app-shell > * { min-width: 0; }

/* LICHT IS GEEN OMKERING. De lichte referentie heeft geen hoeklamp maar
   schuine, zachte banen van linksboven naar rechtsonder -- zonlicht door een
   gordijn. Gemeten loopt de helderheid daar tussen 243 en 250: het verschil is
   zeven niveaus, dus de banen moeten heel laag staan. */
:root[data-thema="licht"] .app-shell {
  background:
    linear-gradient(118deg,
      rgba(255, 255, 255, .30) 0%, rgba(255, 255, 255, 0) 20%,
      rgba(255, 253, 244, .22) 33%, rgba(255, 255, 255, 0) 46%,
      rgba(255, 252, 240, .16) 58%, rgba(255, 255, 255, 0) 72%),
    linear-gradient(96deg,
      rgba(255, 255, 255, .34) 0%,
      rgba(255, 255, 255, .10) 38%,
      rgba(255, 255, 255, 0) 72%),
    linear-gradient(176deg,
      rgba(255, 255, 255, .40) 0%,
      rgba(255, 255, 255, .17) 40%,
      rgba(255, 255, 255, 0) 66%,
      rgba(255, 255, 255, 0) 100%),
    var(--bg-canvas);
  background-attachment: fixed;
}

/* ============================================ volledige achtergrond (aan/uit)
   Het beeld staat als ONDERSTE laag, met daarboven een egale demping en
   daarboven de gewone lichtval. Zo blijft de schil dezelfde kleur houden en
   voegt de foto alleen diepte toe. Uit staat er precies wat er eerst stond. */
:root[data-achtergrond="aan"] .app-shell {
  background:
    /* GEEN eigen lichtval bovenop de foto: het beeld brengt zijn eigen licht
       mee, en de radialen maakten de hoeken dubbel donker. */
    linear-gradient(rgba(17, 21, 17, .16), rgba(17, 21, 17, .16)),
    url("achtergrond-donker-v3.png") center center / cover no-repeat,
    var(--bg-canvas);
  background-attachment: fixed;
}
:root[data-thema="licht"][data-achtergrond="aan"] .app-shell {
  background:
    linear-gradient(176deg, rgba(255, 255, 255, .42), rgba(255, 255, 255, 0) 60%),
    linear-gradient(rgba(247, 245, 239, .18), rgba(247, 245, 239, .18)),
    url("achtergrond-licht-v2.png") center center / cover no-repeat,
    var(--bg-canvas);
  background-attachment: fixed;
}
/* De zijbalk is anders dekkend en zou het beeld daar afsnijden. */
:root[data-achtergrond="aan"] .sidebar {
  background: rgba(20, 24, 20, .43);
}
:root[data-thema="licht"][data-achtergrond="aan"] .sidebar {
  background: rgba(250, 248, 242, .62);
}
/* GEEN eigen kaartkleur als het beeld aan staat: op het volle beeld is de
   kaart daar een witte sluier van 1,5 a 2,0%, precies dezelfde dunne laag
   als zonder achtergrond. Gemeten met de inkt onzichtbaar is de ondergrond
   onder elke kaart donker (mediaan 24, lichtste 2% op 61); een donkere
   kaartlaag levert 0,2 contrastpunt op en kost verhouding. */

/* ======================================================= Sidebar (6, 7) */
.sidebar {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  padding: var(--space-4) 12px var(--space-2);
  gap: var(--space-4);
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* DE ILLUSTRATIE ONDERIN DE ZIJBALK. Twee aangeleverde beelden van 994x1582
   met een doorzichtige bovenkant: de tekening begint pas op 56% (donker) en
   53% (licht) van boven. Op 220 px breed wordt het beeld 350 px hoog, dus de
   bergen en de gouden lijn staan in de onderste ~155 px.

   Hij staat met zijn voet op de voet van de zijbalk, is precies zo breed als de
   zijbalk, en wordt naar boven weggemaskeerd zodat de bergtop en het begin van
   de gouden lijn in de ondergrond oplossen. Hij ligt ACHTER de inhoud
   (z-index 0) en vangt geen muis; logo, menu en profiel staan erbovenop.

   Dit verving mijn eigen getekende veeg uit ronde 1b -- die was een benadering
   van precies deze lijn. */
.zijbalk-beeld {
  flex: 1 1 auto;
  min-height: 0;
  /* De zijbalk heeft 12 px binnenmarge; het beeld moet tot de randen lopen. */
  margin: 0 -12px;
  background: url("zijbalk-donker.png") no-repeat left 0 bottom -34px / 100% auto;
  -webkit-mask-image: linear-gradient(to top, #000 52%, rgba(0, 0, 0, .5) 76%, transparent 96%);
  mask-image: linear-gradient(to top, #000 52%, rgba(0, 0, 0, .5) 76%, transparent 96%);
  pointer-events: none;
}
:root[data-thema="licht"] .zijbalk-beeld {
  background-image: url("zijbalk-licht.png");
}

/* HET LOGO IS EEN BESTAND en geen letterwerk (6). Breedte 132-150 px, minstens
   20 px lucht links en rechts. */
.sidebar-merk { padding: 0 var(--space-2) 0; }
.sidebar-merk img { width: 140px; height: auto; display: block; }

.nav { display: flex; flex-direction: column; gap: var(--space-1); }
.nav-item {
  display: flex;
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0 14px;
  border-radius: var(--radius-control);
  border: 1px solid transparent;
  color: var(--text-secondary);
  font: 500 14px/1 var(--font-ui);
  text-decoration: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.nav-item:hover { color: var(--text-primary); background: var(--bg-hover); }
.nav-item .ico { width: 19px; height: 19px; flex: 0 0 19px; }
/* Actieve stand: gouden rand PLUS een waas die van links naar rechts uitdooft,
   en de 3 px streep (7.2). Gemeten vulling (43,44,28) -- de 7,5% uit ronde 1
   verdween tegen de zijbalk, vandaar de zwaardere waas. Geen gevuld goud blok. */
.nav-item.is-actief {
  color: var(--gold);
  background:
    linear-gradient(90deg, rgba(232, 168, 32, .17), rgba(232, 168, 32, .05) 78%,
      rgba(232, 168, 32, .02));
  border-color: rgba(232, 168, 32, .40);
}
.nav-item.is-actief::before {
  content: "";
  position: absolute;
  left: -1px;
  top: 8px;
  width: 3px;
  height: 26px;
  border-radius: var(--radius-pill);
  background: var(--gold);
}
/* De drie secundaire pagina's staan er WEL maar zijn nog niet te openen. Ze
   weghalen zou de navigatie later stilletjes laten verspringen.
   GEEN opacity hier. Die verlaagt het contrast nog eens bovenop de al gedempte
   kleur, en dan zakt de tekst door de AA-grens van hoofdstuk 32. Dat het item
   uit staat, blijkt uit de kleur en uit aria-disabled, niet uit vervaging. */
.nav-item.is-uit {
  color: var(--text-muted);
  cursor: default;
}
.nav-item.is-uit:hover { background: transparent; color: var(--text-muted); }
/* IN LICHT KAN GOUD OP WIT GEEN AA HALEN -- #E8A820 komt op een lichte
   ondergrond niet boven 2,5:1. Hoofdstuk 29 zegt zelf dat goud in licht
   ingetogener wordt; de actieve stand leunt daar dus op de gouden STREEP, de
   gouden waas en het gewicht, en de tekst blijft leesbaar zwart. Hoofdstuk 32
   vraagt sowieso om niet alleen kleur als statusdrager. */
:root[data-thema="licht"] .nav-item.is-actief { color: var(--text-primary); }
:root[data-thema="licht"] .nav-item.is-actief .ico { color: var(--gold-dark); }
.nav-streep {
  height: 1px;
  background: var(--border);
  margin: var(--space-2) 14px;
}

.sidebar-profiel {
  margin-top: auto;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px var(--space-2) 14px 12px;
  border-top: 1px solid var(--border);
}
.sidebar-profiel .tekst { flex: 1 1 auto; min-width: 0; }
.bol {
  width: 34px; height: 34px; flex: 0 0 34px;
  border-radius: var(--radius-pill);
  display: grid; place-items: center;
  background: var(--bg-hover);
  border: 1px solid var(--border);
  font: 500 13px/1 var(--font-ui);
  color: var(--text-primary);
}
.sidebar-profiel .naam { font: 500 13px/1.2 var(--font-ui); }
.sidebar-profiel .rol { font: 400 12px/1.3 var(--font-ui); color: var(--text-muted); }
.knop-ico {
  width: 30px; height: 30px; flex: 0 0 30px;
  display: grid; place-items: center;
  border: 0; background: transparent; cursor: pointer;
  border-radius: var(--radius-control);
  color: var(--text-muted);
}
.knop-ico:hover { color: var(--text-primary); background: var(--bg-hover); }
.knop-ico .ico { width: 18px; height: 18px; }
.sidebar-uit {
  display: flex; align-items: center; gap: 14px;
  height: 42px; padding: 0 14px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-secondary);
  font: 400 13px/1 var(--font-ui);
  border-radius: var(--radius-control);
}
.sidebar-uit:hover { color: var(--text-primary); background: var(--bg-hover); }
.sidebar-uit .ico { width: 19px; height: 19px; }

/* ============================================ PageHeader (4.3, 19, 20) */
.main { min-width: 0; padding: 22px 24px var(--space-4) 29px; max-width: none; }
/* DE HAARLIJN ONDER DE TITELBALK.

   TOT 23-09-2026 was dit een verloop: doorzichtig tot 17% en uitdovend naar
   alpha .16 aan het eind, als kopie van de referentiebeelden. Op het scherm
   pakte dat anders uit dan op de referentie. Gemeten in de proefopstelling
   (venster 1440, inhoudsvlak x=237..1416, 1179 px breed): de lijn was pas
   helder vanaf x=430 en al gedoofd bij x=1042 -- 193 px te laat begonnen en
   374 px te vroeg opgehouden, op alle zes de tabs hetzelfde. Daardoor leek de
   kop niet uitgelijnd met de blokken eronder, die wel van 237 tot 1416 lopen.

   BESLUIT DAVID 23-09-2026: de lijn loopt van rand tot rand van het
   inhoudsvlak, zonder in- of uitdoven, op alle tabs gelijk. Dus een egale
   rand in plaats van een border-image. De tint is die van het midden van het
   oude verloop (alpha .56), zodat de lijn even zwaar oogt als voorheen daar
   waar hij wel zichtbaar was.

   LET OP: dit is de huisstijl, geen prototype-bestand. Elke pagina die
   selecthq.css laadt, krijgt deze lijn. Terugdraaien = deze regel terug naar
   border-image; de terugval van die dag staat bij de overige terugvallen. */
.page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-bottom: 3px;
  margin-bottom: 15px;
  border-bottom: 1px solid rgba(232, 168, 32, .56);
  border-image: none;
}
.page-titel { font-family: var(--font-titel); font-size: 36px; line-height: 1.06; margin: 0; }
.page-sub { font: 400 14px/1.3 var(--font-ui); color: var(--text-muted); margin: 4px 0 0; }
.page-acties { display: flex; align-items: center; gap: 12px; }
.knop-rond {
  width: 38px; height: 38px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  display: grid; place-items: center;
  cursor: pointer;
  position: relative;
  transition: border-color var(--transition-fast), color var(--transition-fast);
}
.knop-rond:hover { border-color: var(--gold-border); color: var(--text-primary); }
.knop-rond .ico { width: 18px; height: 18px; }
/* Het gouden stipje op de bel: een ongelezen melding, precies zoals de
   referentie. Een punt, geen getal -- het casco telt niets. */
.knop-rond .stip {
  position: absolute; top: 7px; right: 8px;
  width: 6px; height: 6px; border-radius: var(--radius-pill);
  background: var(--gold);
}

/* ======================================================= Pills (9) */
.pill-balk {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: 13px;
}
.pill-rij { display: flex; gap: 10px; flex-wrap: wrap; }
.pill {
  height: 36px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-secondary);
  font: 500 13px/1 var(--font-ui);
  cursor: pointer;
  transition: all var(--transition-fast);
}
.pill:hover { background: var(--bg-hover); border-color: var(--text-muted); }
.pill.is-actief {
  color: var(--gold);
  border-color: var(--gold);
  background: rgba(232, 168, 32, .09);
}
.datumbereik {
  display: flex; align-items: center; gap: 10px;
  color: var(--text-secondary);
  font: 400 13px/1 var(--font-ui);
  white-space: nowrap;
}
.datumbereik .ico { width: 17px; height: 17px; color: var(--text-muted); }

/* ==================================================== Kaart (4.4, 14) */
/* KAART: iets lichter en warmer dan de schil, met een dunne gouden gloed op de
   BOVENrand die naar de zijkanten uitdooft. Twee achtergrondlagen doen dat
   zonder schaduw: de eerste loopt tot de padding-box (de vulling met een glans
   bovenin), de tweede tot de border-box (de rand zelf). De rand blijft daarmee
   1 px en box-shadow blijft none -- allebei toetsbaar. */
.kaart, .panel, .kpi {
  position: relative;
  background-color: var(--kaartvulling);
  background-image:
    radial-gradient(150% 78% at 0% 0%, rgba(232, 168, 32, .065), transparent 44%),
    linear-gradient(180deg, var(--kaartglans), transparent 44%);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--kaart-vulling);
}
/* De gouden lichtvang op de linkerrand. Een streepje van 1 px OP de rand
   (left:-1px), 76 px lang, van boven fel naar beneden weg. Geen box-shadow en
   geen glow-filter: het is een lijn, net als op de referentie. */
.kaart::before, .panel::before, .kpi::before {
  content: "";
  position: absolute;
  left: -1px; top: 11px;
  width: 1px; height: 76px;
  border-radius: var(--radius-pill);
  background: linear-gradient(180deg,
    var(--kaartrand-boven) 0%, rgba(232, 168, 32, .34) 34%,
    rgba(232, 168, 32, .10) 68%, transparent 100%);
  pointer-events: none;
}
/* SectionHeader met de korte gouden streep -- het SelectHQ-motief (5). Niet op
   elke kaart; alleen waar hij iets verankert. */
.sectie-kop {
  display: flex; align-items: flex-start; gap: 12px;
  margin-bottom: 4px;
}
.sectie-kop .rek { flex: 1 1 auto; min-width: 0; }
.select-accent {
  width: 3px; height: 26px; flex: 0 0 3px;
  border-radius: var(--radius-pill);
  background: var(--gold);
  margin-top: 1px;
}
.sectie-titel { font: 500 16px/1.2 var(--font-ui); margin: 0; }
.sectie-uitleg { font: 400 13px/1.4 var(--font-ui); color: var(--text-muted); margin: 3px 0 0; }
.sectie-link {
  display: inline-flex; align-items: center; gap: 8px;
  border: 0; background: transparent; cursor: pointer;
  color: var(--gold);
  font: 500 13px/1 var(--font-ui);
}
:root[data-thema="licht"] .sectie-link { color: var(--gold-dark); }
.sectie-link .ico { width: 16px; height: 16px; }

/* ==================================================== KpiCard (11) */
.kpi-rij {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--kaart-kier);
  margin-bottom: var(--kaart-kier);
}
.kpi {
  min-height: 120px;
  display: flex; flex-direction: column;
  position: relative;
}
.kpi-label {
  font: 500 11px/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
}
.kpi-waarde { font-family: var(--font-titel); font-size: 36px; line-height: 1; margin: 10px 0 6px; }
.kpi-voet { font: 400 13px/1.4 var(--font-ui); color: var(--text-muted); }
/* Icoontegel met gouden waas, gemeten (48,47,31). De 7% uit ronde 1 was op het
   scherm niet te zien. */
.icoon-tegel {
  position: absolute; top: var(--kaart-vulling); right: var(--kaart-vulling);
  width: 40px; height: 40px;
  border-radius: var(--radius-control);
  display: grid; place-items: center;
  background:
    radial-gradient(85% 85% at 50% 15%, rgba(232, 168, 32, .22), transparent 74%),
    rgba(232, 168, 32, .10);
  border: 1px solid rgba(232, 168, 32, .34);
  color: var(--gold);
}
:root[data-thema="licht"] .icoon-tegel { color: var(--gold-dark); }
.icoon-tegel .ico { width: 21px; height: 21px; }

/* MetricDelta: groen beter, rood slechter, grijs gelijk (11, 2.2). Nooit goud
   voor een richting -- goud zegt "belangrijk", niet "goed". */
.delta { font: 500 14px/1 var(--font-ui); margin-left: 10px; vertical-align: 4px; }
.delta.is-beter { color: var(--success); }
.delta.is-slechter { color: var(--danger); }
.delta.is-gelijk { color: var(--text-muted); }

/* ==================================================== Grafiek (13) */
.grafiek { display: block; width: 100%; height: auto; }
.grafiek .as { font: 400 11px/1 var(--font-ui); fill: var(--text-muted); }
.grafiek .raster { stroke: var(--gridline); stroke-width: 1; stroke-dasharray: 2 5; }
.grafiek .lijn { stroke: var(--gold); stroke-width: 2.6; fill: none;
  stroke-linejoin: round; stroke-linecap: round; }
.grafiek .punt { fill: var(--gold); }
.grafiek .basis { stroke: var(--border); stroke-width: 1; }

/* ==================================================== DataTable (12) */
.tabelwikkel { overflow-x: auto; }
.tabel { width: 100%; border-collapse: collapse; }
.tabel th {
  font: 500 11px/1 var(--font-ui);
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--text-muted);
  text-align: left;
  padding: 9px 12px 9px 0;
  background: var(--bg-surface-strong);
  border-bottom: 1px solid var(--border);
}
.tabel th:first-child, .tabel td:first-child { padding-left: 12px; }
.tabel th:last-child, .tabel td:last-child { padding-right: 12px; }
.tabel td {
  padding: 0 12px 0 0;
  height: 30px;
  white-space: nowrap;
  border-bottom: 1px solid var(--border-soft);
  font: 400 13px/1.4 var(--font-ui);
}
/* DE DICHTE VARIANT. Op de referentie staat de lijst "Laatste sales" op 21 px
   per rij, de ranglijst ernaast op 29 px. Dat verschil is geen slordigheid maar
   het verschil tussen een logboek en een klassement, dus het staat er allebei
   in. 22 px is hier de dichte rij. */
.tabel.is-dicht td { height: 21px; font-size: 12px; }
.tabel.is-dicht th { padding: 5px 12px 5px 0; }
.tabel tr:last-child td { border-bottom: 0; }
.tabel .num, .tabel th.num { text-align: right; }
/* Cijferkolommen in JetBrains Mono met vaste cijferbreedte (3.3, 12.1).
   LET OP DE SELECTOR: `.tabel td` hierboven is specifieker dan een kale
   `.numeriek` EN gebruikt de font-korthand, die font-family meeneemt. Een
   losse klasse verliest daar dus van en de cijfers stonden gewoon in Outfit. */
.numeriek, .tabel td.numeriek, .tabel th.numeriek {
  font-family: var(--font-cijfer);
  font-variant-numeric: tabular-nums;
}
/* CurrentUserRow: gouden waas over de rij plus 3 px goud links (12.1). Op de
   referentie loopt daar ook een gouden rand omheen; die is hier de waas plus de
   streep, want een rand op een tabelrij springt bij het schuiven los. */
/* Op beide referenties heeft de eigen rij een gouden RAND rondom, niet alleen
   een waas. Een echte border zou de rijhoogte veranderen en bij het schuiven
   losspringen; met inset-schaduwen ligt de rand binnen de cel en blijft de rij
   precies even hoog. Inset telt niet als slagschaduw (die eis staat in de
   toets en blijft gelden). */
.rij-ik { background: rgba(232, 168, 32, .13); }
.rij-ik td { color: var(--gold); font-weight: 500;
  box-shadow: inset 0 1px 0 0 var(--gold-border), inset 0 -1px 0 0 var(--gold-border); }
:root[data-thema="licht"] .rij-ik td { color: var(--text-primary); }
.rij-ik td:first-child {
  box-shadow: inset 3px 0 0 0 var(--gold),
    inset 0 1px 0 0 var(--gold-border), inset 0 -1px 0 0 var(--gold-border);
}
.rij-ik td:last-child {
  box-shadow: inset -1px 0 0 0 var(--gold-border),
    inset 0 1px 0 0 var(--gold-border), inset 0 -1px 0 0 var(--gold-border);
}

/* ==================================================== Duo-raster */
.duo { display: grid; grid-template-columns: 1.28fr 1fr; gap: var(--kaart-kier); }
.duo > * { min-width: 0; }

/* ==================================================== Badges (16) */
.badge {
  display: inline-flex; align-items: center;
  height: 25px; padding: 0 10px;
  border-radius: var(--radius-pill);
  font: 500 12px/1 var(--font-ui);
}
.badge.is-goed { color: var(--success); background: rgba(57, 200, 115, .10); }
.badge.is-fout { color: var(--danger); background: rgba(224, 93, 93, .10); }
.badge.is-neutraal { color: var(--text-secondary); background: var(--bg-hover); }
.badge.is-omlijnd { color: var(--text-muted); background: transparent; border: 1px solid var(--border); }

/* ==================================================== Knoppen (10) */
.knop {
  height: 38px; padding: 0 16px;
  border-radius: var(--radius-control);
  font: 500 13px/1 var(--font-ui);
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-surface-strong);
  color: var(--text-primary);
  transition: all var(--transition-fast);
}
.knop:hover { background: var(--bg-hover); }
.knop.is-primair { background: var(--gold); border-color: var(--gold); color: #1E201D; }
.knop.is-primair:hover { background: var(--gold-dark); border-color: var(--gold-dark); }
.knop.is-spook { background: transparent; border-color: transparent; color: var(--text-secondary); }
.knop.is-spook:hover { border-color: var(--border); color: var(--text-primary); }

/* ==================================================== Velden (15) */
.veld-label { display: block; font: 500 12px/1 var(--font-ui); color: var(--text-muted); margin-bottom: 6px; }
.veld, .keuze {
  height: 38px; width: 100%;
  padding: 0 12px;
  border-radius: var(--radius-control);
  border: 1px solid var(--border);
  background: var(--bg-surface-strong);
  color: var(--text-primary);
  font: 400 13px/1 var(--font-ui);
}
.keuze {
  width: auto; min-width: 138px;
  appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238F9790' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 16px 16px;
  cursor: pointer;
}
.veld:focus, .keuze:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(232, 168, 32, .22);
}

/* ==================================================== Leegstaat (18) */
.leegstaat { padding: var(--space-4) 0; color: var(--text-muted); }
.leegstaat-kop { font: 500 15px/1.3 var(--font-ui); color: var(--text-primary); margin-bottom: 4px; }

/* ==================================================== MobileNav (30) */
.mobiel-balk { display: none; }

@media (max-width: 1180px) {
  .duo { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  .app-shell { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .main { padding: var(--mobile-padding) var(--mobile-padding) 84px; }
  .page-titel { font-size: 30px; }
  .page-header { flex-direction: column; gap: var(--space-3); }
  /* De bediening staat al in de mobiele kop; twee keer is een fout, geen keuze. */
  .page-header .page-acties { display: none; }
  .kpi-rij { grid-template-columns: 1fr 1fr; gap: 12px; }
  .kpi { min-height: 110px; padding: var(--space-3); }
  .kpi-waarde { font-size: 33px; margin: 12px 0 8px; }
  .icoon-tegel { top: var(--space-3); right: var(--space-3); width: 34px; height: 34px; }
  .icoon-tegel .ico { width: 17px; height: 17px; }
  .panel, .kaart { padding: var(--mobile-padding); }
  .pill-balk { flex-direction: column; align-items: flex-start; gap: 10px; }
  /* Pillen op een schuifrij, niet krimpen tot de tekst knelt (9). */
  .pill-rij { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; width: 100%; }
  .pill { flex: 0 0 auto; }
  /* Op een telefoon gaat de dichte rij terug naar de gewone hoogte: 22 px is
     daar geen leesregel meer maar een streepje. */
  .tabel.is-dicht td { height: 30px; font-size: 13px; }

  .mobiel-kop {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--space-2);
    padding: 12px var(--mobile-padding);
    border-bottom: 1px solid var(--border);
    background: var(--bg-sidebar);
  }
  .mobiel-kop img { width: 100px; height: auto; display: block; }

  .mobiel-balk {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    position: fixed; left: 0; right: 0; bottom: 0;
    background: var(--bg-sidebar);
    border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
    z-index: 40;
  }
  .mobiel-item {
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    min-height: 56px; padding: 8px 2px;
    background: transparent; border: 0; cursor: pointer;
    color: var(--text-muted);
    font: 500 10px/1 var(--font-ui);
  }
  .mobiel-item .ico { width: 21px; height: 21px; }
  .mobiel-item.is-actief { color: var(--gold); }
}
@media (min-width: 901px) { .mobiel-kop { display: none; } }

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}