/* =============================================================================
   Bijdehand werkbank, design system
   =============================================================================
   Alles wat er in de app uitziet, komt hier vandaan. Twee regels:

   1. Geen losse waarden in de schermen. Kleur, ruimte, ronding, schaduw en
      lettergrootte komen uit de variabelen hieronder.
   2. De merkkleuren van de klant staan NIET in dit bestand. Die worden per
      klant in de pagina zelf gezet (basis.html), zodat dit bestand voor alle
      klanten gelijk is en in de browser bewaard kan blijven.

   Volgorde: tokens, basis, app-shell, componenten, hulpklassen.
   ========================================================================== */

/* --- 1. Tokens ----------------------------------------------------------- */

:root {
  /* Merk. Deze twee worden per klant overschreven; de rest wordt afgeleid,
     zodat één kleur genoeg is om de app kloppend te maken. */
  --merk: #12854f;
  --merk-diep: #0c4a32;

  /* De merkkleur van een klant kan ALLES zijn, ook wit of bijna zwart. Daarom
     leiden we twee dingen af in plaats van ze vast te zetten:

     --op-merk    de tekstkleur ÓP een gevuld merkvlak (een knop). Zwart bij een
                  lichte merkkleur, wit bij een donkere. Zonder dit krijgt een
                  klant met een wit logo een knop met onzichtbare tekst.
     --merk-tekst de merkkleur zoals hij als TEKST leesbaar is op de pagina.
                  Een witte merkkleur wordt hier donker genoeg om te lezen.

     De eerste regel is telkens een veilige terugval voor browsers die de
     relatieve kleurfunctie nog niet kennen. */
  --op-merk: #ffffff;
  --op-merk: oklch(from var(--merk) clamp(0, (0.68 - l) * 100, 1) 0 0);

  --merk-tekst: var(--merk);
  --merk-tekst: oklch(from var(--merk) min(l, 0.52) c h);

  --merk-hover:   color-mix(in oklab, var(--merk) 88%, black);
  --merk-zacht:   color-mix(in oklab, var(--merk-tekst) 12%, white);
  --merk-zachter: color-mix(in oklab, var(--merk-tekst) 6%, white);
  --merk-rand:    color-mix(in oklab, var(--merk-tekst) 28%, white);

  /* Neutrale schaal, 10 stappen. De basis van rust in het beeld. */
  --grijs-50:  #fafafa;
  --grijs-100: #f4f4f5;
  --grijs-200: #e8e8ea;
  --grijs-300: #d6d6d9;
  --grijs-400: #a8a8ad;
  --grijs-500: #79797f;
  --grijs-600: #55555b;
  --grijs-700: #3d3d42;
  --grijs-800: #27272b;
  --grijs-900: #18181b;
  --grijs-950: #0e0e10;

  /* Betekeniskleuren. Zacht gehouden; een melding is geen alarm. */
  --goed:    #15803d;  --goed-vlak:    #f0fdf4;  --goed-rand:    #bbf7d0;
  --let-op:  #b45309;  --let-op-vlak:  #fffbeb;  --let-op-rand:  #fde68a;
  --fout:    #b91c1c;  --fout-vlak:    #fef2f2;  --fout-rand:    #fecaca;
  --info:    #1d4ed8;  --info-vlak:    #eff6ff;  --info-rand:    #bfdbfe;

  /* Vlakken en tekst. Deze draaien om in donkere modus. */
  --vlak:      #ffffff;   /* achtergrond van de pagina */
  --vlak-op:   #ffffff;   /* kaarten en panelen */
  --vlak-rust: var(--grijs-50);
  --vlak-hoog: #ffffff;   /* zwevende dingen: menu, dialoog */
  --rand:        var(--grijs-200);
  --rand-sterk:  var(--grijs-300);
  --tekst:       var(--grijs-900);
  --tekst-zacht: var(--grijs-600);
  --tekst-zwak:  var(--grijs-500);

  /* Zijbalk is altijd donker, ook in lichte modus: dat geeft de app-vorm. */
  --zij-vlak: var(--merk-diep);
  --zij-tekst: color-mix(in oklab, white 78%, var(--merk-diep));
  --zij-tekst-actief: #ffffff;
  --zij-actief: color-mix(in oklab, white 12%, var(--merk-diep));
  --zij-rand: color-mix(in oklab, white 10%, var(--merk-diep));

  /* Ruimte, 4px-raster. */
  --r1: 4px;   --r2: 8px;   --r3: 12px;  --r4: 16px;
  --r5: 20px;  --r6: 24px;  --r8: 32px;  --r10: 40px;
  --r12: 48px; --r16: 64px;

  /* Ronding. */
  --rond-xs: 6px;
  --rond-s:  8px;
  --rond-m:  12px;
  --rond-l:  16px;
  --rond-vol: 9999px;

  /* Schaduw: gelaagd en zacht, nooit een harde zwarte rand. */
  --schaduw-1: 0 1px 2px rgba(16, 18, 20, .05);
  --schaduw-2: 0 1px 3px rgba(16, 18, 20, .07), 0 4px 12px rgba(16, 18, 20, .05);
  --schaduw-3: 0 2px 6px rgba(16, 18, 20, .08), 0 12px 32px rgba(16, 18, 20, .10);
  --schaduw-zij: 1px 0 0 var(--rand);

  /* Typografie. Eén UI-lettertype, plus de systeem-mono voor labels en cijfers. */
  --font: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  --t-xs:  0.75rem;    /* 12 */
  --t-s:   0.8125rem;  /* 13 */
  --t-m:   0.875rem;   /* 14, standaard in de app */
  --t-l:   1rem;       /* 16 */
  --t-xl:  1.125rem;   /* 18 */
  --t-2xl: 1.375rem;   /* 22 */
  --t-3xl: 1.75rem;    /* 28 */

  --lijn-strak: 1.25;
  --lijn: 1.5;

  /* Beweging. */
  --snel: 150ms cubic-bezier(.4, 0, .2, 1);
  --rustig: 220ms cubic-bezier(.4, 0, .2, 1);

  --breedte-zijbalk: 244px;
  --breedte-inhoud: 1120px;
}

/* Donkere modus. Volgt het systeem, tenzij de gebruiker zelf kiest. */
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) { color-scheme: dark; }
}

:root[data-thema="donker"] {
  color-scheme: dark;
  --vlak:      var(--grijs-950);
  --vlak-op:   var(--grijs-900);
  --vlak-rust: var(--grijs-900);
  --vlak-hoog: var(--grijs-800);
  --rand:        color-mix(in oklab, white 9%, var(--grijs-900));
  --rand-sterk:  color-mix(in oklab, white 16%, var(--grijs-900));
  --tekst:       var(--grijs-50);
  --tekst-zacht: var(--grijs-400);
  --tekst-zwak:  var(--grijs-500);

  --merk-tekst: var(--merk);
  --merk-tekst: oklch(from var(--merk) max(l, 0.74) c h);
  --merk-zacht:   color-mix(in oklab, var(--merk-tekst) 20%, var(--grijs-900));
  --merk-zachter: color-mix(in oklab, var(--merk-tekst) 10%, var(--grijs-900));
  --merk-rand:    color-mix(in oklab, var(--merk-tekst) 34%, var(--grijs-900));

  --goed-vlak:   color-mix(in oklab, var(--goed) 14%, var(--grijs-900));
  --goed-rand:   color-mix(in oklab, var(--goed) 34%, var(--grijs-900));
  --goed:        #4ade80;
  --let-op-vlak: color-mix(in oklab, #f59e0b 14%, var(--grijs-900));
  --let-op-rand: color-mix(in oklab, #f59e0b 34%, var(--grijs-900));
  --let-op:      #fbbf24;
  --fout-vlak:   color-mix(in oklab, #ef4444 14%, var(--grijs-900));
  --fout-rand:   color-mix(in oklab, #ef4444 34%, var(--grijs-900));
  --fout:        #f87171;
  --info-vlak:   color-mix(in oklab, #3b82f6 14%, var(--grijs-900));
  --info-rand:   color-mix(in oklab, #3b82f6 34%, var(--grijs-900));
  --info:        #93c5fd;

  --zij-vlak: var(--grijs-900);
  --zij-rand: color-mix(in oklab, white 8%, var(--grijs-900));
  --zij-actief: color-mix(in oklab, white 8%, var(--grijs-900));
  --zij-tekst: var(--grijs-400);

  --schaduw-1: 0 1px 2px rgba(0, 0, 0, .4);
  --schaduw-2: 0 1px 3px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .35);
  --schaduw-3: 0 2px 6px rgba(0, 0, 0, .5), 0 12px 32px rgba(0, 0, 0, .45);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) {
    --vlak: var(--grijs-950); --vlak-op: var(--grijs-900);
    --vlak-rust: var(--grijs-900); --vlak-hoog: var(--grijs-800);
    --rand: color-mix(in oklab, white 9%, var(--grijs-900));
    --rand-sterk: color-mix(in oklab, white 16%, var(--grijs-900));
    --tekst: var(--grijs-50); --tekst-zacht: var(--grijs-400); --tekst-zwak: var(--grijs-500);
    --merk-tekst: var(--merk);
    --merk-tekst: oklch(from var(--merk) max(l, 0.74) c h);
    --merk-zacht: color-mix(in oklab, var(--merk-tekst) 20%, var(--grijs-900));
    --merk-zachter: color-mix(in oklab, var(--merk-tekst) 10%, var(--grijs-900));
    --merk-rand: color-mix(in oklab, var(--merk-tekst) 34%, var(--grijs-900));
    --goed-vlak: color-mix(in oklab, var(--goed) 14%, var(--grijs-900));
    --goed-rand: color-mix(in oklab, var(--goed) 34%, var(--grijs-900));
    --let-op-vlak: color-mix(in oklab, #f59e0b 14%, var(--grijs-900));
    --let-op-rand: color-mix(in oklab, #f59e0b 34%, var(--grijs-900));
    --let-op: #fbbf24;
    --fout-vlak: color-mix(in oklab, #ef4444 14%, var(--grijs-900));
    --fout-rand: color-mix(in oklab, #ef4444 34%, var(--grijs-900));
    --fout: #f87171;
    --info-vlak: color-mix(in oklab, #3b82f6 14%, var(--grijs-900));
    --info-rand: color-mix(in oklab, #3b82f6 34%, var(--grijs-900));
    --info: #93c5fd;
    --zij-vlak: var(--grijs-900);
    --zij-rand: color-mix(in oklab, white 8%, var(--grijs-900));
    --zij-actief: color-mix(in oklab, white 8%, var(--grijs-900));
    --zij-tekst: var(--grijs-400);
    --schaduw-1: 0 1px 2px rgba(0,0,0,.4);
    --schaduw-2: 0 1px 3px rgba(0,0,0,.45), 0 4px 12px rgba(0,0,0,.35);
    --schaduw-3: 0 2px 6px rgba(0,0,0,.5), 0 12px 32px rgba(0,0,0,.45);
  }
}

/* --- 2. Basis ------------------------------------------------------------ */

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

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

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-m);
  line-height: var(--lijn);
  color: var(--tekst);
  background: var(--vlak);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { image-orientation: from-image; max-width: 100%; }
::selection { background: var(--merk); color: var(--op-merk); }

h1, h2, h3 { margin: 0; line-height: var(--lijn-strak); letter-spacing: -.011em; color: var(--tekst); }
h1 { font-size: var(--t-2xl); font-weight: 650; letter-spacing: -.018em; }
h2 { font-size: var(--t-l);  font-weight: 620; }
h3 { font-size: var(--t-m);  font-weight: 620; }
p  { margin: 0 0 var(--r3); }

a { color: var(--merk-tekst); text-decoration: none; transition: color var(--snel); }
a:hover { color: var(--merk-hover); text-decoration: underline; text-underline-offset: 2px; }

/* Eén zichtbare focusring voor de hele app. Toetsenbordgebruikers moeten
   altijd kunnen zien waar ze zijn. */
:focus-visible {
  outline: 2px solid var(--merk-tekst);
  outline-offset: 2px;
  border-radius: var(--rond-xs);
}
:focus:not(:focus-visible) { outline: none; }

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

/* --- 3. App-shell -------------------------------------------------------- */

.app { display: flex; min-height: 100vh; min-height: 100dvh; }

.zijbalk {
  width: var(--breedte-zijbalk);
  flex: none;
  background: var(--zij-vlak);
  border-right: 1px solid var(--zij-rand);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
}

.zij-merk {
  display: flex; align-items: center; gap: var(--r2);
  padding: var(--r5) var(--r4) var(--r4);
  text-decoration: none; min-height: 68px;
}
.zij-merk:hover { text-decoration: none; }
.zij-merk img { height: 30px; width: auto; display: block; }
.zij-merk .naam {
  font-size: var(--t-s); font-weight: 600; letter-spacing: .02em;
  color: var(--zij-tekst-actief); text-transform: uppercase;
}

.zijnav { display: flex; flex-direction: column; gap: 2px; padding: var(--r2) var(--r3); overflow-y: auto; }
.zijnav .kop {
  font-size: var(--t-xs); font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  color: color-mix(in oklab, var(--zij-tekst) 70%, transparent);
  padding: var(--r4) var(--r3) var(--r1);
}
.zijnav a {
  display: flex; align-items: center; gap: var(--r3);
  padding: var(--r2) var(--r3);
  border-radius: var(--rond-s);
  color: var(--zij-tekst);
  font-size: var(--t-m); font-weight: 500;
  transition: background-color var(--snel), color var(--snel);
}
.zijnav a:hover { background: var(--zij-actief); color: var(--zij-tekst-actief); text-decoration: none; }
.zijnav a.actief { background: var(--zij-actief); color: var(--zij-tekst-actief); font-weight: 560; }
.zijnav a svg { width: 18px; height: 18px; flex: none; opacity: .85; }
.zijnav a.actief svg { opacity: 1; }
.zij-onder { margin-top: auto; padding: var(--r3); border-top: 1px solid var(--zij-rand); }

.hoofd { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbalk {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: var(--r3);
  padding: 0 var(--r6);
  min-height: 60px;
  background: color-mix(in oklab, var(--vlak) 82%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--rand);
}
.topbalk .paginanaam { font-size: var(--t-m); font-weight: 600; color: var(--tekst); }
.topbalk .rechts { margin-left: auto; display: flex; align-items: center; gap: var(--r2); }

.inhoud { padding: var(--r8) var(--r6) var(--r16); }
.inhoud-binnen { max-width: var(--breedte-inhoud); margin: 0 auto; }

.paginakop { margin-bottom: var(--r6); }
.paginakop h1 { margin-bottom: var(--r1); }
.paginakop .sub { margin: 0; }

.sub { color: var(--tekst-zacht); font-size: var(--t-m); margin: 0 0 var(--r5); max-width: 70ch; }
.hint { color: var(--tekst-zwak); font-size: var(--t-s); margin-top: var(--r1); }

/* Onderbalk op de telefoon. */
.tabbar { display: none; }

@media (max-width: 1023px) {
  .zijbalk {
    position: fixed; z-index: 60; left: 0; top: 0;
    transform: translateX(-100%);
    transition: transform var(--rustig);
    box-shadow: var(--schaduw-3);
  }
  .zijbalk.open { transform: translateX(0); }
  .scherm-dek {
    position: fixed; inset: 0; z-index: 50; background: rgba(0,0,0,.45);
    opacity: 0; pointer-events: none; transition: opacity var(--rustig);
    backdrop-filter: blur(2px);
  }
  .scherm-dek.zichtbaar { opacity: 1; pointer-events: auto; }
  .inhoud { padding: var(--r5) var(--r4) calc(84px + env(safe-area-inset-bottom)); }
  .topbalk { padding: 0 var(--r4); }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    gap: var(--r1); padding: var(--r2) var(--r2) calc(var(--r2) + env(safe-area-inset-bottom));
    background: color-mix(in oklab, var(--vlak) 88%, transparent);
    backdrop-filter: saturate(180%) blur(12px);
    border-top: 1px solid var(--rand);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: var(--r1); min-height: 52px; padding: var(--r1) 0;
    border-radius: var(--rond-m);
    color: var(--tekst-zwak); font-size: 10px; font-weight: 550;
    letter-spacing: .02em; text-decoration: none;
    transition: color var(--snel), background-color var(--snel);
  }
  .tabbar a svg { width: 20px; height: 20px; }
  .tabbar a.actief { color: var(--merk-tekst); background: var(--merk-zachter); }
  .tabbar a:hover { text-decoration: none; }
}

@media (min-width: 1024px) {
  .hamburger, .scherm-dek { display: none !important; }
}

/* --- 4. Componenten ------------------------------------------------------ */

/* Knop */
.knop {
  --knop-vlak: var(--merk);
  --knop-tekst: var(--op-merk);
  --knop-rand: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--r2);
  padding: 0 var(--r4); height: 38px;
  font-family: inherit; font-size: var(--t-m); font-weight: 550; line-height: 1;
  color: var(--knop-tekst); background: var(--knop-vlak);
  border: 1px solid var(--knop-rand); border-radius: var(--rond-s);
  cursor: pointer; text-decoration: none; white-space: nowrap;
  transition: background-color var(--snel), border-color var(--snel),
              color var(--snel), box-shadow var(--snel), transform var(--snel);
  box-shadow: var(--schaduw-1);
}
.knop:hover { background: var(--merk-hover); color: var(--knop-tekst); text-decoration: none; }
.knop:active { transform: translateY(.5px); box-shadow: none; }
.knop svg { width: 16px; height: 16px; flex: none; }

.knop.grijs {
  --knop-vlak: var(--vlak-op); --knop-tekst: var(--tekst); --knop-rand: var(--rand-sterk);
}
.knop.grijs:hover { background: var(--vlak-rust); color: var(--tekst); }

.knop.stil {
  --knop-vlak: transparent; --knop-tekst: var(--tekst-zacht); --knop-rand: transparent;
  box-shadow: none;
}
.knop.stil:hover { background: var(--vlak-rust); color: var(--tekst); }

.knop.rood { --knop-vlak: var(--fout); --knop-tekst: #fff; }
.knop.rood:hover { background: color-mix(in oklab, var(--fout) 85%, black); }

.knop.mint { --knop-vlak: var(--merk); --knop-tekst: var(--op-merk); }

.knop.klein { height: 30px; padding: 0 var(--r3); font-size: var(--t-s); }
.knop.groot { height: 44px; padding: 0 var(--r5); font-size: var(--t-l); }
.knop.vol { width: 100%; }

.knop:disabled, .knop[aria-disabled="true"] {
  opacity: .5; cursor: not-allowed; pointer-events: none;
}

/* Knop die laadt: tekst blijft staan, er komt een draaiend rondje bij. */
.knop.laadt { pointer-events: none; opacity: .8; }
.knop.laadt::before {
  content: ""; width: 14px; height: 14px; flex: none;
  border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: draai .7s linear infinite;
}

@keyframes draai { to { transform: rotate(360deg); } }

/* Invoer */
label { display: block; font-size: var(--t-s); font-weight: 550; color: var(--tekst); margin: var(--r4) 0 var(--r2); }
input[type=text], input[type=date], input[type=password], input[type=email],
input[type=datetime-local], input[type=number], input[type=search], textarea, select {
  width: 100%; padding: 0 var(--r3); height: 38px;
  font-family: inherit; font-size: var(--t-m); color: var(--tekst);
  background: var(--vlak-op);
  border: 1px solid var(--rand-sterk); border-radius: var(--rond-s);
  transition: border-color var(--snel), box-shadow var(--snel);
}
textarea { min-height: 104px; padding: var(--r3); line-height: var(--lijn); resize: vertical; height: auto; }
select { appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--tekst-zwak) 50%),
                    linear-gradient(135deg, var(--tekst-zwak) 50%, transparent 50%);
  background-position: calc(100% - 17px) 16px, calc(100% - 12px) 16px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-right: var(--r8);
}
input::placeholder, textarea::placeholder { color: var(--tekst-zwak); }
input:hover, textarea:hover, select:hover { border-color: var(--grijs-400); }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--merk-tekst);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--merk-tekst) 22%, transparent);
}
input[type=file] { padding: var(--r2); height: auto; }
input[type=checkbox], input[type=radio] { width: auto; height: auto; accent-color: var(--merk-tekst); }

/* Kaart */
.kaart {
  background: var(--vlak-op);
  border: 1px solid var(--rand);
  border-radius: var(--rond-l);
  overflow: hidden;
  transition: border-color var(--snel), box-shadow var(--snel), transform var(--snel);
}
.kaart:hover { border-color: var(--rand-sterk); box-shadow: var(--schaduw-2); }
.kaart a { text-decoration: none; color: inherit; display: block; }
.kaart a:hover { text-decoration: none; }
.kaart .beeld {
  aspect-ratio: 4 / 3; background: var(--vlak-rust);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.kaart .beeld img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kaart .videoteken { color: var(--tekst-zwak); }
.kaart .inhoud { padding: var(--r3) var(--r4) var(--r4); }
.kaart .knaam {
  font-weight: 580; font-size: var(--t-m); color: var(--tekst); margin: 0 0 var(--r1);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Paneel: een kaart met kop, voor blokken op een scherm. */
.paneel { background: var(--vlak-op); border: 1px solid var(--rand); border-radius: var(--rond-l); }
.paneel > .paneelkop {
  display: flex; align-items: center; gap: var(--r2);
  padding: var(--r4) var(--r5); border-bottom: 1px solid var(--rand);
}
.paneel > .paneelkop h2 { margin: 0; }
.paneel > .paneelkop .rechts { margin-left: auto; }
.paneel > .paneelbody { padding: var(--r5); }

/* Rooster van kaarten */
.rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: var(--r4); }
.tweekolom { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--r6); align-items: start; }
@media (max-width: 900px) { .tweekolom { grid-template-columns: 1fr; gap: var(--r5); } }

/* Badge */
.badge {
  display: inline-flex; align-items: center; gap: var(--r1);
  padding: 2px var(--r2); border-radius: var(--rond-vol);
  font-size: var(--t-xs); font-weight: 560; line-height: 1.6;
  background: var(--vlak-rust); color: var(--tekst-zacht);
  border: 1px solid var(--rand);
}
.badge svg { width: 12px; height: 12px; }
.badge.goed   { background: var(--goed-vlak);   color: var(--goed);   border-color: var(--goed-rand); }
.badge.let-op { background: var(--let-op-vlak); color: var(--let-op); border-color: var(--let-op-rand); }
.badge.fout   { background: var(--fout-vlak);   color: var(--fout);   border-color: var(--fout-rand); }
.badge.info   { background: var(--info-vlak);   color: var(--info);   border-color: var(--info-rand); }
.badge.merk   { background: var(--merk-zacht);  color: var(--merk-tekst); border-color: var(--merk-rand); }

/* Label (tag) */
.labels { display: flex; flex-wrap: wrap; gap: var(--r1); }
.label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; text-transform: uppercase;
  background: var(--vlak-rust); border: 1px solid var(--rand); border-radius: var(--rond-xs);
  padding: 2px var(--r2); color: var(--tekst-zwak);
  display: block; margin: 0;
}

/* Melding (toast-achtig, boven aan de inhoud) */
.melding {
  display: flex; align-items: flex-start; gap: var(--r3);
  padding: var(--r3) var(--r4); margin-bottom: var(--r3);
  border-radius: var(--rond-m); font-size: var(--t-m);
  border: 1px solid var(--rand); background: var(--vlak-op);
  box-shadow: var(--schaduw-1);
  animation: melding-in var(--rustig) both;
}
@keyframes melding-in { from { opacity: 0; transform: translateY(-4px); } }
.melding svg { width: 17px; height: 17px; flex: none; margin-top: 1px; }
.melding.goed { background: var(--goed-vlak); border-color: var(--goed-rand); color: var(--goed); }
.melding.fout { background: var(--fout-vlak); border-color: var(--fout-rand); color: var(--fout); }
.melding.ok   { background: var(--goed-vlak); border-color: var(--goed-rand); color: var(--goed); }
.melding .tekst { color: var(--tekst); }
.melding.goed .tekst, .melding.fout .tekst { color: inherit; }

/* Tabel */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--t-m); }
thead th {
  text-align: left; font-size: var(--t-xs); font-weight: 600; letter-spacing: .04em;
  text-transform: uppercase; color: var(--tekst-zwak);
  padding: var(--r2) var(--r3); border-bottom: 1px solid var(--rand); white-space: nowrap;
}
tbody td { padding: var(--r3); border-bottom: 1px solid var(--rand); vertical-align: middle; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr { transition: background-color var(--snel); }
tbody tr:hover { background: var(--vlak-rust); }

/* Zoekbalk */
.zoekbalk {
  display: flex; flex-wrap: wrap; gap: var(--r3); align-items: flex-end;
  background: var(--vlak-op); border: 1px solid var(--rand);
  padding: var(--r4); border-radius: var(--rond-l); margin-bottom: var(--r5);
}
.zoekbalk .veld { flex: 1; min-width: 150px; }
.zoekbalk label { margin: 0 0 var(--r1); }

/* Lege staat */
.leeg {
  text-align: center; padding: var(--r16) var(--r5);
  border: 1px dashed var(--rand-sterk); border-radius: var(--rond-l);
  background: var(--vlak-rust);
}
.leeg .teken {
  width: 44px; height: 44px; margin: 0 auto var(--r4);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--rond-m); background: var(--vlak-op);
  border: 1px solid var(--rand); color: var(--tekst-zwak);
}
.leeg .teken svg { width: 21px; height: 21px; }
.leeg h3 { margin-bottom: var(--r1); font-size: var(--t-l); }
.leeg p { color: var(--tekst-zacht); margin: 0 auto var(--r5); max-width: 46ch; }
.leeg .knop { margin: 0 auto; }

/* Skeleton, voor het laden */
.skelet {
  background: linear-gradient(90deg, var(--vlak-rust) 25%,
              color-mix(in oklab, var(--vlak-rust) 60%, var(--rand)) 37%, var(--vlak-rust) 63%);
  background-size: 400% 100%;
  animation: schuifglans 1.3s ease-in-out infinite;
  border-radius: var(--rond-xs);
}
@keyframes schuifglans { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.skelet.regel { height: 12px; margin-bottom: var(--r2); }
.skelet.kop { height: 20px; width: 40%; margin-bottom: var(--r4); }
.skelet.vlak { height: 148px; border-radius: var(--rond-m); }

/* Uitklapblok */
details.blok {
  border: 1px solid var(--rand); border-radius: var(--rond-l);
  margin-bottom: var(--r4); background: var(--vlak-op); overflow: hidden;
}
details.blok > summary {
  list-style: none; cursor: pointer; padding: var(--r4) var(--r5);
  display: flex; align-items: center; gap: var(--r3);
  font-weight: 600; font-size: var(--t-m); color: var(--tekst);
  transition: background-color var(--snel);
}
details.blok > summary:hover { background: var(--vlak-rust); }
details.blok > summary::-webkit-details-marker { display: none; }
details.blok > summary .chev { margin-left: auto; color: var(--tekst-zwak); transition: transform var(--rustig); }
details.blok[open] > summary .chev { transform: rotate(90deg); }
details.blok > summary .subhint { font-weight: 400; font-size: var(--t-s); color: var(--tekst-zwak); }
details.blok .blok-inhoud { padding: 0 var(--r5) var(--r5); }

/* Tooltip, zonder JavaScript */
[data-tip] { position: relative; }
[data-tip]::after {
  content: attr(data-tip);
  position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%) translateY(3px);
  background: var(--grijs-900); color: var(--grijs-50);
  font-size: var(--t-xs); font-weight: 500; line-height: 1.4;
  padding: var(--r1) var(--r2); border-radius: var(--rond-xs); white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity var(--snel), transform var(--snel);
  box-shadow: var(--schaduw-2); z-index: 70;
}
[data-tip]:hover::after, [data-tip]:focus-visible::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Themaknop */
.thema-knop {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none;
  background: transparent; border: 1px solid transparent; border-radius: var(--rond-s);
  color: var(--tekst-zacht); cursor: pointer;
  transition: background-color var(--snel), color var(--snel), border-color var(--snel);
}
.thema-knop:hover { background: var(--vlak-rust); color: var(--tekst); border-color: var(--rand); }
.thema-knop svg { width: 17px; height: 17px; }
.thema-knop .maan { display: none; }
:root[data-thema="donker"] .thema-knop .zon { display: none; }
:root[data-thema="donker"] .thema-knop .maan { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-thema="licht"]) .thema-knop .zon { display: none; }
  :root:not([data-thema="licht"]) .thema-knop .maan { display: block; }
}

/* Hamburger */
.hamburger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex: none; margin-right: var(--r1);
  background: transparent; border: 1px solid var(--rand); border-radius: var(--rond-s);
  color: var(--tekst-zacht); cursor: pointer; transition: background-color var(--snel);
}
.hamburger:hover { background: var(--vlak-rust); }
.hamburger svg { width: 17px; height: 17px; }

/* Avatar */
.avatar {
  width: 30px; height: 30px; flex: none; border-radius: var(--rond-vol);
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--merk-zacht); color: var(--merk-tekst);
  font-size: var(--t-xs); font-weight: 650; letter-spacing: .02em;
  border: 1px solid var(--merk-rand);
}

/* Laadscherm */
#laadscherm {
  display: none; position: fixed; inset: 0; z-index: 90; padding: var(--r5);
  background: color-mix(in oklab, var(--grijs-950) 55%, transparent);
  backdrop-filter: blur(3px);
  align-items: center; justify-content: center;
}
#laadscherm.aan { display: flex; animation: melding-in var(--snel) both; }
#laadscherm .doos {
  background: var(--vlak-hoog); border: 1px solid var(--rand);
  border-radius: var(--rond-l); padding: var(--r8) var(--r10);
  text-align: center; max-width: 320px; box-shadow: var(--schaduw-3);
}
.spinner {
  width: 30px; height: 30px; margin: 0 auto var(--r4);
  border: 2.5px solid var(--rand-sterk); border-top-color: var(--merk-tekst);
  border-radius: 50%; animation: draai .7s linear infinite;
}

/* --- 5. Hulpklassen ------------------------------------------------------ */

.rij { display: flex; align-items: center; gap: var(--r3); flex-wrap: wrap; }
.rij.tussen { justify-content: space-between; }
.duw { margin-left: auto; }
.stapel { display: flex; flex-direction: column; gap: var(--r3); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.zacht { color: var(--tekst-zacht); }
.zwak { color: var(--tekst-zwak); }
.klein { font-size: var(--t-s); }
.cijfer { font-size: var(--t-3xl); font-weight: 650; letter-spacing: -.02em; line-height: 1.1;
          font-variant-numeric: tabular-nums; }
.alleen-lezers {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.mint-bar { height: 3px; background: var(--merk-tekst); border: 0; border-radius: 2px; }