:root{
  --bg:#f2f4f6; --surface:#ffffff; --ink:#18222e; --muted:#5b6a79;
  --line:#dbe2e8; --line-soft:#e8edf1;
  --brand:#c8102e; --brand-dark:#a30d26; --navy:#16212f;
  --ok:#1f8a4c; --ok-bg:#e4f3eb;
  --warn:#b46a00; --warn-bg:#fdf2df;
  --crit:#d1293d; --crit-bg:#fdeaec;
  --wacht:#b45309; --wacht-bg:#fef3e2;
  --night:#2c3e5d; --night-bg:#e9eef7;
  --radius:8px;
  font-size:15px;
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.45;}
button{font:inherit;cursor:pointer}
select,input{font:inherit}

/* conflictmelding: de display-regel staat bewust in de stylesheet, want een
   inline display zou het hidden-attribuut overrulen en de balk altijd tonen */
#conflictBar{display:flex;gap:10px;align-items:center;max-width:1080px;margin:10px auto 0;
  padding:8px 14px;background:var(--warn-bg);border:1px solid var(--warn);
  border-radius:var(--radius);color:var(--ink);}
#conflictBar[hidden]{display:none;}

/* ---------- top bar ---------- */
.topbar{background:var(--navy);color:#fff;border-top:4px solid var(--brand);}
.topbar-in{max-width:1080px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;}
.brand{display:flex;align-items:center;gap:12px;margin-right:auto;}
.brand-mark{width:38px;height:38px;border-radius:9px;background:var(--brand);display:grid;place-items:center;flex:none;}
.brand h1{font-size:1.05rem;margin:0;font-weight:750;letter-spacing:.01em;}
.brand p{margin:0;font-size:.72rem;color:#9fb0c2;text-transform:uppercase;letter-spacing:.09em;}
.monthnav{display:flex;align-items:center;gap:6px;background:#0f1823;border:1px solid #2a3949;border-radius:var(--radius);padding:4px;}
.monthnav a{color:#cfdae6;width:32px;height:30px;border-radius:6px;font-size:1rem;display:grid;place-items:center;text-decoration:none;}
.monthnav a:hover{background:#243346}
.monthnav strong{min-width:130px;text-align:center;font-weight:650;font-variant-numeric:tabular-nums;}
.topbar .btn{background:#243346;border-color:#2a3949;color:#cfdae6;}

/* ---------- tabs ---------- */
.tabs{background:var(--surface);border-bottom:1px solid var(--line);}
.tabs-in{max-width:1080px;margin:0 auto;padding:0 20px;display:flex;gap:4px;align-items:center;}
.tab{background:none;border:0;border-bottom:3px solid transparent;padding:12px 14px 10px;
  font-weight:600;color:var(--muted);text-decoration:none;display:inline-block;}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--brand);border-bottom-color:var(--brand);}
.tab:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--night);outline-offset:2px;}
/* subtabs: functies binnen de gekozen dienst */
.subtabs{background:#f8fafb;border-bottom:1px solid var(--line);}
.subtabs .tabs-in{padding:0 20px;}
.subtabs .tab{padding:9px 12px 7px;font-size:.86rem;}

main{max-width:1080px;margin:0 auto;padding:20px;}
section[hidden]{display:none}

/* ---------- generic ---------- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);}
.toolbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:14px;}
.toolbar .spacer{flex:1}
.btn{border:1px solid var(--line);background:var(--surface);border-radius:var(--radius);
  padding:7px 13px;font-weight:600;color:var(--ink);text-decoration:none;display:inline-block;}
.btn:hover{border-color:#b9c4cd;background:#fafbfc}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff;}
.btn.primary:hover{background:var(--brand-dark)}
.btn.subtle{border-color:transparent;background:none;color:var(--muted);}
.btn.subtle:hover{color:var(--crit)}
.btn.small{padding:3px 9px;font-size:.8rem;}
.hint{font-size:.82rem;color:var(--muted);}
.statusmsg{font-size:.85rem;color:var(--ok);font-weight:600;}
.feedinput{min-width:200px;max-width:320px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;font-size:.74rem;color:var(--muted);}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;
  padding:2px 9px;border-radius:99px;letter-spacing:.02em;}
.pill.ok{background:var(--ok-bg);color:var(--ok)}
.pill.warn{background:var(--warn-bg);color:var(--warn)}
.pill.crit{background:var(--crit-bg);color:var(--crit)}
.pill.wacht{background:var(--wacht-bg);color:var(--wacht)}
.pill.neutral{background:var(--line-soft);color:var(--muted)}

/* ---------- beschikbaarheid ---------- */
.avail-head{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-bottom:14px;}
table.avail{width:100%;border-collapse:collapse;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;}
.avail th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  text-align:left;padding:9px 12px;border-bottom:1px solid var(--line);background:#f8fafb;}
.avail td{padding:7px 12px;border-bottom:1px solid var(--line-soft);vertical-align:middle;}
.avail tr:last-child td{border-bottom:0}
.avail tr.weekend td{background:#f6f8fa}
.avail tr.mywacht td:first-child{box-shadow:inset 3px 0 0 var(--wacht);}
/* label per shift-cel, enkel zichtbaar op mobiel (waar de kolomkoppen wegvallen) */
.shiftlbl{display:none;}
/* vervanging (lid): kandidatenlijst */
.vvcands{display:flex;flex-direction:column;gap:6px;margin-bottom:4px;}
.vvcand{padding:8px 12px;border:1px solid var(--line-soft);border-radius:7px;background:#fafbfc;}
/* mobiel: de maandtabel wordt een lijst van dag-blokjes, dag- en nachtshift onder elkaar,
   zodat je het overzicht over de hele maand houdt (wel verticaal scrollen, geen horizontaal) */
@media (max-width:760px){
  .avail thead{display:none;}
  .avail, .avail tbody{display:block;width:100%;}
  .avail tr{display:block;border:1px solid var(--line);border-radius:var(--radius);
    margin-bottom:10px;padding:8px 12px 10px;}
  .avail tr.weekend td{background:none;}
  .avail tr.mywacht{box-shadow:inset 3px 0 0 var(--wacht);}
  .avail tr.mywacht td:first-child{box-shadow:none;}
  .avail td{display:block;border-bottom:0;padding:3px 0;}
  .avail td.datecell{font-weight:700;font-size:1rem;margin-bottom:2px;}
  .shiftlbl{display:block;font-weight:700;font-size:.82rem;color:var(--muted);margin:8px 0 4px;}
  .avail .seg button{padding:8px 13px;}
  /* tijdsloten onder de keuzeknoppen, met lucht ertussen (niet tegen elkaar);
     tijdsloten, knoppen en opmerkingveld delen dezelfde inspring (8px) zodat alles uitlijnt */
  .avail .parts{display:flex;margin-top:10px;margin-left:0;gap:9px;}
  /* rijen die over de volle breedte lopen (wachtweek-kop, voorbije-dagen-knop) */
  .avail tr.pasttoggle,.avail tr.wkhead{border:0;padding:0;margin:0 0 8px;}
  .avail tr.pasttoggle td,.avail tr.wkhead td{padding:0;}
}
/* voorbije dagen ingeklapt achter één toonknop */
.pasttoggle td{padding:4px 12px!important;background:#f8fafb;}
.pasttgl{width:100%;border:0;background:none;color:var(--muted);font-size:.8rem;font-weight:600;
  padding:5px 0;text-align:left;cursor:pointer;}
.pasttgl:hover{color:var(--ink);}
.datecell{white-space:nowrap;font-variant-numeric:tabular-nums;}
.datecell .dow{display:inline-block;width:2.1em;color:var(--muted);font-size:.85rem;}
.datecell strong{font-weight:650}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;vertical-align:top;}
.seg button{border:0;background:var(--surface);padding:5px 11px;font-size:.82rem;font-weight:600;color:var(--muted);border-right:1px solid var(--line);}
.seg button:last-child{border-right:0}
.seg button.on{color:#fff;background:var(--night);}
.seg button.on[data-val="no"]{background:#7b8794}
.seg button.on[data-val="full"]{background:var(--ok)}
.seg button.on[data-val="part"]{background:var(--night)}
.times{display:inline-flex;align-items:center;gap:4px;margin-left:8px;font-variant-numeric:tabular-nums;}
.times input{border:1px solid var(--line);border-radius:6px;padding:3px 5px;font-size:.82rem;width:88px;}
/* gelikte tijd-keuzelijst: dagdeel-groepen + eigen pijltje */
.timesel{appearance:none;-webkit-appearance:none;border:1px solid var(--line);border-radius:8px;
  padding:5px 24px 5px 10px;font-size:.84rem;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);
  background:var(--surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%235b6a79' fill='none' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 8px center/10px;
  cursor:pointer;transition:border-color .12s,box-shadow .12s;}
.timesel:hover{border-color:var(--night);box-shadow:0 1px 4px rgba(22,33,47,.12);}

/* mini-dashboard op de persoonlijke pagina */
.minidash{background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--brand);
  border-radius:var(--radius);padding:14px 18px;margin-bottom:16px;}
.minidash.ok{border-left-color:var(--ok);}
.minidash-h{font-weight:750;font-size:.98rem;display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.minigaps{display:flex;flex-direction:column;gap:5px;}
.mini-gap{text-align:left;border:1px solid var(--line-soft);background:#fafbfc;border-radius:7px;
  padding:6px 11px;font-size:.85rem;cursor:pointer;font-variant-numeric:tabular-nums;color:var(--ink);}
.mini-gap:hover{border-color:var(--night);background:var(--surface);}
.mini-gap b{color:var(--crit);}
.mini-nudge{background:var(--ok-bg);color:var(--ok);border-radius:99px;padding:1px 8px;
  font-size:.72rem;font-weight:700;}
/* "Stel voor aan de planner": op desktop in de daglijn zelf; op mobiel volle breedte */
.mini-gap .btn{margin-left:8px;}
@media (max-width:760px){
  .mini-gap .btn{display:block;width:100%;margin:8px 0 2px;}
}
.minidash.next{border-left-color:var(--night);}
.minidash.week{border-left-color:var(--wacht);background:#fffdf8;}
.mini-gap.still{cursor:default;}
.mini-gap.still:hover{border-color:var(--line-soft);background:#fafbfc;}
tr.flashrow td{background:var(--warn-bg)!important;transition:background .3s;}

/* meerdere deelvensters per shift */
/* op de webapp staat het uren-blok naast de X/Volledig/Deels-knop: bovenaan uitlijnen (geen top-marge);
   op mobiel staat het eronder en houdt de media-query de marge (10px) aan */
.parts{display:inline-flex;flex-direction:column;gap:7px;vertical-align:top;margin-top:0;}
.parts .times{margin-left:8px;}
.xwin{border:0;background:none;color:var(--muted);font-size:.95rem;line-height:1;padding:1px 5px;border-radius:99px;cursor:pointer;}
.xwin:hover{color:var(--crit);background:#f1f4f7;}
/* "+ extra tijdslot" en "+ extra opmerking": exact dezelfde knopstijl en uitlijning */
.addwin,.addnote{border:1px dashed #b9c4cd;background:none;color:var(--muted);border-radius:99px;
  padding:1px 9px;font-size:.74rem;font-weight:600;margin-left:8px;align-self:flex-start;cursor:pointer;}
.addwin:hover,.addnote:hover{border-color:var(--night);color:var(--ink);}
/* extra opmerking (vrij tekstveld) met sluitknop, in lijn met de tijdsloten:
   het veld begint bij de "van"-tijd en eindigt bij de "tot"-tijd (2 x 88px + tussenruimte),
   de sluitknop staat erachter zoals de × van een tijdslot. */
.noteedit{margin-top:8px;}
.noterow{display:flex;align-items:flex-start;gap:6px;margin-left:8px;align-self:flex-start;}
.noteinput{width:193px;max-width:100%;border:1px solid var(--line);border-radius:8px;
  padding:6px 9px;font-size:.82rem;font-family:inherit;line-height:1.4;resize:vertical;}
.xnote{border:0;background:none;color:var(--muted);font-size:.95rem;line-height:1;padding:1px 5px;border-radius:99px;cursor:pointer;}
.xnote:hover{color:var(--crit);background:#f1f4f7;}
.notetxt{font-size:.74rem;color:var(--night);margin-top:3px;max-width:36ch;line-height:1.3;}

/* ---------- planning ---------- */
.legend{display:flex;gap:14px;align-items:center;font-size:.78rem;color:var(--muted);flex-wrap:wrap;}
.legend i{display:inline-block;width:14px;height:9px;border-radius:2px;margin-right:4px;vertical-align:baseline;}
.legend .l2{background:var(--ok)} .legend .l1{background:#e8a33d} .legend .l0{background:var(--crit)}

.daycard{margin-bottom:12px;overflow:hidden;}
.daycard-h{display:flex;align-items:center;gap:10px;padding:9px 14px;border-bottom:1px solid var(--line-soft);background:#fafbfc;flex-wrap:wrap;}
.daycard-h .date{font-weight:700;font-variant-numeric:tabular-nums;min-width:9.5em;}
.daycard-h .spacer{flex:1}
.shift-row{display:grid;grid-template-columns:108px minmax(180px,1fr) minmax(280px,1.4fr);
  gap:14px;padding:11px 14px;align-items:start;border-bottom:1px solid var(--line-soft);}
.shift-row:last-child{border-bottom:0}
.shift-name{font-weight:700;font-size:.86rem;line-height:1.25;}
.shift-name small{display:block;font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;}
.shift-name.nacht::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--night);margin-right:6px;}
.shift-name.dag::before{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:#e8a33d;margin-right:6px;}
.tl{display:flex;align-items:center;gap:7px;margin-top:3px;}
.tl-lab{font-size:.7rem;color:var(--muted);font-variant-numeric:tabular-nums;flex:none;}
.tl-bar{flex:1;height:12px;border-radius:4px;overflow:hidden;display:flex;border:1px solid var(--line);}
.tl-seg{height:100%}
.tl-seg.c2{background:var(--ok)}
.tl-seg.c1{background:#e8a33d}
.tl-seg.c0{background:var(--crit);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 3px,transparent 3px 6px);}
.crew{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.chip{display:inline-flex;align-items:center;gap:6px;background:#f1f4f7;border:1px solid var(--line);
  border-radius:99px;padding:3px 6px 3px 11px;font-size:.82rem;font-weight:600;}
.chip .t{font-weight:500;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.76rem;}
.chip .t.ownt{color:var(--night);font-weight:700;}
.chip .x{border:0;background:none;color:var(--muted);font-size:.95rem;line-height:1;padding:2px 5px;border-radius:99px;}
/* mini-editor voor deelshiften: bewust kleine, onopvallende triggers */
.chip .winbtn{border:0;background:none;color:var(--muted);opacity:.35;font-size:.72rem;padding:0 2px;cursor:pointer;line-height:1;}
.chip:hover .winbtn{opacity:1;}
.chip .t.tbtn{border:0;background:none;padding:0;cursor:pointer;text-decoration:underline dotted;text-underline-offset:2px;}
.winedit{display:inline-flex;gap:4px;align-items:center;font-size:.74rem;font-weight:500;color:var(--muted);}
.winedit input{border:1px solid var(--line);border-radius:5px;padding:1px 3px;font-size:.74rem;width:82px;}
.winedit select{border:1px solid var(--line);border-radius:5px;padding:1px 2px;font-size:.74rem;font-variant-numeric:tabular-nums;}
.winedit .wok,.winedit .wclr{border:0;background:none;cursor:pointer;font-size:.85rem;padding:0 2px;line-height:1;}
.winedit .wok{color:var(--ok);font-weight:800;}
.winedit .wclr{color:var(--muted);}
.chip .x:hover{color:var(--crit);background:#fff}
.chip.pending{background:var(--wacht-bg);border-color:#ecd3ab;}
.chip.approved-w{background:var(--ok-bg);border-color:#bfe0cc;}
.chip .appr{border:0;border-radius:99px;font-size:.7rem;font-weight:700;padding:2px 8px;letter-spacing:.02em;}
.chip.pending .appr{background:var(--wacht);color:#fff;}
.chip.approved-w .appr{background:var(--ok);color:#fff;}
.addsel{border:1px dashed #b9c4cd;border-radius:99px;background:none;color:var(--muted);
  padding:4px 10px;font-size:.82rem;max-width:230px;}
.addsel:hover{border-color:var(--night);color:var(--ink)}
/* joker: los van beschikbaarheid, dus bewust anders (oranje) dan de gewone lijst */
.jokersel{border:1px dashed var(--warn);border-radius:99px;background:none;color:var(--warn);
  padding:4px 10px;font-size:.82rem;max-width:150px;font-weight:600;}
.jokersel:hover{background:var(--warn-bg);}
.overmark{color:var(--warn);font-size:.72rem;margin-left:3px;vertical-align:super;line-height:1;}
.pdot{display:inline-block;width:9px;height:9px;border-radius:50%;margin-right:6px;flex:none;}
.pdot.groen{background:#1f8a4c}
.pdot.oranje{background:#e8a33d}
.pdot.rood{background:#d1293d}
/* voertuigen: inklapbaar blok, wagens onder elkaar */
.vehbox{margin-top:8px;width:100%;font-size:.78rem;color:var(--muted);}
.vehbox summary{cursor:pointer;font-weight:600;list-style:none;display:inline-flex;gap:6px;align-items:center;padding:3px 11px;border:1px dashed #b9c4cd;border-radius:99px;}
.vehbox summary::-webkit-details-marker{display:none}
.vehbox summary:hover{border-color:var(--night);color:var(--ink)}
.vehbox[open] summary{border-style:solid;color:var(--ink);background:#fafbfc;}
.vehlist{display:flex;flex-direction:column;gap:6px;padding:8px 4px 2px;}
.vehline{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.vehlbl{font-weight:700;min-width:64px;color:var(--night);}
.vehline select{border:1px solid var(--line);border-radius:6px;padding:2px 6px;font-size:.78rem;max-width:200px;}

/* ploegbadge */
.tbadge{display:inline-grid;place-items:center;min-width:26px;height:26px;border-radius:7px;font-weight:800;font-size:.82rem;color:#fff;}
.tbadge.tp{background:var(--night)}
.tbadge.ta{background:#1f8a4c}
.tbadge.to{background:var(--brand)}
.tbadge.ts{background:#0e7490;margin-left:4px;}
.stagmark{display:inline-block;background:#e0f2f7;color:#0e7490;font-size:.62rem;font-weight:800;
  border-radius:4px;padding:0 4px;margin-left:4px;vertical-align:middle;letter-spacing:.02em;cursor:help;}
.tbadge.tb{background:#7c3aed;margin-left:4px;}
.notemark{color:var(--night);font-size:.8rem;margin-left:3px;cursor:help;}
/* verdi-overzetting */
.verdibadge{display:inline-block;font-size:.64rem;font-weight:800;border-radius:5px;padding:1px 5px;margin-left:6px;vertical-align:middle;letter-spacing:.02em;cursor:help;}
.verdibadge.ok{background:var(--ok-bg);color:var(--ok);}
.verdibadge.warn{background:var(--warn-bg);color:var(--warn);}
.vdel{color:var(--crit);}
.vadd{color:var(--ok);}
.vchg{color:var(--warn);}
.openslot{color:var(--warn);font-size:.8rem;font-style:italic;border:1px dashed var(--warn);border-radius:5px;
  padding:0 7px;display:inline-block;margin-top:2px;font-variant-numeric:tabular-nums;}
.openslot.none{color:#fff;background:var(--crit);border:1px solid var(--crit);font-style:normal;font-weight:700;}

/* ---------- vervanging: gespreksanalyse ---------- */
#vvItems{display:flex;flex-direction:column;gap:8px;margin:0 0 14px;}
#vvItems[hidden]{display:none!important;}
.vvitem{border:1px solid var(--line);border-radius:8px;padding:8px 12px;background:#fafbfc;}
.vvitem.sel{border-color:var(--night);box-shadow:inset 3px 0 0 var(--night);background:var(--surface);}
.vvitem-h{display:flex;gap:8px;align-items:center;flex-wrap:wrap;font-size:.9rem;}
.vvitem-h .spacer{flex:1;}
.vvhere{font-weight:700;color:var(--night);white-space:nowrap;}
.vvoffers{display:flex;gap:8px;flex-wrap:wrap;margin-top:7px;}
.vvoffer{display:inline-flex;gap:7px;align-items:center;background:var(--surface);border:1px solid var(--line);
  border-radius:99px;padding:2px 6px 2px 11px;font-size:.82rem;font-weight:600;}

/* ---------- handleiding ---------- */
.helpwrap{display:flex;flex-direction:column;gap:14px;} /* elk hoofdstuk als volwaardig blok over de containerbreedte */
.helpwrap .card{margin:0;}
.helpcard{padding:16px 20px;margin-bottom:14px;}
.helpcard h2{margin:0 0 8px;font-size:.98rem;}
.helpcard p{margin:0 0 9px;font-size:.9rem;line-height:1.55;}
.helpcard p:last-child{margin-bottom:0;}
.adjmark{color:var(--crit);font-size:.8rem;margin-left:3px;cursor:help;font-weight:700;}

/* ---------- roster ---------- */
.stats{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px;}
.stat{flex:1 1 150px;padding:12px 16px;}
.stat b{display:block;font-size:1.45rem;font-weight:750;font-variant-numeric:tabular-nums;line-height:1.2;}
.stat span{font-size:.78rem;color:var(--muted);}
.stat.crit b{color:var(--crit)} .stat.warn b{color:var(--warn)} .stat.ok b{color:var(--ok)}
.tablewrap{overflow-x:auto;}
table.roster{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);}
.roster th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);background:#f8fafb;}
.roster td{padding:7px 12px;border-bottom:1px solid var(--line-soft);vertical-align:top;font-size:.88rem;}
.roster tr.weekend td{background:#f6f8fa}
.roster .datecell{width:7.5em}
.roster .names div{white-space:nowrap;}
.roster .names .t{color:var(--muted);font-size:.78rem;font-variant-numeric:tabular-nums;}
.roster .gap{color:var(--crit);font-size:.78rem;font-weight:700;}
.roster .pend{color:var(--wacht);font-size:.78rem;font-weight:600;}
.roster td.names.open0{background:var(--crit-bg);}
.roster td.names.open1{background:var(--warn-bg);}
.roster .veh{color:var(--night);font-size:.76rem;font-weight:700;}
h2{font-size:1.02rem;margin:26px 0 10px;}
table.load{border-collapse:collapse;background:var(--surface);border:1px solid var(--line);}
.load th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:left;padding:7px 12px;border-bottom:1px solid var(--line);background:#f8fafb;}
.load td{padding:5px 12px;border-bottom:1px solid var(--line-soft);font-size:.86rem;font-variant-numeric:tabular-nums;}
.load td.overn{color:var(--crit);font-weight:700}
.load td.undern{color:var(--muted)}

/* ---------- bevelvoering ---------- */
.bvbody{padding:11px 14px;}
.chip.bvw{background:var(--ok-bg);border-color:#bfe0cc;}
.bvwtag{font-size:.68rem;font-weight:800;color:var(--ok);letter-spacing:.02em;}
.bvaddrow{display:inline-flex;gap:6px;align-items:center;flex-wrap:wrap;}
.bvaddrow select.bvadd{max-width:360px;}
.bvtimes{display:inline-flex;gap:5px;align-items:center;}
.bvtimes select{border:1px solid var(--line);border-radius:6px;padding:3px 6px;font-size:.82rem;font-variant-numeric:tabular-nums;}

/* ---------- dashboard ---------- */
.dashgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:14px;margin-bottom:14px;align-items:stretch;}
.dashcard{padding:16px 18px;display:flex;flex-direction:column;}
.dashcard>.dashhead{flex:none;}
/* shiftkaarten: ziekenwagensectie vult de ruimte, zodat de bevelvoeringssecties
   van beide kaarten onderaan op dezelfde hoogte uitlijnen */
#dashNow .dashsec.zw,#dashNext .dashsec.zw{flex:1;} /* enkel in de shift-kaarten uitrekken */
#dashAcute .needlist,#dashLater .needlist{max-height:240px;}
.dashhead{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.dashhead h2{margin:0;}
.dashcrew{display:flex;flex-direction:column;gap:7px;margin-top:4px;}
.dashperson{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.92rem;}
.dashperson.done{opacity:.5;}
.statedot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--ok);}
.statedot.later{background:#e8a33d;}
.statedot.done{background:#b9c4cd;}
.statedot.none{background:var(--crit);}
.statedot.pend{background:var(--wacht);}
.vehtag{color:var(--night);font-size:.74rem;font-weight:700;border:1px solid var(--line);border-radius:5px;padding:1px 6px;}
/* dienst-secties binnen de shiftkaarten: duidelijk gescheiden per rooster */
.dashsec{margin-top:10px;padding:9px 12px;border:1px solid var(--line-soft);border-radius:8px;background:#fafbfc;}
.dashsec.zw{border-left:4px solid var(--brand);}
.dashsec.bv{border-left:4px solid var(--night);}
.dashsec-h{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-bottom:7px;}
.dashsec-t{font-weight:750;font-size:.85rem;letter-spacing:.02em;}
.needlist{display:flex;flex-direction:column;gap:5px;max-height:300px;overflow-y:auto;}
.needline{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:.85rem;padding:3px 6px;border-radius:6px;cursor:pointer;}
.needline:hover{background:#f6f8fa;}
.needsev{width:9px;height:9px;border-radius:50%;flex:none;background:var(--warn);}
.needsev.crit{background:var(--crit);}
.needdate{font-variant-numeric:tabular-nums;font-weight:650;min-width:5.4em;}
.needshift{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);min-width:3.6em;}
.dashbar{height:9px;border-radius:99px;background:var(--line-soft);overflow:hidden;max-width:420px;}
.dashbar div{height:100%;background:var(--ok);border-radius:99px;}

/* ---------- login & leden ---------- */
.login-wrap{min-height:70vh;display:flex;align-items:center;justify-content:center;padding:20px;}
.login-card{background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:26px 28px;max-width:400px;width:100%;}
.login-card h1{font-size:1.1rem;margin:0 0 4px;}
.login-card p{margin:0 0 16px;font-size:.85rem;color:var(--muted);}
.login-card label{display:block;font-size:.8rem;font-weight:600;margin:12px 0 4px;}
.login-card input{width:100%;padding:8px 10px;border:1px solid var(--line);border-radius:7px;}
.login-card .btn{width:100%;margin-top:16px;text-align:center;}
.error{color:var(--crit);font-size:.82rem;margin-top:8px;}
table.leden{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line);}
.leden th{font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);text-align:left;padding:8px 12px;border-bottom:1px solid var(--line);background:#f8fafb;}
.leden td{padding:6px 12px;border-bottom:1px solid var(--line-soft);font-size:.88rem;vertical-align:middle;}
.leden tr.inactive td{opacity:.45}
.leden .linkcell{font-family:ui-monospace,Menlo,monospace;font-size:.74rem;color:var(--muted);max-width:300px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.leden form{display:inline}
/* rollen als gekleurde tags: enkel actieve rollen zichtbaar, toevoegen via "+ rol" */
.tagwrap{display:flex;flex-wrap:wrap;gap:5px;align-items:center;}
.tagwrap .tags{display:contents;}
.tagwrap .addwin{margin-left:0;align-self:center;}
.tagpill,.tagopt{display:inline-flex;align-items:center;gap:5px;border-radius:99px;border:1px solid;
  padding:2px 9px;font-size:.74rem;font-weight:700;line-height:1.5;white-space:nowrap;}
.tagopt{cursor:pointer;opacity:.85;border-style:dashed;background:none;}
.tagopt:hover{opacity:1;}
.tag-geel{background:#fdf3d1;border-color:#dfc25a;color:#7a5c00;}
.tag-rood{background:#fde3e3;border-color:#e58e8e;color:#a11212;}
.tag-blauw{background:#e1effb;border-color:#8fbfe8;color:#0b5394;}
.tag-groen{background:#e2f4e8;border-color:#8fce9f;color:#1b6b34;}
.tag-oranje{background:#ffe9d6;border-color:#f0ac6d;color:#a35410;}
.tagopt.tag-geel,.tagopt.tag-rood,.tagopt.tag-blauw,.tagopt.tag-groen,.tagopt.tag-oranje{background:none;}
.tagpill .tagx{border:0;background:none;cursor:pointer;color:inherit;opacity:.55;font-size:.9rem;
  line-height:1;padding:0 2px;margin-right:-4px;border-radius:99px;}
.tagpill .tagx:hover{opacity:1;background:rgba(0,0,0,.08);}
.tagmenu{display:inline-flex;flex-wrap:wrap;gap:5px;}
.tagmenu[hidden]{display:none;}
/* "✓ bewaard" flitst kort na een rij-wijziging (auto-bewaren) */
.rowok{color:#1b6b34;font-size:.74rem;font-weight:700;margin-left:6px;}
/* klok met tooltip: laatst gebruikte pagina */
.klok{cursor:help;font-size:.95rem;margin-left:6px;vertical-align:middle;}
/* icoonknop (o.a. impersonate-persoontje naast de klok) */
.iconbtn{border:0;background:none;cursor:pointer;font-size:.95rem;padding:1px 3px;
  margin-left:4px;vertical-align:middle;border-radius:6px;line-height:1;}
.iconbtn:hover{background:#e8edf2;}
.profcell{display:inline-flex;gap:3px;align-items:center;margin-right:10px;}
.profbtn{border:1px solid var(--line);background:var(--surface);border-radius:99px;padding:3px 4px;
  line-height:0;cursor:pointer;}
.profbtn:hover{border-color:var(--night);}
.profbtn .pdot{margin:0;width:12px;height:12px;}
/* inklapbaar blok "Nieuw lid toevoegen" (standaard dicht) */
.addwrap{margin:16px 0;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);}
.addwrap>summary{cursor:pointer;list-style:none;padding:11px 14px;font-weight:700;font-size:.9rem;color:var(--ink);
  display:flex;align-items:center;gap:8px;}
.addwrap>summary::-webkit-details-marker{display:none;}
.addwrap>summary::before{content:'\25B8';color:var(--muted);font-size:.8rem;transition:transform .15s;}
.addwrap[open]>summary::before{transform:rotate(90deg);}
.addwrap[open]>summary{border-bottom:1px solid var(--line-soft);}
.addwrap .addform{margin:14px;}
.addform{display:flex;gap:8px;flex-wrap:wrap;align-items:end;margin:16px 0;}
.addform label{font-size:.75rem;font-weight:600;display:block;margin-bottom:3px;}
.addform input,.addform select{padding:7px 9px;border:1px solid var(--line);border-radius:7px;}

footer{max-width:1080px;margin:10px auto 40px;padding:0 20px;font-size:.78rem;color:var(--muted);}

@media (max-width:760px){
  .shift-row{grid-template-columns:1fr;gap:8px;}
  .daycard-h .date{min-width:0}
  /* mobiele basis: alles bedienbaar op een smal scherm */
  main{padding:12px;}
  .tabs-in{padding:0 10px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tabs-in::-webkit-scrollbar{display:none;}
  .tab{white-space:nowrap;padding:10px 10px;}
  .topbar-in{padding:8px 12px;flex-wrap:wrap;gap:8px;}
  .toolbar{gap:8px;}
  .toolbar .legend{display:none;} /* legende is op mobiel ballast */
  .btn{padding:8px 12px;} /* vingervriendelijk */
  .dashgrid{grid-template-columns:1fr;}
  .daycard-h{flex-wrap:wrap;row-gap:4px;}
  .crew{gap:6px;}
  .chip{max-width:100%;flex-wrap:wrap;}
  .draftbar{flex-wrap:wrap;}
  .vvitem,.vvoffer{flex-wrap:wrap;}
  .helpwrap{grid-template-columns:1fr;}
  input,select,button{font-size:16px;} /* voorkomt iOS-zoom bij focus */
  footer{padding:0 12px;}
}
@media print{
  .topbar,.tabs,.subtabs,.toolbar,footer,#view-dash,#view-plan,#view-bv,#view-avail,#view-verdi,#view-stats,#view-vervang,#view-msg,#view-help{display:none!important}
  #view-roster{display:block!important}
  body{background:#fff}
  main{max-width:none;padding:0}
  .card,.roster,.load{border-color:#999}
  .stats,.pasttoggle{display:none}
}

/* ---- berichten (mail + WhatsApp outbox) ---- */
.msgrow{border:1px solid var(--line-soft);border-radius:8px;margin-bottom:6px;background:#fff;}
.msgrow summary{display:flex;align-items:center;gap:10px;padding:8px 12px;cursor:pointer;list-style:none;flex-wrap:wrap;}
.msgrow summary::-webkit-details-marker{display:none;}
.msgrow[open] summary{border-bottom:1px solid var(--line-soft);}
.msgwhen{font-size:.78rem;color:var(--muted);min-width:74px;}
.msgtype{font-weight:600;font-size:.85rem;min-width:110px;}
.msgname{flex:1;min-width:140px;font-size:.85rem;}
.msgreason{font-size:.75rem;}
.msgbody{padding:10px 14px;}
.msgbody pre{white-space:pre-wrap;font:inherit;font-size:.85rem;line-height:1.5;background:var(--line-soft);border-radius:8px;padding:10px 12px;margin:0;}

/* ---- aanbevelingsverslag + markering nieuwe toewijzingen ---- */
.report{position:relative;padding:12px 40px 12px 16px;margin-bottom:14px;border-left:4px solid var(--ok);}
.rephead{font-weight:700;}
.replist{display:flex;flex-direction:column;gap:3px;max-height:260px;overflow:auto;}
.repline{font-size:.85rem;}
.repclose{position:absolute;top:8px;right:10px;border:0;background:none;font-size:1.1rem;color:var(--muted);cursor:pointer;line-height:1;}
.repclose:hover{color:var(--ink);}
.chip.newadd{box-shadow:0 0 0 2px var(--ok);}

/* ---- handleiding: stappenplannen + changelog ---- */
.helpcard ol.steps{margin:10px 0 4px;padding-left:22px;display:flex;flex-direction:column;gap:7px;}
.helpcard ol.steps li{line-height:1.55;}
.helpcard ol.steps li::marker{font-weight:700;color:var(--night,#26415e);}
.clog ul{margin:8px 0 2px;padding-left:20px;display:flex;flex-direction:column;gap:6px;}
.clog li{line-height:1.5;font-size:.92rem;}

/* ---- voorstellen in draft (aanbeveling) ---- */
.chip.draftchip{border:2px dashed var(--warn,#b26a00);background:#fff8ec;}
.draftlbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#b26a00;}
.dok{border:1px solid var(--ok);background:var(--ok-bg);color:var(--ok);font-weight:700;font-size:.74rem;
  border-radius:6px;padding:2px 7px;cursor:pointer;}
.dok:hover{background:var(--ok);color:#fff;}
.draftbar{display:inline-flex;align-items:center;gap:8px;font-size:.85rem;
  background:#fff8ec;border:1px dashed #b26a00;border-radius:8px;padding:4px 10px;}
.vehline.draftline{background:#fff8ec;border-radius:6px;}

/* ---- ledenlijst gegroepeerd per ploeg ---- */
.leden .groeprow td{background:var(--navy);color:#fff;font-weight:700;font-size:.82rem;
  padding:6px 12px;letter-spacing:.4px;}

/* ---- wachtweek-groepen op de persoonlijke bv-pagina ---- */
.wkhead td{background:#eef2f6;border-top:2px solid var(--line);cursor:pointer;padding:8px 10px;}
.wkhead.own td{background:#e8f0e9;border-left:4px solid var(--ok);}
.wkhead:hover td{background:#e4eaf1;}
.wkarrow{display:inline-block;width:1em;color:var(--muted);}
.wkbtn{float:right;}
@media (max-width:760px){
  /* "Klaar"-knop in de wachtweek-kop: niet zwevend (een float telt niet mee in de
     celhoogte en overlapt dan de dagkaart eronder), maar als eigen regel onder de
     badges, met wat lucht rondom */
  .wkbtn{float:none;display:block;margin:12px 0 8px 10px;}
  /* badges ("nog x dagen in te vullen", "ploeg x vult in") wat van de rand weg */
  .wkhead td .pill{margin-left:10px;}
}

/* geen zoekresultaten bij vervanging: duidelijke melding i.p.v. een stille hint */
.vvempty{background:var(--warn-bg,#fff6e6);border:1px solid #e8c98a;border-radius:8px;
  padding:9px 12px;font-size:.86rem;}

/* ---- kandidaat-suggestie op de shift ---- */
.sugline{flex-basis:100%;display:flex;align-items:center;gap:8px;font-size:.85rem;
  background:#fffbe8;border:1px dashed #c9a227;border-radius:8px;padding:6px 10px;}

/* ---- estafette-overzicht op de bv-tab ---- */
.estrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 0;border-top:1px solid var(--line-soft);font-size:.88rem;}
.estrow:first-of-type{border-top:0;}