/* Flex2Move — stijl gebaseerd op goedgekeurde ontwerprichting A (het planbord) */

:root {
  --bg: #f6f7f5;
  --kaart: #ffffff;
  --rand: #e3e5e1;
  --ink: #232a31;
  --mut: #68707a;
  --zwak: #98a1a9;
  --accent: #14606f;
  --accent-licht: #e8f1f2;
  --wacht: #d97706;
  --wacht-bg: #fbf7ef;
  --wacht-rand: #ecdfc8;
  --ok: #15803d;
  --ok-bg: #e5f3e9;
  --blauw: #2563eb;
  --blauw-bg: #e3ecfb;
  --rood: #dc2626;
  --paars: #7c3aed;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: ui-sans-serif, system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 14px;
  line-height: 1.45;
}
button { font: inherit; cursor: pointer; }
input, select { font: inherit; }

/* ---------- login ---------- */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #10333b, #14606f);
  padding: 20px;
}
.login-kaart {
  background: #fff; border-radius: 18px; padding: 34px 36px; width: 380px; max-width: 100%;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
}
.login-kaart h1 { margin: 0 0 4px; font-size: 22px; color: var(--accent); letter-spacing: -.01em; }
.login-kaart .sub { color: var(--mut); font-size: 13px; margin-bottom: 22px; }
.login-kaart label { display: block; font-size: 12.5px; font-weight: 700; color: var(--mut); margin-bottom: 14px; }
.login-kaart input {
  width: 100%; margin-top: 5px; padding: 11px 12px; border: 1.5px solid var(--rand);
  border-radius: 10px; font-size: 15px;
}
.login-kaart input:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
#login-knop {
  width: 100%; padding: 12px; border: 0; border-radius: 10px; background: var(--accent);
  color: #fff; font-weight: 800; font-size: 15px; margin-top: 6px;
}
#login-fout { color: var(--rood); font-size: 13px; min-height: 18px; margin-top: 10px; }

/* ---------- app-kop ---------- */
.kop {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 16px; background: var(--kaart); border-bottom: 1px solid var(--rand);
  position: sticky; top: 0; z-index: 30;
  /* PWA op iPad: niet onder de klok/batterij van de statusbalk tekenen */
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
  padding-left: calc(16px + env(safe-area-inset-left, 0px));
  padding-right: calc(16px + env(safe-area-inset-right, 0px));
}
.merk { font-weight: 800; font-size: 15px; color: var(--accent); display: flex; align-items: center; gap: 8px; }
.merk svg { width: 19px; height: 19px; flex: none; }
.merk .twee, .login-kaart h1 .twee { color: var(--wacht); }
.login-logo { width: 52px; height: 52px; display: block; margin-bottom: 10px; }
#kop-datum {
  border: 1.5px solid var(--rand); border-radius: 9px; padding: 6px 8px; font-size: 13.5px;
  background: #fff; color: var(--ink);
}
#kop-dagtekst { color: var(--mut); font-size: 13px; }
#kop-tellers { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.teller {
  display: inline-flex; align-items: center; gap: 7px; background: #f1f2f0;
  border-radius: 999px; padding: 5px 12px; font-weight: 700; font-size: 12.5px;
}
.teller b { font-variant-numeric: tabular-nums; font-size: 14px; }
.bol { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.bol.binnen { background: #64748b; } .bol.vrij { background: var(--wacht); }
.bol.inauto { background: var(--accent); } .bol.weg { background: var(--blauw); }
.bol.zelf { background: var(--paars); } .bol.ziek { background: var(--rood); }
.bol.afwezig { background: var(--rood); } .bol.autos { background: var(--accent); }

.tabs { display: flex; gap: 4px; }
.tab {
  border: 1.5px solid var(--rand); background: #fff; color: var(--mut);
  border-radius: 9px; padding: 7px 14px; font-weight: 700; font-size: 13px;
}
.tab.actief { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- bord ---------- */
.bord {
  display: grid; grid-template-columns: minmax(0, 1fr) 290px 350px;
  min-height: calc(100vh - 54px); align-items: stretch;
}
@media (max-width: 1280px) {
  .bord { grid-template-columns: minmax(0, 1fr) 250px 310px; }
}
@media (max-width: 1120px) {
  .bord { grid-template-columns: minmax(0, 1fr) 225px 285px; }
}
.kol { padding: 14px 16px; min-width: 0; overflow: hidden; }
.kol + .kol { border-left: 1px solid var(--rand); }
.kolkop {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--mut); font-weight: 800; margin-bottom: 10px; display: flex; gap: 8px; align-items: baseline;
}
.kolkop span { color: var(--zwak); font-weight: 600; text-transform: none; letter-spacing: 0; }

.teamlabel {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--zwak); margin: 12px 0 7px;
}
/* machinekaarten schalen mee: bij een smalle kolom vallen ze terug naar 1 per rij */
.machines { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 8px; }
.machinekaart { background: var(--kaart); border: 1px solid var(--rand); border-radius: 12px; padding: 9px 11px; min-width: 0; }
.machinekaart.leeg { opacity: .55; }
.mkop { display: flex; align-items: center; gap: 6px 8px; cursor: pointer; user-select: none; flex-wrap: wrap; }
.chip { max-width: 100%; }
.chip .nm { overflow-wrap: anywhere; }
.mkop b { font-size: 13.5px; }
.mkop .cnt {
  margin-left: auto; background: #eef0ee; border-radius: 999px; font-size: 11.5px;
  font-weight: 800; padding: 2px 9px; font-variant-numeric: tabular-nums;
}
.mkop .pijl { color: var(--zwak); font-size: 11px; transition: transform .15s; }
.machinekaart.dicht .pijl { transform: rotate(-90deg); }
.machinekaart.dicht .chiplijst { display: none; }
.chiplijst { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; min-height: 10px; }

.chip {
  display: inline-flex; align-items: center; gap: 6px; background: #f1f2f0;
  border: 1px solid var(--rand); border-radius: 999px; padding: 4px 11px;
  font-size: 12.5px; font-weight: 600; cursor: pointer; touch-action: manipulation;
  user-select: none; -webkit-user-select: none;
}
.chip .pl { color: var(--zwak); font-weight: 500; font-size: 11px; }

/* chauffeur: gevulde chip met stuurtje — niet te missen */
.chip.chf { background: var(--accent); border-color: var(--accent); color: #fff; }
.chip.chf .pl { color: #bcdbe1; }
.chip.chf .rolb { color: #bcdbe1; border-color: rgba(255, 255, 255, .35); }
.wiel {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%; background: #fff; flex: none;
}
.wiel svg { width: 11px; height: 11px; stroke: var(--accent); }
.wchip.chf { background: #fff; color: var(--ink); border-left-color: var(--accent); }
.wchip.chf .pl { color: var(--zwak); }
.wchip.chf .wiel { background: var(--accent); }
.wchip.chf .wiel svg { stroke: #fff; }
.rolb { font-size: 9.5px; color: var(--zwak); border: 1px solid var(--rand); border-radius: 4px; padding: 0 4px; }

/* presentiecontrole op de chips */
.chip.ok { border-color: var(--ok); }
.chip.ok::before { content: "✓"; color: var(--ok); font-weight: 900; font-size: 11px; }
.chip.chf.ok::before { color: #9fe3b5; }
.chip.weg { opacity: .45; text-decoration: line-through; cursor: pointer; }

/* knoppen op de machinekop */
.mkop .ctrl {
  margin-left: auto; border: 1.5px solid var(--accent); background: #fff; color: var(--accent);
  border-radius: 999px; font-size: 10.5px; font-weight: 800; padding: 3px 10px; white-space: nowrap;
}
.mkop .ctrl.klaar { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
.mkop .alles {
  border: 0; background: var(--accent); color: #fff; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; padding: 4px 11px; white-space: nowrap;
}
.mkop .ctrl + .alles { margin-left: 0; }
.mkop .cnt { margin-left: 0; }
.mkop b { margin-right: auto; }

/* afvinklijst presentiecontrole */
.modal-knop.ctl-alles {
  border-color: var(--ok); color: var(--ok); text-align: center; font-weight: 800;
  background: var(--ok-bg);
}
.ctl-houder { max-height: 52vh; overflow-y: auto; margin-bottom: 10px; }
.ctl-rij {
  display: flex; align-items: center; gap: 10px; border: 1.5px solid var(--rand);
  border-radius: 11px; padding: 8px 12px; margin-bottom: 6px;
}
.ctl-rij .nm { font-weight: 700; }
.ctl-rij .knoppen { margin-left: auto; display: flex; gap: 6px; }
.ctl-rij .ja, .ctl-rij .nee {
  border: 1.5px solid var(--rand); background: #fff; border-radius: 9px;
  font-weight: 800; font-size: 14px; padding: 7px 15px; color: var(--zwak);
}
.ctl-rij.aan { border-color: var(--ok); background: var(--ok-bg); }
.ctl-rij.aan .ja { background: var(--ok); border-color: var(--ok); color: #fff; }
.ctl-rij.afw { border-color: var(--rood); background: #fdeaea; }
.ctl-rij.afw .nee { background: var(--rood); border-color: var(--rood); color: #fff; }
.ctl-rij.afw .nm { text-decoration: line-through; color: var(--mut); }

/* postcode op inzittenden-chips (afzetvolgorde) */
.pcb {
  background: var(--accent); color: #fff; border-radius: 6px; font-size: 10.5px;
  font-weight: 800; padding: 1px 6px; font-variant-numeric: tabular-nums;
}
.volg { color: var(--zwak); font-size: 10px; font-weight: 800; }
.sortable-ghost { opacity: .4; }
.sortable-drag { box-shadow: 0 10px 24px rgba(0,0,0,.25); }
body.sleept .kol-wacht .chiplijst, body.sleept .riderslijst {
  outline: 2px dashed var(--wacht); outline-offset: 4px; border-radius: 10px;
}
body.sleept .mach-lijst[data-machineid] {
  outline: 2px dashed var(--accent); outline-offset: 4px; border-radius: 10px;
  min-height: 26px;
}

/* werkvloer-kop met toevoegknop */
.vloerkop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.vloerkop .kolkop { margin-bottom: 0; }
#bord-zoek {
  border: 1.5px solid var(--rand); border-radius: 999px; padding: 6px 14px;
  font-size: 13px; background: #fff; width: 168px; color: var(--ink);
}
#bord-zoek:focus { outline: 2px solid var(--accent); border-color: var(--accent); }
#bord-zoek-teller { font-size: 11.5px; font-weight: 800; color: var(--accent); }
body.zoekt #view-bord .chip:not(.zoek-hit) { opacity: .22; }
#view-bord .chip.zoek-hit { box-shadow: 0 0 0 2.5px var(--accent); }
.machinekaart.zoek-dim { opacity: .35; }
.machinekaart.zoek-open .chiplijst { display: flex !important; }
.plusknop {
  margin-left: auto; border: 1.5px dashed #bcc4c9; background: transparent;
  border-radius: 999px; padding: 4px 13px; font-weight: 800; color: var(--accent); font-size: 12.5px;
}

/* chauffeursbalk (ingeklapt overzicht) */
.chfstrip {
  background: #0f3d47; border-radius: 12px; padding: 10px 13px; color: #fff;
  display: flex; align-items: center; gap: 9px; margin-bottom: 10px; cursor: pointer;
  user-select: none; -webkit-user-select: none;
}
.chfstrip b { font-size: 13px; }
.chfstrip .cijfers { color: #9fc9d1; font-size: 12px; }
.chfstrip .pijl { margin-left: auto; color: #9fc9d1; font-size: 12px; }
.chfstrip .wiel { width: 18px; height: 18px; }
.chfstrip .wiel svg { width: 12px; height: 12px; stroke: #0f3d47; }
body.sleept .chflijst { display: none !important; }
.chflijst { margin-top: -4px; }

/* wachtende auto's: dunne regels (geen sleepdoel) */
.binnenrij {
  display: flex; align-items: center; gap: 9px; background: var(--kaart);
  border: 1px solid var(--rand); border-radius: 9px; padding: 6px 11px;
  margin-bottom: 4px; font-size: 12.5px; cursor: pointer;
}
.binnenrij .st { width: 8px; height: 8px; border-radius: 50%; background: #f5b40a; flex: none; }
.binnenrij b { font-size: 12.5px; }
.binnenrij .zt { background: #eef0ee; border-radius: 5px; font-size: 10.5px; font-weight: 800; padding: 1px 6px; }
.binnenrij .wr { color: var(--zwak); font-size: 11px; margin-left: auto; }
.autokaart.avail .akop { cursor: pointer; }

/* chauffeurspaneel */
.chfpaneel { background: #0f3d47; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px; color: #fff; }
.chfpaneel .pk {
  display: flex; align-items: baseline; gap: 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: .08em; font-weight: 800; color: #9fc9d1; margin-bottom: 9px;
}
.chfpaneel .pk b { color: #fff; font-size: 13.5px; letter-spacing: 0; text-transform: none; }
.chfrij {
  display: flex; align-items: center; gap: 9px; padding: 7px 9px; border-radius: 9px;
  background: rgba(255, 255, 255, .07); margin-bottom: 5px; cursor: pointer;
}
.chfrij:last-child { margin-bottom: 0; }
.chfrij .st { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.st-binnen { background: #f5b40a; } .st-vrij { background: #39c26d; } .st-weg { background: #4da3ff; }
.chfrij .nm { font-weight: 700; font-size: 13px; }
.chfrij .zit { background: rgba(255, 255, 255, .14); border-radius: 6px; font-size: 10.5px; font-weight: 800; padding: 1px 7px; }
.chfrij .wa { color: #9fc9d1; font-size: 11.5px; margin-left: auto; text-align: right; }
.autokaart.flits { box-shadow: 0 0 0 3px var(--wacht); transition: box-shadow .2s; }

/* machinekeuze (verplaatsen / persoon toevoegen) */
.mk-team {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--zwak); margin: 12px 0 6px;
}
.mk-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.mk-knop {
  border: 1.5px solid var(--rand); background: #fff; border-radius: 999px;
  padding: 7px 14px; font-size: 12.5px; font-weight: 700; color: var(--mut);
}
.mk-knop.aan, .mk-knop:active { background: var(--accent); border-color: var(--accent); color: #fff; }
.mk-knop.huidig { opacity: .45; border-style: dashed; cursor: default; }

/* persoon toevoegen */
.pt-zoek {
  width: 100%; padding: 10px 12px; border: 1.5px solid var(--rand); border-radius: 10px;
  font-size: 14px; margin-bottom: 4px;
}
.pt-resultaten { display: flex; flex-direction: column; gap: 5px; margin-top: 5px; }
.pt-resultaat {
  display: flex; align-items: center; gap: 9px; border: 1.5px solid var(--rand);
  border-radius: 10px; padding: 8px 11px; font-size: 13px; cursor: pointer;
}
.pt-resultaat b { font-weight: 700; }
.pt-resultaat .sub { color: var(--zwak); font-size: 11.5px; }
.pt-resultaat .vink { margin-left: auto; color: var(--accent); font-weight: 900; }
.pt-resultaat.gekozen { border-color: var(--accent); background: var(--accent-licht); }
.pt-resultaat.al { opacity: .5; cursor: default; }
.pt-resultaat.nieuw { border-style: dashed; border-color: var(--wacht-rand); background: #fff8ec; }

/* wachtrij — de hele kolom is over de volle bordhoogte dropgebied */
.kol-wacht { background: var(--wacht-bg); display: flex; flex-direction: column; }
.wachtlijst { display: flex; flex-direction: column; gap: 6px; margin-top: 0; flex: 1; min-height: 55vh; }

/* zwevende droppil onderaan tijdens slepen */
#sleepdoel {
  position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); z-index: 95;
  display: flex; align-items: center; justify-content: center; gap: 11px;
  min-width: 300px; padding: 15px 28px; border-radius: 999px;
  background: rgba(15, 61, 71, .97); color: #fff; font-weight: 800; font-size: 14px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .35);
  opacity: 0; transform: translateX(-50%) translateY(84px); pointer-events: none;
  transition: transform .22s ease, opacity .22s ease, box-shadow .15s ease;
}
body.sleept #sleepdoel {
  opacity: 1; transform: translateX(-50%) translateY(0); pointer-events: auto;
}
#sleepdoel.actief {
  box-shadow: 0 0 0 3px var(--wacht), 0 14px 38px rgba(0, 0, 0, .4);
  transform: translateX(-50%) translateY(0) scale(1.05);
}
#sleepdoel .sd-icoon {
  width: 26px; height: 26px; border-radius: 50%; background: var(--wacht);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
#sleepdoel .sd-icoon svg { width: 14px; height: 14px; }
#sleepdoel .chip { display: none; }
@media (prefers-reduced-motion: reduce) { #sleepdoel { transition: none; } }
.wchip {
  display: flex; width: 100%; background: #fff; border: 1px solid var(--wacht-rand);
  border-left: 4px solid var(--wacht); border-radius: 10px; padding: 9px 11px;
}
.wchip .nm { font-weight: 700; font-size: 13px; }
.wchip .t { margin-left: auto; font-size: 11px; color: #b08a4f; font-weight: 800; font-variant-numeric: tabular-nums; }
.wchip.sel { box-shadow: 0 0 0 2.5px var(--wacht); }
.wchip .meer {
  border: 0; background: transparent; color: var(--zwak); font-size: 16px; line-height: 1;
  padding: 0 2px; margin-left: 4px;
}
.leeghint { color: var(--zwak); font-size: 12.5px; padding: 10px 4px; }

/* auto's */
.autokaart {
  background: var(--kaart); border: 1px solid var(--rand); border-radius: 14px;
  padding: 12px 14px; margin-bottom: 10px; position: relative;
}
.autokaart.avail { border-color: #bcd8d0; }
.autokaart.match { box-shadow: 0 0 0 2.5px var(--ok); border-color: var(--ok); }
.autokaart.match::after {
  content: "route past"; position: absolute; top: -9px; right: 12px; background: var(--ok);
  color: #fff; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 2px 9px;
}
.akop { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.akop b { font-size: 14px; }
.akop .rt { color: var(--zwak); font-size: 11.5px; }
.akop .st { margin-left: auto; font-size: 10.5px; font-weight: 800; border-radius: 999px; padding: 2px 9px; }
.st.av { background: var(--ok-bg); color: var(--ok); }
.st.lk { background: #eef0ee; color: var(--zwak); }
.stoelen { display: flex; gap: 5px; margin: 9px 0 8px; flex-wrap: wrap; }
.stoel { width: 17px; height: 17px; border-radius: 5px; border: 1.5px solid #cfd4d0; background: #fff; }
.stoel.f { background: var(--accent); border-color: var(--accent); }
.riderslijst { min-height: 30px; border-radius: 8px; }
.rider { background: var(--accent-licht); border-color: transparent; }
.knop {
  border: 1.5px solid var(--rand); background: #fff; color: var(--ink);
  border-radius: 9px; padding: 8px 14px; font-weight: 700; font-size: 13px;
}
.knop.primair { background: var(--accent); border-color: var(--accent); color: #fff; }
.knop.gevaar { border-color: var(--rood); color: var(--rood); }
.knop.klein { padding: 4px 10px; font-size: 12px; }
.knop.groot { padding: 12px 22px; font-size: 15px; margin-top: 14px; }
.knop.vertrek {
  margin-top: 9px; width: 100%; border: 0; background: var(--accent); color: #fff; font-weight: 800;
}
.autokaart.lock .lockmsg { font-size: 11.5px; color: var(--zwak); margin-top: 7px; }
.extra-auto {
  width: 100%; border: 1.5px dashed #bcc4c9; background: transparent; border-radius: 12px;
  padding: 11px; font-weight: 700; color: var(--mut); font-size: 13px; margin: 2px 0 14px;
}
.sublabel {
  font-size: 10.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--zwak); margin: 14px 0 8px;
}
.vertrokken-rij {
  display: flex; align-items: center; gap: 10px; background: var(--blauw-bg);
  border: 1px solid #dfe7f5; border-radius: 10px; padding: 8px 12px; margin-bottom: 6px;
  font-size: 12.5px; cursor: pointer;
}
.vertrokken-rij b { font-size: 13px; }
.vertrokken-rij .who { color: var(--mut); font-size: 11.5px; }
.vertrokken-rij .t { margin-left: auto; color: var(--blauw); font-weight: 800; font-size: 11.5px; }

.leegstaat { text-align: center; padding: 80px 20px; color: var(--mut); }
.leegstaat h3 { color: var(--ink); margin-bottom: 6px; }

/* ---------- modal / actieblad ---------- */
#modal-laag {
  position: fixed; inset: 0; background: rgba(20, 25, 30, .45); display: none;
  align-items: flex-end; justify-content: center; z-index: 100;
  padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
#modal-laag.open { display: flex; }
.modal-blad {
  background: #fff; border-radius: 18px; padding: 18px; width: 440px; max-width: 100%;
  box-shadow: 0 -10px 50px rgba(0, 0, 0, .3); margin-bottom: 4vh;
}
.modal-titel { font-weight: 800; font-size: 15px; margin-bottom: 12px; }
.modal-sub { display: block; color: var(--mut); font-weight: 500; font-size: 12.5px; margin-top: 3px; }
.modal-extra { color: var(--mut); font-size: 13px; margin: -4px 0 12px; }
.modal-knop {
  display: block; width: 100%; text-align: left; border: 1.5px solid var(--rand); background: #fff;
  border-radius: 11px; padding: 12px 14px; font-weight: 700; font-size: 14px; margin-bottom: 8px;
}
.modal-knop.primair { background: var(--accent); border-color: var(--accent); color: #fff; }
.modal-knop.gevaar { border-color: var(--rood); color: var(--rood); }
.modal-knop.annuleer { color: var(--zwak); border-style: dashed; text-align: center; }
.modal-form label { display: block; font-size: 12.5px; font-weight: 700; color: var(--mut); margin-bottom: 12px; }
.modal-form input {
  width: 100%; margin-top: 4px; padding: 10px 11px; border: 1.5px solid var(--rand);
  border-radius: 9px; font-size: 14px;
}

/* ---------- toast ---------- */
#vp-toast {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%) translateY(20px);
  background: #232a31; color: #fff; font-size: 13.5px; font-weight: 600;
  border-radius: 999px; padding: 11px 20px; opacity: 0; pointer-events: none;
  transition: opacity .18s, transform .18s; z-index: 200; max-width: 90vw;
}
#vp-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
#vp-toast.fout { background: var(--rood); }

/* ---------- import ---------- */
.import-wrap, .reg-wrap, .inst-wrap { max-width: 860px; margin: 0 auto; padding: 26px 20px 60px; }
.import-wrap h2, .reg-wrap h2, .inst-wrap h2 { margin: 0 0 6px; }
.uitleg { color: var(--mut); font-size: 13.5px; }
.import-rij { display: flex; gap: 18px; flex-wrap: wrap; margin: 18px 0; }
.veld { font-size: 12.5px; font-weight: 700; color: var(--mut); }
.veld input { margin-top: 5px; padding: 9px 11px; border: 1.5px solid var(--rand); border-radius: 9px; background: #fff; }
.foto-hint { margin-top: -6px; font-size: 12.5px; }
.foto-status { font-weight: 700; color: var(--accent); font-size: 13.5px; margin: 8px 0; min-height: 20px; display: flex; align-items: center; gap: 8px; }
.spinner {
  width: 15px; height: 15px; border-radius: 50%; display: inline-block;
  border: 2.5px solid var(--accent-licht); border-top-color: var(--accent);
  animation: vp-tol .8s linear infinite;
}
@keyframes vp-tol { to { transform: rotate(360deg); } }
.prev-kop { background: var(--kaart); border: 1px solid var(--rand); border-radius: 12px; padding: 13px 16px; margin-bottom: 10px; }
.waarsch { color: var(--wacht); font-weight: 800; }
.prev-waarsch {
  background: #fff8ec; border: 1px solid var(--wacht-rand); border-radius: 12px;
  padding: 10px 14px; margin-bottom: 10px; font-size: 13px;
}
.w-regel { padding: 3px 0; }
.prev-machines { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.prev-machine {
  background: var(--kaart); border: 1px solid var(--rand); border-radius: 10px;
  padding: 9px 13px; display: flex; justify-content: space-between; gap: 10px; font-size: 13px;
}
.prev-machine.nieuw { border-color: var(--wacht); }
.prev-machine span { color: var(--mut); }

/* ---------- registers ---------- */
.reg-balk { display: flex; gap: 16px; align-items: center; margin: 16px 0; }
.reg-balk input[type="search"] {
  flex: 1; padding: 10px 13px; border: 1.5px solid var(--rand); border-radius: 10px; background: #fff;
}
.chf-filter { font-size: 13px; font-weight: 700; color: var(--mut); display: flex; gap: 6px; align-items: center; }

/* samenvattingsstrook chauffeurs in register */
.chfstrook { background: var(--kaart); border: 1.5px solid #bcd8d0; border-radius: 14px; padding: 12px 14px; margin-bottom: 14px; }
.chfstrook .sk {
  font-size: 11px; text-transform: uppercase; letter-spacing: .08em; font-weight: 800;
  color: var(--mut); margin-bottom: 8px;
}
.chfstrook .sk b { color: var(--accent); text-transform: none; letter-spacing: 0; font-size: 13.5px; }
.chftags { display: flex; flex-wrap: wrap; gap: 7px; }
.chftag {
  display: inline-flex; align-items: center; gap: 8px; background: var(--accent); color: #fff;
  border-radius: 999px; padding: 6px 6px 6px 13px; font-size: 12.5px; font-weight: 700;
}
.chftag .det { color: #bcdbe1; font-weight: 500; font-size: 11.5px; }
.chftag .x {
  width: 21px; height: 21px; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .18);
  color: #fff; display: inline-flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; cursor: pointer;
}
.chftag.onvolledig { background: #b45309; }
.chftag.onvolledig .det { color: #ffe1b3; }
.reg-rij.is-chf { background: var(--accent-licht); border-color: var(--accent); }
.reg-tabel { display: flex; flex-direction: column; gap: 4px; }
.reg-rij {
  display: grid; grid-template-columns: 64px 1.35fr 84px 1fr 70px 64px 1.5fr;
  gap: 8px; align-items: center; background: var(--kaart); border: 1px solid var(--rand);
  border-radius: 10px; padding: 7px 12px; font-size: 13px;
}
.reg-rij.kop {
  background: transparent; border: 0; color: var(--zwak); font-size: 11px; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; padding-bottom: 0;
}
.reg-rij .nr { color: var(--mut); font-variant-numeric: tabular-nums; }
.reg-rij .naam { font-weight: 700; }
.reg-rij input[type="text"], .reg-rij input[type="number"] {
  padding: 6px 9px; border: 1.5px solid var(--rand); border-radius: 8px; width: 100%; font-size: 13px;
}
.reg-rij .chk { text-align: center; }
.reg-rij input[type="checkbox"] { width: 18px; height: 18px; }

/* ---------- instellingen ---------- */
.inst-blok { background: var(--kaart); border: 1px solid var(--rand); border-radius: 14px; padding: 16px 18px; margin: 14px 0; }
.inst-blok h3 { margin: 0 0 8px; font-size: 15px; }
.inst-blok input[type="password"] {
  padding: 9px 11px; border: 1.5px solid var(--rand); border-radius: 9px; margin-right: 8px; width: 260px; max-width: 60%;
}
.inst-rij { display: flex; gap: 8px; align-items: center; padding: 6px 0; }
.inst-rij b { margin-right: auto; }
.versie { color: var(--zwak); font-size: 12px; text-align: center; margin-top: 26px; }

/* ---------- ronde 2: signalen ---------- */
.teller.krap { background: #fdf1e3; outline: 2px solid var(--wacht); outline-offset: 1px; }
.teller .sein { font-size: 10.5px; font-weight: 800; color: #b45309; letter-spacing: .02em; }

.banner {
  display: flex; align-items: center; gap: 12px; margin: 12px 16px 0; padding: 12px 16px;
  background: var(--ok-bg); border: 1.5px solid var(--ok); border-radius: 12px;
}
.banner .tekst { font-weight: 800; color: #14532d; font-size: 13.5px; }
.banner .sub2 { color: #3f6212; font-size: 12px; }
.banner button {
  margin-left: auto; border: 0; border-radius: 9px; background: var(--ok); color: #fff;
  font-weight: 800; padding: 10px 20px; font-size: 13px; flex: none;
}
.banner.grijs { background: #f1f2f0; border-color: var(--rand); }
.banner.grijs .tekst { color: var(--mut); }
.banner.grijs .sub2 { color: var(--zwak); }

.wchip.lang { border-color: var(--wacht); background: #fdf1e3; }
.wchip.lang .t { color: #b45309; font-weight: 800; }
.wchip.heellang { border-color: var(--rood); border-left-color: var(--rood); background: #fdeaea; }
.wchip.heellang .t { color: var(--rood); font-weight: 800; }

.modal-extra .hintblok, .hintblok {
  background: #fdf1e3; border: 1.5px solid var(--wacht-rand); border-radius: 10px;
  padding: 9px 12px; font-size: 12.5px; color: #8a6d3b; margin-top: 9px;
}
.hintblok b { color: #b45309; }

/* verbinding-indicator */
.vb { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; border-radius: 999px; padding: 4px 8px; }
.vb .stip { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.vb.ok .stip { background: #15803d; }
.vb.offline { background: #fdeaea; color: var(--rood); padding: 4px 11px; }
.vb.offline .stip { background: var(--rood); }
.vb.bezig { background: #fdf1e3; color: #b45309; padding: 4px 11px; }
.vb.bezig .stip { background: var(--wacht); }

/* ---------- ronde 2: invulmodus ---------- */
.invul-balk { display: flex; gap: 8px; margin: -4px 0 14px; flex-wrap: wrap; }
.invulknop { border-style: dashed; color: var(--accent); font-weight: 800; }
#modal-laag.midden { align-items: center; }
.modal-blad.invul { width: 500px; }
.invul .voortgang { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.invul .balk { flex: 1; height: 8px; border-radius: 4px; background: #eef0ee; overflow: hidden; }
.invul .balk i { display: block; height: 100%; background: var(--accent); border-radius: 4px; transition: width .2s; }
.invul .vt { font-size: 12px; font-weight: 800; color: var(--mut); }
.invul .naam { font-size: 19px; font-weight: 800; margin-bottom: 2px; }
.invul .subnaam { color: var(--zwak); font-size: 12.5px; margin-bottom: 12px; }
.invul input {
  width: 100%; padding: 13px 15px; border: 1.5px solid var(--accent); border-radius: 11px; font-size: 16px;
}
.invul .suggesties { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; min-height: 36px; }
.invul .pdok-preview { min-height: 24px; margin-top: 10px; font-size: 14.5px; font-weight: 800; color: var(--accent); }
.invul .pdok-preview .klein { font-weight: 500; color: var(--mut); font-size: 12px; }
.invul .sug {
  border: 1.5px solid var(--rand); border-radius: 999px; padding: 7px 15px;
  font-size: 13px; font-weight: 700; color: var(--mut); background: #fff;
}
.invul .sug.top { background: var(--accent-licht); border-color: var(--accent); color: var(--accent); }
.invul .sug .sn { color: var(--zwak); font-weight: 600; font-size: 11px; }
.invul .verder { margin-top: 14px; display: flex; gap: 8px; }
.invul .verder .doen {
  flex: 1; border: 0; border-radius: 10px; background: var(--accent); color: #fff;
  font-weight: 800; padding: 12px; font-size: 14px;
}
.invul .verder .sla {
  border: 1.5px solid var(--rand); background: #fff; border-radius: 10px;
  color: var(--zwak); font-weight: 700; padding: 12px 14px; font-size: 13px;
}

/* ---------- ronde 2: archief ---------- */
.arch-wrap { max-width: 1000px; margin: 0 auto; padding: 20px 20px 60px; }
.arch-grid { display: grid; grid-template-columns: 320px 1fr; gap: 18px; }
.kolkop-a {
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .08em;
  color: var(--mut); font-weight: 800; margin-bottom: 10px;
}
.dagkaart {
  background: var(--kaart); border: 1px solid var(--rand); border-radius: 12px;
  padding: 11px 13px; margin-bottom: 8px; cursor: pointer;
}
.dagkaart.actief { border-color: var(--accent); background: var(--accent-licht); }
.dagkaart .dk { display: flex; align-items: baseline; gap: 8px; }
.dagkaart .dk b { font-size: 13.5px; }
.dagkaart .st { margin-left: auto; font-size: 10px; font-weight: 800; border-radius: 999px; padding: 2px 8px; }
.dagkaart .st.dicht { background: var(--ok-bg); color: var(--ok); }
.dagkaart .st.open { background: #fdf1e3; color: #b45309; }
.dagkaart .dsub { color: var(--zwak); font-size: 11.5px; margin-top: 3px; }
.arch-detail h4 { margin: 0; font-size: 16px; }
.arch-detail .asub { color: var(--zwak); font-size: 12.5px; margin: 3px 0 13px; }
.ritregel {
  display: flex; align-items: flex-start; gap: 10px; background: var(--kaart);
  border: 1px solid var(--rand); border-radius: 10px; padding: 9px 13px; margin-bottom: 6px; font-size: 12.5px;
}
.ritregel .tt { font-weight: 800; color: var(--blauw); font-variant-numeric: tabular-nums; width: 42px; flex: none; }
.ritregel b { font-size: 13px; }
.ritregel .wie { color: var(--mut); font-size: 11.5px; margin-top: 2px; }
.bijzonder { margin-top: 12px; border-top: 1px dashed var(--rand); padding-top: 10px; }
.b-regel { font-size: 12.5px; color: var(--mut); padding: 3px 0; }
.b-regel.waarsch { color: #b45309; }
.pdfknop {
  border: 0; border-radius: 10px; background: var(--accent); color: #fff;
  font-weight: 800; font-size: 13.5px; padding: 11px 20px; margin-top: 14px;
}
.inst-nummer { padding: 9px 11px; border: 1.5px solid var(--rand); border-radius: 9px; margin-right: 4px; }
.inst-eenheid { color: var(--mut); font-size: 13px; margin-right: 10px; }

/* ---------- smaller schermen (staand / telefoon) ---------- */
@media (max-width: 980px) {
  .bord { grid-template-columns: 1fr; }
  .kol + .kol { border-left: 0; border-top: 1px solid var(--rand); }
  .machines { grid-template-columns: 1fr; }
  .reg-rij { grid-template-columns: 60px 1fr 1fr; grid-auto-rows: auto; }
  .reg-rij.kop { display: none; }
  .arch-grid { grid-template-columns: 1fr; }
}