:root{
  --bg:#F4F2EE; --vlak:#FFFFFF; --vlak2:#ECE8E1; --ink:#1C1F24; --zacht:#5E636B; --lijn:#DDD8CF;
  --merk:#C2410C; --accent:#C2410C;
  --rood:#C8102E; --rood-vlak:#FBE9EC; --groen:#1F7A4A; --groen-vlak:#E5F3EB; --geel:#8A5A00; --geel-vlak:#FFF3D6;
  --blauw:#1D5FBF; --blauw-vlak:#E6EEFB; --grijs-vlak:#ECE9E4;
  --schaduw:0 1px 2px rgba(0,0,0,.06), 0 4px 14px rgba(0,0,0,.05);
  --r:14px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141619; --vlak:#1D2024; --vlak2:#262A30; --ink:#F1EEE8; --zacht:#A3A7AE; --lijn:#30343B;
  --rood:#FF5C6C; --rood-vlak:#3A1A1F; --groen:#4CC283; --groen-vlak:#15301F; --geel:#F2BE55; --geel-vlak:#33280F;
  --blauw:#7FB0FF; --blauw-vlak:#172640; --grijs-vlak:#2A2E34; --schaduw:none; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141619; --vlak:#1D2024; --vlak2:#262A30; --ink:#F1EEE8; --zacht:#A3A7AE; --lijn:#30343B;
  --rood:#FF5C6C; --rood-vlak:#3A1A1F; --groen:#4CC283; --groen-vlak:#15301F; --geel:#F2BE55; --geel-vlak:#33280F;
  --blauw:#7FB0FF; --blauw-vlak:#172640; --grijs-vlak:#2A2E34; --schaduw:none; color-scheme:dark}

*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--ink)}
body{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;touch-action:manipulation}
h1{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:26px;line-height:1.15;margin:18px 0 10px;letter-spacing:-.01em}
h2{font-size:17px;margin:0 0 8px}
h3{font-size:15px;margin:0 0 6px}
p{margin:6px 0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
input,select,textarea{width:100%;background:var(--vlak);border:1px solid var(--lijn);border-radius:10px;padding:11px 12px;margin-top:4px}
textarea{resize:vertical}
input[type=checkbox]{width:22px;height:22px;margin:0;flex:none;accent-color:var(--merk)}
label{display:block;margin:10px 0;font-size:14px;color:var(--zacht)}
label input,label select,label textarea{color:var(--ink);font-size:16px}
:focus-visible{outline:3px solid var(--merk);outline-offset:2px}
a{color:inherit}

.zacht{color:var(--zacht)} .klein{font-size:13px} .midden{text-align:center} .ruim{padding:40px 0}
.rood-tekst{color:var(--rood)!important}
.afkap{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Knoppen */
.knop{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;padding:10px 16px;border-radius:12px;border:1px solid transparent;
  background:var(--vlak2);font-weight:600;text-decoration:none;line-height:1.2;text-align:center}
.knop:disabled{opacity:.55;cursor:wait}
.knop.rood{background:var(--merk);color:#fff}
.knop.zwart{background:var(--ink);color:var(--bg)}
.knop.groen{background:var(--groen);color:#fff}
.knop.rand{background:var(--vlak);border-color:var(--lijn)}
.knop.klein{min-height:36px;padding:6px 12px;font-size:14px}
.knop.breed{display:flex;width:100%;margin-top:10px}
.knop.icoon{width:46px;padding:0;flex:none;font-size:20px}
.link{background:none;border:0;padding:6px 0;color:var(--merk);font-weight:600;text-align:left}
.link.terug{margin-top:10px}
.mini{position:absolute;top:4px;right:4px;width:28px;height:28px;border-radius:50%;border:0;background:rgba(0,0,0,.6);color:#fff}
.knoppen-rij{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:10px 0}
.knoppen-rij.klein{gap:4px 16px;margin:4px 0}
.rij-knoppen{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:6px}

/* Bovenbalk en tabs */
.balk{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--bg);border-bottom:1px solid var(--lijn)}
.merk{display:flex;align-items:baseline;gap:10px;min-width:0;flex:1}
.merk b{font-family:Fraunces,Georgia,serif;font-size:20px;font-weight:600;white-space:nowrap}
.merk .zacht{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bedrijf-kies{width:auto;max-width:52vw;margin:0;padding:6px 10px;font-size:14px}
.bedrijf-naam{font-size:14px;color:var(--zacht);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--zacht);white-space:nowrap}
.status i{width:8px;height:8px;border-radius:50%;background:var(--zacht)}
.status.aan i{background:var(--groen)} .status.uit{color:var(--rood);font-weight:600} .status.uit i{background:var(--rood)} .status.wacht i{background:var(--geel)}
.testband{background:repeating-linear-gradient(45deg,var(--geel-vlak),var(--geel-vlak) 12px,transparent 12px,transparent 24px);color:var(--geel);font-size:12px;font-weight:600;text-align:center;padding:4px}
.tabs{position:fixed;bottom:0;left:0;right:0;z-index:20;display:flex;background:var(--vlak);border-top:1px solid var(--lijn);padding-bottom:env(safe-area-inset-bottom,0)}
.tab{flex:1;background:none;border:0;padding:10px 2px 12px;font-size:12px;font-weight:600;color:var(--zacht);position:relative}
.tab.actief{color:var(--merk)}
.tab.actief::before{content:"";position:absolute;top:0;left:20%;right:20%;height:3px;border-radius:0 0 3px 3px;background:var(--merk)}
.teller{display:inline-block;min-width:18px;margin-left:4px;padding:0 5px;border-radius:9px;background:var(--rood);color:#fff;font-size:11px;line-height:18px}
.inhoud{padding:4px 16px 110px;max-width:760px;margin:0 auto}
.versie{text-align:center;font-size:12px;color:var(--zacht);margin:0 0 90px}
@media (min-width:900px){
  .tabs{position:sticky;top:57px;bottom:auto;justify-content:center;gap:4px;border-top:0;border-bottom:1px solid var(--lijn);background:var(--bg)}
  .tab{flex:none;padding:12px 18px;font-size:14px}
  .tab.actief::before{top:auto;bottom:0;border-radius:3px 3px 0 0}
  .inhoud{padding-bottom:40px}
  .versie{margin-bottom:20px}
}
body.kantoor .inhoud{max-width:1200px}

/* Kaarten en lijsten */
.kaart{display:block;width:100%;text-align:left;background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:14px;margin:10px 0;box-shadow:var(--schaduw)}
.kaart.geel-vlak{background:var(--geel-vlak);border-color:transparent} .kaart.rood-vlak{background:var(--rood-vlak);border-color:transparent} .kaart.groen-vlak{background:var(--groen-vlak);border-color:transparent}
.rij{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.adres{font-size:17px}
.kop-rij{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.kop-rij h1,.kop-rij h2{margin-right:auto}
.item{display:block;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--lijn);padding:10px 2px}
.item:first-of-type{border-top:0}
.kaart .item:first-of-type{border-top:0}
.leeg{text-align:center;padding:30px 10px;color:var(--zacht)}
.leeg b{display:block;color:var(--ink);font-size:17px}
.leeg.groot{padding:80px 20px}
.stip{display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--rood);flex:none}
.chip{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap}
.chip.grijs{background:var(--grijs-vlak);color:var(--zacht)} .chip.blauw{background:var(--blauw-vlak);color:var(--blauw)}
.chip.geel{background:var(--geel-vlak);color:var(--geel)} .chip.rood{background:var(--rood-vlak);color:var(--rood)} .chip.groen{background:var(--groen-vlak);color:var(--groen)}
.voortgang{display:flex;align-items:center;gap:8px;flex:1;min-width:120px;font-size:13px;color:var(--zacht)}
.meter{flex:1;height:8px;border-radius:4px;background:var(--vlak2);overflow:hidden}
.meter i{display:block;height:100%;background:var(--groen);transition:width .3s}
.voortgang.groot{font-size:16px;font-weight:600;margin:6px 0 12px}
.voortgang.groot .meter{height:12px;border-radius:6px}
.twee{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
@media (max-width:480px){.twee{grid-template-columns:1fr}}
.veld-rij{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:15px}
.veld-rij select{flex:1;margin:0}
.veld-rij.groot{font-weight:600}
.vinkje-rij{display:flex;align-items:center;gap:10px;color:var(--ink);font-size:15px;cursor:pointer}
.vinkje-rij.groot{font-size:17px;padding:6px 0}
.gevaar{margin:30px 0 10px;padding-top:14px;border-top:1px dashed var(--lijn)}
.band{border-radius:12px;padding:12px 14px;margin:10px 0;font-weight:600}
.band.geel{background:var(--geel-vlak);color:var(--geel)} .band.rood{background:var(--rood-vlak);color:var(--rood)} .band.groen{background:var(--groen-vlak);color:var(--groen)}
.letop-blok{background:var(--rood-vlak);color:var(--rood);border-radius:var(--r);padding:12px 14px;margin:10px 0}
.letop-blok p{font-weight:600}
.orig{display:block;font-size:13px;color:var(--zacht);font-weight:400}

/* Regels */
.ruimte{margin:18px 0}
.ruimte h3{font-size:14px;text-transform:uppercase;letter-spacing:.04em;color:var(--zacht);margin:0 0 6px}
.ruimte-kop{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:57px;background:var(--bg);padding:6px 0;z-index:5}
.ruimte-kop h2{margin:0;font-size:18px}
.ruimte-kop .knop{position:relative}
.ruimte-kop .stip{position:absolute;top:-3px;right:-3px}
.regel{display:flex;align-items:flex-start;gap:10px;background:var(--vlak);border:1px solid var(--lijn);border-radius:12px;padding:8px;margin:6px 0}
.regel.af{background:var(--groen-vlak);border-color:transparent}
.regel.af .regel-tekst>span:first-child{color:var(--zacht)}
.regel.verborgen{opacity:.6;border-style:dashed}
.regel.letop{background:var(--rood-vlak);border-color:transparent}
.regel.vervallen .regel-tekst>span:first-child{text-decoration:line-through;color:var(--zacht)}
.vink{flex:none;width:40px;height:40px;border-radius:10px;border:2px solid var(--lijn);background:var(--vlak);font-size:22px;font-weight:800;line-height:1;color:#fff;display:flex;align-items:center;justify-content:center}
.vink.aan{background:var(--groen);border-color:var(--groen)}
.vink.leeg{border-style:dashed;color:var(--zacht);font-size:16px}
.vink.groot{width:56px;height:56px;border-radius:14px;font-size:30px}
.regel-tekst{flex:1;display:flex;flex-direction:column;gap:3px;background:none;border:0;padding:4px 0;text-align:left;min-height:40px;justify-content:center}
.ploeg .regel-tekst>span:first-child{font-size:18px;font-weight:500}
.vt{font-size:14px;color:var(--blauw)}
.hoev{white-space:nowrap}
.labels{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.labels:empty{display:none}

/* Onderbalk ploeg */
.onderbalk{position:fixed;bottom:0;left:0;right:0;z-index:20;display:grid;grid-template-columns:repeat(4,1fr);background:var(--vlak);border-top:1px solid var(--lijn);padding-bottom:env(safe-area-inset-bottom,0)}
.onderbalk button{background:none;border:0;padding:10px 4px 12px;font-size:12px;font-weight:600;display:flex;flex-direction:column;align-items:center;gap:2px;line-height:1.15}
.onderbalk button span{font-size:22px}
.onderbalk .klaar-aan{background:var(--groen);color:#fff}

/* Blad (venster) */
.laag{position:fixed;inset:0;z-index:50;background:rgba(10,12,15,.45);display:flex;align-items:flex-end;justify-content:center}
.blad{background:var(--bg);width:100%;max-width:560px;max-height:92vh;overflow:auto;border-radius:20px 20px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom,0))}
.blad.breed{max-width:640px;display:flex;flex-direction:column;height:92vh}
@media (min-width:700px){.laag{align-items:center}.blad{border-radius:20px}.blad.breed{height:min(760px,90vh)}}
.g-boven{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.g-boven h2{font-size:19px;margin:0}
.g-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--vlak);border:1px solid var(--lijn);border-radius:12px;padding:8px 10px;margin:8px 0}
.g-status .knoppen-rij{margin:0;width:100%}
.g-lijst{flex:1;overflow:auto;padding:8px 2px;display:flex;flex-direction:column;gap:8px;min-height:120px}
.bel{max-width:82%;padding:8px 11px;border-radius:14px;background:var(--vlak);border:1px solid var(--lijn)}
.bel.eigen{align-self:flex-end;background:var(--blauw-vlak);border-color:transparent}
.bel-wie{font-size:11px;color:var(--zacht);margin-bottom:2px}
.bel-tekst{white-space:pre-wrap;word-wrap:break-word}
.bel-orig{font-size:12px;color:var(--zacht);margin-top:3px;font-style:italic}
.bel-foto{display:block;max-width:100%;max-height:260px;border-radius:10px;margin:4px 0;cursor:zoom-in;background:var(--vlak2);min-height:60px;min-width:80px}
.bel-voet{text-align:right;font-size:12px;line-height:1}
.vinkje{color:var(--zacht);font-weight:700;letter-spacing:-2px}
.vinkje.blauw{color:var(--blauw)}
.g-invoer{display:flex;gap:8px;align-items:flex-end;padding-top:8px;border-top:1px solid var(--lijn)}
.g-invoer textarea{margin:0;min-height:46px;max-height:140px;flex:1}
.voorbeeld{position:relative;display:inline-block;margin-top:8px}
.voorbeeld img{max-height:110px;border-radius:10px;display:block}
.grote-code{font-family:ui-monospace,Menlo,monospace;font-size:48px;font-weight:700;text-align:center;letter-spacing:.08em;background:var(--vlak);border:2px dashed var(--merk);border-radius:16px;padding:18px;margin:12px 0}
.stappen{padding-left:20px}
.stappen li{margin:6px 0}

/* Ploegen en tablets */
.tablet-rij{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--lijn)}
.tablet-rij:first-of-type{border-top:0}
.tablet-rij>div{flex:1;min-width:0}
.dot{width:10px;height:10px;border-radius:50%;background:var(--zacht);flex:none;opacity:.5}
.dot.aan{background:var(--groen);opacity:1;box-shadow:0 0 0 3px var(--groen-vlak)}

/* Overzicht */
.tegels{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:10px 0}
.tegel{background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);padding:14px}
.tegel b{display:block;font-family:Fraunces,Georgia,serif;font-size:30px;font-weight:600}
.tegel span{font-size:13px;color:var(--zacht)}
.tabel-schuif{overflow-x:auto;background:var(--vlak);border:1px solid var(--lijn);border-radius:var(--r);margin:10px 0}
.tabel{width:100%;border-collapse:collapse;font-size:14px;min-width:760px}
.tabel th{text-align:left;font-size:12px;color:var(--zacht);font-weight:600;padding:10px;border-bottom:1px solid var(--lijn)}
.tabel td{padding:10px;border-bottom:1px solid var(--lijn);vertical-align:middle}
.tabel select{margin:0;padding:6px 8px;font-size:13px}

/* Chauffeur */
.rit.actief{border-color:var(--blauw);box-shadow:0 0 0 2px var(--blauw-vlak)}

/* Login en meldingen */
.login,.midden-scherm{max-width:440px;margin:0 auto;padding:36px 16px 40px}
.midden-scherm{text-align:center;padding-top:80px}
.merk-groot{font-family:Fraunces,Georgia,serif;font-weight:600;font-size:52px;letter-spacing:-.02em;line-height:1;margin-bottom:18px}
.merk-groot span{color:var(--accent)}
.melding{background:var(--geel-vlak);color:var(--geel);padding:10px 12px;border-radius:10px;font-weight:600}
.code-veld{font-size:28px!important;letter-spacing:.3em;text-align:center;font-family:ui-monospace,Menlo,monospace}

/* Toast */
.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,20px);z-index:60;background:var(--ink);color:var(--bg);padding:12px 16px;border-radius:12px;max-width:min(92vw,520px);
  font-weight:600;font-size:15px;opacity:0;pointer-events:none;transition:all .2s;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.toast.toon{opacity:1;transform:translate(-50%,0)}
.toast.fout{background:var(--rood);color:#fff}