/* ===========================================================
   Beeldbank — stijl
   Overgenomen van de voorraad-app, en die weer van de receptenapp van Mams at Work:
   dezelfde tokens, dezelfde componenten en maten, zodat de apps op de telefoon familie
   van elkaar zijn. Alleen het gedeelde fundament staat hier; wat alleen voor deze app
   bestaat staat onderaan, onder "Beeldbank".

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

:root{
  /* Merkkleuren */
  --groen:#3B5B4C;        --groen-rgb:59,91,76;
  --groen-diep:#2C463A;
  --groen-zacht:#8E9D97;
  --lichtgroen:#D6E3D2;
  --lichtgroen-diep:#C9DAC4;
  --lichtgroen-zacht:#E9F0E6;
  --oranje:#E66204;       /* testomgeving */
  --goud-ster:#BFA14A;    /* open account-bolletje */

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

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

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

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

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

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

*{box-sizing:border-box;}

/* Geen rechthoekige tap-highlight; in plaats daarvan licht het element zelf op binnen
   zijn eigen vorm (opacity). Zie de receptenapp voor het waarom. */
html{-webkit-tap-highlight-color:transparent;}
body{-webkit-user-select:none;user-select:none;}
input,textarea,select{-webkit-user-select:text;user-select:text;}

.cat-tile:active, .voorraad-kaart:active, .lijst-rij:active, .boeking-rij: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, .stepper-knop: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(--lichtgroen);
  border-bottom:var(--rand-dikte) solid var(--rand);
  position:sticky; top:0; z-index:500;
}
.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(--tekst-5xl); line-height:1.2;
  color:var(--groen); text-decoration:none;
}
.env-label{
  font-size:var(--tekst-s); font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--op-fel); background:var(--creme); 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(--groen);
}
.nav-home svg{width:var(--icoon-l);height:var(--icoon-l);}
.nav-home:hover{background:var(--lichtgroen-diep);}

.site-nav{display:flex;align-items:center;gap:20px;padding:0 24px 10px;flex-wrap:wrap;}
.nav-link{color:var(--muted);text-decoration:none;font-size:var(--tekst-l);font-weight:500;letter-spacing:.02em;}
.nav-link:hover{color:var(--groen);}
.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;}
.inline-form{display:inline;margin:0;}
.nav-versie{font-size:var(--tekst-s);color:var(--muted);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(--groen); color:var(--op-accent);
  font-family:var(--sans); font-weight:700; font-size:var(--tekst-2xl); line-height:1;
}
.nav-avatar[aria-expanded="true"]{background:var(--goud-ster);color:var(--op-fel);}

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

.card{
  background:var(--card);
  border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-xl);
  padding:18px 16px;
  box-shadow:var(--schaduw-2);
  margin-bottom:14px;
}
.auth-card{max-width:400px;margin:7vh auto 0;}

h1{
  font-family:var(--display); font-size:var(--tekst-6xl); font-weight:400; letter-spacing:.03em;
  color:var(--groen); margin:0 0 14px; line-height:1.1;
}
h2{font-family:var(--display);font-weight:400;letter-spacing:.03em;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-ok{background:var(--ok-bg);color:var(--ok);}
.badge-fout{background:var(--fout-bg);color:var(--fout);}
.badge-bezig{background:var(--waarschuwing-bg);color:var(--waarschuwing);}
.badge-indicatie{background:var(--creme-2);color:var(--neutraal);border:var(--rand-dikte) solid var(--rand);}
.badge-levering{background:var(--ok-bg);color:var(--ok);}
.badge-overboeking{background:var(--lichtgroen);color:var(--groen);}
.badge-correctie{background:var(--waarschuwing-bg);color:var(--waarschuwing);}
.badge-verzending{background:var(--neutraal-bg);color:var(--groen);}
.badge-voorlopig{background:var(--card);color:var(--neutraal);border:var(--rand-dikte) dashed var(--rand);}

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

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

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

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

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


/* ===========================================================
   Beeldbank
   Wat alleen deze app heeft. Groeit mee met de schermen; in 0.1.0 staat hier nog
   niet meer dan de lege galerij.
   =========================================================== */

/* De lege staat: geen foto's, wel uitleg over wat er moet gebeuren. */
.leeg{text-align:center;padding:32px 16px;color:var(--muted);}
.leeg h1{font-family:var(--display);letter-spacing:.5px;color:var(--groen-diep);margin:0 0 8px;}
.leeg p{margin:0 auto 12px;max-width:34em;font-size:var(--tekst-l);line-height:1.5;}
.leeg .stappen{text-align:left;max-width:34em;margin:0 auto;padding-left:20px;font-size:var(--tekst-l);line-height:1.6;}
.leeg .stappen li{margin-bottom:4px;}

/* Kleine regel onderaan een scherm: schijfruimte, aantallen, versie. */
.voetnoot{margin-top:18px;text-align:center;font-size:var(--tekst-s);color:var(--muted);}
.voetnoot.krap{color:var(--waarschuwing);font-weight:600;}

/* ---- Het raster ------------------------------------------------------------
   auto-fill met een minimum van 150px: op de telefoon twee kolommen, op een breed
   scherm zoveel als er passen, zonder media-queries. De tegels zijn vierkant
   (aspect-ratio) en de foto vult ze met object-fit:cover — anders wordt het een
   rommelige muur van verschillende hoogtes. */
.raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;}
.tegel{position:relative;display:block;aspect-ratio:1;border-radius:var(--radius-m);
  overflow:hidden;background:var(--creme-2);box-shadow:var(--schaduw-1);}
.tegel img{width:100%;height:100%;object-fit:cover;display:block;}
.tegel:active{opacity:.72;}
.tegel-merk{position:absolute;left:6px;bottom:6px;background:rgba(var(--overlay-rgb),.62);
  color:var(--op-accent);font-size:var(--tekst-xs);padding:2px 6px;border-radius:var(--radius-pil);}

.galerij-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;}
.galerij-aantal{font-size:var(--tekst-l);color:var(--muted);}
.galerij-meer{text-align:center;margin-top:16px;}

/* ---- Het bekijkscherm ------------------------------------------------------
   Donker: hier kijk je naar het beeld, niet naar de app. De hoogte is begrensd
   zodat een staande foto niet het hele scherm vult en je de gegevens eronder
   nog ziet staan. */
.kijker{background:var(--op-fel);border-radius:var(--radius-xl);overflow:hidden;
  margin-bottom:14px;box-shadow:var(--schaduw-2);}
.kijker-beeld{position:relative;display:flex;align-items:center;justify-content:center;
  min-height:220px;max-height:70vh;}
.kijker-beeld img{max-width:100%;max-height:70vh;object-fit:contain;display:block;}
.kijker-pijl{position:absolute;top:0;bottom:0;display:flex;align-items:center;
  padding:0 14px;color:var(--op-accent);font-size:2.2rem;line-height:1;text-decoration:none;
  text-shadow:0 1px 6px rgba(var(--overlay-rgb),.8);}
.kijker-pijl:active{opacity:.72;}
.kijker-vorige{left:0;}
.kijker-volgende{right:0;}

.kijker-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;}
.kijker-kop h1{margin-bottom:8px;}
.kijker-acties{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:14px;}

/* Uitkomst van het toevoegen, per bestand. */
.merk{font-size:var(--tekst-s);padding:2px 8px;border-radius:var(--radius-pil);white-space:nowrap;}
.merk-nieuw{background:var(--ok-bg);color:var(--ok);}
.merk-bekend{background:var(--neutraal-bg);color:var(--neutraal);}
.merk-afgewezen{background:var(--waarschuwing-bg);color:var(--waarschuwing);}
.merk-geweigerd{background:var(--fout-bg);color:var(--fout);}

/* ---- Filterbalk ------------------------------------------------------------ */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px;}
.filters input[type=search]{flex:1 1 220px;min-width:160px;margin:0;}
.filters select{flex:0 1 auto;width:auto;min-width:130px;margin:0;}
.vinkje-inline{display:inline-flex;align-items:center;gap:6px;font-size:var(--tekst-l);
  color:var(--muted);margin:0;}
.vinkje-inline input{width:auto;margin:0;}

/* ---- Tags ------------------------------------------------------------------
   Een chip toont de soort erboven, zodat "Schijndel" en "Joyce" niet door elkaar
   gaan lopen zodra er tientallen tags zijn. */
.tags-blok{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:0 0 12px;}
.tag-chip{display:inline-flex;align-items:center;gap:6px;background:var(--lichtgroen-zacht);
  color:var(--groen-diep);border:var(--rand-dikte) solid var(--lichtgroen-diep);
  border-radius:var(--radius-pil);padding:3px 4px 3px 10px;font-size:var(--tekst-l);
  font-weight:600;line-height:1.4;}
.tag-chip small{display:block;font-size:var(--tekst-xs);font-weight:400;color:var(--muted);
  margin-right:2px;letter-spacing:.04em;}
.tag-chip form{margin:0;}
.tag-weg{border:0;background:none;color:var(--muted);font-size:1.1rem;line-height:1;
  cursor:pointer;padding:0 6px;border-radius:var(--radius-rond);}
.tag-weg:hover{color:var(--gevaar);background:var(--fout-bg);}
.tag-weg:active{opacity:.72;}

.tag-toevoegen{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:4px;}
.tag-kiezer{display:flex;gap:6px;flex:1 1 260px;min-width:0;}
.tag-kiezer select{flex:0 0 auto;width:auto;min-width:120px;margin:0;}
.tag-kiezer input{flex:1 1 auto;min-width:0;margin:0;}

/* ---- Meerdere tegelijk -----------------------------------------------------
   Buiten de selecteermodus is een tegel gewoon een link; erin vangt het label de
   tik en is de link uitgeschakeld. Eén raster, twee standen. */
.tegel-kies{position:absolute;opacity:0;width:0;height:0;margin:0;pointer-events:none;}
.tegel-vink{display:none;position:absolute;top:6px;right:6px;width:26px;height:26px;
  border-radius:var(--radius-rond);background:rgba(255,255,255,.85);color:transparent;
  border:2px solid var(--groen);align-items:center;justify-content:center;
  font-size:var(--tekst-l);font-weight:700;}
body.selecteren .tegel-vink{display:flex;}
body.selecteren .tegel-link{pointer-events:none;}
body.selecteren .tegel{cursor:pointer;}
.tegel:has(.tegel-kies:checked){outline:3px solid var(--groen);outline-offset:-3px;}
.tegel:has(.tegel-kies:checked) .tegel-vink{background:var(--groen);color:var(--op-accent);}

.selectie-balk{position:sticky;bottom:0;z-index:300;display:flex;flex-wrap:wrap;gap:8px;
  align-items:center;margin-top:12px;padding:10px 12px;background:var(--card);
  border:var(--rand-dikte) solid var(--rand);border-radius:var(--radius-xl);
  box-shadow:var(--schaduw-3);}
.selectie-aantal{font-size:var(--tekst-l);color:var(--muted);}
/* display:flex hierboven wint van de browserregel voor [hidden]; dus zelf uitzetten. */
.selectie-balk[hidden]{display:none;}

/* ---- Beheer: lijsten met een greep om te slepen ---------------------------- */
.uitleg{color:var(--muted);font-size:var(--tekst-l);line-height:1.5;margin:6px 0 10px;}
.uitleg code{background:var(--creme-2);padding:1px 5px;border-radius:var(--radius-xs);
  font-size:var(--tekst-m);}

.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-neutraal{background:var(--neutraal-bg);color:var(--neutraal);}
.badge-ok{background:var(--ok-bg);color:var(--ok);}
.badge-fout{background:var(--fout-bg);color:var(--fout);}
.badge-bezig{background:var(--waarschuwing-bg);color:var(--waarschuwing);}

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

.lijst{background:var(--card);border:var(--rand-dikte) solid var(--rand);
  border-radius:var(--radius-xl);overflow:hidden;}
.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;}
.lijst-rij-uit{color:var(--muted);}
.lijst-rij form{margin:0;}
.lijst-hoofd{display:flex;flex-direction:column;min-width:0;font-weight:600;font-size:var(--tekst-xl);}
.lijst-hoofd small{font-weight:400;color:var(--muted);font-size:var(--tekst-m);line-height:1.4;}
.lijst-pijl{color:var(--groen-zacht);font-size:var(--tekst-3xl);line-height:1;}
.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;}
.lijst-rij-tik .lijst-hoofd{flex:1 1 auto;}
.rij-rechts{position:relative;z-index:2;display:flex;align-items:center;gap:6px;flex:none;}

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

/* Greep om een regel te slepen. Ligt boven het tikvlak; touch-action:none zodat de vinger
   op de greep sleept in plaats van de pagina te scrollen. Bewust smal: alleen wie echt aan
   de voorkant vasthoudt, versleept een regel. */
.sleep-greep{position:relative;z-index:2;flex:none;display:inline-flex;align-items:center;
  justify-content:center;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.sleept{position:relative;z-index:5;background:var(--lichtgroen-zacht);
  box-shadow:var(--schaduw-3);}
.lijst-rij.sleept .sleep-greep{cursor:grabbing;color:var(--groen);}

/* De tegel is sinds fase 2 een label (voor het vinkje); de link erbinnen moet zelf de
   hele tegel vullen, anders heeft de foto geen hoogte. */
.tegel-link{display:block;width:100%;height:100%;}

/* Teller bij de Inbox in het menu, en een stip op het account-bolletje als het menu dicht is. */
.nav-teller{display:inline-block;margin-left:6px;min-width:20px;padding:1px 6px;
  border-radius:var(--radius-pil);background:var(--groen);color:var(--op-accent);
  font-size:var(--tekst-xs);font-weight:700;text-align:center;vertical-align:middle;}
.nav-avatar-stip{position:relative;}
.nav-avatar-stip::after{content:'';position:absolute;top:0;right:0;width:10px;height:10px;
  border-radius:var(--radius-rond);background:var(--oranje);
  border:2px solid var(--lichtgroen);}

/* Wachtwoordveld met een oogje om het zichtbaar te maken. Zelfde opzet als 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;}