/* Legacy Stock — huisstijl: Montserrat, zwart, #00D764, de driehoek. Licht thema. */
:root{
  --green:#00D764; --green-ink:#007D3B; --green-soft:#E6FBF0;
  --ink:#0B0D0C; --ink-2:#3D4442; --ink-3:#5B6360;
  --surface:#FFFFFF; --surface-2:#F6F8F7; --ground:#E6EAE8;
  --line:#DEE3E0; --line-2:#C5CCC8;
  --warn:#B26B00; --warn-bg:#FFF3DE;
  --crit:#C2261F; --crit-bg:#FDEBEA;
  --info:#1D4ED8; --info-bg:#E8EFFF;
  /* prioriteit: signaalkleuren, los van het merkgroen. 18-09 (Levi): rood en oranje moeten duidelijk verschillen:
     spoed = echt rood (vol, witte tekst), prioriteit = amber/oranje-geel (vol, donkere tekst). -vol = vlak/streep, -op = tekst erop */
  --p-laag:#15803D; --p-laag-bg:#DCFCE7;
  --p-prio:#B45309; --p-prio-bg:#FEF3C7; --p-prio-vol:#F59E0B; --p-prio-op:#2B1A00;
  --p-spoed:#DC2626; --p-spoed-bg:#FEE2E2; --p-spoed-vol:#DC2626; --p-spoed-op:#FFFFFF;
  --shadow:0 1px 2px rgba(11,13,12,.06), 0 8px 24px rgba(11,13,12,.05);
  --r:14px;
  --sans:'Montserrat','Segoe UI',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --green:#00E36B; --green-ink:#4DEE9A; --green-soft:#0E2A1C;
    --ink:#EEF1EF; --ink-2:#B3BBB8; --ink-3:#7E8785;
    --surface:#1B211F; --surface-2:#242B28; --ground:#0B0D0C;
    --line:#2F3733; --line-2:#3D4743;
    --warn:#F0B25A; --warn-bg:#2E2312; --crit:#F08078; --crit-bg:#301715;
    --info:#8AB4FF; --info-bg:#14213D;
    --p-laag:#4ADE80; --p-laag-bg:#0F2A1A; --p-prio:#FCD34D; --p-prio-bg:#3A2A06; --p-prio-vol:#F59E0B; --p-prio-op:#1F1300;
    --p-spoed:#F87171; --p-spoed-bg:#3B1212; --p-spoed-vol:#DC2626; --p-spoed-op:#FFFFFF;
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font-family:var(--sans);font-weight:500;-webkit-font-smoothing:antialiased;font-size:14px}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
input{font:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- schil ---------- */
.app{display:grid;grid-template-columns:112px 1fr;min-height:100vh}
.rail{background:#0B0D0C;display:flex;flex-direction:column;gap:4px;padding:18px 10px;position:sticky;top:0;height:100vh;overflow-y:auto;overflow-x:hidden;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.rail>*{flex-shrink:0}   /* knoppen en submenu's nooit samendrukken op een laag scherm; de balk scrolt */
.rail .mark{display:flex;justify-content:center;padding:6px 0 22px}
.rail .mark svg{width:34px;height:auto}
.navbtn{display:flex;flex-direction:column;align-items:center;gap:7px;padding:14px 4px;border-radius:12px;color:#8E9A95;position:relative;transition:color .15s,background .15s;min-height:72px;justify-content:center}
.navbtn svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.navbtn span{font-size:10.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase}
.navbtn:hover{color:#D6DCD9;background:rgba(255,255,255,.05)}
.navbtn[aria-current="page"]{color:#fff;background:rgba(0,215,100,.13)}
.navbtn[aria-current="page"]::before{content:"";position:absolute;left:-10px;top:50%;transform:translateY(-50%);width:0;height:0;border-top:7px solid transparent;border-bottom:7px solid transparent;border-left:9px solid #00D764}
.navbtn .tel{position:absolute;top:8px;right:8px;background:#00D764;color:#03210F;font-size:10px;font-weight:800;border-radius:999px;min-width:18px;height:18px;display:grid;place-items:center;padding:0 5px}
.navbtn .tel.rood{background:#EF4444;color:#fff}
/* Submenu: dicht = 0 hoog en onzichtbaar; .open schuift het vloeiend open en laat de knoppen na elkaar verschijnen. */
.subnav{display:flex;flex-direction:column;gap:2px;margin:0;padding:0;border-bottom:1px solid rgba(255,255,255,0);max-height:0;opacity:0;overflow:hidden;transform:translateY(-6px);
  transition:max-height .34s cubic-bezier(.2,.7,.2,1),opacity .22s ease,transform .34s cubic-bezier(.2,.7,.2,1),margin .34s ease,padding .34s ease,border-color .34s ease}
.subnav.open{max-height:320px;opacity:1;transform:none;margin:0 0 6px;padding:0 0 8px;border-bottom-color:rgba(255,255,255,.08)}
.subnav .subbtn{opacity:0;transform:translateX(-8px);transition:opacity .26s ease,transform .26s cubic-bezier(.2,.7,.2,1),color .15s,background .15s}
.subnav.open .subbtn{opacity:1;transform:none}
.subnav.open .subbtn:nth-child(1){transition-delay:.05s}
.subnav.open .subbtn:nth-child(2){transition-delay:.10s}
.subnav.open .subbtn:nth-child(3){transition-delay:.15s}
.subnav.open .subbtn:nth-child(4){transition-delay:.20s}
.subbtn{color:#8E9A95;font-size:10px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:9px 6px;border-radius:9px;text-align:center;min-height:38px}
.subbtn:hover,.subbtn:focus-visible{color:#fff;background:rgba(0,215,100,.3)}
.subbtn[aria-current="page"]{color:#fff;background:#00D764;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.35)}

main{min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:16px 28px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.wordmark{display:flex;flex-direction:column;gap:3px;line-height:1}
.wordmark .row{display:flex;align-items:center;gap:2px;font-weight:800;font-size:24px;letter-spacing:.03em;color:var(--ink)}
.wordmark .tri{width:18px;height:18px;display:block}
.wordmark .sub{font-size:8px;font-weight:600;letter-spacing:.62em;color:var(--ink-3);padding-left:2px}
.crumb{display:flex;flex-direction:column;gap:2px;flex:1;margin-left:8px;padding-left:24px;border-left:1px solid var(--line)}
.crumb b{font-size:15px;font-weight:800;letter-spacing:.05em;text-transform:uppercase}
.crumb small{font-size:12px;color:var(--ink-3);font-weight:500}
.systeem{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end;font-size:12px;color:var(--ink-3)}
.systeem .chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;background:var(--ground);font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.systeem .chip.groen{background:var(--green-soft);color:var(--green-ink)}
.systeem .chip.oranje{background:var(--warn-bg);color:var(--warn)}
.systeem .chip.rood{background:var(--p-spoed-bg);color:var(--p-spoed)}
.systeem .chip.grijs{background:var(--ground);color:var(--ink-3);font-weight:600}

.screen{display:none;padding:22px 28px 60px;flex:1}
.screen.on{display:block}
.volgt{display:grid;place-items:center;min-height:50vh;text-align:center;color:var(--ink-3)}
.volgt h2{margin:0 0 6px;font-size:22px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}

/* ---------- gedeelde onderdelen ---------- */
.eyebrow{font-size:10.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-3);margin:0 0 10px}
.strip{display:flex;flex-wrap:wrap;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin:0 0 18px}
.strip>div{flex:1 1 140px;background:var(--surface);padding:12px 16px}
.strip dt{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);margin:0 0 4px}
.strip dd{margin:0;font-size:22px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.strip dd small{font-size:12px;font-weight:600;color:var(--ink-3);letter-spacing:0}
.pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.04em;white-space:nowrap}
.pill.ok{background:var(--green-soft);color:var(--green-ink)}
.pill.low{background:var(--warn-bg);color:var(--warn)}
.pill.out{background:var(--crit-bg);color:var(--crit)}
.pill.info{background:var(--info-bg);color:var(--info)}
.pill.neutral{background:var(--ground);color:var(--ink-3)}
.pill.bulk{background:var(--ink);color:var(--surface);letter-spacing:.08em}
.pill.p-laag{background:var(--p-laag-bg);color:var(--p-laag)}
.pill.p-prioriteit{background:var(--p-prio-vol);color:var(--p-prio-op)}
.pill.p-spoed{background:var(--p-spoed-vol);color:var(--p-spoed-op)}
.mono{font-family:var(--mono);font-size:12px;letter-spacing:-.01em;color:var(--ink-3);overflow-wrap:anywhere}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.leeg{padding:34px 20px;text-align:center;color:var(--ink-3);font-size:13.5px;line-height:1.6}
.leeg b{display:block;color:var(--ink);font-size:15px;margin-bottom:4px}
.toast{position:fixed;left:50%;bottom:34px;transform:translate(-50%,20px);background:#0B0D0C;color:#fff;padding:15px 26px;border-radius:12px;font-size:13.5px;font-weight:700;box-shadow:0 12px 34px rgba(0,0,0,.28);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;z-index:50;display:flex;align-items:center;gap:10px;max-width:80vw}
.toast.show{opacity:1;transform:translate(-50%,0)}
.toast .tri{width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent;border-bottom:10px solid #00D764;flex:none}
.toast.fout .tri{border-bottom-color:#EF4444}

/* ---------- filters ---------- */
.filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 14px}
.filters .zoek{flex:1 1 220px;min-height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);color:var(--ink);font-size:14px}
.fbtn{min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:12.5px;font-weight:700;letter-spacing:.03em;transition:background .12s,border-color .12s,color .12s;display:inline-flex;align-items:center;gap:6px}
.fbtn:hover{border-color:var(--ink-3)}
.fbtn[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.fbtn.p-spoed[aria-pressed="true"]{background:var(--p-spoed-vol);border-color:var(--p-spoed-vol);color:var(--p-spoed-op)}
.fbtn.p-prioriteit[aria-pressed="true"]{background:var(--p-prio-vol);border-color:var(--p-prio-vol);color:var(--p-prio-op)}
.fbtn.p-laag[aria-pressed="true"]{background:var(--p-laag);border-color:var(--p-laag);color:#fff}
/* submenu's van de filters */
.fmenus{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.fmenu{position:relative}
.fmknop{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;padding:0 34px 0 14px;min-height:48px;line-height:1.15;position:relative;min-width:150px}
.fmknop small{font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.fmknop b{font-size:13px;font-weight:800;white-space:nowrap}
.fmknop i{position:absolute;right:14px;top:50%;width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);opacity:.55}
.fmknop[aria-pressed="true"] small{color:inherit;opacity:.72}
.fmknop.p-spoed[aria-pressed="true"]{background:var(--p-spoed-vol);border-color:var(--p-spoed-vol);color:var(--p-spoed-op)}
.fmknop.p-prioriteit[aria-pressed="true"]{background:var(--p-prio-vol);border-color:var(--p-prio-vol);color:var(--p-prio-op)}
.fmknop.p-laag[aria-pressed="true"]{background:var(--p-laag);border-color:var(--p-laag);color:#fff}
.fmenu.open .fmknop{border-color:var(--ink);box-shadow:0 0 0 3px rgba(0,215,100,.25)}
.fmlijst{display:none;position:absolute;left:0;top:calc(100% + 6px);min-width:260px;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;box-shadow:0 14px 40px rgba(11,13,12,.18);padding:6px;z-index:20}
.fmenu.open .fmlijst{display:block;animation:fmIn .14s ease}
@keyframes fmIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fitem{display:flex;align-items:center;gap:12px;width:100%;min-height:48px;padding:0 14px 0 42px;border-radius:10px;font-size:13.5px;font-weight:700;text-align:left;position:relative;color:var(--ink)}
.fitem:hover{background:var(--ground)}
.fitem.scheiding{margin-bottom:6px}
.fitem.scheiding::after{content:'';position:absolute;left:10px;right:10px;bottom:-4px;border-bottom:1px solid var(--line)}
.fitem>span:first-child{flex:1}
.fitem .n{font-family:var(--mono);font-size:12px;color:var(--ink-3);font-weight:600;min-width:26px;text-align:right}
.fitem::before{content:'';position:absolute;left:14px;top:50%;width:16px;height:16px;border:2px solid var(--line-2);border-radius:5px;transform:translateY(-50%);box-sizing:border-box}
.fitem[aria-checked="true"]::before{background:var(--green);border-color:var(--green)}
.fitem[aria-checked="true"]{background:var(--green-soft)}
.fitem[aria-checked="true"] .n{color:var(--green-ink)}
.fitem.p-spoed>span:first-child{color:var(--p-spoed)}
.fitem.p-prioriteit>span:first-child{color:var(--p-prio)}
.fitem.p-laag>span:first-child{color:var(--p-laag)}
.fsep{width:1px;height:28px;background:var(--line-2);margin:0 4px}

/* ---------- lijst + detail ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:16px;align-items:start}
.list{overflow:hidden}
.orow{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 16px 13px 18px;min-height:68px;border-top:1px solid var(--line);transition:background .12s;position:relative;border-left:5px solid transparent}
.orow:first-child{border-top:0}
.orow:hover{background:var(--surface-2)}
.orow[aria-selected="true"],.orow[aria-current="true"]{background:var(--green-soft)}
.orow.p-prioriteit{border-left-color:var(--p-prio-vol)}
.orow.p-spoed{border-left-color:var(--p-spoed-vol)}
.orow.verdwenen{opacity:.55}
.orow.kind{padding-left:40px;background:var(--surface-2)}
.orow.kind::before{content:"↳";position:absolute;left:20px;color:var(--ink-3);font-size:14px}
.orow .nr{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-3);min-width:96px}
.orow .nr.voorlopig{color:var(--warn)}
.orow .cust{flex:1;min-width:0}
.orow .cust b{display:block;font-size:14px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.orow .cust small{font-size:11.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.orow .badges{display:flex;flex-wrap:wrap;gap:4px;justify-content:flex-end;max-width:46%;min-width:0}
/* Een lange pil wordt ingekort (…) in plaats van over de klantnaam heen te vallen (Levi 17-09) */
.orow .badges .pill{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
/* Uitklappen van delen/naleveringen (Levi 17-09): de groene driehoek uit het logo; rechts = dicht, omlaag = open */
.uitklap{min-width:44px;min-height:44px;border-radius:12px;display:grid;place-items:center;flex:none;cursor:pointer}
.uitklap svg{width:26px;height:26px;fill:var(--green);transform:rotate(90deg);filter:drop-shadow(0 0 3px rgba(0,215,100,.45))}
.uitklap.open svg{transform:rotate(180deg)}
.uitklap.draai svg{animation:uitklapDicht .2s ease-out}
.uitklap.draai.open svg{animation:uitklapOpen .2s ease-out}
@keyframes uitklapOpen{from{transform:rotate(90deg)}to{transform:rotate(180deg)}}
@keyframes uitklapDicht{from{transform:rotate(180deg)}to{transform:rotate(90deg)}}
.uitklap:hover{background:var(--green-soft)}
.uitklap:hover svg{filter:drop-shadow(0 0 5px rgba(0,215,100,.65))}
@media (prefers-reduced-motion: reduce){.uitklap.draai svg,.uitklap.draai.open svg{animation:none}}
@media (max-width:760px){.uitklap{margin:0 -8px 0 -6px}}   /* telefoon: tikvlak blijft 44 px, de klantnaam houdt ruimte */

.detail{padding:20px;position:sticky;top:86px;max-height:calc(100vh - 100px);overflow:auto}
.detail h3{margin:0 0 3px;font-size:20px;font-weight:800;letter-spacing:.01em}
.detail .sub{margin:0 0 14px;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.detail .sub .mono{font-size:12px}
.lines{border-top:1px solid var(--line);margin:0 0 18px}
.line{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}
.line .nm{flex:1;font-weight:600;color:var(--ink-2)}
.line .nm small{display:block;font-size:11px;color:var(--ink-3);font-weight:500}
.line .n{font-family:var(--mono);font-weight:600;font-variant-numeric:tabular-nums;min-width:60px;text-align:right}
.line .v{font-size:11.5px;color:var(--ink-3);min-width:70px;text-align:right;font-variant-numeric:tabular-nums}
.line .v.geen{color:var(--warn);font-weight:700}

.sbtn{padding:12px 10px;min-height:58px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);font-size:12.5px;font-weight:700;letter-spacing:.03em;transition:border-color .12s,background .12s,color .12s}
.sbtn:hover{border-color:var(--ink-3)}
.sbtn[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#03210F}
.pbtn{min-height:58px;border-radius:11px;font-size:13px;font-weight:800;letter-spacing:.04em;border:2px solid;background:var(--surface);transition:background .12s,color .12s}
.pbtn.p-laag{border-color:var(--p-laag);color:var(--p-laag)}
.pbtn.p-prioriteit{border-color:var(--p-prio-vol);color:var(--p-prio)}
.pbtn.p-spoed{border-color:var(--p-spoed-vol);color:var(--p-spoed)}
.pbtn.p-laag[aria-pressed="true"]{background:var(--p-laag);color:#fff}
.pbtn.p-prioriteit[aria-pressed="true"]{background:var(--p-prio-vol);color:var(--p-prio-op)}
.pbtn.p-spoed[aria-pressed="true"]{background:var(--p-spoed-vol);color:var(--p-spoed-op)}

.blok{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:16px;background:var(--surface-2)}
.blok h4{margin:0 0 10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);display:flex;justify-content:space-between;align-items:center;gap:10px}
.controle{background:var(--warn-bg);border-color:transparent}
.controle li{font-size:12.5px;color:var(--warn);margin:4px 0;font-weight:600}
.controle ul{margin:0;padding-left:18px}
.ruwe{white-space:pre-wrap;font-size:12.5px;color:var(--ink-2);line-height:1.5;margin:0}
.log{margin:0;padding:0;list-style:none}
.log li{display:grid;grid-template-columns:120px 1fr;gap:10px;padding:7px 0;border-top:1px solid var(--line);font-size:12px}
.log li:first-child{border-top:0}
.log .t{font-family:var(--mono);color:var(--ink-3);font-size:11px}
.log .s{font-weight:700}
.log .s small{display:block;font-weight:500;color:var(--ink-3)}
.schakel{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:58px;padding:0 14px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);width:100%;text-align:left;font-weight:700}
.schakel .knop{width:52px;height:30px;border-radius:999px;background:var(--line-2);position:relative;transition:background .15s;flex:none}
.schakel .knop::after{content:"";position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:left .15s;box-shadow:0 1px 3px rgba(0,0,0,.3)}
.schakel[aria-checked="true"] .knop{background:var(--green)}
.schakel[aria-checked="true"] .knop::after{left:25px}
.tabel{width:100%;border-collapse:collapse;font-size:12.5px}
.tabel th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:6px 6px;border-bottom:1px solid var(--line)}
.tabel td{padding:8px 6px;border-bottom:1px solid var(--line);font-variant-numeric:tabular-nums}
.tabel td.n{text-align:right;font-family:var(--mono)}
.tabel th.n{text-align:right}
.tabel .rest{font-weight:800}
.actie{min-height:52px;padding:0 18px;border-radius:11px;background:var(--ink);color:var(--surface);font-weight:800;font-size:13px;letter-spacing:.05em;display:inline-flex;align-items:center;gap:8px}
.actie.groen{background:var(--green);color:#03210F}
.actie.licht{background:var(--surface);border:1px solid var(--line-2);color:var(--ink)}
.actie:disabled{opacity:.45;cursor:not-allowed}
.klein{min-height:40px;padding:0 12px;border-radius:9px;border:1px solid var(--line-2);font-size:12px;font-weight:700;background:var(--surface)}
.klein:hover{border-color:var(--ink-3)}
.deel{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13px}
.deel:first-of-type{border-top:0}
.deel b{flex:1}
.deel a{color:var(--green-ink);font-weight:700;cursor:pointer}

/* ---------- kiezer (koppelen) ---------- */
.kiezer{position:fixed;inset:0;background:rgba(11,13,12,.45);display:grid;place-items:center;z-index:48;padding:20px}
.kiezer .paneel{background:var(--surface);border-radius:16px;width:min(760px,100%);max-height:88vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.kiezer header{padding:18px 20px 10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.kiezer header h3{margin:0;flex:1;font-size:16px;font-weight:800}
.kiezer .lijst{overflow:auto;flex:1;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kiezer label{display:flex;align-items:center;gap:14px;padding:12px 20px;min-height:60px;border-top:1px solid var(--line);cursor:pointer}
.kiezer label:first-child{border-top:0}
.kiezer label:hover{background:var(--surface-2)}
.kiezer input[type=checkbox]{width:26px;height:26px;accent-color:#00D764;flex:none}
.kiezer footer{padding:14px 20px;display:flex;justify-content:flex-end;gap:10px}

/* ---------- picklist ---------- */
.pgroep{margin-bottom:16px;overflow:hidden}
.pgroep>header{display:flex;align-items:center;gap:11px;padding:12px 16px;border-bottom:1px solid var(--line)}
.swatch{width:14px;height:26px;border-radius:4px;flex:none;border:1px solid rgba(11,13,12,.14)}
.pgroep h3{margin:0;font-size:14.5px;font-weight:800;letter-spacing:.02em;flex:1}
.prow{border-top:1px solid var(--line);border-left:5px solid transparent}
.prow:first-of-type{border-top:0}
.prow.p-prioriteit{border-left-color:var(--p-prio-vol)}
.prow.p-spoed{border-left-color:var(--p-spoed-vol)}
.prow>button{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 16px;min-height:60px}
.prow>button:hover{background:var(--surface-2)}
.prow .nm{flex:1;font-size:13.5px;font-weight:600;color:var(--ink-2)}
.prow .qt{font-family:var(--mono);font-weight:600;font-size:18px;font-variant-numeric:tabular-nums;min-width:80px;text-align:right}
.prow .qt small{font-size:11px;color:var(--ink-3);font-family:var(--sans);font-weight:600}
.prow .st{font-size:11.5px;color:var(--ink-3);min-width:70px;text-align:right;font-variant-numeric:tabular-nums}
.prow .sub{padding:0 16px 10px 40px;font-size:12.5px;color:var(--ink-2)}
.prow .sub div{display:flex;gap:12px;padding:5px 0;border-top:1px dashed var(--line)}
.prow .sub div span:first-child{flex:1}

@media (max-width:1100px){
  .split{grid-template-columns:1fr}
  .detail{position:static;max-height:none}
}
@media (max-width:800px){
  .app{grid-template-columns:88px 1fr}
  .topbar,.screen{padding-left:16px;padding-right:16px}
  .crumb{display:none}
}

/* taalknop */
.taal{min-width:52px;min-height:44px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;font-weight:800;font-size:12px;letter-spacing:.1em;background:var(--surface);color:var(--ink)}
.taal:hover{border-color:var(--ink-3)}
.taal.ik{min-width:0;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;letter-spacing:0;text-transform:none;font-size:13px;background:var(--green-soft);border-color:var(--green);color:var(--green-ink)}
/* inloggen */
#login{position:fixed;inset:0;z-index:90;background:#0B0D0C;display:grid;place-items:center;padding:20px}
#login[hidden]{display:none}
.lg-kaart{width:min(420px,100%);background:var(--surface);border-radius:18px;padding:26px 24px 22px;box-shadow:0 30px 80px rgba(0,0,0,.5)}
.lg-merk .row{display:flex;align-items:center;gap:2px;font-weight:800;font-size:26px;letter-spacing:.03em;color:var(--ink)}
.lg-merk .tri{width:20px;height:18px}
.lg-merk .sub{font-size:9px;font-weight:600;letter-spacing:.62em;color:var(--ink-3);padding-left:2px;margin-bottom:18px}
.lg-kaart h2{margin:0 0 14px;font-size:18px;font-weight:800}
.lg-recent{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.lg-recent:empty{display:none}
.lg-recent button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-weight:700;font-size:13px}
.lg-onthoud{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:600;margin:2px 0 12px;cursor:pointer}
.lg-onthoud input{width:22px;height:22px;accent-color:#00D764}
.lg-fout{min-height:18px;color:var(--crit);font-size:13px;font-weight:700;margin-bottom:8px}
#login .actie{width:100%;min-height:52px}
.lg-skip{display:block;width:100%;margin-top:10px;min-height:40px;background:none;border:0;color:var(--ink-3);font-weight:700;font-size:13px;text-decoration:underline}
.lg-skip[hidden]{display:none}
.ikmenu{display:flex;flex-direction:column;gap:8px;padding:6px 20px 18px}
.ikmenu button{min-height:48px;border-radius:11px;border:1px solid var(--line-2);background:var(--surface);font-weight:700;font-size:14px;text-align:left;padding:0 14px}
.ikmenu button.rood{color:var(--crit)}
.gbtabel{width:100%;border-collapse:collapse;font-size:13px}
.gbtabel th{text-align:left;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:8px 10px;border-bottom:1px solid var(--line)}
.gbtabel td{padding:10px;border-bottom:1px solid var(--line);vertical-align:middle}
.gbtabel .klein{margin-right:6px}
.gbtabel select{min-height:40px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--ink);padding:0 8px;font-size:13px}

/* ---------- vault ---------- */
.scanveld{display:flex;gap:8px;align-items:center}
.scanveld input{flex:1;min-height:60px;padding:0 16px;border:2px solid var(--ink);border-radius:12px;background:var(--surface);color:var(--ink);font-family:var(--mono);font-size:17px}
.scanveld input:focus{border-color:var(--green);outline:none;box-shadow:0 0 0 3px rgba(0,215,100,.25)}
/* flits bij een scan (samen met het geluid): groen = geregistreerd, oranje = dubbel/bekend, rood = geen geldige code */
.scanveld input{transition:box-shadow .12s ease,border-color .12s ease,background .12s ease}
.scanveld input.f-ok{border-color:var(--green)!important;box-shadow:0 0 0 5px rgba(0,215,100,.45)!important;background:var(--green-soft)}
.scanveld input.f-let{border-color:var(--warn)!important;box-shadow:0 0 0 5px rgba(178,107,0,.35)!important;background:var(--warn-bg)}
.scanveld input.f-fout{border-color:var(--crit)!important;box-shadow:0 0 0 5px rgba(194,38,31,.4)!important;background:var(--crit-bg)}
.scanlijst{margin:12px 0 0;padding:0;list-style:none;max-height:52vh;overflow:auto;border-top:1px solid var(--line)}
.scanlijst li{display:flex;align-items:center;gap:10px;padding:9px 4px;border-bottom:1px solid var(--line);font-size:12.5px}
.scanlijst .code{font-family:var(--mono);font-size:12px;flex:1;overflow-wrap:anywhere}
.scanlijst .code b{color:var(--p-spoed);font-size:15px}
.scanlijst li.ongeldig .code{color:var(--ink-3);text-decoration:line-through}
.scanlijst .x{min-width:36px;min-height:36px;border-radius:8px;color:var(--ink-3);font-weight:800}
.scanlijst .x:hover{background:var(--ground)}
.stap{margin-bottom:16px}
.tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.tegel{min-height:58px;padding:10px 12px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);font-size:13px;font-weight:700;display:flex;align-items:center;gap:9px;text-align:left;transition:border-color .12s,background .12s,color .12s}
.tegel i{width:11px;height:24px;border-radius:3px;display:block;border:1px solid rgba(11,13,12,.14);flex:none}
.tegel small{font-weight:600;color:var(--ink-3);font-size:11px;margin-left:auto}
.tegel:hover{border-color:var(--ink-3)}
.tegel[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.tegel[aria-pressed="true"] small{color:#B3BBB8}
.tegel.groen[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#03210F}
.tegel.groen[aria-pressed="true"] small{color:#03210F}
.confirm{width:100%;min-height:64px;border-radius:12px;background:var(--green);color:#03210F;font-size:14px;font-weight:800;letter-spacing:.07em;text-transform:uppercase}
.confirm:disabled{background:var(--line);color:var(--ink-3);cursor:not-allowed}
.qtiles{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.qtile{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:10px 12px;text-align:center}
.qtile dt{font-size:10px;font-weight:800;letter-spacing:.12em;color:var(--ink-3);margin:0 0 3px}
.qtile dd{margin:0;font-family:var(--mono);font-size:17px;font-weight:600;font-variant-numeric:tabular-nums}
.qtile dd small{font-size:10px;color:var(--ink-3);font-family:var(--sans)}
.qtile.leeg dd{color:var(--ink-3)}
.veld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.veld label{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.veld input,.veld select,.veld textarea{min-height:54px;padding:0 14px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);color:var(--ink);font-size:16px}
.veld textarea{min-height:64px;padding:12px 14px}
.veld input.getal{font-family:var(--mono);font-size:20px;font-variant-numeric:tabular-nums}
.veld input:focus,.veld select:focus,.veld textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,215,100,.25)}
.velden2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.velden5{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.live{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin-bottom:12px;font-size:13px;display:flex;flex-wrap:wrap;gap:8px 20px}
.live b{font-family:var(--mono);font-size:16px}
.live .slecht b{color:var(--crit)}
.vtabel{width:100%;border-collapse:collapse;font-size:12.5px}
.vtabel th{text-align:right;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:6px 6px;border-bottom:1px solid var(--line)}
.vtabel th:first-child,.vtabel td:first-child{text-align:left}
.vtabel td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums;font-family:var(--mono)}
.vtabel td:first-child{font-family:var(--sans);font-weight:600}
.vtabel tr.klik{cursor:pointer}
.vtabel tr.klik:hover td{background:var(--surface-2)}
.vtabel td.nul{color:var(--ink-3)}
.vtabel td.tekort{color:var(--crit);font-weight:700}
.kwal{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.kwal span{background:var(--ground);border-radius:8px;padding:6px 10px;font-size:12px;font-variant-numeric:tabular-nums}
.kwal span b{font-family:var(--mono);font-weight:600}
.kwal span.leeg{color:var(--ink-3)}
.tabs{display:flex;gap:8px;margin-bottom:14px}
.tabs button{min-height:48px;padding:0 18px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-weight:700;font-size:13px}
.tabs button[aria-pressed="true"]{background:#00D764;border-color:#00D764;color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.samenvatting{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px;margin:14px 0}
.samenvatting div{background:var(--surface-2);border:1px solid var(--line);border-radius:11px;padding:10px 12px}
.samenvatting dt{font-size:10px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0 0 3px}
.samenvatting dd{margin:0;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.samenvatting .rood dd{color:var(--crit)}
.samenvatting .groen dd{color:var(--green-ink)}
.samenvatting .oranje dd{color:var(--warn)}
.knoprij{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.vpkrij{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:12.5px}
.vpkrij .code{font-family:var(--mono);font-size:12px;flex:1;overflow-wrap:anywhere}
.vpkrij .code b{color:var(--p-spoed)}
/* orderlijst: volgnummer rechts, selectiestand */
.orow .volg{font-family:var(--mono);font-size:13px;font-weight:600;color:var(--ink-3);min-width:44px;text-align:right}
.orow .sel{display:grid;place-items:center;min-width:34px}
.orow .sel input{width:26px;height:26px;accent-color:#00D764}
.bulkbalk{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0B0D0C;color:#fff;border-radius:16px;padding:12px 16px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;box-shadow:0 12px 34px rgba(0,0,0,.35);z-index:45;max-width:92vw}
.bulkbalk b{font-size:13px;margin-right:6px;white-space:nowrap}
.bulkbalk .sbtn{min-height:48px;background:#1B201E;border-color:#333B37;color:#fff;font-size:12px;padding:0 12px}
.bulkbalk .sbtn:hover{border-color:#00D764}
.bulkbalk .annuleer{color:#B3BBB8;font-weight:700;min-height:48px;padding:0 12px}
@media (max-width:1100px){.qtiles,.velden5{grid-template-columns:repeat(3,1fr)}}

/* ---------- nieuwe order (bestelzuil) ---------- */
.stappen{display:flex;gap:8px;margin:0 0 18px}
.stappen button{flex:1;min-height:52px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-weight:700;font-size:12.5px;display:flex;align-items:center;justify-content:center;gap:8px;padding:0 14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stappen button[aria-current="step"]{background:#00D764;border-color:#00D764;color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.35)}
.stappen button[aria-current="step"] .nr{background:#fff;color:#007D3B}
.stappen button.klaar{border-color:var(--green);color:var(--green-ink)}
.stappen button:disabled{opacity:.45;cursor:not-allowed}
.stappen .nr{width:24px;height:24px;border-radius:50%;background:var(--green);color:#03210F;display:grid;place-items:center;font-size:12px;flex:none}
.klanttegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.klanttegel{min-height:78px;padding:12px 14px;border:1px solid var(--line-2);border-radius:12px;background:var(--surface);text-align:left;display:flex;flex-direction:column;justify-content:center;gap:4px;transition:border-color .12s,background .12s}
.klanttegel:hover{border-color:var(--ink-3)}
.klanttegel b{font-size:15px}
.klanttegel small{color:var(--ink-3);font-size:11.5px}
.klanttegel.nieuw{border-style:dashed;align-items:center;font-weight:700;color:var(--green-ink)}
.invoerpaar{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:end;margin:8px 0 10px}
.invoerpaar .veld{margin:0}
.invoerpaar .veld input{font-size:28px;min-height:68px;text-align:right}
.invoerpaar input.afgeleid{color:var(--ink-3);font-weight:400;background:var(--surface-2)}
.invoerpaar input.actief{color:var(--ink);font-weight:700}
.invoerpaar .eq{font-size:24px;color:var(--ink-3);padding-bottom:20px}
.bon{position:sticky;top:86px}
.bon .kop{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:10px}
.bonregel{display:grid;grid-template-columns:1fr auto auto 36px;gap:12px;align-items:center;padding:10px 0;border-top:1px dashed var(--line)}
.bonregel .st{font-family:var(--mono);font-size:24px;font-weight:700;text-align:right;min-width:72px;font-variant-numeric:tabular-nums}
.bonregel .vp{font-family:var(--mono);font-size:13px;color:var(--ink-3);text-align:right;min-width:74px;font-variant-numeric:tabular-nums}
.bonregel .x{min-width:36px;min-height:36px;border-radius:8px;color:var(--ink-3);font-weight:800;font-size:18px}
.bonregel .x:hover{background:var(--crit-bg);color:var(--crit)}
.bontotaal{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 0;border-top:2px solid var(--ink);margin-top:8px;font-weight:800}
.bontotaal .st{font-family:var(--mono);font-size:24px;font-variant-numeric:tabular-nums}
.bontotaal .vp{color:var(--ink-3);font-weight:600;font-family:var(--mono);font-size:14px}
.plaats{width:100%;min-height:70px;border-radius:12px;background:var(--green);color:#03210F;font-size:15px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;transition:background .15s,color .15s}
.plaats.rood{background:var(--p-spoed);color:#fff}
.plaats:disabled{background:var(--line);color:var(--ink-3);cursor:not-allowed}
@media (max-width:1100px){.bon{position:static}}
/* nieuwe order: fototegels -> product -> verpakkingen x stuks */
.nwsplit{grid-template-columns:minmax(0,1.45fr) minmax(0,1fr)}
@media (max-width:1100px){.nwsplit{grid-template-columns:1fr}}
.nwflow{padding:18px;animation:nwIn .18s ease}
@keyframes nwIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.nwklant{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 14px;padding:0 0 12px;border-bottom:1px solid var(--line)}
.nwklant .eyebrow{margin:0 0 2px}
.nwklant b{font-size:16px}
.nwkop{display:flex;align-items:center;gap:10px;margin:0 0 12px}
.nwkop .nr{width:26px;height:26px;border-radius:50%;background:var(--green);color:#03210F;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.nwkop h3{margin:0;font-size:15px;font-weight:800}
.nwgroep{margin:16px 0 8px}
.ftegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.ftegels.klein{grid-template-columns:repeat(auto-fill,minmax(122px,1fr))}
.ftegel{padding:0;border:2px solid var(--line-2);border-radius:14px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column;text-align:left;transition:border-color .12s,transform .1s,box-shadow .12s}
.ftegel:hover{border-color:var(--ink-3)}
.ftegel:active{transform:scale(.97)}
.ftegel .foto{display:block;aspect-ratio:1/1;background:#0B0D0C;overflow:hidden}
.ftegel .foto img,.gekozen .foto img{width:100%;height:100%;object-fit:cover;display:block}
.foto.leeg{display:grid;place-items:center;background:linear-gradient(145deg,var(--k,#5B6360),#0B0D0C)}
.foto.leeg b{color:#fff;font-size:30px;font-weight:800;letter-spacing:.04em;opacity:.92}
.foto.leeg.overig{background:linear-gradient(145deg,#8E9A95,#3D4442)}
.ftegels.klein .ftegel .foto{aspect-ratio:2/1}
.ftegels.klein .foto.leeg b{font-size:22px}
.ftegel .naam{padding:9px 10px 10px;font-size:13px;font-weight:800;line-height:1.25;min-height:46px;display:flex;align-items:center}
.gekozen{display:flex;align-items:center;gap:14px;padding:10px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);margin:0 0 16px}
.gekozen .foto{width:68px;height:68px;border-radius:10px;overflow:hidden;flex:none;display:block}
.gekozen .foto.leeg{display:grid}
.gekozen .foto.leeg b{font-size:20px}
.gekozen .wat{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.gekozen .wat small{font-size:10.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.gekozen .wat b{font-size:17px;font-weight:800;line-height:1.2}
.gekozen .wat .var{font-size:13px;font-weight:700;color:var(--green-ink)}
.gekozen .knopjes{display:flex;flex-direction:column;gap:6px;flex:none;align-items:flex-end}
.vtegels{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.vtegel{min-height:76px;padding:10px 14px;border:2px solid var(--line-2);border-radius:12px;background:var(--surface);display:flex;flex-direction:column;justify-content:center;gap:3px;text-align:left;transition:border-color .12s,transform .1s}
.vtegel b{font-size:17px;font-weight:800}
.vtegel small{font-size:11.5px;color:var(--ink-3);font-weight:600}
.vtegel:hover{border-color:var(--ink-3)}
.vtegel:active{transform:scale(.97)}
.aantal{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:start;margin:6px 0 0}
.aantal .veld{margin:0}
.aantal .maal{font-size:26px;color:var(--ink-3);padding-top:38px;font-weight:700}
.stepper{display:grid;grid-template-columns:58px 1fr 58px;border:1px solid var(--line-2);border-radius:11px;overflow:hidden;background:var(--surface)}
.stepper button{min-height:64px;font-size:28px;font-weight:600;background:var(--surface-2);color:var(--ink);line-height:1}
.stepper button:hover{background:var(--ground)}
.stepper input{min-height:64px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;font-family:var(--mono);font-size:30px;font-weight:700;background:var(--surface);color:var(--ink);border-radius:0;width:100%;min-width:0;padding:0}
.stepper input:focus{outline:none;box-shadow:inset 0 0 0 3px rgba(0,215,100,.35)}
.stepper button:focus-visible{outline-offset:-4px;border-radius:8px}
.aantal .veld input.getal{min-height:64px;font-size:30px;text-align:center;font-weight:700;padding:0 10px;width:100%;min-width:0;box-sizing:border-box}
.aantal .hint{font-size:12px;color:var(--ink-3);font-weight:600;min-height:16px;margin-top:5px}
.aantal .hint.afwijkend{color:var(--warn);font-weight:700}
.nwtotaal{display:flex;justify-content:flex-end;align-items:baseline;gap:8px;font-size:15px;color:var(--ink-3);font-weight:700;margin:12px 0 14px}
.nwtotaal b{font-family:var(--mono);font-size:34px;color:var(--ink);font-variant-numeric:tabular-nums}
.nwbalk,.nwbalk-ruimte{display:none}
/* pakbon */
.pbgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px 10px}
.pbpaneel .pbgrid{grid-template-columns:repeat(3,1fr)}
.pbgrid .veld{margin:0}
.pbgrid .veld label{font-size:9.5px;letter-spacing:.1em}
.pbgrid .veld input{min-height:44px;font-size:14px;padding:0 10px}
.pbregels{display:flex;flex-direction:column;gap:6px}
.pbregel{display:grid;grid-template-columns:26px 150px minmax(0,1fr) 64px;gap:8px;align-items:center}
.pbregel .pos{font-size:12px;color:var(--ink-3);font-weight:700;text-align:right}
.pbregel input{min-height:40px;padding:0 10px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--ink);font-size:13px;min-width:0;width:100%}
.pbregel input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,215,100,.25)}
.pbregel .sku{font-family:var(--mono);font-size:12px;text-transform:uppercase}
.pbregel .aant{font-family:var(--mono);font-weight:700;text-align:right;font-size:14px;font-variant-numeric:tabular-nums}
.pbhint{font-size:11.5px;color:var(--ink-3);margin:10px 0 0;line-height:1.5}
.pbkaart .actie.groen{width:100%;justify-content:center;min-height:56px;margin-top:14px;font-size:14px}
.actie svg,.klein svg,.printknop svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-right:6px;flex:none;vertical-align:-3px}

.pbpaneel .lijst{overflow:auto}
.kiezer .pbform .veld label{display:block;padding:0;min-height:0;border:0;cursor:default;gap:0}
.kiezer .pbform .veld label:hover{background:none}
.pbpaneel footer{flex-wrap:wrap}
.vkop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-6px 0 10px}
.vkop .vlegenda{margin:0;flex:1;min-width:0}
.printknop{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:999px;background:var(--green);color:#03210F;font-weight:800;font-size:12.5px;letter-spacing:.04em;box-shadow:0 2px 10px rgba(0,215,100,.35);flex:none;transition:filter .12s,transform .1s}
.printknop:hover{filter:brightness(1.06)}
.printknop:active{transform:scale(.97)}
.printkop{display:none}
@media print{
  body.print-vault{background:#fff;color:#000}
  body.print-vault .rail,body.print-vault .topbar,body.print-vault #subbar,body.print-vault .vkop,body.print-vault .toast,body.print-vault #bulkbalk,body.print-vault #kiezer{display:none!important}
  body.print-vault .app{display:block;min-height:0}
  body.print-vault main,body.print-vault .screen{padding:0}
  body.print-vault .printkop{display:block;font-weight:800;font-size:14px;letter-spacing:.04em;margin:0 0 10px}
  body.print-vault .strip{margin:0 0 10px;break-inside:avoid}
  body.print-vault .card{box-shadow:none;border:1px solid #bbb}
  body.print-vault .vmatrix{font-size:11px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  body.print-vault .vmatrix .chev,body.print-vault tr.vdetail{display:none}
  body.print-vault .vmatrix-wrap{overflow:visible}
  body.print-vault .vmatrix tr{break-inside:avoid}
  @page kluis{size:A4 landscape;margin:12mm}
  body.print-vault #s-vault-overzicht{page:kluis}
}

/* stapovergang in Nieuwe order: kort wegschuiven, dan inschuiven (vooruit van rechts, terug van links) */
#nieuwInhoud{transition:opacity .17s ease,transform .17s ease}
#nieuwInhoud.uit{opacity:0;transform:translateX(-22px)}
#nieuwInhoud.uit.terug{transform:translateX(22px)}
#nieuwInhoud.in{animation:stapIn .4s cubic-bezier(.2,.7,.2,1)}
#nieuwInhoud.in.terug{animation-name:stapInTerug}
@keyframes stapIn{from{opacity:0;transform:translateX(34px)}to{opacity:1;transform:none}}
@keyframes stapInTerug{from{opacity:0;transform:translateX(-34px)}to{opacity:1;transform:none}}
/* bonregels komen na elkaar binnen zodra de bestelbon in beeld komt */
#nieuwInhoud.in .bonregel{animation:bonIn .32s cubic-bezier(.2,.7,.2,1) both;animation-delay:calc(.12s + var(--i,0) * 45ms)}
#nieuwInhoud.in .bontotaal,#nieuwInhoud.in .plaats{animation:bonIn .32s cubic-bezier(.2,.7,.2,1) both;animation-delay:.3s}
@keyframes bonIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* paginawissel: elk scherm schuift kort weg en het volgende schuift in (zelfde effect als de bestelzuil) */
.screen.on{transition:opacity .17s ease,transform .17s ease}
.screen.uit{opacity:0;transform:translateX(-22px)}
.screen.uit.terug{transform:translateX(22px)}
.screen.in{animation:stapIn .4s cubic-bezier(.2,.7,.2,1)}
.screen.in.terug{animation-name:stapInTerug}

/* ---------- opstartanimatie: vier seconden, met het echte logo ---------- */
/* Het logo bestaat uit uitsnedes van het originele logobestand (static/logo/*.png), geplaatst op hun exacte positie
   in een vak van 368x103 (de maat van het origineel). 0-2 s: lichtplaat, LEG en CY schuiven scherp in, de driehoek draait
   in en flitst groen, BRANDS zet zich, een lichtstreep loopt over het logo (gemaskerd met het logo), deeltjes zweven op.
   2-3,4 s: de holle driehoek van het logo (svg .sp-groei op exact dezelfde plek als het plaatje) sluit zijn gat en groeit vanuit zijn
   zwaartepunt tot het hele scherm groen is (schaal --k uit app.js); de letters vervagen ondertussen.
   3,3-4 s: alles vervaagt (.uit); app.js ruimt op bij 4000 ms. Animaties starten pas als de delen geladen zijn (#splash.klaar). */
#splash{position:fixed;inset:0;z-index:100;background:#fff;overflow:hidden;pointer-events:none;transition:opacity .7s ease;animation:spNood 0s linear 4.6s forwards}
#splash.uit{opacity:0}
@keyframes spNood{to{visibility:hidden;opacity:0}} /* vangnet: ook zonder JavaScript verdwijnt het overlay na 4,6 s */
.sp-plaat{position:absolute;inset:-4%;background:center/cover no-repeat;opacity:0;filter:blur(6px)}
.sp-logo{position:absolute;left:50%;top:50%;width:clamp(320px,46vw,760px);aspect-ratio:368/103;transform:translate(-50%,-50%)}
.sp-deel{position:absolute;display:block;height:auto;opacity:0}
.sp-leg{left:8.438%;top:20.49%;width:39.688%}
.sp-tri{left:47.562%;top:19.376%;width:16%;transform-origin:50% 62%}
.sp-cy{left:63.562%;top:20.49%;width:28%}
.sp-brands{left:8.438%;top:75.724%;width:57.312%;transform-origin:0 50%}
.sp-gloed{position:absolute;left:55.6%;top:40%;width:46%;aspect-ratio:1;border-radius:50%;transform:translate(-50%,-50%) scale(.6);opacity:0;background:radial-gradient(circle,rgba(0,215,100,.40) 0%,rgba(0,215,100,.15) 40%,rgba(0,215,100,0) 70%)}
.sp-glans{position:absolute;inset:0;opacity:0;-webkit-mask:url(/static/logo/logo.png?v=4c9c86c248d0) center/100% 100% no-repeat;mask:url(/static/logo/logo.png?v=4c9c86c248d0) center/100% 100% no-repeat;background:linear-gradient(105deg,rgba(255,255,255,0) 40%,rgba(255,255,255,.96) 50%,rgba(255,255,255,0) 60%) no-repeat;background-size:55% 100%;background-position:-70% 0}
.sp-deeltjes{position:absolute;inset:0}
.sp-deeltje{position:absolute;opacity:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 21'%3E%3Cpath d='M12 1.5 23 19.5H1z M12 7.6 6.8 16.3h10.4z' fill='%2300D764' fill-rule='evenodd'/%3E%3C/svg%3E") center/contain no-repeat;will-change:transform,opacity}
/* groei: dezelfde holle driehoek als in het logo (svg op exact hetzelfde vak als .sp-tri); eerst sluit het gat, dan
   schaalt de driehoek vanuit zijn zwaartepunt op tot voorbij de verste hoek van het scherm (--k uit app.js) */
.sp-groei{position:absolute;left:47.562%;top:19.376%;width:16%;aspect-ratio:256/183;overflow:visible;visibility:hidden;transform-origin:50.28% 65.05%;will-change:transform}
.sp-groei .sp-g-buiten{fill:var(--green)}
.sp-groei .sp-g-binnen{fill:#fff;transform-box:fill-box;transform-origin:50% 60%}
.sp-groei.groei{visibility:visible;animation:spGroei 1.15s cubic-bezier(.55,0,.8,.25) .3s both}
.sp-groei.groei .sp-g-binnen{animation:spGat .4s cubic-bezier(.4,0,.8,.4) both}
@keyframes spGroei{from{transform:scale(1)}to{transform:scale(var(--k,40))}}
@keyframes spGat{from{transform:scale(1)}to{transform:scale(0)}}
#splash.groeit .sp-leg,#splash.groeit .sp-cy,#splash.groeit .sp-brands,#splash.groeit .sp-gloed,#splash.groeit .sp-glans,#splash.groeit .sp-deeltjes{transition:opacity .5s ease .35s;opacity:0!important}
#splash.klaar .sp-plaat{animation:spPlaat 1.8s ease-out .3s both}
#splash.klaar .sp-leg{animation:spLinks .7s cubic-bezier(.2,.7,.2,1) .05s both}
#splash.klaar .sp-cy{animation:spRechts .7s cubic-bezier(.2,.7,.2,1) .15s both}
#splash.klaar .sp-tri{animation:spTri .6s cubic-bezier(.2,.9,.3,1.25) .25s both,spFlits .9s ease-out .85s both}
#splash.klaar .sp-brands{animation:spBrands .6s cubic-bezier(.2,.7,.2,1) .95s both}
#splash.klaar .sp-gloed{animation:spGloed 1.6s ease-in-out .5s both}
#splash.klaar .sp-glans{animation:spGlans 1s cubic-bezier(.4,0,.2,1) 1.15s both}
#splash.klaar .sp-deeltje{animation:spDeeltje var(--d,1.4s) ease-out var(--v,.5s) both}
@keyframes spPlaat{from{opacity:0;transform:scale(1.08)}to{opacity:1;transform:none}}
@keyframes spLinks{from{opacity:0;transform:translateX(-9%);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes spRechts{from{opacity:0;transform:translateX(9%);filter:blur(10px)}to{opacity:1;transform:none;filter:blur(0)}}
@keyframes spTri{from{opacity:0;transform:scale(.15) rotate(-28deg)}to{opacity:1;transform:none}}
@keyframes spFlits{0%{filter:drop-shadow(0 0 0 rgba(0,215,100,0))}35%{filter:drop-shadow(0 0 16px rgba(0,215,100,.95))}100%{filter:drop-shadow(0 0 5px rgba(0,215,100,.35))}}
@keyframes spBrands{from{opacity:0;transform:scaleX(1.18) translateY(4px)}to{opacity:1;transform:none}}
@keyframes spGloed{0%{opacity:0;transform:translate(-50%,-50%) scale(.6)}45%{opacity:.9;transform:translate(-50%,-50%) scale(1.05)}100%{opacity:.55;transform:translate(-50%,-50%) scale(1)}}
@keyframes spGlans{from{opacity:1;background-position:-70% 0}to{opacity:1;background-position:170% 0}}
@keyframes spDeeltje{0%{opacity:0;transform:translate(0,0) scale(.4) rotate(0)}20%{opacity:.9}100%{opacity:0;transform:translate(var(--dx),var(--dy)) scale(1) rotate(var(--rot))}}
@media (prefers-reduced-motion:reduce){#splash{display:none}}

/* ---------- vault-overzicht: compacte matrix (strain x variant), strain uitklapbaar ---------- */
.vlegenda{font-size:12px;color:var(--ink-3);margin:-6px 0 10px;line-height:1.5}
.vmatrix-wrap{overflow-x:auto}
.vmatrix{width:100%;border-collapse:collapse;font-size:13px}
.vmatrix th{font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);padding:10px 12px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap}
.vmatrix th.l{text-align:left}
.vmatrix td{padding:9px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.vmatrix .vstrain{cursor:pointer;min-width:200px}
.vmatrix .vs{display:flex;align-items:center;gap:10px}
.vmatrix .vsn{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.vmatrix .vsn b{font-size:13.5px;font-weight:800;letter-spacing:.02em}
.vmatrix .chev{margin-left:auto;color:var(--ink-3);font-size:20px;line-height:1;padding:0 4px;transition:transform .2s ease}
.vmatrix tr[aria-expanded="true"] .chev{transform:rotate(90deg)}
.vmatrix .vflower{white-space:nowrap}
.vmatrix .vflower b{font-family:var(--mono);font-weight:600;font-size:13px}
.vmatrix td small{display:block;font-size:11px;color:var(--ink-3);line-height:1.35;white-space:nowrap}
.vmatrix .vcel{text-align:center;min-width:92px;font-variant-numeric:tabular-nums}
.vmatrix .vcel b{font-family:var(--mono);font-size:16px;font-weight:600}
.vmatrix .vcel b.nul{color:var(--ink-3)}
.vmatrix .vcel.leeg b{opacity:.35}
.vmatrix .vcel.klik{cursor:pointer}
.vmatrix .vcel.klik:hover{background:var(--surface-2)}
.vmatrix .vcel.tekort{background:var(--crit-bg)}
.vmatrix .vcel small.kort{color:var(--crit);font-weight:700}
.vmatrix .vcel small.res{color:var(--info)}
.vmatrix .vcel small.mis{color:var(--warn)}
.vmatrix tr.vdetail>td{padding:0;background:var(--surface-2)}
.vkaart{padding:12px 16px 14px;animation:bonIn .25s ease}

/* ---------- picklist: één tabel, groot en direct leesbaar ---------- */
.ptabel-wrap{overflow-x:auto}
.ptabel{width:100%;border-collapse:collapse;font-size:14px}
.ptabel th{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);padding:10px 14px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.ptabel th.l{text-align:left}
.ptabel td{padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:middle}
.ptabel tr.pstrain td{background:var(--surface-2);padding:8px 14px}
.ptabel tr.pstrain .swatch{display:inline-block;vertical-align:middle;height:22px}
.ptabel tr.pstrain b{font-size:14px;font-weight:800;letter-spacing:.02em;vertical-align:middle;margin-left:10px}
.ptabel .ptot{float:right;font-family:var(--mono);font-weight:600;font-size:13px;color:var(--ink-2);line-height:22px}
.ptabel tr.prij td:first-child{box-shadow:inset 5px 0 0 transparent}
.ptabel tr.prij.p-prioriteit td:first-child{box-shadow:inset 5px 0 0 var(--p-prio-vol)}
.ptabel tr.prij.p-spoed td:first-child{box-shadow:inset 5px 0 0 var(--p-spoed-vol)}
.ptabel .pvar{white-space:nowrap;padding-left:24px;min-width:180px}
.ptabel .pvar b{font-size:16px;font-weight:700}
.ptabel .pvar .pill{margin-left:6px;vertical-align:2px}
.ptabel .pvpk{text-align:right;white-space:nowrap;width:120px}
.ptabel .pvpk b{font-family:var(--mono);font-size:26px;font-weight:700;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ptabel .pvpk small{margin-left:5px;font-size:11px;font-weight:700;color:var(--ink-3);letter-spacing:.08em;text-transform:uppercase}
.ptabel .pst{text-align:right;white-space:nowrap;font-family:var(--mono);font-size:13.5px;color:var(--ink-2);width:110px;font-variant-numeric:tabular-nums}
.pchips{display:flex;flex-wrap:wrap;gap:6px}
.pchip{display:inline-flex;align-items:center;gap:7px;background:var(--ground);border-radius:999px;padding:6px 12px;font-size:13px;font-weight:600;color:var(--ink-2);white-space:nowrap}
.pchip b{font-family:var(--mono);font-weight:700;font-size:13.5px}
.pchip.p-prioriteit{background:var(--p-prio-vol);color:var(--p-prio-op)}
.pchip.p-spoed{background:var(--p-spoed-vol);color:var(--p-spoed-op)}

/* ---------- scan: toevoegen / verwijderen (schuifknop), correcties, matrix 6 kolommen ---------- */
.scanmodus{display:inline-flex;border:2px solid var(--ink);border-radius:999px;padding:3px;gap:3px;margin-bottom:10px;background:var(--surface)}
.scanmodus button{min-height:38px;padding:0 18px;border-radius:999px;font-size:12.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2);background:transparent;transition:background .15s,color .15s}
.scanmodus button[aria-pressed="true"]{background:var(--ink);color:#fff}
.scanmodus button[data-modus="remove"][aria-pressed="true"]{background:var(--crit);color:#fff}
.confirm.rood{background:var(--crit);border-color:var(--crit);color:#fff}
.confirm.rood:disabled{opacity:.45}
.vmatrix .vcel.nvt{color:var(--ink-3);opacity:.35}
.vmatrix .vsn small.gen{display:block;width:100%;font-size:11px;color:var(--ink-3);font-weight:600}

/* ---------- scan: de scanlijst (links) blijft in beeld en scrolt mee; lange lijsten scrollen binnen het vak ---------- */
#scanLinks{position:sticky;top:88px;align-self:start;max-height:calc(100vh - 104px);overflow-y:auto;overscroll-behavior:contain}

/* ---------- UX-ronde 11-09-2026: leesbaarheid op een touchscreen ---------- */
body{font-size:15px}
.pill{font-size:12px;padding:4px 10px}
.subbtn{min-height:44px;font-size:10.5px}
.systeem{font-size:13px}
.systeem .chip{font-size:13px;padding:7px 12px}
.systeem .chip.grijs{background:transparent;padding:7px 4px;font-weight:600}
.systeem .chip.oranje{background:var(--warn);color:#fff}
.systeem .chip.rood{background:var(--crit);color:#fff}
/* orderlijst: minder pillen, hoeveelheid groot rechts, lagere rijen */
.orow{min-height:72px;padding:10px 16px 10px 18px;gap:12px}
.orow .cust b{font-size:15px}
.orow .cust small{font-size:12.5px}
.orow .badges{max-width:34%}
.orow .hoev{text-align:right;min-width:96px;white-space:nowrap;line-height:1.15}
.orow .hoev b{display:block;font-family:var(--mono);font-size:19px;font-weight:700;font-variant-numeric:tabular-nums}
.orow .hoev b small{font-family:var(--sans);font-size:10.5px;font-weight:700;color:var(--ink-3);letter-spacing:.06em;text-transform:uppercase}
.orow .hoev>small{display:block;font-size:12px;color:var(--ink-3);font-variant-numeric:tabular-nums}
.orow .volg{font-size:14px}
/* scan: compacte tegels, stap 2 en 3 naast elkaar, Confirm blijft onderaan in beeld */
#scanRechts .tegels{grid-template-columns:repeat(4,1fr);gap:6px}
#scanRechts .tegel{min-height:48px;padding:6px 10px;font-size:12.5px;gap:8px}
#scanRechts .tegel i{width:9px;height:18px}
#scanRechts .tegel small{font-size:10.5px}
#scanRechts .stap{margin-bottom:10px}
#scanRechts .twee{display:grid;grid-template-columns:1fr 1fr;gap:12px}
#scanRechts .twee .tegels{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
#scanRechts .tegel.groen small,#scanRechts [data-vs] small{display:none}
#scanRechts .confirm,#scanRechts .confirm.rood{position:sticky;bottom:10px;box-shadow:0 8px 24px rgba(0,0,0,.18)}
@media (max-width:1100px){#scanRechts .tegels{grid-template-columns:repeat(3,1fr)}#scanRechts .twee{grid-template-columns:1fr}}
/* overzicht: stiller */
.vmatrix .vcel b.nul{color:var(--ink-3);opacity:.5}
.vmatrix .vcel.tekort{box-shadow:inset 3px 0 0 var(--crit)}
.vlegenda{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:help}
.info-i{display:inline-grid;place-items:center;width:16px;height:16px;border-radius:50%;border:1px solid var(--ink-3);font-size:10px;font-weight:800;font-style:italic;color:var(--ink-3);vertical-align:1px}
/* splash: korte versie (na de eerste keer per sessie) */
#splash.kort .sp-plaat,#splash.kort .sp-gloed,#splash.kort .sp-glans,#splash.kort .sp-deeltjes{display:none}
#splash.kort.klaar .sp-leg,#splash.kort.klaar .sp-cy,#splash.kort.klaar .sp-tri,#splash.kort.klaar .sp-brands{animation-duration:.35s;animation-delay:.05s}
#splash.kort{transition-duration:.35s}

/* ---------- telefoon (≤ 760 px): onderbalk, submenu-chips, één kolom, lijst/detail als twee schermen ---------- */
#subbar{display:none}
.mob-terug{display:none}
@media (max-width:760px){
  .app{display:block;min-height:100vh}
  main{padding-bottom:calc(var(--balk-h, calc(66px + env(safe-area-inset-bottom))) + 12px)}
  /* hoofdmenu onderin */
  .rail{position:fixed;left:0;right:0;bottom:0;top:auto;height:auto;flex-direction:row;justify-content:space-around;align-items:stretch;gap:2px;padding:6px calc(6px + env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) calc(6px + env(safe-area-inset-left));z-index:30;overflow:visible;border-top:1px solid #1F2523}
  .rail .mark{display:none}
  .navbtn{flex:1;min-height:54px;padding:6px 2px;gap:4px;border-radius:10px}
  .navbtn svg{width:22px;height:22px}
  .navbtn span{font-size:11px;letter-spacing:.04em}
  .navbtn[aria-current="page"]::before{display:none}
  .navbtn .tel{top:2px;right:10px}
  .rail .subnav{display:none}
  /* submenu als chips onder de kop */
  #subbar{display:block;position:sticky;top:57px;z-index:4;background:var(--ground);padding:8px 12px 0}
  #subbar .subnav{display:none;flex-direction:row;gap:6px;max-height:none;opacity:1;transform:none;overflow-x:auto;padding:0 0 8px;border:0;margin:0;scrollbar-width:none}
  #subbar .subnav::-webkit-scrollbar{display:none}
  #subbar .subnav.open{display:flex}
  #subbar .subbtn{flex:none;min-height:40px;padding:0 14px;border-radius:999px;background:var(--surface);border:1px solid var(--line-2);color:var(--ink-2);font-size:11px;white-space:nowrap;transform:none;opacity:1;animation:none}
  #subbar .subbtn[aria-current="page"]{background:#00D764;border-color:#00D764;color:#fff;font-weight:800;text-shadow:0 1px 2px rgba(0,0,0,.35)}
  /* kop */
  .topbar{padding:8px 12px;gap:8px;flex-wrap:nowrap;min-height:57px}
  .wordmark .row{font-size:18px}
  .wordmark .tri{width:14px;height:14px}
  .wordmark .sub{display:none}
  .crumb{display:none}
  .systeem{flex:1;gap:4px;justify-content:flex-end}
  .systeem .chip{font-size:11px;padding:5px 8px}
  .systeem .chip.grijs{display:none}
  .taal{min-width:44px;min-height:44px;padding:0 10px;font-size:11px}
  .taal.ik{max-width:96px;font-size:11px}
  .screen{padding:10px 12px 24px}
  /* filters: zoekveld + Selecteren op de eerste rij, de drie submenu's eronder over de volle breedte */
  .filters{gap:6px;padding-bottom:2px}
  .filters .zoek{flex:1 1 200px;font-size:16px;min-width:0}
  .fbtn{white-space:nowrap;flex:none}
  #filters .fmenus{flex:1 1 100%;order:3}
  #filters #selectKnop{order:2}
  /* lijst en detail: één kolom; detail als tweede scherm */
  .split{grid-template-columns:1fr;gap:12px}
  .detail{position:static;max-height:none}
  .split .detail{display:none}
  .split.mob-detail .list,.split.mob-detail #batchLinks{display:none}
  .split.mob-detail .detail{display:block}
  .mob-terug{display:inline-flex;align-items:center;min-height:44px;margin:0 0 10px;padding:0 14px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-weight:700;font-size:13px}
  .orow{padding:10px 12px 10px 14px;gap:8px}
  .orow .badges{max-width:40%}
  .orow .hoev{min-width:76px}
  .orow .hoev b{font-size:17px}

  /* scan */
  #scanLinks{position:static;max-height:none;overflow:visible}
  #scanRechts .tegels{grid-template-columns:repeat(2,1fr)}
  #scanRechts .twee{grid-template-columns:1fr}
  #scanRechts .confirm,#scanRechts .confirm.rood{bottom:calc(var(--balk-h, calc(66px + env(safe-area-inset-bottom))) + 18px)}
  .scanveld input{font-size:16px}
  /* tabellen en tegels */
  .strip>div{flex:1 1 40%;padding:10px 12px}
  .strip dd{font-size:19px}
  .vmatrix .vstrain{min-width:150px}
  .tegels{grid-template-columns:repeat(2,1fr)}
  .velden5{grid-template-columns:repeat(3,1fr)}
  .klanttegels{grid-template-columns:1fr 1fr}
  .stappen button{font-size:11px;padding:0 8px;min-height:44px}
  /* filtermenu's als onderste paneel */
  .fmenus{flex-wrap:nowrap;gap:6px}
  .fmenu{flex:1 1 0;min-width:0}
  .fmknop{min-width:0;width:100%;min-height:46px;padding:0 24px 0 10px}
  .fmknop b{overflow:hidden;text-overflow:ellipsis;max-width:100%}
  .fmknop small{font-size:9px}
  .fmknop b{font-size:12px}
  .fmknop i{right:11px}
  .fmenu.open::before{content:'';position:fixed;inset:0;background:rgba(11,13,12,.38);z-index:19}
  .fmlijst{position:fixed;left:8px;right:8px;top:auto;bottom:calc(var(--balk-h, calc(66px + env(safe-area-inset-bottom))) + 18px);max-height:60vh;overflow:auto;animation:none;z-index:46}
  .fmenu.open .fmlijst{animation:fmUp .18s ease}
  @keyframes fmUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
  .fitem{min-height:52px}
  /* nieuwe order op de telefoon */
  .nwsplit{grid-template-columns:1fr}
  .nwflow{padding:14px}
  .ftegels{grid-template-columns:repeat(3,1fr);gap:8px}
  .ftegels.klein{grid-template-columns:repeat(2,1fr)}
  .ftegel .naam{font-size:11.5px;padding:7px 8px;min-height:40px}
  .foto.leeg b{font-size:22px}
  .gekozen{gap:10px}
  .gekozen .foto{width:56px;height:56px}
  .gekozen .foto.leeg b{font-size:16px;letter-spacing:0}
  .gekozen .wat b{font-size:15px}
  .gekozen .knopjes .klein{padding:0 10px;font-size:11px}
  .vtegels{grid-template-columns:repeat(2,1fr);gap:8px}
  .aantal{grid-template-columns:1fr;gap:10px}
  .aantal .maal{display:none}
  .nwbalk{display:flex;position:fixed;left:8px;right:8px;bottom:calc(var(--balk-h, calc(66px + env(safe-area-inset-bottom))) + 18px);z-index:25;background:#0B0D0C;color:#fff;border-radius:14px;padding:10px 10px 10px 16px;align-items:center;gap:10px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  body.met-balk .toast{bottom:calc(var(--balk-h, calc(66px + env(safe-area-inset-bottom))) + 94px)}
  .nwbalk span{flex:1;font-size:12.5px;font-weight:700;line-height:1.3}
  .nwbalk span b{font-family:var(--mono);font-size:16px}
  .nwbalk button{min-height:44px;padding:0 14px;border-radius:10px;background:var(--green);color:#03210F;font-weight:800;font-size:12.5px;white-space:nowrap}
  .nwbalk-ruimte{display:block;height:76px}
  .pbgrid,.pbpaneel .pbgrid{grid-template-columns:1fr 1fr}
  .pbgrid .veld input,.pbregel input{font-size:16px}
  .pbregel{grid-template-columns:22px minmax(0,1fr) 56px;grid-template-areas:"pos sku aantal" "x oms oms"}
  .pbregel .pos{grid-area:pos}.pbregel .sku{grid-area:sku}.pbregel .oms{grid-area:oms}.pbregel .aant{grid-area:aantal}
  .vkop{flex-wrap:wrap}
  .invoerpaar .veld input{font-size:22px;min-height:56px}
  .bon{position:static}
  input,select,textarea{font-size:16px}
  /* zwevende elementen boven de onderbalk */
  .toast{bottom:calc(var(--balk-h, calc(66px + env(safe-area-inset-bottom))) + 22px);max-width:calc(100% - 24px)}
  .bulkbalk{bottom:calc(var(--balk-h, calc(66px + env(safe-area-inset-bottom))) + 18px);width:calc(100% - 16px);justify-content:center}
  .kiezer{padding:8px}
  .kiezer .paneel{max-height:calc(100vh - var(--balk-h, calc(66px + env(safe-area-inset-bottom))) - 44px)}
  .sp-logo{width:min(86vw,320px)}
}

@media (max-width:760px){
  #subbar{top:var(--kophoogte,57px)}
  .systeem{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;justify-content:flex-start}
  .systeem::-webkit-scrollbar{display:none}
  .systeem .chip{flex:none}
  .orow .volg{display:none}
  .orow .hoev{min-width:68px}
  .orow .badges{max-width:36%}
  .orow .cust b{font-size:14px}
  .stappen{gap:6px}
  .stappen button{min-width:0;padding:0 8px;gap:6px}
  .stappen button:not([aria-current="step"]){flex:0 0 auto}
}
@media (max-width:760px){.stappen button:not([aria-current="step"]) .lbl{display:none}.stappen button[aria-current="step"] .lbl{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}

/* ---------- Packing & Processing (14-09-2026): inpakken per persoon, dag afronden, recall-rapport ---------- */
.navbtn span{text-align:center;line-height:1.2}

.ip-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin:0 0 14px}
.ip-kop h3{margin:0;font-size:22px;font-weight:800;letter-spacing:.01em}
.ip-kop .ip-sam{margin:0;flex:1 1 360px;grid-template-columns:repeat(4,minmax(96px,1fr))}
.ip-sam dd{font-size:22px}
.ip-hint{font-size:12.5px;color:var(--ink-3);margin:10px 0 0;line-height:1.5}
.ip-melding{margin-top:14px;padding:18px}
.ip-melding b{display:block;font-size:16px;margin-bottom:6px}
.ip-melding p{margin:0 0 12px;color:var(--ink-2);line-height:1.5}
.ip-groep{margin-top:18px;padding-top:14px;border-top:1px solid var(--line)}
.ip-groepkop{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.ip-groepkop .eyebrow{margin:0}
.ip-afronden{min-height:52px;font-size:14px;box-shadow:0 6px 18px rgba(0,215,100,.3)}
.ip-lijst{max-height:46vh;overflow:auto;border-top:1px solid var(--line)}
.ip-rij{gap:12px}
.ip-rij .code{flex:0 1 auto;min-width:150px}
.ip-rij .ip-prod{flex:1;font-weight:700;display:flex;align-items:center;gap:8px;min-width:0}
.ip-rij .ip-prod small{font-weight:600;color:var(--ink-3)}
.ip-rij .ip-tijd{font-family:var(--mono);color:var(--ink-3);font-size:12px}
.swatch.i,.ip-tabel .swatch,.ip-prod .swatch{display:inline-block;width:10px;height:20px;vertical-align:middle;margin-right:6px}
.ip-tabel{margin-top:6px}
.ip-tabel td small{color:var(--ink-3);font-weight:600;margin-left:4px}
.ip-tabel td b{font-family:var(--mono);font-size:15px}
.ip-persoon{border:1px solid var(--line);border-radius:12px;margin:8px 0;background:var(--surface-2)}
.ip-persoon summary{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 14px;cursor:pointer;list-style:none;min-height:52px}
.ip-persoon summary::-webkit-details-marker{display:none}
.ip-persoon summary::before{content:'›';font-size:20px;color:var(--ink-3);transition:transform .2s;line-height:1}
.ip-persoon[open] summary::before{transform:rotate(90deg)}
.ip-persoon summary b{font-size:14.5px;flex:1}
.ip-persoon-inhoud{padding:0 14px 14px}
.ip-persoon-inhoud .ip-lijst{max-height:32vh;background:var(--surface);border-radius:8px;padding:0 10px}
.ip-onbekend{margin-top:14px;border-color:var(--warn);background:var(--warn-bg)}
.ip-onbekend h4{color:var(--warn)}
.ip-onbekend .scanlijst li{border-bottom-color:rgba(0,0,0,.08)}
.ip-tegels{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.ip-tegels .tegel{min-height:46px;padding:6px 10px;font-size:12.5px;gap:8px}
.ip-onbekend .confirm{margin-top:4px}
.ip-filters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr)) auto;gap:10px;align-items:end;margin-bottom:14px}
.ip-filters .veld{margin:0}
.ip-filters .veld input,.ip-filters .veld select{min-height:48px;font-size:14px;padding:0 10px}
.ip-filters .ip-zoek{grid-column:span 2}
.ip-filters .actie{min-height:48px}
.ip-rkop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap}
.ip-rkop .ip-sam{flex:1 1 360px;margin:0 0 10px}
.ip-rknoppen{margin:0;align-items:center}
.ip-rgrid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}
.ip-rwrap{overflow-x:auto}
.ip-rtabel{min-width:860px}
.ip-rtabel td.mono{font-size:12px}
@media (max-width:1100px){.ip-filters{grid-template-columns:repeat(3,minmax(0,1fr))}.ip-filters .ip-zoek{grid-column:span 2}.ip-rgrid{grid-template-columns:1fr}}
@media (max-width:760px){
  .ip-kop .ip-sam{grid-template-columns:repeat(2,1fr)}
  .ip-sam dd{font-size:19px}
  .ip-afronden-vast{position:fixed;left:8px;right:8px;bottom:calc(var(--balk-h, calc(66px + env(safe-area-inset-bottom))) + 18px);z-index:25;justify-content:center;box-shadow:0 10px 30px rgba(0,0,0,.35)}
  body.met-afronden .toast{bottom:calc(var(--balk-h, calc(66px + env(safe-area-inset-bottom))) + 84px)}
  .ip-rij{flex-wrap:wrap}
  .ip-rij .code{flex:1 1 100%;min-width:0}
  .ip-filters{grid-template-columns:1fr 1fr}
  .ip-filters .ip-zoek,.ip-filters .actie{grid-column:span 2}
  .ip-tegels{grid-template-columns:repeat(2,1fr)}
  .ip-lijst{max-height:none}
}
@media print{
  body.print-inpak{background:#fff;color:#000}
  body.print-inpak .rail,body.print-inpak .topbar,body.print-inpak #subbar,body.print-inpak #ihTabs,body.print-inpak #ihOverzicht,body.print-inpak .ip-filters,body.print-inpak .ip-rknoppen,body.print-inpak .toast,body.print-inpak #bulkbalk,body.print-inpak #kiezer{display:none!important}
  body.print-inpak .app{display:block;min-height:0}
  body.print-inpak main,body.print-inpak .screen{padding:0}
  body.print-inpak .printkop{display:block;font-weight:800;font-size:14px;letter-spacing:.04em;margin:0 0 10px}
  body.print-inpak .card{box-shadow:none;border:0;padding:0!important}
  body.print-inpak .ip-rwrap{overflow:visible}
  body.print-inpak .ip-rtabel{min-width:0;font-size:10.5px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  body.print-inpak .ip-rtabel tr{break-inside:avoid}
  body.print-inpak .ip-rgrid{grid-template-columns:1fr 1fr;break-inside:avoid}
  body.print-inpak .code b{color:#000}
  @page inpak{size:A4 landscape;margin:12mm}
  body.print-inpak #s-inpak-historie{page:inpak}
}

/* ---------- T&T-koppeling (14-09-2026) ---------- */
.ttrij{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;padding:10px 12px;border:1px dashed var(--line-2);border-radius:11px;background:var(--surface-2)}
.ttknop{border-color:var(--ink);font-weight:800;min-height:44px}
.ip-tt .pill{margin-top:4px}
.bulkbalk .sbtn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;margin-right:6px;flex:none}
.bulkbalk .sbtn.groen{background:var(--green);border-color:var(--green);color:#03210F;display:inline-flex;align-items:center;font-weight:800}

/* ---------- camera-scannen (telefoon, https) ---------- */
.scanveld .camknop{flex:none;width:60px;min-height:60px;border:2px solid var(--ink);border-radius:12px;background:var(--surface);display:grid;place-items:center;color:var(--ink);padding:0}
.scanveld .camknop svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scanveld .camknop:active{background:var(--green-soft)}
#camOverlay{position:fixed;inset:0;z-index:95;background:#0B0D0C;color:#fff;display:flex;flex-direction:column}
.cam-kop{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;padding-top:calc(12px + env(safe-area-inset-top))}
.cam-kop b{font-size:15px;letter-spacing:.04em}
.cam-sluit{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #3D4442;color:#fff;font-weight:700}
.cam-beeld{position:relative;flex:1;overflow:hidden;background:#000}
.cam-beeld video{width:100%;height:100%;object-fit:cover;display:block}
.cam-kader{position:absolute;left:50%;top:50%;width:min(70vw,320px);aspect-ratio:1;transform:translate(-50%,-50%);border:3px solid rgba(255,255,255,.85);border-radius:18px;box-shadow:0 0 0 100vmax rgba(0,0,0,.35);pointer-events:none}
.cam-kader.flits{animation:camFlits .4s ease}
@keyframes camFlits{0%{border-color:#00D764;box-shadow:0 0 0 100vmax rgba(0,215,100,.35)}100%{border-color:rgba(255,255,255,.85);box-shadow:0 0 0 100vmax rgba(0,0,0,.35)}}
.cam-status{padding:14px 16px;padding-bottom:calc(14px + env(safe-area-inset-bottom));text-align:center;font-family:var(--mono);font-size:14px;color:#B3BBB8;min-height:48px;overflow-wrap:anywhere}

.tt-melding{flex-basis:100%;font-size:12px;color:var(--ink-3);font-weight:600}
.ip-tt .ttrij{margin-top:8px}

/* ---------- camera: foto-variant (http), lamp, tip, teller ---------- */
.camfoto{display:none}
.cam-voet{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;padding-bottom:calc(12px + env(safe-area-inset-bottom));min-height:56px}
.cam-voet .cam-status{padding:0;flex:1;text-align:left;min-height:0}
.cam-lamp{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid #3D4442;color:#fff;font-weight:700;flex:none}
.cam-lamp[aria-pressed="true"]{background:#00D764;border-color:#00D764;color:#03210F}
.cam-tip{position:absolute;left:0;right:0;bottom:14px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.85);padding:0 16px;pointer-events:none;text-shadow:0 1px 2px rgba(0,0,0,.6)}
.cam-sluit{background:#00D764;border-color:#00D764;color:#03210F}

.scanveld{flex-wrap:wrap}
.scanveld .camlive{flex-basis:100%;font-size:12px;color:var(--green-ink);font-weight:700;text-decoration:underline;padding-top:2px}

/* ---------- scanlijst netjes (14-09): code op één regel, daaronder status en knoppen; kaarten nooit breder dan het scherm ---------- */
.split>*,.card{min-width:0}
.scanveld input{min-width:0}
.scanlijst li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"code x" "info info";align-items:center;gap:4px 8px;padding:10px 2px 10px 6px}
.scanlijst .code{grid-area:code;flex:none;font-family:var(--mono);font-size:12.5px;white-space:nowrap;overflow:hidden;min-width:0;letter-spacing:-.01em}
.scanlijst .x{grid-area:x;justify-self:end}
.scanlijst .info{grid-area:info;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.scanlijst .info:empty{display:none}
.scanlijst .info .pill{white-space:normal;line-height:1.3;padding:4px 10px}
.scanlijst .info .klein{min-height:36px}
@media (max-width:760px){
  .scanlijst .code{font-size:11.5px}
  .vpkrij{flex-wrap:wrap}
  .vpkrij .code{flex:1 1 100%}
}
@media (max-width:760px){
  .scanlijst li{grid-template-areas:"code code" "info x";gap:6px 8px}   /* code op de volle breedte; × naast de status */
  .scanlijst .code b{font-size:14px}
  .scanlijst .x{align-self:center}
}

/* ---------- kluismatrix: de koptekst (strain · varianten) blijft staan bij scrollen (Levi, 15-09-2026) ----------
   Past de tabel in de kaart (.past, gemeten in pasMatrix), dan scrolt de pagina en plakt de kop onder de bovenbalk.
   Is de tabel breder (telefoon, smal venster), dan scrolt de tabel in de kaart en blijven kop én strain-kolom staan. */
.vmatrix thead th{position:sticky;top:var(--kophoogte,70px);z-index:3;background:var(--surface);border-bottom:0;box-shadow:inset 0 -1px 0 var(--line)}
.vmatrix-wrap.past{overflow:visible}
.vmatrix-wrap:not(.past){max-height:calc(100vh - var(--kophoogte,70px) - 48px);overflow:auto}
.vmatrix-wrap:not(.past) thead th{top:0}
.vmatrix-wrap:not(.past) .vstrain,.vmatrix-wrap:not(.past) thead th:first-child{position:sticky;left:0;z-index:2;background:var(--surface);box-shadow:inset -1px 0 0 var(--line)}
.vmatrix-wrap:not(.past) thead th:first-child{z-index:4;box-shadow:inset -1px -1px 0 var(--line)}
.vmatrix-wrap:not(.past) tr.vdetail>td{position:static}
@media (max-width:760px){
  .vmatrix-wrap:not(.past){max-height:calc(100vh - var(--kophoogte,57px) - var(--balk-h, calc(66px + env(safe-area-inset-bottom))) - 84px);max-height:calc(100dvh - var(--kophoogte,57px) - var(--balk-h, calc(66px + env(safe-area-inset-bottom))) - 84px)}
}
@media print{
  body.print-vault .vmatrix-wrap,body.print-vault .vmatrix-wrap:not(.past){overflow:visible;max-height:none}
  body.print-vault .vmatrix thead th,body.print-vault .vmatrix .vstrain{position:static;box-shadow:none;border-bottom:1px solid #ccc}
}

/* ---------- kluis op de telefoon (Levi, 15-09-2026): de pagina scrolt als op de computer, niets scrolt in een kaart ----------
   Overview: kaart per strain met een tegel per variant (zelfde getallen en kleuren als de tabel). Getallentabellen (kluisdetail,
   orderdetail › VPK's, flower-telling): regel per product, de getallen als kleine gelabelde vakjes. Formuliergrids zonder overloop. */
.tegels.kw5{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:12px}
.velden2{grid-template-columns:repeat(2,minmax(0,1fr))}
.velden5{grid-template-columns:repeat(5,minmax(0,1fr))}
.pbgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
.veld{min-width:0}
.veld input,.veld select,.veld textarea{min-width:0;width:100%}
@media (max-width:1100px){.qtiles,.velden5{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:760px){
  .vmatrix-wrap,.vmatrix-wrap:not(.past){overflow:visible;max-height:none}
  .vmatrix-wrap:not(.past) .vstrain,.vmatrix-wrap:not(.past) thead th:first-child{position:static;box-shadow:none}
  .vmatrix,.vmatrix tbody,.vmatrix tr,.vmatrix td{display:block;min-width:0}
  .vmatrix thead{display:none}
  .vmatrix tr[hidden]{display:none}
  .vmatrix tr.vrij{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;padding:12px;border-bottom:1px solid var(--line)}
  .vmatrix tr.vrij>td{border-bottom:0;padding:0}
  .vmatrix .vstrain{grid-column:1/-1;min-width:0;min-height:40px;padding-bottom:2px}
  .vmatrix .vflower{grid-column:1/-1;white-space:normal;font-size:12px;color:var(--ink-3);padding-bottom:4px}
  .vmatrix .vflower b{font-size:13px;margin-right:6px}
  .vmatrix .vflower small{display:inline;white-space:normal}
  .vmatrix .vcel{border:1px solid var(--line);border-radius:10px;padding:7px 4px 6px;text-align:center;min-width:0;background:var(--surface-2);min-height:var(--tegelhoogte,64px)}   /* --tegelhoogte: pasMatrix, de hoogste tegel op de pagina */
  .vmatrix .vcel::before{content:attr(data-l);display:block;font-size:9.5px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);margin-bottom:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vmatrix .vcel b{font-size:18px}
  .vmatrix .vcel small{white-space:normal;font-size:10.5px;line-height:1.3}
  .vmatrix .vcel.nvt{display:none}
  .vmatrix .vcel.tekort{box-shadow:none;border-color:var(--crit);background:var(--crit-bg)}
  .vmatrix tr.vdetail>td{padding:0}
  .vkaart{padding:10px 12px 12px}
  .vkop{align-items:flex-start}
  .vlegenda{white-space:normal;overflow:visible;text-overflow:clip}
  .vtabel,.vtabel tbody{display:block}
  .vtabel thead{display:none}
  .vtabel tr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px 8px;padding:8px 0;border-bottom:1px solid var(--line)}
  .vtabel td{display:block;border:0;padding:2px 0;text-align:left;min-width:0}
  .vtabel td:first-child{grid-column:1/-1;font-size:13.5px;padding-bottom:0}
  .vtabel td[data-l]::before{content:attr(data-l);display:block;font-size:9.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);font-family:var(--sans);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .vtabel td.tekort{border-radius:6px}
  #batchDetail .tabel tbody{display:block}
  #batchDetail .tabel tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:0 10px;padding:8px 0;border-bottom:1px solid var(--line)}
  #batchDetail .tabel td{display:block;border:0;padding:0}
  #batchDetail .tabel td:first-child{grid-column:1/-1;font-size:11px;padding-bottom:2px}
  #batchDetail .tabel td.n{align-self:center;white-space:nowrap}
  .tegels.kw5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .velden5,.qtiles{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ip-filters{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- Packing II (16-09-2026): inpakkerslijst, gevuld/wacht op T&T, beheerpaneel ---------- */
:root{--g1:#00A653;--g2:#1D4ED8;--g3:#C2410C;--g4:#7C3AED;--g5:#0E7490;--g6:#B91C1C;--g7:#B26B00;--g8:#DB2777}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--g1:#4DEE9A;--g2:#8AB4FF;--g3:#FB923C;--g4:#C4B5FD;--g5:#67E8F9;--g6:#F87171;--g7:#F0B25A;--g8:#F9A8D4}}
:root[data-theme="dark"]{--g1:#4DEE9A;--g2:#8AB4FF;--g3:#FB923C;--g4:#C4B5FD;--g5:#67E8F9;--g6:#F87171;--g7:#F0B25A;--g8:#F9A8D4}
.ip-kop .ip-sam{grid-template-columns:repeat(5,minmax(84px,1fr))}
.ip-sam .klik{cursor:pointer}
.ip-sam .klik:hover dd{text-decoration:underline}
.ip-wie{margin:0 0 14px}
.ip-inpakkers{gap:8px}
.ip-tegel{min-height:56px;font-size:14px;gap:10px}
.ip-init{width:32px;height:32px;border-radius:50%;background:var(--ground);display:grid;place-items:center;font-size:11.5px;font-weight:800;flex:none;letter-spacing:.02em}
.ip-tegel[aria-pressed="true"] .ip-init{background:rgba(0,0,0,.15)}
.ip-naam{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.ip-reg{color:var(--warn);font-style:normal;font-size:13px;margin-left:3px}
.ip-tegel .ip-tel{margin-left:auto;font-family:var(--mono);font-size:11.5px;flex:none}
.ip-tegel.beheer{border-style:dashed;color:var(--green-ink);justify-content:center;font-size:13px}
.ip-persoon.eigen{border:2px solid var(--green);border-radius:12px;background:var(--surface);padding:12px 14px;margin-bottom:16px}
.ip-persoon.eigen .ip-groepkop{margin-top:0}
.ip-sub{margin:8px 0 4px}
.ip-sub summary{cursor:pointer;font-weight:800;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--warn);min-height:40px;display:flex;align-items:center;gap:8px;list-style:none}
.ip-sub summary::-webkit-details-marker{display:none}
.ip-sub summary::before{content:"›";font-size:18px;line-height:1;transition:transform .2s ease;color:var(--ink-3)}
.ip-sub[open] summary::before{transform:rotate(90deg)}
.ip-tabel td.nul{color:var(--ink-3);opacity:.6}
.ip-ttknop{min-height:56px;display:inline-flex;align-items:center;gap:10px;background:var(--green);color:#03210F;border-color:var(--green)}
.ip-tt-n{font-family:var(--mono);font-size:24px;font-weight:700;line-height:1}
.ip-tt .ttrij{margin-top:8px}
.ip-beheer-nieuw{display:flex;gap:8px;align-items:center;padding:0 20px 12px;flex-wrap:wrap}
.ip-beheer-nieuw input[type=text]{flex:1 1 180px;min-height:48px;padding:0 14px;border:1px solid var(--line-2);border-radius:11px;background:var(--surface);color:var(--ink);font-size:16px;min-width:0}
.ip-beheer-reg{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;min-height:44px;white-space:nowrap}
.ip-beheer-reg input{width:22px;height:22px;accent-color:#00D764}
.ip-beheer-nieuw .actie{min-height:48px}
.ip-beheer-rij{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 10px;padding:10px 20px;border-top:1px solid var(--line);align-items:center}
.ip-beheer-rij:first-child{border-top:0}
.ip-beheer-rij small{color:var(--ink-3);font-size:11.5px}
.ip-beheer-rij .knopjes{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.ip-beheer-rij .knopjes .klein{min-height:36px;padding:0 10px}
.ip-beheer-rij.uit b{opacity:.55}
.kiezer header small{flex-basis:100%}

/* ---------- Packing history: filters, kpi's, grafiek (inline SVG), tabellen ---------- */
.ih-filters{display:flex;flex-direction:column;gap:10px;padding:14px 18px;margin-bottom:14px}
.ih-kaart{padding:18px;margin-bottom:14px}
.ih-rij{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.ih-rij .eyebrow{margin:0 6px 0 0;min-width:70px}
.ih-rij .fbtn{min-height:40px;font-size:12px;display:inline-flex;align-items:center;gap:7px}
.ih-rij .fbtn i{width:10px;height:10px;border-radius:50%;display:inline-block;flex:none}
.ih-eigen{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.ih-eigen input{min-height:40px;padding:0 10px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--ink);font-size:14px}
.segment{display:inline-flex;border:2px solid var(--ink);border-radius:999px;padding:3px;gap:3px;background:var(--surface)}
.segment button{min-height:36px;padding:0 16px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink)}
.segment button[aria-pressed="true"]{background:var(--ink);color:#fff}
.ih-meer summary{cursor:pointer;font-weight:700;font-size:12.5px;color:var(--ink-3);min-height:36px;display:flex;align-items:center}
.ih-meer .velden2{margin-top:8px}
.ih-kpi{margin:0 0 12px}
.ih-kpi dd small{font-size:11px;color:var(--ink-3);font-weight:600}
.ih-kop{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:0 0 8px}
.ih-kop .eyebrow{margin:0}
.ih-wrap{overflow-x:auto}
.ih-tabel th.periode{white-space:nowrap;text-align:right;font-size:10px}
.ih-tabel td.n{font-family:var(--mono)}
.ih-tabel th:first-child,.ih-tabel td:first-child{position:sticky;left:0;background:var(--surface);z-index:1;max-width:170px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ih-tabel tr.klik td:first-child{cursor:pointer}
.ih-tabel tr.klik:hover td{background:var(--surface-2)}
.ih-tabel tr.gem td{border-top:1px dashed var(--line-2);color:var(--ink-2);font-size:12px}
.ih-tabel td.nul{color:var(--ink-3);opacity:.5}
.ih-tabel tr.ih-detail td{background:var(--surface-2);padding:8px 10px;white-space:normal}
.pchip i.stip{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none}
.grafiek{position:relative;margin:0}
.gr-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.gr-svg{display:block;max-width:none}
.gr-grid{stroke:var(--line)}
.gr-as{stroke:var(--line-2)}
.gr-tekst{fill:var(--ink-3);font:600 11px var(--sans);font-variant-numeric:tabular-nums}
.gr-leeg{fill:var(--ink-3);font-size:13px}
.gr-lijn{fill:none;stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.gr-streep{stroke-dasharray:6 4;stroke-width:2.5}
.gr-stip{stroke-dasharray:2 5;stroke-width:2.75}
.gr-punt{fill:var(--surface);stroke-width:2}
.gr-hit{fill:transparent;cursor:pointer;outline:none}
.gr-hit:focus-visible{fill:rgba(0,215,100,.12)}
.gr-gids{stroke:var(--ink-3);stroke-dasharray:3 3;pointer-events:none}
.gr-tip{position:absolute;top:4px;background:var(--ink);color:var(--surface);border-radius:10px;padding:8px 10px;font-size:12px;line-height:1.5;pointer-events:none;box-shadow:var(--shadow);z-index:2;white-space:nowrap}
.gr-tip>b{display:block;margin-bottom:2px}
.gr-tip div{display:flex;align-items:center}
.gr-tip i{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;flex:none}
.gr-tip div b{font-family:var(--mono);margin-left:auto;padding-left:12px}
.gr-legenda{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.gr-chip{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--line-2);background:var(--surface);font-size:12px;font-weight:700;max-width:240px;color:var(--ink)}
.gr-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-chip i{width:16px;height:0;border-top:3px solid var(--k);flex:none}
.gr-chip i.streep{border-top-style:dashed}
.gr-chip i.stip{border-top-style:dotted}
.gr-chip[aria-pressed="false"]{opacity:.45;text-decoration:line-through}
.gr-chip:disabled{opacity:.35;cursor:not-allowed;text-decoration:none}
@media (max-width:760px){
  .ip-kop .ip-sam{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ip-tegel .ip-init{display:none}
  .ip-tegel{padding:10px 10px;font-size:13.5px;gap:6px}
  .ip-tegel .ip-tel{font-size:10.5px}
  .ip-persoon.eigen{padding:10px}
  .ip-ttknop{width:100%;justify-content:center}
  .ih-rij.chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .ih-rij.chips::-webkit-scrollbar{display:none}
  .ih-rij.chips .fbtn{flex:none}
  .ih-rij .eyebrow{flex:none;min-width:0}
  .ih-filters{padding:12px}
  .ih-kaart{padding:14px 12px}
  .gr-tip{white-space:normal;max-width:70vw}
  .ip-beheer-rij{grid-template-columns:1fr}
  .ip-beheer-rij .knopjes{justify-content:flex-start}
}
@media print{
  body.print-inpakhist{background:#fff;color:#000}
  body.print-inpakhist .rail,body.print-inpakhist .topbar,body.print-inpakhist #subbar,body.print-inpakhist #ihTabs,body.print-inpakhist .ih-filters,body.print-inpakhist #ipRapport,body.print-inpakhist .gr-legenda button[aria-pressed="false"],body.print-inpakhist .ih-kop button,body.print-inpakhist .toast,body.print-inpakhist #bulkbalk,body.print-inpakhist #kiezer{display:none!important}
  body.print-inpakhist .app{display:block;min-height:0}
  body.print-inpakhist main,body.print-inpakhist .screen{padding:0}
  body.print-inpakhist .printkop{display:block;font-weight:800;font-size:14px;letter-spacing:.04em;margin:0 0 10px}
  body.print-inpakhist .card{box-shadow:none;border:0;padding:0!important;margin-bottom:12px}
  body.print-inpakhist .gr-wrap,body.print-inpakhist .ih-wrap{overflow:visible}
  body.print-inpakhist .gr-svg{max-width:100%;height:auto}
  body.print-inpakhist .ih-tabel th:first-child,body.print-inpakhist .ih-tabel td:first-child{position:static}
  body.print-inpakhist .ih-tabel{font-size:10.5px;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  @page inpakhist{size:A4 landscape;margin:12mm}
  body.print-inpakhist #s-inpak-historie{page:inpakhist}
}

/* ---------- delen (16-09): gedempte ouder, splits-paneel, vergelijkingstabel, voorstel ---------- */
.orow.context{opacity:.62}
.orow.context:hover{opacity:.9}
.deel .soort{margin-left:4px;font-size:10px;padding:2px 8px;vertical-align:1px}
.blok.voorstel h4{color:var(--warn)}
.vergelijk{width:100%;font-size:13px;margin-top:4px}
.vergelijk th a{color:var(--green-ink);cursor:pointer}
.vergelijk th small{font-weight:600;color:var(--ink-3);letter-spacing:0;text-transform:none}
.splitsrij{display:grid;grid-template-columns:minmax(0,1fr) auto 110px 70px;gap:8px 10px;align-items:center;padding:10px 20px;border-top:1px solid var(--line)}
.splitsrij:first-child{border-top:0}
.splitsrij .sr-naam{min-width:0}
.splitsrij .sr-naam small{display:block;color:var(--ink-3);font-size:11.5px}
.splitsrij .sr-knop{display:flex;gap:6px}
.splitsrij .sr-knop .klein{min-height:36px;padding:0 10px}
.splitsrij input{min-height:44px;width:100%;padding:0 10px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);color:var(--ink);font-size:16px;text-align:right;font-family:var(--mono);min-width:0}
.splitsrij input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,215,100,.25)}
.splitsrij .sr-vpk{font-family:var(--mono);color:var(--ink-3);font-size:12px;text-align:right}
.splitsvoet{display:flex;gap:12px;align-items:flex-end;flex-wrap:wrap;padding:12px 20px 4px;border-top:1px solid var(--line)}
.splitsvoet .veld{margin:0;min-width:200px}
.splitsvoet .ip-hint{flex:1 1 200px;margin:0 0 14px}
.nal-rest{margin:0;padding-left:18px;line-height:1.7;font-size:14px}
.nal-rest small{color:var(--ink-3)}
@media (max-width:760px){
  .splitsrij{grid-template-columns:minmax(0,1fr) 96px;grid-template-areas:"naam invoer" "knop vpk";padding:10px 12px}
  .splitsrij .sr-naam{grid-area:naam}.splitsrij .sr-knop{grid-area:knop}.splitsrij input{grid-area:invoer}.splitsrij .sr-vpk{grid-area:vpk}
  .splitsvoet{padding:12px 12px 4px}
  .kiezer footer{flex-wrap:wrap}
}
.kiezer input[type=radio]{width:24px;height:24px;accent-color:#00D764;flex:none}
.kiezer .splitsvoet .veld label{display:block;padding:0;min-height:0;border:0;cursor:default;gap:0}
.kiezer .splitsvoet .veld label:hover{background:none}
.kiezer header small{display:block}

/* ---------- opschoning (16-09): verzonden codes dichtgeklapt ---------- */
.vpk-verzonden>summary{list-style:none;display:flex;align-items:center;gap:8px}
.vpk-verzonden>summary::before{content:'▸';font-size:11px}
.vpk-verzonden[open]>summary::before{content:'▾'}

/* ---------- Produceren & verpakken (16-09-2026): runs, stappen, pakkettenraster, Downloads-lijst ---------- */
.pr-lijstkop{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.pr-lijstkop .fbtns{display:flex;gap:6px}
.pr-run{display:flex;align-items:center;gap:12px;width:100%;padding:12px 16px;border:0;border-bottom:1px solid var(--line);background:var(--surface);text-align:left;font:inherit;color:inherit;cursor:pointer;min-height:64px}
.pr-run:hover{background:var(--surface-2)}
.pr-run[aria-current="true"]{background:var(--green-soft);box-shadow:inset 3px 0 0 var(--green)}
.pr-run>i{width:10px;height:34px;border-radius:3px;flex:none;border:1px solid rgba(11,13,12,.14)}
.pr-run-tekst{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.pr-run-tekst b{font-size:14px}
.pr-run-tekst small{color:var(--ink-3);font-size:11.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pr-run-n{font-family:var(--mono);font-size:12px;color:var(--ink-3);white-space:nowrap}
.pr-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;flex-wrap:wrap;margin-bottom:8px}
.pr-kop h3{margin:2px 0 6px;font-size:22px;font-weight:800}
.pr-kop .sub{margin:0;display:flex;flex-wrap:wrap;gap:10px;align-items:center;color:var(--ink-3);font-size:13px}
.pr-stap{border:1px solid var(--line);border-radius:12px;margin-bottom:10px;background:var(--surface)}
.pr-stap>summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;font-weight:800;font-size:14px;list-style:none;min-height:52px}
.pr-stap>summary::-webkit-details-marker{display:none}
.pr-stap .pr-nr{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--surface-2);border:1px solid var(--line-2);font-size:12px;flex:none}
.pr-stap.nu{border-color:var(--green)}
.pr-stap.nu .pr-nr{background:var(--green);border-color:var(--green);color:#03210F}
.pr-stap.klaar .pr-nr{background:var(--ink);border-color:var(--ink);color:#fff}
.pr-stap-inhoud{padding:0 16px 16px}
.pr-regels{font-family:var(--mono);font-size:12px;line-height:1.5;background:var(--surface-2);border:1px solid var(--line);border-radius:9px;padding:10px 12px;margin:0 0 12px;white-space:pre-wrap;overflow-wrap:anywhere}
.pr-plak{width:100%;box-sizing:border-box;min-height:88px;padding:10px 12px;border:1px solid var(--line-2);border-radius:9px;font-family:var(--mono);font-size:12px;background:var(--surface);color:var(--ink)}
.pr-plak:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 3px rgba(0,215,100,.25)}
.pr-toggle{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;min-height:44px}
.pr-toggle input{width:22px;height:22px;accent-color:#00D764}
.pr-bestanden{display:flex;flex-direction:column;gap:4px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:9px}
.pr-bestanden label{display:flex;align-items:center;gap:12px;padding:8px 12px;min-height:48px;border-bottom:1px solid var(--line);cursor:pointer}
.pr-bestanden label:last-child{border-bottom:0}
.pr-bestanden input{width:22px;height:22px;accent-color:#00D764;flex:none}
.pr-bestanden b{display:block;font-size:13px;overflow-wrap:anywhere}
.pr-bestanden small{color:var(--ink-3);font-family:var(--mono);font-size:11px}
.pr-voortgang{margin:0 0 10px;font-weight:700}
.pr-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(64px,1fr));gap:6px}
.pr-vak{min-height:56px;border:1px solid var(--line-2);border-radius:9px;background:var(--surface);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font:inherit;cursor:pointer;color:inherit}
.pr-vak b{font-size:16px}.pr-vak small{font-size:10.5px;color:var(--ink-3)}
.pr-vak.open{border-style:dashed}
.pr-vak.volgende{border:2px solid var(--green);border-style:solid}
.pr-vak.verzonden{background:var(--green);border-color:var(--green);color:#03210F}.pr-vak.verzonden small{color:#03210F}
.pr-vak.gekoppeld{background:var(--ink);border-color:var(--ink);color:#fff}.pr-vak.gekoppeld small{color:#cfd5d2}
.pr-vak.prepack{background:var(--ink);border-color:var(--ink);color:#fff;opacity:.6;cursor:default}.pr-vak.prepack small{color:#cfd5d2}
.pr-paren td.mono{font-size:11.5px}
.pr-paren tr.fout td{background:var(--crit-bg)}
@media (max-width:760px){
  .pr-lijstkop{flex-wrap:wrap}
  .pr-raster{grid-template-columns:repeat(auto-fill,minmax(56px,1fr))}
  .pr-kop h3{font-size:19px}
}
.pr-vak.gemist{background:var(--crit-bg);border:2px solid var(--crit);color:var(--crit)}.pr-vak.gemist small{color:var(--crit)}
.pr-meldingen{margin:6px 0 10px;padding-left:18px;font-size:12.5px;line-height:1.8}

/* Productcatalogus (17-09-2026): melding 'nieuw product uit Excel' in de systeembalk + venster om toestemming te geven */
.systeem button.chip{border:0;cursor:pointer;font-family:inherit;line-height:inherit}
.systeem button.chip:hover{filter:brightness(.94)}
.systeem button.chip:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.pv-lijst{padding:0 20px 8px;overflow:auto}
.pv-intro{margin:0 0 12px;color:var(--ink-2);font-size:13.5px;line-height:1.5}
.pv-item{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:0 0 10px;background:var(--surface)}
.pv-item.afgewezen{background:var(--ground)}
.pv-kop b{display:block;font-size:15px;font-weight:800}
.pv-kop small{display:block;margin-top:2px;color:var(--ink-3);font-size:12.5px}
.pv-item p{margin:8px 0 0;font-size:13px;line-height:1.5;overflow-wrap:anywhere}
.pv-lbl{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.pv-item .knoprij{margin:12px 0 0;justify-content:flex-end}
.pv-item .actie{min-height:44px}
.pv-afgewezen summary{cursor:pointer;font-weight:800;min-height:44px;display:flex;align-items:center}

/* Orderrij op de telefoon (Levi 17-09): de pillen op een eigen regel onder klantnaam en datum, zodat ze niet over de naam heen
   vallen en niet worden afgekapt; hoeveelheid en de groene driehoek blijven rechts op de eerste regel. */
@media (max-width:760px){
  .orow{flex-wrap:wrap;row-gap:6px}
  .orow .badges{order:9;flex:1 0 100%;max-width:none;justify-content:flex-start}
  .orow .badges:empty{display:none}
  .orow:has(> .sel) .badges{flex-basis:calc(100% - 42px);margin-left:42px}
}

/* Legacy Stock op een andere computer (18-09-2026): bestand kiezen in stap 2/4 en het tekstbestand downloaden */
.pr-kies{display:inline-flex;align-items:center;gap:6px;cursor:pointer;min-height:36px;padding:0 12px;border-radius:10px;border:1px solid var(--line);
  background:var(--surface);font-size:12px;font-weight:700;letter-spacing:0;text-transform:none;color:var(--ink)}
.pr-kies:hover{background:var(--ground)}
.pr-kies:focus-within{outline:3px solid var(--ink);outline-offset:2px}
a.knoplink{display:inline-flex;align-items:center;min-height:32px;padding:0 10px;border-radius:9px;border:1px solid var(--line);color:var(--ink);text-decoration:none;font-weight:700}
a.knoplink:hover{background:var(--ground)}

/* --- Toegang verlopen (Cloudflare Access, plan 18-09 A3): vaste balk met herlaadknop --- */
.toegangbalk{position:fixed;left:0;right:0;bottom:0;z-index:400;display:flex;gap:12px;align-items:center;justify-content:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom,0px));background:#DC2626;color:#fff;font-weight:600}
.toegangbalk button{min-height:44px;padding:0 18px;border:0;border-radius:10px;background:#fff;color:#DC2626;font-weight:700;cursor:pointer}

/* --- Deel B (plan 18-09): inklapbaar log, slanke Producing-kop, panelen als uitschuifblad --- */
.logblok.kort .log li:nth-child(n+5){display:none}
.logblok.kort .log li:nth-child(4){max-height:34px;overflow:hidden;pointer-events:none;-webkit-mask-image:linear-gradient(#000,rgba(0,0,0,.04));mask-image:linear-gradient(#000,rgba(0,0,0,.04))}
@supports not ((mask-image:none) or (-webkit-mask-image:none)){.logblok.kort .log li:nth-child(4){opacity:.35}}
.logblok h4{display:flex;align-items:center;justify-content:space-between;gap:10px}
.logknop{min-height:44px;text-transform:none;letter-spacing:0}
.klein.rood{border-color:var(--crit);color:var(--crit)}
.klein.rood:hover{background:var(--crit-bg)}
.pr-kop{flex-wrap:nowrap;align-items:flex-start;gap:12px}
.pr-kop-tekst{min-width:0}
.pr-annuleer{min-height:44px;flex:none}
.pr-klaarbalk{display:flex;align-items:center;gap:10px;font-weight:600;margin-bottom:12px}
.pr-wacht{min-height:36px;margin-left:10px;text-transform:none;letter-spacing:0;border-color:var(--green);color:var(--green)}
.pr-details summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ink-3);font-weight:600}
@keyframes prPop{0%{transform:scale(.6)}60%{transform:scale(1.25)}100%{transform:scale(1)}}
.pr-nr.prPop{animation:prPop .2s ease-out}
@keyframes prIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.pr-stap-inhoud.prIn{animation:prIn .22s ease-out}
.toast #toastActie{pointer-events:auto;margin-left:12px;min-height:36px;padding:0 14px;border:1px solid currentColor;border-radius:8px;background:transparent;color:inherit;font-weight:700;cursor:pointer}
body.paneel-open{overflow:hidden}
.kiezer.blad{align-items:flex-end;justify-content:stretch}
@media (max-width:760px){
  .kiezer.blad .paneel{width:100%;max-width:none;border-radius:16px 16px 0 0;max-height:88dvh;padding-bottom:calc(12px + env(safe-area-inset-bottom,0px));animation:bladOp .22s ease-out}
  @keyframes bladOp{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}
}
@media (prefers-reduced-motion:reduce){.pr-nr.prPop,.pr-stap-inhoud.prIn,.kiezer.blad .paneel{animation:none}}

/* --- B1: het inpakraster (plan 18-09) --- */
.ip-balk{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:10px 0;background:var(--bg);flex-wrap:wrap}
.ip-balk-veld{flex:1 1 320px;min-width:240px}
.ip-balk-veld .scanveld{margin:0}
.ip-balk-wie{font-weight:800;font-size:14px;color:var(--ink-3);min-height:44px;display:inline-flex;align-items:center;padding:0 14px;border:1px dashed var(--line-2);border-radius:10px}
.ip-balk-wie.aan{color:#03210F;background:var(--green);border:0}
@media (prefers-color-scheme:dark){.ip-balk-wie.aan{color:#03210F}}
.ip-chips{display:none;gap:8px;overflow-x:auto;padding:2px 0 8px;-webkit-overflow-scrolling:touch}
.ip-chip{min-height:44px;padding:0 14px;border:1px solid var(--line-2);border-radius:22px;background:var(--surface);font:inherit;font-weight:700;color:inherit;white-space:nowrap;cursor:pointer}
.ip-chip[aria-pressed="true"]{background:var(--green);border-color:var(--green);color:#03210F}
.ip-rooster{display:grid;grid-template-columns:repeat(auto-fill,minmax(264px,1fr));gap:12px;align-items:start;margin-bottom:14px}
.ip-kaart{border:1px solid var(--line);border-radius:12px;background:var(--surface);overflow:hidden;display:flex;flex-direction:column}
.ip-kaart.actief{border:3px solid var(--green)}
.ip-kaart.vreemd{border-style:dashed}
.ip-kaart-kop{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:10px 12px;border:0;background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer}
.ip-kaart-kop:disabled{cursor:default}
.ip-kaart-naam{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ip-kaart-naam b{font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-kaart-naam small{color:var(--ink-3);font-size:11px}
.ip-hier{flex:none;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#03210F;background:var(--green);border-radius:7px;padding:4px 8px}
.ip-kaart-lijf{padding:0 12px 12px;display:flex;flex-direction:column;gap:8px}
.ip-kaart-lijst{max-height:230px;overflow:auto;border:1px solid var(--line);border-radius:9px}
.ip-krij{display:flex;align-items:center;gap:8px;min-height:44px;padding:2px 4px 2px 10px;border-bottom:1px solid var(--line)}
.ip-krij:last-child{border-bottom:0}
.ip-knr{flex:none;width:22px;text-align:right;color:var(--ink-3);font-size:11.5px;font-variant-numeric:tabular-nums}
.ip-kcode{flex:none;font-size:12px}
.ip-kcode b{font-size:13px}
.ip-kprod{flex:1;min-width:0;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-kprod small{color:var(--ink-3)}
.ip-ksub{margin:6px 10px 2px;font-size:10.5px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)}
.ip-x{flex:none;width:44px;height:44px;border:0;background:transparent;color:var(--ink-3);font-size:16px;cursor:pointer;border-radius:9px}
.ip-x:hover{background:var(--crit-bg);color:var(--crit)}
.ip-kgevuld{width:100%;min-height:52px}
.ip-kselect{width:100%;min-height:48px}
.ip-kaart-leeg{border:1px dashed var(--line-2);border-radius:9px;min-height:120px;display:grid;place-items:center;color:var(--ink-3);font-size:12.5px;padding:10px;text-align:center}
.ip-beheer-tegel{border:1px dashed var(--line-2);border-radius:12px;background:transparent;min-height:120px;font:inherit;font-weight:700;color:var(--ink-3);cursor:pointer}
.ip-beheer-tegel:hover{border-color:var(--green);color:var(--green-ink)}
.ip-selbalk{display:flex;align-items:center;gap:10px;padding:0 20px 8px;flex-wrap:wrap}
.ip-selbalk span{flex:1;font-weight:700}
.ip-selrij{position:relative}
.ip-selrij .ip-selvink{color:var(--green-ink);font-weight:800;font-size:12px}
.ip-selrij.aan{background:var(--green-soft)}
@keyframes ipFlits{0%{background:var(--green-soft)}100%{background:transparent}}
.ip-selrij.flits{animation:ipFlits .6s ease-out}
.ip-samvat{list-style:none;margin:0;padding:6px 20px 0;font-size:14px}
.ip-samvat li{min-height:28px;display:flex;align-items:center}
@media (max-width:760px){
  .ip-chips{display:flex}
  .ip-rooster{grid-template-columns:1fr}
  .ip-kaart:not(.actief) .ip-kaart-lijf{display:none}
  .ip-kgevuld,.ip-kselect{width:100%}
}
@media (prefers-reduced-motion:reduce){.ip-selrij.flits{animation:none}}

/* --- B4: het kluisvakje-paneel --- */
.cel-inhoud{padding:0 20px 16px;overflow:auto}
.cel-strip{margin:0 0 12px}
.cel-tabs{display:none;margin:0 0 12px}
.cel-tabs button{min-height:44px}
.cel-kolommen{display:grid;grid-template-columns:58% 1fr;gap:14px;align-items:start}
.cel-kol h4{margin:0 0 8px}
.cel-scroll{max-height:52vh;overflow:auto;border:1px solid var(--line);border-radius:10px}
.cel-order{display:flex;align-items:center;gap:10px;width:100%;min-height:56px;padding:8px 12px;border:0;border-bottom:1px solid var(--line);background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;flex-wrap:wrap}
.cel-order:hover{background:var(--surface-2)}
.cel-order:last-of-type{border-bottom:0}
.cel-order-wie{display:flex;flex-direction:column;min-width:0}
.cel-order-wie small{color:var(--ink-3)}
.cel-order-n{margin-left:auto;text-align:right;font-weight:700;display:flex;flex-direction:column}
.cel-order-n small{color:var(--ink-3);font-weight:400}
.cel-totaal{padding:10px 12px;margin:0;border-top:2px solid var(--line-2);font-size:13px}
.cel-groep{border-bottom:1px solid var(--line)}
.cel-groepkop{position:sticky;top:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 12px;background:var(--surface-2);z-index:2}
.cel-code{padding:8px 12px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cel-code.klikbaar{cursor:pointer}
.cel-code.klikbaar:hover{background:var(--surface-2)}
@media (max-width:760px){
  .cel-tabs{display:flex}
  .cel-kolommen{grid-template-columns:1fr}
  .cel-kolommen[data-tab="orders"] .cel-kol-codes{display:none}
  .cel-kolommen[data-tab="codes"] .cel-kol-orders{display:none}
  .cel-kol h4{display:none}
  .cel-scroll{max-height:56dvh}
}

/* --- B5: telefooncontrole Packing history + tikdoelen --- */
.segment button{min-height:44px}
.gr-chip{min-height:44px}
@media (max-width:760px){
  .ip-rwrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .ip-rtabel{min-width:860px}
  input[type="date"]{font-size:16px;min-height:44px}
}

/* --- C1: gezinnen in de lijst (goot, geleidelijn, moederrij, kopregel) --- */
.orow .goot{flex:none;width:32px;display:flex;align-items:center;justify-content:center;align-self:stretch}
.orow .goot .geleide{width:3px;align-self:stretch;margin:4px 0;border-radius:2px;background:var(--green);opacity:.45}
.orow.kopregel{min-height:34px;padding-top:4px;padding-bottom:4px;border-bottom:2px solid var(--line-2);cursor:default;background:transparent;color:var(--ink-3);font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.orow.kopregel:hover{background:transparent}
.orow.moeder{background:var(--surface-2)}
.orow.moeder:hover{background:var(--green-soft)}
.uitklap.gevuld{display:inline-flex;align-items:center;gap:4px;min-width:44px;min-height:44px;border-radius:10px;background:var(--green-soft);justify-content:center;padding:0 6px}
.uitklap.gevuld svg{width:16px;height:16px}
.uitklap.gevuld svg path{fill:var(--green-ink);fill-rule:nonzero}
.uitklap.gevuld b{font-size:12px;color:var(--green-ink)}
.gezinlijst{display:flex;flex-direction:column}
.gezinlid{display:flex;align-items:center;gap:10px;min-height:56px;padding:8px 12px;border:0;border-bottom:1px solid var(--line);background:transparent;font:inherit;color:inherit;text-align:left;cursor:pointer;flex-wrap:wrap}
.gezinlid:hover{background:var(--surface-2)}
.gezinlid:last-child{border-bottom:0}
/* --- C5: history-filters --- */
.hf-rij{display:flex;gap:8px;flex-wrap:wrap;align-items:flex-end;margin-top:8px}
.hf-veld{display:flex;flex-direction:column;gap:2px}
.hf-veld small{color:var(--ink-3);font-size:10.5px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.hf-veld input{min-height:44px;border:1px solid var(--line-2);border-radius:9px;padding:0 10px;font:inherit;font-size:16px;background:var(--surface);color:var(--ink)}
.hf-meer{display:block;width:calc(100% - 32px);margin:10px 16px;min-height:48px}
/* --- selectiestand: de balk bedekt de laatste rijen niet meer --- */
body.met-select .screen{padding-bottom:120px}
/* --- tablet 761-1100 px: lijst en detail als twee schermen (tik leek anders niets te doen) --- */
@media (max-width:1100px){
  .split{grid-template-columns:1fr}
  .split .detail{display:none}
  .split.mob-detail .list{display:none}
  .split.mob-detail .detail{display:block}
  .mob-terug{display:inline-flex}
}

/* C3 splitskeuze (18-09): drie grote knoppen met ondertitel, voorbeeldtabel */
.splits-keuze{display:flex;flex-direction:column;gap:10px;padding:0 20px 8px}
.splits-keuze .actie{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-height:64px;text-align:left}
.splits-keuze .actie small{font-weight:400;opacity:.78;font-size:12.5px}
.sk-voorstel{margin:12px 0;min-height:56px}

/* C2 orderdetail (18-09, naar Levi's schets): kop, printicoon, familiestrook, statusband, Products & VPK's */
.dkop2{display:flex;align-items:flex-start;gap:12px}
.dkop2-links{flex:1 1 auto;min-width:0}
.dkop2-links h3{margin:0 0 6px}
.dkop2-links .sub{margin:0 0 10px}
.dkop2-rechts{display:flex;flex-direction:column;align-items:flex-end;gap:8px;flex:none}
.hoeveelste{font-weight:800;color:var(--ink-3);font-size:14px;white-space:nowrap}
.sublink{color:var(--green-ink);font-weight:700;cursor:pointer}
.printknop{position:relative;width:44px;height:44px;margin-left:auto;border:1px solid var(--green);border-radius:11px;background:var(--surface);color:var(--green-ink);display:inline-flex;align-items:center;justify-content:center;flex:none}
.printknop svg{width:20px;height:20px;margin:0}
.printstip{position:absolute;top:6px;right:6px;width:9px;height:9px;border-radius:50%;background:var(--green)}
.gezinstrook{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:2px 0 10px}
.gs-chip{min-height:36px;padding:0 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:12px;font-weight:700}
.gs-chip[aria-current="true"]{border-color:var(--green);background:var(--green-soft);color:var(--green-ink)}
.badgeregel{margin:0 0 14px;display:flex;flex-wrap:wrap;gap:4px}
.badgeregel:empty{display:none}
.card.detail{container:detail/inline-size}
.statusband{display:grid;gap:14px;margin:0 0 16px}
.statusband .sb-knoppen{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.statusband .sbtn,.statusband .pbtn{min-height:52px;font-size:12px;padding:8px 6px;line-height:1.25}
.statusband .eyebrow{margin:0 0 8px}
.sb-doorzet{margin-top:10px}
@container detail (min-width:560px){
  .statusband{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);align-items:start}
}
.pv-kop{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pv-splits{margin-left:auto}
.pv-let{color:var(--crit);font-weight:900}
.pvtabel td small{display:block;color:var(--ink-3);font-weight:500}
.pv-scan{margin:12px 0 8px}
.pv-tussenkop{margin-top:12px;cursor:pointer}
.pv-verzend{margin-top:12px;align-items:end}
.pv-verzend .actie{min-height:54px}
.pv-leeg{padding:12px}
.rm-boven{margin-top:10px}
.rm-klein{margin-top:6px;color:var(--ink-3)}
.schakel-sub{font-weight:500;color:var(--ink-3)}

/* C6 Totaal nodig (18-09, naar Levi's voorbeeld): vinkjes, Per-order-blok, telefoonregels voor .ptabel */
.pl-kop{margin:0 0 10px;display:flex;align-items:center;justify-content:space-between;gap:10px}
.pl-kop .vlegenda{margin:0}
.pl-kop .klein{display:inline-flex;align-items:center;gap:6px}
.pl-tussenkop{margin:22px 0 10px}
.pvink{display:inline-flex;align-items:center;margin-right:10px;vertical-align:middle}
.pvink input{width:20px;height:20px;accent-color:var(--green);cursor:pointer}
.prij.af .pvar b,.pl-regel.af .pl-naam{text-decoration:line-through;opacity:.45}
.prij.af .pvpk,.prij.af .pst,.pl-regel.af .pl-vpk,.pl-regel.af .pl-stuks{opacity:.45}
.pl-order{padding:14px 16px;margin-bottom:12px}
.pl-orderkop{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;cursor:pointer;padding-bottom:8px;border-bottom:1px solid var(--line)}
.pl-orderkop b{font-size:16px}
.pl-ordermeta{font-size:12.5px;color:var(--ink-3);font-weight:600}
.pl-regel{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.pl-regel:last-child{border-bottom:0}
.pl-naam{flex:1 1 auto;min-width:0;font-weight:600}
.pl-vpk b{font-family:var(--mono);font-size:17px;font-weight:700}
.pl-vpk{white-space:nowrap}
.pl-stuks{white-space:nowrap;font-family:var(--mono);font-size:13px;color:var(--ink-2);min-width:90px;text-align:right}
@media (max-width:760px){
  #pickStrip{grid-template-columns:repeat(2,1fr)}
  .ptabel thead{display:none}
  .ptabel tr.prij{display:grid;grid-template-columns:1fr auto;grid-template-areas:"var vpk" "var st" "voor voor";row-gap:2px;padding:10px 0;border-bottom:1px solid var(--line)}
  .ptabel tr.prij td{border-bottom:0;padding:2px 14px}
  .ptabel .pvar{grid-area:var;white-space:normal;min-width:0}
  .ptabel .pvpk{grid-area:vpk;width:auto}
  .ptabel .pvpk b{font-size:20px}
  .ptabel .pst{grid-area:st;width:auto}
  .ptabel .pvoor{grid-area:voor}
  .ptabel tr.pstrain td{display:flex;align-items:center}
  .ptabel tr.pstrain .ptot{margin-left:auto;float:none}
  .pl-stuks{min-width:0}
}

/* C7 menu + Admin (18-09): binnenkort-tegels, soontag, Admin-tegelpagina, systeeminfo, telefoonbalk */
.soontag{font-size:8.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);border:1px solid var(--line-2);border-radius:999px;padding:1px 6px;margin-top:2px}
.volgt-nav{opacity:.55}
.volgt-nav:hover{opacity:.8}
.volgt{display:grid;place-items:center;min-height:50vh;text-align:center;color:var(--ink-3);gap:4px;align-content:center}
.volgt svg{width:44px;height:44px;fill:none;stroke:var(--ink-3);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;margin-bottom:6px}
.volgt b{font-size:20px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--ink)}
.volgt p{margin:0;max-width:420px;line-height:1.5}
.a-tegels{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.a-tegel{background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:18px;text-align:left;display:flex;flex-direction:column;gap:6px;min-height:120px;transition:border-color .12s}
.a-tegel:hover{border-color:var(--green)}
.a-tegel .a-icoon{font-size:24px;line-height:1}
.a-tegel b{font-size:15px;display:flex;align-items:center;gap:8px}
.a-tegel b .tel{position:static;background:var(--green);color:#03210F;border-radius:999px;font-size:11px;font-weight:800;padding:1px 7px}
.a-tegel small{color:var(--ink-3);font-weight:500;line-height:1.4}
.si-groep{margin-bottom:18px}
.si-groep h4{margin:0 0 8px}
.si-rij{display:flex;justify-content:space-between;gap:14px;padding:7px 0;border-bottom:1px solid var(--line);font-size:13.5px}
.si-rij span{color:var(--ink-3);font-weight:600}
.si-rij b{text-align:right;overflow-wrap:anywhere}
.a-kl-cof{display:flex;align-items:center;gap:8px}
.a-kl-cof label{font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.a-kl-cof input{width:110px;min-height:40px;text-align:right;font-family:var(--mono)}
.paneel-subkop{color:var(--ink-3);flex-basis:100%}
.topbar{padding-left:calc(28px + env(safe-area-inset-left));padding-right:calc(28px + env(safe-area-inset-right))}
@media (max-width:760px){
  .topbar{padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
  #subbar{padding-left:calc(12px + env(safe-area-inset-left));padding-right:calc(12px + env(safe-area-inset-right))}
}
@media (max-width:760px){
  .rail .volgt-nav,#adminNav{display:none}
  .screen{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
}

/* C10 (18-09): gebruikers-tabel wordt kaarten op de telefoon */
.gbtabel .gb-acties{white-space:nowrap}
@media (max-width:760px){
  .gbtabel thead{display:none}
  .gbtabel tr{display:block;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}
  .gbtabel td{display:flex;align-items:center;gap:10px;border-bottom:0;padding:4px 0}
  .gbtabel td[data-l]::before{content:attr(data-l);flex:0 0 96px;font-size:9.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
  .gbtabel .gb-acties{white-space:normal;flex-wrap:wrap;padding-top:8px}
  .gbtabel .gb-acties .klein{min-height:40px}
}
@media (max-width:760px){
  .orow.kopregel{display:none}
}

/* Plan 19-09 stap 1: menu-voet (Admin + vlag), inklapbaar menu, tegels, inklapbare overzichtsblokken, plattegrond */
.rail .mark{cursor:pointer;background:none;border:0;padding:6px 0 22px}
.rail .mark:hover svg{filter:drop-shadow(0 0 6px rgba(0,215,100,.6))}
.rail-groei{flex:1 1 auto;min-height:12px}
.rail-voet{display:flex;flex-direction:column;gap:4px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08)}
.rail-voet .taal.vlag{margin:6px auto 2px;width:44px;height:44px;min-width:0;min-height:0;padding:0;border-radius:50%;background:#151917;border:1px solid #333B37;display:flex;align-items:center;justify-content:center;overflow:hidden}
.rail-voet .taal.vlag:hover{border-color:#00D764}
.vlag-svg{width:26px;height:auto;border-radius:3px;display:block}
.mg-taal{display:flex;align-items:center;gap:12px}
.mg-taal .vlag-svg{width:32px;flex:none}
@media (min-width:761px){
  body.rail-smal .app{grid-template-columns:64px 1fr}
  body.rail-smal .rail{padding:18px 6px}
  body.rail-smal .rail .mark{padding:6px 0 16px}
  body.rail-smal .rail .mark svg{width:26px}
  body.rail-smal .navbtn{min-height:56px;padding:12px 2px;gap:0}
  body.rail-smal .navbtn span:not(.tel){display:none}
  body.rail-smal .rail .subnav{display:none}
}
.ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none}
.tegelrij{display:flex;gap:10px;flex-wrap:wrap;margin:0 0 16px}
.tegel-sub{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:0 16px 0 12px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);transition:border-color .12s,transform .12s}
.tegel-sub .ico{color:var(--green-ink)}
.tegel-sub:hover{border-color:var(--green)}
.tegel-sub:active{transform:scale(.98)}
.tegel-sub[aria-disabled="true"]{opacity:.55}
.tegel-sub.klein{min-height:42px;font-size:11px;padding:0 12px 0 10px;opacity:.85}
.tegel-sub.klein .ico{width:18px;height:18px}
.tegel-tel{background:var(--green);color:#03210F;border-radius:999px;font-size:11px;font-weight:800;padding:1px 7px}
.tegel-sub .soontag{margin:0}
.ovblok{padding:0 18px}
.ovblok>summary{cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:10px;font-size:11px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);min-height:48px;list-style:none}
.ovblok>summary::-webkit-details-marker{display:none}
.ovblok>summary small{font-family:var(--mono);font-size:12px;font-weight:600;color:var(--ink-2);letter-spacing:0;text-transform:none;margin-left:auto}
.ovblok>summary::after{content:'';width:8px;height:8px;border-right:2px solid var(--ink-3);border-bottom:2px solid var(--ink-3);transform:rotate(45deg);margin:0 4px 4px 2px;flex:none;transition:transform .15s}
.ovblok[open]>summary::after{transform:rotate(-135deg);margin-bottom:-2px}
.ovblok-inhoud{padding:0 0 14px}
.ov-noot{font-size:12px;color:var(--ink-3);margin:-6px 0 12px;font-weight:600}
.ov-strip{margin:0 0 14px}
.ov-lijst{display:flex;flex-direction:column}
.ov-rij{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;padding:10px 4px;border-bottom:1px solid var(--line);text-align:left;min-height:52px;border-radius:0}
.ov-rij:last-child{border-bottom:0}
.ov-rij:not(.statisch):hover{background:var(--surface-2)}
.ov-rij.statisch{cursor:default}
.ov-rij-l{display:flex;flex-direction:column;min-width:0}
.ov-rij-l b{font-size:14px}
.ov-rij-l small{color:var(--ink-3);font-weight:500}
.ov-rij-r{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ov-rij-r b.mono{font-size:13px;margin-left:4px}
.ov-pillen{display:flex;flex-wrap:wrap;gap:8px}
.ov-pil{display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:999px;font-family:var(--mono);font-weight:700}
.ov-nodig-rij{display:flex;justify-content:space-between;gap:10px;padding:8px 4px;border-bottom:1px solid var(--line);font-weight:600}
.ov-nodig-rij:last-of-type{border-bottom:0}
.ov-nodig .klein,.ov-lijst .klein{margin-top:10px}
.ov-ol{margin:0;padding-left:24px;display:grid;gap:8px;font-weight:600}
.ov-ol li b{margin-right:6px}
.ov-ol li small,.ov-ul li small{display:block;color:var(--ink-3);font-weight:500}
.ov-twee{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.ov-ul{margin:0;padding-left:18px;line-height:1.8;font-weight:600}
.leegtekst{color:var(--ink-3);font-weight:500}
/* de plattegrond: Mother en Veg links, F1-F4 boven, F5-F8 onder (zoals CEL ROTATION.pdf) */
.plattegrond{display:grid;grid-template-columns:.7fr repeat(4,1fr);grid-template-areas:"mother f1 f2 f3 f4" "veg f5 f6 f7 f8";gap:12px;margin:0 0 16px}
.kt{min-height:150px;border-radius:16px;border:2px solid var(--line-2);background:var(--surface);padding:14px 14px 12px;display:flex;flex-direction:column;gap:3px;position:relative;text-align:left;color:var(--ink);transition:border-color .12s,transform .12s}
.kt:hover{transform:translateY(-1px)}
.kt .naam{font-size:26px;font-weight:800;letter-spacing:.02em;line-height:1.1}
.kt .gen{font-size:14px;font-weight:700;margin-top:2px}
.kt small{color:var(--ink-3);font-weight:600;font-size:12px}
.kt .oogst{margin-top:auto;padding-top:8px;font-weight:700;font-size:12.5px}
.kt.groeit{border-color:var(--green)}
.kt.bijna{border-color:var(--p-prio-vol);background:var(--warn-bg)}
.kt.bijna .oogst{color:var(--warn)}
.kt.leeg{border-style:dashed;opacity:.7}
.kt.moeder,.kt.veg{background:var(--info-bg);border-color:transparent}
.kt.moeder .naam,.kt.veg .naam{font-size:20px}
.kt.moeder .gen,.kt.veg .gen{font-size:12.5px;font-weight:600;color:var(--ink-2)}
.kt .rang{position:absolute;top:10px;right:10px;width:30px;height:30px;border-radius:50%;background:var(--green);color:#03210F;font-weight:800;font-size:14px;display:flex;align-items:center;justify-content:center}
.kt .rang.later{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line-2)}
.a-tegel .a-icoon .ico{width:26px;height:26px;color:var(--green-ink)}
@media (max-width:1100px){
  .plattegrond{grid-template-columns:1fr 1fr 1fr;grid-template-areas:"mother veg veg" "f1 f2 f3" "f4 f5 f6" "f7 f8 ."}
}
@media (max-width:760px){
  .rail #droogNav,.rail #adminNav,.rail .rail-voet,.rail .rail-groei{display:none}
  .tegelrij{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -4px 14px;padding:2px 4px}
  .tegelrij::-webkit-scrollbar{display:none}
  .tegel-sub{flex:none}
  .plattegrond{grid-template-columns:1fr 1fr;grid-template-areas:"mother veg" "f1 f2" "f3 f4" "f5 f6" "f7 f8";gap:10px}
  .kt{min-height:120px;padding:12px}
  .kt .naam{font-size:22px}
  .ov-twee{grid-template-columns:1fr}
  .ovblok{padding:0 14px}
}
@media (max-width:760px){
  /* vijf knoppen in de onderbalk: elke knop mag smaller worden dan zijn tekst, het label breekt op het zachte koppelteken */
  .rail .navbtn{min-width:0;flex:1 1 0;padding:6px 1px}
  .rail .navbtn span{white-space:normal;text-align:center;line-height:1.15;hyphens:manual;max-width:100%}
}

/* Stap 1b (Levi 19-09): tegelbalk over de volle breedte met gekleurde iconen, kerncijfers opzij, blokken in
   tweeen + een, plattegrond altijd in de PDF-structuur, Admin + vlag naast elkaar, meldingen inklapbaar */
.tegelbalk{display:flex;margin:0 0 12px;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;overflow:hidden}
.tegelbalk .tegel-sub{flex:1 1 0;min-width:0;flex-direction:column;justify-content:center;gap:7px;min-height:86px;padding:10px 6px;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;font-size:11.5px;letter-spacing:.06em}
.tegelbalk .tegel-sub:last-child{border-right:0}
.tegelbalk .tegel-sub:hover{background:var(--surface-2);border-color:var(--line)}
.tegelbalk .tegel-sub b{display:flex;align-items:center;justify-content:center;gap:6px;text-align:center;line-height:1.2}
.tegelbalk .tegel-sub.klein{min-height:86px;opacity:.8}
.ico-vak{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:12px;flex:none}
.ico-vak .ico{width:22px;height:22px}
.tegelbalk .tegel-sub.klein .ico-vak{width:34px;height:34px}
.tegelbalk .tegel-sub.klein .ico-vak .ico{width:18px;height:18px}
.ov-raster{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;align-items:start}
.ov-hoofd,.ov-zij{display:flex;flex-direction:column;gap:12px;min-width:0}
.ov-hoofd .blok,.ov-zij .blok,.ov-hoofd .card{margin:0}
.kern{display:flex;flex-direction:column;margin:0;background:var(--surface);border:1px solid var(--line-2);border-radius:14px;padding:4px 14px}
.kern>div{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line)}
.kern>div:last-child{border-bottom:0}
.kern dt{font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3);margin:0}
.kern dd{margin:0;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em;display:flex;align-items:baseline;gap:6px}
.kern dd small{font-size:11px;color:var(--ink-3);font-weight:600;letter-spacing:0}
.kern .groen dd{color:var(--green-ink)}
.kern .oranje dd{color:var(--warn)}
.kern .klik{cursor:pointer}
.kern-kop{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding:10px 0 4px}
.ovblok{padding:0 14px}
.ovblok>summary{min-height:42px;gap:8px}
.ovblok>summary .ico-vak{width:28px;height:28px;border-radius:8px}
.ovblok>summary .ico-vak .ico{width:16px;height:16px}
.ovblok-inhoud{padding:0 0 12px}
.ov-rij{min-height:46px;padding:8px 2px}
.ov-mini{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.ov-mini li{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600;min-width:0}
.ov-mini li>span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ov-mini small{color:var(--ink-3);font-weight:500;margin-left:auto;white-space:nowrap}
.rangje{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:none}
.rangje.oogst{background:rgba(245,158,11,.18);color:#B45309}
.rangje.plant{background:rgba(34,197,94,.18);color:#15803D}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .rangje.oogst{color:#FCD34D} :root:not([data-theme="light"]) .rangje.plant{color:#4ADE80}}
.ov-twee{gap:12px}
.ov-twee .blok{margin:0}
/* plattegrond: Veg links, F1-F4 boven, Mother linksonder, F5-F8 onder - op elke breedte dezelfde opbouw als in de faciliteit */
.plattegrond-scroll{margin:0 0 12px}
.plattegrond{grid-template-columns:.7fr repeat(4,1fr);grid-template-areas:"veg f1 f2 f3 f4" "mother f5 f6 f7 f8";gap:10px;margin:0}
.kt{min-height:124px;padding:12px 12px 10px;gap:2px}
.kt .naam{font-size:22px}
.kt .gen{font-size:13px}
.kt .oogst{font-size:12px;padding-top:6px}
.kt .rang{top:8px;right:8px;width:26px;height:26px;font-size:13px}
@media (max-width:1100px){
  .plattegrond{grid-template-columns:.7fr repeat(4,1fr);grid-template-areas:"veg f1 f2 f3 f4" "mother f5 f6 f7 f8"}
  .ov-raster.teelt{grid-template-columns:1fr}
}
/* menu-voet: Admin en de vlag naast elkaar als ronde knoppen; het Admin-submenu klapt erboven open */
.rail-voet{padding-top:8px}
.rail-voet-rij{display:flex;justify-content:center;align-items:center;gap:8px;padding:6px 0 2px}
.rail-voet .navbtn.rond{width:44px;height:44px;min-height:0;padding:0;border-radius:50%;background:#151917;border:1px solid #333B37;flex:none;gap:0}
.rail-voet .navbtn.rond svg{width:20px;height:20px}
.rail-voet .navbtn.rond span:not(.tel){display:none}
.rail-voet .navbtn.rond::before{display:none}
.rail-voet .navbtn.rond:hover{border-color:#00D764;color:#fff}
.rail-voet .navbtn.rond[aria-current="page"]{background:var(--green);border-color:var(--green);color:#03210F}
.rail-voet .navbtn.rond .tel{top:-4px;right:-4px}
.rail-voet .taal.vlag{margin:0}
@media (min-width:761px){body.rail-smal .rail-voet-rij{flex-direction:column;gap:6px}}
/* meldingen bovenin inklapbaar: een knop klapt de chips samen tot een korte samenvatting */
.chips-knop{width:32px;height:32px;border-radius:50%;border:1px solid var(--line-2);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;flex:none;color:var(--ink-3);cursor:pointer}
.chips-knop svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .15s}
.chips-knop:hover{border-color:var(--ink-3);color:var(--ink)}
body.chips-dicht .chips-knop svg{transform:rotate(180deg)}
#systeemKort{display:none}
body.chips-dicht #systeem{display:none}
body.chips-dicht #systeemKort{display:inline-flex;align-items:center;gap:6px}
@media (max-width:760px){
  .tegelbalk .tegel-sub{min-height:70px;font-size:9.5px;padding:8px 2px;letter-spacing:.03em;gap:5px}
  .tegelbalk .ico-vak{width:32px;height:32px}
  .tegelbalk .ico-vak .ico{width:18px;height:18px}
  .tegelbalk .tegel-sub .soontag{display:none}
  .ov-raster{grid-template-columns:1fr}
  .plattegrond-scroll{overflow-x:auto;margin:0 -14px 12px;padding:0 14px;scrollbar-width:none}
  .plattegrond{min-width:600px;grid-template-columns:.7fr repeat(4,1fr);grid-template-areas:"veg f1 f2 f3 f4" "mother f5 f6 f7 f8"}
  .kt{min-height:108px;padding:10px}
  .kt .naam{font-size:19px}
  .ov-twee{grid-template-columns:1fr 1fr}
}
.ovblok>summary>span:first-child{display:inline-flex;align-items:center;gap:8px;min-width:0}
.a-tegel .a-icoon .ico-vak{width:40px;height:40px}

/* Stap 1c (Levi 19-09, tweede ronde): een accentkleur, iconen links en groter, tegels lichter, thema-knop */
.ico-vak{background:var(--green-soft);color:var(--green-ink)}
.tegelbalk .tegel-sub{flex-direction:row;justify-content:flex-start;gap:12px;min-height:66px;padding:0 16px;font-size:14px;letter-spacing:.01em;text-transform:none}
.tegelbalk .tegel-sub b{justify-content:flex-start;text-align:left;font-size:14.5px;font-weight:800}
.tegelbalk .tegel-sub .ico-vak,.tegelbalk .tegel-sub.klein .ico-vak{width:40px;height:40px;border-radius:12px}
.tegelbalk .tegel-sub .ico-vak .ico,.tegelbalk .tegel-sub.klein .ico-vak .ico{width:24px;height:24px}
.tegelbalk .tegel-sub.klein{font-size:13px}
.a-tegel .a-icoon .ico-vak{width:44px;height:44px}
.a-tegel{flex-direction:row;align-items:center;gap:14px;min-height:0;padding:16px}
.a-tegel b{font-size:15px}
.a-tegel .a-tekst{display:flex;flex-direction:column;gap:3px;min-width:0}
/* geforceerd donker thema (knop bovenin) = dezelfde kleuren als het apparaat-donker */
:root[data-theme="dark"]{
  --green:#00E36B; --green-ink:#4DEE9A; --green-soft:#0E2A1C;
  --ink:#EEF1EF; --ink-2:#B3BBB8; --ink-3:#7E8785;
  --surface:#1B211F; --surface-2:#242B28; --ground:#0B0D0C;
  --line:#2F3733; --line-2:#3D4743;
  --warn:#F0B25A; --warn-bg:#2E2312; --crit:#F08078; --crit-bg:#301715;
  --info:#8AB4FF; --info-bg:#14213D;
  --p-laag:#4ADE80; --p-laag-bg:#0F2A1A; --p-prio:#FCD34D; --p-prio-bg:#3A2A06; --p-prio-vol:#F59E0B; --p-prio-op:#1F1300;
  --p-spoed:#F87171; --p-spoed-bg:#3B1212; --p-spoed-vol:#DC2626; --p-spoed-op:#FFFFFF;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  --g1:#4DEE9A;--g2:#8AB4FF;--g3:#FB923C;--g4:#C4B5FD;--g5:#67E8F9;--g6:#F87171;--g7:#F0B25A;--g8:#F9A8D4;
  color-scheme:dark;
}
:root[data-theme="light"]{color-scheme:light}
.chips-knop svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#themaKnop svg{width:16px;height:16px}
/* Stap 2: Cultivation - kamerpagina, tijdlijn, formulier, Dry + Trim */
.kamerkop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 12px}
.kamerkop h3{margin:0;font-size:22px;flex:1 1 auto;min-width:0}
.kamerkop-gen{font-weight:600;color:var(--ink-2);font-size:16px}
.tijdlijn{padding:14px 16px}
.tl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}
.tl-stap{padding:10px 10px 8px;border-radius:12px;background:var(--surface-2);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;min-width:0}
.tl-stap b{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3)}
.tl-stap span{font-size:13.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tl-stap.klaar{opacity:.65}
.tl-stap.nu{border-color:var(--green);background:var(--green-soft)}
.tl-stap.nu b{color:var(--green-ink)}
.tl-klaar{margin:10px 0 0;font-size:12.5px;color:var(--ink-3);font-weight:600}
.kamer-acties{margin:0 0 12px;gap:8px;flex-wrap:wrap}
.kamer-acties .actie{min-height:48px}
.klein-actie{min-height:40px;padding:0 14px}
.log-invoer{display:flex;gap:8px;margin:0 0 10px}
.log-invoer input{flex:1 1 auto;min-width:0;min-height:44px}
.teelt-form .velden2{gap:10px 14px;margin-bottom:6px}
.teelt-form .veld input,.teelt-form .veld select{min-height:44px}
.teelt-form .eyebrow{margin:12px 0 6px}
.gentabel td small{display:block;color:var(--ink-3);font-weight:500}
.gentabel .weken{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;font-size:12.5px;color:var(--ink-3)}
.gentabel .weken input{width:56px;min-height:38px;text-align:center;font-family:var(--mono)}
.droog-groep{margin-bottom:14px}
.droog-groep .pv-kop small{color:var(--ink-3);font-weight:600;margin-left:4px}
.droog-raster{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px}
.droogkaart{margin:0;padding:14px}
.droogkaart h4{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.droogkaart .droog-naam{font-size:15px}
.droogkaart h4 small{width:100%;color:var(--ink-3);font-weight:600;font-size:12px;letter-spacing:0;text-transform:none}
.droog-datums{display:grid;grid-template-columns:1fr 1fr;gap:6px 12px}
.droog-datums div{display:flex;flex-direction:column}
.droog-datums small{font-size:10.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.droog-datums b{font-size:13.5px}
.droogkaart .knoprij{margin-top:10px;gap:6px;flex-wrap:wrap}
.droogkaart .knoprij .actie{min-height:40px;padding:0 12px;font-size:12.5px}
.leeg.klein{padding:10px 0;font-size:13px}
@media (max-width:760px){
  .tl{grid-template-columns:repeat(2,1fr)}
  .tegelbalk .tegel-sub{gap:8px;padding:0 10px;font-size:12px}
  .tegelbalk .tegel-sub .ico-vak{width:32px;height:32px}
  .tegelbalk .tegel-sub .ico-vak .ico{width:18px;height:18px}
  .tegelbalk .tegel-sub b{font-size:12px}
}
/* menu links (Levi 19-09): submenu's kleiner, ingesprongen, met een randje en een 90-graden-hoekje ervoor */
.rail .subnav.open{padding:2px 0 8px 0;margin:0 0 6px}
.rail .subnav .subbtn{position:relative;text-align:left;margin-left:14px;padding:0 8px 0 18px;min-height:34px;font-size:9.5px;letter-spacing:.05em;border:1px solid rgba(255,255,255,.09);border-radius:8px;background:rgba(255,255,255,.02)}
.rail .subnav .subbtn::before{content:'';position:absolute;left:-9px;top:-8px;width:9px;height:calc(50% + 8px);border-left:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);border-bottom-left-radius:3px}
.rail .subnav .subbtn:first-child::before{top:-4px;height:calc(50% + 4px)}
.rail .subnav .subbtn::after{content:'';position:absolute;left:7px;top:50%;width:5px;height:5px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;transform:translateY(-50%) rotate(45deg);opacity:.55}
.rail .subnav .subbtn[aria-current="page"]{border-color:var(--green)}
.rail .subnav .subbtn[aria-current="page"]::after{opacity:1}
@media (max-width:760px){
  #subbar .subbtn{margin-left:0;padding:0 14px;border-radius:999px}
  #subbar .subbtn::before,#subbar .subbtn::after{display:none}
}
/* Stap 3-5 (Levi 19-09): kluislijst hebben (gereserveerd) / nog te maken, Packing te produceren, Nodig voor deze orders */
.kluisblok h4{flex-wrap:wrap}
.kluisblok h4 small{display:block;width:100%;font-weight:500;color:var(--ink-3);text-transform:none;letter-spacing:0;font-size:12px;margin-top:2px}
.kluistabel .kstrain td{background:var(--surface-2);padding:8px 12px}
.kluistabel .kstrain b{margin-left:8px;font-size:14px}
.kluistabel .kstrain .pill{margin-left:8px}
.kluistabel .kstrain .ptot{float:right;font-family:var(--mono);font-weight:700;font-size:14px}
.kluistabel td b{font-family:var(--mono);font-size:16px}
.kluistabel td small{color:var(--ink-3);font-weight:600}
.kluistabel td.tekort{color:var(--crit);font-weight:800;font-family:var(--mono)}
.kluistabel.breed td{white-space:nowrap}
.kluistabel.breed td small{display:block;font-size:11.5px}
.zij-knop{width:100%;justify-content:center;display:inline-flex;align-items:center;gap:6px;min-height:44px}
.ov-rij-r b.groot{font-size:20px}
.ov-rij-r b.groot + small{color:var(--ink-3);font-weight:600}
.nodigblok{margin:0}
.nodig-uitleg{margin:0 0 8px}
.nodigtabel td.oranje{color:var(--warn);font-weight:800;font-family:var(--mono)}
.nodigtabel td.tekort{color:var(--crit);font-weight:800;font-family:var(--mono)}
.nodig-knoppen{margin-top:10px;gap:8px}
/* Levi 19-09 (derde ronde): emoji's in kleur voor submenu's en bloktitels; licht thema met meer contrast */
.ico-vak.emoji{font-size:22px;line-height:1;background:var(--surface-2);border:1px solid var(--line);font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif}
.tegelbalk .tegel-sub .ico-vak.emoji{font-size:26px;width:44px;height:44px}
.ovblok>summary .ico-vak.emoji{font-size:16px;width:28px;height:28px}
.a-tegel .a-icoon .ico-vak.emoji{font-size:24px;width:44px;height:44px}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .card,:root:not([data-theme="dark"]) .blok,:root:not([data-theme="dark"]) .tegelbalk,:root:not([data-theme="dark"]) .kern,:root:not([data-theme="dark"]) .kt{box-shadow:0 1px 2px rgba(11,13,12,.06),0 6px 18px rgba(11,13,12,.06)}}
:root[data-theme="light"] .card,:root[data-theme="light"] .blok,:root[data-theme="light"] .tegelbalk,:root[data-theme="light"] .kern,:root[data-theme="light"] .kt{box-shadow:0 1px 2px rgba(11,13,12,.06),0 6px 18px rgba(11,13,12,.06)}
/* Stap 4 (Levi 19-09): de inpakvloer als plattegrond met versleepbare zitplaatsen, ingeklapte kaartjes, joints, einde-dag-scan */
.ip-vloer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px;align-items:start}
.ip-slot{min-height:72px;border:1px dashed var(--line-2);border-radius:12px;display:flex;align-items:stretch;transition:border-color .12s,background .12s}
.ip-slot.leeg{opacity:.7}
.ip-slot.doel{border-color:var(--green);border-style:solid;background:var(--green-soft)}
.ip-slot.vast{border-style:solid;border-color:transparent;background:var(--surface-2);align-items:center;justify-content:center;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);font-size:11px}
.ip-slot>.ip-kaart{flex:1 1 auto;min-width:0}
.ip-kaart.dicht .ip-kaart-lijf{display:none}
.ip-kaart[draggable="true"]{cursor:grab}
.ip-kaart.sleept{opacity:.5}
.ip-kaart-kop .ip-verplaats{margin-left:auto;flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink-3)}
.ip-kaart-kop .ip-verplaats:hover{border-color:var(--green);color:var(--green-ink)}
body.ip-kiesplek .ip-slot:not(.vast){border-color:var(--green);border-style:solid;cursor:pointer}
.ip-zonderplek{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-start;margin:0 0 12px;padding:10px;border:1px dashed var(--line-2);border-radius:12px;min-height:56px}
.ip-zonderplek>p{margin:0;width:100%;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ip-zonderplek .ip-kaart{flex:0 0 auto;min-width:180px}
.ip-kaart-hint{padding:8px 12px 10px;font-size:12px;color:var(--ink-3)}
.ip-jointrij{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-weight:600}
.ip-jointrij:last-child{border-bottom:0}
.ip-jointrij small{color:var(--ink-3);font-weight:500;margin-left:6px}
.ip-dagscan textarea{width:100%;min-height:140px;font-family:var(--mono);font-size:13px;border:1px solid var(--line-2);border-radius:10px;padding:10px;background:var(--surface);color:var(--ink)}
@media (max-width:760px){
  .ip-vloer{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ip-slot.vast{min-height:44px}
}
.ip-kaart-rij{display:flex;align-items:center;gap:4px;padding-right:6px}
.ip-kaart-rij .ip-kaart-kop{flex:1 1 auto;min-width:0}
.ip-kaart-rij .ip-verplaats{flex:none;width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;font-size:14px;color:var(--ink-3);background:var(--surface)}
.ip-kaart-rij .ip-verplaats:hover{border-color:var(--green);color:var(--green-ink)}
/* Levi 19-09 (vierde ronde): geen pijltje bij de submenu's; Vault-kerncijfers uitgelijnd met de lijst */
.rail .subnav .subbtn::after{display:none}
.rail .subnav .subbtn{padding-left:12px}
.ov-raster.vault .ov-zij{padding-top:46px}
.kluisblok h4 .zij-knop{margin-left:auto;width:auto;min-height:38px;padding:0 12px}

/* plan 19-09 (Levi): Rooms = uitgebreide plattegrond; Moeders & stock krap; Dry + Trim in kolommen; klaar om te trimmen */
.plattegrond.uitgebreid{grid-template-columns:.8fr repeat(4,1fr)}
.plattegrond.uitgebreid .kt{min-height:176px}
.kt.groot .kt-feiten{display:flex;flex-wrap:wrap;gap:2px 10px;font-size:12px;font-weight:600;color:var(--ink-3);margin-top:2px}
.kt.groot .kt-tl{display:grid;grid-template-columns:1fr 1fr;gap:3px 8px;margin-top:8px;padding-top:7px;border-top:1px dashed var(--line-2)}
.kt.groot .kt-tl span{display:flex;flex-direction:column;min-width:0}
.kt.groot .kt-tl small{font-size:10px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.kt.groot .kt-tl b{font-size:12.5px;font-weight:700;white-space:nowrap}
.kt.groot .oogst{padding-top:6px}
.gentabel.krap td,.gentabel.krap th{padding:4px 8px;font-size:13px}
.gentabel.krap .weken{gap:3px;font-size:12px}
.gentabel.krap .weken input{width:46px;min-height:32px;padding:0 2px;font-size:12.5px}
.gentabel.krap td.midden{text-align:center;width:64px}
.gentabel.krap td small{display:inline;color:var(--ink-3);font-weight:500}
.gentabel.krap .gen-noot{margin-left:4px}
.gentabel.krap .pvink{display:inline-flex;margin:0}
.gentabel.krap .pvink input{width:20px;height:20px}
.krap-blok{padding:12px 14px}
.krap-blok h4 .klein{margin-left:auto;min-height:30px;padding:0 10px}
.droog-indeling{display:grid;grid-template-columns:1.1fr 1fr;gap:12px;align-items:start}
.droog-links,.droog-rechts{display:flex;flex-direction:column;gap:12px;min-width:0}
.droog-indeling .droog-groep{margin-bottom:0}
.droog-indeling .droog-raster{grid-template-columns:1fr}
.droog-indeling .blok,.droog-indeling .kern{margin:0}
.trim-klaar h4{flex-wrap:wrap}
.klein-actie{min-height:34px;padding:0 12px;font-size:12.5px}
@media (max-width:900px){.droog-indeling{grid-template-columns:1fr}.plattegrond.uitgebreid .kt{min-height:0}}

/* Levi 19-09 (2): menu-icoontjes, lichte achtergrond minder fel en tegels duidelijker, inpakvloer 2/3 + cijfers ernaast, joint-plek */
@media (min-width:801px){.app{grid-template-columns:150px 1fr}}
.nav-ico{font-style:normal;font-size:25px;line-height:1;font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;opacity:.82;transition:opacity .15s,transform .15s}
.navbtn:hover .nav-ico,.navbtn[aria-current="page"] .nav-ico{opacity:1;transform:scale(1.06)}
body.rail-smal .navbtn .nav-ico{font-size:23px}
.rail-voet .navbtn.rond .nav-ico{font-size:19px}
.rail .subnav .subbtn{display:flex;align-items:center;gap:7px;text-transform:none;letter-spacing:0;font-size:10.5px;font-weight:700;line-height:1.15;padding:5px 6px 5px 7px;min-height:34px;text-align:left;margin-left:14px}
.rail .subnav .subbtn .sub-ico{font-style:normal;font-size:14px;line-height:1;flex:none;font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif;opacity:.9}
.rail .subnav .subbtn span{min-width:0;overflow-wrap:anywhere;hyphens:manual}
.rail .subnav .subbtn[aria-current="page"] .sub-ico{opacity:1}
/* licht thema: de vlakken minder fel wit, de tegels wit met een duidelijke rand op een grijzere ondergrond */
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){--ground:#D9DFDB;--surface-2:#EEF2F0;--line-2:#BCC5C0}
  :root:not([data-theme="dark"]) .card{background:#F2F4F3}
  :root:not([data-theme="dark"]) .blok{background:var(--surface);border-color:var(--line-2)}
  :root:not([data-theme="dark"]) .blok .blok{background:var(--surface-2)}
}
:root[data-theme="light"]{--ground:#D9DFDB;--surface-2:#EEF2F0;--line-2:#BCC5C0}
:root[data-theme="light"] .card{background:#F2F4F3}
:root[data-theme="light"] .blok{background:var(--surface);border-color:var(--line-2)}
:root[data-theme="light"] .blok .blok{background:var(--surface-2)}
/* de submenu-tegels: alle labels op dezelfde regelhoogte, ook de kleine (Edit stock, Count) */
.tegelbalk .tegel-sub.klein{opacity:1;font-size:14px}
.tegelbalk .tegel-sub.klein b{font-size:14.5px;color:var(--ink-2)}
.tegelbalk .tegel-sub.klein .ico-vak.emoji{opacity:.8}
.tegelbalk .tegel-sub b{white-space:normal;line-height:1.15}
/* Vault: kerncijfers op dezelfde hoogte als de kluistabel */
.ov-raster.vault .ov-zij{padding-top:0}
/* Packing (Levi 19-09): vloer links (2/3), cijfers rechts; kleine naamvakjes, 5 naast elkaar; joint-plek onder de vloer; de bank ernaast */
.ip-datum{margin:0 0 6px}
.ip-indeling{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr);gap:12px;align-items:start;margin-top:10px}
.ip-links,.ip-rechts{display:flex;flex-direction:column;gap:12px;min-width:0}
.ip-rechts .kern,.ip-rechts .ip-groep{margin:0}
.ip-rechts .ip-groep{padding:12px 14px;border:1px solid var(--line-2);border-radius:14px;background:var(--surface)}
.ip-rechts .ip-groep summary{min-height:0!important}
.ip-vloer-vak{background:var(--ground);border:1px solid var(--line-2);border-radius:14px;padding:10px 12px 12px}
.ip-vak-kop{display:flex;align-items:center;gap:8px;margin:0 0 8px;font-size:10.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.ip-vak-kop .ico-vak{width:26px;height:26px;border-radius:8px}
.ip-vak-kop .ico-vak.emoji{font-size:15px}
.ip-vak-kop .tegel-tel{margin-left:2px}
.ip-vloer{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:0}
.ip-slot{min-height:50px;border-radius:10px;border-color:var(--line-2)}
.ip-slot.leeg{opacity:.55;background:rgba(255,255,255,.35)}
.ip-slot.vast{font-size:10px;background:rgba(255,255,255,.5);border:1px solid var(--line-2)}
.ip-kaart{border-radius:10px;border-color:var(--line-2)}
.ip-kaart.actief{border:2px solid var(--green)}
.ip-kaart-kop{min-height:40px;padding:4px 6px 4px 10px;gap:6px}
.ip-kaart-naam{font-size:13px;font-weight:800;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-kaart-kop .pill{flex:none}
.ip-kaart-n{flex:none;min-width:22px;height:22px;border-radius:999px;background:var(--green);color:#03210F;font-size:11px;font-weight:800;display:inline-grid;place-items:center;padding:0 6px}
.ip-kaart-toe{display:flex;flex-direction:column;gap:3px;padding:0 10px 8px;font-size:12px;border-top:1px solid var(--line);padding-top:6px;margin-top:0}
.ip-kaart-toe>span{display:flex;align-items:center;gap:6px;min-width:0}
.ip-kaart-toe .ip-toe-naam{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.ip-kaart-toe small{color:var(--ink-3)}
.ip-kaart-toe b{flex:none;font-variant-numeric:tabular-nums}
.ip-kaart-rij{padding-right:4px}
.ip-kaart-rij .ip-verplaats{width:26px;height:26px;font-size:12px}
@media (hover:hover){.ip-kaart-rij .ip-verplaats{opacity:0;transition:opacity .12s}.ip-kaart:hover .ip-verplaats,.ip-kaart:focus-within .ip-verplaats,body.ip-kiesplek .ip-verplaats{opacity:1}}
.ip-jointvak{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:10px;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line-2)}
.ip-slot.joint{flex-direction:column;align-items:stretch;padding:8px 10px 10px;min-height:64px;border-style:dashed;opacity:1;background:rgba(255,255,255,.35)}
.ip-slot.joint:not(.leeg){border-style:solid;background:transparent}
.ip-slot.joint .ip-vak-kop{margin:0 0 6px}
.ip-slot-hint{font-size:11.5px;color:var(--ink-3);font-weight:500;line-height:1.35}
.ip-jointcijfers{min-width:0;padding:8px 10px 6px}
.ip-jointcijfers .ip-jointrij{padding:5px 0;font-size:12.5px}
.ip-zonderplek{margin:0;padding:10px 12px 12px;border:1px dashed var(--line-2);border-radius:14px;background:transparent;min-height:0}
.ip-zonderplek .ip-vak-kop{margin-bottom:8px}
.ip-zonderplek .ip-kaart{flex:0 0 auto;min-width:150px;max-width:230px}
.ip-zonderplek.leeg{opacity:.75}
.ip-knoppen{margin:0}
@media (max-width:1000px){.ip-indeling{grid-template-columns:1fr}.ip-vloer{grid-template-columns:repeat(3,minmax(0,1fr))}.ip-jointvak{grid-template-columns:1fr}}

/* Levi 19-09 (3): lege kamers in kleur (rood = niets gepland, blauw = volgende ronde gepland, met datum) */
.kt.leeg{opacity:1;border-style:dashed;background:var(--crit-bg);border-color:rgba(194,38,31,.35)}
.kt.leeg .leegtekst{color:var(--crit)}
.kt.gepland{border-style:dashed;background:var(--info-bg);border-color:rgba(29,78,216,.35)}
.kt.gepland .leegtekst{color:var(--info)}
.kt.gepland small{color:var(--ink-2);font-weight:700}
.kt.leeg small,.kt.gepland small{white-space:normal}

/* Levi 19-09 (4): submenu-tekst passend, kluis in twee kolommen met een vakje per strain, kamertegels (planten rechtsboven,
   boer/zaadje + "over N dagen"), Dry + Trim in aanbouw */
.rail .subnav .subbtn{margin-left:10px;padding:6px 8px 6px 7px;min-height:36px;text-wrap:balance}
.rail .subnav .subbtn::before{left:-7px;width:7px}
.navbtn[aria-disabled="true"]{opacity:.62}
.navbtn .bouwtag{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:#F59E0B;margin-top:-4px;line-height:1.1}
body.rail-smal .navbtn .bouwtag{display:none}
.mg-taal{}
.kluis-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.kluis-kaart{border:1px solid var(--line-2);border-radius:10px;background:var(--surface);padding:6px 10px 4px;min-width:0}
.kluis-kop{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:2px 0 5px;border-bottom:1px solid var(--line)}
.kluis-kop b{font-size:13.5px;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kluis-kop .ptot{font-family:var(--mono);font-weight:700;font-size:14px}
.kluis-kop .ptot small{color:var(--ink-3);font-weight:600;font-family:var(--mono)}
.kluis-kop .pill{font-size:10.5px;padding:2px 8px}
.kluis-mini{width:100%;border-collapse:collapse;font-size:12.5px}
.kluis-mini td{padding:3px 0;border-bottom:1px solid var(--line)}
.kluis-mini tr:last-child td{border-bottom:0}
.kluis-mini td.n{text-align:right;white-space:nowrap;font-family:var(--mono);padding-left:8px}
.kluis-mini td.n b{font-size:13.5px}
.kluis-mini td small{color:var(--ink-3);font-weight:600}
.kluis-mini td.tekort{color:var(--crit);font-weight:800}
.kluis-mini td.nul{color:var(--ink-3)}
.kluis-mini tr.klik{cursor:pointer}
.kluis-mini tr.klik:hover td{background:var(--surface-2)}
.alias{color:var(--ink-3);font-weight:600;font-size:.86em}
.kt .kt-planten{position:absolute;top:8px;right:8px;font-size:12px;font-weight:800;background:var(--surface-2);border:1px solid var(--line-2);border-radius:999px;padding:2px 8px;line-height:1.3;font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',var(--sans)}
.kt .rang{position:static;display:inline-flex;width:22px;height:22px;font-size:12px;margin-right:6px;vertical-align:-4px}
.kt .oogst{font-size:13px;font-weight:700;display:flex;align-items:center;gap:5px}
.kt .oogst .emo{font-size:16px;line-height:1;font-family:'Segoe UI Emoji','Apple Color Emoji','Noto Color Emoji',sans-serif}
.kt.gepland .oogst{color:var(--info)}
.kt.bijna .oogst{color:var(--warn)}
@media (max-width:760px){.kluis-raster{grid-template-columns:1fr}}

/* submenu-tekst: iets kleiner, meer ruimte (Levi 19-09: 'Voorraad bewerken' moet netjes passen) */
@media (min-width:801px){.app{grid-template-columns:160px 1fr}}
.rail .subnav .subbtn{margin-left:8px;padding:6px 6px;gap:6px;font-size:10px}
.rail .subnav .subbtn::before{left:-6px;width:6px}


/* Levi 19-09 (5): geen hoekje bij de submenu's; laatst-besteld-balk bij Nieuwe order; laatste inpakdag */
.rail .subnav .subbtn::before{display:none}
.nw-kop{margin:0 0 8px}
.klantrecent{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
.klantchip{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:48px;padding:6px 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font:inherit;color:inherit;cursor:pointer;transition:border-color .12s}
.klantchip b{font-size:13.5px;font-weight:800}
.klantchip small{font-size:11px;color:var(--ink-3);font-weight:600}
.klantchip:hover{border-color:var(--green)}
.ip-datum.vorige{color:var(--warn)}

/* Levi 19-09 (6): scanbalk met Scan in (groen) / Scan uit (rood), grote knop Alles scannen → T&T, meer lucht rond de tegelbalk */
.ip-balk{gap:10px}
.ip-modus{flex:none;min-width:150px;min-height:60px;border-radius:12px;border:2px solid var(--line-2);background:var(--surface);display:flex;flex-direction:column;align-items:flex-start;justify-content:center;padding:6px 14px;gap:2px;font:inherit;color:var(--ink-3);cursor:pointer;text-align:left;transition:background .12s,border-color .12s}
.ip-modus-kop{font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase}
.ip-modus b{font-size:14px;font-weight:800;color:var(--ink);max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-modus.in.aan{background:var(--green);border-color:var(--green);color:#03210F}
.ip-modus.in.aan b{color:#03210F}
.ip-modus.uit:not(.aan){border-color:rgba(194,38,31,.45);color:var(--crit)}
.ip-modus.uit.aan{background:#DC2626;border-color:#DC2626;color:#fff}
.ip-modus.uit.aan b{color:#fff}
.ip-balk.uit .scanveld input{border-color:#DC2626}
.ip-balk.uit .scanveld input:focus{box-shadow:0 0 0 3px rgba(220,38,38,.25)}
.ip-alles-tt{width:100%;min-height:68px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;font-size:15px;border-radius:14px}
.ip-alles-tt small{font-weight:600;font-size:12px;opacity:.85}
.ip-alles-tt:disabled{opacity:.5;cursor:default}
.tegelbalk{margin:0 0 24px}
.tegelbalk .tegel-sub{min-height:78px;padding:12px 16px}
@media (max-width:760px){.ip-modus{min-width:0;flex:1 1 40%}}

/* Telefoon (Levi 19-09): alles in de vakjes, minder scrollen. Plattegrond 2 kolommen, tegelbalk 2x2, kerncijfers als raster,
   kluisvakjes met volledige namen, inpakvloer 2 kolommen zonder lege plekken. */
@media (max-width:760px){
  .tegelbalk{display:grid;grid-template-columns:1fr 1fr;border-radius:14px;margin:0 0 14px}
  .tegelbalk .tegel-sub,.tegelbalk .tegel-sub.klein{min-height:56px;padding:8px 10px;gap:8px;border-right:0;border-bottom:1px solid var(--line);font-size:12.5px}
  .tegelbalk .tegel-sub:nth-child(odd){border-right:1px solid var(--line)}
  .tegelbalk .tegel-sub:nth-last-child(-n+2){border-bottom:0}
  .tegelbalk .tegel-sub:nth-child(odd):last-child{grid-column:1 / -1;border-right:0}
  .tegelbalk .tegel-sub b{font-size:12.5px;white-space:normal}
  .tegelbalk .tegel-sub .ico-vak,.tegelbalk .tegel-sub .ico-vak.emoji,.tegelbalk .tegel-sub.klein .ico-vak{width:34px;height:34px;font-size:20px;border-radius:10px}
  .kern{display:grid;grid-template-columns:1fr 1fr;gap:0 12px;padding:4px 12px}
  .kern>div{flex-direction:column;align-items:flex-start;gap:0;padding:7px 0;border-bottom:1px solid var(--line)}
  .kern>div:nth-last-child(-n+2){border-bottom:0}
  .kern>div:nth-child(odd):last-child{grid-column:1 / -1}
  .kern dt{font-size:9.5px;letter-spacing:.1em}
  .kern dd{font-size:18px}
  .ov-twee{grid-template-columns:1fr}
  .ov-raster{gap:10px}
  .blok{padding:12px}
  .blok h4{flex-wrap:wrap}
  .plattegrond,.plattegrond.uitgebreid{grid-template-columns:1fr 1fr;grid-template-areas:none;gap:8px}
  .plattegrond .kt{grid-area:auto!important;min-height:0;padding:10px 10px 8px;gap:2px}
  .plattegrond-scroll{overflow:visible}
  .kt .naam{font-size:18px}
  .kt .gen{font-size:12.5px;white-space:normal}
  .kt small{font-size:11px}
  .kt .oogst{font-size:12px}
  .kt .kt-planten{font-size:11px;padding:1px 6px;top:6px;right:6px}
  .kt.groot .kt-feiten{font-size:11px}
  .kt.groot .kt-tl{grid-template-columns:1fr 1fr;gap:2px 6px}
  .kt.groot .kt-tl b{font-size:11px;white-space:normal}
  .kt.groot .kt-tl small{font-size:9px}
  .kluis-kaart{padding:6px 8px 4px}
  .kluis-kop b{white-space:normal;line-height:1.2}
  .kluis-mini{font-size:12px}
  .ov-raster.vault .ov-zij{padding-top:0}
  .ip-indeling{margin-top:8px}
  .ip-vloer{grid-template-columns:1fr 1fr;gap:6px}
  body:not(.ip-kiesplek) .ip-slot.leeg,body:not(.ip-kiesplek) .ip-slot.vast{display:none}
  .ip-vloer-vak,.ip-zonderplek{padding:8px 10px 10px}
  .ip-kaart-naam{font-size:12.5px}
  .ip-kaart-kop{min-height:38px;padding:4px 4px 4px 8px}
  .ip-zonderplek .ip-kaart{min-width:0;max-width:none;flex:1 1 44%}
  .ip-jointvak{grid-template-columns:1fr;gap:8px}
  .ip-modus{min-height:52px;padding:4px 10px}
  .ip-modus b{font-size:13px;max-width:130px}
  .ip-alles-tt{min-height:60px}
  .droog-indeling{gap:10px}
  .klantrecent{gap:6px}
  .klantchip{min-height:42px;padding:4px 12px}
}
@media (max-width:760px){.plattegrond,.plattegrond.uitgebreid{min-width:0}.plattegrond-scroll{overflow:visible;margin:0 0 12px;padding:0}}