:root{
  --bg:#f2f4ee; --paper:#ffffff; --ink:#1b261f; --ink2:#4d5a52; --mute:#7b877f;
  --line:#d9dfd6; --line2:#c3ccbf; --accent:#2f6b3a; --accent-ink:#ffffff; --accent-soft:#e4efe4;
  --amber:#b87a12; --amber-soft:#fbf1dc; --red:#a8402f; --red-soft:#f8e6e2;
  --font-d:'Outfit',system-ui,sans-serif; --font-b:'Source Sans 3','Segoe UI',system-ui,sans-serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#131a15; --paper:#1b241e; --ink:#eaf0ea; --ink2:#b9c4bb; --mute:#8a978d;
    --line:#2b372f; --line2:#3a483e; --accent:#6fb57c; --accent-ink:#0f1a12; --accent-soft:#213229;
    --amber:#e2a84a; --amber-soft:#3a2f18; --red:#e07a67; --red-soft:#3d221d;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font-b);font-size:17px;line-height:1.45}
button,input,select{font:inherit;color:inherit}
h1,h2,h3{font-family:var(--font-d);margin:0;line-height:1.15}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.lbl{font-family:var(--font-d);font-size:12.5px;text-transform:uppercase;letter-spacing:.1em;color:var(--mute);font-weight:600;margin-bottom:6px}
.hint{font-size:13.5px;color:var(--mute)}
.knop{padding:10px 16px;border-radius:10px;border:1px solid var(--line2);background:var(--paper);cursor:pointer}
.knop:hover{border-color:var(--accent)}
.knop.pri{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.knop:disabled{opacity:.45;cursor:not-allowed}
.veld{width:100%;padding:10px 12px;border:1px solid var(--line2);border-radius:10px;background:var(--paper)}
.veld:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.demo-band{background:var(--amber-soft);color:var(--amber);text-align:center;font-size:14px;padding:5px 12px;font-weight:600}

/* ---- login ---- */
.login{min-height:100%;display:grid;place-items:center;padding:20px}
.login .kaart{width:min(380px,100%);background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:26px;display:flex;flex-direction:column;gap:14px;box-shadow:0 18px 50px rgba(27,38,31,.12)}
.login h1{font-size:30px}
.login .code{font-size:22px;text-align:center;text-transform:lowercase}
.lveld{display:flex;flex-direction:column;gap:4px}
.lveld .lbl{margin:0}
.login .pin{letter-spacing:.4em}
.toetsen{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.toetsen button{height:64px;border-radius:14px;border:1px solid var(--line2);background:var(--bg);font-family:var(--font-d);font-size:26px;cursor:pointer}
.toetsen button:active{background:var(--accent-soft)}
.login .fout{color:var(--red);text-align:center;min-height:22px;font-size:15px}
.recent{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.recent button{padding:8px 14px;border-radius:999px;border:1px solid var(--line2);background:var(--bg);cursor:pointer}
.recent button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* ---- balie ---- */
.screen{min-height:100vh;display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:auto 1fr auto;background:var(--paper);position:relative;overflow:hidden}
.bar{grid-column:1/-1;display:flex;align-items:center;gap:14px;padding:10px 20px;border-bottom:1px solid var(--line);background:var(--bg)}
.bar .brand{font-family:var(--font-d);font-weight:700;font-size:18px}
.bar .vest{color:var(--mute);font-size:14px}
.bar .spacer{flex:1}
.bar .who{font-size:14px;color:var(--ink2)}
.bar button{padding:6px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--paper);font-size:14px;cursor:pointer}
.left{padding:16px 20px;display:flex;flex-direction:column;gap:12px;border-right:1px solid var(--line);min-height:0;overflow:auto}
.search{position:relative}
.search input{width:100%;font-size:22px;padding:16px 18px 16px 52px;border:2px solid var(--line2);border-radius:12px;background:var(--paper)}
.search input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft)}
.search svg{position:absolute;left:16px;top:50%;transform:translateY(-50%);width:24px;height:24px;stroke:var(--mute);fill:none;stroke-width:2.2}
.results{display:flex;flex-direction:column;gap:6px;max-height:260px;overflow:auto}
.results button{display:grid;grid-template-columns:1fr auto auto;gap:14px;align-items:center;text-align:left;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--paper);cursor:pointer}
.results button:hover,.results button:focus-visible{border-color:var(--accent);background:var(--accent-soft);outline:none}
.nm{font-weight:600}
.sub{font-size:13.5px;color:var(--mute)}
.stock{font-size:13.5px;color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.stock.low{color:var(--amber);font-weight:600}
.stock.none{color:var(--red);font-weight:600}
.pr{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.lines{flex:1;display:flex;flex-direction:column;gap:8px}
.lines .empty{color:var(--mute);text-align:center;padding:36px 12px;border:2px dashed var(--line);border-radius:12px}
.line{display:grid;grid-template-columns:1fr auto auto auto;gap:12px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.line .sub button{font-size:13.5px;color:var(--accent);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:2px}
.qty{display:flex;align-items:center;gap:2px}
.qty button{width:44px;height:44px;border-radius:10px;border:1px solid var(--line2);background:var(--bg);font-size:24px;font-family:var(--font-d);cursor:pointer;line-height:1}
.qty input{width:72px;height:44px;text-align:center;font-size:19px;font-weight:600;border:1px solid var(--line2);border-radius:10px;background:var(--paper);font-variant-numeric:tabular-nums}
.line .tot{font-variant-numeric:tabular-nums;font-weight:600;min-width:84px;text-align:right}
.line .rm{width:38px;height:38px;border:0;background:transparent;color:var(--mute);font-size:22px;cursor:pointer;border-radius:8px}
.line .rm:hover{background:var(--red-soft);color:var(--red)}
.line .warn{grid-column:1/-1;font-size:13.5px;color:var(--amber);background:var(--amber-soft);padding:6px 10px;border-radius:6px}
.prijsinfo{grid-column:1/-1;border-top:1px dashed var(--line2);padding-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:14px;font-size:14px}
.prijsinfo h4,.drawer h4{font-family:var(--font-d);font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:0 0 6px}
table{border-collapse:collapse;width:100%}
td,th{padding:5px 8px;text-align:left;border-bottom:1px solid var(--line);vertical-align:top}
td.n,th.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.prijsinfo td button{font-size:13px;padding:3px 10px;border-radius:999px;border:1px solid var(--line2);background:var(--paper);cursor:pointer}
.prijsinfo td button.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.kv div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px solid var(--line)}
.kv span:last-child{font-variant-numeric:tabular-nums;font-weight:600}
.right{padding:16px 20px;display:flex;flex-direction:column;gap:16px;background:var(--bg);min-height:0;overflow:auto}
.klant{border:1px solid var(--line2);border-radius:12px;padding:12px 14px;background:var(--paper);display:flex;justify-content:space-between;align-items:center;gap:10px}
.klant.blok{border-color:var(--red)}
.klant .nm{font-size:18px}
.pill{font-size:14px;padding:7px 12px;border-radius:999px;border:1px solid var(--line2);background:var(--paper);cursor:pointer}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pills.groot .pill{font-size:17px;padding:12px 18px}
.pill.on{background:var(--accent);color:var(--accent-ink);border-color:var(--accent);font-weight:600}
.klantpick{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.klantpick button{text-align:left;padding:9px 12px;border:1px solid var(--line);border-radius:8px;background:var(--paper);cursor:pointer}
.klantpick button:hover{border-color:var(--accent);background:var(--accent-soft)}
.totals{margin-top:auto;border-top:1px solid var(--line);padding-top:12px;display:grid;gap:4px;font-variant-numeric:tabular-nums}
.totals div{display:flex;justify-content:space-between}
.totals .big{font-family:var(--font-d);font-size:30px;font-weight:700;margin-top:4px}
.foot{grid-column:1/-1;display:flex;gap:12px;padding:12px 20px;border-top:1px solid var(--line);background:var(--paper);align-items:center}
.foot .go{flex:1;font-family:var(--font-d);font-size:22px;font-weight:700;padding:18px 24px;border-radius:12px;border:0;background:var(--accent);color:var(--accent-ink);cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:12px}
.foot .go:disabled{opacity:.45;cursor:not-allowed}
.foot .go small{font-family:var(--font-b);font-weight:400;font-size:15px;opacity:.9}
.done{grid-column:1/-1;grid-row:2/4;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:40px 24px;text-align:center}
.done .ck{width:88px;height:88px;border-radius:50%;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center;font-size:48px;font-family:var(--font-d)}
.done h3{font-size:30px}
.done ul{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px;text-align:left;max-width:560px;width:100%}
.done li{display:grid;grid-template-columns:130px 1fr;gap:12px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;font-size:16px}
.done li b{font-family:var(--font-d);font-weight:600;color:var(--ink2);font-size:13px;text-transform:uppercase;letter-spacing:.08em;align-self:center}
.done li.wacht{border-color:var(--amber);background:var(--amber-soft)}
.drawer{position:absolute;top:0;right:0;bottom:0;width:min(400px,92%);background:var(--paper);border-left:1px solid var(--line2);box-shadow:-12px 0 30px rgba(0,0,0,.12);transform:translateX(102%);transition:transform .25s ease;display:flex;flex-direction:column;z-index:5}
.drawer.open{transform:none}
@media (prefers-reduced-motion:reduce){.drawer{transition:none}}
.drawer .dh{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--bg)}
.drawer .dh b{font-family:var(--font-d);font-size:17px}
.drawer .dh button{font-size:22px;border:0;background:transparent;color:var(--mute);cursor:pointer;width:36px;height:36px;border-radius:8px}
.drawer .db{overflow:auto;padding:14px 18px;display:flex;flex-direction:column;gap:18px;font-size:14.5px}
.off{display:grid;grid-template-columns:1fr auto;gap:4px 12px;padding:9px 12px;border:1px solid var(--line);border-radius:8px;margin-bottom:6px}
.mg{display:inline-block;padding:0 7px;border-radius:999px;font-weight:600}
.mg.ok{background:var(--accent-soft);color:var(--accent)} .mg.laag{background:var(--amber-soft);color:var(--amber)} .mg.min{background:var(--red-soft);color:var(--red)}
.scrim{position:absolute;inset:0;background:rgba(0,0,0,.18);z-index:4}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:var(--ink);color:var(--bg);padding:12px 18px;border-radius:10px;font-size:15px;opacity:0;pointer-events:none;transition:opacity .2s;max-width:90vw;z-index:50}
#toast.toon{opacity:1}
#toast.fout{background:var(--red);color:#fff}
@media (max-width:820px){
  .screen{grid-template-columns:1fr;grid-template-rows:auto auto auto auto}
  .left{border-right:0;border-bottom:1px solid var(--line)}
  .prijsinfo{grid-template-columns:1fr}
  .line{grid-template-columns:1fr auto}
  .line .tot{text-align:left}
}

/* ---- beheer ---- */
.beheer{max-width:1100px;margin:0 auto;padding:0 20px 60px}
.beheer header{display:flex;align-items:center;gap:12px;padding-block:18px;border-bottom:1px solid var(--line);margin-bottom:20px;flex-wrap:wrap}
.beheer h1{font-size:26px;flex:1}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px}
.blok{background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:18px}
.blok h2{font-size:19px;margin-bottom:10px}
.tblwrap{overflow-x:auto}
.beheer table{font-size:15px}
.rij{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:10px;margin-bottom:10px}
.rij label{display:flex;flex-direction:column;gap:4px;font-size:13.5px;color:var(--ink2)}
pre.ruw{background:var(--bg);border:1px solid var(--line);border-radius:8px;padding:12px;overflow:auto;max-height:420px;font-size:12.5px}
.tag{display:inline-block;padding:1px 9px;border-radius:999px;font-size:13px;font-weight:600;background:var(--accent-soft);color:var(--accent)}
.tag.uit{background:var(--red-soft);color:var(--red)}