/* ===========================================================
   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 300. */
@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:#3B5B4C;  --reeks-2:#E66204;
  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;
  --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;
  --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;}
body{-webkit-user-select:none;user-select:none;}
input,textarea,select{-webkit-user-select:text;user-select:text;}

.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;}

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:50px;height:50px;color:var(--groen);}
.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-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;}
.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;}
.lijst-pijl{color:var(--groen-zacht);font-size:var(--tekst-3xl);line-height:1;}

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

/* 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{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;}

/* 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;}
.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;}
.lijst-rij.sleept{position:relative;z-index:5;background:var(--lichtgroen-zacht);box-shadow:var(--schaduw-3);}
.lijst-rij.sleept .sleep-greep{cursor:grabbing;color:var(--groen);}
.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;}
.periode-balk select{width:auto;min-width:0;flex:0 1 auto;}
.periode-eigen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;}
.periode-eigen input[type=date]{width:auto;}

/* Van wanneer de cijfers zijn, per bron. Oranje = ouder dan twee keer het ritme van de bron. */
.stand{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:var(--tekst-s);color:var(--muted);margin:0 0 14px;}
.stand-bron.achter{color:var(--waarschuwing);font-weight:600;}
.stand-bron.fout{color:var(--fout);font-weight:600;}

.tegel-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.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;
}
.tegel-breed{grid-column:span 2;}
.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;}
.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;}
.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;}
.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. */
.grafiek .loopt{opacity:.45;}
.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;}

/* ---- Telefoon (tot 640px) ---- */
@media(max-width:640px){
  .tegel-raster{grid-template-columns:1fr;}
  .tegel-breed{grid-column:auto;}
  .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:36px;height:36px;}
  .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. Een thema zet ALLEEN tokens, plus
   een enkele eigen regel. Dezelfde zes thema's staan in de voorraad-app en de beeldbank; houd
   dit blok in beide 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;
  --op-accent:#0F1512; --op-fel:#111513;
  --ok-bg:#16291F;            --ok:#8FD6A4;
  --waarschuwing-bg:#2E2711;  --waarschuwing:#E8C86C;
  --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;
  --op-accent:#FFFFFF; --op-fel:#0E2233;
  --ok-bg:#DCF2E8;            --ok:#1C6A48;
  --waarschuwing-bg:#FFF0D3;  --waarschuwing:#7A5200;
  --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;
  --op-accent:#FFFCF7; --op-fel:#2E211A;
  --ok-bg:#E6EEDB;            --ok:#4A6331;
  --waarschuwing-bg:#F8EACB;  --waarschuwing:#6F500E;
  --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;
  --op-accent:#FBF8F1; --op-fel:#1D1B18;
  --ok-bg:#E4EAD8;            --ok:#46562A;
  --waarschuwing-bg:#F3E6C4;  --waarschuwing:#6A5110;
  --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;
  --op-accent:#FFFFFF; --op-fel:#111111;
  --ok-bg:#E1F4DF;            --ok:#1E6A1A;
  --waarschuwing-bg:#FFF5B0;  --waarschuwing:#5C5000;
  --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;}

/* ---- 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);}
/* 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, VandePas vet en Solutions licht, op één regel. ---- */
.vps-merk{font-family:var(--merk);font-weight:300;letter-spacing:.01em;white-space:nowrap;}
.vps-merk-vet{font-weight:700;}

/* ---- 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,1 em breed. */
.opstart-neutraal .vps-merk{font-size:calc(62vmin / 10.1);}
.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;}