:root{
  --bg:#F3F6F0; --paper:#FFFFFF; --ink:#1B241D; --muted:#5C6B5E; --line:#DCE4D8;
  --groen:#1E7A34; --groen-d:#124D24; --groen-soft:#E3F0E3;
  --goud:#C29A3A; --goud-d:#8F6E22; --goud-soft:#F5ECD6;
  --warn:#A2680F; --warn-soft:#F7ECD5; --rood:#B23A31; --rood-soft:#F6E2DF;
  --shadow:0 1px 2px rgba(20,40,25,.06),0 6px 18px rgba(20,40,25,.07);
  --r:14px;
  --display:"Bahnschrift","Arial Narrow",Arial,sans-serif;
  --body:"Segoe UI",system-ui,sans-serif;
  --mono:Consolas,monospace;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--body);margin:0;line-height:1.45}
button{font-family:inherit;cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--goud);outline-offset:2px}
h1,h2,h3{font-family:var(--display);margin:0}

.topbar{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:12px 22px;
  background:var(--paper);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:40}
.logo{display:flex;align-items:center;gap:10px}
.wordmark{font-family:var(--display);line-height:1.02;font-weight:700}
.wordmark .l1{font-size:19px;color:var(--groen)}
.wordmark .l2{font-size:10.5px;color:var(--goud-d);letter-spacing:.32em}
.env{font-size:11px;color:var(--muted);border:1px solid var(--line);border-radius:99px;padding:3px 10px;letter-spacing:.08em}
nav.views{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
nav.views button{border:1px solid var(--line);background:transparent;color:var(--ink);
  border-radius:10px;padding:9px 16px;font-size:14.5px;font-weight:600}
nav.views button[aria-current="true"]{background:var(--groen);border-color:var(--groen);color:#fff}

main{max-width:1180px;margin:0 auto;padding:24px 22px 80px}
.kop{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:16px}
.kop h2{font-size:25px}
.kop .sub{color:var(--muted);font-size:14px}
.kaart{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px}

.chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;border-radius:99px;padding:3px 11px;white-space:nowrap}
.chip.groen{background:var(--groen-soft);color:var(--groen-d)}
.chip.goud{background:var(--goud-soft);color:var(--goud-d)}
.chip.warn{background:var(--warn-soft);color:var(--warn)}
.chip.rood{background:var(--rood-soft);color:var(--rood)}
.chip.stil{background:transparent;border:1px solid var(--line);color:var(--muted)}

.knop{border:0;border-radius:12px;font-weight:700;font-size:16px;padding:13px 20px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px}
.knop:active{transform:scale(.98)}
.knop.primair{background:var(--groen);color:#fff}
.knop.goud{background:var(--goud);color:#241B05}
.knop.stil{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.knop.gevaar{background:transparent;border:1.5px solid var(--rood);color:var(--rood)}
.knop.groot{font-size:19px;padding:17px 26px;border-radius:14px;width:100%}
.knop[disabled]{opacity:.45;cursor:not-allowed}

.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px;margin:16px 0}
.tegel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
.tegel .lbl{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);font-weight:600}
.tegel .num{font-family:var(--display);font-size:32px;font-weight:700;margin-top:2px}
.tegel.accent{border-color:var(--groen);background:var(--groen-soft)}
.tegel.accent .num{color:var(--groen-d)}
.tegel.rood{border-color:var(--rood)}
.tegel.rood .num{color:var(--rood)}

.duo{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:start}
@media(max-width:840px){.duo{grid-template-columns:1fr}}
.melding{display:flex;gap:12px;align-items:flex-start;padding:10px 4px;border-bottom:1px solid var(--line)}
.melding:last-child{border-bottom:0}
.melding .ico{width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-size:15px;flex:none}
.melding .ico.warn{background:var(--warn-soft)} .melding .ico.rood{background:var(--rood-soft)}
.melding .ico.groen{background:var(--groen-soft)} .melding .ico.info{background:var(--goud-soft)}
.melding b{font-size:14px} .melding .sub2{font-size:13px;color:var(--muted)}
.melding time{margin-left:auto;font-size:11px;color:var(--muted);flex:none}

table.lijst{width:100%;border-collapse:collapse;font-size:14.5px}
table.lijst th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  text-align:left;padding:7px 8px;border-bottom:1px solid var(--line)}
table.lijst td{padding:9px 8px;border-bottom:1px solid var(--line);vertical-align:middle}
table.lijst tr:last-child td{border-bottom:0}
table.lijst input[type=number]{width:84px;font-size:16px;padding:7px;border:1.5px solid var(--line);border-radius:8px}

.slot{max-width:420px;margin:40px auto;text-align:center}
.slot .icoon{font-size:38px;margin-bottom:8px}
.pinpad{display:grid;grid-template-columns:repeat(3,84px);gap:10px;justify-content:center;margin-top:18px}
.pinpad button{height:62px;font-size:23px;font-family:var(--display);border-radius:14px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.pinvakjes{display:flex;gap:12px;justify-content:center;margin-top:16px}
.pinvak{width:17px;height:17px;border-radius:50%;border:2px solid var(--line)}
.pinvak.vol{background:var(--groen);border-color:var(--groen)}

.seriegrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(255px,1fr));gap:14px}
.serie{background:var(--paper);border:1.5px solid var(--line);border-radius:var(--r);overflow:hidden;
  text-align:left;padding:0;display:flex;flex-direction:column}
.serie:not([disabled]):hover{border-color:var(--groen)}
/* fotovakken: afbeelding absoluut binnen het vak — kan nooit overlappen */
.serie .beeld{height:160px;background:#fff;border-bottom:1px solid var(--line);position:relative;overflow:hidden}
.paneel .beeld{background:#fff;position:relative;overflow:hidden;height:150px}
.serie .beeld img,.paneel .beeld img{position:absolute;inset:10px;width:calc(100% - 20px);
  height:calc(100% - 20px);object-fit:contain}
.serie .beeld svg,.paneel .beeld svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}

/* werkscherm: grote plantfoto links, verwerking rechts */
.werkblad2{display:grid;grid-template-columns:minmax(320px,1fr) 1.25fr;gap:14px;align-items:start;margin:14px 0}
.plantpaneel .beeld{height:480px}
.rechterkolom{display:flex;flex-direction:column;gap:14px}
.minipanelen{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.minipanelen .paneel .beeld{height:130px}
.paneel .naam-groot{font-family:var(--display);font-size:24px;font-weight:800;line-height:1.2;padding:10px 14px 2px}
.perdoos{font-family:var(--display);font-size:19px;font-weight:700;color:var(--groen-d);
  background:var(--groen-soft);border-radius:99px;display:inline-block;padding:6px 18px;margin:6px 0 16px}
.serie .body{padding:12px 15px 14px;display:flex;flex-direction:column;gap:7px}
.serie h3{font-size:16px;line-height:1.25}
.serie .meta{display:flex;gap:6px;flex-wrap:wrap}
.serie .aant{font-family:var(--display);font-size:15px;font-weight:700;color:var(--groen-d)}
.serie[disabled]{opacity:.55;cursor:not-allowed}

.werkblad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:14px 0}
@media(max-width:760px){.werkblad{grid-template-columns:1fr}}
.paneel{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;text-align:center}
.paneel .lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;padding:9px 0 0}
.paneel .naam{font-weight:700;padding:0 12px 4px;font-size:14.5px}
.paneel .code{font-family:var(--mono);font-size:12.5px;color:var(--muted);padding-bottom:12px}
.teller{display:flex;align-items:center;justify-content:center;gap:26px;padding:14px 0 6px}
.teller .groot{font-family:var(--display);font-size:58px;font-weight:700;line-height:1}
.teller .sub{font-size:14px;color:var(--muted);max-width:170px}
.balk{height:10px;border-radius:99px;background:var(--line);overflow:hidden;margin:8px 0 14px}
.balk>i{display:block;height:100%;border-radius:99px;background:var(--groen);transition:width .4s}
.actierij{display:grid;gap:10px;max-width:640px;margin:0 auto}
.actierij .rijtje{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}

.mmkaart{border:1.5px solid var(--line);border-radius:var(--r);background:var(--paper);padding:15px 17px;margin-bottom:13px}
.mmkop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mmkop .ordernr{font-family:var(--mono);font-weight:700;font-size:15px}
.mmkop .shop{font-size:13px;color:var(--muted)}
.colli{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-top:11px}
.collo{border:1px dashed var(--goud);border-radius:12px;padding:10px 13px;background:var(--goud-soft)}
.collo .kop2{font-weight:700;font-size:13.5px}
.collo ul{margin:6px 0 0;padding-left:18px;font-size:13px}
.mmvoet{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}

/* picklijst-rijen (werken op desktop én mobiel) */
.pickrij{display:grid;grid-template-columns:1fr auto minmax(200px,auto);gap:10px 16px;align-items:center;
  padding:12px 4px;border-bottom:1px solid var(--line)}
.pickrij:last-child{border-bottom:0}
.pr-info b{font-size:15px}
.pr-sub{font-size:12px;color:var(--muted);font-family:var(--mono)}
.pr-nodig{font-family:var(--display);font-size:26px;font-weight:700;text-align:right;line-height:1}
.pr-nodig small{display:block;font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);font-weight:600}
.pr-actie{display:flex;gap:8px;justify-content:flex-end}
.pr-actie input{width:90px;font-size:17px;padding:9px;border:1.5px solid var(--line);border-radius:9px;text-align:center}
.pr-actie .knop{padding:10px 16px;font-size:14.5px}
.pr-status{text-align:right}
.printknop{margin-left:auto}

/* ── mobiel ── */
@media (max-width:640px){
  main{padding:14px 12px 70px}
  .topbar{padding:10px 12px;gap:8px}
  .env{display:none}
  .wordmark .l1{font-size:16px}.wordmark .l2{font-size:9px}
  nav.views{width:100%;margin-left:0;overflow-x:auto;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;padding-bottom:2px}
  nav.views::-webkit-scrollbar{display:none}
  nav.views button{padding:9px 13px;font-size:13.5px;white-space:nowrap;flex:none}
  .kop{gap:6px;margin-bottom:12px}
  .kop h2{font-size:20px}
  .kop .sub{font-size:12.5px}
  .printknop{margin-left:0;width:100%}
  .kaart{padding:14px 14px}
  .tegels{grid-template-columns:repeat(3,1fr);gap:8px}
  .tegel{padding:10px 10px}
  .tegel .num{font-size:24px}
  .tegel .lbl{font-size:9.5px;letter-spacing:.05em}
  .pickrij{grid-template-columns:1fr auto}
  .pr-actie,.pr-status{grid-column:1/-1;justify-content:stretch}
  .pr-actie input{flex:1;font-size:18px}
  .pr-actie .knop{flex:1;padding:12px 10px;font-size:15.5px}
  .melding time{display:none}
  .teller{gap:16px}
  .teller .groot{font-size:44px}
  .knop.groot{font-size:16px;padding:15px 16px}
  .werkblad2{grid-template-columns:1fr;gap:10px}
  .plantpaneel .beeld{height:340px}
  .minipanelen .paneel .beeld{height:110px}
  .paneel .naam-groot{font-size:20px}
  .seriegrid{grid-template-columns:1fr}
  .duo{grid-template-columns:1fr}
  .mmkaart{padding:12px 13px}
  .colli{grid-template-columns:1fr}
  .pinpad{grid-template-columns:repeat(3,minmax(72px,1fr));max-width:290px;margin-left:auto;margin-right:auto}
  .pinpad button{height:58px}
}

/* orderdetail-venster */
.overlay{position:fixed;inset:0;background:rgba(20,30,22,.5);display:grid;place-items:center;z-index:70;padding:16px}
.dialoog{background:var(--paper);border-radius:16px;box-shadow:var(--shadow);padding:20px 22px;max-width:560px;width:100%;
  max-height:85vh;overflow-y:auto}
.dl-kop{font-family:var(--display);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--groen-d);margin:14px 0 6px}
.dl-kop.rood{color:var(--rood)}
.dl-regel{padding:8px 10px;border-radius:9px;font-size:14px;margin-bottom:6px}
.dl-regel.ok{background:var(--groen-soft)}
.dl-regel.fout{background:var(--rood-soft)}
.dl-code{font-family:var(--mono);font-size:12px;color:var(--muted)}

/* orderlijst op het werkscherm */
.serieorders{max-height:240px;overflow-y:auto;padding-right:4px}
.serieorder{display:flex;gap:9px;align-items:center;padding:6px 2px;border-bottom:1px solid var(--line);font-size:13.5px}
.serieorder:last-child{border-bottom:0}
.so-nr{font-family:var(--display);font-weight:700;color:var(--groen-d);width:22px;text-align:right;flex:none}
.so-klant{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* beheer */
.bp-veld{display:flex;align-items:center;gap:12px;margin-bottom:9px}
.bp-veld>span{width:170px;font-size:12.5px;color:var(--muted);font-weight:600;flex:none}
.bp-veld input,.bp-veld select{flex:1;font-size:14.5px;padding:9px 11px;border:1.5px solid var(--line);border-radius:9px;min-width:0}
.beheer-bundel{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:7px 0;border-top:1px solid var(--line)}
.dl-kop{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin:12px 0 4px}
.dl-kop.rood{color:var(--rood)}
.dl-regel{font-size:14px;padding:6px 0;border-bottom:1px solid var(--line)}
.dl-regel.fout{color:var(--rood)}
.dl-code{font-family:var(--mono);font-size:12px;color:var(--muted)}
.overlay{position:fixed;inset:0;background:rgba(14,22,17,.5);display:grid;place-items:center;z-index:70;padding:18px}
.overlay .dialoog{background:var(--paper);border-radius:16px;padding:22px 24px;max-width:560px;width:100%;box-shadow:var(--shadow);max-height:85vh;overflow:auto}

.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--groen-d);color:#fff;padding:12px 20px;border-radius:12px;font-weight:600;font-size:14.5px;
  z-index:80;pointer-events:none;transition:all .25s;max-width:90vw;text-align:center}
.toast.zien{opacity:1;transform:translateX(-50%) translateY(0)}
.uitleg{font-size:12.5px;color:var(--muted);margin-top:10px}