/* BezitKaart Superadmin — de opmaak, uit de <style> van app/superadmin.html (30 september 2026). */
  :root{
    --merk-donker:#021A30; --merk-oranje:#EE7F15; --merk-blauw:#2877BA;
    --ink:#021A30; --ink-2:#55677B; --ink-3:#8496A8;
    --line:#DFE4EA; --surface:#FFFFFF; --surface-2:#F2F4F7; --bg:#F7F9FB;
    --r:8px; --sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  }
  *{box-sizing:border-box}
  body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.6 var(--sans);}
  .balk{background:var(--merk-donker);color:#fff;padding:10px 18px;display:flex;
    align-items:center;gap:14px;flex-wrap:wrap;}
  .balk b{font-size:15px;letter-spacing:-.01em}
  .balk .rek{flex:1}
  .balk .wie{font-size:12.5px;color:#C6D3DE}
  .balk button{background:none;border:1px solid rgba(255,255,255,.35);color:#fff;
    border-radius:99px;padding:4px 12px;font:12px var(--sans);cursor:pointer;}
  .balk button:hover{border-color:#fff}
  /* Een beheerpagina die er hetzelfde uitziet als de klantomgeving is een pagina waarop je een
     keer per ongeluk de verkeerde knop indrukt. Vandaar het bandje: je weet waar je bent. */
  .beheerband{background:#3A1C05;color:#FFD9A8;font-size:12px;padding:5px 18px;
    display:flex;gap:10px;align-items:center;flex-wrap:wrap}
  .beheerband b{color:#FFB454}

  .vel{max-width:1180px;margin:20px auto 60px;padding:0 18px;}
  .kaartje{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
    padding:16px 18px;margin-bottom:16px;}
  .kaartje h2{margin:0 0 4px;font-size:16px}
  .kaartje .sub{margin:0 0 14px;color:var(--ink-3);font-size:12.5px}
  .leeg{color:var(--ink-3);font-style:italic}

  /* --- systeemstand --- */
  .tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px}
  .tegel{border:1px solid var(--line);border-radius:var(--r);padding:11px 13px;
    background:var(--surface-2)}
  .tegel b{display:block;font-size:25px;font-weight:800;letter-spacing:-.02em;line-height:1.1}
  .tegel span{font-size:12px;color:var(--ink-2)}

  /* --- organisatietabel --- */
  .tabelvak{overflow-x:auto}
  table{border-collapse:collapse;width:100%;font-size:13px;min-width:860px}
  th,td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
  th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3);
    font-weight:700;white-space:nowrap}
  td.getal{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
  tr.gekozen{background:#FFF7EF}
  .naam{font-weight:700}
  /* Gebruikers per organisatie (24 oktober 2026) — een kopregel per organisatie. Geen
     hoofdletters zoals de kolomkoppen: dit is een naam, geen kolom. */
  tr.gebr-groep th{background:var(--surface-2);color:var(--merk-donker);font-size:13px;
    text-transform:none;letter-spacing:0;padding:10px 10px 8px;border-top:12px solid var(--surface)}
  tr.gebr-groep:nth-child(2) th{border-top:0}
  tr.gebr-groep.zonder th{color:var(--ink-2)}
  .gebr-groep-naam{font-weight:800}
  tr.gebr-uit td{opacity:.62}
  /* Ronde 570 — de naam handmatig kunnen wijzigen, zonder een tweede kolom of een
     tweede lade: één klein potloodje naast de bestaande naam, in beide tabellen dezelfde vorm. */
  .naam-potlood{border:0;background:none;padding:2px 4px;margin-left:4px;cursor:pointer;
    font-size:12px;color:var(--ink-3);border-radius:4px;vertical-align:baseline}
  .naam-potlood:hover{color:var(--ink);background:var(--surface-2)}
  .zacht{color:var(--ink-3);font-size:11.5px}
  .merk{display:inline-block;padding:2px 8px;border-radius:99px;font-size:11px;font-weight:700;
    white-space:nowrap}
  .merk.starter{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
  .merk.business{background:#E3EEF8;color:#1B4E77;border:1px solid #BFD8EC}
  .merk.proef{background:#FFF6E5;color:#7A4E06;border:1px solid #F0D6A2}
  .merk.actief{background:#E9F4EC;color:#1F5B33;border:1px solid #BFE0C8}
  .merk.opgezegd{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
  .merk.geblokkeerd{background:#FBEDEA;color:#8C2118;border:1px solid #E8BCB2}

  /* ---- Functies & livegang (ronde 547) --------------------------------------------------
     ⚠️ KLEUR IS NOOIT DE ENIGE DRAGER. Elke chip en elke knop draagt het WOORD (AAN/TEST/UIT,
     ZICHTBAAR/VERBORGEN); de kleur is een tweede signaal en geen eerste. Dezelfde afspraak
     als bij de looptijdstanden van ronde 284. */
  .ff-hier{margin:0 0 10px;font-size:12px;color:var(--ink-2)}
  .ff-preview{margin:0 0 14px;font-size:12px;color:var(--ink-2);
    background:var(--surface-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
  .ff-groepkop{margin:22px 0 6px;font-size:14px}
  .ff-groepkop .sub{font-weight:400}
  .ff-tabel td{vertical-align:top}
  .ff-kiezer{display:flex;flex-direction:column;gap:3px;align-items:flex-start}
  .ff-knoppen{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden}
  .ff-knop{font:600 11px var(--sans);letter-spacing:.03em;padding:5px 9px;border:0;
    background:var(--surface);color:var(--ink-2);cursor:pointer;border-right:1px solid var(--line)}
  .ff-knop:last-child{border-right:0}
  .ff-knop:hover{background:var(--surface-2)}
  .ff-knop.aan.ff-aan{background:#E9F4EC;color:#1F5B33}
  .ff-knop.aan.ff-test{background:#FFF6E5;color:#7A4E06}
  .ff-knop.aan.ff-uit{background:#FBEDEA;color:#8C2118}
  .ff-knop:focus-visible{outline:2px solid var(--merk-blauw);outline-offset:-2px}
  .ff-stand{display:inline-block;font:600 11px var(--sans);padding:2px 8px;border-radius:999px;
    border:1px solid var(--line)}
  .ff-stand.ff-aan{background:#E9F4EC;color:#1F5B33;border-color:#BFE0C8}
  .ff-stand.ff-test{background:#FFF6E5;color:#7A4E06;border-color:#F0D6A2}
  .ff-stand.ff-uit{background:#FBEDEA;color:#8C2118;border-color:#E8BCB2}
  .ff-volgt,.ff-vast{font-size:11px;color:var(--ink-2)}
  .ff-terug{font-size:11px}
  .ff-zicht{display:inline-block;margin-top:4px;font:600 10px var(--sans);letter-spacing:.04em}
  .ff-zicht.ja{color:#1F5B33}
  .ff-zicht.preview{color:#7A4E06}
  .ff-zicht.nee{color:#8C2118}
  .ff-risico{color:#8C2118;font-weight:600}
  .ff-scheef{display:block;font-size:11px;color:#8C2118}
  .ff-detailrij td{background:var(--surface-2)}
  .ff-detail{display:grid;gap:8px;padding:6px 2px}
  .ff-detailregel{display:grid;grid-template-columns:190px 1fr;gap:10px;font-size:12px}
  .ff-detailregel>span{color:var(--ink-2);font-weight:600}
  @media (max-width:820px){
    .ff-detailregel{grid-template-columns:1fr}
    .ff-tabel td{padding-top:10px;padding-bottom:10px}
  }

  /* --- FUNCTIES & RELEASES / ABONNEMENTEN & FEATURES (ronde 638) ------------------------
     Dit is een BEHEERSCHERM met veel informatie: de informatiedichtheid mag hoog zijn zolang
     het rustig blijft. Vandaar compacte rijen, subtiele lijnen en één accentkleur — en geen
     enkele nieuwe kleurwaarde: alles loopt via de bestaande tokens en de vier statuskleuren
     die dit scherm sinds ronde 547 al gebruikt. */
  .ff-tegels{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .ff-tegel{text-align:left;cursor:pointer;font:inherit;border:1px solid var(--line);
    background:var(--surface);transition:border-color .12s,background .12s}
  .ff-tegel:hover{border-color:var(--primary)}
  .ff-tegel.aan{border-color:var(--primary);background:#FFF7EF}
  .ff-tegel:focus-visible{outline:2px solid var(--merk-blauw);outline-offset:2px}

  .ff-filters{align-items:center;gap:6px;flex-wrap:wrap}
  .ff-nadruk{border-color:var(--primary);color:var(--primary-tekst);font-weight:700}
  .ff-scheiding{width:1px;height:20px;background:var(--line);margin:0 4px}
  .ff-cat{min-width:180px}
  .ff-pdf{margin-left:auto}

  /* De statusbadge. ⚠️ Het TEKEN is nooit de enige drager — het woord staat ernaast, en in de
     smalle omgevingskolommen zit de volledige uitleg in het title-attribuut. */
  .ff-badge{display:inline-flex;align-items:center;gap:5px;font:600 11px var(--sans);
    padding:2px 8px;border-radius:999px;border:1px solid var(--line);white-space:nowrap}
  .ff-badge b{font-size:12px;line-height:1}
  .ff-b-live{background:#E9F4EC;color:#1F5B33;border-color:#BFE0C8}
  .ff-b-test{background:#FFF6E5;color:#7A4E06;border-color:#F0D6A2}
  .ff-b-ontwikkeling{background:#EAF1FA;color:#1B4A7A;border-color:#BFD5EC}
  .ff-b-uit{background:#FBEDEA;color:#8C2118;border-color:#E8BCB2}
  .ff-b-gepland{background:var(--surface-2);color:var(--ink-3);border-color:var(--line)}

  .ff-groep{margin:18px 0 0}
  .ff-groepkop{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
    border-bottom:2px solid var(--line);padding-bottom:5px}
  .ff-klap{font:700 13px var(--sans);color:var(--ink);background:none;border:0;padding:0;
    cursor:pointer;display:inline-flex;align-items:center;gap:6px}
  .ff-klap:hover{color:var(--primary-tekst)}
  .ff-klap:focus-visible{outline:2px solid var(--merk-blauw);outline-offset:2px}
  .ff-chevron{font-size:10px;color:var(--ink-3)}
  .ff-groeptel{font:600 11px var(--sans);color:var(--ink-3)}
  .ff-groepsub{font-weight:400;margin-left:auto}

  /* ⚠️⚠️ VASTE KOLOMKOP BIJ HET SCROLLEN (ronde 750, herhaald gevraagd — de eerdere opzet uit
     637 stond hier al met `position:sticky`, maar STOND STIL: `.tabelvak{overflow-x:auto}`
     dwingt de browser om `overflow-y` — ondanks dat die nergens gezet wordt — óók naar `auto`
     te promoveren (de CSS-spec verbiedt zichtbaar op de ene as en niet-zichtbaar op de andere).
     Daardoor werd `.tabelvak` zélf het "dichtstbijzijnde scrollende voorouderelement" voor de
     sticky `th`, en omdat die `div` geen vaste hoogte heeft (hij past zich aan zijn inhoud aan
     en scrolt dus nooit intern), verschoof de kop gewoon MEE met de pagina — GEMETEN met een
     echte browser: vóór scrollen `top:569,6px`, na 600px scrollen `top:-30,4px`, exact het
     scrollbedrag. `position:sticky` op de `th` was dus met geen letter fout, de scrolcontext
     eromheen wél. Vier alternatieven zijn LANGS DEZELFDE METING geprobeerd (`overflow-y:clip`
     en `:hidden` bleven allebei net zo stuk — die maken `.tabelvak` nóg steeds de scrollcontext,
     alleen zonder zichtbare balk); wat wél werkt is een EIGEN, begrensde hoogte geven: dan is
     `.tabelvak` zelf de bedoelde scrollcontext (horizontaal én verticaal, geen promotie-conflict
     meer) en scrolt de tabel binnen zijn eigen paneel met de kop erboven vastgeplakt — hetzelfde
     "bevroren rij"-patroon als een spreadsheet. `.tabelvak-vast` staat naast de bestaande
     `.tabelvak` (die overal elders ongewijzigd blijft) en wordt alleen op déze twee tabellen
     gezet. */
  .ff-tabel thead th, .fm-tabel thead th{position:sticky;top:0;z-index:2;
    background:var(--surface-2);box-shadow:inset 0 -1px 0 var(--line)}
  .tabelvak-vast{max-height:65vh;overflow-y:auto}
  .ff-tabel td{font-size:12.5px}
  .ff-naam{font-weight:600;text-align:left}
  .ff-rij{cursor:pointer}
  .ff-rij:not(.ff-actief):hover td{background:var(--surface-2)}
  .ff-kol-omg{width:118px}
  .ff-kol-st{width:132px}
  .ff-kol-ab{width:126px}
  .ff-opm{color:var(--ink-2);max-width:420px}
  .ff-afwijk{margin-left:5px;font-weight:700;color:#7A4E06;cursor:help}
  .ff-actief td{background:#FFF7EF}
  .ff-onbepaald{background:var(--surface-2);color:var(--ink-3);border:1px dashed var(--line)}
  .ff-zusjes{font-size:12px;color:var(--ink-2)}

  .ff-legenda{display:flex;flex-wrap:wrap;gap:14px;align-items:center;margin:10px 0 4px;
    padding:8px 10px;background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
    font-size:11.5px}
  .ff-leg{display:inline-flex;align-items:center;gap:6px}

  /* =======================================================================================
     HET PRIJSBEHEER (ronde 720, visueel herzien in ronde 722)
     =======================================================================================
     ⚠️ Geen nieuw ontwerpsysteem: alles hieronder gebruikt de bestaande tokens
     (`--merk-*`, `--ink-*`, `--line`, `--surface*`, `--r`) en de bestaande bouwstenen
     (`kaartje`, `velden`, `veld`, `knop`). Wat erbij is gekomen is RUIMTE en HIËRARCHIE:
     één accentkleur per pakket, het bedrag dat de klant betaalt als grootste element op de
     kaart, en de twee instellingen die niet over één pakket gaan (jaarbetaling, bestaande
     klanten) náást elkaar ónder de kaarten in plaats van eronder gestapeld.

     ⚠️ De accentkleuren zijn ALLEEN een herkenningsteken per pakket; ze dragen geen
     betekenis die ergens anders ook gelezen wordt (dat doen `.merk.business` en de
     statuskleuren wél). Kleur is hier dus nooit de enige drager: de pakketnaam staat er
     voluit boven. */

  .ap-sectie{padding:20px 22px 18px}
  .ap-kop{display:flex;gap:18px;align-items:flex-start;flex-wrap:wrap}
  .ap-kop-tekst{flex:1 1 340px;min-width:0}
  .ap-sectie h2{font-size:22px;letter-spacing:-.01em;margin:0 0 6px}
  .ap-sectie .ap-kop-tekst .sub{margin:0;max-width:62ch;font-size:13px;line-height:1.55}

  /* Het omgevingsvak: uitsluitend wat op dit scherm GEMETEN kan worden. */
  .ap-omgeving{flex:0 1 360px;display:flex;gap:10px;align-items:flex-start;
    background:#EDF4FA;border:1px solid #CFE1F0;border-radius:var(--r);padding:10px 12px;
    font-size:12px;line-height:1.5;color:#1B4E77}
  .ap-omgeving b{color:#123A57}
  .ap-omgeving .zacht{color:#3E6E96;font-size:11.5px}
  .ap-omg-icoon{flex:0 0 auto;margin-top:1px}

  .ap-waarschuwing{display:flex;gap:10px;align-items:flex-start;margin:16px 0 0;
    padding:11px 14px;border-radius:var(--r);background:#FFF6E8;border:1px solid #F3D6A6;
    color:#7A4E06;font-size:13px;line-height:1.5}
  .ap-waarschuwing b{color:#5E3A03}
  .ap-waarschuwing svg{flex:0 0 auto;margin-top:1px}

  /* ---- de drie pakketkaarten ---- */
  .ap-kaarten{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:16px;
    margin:18px 0 0;align-items:start}
  .ap-kaart{margin:0;padding:0;overflow:hidden;display:flex;flex-direction:column;
    /* Per pakket één accent; de standaard is het huisstijlblauw, zodat een pakket dat er
       later bij komt niet zonder kleur valt. */
    --ap-accent:var(--merk-blauw); --ap-vlak:#EDF4FA; --ap-rand:#CFE1F0;}
  .ap-kaart-basic{--ap-accent:#2877BA; --ap-vlak:#EDF4FA; --ap-rand:#CFE1F0}
  .ap-kaart-professional{--ap-accent:#1F7A54; --ap-vlak:#ECF6F1; --ap-rand:#C6E3D4}
  .ap-kaart-business{--ap-accent:#6B4BA8; --ap-vlak:#F2EFFA; --ap-rand:#D8CFEE}

  .ap-kaart-kop{display:flex;gap:11px;align-items:flex-start;padding:15px 16px 13px;
    background:var(--ap-vlak);border-bottom:1px solid var(--ap-rand)}
  .ap-icoon{flex:0 0 auto;width:32px;height:32px;border-radius:9px;background:#fff;
    border:1px solid var(--ap-rand);display:flex;align-items:center;justify-content:center;
    color:var(--ap-accent)}
  .ap-kaart-kop > div{flex:1 1 auto;min-width:0}
  .ap-kaart h3{margin:0;font-size:18px;letter-spacing:-.01em;color:var(--ap-accent)}
  .ap-doel{margin:3px 0 0;font-size:12px;line-height:1.45;color:var(--ink-2)}
  .ap-vuil{flex:0 0 auto;align-self:center;font:600 10px var(--sans);padding:3px 8px;
    border-radius:99px;background:#FFF1DC;color:#7A4E06;border:1px solid #F0D6A2;
    white-space:nowrap}

  .ap-lijf{padding:14px 16px 0;flex:1 1 auto}
  .ap-tel{margin:0 0 12px;font-size:11.5px;color:var(--ink-3)}
  .ap-kaart .velden{margin:0 0 12px;grid-template-columns:1fr}
  /* ⚠️ `min-width:0` IS HIER GEEN NETHEID. Een grid-item heeft standaard `min-width:auto`,
     dus het krimpt niet onder de breedte van zijn eigen inhoud — en dan puilt de rechterkolom
     buiten de kaart uit zodra het vaste vak of de uitleg breder wil zijn dan de helft. */
  .ap-kaart .velden.ap-duo{grid-template-columns:1fr 1fr;gap:12px;align-items:start}
  .ap-kaart .velden.ap-duo > .veld{min-width:0}
  .ap-kaart .veld label,
  .ap-kaart .veld > .veld-label{font:700 11.5px var(--sans);color:var(--ink-2)}
  .ap-kaart .zacht{margin-top:1px;line-height:1.4}

  /* Een bedragveld draagt zijn eenheid ZICHTBAAR, zodat "19" niet als 19 cent of 1900 kan
     worden gelezen. Het euroteken staat in de schil en niet in de waarde: wat de gebruiker
     typt blijft precies wat er wordt ingelezen. */
  .ap-bedrag-veld{display:flex;align-items:stretch;border:1px solid var(--line);
    border-radius:var(--r);background:var(--surface);overflow:hidden}
  .ap-bedrag-veld:focus-within{border-color:var(--merk-blauw);
    box-shadow:0 0 0 3px rgba(40,119,186,.16)}
  .ap-teken{flex:0 0 auto;display:flex;align-items:center;padding:0 9px;
    background:var(--surface-2);border-right:1px solid var(--line);
    color:var(--ink-2);font-size:12.5px}
  .ap-bedrag-veld input{border:0;border-radius:0;flex:1 1 auto;min-width:0;background:none}
  .ap-bedrag-veld input:focus{outline:none}
  .ap-bedrag-veld input:disabled{background:var(--surface-2);color:var(--ink-3)}
  .ap-achter{flex:0 0 auto;display:flex;align-items:center;padding:0 9px;
    background:var(--surface-2);border-left:1px solid var(--line);
    color:var(--ink-3);font-size:11.5px}

  /* ⚠️ READ-ONLY EN NIET AANKLIKBAAR-ogend. Het inbegrepen aantal gebruikers komt uit
     `private.plan_seats_inbegrepen()` en bedient daar de seatgrendel; een veld dat eruitziet
     als een invoerveld belooft iets wat dit scherm niet kan waarmaken. */
  .ap-vast{display:flex;align-items:center;gap:7px;padding:7px 9px;border-radius:var(--r);
    background:var(--surface-2);border:1px dashed var(--line);color:var(--ink-2);
    font-size:13px;min-height:35px}
  .ap-vast svg{flex:0 0 auto;color:var(--ink-3)}
  .ap-vast b{color:var(--ink)}

  .ap-samenvatting{margin-top:auto;padding:13px 16px 15px;background:var(--ap-vlak);
    border-top:1px solid var(--ap-rand);text-align:center}
  .ap-som{font:700 26px/1.1 var(--sans);letter-spacing:-.02em;color:var(--ap-accent)}
  .ap-som .ap-per{font-size:13px;font-weight:600;color:var(--ink-2)}
  .ap-daarna{margin-top:4px;font-size:12px;color:var(--ink-2)}
  .ap-geenprijs{font-size:13px;color:var(--ink-3);font-style:italic}

  /* ---- de twee instellingen die niet over één pakket gaan ---- */
  .ap-onder{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;
    margin-top:16px;align-items:start}
  .ap-onder > .kaartje{margin:0}
  .ap-onder h3{display:flex;align-items:center;gap:9px;margin:0 0 3px;font-size:15px}
  .ap-onder h3 .ap-icoon{width:28px;height:28px;border-radius:8px;
    background:#EDF4FA;border-color:#CFE1F0;color:var(--merk-blauw)}

  /* De schakelaar: dezelfde vormtaal als het laagvinkje in de kaarttool — een schuifje dat
     zegt of iets aan of uit staat, met de tekst ernaast als het echte label. */
  .ap-schakel{display:flex;gap:11px;align-items:flex-start;margin:12px 0 0;cursor:pointer}
  .ap-schakel input{position:absolute;opacity:0;width:0;height:0}
  .ap-schuif{flex:0 0 auto;width:38px;height:21px;border-radius:99px;background:var(--line);
    position:relative;transition:background .16s ease;margin-top:1px}
  .ap-schuif::after{content:'';position:absolute;top:2px;left:2px;width:17px;height:17px;
    border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(2,26,48,.28);
    transition:transform .16s ease}
  .ap-schakel input:checked + .ap-schuif{background:var(--merk-oranje)}
  .ap-schakel input:checked + .ap-schuif::after{transform:translateX(17px)}
  .ap-schakel input:focus-visible + .ap-schuif{box-shadow:0 0 0 3px rgba(40,119,186,.3)}
  .ap-schakel-tekst{font-size:13px;line-height:1.45}
  .ap-schakel-tekst .zacht{display:block;margin-top:1px}

  .ap-jaar-velden{margin-top:12px}
  .ap-jaar-velden .veld{max-width:220px}
  /* Jaarprijzen bestaan per pakket. Ze horen NIET op de pakketkaart: daar gaat het over wat
     een klant vandaag betaalt, en jaarbetaling staat standaard uit. Staat hij uit, dan staan
     ze hier uitgeschakeld mét de reden — verbergen zou de bewaarde bedragen onvindbaar maken. */
  .ap-jaarprijzen{margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
  .ap-jaarprijzen h4{margin:0 0 2px;font-size:11.5px;text-transform:uppercase;
    letter-spacing:.04em;color:var(--ink-3)}
  .ap-jaarprijzen .velden{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:10px 0 0}
  .ap-jaar-uit{opacity:.62}

  /* De drie-weg-keuze. Een fieldset zodat een schermlezer de groep als één keuze aankondigt. */
  .ap-radios{border:0;margin:12px 0 0;padding:0}
  .ap-radios legend{padding:0;font-size:0;height:0;overflow:hidden}
  .ap-radio{display:flex;gap:10px;align-items:flex-start;margin:0 0 6px;padding:10px 12px;
    border:1px solid var(--line);border-radius:var(--r);cursor:pointer;
    transition:border-color .12s ease, background .12s ease}
  .ap-radio:hover{border-color:var(--merk-blauw)}
  .ap-radio:has(input:checked){border-color:var(--merk-blauw);background:#EDF4FA}
  .ap-radio:has(input:focus-visible){box-shadow:0 0 0 3px rgba(40,119,186,.22)}
  .ap-radio input{margin:3px 0 0;flex:0 0 auto;accent-color:var(--merk-blauw)}
  .ap-radio-tekst{font-size:13px;line-height:1.45}
  .ap-radio-tekst b{display:block}
  .ap-radio .sub{display:block;margin:1px 0 0;font-size:11.5px;color:var(--ink-2)}
  .ap-aanbevolen{font:600 10px var(--sans);padding:1px 7px;border-radius:99px;
    background:#ECF6F1;color:#1F5B33;border:1px solid #C6E3D4;margin-left:6px;
    vertical-align:1px}

  /* ---- de ene actiebalk ---- */
  .ap-balk{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:18px;
    padding-top:14px;border-top:1px solid var(--line)}
  .ap-balk .rek{flex:1 1 auto}
  .ap-laatst{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--ink-3)}
  .ap-balk .knop{padding:8px 16px;font-size:13px}
  .ap-balk .knop-primair{padding:8px 20px}
  .ap-balk .knop[disabled]{opacity:.5;cursor:not-allowed}
  .ap-balk .knop[disabled]:hover{border-color:var(--line);color:var(--ink-2)}
  .ap-balk .knop-primair[disabled]:hover{border-color:var(--merk-oranje);color:#fff}

  .ap-lijst{margin:8px 0 0;padding-left:18px;font-size:13px}
  .ap-lijst li{margin:3px 0}

  @media (max-width:760px){
    .ap-sectie{padding:16px 14px 14px}
    .ap-sectie h2{font-size:19px}
    .ap-kaart .velden.ap-duo{grid-template-columns:1fr}
    .ap-balk .knop{flex:1 1 auto;text-align:center}
  }

  /* De abonnementenmatrix — commerciëler van toon, dezelfde bouwstenen. */
  .fm-tabel td{vertical-align:top;font-size:12.5px}
  .fm-groeprij th{background:var(--surface-2);font:700 12px var(--sans);
    text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2);padding-top:12px}
  .fm-naam{max-width:520px}
  .fm-cel{width:120px;text-align:center}
  .fm-cel .sub{display:block;font-weight:400;text-transform:none;letter-spacing:0}
  .fm-min{width:120px;color:var(--ink-2)}
  .fm-ja{color:#1F5B33;font-weight:700;font-size:15px}
  .fm-nee{color:var(--ink-3);font-size:15px}
  .fm-gepland{color:var(--ink-3);font-size:15px}
  .fm-tag{display:inline-block;font:600 10px var(--sans);padding:1px 6px;border-radius:999px;
    background:var(--surface-2);color:var(--ink-3);border:1px solid var(--line);
    vertical-align:middle}
  .fm-tag-beta{background:#FFF6E5;color:#7A4E06;border-color:#F0D6A2}
  .fm-tag-open{background:transparent;border-style:dashed}

  .fm-wijzig{font-weight:600;text-align:left}
  .fm-keuzes{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}

  /* De afdrukkop: op het scherm weg, in de PDF de eerste regel. */
  .ff-printkop{display:none}

  @media (max-width:1100px){
    .ff-groepsub{display:none}
    .ff-opm{display:none}
  }

  /* --- Feedback en wensen (ronde 526) --- */
  .fb-kolommen{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
    gap:14px;margin:14px 0}
  .fb-kolommen h3{margin:0 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;
    color:var(--ink-3)}
  .fb-top{list-style:none;margin:0;padding:0;font-size:12.5px}
  .fb-top li{display:flex;justify-content:space-between;gap:10px;padding:3px 0;
    border-bottom:1px solid var(--line)}
  .fb-top li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .fb-detail{padding:4px 2px 8px;font-size:13px}
  .fb-detail p{margin:0 0 8px}
  .fb-vorm{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end;margin:10px 0 14px}
  .fb-vorm label{display:flex;flex-direction:column;gap:3px;font-size:11px;
    text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
  .fb-vorm label.breed{flex:1 1 260px}
  .fb-vorm select,.fb-vorm textarea{font:13px var(--sans);padding:6px 8px;border-radius:8px;
    border:1px solid var(--line);background:var(--surface);color:var(--ink)}
  .fb-meldingen{list-style:none;margin:0;padding:0;font-size:12.5px}
  .fb-meldingen li{padding:7px 0;border-top:1px solid var(--line)}
  .fb-melding-kop{color:var(--ink-3);font-size:11.5px}
  .fb-melding-vraag{margin-top:2px}
  .fb-cls{font-style:italic}
  tr.fb-detailrij td{background:var(--surface-2)}
  /* Wensbeker-weekoverzicht (migratie 222) */
  .fb-week-periode{margin:0 0 8px;font-size:13px}
  .fb-week-kop{margin:16px 0 6px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-3)}
  .fb-vak{font-size:17px;line-height:1;width:22px;vertical-align:top}
  .fb-afwijking{color:var(--merk-oranje);font-weight:700;font-size:12px;margin-top:2px}
  .fb-nummers{color:var(--ink-3);font-size:11px;margin-top:2px}
  .fb-signalen{margin:4px 0 10px;padding-left:18px;font-size:12.5px;color:var(--merk-oranje)}
  .fb-uitleg{font-size:11.5px}
  .fb-tekst{white-space:pre-wrap;max-width:420px}

  .knop{font:12.5px var(--sans);padding:6px 12px;border-radius:99px;cursor:pointer;
    border:1px solid var(--line);background:var(--surface);color:var(--ink-2)}
  .knop:hover{border-color:var(--merk-blauw);color:var(--ink)}
  .knop-primair{background:var(--merk-oranje);border-color:var(--merk-oranje);color:#fff;
    font-weight:600}
  .knop-primair:hover{color:#fff}
  .knop:disabled{opacity:.55;cursor:default}

  /* --- de lade met één organisatie --- */
  .lade{border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;
    background:var(--surface-2);margin-top:14px}
  .lade[hidden]{display:none}
  /* ⚠️ ELK TOEVOEG-/WIJZIGFORMULIER ALS VENSTER (30 september 2026) — de klasse zet
     app/superadmin/kern/modaal.js op elke zichtbare .lade op het hoogste niveau. Lagen, van
     onder naar boven: venster 900 · keuzemenu 1000 · bevestiging 1050 · melding 1100. */
  body.sa-modaal-open{overflow:hidden}
  .sa-modaal-wand{position:fixed;inset:0;z-index:899;background:rgba(2,26,48,.45)}
  .lade.sa-modaal{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:900;
    width:min(680px,calc(100vw - 32px));max-height:calc(100vh - 48px);overflow-y:auto;
    margin:0;padding:22px 24px 20px;background:var(--surface);border:0;border-radius:14px;
    box-shadow:0 24px 64px rgba(2,26,48,.28)}
  .lade.sa-modaal:focus{outline:none}
  .lade.sa-modaal > h3{font-size:17px;margin:0 36px 4px 0}
  .lade.sa-modaal .velden{margin-top:14px}
  #lade.sa-modaal{width:min(820px,calc(100vw - 32px))}
  .sa-modaal-x{position:absolute;top:12px;right:12px;width:32px;height:32px;border:0;
    border-radius:8px;background:transparent;color:var(--ink-2);font:22px/1 var(--sans);
    cursor:pointer}
  .sa-modaal-x:hover{background:var(--surface-2);color:var(--ink)}
  .sa-modaal-x:focus-visible{outline:2px solid var(--merk-blauw);outline-offset:1px}
  .lade.sa-modaal .lade{background:var(--surface-2)}
  /* Veldfouten (Beheerder toevoegen): onder het veld, rood, en het veld zelf met een rode rand. */
  .veld-fout{color:#8C2118;font-size:12px;margin-top:3px}
  .veld input[aria-invalid="true"]{border-color:#C0392B}
  @media (max-width:560px){ .lade.sa-modaal{padding:18px 16px;border-radius:12px} }
  .lade h3{margin:0 0 2px;font-size:15px}
  .velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;
    margin:12px 0}
  .veld{display:flex;flex-direction:column;gap:3px}
  .veld label{font-size:11px;font-weight:700;color:var(--ink-2)}
  .veld input,.veld select{font:13px var(--sans);padding:7px 9px;border:1px solid var(--line);
    border-radius:var(--r);background:var(--surface);color:var(--ink)}
  .lijst{margin:10px 0 0;padding:0;list-style:none;font-size:13px}
  .lijst li{padding:5px 0;border-bottom:1px solid var(--line)}
  .lijst li:last-child{border-bottom:none}
  .waarschuwing{margin:10px 0 0;font-size:12px;line-height:1.5;color:#7A4E06;
    background:#FFF6E5;border:1px solid #F0D6A2;border-radius:var(--r);padding:8px 10px}

  /* Het aanmeldscherm van de kern hangt aan deze klassen; ze staan ook in index.html. */
  .start-scherm{position:fixed;inset:0;z-index:6500;display:flex;align-items:center;
    justify-content:center;background:rgba(2,26,48,.55);padding:24px;}
  .start-scherm[hidden]{display:none}
  .start-paneel{width:min(520px,100%);max-height:calc(100vh - 48px);overflow:auto;
    background:var(--surface);border-radius:14px;padding:22px 24px;
    box-shadow:0 18px 50px rgba(2,26,48,.28);}
  .start-paneel h2{margin:0 0 6px;font-size:19px;font-weight:800;letter-spacing:-.01em}
  .start-uitleg{margin:0 0 14px;font-size:13px;color:var(--ink-2);line-height:1.5}
  .start-formulier{display:flex;flex-direction:column;gap:9px;margin-bottom:12px}
  .start-veld{display:flex;flex-direction:column;gap:3px}
  .start-veld label{font-size:11.5px;font-weight:700;color:var(--ink-2);
    display:flex;align-items:baseline;gap:6px}
  .start-veld label i{font-style:normal;font-size:10px;font-weight:600;color:var(--ink-3);
    text-transform:uppercase;letter-spacing:.04em}
  .start-veld input, .start-veld select{width:100%;font:13px var(--sans);color:var(--ink);
    padding:8px 10px;border:1px solid var(--line);border-radius:var(--r);
    background:var(--surface);box-sizing:border-box;}
  .start-veld input:focus, .start-veld select:focus{outline:2px solid var(--merk-blauw);
    border-color:var(--merk-blauw)}
  .start-fout{margin:0 0 12px;font-size:12px;line-height:1.45;color:#8C2118;
    background:#FDEEEC;border:1px solid #EBA9A3;border-radius:var(--r);padding:8px 10px}
  .start-fout[hidden]{display:none}
  .start-acties{display:flex;gap:9px;flex-wrap:wrap}
  .uv-knop{font:13px var(--sans);padding:8px 14px;border-radius:99px;cursor:pointer;
    border:1px solid var(--line);background:var(--surface);color:var(--ink)}
  .uv-knop-primair{background:var(--merk-oranje);border-color:var(--merk-oranje);color:#fff;
    font-weight:600}
  .uv-knop:disabled{opacity:.6;cursor:default}
  .acc-links{display:flex;gap:14px;flex-wrap:wrap;margin-top:12px}
  .acc-links button, .acc-tekstknop{background:none;border:none;padding:0;cursor:pointer;
    font:12px var(--sans);color:var(--merk-blauw);text-decoration:underline}
  .acc-melding{margin:0 0 12px;font-size:12px;line-height:1.45;color:var(--ink-2);
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);padding:8px 10px}
  .start-merk{margin-bottom:14px;font-weight:800;color:var(--merk-donker)}
  .start-voet{font-size:12px;color:var(--ink-2);margin-top:14px}
  .melding{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:1100;
    background:var(--merk-donker);color:#fff;padding:9px 16px;border-radius:99px;
    font-size:13px;max-width:90vw;box-shadow:0 8px 24px rgba(2,26,48,.3)}
  .melding[hidden]{display:none}
  .melding.fout{background:#8C2118}

  /* ============================================================================
     DE SCHIL (ronde 320) — zijnavigatie, kop, inhoudsvlak

     Gevraagd is een moderne, rustige beheeromgeving in de BezitKaart-huisstijl: donkerblauw en
     oranje, veel witruimte, kaarten, subtiele iconen, statusbadges, hover states en skeletons.
     Wat hier NIET gebeurt is een tweede ontwerptaal introduceren: dezelfde kleuren, dezelfde
     radius, dezelfde typografie als de rest van het product.
     ============================================================================ */
  .sa-app{display:flex;min-height:100vh;align-items:stretch}

  /* --- RONDE 522: de omgevings- en migratiebalk ---
     ⚠️ `sticky` en niet `fixed`: fixed haalt hem uit de stroom en dan moet er een hoogte
     hardgecodeerd worden die met de tekstlengte meebeweegt. Sticky houdt hem bovenaan zonder
     dat er ergens een getal geraden wordt. De zijbalk is óók sticky op top:0, dus die krijgt
     de gemeten balkhoogte mee via `--sa-balk` — anders schuift hij eronder. Staat er geen
     balk, dan is de variabele 0px en is dit letterlijk het gedrag van vóór deze ronde. */
  .sa-balk{position:sticky;top:0;z-index:60}
  .sa-balk-regel{display:flex;gap:10px;align-items:flex-start;padding:9px 18px;
    font-size:13.5px;line-height:1.45;font-weight:600;letter-spacing:-.005em}
  .sa-balk-regel b{font-weight:800;letter-spacing:.02em}
  .sa-balk-regel span{font-weight:500;opacity:.92}
  .sa-balk-test {background:#7A4E00;color:#FFF1D9;box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}
  .sa-balk-drift{background:#8C1A09;color:#FFE6E1;box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}
  /* Ronde 719: de RUSTIGE stand — testomgeving op het aparte DEV-project. Bewust blauwgrijs
     en niet oranje: dit is een mededeling waar je moet zijn, geen waarschuwing. */
  .sa-balk-dev  {background:#123A57;color:#DCEBF7;box-shadow:inset 0 -1px 0 rgba(0,0,0,.25)}
  .sa-balk-dev code{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.92em;
                    background:rgba(255,255,255,.12);padding:1px 5px;border-radius:4px}

  /* --- de zijbalk --- */
  /* ⚠️⚠️ RONDE 791 — ACHTTIEN ONDERDELEN ZONDER TE SCROLLEN, GEMETEN OP 100% BEELDSCHERM.
     Gevraagd: "ik wil dat dit menu op 100% beeldscherm allemaal zichtbaar is, zonder te hoeven
     scrollen. voeg waar nodig sommige hoofdstukken samen." Gemeten met een echte browser vóór
     er iets gewijzigd was: op 1366×768 (nog steeds veelgebruikt) had `.sa-zij` maar 730px
     beschikbaar terwijl de navigatie er ~845px nodig had — een tekort van ~115px, dus scrolde
     de navigatie zelf altijd al (`.sa-nav{overflow-y:auto}` ving dat op, maar verborg dan de
     onderste onderdelen zonder dat te laten zien). Samenvoegen bleek NIET nodig: dichtere
     opmaak (kleinere padding/font/iconen op knop, logo en voet) volstond. Er is dus NIETS
     samengevoegd of verwijderd: alle achttien `SA_SECTIES` staan er nog, in dezelfde volgorde,
     met hetzelfde `data-sa`-attribuut en dezelfde hash-routes.
     ⚠️ Eén knop wijkt af qua hoogte: "Abonnementen & Features" is de langste naam en wikkelt
     binnen de vaste 232px-breedte naar twee regels (40px in plaats van 26px) — de andere
     zeventien blijven één regel. Gemeten resultaat ná deze ronde: de navigatie zelf heeft nu
     499px nodig (17 × 26px + 1 × 40px + 17 tussenruimtes van 1px), en met het logo- (57px) en
     voetblok (59px) erbij past de hele zijbalk ruim binnen 730px — 148px marge over. Bevestigd
     op 1024×768, 1280×720 en 1366×700 (telkens ~148px marge); pas bij een venster van 600px
     hoog — korter dan een reëel "100% beeldscherm"-venster — is er weer een scrollbalk nodig. */
  .sa-zij{flex:0 0 232px;background:var(--merk-donker);color:#C6D3DE;display:flex;
    flex-direction:column;padding:12px 10px;position:sticky;
    top:var(--sa-balk,0px);height:calc(100vh - var(--sa-balk,0px))}
  .sa-merk{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:3px 8px 9px}
  .sa-merk img{display:block;height:24px;width:auto;max-width:100%}
  .sa-merk span{display:block;font-size:10.5px;color:#7E93A8;letter-spacing:.02em}

  .sa-nav{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;overflow-y:auto;
    scrollbar-width:thin}
  .sa-nav a{display:flex;align-items:center;gap:9px;width:100%;text-align:left;text-decoration:none;
    border:0;background:transparent;color:#A9BCCE;font:12.5px var(--sans);font-weight:600;
    padding:5px 9px;border-radius:var(--r);cursor:pointer;
    transition:background .12s,color .12s}
  .sa-nav a svg{width:16px;height:16px;flex:0 0 auto;opacity:.8}
  .sa-nav a .rek{flex:1}
  .sa-nav a.actief{background:rgba(255,255,255,.10);color:#fff;
    box-shadow:inset 3px 0 0 var(--merk-oranje)}
  .sa-nav a.actief svg{opacity:1;color:var(--merk-oranje)}
  /* Een onderdeel dat nog gebouwd wordt staat er wel maar doet niet alsof: gedempt, met een
     stipje. Zelfde afspraak als in de uitvoeringsmodule. */
  .sa-nav a.later{opacity:.55}
  /* ACCOUNT AANVRAGEN (28 september 2026) — het aantal NIEUWE aanvragen naast het onderdeel.
     Het getal staat er als woorden bij in aria-label; kleur is niet de enige drager. */
  .sa-nav-tel{flex:0 0 auto;min-width:18px;padding:1px 6px;border-radius:99px;text-align:center;
    background:var(--merk-oranje);color:#fff;font:700 10.5px/1.5 var(--sans)}
  /* Sta je erop, dan is dempen verwarrend: je bent er wél. Het stipje blijft. */
  .sa-nav a.later.actief{opacity:1}
  .sa-nav a.later::after{content:'';width:5px;height:5px;border-radius:50%;
    background:currentColor;opacity:.6;flex:0 0 auto}
  @media (hover:hover){ .sa-nav a:hover{background:rgba(255,255,255,.07);color:#fff} }
  /* DE ZIJBALK IN GROEPEN (30 september 2026) — de kop is een knop (aria-expanded), de pijl
     draait mee; kleur is nooit de enige drager. De links erin springen iets in, zodat zichtbaar
     is bij welke groep ze horen. */
  .sa-nav-groep{margin-top:6px}
  .sa-nav-kop{display:flex;align-items:center;gap:8px;width:100%;border:0;background:transparent;
    color:#7E93A8;font:700 10.5px/1.2 var(--sans);letter-spacing:.07em;text-transform:uppercase;
    padding:7px 9px;border-radius:var(--r);cursor:pointer;text-align:left}
  .sa-nav-kop .rek{flex:1}
  .sa-nav-pijl{width:14px;height:14px;flex:0 0 auto;transition:transform .15s}
  .sa-nav-kop[aria-expanded="false"] .sa-nav-pijl{transform:rotate(-90deg)}
  .sa-nav-groep.bevat-actief .sa-nav-kop{color:#fff}
  .sa-nav-kop:focus-visible{outline:2px solid var(--merk-blauw);outline-offset:1px}
  @media (hover:hover){ .sa-nav-kop:hover{background:rgba(255,255,255,.05);color:#fff} }
  .sa-nav-items{display:flex;flex-direction:column;gap:1px;padding-left:6px}
  .sa-nav-items[hidden]{display:none}
  @media (pointer: coarse){ .sa-nav-kop{min-height:var(--raak,44px)} }

  /* Het inklappen van de zijbalk (desktop). Breedte naar nul en niets meer tonen; het hoofdvlak
     neemt de ruimte over. Op een smal scherm is de zijbalk een lade en raakt deze regel niets. */
  @media (min-width: 901px){
    .sa-app.zij-dicht .sa-zij{flex-basis:0;width:0;padding:0;overflow:hidden}
  }

  /* --- de accountknop en het uitlogmenu in de bovenbalk --- */
  .sa-kopknop{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
    width:38px;height:38px;border:1px solid var(--line);background:var(--surface);
    border-radius:var(--r);color:var(--ink-2);cursor:pointer}
  .sa-kopknop svg{width:18px;height:18px}
  @media (hover:hover){ .sa-kopknop:hover{border-color:var(--merk-blauw);color:var(--ink)} }
  .sa-kopknop:focus-visible{outline:2px solid var(--merk-blauw);outline-offset:1px}
  .sa-zijknop{display:none}
  @media (min-width: 901px){ .sa-zijknop{display:inline-flex} }
  .sa-gebr{position:relative;flex:0 0 auto}
  .sa-gebr-paneel{position:absolute;right:0;top:calc(100% + 6px);z-index:70;min-width:220px;
    display:flex;flex-direction:column;gap:8px;padding:10px;background:var(--surface);
    border:1px solid var(--line);border-radius:var(--r);box-shadow:0 10px 30px rgba(2,26,48,.18)}
  .sa-gebr-paneel[hidden],.sa-gebr-afmelden[hidden]{display:none}
  .sa-gebr-wie{font-size:12.5px;color:var(--ink-2);overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap;padding:0 2px}
  .sa-gebr-afmelden{border:1px solid var(--line);background:var(--surface);color:var(--ink);
    border-radius:var(--r);padding:7px 12px;font:600 13px var(--sans);cursor:pointer;text-align:left}
  @media (hover:hover){ .sa-gebr-afmelden:hover{border-color:var(--merk-blauw);color:var(--merk-blauw)} }

  /* --- het donkere thema --- het licht is de standaard; `data-thema` op de wortel
     zet alleen de kleurtokens om. De zijbalk blijft donkerblauw in beide thema's. */
  :root[data-thema="donker"]{
    color-scheme:dark;
    --ink:#E6EDF3; --ink-2:#AFBFCE; --ink-3:#8496A8;
    --line:#2A3A4D; --surface:#132233; --surface-2:#1A2C40; --bg:#0B1828;
  }
  :root[data-thema="donker"] .sa-band{background:#3A2A12;border-color:#5C4320;color:#F5C98F}
  :root[data-thema="donker"] .sa-chip.aan{background:#17324A;color:#BFE0F7}
  :root[data-thema="donker"] .sa-skelet{background:linear-gradient(90deg,
    var(--surface-2) 25%, #22374D 50%, var(--surface-2) 75%);background-size:760px 100%}

  /* --- het hoofdvlak --- */
  .sa-hoofd{flex:1 1 auto;min-width:0;display:flex;flex-direction:column}
  .sa-kop{display:flex;align-items:center;gap:14px;padding:18px 26px 14px;
    border-bottom:1px solid var(--line);background:var(--surface);flex-wrap:wrap}
  .sa-kop h1{margin:0;font-size:20px;font-weight:800;letter-spacing:-.02em;line-height:1.2}
  .sa-kop-sub{margin:2px 0 0;font-size:12.5px;color:var(--ink-3)}
  .sa-kop .rek{flex:1}
  /* Het bandje: een beheerpagina die eruitziet als de klantomgeving is een pagina waarop je
     een keer per ongeluk de verkeerde knop indrukt. */
  .sa-band{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:99px;
    background:#FFF4E8;border:1px solid #F3D2A6;color:#8A4B06;font-size:11.5px;font-weight:650}
  .sa-band::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--merk-oranje)}
  .sa-menuknop{display:none;border:1px solid var(--line);background:var(--surface);
    border-radius:var(--r);width:38px;height:38px;cursor:pointer;font-size:17px;color:var(--ink-2)}
  /* 24 oktober 2026 — "veel lege witruimte rechts" op 100%: op 1920 breed stopte de inhoud rond
     1490 px. Zelfde plafond als `.dash-vel` in de klanttool (1760 px): vult een 1080p-scherm, en
     houdt op een ultrabreed scherm een grens. Houd die twee waarden gelijk. */
  .sa-vel{padding:22px 26px 60px;max-width:1760px}

  /* --- skeletons ---
     Gevraagd: loading/skeleton states. Een lege pagina die plotseling volloopt leest als een
     storing gevolgd door een sprong; een skelet zegt "er komt hier iets, en zoveel". */
  @keyframes sa-glans{ 0%{background-position:-380px 0} 100%{background-position:380px 0} }
  .sa-skelet{border-radius:6px;background:linear-gradient(90deg,
    var(--surface-2) 25%, #E8ECF1 50%, var(--surface-2) 75%);
    background-size:760px 100%;animation:sa-glans 1.25s linear infinite;height:12px}
  .sa-skelet-tegel{height:74px;border-radius:var(--r);border:1px solid var(--line)}
  .sa-skelet-rij{height:34px;margin-bottom:6px}
  @media (prefers-reduced-motion: reduce){ .sa-skelet{animation:none} }

  /* --- filterbalk --- */
  .sa-filters{display:flex;gap:9px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
  .sa-zoek{flex:1 1 220px;min-width:0;font:13px var(--sans);padding:8px 12px;
    border:1px solid var(--line);border-radius:99px;background:var(--surface);color:var(--ink)}
  .sa-zoek:focus{outline:2px solid var(--merk-blauw);border-color:var(--merk-blauw)}
  .sa-chip{border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
    font:12.5px var(--sans);font-weight:600;padding:7px 13px;border-radius:99px;cursor:pointer}
  .sa-chip.aan{border-color:var(--merk-blauw);background:#EAF3FA;color:#1B5A8C}
  @media (hover:hover){ .sa-chip:hover{border-color:var(--accent-line,#9CC5E2);color:var(--ink)} }
  .sa-telling{font-size:12px;color:var(--ink-3);white-space:nowrap}

  /* Sorteerbare kolomkoppen. */
  th.sorteer{cursor:pointer;user-select:none;white-space:nowrap}
  th.sorteer::after{content:'\2195';opacity:.28;margin-left:5px;font-weight:400}
  th.sorteer.op::after{content:'\2191';opacity:1;color:var(--merk-oranje)}
  th.sorteer.neer::after{content:'\2193';opacity:1;color:var(--merk-oranje)}
  @media (hover:hover){ th.sorteer:hover{color:var(--ink)} }
  @media (hover:hover){ tr[data-org]:hover{background:var(--surface-2);cursor:pointer} }

  /* --- "wordt gebouwd" --- */
  .sa-later{max-width:56ch;margin:40px auto;text-align:center;color:var(--ink-2)}
  .sa-later h2{margin:0 0 8px;font-size:17px;font-weight:800;color:var(--ink)}
  .sa-later p{margin:0 0 10px;font-size:14px;line-height:1.6}
  .sa-later .fase{display:inline-block;padding:4px 12px;border-radius:99px;
    background:var(--surface-2);border:1px solid var(--line);font-size:12px;font-weight:650;
    color:var(--ink-2)}

  /* --- smal scherm: de zijbalk wordt een lade --- */
  @media (max-width: 900px){
    .sa-zij{position:fixed;left:0;top:0;bottom:0;z-index:60;transform:translateX(-100%);
      transition:transform .18s ease;box-shadow:0 0 40px rgba(2,26,48,.4)}
    .sa-zij.open{transform:none}
    .sa-menuknop{display:block}
    .sa-kop{padding:12px 16px}
    .sa-vel{padding:16px 16px 48px}
    .sa-band{display:none}
  }

  /* --- KPI-kaarten (ronde 321) ---
     Gevraagd: moderne KPI-cards met, waar het uit data te berekenen valt, een vergelijking met
     vorige maand. "Nooit fictieve cijfers tonen" — dus geen trendpijl waar geen vorige maand
     is, en geen MRR-kaart zolang er geen betaalprovider is. */
  .kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px}
  .kpi{border:1px solid var(--line);border-radius:var(--r-lg,12px);background:var(--surface);
    padding:14px 16px;display:flex;flex-direction:column;gap:2px}
  .kpi-kop{display:flex;align-items:center;gap:7px;color:var(--ink-3);font-size:11.5px;
    font-weight:650;letter-spacing:.02em}
  .kpi-kop svg{width:14px;height:14px;opacity:.7}
  .kpi b{font-size:29px;font-weight:800;letter-spacing:-.025em;line-height:1.1;
    color:var(--merk-donker);font-variant-numeric:tabular-nums}
  .kpi-voet{font-size:11.5px;color:var(--ink-3);display:flex;align-items:center;gap:6px;
    flex-wrap:wrap}
  .trend{display:inline-flex;align-items:center;gap:3px;font-weight:700;padding:1px 7px;
    border-radius:99px;font-size:11px}
  .trend.op{background:#E9F4EC;color:#1F5B33}
  .trend.neer{background:#FBEDEA;color:#8C2118}
  .trend.gelijk{background:var(--surface-2);color:var(--ink-2)}
  /* Geen vorige maand om mee te vergelijken? Dan staat er geen pijl maar een woord. Een
     "+0%" waar niets te vergelijken viel is een verzonnen cijfer. */
  .kpi-geen{color:var(--ink-3);font-style:italic}

  .kpi.later{background:var(--surface-2);border-style:dashed}
  .kpi.later b{color:var(--ink-3);font-size:15px;font-weight:700;letter-spacing:0}

  /* --- kleine staafjes onder een KPI: twaalf maanden in één blik --- */
  .spark{display:flex;align-items:flex-end;gap:2px;height:26px;margin-top:6px}
  .spark span{flex:1 1 0;background:var(--merk-blauw);opacity:.32;border-radius:2px 2px 0 0;
    min-height:2px}
  .spark span:last-child{opacity:.85;background:var(--merk-oranje)}

  /* --- Dashboard (ronde 457) ---
     Zes kaarten op de rij, stapsgewijs terugvallend. Alleen #kpis (het dashboard) krijgt dit
     vaste rooster: de andere KPI-rijen (Abonnementen, Opslag, Analytics) hebben een ander
     aantal tegels en blijven op de auto-fit hierboven — die past zich vanzelf aan hun eigen
     aantal aan. */
  #kpis{grid-template-columns:repeat(6,1fr)}
  @media (max-width:1180px){ #kpis{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:760px){ #kpis{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:480px){ #kpis{grid-template-columns:1fr} }

  /* Drie kaarten naast elkaar (status, MRR, opslag) en twee kaarten met een 65/35-verdeling
     (activiteit, top organisaties). Alleen op het dashboard — elders blijft .kaartje een
     losse, volle-breedte sectie. */
  .dash-rij3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
  /* ⚠️ `min-width:0` is geen opmaak maar een reparatie: een grid-item krimpt van zichzelf
     niet onder de intrinsieke breedte van zijn inhoud (hier: de tabellen), dus zonder deze
     regel duwt een tabel de hele rij — en daarmee de hele pagina — breder dan het scherm in
     plaats van binnen zijn eigen .tabelvak te scrollen. */
  .dash-rij3 > .kaartje{margin-top:0;min-width:0}
  @media (max-width:1080px){ .dash-rij3{grid-template-columns:1fr 1fr} }
  @media (max-width:640px){ .dash-rij3{grid-template-columns:1fr} }

  .dash-rij2{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr);gap:16px;
    margin-top:16px}
  .dash-rij2 > .kaartje{margin-top:0;min-width:0}
  @media (max-width:900px){ .dash-rij2{grid-template-columns:1fr} }

  /* Een tekstlink zonder knopopmaak, voor "Bekijk alles →" onder een kaartkop. Gaat via
     data-sa en dus door dezelfde afhandelaar als de zijbalk. */
  .sa-link{border:0;background:none;padding:0;color:var(--merk-blauw);font:inherit;
    font-weight:700;font-size:12.5px;cursor:pointer}
  .sa-link:hover{text-decoration:underline}

  /* Badges bij "Laatste activiteit" — het ONDERWERP van de logregel, zodat een lezer in één
     oogopslag ziet of het over een project, een gebruiker, een abonnement of iets gevoeligers
     gaat. Dezelfde functionele kleuren als de rest van de pagina (.merk, .trend): kleur draagt
     nooit als enige het onderscheid, de tekst staat er altijd bij. */
  .dash-badge{display:inline-block;padding:2px 8px;border-radius:99px;font-size:10.5px;
    font-weight:700;white-space:nowrap}
  .dash-badge.t-project{background:#E3EEF8;color:#1B4E77}
  .dash-badge.t-gebruiker{background:#E9F4EC;color:#1F5B33}
  .dash-badge.t-abonnement{background:#F1EAFB;color:#5A2E9E}
  .dash-badge.t-opslag{background:#FFF6E5;color:#7A4E06}
  .dash-badge.t-organisatie{background:var(--surface-2);color:var(--ink-2)}
  .dash-badge.t-beveiliging{background:#FBEDEA;color:#8C2118}

  /* Top organisaties: rangnummer en een balkje, in dezelfde tabelrij als de rest van de
     pagina — vandaar geen eigen tabelstijl, alleen deze twee kolommen. */
  .dash-rang{color:var(--ink-3);font-weight:700;font-variant-numeric:tabular-nums;width:20px}
  .dash-top-balk{min-width:90px}
  .dash-top-balk .gr-staaf-baan{height:10px}
  /* Vier smalle kolommen in de smallere helft van de rij — de algemene tabelbreedte van
     860px (elders bedoeld voor brede overzichten met veel kolommen) zou hier een onnodige
     schuifbalk opleveren. */
  .dash-top-tabel{min-width:0}
  .dash-activiteit-tabel{min-width:560px}

  /* --- grafieken (ronde 323) ---
     Handgeschreven SVG en HTML, geen bibliotheek. De stack heeft geen buildstap en vendored
     alles met de hand; een grafiekbibliotheek erbij zou een afhankelijkheid zijn met een eigen
     ontwerptaal, eigen kleuren en eigen updates — voor drie grafiekvormen. SVG waar de
     meetkunde ertoe doet (lijn, donut), gewone HTML waar dat niet zo is (staven): een staaf met
     een label ernaast is in HTML leesbaarder, beter te selecteren en vanzelf responsief.

     ⚠️ KLEUR IS NOOIT DE ENIGE DRAGER. Bij elke grafiek staat de waarde ook als getal. Wie de
     kleuren niet onderscheidt, of wie de pagina afdrukt, mist niets. */
  .gr-vak{margin-top:4px}
  .gr-svg{display:block;width:100%;height:auto;overflow:visible}
  .gr-lijn{fill:none;stroke:var(--merk-blauw);stroke-width:2.5;
    stroke-linejoin:round;stroke-linecap:round}
  .gr-vlak{fill:var(--merk-blauw);opacity:.10}
  .gr-punt{fill:var(--merk-oranje)}
  .gr-as{stroke:var(--line);stroke-width:1}
  .gr-asletter{fill:var(--ink-3);font-size:11px;font-family:var(--sans)}
  .gr-raster{stroke:var(--line);stroke-width:1;stroke-dasharray:3 4;opacity:.7}

  /* staven, in HTML */
  .gr-staven{display:flex;flex-direction:column;gap:9px}
  .gr-staaf{display:grid;grid-template-columns:minmax(120px,1.1fr) minmax(80px,2.4fr) auto;
    align-items:center;gap:12px}
  .gr-staaf-naam{font-size:13px;font-weight:600;color:var(--ink);min-width:0;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .gr-staaf-baan{height:12px;border-radius:99px;background:var(--surface-2);
    border:1px solid var(--line);overflow:hidden}
  .gr-staaf-vul{display:block;height:100%;border-radius:99px;background:var(--merk-blauw);
    transition:width .3s var(--soepel, ease)}
  .gr-staaf:first-child .gr-staaf-vul{background:var(--merk-oranje)}
  .gr-staaf-getal{font-size:12.5px;color:var(--ink-2);white-space:nowrap;
    font-variant-numeric:tabular-nums}
  .gr-staaf-getal b{color:var(--ink);font-size:14px}

  /* donut */
  .gr-donut{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
  .gr-donut svg{width:132px;height:132px;flex:0 0 auto}
  .gr-donut-legenda{display:flex;flex-direction:column;gap:7px;font-size:13px}
  .gr-donut-regel{display:flex;align-items:center;gap:9px}
  .gr-donut-stip{width:10px;height:10px;border-radius:3px;flex:0 0 auto}
  .gr-donut-regel b{font-variant-numeric:tabular-nums}
  .gr-donut-regel span{color:var(--ink-3);font-size:12px}
  /* Een legenderegel die ergens naartoe klikt (ronde 457 — status doorklikbaar naar
     Organisaties) krijgt geen eigen kleur of vet: hij moet een legenderegel blijven, niet
     op een knop gaan lijken. */
  .gr-donut-regel-klik{border:0;background:none;padding:0;text-align:left;font:inherit;
    color:inherit;cursor:pointer}
  @media (hover:hover){
    .gr-donut-regel-klik:hover .gr-donut-stip{box-shadow:0 0 0 3px rgba(2,26,48,.12)}
  }

  /* Eerlijk leeg. Er zijn nog geen gebeurtenissen; een grafiek met voorbeelddata zou precies
     het verzonnen cijfer zijn dat hier niet mag. */
  .gr-leeg{padding:26px 18px;text-align:center;color:var(--ink-3);font-size:13.5px;
    line-height:1.6;border:1px dashed var(--line);border-radius:var(--r);
    background:var(--surface-2)}
  .gr-leeg b{display:block;color:var(--ink-2);font-size:14px;margin-bottom:4px}

  /* ---- Bedrijfsstatistieken (ronde 465) ----
     Geen eigen vormtaal: dit scherm leent de KPI-kaarten, de grafieken, de chips en de tabellen
     die de rest van de beheeromgeving al gebruikt. Wat hier bijkomt is alleen wat er nog niet
     was — een waarschuwingsband, de waardeberekening en twee kleuraccenten in een tabel. */
  .bed-let-op{border:1px solid #F3D2A6;background:#FFF8F0;color:#7A4E06;border-radius:var(--r);
    padding:12px 14px;font-size:13px;line-height:1.6;margin-bottom:16px}
  .bed-let-op b{color:#5F3B04}
  .bed-let-op .sa-link{color:#1B5A8C}

  .bed-op{color:#1F5B33;font-weight:700}
  .bed-neer{color:#8C2118;font-weight:700}
  /* "Uit het auditlog afgeleid" is geen fout maar wél een voorbehoud; het hoort zichtbaar te
     zijn zonder de tabel te overschreeuwen. */
  .bed-herkomst{display:inline-block;padding:1px 8px;border-radius:99px;font-size:10.5px;
    font-weight:700;background:var(--surface-2);color:var(--ink-3);border:1px dashed var(--line)}

  .bed-reeks, .bed-verdeling{min-width:0}
  .bed-klanten{min-width:820px}

  .bed-waarde{display:flex;align-items:flex-end;gap:18px;flex-wrap:wrap;
    background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
    padding:16px 18px;margin-top:4px}
  .bed-waarde b{display:block;font-size:24px;font-weight:800;letter-spacing:-.02em;
    color:var(--merk-donker);font-variant-numeric:tabular-nums;line-height:1.2}
  .bed-waarde-label{display:block;font-size:11px;font-weight:650;letter-spacing:.02em;
    color:var(--ink-3);margin-bottom:2px}
  .bed-waarde-maal{font-size:18px;color:var(--ink-3);padding-bottom:4px}
  .bed-waarde-uit b{color:var(--merk-oranje);font-size:29px}
  .bed-voorwaarde{margin:10px 0 0;font-size:11.5px;color:var(--ink-3);line-height:1.6;
    max-width:78ch}
  .bed-stempel{margin:14px 0 0;font-size:11.5px;color:var(--ink-3)}

  /* Tablet: de KPI-rij stapt netjes terug in plaats van acht kaarten op een rij te persen. */
  #bedKpis{grid-template-columns:repeat(4,1fr)}
  @media (max-width:1180px){ #bedKpis{grid-template-columns:repeat(3,1fr)} }
  @media (max-width:860px){ #bedKpis{grid-template-columns:repeat(2,1fr)} }
  @media (max-width:520px){ #bedKpis{grid-template-columns:1fr} }

  /* ---- Rapportages (ronde 325) ---- */
  .rap-rooster{display:grid;gap:14px;
    grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
  .rap-kaart{border:1px solid var(--line);border-radius:var(--r);padding:16px;
    background:var(--surface);display:flex;flex-direction:column;gap:8px}
  .rap-kaart h3{margin:0;font-size:14.5px;color:var(--ink)}
  .rap-kaart p{margin:0;font-size:12.5px;color:var(--ink-3);line-height:1.55;flex:1}
  .rap-kaart .rap-tel{font-size:12px;color:var(--ink-2);font-weight:700;
    font-variant-numeric:tabular-nums}
  .rap-kaart .rap-knoppen{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px}
  .rap-kaart .rap-knoppen .knop{font-size:12.5px;padding:6px 12px}
  .rap-leeg{opacity:.6}

  /* De voorbeeldweergave. Staat op de pagina zelf en niet in een tweede venster: een
     pop-up wordt geblokkeerd, en dan lijkt het alsof de knop stuk is. */
  .rap-voorbeeld{margin-top:16px}
  .rap-voorbeeld-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
    margin-bottom:10px}
  .rap-voorbeeld-kop h2{margin:0}
  .rap-voorbeeld-kop .rek{flex:1}
  .rap-stempel{font-size:11.5px;color:var(--ink-3)}

  /* ⚠️ AFDRUKKEN. Er is geen jsPDF op deze pagina en die komt er ook niet bij: de browser
     kan zelf naar PDF afdrukken, en dat scheelt een bibliotheek van een halve megabyte in
     een omgeving die verder helemaal geen externe scripts laadt. Bij het afdrukken blijft
     uitsluitend de voorbeeldweergave staan — zijbalk, kop, filters en knoppen niet, want
     die horen niet op papier. */
  @media print{
    .sa-zij, .sa-kop, .sa-menuknop, .sa-band, .rap-rooster, .sa-filters,
    .rap-voorbeeld-kop .knop, .melding{display:none !important}
    .sa-app{display:block}
    .sa-vel{padding:0}
    .kaartje{border:0;box-shadow:none;padding:0}
    body{background:#fff}
    table{font-size:10.5px}
    th{background:#f2f2f2 !important;-webkit-print-color-adjust:exact;print-color-adjust:exact}
    .tabelvak{overflow:visible;border:0}
    .tabelvak-vast{max-height:none}
    tr{break-inside:avoid}

    /* --- DE TWEE FEATURE-EXPORTS (ronde 638) -------------------------------------------
       ⚠️ Alleen actief als `body[data-print]` gezet is, dus een gewone Ctrl+P op een ander
       onderdeel verandert er niets van. */
    body[data-print] .ff-printkop{display:block;margin:0 0 14px;padding:0 0 10px;
      border-bottom:3px solid var(--merk-oranje)}
    body[data-print] .ff-printkop h1{margin:6px 0 2px;font-size:17px;color:var(--merk-donker)}
    body[data-print] .ff-printkop p{margin:0;font-size:11px;color:#4a5560}
    body[data-print] .ff-print-datum{margin-top:4px !important;font-size:10px;color:#6b757e}
    /* ⚠️ HET WOORDMERK IS TEKST — een browser drukt externe beelden vaak niet af, en dan is
       een logobestand een leeg kader met alt-tekst (de meting van ronde 590). */
    body[data-print] .ff-print-merk{font:700 15px var(--sans);color:var(--merk-donker);letter-spacing:-.01em}
    /* ⚠️ Via het token en niet als letterlijke hexwaarde — de huisregel van ronde 493, die
       `test-huisstijl-kleur.js` afdwingt. CSS-variabelen werken gewoon in `@media print`; de
       uitzondering van ronde 590 (letterlijke kleuren) geldt uitsluitend voor E-MAIL, waar
       Outlook geen variabelen kent. */
    body[data-print] .ff-print-stip{color:var(--merk-oranje);margin-right:5px}

    /* --- HET WENSBEKER-WEEKOVERZICHT (migratie 222) ---------------------------------------
       Alleen het weekoverzicht op papier: niet de rest van Feedback en wensen, niet de knoppen. */
    body[data-print="wensrapport"] .fb-nietprint,
    body[data-print="wensrapport"] .fb-week-knoppen{display:none !important}
    body[data-print="wensrapport"] .fb-tekst{max-width:none}

    /* Wat er in een export niets te zoeken heeft: knoppen, filters, het auditlog en de
       schakelaars. Gevraagd: "geen Superadmin-knoppen/navigatie in de PDF." */
    body[data-print] .ff-nietprint,
    body[data-print] .ff-tegel,
    body[data-print] .ff-kiezer,
    body[data-print] .ff-pdf,
    body[data-print] .sa-link{display:none !important}
    body[data-print] .tegels{display:none !important}
    body[data-print] .ff-naam{display:inline !important;color:var(--ink);font-weight:600}

    /* ⚠️ HERHAALDE TABELKOPPEN OP ELKE PAGINA. `display:table-header-group` is wat dat doet;
       de sticky-positionering van het scherm moet er juist AF, anders drukt de browser de kop
       één keer op zijn vastgeplakte plek af. */
    body[data-print] thead{display:table-header-group}
    body[data-print] tfoot{display:table-footer-group}
    body[data-print] .ff-tabel thead th,
    body[data-print] .fm-tabel thead th{position:static;box-shadow:none}
    body[data-print] .ff-groep{break-inside:auto}
    body[data-print] .ff-groepkop{break-after:avoid;break-inside:avoid}
    body[data-print] .fm-groeprij{break-after:avoid}
    body[data-print] .ff-legenda{break-inside:avoid;background:#f7f7f7 !important;
      -webkit-print-color-adjust:exact;print-color-adjust:exact}
    body[data-print] .ff-badge, body[data-print] .merk, body[data-print] .fm-tag{
      -webkit-print-color-adjust:exact;print-color-adjust:exact}

    /* De opmerkingkolom is op het scherm verborgen onder 1100 px maar hoort in de PDF wél
       mee: die gaat naar iemand die het scherm niet ziet. */
    body[data-print] .ff-opm, body[data-print] .ff-groepsub{display:table-cell}
    body[data-print="functies"] .ff-groepsub{display:inline}

    /* ⚠️ A4 LIGGEND voor allebei: zes respectievelijk vijf kolommen passen staand niet zonder
       de opmerkingkolom onleesbaar te maken. */
    @page{size:A4 landscape;margin:12mm 10mm}
  }

  /* ===================================================================================
     STATUSMENU EN BEVESTIGING (ronde 426)
     ===================================================================================
     Gevraagd: "GEEN browser prompt() meer waarbij ik een nummer moet intypen. Ik wil echte
     klikbare dropdowns in de tabel." Dat is meer dan cosmetiek: een genummerde prompt vraagt
     de beheerder om een cijfer te vertalen naar een handeling, en juist bij handelingen die
     iets afnemen hoort het woord onder de muis te staan dat je bedoelt.

     ⚠️ EIGEN MENU EN GEEN <select>. Een select kan geen kleurbadge per regel dragen, geen
     rode destructieve optie, en op iOS opent hij een systeemwiel dat het hele scherm overneemt
     — precies het browserdialoog waar deze ronde vanaf wil. Twaalf regels CSS is hier
     goedkoper dan een afhankelijkheid, en past bij de rest van deze pagina (met de hand
     getekend, geen bibliotheek — zie de grafieken van ronde 323). */
  .sa-menu{position:relative;display:inline-block}
  .sa-menu-knop{font:12.5px var(--sans);padding:5px 10px 5px 8px;border-radius:99px;
    cursor:pointer;background:var(--surface);border:1px solid var(--line);color:var(--ink);
    display:inline-flex;align-items:center;gap:6px;line-height:1.4}
  .sa-menu-knop:hover{border-color:var(--merk-blauw)}
  .sa-menu-knop .pijl{font-size:9px;color:var(--ink-3);transition:transform .12s}
  .sa-menu[data-open="1"] .sa-menu-knop .pijl{transform:rotate(180deg)}
  .sa-menu[data-open="1"] .sa-menu-knop{border-color:var(--merk-blauw)}
  /* Direct onder de knop, zoals gevraagd. min-width zodat de langste optie niet afbreekt. */
  .sa-menu-lijst{position:absolute;top:calc(100% + 5px);left:0;z-index:60;min-width:210px;
    background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:5px;
    box-shadow:0 10px 28px rgba(2,26,48,.14)}
  .sa-menu-lijst[hidden]{display:none}
  /* Open = zwevend boven de pagina (30 september 2026): de plek zet saMenuPlaats() in
     app/superadmin/kern/menu-en-venster.js. Zo kan geen enkele tabel (.tabelvak, overflow) het
     menu nog afsnijden of er zelf van gaan scrollen. */
  .sa-menu-lijst.zwevend{position:fixed;z-index:1000;overflow-y:auto;max-width:calc(100vw - 16px)}
  .sa-menu-item{display:block;width:100%;text-align:left;border:0;background:none;
    font:13px var(--sans);color:var(--ink);padding:8px 10px;border-radius:7px;cursor:pointer}
  .sa-menu-item:hover{background:var(--surface-2)}
  .sa-menu-item .bij{display:block;font-size:11.5px;color:var(--ink-3);margin-top:1px}
  /* ⚠️ Destructief is ROOD en staat onderaan, met een scheidingslijn erboven: het mag geen
     buurman zijn van de handeling die je meestal bedoelt. */
  .sa-menu-item.gevaar{color:#8C2118}
  /* BEHEERDERS (30 september 2026) — een korte lijst van een paar rijen, dus GEEN scrollvak:
     in .tabelvak (overflow-x:auto) werd het statusmenu van de laatste kolom afgesneden en
     scrolde de tabel zelf weg onder de kolomkoppen. Hier past de tabel zich aan het scherm aan
     (geen min-width van 860px), breekt een lange notitie af, en opent het menu naar LINKS, over
     de pagina heen. Onder 1100 px vallen de twee minst belangrijke kolommen weg. */
  .bh-tabelvak{overflow:visible}
  .bh-tabel{min-width:0}
  .bh-tabel td{vertical-align:middle}
  .bh-tabel .bh-naam{white-space:nowrap}
  /* Een beheerdersrij zonder account (bhZonderAccount): dezelfde gevaarkleur als .sa-menu-item.gevaar,
     en de uitleg mag wel afbreken. */
  .bh-tabel .bh-wees{color:#8C2118}
  .bh-tabel tr[data-zonder-account] .bh-naam{white-space:normal}
  .bh-tabel .bh-email{overflow-wrap:anywhere}
  .bh-tabel .bh-notitie{max-width:360px;overflow-wrap:anywhere;line-height:1.45}
  .bh-tabel .bh-datum{white-space:nowrap}
  .bh-tabel .bh-status{text-align:right;white-space:nowrap;width:1%}
  @media (max-width:1100px){ .bh-tabel .bh-smal{display:none} }
  .sa-menu-item.gevaar:hover{background:#FBEDEA}
  .sa-menu-item.gevaar{border-top:1px solid var(--line);border-radius:0 0 7px 7px;margin-top:4px;
    padding-top:9px}
  .sa-menu-nu{padding:7px 10px 4px;font-size:11px;text-transform:uppercase;
    letter-spacing:.04em;color:var(--ink-3)}

  .sa-wand{position:fixed;inset:0;z-index:1050;background:rgba(2,26,48,.42);
    display:flex;align-items:center;justify-content:center;padding:20px}
  .sa-wand[hidden]{display:none}
  .sa-venster{background:var(--surface);border-radius:14px;padding:20px 22px;max-width:440px;
    width:100%;box-shadow:0 18px 50px rgba(2,26,48,.3)}
  .sa-venster h3{margin:0 0 8px;font-size:17px}
  .sa-venster p{margin:0 0 14px;font-size:13.5px;color:var(--ink-2);line-height:1.55}
  .sa-venster label{display:block;font-size:12px;color:var(--ink-2);margin:0 0 5px}
  .sa-venster input[type=text]{width:100%;box-sizing:border-box;font:14px var(--sans);
    padding:9px 11px;border:1px solid var(--line);border-radius:9px;color:var(--ink)}
  .sa-venster input[type=text]:focus{outline:2px solid var(--merk-blauw);outline-offset:1px}
  .sa-venster .acties{display:flex;gap:8px;justify-content:flex-end;margin-top:16px}
  .sa-venster .fout{color:#8C2118;font-size:12px;margin:6px 0 0}
.bk-geheim{position:relative;display:block;width:100%;min-width:0;}
.bk-geheim input{box-sizing:border-box;width:100%;padding-right:46px!important;}
.bk-geheim-oog{position:absolute;right:4px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;padding:7px;border:0;border-radius:4px;background:transparent;
  color:var(--ink-2);cursor:pointer;display:grid;place-items:center;}
.bk-geheim-oog:hover{color:var(--ink);background:var(--surface-2);}
.bk-geheim-oog:focus-visible{outline:2px solid var(--merk-blauw);outline-offset:1px;}
.bk-geheim-oog svg{width:20px;height:20px;}
.bk-geheim-oog .bk-oog-dicht,.bk-geheim-oog[aria-pressed="true"] .bk-oog-open{display:none;}
.bk-geheim-oog[aria-pressed="true"] .bk-oog-dicht{display:block;}
.sa-filters .bk-geheim{flex:1 1 220px;max-width:230px;}
.sa-venster .bk-geheim input{font:14px var(--sans);padding:9px 11px;
  border:1px solid var(--line);border-radius:9px;color:var(--ink);}
.sa-venster .bk-geheim input:focus{outline:2px solid var(--merk-blauw);outline-offset:1px;}
  .knop-gevaar{background:#8C2118;border-color:#8C2118;color:#fff}
  .knop-gevaar:hover{color:#fff;border-color:#8C2118}