/* ===========================================================
   Voorraad — stijl
   Overgenomen van de receptenapp van Mams at Work: dezelfde tokens, dezelfde
   componenten en maten, zodat de twee apps op de telefoon familie van elkaar zijn.
   Wat alleen voor deze app bestaat staat onderaan, onder "Voorraad".

   ELKE kleur van de app staat in :root. Geen hex- of rgba-waarde hoort ergens anders.
   =========================================================== */

/* Lettertypen staan in /static/fonts en worden NIET bij Google geladen: dan gaat er geen
   IP-adres van een gebruiker naar Google. Zelfde aanpak als de band-app. SIL Open Font
   License. Alleen de Latijnse set. Een browser haalt een lettertype pas op als het gebruikt
   wordt: wie het MAW-thema heeft, laadt die van de andere thema's niet. */
@font-face{font-family:'Bebas Neue';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/bebas-neue-latin.woff2) format('woff2');}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:300 800;font-stretch:100%;font-display:swap;
  src:url(../fonts/open-sans-latin.woff2) format('woff2');}
@font-face{font-family:'Pacifico';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/pacifico-latin.woff2) format('woff2');}
/* Voor de thema's (onderaan, "Thema's"). De cursieve DM Serif heeft een eigen familienaam, zodat
   een thema hem als --script kan kiezen zonder font-style op elk element. */
@font-face{font-family:'DM Serif Display';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/dm-serif-display-latin.woff2) format('woff2');}
@font-face{font-family:'DM Serif Cursief';font-style:normal;font-weight:400;font-display:swap;
  src:url(../fonts/dm-serif-display-italic-latin.woff2) format('woff2');}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;
  src:url(../fonts/lora-latin.woff2) format('woff2');}
@font-face{font-family:'Nunito';font-style:normal;font-weight:400 900;font-display:swap;
  src:url(../fonts/nunito-latin.woff2) format('woff2');}
@font-face{font-family:'Space Grotesk';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/space-grotesk-latin.woff2) format('woff2');}
@font-face{font-family:'Space Mono';font-style:normal;font-weight:700;font-display:swap;
  src:url(../fonts/space-mono-latin.woff2) format('woff2');}
@font-face{font-family:'Josefin Sans';font-style:normal;font-weight:300 700;font-display:swap;
  src:url(../fonts/josefin-sans-latin.woff2) format('woff2');}
/* Het woordmerk van VandePas Solutions (--merk, het opstartscherm). Variabel: VandePas 700, Solutions 400. */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url(../fonts/montserrat-latin.woff2) format('woff2');}

/* [data-thema="maw"]: ook een voorbeeldtegel van MAW op een scherm in een ander thema ("Thema's", onderaan). */
:root, [data-thema="maw"]{
  /* Grafieken: twee reeksen, niet meer (zoals Joyce haar dashboard: een derde kleur haalt de
     kleurenblindheidstoets niet). Ze verschillen ook in lichtheid, niet alleen in tint. */
  --reeks-1:#258D20;  --reeks-2:#F6497C;  /* groen en roze van Joyce haar dashboard (Frank 08-10-2026) */
  color-scheme:light;
  /* Merkkleuren */
  --groen:#3B5B4C;        --groen-rgb:59,91,76;
  --groen-diep:#2C463A;
  --groen-zacht:#8E9D97;
  --lichtgroen:#D6E3D2;
  --lichtgroen-diep:#C9DAC4;
  --lichtgroen-zacht:#E9F0E6;
  --oranje:#E66204;       /* testomgeving */
  --goud-ster:#BFA14A;    /* open account-bolletje */

  /* Achtergronden */
  --creme:#FFFFFF;
  --creme-2:#F1F5F1;
  --card:var(--creme);

  /* Tekst en lijnen */
  --tekst:#231F20;
  --muted:#69786F;         /* 4,7:1 op wit */
  --placeholder:#B3AAA2;
  --rand:#E2E8E2;
  --rand-zacht:#EDF1EC;
  --notitie:#FCEEF2;  /* achtergrond van een notitie (V9) */
  --op-accent:#FFFFFF;
  --op-fel:#141A16;

  /* Status: achtergrond + tekst, elk label minstens 4,5:1 */
  --ok-bg:#E8F0E5;            --ok:#516D48;
  --waarschuwing-bg:#F6EFD9;  --waarschuwing:#7E621A;
  --signaal-alarm:#C2255C;      --signaal-let-op:#E8590C;  /* bolletjes: roze en oranje */
  --fout-bg:#F6E4DF;          --fout:#9A4736;
  --neutraal-bg:var(--creme-2); --neutraal:#5F6E68;
  --gevaar:#C0392B; --gevaar-diep:#A5301F;

  --schaduw-rgb:var(--groen-rgb);
  --overlay-rgb:35,31,32;

  /* De kop (balk bovenaan en het menu). Standaard de merkkleuren; een thema kan de kop los van
     de rest kleuren, en er een streep onder zetten (--kop-streep, een achtergrond). */
  --kop-bg:var(--lichtgroen);
  --kop-merk:var(--groen);
  --kop-tekst:var(--muted);
  --kop-hover:var(--lichtgroen-diep);
  --kop-rand:var(--rand);
  --kop-knop:var(--groen);  --kop-knop-tekst:var(--op-accent);
  --kop-streep:none;        --kop-streep-hoogte:0px;

  /* Knoppen: alles wat je aantikt is minstens 44px hoog. */
  --knop-hoogte:44px;
  --knop-hoogte-klein:32px;
  --knop-ruimte:16px;
  --knop-ruimte-klein:10px;
  --rand-dikte:1px;

  --icoon-s:16px; --icoon-m:20px; --icoon-l:24px;

  /* VandePas Solutions: het woordmerk en de neutrale kleuren van het app-icoon en het eerste opstartscherm.
     Voor elk thema hetzelfde, dus alleen hier (tools/maak_iconen.py en maak_opstartbeelden.py hebben ze ook).
     Let op: --merk is de letter van VandePas Solutions; --merk-* hieronder gaan over de naam van de app. */
  --merk:'Montserrat',Helvetica,Arial,sans-serif;
  --neutraal-app-bg:#222222; --neutraal-app-tekst:#F2F2F2;

  /* De hand van de iconen (.tekening, raster 64): een thema tekent dezelfde tekeningen anders.
     --icoon-vlak vult het vlak van een tekening (de doos, het klembord); MAW laat het leeg. */
  --icoon-lijn:3.5; --icoon-uiteinde:round; --icoon-hoek:round;
  --icoon-vlak:none; --icoon-filter:none; --icoon-draai:none;

  --radius-xs:4px; --radius-s:6px; --radius-m:8px; --radius-l:10px; --radius-xl:14px;
  --radius-rond:50%; --radius-pil:999px;

  --schaduw-1:0 1px 4px rgba(var(--overlay-rgb),.12);
  --schaduw-2:0 4px 16px rgba(var(--schaduw-rgb),.06);
  --schaduw-3:0 8px 22px rgba(var(--schaduw-rgb),.12);
  --schaduw-4:0 18px 44px -14px rgba(var(--overlay-rgb),.5);
  --ring-focus:0 0 0 3px rgba(var(--schaduw-rgb),.18);

  /* Schermgrenzen (alleen als afspraak; @media kan geen var()): 400 / 640 / 900 */

  --tekst-xs:.68rem;  --tekst-s:.72rem;   --tekst-m:.78rem;  --tekst-l:.82rem;
  --tekst-xl:.9rem;   --tekst-2xl:1.05rem; --tekst-3xl:1.25rem; --tekst-4xl:1.4rem;
  --tekst-5xl:1.6rem; --tekst-6xl:1.9rem;

  --display:'Bebas Neue',Impact,sans-serif;
  --script:'Pacifico',cursive;
  --sans:'Open Sans',-apple-system,Segoe UI,sans-serif;
  /* Hoe de kopletter (--display) en de merknaam (--script) staan. Een thema met een andere letter
     past die hier aan, in plaats van per element. */
  --display-gewicht:400; --display-spatie:.03em; --display-kast:none; --h1-grootte:var(--tekst-6xl);
  --merk-gewicht:400;    --merk-spatie:0;        --merk-kast:none;    --merk-grootte:var(--tekst-5xl);
}

*{box-sizing:border-box;}

/* Geen rechthoekige tap-highlight; in plaats daarvan licht het element zelf op binnen
   zijn eigen vorm (opacity). Zie de receptenapp voor het waarom. */
html{-webkit-tap-highlight-color:transparent;}
/* Tekst is te selecteren (kopiëren/plakken; Frank 14-10-2026, zoals de band-app). Alleen wat je
   aantikt niet: een lange druk op een knop, tegel of het menu hoort geen selectie te starten. */
.cat-tile, .lijst-rij-tik, .nav-avatar, .nav-home, .back-btn, .btn, .btn-small, .btn-small-outline,
.btn-small-danger, .btn-add, .btn-modal, .btn-icoon, .thema-keuze, .tegel-link, nav, summary{-webkit-user-select:none;user-select:none;}

.cat-tile:active, .lijst-rij:active, .periode-keuze:active,
.nav-avatar:active, .nav-home:active, .back-btn:active,
.btn:active, .btn-small:active, .btn-small-outline:active, .btn-small-danger:active, .btn-add:active,
.btn-modal:active, .chip:active, .segment label:active{
  opacity:.72;
  transition:opacity .05s;
}

body{
  margin:0;
  font-family:var(--sans);
  color:var(--tekst);
  background:var(--creme);
  line-height:1.6;
}

/* ---- Header ---- */
.site-header{
  background:var(--kop-bg);
  border-bottom:var(--rand-dikte) solid var(--kop-rand);
  position:sticky; top:0; z-index:500;
}
/* De streep van een thema onder de kop; telt mee in de hoogte die base.html meet (--kop-h). */
.site-header::after{content:"";display:block;height:var(--kop-streep-hoogte);background:var(--kop-streep);}
.header-top{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  padding:10px 24px;
  min-height:62px;
}
.header-top-test{background:var(--oranje);}
.header-left{display:flex;align-items:center;justify-self:start;min-width:38px;}
.header-center{display:flex;align-items:center;gap:10px;min-width:0;justify-self:center;}
.header-right{display:flex;align-items:center;justify-self:end;min-width:38px;}
.brand{
  font-family:var(--script); font-size:var(--merk-grootte); line-height:1.2;
  font-weight:var(--merk-gewicht); letter-spacing:var(--merk-spatie); text-transform:var(--merk-kast);
  color:var(--kop-merk); text-decoration:none;
}
.env-label{
  font-size:var(--tekst-s); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--tekst); background:var(--card); border-radius:var(--radius-pil); padding:1px 8px;
}
.nav-home{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:var(--radius-rond); color:var(--kop-merk);
}
.nav-home svg{width:var(--icoon-l);height:var(--icoon-l);}
.nav-home:hover{background:var(--kop-hover);}

.site-nav{display:flex;align-items:center;gap:20px;padding:0 24px 10px;flex-wrap:wrap;}
.nav-link{color:var(--kop-tekst);text-decoration:none;font-size:var(--tekst-l);font-weight:500;letter-spacing:.02em;}
.nav-link:hover{color:var(--kop-merk);}
.btn-link{
  background:none;border:none;color:var(--muted);font-family:inherit;font-size:var(--tekst-l);
  font-weight:500;cursor:pointer;padding:0;letter-spacing:.02em;
}
.btn-link:hover{color:var(--groen);text-decoration:underline;}
.site-nav .btn-link{color:var(--kop-tekst);}
.site-nav .btn-link:hover{color:var(--kop-merk);}
.inline-form{display:inline;margin:0;}
.nav-versie{font-size:var(--tekst-s);color:var(--kop-tekst);margin-left:auto;}

.nav-toggle{display:none;}
.nav-avatar{
  align-items:center; justify-content:center; width:38px; height:38px; padding:0;
  border:none; border-radius:var(--radius-rond); cursor:pointer;
  background:var(--kop-knop); color:var(--kop-knop-tekst);
  font-family:var(--sans); font-weight:700; font-size:var(--tekst-2xl); line-height:1;
}
.nav-avatar[aria-expanded="true"]{background:var(--goud-ster);color:var(--op-fel);}

/* ---- Layout ---- */
.site-main{--main-boven:28px;width:100%;max-width:1100px;margin:0 auto;padding:var(--main-boven) 28px 40px;}

.card{
  background:var(--card);
  border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-xl);
  padding:18px 16px;
  box-shadow:var(--schaduw-2);
  margin-bottom:14px;
}
.auth-card{max-width:400px;margin:7vh auto 0;}
/* Boven het inlogscherm het woordmerk van VandePas Solutions met daaronder de naam van de app (Frank 15-10-2026). */
.auth-kop{display:flex;flex-direction:column;align-items:center;gap:6px;margin:7vh auto 20px;text-align:center;}
.auth-kop + .auth-card{margin-top:0;}
.auth-merk{font-size:clamp(1.55rem,7.5vw,2.1rem);color:var(--tekst);}
.auth-app{font-family:var(--merk);font-size:var(--tekst-l);font-weight:500;letter-spacing:.24em;text-transform:uppercase;
  color:var(--muted);}

h1{
  font-family:var(--display); font-size:var(--h1-grootte); font-weight:var(--display-gewicht);
  letter-spacing:var(--display-spatie); text-transform:var(--display-kast);
  color:var(--groen); margin:0 0 14px; line-height:1.1;
}
h2{font-family:var(--display);font-weight:var(--display-gewicht);letter-spacing:var(--display-spatie);
  text-transform:var(--display-kast);color:var(--groen);}

label{display:block;font-size:var(--tekst-l);font-weight:500;margin:16px 0 6px;color:var(--muted);}
.optioneel{font-weight:400;}

input[type=email],input[type=password],input[type=number],input[type=text],input[type=date],
input[type=datetime-local],input[type=search],textarea,select{
  width:100%; min-height:var(--knop-hoogte); padding:10px 12px;
  border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-m);
  font-family:inherit; font-size:16px; /* 16px: anders zoomt iOS in bij het tikken */
  color:var(--tekst); background:var(--card);
}
textarea{resize:vertical;}
input::placeholder,textarea::placeholder{color:var(--placeholder);opacity:1;}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--groen);box-shadow:var(--ring-focus);}

/* ---- Knoppen ---- */
.btn{
  margin-top:20px; width:100%;
  display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--knop-hoogte);
  background:var(--groen); color:var(--op-accent); text-decoration:none;
  border:none; padding:6px var(--knop-ruimte); border-radius:var(--radius-m);
  font-family:inherit; font-size:var(--tekst-xl); font-weight:600; letter-spacing:.03em;
  cursor:pointer; transition:background .15s;
}
.btn:hover{background:var(--groen-diep);}
.btn:disabled{opacity:.6;cursor:default;}
.btn-gevaar{background:var(--gevaar);}
.btn-gevaar:hover{background:var(--gevaar-diep);}
.btn-bovenaan{margin-top:0;}
.btn-small{
  display:inline-flex; align-items:center; justify-content:center; min-height:var(--knop-hoogte);
  background:var(--groen); color:var(--op-accent); text-decoration:none; border:none;
  padding:4px var(--knop-ruimte); border-radius:var(--radius-m);
  font-family:inherit; font-size:var(--tekst-l); font-weight:600; cursor:pointer;
}
.btn-small-outline, .btn-small-danger{
  display:inline-flex; align-items:center; justify-content:center; min-height:var(--knop-hoogte);
  background:none; padding:2px var(--knop-ruimte); border-radius:var(--radius-m);
  font-family:inherit; font-size:var(--tekst-l); font-weight:600; cursor:pointer; text-decoration:none;
}
.btn-small-outline{border:var(--rand-dikte) solid var(--groen);color:var(--groen);}
.btn-small-outline:hover{background:var(--groen);color:var(--op-accent);}
.btn-small-danger{border:var(--rand-dikte) solid var(--gevaar);color:var(--gevaar);min-width:var(--knop-hoogte);}
.btn-small-danger:hover{background:var(--gevaar);color:var(--op-accent);}
.btn-add{
  margin-top:12px; display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--knop-hoogte); background:none; border:var(--rand-dikte) dashed var(--groen);
  color:var(--groen); padding:4px var(--knop-ruimte); border-radius:var(--radius-m);
  font-weight:600; text-decoration:none;
}
.btn-add:hover{background:var(--creme-2);}
.btn-link-dark{color:var(--groen);font-weight:600;text-decoration:none;}
.btn-link-dark:hover{text-decoration:underline;}
.knop-los{margin-top:10px;}
.knoppen-rij{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px;}
.knoppen-rij form{margin:0;}

/* ---- Tekst ---- */
.muted{color:var(--muted);font-size:var(--tekst-xl);}
.muted a{color:var(--groen);font-weight:600;}
.klein{font-size:var(--tekst-m);}
.uitleg{color:var(--muted);font-size:var(--tekst-l);line-height:1.5;margin:6px 0 10px;}
a{color:var(--groen);}

/* ---- Meldingen (toast bovenaan) ---- */
.flashes{
  position:fixed; top:12px; left:50%; transform:translateX(-50%);
  width:calc(100% - 24px); max-width:420px; z-index:1000; pointer-events:none;
}
.flash{
  padding:10px 14px; border-radius:var(--radius-m); font-size:var(--tekst-xl); margin-bottom:10px;
  cursor:pointer; transition:opacity .4s ease; pointer-events:auto; box-shadow:var(--schaduw-3);
}
.flash-hide{opacity:0;}
.flash-error{background:var(--fout-bg);color:var(--fout);}
.flash-success{background:var(--ok-bg);color:var(--ok);}
.flash-warning{background:var(--waarschuwing-bg);color:var(--waarschuwing);}
.flash-inline{background:var(--fout-bg);color:var(--fout);padding:8px 12px;border-radius:var(--radius-m);font-size:var(--tekst-l);}
.melding-vlak{background:var(--waarschuwing-bg);border-color:var(--waarschuwing-bg);}
.melding-vlak p{margin:4px 0;}

/* ---- Badges ---- */
.badge{
  display:inline-block; font-size:var(--tekst-xs); font-weight:600; padding:2px 8px;
  border-radius:var(--radius-pil); white-space:nowrap; letter-spacing:.04em;
  font-family:var(--sans); vertical-align:middle; line-height:1.5;
}
.badge-ok{background:var(--ok-bg);color:var(--ok);}
.badge-concept{background:var(--waarschuwing-bg);color:var(--waarschuwing);}
.badge-neutraal{background:var(--neutraal-bg);color:var(--neutraal);}
.badge-indicatie{background:var(--creme-2);color:var(--neutraal);border:var(--rand-dikte) solid var(--rand);}
.badge-tekort{background:var(--fout-bg);color:var(--fout);}
.badge-voorlopig{background:var(--card);color:var(--neutraal);border:var(--rand-dikte) dashed var(--rand);}

/* ---- Kop met terug-knop ---- */
/* Blijft staan onder de balk (--kop-h: hoogte van de balk, gezet in base.html), en wel precies op
   de plek waar hij al staat — anders schuift hij bij het scrollen eerst een stukje omhoog. Die plek
   is de balk plus de ruimte boven de inhoud (--main-boven) min de 10px padding. De schaduw in de
   achtergrondkleur dekt de strook tussen balk en kop af, zodat er niets tussendoor schuift. */
.page-head{
  display:flex;align-items:center;gap:10px;margin:-10px 0 4px;padding:10px 0;
  position:sticky;top:calc(var(--kop-h, 62px) + var(--main-boven, 28px) - 10px);z-index:400;
  background:var(--creme);box-shadow:0 calc(10px - var(--main-boven, 28px)) 0 var(--creme);
}
.page-head h1{margin:0;min-width:0;overflow-wrap:anywhere;}
.back-btn{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:var(--radius-rond);
  background:var(--lichtgroen); color:var(--groen);
  text-decoration:none; font-size:var(--tekst-3xl); line-height:1;
}
.back-btn:hover{background:var(--groen);color:var(--op-accent);}

/* ---- Home: blokken en tegels ---- */
.home-section{margin-top:22px;}
.home-section:first-child{margin-top:0;}
.home-section-title{font-size:var(--tekst-4xl);margin:0 0 8px;}
.home-section-vlak{background:var(--lichtgroen-zacht);border-radius:var(--radius-xl);padding:18px 18px 20px;}

.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:16px;}
.cat-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  padding:18px 12px 14px; background:var(--card);
  border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-xl);
  box-shadow:var(--schaduw-2); text-decoration:none; color:var(--muted); text-align:center;
  transition:box-shadow .18s, transform .18s, border-color .18s;
}
.cat-tile:hover{box-shadow:var(--schaduw-3);transform:translateY(-3px);border-color:var(--groen);}
.cat-tile-icon{width:60px;height:60px;color:var(--groen);}  /* 50 → 60 (Frank 09-10-2026) */
.cat-tile-icon svg{width:100%;height:100%;}
.cat-tile-label{font-family:var(--display);font-size:var(--tekst-2xl);color:var(--groen);line-height:1.2;
  font-weight:var(--display-gewicht);letter-spacing:var(--display-spatie);text-transform:var(--display-kast);}

/* ---- Modal ---- */
.modal-overlay{
  position:fixed; inset:0; z-index:1100; padding:20px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--overlay-rgb),.5);
}
.modal-overlay[hidden]{display:none;}
.modal{
  width:100%; max-width:340px; text-align:center; background:var(--card);
  border-radius:var(--radius-xl); padding:20px 24px 18px; box-shadow:var(--schaduw-4);
}
.modal h2{font-family:var(--sans);font-size:var(--tekst-2xl);font-weight:600;color:var(--groen);margin:0 0 14px;letter-spacing:normal;}
.modal-text{font-size:var(--tekst-xl);line-height:1.5;margin:2px 0 0;}
.modal-acties{display:flex;gap:10px;margin-top:18px;}
.btn-modal{
  flex:1 1 0; display:inline-flex; align-items:center; justify-content:center;
  min-height:var(--knop-hoogte); padding:4px var(--knop-ruimte-klein); border-radius:var(--radius-m);
  cursor:pointer; font-family:inherit; font-size:var(--tekst-xl); font-weight:600;
}
.btn-modal-annuleer{background:none;border:var(--rand-dikte) solid var(--rand);color:var(--muted);}
.btn-modal:disabled{opacity:.4;cursor:default;}
.btn-modal-ok{background:var(--groen);border:var(--rand-dikte) solid var(--groen);color:var(--op-accent);}
.btn-modal-ok.btn-modal-gevaar{background:var(--gevaar);border-color:var(--gevaar);}

/* ---- Tabel ---- */
.tabel-scroll{overflow-x:auto;}
.tabel{width:100%;border-collapse:collapse;font-size:var(--tekst-l);margin-top:10px;}
.tabel th{text-align:left;font-weight:600;color:var(--muted);border-bottom:var(--rand-dikte) solid var(--rand);padding:6px 8px;}
.tabel td{border-bottom:var(--rand-dikte) solid var(--rand-zacht);padding:8px;}
/* Verticale lijnen tussen de kolommen (Frank 07-10-2026). */
.tabel td + td, .tabel th + th{border-left:var(--rand-dikte) solid var(--rand-zacht);}
.tabel .getal{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;}

/* ===========================================================
   Componenten
   =========================================================== */

.actie-grid{grid-template-columns:repeat(3,minmax(0,1fr));}
.cat-tile-sub{font-size:var(--tekst-s);color:var(--muted);line-height:1.3;}

/* Lijsten met rijen (bestellingen, beheer, koppelingen) */
.lijst{
  background:var(--card); border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-xl); overflow:hidden;
}
.card .lijst{border-radius:var(--radius-m);}
.lijst-rij{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  min-height:56px; padding:10px 14px; color:var(--tekst); text-decoration:none;
  border-top:var(--rand-dikte) solid var(--rand-zacht);
}
.lijst-rij:first-child{border-top:none;}
a.lijst-rij:hover{background:var(--creme-2);}
.lijst-rij-uit{color:var(--muted);}
.lijst-rij form{margin:0;}
.lijst-hoofd{display:flex;flex-direction:column;min-width:0;font-weight:600;font-size:var(--tekst-xl);}
.lijst-hoofd small{font-weight:400;color:var(--muted);font-size:var(--tekst-m);line-height:1.4;}

/* Formulieren */
.form-kop{font-size:var(--tekst-3xl);margin:22px 0 4px;}
.form-kop-eerste{margin-top:0;}
.veld-rij{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;}
.veld-rij[hidden]{display:none;}

/* Beheer → Kengetallen: een uitklapbare groep per bron, met het logo of de tekening van de bron (ook in Beheer → Bronnen). */
.bron-groep{margin:0 0 10px;}
.bron-groep > summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:10px 14px;
  background:var(--card);border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-l);
  font-weight:600;font-size:var(--tekst-xl);-webkit-tap-highlight-color:transparent;}
.bron-groep > summary::-webkit-details-marker{display:none;}
.bron-groep > summary:active{opacity:.72;}
.bron-groep > summary::after{content:"";margin-left:auto;width:8px;height:8px;border-right:2px solid var(--muted);
  border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .15s;}
.bron-groep[open] > summary::after{transform:rotate(-135deg);}
.bron-icoon{width:30px;height:30px;flex:none;color:var(--groen);}
.bron-icoon + .lijst-hoofd{flex:1 1 auto;}  /* de naam pakt de ruimte, anders schuift hij naar het midden */
/* Een merkteken (static/bronnen) als masker: de vorm van het logo in de themakleur, net als de tekeningen. */
.bron-logo{display:inline-block;background:currentColor;
  -webkit-mask:var(--logo) center/82% no-repeat;mask:var(--logo) center/82% no-repeat;}
.bron-groep-aantal{color:var(--muted);font-weight:400;font-size:var(--tekst-m);}
.bron-groep[open] > summary{border-radius:var(--radius-l) var(--radius-l) 0 0;border-bottom-color:transparent;}
.bron-groep > .lijst{border-radius:0 0 var(--radius-l) var(--radius-l);margin-top:0;}

/* De eenheid van een kengetal vóór de naam (Beheer → Kengetallen): €, # of %, bij een bedrag met incl/excl eronder.
   Zonder kader: het is geen knop. Vaste breedte, zodat de namen onder elkaar blijven. */
.eenheid-icoon{flex:none;display:inline-flex;align-items:center;justify-content:center;width:26px;margin-right:-6px;
  font-weight:700;font-size:var(--tekst-3xl);line-height:1;}
.eenheid-icoon > span[aria-hidden]{display:flex;flex-direction:column;align-items:center;}
.eenheid-icoon small{font-size:.5rem;font-weight:600;letter-spacing:.02em;margin-top:2px;text-transform:uppercase;}
.eenheid-euro{color:var(--reeks-1);}
.eenheid-procent{color:var(--reeks-2);}
.eenheid-aantal{color:var(--muted);}

/* Beginscherm: welk dashboard (alleen wie er meer mag inrichten). */
/* Rechts in de kop, vóór het account-bolletje: het dashboard waar je in zit (dashboard.keuze_voor_kop). */
.header-right{gap:10px;}
.dashboard-keuze{max-width:min(16rem, 38vw);margin:0;}
.dashboard-keuze select{
  width:auto;max-width:100%;padding:2px 26px 2px 10px;font-size:var(--tekst-s);min-height:0;
  border-radius:var(--radius-pil);text-overflow:ellipsis;
}
.dashboard-ander{text-align:center;margin:-6px 0 14px;}

/* Een formulier in blokken (software-norm S5.16; tegel-editor, instellingen): een kaart per groep velden, met een kop
   (eventueel met het icoon van de bron); de knop blijft onderin in beeld. */
.form-sectie-kop{display:flex;align-items:center;gap:10px;font-size:var(--tekst-2xl);margin:0;padding-bottom:8px;
  border-bottom:var(--rand-dikte) solid var(--rand);}
.plaats-onderdeel{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;margin-top:14px;}
.form-voet{position:sticky;bottom:0;z-index:300;padding:12px 0 calc(12px + env(safe-area-inset-bottom));background:var(--creme);}
.form-voet .btn{margin-top:0;}

/* Twee knoppen als één schakelaar (correctie: geteld of verschil) */
.segment{display:flex;margin-top:16px;border:var(--rand-dikte) solid var(--groen);border-radius:var(--radius-m);overflow:hidden;}
.segment label{flex:1 1 0;margin:0;cursor:pointer;}
.segment input{position:absolute;opacity:0;pointer-events:none;}
.segment span{
  display:flex; align-items:center; justify-content:center; min-height:var(--knop-hoogte);
  padding:4px 8px; color:var(--groen); font-weight:600; font-size:var(--tekst-l); text-align:center;
}
.segment input:checked + span{background:var(--groen);color:var(--op-accent);}
.segment input:focus-visible + span{box-shadow:inset var(--ring-focus);}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px;}
.chip{
  border:var(--rand-dikte) solid var(--rand); background:var(--creme-2); color:var(--groen);
  border-radius:var(--radius-pil); padding:6px 12px; min-height:36px;
  font-family:inherit; font-size:var(--tekst-l); cursor:pointer;
}
.chip:hover{background:var(--lichtgroen);}

.vinkje{display:flex;align-items:center;gap:8px;color:var(--tekst);font-size:var(--tekst-xl);}
.vinkje input{flex:none;width:20px;height:20px;accent-color:var(--groen);}

/* display:flex overschrijft anders het hidden-attribuut (filter bij een nieuwe bestelling) */
.invoer-rij[hidden], .vinkje[hidden]{display:none;}

/* Icoonknop: rond en kaal, met het volle tikvlak van 44px (prullenbak, potlood) */
.btn-icoon{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:var(--knop-hoogte); height:var(--knop-hoogte); padding:0;
  border:none; border-radius:var(--radius-rond); background:none; color:var(--groen); cursor:pointer;
}
.btn-icoon .icoon{width:var(--icoon-m);height:var(--icoon-m);}
.btn-icoon:hover{background:var(--lichtgroen-zacht);}
.btn-icoon-gevaar{color:var(--gevaar);}
.btn-icoon-gevaar:hover{background:var(--fout-bg);}
.page-head .btn-icoon{margin-left:-6px;}
.page-head .btn-icoon.kop-rechts{margin-left:auto;margin-right:-6px;}

/* Tegels met de regels van een soort zending: tikken = wijzigen, prullenbak = verwijderen */
.regel-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;}
.regel-tegel{
  position:relative; display:flex; flex-direction:column; gap:2px; min-height:104px;
  padding:12px 42px 12px 14px; background:var(--card); color:var(--tekst); text-decoration:none;
  border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-xl); box-shadow:var(--schaduw-2);
}
.regel-tegel:hover{border-color:var(--groen);}
.tegel-link{position:absolute;inset:0;z-index:1;border-radius:inherit;}
.regel-tegel-aantal{font-family:var(--display);font-size:var(--tekst-3xl);color:var(--groen);line-height:1.1;
  font-weight:var(--display-gewicht);letter-spacing:var(--display-spatie);}
.regel-tegel-artikel{font-weight:600;font-size:var(--tekst-xl);line-height:1.3;}
.regel-tegel-meta{font-size:var(--tekst-m);color:var(--muted);line-height:1.35;}
.regel-tegel .badge{align-self:flex-start;margin-top:4px;}
.tegel-weg{position:absolute;top:2px;right:2px;margin:0;z-index:2;}
.regel-tegel-nieuw{align-items:center;justify-content:center;padding:12px;border-style:dashed;border-color:var(--groen);box-shadow:none;color:var(--groen);}
.tegel-plus{font-size:2.6rem;line-height:1;font-weight:300;}
.regel-tegel-uit{opacity:.7;box-shadow:none;}
.regel-tegel:active, .btn-icoon:active{opacity:.72;transition:opacity .05s;}
.eerder{margin-top:12px;}
.eerder summary{cursor:pointer;color:var(--groen);font-weight:600;font-size:var(--tekst-l);min-height:36px;display:flex;align-items:center;}
.eerder .regel-tegels{margin-top:8px;}
.modal input[type=text]{margin-top:4px;}
button.regel-tegel{font:inherit;cursor:pointer;width:100%;}


/* Een venster met een formulier: labels en velden links uitgelijnd, kop in het midden */
.modal-form{text-align:left;}
.modal-form h2{text-align:center;}
.modal-form label:first-of-type{margin-top:0;}
.modal-breed{max-width:420px;}
.modal-hint{font-size:var(--tekst-l);color:var(--muted);line-height:1.45;margin:6px 0 0;}
/* Een kaart direct na een blok met tegels of een lijst: zelfde tussenruimte als tussen blokken */
.home-section + .card, .card + .home-section{margin-top:22px;}
.modal select[disabled]{color:var(--muted);}

/* Laatste regel van een lijst: iets toevoegen */
.lijst-rij-toevoegen{
  width:100%; justify-content:flex-start; gap:10px; min-height:52px;
  background:none; border:0; border-top:var(--rand-dikte) solid var(--rand-zacht);
  font-family:inherit; font-size:var(--tekst-xl); font-weight:600; color:var(--groen);
  text-align:left; cursor:pointer;
}
.lijst-rij-toevoegen:first-child{border-top:none;}
a.lijst-rij-toevoegen{text-decoration:none;}
/* Een plus-regel die meteen iets verstuurt (de standaardfeestdagen van een jaar) staat in een eigen formulier. */
.lijst-rij-form{margin:0;}
/* Beheer → Indelingen: het proefvak en de knop Opnieuw indelen. */
.proefvak summary{cursor:pointer;font-weight:600;color:var(--groen);}
.proefvak form{margin-top:8px;}
.proef-uitkomst{margin-top:12px;padding-top:8px;border-top:var(--rand-dikte) solid var(--rand-zacht);}
.proef-uitkomst ul{margin:4px 0 0;padding-left:18px;}
.opnieuw-form{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:16px;}
.lijst-rij-form .lijst-rij-toevoegen{border-top:var(--rand-dikte) solid var(--rand-zacht);}

/* Tikvlak over een hele tegel of regel (link of knop), met de acties (prullenbak) erboven.
   Nodig omdat een formulier niet binnen een link of knop mag staan. */
button.tegel-link, button.rij-link{background:none;border:0;padding:0;margin:0;cursor:pointer;width:100%;height:100%;}
.lijst-rij-tik{position:relative;}
.rij-link{position:absolute;inset:0;z-index:1;}
.lijst-rij-tik:hover{background:var(--creme-2);}
.lijst-rij-tik:active{opacity:.72;transition:opacity .05s;}
.rij-rechts{position:relative;z-index:2;display:flex;align-items:center;gap:6px;flex:none;}
.rij-rechts form{margin:0;}
.rij-kop{display:flex;justify-content:space-between;align-items:center;gap:12px;}
.rij-kop h2{margin:0;}
.velden-variant{border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);padding:4px 14px 12px;margin:14px 0;}
.velden-variant legend{font-size:var(--tekst-m);color:var(--muted);padding:0 6px;}
.modal-form .vinkje{margin-top:14px;}
/* Periodes bij een onderdeel: twee kolommen, en het venster scrolt als het niet past */
.modal-form{max-height:calc(100dvh - 40px);overflow-y:auto;}
.periode-keuzes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 10px;}
.periode-aantal{display:flex;gap:8px;}
.periode-aantal input{width:6em;flex:none;}
.periode-keuzes > p{grid-column:1 / -1;margin:10px 0 0;}
.modal-form .periode-keuzes .vinkje{margin-top:8px;font-size:var(--tekst-m);}
.modal-acties a.btn-modal{text-decoration:none;}

/* Greep om een regel te slepen (volgorde). Ligt boven het tikvlak van de regel; touch-action:none
   zodat de vinger op de greep sleept in plaats van de pagina te scrollen. */
.sleep-greep{
  position:relative; z-index:2; flex:none; display:inline-flex; align-items:center; justify-content:center;
  /* Bewust smal (afspraak Frank 15-09-2026): alleen wie echt aan de voorkant van de regel
     vasthoudt, versleept hem. Samen met de korte vasthoudtijd in lijst.html. */
  width:20px; height:40px; margin:-8px -4px -8px -8px; color:var(--muted);
  cursor:grab; touch-action:none; -webkit-user-select:none; user-select:none;
}
.sleep-greep .icoon{width:var(--icoon-s);height:var(--icoon-s);}
.lijst-rij-tik .lijst-hoofd{flex:1 1 auto;}
/* Slepen (static/js/volgorde.js): de regel zweeft als kopie boven de lijst; op zijn plek een lege, gestippelde plek */
.lijst-rij.sleept{background:var(--lichtgroen-zacht);box-shadow:inset 0 0 0 2px var(--rand);}
.lijst-rij.sleept > *{visibility:hidden;}
.lijst-zwevend{
  position:fixed; z-index:1200; margin:0; pointer-events:none; cursor:grabbing;
  background:var(--card); border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-m);
  box-shadow:var(--schaduw-4); transform:scale(1.03) rotate(-.6deg); opacity:.97;
}
.lijst-zwevend .sleep-greep{color:var(--groen);}
.lijst-zwevend.lijst-zwevend-neer{transform:none;box-shadow:var(--schaduw-1, none);}

/* ---- Snelmenu (0.54.0, snelmenu.py, _snelmenu.html, js/snelmenu.js) ----
   Zoals in de band-app (en de receptenapp): een half doorzichtige balk in de hoek linksonder die uit de zijkant van het scherm
   komt, tegen de linker- en onderrand, rechts boven en onder rond; elk icoon met zijn naam eronder. De kleuren komen
   uit het thema (--card, --groen) met color-mix, dus elk thema doet vanzelf mee en er komt geen eigen token bij.
   Standaard dicht: dan staat er een lipje met » aan de rand. `.vast` = altijd open (Mijn account). Laag 900: boven
   de kop (500), onder de meldingen (1000) en modals. `.sleept` zet de animatie uit tijdens het slepen en bij laden. */
.snelmenu{--snel-bg:color-mix(in srgb, var(--card) 88%, transparent);
  position:fixed;left:0;bottom:0;z-index:900;pointer-events:none;}
.snelmenu[hidden]{display:none;}
.snelmenu-balk, .snelmenu-lip, .snelmenu-meer-paneel{
  border-top-right-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl);
  background:var(--snel-bg);color:var(--groen);box-shadow:var(--schaduw-3);
  border:var(--rand-dikte) solid var(--rand);border-left:0;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
}
.snelmenu-balk{
  pointer-events:auto;display:flex;align-items:stretch;max-width:100vw;padding:4px 2px 4px 4px;
  padding-bottom:calc(4px + env(safe-area-inset-bottom, 0px));
  transition:transform .22s ease;
  /* Horizontaal vegen is van ons (inklappen), verticaal blijft scrollen. */
  touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;
}
.snelmenu.dicht .snelmenu-balk{transform:translateX(calc(-100% - 8px));}
.snelmenu.sleept .snelmenu-balk{transition:none;}
.snelmenu-knop{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;
  /* Bij vijf knoppen samen de hele schermbreedte, minus de inklapknop en de rand; op een tablet niet breder dan
     84px. Als width en niet als flex-basis: de balk is fixed zonder `right`, dus zijn breedte komt uit de inhoud. */
  gap:4px;flex:0 1 auto;width:clamp(54px, calc((100vw - 40px) / 5), 84px);min-width:0;min-height:72px;
  padding:10px 2px 8px;border:0;border-radius:var(--radius-m);background:transparent;color:inherit;
  text-decoration:none;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:opacity .05s;
}
.snelmenu-knop[hidden]{display:none;}
.snelmenu-knop:active{opacity:.72;}
.snelmenu-icoon{flex:none;width:28px;height:28px;}
.snelmenu-knop .icoon{flex:none;width:28px;height:28px;}
.snelmenu-pijl{flex:none;width:22px;height:22px;}
/* De naam onder het icoon: hoogstens twee regels; een lang woord breekt op zijn zachte afbreekstreepje. */
.snelmenu-tekst{font-size:var(--tekst-xs);font-weight:600;line-height:1.15;text-align:center;
  max-width:100%;overflow-wrap:normal;hyphens:manual;}
/* De inklapknop is smal en zachter, zonder tekst: hij hoort bij de balk, niet bij de schermen. */
.snelmenu-in{flex:0 0 28px;width:28px;justify-content:center;opacity:.7;}
.snelmenu.vast .snelmenu-in{display:none;}
/* Het icoon waarvoor de balk vanzelf openging (event snelmenu-open), licht even op. */
.snelmenu-licht-op{animation:snelmenu-licht-op 1.2s ease-out 2;}
@keyframes snelmenu-licht-op{
  0%{background:color-mix(in srgb, var(--groen) 15%, transparent);transform:scale(1);}
  30%{background:color-mix(in srgb, var(--groen) 15%, transparent);transform:scale(1.1);}
  100%{background:transparent;transform:scale(1);}
}
/* Het lipje als hij dicht is: 40px zichtbaar met », aanraakbaar 48px, even hoog als de open balk. Een TIK opent hem;
   naar rechts trekken kan ook. */
.snelmenu-greep{pointer-events:auto;display:none;position:absolute;left:0;top:0;bottom:0;
  width:48px;padding:0;border:0;background:transparent;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;}
.snelmenu.dicht .snelmenu-greep{display:block;}
.snelmenu-lip{position:absolute;left:0;top:0;bottom:0;width:40px;display:flex;align-items:center;justify-content:center;}
.snelmenu-greep:active .snelmenu-lip{opacity:.72;}
/* De schermknoppen staan in een omhulsel (voor het indelen), maar tellen voor de opmaak als kinderen van de balk. */
.snelmenu-rij{display:contents;}
/* MEER: bij meer dan vijf gekozen de vijfde plek. Het paneel staat boven de balk, even breed, de knoppen van rechts
   af boven Meer (de rechterpadding is de breedte van «). */
.snelmenu-meer[hidden]{display:none;}
.snelmenu-meer-open{background:color-mix(in srgb, var(--groen) 12%, transparent);}
.snelmenu-meer-paneel{pointer-events:auto;position:absolute;left:0;right:0;bottom:calc(100% + 8px);
  display:flex;flex-wrap:wrap;justify-content:flex-end;padding:4px 28px 4px 4px;}
.snelmenu-meer-paneel[hidden]{display:none;}
/* Ruimte onder de inhoud, zodat de balk het laatste stuk van een pagina niet afdekt. */
.snelmenu-ruimte{height:96px;}
.snelmenu-ruimte[hidden]{display:none;}
/* Weg zolang je typt: anders ligt hij over het veld of het toetsenbord. */
body.snelmenu-weg .snelmenu{display:none;}
/* De keuze onder Mijn account: greep, vinkje, het icoon zoals in de balk, en de naam. */
.snelmenu-keuze-rij{flex-wrap:nowrap;justify-content:flex-start;}
.snelmenu-keuze-rij .vinkje{flex:1;margin:0;}
.snelmenu-keuze-rij .icoon-rij{width:26px;height:26px;}
.snelmenu-vast-rij{margin-top:12px;}
.snelmenu-keuze-fout{margin:8px 0 0;color:var(--fout);}
/* Mijn account: wat er nu in het snelmenu staat, in volgorde, als labels met hun icoon. */
.snelmenu-samenvatting{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px;padding:0;list-style:none;}
.snelmenu-samenvatting li{display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 8px;
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-pil);font-size:var(--tekst-l);color:var(--tekst);}
.snelmenu-samenvatting-icoon, .snelmenu-samenvatting li .icoon{flex:none;width:18px;height:18px;color:var(--groen);}

/* Mijn account (account.py): per instelling een kop met een potlood, en kiezen in een venster. */
.modal-keuze{max-width:640px;}
.modal-kop{display:flex;align-items:center;gap:8px;margin:0 0 6px;}
.modal-kop h2{flex:1;margin:0;text-align:left;}
.modal-sluit{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;
  background:none;font:inherit;font-size:1.6rem;line-height:1;color:var(--muted);border-radius:var(--radius-rond);cursor:pointer;}
.modal-sluit:active{opacity:.72;}
.modal-keuze .modal-acties{position:sticky;z-index:3;bottom:-18px;background:var(--card);padding:10px 0 4px;}
.snelmenu-keuze-icoon{flex:none;width:26px;height:26px;color:var(--groen);}
/* In de modal twee tegels naast elkaar, ook op een telefoon. */
.modal .thema-keuzes{grid-template-columns:repeat(auto-fill,minmax(125px,1fr));}
.card-kop{display:flex;align-items:center;gap:10px;margin:0 0 10px;}
.card-kop h2{flex:1;margin:0;}
.thema-samenvatting{display:flex;align-items:center;gap:14px;}
.thema-samenvatting .thema-proef{flex:none;width:120px;border:2px solid var(--rand);border-radius:var(--radius-l);overflow:hidden;}
.thema-naam-kort{display:flex;flex-direction:column;min-width:0;}
.thema-naam-kort strong{font-size:var(--tekst-xl);}
.thema-naam-kort small{color:var(--muted);font-size:var(--tekst-m);line-height:1.35;}

.lijst-rij-toevoegen:hover{background:var(--creme-2);}
.lijst-rij-toevoegen:active{opacity:.72;transition:opacity .05s;}
.plus-rond{
  flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:var(--radius-rond); border:1.5px dashed var(--groen);
  font-size:1.2rem; line-height:1; font-weight:400;
}

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;}

/* Tweestapsverificatie (tweestaps.html): de QR-code in de tekstkleur, de sleutel en de herstelcodes leesbaar. */
.qr{display:inline-block;margin:6px 0;}
.qr svg{display:block;width:200px;height:auto;}
.geheim{word-break:break-all;font-size:var(--tekst-l);letter-spacing:.06em;}
.herstelcodes{list-style:none;padding:0;margin:10px 0 16px;display:grid;grid-template-columns:repeat(2,max-content);gap:6px 24px;}
.herstelcodes code{font-size:var(--tekst-xl);letter-spacing:.06em;}

/* ===========================================================
   Dashboard (dashboard.py, static/js/dashboard.js)
   Alleen tokens: een thema verandert ook de grafieken. Reeks 1 en 2 zijn --reeks-1/-2.
   =========================================================== */

/* Beginscherm: per onderdeel een tegel, met hoe vers de cijfers zijn. */
.onderdeel-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
.cat-tile-sub.achter{color:var(--waarschuwing);font-weight:600;}

/* Periode bovenaan een onderdeel. */
.periode-balk{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:4px 0 12px;}
/* De keuze krimpt (de tekst wordt afgekapt), zodat de pijlen er altijd naast blijven */
.periode-balk #periode{width:0;min-width:0;flex:1 1 0;max-width:28rem;text-overflow:ellipsis;}
/* De groepering staat achter de pijl: op een telefoon op een eigen regel, op een groter scherm ernaast */
.periode-balk #groepering{flex:none;width:auto;}
.periode-balk #groepering[hidden]{display:none;}
/* Inrichten: vier knoppen per onderdeel; op een telefoon de uitleg op één regel, zodat de naam leesbaar blijft */
@media (max-width:640px){
  .onderdelen-lijst .lijst-hoofd{min-width:0;}
  .onderdelen-lijst .lijst-hoofd small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
}
@media (max-width:640px){
  /* De periode vult de eerste regel tussen de pijlen; de groepering komt eronder, recht onder de periode */
  .periode-balk #periode{flex-basis:calc(100% - 2 * var(--knop-hoogte) - 16px);max-width:none;}
  .periode-balk #groepering{margin-left:calc(var(--knop-hoogte) + 8px);}
}
.periode-pijl[aria-disabled=true]{opacity:.3;pointer-events:none;}
.periode-eigen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;flex-basis:100%;}
.periode-eigen[hidden]{display:none;}
.periode-eigen input[type=date]{width:auto;}

/* Van wanneer de cijfers zijn, per bron. Oranje = ouder dan twee keer het ritme van de bron. */
/* Rechts in de periodebalk (Frank 07-10-2026): de stand per bron. */
.stand{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:2px 14px;margin-left:auto;font-size:var(--tekst-s);color:var(--muted);text-align:right;}
.stand-bron.achter{color:var(--waarschuwing);font-weight:600;}
.stand-bron.fout{color:var(--fout);font-weight:600;}

/* Het raster (migratie 026): 12 kolommen en rijen van een vaste hoogte; een tegel zegt zelf hoeveel hij beslaat
   (dashboard.js, plaats). Op de telefoon één kolom, zo hoog als de inhoud. */
.tegel-raster{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));grid-auto-rows:10px;column-gap:12px;row-gap:0;}
/* Het fijne raster (dashboard.js, STAP): de ruimte tussen de rijen is een marge onder elke tegel. */
.tegel-raster > .tegel{margin-bottom:12px;}
.tegel-raster > .tegel.tegel-vaste-hoogte{overflow:hidden;}
/* Een tabel, register of lijst in een tegel (.tegel-inhoud) vult de tegel (Frank 07-10-2026): de tegel wordt een kolom,
   de inhoud neemt de rest van de hoogte en scrolt daarbinnen met de koppen vast. Ook als hij langer wordt door
   uitklappen: de tegel groeit niet vanzelf mee, dat doet de gebruiker (Frank 09-10-2026). Alleen de inhoud scrolt, niet
   de tegel, zodat het (i)-paneel er niet in wegvalt. */
.tegel-raster > .tegel.tegel-met-inhoud{display:flex;flex-direction:column;}
.tegel-met-inhoud > .tegel-inhoud{flex:1 1 auto;min-height:0;overflow:auto;}
.tegel-met-inhoud > .tegel-inhoud .tegel-tabel{max-height:none;overflow:visible;}
/* Koppen vast bij scrollen (Frank 07-10-2026): de kopgroepen en de kolomkoppen staan samen in de thead, en die blijft
   als geheel bovenaan. Een rand gaat bij sticky niet mee, een schaduw wel. */
.tegel-tabel .tabel thead{position:sticky;top:0;z-index:2;background:var(--card);}
.tegel-tabel .tabel thead th{background:var(--card);}
.tegel-tabel .tabel thead tr:not(.kopgroepen) th{box-shadow:inset 0 calc(-1 * var(--rand-dikte)) 0 var(--rand);}
.tegel{
  background:var(--card); border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-l);
  box-shadow:var(--schaduw-2); padding:14px 16px; min-width:0;
}
/* Een onderdeel gebruikt op een desktop de hele breedte (Frank); op een breed scherm meer tegels naast elkaar. */
.site-main.site-main-breed{max-width:none;}
/* Kolombreedtes in een tabel: vaste verdeling, en een greep op de rand van een kolomkop. */
.tabel.tabel-vast{table-layout:fixed;}
.tabel.tabel-vast td, .tabel.tabel-vast th{overflow:hidden;text-overflow:ellipsis;}
/* Bij de rand van een kolom (in elke rij) wordt de aanwijzer ↔; tijdens het slepen geen tekst selecteren. */
.tabel.bij-rand, .tabel.bij-rand *, .tabel.tabel-sleept, .tabel.tabel-sleept *{cursor:col-resize;}
.tabel.tabel-sleept{user-select:none;-webkit-user-select:none;}

/* Doorklikken (V6): de knop Bekijk onder het getal opent de tegels erachter; de rest van de tegel niet (0.49.4). */
.doorklik-voet{display:block;margin-top:8px;padding:2px 0;background:none;border:0;cursor:pointer;font-family:inherit;
  font-size:var(--tekst-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
  -webkit-tap-highlight-color:transparent;}
.doorklik-voet:hover{color:var(--groen);}
.doorklik-voet:active{opacity:.72;}
.doorklik-voet:focus-visible{outline:2px solid var(--groen);outline-offset:2px;border-radius:4px;}
/* De modal met de tegels achter een getal: breed, en zelf scrollbaar. Op de telefoon schermvullend. */
.modal.modal-doorklik{min-width:0;box-sizing:border-box;max-width:min(960px, 100%);max-height:calc(100vh - 40px);display:flex;flex-direction:column;
  text-align:left;padding:16px 20px 20px;}
.doorklik-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.modal-doorklik h2{margin:0;}
.doorklik-sluit{font-size:1.6rem;line-height:1;width:40px;height:40px;}
.doorklik-inhoud{min-width:0;overflow-x:hidden;overflow-y:auto;display:grid;grid-template-columns:minmax(0,1fr);gap:12px;min-height:0;}
.doorklik-kop h2{min-width:0;overflow-wrap:anywhere;}
.doorklik-sluit{flex-shrink:0;}
.doorklik-inhoud .tegel{box-shadow:none;}
body.modal-open{overflow:hidden;}
@media (max-width:640px){
  .doorklik-overlay{padding:0;align-items:stretch;}
  .modal.modal-doorklik{max-height:100vh;border-radius:0;}
}
/* Notities onderaan een onderdeel (V9). */
.notities{display:grid;gap:8px;margin-top:16px;}
.notitie{background:var(--notitie);color:var(--tekst);border-radius:var(--radius-m);padding:10px 14px;margin:0;
  font-size:var(--tekst-s);line-height:1.5;white-space:pre-line;}
.notitie-form{display:flex;gap:8px;align-items:flex-start;flex:1;}
.notitie-form textarea{flex:1;margin:0;}
.sectie-kop{font-size:var(--tekst-l);margin:24px 0 4px;}
/* Tabelopmaak (V7). */
.tabel .kopgroepen th{text-align:center;border-bottom:0;padding-bottom:0;}
.tabel .kopgroep{border-bottom:2px solid var(--rand);}
.tabel small.aandeel{color:var(--muted);font-size:var(--tekst-xs);}
.tabel tr.totaal td{font-weight:700;border-top:var(--rand-dikte) solid var(--rand);}
.tabel tr.onder td:first-child{padding-left:26px;color:var(--muted);}
.tabel tr.onder.diepte-2 td:first-child{padding-left:44px;}
.tabel tr.onder.diepte-3 td:first-child{padding-left:62px;}
.regel-uitklap{background:none;border:0;padding:0 6px 0 0;color:var(--groen);font-size:inherit;cursor:pointer;
  display:inline-block;transition:transform .15s;-webkit-tap-highlight-color:transparent;}
.regel-uitklap.open{transform:rotate(90deg);}
.regel-uitklap:active{opacity:.72;}
.tabel-uitklap summary{cursor:pointer;color:var(--groen);font-size:var(--tekst-s);margin-top:8px;}
.grafiek .as-2{fill:var(--reeks-2);}
/* Twee dimensies (V5): geneste balken; de binnenste smaller en lichter. */
.genest{display:grid;gap:10px;margin-top:10px;}
.genest .hbalken{margin-top:0;}
.genest-binnen{margin-left:14px;}
.genest-binnen .hbalk-spoor{height:7px;}
.genest-binnen .hbalk{opacity:.6;}
.hbalk-naam.vet, .tabel td.vet{font-weight:700;}
/* Velden bij een geval (V10): verzonden, ontvangen, levertijd. */
.geval-velden{display:flex;flex-wrap:wrap;gap:4px 16px;margin:4px 0 0;font-size:var(--tekst-xs);color:var(--muted);}
.geval-velden div{display:flex;gap:4px;}
.geval-velden dt{font-weight:600;}
.geval-velden dd{margin:0;color:var(--tekst);}
.grafiek .markering{stroke:var(--card);stroke-width:1.5;}
.tegel-kop{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.tegel-titel{margin:0;font-size:var(--tekst-xl);font-weight:600;color:var(--tekst);}
.tegel-periode{font-size:var(--tekst-xs);color:var(--muted);white-space:nowrap;}
/* De i-knop rechtsboven: een tikvlak van 32px om een rondje van 20px, zonder de kop hoger te maken.
   De uitleg klapt eronder uit, binnen de tegel. */
.tegel{position:relative;}
.tegel-kop-rechts{display:flex;align-items:center;gap:6px;flex-shrink:0;}
.tegel-info-knop{
  display:grid; place-items:center; width:32px; height:32px; margin:-8px -10px -8px 0; padding:0;
  background:none; border:0; cursor:pointer; color:var(--muted);
}
.tegel-info-knop span{
  display:grid; place-items:center; width:20px; height:20px; border:1.5px solid currentColor; border-radius:50%;
  font-family:Georgia,serif; font-style:italic; font-weight:700; font-size:.8rem; line-height:1;
}
.tegel-info-knop:hover, .tegel-info-knop[aria-expanded="true"]{color:var(--groen);}
.tegel-info-knop:focus-visible{outline:2px solid var(--groen);outline-offset:-2px;border-radius:50%;}
.tegel-info-knop:active{opacity:.72;transition:opacity .05s;}
.tegel-info{
  position:absolute; z-index:20; top:44px; right:10px; width:min(320px, calc(100% - 20px));
  background:var(--card); color:var(--tekst); border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-m); box-shadow:var(--schaduw-3); padding:10px 12px;
  font-size:var(--tekst-s); line-height:1.45;
}
.tegel-info[hidden]{display:none;}
.tegel-info p{margin:0;}
.tegel-info p + p{margin-top:6px;}
.tegel-getal{font-family:var(--display);font-size:var(--tekst-5xl);line-height:1.1;margin:8px 0 2px;
  color:var(--groen);font-variant-numeric:tabular-nums;}
.btw-label{font-family:var(--sans);font-size:var(--tekst-xs);font-weight:400;color:var(--muted);margin-left:4px;letter-spacing:0;}
.tegel-getal .btw-label{font-size:var(--tekst-s);margin-left:6px;}
.tegel-verschil{font-size:var(--tekst-s);color:var(--muted);}
.tegel-verschil .beter{color:var(--ok);font-weight:600;}
.tegel-verschil .slechter{color:var(--fout);font-weight:600;}
/* Onder het getal: subregel en de waarden van een uitsplitsing (V1); onderaan de stand van de tegel (V8). */
.tegel-sub{font-size:var(--tekst-s);color:var(--muted);margin-top:2px;}
.tegel-sub p{margin:0;}
.tegel-regels{list-style:none;margin:6px 0 0;padding:0;font-size:var(--tekst-s);color:var(--muted);}
.tegel-regels li{margin:1px 0;}
.tegel-regel-waarde{color:var(--tekst);font-weight:600;font-variant-numeric:tabular-nums;}
.tegel-stand{font-size:var(--tekst-xs);color:var(--muted);margin:10px 0 0;}
.tegel-stand.achter{color:var(--waarschuwing);font-weight:600;}
.tegel-leeg{color:var(--muted);font-size:var(--tekst-m);margin:10px 0 0;}
.tegel-legenda{display:flex;gap:12px;font-size:var(--tekst-xs);color:var(--muted);margin-top:4px;}
.tegel-legenda i{display:inline-block;width:10px;height:10px;border-radius:var(--radius-xs);margin-right:4px;vertical-align:-1px;}
.tegel-legenda .stip-1{background:var(--reeks-1);}
.tegel-legenda .stip-2{background:var(--reeks-2);}

.grafiek{display:block;width:100%;height:auto;margin-top:8px;overflow:visible;}
.grafiek .as{fill:var(--muted);font-size:10px;font-family:var(--sans);}
.grafiek .raster{stroke:var(--rand-zacht);stroke-width:1;}
.grafiek .lijn-1{fill:none;stroke:var(--reeks-1);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.grafiek .lijn-2{fill:none;stroke:var(--reeks-2);stroke-width:2;stroke-linejoin:round;stroke-linecap:round;}
.grafiek .stip-1{fill:var(--reeks-1);}
.grafiek .stip-2{fill:var(--reeks-2);}
.grafiek .balk-1{fill:var(--reeks-1);}
.grafiek .balk-2{fill:var(--reeks-2);}
/* Het lopende vak (vandaag, deze maand) is nog niet af: lichter, en het pulseert zacht (Frank 06-10). De stip van een
   lijn wordt even groter; een balk alleen voller van kleur, want een balk die groeit lijkt een ander getal. */
.grafiek .loopt{opacity:.45;}
.grafiek circle.loopt{transform-box:fill-box;transform-origin:center;animation:stip-puls 1.8s ease-in-out infinite;}
.grafiek rect.loopt{animation:balk-puls 1.8s ease-in-out infinite;}
@keyframes stip-puls{0%,100%{transform:scale(1);opacity:.45;}50%{transform:scale(1.6);opacity:1;}}
@keyframes balk-puls{0%,100%{opacity:.45;}50%{opacity:.9;}}
@media (prefers-reduced-motion: reduce){.grafiek circle.loopt, .grafiek rect.loopt{animation:none;}}
.grafiek .trefvlak{fill:transparent;}
.grafiek .trefvlak:hover{fill:rgba(var(--schaduw-rgb),.06);}
.grafiek-tip{
  position:fixed; z-index:50; pointer-events:none; background:var(--card); color:var(--tekst);
  border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-m); box-shadow:var(--schaduw-3);
  padding:6px 10px; font-size:var(--tekst-s); line-height:1.4; max-width:240px;
}
.grafiek-tip[hidden]{display:none;}

.tegel-tabel{max-height:320px;overflow:auto;margin-top:10px;}
/* De marge boven de tabel buiten het scrollvak, anders scrolt de vaste kop eerst die 10 px mee (Frank 08-10-2026). */
.tegel-tabel > .tabel{margin-top:0;}
.tegel-tabel .overig td{color:var(--muted);}
/* Gevallen: inzoomen, doorklikken en aftekenen (gevallen.py). */
.geval-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px;}
.geval-tab{font:inherit;font-size:var(--tekst-s);background:none;border:var(--rand-dikte) solid var(--rand);border-radius:999px;padding:3px 12px;cursor:pointer;color:var(--tekst);}
.geval-tab[aria-pressed="true"]{background:var(--groen);border-color:var(--groen);color:var(--creme);}
.geval-tab:active{opacity:.72;}
.geval-lijst{list-style:none;margin:8px 0 0;padding:0;max-height:520px;overflow:auto;}
.geval{border-top:var(--rand-dikte) solid var(--rand-zacht);padding:8px 0;}
.geval.afgetekend .geval-titel{color:var(--muted);}
.geval-kop{display:flex;gap:10px;align-items:baseline;}
.geval-dag{font-size:var(--tekst-xs);color:var(--muted);white-space:nowrap;}
.geval-titel{flex:1;min-width:0;font-size:var(--tekst-s);font-weight:600;overflow-wrap:anywhere;}
.geval-bedrag{font-size:var(--tekst-s);font-variant-numeric:tabular-nums;white-space:nowrap;}
.geval-meta{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:4px;font-size:var(--tekst-xs);color:var(--muted);}
.geval-chip{border:var(--rand-dikte) solid var(--rand);border-radius:999px;padding:0 8px;color:var(--tekst);}
.geval-chip.gekozen{border-color:var(--groen);color:var(--groen);font-weight:600;}
.geval-notitie{font-size:var(--tekst-xs);color:var(--muted);margin:4px 0 0;white-space:pre-line;}
.geval-acties{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin-top:4px;font-size:var(--tekst-s);}
.geval-link{color:var(--groen);}
.geval-form{margin-top:8px;padding:8px 10px;border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);}
.geval-form label{font-size:var(--tekst-xs);}
.geval-knoppen{display:flex;gap:8px;margin-top:8px;}
.geval-fout{font-size:var(--tekst-xs);color:var(--fout);margin:4px 0 0;}
.tegel-voet{font-size:var(--tekst-xs);color:var(--muted);margin:6px 0 0;}

/* De vergelijking als tweede reeks (een jaar eerder, de periode ervoor): gestippeld en lichter, zodat
   het nu altijd voorop staat. */
.grafiek .lijn-2.vergelijk{stroke-dasharray:4 4;opacity:.8;}
.grafiek .balk-2.vergelijk{opacity:.4;}

/* Balken per waarde (een uitsplitsing) en de trechter: één kleur, de balk is de verhouding. */
.hbalken{display:grid;grid-template-columns:minmax(0,max-content) 1fr auto;gap:6px 10px;align-items:center;margin-top:10px;}
.hbalk-rij{display:contents;}
.hbalk-naam{font-size:var(--tekst-s);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:14em;}
.hbalk-waarde{font-size:var(--tekst-s);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;}
.hbalk-rij.overig .hbalk-naam, .hbalk-rij.overig .hbalk-waarde{color:var(--muted);}
.hbalk-spoor{display:block;height:12px;background:var(--rand-zacht);border-radius:var(--radius-xs);overflow:hidden;}
.hbalk{display:block;height:100%;background:var(--reeks-1);border-radius:var(--radius-xs);}
.hbalk.negatief{background:var(--fout);}
.hbalk-rij.overig .hbalk{opacity:.45;}
/* Twee kengetallen per waarde (V4): onder elkaar (gepaard) of achter elkaar (gestapeld). */
.hbalk-paar{display:grid;gap:2px;}
.hbalk-paar .hbalk-spoor{height:8px;}
.hbalk-spoor:has(> .hbalk-2){display:flex;}
.hbalk-paar .hbalk-spoor:has(> .hbalk-2){display:block;}
.hbalk.hbalk-2{background:var(--reeks-2);}
.hbalk-spoor > .hbalk + .hbalk{border-radius:0 var(--radius-xs) var(--radius-xs) 0;}
.trechter{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:10px;}
.trechter-kop{display:flex;justify-content:space-between;gap:10px;font-size:var(--tekst-s);margin-bottom:3px;}
.trechter-waarde{font-variant-numeric:tabular-nums;font-weight:600;}
.trechter-stap .hbalk-spoor{height:16px;}
.trechter-door{display:block;font-size:var(--tekst-xs);color:var(--muted);margin-top:2px;}

/* ---- Telefoon (tot 640px) ---- */
@media(max-width:640px){
  .tegel-raster{grid-template-columns:1fr;grid-auto-rows:auto;row-gap:12px;}
  .tegel-raster > .tegel{margin-bottom:0;}
  .hbalk-naam{max-width:8.5em;}
  .tegel-raster > .tegel{grid-column:auto !important;grid-row:auto !important;}
  .tegel-niet-telefoon{display:none;}
  .header-top{padding:10px 16px;}
  .nav-toggle{display:flex;}
  .site-nav{display:none;}
  /* Uitgeklapt: een paneel rechts onder het account-bolletje. */
  .site-nav.nav-open{
    display:flex; flex-direction:column; align-items:stretch; gap:0; padding:0;
    position:fixed; top:var(--bar-h, 62px); right:8px; width:max-content; min-width:200px;
    max-width:calc(100vw - 16px); background:var(--kop-bg);
    border:var(--rand-dikte) solid var(--kop-rand); border-radius:var(--radius-l);
    box-shadow:var(--schaduw-3); overflow:hidden; z-index:499;
  }
  .site-nav .nav-link, .site-nav .btn-link{
    display:block; width:100%; text-align:left; padding:12px 18px;
    border-bottom:var(--rand-dikte) solid var(--kop-rand); font-size:var(--tekst-xl);
  }
  .site-nav .inline-form{display:block;}
  .nav-versie{margin:0;padding:8px 18px;}

  .site-main{--main-boven:14px;padding:var(--main-boven) 12px 32px;}
  .card{padding:14px 12px;}
  .home-section-vlak{padding:12px 10px 14px;}
  .actie-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;}
  .cat-tile{padding:12px 6px 10px;gap:4px;}
  .cat-tile-icon{width:44px;height:44px;}
  .cat-tile-label{font-size:var(--tekst-xl);}
}
@media(max-width:400px){
  .veld-rij, .filterbalk{grid-template-columns:1fr;}
}

/* ===========================================================
   Thema's (Frank 30-09-2026, thema.py)
   Elk account kiest een thema onder Thema in het menu; base.html zet het als data-thema op <html>.
   Het MAW-thema is :root bovenaan en heeft hier geen blok; het standaardthema is sinds 15-10-2026
   VandePas Solutions (vdps, thema.py). Een thema zet ALLEEN tokens, plus een enkele eigen regel.
   Dezelfde thema's staan in de voorraad-app en de beeldbank; houd dit blok in de apps gelijk.

   De selector is [data-thema=…] en niet :root[…]: zo kleurt dezelfde set ook een voorbeeldtegel
   op het themascherm. Daarom zet elk blok ook de tokens die in :root van een ander token
   afgeleid zijn (--card, --kop-*, --neutraal-bg, de schaduwen): een afgeleide wordt bij :root
   uitgerekend en erft als vaste waarde, dus in een tegel zou anders de MAW-waarde blijven staan.
   Wat een thema aan vorm en letter kan wijzigen, zet [data-thema] eerst terug op MAW: een tegel
   van Oceaan op een scherm in Grafiet erft anders de hoekige vormen van Grafiet.

   Contrast: tekst en labels minstens 4,5:1, net als MAW (nagerekend 30-09-2026).
   =========================================================== */

[data-thema]{
  color-scheme:light;
  --rand-dikte:1px;
  --radius-xs:4px; --radius-s:6px; --radius-m:8px; --radius-l:10px; --radius-xl:14px;
  --radius-rond:50%; --radius-pil:999px;
  --kop-streep:none; --kop-streep-hoogte:0px;
  --display:'Bebas Neue',Impact,sans-serif;
  --script:'Pacifico',cursive;
  --sans:'Open Sans',-apple-system,Segoe UI,sans-serif;
  --display-gewicht:400; --display-spatie:.03em; --display-kast:none; --h1-grootte:var(--tekst-6xl);
  --merk-gewicht:400;    --merk-spatie:0;        --merk-kast:none;    --merk-grootte:var(--tekst-5xl);
  --icoon-lijn:3.5; --icoon-uiteinde:round; --icoon-hoek:round;
  --icoon-vlak:none; --icoon-filter:none; --icoon-draai:none;
}

/* ---- Donker: de groene familie van MAW, maar dan 's avonds. Zelfde letters, mintgroen op antraciet. ---- */
[data-thema="donker"]{
  --reeks-1:#7FC8A0;  --reeks-2:#F2A65A;
  color-scheme:dark;
  --groen:#7FC8A0;        --groen-rgb:127,200,160;
  --groen-diep:#9DD9B8;
  --groen-zacht:#5F7D6E;
  --lichtgroen:#1F2A25;
  --lichtgroen-diep:#2A3832;
  --lichtgroen-zacht:#19221E;
  --goud-ster:#D9B95B;
  --creme:#111513;  --creme-2:#1A201D;  --card:#171C1A;
  --tekst:#E6EDE9;  --muted:#9EABA4;    --placeholder:#5E6A64;
  --rand:#2B3530;   --rand-zacht:#222A26;
  --notitie:#3A2830;  /* achtergrond van een notitie (V9) */
  --op-accent:#0F1512; --op-fel:#111513;
  --ok-bg:#16291F;            --ok:#8FD6A4;
  --waarschuwing-bg:#2E2711;  --waarschuwing:#E8C86C;
  --signaal-alarm:#F783AC;      --signaal-let-op:#FFA94D;  /* bolletjes: roze en oranje */
  --fout-bg:#33191A;          --fout:#F29D91;
  --neutraal-bg:#1E2522;      --neutraal:#A9B5AF;
  --gevaar:#E86A5C; --gevaar-diep:#F28A7E;
  --schaduw-rgb:0,0,0; --overlay-rgb:0,0,0;
  --schaduw-1:0 1px 4px rgba(0,0,0,.5);
  --schaduw-2:0 4px 16px rgba(0,0,0,.35); --schaduw-3:0 8px 22px rgba(0,0,0,.5);
  --schaduw-4:0 18px 44px -14px rgba(0,0,0,.8);
  --ring-focus:0 0 0 3px rgba(127,200,160,.28);
  --kop-bg:#161D1A; --kop-merk:#7FC8A0; --kop-tekst:#A9B5AF; --kop-hover:#26332D; --kop-rand:#26302B;
  --kop-knop:#7FC8A0; --kop-knop-tekst:#0F1512;
  /* Iconen: iets dunner, met een zacht mint vlak — rustig op donker. */
  --icoon-lijn:3; --icoon-vlak:rgba(127,200,160,.16);
}

/* ---- Oceaan: fris blauw, een blauwe kop met witte letters, alles zacht en rond; Nunito. ---- */
[data-thema="oceaan"]{
  --reeks-1:#0B65A8;  --reeks-2:#D9480F;
  --groen:#0B65A8;        --groen-rgb:11,101,168;
  --groen-diep:#084F85;
  --groen-zacht:#7FA3C2;
  --lichtgroen:#D9EAF8;
  --lichtgroen-diep:#C4DDF3;
  --lichtgroen-zacht:#E8F2FB;
  --goud-ster:#FFB547;
  --creme:#F3F7FB;  --creme-2:#E6EFF7;  --card:#FFFFFF;
  --tekst:#0E2233;  --muted:#4E6275;    --placeholder:#9AABBB;
  --rand:#D3E1ED;   --rand-zacht:#E4ECF4;
  --notitie:#FBEFF3;  /* achtergrond van een notitie (V9) */
  --op-accent:#FFFFFF; --op-fel:#0E2233;
  --ok-bg:#DCF2E8;            --ok:#1C6A48;
  --waarschuwing-bg:#FFF0D3;  --waarschuwing:#7A5200;
  --signaal-alarm:#C2255C;      --signaal-let-op:#D9480F;  /* bolletjes: roze en oranje */
  --fout-bg:#FDE3E1;          --fout:#A8322B;
  --neutraal-bg:#E6EFF7;      --neutraal:#4E6275;
  --gevaar:#CC322A; --gevaar-diep:#A82821;
  --schaduw-rgb:11,101,168; --overlay-rgb:14,34,51;
  --schaduw-1:0 1px 4px rgba(14,34,51,.12);
  --schaduw-2:0 6px 20px rgba(11,101,168,.08); --schaduw-3:0 10px 28px rgba(11,101,168,.16);
  --schaduw-4:0 18px 44px -14px rgba(14,34,51,.5);
  --ring-focus:0 0 0 3px rgba(11,101,168,.22);
  --kop-bg:#0B65A8; --kop-merk:#FFFFFF; --kop-tekst:#E6F1FA; --kop-hover:#0A5896; --kop-rand:#0A5896;
  --kop-knop:#FFFFFF; --kop-knop-tekst:#0B65A8;
  --kop-streep:linear-gradient(90deg,#0B65A8,#35C4D6); --kop-streep-hoogte:4px;
  --radius-xs:6px; --radius-s:10px; --radius-m:14px; --radius-l:18px; --radius-xl:22px;
  --display:'Nunito',-apple-system,Segoe UI,sans-serif;
  --script:'Nunito',-apple-system,Segoe UI,sans-serif;
  --sans:'Nunito',-apple-system,Segoe UI,sans-serif;
  --display-gewicht:800; --display-spatie:0; --h1-grootte:var(--tekst-5xl);
  --merk-gewicht:900;    --merk-spatie:-.01em;
  /* Iconen: dik en rond, met een lichtblauw vlak, zoals de streep onder de kop. */
  --icoon-lijn:4.5; --icoon-vlak:rgba(53,196,214,.24);
}

/* ---- Zand: warm zand en terracotta, licht en luchtig; dunne Josefin Sans in kapitalen. ---- */
[data-thema="zand"]{
  --reeks-1:#A34A26;  --reeks-2:#2F6F8F;
  --groen:#A34A26;        --groen-rgb:163,74,38;
  --groen-diep:#843A1C;
  --groen-zacht:#C9A488;
  --lichtgroen:#F2E1CC;
  --lichtgroen-diep:#E9D0B2;
  --lichtgroen-zacht:#F7ECDF;
  --goud-ster:#E3B04B;
  --creme:#FBF6EF;  --creme-2:#F3EADD;  --card:#FFFCF7;
  --tekst:#2E211A;  --muted:#735F4E;    --placeholder:#BCA893;
  --rand:#EADCC8;   --rand-zacht:#F1E6D6;
  --notitie:#F8E9E2;  /* achtergrond van een notitie (V9) */
  --op-accent:#FFFCF7; --op-fel:#2E211A;
  --ok-bg:#E6EEDB;            --ok:#4A6331;
  --waarschuwing-bg:#F8EACB;  --waarschuwing:#6F500E;
  --signaal-alarm:#B5174F;      --signaal-let-op:#D9480F;  /* bolletjes: roze en oranje */
  --fout-bg:#F6DED6;          --fout:#9A3921;
  --neutraal-bg:#F3EADD;      --neutraal:#6B594A;
  --gevaar:#B5311D; --gevaar-diep:#932718;
  --schaduw-rgb:163,74,38; --overlay-rgb:46,33,26;
  --schaduw-1:0 1px 4px rgba(46,33,26,.12);
  --schaduw-2:0 4px 16px rgba(163,74,38,.07); --schaduw-3:0 8px 22px rgba(163,74,38,.13);
  --schaduw-4:0 18px 44px -14px rgba(46,33,26,.5);
  --ring-focus:0 0 0 3px rgba(163,74,38,.2);
  --kop-bg:#F2E1CC; --kop-merk:#843A1C; --kop-tekst:#6B594A; --kop-hover:#E9D0B2; --kop-rand:#EADCC8;
  --kop-knop:#A34A26; --kop-knop-tekst:#FFFCF7;
  --radius-s:8px; --radius-m:10px; --radius-l:14px; --radius-xl:18px;
  --display:'Josefin Sans',Futura,sans-serif;
  --script:'Josefin Sans',Futura,sans-serif;
  --display-gewicht:600; --display-spatie:.08em; --display-kast:uppercase; --h1-grootte:var(--tekst-5xl);
  --merk-gewicht:300;    --merk-spatie:.22em;    --merk-kast:uppercase;    --merk-grootte:var(--tekst-3xl);
  /* Iconen: licht en luchtig, een dunne lijn met een terracotta waas. */
  --icoon-lijn:2.75; --icoon-vlak:rgba(163,74,38,.14);
}

/* ---- Papier: krantenpapier, zwarte inkt en een rode merknaam; schreefletters en een dubbele lijn. ---- */
[data-thema="papier"]{
  --reeks-1:#1D1B18;  --reeks-2:#A3221B;
  --groen:#1D1B18;        --groen-rgb:29,27,24;
  --groen-diep:#000000;
  --groen-zacht:#8F877A;
  --lichtgroen:#ECE4D3;
  --lichtgroen-diep:#E0D6C1;
  --lichtgroen-zacht:#F1EBDF;
  --goud-ster:#D4B24C;
  --creme:#F6F1E7;  --creme-2:#EDE6D8;  --card:#FBF8F1;
  --tekst:#1D1B18;  --muted:#5E574C;    --placeholder:#A89F90;
  --rand:#D9D0BF;   --rand-zacht:#E7E0D2;
  --notitie:#F3E6DE;  /* achtergrond van een notitie (V9) */
  --op-accent:#FBF8F1; --op-fel:#1D1B18;
  --ok-bg:#E4EAD8;            --ok:#46562A;
  --waarschuwing-bg:#F3E6C4;  --waarschuwing:#6A5110;
  --signaal-alarm:#B5174F;      --signaal-let-op:#C2410C;  /* bolletjes: roze en oranje */
  --fout-bg:#F2DCD6;          --fout:#982A20;
  --neutraal-bg:#EDE6D8;      --neutraal:#5E574C;
  --gevaar:#A3221B; --gevaar-diep:#7F1A14;
  --schaduw-rgb:29,27,24; --overlay-rgb:29,27,24;
  --schaduw-1:0 1px 3px rgba(29,27,24,.14);
  --schaduw-2:0 1px 0 rgba(29,27,24,.08); --schaduw-3:0 2px 0 rgba(29,27,24,.2);
  --schaduw-4:0 18px 44px -14px rgba(29,27,24,.5);
  --ring-focus:0 0 0 3px rgba(29,27,24,.15);
  --kop-bg:#F6F1E7; --kop-merk:#A3221B; --kop-tekst:#5E574C; --kop-hover:#ECE4D3; --kop-rand:#D9D0BF;
  --kop-knop:#1D1B18; --kop-knop-tekst:#FBF8F1;
  --kop-streep:linear-gradient(#1D1B18 0 2px,transparent 2px 4px,#1D1B18 4px 5px); --kop-streep-hoogte:5px;
  --radius-xs:0; --radius-s:2px; --radius-m:3px; --radius-l:3px; --radius-xl:4px; --radius-pil:3px;
  --display:'DM Serif Display',Georgia,serif;
  --script:'DM Serif Cursief',Georgia,serif;
  --sans:'Lora',Georgia,serif;
  --display-spatie:0; --merk-grootte:var(--tekst-6xl);
  /* Iconen: als inkt — dunne lijn, rechte uiteinden, een licht ruwe rand (#inkt in base.html). */
  --icoon-lijn:2.5; --icoon-uiteinde:butt; --icoon-hoek:miter; --icoon-vlak:rgba(29,27,24,.06);
  --icoon-filter:url(#inkt);
}

/* ---- Grafiet: strak zwart-wit met signaalgeel; dikke lijnen, harde schaduw, geen ronde hoeken. ---- */
[data-thema="grafiet"]{
  --reeks-1:#111111;  --reeks-2:#0050A0;
  --groen:#111111;        --groen-rgb:17,17,17;
  --groen-diep:#3A3A3A;
  --groen-zacht:#8A8A8A;
  --lichtgroen:#FFE600;
  --lichtgroen-diep:#F0D800;
  --lichtgroen-zacht:#F2F2F2;
  --goud-ster:#FFE600;
  --creme:#FFFFFF;  --creme-2:#F2F2F2;  --card:#FFFFFF;
  --tekst:#111111;  --muted:#545454;    --placeholder:#9A9A9A;
  --rand:#111111;   --rand-zacht:#DDDDDD;
  --notitie:#EEEEEE;  /* achtergrond van een notitie (V9) */
  --op-accent:#FFFFFF; --op-fel:#111111;
  --ok-bg:#E1F4DF;            --ok:#1E6A1A;
  --waarschuwing-bg:#FFF5B0;  --waarschuwing:#5C5000;
  --signaal-alarm:#C2255C;      --signaal-let-op:#E8590C;  /* bolletjes: roze en oranje */
  --fout-bg:#FFE0DC;          --fout:#AE2319;
  --neutraal-bg:#F2F2F2;      --neutraal:#545454;
  --gevaar:#CC2319; --gevaar-diep:#A51C14;
  --schaduw-rgb:17,17,17; --overlay-rgb:17,17,17;
  --schaduw-1:2px 2px 0 #111111;
  --schaduw-2:4px 4px 0 #111111; --schaduw-3:6px 6px 0 #111111;
  --schaduw-4:8px 8px 0 #111111;
  --ring-focus:0 0 0 3px #FFE600;
  --kop-bg:#111111; --kop-merk:#FFE600; --kop-tekst:#D4D4D4; --kop-hover:#2E2E2E; --kop-rand:#111111;
  --kop-knop:#FFE600; --kop-knop-tekst:#111111;
  --kop-streep:repeating-linear-gradient(-45deg,#FFE600 0 10px,#111111 10px 20px); --kop-streep-hoogte:6px;
  --rand-dikte:2px;
  --radius-xs:0; --radius-s:0; --radius-m:0; --radius-l:0; --radius-xl:0; --radius-rond:0; --radius-pil:0;
  --display:'Space Grotesk',Arial,sans-serif;
  --script:'Space Mono','Courier New',monospace;
  --sans:'Space Grotesk',Arial,sans-serif;
  --display-gewicht:700; --display-spatie:-.01em; --h1-grootte:var(--tekst-5xl);
  --merk-gewicht:700;    --merk-spatie:-.02em;    --merk-grootte:var(--tekst-3xl);
  /* Iconen: strak, vierkante uiteinden en scherpe hoeken, het vlak in signaalgeel. */
  --icoon-lijn:4; --icoon-uiteinde:square; --icoon-hoek:miter; --icoon-vlak:#FFE600;
}
/* De rand van het menu op de telefoon is in Grafiet zwart op zwart; een donkergrijze lijn scheidt de regels. */
[data-thema="grafiet"] .site-nav .nav-link, [data-thema="grafiet"] .site-nav .btn-link{border-bottom-color:#2E2E2E;}

/* ---- VandePas Solutions: de huisstijl van het bedrijf en het standaardthema (Frank 15-10-2026). Zwart, wit en
   grijs, zonder accentkleur: een antraciet kop zoals het app-icoon en het opstartscherm, witte kaarten op lichtgrijs, en
   de letter van het woordmerk (Montserrat) voor koppen en de naam van de app. Alleen de statuskleuren, de bolletjes en
   de tweede reeks hebben kleur. ---- */
[data-thema="vdps"]{
  /* Grafieken: antraciet en een gedempt staalblauw — verschillen in lichtheid (3,4:1) en blijven als tekst
     leesbaar op wit (4,7:1), zodat .eenheid-procent ook kan. */
  --reeks-1:#222222;  --reeks-2:#4F7896;
  --groen:#222222;        --groen-rgb:34,34,34;
  --groen-diep:#000000;
  --groen-zacht:#8C8C8C;
  --lichtgroen:#E6E6E6;
  --lichtgroen-diep:#D9D9D9;
  --lichtgroen-zacht:#EFEFEF;
  --goud-ster:#BDBDBD;
  --creme:#F5F5F5;  --creme-2:#EBEBEB;  --card:#FFFFFF;
  --tekst:#1E1E1E;  --muted:#5E5E5E;    --placeholder:#A6A6A6;
  --rand:#DCDCDC;   --rand-zacht:#EBEBEB;
  --notitie:#EFEFEF;  /* achtergrond van een notitie (V9) */
  --op-accent:#FFFFFF; --op-fel:#1E1E1E;
  --ok-bg:#E5F0E3;            --ok:#2F6A2B;
  --waarschuwing-bg:#F6EFD9;  --waarschuwing:#765B14;
  --signaal-alarm:#C2255C;      --signaal-let-op:#E8590C;  /* bolletjes: roze en oranje */
  --fout-bg:#F6E2DF;          --fout:#A2352A;
  --neutraal-bg:#EBEBEB;      --neutraal:#5E5E5E;
  --gevaar:#C0392B; --gevaar-diep:#A5301F;
  --schaduw-rgb:0,0,0; --overlay-rgb:20,20,20;
  --schaduw-1:0 1px 4px rgba(0,0,0,.10);
  --schaduw-2:0 4px 16px rgba(0,0,0,.05); --schaduw-3:0 8px 22px rgba(0,0,0,.10);
  --schaduw-4:0 18px 44px -14px rgba(20,20,20,.45);
  --ring-focus:0 0 0 3px rgba(34,34,34,.18);
  --kop-bg:#222222; --kop-merk:#F2F2F2; --kop-tekst:#BDBDBD; --kop-hover:#333333; --kop-rand:#3A3A3A;
  --kop-knop:#F2F2F2; --kop-knop-tekst:#222222;
  --display:'Montserrat',Helvetica,Arial,sans-serif;
  --script:'Montserrat',Helvetica,Arial,sans-serif;
  --display-gewicht:700; --display-spatie:-.01em; --h1-grootte:var(--tekst-5xl);
  --merk-gewicht:600;    --merk-spatie:.01em;     --merk-grootte:var(--tekst-3xl);
  /* Iconen: een rustige lijn met een lichtgrijs vlak. */
  --icoon-lijn:3; --icoon-vlak:rgba(34,34,34,.07);
}

/* ---- Thema kiezen: per thema een tegel die zichzelf in dat thema tekent. ---- */
.thema-keuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin:10px 0 0;}
.thema-keuze{display:flex;flex-direction:column;margin:0;padding:0;cursor:pointer;color:var(--tekst);font:inherit;
  text-align:left;background:none;border:2px solid var(--rand);border-radius:var(--radius-l);overflow:hidden;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;}
.thema-keuze-actief{border-color:var(--groen);box-shadow:var(--ring-focus);}
.thema-keuze:focus-visible{outline:2px solid var(--groen);outline-offset:2px;}
.thema-keuze:active{opacity:.72;transition:opacity .05s;}
.thema-proef{display:flex;flex-direction:column;background:var(--creme);color:var(--tekst);font-family:var(--sans);}
.thema-proef-kop{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 10px;background:var(--kop-bg);}
.thema-proef-kop::after{content:"";width:16px;height:16px;flex:none;border-radius:var(--radius-rond);background:var(--kop-knop);}
.thema-proef-streep{display:block;height:var(--kop-streep-hoogte);background:var(--kop-streep);}
.thema-proef-merk{font-family:var(--script);font-size:var(--tekst-2xl);line-height:1.5;color:var(--kop-merk);
  /* Hooguit .1em letterafstand: de tegel is smaller dan de kop, en Zand liep er anders uit. */
  font-weight:var(--merk-gewicht);letter-spacing:min(var(--merk-spatie),.1em);text-transform:var(--merk-kast);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.thema-proef-vlak{display:flex;flex-direction:column;gap:6px;margin:8px;padding:8px 10px;background:var(--card);
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);box-shadow:var(--schaduw-2);}
.thema-proef-titel{font-family:var(--display);font-size:var(--tekst-2xl);line-height:1.1;color:var(--groen);
  font-weight:var(--display-gewicht);letter-spacing:var(--display-spatie);text-transform:var(--display-kast);}
.thema-proef-tekst{font-size:var(--tekst-s);color:var(--muted);line-height:1.3;}
.thema-proef-knop{align-self:flex-start;padding:2px 10px;border-radius:var(--radius-s);background:var(--groen);
  color:var(--op-accent);font-size:var(--tekst-s);font-weight:700;}
.thema-naam{display:flex;flex-direction:column;padding:6px 10px 8px;background:var(--card);border-top:var(--rand-dikte) solid var(--rand);}
.thema-naam strong{font-size:var(--tekst-xl);}
.thema-naam small{color:var(--muted);font-size:var(--tekst-m);line-height:1.35;}

/* ---- De iconen in de hand van het thema (tokens --icoon-* hierboven). Een CSS-eigenschap wint van het
   attribuut op de <svg>, dus zonder stylesheet blijft de tekening zoals _macros.html hem schrijft (MAW).
   Een vlak met een eigen kleur (fill-attribuut, geen klasse vlak) houdt die kleur. ---- */
.tekening{stroke-width:var(--icoon-lijn);stroke-linecap:var(--icoon-uiteinde);stroke-linejoin:var(--icoon-hoek);
  filter:var(--icoon-filter);transform:var(--icoon-draai);overflow:visible;}
.tekening .vlak{fill:var(--icoon-vlak);}
/* Een fijn detail binnen een tekening (het euroteken in de telefoon): dunner, naar verhouding van de hand. */
.tekening .dun{stroke-width:calc(var(--icoon-lijn) * 5 / 7);}
/* De kleine bedieningsiconen (raster 24, lijn 2) volgen de hand naar verhouding. */
.tekening-24{stroke-width:calc(var(--icoon-lijn) * 4 / 7);}
/* Niet display:none: dan vindt een browser het filter erin niet altijd. */
.svg-defs{position:absolute;width:0;height:0;overflow:hidden;}

/* ---- Het woordmerk van VandePas Solutions: alleen letters, op één regel. VandePas vet (700), Solutions normaal (400)
   en grijs (huisstijl/README.md in de mainframe-root). Het grijs mengt de tekstkleur met de achtergrond, zodat het in
   elk thema past; op antraciet en op wit komt het uit op #8C8C8C (Frank 20-10-2026). ---- */
.vps-merk{font-family:var(--merk);font-weight:400;letter-spacing:.01em;white-space:nowrap;}
.vps-merk-vet{font-weight:700;}
.vps-merk-licht{color:color-mix(in srgb,currentColor 52%,transparent);}

/* ---- Het opstartscherm van de geïnstalleerde app (opstart.js). Twee lagen boven elkaar: de neutrale (antraciet met
   het woordmerk, net als het opstartscherm van de telefoon) ligt bovenop en vloeit weg naar die in het thema. ---- */
.opstart{display:none;}
.opstart-aan .opstart{position:fixed;inset:0;z-index:2000;display:block;transition:opacity .3s;}
.opstart-weg .opstart{opacity:0;}
.opstart-thema, .opstart-neutraal{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;}
.opstart-thema{gap:18px;background:var(--kop-bg);}
.opstart-neutraal{background:var(--neutraal-app-bg);color:var(--neutraal-app-tekst);transition:opacity .4s;}
/* Even breed als op het opstartbeeld van iOS: 62% van de korte kant; het woordmerk is 10,2 em breed. */
.opstart-neutraal .vps-merk{font-size:calc(62vmin / 10.2);}
.opstart-fase-thema .opstart-neutraal{opacity:0;}
/* Het icoon als app-tegel: een dunne rand en een schaduw, anders valt zijn achtergrond weg in de kopkleur en
   zweeft wat er onderin getekend staat (een streep) los onder de tekening. */
.opstart img{width:128px;height:128px;border-radius:22%;box-shadow:0 0 0 1px color-mix(in srgb,var(--kop-merk) 30%,transparent),var(--schaduw-3);}
/* De naam van de app zoals in de kop (.brand): de merkletter van het thema. */
.opstart-naam{max-width:100%;padding:0 24px;text-align:center;overflow-wrap:anywhere;font-family:var(--script);
  font-size:var(--tekst-6xl);line-height:1.4;color:var(--kop-merk);
  font-weight:var(--merk-gewicht);letter-spacing:var(--merk-spatie);text-transform:var(--merk-kast);}
/* Onderin, zoals bij apps gebruikelijk: van wie de app is. */
.opstart-voet{position:absolute;left:0;right:0;bottom:calc(28px + env(safe-area-inset-bottom));display:flex;
  flex-direction:column;align-items:center;gap:2px;color:var(--kop-merk);opacity:.8;}
.opstart-van{font-size:var(--tekst-s);letter-spacing:.08em;text-transform:lowercase;color:var(--kop-tekst);}
.opstart-voet .vps-merk{font-size:var(--tekst-xl);}

/* ---- Stijl (Beheer → Stijl, beheer/stijl.html): het naslagscherm met alle tokens, per thema. De tokens komen er
   via data-stijl en stijl.js op; hier alleen de opmaak van het scherm zelf. ---- */
.stijl-themas{margin:6px 0 10px;}
.stijl-themas .chip[aria-pressed="true"]{background:var(--groen);border-color:var(--groen);color:var(--op-accent);}
.stijl-thema-naam{margin:4px 0 10px;color:var(--muted);}
.stijl-appiconen{display:flex;flex-wrap:wrap;align-items:flex-end;gap:16px;}
.stijl-appiconen figure, .stijl-iconen figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:4px;}
.stijl-appiconen img{border-radius:22%;box-shadow:var(--schaduw-1);}
.stijl-appiconen figcaption, .stijl-iconen figcaption{font-size:var(--tekst-s);color:var(--muted);text-align:center;}
.stijl-statusbalk{width:60px;height:24px;}
.stijl-kop{margin:28px 0 8px;}
.stijl-subkop{margin:16px 0 8px;font-family:var(--sans);font-size:var(--tekst-xl);color:var(--muted);font-weight:600;
  letter-spacing:normal;text-transform:none;}
.stijl-stalen{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px;}
.stijl-staal{display:flex;flex-direction:column;gap:2px;min-width:0;}
.stijl-staal code, .stijl-vorm code, .stijl-letter code, .stijl-regel code{font-size:var(--tekst-s);word-break:break-all;}
.stijl-vlak{display:block;height:44px;border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);}
.stijl-waarde{font-size:var(--tekst-xs);color:var(--muted);word-break:break-all;}
.stijl-uitleg{font-size:var(--tekst-xs);color:var(--muted);font-style:italic;}
.stijl-streep{display:block;max-width:420px;}
.stijl-letters{display:grid;gap:12px;}
.stijl-letter{display:flex;flex-direction:column;gap:2px;}
.stijl-letter-voorbeeld{font-size:var(--tekst-5xl);line-height:1.3;color:var(--groen);}
.stijl-schaal{display:grid;gap:4px;margin-top:14px;}
.stijl-regel{display:grid;grid-template-columns:110px 1fr;align-items:baseline;gap:10px;}
.stijl-vormen{display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:14px;}
.stijl-vorm{display:flex;flex-direction:column;gap:4px;}
.stijl-blok{display:block;height:56px;background:var(--lichtgroen);border:var(--rand-dikte) solid var(--rand);}
.stijl-blok-kaart{background:var(--card);border-radius:var(--radius-l);}
.stijl-knoppen{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:10px 0;}
.stijl-knoppen .btn-add{margin-top:0;}
.stijl-tabelwrap{overflow-x:auto;}
.stijl-tabel{border-collapse:collapse;font-size:var(--tekst-l);}
.stijl-tabel td{padding:4px 12px 4px 0;vertical-align:top;}
.stijl-tabel td:first-child{white-space:nowrap;}
.stijl-iconen{display:grid;grid-template-columns:repeat(auto-fill,minmax(88px,1fr));gap:14px;margin-top:12px;color:var(--groen);}
.stijl-iconen svg{width:50px;height:50px;}
.stijl-iconen .tekening-24{width:var(--icoon-l);height:var(--icoon-l);margin:13px;}
.stijl-kaarten{margin-top:14px;}

/* ---- Signalen (0.20): een bolletje op tegel, geval en de knop van een onderdeel; tot iemand aftekent ---- */
.signalen{display:inline-flex;gap:4px;margin-right:6px;vertical-align:middle;}
.signaal{display:inline-block;width:10px;height:10px;flex:none;border-radius:var(--radius-rond);
  box-shadow:0 0 0 2px var(--card);vertical-align:middle;}
.signaal-alarm{background:var(--signaal-alarm);}
.signaal-let_op{background:var(--signaal-let-op);}
.geval-kop .signaal{margin-right:2px;}
.cat-tile{position:relative;}
.cat-tile .signalen{position:absolute;top:10px;right:10px;margin:0;}

/* ---- Register (0.21): de regels van een indeling, per groep uit te klappen ---- */
.register-zoek{width:100%;margin:0 0 8px;}
.register-groep{border-top:var(--rand-dikte) solid var(--rand);}
.register-groep > summary{display:flex;align-items:baseline;gap:8px;padding:8px 0;cursor:pointer;list-style-position:inside;}
.register-groep > summary:active{opacity:.72;}
.register-groep-naam{font-weight:600;flex:1 1 auto;}
.register-groep-aantal{color:var(--muted);font-size:var(--tekst-s);}
.register-groep-totaal{color:var(--muted);font-size:var(--tekst-s);white-space:nowrap;}
.register-tussenkop td{font-weight:600;padding-top:10px;color:var(--groen);}
.register-code span{display:block;overflow-wrap:anywhere;}
.register-code small{display:block;color:var(--muted);overflow-wrap:anywhere;}
.register-code .badge{margin-top:2px;}
.register-kopieer{display:inline-block;margin-left:6px;font-size:var(--tekst-s);}
.register-los .register-groep-naam{color:var(--waarschuwing);}

/* ---- Icoon per onderdeel (0.22): kiezen uit de tekeningen in het venster van een onderdeel ---- */
.icoon-keuzes{display:grid;grid-template-columns:repeat(auto-fill,minmax(52px,1fr));gap:6px;}
.icoon-keuze{position:relative;display:flex;align-items:center;justify-content:center;height:52px;margin:0;
  border:var(--rand-dikte) solid transparent;border-radius:var(--radius-m);color:var(--groen);cursor:pointer;
  -webkit-tap-highlight-color:transparent;}
.icoon-keuze:active{opacity:.72;}
.icoon-keuze input{position:absolute;opacity:0;width:1px;height:1px;margin:0;}
.icoon-keuze svg{width:34px;height:34px;}
.icoon-keuze:has(input:checked){border-color:var(--groen);}
.icoon-keuze:has(input:focus-visible){outline:2px solid var(--groen);outline-offset:2px;}

/* ---- Tegel-editor: de kengetallen als lijst (0.35) ----
   Een regel per kengetal; het potlood klapt de velden onder de regel open, in een raster: het kengetal en de koptekst
   breed, "aandeel van" smal, de kopgroep half. Op de telefoon onder elkaar. */
.kengetal-lijst{overflow:visible;}
.kengetal-rij{flex-wrap:wrap;}
.kengetal-rij .lijst-hoofd{flex:1 1 12rem;}
.kengetal-rij .lijst-hoofd > span{font-size:var(--tekst-l);}
.kengetal-rij.leeg .kengetal-naam{color:var(--muted);font-weight:400;font-style:italic;}
.kengetal-nr{flex:none;min-width:1.6em;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;}
.kengetal-rij.open{background:var(--creme-2);}
.kengetal-velden{
  flex:1 0 100%; display:grid; gap:4px 12px; padding:8px 0 4px;
  grid-template-columns:minmax(0,2fr) minmax(0,2fr) minmax(7rem,1fr) minmax(0,1.5fr);
  grid-template-areas:"kengetal kengetal kop kop" "aandeel aandeel kopgroep kopgroep";
}
.kengetal-velden[hidden]{display:none;}
.kv-kengetal{grid-area:kengetal;} .kv-kop{grid-area:kop;} .kv-aandeel{grid-area:aandeel;max-width:16rem;} .kv-kopgroep{grid-area:kopgroep;}
.kengetal-velden > div[hidden]{display:none;}
.kengetal-velden label{margin-top:0;}
@media(max-width:640px){
  .kengetal-velden{grid-template-columns:1fr;grid-template-areas:"kengetal" "kop" "aandeel" "kopgroep";}
}

/* ---- Banner met de onderdelen boven een onderdeel, alleen op een groot scherm (0.36) ----
   Compacte tegels met het icoon en de naam; het huidige onderdeel is gevuld. Bolletjes zoals op het beginscherm. */
.onderdeel-banner{display:none;}
@media(min-width:900px){
  .onderdeel-banner{
    display:flex; flex-wrap:wrap; gap:8px; margin:-12px 0 12px; padding-bottom:12px;
    border-bottom:var(--rand-dikte) solid var(--rand); /* subtiele scheiding met het dashboard eronder (Frank) */
  }
  .banner-tegel{
    /* Vierkant (Frank 07-10-2026): icoon boven, naam eronder, zoals op het beginscherm maar kleiner. */
    position:relative; flex:none; width:104px; aspect-ratio:1; box-sizing:border-box;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:8px 6px;
    text-align:center; line-height:1.25;
    background:var(--card); color:var(--tekst); text-decoration:none; font-weight:600; font-size:var(--tekst-m);
    border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-l); -webkit-tap-highlight-color:transparent;
  }
  .banner-tegel:hover{background:var(--creme-2);}
  .banner-tegel:active{opacity:.72;}
  .banner-tegel.actief{border-color:var(--groen); box-shadow:inset 0 0 0 1px var(--groen); background:var(--lichtgroen-zacht);}
  .banner-icoon{flex:none; display:inline-flex; width:32px; height:32px;}  /* 26 → 32 (Frank 09-10-2026) */
  .banner-icoon svg{width:32px; height:32px;}
  .banner-naam{max-width:100%; overflow:hidden; font-size:var(--tekst-s); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
  .banner-tegel .signalen{position:absolute; top:4px; right:6px;}
  /* Met de banner geen paginakop: die zegt hetzelfde en schoof met zijn schaduw over de banner. */
  .onderdeel-banner ~ .page-head{display:none;}
}


/* ---- Tegels schikken op het dashboard (0.39): optillen aan de titelbalk, maat aan de rechter- en onderrand ---- */
.tegel-rand{display:none;}
@media(min-width:641px){
  .schikbaar .tegel-kop{cursor:grab;}
  .schikbaar .tegel-rand{display:block;position:absolute;z-index:3;border-radius:6px;}
  .tegel-rand-rechts{top:12px;bottom:12px;right:0;width:10px;cursor:ew-resize;}
  .tegel-rand-onder{left:12px;right:12px;bottom:0;height:10px;cursor:ns-resize;}
  .tegel-rand-hoek{right:0;bottom:0;width:16px;height:16px;cursor:nwse-resize;}
  /* Subtiel (Frank 08-10-2026): een dunne lijn op de rand zelf; het vlak om vast te pakken blijft 10 px. */
  .tegel-rand-rechts:hover, .tegel-breder .tegel-rand-rechts{box-shadow:inset -2px 0 0 var(--rand);}
  .tegel-rand-onder:hover, .tegel-breder .tegel-rand-onder{box-shadow:inset 0 -2px 0 var(--rand);}
}
/* Opgetild: een kopie zweeft onder de aanwijzer, op de plek in het raster een lege, gestippelde plek. */
.tegel-zwevend{
  position:fixed; z-index:600; margin:0; pointer-events:none; cursor:grabbing;
  box-shadow:var(--schaduw-3), 0 18px 40px rgba(0,0,0,.18); transform:scale(1.02); opacity:.96;
}
.tegel-zwevend.neerzetten{transform:none;box-shadow:var(--schaduw-2);}
.tegel.tegel-plek{background:var(--lichtgroen-zacht);box-shadow:inset 0 0 0 2px var(--rand);border-style:dashed;}
.tegel.tegel-plek > *{visibility:hidden;}
.tegel.tegel-breder{box-shadow:0 0 0 2px var(--groen);}
.tegel.tegel-breder::after{
  content:attr(data-maat); position:absolute; right:14px; bottom:14px; z-index:4; padding:2px 8px;
  background:var(--groen); color:#fff; border-radius:var(--radius-pil); font-size:var(--tekst-s); font-weight:600;
}
body.tegels-schikken{user-select:none;-webkit-user-select:none;}
body.tegels-schikken .tegel-kop{cursor:grabbing;}
body.schikken-rechts{cursor:ew-resize;} body.schikken-onder{cursor:ns-resize;} body.schikken-hoek{cursor:nwse-resize;}
@media (prefers-reduced-motion: reduce){ .tegel-zwevend{transform:none;} }

/* Maatwerk voor één klant (B19): herkenbaar in Beheer. */
.maatwerk-label{display:inline-block;padding:0 7px;border-radius:var(--radius-pil);font-size:var(--tekst-xs);font-weight:600;
  color:var(--groen);background:var(--lichtgroen-zacht);border:var(--rand-dikte) solid var(--rand);vertical-align:middle;}
.vergelijk-melding{font-size:var(--tekst-xs);white-space:pre-wrap;margin:8px 0 0;color:var(--muted);}

/* Een venster met een vaste kop en voet (het snelmenu onder Mijn account): alleen de inhoud ertussen scrolt, zodat Klaar
   op zijn plek blijft. Een plakkende voet (position:sticky) in een venster dat zelf scrolt, schoof bij het scrollen een
   stukje mee. Slepen scrolt de inhoud mee (volgorde.js, scrollBak). Bewust onderaan: wint van de gewone vensterregels. */
.modal.modal-vast-voet{display:flex;flex-direction:column;max-height:calc(100dvh - 40px);overflow:hidden;margin:0;}
.modal.modal-vast-voet .modal-kop{flex:none;}
.modal.modal-vast-voet .modal-inhoud{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  margin:0 -24px;padding:0 24px;}
.modal.modal-vast-voet .modal-acties{flex:none;position:static;padding:12px 0 0;margin-top:0;}

/* ---- Beheer-app ----
   Wat alleen de beheer-app heeft; de rest is de opmaak van de ceo-app (bewuste kopie, S7.2). */
/* Gegevens van een server: label links, waarde rechts; op de telefoon onder elkaar. */
.gegevens{display:grid;grid-template-columns:max-content 1fr;gap:6px 16px;margin:0;}
.gegevens dt{color:var(--muted);}
.gegevens dd{margin:0;overflow-wrap:anywhere;}
@media (max-width:480px){.gegevens{grid-template-columns:1fr;gap:0;}.gegevens dd{margin-bottom:8px;}}
/* Een server die uit staat: zichtbaar, maar teruggetrokken. */
.cat-tile.tegel-uit{opacity:.55;}

/* Status als stip: groen, oranje, rood, grijs (onbekend) en leeg (nog geen metingen). De tekst staat er voor
   schermlezers bij (sr-only), de kleur alleen is nooit de enige drager. */
.stip{display:inline-block;width:12px;height:12px;border-radius:50%;flex:0 0 auto;vertical-align:middle;
  background:var(--neutraal);}
.stip-ok{background:var(--ok);}
.stip-warn{background:var(--waarschuwing);}
.stip-crit{background:var(--fout);box-shadow:0 0 0 3px var(--fout-bg);}
.stip-unknown{background:var(--neutraal);}
.stip-geen{background:transparent;border:2px solid var(--rand);}
.server-tegel{position:relative;}
.server-tegel-stip{position:absolute;top:12px;right:12px;}
.server-tegel-cijfers{font-variant-numeric:tabular-nums;}

/* Nu: meters voor CPU, geheugen, swap, load en schijf. */
.meters{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px;}
.meter{display:flex;flex-direction:column;gap:4px;}
.meter-naam{color:var(--muted);font-size:var(--tekst-l);}
.meter-getal{font-size:var(--tekst-4xl);font-weight:700;font-variant-numeric:tabular-nums;line-height:1.1;}
.meter-balk{display:block;height:6px;border-radius:3px;background:var(--rand);overflow:hidden;}
.meter-vulling{display:block;height:100%;background:var(--ok);transition:width .4s;}
.meter-vulling.meter-warn{background:var(--waarschuwing);}
.meter-vulling.meter-crit{background:var(--fout);}
.meter-sub{font-size:var(--tekst-m);}
.nu-bron{font-size:var(--tekst-m);}

/* Checks: stip, label met toelichting, waarde rechts. */
.check-rij{gap:12px;align-items:center;justify-content:flex-start;}
.check-rij .lijst-hoofd{flex:1;}
.check-waarde{font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--muted);}
.tabel.containers .stip{width:9px;height:9px;}

/* Verloop: één lijn per grafiek, in procenten (home.GRAFIEKEN). */
.chip.chip-actief{background:var(--groen);color:var(--card);border-color:var(--groen);}
.grafieken{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:18px;}
.grafiek-kaart{margin:0;}
.grafiek-kaart figcaption{font-weight:600;margin-bottom:6px;}
.verloop{display:block;width:100%;height:120px;background:var(--neutraal-bg);border-radius:var(--radius-m, 8px);}
.verloop-lijn{fill:none;stroke:var(--groen);stroke-width:2;vector-effect:non-scaling-stroke;}
.verloop-raster{stroke:var(--rand);stroke-width:1;stroke-dasharray:4 4;vector-effect:non-scaling-stroke;}
.verloop-as{display:flex;justify-content:space-between;font-size:var(--tekst-s, 12px);margin-top:4px;}
a.chip{text-decoration:none;display:inline-flex;align-items:center;}

/* Werklijsten (security, software, privacy): de score als cijfer, tegels per server/app/organisatie, bevindingen. */
.score-kaart{display:flex;align-items:center;gap:18px;}
.score-cijfer{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:0 0 auto;
  width:76px;height:76px;border-radius:var(--radius-xl);font-size:2.4rem;font-weight:700;line-height:1;
  background:var(--neutraal-bg);color:var(--neutraal);}
.score-cijfer small{font-size:var(--tekst-m);font-weight:600;margin-top:2px;}
.score-ok{background:var(--ok-bg);color:var(--ok);}
.score-warn{background:var(--waarschuwing-bg);color:var(--waarschuwing);}
.score-crit{background:var(--fout-bg);color:var(--fout);}
.score-tekst{display:flex;flex-direction:column;gap:6px;min-width:0;}
.score-ernsten .badge{margin-right:4px;}
.as-tegels{display:flex;flex-wrap:wrap;gap:10px;}
.as-tegel{display:flex;align-items:center;gap:8px;padding:10px 14px;border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-l);background:var(--card);color:var(--tekst);text-decoration:none;}
.as-tegel:hover{border-color:var(--groen);}
.as-tegel-actief{border-color:var(--groen);box-shadow:0 0 0 2px var(--groen) inset;}
.as-tegel-naam{font-weight:600;}
.chips-scheiding{flex-basis:100%;height:0;}
.chip .stip{width:9px;height:9px;}
.bevinding-rij{justify-content:flex-start;}
.bevinding-rij .lijst-hoofd{flex:1;}
.bevinding-ernst{flex:0 0 auto;min-width:58px;text-align:center;}
.bevinding-meta{white-space:nowrap;color:var(--muted);font-size:var(--tekst-l);}
.bevinding-tekst{white-space:pre-wrap;overflow-wrap:anywhere;font-size:var(--tekst-l);background:var(--neutraal-bg);
  padding:10px 12px;border-radius:var(--radius-m);margin:6px 0 14px;font-family:inherit;}
@media (max-width:480px){.score-kaart{flex-direction:column;align-items:flex-start;}}
.norm-tegel{padding:10px 16px 10px 10px;}
.norm-cijfer{width:48px;height:48px;font-size:1.6rem;border-radius:var(--radius-l);}
.norm-tegel .as-tegel-naam{display:flex;flex-direction:column;}
.lijst-rij .app-hoofd{flex:1;}
a.lijst-rij.lijst-rij-tik{justify-content:flex-start;}
.chip .stip{margin-right:6px;}