:root{color-scheme:light;--surface-1:#fcfcfb;--plane:#f9f9f7;--ink:#0b0b0b;--ink-2:#52514e;--muted:#898781;
 --grid:#e1e0d9;--axis:#c3c2b7;--ring:rgba(11,11,11,.10);--s1:#2a78d6;--s2:#eb6834;
 --good:#0ca30c;--good-ink:#006300;--warn:#fab219;--warn-ink:#8a6100;--crit:#d03b3b}
@media(prefers-color-scheme:dark){:root{--surface-1:#1a1a19;--plane:#0d0d0d;--ink:#fff;--ink-2:#c3c2b7;
 --grid:#2c2c2a;--axis:#383835;--ring:rgba(255,255,255,.10);--s1:#3987e5;--s2:#d95926;--good-ink:#0ca30c;--warn-ink:#fab219}}
*{box-sizing:border-box}
body{margin:0;background:var(--plane);color:var(--ink);font:14px/1.45 system-ui,-apple-system,"Segoe UI",sans-serif}
a{color:var(--s1)}
header{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--grid);background:var(--surface-1);position:sticky;top:0;z-index:5}
header b{font-size:15px}
header .sp{flex:1}
.wrap{max-width:1180px;margin:0 auto;padding:22px}
.wrap.breed{max-width:1560px}
.g{display:grid;gap:16px;align-items:start}
.g.k3{grid-template-columns:1.5fr 1fr 1fr}
.g.k2{grid-template-columns:1fr 1fr}
@media(max-width:1200px){.g.k3{grid-template-columns:1fr 1fr}}
@media(max-width:900px){.g.k3,.g.k2{grid-template-columns:1fr}}
.g .card{margin-bottom:0}
.oplijst{display:grid;grid-template-columns:26px 96px minmax(220px,2fr) minmax(240px,3fr) 80px 150px 34px;
  gap:10px;align-items:center;padding:9px 4px;border-top:1px solid var(--grid)}
.oplijst.kop{border-top:0;color:var(--ink-2);font-size:11.5px;font-weight:600;
  text-transform:uppercase;letter-spacing:.02em;padding-bottom:6px}
.oplijst:hover:not(.kop){background:color-mix(in srgb,var(--s1) 5%,transparent)}
.oplijst .r{text-align:right}
@media(max-width:1100px){.oplijst{grid-template-columns:26px 90px 1fr 70px 34px}
  .oplijst .weg{display:none}}
.card{background:var(--surface-1);border:1px solid var(--ring);border-radius:12px;padding:18px;margin-bottom:16px}
h1{font-size:20px;margin:0 0 4px}h2{font-size:12.5px;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-2);margin:0 0 10px}
.sub{color:var(--ink-2);font-size:13px}
button,input,select,textarea{font:inherit;color:inherit}
.btn{background:var(--surface-1);border:1px solid var(--ring);border-radius:8px;padding:8px 14px;cursor:pointer}
.btn:hover{border-color:var(--axis)}.btn.primary{background:var(--s1);border-color:var(--s1);color:#fff}
.btn.big{padding:14px 16px;font-size:15px;font-weight:600;border-radius:12px;width:100%}
input,select,textarea{background:var(--plane);border:1px solid var(--ring);border-radius:8px;padding:9px 11px;width:100%}
label{display:block;font-size:12px;color:var(--ink-2);margin-bottom:12px}
label>*{margin-top:4px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;color:var(--ink-2);font-weight:600;font-size:12px;padding:8px}
td{padding:8px;border-top:1px solid var(--grid)}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
@media(max-width:700px){.kpis{grid-template-columns:repeat(2,1fr)}}
.kpi .v{font-size:25px;font-weight:600}.kpi .l{font-size:12px;color:var(--ink-2)}
.pill{display:inline-block;font-size:11px;padding:2px 8px;border-radius:999px;border:1px solid var(--ring);white-space:nowrap}
.pill.ok{color:var(--good-ink);border-color:color-mix(in srgb,var(--good) 45%,transparent)}
.pill.warn{color:var(--warn-ink);border-color:color-mix(in srgb,var(--warn) 55%,transparent)}
.pill.crit{color:var(--crit);border-color:color-mix(in srgb,var(--crit) 45%,transparent)}
.pill.on{color:#fff;background:var(--s1);border-color:var(--s1)}
.bars{display:flex;align-items:flex-end;gap:4px;height:110px}
.bars>div{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px}
.bars i{width:100%;background:var(--s1);border-radius:4px 4px 0 0;min-height:2px}
.bars small{font-size:9.5px;color:var(--muted)}.bars b{font-size:10px;color:var(--ink-2)}
.row{display:flex;gap:10px;align-items:center;padding:10px 4px;border-top:1px solid var(--grid)}
.row .g{flex:1;min-width:0}.row .n{font-weight:600;font-variant-numeric:tabular-nums}
.hide{display:none!important}
.tabs{display:inline-flex;background:var(--plane);border:1px solid var(--ring);border-radius:9px;padding:3px;gap:3px}
.tabs button{border:0;background:none;padding:6px 14px;border-radius:7px;cursor:pointer;font-weight:550;font-size:13px;color:var(--ink-2)}
.tabs button.aan{background:var(--s1);color:#fff}
.kitem{display:flex;gap:8px;align-items:center;padding:8px 6px;border-bottom:1px solid var(--grid);cursor:pointer;border-radius:6px}
.kitem:hover{background:color-mix(in srgb,var(--s1) 6%,transparent)}
.kitem[aria-selected=true]{background:color-mix(in srgb,var(--s1) 11%,transparent)}
.kitem .kn{font-weight:550;font-size:13px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kitem .kz{margin-left:auto;font-size:12px;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.kitem .km{font-size:11px;color:var(--muted)}
th.r,td.r{text-align:right}
table input,table select{padding:5px 7px;font-size:12.5px}
.login{max-width:380px;margin:9vh auto}
.hint{font-size:12px;color:var(--muted)}
.live{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2)}
.live i{width:8px;height:8px;border-radius:50%;background:var(--good);display:inline-block}
.live.off i{background:var(--muted)}
.step{display:flex;gap:12px;align-items:center;margin:14px 0}
.step button{width:56px;height:56px;border-radius:14px;font-size:26px;font-weight:600;border:1px solid var(--ring);background:var(--plane);cursor:pointer}
.step input{width:96px;height:56px;text-align:center;font-size:26px;font-weight:650;border-radius:14px}

.dgroep{border-top:1px solid var(--grid);padding:12px 0}
.dgroep:first-of-type{border-top:0}
.dgroep.weg{opacity:.5}
.notitie{margin-top:10px;padding:8px 10px;border-left:3px solid var(--warn);
  background:color-mix(in srgb,var(--warn) 10%,transparent);border-radius:0 8px 8px 0;font-size:13px}
.dkop{display:flex;align-items:center;gap:10px}
.dlijst{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 4px}
.dchip{border:1px solid var(--grid);border-radius:999px;padding:3px 10px;font-size:13px;background:var(--surface-1)}
.dchip small{color:var(--muted);margin-left:6px}
.dchip.blijft{border-color:var(--s1);color:var(--s1);font-weight:600}
.toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#0b0b0b;color:#fff;
  padding:10px 16px;border-radius:8px;font-size:14px;z-index:50;box-shadow:0 4px 14px rgba(0,0,0,.2)}
.rij{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.rij .sp{flex:1}
input[type=checkbox]{width:16px;height:16px;flex:0 0 16px;padding:0;accent-color:var(--s1);cursor:pointer}
.kitem .kkies{margin:0}
.kitem .pill{font-size:10px;padding:0 6px;vertical-align:1px}
.kitem .km{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.vink{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--ink-2);cursor:pointer}
.vink input{margin:0}
table input[type=checkbox]{width:16px;height:16px}
.kaartbak{position:relative}
.kaartbak svg{cursor:grab;user-select:none}
.kaartbak svg:active{cursor:grabbing}
.stip{cursor:pointer}
.stip:hover circle:last-child{stroke:var(--ink);stroke-width:2.5}
.stip:focus{outline:none}
.stip:focus circle:last-child{stroke:var(--ink);stroke-width:3}
.kaartknoppen{position:absolute;right:8px;top:8px;display:flex;flex-direction:column;gap:4px}
.kaartknoppen .btn{padding:4px 10px;font-size:15px;line-height:1;background:var(--surface-1)}
.kaarttip{position:absolute;pointer-events:none;background:var(--surface-1);border:1px solid var(--ring);
  border-radius:8px;padding:8px 10px;font-size:12px;max-width:210px;box-shadow:0 4px 14px rgba(0,0,0,.12);z-index:4}
.kaarttip b{font-size:13px}

/* tijdlijn en verdeelbalk in het tabblad Tijden */
.balk{display:flex;height:12px;border-radius:999px;overflow:hidden;background:var(--grid)}
.balk i{display:block}
.tl{position:relative;flex:1;height:22px;border-radius:6px;background:var(--grid);overflow:hidden}
.tl i{position:absolute;top:0;bottom:0;display:block;min-width:1px}
.klant,.balk i.klant,.tl i.klant{background:var(--s1)}
.levering,.balk i.levering,.tl i.levering{background:#7b5bd6}
.parels,.balk i.parels,.tl i.parels{background:#0f9b9b}
.cement,.balk i.cement,.tl i.cement{background:#8a6d3b}
.vlek.levering{background:#7b5bd6} .vlek.parels{background:#0f9b9b} .vlek.cement{background:#8a6d3b}
.rijden,.balk i.rijden,.tl i.rijden{background:var(--s2)}
.verlet,.balk i.verlet,.tl i.verlet{background:var(--warn)}
.depot,.balk i.depot,.tl i.depot{background:var(--good)}
.vlek{display:inline-block;width:9px;height:9px;border-radius:2px;margin:0 4px 0 10px}
.vlek.klant{background:var(--s1)} .vlek.rijden{background:var(--s2)}
.vlek.verlet{background:var(--warn)} .vlek.depot{background:var(--good)}
tr.klikbaar,.klikbaar{cursor:pointer}
tr.klikbaar:hover{background:color-mix(in srgb,var(--s1) 6%,transparent)}
tr.klikbaar.aan{background:color-mix(in srgb,var(--s1) 10%,transparent)}
.dagrij{padding:8px 0;border-top:1px solid var(--grid)}
tr.rijdenrij{opacity:.72}
tr.rijdenrij .pill{color:var(--s2);border-color:color-mix(in srgb,var(--s2) 45%,transparent)}
.dagrij:first-child{border-top:0}
a.kaartlink{font-size:11px;color:var(--s1);text-decoration:none;margin-left:6px;white-space:nowrap}
a.kaartlink:hover{text-decoration:underline}

/* ophaallocaties: korte regels met een uitklapbaar blad */
.plijst{border:1px solid var(--grid);border-radius:10px;overflow:hidden}
.prij{border-bottom:1px solid var(--grid)}
.prij:last-child{border-bottom:0}
.prij.aan{background:color-mix(in srgb,var(--s1) 5%,transparent)}
.pkop{display:flex;align-items:center;gap:10px;padding:9px 12px;cursor:pointer}
.pkop:hover{background:color-mix(in srgb,var(--s1) 7%,transparent)}
.pkop .g{flex:1;min-width:0}
.pkop .n{text-align:right;font-weight:600;font-size:14px}
.pkop .pijl{color:var(--axis);width:14px;text-align:center}
.pdetail{padding:4px 14px 14px 40px}
.praster{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 12px}
.praster label{margin:0}

/* voorstellen uit een bericht, elk in een eigen kadertje */
.vkaart{border:1px solid var(--grid);border-radius:10px;padding:10px 12px;margin-top:10px}
.vkaart.klaar{background:color-mix(in srgb,var(--good) 10%,transparent)}
.vkaart details summary{cursor:pointer}

/* tabbladen in het chauffeursscherm: groot genoeg voor een duim */
.chtabs{display:flex;gap:8px;margin-bottom:12px}
.chtabs button{flex:1;padding:10px 8px;border:1px solid var(--grid);border-radius:10px;background:var(--surface-1);
  font-size:14px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px}
.chtabs button.aan{background:var(--s1);border-color:var(--s1);color:#fff}
.chtabs button.aan .pill{background:rgba(255,255,255,.25);border-color:transparent;color:#fff}

/* adres opzoeken: het lijstje met treffers hangt onder het invoerveld */
.azoek{position:relative}
.azlijst{position:absolute;left:0;right:0;top:100%;z-index:40;background:var(--surface-1);
  border:1px solid var(--grid);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.14);
  max-height:260px;overflow:auto}
.azlijst:empty{display:none}
.azrij{padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--grid);font-size:13px}
.azrij:last-child{border-bottom:0}
.azrij:hover{background:color-mix(in srgb,var(--s1) 10%,transparent)}
.azrij.hint{cursor:default}
.azrij.hint:hover{background:transparent}

/* uitklapbare blokken: één kop die je aanklikt, met teller en bijschrift */
.blok{padding-top:0;padding-bottom:0}
.blok.open{padding-bottom:14px}
.bkop{display:flex;align-items:center;gap:9px;cursor:pointer;padding:13px 0;user-select:none;flex-wrap:wrap}
.bkop:hover .bpijl{color:var(--s1)}
.bpijl{font-size:13px;color:var(--muted);width:12px;flex:none}
.blok .binhoud{padding-bottom:2px}
.bkop .bbij{font-weight:400}

/* de referentie van een ophaallocatie, en de klantnaam die je kan aanklikken */
.ref{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.ref.groot{font-size:13px;font-weight:600;color:var(--ink-2);border:1px solid var(--grid);
  border-radius:6px;padding:2px 8px}
.klanklik{background:none;border:0;padding:0;color:var(--s1);cursor:pointer;font:inherit;text-align:left}
.klanklik:hover{text-decoration:underline}

/* het venster om snel een ophaallocatie aan te maken */
.modaal{position:fixed;inset:0;background:rgba(0,0,0,.35);display:flex;align-items:center;
  justify-content:center;z-index:60;padding:20px}
.mkaart{background:var(--surface-1);border:1px solid var(--ring);border-radius:12px;padding:18px;
  width:min(640px,100%);max-height:90vh;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.plekplus{padding:6px 10px;font-size:12px;white-space:nowrap}

/* de taken van de chauffeur: wat vandaag moet, mag hij niet kunnen missen */
.taakbanner{display:flex;align-items:center;gap:14px;background:color-mix(in srgb,var(--s1) 12%,var(--surface-1));
  border:2px solid var(--s1);border-radius:12px;padding:14px 16px;margin-bottom:14px}
.taakbanner.telaat{background:color-mix(in srgb,var(--crit) 12%,var(--surface-1));border-color:var(--crit)}
.taakbanner .tbgetal{font-size:34px;font-weight:700;line-height:1;color:var(--s1);min-width:44px;text-align:center}
.taakbanner.telaat .tbgetal{color:var(--crit)}
.taakvak{border-width:2px}
.taakvak.vandaag{border-color:var(--s1)}
.taakvak.telaat{border-color:var(--crit)}
.taakvak.vandaag h2{color:var(--s1)}
.taakvak.telaat h2{color:var(--crit)}
.taakrij{border-top:1px solid var(--grid);padding:12px 4px}
.taakrij:first-of-type{border-top:0}
.taakvak.vandaag .taakrij,.taakvak.telaat .taakrij{border-radius:10px;padding:12px 10px;margin-top:8px;
  border-top:0;background:var(--plane)}
.taakvak.telaat .taakrij{border-left:4px solid var(--crit)}
.taakvak.vandaag .taakrij{border-left:4px solid var(--s1)}
.taakrij .btn.gedaan.groot{padding:12px 20px;font-size:15px;font-weight:600;border-radius:11px}
.chtabs button.let{border-color:var(--crit)}
.taakstrook{display:flex;align-items:center;gap:8px;cursor:pointer;margin-bottom:12px;padding:10px 14px;
  border-radius:11px;font-size:14px;border:2px solid var(--s1);
  background:color-mix(in srgb,var(--s1) 12%,var(--surface-1))}
.taakstrook.telaat{border-color:var(--crit);background:color-mix(in srgb,var(--crit) 12%,var(--surface-1))}
.taakstrook b{font-size:17px}

/* de vraagbaak */
.vraagkaart .vraagrij{display:flex;gap:10px;align-items:center}
.vraagkaart .vraagrij input{flex:1;font-size:15px;padding:11px 14px}
.vbtips{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.vbtips button{font-size:12.5px;font-weight:400;color:var(--muted);text-align:left}
.vbantwoord{margin-top:18px;border-top:1px solid var(--grid);padding-top:16px}
.vbvraag{font-size:13px;color:var(--muted);margin-bottom:8px}
.vbtekst{font-size:15.5px;line-height:1.55}
.tabelrol{overflow:auto;max-height:420px;border:1px solid var(--grid);border-radius:10px}
.tabelrol table{margin:0}
.tabelrol thead th{position:sticky;top:0;background:var(--surface-1);z-index:1}
pre.sql{white-space:pre-wrap;font-size:12px;background:var(--plane);border:1px solid var(--grid);
  border-radius:8px;padding:9px 11px;margin:0 0 4px;color:var(--muted);overflow-x:auto}

/* sorteerbare kolomkoppen */
th.sorteer{cursor:pointer;user-select:none;white-space:nowrap}
th.sorteer i{font-style:normal;opacity:.28;margin-left:4px;font-size:11px}
th.sorteer:hover i{opacity:.7}
th.sorteer.aan{color:var(--s1)}
th.sorteer.aan i{opacity:1}

/* een filterrij boven een tabel */
.filterrij{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:10px}
.filterrij input[type=search]{flex:1 1 240px;min-width:180px;margin:0}
.filterrij .vink{display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);
  margin:0;white-space:nowrap;cursor:pointer}
.filterrij .vink input{margin:0;width:auto}

/* bewaarde weergaven */
.weergaven{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.wgv{display:inline-flex;align-items:stretch;border:1px solid var(--grid);border-radius:9px;overflow:hidden}
.wgv button{background:none;border:0;padding:5px 11px;font:inherit;font-size:12.5px;color:var(--ink-2);cursor:pointer}
.wgv button:hover{background:color-mix(in srgb,var(--s1) 8%,transparent)}
.wgv.aan{border-color:var(--s1)}
.wgv.aan button{color:var(--s1);font-weight:600}
.wgv .wgvx{border-left:1px solid var(--grid);padding:5px 8px;opacity:.5}
.wgv .wgvx:hover{opacity:1;color:var(--crit)}

/* nieuwe klant uit een mail */
.mkaart.breed{max-width:920px}
.card.nkloc{border-left:3px solid var(--s1)}
.card.nkloc.uit{opacity:.45;border-left-color:var(--grid)}
.card.nkloc label{font-size:11.5px}

/* de inbox */
.ibrij{padding:9px 10px;border-radius:9px;cursor:pointer;border:1px solid transparent}
.ibrij:hover{background:var(--plane)}
.ibrij.aan{background:color-mix(in srgb,var(--s1) 9%,transparent);border-color:var(--s1)}
.ibrij.nieuw b{font-weight:700}
.ibkort{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:.8}
.ibdraad{max-height:56vh;overflow:auto;margin-top:12px;display:flex;flex-direction:column;gap:10px;
  padding-right:4px}
.ibpost{border:1px solid var(--grid);border-radius:11px;padding:9px 12px;background:var(--surface-1)}
.ibpost.sys{background:var(--plane);border-style:dashed}
.ibpost.ik{background:color-mix(in srgb,var(--s1) 7%,transparent);border-color:color-mix(in srgb,var(--s1) 35%,transparent)}
.ibtekst{margin-top:4px;font-size:14.5px;line-height:1.5}
.berichtknop{opacity:.75}
.berichtknop:hover{opacity:1}

/* de taalkeuze in de kop */
.taalkies{width:auto;margin:0 8px 0 0;padding:5px 8px;font-size:12.5px;border-radius:9px}

/* de uitvoering: het scherm van de ploeg */
.plkop{gap:10px;margin-bottom:12px;align-items:center}
.plkaart{border:2px solid var(--s1)}
.plbalk{height:10px;border-radius:6px;background:var(--plane);border:1px solid var(--grid);
  overflow:hidden;margin:12px 0 4px}
.plbalk i{display:block;height:100%;background:var(--s1)}
.pltijden{margin:12px 0;border-top:1px solid var(--grid)}
.pltijd{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--grid)}
.pltijd span{flex:1;color:var(--muted);font-size:13.5px}
.pltijd b{font-size:17px;font-variant-numeric:tabular-nums}
.pltijd button{padding:2px 9px;font-size:13px;opacity:.6}
.pltijd button:hover{opacity:1}
.plm3{display:flex;align-items:center;gap:10px;margin:14px 0}
.plm3 input{flex:1;font-size:26px;text-align:center;padding:10px;margin:0;font-variant-numeric:tabular-nums}
.plm3 button{font-size:24px;padding:6px 20px;line-height:1}
.plm3 .sub{flex:0 0 auto}
.plgroot{width:100%;padding:18px;font-size:19px;margin-top:6px}
.plklaar{text-align:center;padding:14px;color:var(--muted);font-size:14px}
.plfotos{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.plfotos img{width:84px;height:84px;object-fit:cover;border-radius:10px;border:1px solid var(--grid)}
/* een tik terugnemen: bewust klein en rustig onder de grote knop, want het is de
   uitzondering en niet de gewone weg */
.plterug{display:block;width:100%;margin-top:8px;font-size:13px;color:var(--muted);opacity:.85}
.plterug:hover{opacity:1;color:var(--ink)}
/* het verslag is wat kantoor het meest aan heeft, dus het staat vooraan en het krijgt
   meer plaats dan de rest van het venster */
.plverslag{margin-top:14px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--s1);background:color-mix(in srgb,var(--s1) 5%,transparent)}
.plverslag .hint{margin:2px 0 6px}
.plverslag textarea{margin:0;font-size:15px;padding:10px;line-height:1.4}
/* de checklist in het afsluitvenster; de vakjes staan bewust groot, want dit wordt met
   een werkhandschoen aan op een telefoon aangetikt */
.plcheck{margin-top:14px;padding-top:10px;border-top:1px solid var(--grid)}
.plcheckpunt{padding:7px 0;border-bottom:1px solid var(--grid)}
.plcheckpunt .vink{font-size:14.5px;color:var(--ink);align-items:flex-start;gap:10px;line-height:1.35}
.plcheckpunt .vink input{width:22px;height:22px;flex:0 0 auto;margin-top:1px}
.plcheckreden{margin:6px 0 2px 32px;width:calc(100% - 32px);font-size:13.5px;padding:7px 9px}
.plafwijk{margin-top:10px;padding:10px 12px;border-radius:10px;
  border:1px solid var(--warn);background:color-mix(in srgb,var(--warn) 8%,transparent)}
.plafwijk label{margin-top:8px}
/* De knoppen staan bewust ná alles wat ingevuld moet worden, en niet vastgezet onderaan
   het venster: een knop die altijd in beeld staat nodigt uit om te duwen zonder de
   verantwoording gezien te hebben, en zou het blok eronder afdekken. */
.plsluitvoet{margin-top:14px;padding-top:12px;border-top:1px solid var(--grid)}
/* wat de ploeg achterliet, op de schermen van kantoor */
.uverslag{margin-top:10px;padding:8px 10px;border-left:3px solid var(--s1);
  background:var(--plane);border-radius:0 8px 8px 0;font-size:13.5px}
.uverslag p{margin:2px 0 0;white-space:pre-wrap}
.uchecklijst{margin-top:8px;font-size:13px;color:var(--muted)}
.uchecklijst div{padding:2px 0}
.uchecklijst .niet{color:var(--warn)}

/* de schakelaar tussen de twee takken, en het planbord van de uitvoering */
.takkies{display:inline-flex;background:var(--plane);border:1px solid var(--ring);border-radius:9px;
  padding:3px;gap:3px;margin-right:8px}
.takkies button{border:0;background:none;padding:6px 12px;border-radius:7px;cursor:pointer;
  font-weight:600;font-size:12.5px;color:var(--muted)}
.takkies button.aan{background:var(--ink);color:var(--plane)}
table.planbord{table-layout:fixed}
table.planbord td{vertical-align:top;padding:6px}
table.planbord tr.nu>td{background:color-mix(in srgb,var(--s1) 6%,transparent)}
.udagkop{white-space:nowrap}
.udagkop .pill{margin-top:4px}
.ucel{min-height:70px}
.udag{border:1px solid var(--grid);border-left:3px solid var(--s1);border-radius:9px;
  padding:8px 10px;margin-bottom:6px;cursor:pointer;background:var(--plane)}
.udag:hover{border-color:var(--s1)}
/* slepen op het planbord. Het opgepakte blok vervaagt, het vakje eronder licht op, en
   een streep boven een kaart zegt waar het blok tussen komt. */
.udag[draggable]{cursor:grab}
.udag[draggable]:active{cursor:grabbing}
.udag.sleept{opacity:.35}
.udag.sleeplijn{box-shadow:0 -3px 0 0 var(--s1)}
.ucel.sleepdoel{background:color-mix(in srgb,var(--s1) 10%,transparent);
  outline:2px dashed var(--s1);outline-offset:-3px;border-radius:8px}
/* een kopie krijgt een eigen kleur, zodat je voor het loslaten al ziet dat de dag waar
   je vandaan komt blijft staan */
.ucel.sleepkopie{background:color-mix(in srgb,var(--good) 12%,transparent);
  outline:2px dashed var(--good);outline-offset:-3px;border-radius:8px}
/* de lijsten in het instellingenscherm; een punt dat uitstaat blijft leesbaar maar
   valt duidelijk weg */
table.uinst td{vertical-align:middle}
table.uinst tr.uit{opacity:.45}
table.uinst tr.uit input[type=text],table.uinst tr.uit input:not([type]){text-decoration:line-through}
table.uinst code{font-size:12px;color:var(--muted)}
table.uinst input[type=checkbox]{width:18px;height:18px}
tr.uopenrij{cursor:grab}
tr.uopenrij.sleept{opacity:.35}
.udag b{font-size:13px}
.uplus{width:100%;padding:3px;font-size:13px;color:var(--muted);opacity:.45}
.ucel:hover .uplus{opacity:1}
/* de bezoeken van een nog niet herkende plaats: elk bezoek opent zijn rit */
.bezoekjes{display:flex;flex-wrap:wrap;gap:6px;margin:4px 0 10px}
.bezoekje{background:var(--plane);border:1px solid var(--grid);border-radius:8px;
  padding:3px 9px;font:inherit;font-size:12px;color:var(--ink-2);cursor:pointer;white-space:nowrap}
.bezoekje:hover{border-color:var(--s1);color:var(--s1)}
.bezoekje small{color:var(--muted);margin-left:2px}
/* het versienummer, klein en rustig; het staat er om te kunnen nakijken welke
   versie draait, niet om aandacht te vragen */
.versie{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums;letter-spacing:.2px;
  white-space:nowrap;flex:0 0 auto}
/* loopt het scherm achter op de server, dan valt het nummer wel op */
.versie.oud{color:#000;background:var(--warn);padding:1px 6px;border-radius:6px;font-weight:600}

/* bijlagen bij een bericht, en het verwijderen ervan */
.ibbijlagen{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.ibbijlagen img{width:110px;height:110px;object-fit:cover;border-radius:10px;border:1px solid var(--grid)}
.ibbijlagen.klaar{margin:8px 0 0}
.ibbijlagen .ibdoc{align-self:center;padding:4px 10px;font-size:12px;text-decoration:none}
.ibklaar{display:inline-flex;align-items:center;gap:6px;background:var(--plane);
  border:1px solid var(--grid);border-radius:9px;padding:4px 6px 4px 4px}
.ibklaar img{width:34px;height:34px;border-radius:6px}
.ibweg{border:0;background:none;color:var(--muted);cursor:pointer;font-size:15px;line-height:1;
  padding:0 4px;border-radius:6px}
.ibweg:hover{color:var(--crit);background:color-mix(in srgb,var(--crit) 10%,transparent)}
.ibpost.weg .ibtekst{color:var(--muted);font-style:italic}
.ibhecht{cursor:pointer}
.kltabs{margin:14px 0 4px;flex-wrap:wrap}

/* het cementblok in het scherm van de ploeg */
.plcement label{display:block;margin:10px 0 4px;font-size:.85rem;color:var(--grijs,#667)}
.plcement input[type=number]{max-width:120px}
.plcemrij{gap:8px;padding:4px 0;border-top:1px solid var(--lijn,#e6e8ec)}
.plcement .waarschuwing{background:#fff6e5;border:1px solid #f0c987;border-radius:8px;
  padding:8px 10px;margin:8px 0;font-size:.9rem}

/* het tabblad Ritten */
.urdagkop{cursor:pointer;gap:10px;flex-wrap:wrap;align-items:center}
.urdagkop .klap{color:var(--grijs,#667)}
table.urstops,table.urlos{width:100%;border-collapse:collapse;margin-top:10px}
table.urstops th{text-align:left;font-weight:600;font-size:.8rem;color:var(--grijs,#667);
  border-bottom:1px solid var(--lijn,#e6e8ec);padding:4px 8px 4px 0}
table.urstops td,table.urlos td{padding:5px 8px 5px 0;border-bottom:1px solid var(--lijn,#f0f2f5);
  vertical-align:top}
table.urstops td:nth-child(4){text-align:right;white-space:nowrap}
table.urlos select{margin:0;width:auto;min-width:150px}

.urvoorstel{margin-top:6px;line-height:1.9}
.urvoorstel .btn{margin-right:6px}
tr.urrand td{background:var(--zacht,#fafbfc)}
.btn.klein{padding:2px 8px;font-size:.8rem}

/* de pompbon in het venster van de ploeg */
.plbon{margin-top:12px;padding:10px;border:1px solid var(--lijn,#e6e8ec);border-radius:10px}
table.plbontab{width:100%;border-collapse:collapse;margin-top:8px}
table.plbontab th{font-size:.75rem;text-transform:uppercase;letter-spacing:.4px;color:var(--grijs,#667);
  text-align:left;padding:0 4px 4px 0;font-weight:600}
table.plbontab th.r,table.plbontab td.r{text-align:right}
table.plbontab td{padding:2px 4px 2px 0}
table.plbontab input{margin:0;padding:8px;font-size:1rem}
table.plbontab td.r input{text-align:right}
table.plbontab .plbonm3{font-weight:600}
table.plbontab tfoot td{padding-top:8px;font-size:1.05rem}
.plbonextra{margin-top:10px}
.plbonextra summary{cursor:pointer;color:var(--grijs,#667);font-size:.9rem}

/* het volume en de pompuren in de lichte bon */
.plvolume{display:flex;align-items:flex-end;gap:10px;margin-top:10px}
.plvolume label{flex:0 1 170px}
input.plgroot3{font-size:1.4rem;font-weight:600;text-align:right;padding:10px}
.plpomp{margin-top:12px}

/* ---------- de boom van het tabblad Werven ----------
   Eén rasterindeling voor de kop en voor elke regel, zodat de kolommen echt onder elkaar
   staan in plaats van bij benadering. */
.wboom{border:1px solid var(--grid);border-radius:12px;overflow:hidden;background:var(--surface-1)}
.wkop,.wrij{display:grid;
  grid-template-columns:132px minmax(150px,2fr) minmax(110px,1.2fr) minmax(90px,1fr)
    44px 76px 76px 40px 84px 116px 62px;
  gap:10px;align-items:center;padding:9px 12px}
.wkop{border-bottom:1px solid var(--grid);background:color-mix(in srgb,var(--grid) 30%,transparent)}
.wkop .wsorteer{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wsorteer{background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left;
  font:600 11.5px/1.3 inherit;text-transform:uppercase;letter-spacing:.02em;color:var(--ink-2)}
.wsorteer:hover{color:var(--ink)}
.wsorteer.aan{color:var(--s1)}
.wkop .wsorteer:nth-child(5),.wkop .wsorteer:nth-child(6),.wkop .wsorteer:nth-child(7),
.wkop .wsorteer:nth-child(8){text-align:right}
.wtak+.wtak{border-top:1px solid var(--grid)}
.wrij{cursor:pointer}
.wrij:hover{background:color-mix(in srgb,var(--s1) 6%,transparent)}
.wtak.nu>.wrij{background:color-mix(in srgb,var(--s1) 10%,transparent);
  box-shadow:inset 3px 0 0 var(--s1)}
.wrij .r{text-align:right;font-variant-numeric:tabular-nums}
.wpijl{display:inline-block;width:13px;color:var(--muted)}
.wbest{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.86rem;white-space:nowrap}
.wnaam{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.knip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* het dossier hangt in de tak zelf, niet onderaan de pagina */
.wopen{border-top:1px solid var(--grid);padding:14px 16px 18px;
  background:color-mix(in srgb,var(--s1) 3%,transparent)}
.wdossier h2{font-size:1.05rem}

.wfases{background:color-mix(in srgb,var(--grid) 22%,transparent);
  border:1px solid var(--grid);border-radius:10px;margin-top:8px}
.wfase{display:flex;align-items:center;gap:10px;padding:8px 12px;flex-wrap:wrap}
.wfase+.wfase{border-top:1px dashed var(--grid)}
.wvor{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-weight:600}

/* ---------- de vijf toestanden ----------
   Van elkaar te onderscheiden zonder de tekst te lezen: grijs is nog niets, blauw staat
   klaar, oranje loopt, groen is af, rood is weg. De rand draagt dezelfde kleur als de
   tekst, zodat het ook op een zwart-witafdruk nog verschilt. */
.tpil{display:inline-block;font-size:11px;font-weight:600;padding:2px 9px;border-radius:999px;
  white-space:nowrap;border:1px solid transparent}
.t-plan   {color:#5b5a54;background:color-mix(in srgb,#8a8880 16%,transparent);border-color:color-mix(in srgb,#8a8880 40%,transparent)}
.t-gepland{color:#1a5fb4;background:color-mix(in srgb,#2a78d6 14%,transparent);border-color:color-mix(in srgb,#2a78d6 45%,transparent)}
.t-bezig  {color:#8a4b00;background:color-mix(in srgb,#eb8b34 20%,transparent);border-color:color-mix(in srgb,#eb8b34 55%,transparent)}
.t-af     {color:#046004;background:color-mix(in srgb,#0ca30c 15%,transparent);border-color:color-mix(in srgb,#0ca30c 45%,transparent)}
.t-weg    {color:#a02020;background:color-mix(in srgb,#d03b3b 14%,transparent);border-color:color-mix(in srgb,#d03b3b 45%,transparent)}
@media(prefers-color-scheme:dark){
  .t-plan{color:#b9b7ae} .t-gepland{color:#6fb0f5} .t-bezig{color:#f0a95c}
  .t-af{color:#5cd45c} .t-weg{color:#f07a7a}
}

/* de filterknoppen dragen dezelfde kleur als de pil waar ze op filteren */
.wfilter{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.wfilter .btn{padding:5px 12px;font-weight:600}
.wfilter .btn.t-plan.aan   {background:#8a8880;border-color:#8a8880;color:#fff}
.wfilter .btn.t-gepland.aan{background:#2a78d6;border-color:#2a78d6;color:#fff}
.wfilter .btn.t-bezig.aan  {background:#eb8b34;border-color:#eb8b34;color:#fff}
.wfilter .btn.t-af.aan     {background:#0ca30c;border-color:#0ca30c;color:#fff}
.wfilter .btn.t-weg.aan    {background:#d03b3b;border-color:#d03b3b;color:#fff}
.wfilter .btn.aan .wtel{background:rgba(255,255,255,.26)}
.wtel{display:inline-block;margin-left:7px;padding:0 6px;border-radius:9px;font-size:.78rem;
  background:color-mix(in srgb,var(--ink) 10%,transparent)}
.btn.primary .wtel{background:rgba(255,255,255,.24)}

.wpag{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:12px}
.wpag .btn[disabled]{opacity:.45;pointer-events:none}
.btn.klein{padding:3px 9px;font-size:12px}

@media(max-width:1200px){
  .wkop{display:none}
  .wrij{grid-template-columns:120px minmax(140px,2fr) minmax(90px,1fr) 60px 110px 60px}
  .wrij>:nth-child(4),.wrij>:nth-child(6),.wrij>:nth-child(7),.wrij>:nth-child(9){display:none}
}

.wdossier table{width:100%;border-collapse:collapse;margin-top:6px}
.wdossier table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink-2);border-bottom:1px solid var(--grid);padding:4px 8px 4px 0;font-weight:600}
.wdossier table td{padding:6px 8px 6px 0;border-bottom:1px solid color-mix(in srgb,var(--grid) 55%,transparent);
  vertical-align:middle}
.wdossier table td.r,.wdossier table th.r{text-align:right}

/* de cijfers bovenaan de fiche */
.kcijfers{display:flex;gap:22px;flex-wrap:wrap;margin:10px 0 4px;padding:10px 0;
  border-top:1px solid var(--grid);border-bottom:1px solid var(--grid)}
.kcijfers>div{display:flex;flex-direction:column}
.kcijfers b{font-size:1.25rem;line-height:1.15;font-variant-numeric:tabular-nums}
.kcijfers span{font-size:11.5px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.02em}

/* de filterbalk boven de lijsten */
.filterbalk{border:1px solid var(--grid);border-radius:12px;padding:12px 14px;margin:0 0 12px;
  background:var(--surface-1)}
.filterbalk .vinkjes{display:flex;gap:6px 18px;flex-wrap:wrap;margin-top:10px;
  padding-top:10px;border-top:1px solid var(--grid)}
.filterbalk .vink{margin:0;font-size:13px;white-space:nowrap}
.filterbalk label{font-size:12px}
.btn.aan{border-color:var(--s1);color:var(--s1);font-weight:600}
/* de optelling onder de filterbalk: wat het filter overhoudt, niet wat er op het blad staat */
.totalen{display:flex;gap:24px;flex-wrap:wrap;margin:0 0 12px;padding:10px 14px;
  border:1px solid var(--grid);border-radius:12px;background:var(--surface-1)}
.totalen>div{display:flex;flex-direction:column}
.totalen b{font-size:1.15rem;line-height:1.15;font-variant-numeric:tabular-nums}
.totalen span{font-size:11px;color:var(--ink-2);text-transform:uppercase;letter-spacing:.02em}
/* volume en omzet in de klantfiche */
.omzetblok{display:flex;gap:22px;flex-wrap:wrap;margin-top:12px}
.omzetblok>div{flex:1 1 220px;border:1px solid var(--grid);border-radius:10px;padding:10px 12px}
.omzetblok b{display:block;font-size:1.05rem;font-variant-numeric:tabular-nums}
.omzetblok span{font-size:12px;color:var(--ink-2)}
/* de klantenlijst draagt nu dertien kolommen */
.wkop.kkop,.wrij.krij{
  grid-template-columns:minmax(150px,2fr) 96px minmax(80px,1fr)
    48px 44px 60px 62px 72px 56px 54px 70px 78px 62px}
@media(max-width:1500px){
  .wkop.kkop{display:none}
  .wrij.krij{grid-template-columns:minmax(150px,2fr) 96px 56px 54px 70px 62px}
  .wrij.krij>:nth-child(3),.wrij.krij>:nth-child(4),.wrij.krij>:nth-child(5),
  .wrij.krij>:nth-child(6),.wrij.krij>:nth-child(7),.wrij.krij>:nth-child(8),
  .wrij.krij>:nth-child(12){display:none}
}

/* het invul-zoekveld in plaats van een keuzelijst */
.zoekvak{position:relative;min-width:240px}
.zoekveld{width:100%;margin:0}
.zoeklijst{position:absolute;z-index:30;left:0;right:0;top:100%;margin-top:2px;
  max-height:280px;overflow:auto;background:var(--surface-1);
  border:1px solid var(--axis);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.16)}
.zoekrij{padding:7px 10px;cursor:pointer;border-bottom:1px solid var(--grid);line-height:1.25}
.zoekrij:last-child{border-bottom:0}
.zoekrij b{display:block;font-size:13px}
.zoekrij span{display:block;font-size:11.5px;color:var(--ink-2)}
.zoekrij.aan,.zoekrij:hover{background:color-mix(in srgb,var(--s1) 12%,transparent)}
.zoekrij.leeg{color:var(--muted);cursor:default}
.zoekrij.leeg:hover{background:none}
.zoekgekozen{margin-top:6px}
.urritten{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:6px}
.urslot{gap:8px;margin:0 0 5px;flex-wrap:wrap;align-items:center}
.urslot .hint{line-height:1.2}

/* de werven van die dag als keuze onder het te koppelen adres */
.urkeuze{margin-top:8px;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.urkand{display:block;width:100%;max-width:620px;text-align:left;cursor:pointer;
  padding:7px 11px;border:1px solid var(--axis);border-radius:10px;background:var(--surface-1);
  color:inherit;font:inherit;line-height:1.3}
.urkand:hover{background:color-mix(in srgb,var(--s1) 10%,transparent);border-color:var(--s1)}
.urkand.raak{border-color:var(--s1);box-shadow:inset 3px 0 0 var(--s1)}
.urkand b{display:block;font-size:13px}
.urkand span{display:block;font-size:11.5px;color:var(--ink-2)}
.urkand .waarom{color:var(--s1)}
table.urlos td:first-child{width:100%}
.urrest{vertical-align:top;white-space:nowrap;width:1%}
.urrest select{margin:0}

/* meldingen van de ploeg */
.plmeld{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.plmeldrij{border:1px solid var(--grid);border-left:3px solid var(--warn);border-radius:10px;
  padding:8px 10px;background:var(--surface-1)}
.umeld{margin-top:10px;border:1px solid var(--grid);border-left:3px solid var(--warn);
  border-radius:10px;padding:9px 11px}

/* het uitklapmenu Algemeen: wat over de drie modules heen gaat */
.algmenu{position:relative;display:inline-block}
.algknop{background:var(--plane);border:1px solid var(--ring);border-radius:9px;
  padding:7px 14px;cursor:pointer;font-weight:550;font-size:13px;color:var(--ink-2)}
.algknop:hover{color:var(--ink)}
.algknop.aan{background:var(--s1);color:#fff;border-color:var(--s1)}
.algknop.uit{border-color:var(--axis)}
.alglijst{position:absolute;z-index:40;right:0;top:100%;margin-top:4px;min-width:210px;
  background:var(--surface-1);border:1px solid var(--axis);border-radius:10px;padding:4px;
  box-shadow:0 10px 28px rgba(0,0,0,.18);display:flex;flex-direction:column}
.alglijst button,.alglijst a{display:block;width:100%;text-align:left;border:0;background:none;
  padding:8px 12px;border-radius:7px;cursor:pointer;font:inherit;font-size:13px;
  color:var(--ink);text-decoration:none}
.alglijst button:hover,.alglijst a:hover{background:color-mix(in srgb,var(--s1) 12%,transparent)}
.alglijst button.aan{background:var(--s1);color:#fff}
.alglijst a{color:var(--ink-2);border-top:1px solid var(--grid);border-radius:0}
.alglijst a:first-of-type{margin-top:4px}