:root{
  --ground:#F2F4F1; --surface:#FFFFFF; --surface-2:#E7EAE5;
  --ink:#14181A; --ink-2:#3E4A46; --muted:#76827D;
  --line:#D3D8D1; --line-strong:#B7BFB8;
  --accent:#0F5453; --accent-soft:#DBE8E5;
  --ok:#2C6E49; --ok-soft:#DCEDE3;
  --warn:#8F5F10; --warn-soft:#F6ECD8;
  --crit:#9E2B20; --crit-soft:#F7E0DD;
  --f:"Archivo","Helvetica Neue",Arial,sans-serif;
  --m:"IBM Plex Mono",ui-monospace,Menlo,monospace;
}
@media (prefers-color-scheme:dark){
  :root{
    --ground:#101413; --surface:#171B1A; --surface-2:#1F2523;
    --ink:#ECEFEB; --ink-2:#B6C0BB; --muted:#8B9792;
    --line:#2B322F; --line-strong:#3D4643;
    --accent:#5FBFB4; --accent-soft:#16302E;
    --ok:#72C08F; --ok-soft:#17301F;
    --warn:#D6A448; --warn-soft:#31280F;
    --crit:#E0796B; --crit-soft:#331915;
  }
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--f);font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--accent)}
.wrap{max-width:940px;margin:0 auto;padding:0 16px 80px}

/* kop */
header.top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:20}
.top .bar{max-width:940px;margin:0 auto;padding:10px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.merk{font-weight:700;letter-spacing:-.02em;font-size:17px;text-decoration:none;color:var(--ink)}
.merk span{color:var(--accent)}
.wie{margin-left:auto;font-size:12.5px;color:var(--muted);display:flex;align-items:center;gap:10px}
nav.hoofd{max-width:940px;margin:0 auto;padding:0 8px 8px;display:flex;gap:2px;overflow-x:auto}
nav.hoofd a{
  font-size:13.5px;padding:7px 12px;border-radius:2px;text-decoration:none;color:var(--ink-2);white-space:nowrap;
}
nav.hoofd a.actief{background:var(--accent-soft);color:var(--accent);font-weight:600}

h1{font-size:24px;letter-spacing:-.02em;margin:26px 0 4px}
h2{font-size:17px;letter-spacing:-.01em;margin:28px 0 10px}
.uitleg{color:var(--muted);font-size:14px;margin:0 0 18px;max-width:62ch}
.leeg{color:var(--muted);font-size:14.5px;padding:22px;border:1px dashed var(--line-strong);text-align:center}

/* kaarten */
.kaart{background:var(--surface);border:1px solid var(--line);padding:16px;margin-bottom:12px}
.kaart h3{margin:0 0 2px;font-size:16.5px;letter-spacing:-.01em}
.rij{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.rij.tussen{justify-content:space-between}
.sub{font-size:13px;color:var(--muted)}
.mono{font-family:var(--m);font-size:12.5px;letter-spacing:.02em}

/* labels */
.label{display:inline-block;font-family:var(--m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;padding:3px 8px;border:1px solid var(--line-strong);color:var(--ink-2)}
.label.acc{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.label.ok{border-color:transparent;color:var(--ok);background:var(--ok-soft)}
.label.warn{border-color:transparent;color:var(--warn);background:var(--warn-soft)}
.label.crit{border-color:transparent;color:var(--crit);background:var(--crit-soft)}

/* knoppen */
button,.knop{
  font-family:var(--f);font-size:15px;font-weight:600;padding:11px 18px;border:1px solid var(--accent);
  background:var(--accent);color:#fff;cursor:pointer;border-radius:2px;text-decoration:none;display:inline-block;
}
@media (prefers-color-scheme:dark){button,.knop{color:#0B1211}}
button.stil,.knop.stil{background:transparent;color:var(--accent)}
button.grijs{background:transparent;border-color:var(--line-strong);color:var(--ink-2)}
button:disabled{opacity:.45;cursor:not-allowed}

/* formulieren */
input,select,textarea{
  font-family:var(--f);font-size:16px;padding:9px 10px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);border-radius:2px;width:100%;
}
input[type=number]{font-family:var(--m);text-align:right;font-variant-numeric:tabular-nums}
label.veld{display:block;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-family:var(--m);margin-bottom:4px}
.velden{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin:12px 0}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* tabellen */
.scroll{overflow-x:auto}
table{border-collapse:collapse;width:100%;font-size:14.5px}
th{font-family:var(--m);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);
   text-align:left;font-weight:400;padding:0 10px 8px 0;border-bottom:1px solid var(--line-strong);white-space:nowrap}
td{padding:10px 10px 10px 0;border-bottom:1px solid var(--line);vertical-align:middle}
td.num,th.num{text-align:right;font-family:var(--m);font-variant-numeric:tabular-nums;padding-right:14px}
tr.uit td{opacity:.5}

/* planning-raster */
.raster{overflow-x:auto}
.raster table{min-width:520px}
.raster input[type=number]{width:66px;padding:7px 6px}
.raster td:first-child{position:sticky;left:0;background:var(--surface)}

/* meldingen */
.melding{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14.5px;align-items:flex-start}
.melding .stip{width:7px;height:7px;border-radius:50%;background:var(--accent);margin-top:7px;flex:none}
.melding.gelezen .stip{background:var(--line-strong)}
.melding.alarm .stip{background:var(--crit)}
.melding time{font-family:var(--m);font-size:11px;color:var(--muted);white-space:nowrap;margin-left:auto}

/* banner */
.banner{border-left:3px solid var(--crit);background:var(--crit-soft);color:var(--ink);padding:12px 14px;margin:16px 0;font-size:14.5px}
.banner.info{border-color:var(--accent);background:var(--accent-soft)}
.banner.ok{border-color:var(--ok);background:var(--ok-soft)}
.banner.warn{border-color:var(--warn);background:var(--warn-soft)}
.taak{display:flex;gap:12px;align-items:center;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--accent);padding:14px 16px;margin-bottom:8px;text-decoration:none;color:var(--ink)}
.taak b{display:block;font-size:16px}
.taak .sub{font-size:13.5px}
.taak .pijl{margin-left:auto;color:var(--accent);font-size:20px}

/* login */
.login{max-width:340px;margin:12vh auto;padding:0 16px}
.login h1{margin-bottom:6px}

/* ontvangst: op een gsm mag het invoerveld nooit uit beeld vallen */
.ontvangst .orij{display:flex;gap:14px;align-items:flex-end;justify-content:space-between;
  padding:14px 0;border-bottom:1px solid var(--line);flex-wrap:wrap}
.ontvangst .orij:last-child{border-bottom:0}
.ontvangst .owat{display:flex;flex-direction:column;gap:2px;min-width:160px;flex:1}
.ontvangst .owat b{font-size:16px}
.ontvangst .oaantal{display:flex;flex-direction:column;gap:2px;width:112px;flex:none;text-align:right}
.ontvangst .oaantal .veld{margin-bottom:2px;text-align:right}
.ontvangst .oaantal input{width:112px;font-size:17px;padding:11px 10px}

/* afboeken en overdragen onder een lot */
.afboek{border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
.redenen{display:flex;flex-wrap:wrap;gap:6px;flex:1}
button.klein{font-size:13.5px;padding:9px 12px}
.afboek input[name=opmerking]{font-size:14px;padding:8px 10px}
@media (max-width:520px){
  .afboek .rij{align-items:stretch}
  .afboek .rij > div[style*="width:96px"]{width:100% !important}
  .redenen{width:100%}
  .redenen button{flex:1 1 auto}
}

/* meerdere rollen aanvinken */
.rollenkeuze{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--ink-2)}
.rollenkeuze label{display:flex;align-items:center;gap:5px;white-space:nowrap}
.rollenkeuze input{width:auto;margin:0}

.versie{font-family:var(--m);font-size:10px;color:var(--muted);opacity:.7;letter-spacing:.03em}

/* ============ weekbord op de startpagina ============ */
.weekkop{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;margin:26px 0 4px}
.weekkop h1{margin:0}
.weekkop .sub{margin:2px 0 0;font-family:var(--m);font-size:12.5px}
.weekkop .nu{font-family:var(--m);font-size:11px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--accent);background:var(--accent-soft);padding:4px 9px;vertical-align:middle;margin-left:6px}
.knop.klein{padding:8px 13px;font-size:14px}

.stand{display:flex;gap:1px;background:var(--line);border:1px solid var(--line);margin:18px 0 20px}
.stand > div{background:var(--surface);padding:12px 16px;flex:1;min-width:88px;display:flex;
  flex-direction:column;gap:2px}
.stand b{font-family:var(--m);font-size:22px;font-weight:500;line-height:1;font-variant-numeric:tabular-nums}
.stand span{font-size:11.5px;color:var(--muted);letter-spacing:.02em}

.bord{display:flex;flex-direction:column;gap:10px}
.gerecht{background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--line-strong);
  padding:16px 18px 14px}
/* vier fasen: 0 gepland, 1 gekookt, 2 verpakt, 3 geleverd */
.gerecht.fase-1{border-left-color:var(--warn)}
.gerecht.fase-2{border-left-color:var(--accent)}
.gerecht.fase-3{border-left-color:var(--ok)}
/* afgewerkt: blijft leesbaar maar vraagt geen aandacht meer */
.gerecht.fase-3{opacity:.72}
.gerecht.fase-3:hover,.gerecht.fase-3:focus-within{opacity:1}
.gerecht header{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:14px}
.gerecht .titel{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.gerecht h3{margin:0;font-size:18px;letter-spacing:-.015em}
.stap-label{font-family:var(--m);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:4px 9px;white-space:nowrap;border:1px solid var(--line-strong);color:var(--ink-2)}
.stap-label.s0{border-color:var(--line-strong);color:var(--muted)}
.stap-label.s1{border-color:transparent;background:var(--warn-soft);color:var(--warn)}
.stap-label.s2{border-color:transparent;background:var(--accent-soft);color:var(--accent)}
.stap-label.s3{border-color:transparent;background:var(--ok-soft);color:var(--ok)}

/* het spoor: gevuld tot waar het gerecht staat. Even brede kolommen, hoeveel stappen er ook zijn. */
.spoor{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:0;position:relative}
.stap{display:flex;flex-direction:column;align-items:center;gap:5px;position:relative;padding-top:4px}
.stap::before{content:"";position:absolute;top:10px;left:-50%;width:100%;height:2px;
  background:var(--line);z-index:0}
.stap:first-child::before{display:none}
.stap.gedaan::before{background:var(--accent)}
.stap.deels::before{background:linear-gradient(90deg,var(--accent) 50%,var(--line) 50%)}
.stap .bol{width:13px;height:13px;border-radius:50%;background:var(--surface);
  border:2px solid var(--line-strong);z-index:1}
.stap.gedaan .bol{background:var(--accent);border-color:var(--accent)}
.stap.deels .bol{background:var(--surface);border-color:var(--accent)}
.stap.hier .bol{box-shadow:0 0 0 4px var(--accent-soft)}
.stap .naam{font-family:var(--m);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);text-align:center}
.stap.gedaan .naam{color:var(--ink-2)}
.stap.hier .naam{color:var(--accent)}
.stap .cijfer{font-family:var(--m);font-size:13px;font-variant-numeric:tabular-nums;color:var(--ink);
  min-height:1em}
.stap:not(.gedaan) .cijfer{color:var(--muted)}

.zaken{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.zaakchip{display:inline-flex;align-items:baseline;gap:7px;padding:5px 10px;font-size:13px;
  border:1px solid var(--line);background:var(--surface-2);color:var(--ink-2)}
.zaakchip b{font-weight:600;color:var(--ink)}
.zaakchip .mono{font-size:13px;color:var(--ink)}
.zaakchip .stand{font-family:var(--m);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);display:inline}
.zaakchip.s2{background:var(--accent-soft);border-color:var(--accent)}
.zaakchip.s2 .stand{color:var(--accent)}
.zaakchip.s3{background:var(--ok-soft);border-color:transparent}
.zaakchip.s3 .stand,.zaakchip.s3 b,.zaakchip.s3 .mono{color:var(--ok)}

.teller-bol{font-family:var(--m);font-size:11px;background:var(--accent);color:var(--surface);
  padding:2px 7px;border-radius:9px;vertical-align:middle}
@media (prefers-color-scheme:dark){.teller-bol{color:#0B1211}}

@media (max-width:560px){
  .gerecht{padding:14px 14px 12px}
  .stap .naam{font-size:8.5px;letter-spacing:.03em}
  .stap .cijfer{font-size:12px}
  .stand > div{padding:10px 12px;min-width:72px}
  .stand b{font-size:19px}
}

/* ============ receptenscherm ============ */
.gerechtkeuze{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:8px;margin:18px 0 4px}
.gkaart{display:flex;flex-direction:column;gap:2px;padding:12px 14px;background:var(--surface);
  border:1px solid var(--line);border-left:3px solid var(--line-strong);text-decoration:none;color:var(--ink)}
.gkaart:hover{border-left-color:var(--accent)}
.gkaart.actief{border-left-color:var(--accent);background:var(--accent-soft)}
.gkaart b{font-size:15.5px;letter-spacing:-.01em}
.gkaart .sub{font-size:12.5px}
.mist{color:var(--muted);opacity:.8}

/* Knop in de recepttabel: bestel ik dit bij elke batch, of is het een staple? */
.soortknop{font-family:var(--m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 9px;border:1px solid var(--line-strong);background:var(--surface);color:var(--muted);
  cursor:pointer;white-space:nowrap}
.soortknop:hover{border-color:var(--accent);color:var(--accent)}
.soortknop.elke{background:var(--accent-soft);border-color:transparent;color:var(--accent)}
.soortknop.voorraad{background:var(--warn-soft);border-color:transparent;color:var(--warn)}

/* Planning: de rij met porties per zaak, alleen zichtbaar als je verdeelt */
.verdeelrij td{background:var(--accent-soft);border-top:0}
.verdeelrij label{display:inline-flex;flex-direction:column;gap:3px;font-family:var(--m);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* Recepten: 'klopt' naast een hoeveelheid die nog nagekeken moet worden */
.kloptvink{display:block;margin-top:4px;font-family:var(--m);font-size:9.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--crit);white-space:nowrap;cursor:pointer}

/* Inkoop: een staple die waarschijnlijk op is, springt eruit */
tr.let-op td{background:var(--crit-soft)}

/* Beheer: de gerechtentabel moet in één beeld passen, zonder horizontaal te scrollen.
   De pijltjes van een getalveld eten een derde van de breedte op; die gaan eruit. */
.beheertabel{width:100%;table-layout:fixed}
.beheertabel th,.beheertabel td{padding:6px 4px}
.beheertabel input,.beheertabel select{min-width:0;width:100%;padding:5px 5px;font-size:13px}
.beheertabel input[type=number]{-moz-appearance:textfield;appearance:textfield}
.beheertabel input[type=number]::-webkit-outer-spin-button,
.beheertabel input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.beheertabel input[type=checkbox]{width:auto}
.beheertabel col.code{width:7%}.beheertabel col.naam{width:19%}.beheertabel col.portie{width:10%}.beheertabel col.maakt{width:7%}
.beheertabel col.verp{width:10%}.beheertabel col.getal{width:7.5%}.beheertabel col.actief{width:6%}
.beheertabel select{padding:5px 2px}
.tabelschuif{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tabelschuif .beheertabel{min-width:740px}
.beheertabel .nietgemaakt{opacity:.35}

/* Inkoop: kopregel per leverancier, zodat je nooit bij de verkeerde bestelt */
tr.levkop td{background:var(--line);font-family:var(--m);font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;padding:9px 10px;border-top:2px solid var(--line-strong)}
tr.levkop td b{color:var(--ink)}

/* Uitklapbare onderdelen op het inkoopscherm: de bestelling staat bovenaan, de
   uitleg en het beheerwerk zitten eronder weggeklapt tot je ze nodig hebt. */
details { margin: 18px 0; border-top: 1px solid var(--line); padding-top: 12px }
details > summary {
  cursor: pointer; list-style: none; padding: 8px 10px; margin: -8px -10px;
  border-radius: 6px; user-select: none;
}
details > summary::-webkit-details-marker { display: none }
details > summary::before {
  content: "▸"; display: inline-block; width: 16px; color: var(--muted);
  transition: transform .12s ease;
}
details[open] > summary::before { transform: rotate(90deg) }
details > summary:hover { background: var(--surface-2) }
details > summary b { font-size: 16px }
details > summary .sub, details > summary .label { margin-left: 8px }

/* Een extra batch hangt onder zijn gerecht, iets ingesprongen, zodat je ziet waarbij ze hoort. */
tr.extrarij td { background: var(--warn-soft); }
tr.extrarij td:first-child { padding-left: 22px; }

/* Testkopie op de pc, zodra de echte app online staat */
.testkopie{background:var(--crit);color:#fff;text-align:center;padding:8px 16px;font-size:14px;font-weight:600}
.testkopie a{color:#fff}