/* ── Tokens ─────────────────────────────────────────────────────────
   De reeks-kleuren zijn het gevalideerde categorische palet; ze halen de
   CVD-drempels (zie README).                                             */
:root {
  --grond:        #f4f5f7;
  --vlak:         #ffffff;
  --vlak-2:       #f7f8fa;
  --rand:         #dfe3e9;
  --rand-zacht:   #eaedf1;
  --tekst:        #161a20;
  --tekst-2:      #55606d;
  --tekst-3:      #6f7885;
  /* De huiskleur van notaris-joossens.be. --merk is het turkoois uit het
     logo zelf (#00b3c4) en wordt alleen als vlak gebruikt: het beeldmerk en
     accentlijnen. Als tekst haalt het maar 2,55:1 op wit, dus links, knoppen
     en focusranden nemen --klem, dezelfde tint een flink stuk donkerder:
     5,45:1 op wit, en witte tekst erop haalt hetzelfde. Dat is precies de
     waarde die het vorige blauw hier had. De grafiekreeks blijft ongewijzigd —
     die is als vlak gevalideerd, niet als tekst. */
  --merk:         #00b3c4;
  --klem:         #007580;

  --reeks-1: #2a78d6;
  --reeks-2: #eb6834;
  --reeks-3: #1baf7a;
  --reeks-4: #eda100;
  --reeks-5: #e87ba4;
  --reeks-6: #008300;
  --reeks-7: #4a3aa7;
  --reeks-8: #e34948;

  --goed:  #157a56;
  --let:   #94630a;
  --slecht:#c2332f;

  --raster: #e6e9ee;
  --zijbalk-b: 232px;
  --rond: 10px;
  --schaduw: 0 1px 2px rgba(16,24,40,.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  color-scheme: light;
  /* iOS blaast tekst op zodra je een telefoon kantelt; 100% houdt de maten
     zoals ze bedoeld zijn. De aanraakgloed van Android/iOS zetten we zachter:
     de eigen :hover- en :focus-stijlen doen dat werk al. */
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: rgba(0, 117, 128, .12);
}

body {
  font: 400 14px/1.5 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--grond);
  color: var(--tekst);
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
a:focus-visible, button:focus-visible, select:focus-visible {
  outline: 2px solid var(--klem); outline-offset: 2px; border-radius: 4px;
}

/* ── Raamwerk ──────────────────────────────────────────────────────── */
.app  { display: flex; min-height: 100vh; min-height: 100dvh; }
/* min-width:0 laat .main krimpen onder de breedte van zijn breedste tabel;
   zonder dit krijgt de hele pagina een horizontale scrollbalk. */
.main { margin-left: var(--zijbalk-b); flex: 1; min-width: 0; display: flex; flex-direction: column; }

.zijbalk {
  position: fixed; inset: 0 auto 0 0; width: var(--zijbalk-b);
  background: var(--vlak); border-right: 1px solid var(--rand);
  display: flex; flex-direction: column; padding: 20px 14px;
}
.zijbalk-lade { display: contents; }
.merk { display: block; margin-bottom: 22px; }
/* Het beeldmerk van de kantoorsite, als afbeelding. De hoogte volgt uit de
   breedte; height:auto houdt de balken in verhouding. */
.merk-logo { display: block; width: 104px; height: auto; }
.klem { color: var(--klem); }
.merk-sub { display: block; margin-top: 4px; font-size: .72rem; color: var(--tekst-2); line-height: 1.35; }
.merk-plaats { color: var(--tekst-3); }

.zijbalk-nav { display: flex; flex-direction: column; gap: 2px; flex: 1; min-height: 0; overflow-y: auto; }
.nav-kop {
  margin: 14px 0 4px; padding: 0 10px;
  font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tekst-3);
}
.zijbalk-nav > .nav-kop:first-child { margin-top: 0; }
.nav-link {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 10px; border-radius: 7px;
  font-size: .84rem; color: var(--tekst-2);
  transition: background .12s, color .12s;
}
.nav-link:hover { background: var(--vlak-2); color: var(--tekst); }
.nav-link.actief { background: color-mix(in srgb, var(--merk) 18%, transparent); color: var(--tekst); font-weight: 600; }
.nav-icoon { width: 15px; text-align: center; font-size: .85rem; opacity: .85; }

/* De menuknop verschijnt pas onder 860px; hier staat alleen hoe hij eruitziet. */
.menu-knop {
  display: none; align-items: center; justify-content: center; flex: none;
  width: 44px; height: 44px; padding: 0;
  font: inherit; font-size: 1.15rem; line-height: 1; cursor: pointer;
  color: var(--tekst-2); background: var(--vlak);
  border: 1px solid var(--rand); border-radius: 9px;
}
.menu-knop:hover { color: var(--tekst); background: var(--vlak-2); }
/* Terwijl de lade open staat scrollt de pagina eronder niet mee. */
html.menu-open, html.menu-open body { overflow: hidden; }

.zijbalk-voet {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--rand-zacht);
  display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 4px 7px;
  font-size: .72rem; color: var(--tekst-3);
}
.zijbalk-voet .afmelden { grid-column: 1 / -1; }
.stip { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--goed); flex: none; }

/* ── Topbalk ───────────────────────────────────────────────────────── */
.topbar {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 24px 26px 0;
}
.topbar-title { font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.topbar-sub { font-size: .82rem; color: var(--tekst-2); margin-top: 3px; }
.topbar-right { display: flex; align-items: center; gap: 10px; flex: none; }

.jaarkiezer { display: flex; align-items: center; gap: 7px; font-size: .78rem; color: var(--tekst-2); }
.jaarkiezer select {
  font: inherit; color: var(--tekst); background: var(--vlak); border: 1px solid var(--rand);
  border-radius: 7px; padding: 5px 9px;
}

.content { padding: 20px 26px 8px; display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.paginavoet {
  padding: 16px 26px 22px; margin-top: auto;
  font-size: .74rem; color: var(--tekst-3); border-top: 1px solid var(--rand-zacht);
}
.paginavoet a { color: var(--tekst-2); text-decoration: underline; text-underline-offset: 2px; }

/* ── Kaarten ───────────────────────────────────────────────────────── */
.kaart {
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--rond); box-shadow: var(--schaduw);
  padding: 16px 18px; min-width: 0;
}
.kaart-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.kaart-titel { font-size: .92rem; font-weight: 650; }
.kaart-noot { font-size: .74rem; color: var(--tekst-3); }

.rooster { display: grid; gap: 14px; }
/* min() in de minmax: zonder dat dwingt een kolom van 340px een houder van
   300px (een iPhone SE staand) tot horizontaal schuiven. */
.rooster-2 { grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); }
.rooster-3 { grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); }

.sectiekop {
  font-size: .66rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--tekst-3); margin: 4px 0 -6px;
}

/* ── Kerncijfers ───────────────────────────────────────────────────── */
.kpi-rooster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); gap: 12px; }
.kpi {
  background: var(--vlak); border: 1px solid var(--rand); border-radius: var(--rond);
  padding: 14px 16px; box-shadow: var(--schaduw);
}
.kpi-label { font-size: .74rem; color: var(--tekst-2); margin-bottom: 6px; }
.kpi-waarde { font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi-waarde.klein { font-size: 1.2rem; }
.kpi-sub { font-size: .74rem; color: var(--tekst-3); margin-top: 4px; }
.op { color: var(--goed); } .neer { color: var(--slecht); }

/* ── Tabellen ──────────────────────────────────────────────────────── */
/* Een brede tabel schuift horizontaal. De twee schaduwranden verschijnen
   alleen aan de kant waar nog inhoud zit: zo zie je op een telefoon dat er
   kolommen buiten beeld staan. background-attachment:local laat de dekkende
   verlopen meeschuiven en de schaduwen staan blijven. */
.tabel-omhulsel {
  overflow-x: auto;
  /* clip, niet auto: anders is dit ook verticaal een schuifdoos en kijkt de
     plakkende tabelkop naar deze doos in plaats van naar het venster. */
  overflow-y: clip;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  background:
    linear-gradient(to right, var(--vlak) 40%, transparent) left center / 26px 100% no-repeat,
    linear-gradient(to left,  var(--vlak) 40%, transparent) right center / 26px 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgba(16,24,40,.16), transparent) left center / 11px 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgba(16,24,40,.16), transparent) right center / 11px 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}

table.data { width: 100%; border-collapse: collapse; font-size: .82rem; }
table.data th, table.data td { padding: 8px 10px; text-align: left; white-space: nowrap; }
table.data th {
  font-size: .68rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase;
  color: var(--tekst-3); border-bottom: 1px solid var(--rand);
}
table.data td { border-bottom: 1px solid var(--rand-zacht); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover td { background: var(--vlak-2); }
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .naam { white-space: normal; min-width: 180px; }
table.data .dim { color: var(--tekst-2); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .78rem; }

/* Staafje ín een tabelcel: geeft verhoudingen zonder een tweede grafiek. */
.staafcel { display: flex; align-items: center; gap: 8px; min-width: 140px; }
.staaf { flex: 1; height: 6px; border-radius: 3px; background: var(--rand-zacht); overflow: hidden; }
.staaf > span { display: block; height: 100%; border-radius: 3px; background: var(--reeks-1); }

/* Hittetabel: de celkleur draagt de verhouding, het getal staat er gewoon in.
   De sterkte komt per cel binnen als --hit (0–60 %). Boven 60 % haalt de
   tekst geen 4,5:1 meer tegen de gemengde kleur. */
table.hittetabel { --hit-kleur: var(--reeks-1); }
table.hittetabel.traag { --hit-kleur: var(--reeks-4); }
table.hittetabel td.hit,
table.data.hittetabel tbody tr:hover td.hit {
  background: color-mix(in srgb, var(--hit-kleur) var(--hit, 0%), transparent);
}
table.hittetabel thead th { white-space: normal; vertical-align: bottom; line-height: 1.3; min-width: 64px; }
table.hittetabel thead th:first-child { min-width: 0; }
table.hittetabel tfoot td { border-top: 1px solid var(--rand); font-weight: 600; }

/* ── Grafieken ─────────────────────────────────────────────────────── */
.grafiek { position: relative; width: 100%; }
.grafiek canvas { max-width: 100%; }
.legende { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 10px; font-size: .76rem; color: var(--tekst-2); }
.legende span { display: inline-flex; align-items: center; gap: 6px; }
.legende i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }

/* ── Etiketten ─────────────────────────────────────────────────────── */
.tag {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: .7rem; font-weight: 600;
  background: var(--vlak-2); color: var(--tekst-2); border: 1px solid var(--rand);
}
.tag.goed  { color: var(--goed);  border-color: color-mix(in srgb, var(--goed) 40%, transparent);  background: color-mix(in srgb, var(--goed) 12%, transparent); }
.tag.let   { color: var(--let);   border-color: color-mix(in srgb, var(--let) 40%, transparent);   background: color-mix(in srgb, var(--let) 12%, transparent); }
.tag.slecht{ color: var(--slecht);border-color: color-mix(in srgb, var(--slecht) 40%, transparent);background: color-mix(in srgb, var(--slecht) 12%, transparent); }

.uitleg {
  font-size: .8rem; color: var(--tekst-2); line-height: 1.6;
  border-left: 2px solid var(--rand); padding-left: 12px;
}
.uitleg strong { color: var(--tekst); font-weight: 600; }

.lijstje { list-style: none; display: flex; flex-direction: column; gap: 9px; }
.lijstje li { display: flex; align-items: center; gap: 10px; font-size: .82rem; }
.lijstje .lbl { flex: none; width: 150px; color: var(--tekst-2); }
.lijstje .val { flex: none; width: 84px; text-align: right; font-variant-numeric: tabular-nums; }

details.tabelgroep { border: 1px solid var(--rand); border-radius: var(--rond); background: var(--vlak); }
details.tabelgroep + details.tabelgroep { margin-top: 10px; }
details.tabelgroep > summary {
  cursor: pointer; padding: 12px 16px; font-size: .86rem; font-weight: 600;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
details.tabelgroep > summary::-webkit-details-marker { display: none; }
details.tabelgroep > summary::after { content: '▾'; color: var(--tekst-3); font-size: .8rem; }
details.tabelgroep[open] > summary::after { content: '▴'; }
details.tabelgroep > summary .kaart-noot { font-weight: 400; }
.tabelgroep-lijf { padding: 0 8px 8px; }

.foutpagina { max-width: 520px; margin: 60px auto; text-align: center; }
.foutpagina h1 { font-size: 1.4rem; margin-bottom: 8px; }
.foutpagina p { color: var(--tekst-2); }

/* ── Aanmeldpagina ─────────────────────────────────────────────────── */
.aanmeldpagina {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh; min-height: 100dvh; padding: 24px;
}
.aanmeldkaart {
  width: 100%; max-width: 360px;
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: var(--rond); box-shadow: var(--schaduw);
  padding: 32px 28px;
}
.aanmeldkaart .merk-logo { width: 116px; margin-bottom: 18px; }
.aanmeld-titel { font-size: 1.05rem; font-weight: 650; }
.aanmeld-sub { font-size: .78rem; color: var(--tekst-2); margin-top: 2px; }

.aanmeld-form { display: flex; flex-direction: column; gap: 7px; margin-top: 24px; }
.aanmeld-form label {
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tekst-3);
}
.aanmeld-form input {
  font: inherit; color: var(--tekst); background: var(--vlak-2);
  border: 1px solid var(--rand); border-radius: 8px; padding: 10px 12px;
}
.aanmeld-form input:focus-visible { outline: 2px solid var(--klem); outline-offset: 1px; }
.aanmeld-form button {
  font: inherit; font-weight: 600; cursor: pointer; margin-top: 9px;
  color: #fff; background: var(--klem); border: 0; border-radius: 8px; padding: 10px 12px;
}
.aanmeld-form button:hover:not(:disabled) { filter: brightness(1.08); }
/* Na te veel mislukte pogingen staat de knop uit tot de wachttijd om is. */
.aanmeld-form button:disabled { background: var(--tekst-3); cursor: not-allowed; }
.aanmeld-fout { font-size: .78rem; color: var(--slecht); margin-top: 2px; }
.aanmeld-voet {
  margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--rand-zacht);
  font-size: .72rem; color: var(--tekst-3); line-height: 1.5;
}

/* Afmeldknop onderaan de zijbalk. */
.afmelden {
  display: block; margin-top: 8px;
  font-size: .72rem; color: var(--tekst-3);
}
.afmelden:hover { color: var(--tekst-2); text-decoration: underline; text-underline-offset: 2px; }

/* ── Zoekbalk in de topbalk ────────────────────────────────────────── */
.zoekbalk { display: flex; align-items: center; }
.zoekbalk input {
  font: inherit; font-size: .82rem; color: var(--tekst);
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: 7px 0 0 7px; border-right: 0;
  padding: 6px 10px; width: 210px;
}
.zoekbalk input::placeholder { color: var(--tekst-3); }
.zoekbalk button {
  font: inherit; font-size: 1rem; line-height: 1; cursor: pointer;
  color: var(--tekst-2); background: var(--vlak);
  border: 1px solid var(--rand); border-radius: 0 7px 7px 0;
  padding: 6px 10px; height: 31px;
}
.zoekbalk button:hover { color: var(--tekst); background: var(--vlak-2); }
.zoekbalk input:focus-visible { outline: 2px solid var(--klem); outline-offset: -1px; }

.zoekgroot { display: flex; gap: 8px; }
.zoekgroot input {
  flex: 1; font: inherit; font-size: 1rem; color: var(--tekst);
  background: var(--vlak-2); border: 1px solid var(--rand);
  border-radius: 8px; padding: 11px 14px; min-width: 0;
}
.zoekgroot button {
  font: inherit; font-weight: 600; cursor: pointer; flex: none;
  color: #fff; background: var(--klem); border: 0; border-radius: 8px; padding: 11px 20px;
}
.zoekgroot button:hover { filter: brightness(1.08); }

/* ── Kruimelpad ────────────────────────────────────────────────────── */
.kruimels { font-size: .78rem; color: var(--tekst-3); margin: -4px 0 -2px; }
.kruimels a { color: var(--tekst-2); }
.kruimels a:hover { color: var(--tekst); text-decoration: underline; text-underline-offset: 2px; }

/* ── Filterbalk boven een lijst ────────────────────────────────────── */
.filterbalk { display: flex; flex-direction: column; gap: 12px; }
.filterbalk-zoek { display: flex; gap: 8px; }
.filterbalk-zoek input {
  flex: 1; min-width: 0; font: inherit; color: var(--tekst);
  background: var(--vlak-2); border: 1px solid var(--rand);
  border-radius: 8px; padding: 9px 12px;
}
.filterbalk-zoek button {
  font: inherit; font-weight: 600; cursor: pointer; flex: none;
  color: #fff; background: var(--klem); border: 0; border-radius: 8px; padding: 9px 18px;
}
.filterbalk-zoek button:hover { filter: brightness(1.08); }
.filterbalk-keuzes { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.filterkeuze { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--tekst-3); }
.filterkeuze select {
  font: inherit; font-size: .8rem; color: var(--tekst);
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: 7px; padding: 5px 8px; max-width: 240px;
}
.filterkeuze-vink { cursor: pointer; }
.filterkeuze-vink input { accent-color: var(--klem); }
/* Een filter dat meerdere waarden aankan — twee openingsjaren naast elkaar —
   krijgt een lade met aankruisvakjes in plaats van een keuzelijst. Het is een
   <details>, dus het opent zonder javascript en met het toetsenbord. */
.keuzelade { position: relative; }
.keuzelade > summary {
  cursor: pointer; list-style: none; position: relative;
  font-size: .8rem; color: var(--tekst);
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: 7px; padding: 5px 24px 5px 8px; max-width: 240px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.keuzelade > summary::-webkit-details-marker { display: none; }
.keuzelade > summary::after {
  content: '▾'; position: absolute; right: 8px; top: 50%;
  transform: translateY(-50%); font-size: .7rem; color: var(--tekst-3);
}
.keuzelade > summary:hover { border-color: var(--klem); }
.keuzelade[open] > summary { border-color: var(--klem); color: var(--tekst); }
.keuzelade-paneel {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  min-width: 190px; max-width: min(280px, 82vw); padding: 6px;
  background: var(--vlak); border: 1px solid var(--rand);
  border-radius: 9px; box-shadow: var(--schaduw), 0 10px 20px -14px rgba(16, 24, 40, .65);
}
.keuzelade-lijst { max-height: 240px; overflow-y: auto; overscroll-behavior: contain; }
.keuzelade-optie {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 6px; border-radius: 6px; cursor: pointer;
  font-size: .8rem; color: var(--tekst);
}
.keuzelade-optie:hover { background: var(--vlak-2); }
.keuzelade-optie input { accent-color: var(--klem); flex: none; }
.keuzelade-optie span { flex: 1; min-width: 0; }
.keuzelade-optie em {
  font-style: normal; color: var(--tekst-3); font-variant-numeric: tabular-nums;
}
.keuzelade-voet {
  display: flex; align-items: center; gap: 12px;
  margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--rand-zacht);
}
.keuzelade-voet button {
  font: inherit; font-size: .78rem; font-weight: 600; cursor: pointer;
  color: #fff; background: var(--klem); border: 0; border-radius: 7px; padding: 6px 12px;
}
.keuzelade-voet button:hover { filter: brightness(1.08); }
.keuzelade-voet a { font-size: .76rem; color: var(--klem); }
.keuzelade-voet a:hover { text-decoration: underline; text-underline-offset: 2px; }
.filterwis { font-size: .76rem; color: var(--klem); }
.filterwis:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── Paginering ────────────────────────────────────────────────────── */
.paginering {
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px;
  margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rand-zacht);
  font-size: .78rem; color: var(--tekst-3);
}
.paginering-knoppen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; }
.paginering-knoppen a {
  min-width: 30px; text-align: center; padding: 5px 9px; border-radius: 7px;
  border: 1px solid var(--rand); color: var(--tekst-2); font-variant-numeric: tabular-nums;
}
.paginering-knoppen a:hover { background: var(--vlak-2); color: var(--tekst); }
.paginering-knoppen a.nu { background: var(--klem); border-color: var(--klem); color: #fff; font-weight: 600; }
.paginering-gat { padding: 0 2px; color: var(--tekst-3); }
.paginering-aantal { display: flex; align-items: center; gap: 6px; }
.paginering-aantal select {
  font: inherit; font-size: .78rem; color: var(--tekst);
  background: var(--vlak); border: 1px solid var(--rand); border-radius: 7px; padding: 4px 7px;
}
.geenresultaat { margin-top: 14px; font-size: .86rem; color: var(--tekst-2); }
.geenresultaat a { color: var(--klem); }

/* Klikbare rijen: de hele rij licht op, de links zelf blijven de trefzone. */
table.data.data-klikbaar tbody tr:hover td { background: var(--vlak-2); }
table.data a { color: var(--klem); }
table.data a:hover { text-decoration: underline; text-underline-offset: 2px; }
table.data a.zacht { color: var(--tekst-2); }
table.data a.zacht:hover { color: var(--tekst); }
table.data tfoot td {
  border-top: 1px solid var(--rand); padding-top: 10px;
  font-variant-numeric: tabular-nums;
}
table.data td.naam a { display: inline-block; max-width: min(42ch, 66vw); overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }
.td-meta { font-size: .72rem; }

/* Letterlijke tekst uit de bron (partijenbeschrijving in het repertorium). */
.brontekst {
  font: 400 .82rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: pre-wrap; word-break: break-word;
  background: var(--vlak-2); border: 1px solid var(--rand-zacht);
  border-radius: 8px; padding: 14px; max-height: 420px; overflow-y: auto;
  color: var(--tekst-2);
}

/* Snelkaarten op de zoekpagina. */
.snelkaart { display: flex; flex-direction: column; gap: 4px; transition: border-color .12s, transform .12s; }
.snelkaart:hover { border-color: var(--klem); transform: translateY(-1px); }
.snelkaart .snel-icoon { font-size: 1.1rem; color: var(--klem); margin-bottom: 4px; }
.snelkaart strong { font-size: .9rem; }
.snelkaart .dim { font-size: .76rem; color: var(--tekst-3); }

.lijstje .lbl a { color: inherit; }
.lijstje .lbl a:hover { color: var(--klem); }

/* Een kerncijfer dat aandacht vraagt krijgt een gele rand, geen rode: het is
   een signaal om na te kijken, geen storing. */
.kpi.kpi-let { border-color: color-mix(in srgb, var(--let) 45%, var(--rand)); }
.kpi-waarde.let { color: var(--let); }

/* Plakkende tabelkop: bij een lijst van vijftig rijen wil je bij het scrollen
   nog zien welke kolom je leest. */
.tabel-omhulsel { max-height: none; }
table.data thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--vlak);
  box-shadow: inset 0 -1px 0 var(--rand);
  border-bottom: 0;
}
/* Binnen een uitklapbare tabelgroep zou de sticky kop over de samenvatting
   heen schuiven; daar houden we hem gewoon staan. */
details.tabelgroep table.data thead th { position: static; box-shadow: none; border-bottom: 1px solid var(--rand); }

/* CSV-knop naast een tabelkop. */
.csv-knop {
  font: inherit; font-size: .74rem; cursor: pointer;
  color: var(--tekst-2); background: var(--vlak);
  border: 1px solid var(--rand); border-radius: 6px; padding: 3px 9px;
}
.csv-knop:hover { color: var(--tekst); background: var(--vlak-2); border-color: var(--klem); }

/* Sneltoetshint in het zoekveld. */
.zoekbalk { position: relative; }
.zoektip {
  position: absolute; right: 40px; top: 50%; transform: translateY(-50%);
  font-size: .68rem; color: var(--tekst-3); pointer-events: none;
  border: 1px solid var(--rand); border-radius: 4px; padding: 0 4px;
  background: var(--vlak-2);
}
@media (max-width: 1100px) { .zoektip { display: none; } }

/* ── Mobiel ────────────────────────────────────────────────────────
   Onder 860px is er geen plaats voor een vaste zijbalk. Wat blijft staan is
   een lage kopbalk met het merk en een menuknop; de negentien navigatielinks
   schuiven daar als lade onder vandaan — mét hun groepskoppen, want een rij
   van negentien gelijke knopjes leest niemand.
   Verder geldt overal: raakvlakken van minstens 44px, invoervelden op 16px
   (kleiner en iOS zoomt bij het focussen in) en niets dat breder is dan het
   scherm.                                                                 */
@media (max-width: 860px) {
  :root { --kopbalk-h: 52px; }
  /* Een sprong naar een anker mag niet onder de vaste kopbalk uitkomen. */
  html { scroll-padding-top: calc(var(--kopbalk-h) + 10px); }

  .app { display: block; }
  .main { margin-left: 0; padding-top: var(--kopbalk-h); }

  .zijbalk {
    position: fixed; inset: 0 0 auto 0; z-index: 40;
    width: auto; height: var(--kopbalk-h);
    flex-direction: row; align-items: center; gap: 10px;
    padding: 0 max(8px, env(safe-area-inset-right)) 0 max(16px, env(safe-area-inset-left));
    border-right: 0; border-bottom: 1px solid var(--rand);
  }
  .zijbalk-kop {
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px; flex: 1; min-width: 0;
  }
  .merk { display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; min-height: 44px; }
  .merk-logo { width: 72px; flex: none; }
  .merk-sub {
    margin-top: 0; font-size: .68rem;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .merk-sub br { display: none; }
  .merk-plaats::before { content: ' · '; }
  .menu-knop { display: flex; }

  /* De lade. visibility:hidden houdt de links buiten de tabvolgorde zolang
     het menu dicht is; anders tabt een toetsenbordgebruiker eerst door
     negentien onzichtbare links heen. */
  .zijbalk-lade {
    display: flex; flex-direction: column; z-index: 39;
    position: fixed; top: var(--kopbalk-h); left: 0; bottom: 0;
    width: min(310px, 86vw);
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    background: var(--vlak); border-right: 1px solid var(--rand);
    overflow-y: auto; overscroll-behavior: contain;
    visibility: hidden; transform: translateX(-100%);
    transition: transform .22s ease, visibility .22s;
  }
  .zijbalk.open .zijbalk-lade { visibility: visible; transform: none; }

  /* Verduistering over de pagina, als pseudo-element van de kopbalk: zo hoeft
     er geen extra leeg element in elke pagina te staan. */
  .zijbalk::before {
    content: ''; position: fixed; inset: var(--kopbalk-h) 0 0 0; z-index: 38;
    background: rgba(9, 12, 17, .45);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .zijbalk.open::before { opacity: 1; pointer-events: auto; }

  /* Niet krimpen: met flex-shrink zou het navigatievak kleiner worden dan zijn
     inhoud, en die schildert dan over de voet heen. De lade scrollt zelf. */
  .zijbalk-nav { flex: 0 0 auto; gap: 1px; overflow: visible; }
  .nav-link { min-height: 44px; padding: 8px 12px; font-size: .92rem; }
  .nav-icoon { width: 18px; font-size: .95rem; }
  .zijbalk-voet { margin-top: 18px; font-size: .74rem; }
  .zijbalk-voet .afmelden { min-height: 40px; display: flex; align-items: center; }

  /* Topbalk: titel op een eigen regel, het zoekveld daaronder over de volle
     breedte, en de jaarkiezer op de regel daarna. */
  .topbar { flex-direction: column; align-items: stretch; gap: 12px; padding-top: 18px; }
  .topbar-title { font-size: 1.15rem; }
  .topbar-sub { font-size: .8rem; }
  .topbar-right { flex: 1 1 auto; flex-wrap: wrap; justify-content: flex-start; gap: 8px; }
  /* Volgorde losgekoppeld van de opmaak: het zoekveld staat op de eerste
     regel, de jaarkiezer op de tweede. */
  .zoekbalk { flex: 1 1 auto; order: 1; }
  .jaarkiezer { order: 3; flex: 1 1 100%; }
  .topbar-right > .tag { order: 4; align-self: center; }
  .zoekbalk input { flex: 1; width: auto; min-width: 0; font-size: 16px; padding: 9px 12px; }
  .zoekbalk button { min-width: 46px; height: 42px; font-size: 1.15rem; }
  .jaarkiezer select { flex: 1; min-height: 42px; font-size: 16px; }

  .content, .topbar, .paginavoet {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .content { gap: 14px; }
  /* 140px: net krap genoeg om ook op een scherm van 320px twee kerncijfers
     naast elkaar te houden — anders wordt zo’n pagina een lange kolom. */
  .kpi-rooster { grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr)); }
  .kpi-waarde { font-size: 1.25rem; }
  .kpi-waarde.klein { font-size: 1.05rem; }
  .kaart { padding: 14px; }
  .kaart-kop { flex-wrap: wrap; row-gap: 6px; }

  /* Etiket en waarde naast elkaar houden, maar de breedtes loslaten: op een
     smal scherm past een vaste 150px-kolom niet naast een lange naam. */
  .lijstje li { flex-wrap: wrap; }
  .lijstje .lbl { flex: 1 1 auto; width: auto; min-width: 0; }
  .lijstje .val { margin-left: auto; }

  /* Formulieren en filters: alles op vingermaat, en niets dat inzoomt. */
  .zoekgroot input, .filterbalk-zoek input, .aanmeld-form input { font-size: 16px; }
  .zoekgroot button, .filterbalk-zoek button { min-height: 44px; }
  .filterbalk-keuzes { gap: 8px 12px; }
  /* Etiket bóven de keuzelijst: naast elkaar krijgen twee filters met een
     lang etiket ("Medewerker") en een kort ("Type") ongelijke breedtes. */
  .filterkeuze { flex: 1 1 46%; flex-direction: column; align-items: stretch; gap: 3px; }
  .filterkeuze select { flex: none; width: 100%; max-width: none; min-height: 42px; font-size: 16px; }
  .keuzelade { width: 100%; }
  .keuzelade > summary {
    display: flex; align-items: center; width: 100%; max-width: none;
    min-height: 42px; font-size: 16px;
  }
  .keuzelade-paneel { width: 100%; max-width: none; }
  .keuzelade-optie { min-height: 40px; font-size: 15px; }
  .keuzelade-optie input { width: 18px; height: 18px; }
  .keuzelade-voet button { min-height: 40px; }
  .filterkeuze-vink { flex: 1 1 100%; flex-direction: row; align-items: center; gap: 8px; min-height: 44px; }
  .filterkeuze-vink input { width: 18px; height: 18px; }
  .filterwis { min-height: 36px; display: inline-flex; align-items: center; }

  .paginering { gap: 10px; }
  .paginering-knoppen { margin-left: 0; width: 100%; gap: 6px; }
  .paginering-knoppen a { min-width: 40px; padding: 9px 10px; }
  .paginering-aantal select { min-height: 36px; font-size: 16px; }

  .csv-knop { padding: 9px 12px; font-size: .78rem; }
  /* "alle 715 →" in een kaartkop is een navigatielink, geen lopende tekst:
     die mag je met een duim kunnen raken. */
  a.kaart-noot { display: inline-flex; align-items: center; min-height: 36px; }
  /* De periodebalk heeft onder 560px een eigen regel; deze dekt de strook
     daarboven (tablet staand, telefoon liggend) met dezelfde 44px. */
  .periodeknop { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  details.tabelgroep > summary { padding: 14px; }

  /* Eerste kolom blijft staan bij het horizontaal schuiven. De cel moet
     dekkend zijn, anders schuiven de volgende kolommen eronder door. */
  .tabel-omhulsel table.data > thead > tr > th:first-child,
  .tabel-omhulsel table.data > tbody > tr > td:first-child,
  .tabel-omhulsel table.data > tfoot > tr > td:first-child {
    position: sticky; left: 0; z-index: 1;
    background: var(--vlak);
    box-shadow: 8px 0 8px -8px rgba(16,24,40,.22), 1px 0 0 var(--rand-zacht);
  }
  .tabel-omhulsel table.data > thead > tr > th:first-child {
    z-index: 3;
    box-shadow: inset 0 -1px 0 var(--rand), 8px 0 8px -8px rgba(16,24,40,.22);
  }
  .tabel-omhulsel table.data > tbody > tr:hover > td:first-child { background: var(--vlak-2); }
  table.data th, table.data td { padding: 9px 10px; }
  table.data .naam { min-width: 140px; }
  .brontekst { max-height: 60vh; }
  .snelkaart { padding: 14px; }
}

/* Heel smalle toestellen (iPhone SE staand): iets minder marge, zodat er
   meer tabel in beeld past. */
@media (max-width: 380px) {
  .content, .topbar, .paginavoet {
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
  }
  .kpi { padding: 12px 13px; }
  .kaart { padding: 12px; }
  .filterkeuze { flex: 1 1 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .zijbalk-lade, .zijbalk::before { transition: none; }
}

/* ── Afdrukken ─────────────────────────────────────────────────────── */
/* Een dossierfiche of een lijst hoort op papier te kunnen. De navigatie,
   de filters en de knoppen dienen daar niet; de inhoud wel, in zwart-wit. */
@media print {
  :root {
    --grond: #fff; --vlak: #fff; --vlak-2: #fff;
    --rand: #bbb; --rand-zacht: #ddd;
    --tekst: #000; --tekst-2: #333; --tekst-3: #666;
    --schaduw: none;
  }
  .zijbalk, .topbar-right, .filterbalk, .paginering, .csv-knop,
  .zoekbalk, .kruimels { display: none !important; }
  /* Een afdrukvel is smaller dan 860px, dus de mobiele regels gelden hier ook.
     De ruimte voor de kopbalk moet weg — die balk drukken we niet af. */
  .main { margin-left: 0; padding-top: 0; }
  .tabel-omhulsel table.data th:first-child,
  .tabel-omhulsel table.data td:first-child { position: static; box-shadow: none; }
  .app { display: block; }
  .content { padding: 0; gap: 12px; }
  .kaart { border: 1px solid #ccc; break-inside: avoid; page-break-inside: avoid; }
  .topbar { padding: 0 0 12px; border-bottom: 1px solid #ccc; margin-bottom: 12px; }
  .topbar-title { font-size: 1.1rem; }
  table.data { font-size: .74rem; }
  table.data thead th { position: static; box-shadow: none; border-bottom: 1px solid #999; }
  table.data a { color: #000; text-decoration: none; }
  .grafiek { break-inside: avoid; }
  .paginavoet { border-top: 1px solid #ccc; font-size: .68rem; }
  /* De bron van een cijfer hoort ook op papier vindbaar te zijn. */
  .paginavoet::after { content: ' · afgedrukt van het interne dashboard'; }
}

/* ── Periodekeuze bij een grafiek ──────────────────────────────────── */
.periodebalk {
  display: flex; flex-wrap: wrap; gap: 3px;
  padding: 3px; margin-bottom: 14px;
  background: var(--vlak-2); border: 1px solid var(--rand);
  border-radius: 9px; width: fit-content; max-width: 100%;
}
.periodeknop {
  padding: 5px 12px; border-radius: 6px;
  font-size: .78rem; font-weight: 500; color: var(--tekst-2);
  white-space: nowrap; transition: background .12s, color .12s;
}
.periodeknop:hover { background: var(--vlak); color: var(--tekst); }
.periodeknop.nu { background: var(--klem); color: #fff; font-weight: 600; }
.periodeknop.nu:hover { background: var(--klem); color: #fff; }
.periodeknop:focus-visible { outline: 2px solid var(--klem); outline-offset: 1px; }

/* ── ⓘ Uitleg ──────────────────────────────────────────────────────
   Overgenomen van de InfoTip in het interne dashboard: een lucide-cirkel met
   een i, licht grijs en donkerder zodra je erop mikt, en een donkere ballon
   met grote letter (22px), ruime binnenmarge en een diepe schaduw. De ballon
   is donker — zoals de standaardvariant intern — zodat de
   uitleg zich duidelijk van de pagina losmaakt. Alle maten staan hier op één
   plek; plaatsing en gedrag: koppelInfo() in public/js/ui.js.             */
:root {
  --info-icoon: #cbd5e1;          /* slate-300 */
  --info-icoon-hover: #64748b;    /* slate-500 */
  --info-vlak: #1e293b;           /* slate-800 */
  --info-rand: #334155;           /* slate-700 */
  --info-tekst: #f1f5f9;          /* slate-100 */
  --info-kop: #ffffff;
  --info-dim: #94a3b8;            /* slate-400 */
  --info-stip: #64748b;
}

.info {
  position: relative; display: inline-flex; flex: none; vertical-align: middle;
  margin-left: 4px; cursor: help; line-height: 0;
  /* Een ruimer raakvlak dan het icoontje zelf, zonder de regel op te rekken. */
  padding: 3px; margin-block: -3px; margin-right: -3px; border-radius: 50%;
  /* Kolomkoppen staan in hoofdletters en spatiëring; de uitleg niet. */
  text-transform: none; letter-spacing: normal; font-weight: 400;
}
.info-icoon {
  width: 16px; height: 16px; display: block;
  fill: none; stroke: var(--info-icoon); stroke-width: 2;
  stroke-linecap: round; stroke-linejoin: round;
  transition: stroke .12s;
}
/* In kleine tekst — kolomkoppen, etiketten van kerncijfers — een maat kleiner,
   anders duwt het icoon de regel uit elkaar. */
.kpi-label .info-icoon, th .info-icoon, .sectiekop .info-icoon,
.kaart-noot .info-icoon, .filterkeuze .info-icoon { width: 14px; height: 14px; }
.info:hover .info-icoon, .info:focus-visible .info-icoon, .info[aria-expanded="true"] .info-icoon { stroke: var(--info-icoon-hover); }
.info:focus-visible { outline: 2px solid var(--klem); outline-offset: 0; }
.info template { display: none; }
/* Op een aanraakscherm is 16px te klein om te raken; de raakzone groeit mee,
   het icoon niet. */
@media (pointer: coarse) {
  .info::before { content: ''; position: absolute; inset: -12px; }
}

.info-bubbel {
  position: fixed; z-index: 100; transform: translateX(-50%);
  overflow-y: auto; overscroll-behavior: contain;
  padding: 1.5rem; border-radius: 1rem;
  background: var(--info-vlak); color: var(--info-tekst);
  border: 1px solid var(--info-rand);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
  font: 400 1.375rem/1.375 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  text-align: left; text-transform: none; letter-spacing: normal; white-space: normal;
  -webkit-font-smoothing: antialiased;
}
.info-titel { display: block; margin-bottom: .5rem; font-weight: 700; color: var(--info-kop); }
.info-bubbel b, .info-bubbel strong { font-weight: 700; color: var(--info-kop); }
.info-bubbel p + p, .info-bubbel p + ul, .info-bubbel ul + p { margin-top: .6em; }
.info-bubbel .zacht, .info-bubbel .info-noot { color: var(--info-dim); }
.info-bubbel code { font: .85em ui-monospace, SFMono-Regular, Menlo, monospace; }
.info-bubbel a { color: #93c5fd; text-decoration: underline; text-underline-offset: 3px; }
/* Opsomming met vierkante bolletjes in em, zodat ze meeschalen met de letter —
   zoals intern. Met style="--kleur:var(--reeks-1)" krijgt een regel de kleur
   van de reeks waar ze bij hoort. */
.info-bubbel ul, .info-lijst { list-style: none; display: flex; flex-direction: column; gap: .375rem; }
.info-bubbel li { display: flex; gap: .4em; }
.info-bubbel li::before {
  content: ''; flex: none; width: .45em; height: .45em; margin-top: .45em;
  border-radius: 2px; background: var(--kleur, var(--info-stip));
}
@media (max-width: 560px) {
  .info-bubbel { padding: 1rem; font-size: 1.05rem; }
}

/* ── Doorklikken ───────────────────────────────────────────────────── */
/* Een kerncijfer dat een link is: de hele tegel is het raakvlak. Het ⓘ en
   links in de subtekst liggen erboven, zodat die hun eigen klik houden. */
.kpi { position: relative; }
.kpi:has(.kpi-link) { transition: border-color .12s, box-shadow .12s; }
.kpi:has(.kpi-link):hover { border-color: var(--klem); box-shadow: 0 1px 3px rgba(16,24,40,.1); }
.kpi-link { color: inherit; }
.kpi-link:focus-visible { outline: none; }
.kpi:has(.kpi-link:focus-visible), .kpi.kpi-link:focus-visible { outline: 2px solid var(--klem); outline-offset: 2px; }
.kpi .info, .kpi-sub a, .kpi-label a { position: relative; z-index: 1; }
.kpi-sub a { color: var(--klem); }
.kpi-label .pijl, .kpi-link .pijl { color: var(--tekst-3); font-weight: 400; }

table.data tbody tr.rij-link { cursor: pointer; }
.kaart-titel .info, .sectiekop .info, .topbar-title .info { margin-left: 6px; }

/* Een anker op dezelfde pagina mag niet tegen de bovenrand kleven. */
.kaart[id], .kpi-rooster[id] { scroll-margin-top: 16px; }
@media (max-width: 860px) {
  .kaart[id], .kpi-rooster[id] { scroll-margin-top: calc(var(--kopbalk-h) + 10px); }
}
/* Staat er een plakkende typekeuze bovenaan (dat is /medewerkers), dan moet
   een anker ónder die kaart uitkomen. Anders landt een klik op een jaar- of
   statusfilter met de filterbalk verstopt achter de kaart die blijft staan —
   je verandert dan een filter dat je niet ziet. Ruim genomen: de kaart is
   ongeveer 200 px hoog en groeit mee als de typeknoppen omslaan. */
body:has(.kaart > .typekeuze) .kaart[id],
body:has(.kaart > .typekeuze) .kpi-rooster[id] { scroll-margin-top: 232px; }
@media (max-width: 860px) {
  body:has(.kaart > .typekeuze) .kaart[id],
  body:has(.kaart > .typekeuze) .kpi-rooster[id] { scroll-margin-top: 244px; }
}

/* Waar je op doorgeklikt hebt, als wisbaar etiket boven de lijst. */
.filterchips { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; }
.filterchips-kop { font-size: .76rem; color: var(--tekst-3); }
.filterchip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 4px 3px 10px; border-radius: 20px;
  font-size: .76rem; color: var(--tekst);
  background: color-mix(in srgb, var(--klem) 10%, var(--vlak));
  border: 1px solid color-mix(in srgb, var(--klem) 35%, var(--rand));
}
.filterchip b { font-weight: 600; color: var(--tekst-2); }
.filterchip a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; color: var(--tekst-2);
}
.filterchip a:hover { background: var(--vlak-2); color: var(--tekst); }
@media (max-width: 860px) {
  .filterchip { min-height: 36px; padding: 4px 4px 4px 12px; }
  .filterchip a { width: 32px; height: 32px; }
}

@media print { .info, .info-bubbel, .filterchips a { display: none !important; } }

/* De kop van een kaart met periodekeuze mag de keuze naast de titel zetten
   zolang er ruimte is, en eronder zodra het krap wordt. */
.kaart-kop.met-periode { flex-wrap: wrap; row-gap: 10px; }
.kaart-kop.met-periode .periodebalk { margin-bottom: 0; }
@media (max-width: 560px) {
  .periodebalk { width: 100%; }
  /* Op een aanraakscherm is 31px te klein om te mikken; de rest van de mobiele
     opmaak houdt 44px aan, dus deze knoppen ook. */
  .periodeknop {
    flex: 1; text-align: center; padding: 6px 8px;
    min-height: 44px; display: flex; align-items: center; justify-content: center;
  }
}

/* ── Doorklik en vergelijking op de medewerkerspagina ──────────────── */
/* Een kerncijfer dat een link is: dezelfde kaart, met een pijltje achter het
   etiket en een rand in de klemkleur bij hoveren. */
a.kpi-link { display: block; color: inherit; transition: border-color .12s, transform .12s; }
a.kpi-link:hover { border-color: var(--klem); transform: translateY(-1px); }
a.kpi-link .kpi-label::after { content: ' →'; color: var(--tekst-3); }
a.kpi-link:hover .kpi-label, a.kpi-link:hover .kpi-label::after { color: var(--klem); }
/* Op een smal scherm belandt dat pijltje achter een lang etiket op een eigen
   regel, wat op elke tegel een lege regel geeft. Daar is de hele tegel toch al
   het raakvlak, dus laat het weg. */
@media (max-width: 560px) { a.kpi-link .kpi-label::after { content: none; } }

/* ── De typekeuze blijft in beeld ──────────────────────────────────────
   Deze kaart stuurt de hele pagina: de kerncijfers, beide grafieken en de
   tabellen hangen eraan. Wie halverwege de tabel bedenkt "en hoe zit dat bij
   verkopen?", hoort daarvoor niet terug naar boven te moeten. Ze plakt dus
   bovenaan, met de klemkleur in de rand zodat ze niet als gewone kaart
   wegleest.                                                              */
.kaart:has(> .typekeuze) {
  position: sticky; top: 0; z-index: 20;
  border-color: color-mix(in srgb, var(--klem) 38%, var(--rand));
  box-shadow: var(--schaduw), 0 10px 18px -14px rgba(16, 24, 40, .65);
}

.typekeuze { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin-bottom: 12px; }
/* Groter dan een gewoon filter: dit is de hoofdschakelaar van de pagina. */
.typekeuze .filterkeuze > span {
  font-size: .72rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tekst-2);
}
.typekeuze .filterkeuze select {
  max-width: 340px; min-height: 40px;
  font-size: .95rem; font-weight: 600; padding: 7px 12px;
  border-color: color-mix(in srgb, var(--klem) 45%, var(--rand));
}
.typebalk { margin-bottom: 0; }
.typebalk .periodeknop { font-size: .82rem; padding: 7px 14px; }
.typebalk .periodeknop.nu { box-shadow: 0 1px 3px rgba(16, 24, 40, .25); }

/* ── Filters boven één tabel ───────────────────────────────────────────
   De vergelijkingstabel op /medewerkers kiest haar eigen jaren en status.
   Die keuzes staan boven de tabel, elk met een kopje erbij, zodat het
   duidelijk blijft dat ze alleen die tabel sturen en niet de hele pagina
   (dat doet de typekeuze bovenaan).                                      */
.tabelfilters {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 22px;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rand-zacht);
}
.tabelfilter { display: flex; flex-direction: column; gap: 5px; }
.tabelfilter-kop {
  display: flex; align-items: center;
  font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--tekst-3);
}
.tabelfilters .filterwis { margin-bottom: 4px; }
/* Een statuskeuze laat records zonder dossier wegvallen; dat hoort erbij te staan. */
.tabelfilter-let { margin: -4px 0 12px; }

@media (max-width: 700px) {
  .tabelfilters { gap: 12px; }
  .tabelfilter { width: 100%; }
  .tabelfilter .periodebalk { width: 100%; }
  /* Twaalf jaartallen zijn kort: laat ze compact naast elkaar staan in plaats
     van elk over de volle breedte, anders duwt de filterbalk de tabel van het
     scherm. De statuskeuze is met drie knoppen wél de volle breedte waard. */
  /* Drie klassen, zodat dit de regel van .typebalk .periodeknop verslaat die
     verderop alles wél laat uitrekken. */
  .periodebalk.tabelfilter-jaren .periodeknop { flex: 0 0 auto; padding: 7px 10px; }
  .periodebalk.tabelfilter-status .periodeknop { flex: 1 1 auto; }
}

/* Initialen met de naam erachter, zodat collega's herkenbaar naast elkaar staan. */
.mw-naam { font-size: .76rem; }
/* Tien kolommen: het aandeelstaafje mag smaller, anders schuift de tabel op
   1440px net een paar pixels. */
#overzicht .staafcel { min-width: 110px; }
table.data a.staaflink { color: inherit; }
table.data a.staaflink:hover { text-decoration: none; }
table.data a.staaflink:hover .dim { color: var(--klem); }

/* Kruistabel medewerker × aktetype. De kop mag afbreken: aktetypes als
   "Volmacht voor akte op afstand" passen anders op geen enkel scherm. */
table.kruistabel thead th {
  white-space: normal; vertical-align: bottom; line-height: 1.3;
  min-width: 72px; max-width: 120px;
  text-transform: none; letter-spacing: 0; font-size: .72rem;
}
table.kruistabel thead th:first-child { text-transform: uppercase; letter-spacing: .05em; font-size: .68rem; }
table.kruistabel thead th a { color: var(--tekst-2); }
table.kruistabel thead th a:hover { color: var(--klem); }
table.kruistabel th.actief a { color: var(--klem); font-weight: 700; }
/* De tint zegt hoe dicht iemand bij de grootste van die kolom zit. */
table.kruistabel td.warmte { background: color-mix(in srgb, var(--reeks-1) var(--a, 0%), transparent); }
table.kruistabel tbody tr:hover td.warmte { background: color-mix(in srgb, var(--reeks-1) var(--a, 0%), var(--vlak-2)); }
table.kruistabel td.warmte a { color: var(--tekst); font-weight: 600; }
table.kruistabel td.actief { box-shadow: inset 2px 0 0 var(--klem), inset -2px 0 0 var(--klem); }

/* Melding bovenaan een fiche die op één type gefilterd staat. */
.filtermelding {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: .8rem; color: var(--tekst-2);
  background: color-mix(in srgb, var(--klem) 7%, var(--vlak));
  border: 1px solid color-mix(in srgb, var(--klem) 30%, var(--rand));
  border-radius: var(--rond); padding: 10px 14px;
}
.filtermelding strong { color: var(--tekst); }
.filtermelding a { color: var(--klem); }
.lijstje li.actief .lbl a { color: var(--klem); font-weight: 600; }
.lijstje .val a { color: inherit; }
.lijstje .val a:hover { color: var(--klem); }

@media (max-width: 860px) {
  .filtermelding a { min-height: 36px; display: inline-flex; align-items: center; }
  /* De kopbalk staat hier vast bovenaan; de typekeuze plakt eronder. Van de
     twee manieren om te kiezen blijft alleen de keuzelijst over: de negen
     snelknoppen vullen op deze breedte vier regels en zouden als plakkende
     balk het halve scherm opeten. De lijst bevat elk type, dus er gaat geen
     keuze verloren. */
  .kaart:has(> .typekeuze) { top: var(--kopbalk-h); }
  .kaart:has(> .typekeuze) .typebalk { display: none; }
  .typekeuze { margin-bottom: 0; }
  .typekeuze .filterkeuze select { max-width: none; width: 100%; font-size: 16px; }
}
@media (max-width: 560px) {
  .mw-naam { display: none; }
  .typebalk .periodeknop { flex: 1 1 auto; }
}

/* ── Venster bij een afspraak ────────────────────────────────────────
   Een agenda-afspraak heeft geen eigen pagina; een klik op de rij opent
   dit venster met alles wat de bron erover weet. Zelfde vlakken en randen
   als een kaart, zodat het bij de rest hoort.                            */
.venster-laag {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: max(16px, env(safe-area-inset-left));
  background: rgba(9, 12, 17, .5);
}
html.venster-open, html.venster-open body { overflow: hidden; }
.venster {
  position: relative;
  width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  padding: 22px 24px;
  background: var(--vlak); color: var(--tekst);
  border: 1px solid var(--rand); border-radius: var(--rond);
  box-shadow: 0 24px 48px -12px rgba(9, 12, 17, .45);
}
.venster-dicht {
  position: absolute; top: 10px; right: 10px;
  width: 34px; height: 34px; padding: 0;
  font: inherit; font-size: .9rem; line-height: 1; cursor: pointer;
  color: var(--tekst-2); background: var(--vlak);
  border: 1px solid var(--rand); border-radius: 8px;
}
.venster-dicht:hover { color: var(--tekst); background: var(--vlak-2); }
.popup-kop { font-size: 1.05rem; font-weight: 650; padding-right: 40px; }
.popup-sub { margin-top: 4px; font-size: .82rem; color: var(--tekst-2); }
.popup-lijst {
  display: grid; grid-template-columns: minmax(96px, auto) 1fr; gap: 8px 16px;
  margin-top: 18px; font-size: .86rem;
}
.popup-lijst dt { color: var(--tekst-3); }
.popup-lijst dd { color: var(--tekst); min-width: 0; overflow-wrap: anywhere; }
.popup-lijst dd a { color: var(--klem); }
.popup-lijst dd a:hover { text-decoration: underline; text-underline-offset: 2px; }
.popup-lijst .zacht { color: var(--tekst-3); }
.popup-noot {
  margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rand-zacht);
  font-size: .78rem; line-height: 1.55; color: var(--tekst-3);
}
/* De rij zelf: aanwijsbaar, en met het toetsenbord bereikbaar. */
table.data tbody tr[data-afspraak] { cursor: pointer; }
table.data tbody tr[data-afspraak]:focus-visible {
  outline: 2px solid var(--klem); outline-offset: -2px;
}
@media (max-width: 560px) {
  .venster { padding: 18px 16px; max-height: 88vh; }
  .venster-dicht { width: 40px; height: 40px; }
  .popup-lijst { grid-template-columns: 1fr; gap: 2px 0; }
  .popup-lijst dd { margin-bottom: 10px; }
}
@media print { .venster-laag { display: none !important; } }

/* ── Startpagina ────────────────────────────────────────────────────
   Het onthaal is het enige donkere vlak in de app en het staat er alleen:
   een diep marineblauw met het turkoois van het logo erover, een netwerk van
   punten dat home.js op het canvas tekent, en de groet van het uur in het
   groot. Verder niets — geen cijfers, geen zinnen, geen voettekst.      */
.content-kaal { padding: 20px 26px; flex: 1; }
/* De voet met de databron hoort bij de cijferpagina's, niet bij het onthaal. */
.content-kaal ~ .paginavoet { display: none; }

.onthaal {
  position: relative; overflow: hidden;
  /* Vult wat er van het scherm overblijft, zodat de groet in het midden van
     een vlak staat en niet op een strook bovenaan. */
  flex: 1; min-height: min(560px, 78vh);
  display: flex; align-items: center;
  border-radius: 18px;
  padding: clamp(30px, 6vw, 64px) clamp(22px, 6vw, 72px);
  background:
    radial-gradient(120% 140% at 8% 0%, #12324a 0%, #0a1b2b 48%, #070f19 100%);
  color: #eaf4f7;
  isolation: isolate;
}
/* Het canvas vult het vlak; het staat onder de tekst en vangt geen klikken. */
.onthaal-net {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: -2; pointer-events: none;
}
/* Een gloed vanuit de linkerbovenhoek, plus een fijn raster: genoeg om het
   vlak diepte te geven zonder dat het netwerk eronder verdwijnt. */
.onthaal-glans {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(58% 78% at 6% -8%, rgba(0, 179, 196, .40), transparent 62%),
    radial-gradient(42% 60% at 96% 106%, rgba(42, 120, 214, .30), transparent 66%),
    linear-gradient(to right, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 46px 46px,
    linear-gradient(to bottom, rgba(255, 255, 255, .045) 1px, transparent 1px) 0 0 / 46px 46px;
  mask-image: linear-gradient(105deg, #000 0%, rgba(0, 0, 0, .55) 55%, transparent 92%);
}

.onthaal-groet {
  position: relative;
  font-size: clamp(2.6rem, 9vw, 6rem);
  line-height: 1.02; font-weight: 800; letter-spacing: -.035em;
  text-wrap: balance;
}
.onthaal-komma { color: rgba(234, 244, 247, .5); }
/* De naam in de huiskleur — op dit donkere vlak is turkoois wél leesbaar. */
.onthaal-naam {
  background: linear-gradient(96deg, #46e3f0, #00b3c4 55%, #7fb6ff);
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
@supports not (background-clip: text) { .onthaal-naam { color: #46e3f0; } }

@media (max-width: 860px) {
  .content-kaal { padding-top: 16px; padding-bottom: 16px; }
  /* Onder 860px is .app geen flexrij meer en heeft .main geen vaste hoogte;
     flex:1 rekt dan niets uit. Daarom hier de hoogte zelf: het scherm min de
     kopbalk en de marge boven en onder. */
  .onthaal {
    border-radius: 14px;
    min-height: calc(100dvh - var(--kopbalk-h) - 32px);
  }
  .onthaal-groet { letter-spacing: -.025em; }
}

@media print {
  .onthaal {
    background: none; color: #000; padding: 0; min-height: 0;
  }
  .onthaal-net, .onthaal-glans { display: none !important; }
  .onthaal-naam { color: #000; -webkit-text-fill-color: #000; }
}

/* ── De drie belangrijkste in de zijbalk ────────────────────────────
   Medewerkers, Financieel en Akten staan bovenaan als eigen blok:
   groter, met een vlak eromheen en een accentrand links. De rest van de
   navigatie blijft de vlakke lijst eronder, zodat het verschil meteen te
   zien is zonder dat er "belangrijk" bij hoeft te staan.               */
.nav-top {
  display: flex; flex-direction: column; gap: 6px;
  padding-bottom: 14px; margin-bottom: 4px;
  border-bottom: 1px solid var(--rand);
}
.nav-top-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border-radius: 9px;
  font-size: .92rem; font-weight: 600; color: var(--tekst);
  background: var(--vlak-2); border: 1px solid var(--rand-zacht);
  /* De accentrand als inset-schaduw en niet als border-left: dan verspringt
     de tekst niet als de rand van kleur wisselt. */
  box-shadow: inset 3px 0 0 var(--merk);
  transition: background .12s, border-color .12s, box-shadow .12s;
}
.nav-top-link:hover { background: var(--vlak); border-color: var(--klem); box-shadow: inset 3px 0 0 var(--klem); }
.nav-top-link.actief {
  background: color-mix(in srgb, var(--merk) 16%, transparent);
  border-color: color-mix(in srgb, var(--merk) 45%, var(--rand));
  box-shadow: inset 3px 0 0 var(--klem);
}
.nav-top-icoon { width: 16px; flex: none; text-align: center; font-size: .95rem; color: var(--klem); }

@media (max-width: 860px) {
  .nav-top { gap: 6px; padding-bottom: 12px; }
  .nav-top-link { min-height: 46px; font-size: .98rem; padding: 10px 13px; }
  .nav-top-icoon { width: 18px; font-size: 1rem; }
}

/* Typefilter binnen één kaart (Doorlooptijd tot ondertekening): zelfde
   keuzelijst als .typekeuze, maar zonder de kaart plakkerig te maken. */
.kaartfilter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 8px 0 12px; }
.kaartfilter .filterkeuze select { max-width: 300px; }

/* ── Financieel: de uitklapgroep in de zijbalk ─────────────────────────
   Omzet, Kosten en Winst hangen onder één blok. Het is een <details>, dus
   het werkt zonder JavaScript; het pijltje draait mee.                  */
.nav-top-groep > summary { list-style: none; cursor: pointer; }
.nav-top-groep > summary::-webkit-details-marker { display: none; }
.nav-top-pijl { margin-left: auto; font-size: .8rem; color: var(--tekst-3); transition: transform .15s; }
.nav-top-groep[open] .nav-top-pijl { transform: rotate(180deg); }
.nav-top-kinderen { display: flex; flex-direction: column; gap: 2px; padding: 6px 0 2px 26px; }
.nav-sub-link {
  display: block; padding: 7px 10px; border-radius: 7px;
  font-size: .86rem; color: var(--tekst-2);
  border-left: 2px solid var(--rand);
}
.nav-sub-link:hover { background: var(--vlak-2); color: var(--tekst); }
.nav-sub-link.actief {
  color: var(--tekst); font-weight: 600; border-left-color: var(--klem);
  background: color-mix(in srgb, var(--merk) 14%, transparent);
}
@media (max-width: 860px) { .nav-sub-link { min-height: 42px; display: flex; align-items: center; } }

/* ── Kosten: tabs Alle kosten / Loonkosten ─────────────────────────── */
.subtabs { margin-bottom: 16px; }
.subtabs .periodeknop { font-size: .86rem; padding: 7px 16px; }

/* ── Loonkosten ─────────────────────────────────────────────────────── */
.lk-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 22px; }
.lk-filters .tabelfilter select { min-height: 36px; font-size: .86rem; max-width: 280px; }
.lk-filters .periodebalk { margin-bottom: 0; }
.lk-melding {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 14px; border-radius: var(--rond); font-size: .82rem; line-height: 1.55;
  background: color-mix(in srgb, var(--let) 9%, var(--vlak));
  border: 1px solid color-mix(in srgb, var(--let) 35%, var(--rand));
}
.lk-melding strong { font-weight: 650; }
.lk-melding a { color: var(--klem); text-decoration: underline; text-underline-offset: 2px; }
.lk-melding-icoon { flex: none; font-size: 1rem; line-height: 1.3; color: var(--let); }
table.data tfoot td { border-top: 1px solid var(--rand); font-weight: 650; }
table.data td a.zacht:hover, table.data td a:hover { color: var(--klem); }
.lk-fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px 20px; font-size: .84rem; }
.lk-fiche dt { font-size: .7rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; color: var(--tekst-3); }
.lk-fiche dd { margin-top: 2px; }
.lk-bladeren { display: flex; flex-wrap: wrap; gap: 8px; }
.lk-bladeren a { font-size: .8rem; padding: 6px 12px; border: 1px solid var(--rand); border-radius: 7px; background: var(--vlak); }
.lk-bladeren a:hover { border-color: var(--klem); color: var(--klem); }
tr.lk-sectie td { background: var(--vlak-2); font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--tekst-3); }
tr.lk-totaal td { font-weight: 650; }
.lk-slot { max-width: 640px; }