/* ===========================================================
   Social Inbox — stijl
   De standaard van de apps van VandePas Solutions: dezelfde tokens, componenten, thema's en maten als de ceo-app en de
   beheer-app (BEWUSTE KOPIE, S7.2; bron: beheer-app static/css/style.css). Wat alleen voor deze app bestaat staat
   onderaan, onder "Social Inbox".

   ELKE kleur van de app staat in :root of in een themablok. 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;
  /* Signaalkleuren voor de statusbolletjes: helder, want een tekstkleur (--fout) is te donker voor een klein rondje. */
  --stip-ok:#2E9E4F;          --stip-warn:#E8A317;          --stip-crit:#D93025;
  --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;}

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

.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;}
/* 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;}
/* Labels rechts in een regel (rol, status, aantal) zijn geen knop: een tik erop gaat naar de regel zelf. Alleen wat je
   kunt bedienen (prullenbak) vangt de tik zelf op (1.4.0; op een telefoon besloegen de labels een groot deel). */
.lijst-rij-tik .rij-rechts{pointer-events:none;}
.lijst-rij-tik .rij-rechts :is(a, button, form, input, select, label){pointer-events:auto;}
.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;}
/* 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;}
/* Het kruisje staat tegen de rechterkant van de knop, dus even ver van de rand als de velden; het tikvlak blijft 36px. */
.modal-sluit{display:inline-flex;align-items:center;justify-content:flex-end;width:36px;height:36px;padding:0;border:0;
  background:none;font:inherit;font-size:1.6rem;line-height:1;color:var(--muted);text-decoration:none;
  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;}


/* ---- Telefoon (tot 640px) ---- */
@media(max-width:640px){
  .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{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 alle apps van VandePas Solutions; 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;
  --stip-ok:#4CC77A;          --stip-warn:#F2C14E;          --stip-crit:#F2574A;
  --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;
  --stip-ok:#2E9E4F;          --stip-warn:#E8A317;          --stip-crit:#D93025;
  --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;
  --stip-ok:#2E9E4F;          --stip-warn:#E8A317;          --stip-crit:#D93025;
  --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;
  --stip-ok:#2E9E4F;          --stip-warn:#E8A317;          --stip-crit:#D93025;
  --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;
  --stip-ok:#2E9E4F;          --stip-warn:#E8A317;          --stip-crit:#D93025;
  --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;
  --stip-ok:#2E9E4F;          --stip-warn:#E8A317;          --stip-crit:#D93025;
  --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);}

/* ===========================================================
   Social Inbox
   Wat alleen deze app heeft: de inbox (filters, lijst, detail, antwoorden) en de beheerschermen. Overgezet van de
   oude MamsatWork-stijl (paars/goud) naar de tokens hierboven, zodat elk thema vanzelf meedoet. De enige vaste
   kleuren zijn die van Facebook en Instagram zelf (--merk-*): een logo houdt zijn eigen kleur.
   =========================================================== */

:root{
  --merk-facebook:#1877F2;
  --merk-instagram:#E1306C;
  --merk-advertentie:#E01B1B;
}

/* De inbox gebruikt de hele breedte en vult de hoogte onder de balk; lijst en detail scrollen elk binnen zichzelf. */
.site-main-breed{--main-boven:14px;max-width:1500px;padding:var(--main-boven) 20px 14px;}
.inbox{display:flex;flex-direction:column;height:calc(100vh - var(--kop-h, 62px) - 28px);}
.sprite{position:absolute;width:0;height:0;overflow:hidden;}

/* Beheerschermen (Standaardantwoorden, Funnel, Kanalen, Gebruikers, Mijn account). */
.beheer{max-width:900px;}
.beheer > .uitleg{background:var(--card);border:var(--rand-dikte) solid var(--rand);border-left:4px solid var(--groen-zacht);
  border-radius:var(--radius-m);padding:12px 16px;margin:0 0 16px;}
.uitleg code{background:var(--creme-2);padding:1px 5px;border-radius:var(--radius-xs);}
.zacht{color:var(--muted);}
.klein{margin:8px 0 0;}
.let-op{border-left:3px solid var(--fout);padding-left:10px;}
.waarschuwing{color:var(--waarschuwing);}
.placeholder{background:var(--card);border:var(--rand-dikte) solid var(--rand);border-left:4px solid var(--groen-zacht);
  border-radius:var(--radius-m);padding:14px 16px;color:var(--muted);line-height:1.5;}
.placeholder[hidden]{display:none;}

/* ---- Icoonknoppen ---- */
.ico{
  display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;padding:0;
  border:var(--rand-dikte) solid var(--rand);background:var(--card);color:var(--muted);
  border-radius:var(--radius-s);cursor:pointer;
}
.ico svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.ico:hover{color:var(--groen);border-color:var(--groen);}
.ico:disabled{opacity:.4;cursor:default;}
.ico:active:not(:disabled){opacity:.72;}
.act-done:hover{color:var(--ok);border-color:var(--ok);}
.act-ignore:hover{color:var(--gevaar);border-color:var(--gevaar);}
.ico-solid{background:var(--groen);color:var(--op-accent);border-color:var(--groen);}
.ico-solid:hover{background:var(--groen-diep);color:var(--op-accent);border-color:var(--groen-diep);}
/* Duimpje: gevuld icoon, in het blauw van Facebook bij hover. */
.act-like svg{fill:currentColor;stroke:none;}
.act-like:hover{color:var(--merk-facebook);border-color:var(--merk-facebook);}

/* ---- Inbox-kop, zoeken, filters ---- */
.help{position:relative;}
.help-btn{
  list-style:none;cursor:pointer;user-select:none;display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:var(--radius-rond);border:var(--rand-dikte) solid var(--rand);
  background:var(--card);color:var(--muted);font-weight:700;font-size:var(--tekst-l);
}
.help-btn::-webkit-details-marker{display:none;}
.help-btn:hover, .help[open] .help-btn{border-color:var(--groen);color:var(--groen);}
.help .kbd-hint{
  position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:320px;max-width:80vw;
  background:var(--card);border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);
  box-shadow:var(--schaduw-3);padding:10px 12px;
}
.kbd-hint{font-size:var(--tekst-m);color:var(--muted);line-height:1.5;}
.kbd-hint div{padding:2px 0;}
.kbd-hint kbd{
  background:var(--card);border:var(--rand-dikte) solid var(--rand);border-bottom-width:2px;border-radius:var(--radius-xs);
  padding:0 5px;font-family:inherit;font-size:var(--tekst-s);color:var(--tekst);margin:0 1px;
}

/* Bovenste filterrij: kanaal- en bron-knoppen, het zoekveld, bijwerken en de sneltoetsen. */
.topfilters{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin:2px 0 8px;}
.topfilters .searchbar{flex:1 1 280px;margin:0;}
/* Klapt de filters in en uit; alleen op een smal scherm, waar de filterbalk anders een kwart van het scherm opeet. */
.filter-btn{display:none;}

.searchbar{display:flex;gap:8px;align-items:center;}
.searchbar input[type=search]{
  flex:1 1 320px;max-width:520px;width:auto;min-height:36px;padding:6px 14px;
  border-radius:var(--radius-pil);font-size:var(--tekst-xl);
}
/* Datumfilter: één keuzemenu met vaste periodes. */
.period-select{
  width:auto;min-height:36px;padding:6px 10px;border-radius:var(--radius-pil);
  font-size:var(--tekst-l);cursor:pointer;
}

.filters{display:flex;flex-wrap:wrap;gap:10px 24px;margin-bottom:14px;}
.filtergroup{display:flex;gap:5px;}

/* Bijwerken met een aftelring: de ring loopt vol tot de volgende automatische ronde (inbox.js zet --voortgang). */
.vernieuw{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;cursor:pointer;
  background:none;border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-pil);
  padding:3px 11px 3px 7px;font:inherit;font-size:var(--tekst-m);color:var(--muted);
}
.vernieuw:hover:not(:disabled){border-color:var(--groen);color:var(--groen);}
.vernieuw:disabled{cursor:default;opacity:.65;}
.vernieuw:active:not(:disabled){opacity:.72;}
.vernieuw-ring{
  position:relative;flex:0 0 auto;width:1.15rem;height:1.15rem;border-radius:var(--radius-rond);
  display:grid;place-items:center;background:conic-gradient(var(--groen) var(--voortgang, 0%), var(--rand) 0);
}
.vernieuw-ring::before{content:"";position:absolute;inset:2px;border-radius:var(--radius-rond);background:var(--card);}
.vernieuw-ring svg{position:relative;width:.7rem;height:.7rem;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round;}
.vernieuw.bezig .vernieuw-ring svg{animation:draai 1s linear infinite;}
@keyframes draai{to{transform:rotate(360deg);}}

/* Statusknoppen: aan = gevuld (.active), uit = uitgegrijsd. */
.chip{
  display:inline-flex;align-items:center;min-height:32px;padding:4px 12px;
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-pil);
  background:var(--card);color:var(--muted);text-decoration:none;font-family:inherit;font-size:var(--tekst-l);cursor:pointer;
}
.chip:hover{border-color:var(--groen);color:var(--groen);}
.chip:active{opacity:.72;}
.chip.active{background:var(--groen);border-color:var(--groen);color:var(--op-accent);}
.chip[hidden]{display:none;}
.chip-toggle.off{opacity:.55;}
.chip-toggle.off:hover{opacity:1;}

/* Kanaal-logo's en bron-icoontjes als aan/uit-knop. Aan = kleur, uit = grijs. */
.toggles{gap:6px;}
.toggle{
  display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;padding:6px;
  border:var(--rand-dikte) solid var(--rand);background:var(--card);border-radius:var(--radius-m);
  cursor:pointer;text-decoration:none;transition:border-color .12s, opacity .12s, filter .12s;
}
.toggle svg{width:100%;height:100%;display:block;}
.toggle:hover{border-color:var(--groen);}
.toggle:active{opacity:.72;}
.toggle.off{filter:grayscale(1);opacity:.38;}
.toggle.off:hover{opacity:.62;}
.toggle-instagram svg{fill:var(--merk-instagram);}
.toggle-facebook svg{fill:var(--merk-facebook);}
/* Post = de gevulde tekstballon, advertentie = de gevulde megafoon in rood, zodat hij opvalt. */
.toggle-post{color:var(--groen);}
.toggle-post svg, .toggle-ad svg{fill:currentColor;stroke:none;}
.toggle-ad{color:var(--merk-advertentie);}

/* ---- Twee panelen: lijst en detail, elk met een eigen scrollbalk ---- */
.split{
  display:grid;grid-template-columns:minmax(320px,1fr) minmax(380px,1.05fr);gap:16px;
  align-items:stretch;flex:1 1 auto;min-height:0;
}
.pane-list{overflow-y:auto;min-height:0;padding-right:3px;}
.pane-detail{
  overflow-y:auto;min-height:0;background:var(--card);border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-l);padding:14px 16px;
}
/* Terugknop: alleen op een smal scherm, waar lijst en detail elkaar afwisselen. */
.detail-back{display:none;}

/* ---- Reactielijst (links) ---- */
.items{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.load-more{
  display:block;margin:12px auto;min-height:36px;padding:6px 20px;
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-pil);background:var(--card);
  color:var(--groen);font-family:inherit;font-size:var(--tekst-l);font-weight:600;cursor:pointer;
}
.load-more:hover{border-color:var(--groen);background:var(--creme-2);}
.load-more:disabled{opacity:.5;cursor:default;}
.load-more[hidden]{display:none;}
.item{
  display:flex;align-items:flex-start;gap:8px;background:var(--card);border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-m);padding:8px 10px;cursor:pointer;
}
.item:hover{border-color:var(--groen-zacht);}
.item.selected{border-color:var(--groen);box-shadow:var(--ring-focus);}
/* Aangevinkt voor de batchverwerking (los van .selected = de reactie die rechts in het detail staat). */
.item.picked{background:var(--lichtgroen-zacht);border-color:var(--groen-zacht);}

/* ---- Batchverwerking ---- */
.row-pick{display:flex;align-items:center;padding-top:2px;cursor:pointer;margin:0;}
.row-pick input, .bulk-all input{width:16px;height:16px;margin:0;accent-color:var(--groen);cursor:pointer;}
.bulk-all{display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-weight:600;margin:0;color:inherit;font-size:inherit;}
/* "Selecteer alle N die aan dit filter voldoen": een link in de balk. */
.link-btn{border:0;background:none;padding:0;cursor:pointer;font-family:inherit;font-size:var(--tekst-l);font-weight:600;
  color:var(--groen);text-decoration:underline;}
.link-btn[hidden]{display:none;}
/* Blijft bij het scrollen bovenaan de lijst staan, zodat je de selectie nooit kwijtraakt. */
.bulkbar{
  position:sticky;top:0;z-index:2;display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-bottom:8px;
  padding:8px 10px;background:var(--lichtgroen-zacht);border:var(--rand-dikte) solid var(--groen);
  border-radius:var(--radius-m);font-size:var(--tekst-l);color:var(--groen-diep);
}
.bulkbar[hidden]{display:none;}
/* Afvinken en negeren als paar rechts; pas in beeld zodra er iets aangevinkt is (inbox.js). */
.bulk-acties{display:flex;align-items:center;gap:8px;margin-left:auto;}
.bulk-acties[hidden]{display:none;}
.bulk-btn{
  display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:4px 12px;
  border:var(--rand-dikte) solid var(--groen);border-radius:var(--radius-pil);background:var(--card);color:var(--groen);
  font-family:inherit;font-size:var(--tekst-l);font-weight:600;cursor:pointer;
}
.bulk-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
.bulk-btn:hover{background:var(--groen);color:var(--op-accent);}
.bulk-btn:active{opacity:.72;}
.bulk-btn:disabled{opacity:.5;cursor:default;}
.bulk-error{color:var(--fout);font-size:var(--tekst-m);}
.bulk-error:empty{display:none;}

.row-main{flex:1 1 auto;min-width:0;}
.row-top{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-bottom:2px;}
.row-body{display:flex;align-items:flex-start;gap:6px;}
.row-text{
  flex:1 1 auto;min-width:0;font-size:var(--tekst-xl);line-height:1.35;color:var(--tekst);word-break:break-word;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
/* Een getagde naam. Meta levert een vermelding als gewone tekst; zonder opmaak lees je hem als het begin van de zin. */
.row-mention, .thread-mention{color:var(--groen);font-weight:600;}
.row-attach{flex:0 0 30px;width:30px;height:30px;object-fit:cover;border-radius:var(--radius-xs);
  border:var(--rand-dikte) solid var(--rand);background:var(--creme-2);}
.row-actions{display:flex;gap:4px;visibility:hidden;}
.item:hover .row-actions, .item.selected .row-actions{visibility:visible;}

/* Kanaal-logo en bron-icoontje in de reactieregel. */
.row-logo{display:inline-flex;flex:0 0 16px;width:16px;height:16px;cursor:help;}
.row-logo svg{width:100%;height:100%;display:block;}
.row-logo-instagram svg{fill:var(--merk-instagram);}
.row-logo-facebook svg{fill:var(--merk-facebook);}
.row-src{display:inline-flex;flex:0 0 15px;width:15px;height:15px;color:var(--groen);cursor:help;}
.row-src svg{width:100%;height:100%;fill:currentColor;stroke:none;}
.row-src-ad{color:var(--merk-advertentie);}

.author{font-weight:600;font-size:var(--tekst-l);}
.reply-mark{color:var(--waarschuwing);font-weight:700;cursor:help;}
.when{color:var(--muted);font-size:var(--tekst-m);}
.tag{font-size:var(--tekst-xs);padding:1px 6px;border-radius:var(--radius-xs);}
.tag-done{background:var(--ok-bg);color:var(--ok);}
.tag-answered{background:var(--waarschuwing-bg);color:var(--waarschuwing);}
.tag-funnel{background:color-mix(in srgb, var(--reeks-2) 14%, var(--card));color:var(--reeks-2);}
.tag-ignored{background:var(--neutraal-bg);color:var(--neutraal);}
/* Verborgen op het platform (migratie 021): naast het statuslabel, want het zegt iets anders. */
.tag-hidden{background:var(--fout-bg);color:var(--fout);cursor:help;}
.thread-head .tag{font-weight:400;}
/* Modereren per bericht (migratie 022): kleine knoppen rechts, zichtbaar bij aanwijzen. */
.thread-acties{display:flex;gap:4px;flex:0 0 auto;visibility:hidden;}
.thread-msg:hover .thread-acties, .thread-msg:focus-within .thread-acties{visibility:visible;}
.ico-klein{width:26px;height:26px;}
.ico-klein svg{width:14px;height:14px;}
.act-verwijderen:hover{color:var(--gevaar);border-color:var(--gevaar);}
.bewerk-vak{margin-top:4px;}
.bewerk-vak .reply-text{width:100%;}
.bewerk-knoppen{display:flex;gap:8px;margin-top:6px;}
@media(hover:none){.thread-acties{visibility:visible;}}

/* ---- Detailpaneel (rechts) ---- */
.detail-empty{color:var(--muted);font-size:var(--tekst-xl);line-height:1.5;}
.detail-label{font-size:var(--tekst-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--groen);
  margin-bottom:6px;}
/* Postgegevens: de media links, tekst en link ernaast. Het blok is precies zo hoog als de media (170px); een
   langere posttekst scrollt binnen zijn eigen vak, zodat het detail op het scherm blijft passen. */
.detail-posthead{display:flex;gap:12px;align-items:stretch;margin-bottom:4px;height:170px;}
/* De Facebook-videoplugin (reels) is staand en heeft zijn eigen hoogte nodig. */
.detail-posthead:has(.detail-embed){height:390px;}
.detail-thumb{flex:0 0 170px;width:170px;height:170px;object-fit:cover;background:var(--op-fel);
  border-radius:var(--radius-m);display:block;}
/* Facebook-videoplugin (als Meta geen speelbare video-URL geeft, bv. bij reels). 220px is de minimumbreedte. */
.detail-embed{flex:0 0 220px;width:220px;height:390px;border:0;background:var(--op-fel);border-radius:var(--radius-m);display:block;}
.detail-postbody{flex:1 1 auto;min-width:0;min-height:0;display:flex;flex-direction:column;}
.detail-posttext{font-size:var(--tekst-l);color:var(--tekst);line-height:1.45;white-space:pre-wrap;margin:0 0 6px;
  word-break:break-word;flex:1 1 auto;min-height:0;overflow-y:auto;}
/* De regel met de tellingen (duimpje = likes, tekstballon = reacties) naast de link naar het platform. */
.post-meta{display:flex;align-items:center;flex-wrap:wrap;gap:5px 14px;margin-top:auto;}
.post-meta a.detail-open{margin-left:auto;}
.post-stat{display:inline-flex;align-items:center;gap:5px;font-size:var(--tekst-l);font-weight:600;color:var(--muted);cursor:help;}
.post-stat svg{width:14px;height:14px;fill:currentColor;stroke:none;}
/* "Openen op Instagram/Facebook". Bewust op `a`: een kale .detail-open zou ook een toestand-klasse elders raken. */
a.detail-open{display:inline-flex;align-items:center;gap:6px;font-size:var(--tekst-l);color:var(--groen);text-decoration:none;}
a.detail-open:hover{text-decoration:underline;}
a.detail-open svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

.detail-thread, .detail-reply{margin-top:14px;border-top:var(--rand-dikte) solid var(--rand);padding-top:12px;}
.thread-msg{display:flex;gap:8px;align-items:flex-start;padding:6px 0;border-bottom:var(--rand-dikte) solid var(--rand-zacht);}
.thread-msg:last-child{border-bottom:none;}
.thread-kolom{min-width:0;flex:1;}
.thread-indent{margin-left:16px;}
/* Bolletje links van het bericht, zoals Facebook: meestal de eerste letter, een foto alleen bij Pagina's. */
.thread-avatar{
  flex:0 0 auto;width:1.6rem;height:1.6rem;margin-top:2px;border-radius:var(--radius-rond);overflow:hidden;
  display:flex;align-items:center;justify-content:center;background:var(--creme-2);color:var(--muted);
  font-size:var(--tekst-s);font-weight:700;line-height:1;user-select:none;
}
.thread-avatar.avatar-ons{background:var(--groen);color:var(--op-accent);}
.thread-avatar img{width:100%;height:100%;object-fit:cover;display:block;}
.thread-ours .thread-mention{color:var(--groen-diep);}
.thread-link{display:inline-block;margin-top:4px;font-size:var(--tekst-m);color:var(--groen);}
.thread-head{font-size:var(--tekst-m);color:var(--muted);font-weight:600;margin-bottom:1px;}
.thread-body{font-size:var(--tekst-xl);color:var(--tekst);white-space:pre-wrap;word-break:break-word;}
.thread-ours .thread-head{color:var(--groen);}
.thread-ours .thread-body{color:var(--groen-diep);}
.thread-current{background:var(--creme-2);border-left:3px solid var(--groen-zacht);padding-left:8px;border-radius:var(--radius-xs);}
.thread-attach{display:block;margin-top:6px;max-width:220px;max-height:200px;border-radius:var(--radius-s);
  border:var(--rand-dikte) solid var(--rand);object-fit:contain;background:var(--creme-2);}

/* ---- Antwoorden ---- */
.reply-note{font-size:var(--tekst-m);color:var(--waarschuwing);background:var(--waarschuwing-bg);padding:6px 8px;
  border-radius:var(--radius-s);margin:0 0 8px;}
.sr-picker{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:6px;}
.sr-chip{border:var(--rand-dikte) dashed var(--rand);background:var(--creme-2);color:var(--groen);
  border-radius:var(--radius-pil);padding:3px 10px;font-family:inherit;font-size:var(--tekst-m);cursor:pointer;}
.sr-chip:hover{border-style:solid;border-color:var(--groen);background:var(--card);}
.sr-chip:active{opacity:.72;}
.reply-text{width:100%;min-height:0;padding:8px 10px;font-size:var(--tekst-xl);resize:vertical;}
.reply-row{display:flex;gap:8px;align-items:flex-end;margin-top:2px;}
.reply-row .reply-text{flex:1 1 auto;width:auto;min-width:0;}
/* Knoppen naast het antwoordvak: liken (alleen bij Facebook) boven versturen. */
.reply-btns{display:flex;flex-direction:column;gap:6px;}

/* Werkbalk onder het tekstvak: emoji links, daarnaast de fotoknop met een voorbeeld van wat je koos. */
.reply-tools{display:flex;align-items:center;gap:6px;margin-top:6px;}
.detail-reply{position:relative;}
.emoji-vak, .foto-vak{position:relative;display:flex;align-items:center;gap:6px;}
/* Het paneel klapt boven de knop open: onder het antwoordvak is vaak geen ruimte meer. */
.emoji-paneel{
  position:absolute;bottom:calc(100% + 6px);left:0;z-index:20;width:min(19rem, calc(100vw - 2rem));
  background:var(--card);border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);
  box-shadow:var(--schaduw-3);padding:6px;
}
.emoji-tabs{display:flex;gap:2px;margin-bottom:5px;border-bottom:var(--rand-dikte) solid var(--rand);padding-bottom:5px;overflow-x:auto;}
.emoji-tab{flex:0 0 auto;border:none;background:none;cursor:pointer;font-size:1rem;line-height:1;padding:4px 5px;
  border-radius:var(--radius-s);}
.emoji-tab:hover{background:var(--creme-2);}
.emoji-tab:active{opacity:.72;}
.emoji-tab.actief{background:var(--creme-2);box-shadow:inset 0 -2px 0 var(--groen);}
.emoji-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(2rem,1fr));gap:2px;max-height:13rem;overflow-y:auto;}
.emoji-knop{border:none;background:none;cursor:pointer;border-radius:var(--radius-s);font-size:1.25rem;line-height:1.5;padding:2px;}
.emoji-knop:hover{background:var(--creme-2);}
.emoji-knop:active{opacity:.72;}
.emoji-leeg{grid-column:1 / -1;margin:6px;font-size:var(--tekst-m);color:var(--muted);}
/* De gekozen foto: een miniatuur met een kruisje om hem weer weg te halen. */
.foto-voorbeeld{position:relative;display:inline-flex;}
.foto-voorbeeld img{width:42px;height:42px;object-fit:cover;border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-s);display:block;}
.foto-weg{
  position:absolute;top:-6px;right:-6px;width:18px;height:18px;border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-rond);background:var(--card);color:var(--muted);font-size:.8rem;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.foto-weg:hover{color:var(--gevaar);border-color:var(--gevaar);}
.foto-weg:active{opacity:.72;}
.reply-hint{display:block;margin-top:6px;font-size:var(--tekst-m);color:var(--muted);}
.reply-hint:empty{display:none;}
.reply-hint.reply-error{color:var(--fout);}

/* ---- Standaardantwoorden en funnel ---- */
.add-form{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px;}
.add-form input, .add-form textarea{width:auto;}
.add-form input[name="keyword"]{flex:0 0 220px;}
.add-form input[name="note"]{flex:1 1 220px;}
.add-form .btn{width:auto;margin-top:0;}

/* Standaardantwoorden (1.3.0): een beheerlijst zoals in de andere apps (replies.html). Voor de titel het nummer van de
   sneltoets (Ctrl+1..9), eronder het begin van de tekst op één regel. */
.sr-num{flex:0 0 1.5rem;text-align:center;font-weight:700;font-size:var(--tekst-m);color:var(--op-accent);
  background:var(--groen);border-radius:var(--radius-xs);padding:1px 0;}
.sr-num:empty{visibility:hidden;}
.sr-lijst .lijst-hoofd{min-width:0;}
.sr-voorproef{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---- Kanalen (koppelbeheer) ---- */
.kaart{background:var(--card);border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-xl);
  padding:16px 18px;margin-bottom:22px;box-shadow:var(--schaduw-2);}
.kaart-kop{display:flex;align-items:center;gap:12px;margin-bottom:12px;}
.kaart-kop h2{margin:0;font-size:var(--tekst-3xl);}
.kaart > h2{margin:0 0 8px;font-size:var(--tekst-3xl);}
/* Statuslabel: groen = werkt, rood = token aanwezig maar niet bruikbaar, grijs = nog niets, amber = er komt een datum aan. */
.stip{font-size:var(--tekst-m);font-weight:600;white-space:nowrap;padding:2px 9px;border-radius:var(--radius-pil);border:var(--rand-dikte) solid transparent;}
.stip-ok{background:var(--ok-bg);color:var(--ok);}
.stip-fout{background:var(--fout-bg);color:var(--fout);}
.stip-uit{background:var(--neutraal-bg);color:var(--neutraal);border-color:var(--rand);}
.stip-let{background:var(--waarschuwing-bg);color:var(--waarschuwing);}
.feiten{margin:0 0 16px;display:grid;gap:8px;}
.feiten > div{display:grid;grid-template-columns:170px minmax(0,1fr);gap:8px;}
.feiten dt{color:var(--muted);font-size:var(--tekst-l);}
.feiten dd{margin:0;font-size:var(--tekst-xl);}
.sub-kop{font-size:var(--tekst-3xl);margin:0 0 6px;}
.scopes{list-style:none;margin:0;padding:0;display:grid;gap:6px;}
.scope{display:flex;justify-content:space-between;align-items:center;gap:12px;background:var(--card);
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-s);padding:6px 12px;font-size:var(--tekst-xl);}
.scope-naam{font-family:ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;font-size:var(--tekst-l);}
.scope-status{font-size:var(--tekst-m);font-weight:600;white-space:nowrap;}
.scope-ok .scope-status{color:var(--ok);}
.scope-mist{border-color:var(--fout);background:var(--fout-bg);}
.scope-mist .scope-status{color:var(--fout);}

/* Keuzeknoppen: inloggen bij meer bedrijven, en de pagina kiezen bij koppelen. Een volle-breedte knop die als
   lijstregel leest. */
.keuze{
  display:block;width:100%;text-align:left;cursor:pointer;background:var(--card);
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-m);padding:12px 14px;margin-bottom:8px;
  font-family:inherit;font-size:var(--tekst-xl);font-weight:600;color:var(--tekst);
}
.keuze:hover{border-color:var(--groen);background:var(--creme-2);}
.keuze:active{opacity:.72;}
.keuze .zacht{display:block;font-weight:400;margin-top:2px;}

/* ---- Gebruikers ---- */
.btn-small.btn-klein, .btn-small-outline.btn-klein, .btn-small-danger.btn-klein{min-height:var(--knop-hoogte-klein);
  padding:2px var(--knop-ruimte-klein);font-size:var(--tekst-m);}

/* Mijn account: de gegevens van de gebruiker. */
.account-dl{display:grid;grid-template-columns:max-content 1fr;gap:6px 24px;margin:0;}
.account-dl dt{color:var(--muted);font-size:var(--tekst-l);}
.account-dl dd{margin:0;font-weight:600;}

/* ---- Telefoon en tablet (tot 1000px) ----
   Twee dingen zijn anders: de acties staan altijd in beeld en zijn groter (geen hover op touch), en lijst en detail
   wisselen elkaar af in plaats van naast elkaar. inbox.js zet .toont-detail; het breekpunt staat daar ook
   (MOBILE_MQ) en moet gelijk blijven aan de 1000px hieronder. */
@media (max-width:1000px){
  .site-main-breed{--main-boven:8px;padding:var(--main-boven) 10px 8px;}
  /* dvh houdt rekening met de adresbalk; zonder dvh geldt de 100vh-regel bij .inbox. */
  .inbox{height:calc(100dvh - var(--kop-h, 62px) - 16px);}

  .topfilters{gap:8px;margin-bottom:6px;}
  /* De zoekbalk krijgt een eigen regel (met het datummenu erin); min-width:0, anders loopt hij buiten beeld. */
  .topfilters .searchbar{flex:1 1 100%;min-width:0;}
  .filters{margin-bottom:8px;}
  .filtergroup{flex-wrap:wrap;}

  /* De filterknop. Gevuld (.actief) zodra er een filter afwijkt van de standaard, anders zie je ingeklapt niet dát
     er gefilterd wordt. */
  .filter-btn{
    display:inline-flex;align-items:center;gap:5px;height:40px;padding:0 12px;
    border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-pil);background:var(--card);
    color:var(--groen);font-family:inherit;font-size:var(--tekst-l);font-weight:600;cursor:pointer;white-space:nowrap;
  }
  .filter-btn svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}
  .filter-btn .sliders{width:17px;height:17px;}
  .filter-btn .chevron{width:14px;height:14px;transition:transform .15s;}
  .filter-btn.actief{background:var(--groen);border-color:var(--groen);color:var(--op-accent);}
  .filter-btn:active{opacity:.72;}
  .inbox.filters-open .filter-btn .chevron{transform:rotate(180deg);}

  /* Ingeklapt: alleen de filterknop; kanalen, zoekbalk en statusknoppen zitten eronder. */
  .inbox:not(.filters-open) .topfilters .toggles,
  .inbox:not(.filters-open) .topfilters .searchbar,
  .inbox:not(.filters-open) .filters{display:none;}

  /* minmax(0, 1fr): een track van 1fr laat zijn kind niet krimpen onder de min-content-breedte. */
  .split{grid-template-columns:minmax(0,1fr);gap:0;}
  .pane{min-width:0;}

  /* Eén paneel tegelijk; in het detail zijn de filters niet nodig. */
  .pane-detail{display:none;border:none;border-radius:0;padding:3px 2px;background:none;}
  .inbox.toont-detail .pane-list,
  .inbox.toont-detail .topfilters,
  .inbox.toont-detail .filters{display:none;}
  .inbox.toont-detail .pane-detail{display:block;}

  .detail-back{
    position:sticky;top:0;z-index:5;display:inline-flex;align-items:center;gap:6px;width:100%;margin-bottom:8px;
    padding:10px 3px;border:none;border-bottom:var(--rand-dikte) solid var(--rand);background:var(--creme);
    color:var(--groen);font-family:inherit;font-size:var(--tekst-xl);font-weight:600;cursor:pointer;
  }
  .detail-back svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;}

  /* Acties zonder hover en tikvlakken van ruim 40px. */
  .row-actions{visibility:visible;gap:6px;}
  .item{padding:10px 8px 10px 10px;gap:6px;}
  .ico{width:40px;height:40px;}
  .ico svg{width:19px;height:19px;}
  .toggle{width:40px;height:40px;padding:7px;}
  .chip{min-height:38px;padding:6px 13px;}
  .help{display:none;}

  /* 16px: kleiner laat iOS bij focus inzoomen. */
  .searchbar input[type=search], .period-select, .reply-text{font-size:16px;}
  .searchbar input[type=search]{flex-basis:140px;min-width:0;}

  .row-pick{padding:4px 5px 4px 0;}
  .row-pick input, .bulk-all input{width:20px;height:20px;}
  .bulk-btn{min-height:38px;}

  .detail-thumb{flex-basis:110px;width:110px;height:110px;}
  .detail-posthead{height:110px;}
  /* De FB-plugin kan niet smaller dan 220px; op een telefoon de volle breedte onder de posttekst. */
  .detail-posthead:has(.detail-embed){flex-direction:column;}
  .detail-embed{flex-basis:auto;width:100%;max-width:320px;height:400px;}
  .reply-text{min-height:4.5rem;}

  .emoji-grid{grid-template-columns:repeat(auto-fill,minmax(2.4rem,1fr));max-height:11rem;}
  .emoji-knop{font-size:1.5rem;}
  .emoji-tab{font-size:1.15rem;padding:5px 7px;}
  .foto-weg{width:22px;height:22px;font-size:.95rem;}
  .feiten > div{grid-template-columns:1fr;gap:0;}
}

/* Wachtwoordveld met een oogje om het zichtbaar te maken (base.html maakt de knop). Standaard in alle apps van
   VandePas Solutions (Frank 22-10-2026); zelfde opzet als de beeldbank, de band-app en de receptenapp. */
.pw-wrap{position:relative;display:flex;align-items:center;}
.pw-wrap input[type=password],
.pw-wrap input[type=text]{flex:1;padding-right:42px;}
.pw-toggle{position:absolute;right:6px;display:flex;align-items:center;justify-content:center;
  width:32px;height:32px;padding:0;border:none;background:none;color:var(--muted);
  border-radius:var(--radius-rond);cursor:pointer;}
.pw-toggle:hover{color:var(--groen);background:var(--lichtgroen-zacht);}
.pw-toggle:active{opacity:.72;}

/* 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.
   Zelfde regels als de beheer-app. */
.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;}

/* Het snelmenu op de inbox (1.2.0). De inbox vult precies het scherm (.inbox hierboven), dus de ruimte die de andere
   schermen onderaan voor de balk houden (.snelmenu-ruimte, 96px) gaf hier alleen een schuifbalk. Ingeklapt is er dan
   alleen het lipje aan de linkerrand; staat de balk altijd uitgeklapt, dan wordt de inbox 96px lager, zodat de balk
   niets van de lijst of het antwoordvak afdekt. */
body:has(.inbox) .snelmenu-ruimte{display:none;}
body:has(.snelmenu.vast:not([hidden])) .inbox{height:calc(100vh - var(--kop-h, 62px) - 28px - 96px);}
@media (max-width:1000px){
  body:has(.snelmenu.vast:not([hidden])) .inbox{height:calc(100dvh - var(--kop-h, 62px) - 16px - 96px);}
}

/* Gebruikers (1.4.0): het venster per persoon in blokken (norm S5.16), elk blok een eigen handeling. */
.gebruiker-blok{margin-top:18px;}
.gebruiker-blok .form-sectie-kop{font-size:var(--tekst-xl);}
.gebruiker-blok .uitleg{margin:8px 0 0;}
.gebruiker-blok form{margin:10px 0 0;}
.gebruiker-actie{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;}
.gebruiker-blok .btn-small-outline{flex:none;}
.bedrijfsnaam{margin:0;font-size:var(--tekst-xl);font-weight:600;}