/* =============================================================================
   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;

  --merk-hover:   color-mix(in oklab, var(--merk) 88%, black);
  --merk-zacht:   color-mix(in oklab, var(--merk) 12%, white);
  --merk-zachter: color-mix(in oklab, var(--merk) 6%, white);
  --merk-rand:    color-mix(in oklab, var(--merk) 28%, white);
  --op-merk: #ffffff;                       /* tekst op een merkvlak */

  /* 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-zacht:   color-mix(in oklab, var(--merk) 20%, var(--grijs-900));
  --merk-zachter: color-mix(in oklab, var(--merk) 10%, var(--grijs-900));
  --merk-rand:    color-mix(in oklab, var(--merk) 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-zacht: color-mix(in oklab, var(--merk) 20%, var(--grijs-900));
    --merk-zachter: color-mix(in oklab, var(--merk) 10%, var(--grijs-900));
    --merk-rand: color-mix(in oklab, var(--merk) 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); 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);
  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); 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);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--merk) 18%, transparent);
}
input[type=file] { padding: var(--r2); height: auto; }
input[type=checkbox], input[type=radio] { width: auto; height: auto; accent-color: var(--merk); }

/* 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);   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);
  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);
  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); border: 0; border-radius: 2px; }