:root{
  --bar-h:60px;
  --orange:#EE7900; --orange-soft:#FDEBD9; --black:#000000; --ink:#141414; --muted:#6B6B6B;
  --line:#E3E3E3; --bg:#F5F5F5; --white:#FFFFFF;
  --ok:#2E7D4A; --ok-bg:#E3F2E8; --bad:#C0392B; --bad-bg:#F9E3E0; --warn-bg:#FDEBD9;
  --warn-ink:#A65300; --bg2:#FAFAFA; --bg3:#E9E9E9; --warm-bg:#FFF7EE; --ok-cell:#F3FAF5;   /* v8.0.1: voor kleuren die in de code staan */
  box-sizing:border-box;
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:calc(var(--bar-h) + env(safe-area-inset-top,0px));overscroll-behavior-y:none}
body{overscroll-behavior-y:none;padding-top:calc(var(--bar-h) + env(safe-area-inset-top,0px))}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 Roboto,"Helvetica Neue",Arial,sans-serif;-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
a.btn{text-decoration:none;display:inline-block}
a{color:var(--orange)}
:focus-visible{outline:3px solid var(--orange);outline-offset:2px}

/* Kopbalk */
.bar{background:var(--black);color:var(--white);position:fixed;top:0;left:0;right:0;z-index:6;padding-top:env(safe-area-inset-top,0px)}
.bar-in{max-width:1200px;margin:0 auto;height:var(--bar-h);padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.logo img,.logo svg{height:40px;width:auto;display:block}
.logo svg[hidden]{display:none}
.who{font-size:14px;color:#BDBDBD;text-align:right}
.who button{background:none;border:0;color:var(--orange);cursor:pointer;padding:4px 0 4px 10px;font-weight:500}

.wrap{max-width:760px;margin:0 auto;padding:18px 18px calc(96px + env(safe-area-inset-bottom,0px))}
.wrap.wide{max-width:1200px}
h1{font:900 30px/1.1 Roboto,sans-serif;letter-spacing:-.01em;margin:6px 0 2px}
h2{font:700 19px/1.2 Roboto,sans-serif;margin:26px 0 10px}
.sub{color:var(--muted);margin:0}
.empty{color:var(--muted);padding:18px;border:1.5px dashed #CFCFCF;border-radius:10px;margin:8px 0;background:var(--white)}
.empty strong{display:block;color:var(--ink)}
.notice{background:var(--warn-bg);border-left:4px solid var(--orange);padding:12px 14px;margin:12px 0;border-radius:6px}

.btn{appearance:none;border:0;border-radius:6px;padding:11px 18px;font-weight:700;cursor:pointer;background:var(--orange);color:var(--white);min-height:44px}
.btn.dark{background:var(--black)}
.btn.ghost{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.quiet{background:#ECECEC;color:var(--ink)}
.btn.danger{background:var(--white);color:var(--bad);box-shadow:inset 0 0 0 1.5px var(--bad)}
.btn.small{padding:7px 12px;min-height:36px;font-size:14px}
.btn[disabled]{opacity:.45;cursor:default}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread{display:flex;justify-content:space-between;align-items:center;gap:10px}
.list{display:flex;flex-direction:column;gap:10px}
.card{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:14px 16px}
button.card{width:100%;text-align:left;cursor:pointer}
.chip{display:inline-block;font-size:13px;font-weight:700;padding:3px 9px;border-radius:4px;background:#ECECEC;white-space:nowrap}
.chip.ok{background:var(--ok-bg);color:var(--ok)} .chip.warn{background:var(--orange-soft);color:#A65300} .chip.bad{background:var(--bad-bg);color:var(--bad)}
.meta{color:var(--muted);font-size:14px}
.num{font-variant-numeric:tabular-nums}

/* Dienst: tijd in een zwart blok met oranje streep */
.shift-card{display:flex;width:100%;text-align:left;border:0;padding:0;background:none;cursor:pointer}
.shift-card .day{background:var(--black);color:var(--white);width:74px;flex:none;border-radius:10px 0 0 10px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:10px 4px;border-right:5px solid var(--orange)}
.shift-card .day b{font:900 28px/1 Roboto,sans-serif}
.shift-card .day span{font-size:13px;color:#BDBDBD}
.shift-card .body{flex:1;background:var(--white);border:1px solid var(--line);border-left:0;border-radius:0 10px 10px 0;padding:12px 16px;min-width:0}
.shift-card .time{font:700 21px/1.1 Roboto,sans-serif}
.shift-card .name{font-weight:500;margin-top:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Evenement */
.back{background:none;border:0;color:var(--orange);font-weight:700;padding:4px 0;cursor:pointer;min-height:40px}
.facts{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:14px 0 0}
.facts dt{color:var(--muted);font-size:14px}
.facts dd{margin:0}
.timeline{list-style:none;margin:0;padding:0 0 0 18px;border-left:3px solid var(--orange)}
.timeline li{padding:0 0 12px}
.timeline .when{font-weight:700}
.timeline .what{white-space:pre-line}
details.menu{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:12px 16px}
details.menu summary{cursor:pointer;font-weight:700}
details.menu h4{margin:12px 0 4px}
details.menu p{margin:2px 0;font-size:15px}
.mine{border-left:5px solid var(--orange)}

/* Beschikbaarheid */
.week h3{font-size:15px;color:var(--muted);margin:20px 0 4px}
.avail-day{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:8px 0;border-bottom:1px solid var(--line)}
.seg{display:flex;background:#ECECEC;border-radius:6px;padding:3px;flex:none}
.seg button{border:0;background:none;border-radius:4px;padding:7px 11px;font-size:14px;font-weight:700;color:var(--muted);cursor:pointer;min-height:36px}
.seg button[aria-pressed="true"].v-ja{background:var(--ok);color:#fff}
.seg button[aria-pressed="true"].v-misschien{background:var(--orange);color:#fff}
.seg button[aria-pressed="true"].v-nee{background:var(--black);color:#fff}

/* Overzicht: dagen x medewerkers */
.grid-tools{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;margin:14px 0 10px}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:13px;color:var(--muted)}
.legend i{display:inline-block;width:14px;height:14px;border-radius:3px;vertical-align:-2px;margin-right:5px}
.grid-scroll{overflow-x:auto;background:var(--white);border:1px solid var(--line);border-radius:10px}
table.grid{border-collapse:separate;border-spacing:0;width:max-content;min-width:100%;font-size:13px}
.grid th,.grid td{border-bottom:1px solid var(--line);border-right:1px solid var(--line);padding:0;vertical-align:top}
.grid thead th{background:var(--black);color:var(--white);font-weight:500;padding:8px 6px;text-align:center;position:sticky;top:0;min-width:104px}
.grid thead th b{display:block;font-size:16px;font-weight:700}
.grid thead th.today{background:var(--orange)}
.grid thead th.weekend{background:#2A2A2A}
.grid .name{position:sticky;left:0;background:var(--white);z-index:2;min-width:150px;max-width:170px;padding:8px 10px;text-align:left}
.grid thead .name{background:var(--black);z-index:3}
.grid .name b{display:block;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid .name span{color:var(--muted);font-size:12px}
.grid td.cell{height:58px;cursor:pointer;padding:4px}
.grid td.cell:hover{background:#FAFAFA}
.grid td.nee{background:repeating-linear-gradient(135deg,#F1F1F1 0 6px,#E4E4E4 6px 12px)}
.grid td.ja{background:#F3FAF5}
.grid td.misschien{background:#FFF7EE}
.grid .blk{display:block;background:var(--orange);color:var(--white);border-radius:4px;padding:3px 6px;margin-bottom:3px;line-height:1.25;text-align:left;width:100%;border:0;cursor:pointer;font:inherit;font-size:12px}
.grid .blk b{display:block;font-size:13px}
.grid .blk.clash{background:var(--bad)}
.grid .mark{color:var(--muted);font-size:12px;padding:2px 4px}
.grid tr.open td,.grid tr.open .name{background:var(--orange-soft)}
.grid tr.open .blk{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--orange)}
.grid tfoot td{background:#FAFAFA;text-align:center;padding:6px;font-weight:700}
@media (max-width:600px){ .grid .name{min-width:112px;max-width:120px;padding:6px 8px} .grid thead th{min-width:92px} }
.grid .tot{text-align:right;padding:8px 10px;font-weight:700;min-width:70px;background:#FAFAFA}

/* Navigatie */
nav.tabs{position:fixed;left:0;right:0;bottom:0;background:var(--black);padding-bottom:env(safe-area-inset-bottom,0px);z-index:5}
.tabs-in{max-width:760px;margin:0 auto;display:flex}
nav.tabs button{flex:1;border:0;background:none;color:#BDBDBD;padding:12px 4px 14px;font-weight:500;font-size:14px;cursor:pointer;border-top:3px solid transparent}
nav.tabs button[aria-current="page"]{color:var(--white);border-top-color:var(--orange)}
.badge{display:inline-block;min-width:18px;margin-left:4px;padding:0 5px;border-radius:9px;background:var(--orange);color:var(--white);font-size:12px;line-height:18px}

/* Invulpaneel */
.scrim{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:10;display:flex;align-items:flex-end;justify-content:center}
.sheet{background:var(--bg);width:100%;max-width:600px;max-height:90%;overflow:auto;border-radius:14px 14px 0 0;padding:20px 18px calc(20px + env(safe-area-inset-bottom,0px))}
@media (min-width:700px){ .scrim{align-items:center} .sheet{border-radius:14px} }
.sheet h2{margin-top:0}
.sheet-x-bar{position:sticky;top:14px;height:0;z-index:2;display:flex;justify-content:flex-end}
.sheet-x{width:36px;height:36px;margin:-8px -6px 0 0;border:0;border-radius:50%;background:#E9E9E9;box-shadow:0 1px 3px rgba(0,0,0,.15);color:#444;font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
@media (hover:hover){ .sheet-x:hover{background:rgba(0,0,0,.12);color:var(--ink)} }
.sheet > h2:first-of-type{padding-right:40px}
label.f{display:block;margin-top:12px;font-size:14px;font-weight:500;color:var(--muted)}
label.f input,label.f select,label.f textarea{display:block;width:100%;margin-top:5px;padding:11px 12px;border:1.5px solid #D4D4D4;border-radius:6px;background:var(--white);font-size:16px;color:var(--ink)}
label.f textarea{min-height:110px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 12px}
.grid3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0 10px}
.total{margin-top:14px;font-weight:700;font-size:18px}
.actions{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap;margin-top:20px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(80px + env(safe-area-inset-bottom,0px));background:var(--black);color:var(--white);padding:10px 16px;border-radius:8px;font-weight:500;z-index:20;max-width:90%;border-left:4px solid var(--orange)}

/* Inloggen */
.login{max-width:420px;margin:40px auto;background:var(--white);border-radius:12px;padding:24px;border:1px solid var(--line)}
.login h1{font-size:26px}

/* Home, mededelingen, WhatsApp, ruilen */
.btn.wa{background:#25D366;color:#06321A;text-decoration:none}
.card.todo{display:flex;justify-content:space-between;align-items:center;gap:10px}
.card.todo span{color:var(--orange);font-weight:700;white-space:nowrap}
.card.ann.pinned{border-left:5px solid var(--orange)}
.ann-body{white-space:pre-line;margin-top:6px}
.shift-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:6px 2px 0}
.link{background:none;border:0;padding:6px 0;color:var(--orange);font-weight:700;cursor:pointer;text-decoration:none;font-size:14px}
.grid .blk.swap{box-shadow:inset 0 0 0 2px var(--black)}

/* Cao-controle */
.login-logo{height:64px;width:auto;display:block;margin:0 0 18px}
.grid .blk.warn{background:#9A4D00}
.grid .blk.warn b::after{content:" !";}
.cao{margin-top:12px}
.cao-item{display:flex;gap:10px;align-items:flex-start;width:100%;text-align:left;background:var(--white);border:1px solid var(--line);border-left:5px solid var(--bad);border-radius:8px;padding:10px 12px;cursor:pointer;margin-top:8px}
.cao-item.letop{border-left-color:var(--orange)}
.cao-item b{display:block}
.cao-box{margin-top:14px;padding:10px 12px;border-radius:8px;background:var(--white);border:1px solid var(--line)}
.cao-box p{margin:4px 0;font-size:14px}
.cao-box .f{color:var(--bad);font-weight:700}
.cao-box .w{color:#A65300;font-weight:700}

.grid thead th.tot{background:var(--black);color:var(--white)}

/* Meldingen, installatie, kosten */
.bell{position:relative;color:var(--white)!important;padding:6px 8px!important;vertical-align:middle}
.bell .badge{position:absolute;top:-2px;right:-4px;margin:0}
.who{display:flex;align-items:center;gap:6px}
@media (max-width:520px){ .who-name{display:none} }
.card.device{border-left:5px solid var(--orange);margin-top:10px}
.card.device p{margin:4px 0 10px}
.card.notif.unread{border-left:5px solid var(--orange)}
.cost-week .spread b{font-size:20px}
details.cost-day summary{cursor:pointer;list-style:none}
details.cost-day summary::-webkit-details-marker{display:none}
.cost-day.empty-day{opacity:.6}
.cost-ev{margin-top:12px;padding-top:10px;border-top:1px solid var(--line)}
.cost-row{display:flex;justify-content:space-between;gap:10px;padding:4px 0 4px 10px;font-size:15px}
@media (max-width:420px){ nav.tabs button{font-size:12.5px;padding:12px 2px 14px} }

label.f .meta{display:block;font-weight:400;margin-top:3px;font-size:13px}

/* In- en uitklokken */
.clock{background:var(--black);color:var(--white);border-radius:14px;padding:20px 18px 14px;margin-top:6px;border-bottom:5px solid var(--orange)}
.clock-state{font-size:14px;color:#BDBDBD;font-weight:500}
.clock-time{font:900 44px/1.05 Roboto,sans-serif;letter-spacing:-.02em;margin:4px 0 2px}
.clock-meta{color:#D6D6D6;font-size:15px}
.clock-btns{display:flex;gap:10px;margin-top:16px}
.clock-big{flex:1;min-height:56px;font-size:19px}
.clock-ghost{background:transparent;color:var(--white);box-shadow:inset 0 0 0 1.5px #8A8A8A;min-height:56px}
.clock.on .clock-time{color:var(--orange)}
.clock-link{display:block;background:none;border:0;color:#BDBDBD;font-size:14px;padding:12px 0 2px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.note-warn{margin-top:8px;background:var(--orange-soft);color:#7A3E00;border-radius:6px;padding:6px 10px;font-size:14px;font-weight:500}

/* Externe krachten en inklokvenster */
.ext-tag{font-style:normal;font-size:11px;font-weight:700;background:var(--black);color:var(--white);border-radius:3px;padding:1px 5px;vertical-align:1px}
#staff-form .only-ext,#staff-form .only-zzp,#staff-form .only-uren,#staff-form .lbl-zzp,#staff-form .lbl-uitzend{display:none}
#staff-form[data-kind="zzp"] .only-ext,#staff-form[data-kind="uitzend"] .only-ext,#staff-form[data-kind="zzp"] .only-zzp,#staff-form[data-kind="uren"] .only-uren,
#staff-form[data-kind="zzp"] .lbl-zzp,#staff-form[data-kind="uitzend"] .lbl-uitzend{display:block}
#staff-form[data-kind="zzp"] .only-int,#staff-form[data-kind="uitzend"] .only-int{display:none}
#staff-form span.only-int,#staff-form span.only-ext{font-weight:500}
.clock-big[disabled]{opacity:1;background:#3A3A3A;color:#BDBDBD;cursor:not-allowed}
.clock-hint{color:#BDBDBD;font-size:13px;margin-top:8px}

/* ---------- Muis en toetsenbord ---------- */
@media (hover:hover){
  .btn:hover:not([disabled]){filter:brightness(1.08)}
  .btn.quiet:hover:not([disabled]){background:#E2E2E2;filter:none}
  button.card:hover,.shift-card:hover .body{border-color:#BDBDBD}
  nav.tabs button:hover{color:var(--white)}
  .link:hover,.back:hover{text-decoration:underline}
}
.cols>div>h2:first-child,.cols .first-right{margin-top:22px}

/* ---------- MacBook en andere grote schermen ---------- */
@media (min-width:900px){
  body{padding-left:220px}
  :root{--bar-h:64px}
  .bar-in{max-width:none;padding:0 28px}
  nav.tabs{top:64px;bottom:0;right:auto;width:220px;border-top:0;border-right:1px solid #1E1E1E;padding:18px 0 0}
  .tabs-in{flex-direction:column;max-width:none}
  nav.tabs button{flex:none;text-align:left;padding:13px 24px;font-size:15px;border-top:0;border-left:4px solid transparent}
  nav.tabs button[aria-current="page"]{border-left-color:var(--orange);background:#141414}
  .wrap{max-width:1180px;padding:26px 36px 48px}
  .wrap[data-view=uren],.wrap[data-view=diensten],.wrap[data-view=beschikbaar],.wrap[data-view=detail]{max-width:880px}
  .wrap[data-view=login]{max-width:880px}
  .wrap[data-view=kosten]{max-width:1040px}
  h1{font-size:36px}
  .cols{margin-top:18px;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:36px;align-items:start}
  .cols .first-right,.cols>div>h2:first-child,.cols>div>.card.device:first-child,.cols>div>.clock:first-child{margin-top:0}
  .cols>div>.spread:first-child h2{margin-top:0}
  .cardgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:12px}
  .toast{bottom:28px;left:calc(50% + 110px)}
  .login{margin-top:80px}
  .sheet{max-width:620px}
  .grid thead th{min-width:118px}
  .clock-time{font-size:52px}
}
@media (min-width:1400px){ .wrap.wide,.wrap[data-view=home],.wrap[data-view=planning],.wrap[data-view=team]{max-width:1320px} }

/* Snelkoppelingen manager */
.quick{display:flex;gap:12px;flex-wrap:wrap;margin:14px 0 4px}
.quick-btn{display:flex;align-items:center;gap:14px;background:var(--black);color:var(--white);text-decoration:none;border-radius:12px;padding:14px 18px 14px 14px;min-height:64px;flex:1 1 280px;max-width:420px;border-bottom:4px solid var(--orange)}
.quick-btn b{display:block;font-size:17px}
.quick-btn span span{display:block;color:#BDBDBD;font-size:13px}
.quick-ico{width:40px;height:40px;border-radius:8px;background:var(--orange);color:var(--white);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:15px;flex:none}
@media (hover:hover){ .quick-btn:hover{background:#1A1A1A} }
@media (min-width:900px){ .quick{margin-top:6px} }

/* Tweestapsverificatie en logboek */
.mfa-qr{display:block;width:200px;height:200px;margin:14px auto;background:#fff;padding:8px;border-radius:8px;border:1px solid var(--line)}
.login code{background:#ECECEC;padding:2px 6px;border-radius:4px;font-size:13px;word-break:break-all}
details.logbook summary{cursor:pointer}
.log{margin-top:10px}
.log-row{display:grid;grid-template-columns:110px 1fr;gap:10px;padding:8px 0;border-top:1px solid var(--line);font-size:14px}
@media (max-width:520px){ .log-row{grid-template-columns:1fr;gap:2px} }

/* Functies en niveaus */
.dots{color:var(--orange);letter-spacing:1px;font-size:12px}
.fn-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.fn{background:#F1F1F1;border-radius:5px;padding:3px 8px;font-size:13px}
.fn .dots{font-size:10px}
.grid .name .fn-tags,.grid .name .lvl{display:block;color:var(--muted);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid .name .lvl{color:var(--orange);font-weight:700}
.sheet-h{font:700 16px Roboto,sans-serif;margin:20px 0 4px}
.fn-edit{display:flex;flex-direction:column;gap:6px}
.fn-row{display:flex;justify-content:space-between;align-items:center;gap:10px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.fn-row select{padding:8px;border:1.5px solid #D4D4D4;border-radius:6px;background:var(--white);font-size:15px;max-width:55%}
.fn-own{padding:6px 0;border-bottom:1px solid var(--line)}
.fn-own:last-of-type{border-bottom:0}

.grid .blk{white-space:normal;overflow-wrap:anywhere}
table.grid.fit{table-layout:fixed;width:100%}
table.grid.fit th.name,table.grid.fit td.name{width:170px}
table.grid.fit .tot{width:80px}
table.grid.fit thead th{min-width:0}

/* Rooster per functie */
.seg.seg-light{background:#ECECEC;border-radius:6px}
.seg.seg-light button{min-height:32px;padding:6px 12px}
.seg.seg-light button[aria-pressed="true"]{background:var(--black);color:var(--white)}
.grid tr.group td{background:var(--black);color:var(--white);border-right-color:#2A2A2A;padding:8px 6px}
.grid tr.group td.name{background:var(--black);border-left:5px solid var(--orange)}
.grid tr.group td.name span{color:#BDBDBD}
.grid tr.group td.gcount{text-align:center;font-weight:700;font-size:13px;color:#FFD3A3}
.grid tr.group td.tot{background:var(--black);color:var(--white)}
.grid .elsewhere{display:block;background:#E9E9E9;color:#555;border-radius:4px;padding:3px 6px;margin-bottom:3px;font-size:11.5px;line-height:1.25}
.grid .minlv{display:block;font-size:10px;color:var(--orange)}

.grid .blk,.grid .elsewhere{max-width:150px}
table.grid.fit .blk,table.grid.fit .elsewhere{max-width:none}
@media (max-width:600px){ .grid .blk,.grid .elsewhere{max-width:120px} }

/* Tijdsblokken, groepen per dienst, agenda */
.avail-day .times{display:block;background:none;border:0;padding:4px 0 0;color:var(--ink);font-size:13px;font-weight:700;cursor:pointer;text-align:left}
.avail-day .times span{color:var(--orange);font-weight:500;margin-left:4px;text-decoration:underline;text-underline-offset:2px}
.blk-pick{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.blk-opt{display:flex;align-items:center;gap:12px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:12px;cursor:pointer}
.blk-opt input{width:22px;height:22px;accent-color:var(--orange)}
.grid .mark{line-height:1.3}
.grid tr.group.idle td,.grid tr.group.idle td.name,.grid tr.group.idle td.tot{background:#3A3A3A}
.grid tr.group.idle td.name{border-left-color:#8A8A8A}
.grid tr.g-empty td{background:#FAFAFA;color:var(--muted);font-size:13px}
.team-lines{background:var(--white);border:1px solid var(--line);border-top:0;border-radius:0 0 10px 10px;margin:-4px 0 0 74px;padding:8px 14px;font-size:14px}
.team-lines div{padding:2px 0}
.team-lines b{display:inline-block;min-width:86px}
.team-lines .me{font-weight:700;color:var(--orange)}
h3.fn-head{font:700 15px Roboto,sans-serif;margin:16px 0 8px;display:flex;gap:8px;align-items:center}
h3.fn-head span{font-size:12px;background:#ECECEC;border-radius:4px;padding:1px 7px;color:var(--muted)}
.cal-opt{display:block;text-decoration:none;color:var(--ink);text-align:left;width:100%;cursor:pointer}
.cal-opt b{display:block}

.invite-row{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:10px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:8px 10px}

.chip.offer{background:var(--orange);color:var(--white)}
.status-row{margin-top:8px}
.app-version{text-align:center;color:#9A9A9A;font-size:12px;margin-top:28px}

/* Tijdelijk wachtwoord */
.tp-box{font:700 26px/1.2 'Roboto Mono',Menlo,monospace;letter-spacing:1px;background:var(--white);border-left:5px solid var(--orange);border-radius:8px;padding:14px 16px;margin:10px 0;text-align:center;user-select:all}
.tp-msg{background:var(--white);border:1px solid var(--line);border-radius:8px;padding:12px;font-size:14px;margin-top:10px}

/* Blok na 'Bekijken' vanaf home */
.focus-box{background:var(--orange-soft);border-left:5px solid var(--orange);border-radius:10px;padding:4px 14px 14px;margin-top:16px}
.focus-box h2{margin-top:12px}

/* Planning per maand */
h2.month-head{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;border-bottom:2px solid var(--black);padding-bottom:6px;margin-top:30px}
h2.month-head span{font:500 13px Roboto,sans-serif;color:var(--muted)}

/* Rijbewijzen */
.lic-pick{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:6px}
.lic-opt{display:flex;align-items:center;gap:8px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:10px;cursor:pointer}
.lic-opt input{width:20px;height:20px;accent-color:var(--orange)}
.lic-opt b{font-size:16px;min-width:26px}
.lic-opt span{font-size:12px;color:var(--muted);line-height:1.2}
.lic-list{display:flex;gap:6px;margin-top:8px}
.lic{display:inline-block;background:var(--black);color:var(--white);font-size:11px;font-weight:700;border-radius:3px;padding:1px 6px;letter-spacing:.5px}

/* Weeknavigatie en werkbalk (v2.1: rustig, één stijl) */
.grid-tools .row.tools{gap:8px}
.week-nav{display:inline-flex;align-items:stretch;background:var(--black);border-radius:8px;overflow:hidden;height:34px}
.week-nav button{border:0;background:none;color:var(--white);font-weight:600;font-size:14px;padding:0 12px;cursor:pointer;min-height:0}
.week-nav button.wk-arrow{font-size:19px;line-height:1;padding:0 11px}
.week-nav button.today{background:var(--orange)}
.week-nav button.today[aria-current="true"]{background:var(--orange)}
@media (hover:hover){ .week-nav button:hover{background:#2A2A2A} .week-nav button.today:hover{background:#D66D00} }
.seg.seg-tool{background:#E9E9E9;border-radius:8px;padding:2px;height:34px;align-items:stretch}
.seg.seg-tool button{min-height:0;padding:0 12px;font-weight:600;color:var(--muted);border-radius:6px}
.seg.seg-tool button[aria-pressed="true"]{background:var(--black);color:var(--white)}
.tool-sel{appearance:none;-webkit-appearance:none;height:34px;border:1px solid #DADADA;border-radius:8px;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23666' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 10px center;padding:0 28px 0 12px;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.tool-btn{height:34px;border:1px solid #DADADA;border-radius:8px;background:var(--white);padding:0 14px;font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.tool-btn.primary{background:var(--orange);border-color:var(--orange);color:var(--white);font-weight:600}
@media (hover:hover){ .tool-sel:hover,.tool-btn:hover{border-color:#9A9A9A} .tool-btn.primary:hover{background:#D66D00;border-color:#D66D00} }
.grid-tools .row.tools .week-nav{flex:none}

/* Rustigere functiegroepen in het rooster */
.grid tr.group td,.grid tr.group td.name,.grid tr.group td.tot{background:#F1F1F1;color:var(--ink);border-right-color:#E3E3E3;padding:7px 8px}
.grid tr.group td.name{border-left:4px solid var(--orange)}
.grid tr.group td.name b{font-size:14px}
.grid tr.group td.name span{color:var(--muted);font-size:12px}
.grid tr.group td.gcount{color:#A65300;font-size:12px;font-weight:700}
.grid tr.group.empty td,.grid tr.group.empty td.name,.grid tr.group.empty td.tot{background:#FAFAFA}
.grid tr.group.empty td.name b{color:var(--muted)}
.grid tr.group.idle td,.grid tr.group.idle td.name,.grid tr.group.idle td.tot{background:#F1F1F1}
.grid tr.group.idle td.name{border-left-color:#9A9A9A}

.load-error{background:var(--bad-bg);border-left:5px solid var(--bad);border-radius:8px;padding:12px 14px;margin:6px 0 14px;font-size:14px;color:#7A1E14}
.load-error b{display:block;margin-bottom:4px}
.load-error div{word-break:break-word}

/* Slepen in het rooster */
.grid .blk[data-id]{cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.dragging,body.dragging *{cursor:grabbing!important;user-select:none}
.drag-ghost{position:fixed;z-index:50;pointer-events:none;opacity:.92;box-shadow:0 8px 20px rgba(0,0,0,.25);transform:rotate(-1.5deg)}
.grid .blk.drag-src{opacity:.35}
.grid td.cell.drop-ok{outline:2px dashed #EE7900;outline-offset:-3px;background:#FFF9F2}
.grid td.cell.drop-hover{outline:3px solid #EE7900;background:#FDEBD9}

/* Menu 'Meer' op de telefoon */
nav.tabs .more-btn{display:none}
@media (max-width:899px){ nav.tabs .more-item{display:none} nav.tabs .more-btn{display:block} }
/* Chat */
.chat{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;height:calc(100vh - var(--bar-h) - 210px - env(safe-area-inset-bottom,0px));min-height:360px}
@media (min-width:900px){ .chat{height:calc(100vh - var(--bar-h) - 170px);max-width:820px} }
.chat-thread{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:6px;background:#FAFAFA}
.chat-empty{margin:auto;color:var(--muted);text-align:center;max-width:320px;font-size:15px}
.chat-day{align-self:center;font-size:12px;color:var(--muted);background:#EDEDED;border-radius:10px;padding:2px 10px;margin:8px 0 4px}
.msg{max-width:78%;align-self:flex-start;background:var(--white);border:1px solid var(--line);border-radius:14px 14px 14px 4px;padding:8px 12px}
.msg.mine{align-self:flex-end;background:var(--orange);color:var(--white);border-color:var(--orange);border-radius:14px 14px 4px 14px}
.msg-from{display:block;font-size:12px;font-weight:700;color:#A65300;margin-bottom:2px}
.msg-body{white-space:pre-wrap;word-break:break-word;font-size:15px}
.msg-time{display:block;font-size:11px;opacity:.7;text-align:right;margin-top:2px}
.composer{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--white);align-items:flex-end}
.composer textarea{flex:1;resize:none;border:1.5px solid #D4D4D4;border-radius:18px;padding:9px 14px;font-size:16px;max-height:140px;min-height:42px;line-height:1.35}
.composer .btn{border-radius:18px}
.card.conv.unread{border-left:5px solid var(--orange)}
.conv-last{color:var(--muted);font-size:14px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-right:10px}
/* Mededelingenarchief */
input.search{flex:1;padding:10px 12px;border:1.5px solid #D4D4D4;border-radius:8px;font-size:16px;background:var(--white)}
.ann-arch.pinned{border-left:5px solid var(--orange)}
details.readers{margin-top:10px}
details.readers summary{cursor:pointer;font-size:14px;color:var(--muted);display:flex;align-items:center;gap:8px}
.read-bar{display:inline-block;width:80px;height:6px;background:#EAEAEA;border-radius:3px;overflow:hidden}
.read-bar i{display:block;height:100%;background:var(--ok)}
.read-cols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:8px;font-size:14px}
.read-cols b{display:block;margin-bottom:4px}

/* Zwevende chatknop en chatvenster (medewerkers) */
.chat-fab{position:fixed;right:16px;bottom:calc(78px + env(safe-area-inset-bottom,0px));z-index:15;width:58px;height:58px;border-radius:50%;border:0;background:var(--orange);color:var(--white);box-shadow:0 6px 18px rgba(0,0,0,.28);cursor:pointer;display:flex;align-items:center;justify-content:center}
.chat-fab .badge{position:absolute;top:-2px;right:-2px;background:var(--black);margin:0}
@media (min-width:900px){ .chat-fab{bottom:24px;right:24px} }
.chat-panel{position:fixed;z-index:16;left:0;right:0;bottom:0;height:min(88vh,720px);background:var(--white);border-radius:16px 16px 0 0;box-shadow:0 -8px 30px rgba(0,0,0,.25);display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px)}
@media (min-width:900px){ .chat-panel{left:auto;right:24px;bottom:24px;width:390px;height:600px;border-radius:16px} }
.cp-head{display:flex;justify-content:space-between;align-items:center;background:var(--black);color:var(--white);padding:12px 16px;border-radius:16px 16px 0 0;border-bottom:4px solid var(--orange)}
.cp-head b{display:block;font-size:17px}
.cp-head span{font-size:12px;color:#BDBDBD}
.cp-close{background:none;border:0;color:var(--white);font-size:30px;line-height:1;cursor:pointer;padding:0 4px}
.chat-panel .chat-thread{flex:1}
.msg.bot{background:#F1F1F1;border-color:#E3E3E3}
.msg.bot .msg-from{color:var(--muted)}
.chat-escalate{align-self:flex-start;background:none;border:1.5px solid var(--orange);color:#A65300;border-radius:14px;padding:5px 12px;font-size:13px;font-weight:700;cursor:pointer;margin-left:4px}
.msg.typing .msg-body{display:flex;gap:4px;padding:4px 0}
.msg.typing i{width:7px;height:7px;border-radius:50%;background:#9A9A9A;animation:dot 1.2s infinite}
.msg.typing i:nth-child(2){animation-delay:.2s}.msg.typing i:nth-child(3){animation-delay:.4s}
@keyframes dot{0%,80%,100%{opacity:.3}40%{opacity:1}}

/* Rollen, ziekmelden, HR-dossier */
.card.sick{border-left:5px solid var(--bad);margin-top:16px}
.team-card .row .badge{margin-left:4px}
.hr-snippet{color:var(--muted);font-size:14px;margin-top:6px}
details.card summary{cursor:pointer}

/* Oranje scheidingslijnen in het menu (beheerder en planner) */
.nav-sep{height:2px;background:var(--orange);margin:8px 24px;flex:none}
@media (max-width:899px){ nav.tabs .nav-sep{display:none} }
.more-sep{height:2px;background:var(--orange);margin:4px 2px;border-radius:1px}

/* Welkomstuitleg */
.welcome .wl-sec{background:var(--white);border:1px solid var(--line);border-left:4px solid var(--orange);border-radius:8px;padding:10px 12px;margin-top:10px}
.welcome .wl-sec p{margin:4px 0 0;font-size:15px;line-height:1.45}

/* Vensters altijd boven de chatknop en het chatpaneel */
.scrim{z-index:18}
.toast{z-index:30}

/* ---------- v29: agenda met open diensten ---------- */
.cal{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:10px;margin-bottom:6px}
.cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.cal-head b{font-size:17px;text-transform:capitalize}
.cal-nav{border:0;background:var(--black);color:var(--white);width:40px;height:36px;border-radius:6px;font-size:20px;font-weight:700;cursor:pointer}
.cal-nav[disabled]{opacity:.25;cursor:default}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-wd{text-align:center;font-size:12px;font-weight:700;color:var(--muted);text-transform:uppercase;padding-bottom:2px}
.cal-day{position:relative;min-height:56px;border:1px solid var(--line);border-radius:8px;background:var(--white);padding:4px 3px;display:flex;flex-direction:column;align-items:center;gap:3px;cursor:pointer;font:inherit;color:inherit}
.cal-day.out{border:0;background:none;cursor:default}
.cal-day.today{box-shadow:inset 0 0 0 2px var(--orange)}
.cal-day.past{opacity:.5}
.cal-day.av-ja{background:#F3FAF5}
.cal-day.av-misschien{background:#FFF7EE}
.cal-day.av-nee{background:repeating-linear-gradient(135deg,#F4F4F4 0 4px,#E6E6E6 4px 8px)}
.cal-n{font-size:14px;font-weight:700;line-height:1.1}
.cal-marks{display:flex;flex-wrap:wrap;justify-content:center;gap:2px}
.cal i,.cal-legend i{font-style:normal;display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:9px;font-size:11px;font-weight:700;padding:0 4px;line-height:1}
.m-mine{background:var(--black);color:var(--white);border-radius:4px !important;min-width:14px !important}
.m-open{background:var(--orange);color:var(--white)}
.m-sign{background:var(--ok);color:var(--white)}
.m-task{background:#ECECEC;color:var(--ink)}
.cal-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.cal-legend span{display:inline-flex;align-items:center;gap:5px}
.cal-legend .lg-nee{width:16px;height:12px;border-radius:3px;min-width:0;background:repeating-linear-gradient(135deg,#F4F4F4 0 3px,#D8D8D8 3px 6px)}
@media (hover:hover){ .cal-day:not(.out):hover{border-color:var(--ink)} }
@media (max-width:380px){ .cal-day{min-height:50px} .cal i{min-width:15px;height:15px;font-size:10px} }
.open-shift.signed{border-left:5px solid var(--ok)}
.card.mine-shift{border-left:5px solid var(--black)}
.ok-line{color:var(--ok);font-weight:700;font-size:14px;margin-top:6px;display:inline-block}
.signup-box{margin-top:10px;background:var(--orange-soft);border-radius:8px;padding:10px 12px;display:flex;flex-direction:column;gap:8px}
.grid .blk .sgn{display:inline-block;background:var(--white);color:var(--orange);border-radius:4px;padding:0 4px;font-size:11px;font-weight:700;margin-left:2px}

/* ---------- v29: taken ---------- */
.task{display:flex;gap:12px;align-items:flex-start;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:12px 14px}
.task-check{flex:none;width:40px;height:40px;border-radius:50%;border:2px solid #BDBDBD;background:var(--white);color:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0;margin-top:1px}
.task-check[aria-pressed="true"]{background:var(--ok);border-color:var(--ok);color:var(--white)}
@media (hover:hover){ .task-check:hover{border-color:var(--ok);color:var(--ok)} .task-check[aria-pressed="true"]:hover{color:var(--white)} }
.task-body{flex:1;min-width:0}
.task-meta{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:3px}
.task-text{margin-top:6px;font-size:14px;white-space:pre-line;color:#333}
.task.done .task-body b{text-decoration:line-through;color:var(--muted)}
.task .link{flex:none}
.done-list{margin-top:14px}
.done-list summary{cursor:pointer}
.task-card{display:block;width:100%;text-align:left;cursor:pointer}
.task-card .read-bar{width:100%;margin-top:8px}
.who-list{display:flex;flex-wrap:wrap;gap:6px}
.who-list span{background:#ECECEC;border-radius:4px;padding:3px 9px;font-size:14px}
.who-list span.ok{background:var(--ok-bg);color:var(--ok)}
.who-list small{opacity:.8}
#task-form:not([data-scope="functie"]) .only-functie,#task-form:not([data-scope="persoon"]) .only-persoon{display:none}

/* ---------- v29: installeren ---------- */
.install-status{margin-top:10px}
.why{margin:4px 0 0;padding-left:20px}
.why li{margin-bottom:4px}
.steps{margin:12px 0 6px;padding-left:22px}
.steps li{margin-bottom:8px;padding-left:2px}
.install-sum{margin-bottom:14px;border-left:5px solid var(--orange)}
.dev-line{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:6px}
.dev{font-size:12.5px;font-weight:700;border-radius:4px;padding:2px 8px}
.dev.yes{background:var(--ok-bg);color:var(--ok)}
.dev.no{background:var(--orange-soft);color:#A65300}
.update-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;background:var(--black);color:var(--white);border-left:5px solid var(--orange);border-radius:10px;padding:12px 14px;margin:6px 0 14px}
.update-bar b{display:block}
.update-bar span{font-size:14px;color:#D0D0D0}
.update-card{border-left:5px solid var(--orange);margin-top:14px}
.update-card p{margin:4px 0 10px}

/* ---------- v30: plus- en minuren, vakantie en afwezigheid ---------- */
.saldo-grid{display:grid;gap:12px;margin-bottom:6px}
@media (min-width:900px){ .saldo-grid{grid-template-columns:1fr 1fr;align-items:start} }
.saldo-card{border-left:5px solid var(--black)}
.saldo{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.saldo.pos,.st-row .pos,.wt-row .pos{color:var(--ok)}
.saldo.neg,.st-row .neg,.wt-row .neg{color:var(--bad)}
.saldo-rows{display:grid;grid-template-columns:1fr auto;gap:3px 12px;margin:10px 0 6px;font-size:14.5px}
.saldo-rows b{text-align:right;font-variant-numeric:tabular-nums}
.saldo-rows .sub-row{color:var(--muted);font-weight:400;padding-left:12px}
.leave-row{display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left}
button.leave-row{cursor:pointer}
.leave-side{display:flex;flex-direction:column;align-items:flex-end;gap:2px}
.saldo-table{padding:6px 0}
.st-head,.st-row{display:grid;grid-template-columns:1fr 92px 92px;gap:8px;align-items:center;padding:8px 14px}
.st-head{font-size:12.5px;font-weight:700;color:var(--muted);text-transform:uppercase;border-bottom:1px solid var(--line)}
.st-head span:not(:first-child),.st-row span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums;font-weight:700}
.st-row{width:100%;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;font:inherit;color:inherit}
.st-row:last-child{border-bottom:0}
.st-row small{display:block;color:var(--muted);font-size:12.5px}
@media (hover:hover){ .st-row:hover{background:#FAFAFA} }
.week-table{border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-top:10px;font-size:14px}
.wt-head,.wt-row{display:grid;grid-template-columns:1.1fr 1fr .9fr 1fr 1fr;gap:4px;padding:7px 10px;font-variant-numeric:tabular-nums}
.wt-head{background:#F4F4F4;font-weight:700;font-size:12.5px;color:var(--muted)}
.wt-row{border-top:1px solid var(--line)}
.wt-row span:not(:first-child),.wt-head span:not(:first-child){text-align:right}
.wt-row span:last-child{font-weight:700}
.grid .leave-mark{display:block;font-size:11px;font-weight:700;border-radius:4px;padding:1px 5px;margin-bottom:3px;background:#E8F0FB;color:#1F4E8C}
.grid .leave-mark.ziek,.grid .leave-mark.bijzonder{background:#EFEFEF;color:#555}
.m-leave{background:#1F4E8C;color:var(--white)}
.m-leave.req{background:#E8F0FB;color:#1F4E8C}
#leave-form .seg{margin-bottom:6px}
#leave-form[data-mode="dagen"] .only-uren,#leave-form[data-mode="uren"] .only-dagen{display:none}

/* ---------- beschikbaarheid als kalender ---------- */
.av-tools{margin:4px 0 10px;display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.avp-wd{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.avp-chip{position:relative;cursor:pointer}
.avp-chip input{position:absolute;opacity:0;width:1px;height:1px}
.avp-chip span{display:inline-flex;align-items:center;justify-content:center;min-width:42px;min-height:38px;border-radius:6px;background:#ECECEC;color:var(--muted);font-weight:700;font-size:14px;text-transform:uppercase}
.avp-chip input:checked + span{background:var(--black);color:#fff}
.avp-chip input:focus-visible + span{outline:2px solid var(--orange);outline-offset:2px}
#avp-count{margin-top:12px}
#avp-count .bad{color:#B3261E;font-weight:700}
.av-cal{max-width:640px}
.av-cal .cal-day{min-height:62px;justify-content:flex-start}
.av-cal .cal-day[disabled]{opacity:.35;cursor:default}
.av-cal .cal-day.av-ja{background:#E3F2E8;border-color:#BFE0CB}
.av-cal .cal-day.av-misschien{background:#FDEBD9;border-color:#F5D3AE}
.av-cal .cal-day.av-nee{background:repeating-linear-gradient(135deg,#F1F1F1 0 4px,#E2E2E2 4px 8px);border-color:#D6D6D6}
.av-cal .cal-day.av-leeg:not([disabled]){border-style:dashed;border-color:#CFCFCF}
.av-tag{font-size:11.5px;font-weight:700;line-height:1.2}
.av-ja .av-tag{color:var(--ok)} .av-misschien .av-tag{color:#A65300} .av-nee .av-tag{color:#555}
.av-tag.lv{color:#1F4E8C;font-size:10.5px}
.av-time{font-size:10px;color:var(--muted);line-height:1.15;text-align:center;word-break:break-word}
.av-shift{position:absolute;top:5px;right:5px;width:7px;height:7px;border-radius:50%;background:var(--black)}
.cal-legend .av-shift{position:static;display:inline-block;min-width:0;height:8px;width:8px;padding:0}
.av-cal.multi .cal-day:not([disabled]){cursor:copy}
.av-cal .cal-day.picked{box-shadow:inset 0 0 0 3px var(--black);transform:scale(.96)}
.wd-pick{border:0;background:#ECECEC;border-radius:6px;padding:4px 0;cursor:pointer;font:inherit;font-size:12px;font-weight:700;color:var(--ink);text-transform:uppercase}
.av-sum{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:13px;font-weight:700}
.av-sum span{border-radius:4px;padding:2px 8px}
.s-ja{background:#E3F2E8;color:var(--ok)} .s-misschien{background:#FDEBD9;color:#A65300} .s-nee{background:#ECECEC;color:#555} .s-leeg{background:var(--white);border:1px dashed #CFCFCF;color:var(--muted)}
.av-bar{position:sticky;bottom:calc(64px + env(safe-area-inset-bottom,0px));z-index:5;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:12px 0;max-width:640px;box-shadow:0 6px 20px rgba(0,0,0,.12)}
@media (min-width:900px){ .av-bar{bottom:16px} }
.av-bar .av-seg{margin-top:10px}
.av-seg{display:flex;width:100%}
.av-seg button{flex:1;min-height:44px;font-size:15px}
.av-seg button[disabled]{opacity:.4}
.av-bar .av-seg button:not([disabled]).v-ja{color:var(--ok)} .av-bar .av-seg button:not([disabled]).v-misschien{color:#A65300}
.av-times{display:flex;justify-content:space-between;align-items:center;width:100%;margin-top:12px;text-align:left;cursor:pointer}
.av-times .meta{display:block}
.av-legend .lg{width:16px;height:12px;min-width:0;border-radius:3px;padding:0}
.lg.av-ja{background:#E3F2E8;border:1px solid #BFE0CB} .lg.av-misschien{background:#FDEBD9;border:1px solid #F5D3AE}
.lg.av-nee{background:repeating-linear-gradient(135deg,#F1F1F1 0 3px,#D8D8D8 3px 6px)} .lg.av-leeg{background:var(--white);border:1px dashed #BDBDBD}
.av-cal i.av-shift,.av-legend i.av-shift{min-width:0;width:8px;height:8px;padding:0;border-radius:50%;font-size:0}

/* ---------- gebruiksvriendelijk ---------- */
.news-item{display:flex;gap:14px;align-items:flex-start;padding:12px 0;border-bottom:1px solid var(--line)}
.news-item:last-child{border-bottom:0}
.news-item p{margin:3px 0 0;color:#333;font-size:15px}
.news-ico{flex:none;width:44px;height:44px;border-radius:12px;background:var(--orange-soft);display:flex;align-items:center;justify-content:center;font-size:22px}
.start-card{border-left:5px solid var(--orange);margin-top:10px}
.start-bar{height:6px;background:#EAEAEA;border-radius:3px;overflow:hidden;margin:8px 0 6px}
.start-bar i{display:block;height:100%;background:var(--orange)}
.start-item{display:flex;align-items:center;gap:10px;padding:7px 0;border-bottom:1px solid var(--line)}
.start-item:last-child{border-bottom:0}
.start-item span:nth-child(2){flex:1}
.start-item .link{padding:0}
.start-dot{flex:none;width:22px;height:22px;border-radius:50%;border:2px solid #C8C8C8;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:900;color:var(--white)}
.start-item.ok .start-dot{background:var(--ok);border-color:var(--ok)}
.start-item.ok span:nth-child(2){color:var(--muted);text-decoration:line-through}
.feedback-link{text-align:center;margin:26px 0 6px;padding:0 70px 40px}
.feedback-link .link{color:var(--muted);font-weight:500;text-decoration:underline;text-underline-offset:3px}
.pref-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.pref-row:last-child{border-bottom:0}
.pref-row .meta{display:block}
.pref-row input{width:22px;height:22px;accent-color:var(--orange);flex:none}
.usage{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
.usage div{background:#F6F6F6;border-radius:8px;padding:8px 12px;min-width:150px;flex:1}
.usage b{display:block;font-size:20px;font-weight:900}
.usage span{font-size:13px;color:var(--muted)}

/* ---------- v31: indeling planner en beheerder ---------- */
.nav-head{font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:#8A8A8A;padding:16px 26px 4px}
@media (max-width:899px){ nav.tabs .nav-head{display:none} }
.mode-bar{display:flex;justify-content:flex-end;margin:8px 0 12px}
.mode-bar .seg button{min-width:110px}
@media (max-width:600px){ .mode-bar{justify-content:stretch} .mode-bar .seg{width:100%} .mode-bar .seg button{flex:1} }
.subtabs{display:flex;gap:4px;border-bottom:2px solid var(--line);margin:4px 0 14px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;
  /* v3.1: vast bovenin bij scrollen, zonder schuifbalk */
  position:sticky;top:calc(var(--bar-h) + env(safe-area-inset-top,0px));z-index:4;background:var(--bg);margin-left:-4px;margin-right:-4px;padding:0 4px}
.subtabs::-webkit-scrollbar{display:none}
.subtabs button{border:0;background:none;padding:10px 14px;font:inherit;font-weight:700;color:var(--muted);cursor:pointer;white-space:nowrap;border-bottom:3px solid transparent;margin-bottom:-2px}
.subtabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--orange)}
a.card.todo{text-decoration:none;color:inherit}
/* beschikbaarheid onbekend in het rooster */
.grid td.cell.unknown{outline:1px dashed #D2D2D2;outline-offset:-4px}
.grid .mark.unk{color:#9A9A9A;font-weight:700;font-size:15px;text-align:center}
.av-note{max-width:640px;margin:2px 0 12px}
.day-info{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;margin:10px 0 0;font-size:14px}
.day-info dt{color:var(--muted);font-weight:700}
.day-info dd{margin:0}
/* wisselen tussen Planning en Mijn werk in de zijbalk (alleen computer) */

/* ---------- meerdere diensten aanmaken ---------- */
.ev-facts{margin:10px 0}
.slot-list{margin:0;padding-left:18px}
.slot-list li{margin-bottom:2px}
.bulk-quick{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:8px 0 12px}
.chip-btn{border:1px solid var(--line);background:var(--white);border-radius:16px;padding:6px 12px;font:inherit;font-size:14px;font-weight:700;cursor:pointer}
@media (hover:hover){ .chip-btn:hover{border-color:var(--orange);color:var(--orange)} }
.bulk-row{border:1px solid var(--line);border-left:5px solid var(--orange);border-radius:10px;background:var(--white);padding:10px 14px;margin-bottom:10px}
.bulk-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px}
.bulk-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:0 10px}
.bulk-grid .b-fid{grid-column:span 9}.bulk-grid .b-n{grid-column:span 3}.bulk-grid .b-day,.bulk-grid .b-slot{grid-column:span 12}
.bulk-grid .b-t,.bulk-grid .b-h{grid-column:span 6}
@media (min-width:560px){ .bulk-grid .b-slot{grid-column:span 6}.bulk-grid .b-t{grid-column:span 3}.bulk-grid .b-day{grid-column:span 6}.bulk-grid .b-h{grid-column:span 4} }
.tl-day{font-size:15px;margin:16px 0 6px}
.tl-day::first-letter{text-transform:uppercase}
/* chat als icoon in de kopbalk (planner en beheerder) */
.chat-ico{margin-right:2px}
.chat-ico[aria-current="page"]{color:var(--orange)!important}
.l-short{display:none}
@media (max-width:899px){ nav.tabs .l-long{display:none} nav.tabs .l-short{display:inline} }

/* ---------- draaiboek: rustige weergave ---------- */
.rs{display:flex;flex-direction:column;gap:14px}
.rs-day{background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.rs-date{margin:0;padding:10px 16px;font-size:13px;font-weight:700;letter-spacing:.02em;color:var(--muted);background:#FAFAFA;border-bottom:1px solid var(--line)}
.rs-date span{color:var(--ink);text-transform:capitalize}
.rs-list{list-style:none;margin:0;padding:0}
.rs-item{display:grid;grid-template-columns:118px 1fr;gap:14px;padding:11px 16px;border-bottom:1px solid #F0F0F0}
.rs-item:last-child{border-bottom:0}
.rs-time{font-variant-numeric:tabular-nums;font-weight:700;font-size:14.5px;white-space:nowrap}
.rs-to{display:block;font-weight:500;color:var(--muted);font-size:13px}
.rs-head{font-weight:600}
.rs-sub{margin-top:3px;font-size:14px;color:#5A5A5A;line-height:1.45}
@media (max-width:480px){ .rs-item{grid-template-columns:84px 1fr;gap:10px;padding:10px 12px} }

/* ===================== v34: rustiger en professioneler ===================== */
/* Kaarten: overal dezelfde stijl, geen gekleurde randen links (behalve echte waarschuwingen) */
.card{border-radius:12px;border:1px solid var(--line);box-shadow:none}
.saldo-card,.install-sum,.start-card,.bulk-row,.update-card,.card.mine-shift,.open-shift.signed,.card.device{border-left:1px solid var(--line)}
.start-card{background:#FFFBF6;border-color:#F3DFC6}
.update-card{background:#FFFBF6;border-color:#F3DFC6}
/* Knoppen: oranje = hoofdactie, zwart omlijnd = tweede keus, licht omlijnd = overig */
.btn.quiet{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1px #D6D6D6}
@media (hover:hover){ .btn.quiet:hover{box-shadow:inset 0 0 0 1px var(--ink)} }
.btn.wa{background:var(--white);color:#0F7A3B;box-shadow:inset 0 0 0 1px #A9DDBF}
/* Links: zwart en onderstreept in plaats van oranje */
.link{color:var(--ink);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600}
.link.danger,.btn.danger{color:var(--bad)}
/* Kopbalk: wisselknop Planning | Mijn werk, uitloggen als icoon op de telefoon */
#who{display:flex;align-items:center;gap:6px}
.hdr-mode{display:flex;background:#2A2A2A;border-radius:8px;padding:3px;margin-right:6px}
.hdr-mode button{border:0;background:none;color:#CFCFCF;font:inherit;font-size:13px;font-weight:700;padding:6px 10px;border-radius:6px;cursor:pointer;white-space:nowrap;display:flex;align-items:center;gap:4px}
.hdr-mode button[aria-pressed="true"]{background:var(--white);color:var(--ink)}
.hdr-mode .badge{margin:0}
.logout{display:flex;align-items:center}
.lo-ico{display:none}
@media (max-width:600px){
  .hdr-mode button{font-size:12px;padding:6px 8px}
  .lo-txt{display:none} .lo-ico{display:block}
  #who .who-name{display:none}
}
.mode-bar{display:none}
/* Ruimte onderaan zodat de chatknop niets afdekt */
#view{padding-bottom:96px}
/* Hulp en uitleg */
.help-link{font-size:14px;color:var(--muted)}
.help-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.help-item{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:14px 16px;font:inherit;cursor:pointer}
.help-item span{color:var(--muted);font-size:14px}
a.help-item{color:var(--ink);text-decoration:none}
a.help-item b::after{content:' ›';color:var(--orange)}
@media (hover:hover){ .help-item:hover{border-color:var(--ink)} }
/* Ziek: compacte regel */
.card.sick{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px;border-left:1px solid var(--line);background:#FFF8F7;border-color:#F2D5D2}
.sick-txt{display:flex;flex-direction:column}
.card.sick .row{margin:0}
/* Uren: lijst per maand */
.hr-month{margin-bottom:12px}
.hr-mh{font-size:13px;font-weight:700;color:var(--muted);margin:12px 0 6px}
.hr-mh::first-letter{text-transform:uppercase}
.hr-rows{padding:0;overflow:hidden}
.hr-row{display:grid;grid-template-columns:1.3fr 1.2fr .7fr auto;gap:8px;align-items:center;width:100%;padding:10px 14px;border:0;border-bottom:1px solid #F0F0F0;background:none;text-align:left;font:inherit;color:inherit}
button.hr-row{cursor:pointer}
.hr-row:last-child{border-bottom:0}
.hr-row small{display:block;color:var(--muted);font-size:12px;font-weight:400}
.hr-d{font-weight:600;font-size:14.5px}
.hr-t{font-variant-numeric:tabular-nums;font-size:14.5px}
.hr-h{font-weight:700;font-variant-numeric:tabular-nums;text-align:right}
.hr-note{grid-column:1/-1;font-size:13px;color:var(--muted)}
/* Uitleg inklappen */
.more-info{margin-top:6px}
.more-info summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--muted);list-style:none}
.more-info summary::before{content:'ⓘ ';}
.more-info summary::-webkit-details-marker{display:none}
/* Beschikbaar: rustige uitleg */
.av-note{background:#F3F3F3;color:var(--ink);border:0;border-left:0;font-size:14px}
.cal-foot{margin:6px 0 0}
.cal-foot .link{font-size:14px}
/* Team: rustige kaarten */
.team-card{display:flex;flex-direction:column;gap:6px}
.team-card.inactive{opacity:.6}
.tc-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.app-state{font-size:12px;font-weight:700;border-radius:999px;padding:3px 9px;background:#F1F1F1;color:#8A8A8A;white-space:nowrap}
.app-state.ok{background:var(--ok-bg);color:var(--ok)}
.app-state.half{background:var(--orange-soft);color:#A65300}
.team-card .fn{font-weight:600}
.tc-att{font-size:13px;color:#9A4D00;background:#FFF6EC;border-radius:6px;padding:5px 9px}
.tc-act{display:flex;gap:6px;margin-top:4px}
/* Rooster: legenda inklapbaar, vraagteken rustiger */
.legend-box{margin:4px 0 10px}
.legend-box summary{cursor:pointer;font-size:13.5px;font-weight:600;color:var(--muted)}
.legend-box .legend{margin-top:6px}
.grid td.cell.unknown{outline:0}
.grid .mark.unk{color:#C4C4C4;font-size:12px;font-weight:600}
/* Evenementen: Catermonkey op één regel */
.sync-bar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 14px;padding:8px 0;border-bottom:1px solid var(--line)}
/* Home planner: kleinere Catermonkey-knop */
.quick{margin:4px 0 6px}
.quick-btn{min-height:0;padding:9px 14px 9px 10px;border-bottom:0;flex:0 1 auto;border-radius:10px}
.quick-btn b{font-size:15px}
.quick-ico{width:30px;height:30px;font-size:12px;border-radius:6px}
/* Koppen en ruimte */
h2{margin-top:26px}
.hr-row{grid-template-columns:1fr auto;gap:10px}
.hr-l small,.hr-r small{display:block;font-size:13px;color:var(--muted);font-weight:400;margin-top:1px}
.hr-name{color:var(--muted);font-weight:400;font-size:14px}
.hr-r{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.hr-r .st-ok{color:var(--ok)} .hr-r .st-warn{color:#A65300} .hr-r .st-bad{color:var(--bad)}

/* ===================== v2.0 ===================== */
/* pauzes */
.pz-box{border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin:12px 0}
.pz-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:end}
.pz-row .f{margin-top:6px}
.pz-del{color:var(--bad);padding-bottom:12px}
.brk-list{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.brk-chip{border:1px solid var(--line);background:var(--white);color:var(--ink);border-radius:14px;padding:4px 10px;font:inherit;font-size:13px;cursor:pointer}
.brk-chip span{color:var(--muted)}
.clock .brk-chip{background:rgba(255,255,255,.12);color:inherit;border-color:rgba(255,255,255,.3)}
.clock .brk-chip span{color:inherit;opacity:.75}
/* concept en bevestigd */
.grid .blk.concept{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 2px var(--orange);background-image:repeating-linear-gradient(135deg,transparent 0 6px,rgba(238,121,0,.08) 6px 12px)}
.grid tr.open .blk.concept{box-shadow:inset 0 0 0 2px var(--orange);outline:1px dashed var(--orange);outline-offset:-4px}
.ok-mark{font-weight:900}
.chip.concept-chip{background:var(--white);color:#A65300;box-shadow:inset 0 0 0 1.5px var(--orange)}
.ok-line{color:var(--ok);font-weight:700}
.shift-actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.notice.spread{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
/* team in groepen */
.team-group{margin-top:18px}
.team-group h2 .cnt{font-size:14px;color:var(--muted);font-weight:500;margin-left:4px}
.co-list{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0 12px}
.co-chip{border:1px solid var(--line);background:var(--white);border-radius:8px;padding:8px 12px;font:inherit;cursor:pointer;text-align:left}
.co-chip span{color:var(--muted);font-size:13px}
.dot-warn{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange)}
.inactive-box{margin-top:10px}
.inactive-box summary{cursor:pointer;color:var(--muted);font-weight:700;padding:6px 0}
.tc-info{margin-top:4px}
/* sjablonen, export, beschikbaarheid, inwerken, verjaardagen */
.tpl-bar{display:flex;flex-wrap:wrap;gap:10px;align-items:end;justify-content:space-between;background:#FAFAFA;border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin:12px 0}
.tpl-bar .f{margin:0;flex:1;min-width:200px}
.col-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:4px 12px;margin:8px 0}
.card.av-done{margin:10px 0;border-left:5px solid var(--orange)}
.card.av-done.ok{border-left-color:var(--ok)}
.card.onb .blk-opt{margin:2px 0}
.card.bday .spread{padding:4px 0}
/* printen: alleen het overzicht, de app zelf verbergen */
#print-area{display:none}
@media print{
  body.printing > *:not(#print-area){display:none !important}
  body.printing #print-area{display:block;color:#000;font:11pt/1.4 Roboto,'Helvetica Neue',Arial,sans-serif}
  #print-area .pr-head{display:flex;gap:16px;align-items:center;border-bottom:2px solid #000;padding-bottom:8px;margin-bottom:12px}
  #print-area .pr-head img{height:40px}
  #print-area h1{font-size:18pt;margin:0} #print-area h2{font-size:13pt;margin:16px 0 6px;break-after:avoid} #print-area h3{font-size:11pt;margin:10px 0 4px;break-after:avoid}
  #print-area .pr-head p{margin:2px 0 0;color:#555;font-size:9pt}
  .pr-facts{display:grid;grid-template-columns:120px 1fr;gap:2px 10px;margin:0} .pr-facts dt{font-weight:700} .pr-facts dd{margin:0}
  .pr-notes{white-space:pre-line}
  .pr-table{width:100%;border-collapse:collapse;margin-bottom:6px} .pr-table th,.pr-table td{border-bottom:1px solid #ccc;padding:4px 6px;text-align:left;vertical-align:top}
  .pr-table th{font-size:9pt;text-transform:uppercase;color:#555} .pr-table tr{break-inside:avoid} .pr-time{white-space:nowrap;width:90px}
}
@media (max-width:520px){ .pz-row{grid-template-columns:1fr 1fr} .pz-row .pz-del{grid-column:1 / -1;justify-self:start;padding:0} }
.pz-min[hidden],#t-km-box[hidden],#t-amt-box[hidden]{display:none !important}

/* v2.1: pauze en terugkerende diensten */
.brk-note{display:block;font-size:12.5px;font-weight:400;color:var(--muted)}
.rep-box{background:#FAFAFA;border:1px solid var(--line);border-radius:8px;padding:4px 12px 8px;margin-top:8px}
.rep-days{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}
.rep-days button{width:42px;height:36px;border:1px solid #D4D4D4;border-radius:8px;background:var(--white);font-size:14px;font-weight:500;color:var(--ink);cursor:pointer}
.rep-days button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--white)}
.rep-scope{background:#FAFAFA;border:1px solid var(--line);border-radius:8px;padding:10px 12px;margin-top:12px}
.rep-scope .blk-opt{margin-top:6px}
.rep-mark{font-weight:400;opacity:.85}
.bulk-grid .b-h select{min-width:0}
.month-card{margin-top:12px}
.month-table{margin-top:8px;font-size:14px}
@media (max-width:520px){ .month-table{font-size:13px} .month-table .mt-head{font-size:11px} }
.month-table .mt-head,.month-table .mt-row{display:grid;grid-template-columns:1.4fr 1fr 1.2fr;gap:6px;padding:6px 0;border-bottom:1px solid var(--line)}
.month-table.with-contract .mt-head,.month-table.with-contract .mt-row{grid-template-columns:minmax(0,1.25fr) minmax(0,.9fr) minmax(0,.8fr) minmax(0,1fr) minmax(0,1fr)}
.month-table .mt-head{font-size:12px;color:var(--muted);font-weight:600}
.month-table .mt-row span:not(:first-child),.month-table .mt-head span:not(:first-child){text-align:right;font-variant-numeric:tabular-nums}
.month-table .mt-row span:first-child::first-letter{text-transform:uppercase}
.month-table .pos{color:var(--ok)} .month-table .neg{color:var(--bad)}
.ev-cost{margin:14px 0 6px} .ev-cost summary{cursor:pointer;list-style:none} .ev-cost summary::-webkit-details-marker{display:none}
.agree-card{margin:8px 0 4px}
@media print{
  #print-area .agree{font-size:10.5pt} #print-area .agree h2{font-size:12pt;margin:14px 0 4px} #print-area .agree h3{font-size:10.5pt;margin:10px 0 2px}
  #print-area .agree ol{margin:2px 0 6px;padding-left:20px} #print-area .agree li{margin:2px 0}
  #print-area .agree-sign{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-top:24px;break-inside:avoid}
  #print-area .privacy h2{font-size:12pt}
}
.grid .blk.offer{background:var(--white);color:var(--ink);box-shadow:inset 0 0 0 1.5px #7A7A7A;border:0}
.grid .blk.offer b{color:var(--ink)}
.zzp-check{margin:8px 0}
.check-list{list-style:none;margin:8px 0 4px;padding:0}
.check-list li{display:flex;gap:10px;padding:5px 0;border-bottom:1px solid var(--line);font-size:14px}
.check-list li span{width:20px;flex:none;font-weight:700;text-align:center}
.check-list li.ok span{color:var(--ok)} .check-list li.no span{color:#A65300}
/* beknopte info in het rooster (v2.1) */
.week-sum{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
@media (max-width:700px){ .week-sum{flex-wrap:nowrap;overflow-x:auto;margin-right:-16px;padding-right:16px;scrollbar-width:none} .week-sum::-webkit-scrollbar{display:none} .ws-item{flex:none;white-space:nowrap} }
.ws-item{display:flex;align-items:baseline;gap:5px;background:var(--white);border:1px solid var(--line);border-radius:8px;padding:5px 10px;font-size:13px;color:var(--muted);text-align:left}
button.ws-item{cursor:pointer;font:inherit;font-size:13.5px}
@media (hover:hover){ button.ws-item:hover{border-color:#9A9A9A} }
.ws-item b{font-size:15px;color:var(--ink);font-variant-numeric:tabular-nums}
.ws-item.warn b{color:#A65300} .ws-item.bad b{color:var(--bad)} .ws-item.ok b{color:var(--ok)}
.grid thead th .dh{display:flex;flex-direction:column;gap:3px;margin-top:5px;align-items:stretch}
.grid thead th .dh-ev{display:block;width:100%;background:rgba(255,255,255,.14);color:#fff;border:0;border-radius:4px;padding:3px 6px;font:500 11.5px/1.25 inherit;text-align:left;cursor:pointer;overflow:hidden}
.grid thead th .dh-ev .dh-t{display:block;font-size:11px;opacity:.8;white-space:nowrap}
.grid thead th .dh-ev .dh-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.grid thead th .dh-ev.dh-opt,.grid thead th .dh-ev.dh-est{background:none;box-shadow:inset 0 0 0 1px rgba(255,255,255,.45)}
@media (hover:hover){ .grid thead th .dh-ev:hover{background:rgba(255,255,255,.26)} }
.grid thead th .dh-more{font-size:11px;opacity:.75}
.grid thead th .dh-fill{font-size:11px;font-weight:600;opacity:.9}
.grid thead th .dh-fill.gap{color:#FFC48A} .grid thead th.today .dh-fill.gap{color:#fff}
.grid thead th.today .dh-ev{background:rgba(0,0,0,.18)}
.grid td.gcount.add{cursor:pointer;position:relative}
.grid td.gcount .add-plus{display:none;position:absolute;right:6px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;background:var(--white);border:1px solid #CFCFCF;color:var(--ink);font-weight:700;line-height:18px;text-align:center;font-size:14px}
@media (hover:hover){ .grid td.gcount.add:hover{background:#E9E9E9} .grid td.gcount.add:hover .add-plus{display:block} .grid tr.open td.cell[data-act="new-open"]:hover{background:#FBE0C4;cursor:pointer} }
@media (hover:none){ .grid td.gcount .add-plus{display:inline-block;position:static;transform:none;margin-left:4px;width:18px;height:18px;line-height:16px;font-size:12px} }
.stop-opts{margin:10px 0}
.stop-opts .blk-opt span .meta{font-weight:400}
#stop-own[hidden]{display:none !important}
.tc-personal{display:grid;grid-template-columns:auto 1fr;gap:1px 10px;margin:6px 0 2px;font-size:13.5px}
.tc-personal dt{color:var(--muted)}
.tc-personal dd{margin:0}
.card.bday{padding:6px 14px 8px;margin-bottom:6px}
.bday-row{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14.5px}
.bday-row:last-child{border-bottom:0}
.bday-row.today{background:var(--orange-soft);margin:0 -14px;padding:8px 14px}
.bday-now{color:#A65300;font-weight:700}
.card.bday .meta{margin:6px 0 0}
.cert-chips{display:flex;gap:6px;margin:6px 0 2px}
.chip.cert-no{background:#F1F1F1;color:var(--muted)}
.cert-row{margin:6px 0}

/* v2.3: Evenementen als rustige lijst */
.ev-tools{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:6px 0 4px}
.ev-tools .seg button span{font-weight:500;opacity:.7;margin-left:4px}
.ev-tools .seg button:disabled{opacity:.45;cursor:default}
h2.ev-month{display:flex;align-items:baseline;gap:8px;font-size:17px;margin:26px 0 8px}
h2.ev-month span{font:500 13px Roboto,sans-serif;color:var(--muted)}
.ev-list{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ev-row{display:grid;grid-template-columns:52px minmax(0,1fr) auto;gap:14px;align-items:center;width:100%;text-align:left;background:none;border:0;border-top:1px solid var(--line);padding:12px 16px;font:inherit;color:inherit;cursor:pointer}
.ev-row:first-child{border-top:0}
@media (hover:hover){ .ev-row:hover{background:#FAFAFA} }
.ev-row:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.ev-date{display:flex;flex-direction:column;align-items:center;line-height:1.1;color:var(--muted);font-size:12px;text-transform:lowercase}
.ev-date b{font-size:20px;color:var(--ink);font-weight:700;margin:1px 0}
.ev-main{display:flex;flex-direction:column;min-width:0}
.ev-name{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-sub{color:var(--muted);font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-kind{font-size:12px;font-weight:700;color:var(--muted);border:1px solid #CFCFCF;border-radius:4px;padding:0 6px;margin-left:6px;vertical-align:2px}
.ev-staff{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-align:right;white-space:nowrap}
.ev-st{font-size:14px;font-weight:700}
.ev-st.ok{color:var(--muted);font-weight:500}
.ev-st.ok::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ok);margin-right:6px}
.ev-st.need{color:#A65300}
.ev-st.need::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--orange);margin-right:6px}
.ev-st.sub,.ev-st.muted{font-size:13px;font-weight:500;color:var(--muted)}
.ev-row.cancelled .ev-name{text-decoration:line-through;color:var(--muted)}
@media (max-width:560px){ .ev-row{grid-template-columns:40px minmax(0,1fr);gap:4px 12px;padding:12px} .ev-name{white-space:normal} .ev-staff{grid-column:2;flex-direction:row;gap:10px;align-items:baseline} }
.ev-day{font-size:13px;font-weight:500;color:var(--muted);margin-left:4px}
/* v2.3: Team als lijst */
.team-tools{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin:4px 0 6px;padding:8px 0;border-bottom:1px solid var(--line)}
.team-tools .meta{flex:1 1 380px}
.linkbtn{background:none;border:0;padding:0;font:inherit;color:var(--ink);text-decoration:underline;cursor:pointer}
.tm-row{grid-template-columns:40px minmax(0,1fr) auto}
.tm-init{width:36px;height:36px;border-radius:50%;background:#EFEFEF;color:var(--muted);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px}
.sheet .team-card{border:0;padding:0;box-shadow:none}
@media (max-width:560px){ .tm-row{grid-template-columns:36px minmax(0,1fr)} }
/* v2.3: Te doen als lijst, Eerste stappen inklapbaar */
.todo-row{display:flex;justify-content:space-between;align-items:center;gap:12px;width:100%;background:none;border:0;border-top:1px solid var(--line);padding:13px 16px;font:inherit;color:inherit;text-align:left;cursor:pointer;text-decoration:none}
.todo-row:first-child{border-top:0}
@media (hover:hover){ .todo-row:hover{background:#FAFAFA} }
.todo-t{display:flex;align-items:baseline;gap:10px;font-weight:600}
.todo-dot{flex:none;width:8px;height:8px;border-radius:50%;background:#C8C8C8;transform:translateY(-1px)}
.todo-dot.need{background:var(--orange)}
.todo-go{color:var(--muted);font-size:14px;white-space:nowrap}
details.start-card > summary{list-style:none;cursor:pointer}
details.start-card > summary::-webkit-details-marker{display:none}
details.start-card:not([open]) .start-bar{display:none}
.muted-link{color:var(--muted)!important;font-weight:500}
/* v2.3: evenement altijd zichtbaar in een dienst in het rooster */
.grid .blk .blk-ev{display:block;font-weight:600}
.grid .blk .blk-sub{display:block;opacity:.85}
/* v2.3: dienstkaart rustig, zelfde datumblok als Evenementen */
.shift-card{background:var(--white);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.shift-card .day{background:none;color:var(--muted);width:64px;border-radius:0;border-right:1px solid var(--line);padding:10px 4px;text-transform:lowercase}
.shift-card .day b{font:700 24px/1.1 Roboto,sans-serif;color:var(--ink)}
.shift-card .day span{font-size:12px;color:var(--muted)}
.shift-card .body{border:0;border-radius:0;padding:12px 16px}
.shift-card .time{font:700 18px/1.2 Roboto,sans-serif}
@media (hover:hover){ .shift-card:hover{border-color:#BDBDBD} }
/* v2.3: uren beoordelen als regels */
.rv-row{display:flex;justify-content:space-between;gap:16px;align-items:flex-start;border-top:1px solid var(--line);padding:12px 16px}
.rv-row:first-child{border-top:0}
.rv-side{display:flex;flex-direction:column;align-items:flex-end;gap:6px;white-space:nowrap}
.rv-side .row{align-items:center;gap:12px}
.rv-warn{color:#A65300;font-size:14px;font-weight:600}
.danger-link{color:var(--bad)}
h2 .cnt{font:500 13px Roboto,sans-serif;color:var(--muted)}
@media (max-width:560px){ .rv-row{flex-direction:column} .rv-side{align-items:flex-start} }
/* v2.3: diensten bij een evenement in één lijstvlak */
.sd-row{display:flex;justify-content:space-between;gap:12px;width:100%;background:none;border:0;border-top:1px solid var(--line);padding:11px 16px;font:inherit;color:inherit;text-align:left}
button.sd-row{cursor:pointer}
.ev-list > .sd-row:first-child{border-top:0}
@media (hover:hover){ button.sd-row:hover{background:#FAFAFA} }
.sd-row.mine{background:#FFF8F0}
/* v2.3: kosten per dag in één lijstvlak */
.cost-list .cost-day{border-top:1px solid var(--line);padding:12px 16px}
.cost-list .cost-day:first-child{border-top:0}
.cost-list .cost-day.empty-day{padding:7px 16px;font-size:14px;color:var(--muted);opacity:1}
/* v3.0: herhalen elke dag of losse datums */
label.check{display:flex;align-items:center;gap:8px;margin:8px 0;font-size:15px}
label.check input{width:20px;height:20px;accent-color:var(--orange)}
.rep-cal{border:1px solid var(--line);border-radius:10px;padding:10px;margin:8px 0;background:var(--white);max-width:340px}
.rc-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px}
.rc-h{font-size:12px;color:var(--muted);text-align:center}
.rc-d{height:36px;border:1px solid #E0E0E0;border-radius:6px;background:var(--white);font:inherit;font-size:14px;cursor:pointer}
.rc-d.on{background:var(--ink);color:var(--white);border-color:var(--ink)}
.rc-d:disabled{opacity:.35;cursor:default}
.rc-d.on:disabled{opacity:1}
.conf-pick{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted);margin-right:6px}
.conf-pick input{width:20px;height:20px;accent-color:var(--orange)}
/* v3.0: rooster lichter: diensten wit met een gekleurde streep links (oranje = dienst, donkeroranje = aandachtspunt, rood = conflict) */
.grid .blk{background:var(--white)!important;color:var(--ink)!important;box-shadow:inset 4px 0 0 var(--orange),inset 0 0 0 1px #E0E0E0!important;padding-left:10px!important}
.grid .blk.warn{box-shadow:inset 4px 0 0 #A65300,inset 0 0 0 1px #E0E0E0!important}
.grid .blk.warn b::after{color:#A65300}
.grid .blk.clash{box-shadow:inset 4px 0 0 var(--bad),inset 0 0 0 1px #E0E0E0!important}
.grid .blk.concept{background-image:none!important;box-shadow:inset 4px 0 0 var(--orange),inset 0 0 0 1px var(--orange)!important;border-style:dashed}
.grid tr.open .blk{box-shadow:inset 0 0 0 1.5px var(--orange)!important}
.grid .blk .blk-sub{color:var(--muted)} .grid .blk .blk-ev{color:var(--ink)}
.grid .blk .ok-mark{color:var(--ok)}
.grid tr.open td{background:#FFFAF4!important}
/* v3.0: verborgen blijft verborgen; collega's bij een dienst sluiten aan op de rustige dienstkaart */
.rep-box [hidden]{display:none !important}
.team-lines{margin:-1px 0 0 0;border-radius:0 0 10px 10px;padding-left:80px}
.sheet .team-card .tc-top{padding-right:44px}
/* v3.0: rooster-kop rustiger. Zwart alleen voor de datums; evenementen en bezetting in een lichte regel eronder
   (zelfde kleur als de open diensten); vandaag met een oranje streep in plaats van een oranje vlak. */
.grid thead th{padding:6px 6px 7px}
.grid thead th b{font-size:15px}
.grid thead th.weekend{background:var(--black);color:#CFCFCF}
.grid thead th.today{background:var(--black);box-shadow:inset 0 -4px 0 var(--orange)}
.grid thead th.today b{color:var(--orange)}
.grid tr.evrow td{background:#FFFAF4;vertical-align:top;padding:6px}
.grid tr.evrow td.name{padding:8px 10px}
.grid tr.evrow .dh{display:flex;flex-direction:column;gap:4px;align-items:stretch}
.grid tr.evrow .dh-ev{display:block;width:100%;background:var(--white);color:var(--ink);border:0;box-shadow:inset 0 0 0 1px #F0C99E;border-radius:4px;padding:4px 7px;font:600 12px/1.25 inherit;text-align:left;cursor:pointer;overflow:hidden}
.grid tr.evrow .dh-ev .dh-n{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;word-break:break-word}
.grid tr.evrow .dh-ev .dh-t{display:block;font-weight:500;font-size:11px;color:var(--muted);white-space:nowrap;margin-top:1px}
.grid tr.evrow .dh-tag{font-style:normal;border:1px solid #CFCFCF;border-radius:3px;padding:0 4px;margin-left:2px}
@media (hover:hover){ .grid tr.evrow .dh-ev:hover{box-shadow:inset 0 0 0 1.5px var(--orange)} }
.grid tr.evrow .dh-more{font-size:11px;color:var(--muted)}
.grid tr.evrow .dh-fill{font-size:11px;font-weight:600;color:var(--muted)}
.grid tr.evrow .dh-fill.gap{color:#A65300}
.grid tr.evrow .dh-empty{display:none}
.grid tr.evrow .dh-ev{font-family:inherit;font-size:12px;font-weight:600;line-height:1.25}
.grid tr.evrow .dh-ev .dh-n{word-break:normal;overflow-wrap:break-word;hyphens:auto}
.grid tr.evrow .dh-ev .dh-t{white-space:normal}
.grid tr.evrow .dh-tag{white-space:nowrap;display:inline-block;margin:1px 0 0}

/* ---------- v3.1: Catermonkey als kleine link onderin het menu ---------- */
.nav-ext{display:none}
@media (min-width:900px){
  nav.tabs{display:flex;flex-direction:column;overflow-y:auto;padding-bottom:12px}
  nav.tabs .tabs-in{flex:1 0 auto}
  nav.tabs .nav-ext{display:flex;align-items:center;gap:8px;margin-top:auto;padding:16px 24px 8px;color:#8A8A8A;font-size:13px;white-space:nowrap;text-decoration:none;border-top:1px solid #1E1E1E}
  nav.tabs .nav-ext:hover{color:var(--white)}
  nav.tabs .nav-ext .ext-ico{width:20px;height:20px;border-radius:4px;background:#2A2A2A;color:#BDBDBD;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:9px;flex:none}
}
a.card.more-ext{text-decoration:none;color:inherit}

/* ---------- v3.3: aanmeldingen per medewerker ---------- */
.sign-sum{margin:-4px 0 10px}
.sign-group{padding:0}
.sign-group summary{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer;list-style:none}
.sign-group summary::-webkit-details-marker{display:none}
.sign-group summary::after{content:'›';color:var(--muted);font-size:20px;transition:transform .15s;margin-left:2px}
.sign-group[open] summary::after{transform:rotate(90deg)}
.sg-t{flex:1;min-width:0}
.sg-t b{display:block}
.sg-t .meta{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sg-n{min-width:26px;height:26px;border-radius:13px;background:var(--orange);color:var(--white);font-weight:700;font-size:13px;display:flex;align-items:center;justify-content:center;padding:0 7px}
.sg-warn{width:22px;height:22px;border-radius:50%;background:var(--bad);color:var(--white);font-weight:900;font-size:13px;display:flex;align-items:center;justify-content:center}
.sg-rows{border-top:1px solid var(--line)}
.sg-row{padding:12px 16px;border-top:1px solid var(--line)}
.sg-row:first-child{border-top:0}
.sg-shift{font-weight:500}
.sg-row .row{margin-top:8px}
@media (hover:hover){ .sign-group summary:hover{background:#FAFAFA} }

/* v3.3: Wat is nieuw per belangrijkheid */
.news-level{font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin:16px 0 4px}
.news-level:first-of-type{margin-top:8px}

/* v4.0: compact startscherm op de telefoon (kompas.js) */
.kp-tiles{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:8px;margin:14px 0 10px}
.kp-tile{background:var(--white);border:1px solid var(--line);border-radius:10px;padding:10px 4px 8px;text-align:center;cursor:pointer;font:inherit;color:inherit;min-width:0}
.kp-tile b{display:block;font:700 24px/1.1 Roboto,sans-serif}
.kp-tile span{display:block;font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-tile.need{border:1.5px solid var(--orange)}
.kp-tile.need b{color:#A65300}
.kp-notes{margin:10px 0 6px}
h2.kp-h{font-size:15px;color:var(--muted);font-weight:600;margin:18px 0 6px}
.kp-ev{display:flex;align-items:center;gap:10px;width:100%;background:none;border:0;border-top:1px solid var(--line);padding:9px 14px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.kp-ev:first-child{border-top:0}
.kp-dag{flex:none;width:46px;font-weight:700;text-transform:lowercase}
.kp-name{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kp-ev .ev-st{flex:none}
.kp-next{display:flex;gap:14px;align-items:center;width:100%;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:10px 14px;margin-top:12px;font:inherit;color:inherit;text-align:left;cursor:pointer}
.kp-db{flex:none;display:flex;flex-direction:column;align-items:center;line-height:1.1;font-size:12px;color:var(--muted);text-transform:lowercase;min-width:38px}
.kp-db b{font:700 24px/1.1 Roboto,sans-serif;color:var(--ink)}
.kp-offer{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid var(--line);padding:11px 14px}
.kp-offer:first-child{border-top:0}
.kp-offer .ev-name{white-space:normal}
.kp-offer .kp-dag{width:auto;margin-right:4px}
.kp-offer .row{flex-wrap:nowrap;gap:6px;flex:none}
.kp-empty{color:var(--muted);background:var(--white);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px}
.kp-link{margin:6px 2px 0;font-size:14px}
.kp-foot{text-align:center;margin:18px 0 4px}
.kp-switch{text-align:right;margin:0 0 4px;font-size:14px}
.kp-note{margin-top:12px}
@media (hover:hover){ .kp-ev:hover,.kp-next:hover{background:#FAFAFA} }
.av-seg button[aria-pressed="true"]:not([class*="v-"]){background:#555;color:#fff}

/* v4.3: rooster met inklapbare groepen en zoeken */
.grid tr.group.fold{cursor:pointer}
.grid tr.group.fold td.name b{display:flex;align-items:center;gap:6px}
.grid tr.group td.avc span{display:block;line-height:1.35;white-space:nowrap}
.grid tr.group.fold .fold-ic{display:inline-block;width:12px;color:var(--muted);font-size:12px}
.grid tr.group.fold.sub td,.grid tr.group.fold.sub td.name,.grid tr.group.fold.sub td.tot{background:#FAFAFA;padding:5px 8px}
.grid tr.group.fold.sub td.name{border-left:4px solid #CFCFCF;padding-left:18px}
.grid tr.group.fold.sub td.name b{font-size:13px}
.grid tr.group td.avc{font-size:11.5px;font-weight:700;color:var(--muted);text-align:left;vertical-align:top}
.grid tr.group td.avc .c-ja{color:var(--ok)} .grid tr.group td.avc .c-m{color:#A65300} .grid tr.group td.avc .c-u{color:#8A8A8A;font-weight:500}
@media (hover:hover){ .grid tr.group.fold:hover td{filter:brightness(.97)} }
.grid tr.group.empty td.name span{white-space:normal}
.grid-q{background-image:none;padding-right:12px;cursor:text;width:150px}
.grid tr.prow[hidden]{display:none}

/* v4.3: activiteit per medewerker */
.act-filter{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 4px}
.chip-btn{border:1px solid #DADADA;background:var(--white);border-radius:999px;padding:5px 12px;font:inherit;font-size:13px;font-weight:600;color:var(--ink);cursor:pointer}
.chip-btn[aria-pressed="true"]{background:var(--black);border-color:var(--black);color:#fff}
.act-list{margin-top:6px}
.act-day{font-size:12px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin:14px 0 4px}
.act-row{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.act-ic{flex:none;width:26px;height:26px;border-radius:50%;background:#F1F1F1;display:inline-flex;align-items:center;justify-content:center;font-size:13px}
.act-row.k-aanmelding .act-ic{background:#FDEBD9} .act-row.k-beschikbaarheid .act-ic{background:#E3F2E8} .act-row.k-verlof .act-ic{background:#E8F0FB}

/* v5.0: rooster compacter: grijze functieregels op één regel */
.grid tr.group:not(.fold) td,.grid tr.group:not(.fold) td.name,.grid tr.group:not(.fold) td.tot{padding:4px 8px;height:auto}
.grid tr.group:not(.fold) td.name b{display:inline;font-size:13px}
.grid tr.group:not(.fold) td.name span{display:inline;margin-left:6px;font-size:11.5px}
.grid tr.group:not(.fold) td.gcount{font-size:11.5px;line-height:1.2}
.grid tr.group.fold td.name span{font-size:11.5px}
.grid tr.group.fold td,.grid tr.group.fold td.name,.grid tr.group.fold td.tot{padding-top:4px;padding-bottom:4px}
/* v5.0: voorstel, verdeling, omzet, foutmeldingen */
.sug-box{margin-top:10px;padding:10px 12px;border:1px solid #CFE6D6;background:#F3FAF5;border-radius:8px}
.sug-row{padding:6px 0;border-top:1px solid #DDEFE3;gap:8px}
.sug-row:first-of-type{border-top:0}
.sug-list{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.sug-item{display:flex;flex-direction:column;gap:6px}
.sug-item.off{opacity:.6}
.sug-chk{display:flex;gap:10px;align-items:flex-start;cursor:pointer}
.sug-chk input{width:20px;height:20px;accent-color:var(--orange);flex:none;margin-top:2px}
.sug-item select{width:100%}
.fair-nav{align-items:center;gap:10px;margin:6px 0 4px}
.fair-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:6px}
table.fair{border-collapse:collapse;width:100%;font-size:13px;min-width:620px}
table.fair th{text-align:left;font-size:11.5px;color:var(--muted);font-weight:700;padding:6px;border-bottom:1px solid var(--line)}
table.fair td{padding:6px;border-bottom:1px solid var(--line);white-space:nowrap}
table.fair tr.low td{background:#FFF7EE}
table.fair .chip{margin-left:6px;font-size:11px}
.pct{display:inline-block;font-size:11.5px;font-weight:700;border-radius:4px;padding:1px 6px;margin-left:4px;vertical-align:1px}
.pct.ok{background:#E3F2E8;color:var(--ok)} .pct.mid{background:#FDEBD9;color:#A65300} .pct.hi{background:#FBE3E1;color:#B3261E}
.rev-row{display:block;width:100%;text-align:left;cursor:pointer;font:inherit;color:inherit}
.err-detail{white-space:pre-wrap;word-break:break-word;font-size:11.5px;background:#F6F6F6;border-radius:6px;padding:8px;max-height:200px;overflow:auto;margin:8px 0}
.err-item summary{cursor:pointer;list-style:none}

.grid tr.group td.avc{white-space:nowrap;vertical-align:middle;text-align:center}
.grid tr.group td.avc span{display:inline;line-height:1.2}
.grid tr.group td.avc i{font-style:normal;color:#BDBDBD;margin:0 3px}
.grid tr.group.fold td.name span{display:inline;margin-left:6px}
.grid tr.group.fold td.name b{display:inline-flex}
.grid tr.group.fold td.name{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.grid tr.group.fold td.name b{font-size:13px}
button.rev-row{border:0;border-bottom:1px solid var(--line);border-radius:0;background:var(--white)}
button.rev-row:last-child{border-bottom:0}
/* v5.1: melding Catermonkey met knoppen, personeelsregels, vrienden en hulp */
.notice.cm-notice{display:flex;flex-direction:column;gap:8px}
.notice.cm-notice code{background:rgba(127,127,127,.15);padding:0 4px;border-radius:3px;font-size:13px}
p.cm-ok{margin:6px 0 10px}
details.cm-lines{margin-top:8px} details.cm-lines summary{cursor:pointer}
details.hulp-box{margin-top:18px} details.hulp-box>summary{cursor:pointer;list-style:none} details.hulp-box>summary::-webkit-details-marker{display:none}
details.hulp-box>summary h2::before{content:'▸ ';color:var(--muted)} details.hulp-box[open]>summary h2::before{content:'▾ '}
details.hulp-box,details.hulp-box *{box-sizing:border-box}

/* v5.2: databaseversie, gebruik van de app */
.warn-card{border-left:4px solid var(--orange)}
.use-bars{display:flex;flex-direction:column;gap:8px;margin:6px 0 14px}
.use-row{display:grid;grid-template-columns:minmax(110px,170px) minmax(0,1fr) 52px;gap:10px;align-items:center;font-size:14px}
.use-row span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.use-bar{height:10px;border-radius:5px;background:#EEE}
.use-bar i{display:block;height:10px;border-radius:5px;background:var(--orange)}
.use-row .meta{text-align:right}
button.rv-row{background:none;border-left:0;border-right:0;border-bottom:0;font:inherit;color:inherit;cursor:pointer;width:100%}
button.rv-row:hover{background:#FAFAFA}

/* ---------- v6.0: Nu te doen en Mijn planning (medewerker) ---------- */
.nu{max-width:640px}
.nu .card{border-radius:14px}
.nu-k{display:block;font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.nu-next{display:flex;flex-direction:column;gap:3px;padding:16px}
.nu-next .nu-big{font-size:20px;line-height:1.25;margin-top:6px}
.nu-next .row{margin-top:10px}
.nu-next .ok-line{margin-top:6px}
.nu-h{margin-top:18px}.nu-h h2{margin:0}
.nu-list{border-radius:14px}
.nu-row{display:flex;align-items:center;gap:12px;padding:13px 16px;border-top:1px solid var(--line)}
.nu-row:first-child{border-top:0}
.nu-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.nu-t b{font-weight:500}
.nu-t span{font-size:14px;color:var(--muted)}
.nu-late{color:var(--bad)!important}
.nu-btn{min-height:44px;white-space:nowrap;flex:none}
.nu-row .row{flex-wrap:nowrap;gap:6px}
.nu-empty{display:flex;flex-direction:column;gap:2px;padding:14px 16px}
.nu-info{display:flex;gap:12px;align-items:center;padding:14px 16px;margin-top:12px}
.nu-ok{color:var(--ok);font-weight:900;font-size:20px;flex:none}
.nu-ann{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;padding:14px 16px;margin-top:12px;font:inherit;color:inherit;cursor:pointer}
.nu-ann b{font-weight:500}
.nu-ann-b{font-size:14px;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.nu-ann .todo-go{margin-top:4px}
.nu-links{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px}
.pl-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-bottom:14px;max-width:520px}
.pl-seg button{min-height:44px}
.pl-wk{margin:0 0 10px;max-width:640px}
.pl-wk b{font-weight:500}
.pl-conf{margin-bottom:10px}
.pl-list{max-width:640px;border-radius:14px}
.pl-row{display:flex;align-items:center;gap:12px;padding:10px 14px;border-top:1px solid var(--line)}
.pl-row:first-child{border-top:0}
.pl-row.open{background:var(--warn-bg)}
.pl-row.ask .pl-main b{font-weight:500}
.pl-row.past{opacity:.55}
.pl-row.pl-task .pl-db{visibility:hidden}
.pl-db{width:40px;flex:none;display:flex;flex-direction:column;align-items:center;line-height:1.1}
.pl-db small{font-size:12px;color:var(--muted);text-transform:uppercase}
.pl-db b{font-size:19px}
.pl-db.today b{color:var(--orange)}
.pl-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;background:none;border:0;padding:4px 0;text-align:left;font:inherit;color:inherit}
button.pl-main{cursor:pointer}
.pl-main b{font-weight:500}
.pl-main span{font-size:14px;color:var(--muted)}
.pl-row.open .pl-main span{color:#5C3A10}
.pl-ok{color:var(--ok);font-weight:900;font-size:18px;flex:none;padding:0 6px}
.pl-st{font-size:12px;color:var(--muted);border:1px dashed var(--orange);border-radius:6px;padding:2px 6px}
.pl-row .row{flex-wrap:nowrap;gap:6px}
.pl-dh{font-size:15px;margin:16px 0 8px}
.pl-foot{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:16px}
@media (max-width:420px){ .nu-row{padding:12px 14px;gap:10px} .nu-btn{padding-left:12px;padding-right:12px} .pl-row{padding:10px 12px;gap:10px} .pl-db{width:34px} }
@media (max-width:340px){ .nu-row,.pl-row{flex-wrap:wrap} .nu-row .nu-t{flex-basis:100%} .nu-row>.nu-btn,.nu-row>.row{margin-left:auto} }

/* ---------- v6.1: Home van de planner, Van order naar rooster ---------- */
.p-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:18px;align-items:start}
.p-box{padding:0;border-radius:14px;overflow:hidden}
.p-head{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.p-head h2{margin:0;font-size:18px}
.p-row{display:flex;align-items:center;gap:12px;padding:12px 18px;border-top:1px solid var(--line)}
.p-head+.p-row{border-top:0}
.p-dot{width:10px;height:10px;border-radius:50%;flex:none;background:#BDBDBD}
.p-dot.bad{background:#C62828}.p-dot.warn{background:var(--orange)}.p-dot.info{background:#9E9E9E}
.p-row .p-dot:empty:not(.bad):not(.warn):not(.info){display:none}
.p-warn{color:#A65300!important}.p-bad{color:#C62828}.p-ok{color:var(--ok)}
.p-empty{padding:16px 18px;color:var(--muted)}
.p-wk{margin-top:18px}
.p-week{display:grid;grid-template-columns:repeat(7,minmax(104px,1fr));gap:8px;padding:14px 18px;overflow-x:auto}
.p-day{display:flex;flex-direction:column;gap:2px;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:10px;padding:10px;font:inherit;color:inherit;cursor:pointer;min-height:44px}
.p-day b{font-weight:700}.p-day span{font-size:13px}.p-sg{color:#A65300}
.p-more{margin-top:18px}
.op-steps{list-style:none;margin:0 0 16px;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.op-step{display:flex;gap:10px;align-items:center;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:12px 14px;color:#444}
.op-step span{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;background:var(--line);color:#444;flex:none}
.op-step.done span{background:var(--ok);color:#fff}
.op-step.now{border:2px solid var(--orange);padding:11px 13px;font-weight:700;color:var(--ink)}.op-step.now span{background:var(--orange);color:#000}
.op-box{padding:0;border-radius:14px;overflow:hidden}
.op-scroll{overflow-x:auto}
.op-table{width:100%;min-width:640px;border-collapse:collapse;font-size:15px}
.op-table th{text-align:left;font-weight:500;font-size:13px;color:var(--muted);padding:10px 12px}
.op-table td{padding:10px 12px;border-top:1px solid var(--line);vertical-align:middle}
.op-table th:first-child,.op-table td:first-child{padding-left:18px}
.op-table td:last-child{text-align:right;padding-right:18px}
.op-conc td:first-child{box-shadow:inset 3px 0 0 var(--orange)}
.op-sug{color:#A65300;font-weight:500}
.op-lines{margin-top:14px}.op-lines ul{margin:8px 0 0;padding-left:20px}
.op-foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;margin-top:14px;border-radius:14px}
.op-entry{gap:12px}
.hulp-warn{border-left:4px solid var(--orange);margin-bottom:12px}
.grid-more{margin-top:6px}.grid-more>summary{cursor:pointer;color:var(--muted);font-size:14px;padding:6px 0}
.tb-main{margin-left:auto}

/* ---------- v6.2: beheerder ---------- */
.ma-status{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--muted);margin-bottom:14px}
.ma-status span{display:flex;align-items:center;gap:6px}
.ma-top{flex-wrap:wrap;gap:12px;margin-bottom:10px}
.ma-bar{height:8px;border-radius:4px;background:var(--line);overflow:hidden;margin-bottom:14px}
.ma-bar i{display:block;height:100%;background:var(--ok)}
.ma-steps{padding:0;border-radius:14px;overflow:hidden}
.ma-step{display:flex;align-items:center;gap:14px;padding:14px 18px;border-top:1px solid var(--line)}
.ma-step:first-child{border-top:0}
.ma-n{width:30px;height:30px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;font-weight:700;background:var(--warn-bg);color:#A65300}
.ma-step.ok .ma-n{background:var(--ok);color:#fff}
.ma-step.ok .nu-t b{color:var(--muted)}
.ma-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:10px 0 14px}
.ma-tile{background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.ma-tile b{font-size:24px;font-weight:900}
.ko-top{flex-wrap:wrap;gap:10px;margin-bottom:6px}
.ko-cat{gap:12px;flex-wrap:wrap;margin-bottom:12px}
.ko-table td{vertical-align:top}
.ko-week{margin-top:16px}.ko-week>summary{cursor:pointer;padding:4px 0}
.adv-box{margin-top:18px;background:var(--white);border:1px solid var(--line);border-radius:14px;padding:14px 18px}
.adv-box>summary{cursor:pointer}
.gb-seg{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));max-width:560px;margin-bottom:10px}
.gb-seg button{min-height:44px}
.gb-pad{padding:10px 18px 14px}

/* v6.0: grotere tikvlakken op de telefoon */
.av-tools .seg button{min-height:44px}

/* v6.1: Te beoordelen met tussenkopjes, aanmeldingen per persoon inklapbaar; Nu te doen: open diensten apart */
.p-subh{display:flex;align-items:center;gap:8px;padding:12px 18px 6px;border-top:1px solid var(--line);font:600 13px Roboto,sans-serif;letter-spacing:.02em;text-transform:uppercase;color:var(--muted)}
.p-head+.p-subh{border-top:0}
.p-subh+.p-row{border-top:0}
.p-subh .cnt{font-weight:500;text-transform:none}
.p-sg{padding:0}
.p-sg-head{display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 18px;background:none;border:0;font:inherit;color:var(--ink)!important;text-align:left;cursor:pointer}
.p-sg-head:focus-visible{outline:2px solid var(--orange);outline-offset:-2px}
.p-chev{color:var(--muted);font-size:14px;flex:none;width:14px}
.p-sub{padding-left:44px;background:#FCFCFC;flex-wrap:wrap}
.p-sub .nu-t{flex:1 1 220px}
.p-sub .row{flex-wrap:nowrap;gap:6px;margin-left:auto}
.nh-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:space-between}
.nh-row .row{gap:6px}
.nu-opt{margin-top:10px}
.nu-dot{display:inline-block;margin-right:8px;vertical-align:1px}
.hdr-mode .badge{margin-left:6px}
@media (max-width:420px){ .p-sub{padding-left:18px} .p-subh{padding-left:14px;padding-right:14px} }
.p-sg-head b{color:var(--ink)}
/* v6.2: loontabel */
.wt-card{margin-top:10px}
.wt{width:100%;border-collapse:collapse;margin:10px 0 6px;font-size:14px}
.wt th{text-align:left;font-weight:600;color:var(--muted);font-size:12.5px;padding:4px 6px;border-bottom:1px solid var(--line)}
.wt td{padding:5px 6px;border-bottom:1px solid var(--line)}
.wt .num{text-align:right;font-variant-numeric:tabular-nums}
.wt tr:last-child td{border-bottom:0}
.wt-none td{color:var(--muted)}
.wt-edit td:first-child{white-space:nowrap}
.wt-edit input{width:100%;min-width:0;box-sizing:border-box;font:inherit;padding:8px;border:1px solid var(--line);border-radius:6px;background:var(--white);color:var(--ink);text-align:right}
.wt-edit td{width:36%} .wt-edit td:first-child{width:28%}
.wage-box #wage-hint{margin:-4px 0 10px}
.wage-box #wage-hint .note-warn{margin-top:6px}
.wage-box #wage-hint div{margin-top:4px}
.tc-personal .linkbtn{font-size:13px;color:var(--muted)}
.sheet .sub + .ev-list{margin-top:12px}

/* ---------- v7.0 ---------- */
.q-tag{margin-left:6px;vertical-align:1px;font-size:12px;padding:2px 7px}
.nu-loc{display:flex;flex-direction:column;gap:3px;padding:14px 16px;margin-top:10px;box-shadow:inset 4px 0 0 var(--orange)}
.nu-loc .row{margin-top:8px}
.op-change{padding:14px 18px;margin-bottom:14px;box-shadow:inset 4px 0 0 var(--orange)}
.op-change h2{margin:0;font-size:17px}
.op-chg{margin:8px 0;padding-left:20px}
.op-change .row{margin-top:8px;gap:8px}
.fc-table td{vertical-align:top}
.dv-nav{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.dv-nav b{font-size:17px;text-transform:capitalize}
.dv-tools{gap:8px;margin-bottom:12px;flex-wrap:wrap}
.dv-body{touch-action:pan-y}
.dv-ev{padding:12px 14px;margin-bottom:12px}
.dv-row{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;border:0;background:var(--white);padding:10px 0;border-top:1px solid var(--line);cursor:pointer;box-shadow:inset 3px 0 0 var(--orange);padding-left:10px;margin-top:6px;border-radius:2px}
.dv-row.concept{box-shadow:inset 3px 0 0 transparent;outline:1.5px dashed var(--orange);outline-offset:-2px}
.dv-row.clash{box-shadow:inset 3px 0 0 var(--bad)} .dv-row.warn{box-shadow:inset 3px 0 0 #A65300}
.dv-row .num{min-width:92px;font-weight:700}
.dv-who{display:flex;flex-direction:column}
.dv-free{padding:12px 14px}
.al-in{width:76px;padding:8px;border:1px solid var(--line);border-radius:6px;text-align:right}
.al-row{align-items:center}
.loc-p.late{box-shadow:inset 4px 0 0 var(--bad)}
.loc-c{align-items:center;gap:10px}
.loc-t{width:72px;padding:8px;border:1px solid var(--line);border-radius:6px;text-align:right}
.wk-prev{padding:14px 16px}
.onb63 .onb-auto{padding:3px 0;border-bottom:1px solid var(--line)}
.al-row .row{flex-wrap:nowrap;align-items:center;gap:6px}.loc-c .blk-opt{border:0;padding:0;background:none}
.hol-tag{display:block;margin-top:3px;font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.02em;color:#1F5E8C;background:#E4EFF8;border-radius:3px;padding:1px 5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hol-bar{background:#E4EFF8;color:#1F5E8C;border-radius:6px;padding:8px 12px;font-size:14px;font-weight:600;margin-bottom:10px}

/* v7.0.2: diploma-eisen per evenement */
.req-box{margin:12px 0}
.req-box .spread{gap:10px}
.req-list{list-style:none;margin:8px 0 2px;padding:0}
.req-list li{padding:5px 0;border-bottom:1px solid var(--line);font-size:14px}
.req-list li:last-child{border-bottom:0}
.req-list li.ok{color:var(--ink)} .req-list li.miss{color:#A65300}
.req-tip{margin-top:8px;background:var(--orange-soft);color:#7A3E00;border-radius:6px;padding:6px 10px;font-size:14px;gap:10px}
label.chk{display:flex;align-items:flex-start;gap:10px;margin:12px 0;font-size:15px;cursor:pointer}
label.chk input{width:22px;height:22px;flex:none;margin-top:1px;accent-color:var(--orange)}
.dh-cert{font-style:normal;font-size:11px;margin-right:3px;border-radius:4px;padding:0 2px}
.dh-cert.miss{background:var(--orange-soft);outline:1px solid #EE7900}
.dh-cert.ok{opacity:.6}
.cert-pub{margin-bottom:8px}

/* v7.1: instellingenscherm per onderwerp (v71.js) */
.s71-nav{display:flex;flex-wrap:wrap;gap:6px;margin:16px 0 4px}
.s71-nav .chip{border:0;cursor:pointer;font:inherit;font-size:14px;font-weight:500;padding:8px 12px;min-height:36px;border-radius:18px;color:var(--ink)}
@media (hover:hover){ .s71-nav .chip:hover{background:#E0E0E0} }
.s71-grp{margin-top:12px}
details.s71-grp>summary{cursor:pointer;list-style:none;border-bottom:0}
details.s71-grp>summary::-webkit-details-marker{display:none}
details.s71-grp>summary h2::before{content:'▸ ';color:var(--muted)}
details.s71-grp[open]>summary h2::before{content:'▾ '}
details.s71-grp[open]>summary{border-bottom:1px solid var(--line)}
details.s71-grp>summary+.p-row{border-top:0}
.s71-row{flex-wrap:nowrap}
.s71-ctl{flex-shrink:0;display:flex;justify-content:flex-end;align-items:center;max-width:60%}
.s71-in{height:34px;border:1px solid #DADADA;border-radius:8px;padding:0 10px;font:inherit;font-size:14px;background:var(--white);color:var(--ink);width:90px;box-sizing:border-box}
.s71-in:focus{outline:2px solid var(--orange);outline-offset:1px}
.s71-wide{width:280px;max-width:100%}
.s71-num{display:inline-flex;align-items:center;gap:6px}
.s71-pair{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.s71-pair .s71-in{width:150px}
.s71-bad{color:var(--bad)}
.s71-sub{padding-left:34px}
.s71-sub .nu-t b{font-weight:400}
.s71-log{padding:6px 18px 12px}
@media (max-width:640px){
  .s71-row{flex-wrap:wrap}
  .s71-row .nu-t{flex-basis:100%}
  .s71-ctl{max-width:100%;width:100%;justify-content:flex-start}
  .s71-ctl .row{flex-wrap:wrap}
  .s71-wide,.s71-pair,.s71-pair .s71-in{width:100%}
  .s71-sub{padding-left:18px}
}

/* ======================================================================================
   v8.0 (29-10-2026): vensters, laden, iconen, nieuwe onderdelen, donkere modus
   ====================================================================================== */
h1,.h1{font-family:'Roboto Condensed',Roboto,system-ui,sans-serif;font-weight:800;letter-spacing:-.2px}
h2,.sheet h2,.ev-month{font-family:'Roboto Condensed',Roboto,system-ui,sans-serif;font-weight:700}
.nu-big,.time,.pl-main,.mt-row,.mc-big b,.hr-r b,td,.p-row b,.bday-row,.cell-shift{font-variant-numeric:tabular-nums}
/* eigen vensters (dialoog.js) */
.dlg-scrim{position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;padding:20px;padding-bottom:max(20px,env(safe-area-inset-bottom))}
.dlg-scrim[hidden]{display:none}
.dlg{background:var(--white);color:var(--ink);border-radius:14px;max-width:440px;width:100%;padding:22px 20px 16px;box-shadow:0 18px 50px rgba(0,0,0,.3);max-height:85vh;overflow:auto}
.dlg-t{margin:0 0 14px;font-size:17px;line-height:1.45;white-space:pre-line}
.dlg input,.dlg textarea{width:100%;font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink);box-sizing:border-box;margin-bottom:14px}
.dlg .dlg-need{border-color:var(--bad);box-shadow:0 0 0 2px var(--bad-bg)}
.dlg-b{display:flex;gap:10px;justify-content:flex-end;flex-wrap:wrap}
.dlg-b .btn{min-height:44px;min-width:110px;font-size:16px}
body.dlg-on{overflow:hidden}
/* laden met grijze vlakken */
.skel{display:flex;flex-direction:column;gap:12px;padding-top:6px}
.skel i{display:block;border-radius:10px;background:linear-gradient(90deg,var(--line) 0%,var(--bg) 50%,var(--line) 100%);background-size:200% 100%;animation:sk 1.2s ease-in-out infinite}
.skel .sk-h{height:30px;width:55%}.skel .sk-c{height:110px}.skel .sk-r{height:54px}.skel .sk-r.short{width:70%}
@keyframes sk{0%{background-position:100% 0}100%{background-position:-100% 0}}
@media (prefers-reduced-motion:reduce){.skel i{animation:none}}
body.stale .bar::after{content:'bijwerken…';position:absolute;right:12px;bottom:3px;font-size:11px;color:#9A9A9A}
/* iconen in de onderbalk en zijbalk */
.nav-ico{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:none}
@media (max-width:899px){
  nav.tabs button.has-ico:not(.more-item){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding-top:7px;padding-bottom:6px;font-size:11.5px;position:relative;min-height:54px}
  nav.tabs button.has-ico .badge{position:absolute;top:4px;left:calc(50% + 6px);margin:0}
}
@media (min-width:900px){
  nav.tabs button.has-ico:not(.more-btn){display:flex;align-items:center;gap:12px}
  nav.tabs button.has-ico .nav-ico{width:20px;height:20px;opacity:.85}
  /* zijbalk altijd tot onderaan het scherm */
  nav.tabs{position:fixed;top:64px;bottom:0;min-height:calc(100vh - 64px);height:calc(100vh - 64px)}
}
/* Uitloggen op de telefoon onder Meer */
@media (max-width:699px){ #who .logout{display:none} }
.more-sep{height:1px;background:var(--line);margin:6px 0}
.more-logout b{color:var(--bad)}
/* deadline voorbij */
.nu-late{color:#B35A00;font-weight:600}
/* feestdagen */
.feest-tag{background:#FFF1E0;color:#8A4B00;border-color:#F3D3AE}
.feest-bar{background:#FFF1E0;color:#8A4B00}
.pl-feest{display:block;font-style:normal;font-size:9.5px;line-height:1.1;color:#8A4B00;margin-top:2px;max-width:46px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.feest-tag.gedenk-tag{background:#F0F0F0;color:#555;border-color:#DDD}
.feest-bar.gedenk-bar{background:#F0F0F0;color:#555}
.pl-feest.gedenk{color:#666}
/* vaste beschikbaarheid */
.av-pat{margin-bottom:12px}
.pat-list{display:flex;flex-direction:column;gap:8px;margin:8px 0 6px}
.pat-row{display:grid;grid-template-columns:92px 1fr auto;gap:6px 10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--white)}
.pat-row select,.pat-row input[type=time]{font:inherit;font-size:15px;padding:8px;border:1px solid var(--line);border-radius:8px;background:var(--white);color:var(--ink)}
.pat-row .pat-s{grid-column:2/4;font-size:13.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
@media (max-width:420px){.pat-row{grid-template-columns:1fr auto}.pat-row b{grid-column:1/3}.pat-row .pat-s{grid-column:1/3}}
/* team: zoeken en toevoegen */
.team-search{display:block;margin:10px 0 4px}
.team-search input{width:100%;box-sizing:border-box;font:inherit;font-size:16px;padding:11px 12px;border:1px solid var(--line);border-radius:10px;background:var(--white);color:var(--ink)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.tm-photo{object-fit:cover;padding:0}
.tm-init.big,.tm-photo.big{width:72px;height:72px;border-radius:50%;font-size:24px;display:inline-flex;align-items:center;justify-content:center;background:var(--bg)}
.my-photo{display:flex;gap:14px;align-items:center}
/* rooster */
.grid-help{margin-top:10px}.grid-help summary{cursor:pointer;color:var(--muted);font-size:14px}
.lvl.nofn,.name .lvl.nofn,td .lvl.nofn{color:var(--muted);font-size:11px;white-space:nowrap}
/* briefing */
.brief{margin-top:10px;padding:10px 12px;border-radius:10px;background:var(--bg)}
.brief-h{display:block;margin-bottom:4px}
.brief-acts{margin-top:8px;gap:8px;flex-wrap:wrap}
a.btn{text-decoration:none;display:inline-flex;align-items:center;justify-content:center}
.brief-msg{border-left:3px solid var(--orange);padding:4px 0 4px 10px;margin:8px 0;white-space:pre-line}
.brief-msg .meta{display:block;font-size:12px}
.nu-arrive{display:block;font-size:14px;color:#D0D0D0;margin-top:2px}
.ev-team8{margin:12px 0}
/* werkinstructies */
.wi-body{white-space:pre-line;line-height:1.5;margin:6px 0 12px}
.wi-photos{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:8px}
.wi-photos img{width:100%;border-radius:10px;display:block}
.wi-edit-ph{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0}
.wi-th{display:flex;flex-direction:column;gap:2px;width:90px}.wi-th img{width:90px;height:90px;object-fit:cover;border-radius:8px;background:var(--bg)}
.wi-add{cursor:pointer}
/* uren per maand als kaart */
.month-card8 .mc-big{display:flex;gap:26px;margin:4px 0 8px}
.month-card8 .mc-big b{display:block;font-size:30px;font-family:'Roboto Condensed',Roboto,sans-serif;font-weight:800}
.month-card8 .mc-big small{color:var(--muted)}
.mc-bar{height:8px;border-radius:5px;background:var(--line);overflow:hidden;margin:4px 0}.mc-bar i{display:block;height:100%;background:var(--orange)}
.mc-more{margin-top:8px}.mc-more summary{cursor:pointer;color:var(--muted)}
/* kosten 12 maanden */
.yr8{margin-bottom:16px}.yr-wrap{overflow-x:auto}.yr-wrap svg{width:100%;min-width:520px;height:auto;display:block;margin:8px 0}
.yr-rev{fill:#BDBDBD}.yr-cost{fill:var(--orange)}.yr-m{font-size:12px;fill:var(--muted)}
.yr-p{font-size:11px;font-weight:700}.yr-p.ok{fill:var(--ok)}.yr-p.mid{fill:#B35A00}.yr-p.hi{fill:var(--bad)}
.yr-key{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin:0 2px 0 6px}.yr-key.rev{background:#BDBDBD}.yr-key.cost{background:var(--orange)}
.km-est{margin:-4px 0 8px}

/* ---------- v8.1 ---------- */
.tc-act{flex-wrap:wrap;align-items:center}
.tc-act .tc-minors{display:inline-flex;gap:14px;align-items:center;margin-left:auto;padding:0 4px}
.tc-act .tc-minor{font-size:13px;color:var(--muted)}
.hulp-move{border-top:1px solid var(--line);margin-top:14px;padding-top:4px}
.hulp-move .row{align-items:center;gap:16px}
.hulp-opt{width:100%;text-align:left;cursor:pointer}
.wr-note{margin:10px 0}
.lv-head .btn,.tr-head .btn{flex:none;white-space:nowrap}
.lv-head h2,.tr-head h2{min-width:0}
.tr-info,.lv-later{margin:-2px 0 10px}
.hr-row .hr-r .linkbtn{font-size:13px}
.lv-rows .hr-l small,.tr-rows .hr-l small{white-space:normal}

/* ---------- v8.2 ---------- */
.hr82-box{border-top:1px solid var(--line);margin-top:14px;padding-top:2px}
.hr82-row{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;padding:6px 0}
.hr82-row>span:first-child{min-width:150px;color:var(--muted)}
.rules-text h3{margin:14px 0 4px}
.rules-text p,.rules-text ul{margin:4px 0 8px}
.rules-text ul{padding-left:20px}
.ref-grid{display:grid;gap:6px;margin:10px 0}
.ref-row{display:grid;grid-template-columns:92px 64px 1fr 12px 1fr;gap:6px;align-items:center}
.ref-row input[type=time]{min-width:0;padding:6px}
.ref-on{display:flex;gap:4px;align-items:center;font-size:14px}
#hr-rules{width:100%;font:13px/1.45 ui-monospace,Menlo,monospace}

/* DONKER-AUTO-BEGIN */
/* automatisch gemaakt door handleiding-bron/donker.py (v8.0.1): niet met de hand wijzigen */
@media (prefers-color-scheme:dark){
  .btn.quiet{background-color:#202020}
  .chip{background-color:#202020}
  .chip.warn{color:#F4B87B}
  .seg{background-color:#202020}
  .grid td.cell:hover{background-color:#181818}
  .grid td.ja{background-color:#151F18}
  .grid td.misschien{background-color:#261B0E}
  .grid tfoot td{background-color:#181818}
  .grid .tot{background-color:#181818}
  .sheet-x{background-color:#222222;color:var(--ink)}
  .btn.wa{color:#88E7B3}
  .cao-box .w{color:#F4B87B}
  .note-warn{color:#F4B97B}
  .mfa-qr{background-color:#161616}
  .login code{background-color:#202020}
  .fn{background-color:#1D1D1D}
  .seg.seg-light{background-color:#202020}
  .grid .elsewhere{background-color:#222222;color:var(--muted)}
  .grid tr.g-empty td{background-color:#181818}
  h3.fn-head span{background-color:#202020}
  .seg.seg-tool{background-color:#222222}
  .grid tr.group td,.grid tr.group td.name,.grid tr.group td.tot{background-color:#1D1D1D}
  .grid tr.group td.gcount{color:#F4B87B}
  .grid tr.group.empty td,.grid tr.group.empty td.name,.grid tr.group.empty td.tot{background-color:#181818}
  .grid tr.group.idle td,.grid tr.group.idle td.name,.grid tr.group.idle td.tot{background-color:#1D1D1D}
  .load-error{color:#E3958C}
  .grid td.cell.drop-ok{background-color:#251A0E}
  .grid td.cell.drop-hover{background-color:#2E2113}
  .chat-thread{background-color:#181818}
  .chat-day{background-color:#202020}
  .msg-from{color:#F4B87B}
  .read-bar{background-color:#212121}
  .msg.bot{background-color:#1D1D1D;border-color:#343434}
  .chat-escalate{color:#F4B87B}
  .cal-day.av-ja{background-color:#151F18}
  .cal-day.av-misschien{background-color:#261B0E}
  .m-task{background-color:#202020}
  .task-text{color:var(--ink)}
  .who-list span{background-color:#202020}
  .dev.no{color:#F4B87B}
  .wt-head{background-color:#1C1C1C}
  .grid .leave-mark{background-color:#141C26;color:#91B2DE}
  .grid .leave-mark.ziek,.grid .leave-mark.bijzonder{background-color:#1E1E1E;color:var(--muted)}
  .m-leave.req{background-color:#141C26;color:#91B2DE}
  .avp-chip span{background-color:#202020}
  #avp-count .bad{color:#E3918C}
  .av-cal .cal-day.av-ja{background-color:#1C261F;border-color:#343434}
  .av-cal .cal-day.av-misschien{background-color:#2E2113;border-color:#343434}
  .av-cal .cal-day.av-nee{border-color:#343434}
  .av-cal .cal-day.av-leeg:not([disabled]){border-color:#343434}
  .av-misschien .av-tag{color:#F4B87B}
  .av-nee .av-tag{color:var(--muted)}
  .av-tag.lv{color:#91B2DE}
  .wd-pick{background-color:#202020}
  .s-ja{background-color:#1C261F}
  .s-misschien{background-color:#2E2113;color:#F4B87B}
  .s-nee{background-color:#202020;color:var(--muted)}
  .av-bar .av-seg button:not([disabled]).v-misschien{color:#F4B87B}
  .lg.av-ja{background-color:#1C261F}
  .lg.av-misschien{background-color:#2E2113}
  .news-item p{color:var(--ink)}
  .start-bar{background-color:#212121}
  .usage div{background-color:#1B1B1B}
  .rs-date{background-color:#181818}
  .rs-sub{color:var(--muted)}
  .start-card{background-color:#23190D;border-color:#343434}
  .update-card{background-color:#23190D;border-color:#343434}
  .btn.wa{color:#88E7AF}
  .card.sick{background-color:#23100D;border-color:#343434}
  .av-note{background-color:#1C1C1C}
  .app-state{background-color:#1D1D1D}
  .app-state.half{color:#F4B87B}
  .tc-att{color:#F4B87B;background-color:#271C0F}
  .hr-r .st-warn{color:#F4B87B}
  .chip.concept-chip{color:#F4B87B}
  .tpl-bar{background-color:#181818}
  .rep-box{background-color:#181818}
  .rep-scope{background-color:#181818}
  .check-list li.no span{color:#F4B87B}
  .ws-item.warn b{color:#F4B87B}
  .bday-now{color:#F4B87B}
  .chip.cert-no{background-color:#1D1D1D}
  .ev-st.need{color:#F4B87B}
  .tm-init{background-color:#1E1E1E}
  .todo-dot{background-color:#333333}
  .rv-warn{color:#F4B87B}
  .sd-row.mine{background-color:#251B0E}
  .grid .blk.warn b::after{color:#F4B87B}
  .grid tr.open td{background-color:#241A0E !important}
  .grid tr.evrow td{background-color:#241A0E}
  .grid tr.evrow .dh-fill.gap{color:#F4B87B}
  .kp-tile.need b{color:#F4B87B}
  .grid tr.group.fold.sub td,.grid tr.group.fold.sub td.name,.grid tr.group.fold.sub td.tot{background-color:#181818}
  .grid tr.group td.avc .c-m{color:#F4B87B}
  .act-ic{background-color:#1D1D1D}
  .act-row.k-aanmelding .act-ic{background-color:#2E2113}
  .act-row.k-beschikbaarheid .act-ic{background-color:#1C261F}
  .act-row.k-verlof .act-ic{background-color:#141C26}
  .sug-box{background-color:#151F18}
  table.fair tr.low td{background-color:#261B0E}
  .pct.ok{background-color:#1C261F}
  .pct.mid{background-color:#2E2113;color:#F4B87B}
  .pct.hi{background-color:#2A1614;color:#E3918C}
  .err-detail{background-color:#1B1B1B}
  .use-bar{background-color:#1F1F1F}
  button.rv-row:hover{background-color:#181818}
  .pl-row.open .pl-main span{color:#E2BC8D}
  .p-warn{color:#F4B87B !important}
  .p-bad{color:#E08F8F}
  .p-sg{color:#F4B87B}
  .op-step{color:var(--ink)}
  .op-step span{color:var(--ink)}
  .op-step.now span{color:var(--ink)}
  .op-sug{color:#F4B87B}
  .ma-n{color:#F4B87B}
  .p-sub{background-color:#171717}
  .hol-tag{color:#91BEDE;background-color:#172027}
  .hol-bar{background-color:#172027;color:#91BEDE}
  .req-list li.miss{color:#F4B87B}
  .req-tip{color:#F4B97B}
  .nu-late{color:#F4B87B}
  .feest-tag{background-color:#2C2011;color:#F4BD7B;border-color:#343434}
  .feest-bar{background-color:#2C2011;color:#F4BD7B}
  .pl-feest{color:#F4BD7B}
  .feest-tag.gedenk-tag{background-color:#1E1E1E;color:var(--muted);border-color:#343434}
  .feest-bar.gedenk-bar{background-color:#1E1E1E;color:var(--muted)}
  .pl-feest.gedenk{color:var(--muted)}
}
@media (prefers-color-scheme:dark) and (hover:hover){
  .btn.quiet:hover:not([disabled]){background-color:#262626}
  .st-row:hover{background-color:#181818}
  .grid td.gcount.add:hover{background-color:#222222}
  .grid tr.open td.cell[data-act="new-open"]:hover{background-color:#362718}
  .ev-row:hover{background-color:#181818}
  .todo-row:hover{background-color:#181818}
  button.sd-row:hover{background-color:#181818}
  .sign-group summary:hover{background-color:#181818}
  .kp-ev:hover,.kp-next:hover{background-color:#181818}
  .s71-nav .chip:hover{background-color:#272727}
}
/* DONKER-AUTO-EIND */
/* ---------- donkere modus (volgt de instelling van het toestel) ---------- */
@media (prefers-color-scheme:dark){
  :root{--warn-ink:#F6A04D;--bg2:#1A1A1A;--bg3:#262626;--warm-bg:#2A1E12;--ok-cell:#15241A;--ink:#ECECEC;--muted:#A3A3A3;--line:#343434;--bg:#111111;--white:#1C1C1C;--orange-soft:#3A2510;--ok-bg:#163222;--bad-bg:#3A1C19;--warn-bg:#3A2510;--ok:#6FCF97;--bad:#F2877A;color-scheme:dark}
  body{background:var(--bg);color:var(--ink)}
  /* automatisch: tekst die wit is op zwart of oranje blijft wit; zwarte tekst wordt de leesbare tekstkleur */
  .badge,.btn,.cal-nav,.chip.offer,.clock-ghost,.cp-close,.cp-head,.grid .blk,.grid thead th,.grid thead th.tot,.grid tr.group td,.grid tr.group td.tot,.lic,.m-leave,.m-mine,.m-open,.m-sign,.msg.mine,.quick-btn,.quick-ico,.rc-d.on,.rep-days button[aria-pressed="true"],.seg.seg-light button[aria-pressed="true"],.seg.seg-tool button[aria-pressed="true"],.sg-n,.sg-warn,.shift-card .day,.start-dot,.task-check[aria-pressed="true"],.task-check[aria-pressed="true"]:hover,.toast,.tool-btn.primary,.update-bar,.week-nav button,/* Externe krachten en inklokvenster */
.ext-tag,/* In- en uitklokken */
.clock,/* Kopbalk */
.bar,/* Meldingen, installatie, kosten */
.bell,/* Zwevende chatknop en chatvenster (medewerkers) */
.chat-fab,nav.tabs .nav-ext:hover,nav.tabs button:hover,nav.tabs button[aria-current="page"]{color:#FFFFFF}
  .btn:not(.ghost):not(.quiet):not(.danger),.btn.v8-demoted{color:#FFFFFF}
  .btn.v8-demoted,.btn.ghost{color:var(--ink)}
  .clock,.clock *{color:#FFFFFF}
  .bar,nav.tabs{color:#FFFFFF}
  .bar *,nav.tabs button,nav.tabs .badge{color:#FFFFFF}
  nav.tabs button:not([aria-current="page"]){color:#BDBDBD}
  .btn.ghost,.btn.quiet{background:transparent;color:var(--ink);border-color:#4A4A4A}
  .card,.ev-list,.list,.p-box,.nu-list,.sheet,.dlg,.empty,.ev-row,.hr-rows,.signup-box{background:var(--white);color:var(--ink);border-color:var(--line)}
  .empty{border-color:#3A3A3A}
  input,select,textarea{background:#151515;color:var(--ink);border-color:#3A3A3A}
  .notice{background:#2A2216;color:#F1D7B5;border-color:#4A3A22}
  .brief,.skel i{background-color:#161616}
  .feest-tag,.feest-bar,.hol-bar{background:#3A2510;color:#F3C893;border-color:#5A3A18}
  .pl-feest,.nu-late{color:#F3C893}
  .yr-rev,.yr-key.rev{fill:#5A5A5A;background:#5A5A5A}
  .meta,.sub{color:var(--muted)}
  a{color:#F6A04D}
  .scrim{background:rgba(0,0,0,.6)}
  img.tm-photo{filter:brightness(.95)}
}