/* =====================================================================
   Divoza ERP Core — huisstijl, overgenomen uit Divoza POS (pos.divoza.nl):
   staalblauw + messing, Segoe UI, grote aanraakknoppen. Deel 1 is de POS-
   stijl ongewijzigd; deel 2 (onderaan) voegt de ERP-onderdelen toe.
   ===================================================================== */
:root {
  --stal: #14284b;
  --stal-2: #20396a;
  --papier: #f3f5f9;
  --wit: #ffffff;
  --inkt: #121a2b;
  --stil: #5a6578;
  --lijn: #d6dbe5;
  --messing: #c99a3b;
  --messing-2: #b5872c;
  --goud: #c99a3b;  /* in de POS gebruikt maar niet gedefinieerd */
  --fout: #a8322b;
  --goed: #2e6b4f;
  --r-klein: 6px;
  --r-groot: 12px;
  font-family: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif;
  font-size: 17px;
  color: var(--inkt);
  background: var(--papier);
  font-variant-numeric: tabular-nums;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { overscroll-behavior: none; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--messing); outline-offset: 2px; }
[hidden] { display: none !important; }

button {
  white-space: nowrap;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 52px; padding: 0 18px; border-radius: var(--r-klein);
  border: 1px solid var(--lijn); background: var(--wit); cursor: pointer;
}
button:active { transform: translateY(1px); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primair { background: var(--messing); border-color: var(--messing-2); font-weight: 650; }
button.donker { background: var(--stal); border-color: var(--stal); color: var(--wit); }
button.gevaar { color: var(--fout); border-color: #e3c3c0; }
button.link { border: 0; background: none; min-height: 44px; color: var(--stal); text-decoration: underline; padding: 0 8px; }
input {
  min-height: 52px; padding: 0 14px; border: 1px solid var(--lijn); border-radius: var(--r-klein);
  background: var(--wit); width: 100%;
}
input:focus { border-color: var(--stal); }
label { display: block; font-size: 14px; color: var(--stil); margin: 12px 0 6px; }

/* volledige schermen (login, registratie, openen) */
.scherm { min-height: 100vh; display: grid; place-items: center; background: var(--stal); padding: 24px; }
.kaart { background: var(--wit); border-radius: var(--r-groot); padding: 32px; width: min(560px, 100%); }
.kaart h1 { margin: 0 0 4px; font-size: 26px; color: var(--stal); }
.kaart p.sub { margin: 0 0 20px; color: var(--stil); }
.tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.tegels button { min-height: 72px; font-weight: 600; text-align: left; }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 16px; }
.pinpad button { min-height: 64px; font-size: 24px; }
.pinpunten { display: flex; gap: 12px; justify-content: center; margin: 12px 0; height: 18px; }
.pinpunten span { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--stal); }
.pinpunten span.vol { background: var(--stal); }
.pinhint { text-align: center; color: var(--stil); font-size: 14px; }

/* kassa-layout */
.kassa { display: grid; grid-template-rows: auto 1fr; height: 100vh; }
.balk {
  display: flex; align-items: center; gap: 16px; padding: 0 16px; height: 56px;
  background: var(--stal); color: var(--wit); font-size: 15px;
}
.balk .naam { font-weight: 650; }
.balk .vul { flex: 1; }
.balk .test { background: var(--fout); padding: 4px 10px; border-radius: 4px; font-weight: 700; }
.stip { display: inline-flex; align-items: center; gap: 6px; }
.stip::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #8aa394; }
.stip.ok::before { background: #6fcf97; }
.stip.wacht::before { background: var(--messing); }
.stip.fout::before { background: #ff6b5e; }
.balk button { min-height: 40px; background: var(--stal-2); border-color: var(--stal-2); color: var(--wit); }

.werk { display: grid; grid-template-columns: 1fr 380px; min-height: 0; }
.links { display: grid; grid-template-rows: auto auto auto 1fr; min-height: 0; padding: 16px; gap: 12px; }
.rechts { background: var(--wit); border-left: 1px solid var(--lijn); display: flex; flex-direction: column; padding: 20px; gap: 10px; }

.klant { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 12px; }
.klant.leeg { border-color: var(--messing); border-width: 2px; }
.klant .rij { display: flex; gap: 8px; align-items: center; }
.klant .gekozen { display: flex; gap: 12px; align-items: center; }
.klant .gekozen strong { font-size: 19px; }
.klant .gekozen .meta { color: var(--stil); font-size: 15px; }
.klant .gekozen .vul { flex: 1; }
.klant .gekozen { flex-wrap: wrap; }
.klant .gekozen .vul { flex-basis: 100%; min-width: 0; }
.voorbeeldbon { width: 100%; height: 60vh; border: 1px solid var(--lijn); border-radius: var(--r-klein); background: #f3f5f9; }
.klant .kcheques { margin-top: 4px; }
.klant .kcheques .chequechip { display: inline-block; background: #eef6ee; color: var(--goed); border: 1px solid #cfe5cf; border-radius: var(--r-klein); padding: 2px 8px; margin: 2px 4px 0 0; font-size: 14px; }
.klant .kcheques .chequechip.verlopen { background: #f6eeee; color: var(--fout); border-color: #e9cccc; }
.klant .kcheques .chequechip .link { min-height: 0; padding: 0 0 0 4px; text-decoration: underline; font-weight: 700; }
.keuzetegels .tegel.uit { opacity: .65; cursor: default; border: 1px solid var(--lijn); border-radius: var(--r-klein); }
.pinvergeten { text-align: center; margin: 10px 0 0; }
.klant .kknoppen { flex-basis: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.klant .kknoppen button { min-height: 38px; padding: 0 6px; font-size: 13px; gap: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: center; }
.klant .kknoppen button svg { width: 16px; height: 16px; flex: none; }
.lijst { margin-top: 8px; border-top: 1px solid var(--lijn); max-height: 280px; overflow: auto; }
.lijst button { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; padding: 10px 6px; min-height: 56px; }
.lijst button small { color: var(--stil); }
.lijst button.actief { background: #e8edf6; box-shadow: inset 4px 0 0 var(--messing); }
.lijst mark { background: #f3e2b8; color: inherit; padding: 0; border-radius: 2px; }

.zoek { display: flex; gap: 8px; position: relative; }
.zoek .lijst { position: absolute; top: 56px; left: 0; right: 0; z-index: 5; background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-klein); box-shadow: 0 8px 24px rgba(18, 26, 43, .14); }

.regels { background: var(--wit) url(logo-licht.png) no-repeat center / min(46%, 360px); border: 1px solid var(--lijn); border-radius: var(--r-groot); overflow: auto; min-height: 0; }
.regels .leeg { padding: 48px 24px; color: var(--stil); text-align: center; }
.regel { display: grid; grid-template-columns: auto 1fr auto auto auto; gap: 12px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--lijn); }
.regel .oms strong { display: block; font-weight: 600; }
.regel .oms small { color: var(--stil); }
.regel .korting { color: var(--goed); font-size: 14px; }
.stepper { display: flex; align-items: center; }
.stepper button { min-height: 44px; width: 44px; padding: 0; font-size: 22px; }
.stepper span { min-width: 40px; text-align: center; font-weight: 600; }
.regel .bedrag { min-width: 90px; text-align: right; font-weight: 600; }
.regel .acties { display: flex; gap: 6px; }
.regel .acties button { min-height: 44px; padding: 0 12px; }

.totaal { background: var(--stal); color: var(--wit); border-radius: var(--r-groot); padding: 20px; }
.totaal .label { font-size: 15px; opacity: .8; }
.totaal .bedrag { font-size: 64px; font-weight: 650; line-height: 1.05; letter-spacing: -1px; }
.totaal .sub { font-size: 15px; opacity: .8; margin-top: 6px; }
.rechts .vul { flex: 1; }
.rechts .afrekenen { min-height: 84px; font-size: 24px; }
.knoppen2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* modals */
.modal { position: fixed; inset: 0; background: rgba(18, 26, 43, .6); display: grid; place-items: center; z-index: 20; padding: 16px; }
.modal .kaart { max-height: calc(100vh - 32px); overflow: auto; }
.modal .kaart.breed { width: min(760px, 100%); }
.modal h2 { margin: 0 0 12px; color: var(--stal); }
.modal .voet { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }
.tebetalen { font-size: 44px; font-weight: 650; color: var(--stal); }
.snel { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: 8px; }
.snel button { min-height: 60px; font-weight: 600; }
.betaalknoppen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 16px; }
.betaalknoppen button { min-height: 72px; font-size: 20px; }
.betaald { margin-top: 12px; font-size: 15px; color: var(--stil); }
.wissel { font-size: 36px; font-weight: 650; color: var(--goed); }
.melding { padding: 12px 14px; border-radius: var(--r-klein); background: var(--papier); margin-top: 12px; }
.melding.fout { background: #f7e4e2; color: var(--fout); }
.tabel { width: 100%; border-collapse: collapse; font-size: 15px; }
.tabel td, .tabel th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--lijn); }
.tabel td.r, .tabel th.r { text-align: right; }
.tabel tr.klik { cursor: pointer; }
.tabel tr.klik:hover { background: var(--papier); }
pre.zrap { font-family: Consolas, "Courier New", monospace; font-size: 14px; background: var(--papier); padding: 12px; border-radius: var(--r-klein); overflow: auto; }

.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--inkt); color: var(--wit); padding: 12px 14px 12px 20px; border-radius: var(--r-klein); z-index: 30; max-width: 90vw; display: flex; gap: 14px; align-items: center; user-select: text; }
.toast .tekst { user-select: text; cursor: text; }
.toast .kopieer { min-height: 36px; padding: 0 12px; background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.35); color: var(--wit); flex: none; }
.toast.fout { background: var(--fout); }

@media (max-width: 980px) {
  .werk { grid-template-columns: 1fr; }
  .rechts { border-left: 0; border-top: 1px solid var(--lijn); }
  .totaal .bedrag { font-size: 44px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.ico { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ico.groot { width: 28px; height: 28px; }
.balk .ico { width: 18px; height: 18px; }
.tegels button { justify-content: flex-start; }
.lijst button { display: block; }
.stepper button .ico { width: 18px; height: 18px; }
.regel .acties button.gevaar { padding: 0 10px; }
.betaalknoppen button .ico { width: 26px; height: 26px; }
.balk .merk { display: inline-flex; align-items: center; gap: 10px; }
.balk .merk .logo { width: 34px; height: 34px; object-fit: contain; }
.kaartlogo { width: 72px; height: 72px; object-fit: contain; display: block; margin: 0 0 12px; }

.regelfoto { width: 52px; height: 52px; border-radius: 8px; object-fit: contain; background: var(--wit); border: 1px solid var(--lijn); }
.sugrij { display: flex; gap: 12px; align-items: center; }
.sugfoto { width: 40px; height: 40px; flex: none; border-radius: 6px; object-fit: contain; background: var(--wit); border: 1px solid var(--lijn); }
.leegfoto { display: inline-block; background: repeating-linear-gradient(45deg, #eef1f6 0 6px, #f6f8fb 6px 12px); }

.coupures { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; margin-bottom: 8px; }
.coupure { display: flex; flex-direction: column; margin: 0; }
.coupure span { font-size: 13px; color: var(--stil); margin-bottom: 4px; }
.coupure input { min-height: 44px; text-align: right; }

.regel.speciaal { background: #f7f3e8; }
.regel.speciaal .bedrag { color: var(--fout); }

.klant .punten { color: var(--goed); font-weight: 600; }
.rechts .knoppen2 button { white-space: normal; }

.balk .versie { font-size: 13px; opacity: .65; }
.versie-klein { margin: -12px 0 16px; font-size: 12px; color: var(--stil); }

.korting.actie { color: var(--fout); font-weight: 600; }
.actieprijs { color: var(--fout); font-weight: 700; }
.kaart.koppel { display: flex; flex-direction: column; gap: 4px; max-width: 460px; }
.kaart.koppel .kaartlogo { align-self: center; }
.kaart.koppel h1, .kaart.koppel p.sub { text-align: center; }
.codeveld { font-family: Consolas, "Courier New", monospace; font-size: 26px; letter-spacing: 2px; text-align: center; text-transform: uppercase; min-height: 60px; }
button.breed { width: 100%; min-height: 60px; margin-top: 16px; font-size: 18px; }
.kaart .voet { display: flex; gap: 8px; justify-content: flex-end; margin-top: 20px; flex-wrap: wrap; }

.klant .groep { color: var(--stal); font-weight: 600; }

.regel.ongeldig { background: #f7e4e2; box-shadow: inset 4px 0 0 var(--fout); }
.regel.ongeldig small, .regel.ongeldig strong { color: var(--fout); }
.blokkade { background: #f7e4e2; color: var(--fout); border: 1px solid #e3c3c0; border-radius: var(--r-klein); padding: 10px 14px; font-weight: 600; }

.sugrij .vul { flex: 1; }
.sugrij .laatst { text-align: right; color: var(--stil); font-size: 12px; line-height: 1.3; white-space: nowrap; }
.sugrij .laatst b { color: var(--inkt); font-weight: 600; }

.klant .waarschuwing { margin-top: 6px; background: #fbf1dc; color: #7a5410; border: 1px solid #ecd6a6; border-radius: var(--r-klein); padding: 6px 10px; font-size: 14px; font-weight: 600; }
.klant .waarschuwing .link { min-height: 0; padding: 0 0 0 6px; color: var(--stal); text-decoration: underline; font-weight: 700; }
.jarig { color: var(--goud); }

.knoppen3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.modal .knoppen2, .modal .knoppen3 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.modal .knoppen2 button, .modal .knoppen3 button { white-space: normal; min-width: 0; padding: 6px 10px; line-height: 1.2; text-align: center; }
.waarschuwing.klein { display: inline-block; margin-top: 4px; padding: 3px 8px; font-size: 13px; }

.zoek > button { flex: none; }
.regel.tekstregel em { font-style: italic; color: var(--stil); white-space: pre-wrap; }
.blokken { position: relative; margin-bottom: 12px; }
.bloklijst { position: static; max-height: 260px; overflow: auto; margin-top: 6px; border: 1px solid var(--lijn); border-radius: var(--r-klein); }
.bloklijst .item { display: block; width: 100%; text-align: left; border: 0; border-bottom: 1px solid var(--lijn); border-radius: 0; min-height: 48px; background: var(--wit); }
.bloklijst .item:hover { background: #eef2f8; }
.gekozen-tarief { font-weight: 700; margin-bottom: 8px; }
textarea { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--lijn); border-radius: var(--r-klein); }

.noodoptie { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--lijn); font-size: 13px; color: var(--stil); display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.noodoptie .link { min-height: 0; padding: 0; color: var(--fout); text-decoration: underline; font-weight: 600; }
.waarschuwing.klein input[type=date] { min-height: 32px; padding: 2px 6px; font-size: 13px; width: auto; }

.vrd { font-size: 12px; font-weight: 600; padding: 1px 6px; border-radius: 999px; margin-left: 4px; white-space: nowrap; }
.vrd.ja { background: #e2f1e7; color: var(--goed); }
.vrd.hoofd { background: #fbf1dc; color: #7a5410; }
.vrd.nee { background: #f7e4e2; color: var(--fout); }
.regel.besteld { background: #fbf6ea; }
.regel .bestelinfo { color: #9a5b13; font-size: 13px; font-weight: 600; margin-top: 2px; }
.tabel tr.eigen td { background: #eef2f8; }

.tabel tr.klik { cursor: pointer; }
.tabel tr.klik:hover td { background: #eef2f8; }

.tabel tr.nul td { color: var(--stil); }
.magcode { font-family: Consolas, monospace; color: var(--stil); margin-right: 4px; }

.groepbadge { display: inline-block; font-size: 11px; font-weight: 700; padding: 1px 7px; border-radius: 999px; background: #14284b; color: #fff; vertical-align: 2px; }
.lijst .zoekt { padding: 12px; color: var(--stil); font-style: italic; }

.tabel.compact th, .tabel.compact td { padding: 3px 8px; font-size: 14px; line-height: 1.25; }
.tabel.compact { margin: 0; }
.vrdgrid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(220px, 1fr); gap: 16px; align-items: start; }
.vrdgrid h3 { margin: 0 0 4px; }
.vrdgrid .sub { margin: 0 0 8px; font-size: 13px; }
.bestelkant button.breed { min-height: 48px; margin-top: 0; font-size: 15px; }
.knoppenkolom { display: grid; gap: 6px; }
.knoppenkolom button { min-height: 44px; }
.tabel tr.leverancier td { background: #f2f7ee; }
@media (max-width: 760px) { .vrdgrid { grid-template-columns: 1fr; } }

.balk .teller { background: var(--goud); color: var(--inkt); border-radius: 999px; padding: 0 7px; margin-left: 4px; }

.beheerscherm { min-height: 100vh; background: var(--achter, #f3f5f9); }
.keuze { padding: 24px; max-width: 1200px; margin: 0 auto; }
.keuze h2 { margin: 0 0 16px; }
.keuze h3 { margin: 20px 0 8px; color: var(--stil); font-size: 15px; text-transform: uppercase; letter-spacing: .5px; }
.keuzetegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.tegel { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 16px; min-height: 96px; text-align: left; background: var(--wit); }
.tegel b { font-size: 18px; }
.tegel small { color: var(--stil); }
.tegel.groot { min-height: 110px; border-color: var(--goud); }
.bhkop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.bhkop .vul { flex: 1; }
.schakel { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; }
.schakel input { width: 20px; height: 20px; }
.rood { color: var(--fout); }
.tegel.groot { grid-column: span 2; }
.tegel small { white-space: normal; }
@media (max-width: 520px) { .tegel.groot { grid-column: auto; } }

.stappen { padding-left: 20px; line-height: 1.5; }
.stappen li { margin-bottom: 12px; }
.stappen li > div { margin-top: 6px; display: flex; gap: 8px; flex-wrap: wrap; }
button.stip { border: 0; background: transparent; color: inherit; min-height: 0; padding: 0 6px; cursor: pointer; }
.melding.goed { background: #e2f1e7; color: var(--goed); }

.nieuwpin { background: var(--goud); color: var(--inkt); border-radius: 999px; padding: 0 6px; font-size: 11px; margin-left: 4px; }

.versiebadge { position: fixed; right: 8px; bottom: 6px; z-index: 30; font-size: 11px; color: var(--stil); background: rgba(255,255,255,.75);
  padding: 1px 6px; border-radius: 999px; pointer-events: none; user-select: none; }

.keuze { max-width: 1600px; }
.modal .kaart.xbreed { width: min(1200px, 100%); }

.bhkop .vanaf { display: flex; align-items: center; gap: 8px; }
.bhkop .vanaf label { margin: 0; font-weight: 600; white-space: nowrap; }
.bhkop .vanaf input[type=date] { width: auto; min-height: 44px; padding: 6px 10px; font-size: 15px; }
button.klein { min-height: 0; padding: 3px 10px; font-size: 13px; }

.melding.voortgang { background: #eef2f8; }
.voortgang .vtekst { margin-bottom: 6px; }
.balkje { height: 8px; background: #d6dbe5; border-radius: 999px; overflow: hidden; }
.balkje > div { height: 100%; background: var(--goud); border-radius: 999px; transition: width .4s; }

.goed { color: var(--goed); }

.bhtabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 12px; }
.bhtabs button { min-height: 40px; }
.bhtabs small { opacity: .75; }

.vrd.lev { background: #e3edfa; color: #1d4f91; }

.bhhoofd { margin: 0 0 14px; }
.bhhoofd button { min-height: 46px; font-weight: 600; }
.nowrap { white-space: nowrap; }

.spinner { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--lijn); border-top-color: var(--stal, #1e3a5f); border-radius: 50%; animation: draai .7s linear infinite; vertical-align: middle; }
@keyframes draai { to { transform: rotate(360deg); } }
tr.bezig td { opacity: .6; }

.balk .gebruikerknop { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); color: var(--wit); }
.balk .gebruikerknop small { opacity: .75; font-size: 12px; }

.modalkop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.modalkop h2 { flex: 1; margin-right: auto; }
.schakel.autoboek { display: inline-flex; align-items: center; gap: 8px; box-sizing: border-box; height: 52px; padding: 0 14px; border-radius: var(--r-klein); font-weight: 600; font-size: 15px; border: 1px solid; white-space: nowrap; margin: 0; }
.schakel.autoboek input { margin: 0; }
.schakel.autoboek.aan { background: #e7f5ea; color: #1e6b33; border-color: #2f9a4c; }
.schakel.autoboek.uit { background: #fbe9e7; color: #a8322b; border-color: #d0453b; }
.test.testkassa { background: #d0453b; color: #fff; font-weight: 800; letter-spacing: .5px; }
.bhverw { margin-right: 4px; white-space: nowrap; }
.modal .kaart.vrdbreed { width: min(1000px, 100%); }
.loccel { white-space: nowrap; }
.locs { display: inline-flex; gap: 4px; }
.loc { font-size: 13px; background: var(--vlak, #eef1f6); border-radius: 6px; padding: 2px 7px; white-space: nowrap; }
.loc.meer { background: none; color: var(--stil); font-style: italic; }

/* =====================================================================
   Deel 2 — Divoza ERP Core (zelfde taal als het beheer-/boekhoudscherm)
   ===================================================================== */
a { color: var(--stal); }
a.knop { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; padding: 0 18px;
  border-radius: var(--r-klein); border: 1px solid var(--lijn); background: var(--wit); color: var(--inkt); text-decoration: none; white-space: nowrap; }
a.knop.primair { background: var(--messing); border-color: var(--messing-2); font-weight: 650; }
a.knop.donker { background: var(--stal); border-color: var(--stal); color: var(--wit); }
a.knop.klein, button.klein { min-height: 36px; padding: 0 12px; font-size: 14px; }
a.tegel { color: var(--inkt); text-decoration: none; border: 1px solid var(--lijn); border-radius: var(--r-klein); }
a.tegel:hover, button.tegel:hover { border-color: var(--stal); }
a.tegel .ico { color: var(--stal); }
select { min-height: 52px; padding: 0 12px; border: 1px solid var(--lijn); border-radius: var(--r-klein); background: var(--wit); width: 100%; font: inherit; color: inherit; }
select:focus, textarea:focus { border-color: var(--stal); outline: none; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; min-height: 0; }
input.bedrag, td input.bedrag { text-align: right; }

.balk a.terug, .balk .balkknop { min-height: 40px; display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; border-radius: var(--r-klein);
  background: var(--stal-2); border: 1px solid var(--stal-2); color: var(--wit); text-decoration: none; }
.balk select.bv { width: auto; min-height: 40px; background: var(--stal-2); border-color: var(--stal-2); color: var(--wit); font-size: 15px; }
.balk .kruimel { opacity: .75; }

.paneel { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 20px; margin-bottom: 16px; }
.paneel > h3:first-child { margin-top: 0; }
.paneel h3 { color: var(--stal); text-transform: none; letter-spacing: 0; font-size: 18px; margin: 0 0 12px; }
.sub { color: var(--stil); }
.rij2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; }
.rij3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 16px; }
.rij4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 16px; }
@media (max-width: 760px) { .rij2, .rij3, .rij4 { grid-template-columns: 1fr; } }
.acties { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 16px; }
.filter { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; }
.filter > * { width: auto; }
.filter input, .filter select { width: auto; min-width: 180px; }
.filter label { margin: 0 0 4px; }

.tabel th { font-size: 13px; color: var(--stil); font-weight: 600; }
.tabel td.r input { text-align: right; }
.tabel tfoot td { font-weight: 700; border-top: 2px solid var(--stal); border-bottom: 0; }
.tabel .num, .tabel td.r { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tabel td input, .tabel td select { min-height: 40px; padding: 0 8px; }
.tabel tr.kop td { background: var(--papier); font-weight: 700; color: var(--stal); }
.tabel tr.sub td:first-child { padding-left: 22px; }
.neg { color: var(--fout); }
.mono { font-family: Consolas, "Courier New", monospace; }
.leeg { color: var(--stil); padding: 24px; text-align: center; }

.kpis { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 14px 16px; }
.kpi small { display: block; color: var(--stil); font-size: 13px; }
.kpi b { font-size: 26px; color: var(--stal); }
.kpi.donker { background: var(--stal); color: var(--wit); border-color: var(--stal); }
.kpi.donker small, .kpi.donker b { color: var(--wit); }

.label-status { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.label-status.ok { background: #e2f1e7; color: var(--goed); }
.label-status.open { background: #fbf1dc; color: #7a5410; }
.label-status.fout { background: #f7e4e2; color: var(--fout); }
.label-status.stil { background: var(--papier); color: var(--stil); }

/* kassa in ERP Core (POS-taal, compacter op beheer-pc) */
.erpkassa .werk { height: calc(100vh - 56px); }
.erpkassa .regel { grid-template-columns: 1fr auto auto auto; }
.betaalregels .rij { display: grid; grid-template-columns: 1fr 160px 44px; gap: 8px; margin-top: 8px; }
.betaalregels .rij button { min-height: 52px; }
.erpkassa .totaal .bedrag { white-space: nowrap; font-size: clamp(34px, 3.6vw, 56px); }
.balk .bvform { min-width: 0; }
@media (max-width: 760px) {
  .balk { flex-wrap: wrap; height: auto; min-height: 56px; padding: 8px 12px; gap: 8px 10px; }
  .balk .bvform { order: 5; flex-basis: 100%; }
  .balk select.bv { width: 100%; }
  .balk .gebruiker, .balk .terug .tekst, .balk .balkknop .tekst { display: none; }
  .balk .vul { display: none; }
  .balk .merk .naam { font-size: 15px; }
  .balk a.terug, .balk .balkknop { margin-left: auto; padding: 0 10px; }
  .balk a.terug + .balkknop { margin-left: 0; }
  .keuze { padding: 16px 12px; }
  .paneel { padding: 14px; overflow-x: auto; }
  .tegel.groot { grid-column: auto; }
  .filter input, .filter select { min-width: 0; width: 100%; }
  .filter > div { flex: 1 1 140px; }
}

/* =====================================================================
   Deel 3 — scanner (magazijn / PDA): één hand, grote vlakken, scanveld altijd actief
   ===================================================================== */
.scanapp { min-height: 100%; display: flex; flex-direction: column; background: var(--papier); }
.scanbalk { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  background: var(--stal); color: var(--wit); }
.scanbalk a { color: var(--wit); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; justify-content: center; border-radius: var(--r-klein); background: rgba(255,255,255,.1); }
.scanbalk b { font-size: 18px; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scanbalk .loc { font-size: 13px; background: var(--messing); color: var(--inkt); padding: 4px 10px; border-radius: 999px; font-weight: 700; }
.scanveld { position: sticky; top: 64px; z-index: 4; display: flex; gap: 8px; padding: 10px 12px; background: var(--papier); border-bottom: 1px solid var(--lijn); }
.scanveld input { font-size: 20px; min-height: 58px; flex: 1; border-width: 2px; border-color: var(--stal); }
.scanveld button { min-height: 58px; min-width: 58px; padding: 0 12px; }
.scaninhoud { padding: 12px; display: flex; flex-direction: column; gap: 10px; padding-bottom: 90px; }
.scantegels { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 700px) { .scantegels { grid-template-columns: repeat(4, 1fr); } }
.scantegels a { display: flex; flex-direction: column; gap: 6px; padding: 16px; min-height: 108px; border-radius: var(--r-groot);
  background: var(--wit); border: 1px solid var(--lijn); color: var(--inkt); text-decoration: none; position: relative; }
.scantegels a b { font-size: 17px; }
.scantegels a small { color: var(--stil); font-size: 13px; }
.scantegels a .teller { position: absolute; top: 10px; right: 10px; background: var(--messing); color: var(--inkt); font-weight: 800;
  border-radius: 999px; min-width: 30px; height: 30px; display: grid; place-items: center; font-size: 15px; padding: 0 8px; }
.scantegels a .ico { width: 30px; height: 30px; color: var(--stal); }
.scanlijst { display: flex; flex-direction: column; gap: 8px; }
.scanitem { display: flex; align-items: center; gap: 12px; padding: 12px 14px; background: var(--wit); border: 1px solid var(--lijn);
  border-radius: var(--r-groot); color: var(--inkt); text-decoration: none; transition: background .25s; }
.scanitem .vak { min-width: 64px; font-weight: 800; font-size: 15px; color: var(--stal); font-family: ui-monospace, Consolas, monospace; }
.scanitem .wat { flex: 1; min-width: 0; }
.scanitem .wat b { display: block; font-size: 16px; }
.scanitem .wat small { color: var(--stil); font-size: 13px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scanitem .tal { font-size: 22px; font-weight: 800; min-width: 70px; text-align: right; }
.scanitem.klaar { background: #e2f1e7; border-color: #b9dcc6; }
.scanitem.klaar .tal { color: var(--goed); }
.scanitem.flits { background: #fff4d6; }
.scanitem input { min-height: 46px; max-width: 90px; text-align: right; font-size: 18px; }
.scanmelding { padding: 14px; border-radius: var(--r-groot); font-weight: 650; font-size: 16px; display: none; }
.scanmelding.goed { display: block; background: #e2f1e7; color: var(--goed); }
.scanmelding.fout { display: block; background: #f7e4e2; color: var(--fout); }
.scanvoet { position: fixed; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; padding: 10px 12px; background: var(--wit); border-top: 1px solid var(--lijn); z-index: 6; }
.scanvoet > * { flex: 1; }
.scankaart { background: var(--wit); border: 1px solid var(--lijn); border-radius: var(--r-groot); padding: 14px; }
.scankaart h3 { margin: 0 0 8px; font-size: 18px; }
.scancamera { position: fixed; inset: 0; background: #000; z-index: 50; display: flex; flex-direction: column; }
.scancamera video { flex: 1; object-fit: cover; width: 100%; }
.scancamera button { margin: 12px; }
.scanapp ~ .versiebadge { display: none; }

/* batch picken: grote bak-aanwijzing en bakjes */
.bakken { display: flex; flex-wrap: wrap; gap: 6px; }
.bakken span { min-width: 44px; padding: 6px 8px; border-radius: var(--r-klein); background: var(--wit); border: 1px solid var(--lijn); font-weight: 800; text-align: center; font-size: 14px; }
.bakken span.vol { background: #e2f1e7; border-color: #b9dcc6; color: var(--goed); }
.bakken span small { display: block; font-weight: 600; color: var(--stil); font-size: 11px; }
.bakgroot { position: fixed; inset: 0; z-index: 40; display: none; align-items: center; justify-content: center; flex-direction: column; gap: 4px;
  background: rgba(20, 36, 58, .92); color: var(--wit); pointer-events: none; }
.bakgroot.aan { display: flex; }
.bakgroot small { font-size: 22px; letter-spacing: .08em; text-transform: uppercase; opacity: .8; }
.bakgroot b { font-size: 160px; line-height: 1; color: var(--messing); }
.bakgroot span { font-size: 18px; opacity: .9; }
.scanitem .open { display: block; font-size: 13px; color: var(--stal); font-weight: 700; }
.scankop { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--stil); margin: 6px 2px 0; font-weight: 700; }

/* testomgeving: altijd zichtbaar dat het niet echt is */
.testbalk { position: sticky; top: 0; z-index: 60; background: repeating-linear-gradient(135deg, #b3261e 0 18px, #9c1f18 18px 36px); color: #fff;
  font-weight: 800; font-size: 13px; letter-spacing: .04em; text-align: center; padding: 6px 12px; }
.testbalk + svg + .beheerscherm .balk, .testbalk ~ .scanapp .scanbalk { background: #6d1712; }
.omgeving { display: flex; gap: 8px; margin: 4px 0 12px; }
.omgeving label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; border: 2px solid var(--lijn); border-radius: var(--r-klein); font-weight: 700; cursor: pointer; }
.omgeving input { display: none; }
.omgeving input:checked + span { color: var(--stal); }
.omgeving label:has(input:checked) { border-color: var(--stal); background: #eef2f9; }
.omgeving label.test:has(input:checked) { border-color: #b3261e; background: #fbeceb; color: #b3261e; }
/* breed zoekveld in een filterbalk (retouren, postvak) */
.filter > .breed { flex: 1 1 320px; max-width: 640px; }
.filter > .breed input { width: 100%; }
/* werkplek in de kopbalk: locatie (operationeel) of BV (boekhouding) */
.balk .bvform { display: inline-flex; align-items: center; gap: 8px; }
.balk .werkplek-label { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: var(--wit); opacity: .8; font-size: 14px; white-space: nowrap; }
.balk .werkplek { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border-radius: var(--r-klein);
  background: var(--stal-2); color: var(--wit); font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 46vw; }
@media (max-width: 760px) {
  .balk .werkplek { order: 5; flex-basis: 100%; max-width: none; }
  .balk .werkplek-label .tekst { display: none; }
}
.tabel tr.gekozen td { background: var(--goud-licht, #fbf3e0); }
/* versie: klein rechtsonder, onder de inhoud (niet eroverheen); schermvullende kassa/scanner: vast in de hoek */
.versiebadge { font-size: 10px; line-height: 1; padding: 2px 5px; background: none; opacity: .55; }
.beheerscherm ~ .versiebadge { position: static; text-align: right; padding: 4px 10px 8px; }
.scanapp ~ .versiebadge { display: block; position: fixed; right: 4px; bottom: 2px; opacity: .4; }
/* knop in de rode testbalk */
.testbalk .testwis { margin-left: 12px; padding: 1px 10px; border: 1px solid rgba(255,255,255,.7); border-radius: 999px; color: #fff; text-decoration: none; font-weight: 600; white-space: nowrap; }
.testbalk .testwis:hover { background: rgba(255,255,255,.15); }