/* 4Bizz - CASE202405621 - Scanner via webapp - 04-11-2026 -->> */
:root {
  --blauw: #14324a; --tekst: #1b1f23; --stil: #5b6670; --lijn: #d5dbe0; --vlak: #f3f5f7; --wit: #ffffff;
  --goed: #12703a; --goed-licht: #dff3e6; --fout: #b3261e; --fout-licht: #fbe3e1; --vraag: #8a5a00; --vraag-licht: #fdf0d3;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--wit); color: var(--tekst); font: 16px/1.35 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
main { padding: 10px 12px 24px; max-width: 720px; margin: 0 auto; }
h1 { font-size: 22px; margin: 8px 0 12px; }
h2 { font-size: 17px; margin: 14px 0 6px; }
p { margin: 8px 0; }
a { color: var(--blauw); }
[hidden] { display: none !important; }

.balk { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--blauw); color: var(--wit); padding: 6px 12px; min-height: 44px; }
.balk-titel { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.balk-terug { color: var(--wit); text-decoration: none; display: inline-block; padding: 6px 8px 6px 0; }
.balk-rechts { display: flex; align-items: center; gap: 8px; margin: 0; flex-shrink: 0; }
.balk-info { font-size: 13px; opacity: .9; white-space: nowrap; }

.knop, .knop-klein { font: inherit; border: 1px solid var(--blauw); background: var(--wit); color: var(--blauw); border-radius: 8px; cursor: pointer; text-decoration: none; touch-action: manipulation; }
.knop { display: block; width: 100%; min-height: 52px; padding: 12px; font-weight: 600; font-size: 17px; text-align: center; }
.knop-hoofd { background: var(--blauw); color: var(--wit); }
.knop-klein { min-height: 40px; padding: 6px 12px; font-size: 14px; font-weight: 600; flex-shrink: 0; }
.balk .knop-klein { background: transparent; color: var(--wit); border-color: var(--wit); min-height: 32px; padding: 2px 10px; }
button:disabled { opacity: .4; cursor: default; }
.knoppen { display: grid; gap: 8px; margin: 8px 0; }

.formulier { display: grid; gap: 12px; }
.formulier label { display: grid; gap: 4px; font-weight: 600; font-size: 14px; }
input, select, textarea { font: inherit; font-size: 18px; width: 100%; min-height: 48px; padding: 8px 10px; border: 1px solid var(--stil); border-radius: 8px; background: var(--wit); color: var(--tekst); }
textarea { min-height: 110px; }

.melding { padding: 10px 12px; border-radius: 8px; margin: 8px 0; font-weight: 600; }
.melding-fout { background: var(--fout-licht); color: var(--fout); }
.melding-ok { background: var(--goed-licht); color: var(--goed); }
.stil { color: var(--stil); font-size: 14px; }

.scanregel { display: flex; gap: 8px; align-items: stretch; margin: 6px 0; }
.scanveld { flex: 1; min-width: 0; font-size: 18px; border: 2px solid var(--blauw); }
.scanveld:focus { outline: 3px solid #7fb2d9; outline-offset: 0; }

.orderkop-klant { font-weight: 700; font-size: 18px; overflow-wrap: anywhere; }
.orderkop-info { color: var(--stil); font-size: 13px; overflow-wrap: anywhere; }

.status { padding: 12px; border-radius: 8px; font-weight: 700; font-size: 17px; min-height: 52px; margin: 6px 0; overflow-wrap: anywhere; }
.status-leeg { background: var(--vlak); color: var(--stil); font-weight: 600; }
.status-bezig { background: var(--vlak); color: var(--blauw); }
.status-goed { background: var(--goed); color: var(--wit); }
.status-fout { background: var(--fout); color: var(--wit); }
.status-vraag { background: var(--vraag-licht); color: var(--vraag); }

.acties { display: flex; gap: 8px; margin: 6px 0; }
.acties .knop-klein { flex: 1; padding: 6px 4px; }

.tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 10px 0 0; border-bottom: 2px solid var(--blauw); }
.tab { font: inherit; font-size: 14px; font-weight: 600; min-height: 44px; border: 0; background: var(--vlak); color: var(--blauw); border-radius: 8px 8px 0 0; padding: 4px 2px; touch-action: manipulation; }
.tab-aan { background: var(--blauw); color: var(--wit); }

.lijst { list-style: none; margin: 0 0 12px; padding: 0; }
.regel { display: block; padding: 10px 2px; border-bottom: 1px solid var(--lijn); text-decoration: none; color: inherit; }
.regel-rij { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.regel-rij > span { min-width: 0; }
.regel-hoofd { display: block; font-weight: 600; overflow-wrap: anywhere; }
.regel-sub { display: block; color: var(--stil); font-size: 14px; overflow-wrap: anywhere; }
.regel-klaar { opacity: .5; }
.regel-klaar .regel-hoofd { text-decoration: line-through; }

.venster { border: 0; border-radius: 12px; padding: 14px; width: calc(100vw - 24px); max-width: 480px; }
.venster::backdrop { background: rgba(0, 0, 0, .55); }
.venster h2 { margin: 0 0 6px; }
.vensterveld { margin: 8px 0; }
.venster-acties { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.venster-acties .knop[hidden] + .knop, .venster-acties:has(.knop[hidden]) { grid-template-columns: 1fr; }

.qr { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.beheer main { padding-bottom: 40px; }
.blok { border-top: 1px solid var(--lijn); padding-top: 6px; margin-top: 12px; }
/* 4Bizz - CASE202405621 - Scanner via webapp - 04-11-2026 <<-- */