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

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

: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{width:100%;max-width:1100px;margin:0 auto;padding:28px 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-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);}

/* ---- Kop met terug-knop ---- */
.page-head{display:flex;align-items:center;gap:10px;margin:0 0 14px;}
.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;}

/* ===========================================================
   Voorraad
   =========================================================== */

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

/* Voorraadkaart per artikel op de home */
.voorraad-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px;}
.voorraad-kaart{
  display:block; 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); padding:12px 16px 8px;
  transition:box-shadow .18s, border-color .18s;
}
.voorraad-kaart:hover{box-shadow:var(--schaduw-3);border-color:var(--groen);}
/* Iets op een locatie onder het minimum of negatief: een rand links, zodat je het ziet
   zonder de kaart te lezen. */
.voorraad-kaart-let-op{border-left:4px solid var(--fout);}
.voorraad-kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:4px;}
.voorraad-naam{font-family:var(--display);font-size:var(--tekst-3xl);color:var(--groen);letter-spacing:.03em;line-height:1.15;}
.voorraad-totaal{font-size:var(--tekst-3xl);font-weight:700;color:var(--groen);white-space:nowrap;font-variant-numeric:tabular-nums;}
.voorraad-totaal small{font-size:var(--tekst-s);font-weight:500;color:var(--muted);margin-left:4px;}
.voorraad-locaties{list-style:none;margin:0;padding:0;}
.voorraad-locaties li{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  padding:7px 0; border-top:var(--rand-dikte) solid var(--rand-zacht); font-size:var(--tekst-xl);
}
.voorraad-getal{font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;}
.let-op, .let-op .voorraad-getal{color:var(--fout);}
.voorraad-onderweg{color:var(--muted);}

.orderregel{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:14px; padding:10px 14px; border-radius:var(--radius-m);
  background:var(--creme-2); color:var(--muted); font-size:var(--tekst-l);
}
.orderregel p{margin:0;}
.orderregel form{margin:0;}
.orderregel-fout{background:var(--fout-bg);color:var(--fout);}

/* Artikeldetail: een kaart per locatie */
.locatie-lijst{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0 14px;}
.locatie-kop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;}
.locatie-kop h2{margin:0;font-size:var(--tekst-4xl);}
.locatie-stand{font-size:var(--tekst-5xl);font-weight:700;color:var(--groen);font-variant-numeric:tabular-nums;}
.locatie-stand.let-op{color:var(--fout);}
.opbouw{display:grid;grid-template-columns:1fr auto;gap:2px 12px;margin:8px 0;font-size:var(--tekst-l);}
.opbouw dt{color:var(--muted);}
.opbouw dd{margin:0;text-align:right;font-variant-numeric:tabular-nums;}
.kaart-voet{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:10px;flex-wrap:wrap;}
.kaart-voet .btn-small-outline{margin-left:auto;}

.gegevens{display:grid;grid-template-columns:auto 1fr;gap:4px 14px;margin:6px 0;font-size:var(--tekst-l);}
.gegevens dt{color:var(--muted);}
.gegevens dd{margin:0;}

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

/* Boekingen in een lijst */
.boeking-lijst{display:flex;flex-direction:column;gap:10px;}
.boeking-rij{
  display:block; background:var(--card); color:var(--tekst); text-decoration:none;
  border:var(--rand-dikte) solid var(--rand); border-radius:var(--radius-l); padding:10px 14px;
}
.boeking-rij:hover{border-color:var(--groen);}
.boeking-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:var(--tekst-l);}
.boeking-datum{font-weight:600;}
.boeking-door{color:var(--muted);margin-left:auto;}
.boeking-regels{list-style:none;margin:6px 0 0;padding:0;}
.boeking-regels li{display:flex;justify-content:space-between;gap:10px;font-size:var(--tekst-l);padding:2px 0;}
.boeking-toelichting{margin:6px 0 0;font-size:var(--tekst-l);color:var(--muted);font-style:italic;}
.mutatie{font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;}
.mutatie-plus{color:var(--ok);}
.mutatie-min{color:var(--fout);}
/* Ingetrokken: blijft zichtbaar, maar telt niet meer mee. */
.boeking-ingetrokken .boeking-regels, .boeking-ingetrokken .tabel td{text-decoration:line-through;color:var(--muted);}
.boeking-ingetrokken .mutatie{color:var(--muted);}

.filterbalk{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px;}

/* 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;}
.aantal-rij{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 0; border-top:var(--rand-dikte) solid var(--rand-zacht);
}
.aantal-info{display:flex;flex-direction:column;min-width:0;}
.aantal-naam{font-weight:600;font-size:var(--tekst-xl);}
.aantal-stand{font-size:var(--tekst-m);color:var(--muted);}
.kort-getal{max-width:120px;text-align:right;}

.stepper{display:flex;align-items:stretch;flex:none;}
.stepper input{
  width:84px; text-align:center; border-radius:0; border-left:none; border-right:none;
  -moz-appearance:textfield; appearance:textfield;
}
.stepper input::-webkit-outer-spin-button,
.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0;}
.stepper-knop{
  width:var(--knop-hoogte); min-height:var(--knop-hoogte); border:var(--rand-dikte) solid var(--rand);
  background:var(--lichtgroen-zacht); color:var(--groen); font-size:var(--tekst-3xl); font-weight:600;
  cursor:pointer; line-height:1; padding:0;
}
.stepper-knop:first-child{border-radius:var(--radius-m) 0 0 var(--radius-m);}
.stepper-knop:last-child{border-radius:0 var(--radius-m) var(--radius-m) 0;}

.huidige-stand{margin:10px 0 0;font-weight:600;color:var(--groen);}
.uitkomst{margin:6px 0 0;font-size:var(--tekst-l);color:var(--muted);min-height:1.5em;}

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

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

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

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

/* Invoer van een hoeveelheid: naam en stand bovenaan, daaronder aantal + verpakking */
.invoer-rij{padding:10px 0;border-top:var(--rand-dikte) solid var(--rand-zacht);}
.invoer-rij .aantal-info{margin-bottom:6px;}
.hoeveelheid{display:flex;flex-direction:column;gap:6px;}
.hoeveelheid-regel{display:flex;align-items:center;gap:8px;}
.hoeveelheid-regel select{flex:1 1 auto;min-width:0;width:auto;}
.hoeveelheid-regel select[hidden]{display:none;}
.hoeveelheid-weg{
  flex:none; width:36px; height:36px; border-radius:var(--radius-rond);
  border:var(--rand-dikte) solid var(--rand); background:var(--card); color:var(--muted);
  font-size:var(--tekst-2xl); line-height:1; cursor:pointer; padding:0;
}
.hoeveelheid-voet{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;}
.hoeveelheid-voet[hidden]{display:none;}
.hoeveelheid-erbij{
  background:none; border:none; color:var(--groen); font-family:inherit; font-weight:600;
  font-size:var(--tekst-l); padding:4px 0; min-height:36px; cursor:pointer;
}
.hoeveelheid-totaal{font-weight:600;color:var(--groen);font-variant-numeric:tabular-nums;}
.hoeveelheid-erbij:active, .hoeveelheid-weg:active{opacity:.72;transition:opacity .05s;}
.invoer{display:block;font-size:var(--tekst-s);color:var(--muted);font-weight:400;}
.veld-label{font-size:var(--tekst-l);font-weight:500;margin:16px 0 6px;color:var(--muted);}
.in-verpakking{margin:0;}
.lijst-los{display:flex;margin-bottom:14px;}
.knoppen-rij{align-items:center;}
.vinkje-klein{font-size:var(--tekst-l);margin:0;}

/* Leveranciers bij een artikel */
.leverancier-rij{padding:8px 0 10px;border-top:var(--rand-dikte) solid var(--rand-zacht);}
.leverancier-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.leverancier-kop .vinkje{margin:0 0 6px;}

/* Verbruiksregels */
.regel{padding:10px 0;border-top:var(--rand-dikte) solid var(--rand-zacht);}
.regel:first-of-type{border-top:none;padding-top:0;}
.regel-kop{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;}
.regel-verlopen .lijst-hoofd{color:var(--muted);}
.regel-acties{margin-top:6px;}
.regel-acties summary{cursor:pointer;color:var(--groen);font-weight:600;font-size:var(--tekst-l);min-height:32px;display:flex;align-items:center;}
.regel-acties form{margin-top:4px;}
.regel-weg{margin-top:4px;}
.regel-weg .btn-link{font-size:var(--tekst-m);}
.inline-toevoegen{margin-top:12px;}

/* ---- 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(--lichtgroen);
    border:var(--rand-dikte) solid var(--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(--rand); font-size:var(--tekst-xl);
  }
  .site-nav .inline-form{display:block;}
  .nav-versie{margin:0;padding:8px 18px;}

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