/* ERN CRM — designsysteem v4 (bordeaux + warm), mobile-first responsive */
:root{
  --bg: oklch(0.976 0.004 40);
  --surface: oklch(1 0 0);
  --side: oklch(0.27 0.058 22);
  --side-2: oklch(0.33 0.062 22);
  --side-ink: oklch(0.95 0.01 30);
  --side-dim: oklch(0.79 0.035 28);
  --ink: oklch(0.24 0.015 30);
  --ink-2: oklch(0.46 0.015 35);
  --border: #e8e6f0;
  --red: oklch(0.55 0.19 26);
  --red-deep: oklch(0.42 0.15 25);
  --red-tint: oklch(0.955 0.02 26);
  --cobalt: oklch(0.48 0.13 262);
  --cobalt-tint: oklch(0.945 0.025 262);
  --ok: oklch(0.507 0.085 210);
  --ok-tint: oklch(0.979 0.014 208);
  --amber: oklch(0.51 0.115 65);
  --amber-tint: oklch(0.955 0.04 75);
  --terra: oklch(0.6 0.12 45);
  --r: 14px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:16px}
body{font-family:"Figtree","Schibsted Grotesk",system-ui,sans-serif;background:#f6f5fa;color:var(--ink);
  -webkit-font-smoothing:antialiased;font-size:.9375rem;line-height:1.5;min-height:100vh}
img.ic{display:block;flex:none}
a{text-decoration:none;color:inherit}
.link{color:var(--cobalt);font-weight:700}
input,button,textarea,select{font:inherit}

.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}
.main{min-width:0}
/* ── App-shell op desktop: zijbalk + topbalk staan vast, alleen de content-pane scrollt (tool i.p.v. pagina) ── */
@media (min-width:1024px){
  .app{height:100dvh;overflow:hidden}
  .main{display:flex;flex-direction:column;min-height:0;height:100dvh;overflow:hidden}
  .top{flex:0 0 auto}
  .wrap{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain}
}

/* ── zijbalk ── */
.side{background:var(--side);padding:22px 14px;display:flex;flex-direction:column;gap:4px;
  position:sticky;top:0;height:100vh;overflow-y:auto}
.brand{display:flex;align-items:center;gap:11px;padding:2px 10px 20px;color:#fff}
.mark{width:36px;height:36px;border-radius:11px;background:var(--red);display:grid;place-items:center;
  font-weight:800;font-size:1.125rem;color:#fff;flex:none}
.mark.big{width:52px;height:52px;border-radius:15px;font-size:1.5rem}
.brand b{font-size:1.0938rem;font-weight:800;display:block;line-height:1.15;letter-spacing:-.01em}
.brand small{font-size:.7188rem;font-weight:600;color:var(--side-dim)}
.nav{display:flex;flex-direction:column;gap:3px}
.nav a{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:11px;
  color:var(--side-dim);font-weight:600;font-size:.9rem}.nav a.on{background:#fff;color:var(--red-deep)}
.cnt{margin-left:auto;font-size:.7188rem;font-weight:700;background:var(--side-2);
  color:var(--side-ink);border-radius:99px;padding:2px 9px}
.nav a.on .cnt{background:var(--red);color:#fff}
.soon{margin-left:auto;font-size:.6563rem;font-weight:700;color:var(--side-dim);
  border:1px solid var(--side-2);border-radius:99px;padding:2px 8px}
.subnav{display:grid;gap:1px;margin:2px 4px 8px 26px;padding-left:12px;border-left:1.5px solid var(--side-2)}
.subnav a{color:var(--side-dim);font-size:.8125rem;font-weight:600;padding:6px 9px;border-radius:8px}.subuit{color:var(--side-dim);opacity:.55;font-size:.75rem;font-weight:600;padding:5px 9px;font-style:italic}
.foot{margin-top:auto;border-top:1px solid var(--side-2);padding-top:12px}
.me{display:flex;align-items:center;gap:10px;padding:6px 10px;color:#fff}
.av{width:34px;height:34px;border-radius:99px;display:grid;place-items:center;font-weight:700;
  font-size:.8125rem;color:#fff;background:var(--red);flex:none;text-transform:uppercase}
.me b{font-size:.875rem;font-weight:700;display:block;line-height:1.2}
.me span{font-size:.75rem;color:var(--side-dim)}
.me .uit{margin-left:auto;opacity:.8;padding:6px}

/* ── topbar ── */
.top{display:flex;align-items:center;gap:12px;padding:13px 26px;background:var(--bg);
  position:sticky;top:0;z-index:20;border-bottom:1px solid var(--border)}
.m-brand{display:none}
.hamb{display:none;place-items:center;width:44px;height:44px;border:1.5px solid var(--border);
  background:var(--surface);border-radius:12px;cursor:pointer;flex:none}
.scrim{display:none}
.sidetop{display:flex;align-items:flex-start}
.sideclose{display:none;background:none;border:0;cursor:pointer;padding:6px;margin-left:auto}
.newmenu{position:relative}
.newmenu summary{list-style:none;cursor:pointer}
.newmenu summary::-webkit-details-marker{display:none}
.btn-new{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.875rem;
  border:0;border-radius:12px;padding:11px 16px;background:var(--red);color:#fff}
.newpanel{position:absolute;right:0;top:calc(100% + 8px);background:var(--surface);
  border:1.5px solid var(--border);border-radius:14px;min-width:232px;padding:6px;z-index:60;
  box-shadow:0 6px 14px oklch(0.3 0.02 30 / .14)}
.newpanel a{display:flex;align-items:center;gap:11px;padding:11px 12px;border-radius:10px;
  font-weight:700;font-size:.875rem}.zoekpanel{position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--surface);
  border:1.5px solid var(--border);border-radius:14px;padding:6px;z-index:55;
  box-shadow:0 6px 14px oklch(0.3 0.02 30 / .14);max-height:60vh;overflow-y:auto}
.zoekpanel a{display:block;padding:10px 12px;border-radius:10px}.zoekpanel b{display:block;font-weight:700;font-size:.875rem;line-height:1.3}
.zoekpanel span{color:var(--ink-2);font-size:.7813rem;font-weight:500}
.zoekpanel .alles{border-top:1px solid var(--border);border-radius:0 0 10px 10px;
  color:var(--red-deep);font-weight:700;font-size:.8125rem;margin-top:4px}
.hellobtn{margin-left:auto}
.hellobtn span{display:inline}
.search{flex:1;max-width:460px;display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1.5px solid var(--border);border-radius:12px;padding:9px 14px;color:var(--ink-2);font-size:.875rem}
.search input{border:0;outline:0;flex:1;background:transparent;color:var(--ink);min-width:0}
.icon-btn{position:relative;width:42px;height:42px;border:1.5px solid var(--border);
  background:var(--surface);border-radius:12px;display:grid;place-items:center;cursor:pointer}
.syncform{margin-left:auto}
.toast{margin:14px 26px 0;background:var(--ok-tint);border:1.5px solid oklch(0.8 0.07 208);
  color:var(--ok);font-weight:700;font-size:.875rem;border-radius:12px;padding:11px 16px}

.wrap{padding:22px 26px 110px;width:100%}
.hello{display:flex;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.hello h1{font-size:1.5rem;font-weight:800;letter-spacing:-.02em}
.hello p{color:var(--ink-2);font-size:.9rem;margin-top:3px;font-weight:500}
.crumbrow{display:flex;align-items:center;gap:8px;font-weight:600;color:var(--ink-2);
  font-size:.9375rem;margin-bottom:16px}
.crumbrow b{color:var(--ink);font-weight:800}

/* ── kaarten & rijen ── */
.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden}
.card > header{display:flex;align-items:center;gap:9px;padding:13px 18px;border-bottom:1px solid var(--border)}
.card > header h2{font-size:.9688rem;font-weight:800}
.card > header .n{color:var(--ink-2);font-weight:700;font-size:.8125rem}
.card > header a{margin-left:auto;font-size:.8125rem;font-weight:700;color:var(--red-deep)}
.rows{list-style:none}
.rows li{display:flex;align-items:center;gap:13px;padding:12px 18px;position:relative}
.rows li + li{border-top:1px solid var(--border)}.rowa{position:absolute;inset:0;z-index:1}
.rows b{font-weight:700;font-size:.9rem;display:block;line-height:1.3}
.rows .sub{color:var(--ink-2);font-size:.8125rem;font-weight:500}
.rows .end{margin-left:auto;text-align:right;flex:none;position:relative;z-index:2}
.rows time{display:block;font-size:.8438rem;font-weight:800;white-space:nowrap}
.money{font-weight:800;white-space:nowrap;display:block}
.grow{min-width:0}
.leeg{padding:22px;color:var(--ink-2);font-weight:500}
.leeg2{color:var(--ink-2);font-weight:500;font-size:.8438rem;padding:4px 0}
.co{width:34px;height:34px;border-radius:9px;background:var(--bg);border:1.5px solid var(--border);
  display:grid;place-items:center;font-weight:800;font-size:.7188rem;color:var(--ink-2);flex:none}
.kav{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-weight:800;
  font-size:.8125rem;color:#fff;flex:none}
.kav.sm{width:30px;height:30px;border-radius:9px;font-size:.6875rem}
.chip{font-size:.75rem;font-weight:700;border-radius:99px;padding:3px 11px;white-space:nowrap;display:inline-block}
.chip.ok{background:var(--ok-tint);color:var(--ok)}
.chip.warn{background:var(--amber-tint);color:var(--amber)}
.chip.info{background:var(--cobalt-tint);color:var(--cobalt)}
.chip.new{background:var(--red-tint);color:var(--red)}
.chip.muted{background:var(--bg);color:var(--ink-2);border:1px solid var(--border)}

/* ── alerts ── */
.alerts{margin-bottom:16px}
.alerthead{display:flex;align-items:center;gap:10px;padding:13px 18px;font-weight:800;
  font-size:.9375rem;background:var(--red-tint)}
.cnt2{margin-left:auto;background:var(--red);color:#fff;border-radius:99px;font-size:.75rem;
  font-weight:800;padding:2px 10px}
.alert{display:flex;align-items:center;gap:14px;padding:13px 18px;border-top:1px solid var(--border)}
.aic{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;flex:none}
.aic.red{background:var(--red-tint)}
.aic.amber{background:var(--amber-tint)}
.aic.blue{background:var(--cobalt-tint)}
.alert b{font-weight:700;font-size:.9rem;display:block}
.alert span{color:var(--ink-2);font-size:.8125rem;font-weight:500}
.alert .act{margin-left:auto;white-space:nowrap;font-size:.8125rem;font-weight:700;color:#fff;
  background:var(--ink);border-radius:99px;padding:8px 16px;flex:none}

/* ── kpi's ── */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);
  border:1.5px solid var(--border);border-radius:var(--r);overflow:hidden;margin-bottom:16px}
.kpi{padding:16px 18px;display:flex;align-items:center;gap:13px;min-width:0}
.kpi + .kpi{border-left:1px solid var(--border)}
.kic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}
.kic.terra{background:oklch(0.955 0.03 45)}
.kic.amber{background:var(--amber-tint)}
.kic.cobalt{background:var(--cobalt-tint)}
.kic.ok{background:var(--ok-tint)}
.kpi b{font-size:1.375rem;font-weight:800;letter-spacing:-.02em;display:block;line-height:1.15;white-space:nowrap}
.kpi b small{font-size:.8125rem;font-weight:700;color:var(--ink-2)}
.kpi span{font-size:.7813rem;color:var(--ink-2);font-weight:600}

.cols{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:16px;align-items:start}

/* ── klantkaart 3-koloms ── */
.krec{display:grid;grid-template-columns:300px minmax(0,1fr) 320px;gap:16px;align-items:start}
.prof{padding:20px 18px 16px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border)}
.bigav{width:56px;height:56px;border-radius:16px;background:var(--cobalt);color:#fff;display:grid;
  place-items:center;font-weight:800;font-size:1.25rem;flex:none}
.prof h1{font-size:1.1875rem;font-weight:800;letter-spacing:-.015em}
.tags{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}
.kleurform{display:flex;align-items:center;gap:8px;margin-top:8px;font-weight:600;font-size:.75rem;color:var(--ink-2)}
.kleurform input[type=color]{width:30px;height:22px;border:1.5px solid var(--border);border-radius:6px;padding:1px;background:var(--surface);cursor:pointer}
.tag{font-size:.7188rem;font-weight:800;border-radius:99px;padding:3px 10px}
.tag.ok{background:var(--ok-tint);color:var(--ok)}
.tag.n{background:var(--bg);color:var(--ink-2);border:1.5px solid var(--border)}
.quick{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:12px 10px;border-bottom:1px solid var(--border)}
.q{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:.6875rem;font-weight:700;color:var(--ink-2)}
.q .qi{width:44px;height:44px;border-radius:13px;display:grid;place-items:center;
  border:1.5px solid var(--border);background:var(--surface)}
.q.mail .qi{background:var(--cobalt-tint);border-color:transparent}
.q.note .qi{background:var(--amber-tint);border-color:transparent}
.props{padding:8px 0 10px}
.prop{display:flex;align-items:baseline;gap:10px;padding:7px 18px}
.prop label{font-size:.75rem;font-weight:700;color:var(--ink-2);width:96px;flex:none}
.prop b{font-weight:700;font-size:.8438rem;line-height:1.35;min-width:0}
.wrapb{overflow-wrap:anywhere}

.composer{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r);
  overflow:hidden;margin-bottom:14px}
.ctop{display:flex;align-items:center;gap:9px;padding:12px 16px 0;font-size:.875rem}
.cbody{display:flex;align-items:center;gap:10px;padding:12px 14px 14px}
.cinput{flex:1;background:var(--bg);border:1.5px solid var(--border);border-radius:11px;
  padding:11px 15px;color:var(--ink);font-size:.875rem;font-weight:500;min-width:0;outline:none}
.cinput:focus{border-color:var(--red)}
.csend{font-weight:700;font-size:.8438rem;border:0;border-radius:10px;padding:11px 16px;
  background:var(--ink);color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:9px}
.csend.groot{background:var(--red);width:100%;justify-content:center;padding:14px}
.menusync{margin-top:16px}

.taakform{flex-wrap:wrap}
.taakform .cinput{flex:2 1 220px}
.taakform .cdate{flex:0 1 160px}
.taakform .corg{flex:1 1 180px}
.plab{display:flex;align-items:center;gap:8px;font-weight:700;font-size:.8438rem;color:var(--ink-2)}
.vink{background:none;border:0;cursor:pointer;padding:4px;flex:none}
.af{text-decoration:line-through;color:var(--ink-2)}
.totrow{background:var(--bg)}
.fsep{width:1.5px;background:var(--border);align-self:stretch;margin:0 4px}
.lijstzoek{display:flex !important;margin-bottom:14px;max-width:420px}
.minitaak{display:flex;gap:8px;padding:10px 14px;border-top:1px solid var(--border)}
.minitaak .cinput{flex:1}
.minitaak .csend{padding:11px 15px}
.tlcard header{padding:13px 18px}
.tl{list-style:none}
.tl li{display:flex;gap:13px;padding:13px 18px;align-items:flex-start}
.tl li + li{border-top:1px solid var(--border)}
.tic{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;flex:none}
.tic.doc{background:var(--amber-tint)}
.tic.note{background:var(--bg);border:1.5px solid var(--border)}
.tl b{font-weight:700;font-size:.9rem;line-height:1.35}
.tl .sub{color:var(--ink-2);font-size:.8438rem;font-weight:500;display:block;overflow-wrap:anywhere}
.tl time{margin-left:auto;flex:none;color:var(--ink-2);font-size:.7813rem;font-weight:700;
  white-space:nowrap;padding-top:2px}

.stack{display:grid;gap:14px}
.assoc{list-style:none}
.assoc li{display:flex;align-items:center;gap:11px;padding:11px 16px}
.assoc li + li{border-top:1px solid var(--border)}
.assoc b{font-weight:700;font-size:.8438rem;display:block;line-height:1.3}
.assoc .sub{color:var(--ink-2);font-size:.7625rem;font-weight:500}
.assoc .end{margin-left:auto;text-align:right;flex:none}
.assoc .amt{font-weight:800;font-size:.8125rem;white-space:nowrap;display:block}
.aic.doc{background:var(--amber-tint);width:34px;height:34px;border-radius:10px}
.d{width:44px;text-align:center;background:var(--bg);border:1.5px solid var(--border);
  border-radius:10px;padding:5px 0;flex:none}
.d b{display:block;font-size:.9688rem;font-weight:800;line-height:1.1}
.d span{font-size:.6563rem;font-weight:700;color:var(--ink-2);text-transform:uppercase}

/* ── offertes-board ── */
.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px;align-items:start}
.bcol > header{display:flex;align-items:baseline;gap:8px;padding:4px 6px 10px}
.bcol > header b{font-size:.875rem;font-weight:800}
.cc{font-size:.75rem;font-weight:800;color:var(--ink-2);background:var(--surface);
  border:1.5px solid var(--border);border-radius:99px;padding:1px 8px}
.tot{margin-left:auto;font-size:.7813rem;font-weight:800;color:var(--ink-2);white-space:nowrap}
.bcards{display:grid;gap:10px;max-height:calc(100vh - 250px);overflow-y:auto;padding:2px 4px 2px 2px;
  scrollbar-width:thin;scrollbar-color:oklch(0.84 0.02 285) transparent}
@media (max-width:1023px){ .bcards{max-height:none} }
.deal{background:var(--surface);border:1.5px solid var(--border);border-radius:13px;
  padding:13px 14px;display:grid;gap:8px}.deal .who{display:flex;align-items:center;gap:9px;min-width:0}
.deal .who b{font-weight:800;font-size:.875rem;line-height:1.25;display:block}
.deal .who .sub{display:block;color:var(--ink-2);font-size:.7188rem;font-weight:600}
.deal .amt{font-size:1.0313rem;font-weight:800;letter-spacing:-.01em}
.badge{font-size:.6875rem;font-weight:800;border-radius:99px;padding:2px 9px;justify-self:start}
.badge.rot{background:var(--amber-tint);color:var(--amber)}
.bleeg{border:2px dashed var(--border);border-radius:13px;text-align:center;padding:18px;
  font-weight:700;font-size:.8125rem;color:var(--ink-2)}

/* ── menu ── */
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.mitem{display:flex;align-items:center;gap:11px;background:var(--surface);
  border:1.5px solid var(--border);border-radius:14px;padding:13px 12px;font-weight:700;
  font-size:.8438rem;color:var(--ink);min-width:0}.mitem > span:nth-child(2){min-width:0}
.mitem .mi{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none}
.mitem .b{margin-left:auto;font-size:.7188rem;font-weight:800;background:var(--red);color:#fff;
  border-radius:99px;padding:2px 8px;flex:none}
.mitem small{display:block;font-size:.7188rem;color:var(--ink-2);font-weight:600}
.soon2{opacity:.75}

/* ── binnenkort ── */
.bk{padding:40px 24px;text-align:center;display:grid;justify-items:center;gap:12px;max-width:520px}
.bkic{width:68px;height:68px;border-radius:20px;background:var(--red-tint);display:grid;place-items:center}
.bk h1{font-size:1.25rem;font-weight:800}
.bk p{color:var(--ink-2);font-weight:500;max-width:40ch}

/* ── login ── */
.loginbody{display:grid;place-items:center;min-height:100vh;background:var(--side);padding:20px}
.loginwrap{width:100%;max-width:400px}
.logincard{background:var(--surface);border-radius:18px;padding:28px 24px}
.loginbrand{display:flex;align-items:center;gap:13px;margin-bottom:22px}
.loginbrand b{font-size:1.1875rem;font-weight:800;display:block;line-height:1.15}
.loginbrand small{color:var(--ink-2);font-weight:600;font-size:.8125rem}
.loginerr{background:var(--red-tint);color:var(--red);font-weight:700;font-size:.875rem;
  border-radius:11px;padding:11px 14px;margin-bottom:14px}
.loginform{display:grid;gap:14px}
.loginform label{font-weight:700;font-size:.8438rem;color:var(--ink-2);display:grid;gap:6px}
.loginform input{border:1.5px solid var(--border);border-radius:11px;padding:13px 15px;
  font-size:1rem;color:var(--ink);outline:none;width:100%}
.loginform input:focus{border-color:var(--red)}
.loginform button{background:var(--red);color:#fff;border:0;border-radius:11px;padding:14px;
  font-weight:800;font-size:.9688rem;cursor:pointer;margin-top:4px}
.loginfoot{text-align:center;color:var(--side-dim);font-weight:600;font-size:.8125rem;margin-top:16px}

/* ── planning layout ── */
.plgrid{display:grid;grid-template-columns:225px minmax(0,1fr);gap:16px;align-items:start}
.plside{display:grid;gap:12px;position:sticky;top:76px}
.plstat{padding:14px 16px;display:grid;gap:8px}
.plrow{display:flex;align-items:baseline;gap:8px}
.plrow b{font-size:1.25rem;font-weight:800;min-width:2ch}
.plrow span{color:var(--ink-2);font-weight:600;font-size:.8125rem}
.plrow.warn b{color:var(--amber)}
.plrow.ok b{color:var(--ok)}
.plfilter header{padding:10px 14px 6px;border-bottom:0}
.plfilter header h2{font-size:.7813rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.plnav{display:flex;gap:6px;padding:4px 12px 12px}
.plnav .f{flex:1;text-align:center;justify-content:center;display:inline-flex}
.plopts{display:grid;gap:2px;padding:2px 8px 10px}
.plopts a{padding:8px 10px;border-radius:9px;font-weight:700;font-size:.8438rem;color:var(--ink-2)}.plopts a.on{background:var(--red-tint);color:var(--red-deep)}
/* zijpaneel (dienst-detail zonder pagina-herlaad) */
#paneel{position:fixed;top:0;right:0;bottom:0;width:min(480px,100vw);background:var(--surface);
  border-left:1.5px solid var(--border);z-index:80;transform:translateX(105%);
  transition:transform .24s cubic-bezier(.2,.7,.3,1);overflow-y:auto;box-shadow:-8px 0 24px oklch(0.3 0.02 30 / .1)}
body.paneel-open #paneel{transform:none}
.paneelscrim{display:none}
body.paneel-open .paneelscrim{display:block;position:fixed;inset:0;background:oklch(0.2 0.02 30 / .35);z-index:75}
.pv{padding:18px 20px 26px;display:grid;gap:14px}
.pvkop{display:flex;align-items:flex-start;gap:12px}
.pvkop h1{font-size:1.125rem;font-weight:800;letter-spacing:-.01em;line-height:1.25}
.pvkop .icon-btn{margin-left:auto;flex:none}
.pvmeta{display:grid;border:1.5px solid var(--border);border-radius:12px;padding:6px 0}
.pvacties{display:flex;gap:8px;flex-wrap:wrap}
.pvacties .csend{padding:9px 14px}
.pvacties .rood{color:var(--red);border-color:oklch(0.9 0.04 26)}
.pvsectie h2{font-size:.875rem;font-weight:800;margin-bottom:6px}
.pvsectie h2 .n{color:var(--ink-2);font-weight:700;font-size:.7813rem}
.pvsectie .rows li{padding:8px 4px}
.pvsectie .rows li + li{border-top:1px solid var(--border)}
.pvvol{display:block;text-align:center;font-weight:700;font-size:.8438rem;color:var(--red-deep);
  border-top:1px solid var(--border);padding-top:12px}
.paneelfout{padding:30px;text-align:center;font-weight:700;color:var(--ink-2)}
.toasts{position:fixed;bottom:20px;left:50%;transform:translateX(-50%);z-index:95;display:grid;gap:8px;justify-items:center}
.toastf{background:var(--ink);color:#fff;font-weight:700;font-size:.875rem;padding:11px 20px;border-radius:99px}
.statsbar{display:flex;align-items:center;gap:16px;background:var(--surface);border:1.5px solid var(--border);
  border-radius:12px;padding:8px 16px;font-weight:600;font-size:.8125rem;color:var(--ink-2)}
.statsbar b{font-size:1rem;color:var(--ink);font-weight:800}
@media (prefers-reduced-motion: reduce){ #paneel{transition:none} }
/* ── PLANNING-APP: eigen identiteit (indigo, rail, kolomscroll) ── */
body.plapp{--pl:oklch(0.5 0.15 285);--pl-diep:oklch(0.42 0.14 285);--pl-tint:oklch(0.95 0.025 285)}
.plrail{display:none}
@media (min-width:1024px){
  body.plapp .side{display:none}
  body.plapp .app{grid-template-columns:78px 1fr}
  body.plapp .plrail{display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:14px 12px;
    background:linear-gradient(180deg, oklch(0.33 0.11 292), oklch(0.46 0.12 262));
    position:sticky;top:0;height:100vh;z-index:30;width:78px;overflow:hidden;
    transition:width .26s cubic-bezier(.22,.61,.36,1), box-shadow .26s}
  body.plapp .plrail:hover, body.plapp .plrail:focus-within{width:230px;box-shadow:16px 0 36px rgba(30,26,64,.2)}
}
@media (prefers-reduced-motion: reduce){ .plrail, .prlbl{transition:none} }
.prlogo{margin-bottom:8px}
.prlbl{color:#fff;font-weight:600;font-size:.8125rem;white-space:nowrap;opacity:0;transition:opacity .18s .05s}
.plrail:hover .prlbl, .plrail:focus-within .prlbl{opacity:1}
.plrail:hover .pruit .prlbl{opacity:.75}
.prtoggle{background:none;border:0;cursor:default;margin-bottom:6px}
.prnav{display:flex;flex-direction:column;gap:4px;width:100%;align-items:stretch}
.prtoggle, .prnav a, .pruit, .prterug{display:flex;align-items:center;justify-content:flex-start;gap:13px;
  height:44px;border-radius:12px;padding:0 14px;flex:none}
.pruit{opacity:.38;cursor:default}
.prterug{margin-top:auto;color:#cfd0f2}
/* ── menu-iconen: inline SVG, kleur volgt de link (actief/inactief) ── */
.nsvg{flex:none;fill:currentColor}
.nav .nsvg{width:21px;height:21px}
.plrail .nsvg{width:23px;height:23px}
/* plrail: inactieve items licht; ACTIEF = witte pill met diepe indigo (duidelijk andere kleur) */
.prnav a{color:#cfd0f2;text-decoration:none;transition:background .15s,color .15s}
.prnav a:hover{background:rgba(255,255,255,.12);color:#fff}
.prnav a.pr-on{background:#fff;color:var(--pl-diep)}
.prnav a.pr-on .prlbl{color:var(--pl-diep);opacity:1}
/* notificatie-badge op de bel */
.prnotif{position:relative}
.prbadge{position:absolute;top:4px;left:27px;min-width:17px;height:17px;padding:0 4px;border-radius:99px;
  background:#e5484d;color:#fff;font-size:.625rem;font-weight:800;display:flex;align-items:center;justify-content:center;
  line-height:1;box-shadow:0 0 0 2px rgba(38,30,74,.6);font-style:normal}
.prbadge.dot{min-width:0;width:9px;height:9px;padding:0;top:7px;left:31px}
/* "binnenkort"-module in de plantool */
.bkblok{display:grid;justify-items:center;text-align:center;gap:9px;padding:64px 20px;max-width:440px;margin:24px auto}
.bkblok b{font-size:1.0625rem;color:#3a3650}
.bkblok p{font-size:.875rem;color:#8a8598;line-height:1.55;margin:0}
/* kandidatentabel bij dienst aanmaken (CG-4-koloms: Naam+checkbox / Favoriet / Beoordeling / Beschikbaarheid) */
.invtabel .invnaamcel{display:inline-flex;align-items:center;gap:9px;cursor:pointer}
.invtabel .invnaamcel input{margin:0;flex:none}
.invtabel .col-fav{text-align:center;width:66px}
.invtabel .col-beoord{width:104px;white-space:nowrap}
.invtabel .favster{width:17px;height:17px;vertical-align:middle}
.invtabel .invleeg{color:#c7c3d6;font-weight:600}
.invtabel .mwsterren{font-size:.8125rem;color:#c67f0f;letter-spacing:1px}
.invtabel .mwsterren .leeg{color:#d8d4e4}
@media (max-width:740px){ .invtabel .col-fav, .invtabel .col-beoord{display:none} }

/* ── Urenregistratie: boxed weekrooster (medewerkers × dagen) + goedkeur-blokjes ── */
.urenzij{display:grid;gap:8px;margin-top:16px;padding-top:14px;border-top:1px solid #e8e6f0}
.urenzij .pvk{justify-content:center;text-align:center;width:100%}
.urengrid .kav2.mini{color:#fff;font-weight:800}
.urengrid .mwk.urenk{cursor:pointer;border:1.5px solid;border-left-width:1.5px;border-radius:5px;
  padding:4px 6px;transition:box-shadow .12s,transform .05s}
.urengrid .urenk b{font-weight:800;font-size:.6875rem}
.urengrid .urenk:hover{box-shadow:0 2px 9px rgba(35,33,54,.16)}
.urengrid .urenk:active{transform:translateY(1px)}
/* CG-stijl: witte cel met gekleurde RAND (omcirceld) — grijs=niet gelogd · teal=gelogd · rood=afwijkend */
.urengrid .urenk span{color:#8a8598}
.urengrid .urenk.st-nietgelogd{border-color:#d7d4e0;background:#fbfafd}
.urengrid .urenk.st-nietgelogd b{color:#8a8598}
.urengrid .urenk.st-gelogd{border-color:#2bb8c9;background:#fff}
.urengrid .urenk.st-gelogd b{color:#0c7c8c}
.urengrid .urenk.st-verschil{border-color:#e5484d;background:#fff}
.urengrid .urenk.st-verschil b{color:#b3272c}
/* comment-badge op cel met opmerking (zoals CG) */
.urengrid .urenk{position:relative}
.urenopm{position:absolute;right:4px;bottom:3px;display:inline-flex;align-items:center;gap:1px;
  font-size:.5938rem;font-weight:700;color:#6c687f;line-height:1}
.urenopm .ic{width:12px;height:12px}
/* rij-selectie checkbox + tweeregelige dag-headers (CG) */
.urenchk{display:inline-flex;align-items:center;flex:0 0 auto;cursor:pointer}
.urenchk input{width:15px;height:15px;accent-color:#12a9a0;cursor:pointer;margin:0}
.mwnaam.kop .urenchk{margin-right:9px}
.urengrid .mwnaam.kop{text-transform:none;font-size:.8125rem;font-weight:700;color:#4a4668;letter-spacing:0}
.urengrid .mwnaam .mwntxt{justify-content:center}
.urengrid .mwdag{display:flex;flex-direction:column;gap:0;justify-content:center;padding:7px 6px}
.urengrid .mwdag .dgn{font-size:.6875rem;font-weight:600;color:#8a8598;text-transform:none;letter-spacing:0}
.urengrid .mwdag .dgnr{font-size:1.375rem;font-weight:600;color:#b7b3c6;line-height:1.05}
.urengrid .mwdag.mw-vandaag .dgn{color:var(--pl)}
.urengrid .mwdag.mw-vandaag .dgnr{color:var(--pl)}
.mwrij.rij-sel{background:oklch(0.975 0.012 200)}
/* contextuele bulk-balk (verschijnt bij rij-selectie) */
.urenbulk{position:fixed;left:50%;bottom:22px;transform:translateX(-50%);z-index:130;display:flex;align-items:center;
  gap:14px;background:#232136;color:#fff;border-radius:13px;padding:10px 12px 10px 18px;box-shadow:0 12px 34px rgba(30,26,64,.32)}
.urenbulk[hidden]{display:none}
.ubtel{font-size:.8125rem;font-weight:600;color:#cfcde0}
.ubtel b{color:#fff;font-weight:800}
.ubknop{border:0;border-radius:9px;background:rgba(255,255,255,.12);color:#fff;font:inherit;font-weight:700;
  font-size:.8125rem;padding:8px 14px;cursor:pointer;transition:background .12s ease-out}
.ubknop:hover{background:rgba(255,255,255,.2)}
.ubknop.primair{background:#12a9a0}
.ubknop.primair:hover{background:#0e938b}
.urennieuw{margin:0 0 10px}
.urenlijstkaart{margin:0}
.urenpager{border-top:0;padding:12px 4px 6px;margin-top:4px}
/* Urenoverzicht-paneel: rechts uitschuivend, Gepland vs Werkelijk + Totaal/Afwijking */
.upscrim{position:fixed;inset:0;z-index:140;background:rgba(35,33,54,.38)}
.upscrim[hidden]{display:none}
.uppaneel{position:fixed;top:0;right:0;bottom:0;width:min(400px,100vw);z-index:145;background:#fff;
  box-shadow:-16px 0 40px rgba(30,26,64,.2);display:flex;flex-direction:column}
.uppaneel[hidden]{display:none}
.up-top{display:flex;align-items:center;gap:8px;padding:14px 16px;border-bottom:1px solid #eceaf3;flex:0 0 auto}
.up-goed{flex:1;border:0;border-radius:10px;background:#12a9a0;color:#fff;font:inherit;font-weight:800;font-size:.875rem;padding:10px 14px;cursor:pointer}
.up-goed:disabled{opacity:.45;cursor:default}
.up-opslaan{border:1.5px solid #d5d1e8;background:#fff;border-radius:10px;font:inherit;font-weight:700;font-size:.875rem;padding:10px 16px;cursor:pointer;color:#3a3650}
.up-opslaan:disabled{opacity:.45;cursor:default}
.up-x{background:none;border:0;cursor:pointer;padding:2px;flex:0 0 auto;display:grid;place-items:center;
  width:40px;height:40px;border-radius:10px;transition:background .12s}
.up-x:hover{background:#f2f1f6}
.up-x .ic{width:32px;height:32px}
.up-body{flex:1;min-height:0;overflow-y:auto;padding:18px 18px 28px}
.up-h{font-size:1.0625rem;font-weight:800;color:#232136;margin:0 0 12px}
.up-melding{padding:10px 12px;border-radius:10px;font-size:.8125rem;font-weight:600;line-height:1.4;margin-bottom:16px}
.up-melding.grijs{background:#f2f1f6;color:#6c687f}
.up-melding.aqua{background:#eefbfd;color:#0c7280}
.up-melding.rood{background:#fdf1f1;color:#b3272c}
.up-rij2{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:14px}
.up-veld{display:grid;gap:5px;margin-bottom:14px}
.up-veld label{font-size:.75rem;font-weight:700;color:#6c687f;text-transform:uppercase;letter-spacing:.03em}
.up-vast{background:#f4f3f8;border:1px solid #eceaf3;border-radius:9px;padding:9px 11px;font-weight:800;color:#232136;font-size:.9375rem}
.up-tijden{display:flex;align-items:center;gap:8px}
.up-tijden .up-tot{color:#b1acc4;font-weight:800;flex:0 0 auto}
.up-veld .cinput, .up-veld textarea{width:100%}
/* Werkelijk-tijdvakken: ruim, leesbaar, met zichtbaar klok-icoon (stap 15 min via pijltjes, per minuut handmatig) */
.uptijd{font-size:1.0625rem;font-weight:700;color:#232136;letter-spacing:.02em;padding:11px 12px;
  border:1.5px solid #d5d1e8;border-radius:10px;background:#fff;min-width:0}
.up-tijden .uptijd{flex:1 1 0;text-align:center}
.uptijd:focus{border-color:#7a73c9;box-shadow:0 0 0 3px rgba(122,115,201,.16);outline:0}
.up-veld textarea{resize:vertical;min-height:42px}
#up-afw{color:#0c7280}
.up-mw{display:flex;align-items:center;gap:11px;margin-top:8px;padding-top:16px;border-top:1px solid #f0eff5;
  text-decoration:none;border-radius:10px;transition:background .12s}
.up-mw:hover{background:#faf9fe}
.up-mw .kav2.mini{width:40px;height:40px;flex:0 0 auto;font-weight:800}
.up-mwtxt b{display:block;font-size:.9375rem;color:#232136}
.up-mwtxt span{font-size:.75rem;color:#8a8598;font-weight:600}
/* Locatie-blok in paneel: kaart-thumbnail met pin + adres (opent Google Maps) */
.up-loc{margin-top:16px;padding-top:16px;border-top:1px solid #f0eff5}
.up-loc[hidden]{display:none}
.up-loc>label{display:block;font-size:.75rem;font-weight:700;color:#6c687f;text-transform:uppercase;letter-spacing:.03em;margin-bottom:8px}
.up-lockaart{display:flex;align-items:center;gap:12px;text-decoration:none;padding:10px;border:1px solid #eceaf3;
  border-radius:11px;background:#faf9fe;transition:background .12s,border-color .12s}
.up-lockaart:hover{background:#f4f2fc;border-color:#ded9f0}
.up-locmap{flex:0 0 auto;width:54px;height:54px;border-radius:9px;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 30%,#e7f3f4,#daeef0 60%,#c7e6e9);
  border:1px solid #cce6e9;box-shadow:inset 0 0 0 3px #fff}
.up-locadres{font-size:.8438rem;font-weight:600;color:#c2591b;line-height:1.35}
.urengrid.dagmodus .mwkop, .urengrid.dagmodus .mwrij{grid-template-columns:210px minmax(220px,1fr);min-width:0}
@media (max-width:1023px){ .urengrid.dagmodus .mwkop, .urengrid.dagmodus .mwrij{grid-template-columns:130px minmax(160px,1fr)} }
/* boxed simpele plantool-pagina's (functies, binnenkort): content scrollt binnen de vaste pane */
.boxvul{padding:22px 28px 32px}
@media (min-width:1024px){ body.plkal .boxvul{flex:1 1 auto;min-height:0;overflow-y:auto} }
@media (max-width:740px){ .boxvul{padding:16px 16px 40px} }

/* ── Opdrachtgevers (plantool): klanten met locaties ── */
.oglijst{background:#fff;border:1px solid #e8e6f0;border-radius:12px;overflow:hidden;margin-bottom:14px}
.ogrij{display:flex;align-items:center;gap:14px;padding:0 20px;min-height:64px;border-bottom:1px solid #f0eff5;text-decoration:none;transition:background .12s}
.ogrij:last-child{border-bottom:0}
.ogrij:hover{background:#faf9fe}
.ogrij .kav2.mini{width:40px;height:40px;flex:0 0 auto;font-size:.75rem}
.oginfo{width:240px;flex:0 0 auto;min-width:0}
.oginfo b{display:block;font-size:.9063rem;font-weight:700;color:#232136;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ogsub{font-size:.75rem;color:#8a8598;font-weight:600}
.oglocs{display:flex;flex-direction:row;align-items:center;gap:9px;flex:1;min-width:0}
.ogloc{display:flex;align-items:center;gap:8px;font-size:.8125rem;color:#4a4668;font-weight:500;min-width:0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ogloc .pindot{width:7px;height:7px;border-radius:50%;background:#c9a44a;flex:0 0 auto}
.ogloc.meer{flex:0 0 auto;font-size:.6875rem;font-weight:700;color:#4f46c9;background:#eeecfb;border-radius:99px;padding:2px 9px}
.ogloc.leeg{color:#b9b4cc;font-weight:600}
.ogpijl{align-self:center;flex:0 0 auto;opacity:.6}
.ogleeg{text-align:center;padding:48px 8px}
.ogleeg b{display:block;font-size:.9375rem;color:#3a3650}
.ogleeg span{display:block;font-size:.8125rem;color:#9a96ad;margin-top:3px}

/* ── Opdrachtgever-profiel (plantool): kleur, top-3 adres-geheugen, recente diensten ── */
.tbterug{width:36px;height:36px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #e0ddea;
  background:#fff;border-radius:10px;text-decoration:none;flex:0 0 auto;margin-right:2px}
.tbterug:hover{background:#f4f3f8}
.ogprofvul{padding:20px 24px 34px}
/* kleur-kiezer in de profielkop */
.kleurkies{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:0 8px;max-width:320px}
.kleurswatch{width:22px;height:22px;border-radius:99px;border:2px solid #fff;box-shadow:0 0 0 1px #e0ddea;cursor:pointer;padding:0;transition:transform .08s}
.kleurswatch:hover{transform:scale(1.15)}
.kleurswatch.aan{box-shadow:0 0 0 2px #232136;transform:scale(1.1)}
/* 2-koloms onderbouw: kandidaten links, adressen/diensten rechts */
.ogcols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;margin-top:22px}
.ogcol{min-width:0}
.ogcol .ogprofh:first-child{margin-top:0}
/* voorkeur-/uitgesloten-kandidatenkaart */
.kandkaart{background:#fff;border:1px solid #e8e6f0;border-radius:14px;padding:16px 16px 14px;margin-bottom:16px}
.kandkop{display:flex;align-items:center;gap:9px;margin-bottom:3px}
.kandkop b{font-size:.9375rem;font-weight:800;color:#232136}
.kandtel{font-size:.6875rem;font-weight:800;padding:2px 8px;border-radius:99px}
.kandtel.voor{background:#e8fbf9;color:#0c8a80}
.kandtel.uit{background:#fdecec;color:#c53a3f}
.kanduitleg{font-size:.75rem;color:#8a8598;font-weight:500;margin:0 0 11px;line-height:1.4}
.kandlijst{display:flex;flex-direction:column;gap:2px;margin-bottom:10px}
.kandrij{display:flex;align-items:center;gap:10px;padding:6px 6px 6px 4px;border-radius:9px;transition:background .12s}
.kandrij:hover{background:#faf9fe}
.kandrij .kav2.mini{width:30px;height:30px;flex:0 0 auto;font-size:.625rem;color:#fff}
.kandnaam{flex:1;min-width:0;font-size:.8438rem;font-weight:700;color:#232136;text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kandnaam:hover{color:var(--pl);text-decoration:underline}
.kandweg{flex:0 0 auto;margin:0}
.kandweg button{width:26px;height:26px;border:0;background:none;color:#b9b4cc;font-size:1.25rem;line-height:1;cursor:pointer;border-radius:7px}
.kandweg button:hover{background:#fdecec;color:#e5484d}
.kandleeg{font-size:.8125rem;color:#a29db6;font-weight:500;padding:6px 4px 10px}
.kandadd select.cinput{width:100%;cursor:pointer}
/* eigen kleur-picker in profielkop */
.kleurpick{display:inline-flex;align-items:center;gap:10px;cursor:pointer;border:1px solid #e8e6f0;border-radius:11px;padding:7px 12px 7px 8px;background:#fff}
.kleurpick:hover{background:#faf9fe}
.kleurpick input[type=color]{width:34px;height:34px;border:0;padding:0;background:none;cursor:pointer;border-radius:9px}
.kleurpick input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.kleurpick input[type=color]::-webkit-color-swatch{border:1px solid #e0ddea;border-radius:9px}
.kleurpicktxt{display:flex;flex-direction:column;line-height:1.15}
.kleurpicktxt b{font-size:.75rem;font-weight:700;color:#232136}
.kleurpicktxt small{font-size:.6875rem;color:#8a8598;font-variant-numeric:tabular-nums;text-transform:uppercase}
/* typbare medewerker-zoeker (voorkeur/uitgesloten) */
.kandzoek{position:relative}
.kandinput{width:100%}
.kandopts{position:absolute;left:0;right:0;top:calc(100% + 4px);z-index:40;background:#fff;border:1px solid #e6e3f0;
  border-radius:11px;box-shadow:0 12px 30px rgba(30,26,64,.16);overflow:hidden;max-height:264px;overflow-y:auto}
.kandopts[hidden]{display:none}
.kandopt{display:block;width:100%;text-align:left;border:0;background:none;font:inherit;font-size:.8438rem;font-weight:600;
  color:#232136;padding:9px 13px;cursor:pointer}
.kandopt:hover{background:#f2f1fb;color:var(--pl)}
.kandgeen{display:block;padding:10px 13px;font-size:.8125rem;color:#a29db6}
/* live-filter laadflits */
#og-resultaat{transition:opacity .12s}
#og-resultaat.laadt{opacity:.5}

/* ── opdrachtgevers-lijst: kopbalk met sorteer-dropdown (Naam) + Locaties ── */
.oglijst-kop{display:flex;align-items:center;padding:9px 20px;border-bottom:1px solid #e8e6f0;background:#fbfafd;position:sticky;top:0;z-index:3}
.oglijst-kop .ogsort{width:284px;flex:0 0 auto}
.ogsort{position:relative}
.ogsort>summary{list-style:none;display:inline-flex;align-items:center;gap:5px;cursor:pointer;font-size:.75rem;font-weight:800;
  color:#4a4668;text-transform:uppercase;letter-spacing:.03em;padding:4px 8px 4px 48px;border-radius:8px}
.ogsort>summary::-webkit-details-marker{display:none}
.ogsort>summary:hover{background:#f0eff5}
.ogsort[open]>summary .ogsortcaret{transform:rotate(180deg)}
.ogsortcaret{opacity:.65;transition:transform .12s}
.ogsortmenu{position:absolute;left:40px;top:calc(100% + 5px);z-index:30;background:#fff;border:1px solid #e6e3f0;border-radius:11px;
  box-shadow:0 14px 34px rgba(30,26,64,.17);padding:5px;min-width:196px;display:flex;flex-direction:column}
.ogsortmenu button{text-align:left;border:0;background:none;font:inherit;font-size:.8125rem;font-weight:600;color:#232136;padding:9px 12px;border-radius:8px;cursor:pointer}
.ogsortmenu button:hover{background:#f2f1fb}
.ogsortmenu button.on{background:#eef0fb;color:var(--pl);font-weight:800}
.ogkop-loc{flex:1;font-size:.75rem;font-weight:700;color:#8a8598;text-transform:uppercase;letter-spacing:.03em}
/* opdrachtgever-avatar: pill (6px radius) i.p.v. rond, iets kleiner */
.kav2.ogav{border-radius:6px}
.ogrij .kav2.ogav{width:34px;height:34px;font-size:.6875rem}
/* 'nog geen locaties' — open pin (wit met stroke) ervoor */
.pindot.open{background:#fff;border:1.5px solid #cfcbdb;width:9px;height:9px;box-sizing:border-box}

/* ── opdrachtgever-profiel: strakke panelen ── */
.ogpanel{background:#fff;border:1px solid #e8e6f0;border-radius:13px;overflow:hidden;margin-bottom:14px}
.ogpanelkop{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid #f0eff5}
.ogpanelkop b{font-size:.875rem;font-weight:800;color:#232136}
.ogpanel .kanduitleg{margin:0;padding:10px 15px 2px}
.ogpanel .kandlijst{padding:6px 10px 4px}
.ogpanel .kandadd{padding:6px 12px 12px}
.adrlijst{display:flex;flex-direction:column}
.adrrij{display:flex;align-items:center;gap:11px;padding:10px 15px;border-bottom:1px solid #f4f3f8}
.adrrij:last-child{border-bottom:0}
.adrrij:hover{background:#faf9fe}
.adrrij .oginfo{flex:1;width:auto;min-width:0}
.adrrij .oginfo b{font-size:.8438rem;font-weight:700}
.adrweg{flex:0 0 auto;width:26px;height:26px;border:0;background:none;color:#c3bed4;font-size:1.25rem;line-height:1;cursor:pointer;border-radius:7px}
.adrweg:hover{background:#fdecec;color:#e5484d}
.adrrij .ogdatum{width:44px}
.ogprofkop{padding:15px 18px}
.kav2.groot.ogav{border-radius:6px;width:52px;height:52px;font-size:1.25rem}
@media (max-width:960px){ .ogcols{grid-template-columns:1fr} }
.kav2.groot{width:58px;height:58px;font-size:1.375rem;font-weight:800;color:#fff;flex:0 0 auto;border-radius:16px}
.ogprofkop{display:flex;align-items:center;gap:16px;background:#fff;border:1px solid #e8e6f0;border-radius:14px;
  padding:18px 20px;margin-bottom:22px}
.ogprofmeta{flex:1;min-width:0}
.ogprofmeta h3{font-size:1.25rem;font-weight:800;color:#232136;margin:0 0 2px}
.ogprofsub{font-size:.8438rem;color:#8a8598;font-weight:600}
.ogprofstatus{flex:0 0 auto;font-size:.75rem;font-weight:800;padding:5px 12px;border-radius:99px}
.ogprofstatus.ok{background:#e8fbf9;color:#0c8a80}
.ogprofstatus.uit{background:#f2f1f6;color:#8a8598}
.ogprofh{font-size:.9375rem;font-weight:800;color:#232136;margin:22px 0 11px;display:flex;align-items:baseline;gap:9px}
.ogprofh span{font-size:.75rem;font-weight:600;color:#a29db6;text-transform:none}
.adrgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.adrkaart{position:relative;display:flex;align-items:center;gap:12px;background:#fff;border:1px solid #e8e6f0;
  border-radius:13px;padding:15px 16px 15px 15px;text-decoration:none;transition:box-shadow .12s,border-color .12s,transform .05s}
.adrkaart:hover{box-shadow:0 8px 22px rgba(35,33,54,.1);border-color:#ded9f0}
.adrkaart:active{transform:translateY(1px)}
.adrrang{position:absolute;top:-9px;left:-9px;width:26px;height:26px;border-radius:99px;background:#12a9a0;color:#fff;
  font-size:.8125rem;font-weight:800;display:grid;place-items:center;box-shadow:0 2px 6px rgba(18,169,160,.4)}
.adrkaart:nth-child(2) .adrrang{background:#5b54c9;box-shadow:0 2px 6px rgba(91,84,201,.4)}
.adrkaart:nth-child(3) .adrrang{background:#8a8598;box-shadow:0 2px 6px rgba(138,133,152,.4)}
.adrmap{width:44px;height:44px;flex:0 0 auto;border-radius:11px;display:grid;place-items:center;
  background:radial-gradient(circle at 30% 30%,#eaf3ec,#dfeee4 60%,#cfe6d6);border:1px solid #d3e6d8}
.adrmap.klein{width:34px;height:34px;border-radius:9px}
.adrinfo{min-width:0}
.adrinfo b{display:block;font-size:.875rem;color:#232136;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.adrinfo span{font-size:.75rem;color:#8a8598;font-weight:600}
.adrleeg{background:#faf9fe;border:1px dashed #ded9f0;border-radius:12px;padding:18px;font-size:.8438rem;color:#8a8598;font-weight:500}
.ogrij.static{cursor:default}
.ogrij.static:hover{background:#fff}
.adrmaps-link{flex:0 0 auto;align-self:center;font-size:.75rem;font-weight:700;color:#4f46c9;text-decoration:none}
.ogdatum{flex:0 0 auto;width:46px;font-size:.8125rem;font-weight:800;color:#4a4668;font-variant-numeric:tabular-nums}
@media (max-width:860px){ .adrgrid{grid-template-columns:1fr} }
@media (max-width:740px){
  .ogrij{flex-wrap:wrap;gap:10px}
  .oginfo{min-width:0;flex:1}
  .oglocs{flex:1 1 100%}
  .ogpijl{display:none}
}

/* ── Projecten (plantool) ── */
.projnieuw{display:grid;gap:9px;margin-top:16px;padding-top:14px;border-top:1px solid #e8e6f0}
.projnieuw-kop{font-size:.8125rem;color:#3a3650}
.projkleurrij{display:flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:600;color:#3a3650}
.projkleur{width:46px;height:30px;border:1px solid #e4e2ee;border-radius:8px;padding:2px;cursor:pointer;background:#fff}
.projnieuw .pvk{justify-content:center}
.projgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px}
.projkaart{display:block;background:#fff;border:1px solid #e8e6f0;border-radius:12px;padding:16px;text-decoration:none;
  transition:box-shadow .12s,border-color .12s}
.projkaart:hover{box-shadow:0 4px 14px rgba(35,33,54,.1);border-color:#d5d1e8}
.projdot{display:inline-block;width:12px;height:12px;border-radius:50%;margin-bottom:8px}
.projdot.groot{width:14px;height:14px;margin:0 9px 0 0;vertical-align:middle;margin-bottom:0}
.projkaart b{display:block;font-size:.9688rem;color:#232136;line-height:1.25}
.projklant{font-size:.8125rem;color:#6c687f;font-weight:600}
.projmeta{display:flex;flex-wrap:wrap;gap:4px 12px;margin-top:10px;font-size:.75rem;color:#8a8598;font-weight:600}
body.plkal .plsolo{flex:1 1 auto;min-height:0}

/* ── Notificaties + Instellingen (plantool) ── */
.notifgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;margin-bottom:24px}
.notifkaart{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e8e6f0;border-radius:12px;
  padding:15px 16px;text-decoration:none;transition:box-shadow .12s,border-color .12s}
.notifkaart:hover{box-shadow:0 4px 14px rgba(35,33,54,.1);border-color:#d5d1e8}
.notifkaart.leeg{opacity:.6}
.notific{width:44px;height:44px;border-radius:11px;display:grid;place-items:center;flex:0 0 auto}
.notific.amber{background:#fdf2e2}.notific.indigo{background:#eeedf9}.notific.rood{background:#fbecec}
.notiftxt{flex:1;min-width:0}
.notiftxt b{display:block;font-size:.9375rem;color:#232136;line-height:1.25}
.notiftxt span{font-size:.8125rem;color:#8a8598;font-weight:500}
.notifpijl{flex:0 0 auto;opacity:.7}
.notifkop{font-size:1.0625rem;font-weight:800;color:#232136;margin:0 0 12px}
.notiflijst{background:#fff;border:1px solid #e8e6f0;border-radius:12px;overflow:hidden}
.notifrij{display:flex;align-items:center;gap:12px;padding:13px 16px;border-bottom:1px solid #f0eff5;text-decoration:none}
.notifrij:last-child{border-bottom:0}.notifrij:hover{background:#faf9fe}
.notifrij .orgdot{width:9px;height:9px;flex:0 0 auto}
/* Instellingen */
.instbedrijf{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e8e6f0;border-radius:12px;padding:16px 18px;margin-bottom:20px}
.instbedrijf .mark.big{background:#4f46c9}
.instbedrijf b{font-size:1.0625rem;font-weight:800;display:block;color:#232136}
.instbedrijf span{font-size:.8125rem;color:#8a8598;font-weight:600}
.instgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px}
.instmod{display:block;background:#fff;border:1px solid #e8e6f0;border-radius:12px;padding:18px;text-decoration:none;transition:box-shadow .12s,border-color .12s}
.instmod:hover{box-shadow:0 4px 14px rgba(35,33,54,.1);border-color:#d5d1e8}
.instic{width:46px;height:46px;border-radius:12px;background:#eeedf9;display:grid;place-items:center;margin-bottom:11px}
.instmod b{display:block;font-size:.9688rem;color:#232136}
.instmod span{font-size:.8125rem;color:#6c687f;font-weight:600}
/* Rapportage */
.rapgen{background:#fff;border:1px solid #e8e6f0;border-radius:12px;padding:18px;margin-bottom:16px}
.rapkop{display:block;font-size:1rem;font-weight:800;color:#232136;margin-bottom:12px}
.rapvelden{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px}
.rapvelden .dfveld{display:grid;gap:5px}
.rapvelden label{font-size:.8125rem;font-weight:700;color:#3a3650}
.rapacties{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.rapkpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:22px}
.rapkpi{background:#fff;border:1px solid #e8e6f0;border-radius:12px;padding:16px 18px}
.rapkpi span{font-size:.8125rem;color:#8a8598;font-weight:600;display:block}
.rapkpi b{font-size:1.5rem;font-weight:800;color:#232136;letter-spacing:-.01em}
#uren-datum{position:relative;overflow:hidden}
#uren-datumkies{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:0;padding:0}
@media (max-width:1023px){
  .urenzij{margin-top:12px}
  body.plkal .urengrid{overflow-x:auto}
}
/* CRM-zijbalk: zelfde indigo-overlay als de planning-rail, maar permanent open */
.side{background:linear-gradient(180deg, oklch(0.33 0.11 292), oklch(0.46 0.12 262));
  --side-2:oklch(0.43 0.09 288);--side-dim:oklch(0.87 0.038 285);--side-ink:oklch(0.98 0.005 285)}
.nav a.on{background:#fff;color:oklch(0.42 0.14 285)}
.nav a.on .cnt{background:oklch(0.5 0.15 285)}
.side .mark{background:#fff;color:oklch(0.42 0.14 285)}
.side .av{background:oklch(0.5 0.15 285)}
body.plapp .viewpills a.on{background:var(--pl)}
body.plapp .btn-new, body.plapp .csend.groot, body.plapp .stapnr{background:var(--pl)}
body.plapp .csend{background:var(--pl-diep)}
body.plapp .dagchip.on{border-color:var(--pl);background:var(--pl-tint)}
body.plapp .dagchip.on b, body.plapp .dagchip.on span{color:var(--pl-diep)}
body.plapp .dagchip em{background:var(--pl)}
body.plapp .dh-vandaag::after{background:var(--pl)}
body.plapp .dh-vandaag b, body.plapp .dh-vandaag span{color:var(--pl-diep)}
body.plapp .plopts a.on, body.plapp .fset{background:var(--pl-tint)}
body.plapp .plopts a.on, body.plapp .fset a, body.plapp .fset button{color:var(--pl-diep)}
body.plapp .fopt input{accent-color:var(--pl)}@media (min-width:1024px){ body.plapp .top{display:none} }
.pltoolbar .acties{margin-left:auto;width:auto;min-width:120px;max-width:250px}
.pltoolbar .wknav{margin-left:0}
body.plapp .panel > header a, body.plapp .card > header a{color:var(--pl-diep)}
/* per dag zelf scrollen */
.bandcel{overflow-y:auto;scrollbar-width:thin;scrollbar-color:oklch(0.84 0.02 280) transparent}
.bandgrid.bopen .bandcel{max-height:200px}
.bandgrid.binge .bandcel{max-height:calc(100vh - 440px);min-height:320px}
/* kaarten strakker/compacter */
.cgc .strip{height:5px}
.cgt{font-size:.7188rem;padding:6px 8px 0}
.cgo{padding:3px 8px 0}
.cgo > span{font-size:.6563rem}
.cgw{padding:4px 8px 0}
.cgw .wnaam{font-size:.6563rem}
.cgw .avmini{width:16px;height:16px;font-size:.4688rem}
.cgtijd{font-size:.6563rem;padding:4px 8px 7px}/* paneel: professionele lijsten en knoppen */
.pvtop{display:flex;align-items:center;gap:10px}
.pvbemand{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.8125rem;color:var(--ink)}
.pvbemand i{width:12px;height:12px;border-radius:3px;background:var(--pl, oklch(0.5 0.15 285))}
.pvk.rand{border:1.5px solid var(--pl, var(--border));color:var(--pl-diep, var(--ink));background:var(--surface)}
.pvk.rand-rood{border:1.5px solid var(--red);color:var(--red);background:var(--surface)}
.pvtitel h1{font-size:1rem;font-weight:800;letter-spacing:-.01em;line-height:1.3}
.pvfunctie{font-weight:700;font-size:.8438rem;margin-bottom:4px}
.pvacties2{display:flex;gap:8px;border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:12px 0}
.pvtekst{font-size:.8438rem;font-weight:500;line-height:1.55;white-space:pre-line;overflow-wrap:anywhere}
.pvtekst.geheim{margin-top:8px;background:var(--amber-tint);border-radius:10px;padding:10px 12px}
.pvsluit{margin-left:auto;flex:none;width:38px;height:38px;border:1.5px solid var(--border);
  background:var(--surface);border-radius:10px;display:grid;place-items:center;cursor:pointer}
.pvknoppen{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.pvk{display:inline-flex;align-items:center;gap:7px;font:inherit;font-weight:700;font-size:.8125rem;
  padding:9px 14px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);
  cursor:pointer;color:var(--ink)}.pvk.primair{background:var(--pl, var(--ink));border-color:transparent;color:#fff}
.pvk.gevaar{color:var(--red);border-color:transparent;background:none;margin-left:auto}.pvsectie h2{display:flex;align-items:baseline;gap:8px;font-size:.75rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.05em;color:var(--ink-2);margin-bottom:8px}
.klijst{list-style:none;display:grid}
.klijst li{display:flex;align-items:center;gap:11px;padding:9px 2px;min-height:52px}
.klijst li + li{border-top:1px solid var(--border)}
.kav2{display:grid;place-items:center;width:34px;height:34px;border-radius:99px;color:#fff;
  font-weight:800;font-size:.6875rem;flex:none}
.kinfo{display:grid;gap:1px;min-width:0;flex:1}
.kinfo b{font-weight:700;font-size:.875rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kinfo small{color:var(--ink-2);font-weight:600;font-size:.7188rem;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kk{font-style:normal;font-weight:700;font-size:.625rem;border-radius:99px;padding:1px 8px}
.kk.ok{background:var(--ok-tint);color:var(--ok)}
.kk.warn{background:var(--amber-tint);color:var(--amber)}
.kk.rood{background:var(--red-tint);color:var(--red)}
.kplus{flex:none;width:32px;height:32px;border-radius:99px;border:0;cursor:pointer;
  background:var(--pl, var(--ink));color:#fff;font-weight:800;font-size:1.0625rem;line-height:1}.kmin{flex:none;width:30px;height:30px;border-radius:99px;border:1.5px solid var(--border);
  background:var(--surface);color:var(--ink-2);font-weight:800;cursor:pointer}.kleeg{color:var(--ink-2);font-weight:600;font-size:.8125rem;padding:10px 2px}
.kzoekveld{display:flex;align-items:center;gap:9px;background:var(--bg);border:1.5px solid var(--border);
  border-radius:11px;padding:10px 13px;margin-bottom:6px}
.kzoekveld input{border:0;outline:0;background:none;flex:1;font:inherit;font-weight:600;min-width:0}
.kscroll{max-height:44vh;overflow-y:auto;scrollbar-width:thin}
#paneel{width:min(430px,100vw)}
@media (max-width:1023px){ #paneel{width:100vw;border-left:0} .kscroll{max-height:none} }
.pv{padding:14px 16px 22px;gap:12px}
.pvkop h1{font-size:1rem}
.pvmeta .prop{padding:6px 14px}
.pvmeta .prop label{width:86px;font-size:.7188rem}
.pvmeta .prop b{font-size:.8125rem}
.pvacties .f, .pvacties .csend{font-size:.7813rem;padding:8px 12px}
.pvsectie .rows li{padding:7px 2px}
.pvsectie .pav{width:28px;height:28px;font-size:.625rem}
#kandidaten .csend{width:30px;height:30px;padding:0;border-radius:99px;justify-content:center}
#kandidaten .rows .sub{font-size:.7188rem}

/* ── filterbalk (CG-referentie) ── */
.fsacties{display:flex;gap:8px}
.fsknop{flex:1;font:inherit;font-weight:700;font-size:.8125rem;padding:9px 10px;border-radius:9px;
  border:1.5px solid var(--border);background:var(--surface);cursor:pointer}.fsalles{font:inherit;text-align:left;background:none;border:0;cursor:pointer;font-weight:700;
  font-size:.8125rem;color:var(--ink);text-decoration:underline;padding:2px 2px 6px}
.fsets{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:4px}
.fset{display:inline-flex;align-items:center;gap:2px;background:var(--red-tint);border-radius:99px;padding:3px 4px 3px 11px}
.fset a{font-weight:700;font-size:.75rem;color:var(--red-deep)}
.fset button{border:0;background:none;cursor:pointer;font-weight:800;color:var(--red-deep);font-size:.8125rem;padding:0 6px}
.fgroep{border-top:1px solid var(--border)}
.fgroep summary{list-style:none;cursor:pointer;display:flex;align-items:center;font-weight:700;
  font-size:.875rem;padding:13px 2px}
.fgroep summary::-webkit-details-marker{display:none}
.fgroep summary::after{content:"›";margin-left:auto;font-weight:800;color:var(--ink-2);
  transition:transform .15s}
.fgroep[open] summary::after{transform:rotate(90deg)}
.fopts{display:grid;gap:7px;padding:2px 2px 14px}
.fopt{display:flex;align-items:center;gap:9px;font-weight:400;font-size:.8438rem;cursor:pointer}
.fopt input{accent-color:var(--red);width:16px;height:16px}
.fopt.uit{color:var(--ink-2);font-style:italic;cursor:default}
.plside{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:14px;gap:8px}

/* ── CG-blauwdruk: canvas, dagkoppen, swimlanes, kaarten ── */
.pltitel{display:flex;align-items:center;gap:10px}
.pltitel h2{font-size:1.0625rem;font-weight:800;letter-spacing:-.01em}
.wkbadge{background:var(--bg);border:1.5px solid var(--border);border-radius:8px;padding:3px 10px;font-weight:700;font-size:.75rem;color:var(--ink-2)}
.acties{width:auto;padding:9px 13px;border-radius:10px;font-weight:700;font-size:.8125rem;border:1.5px solid var(--border);background:var(--surface)}
.plancanvas{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;overflow:hidden}
.dhrow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));border-bottom:1px solid var(--border);background:oklch(0.985 0.002 40)}
.plancanvas.dagmodus .dhrow, .plancanvas.dagmodus .bandgrid{grid-template-columns:minmax(0,1fr)}
.dh{display:flex;align-items:baseline;gap:6px;padding:9px 12px;border-left:1px solid var(--border)}
.dh:first-child{border-left:0}
.dh span{font-size:.7188rem;font-weight:400;color:var(--ink-2);text-transform:lowercase}
.dh b{font-size:.875rem;font-weight:400;color:var(--ink-2)}
.dh-vandaag{position:relative}
.dh-vandaag::after{content:'';position:absolute;left:10%;right:10%;bottom:-1px;height:3px;background:var(--cobalt);border-radius:3px 3px 0 0}
.dh-vandaag b{color:var(--cobalt);font-size:1rem}
.dh-vandaag span{color:var(--cobalt);font-weight:400}
.dh-weekend span, .dh-weekend b{opacity:1}
.bandkop{grid-column:1/-1;text-align:center;background:oklch(0.955 0.004 40);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:6px 10px;font-weight:700;font-size:.7813rem;color:var(--ink-2)}
.bandgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));align-items:start;min-height:52px}
.bandcel{padding:3px;border-left:1px solid var(--border);min-height:56px;display:grid;gap:3px;align-content:start}
.bandcel:first-child{border-left:0}
.cgc{display:grid;background:var(--surface);border:1px solid oklch(0.895 0.007 40);border-radius:0;overflow:hidden;min-width:0;cursor:pointer;transition:box-shadow .12s, border-color .12s}.cgc .strip{height:7px;background:oklch(0.86 0.008 260)}
.cgc.st-concept{border-style:dashed}
/* st-afgerond fade verwijderd (Ayham 2026-07-08): oude diensten niet meer wazig */
.cgt{font-weight:700;font-size:.75rem;line-height:1.25;padding:7px 9px 0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.cgo{display:flex;align-items:center;gap:6px;padding:4px 9px 0;min-width:0}
.cgo > span{font-size:.6875rem;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.obadge{display:inline-grid;place-items:center;width:17px;height:17px;border-radius:99px;font-style:normal;font-weight:800;font-size:.5313rem;flex:none;letter-spacing:.02em}
.cgw{display:flex;align-items:center;gap:6px;padding:5px 9px 0;min-width:0}
.cgw .avmini{width:18px;height:18px;font-size:.5rem;margin:0;border:0}
.cgw .wnaam{font-size:.6875rem;font-weight:600;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.plusn{font-style:normal;background:var(--side);color:#fff;font-weight:800;font-size:.5938rem;border-radius:5px;padding:2px 5px;flex:none}
.cgw.leegw{font-size:.6875rem;font-weight:600;color:var(--ink-2);font-style:italic}
.cgtijd{display:flex;align-items:center;font-size:.6875rem;font-weight:600;color:var(--ink-2);padding:5px 9px 8px}
.bzt{font-style:normal;margin-left:auto;font-weight:800;font-size:.625rem;color:var(--amber)}
.bzt.vol{color:var(--ok)}
.verberg-smal{display:inline}
.pltoolbar{display:flex;align-items:center;gap:14px;margin-bottom:14px;flex-wrap:wrap}
.tbmid{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.viewpills{display:flex;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:3px;gap:2px}
.viewpills a, .viewpills span{padding:8px 16px;border-radius:9px;font-weight:700;font-size:.8438rem;color:var(--ink-2)}
.viewpills a.on{background:var(--ink);color:#fff}
.viewpills .uit{opacity:.45;cursor:default}
.wknav{display:flex;align-items:center;gap:8px;margin-left:auto}
.wknav .f{display:inline-flex;align-items:center;border:1.5px solid var(--border);background:var(--surface);
  padding:0 16px;height:38px;border-radius:10px;font-weight:700;font-size:.8438rem}.hamb-pl{display:none}
.wknav b{font-weight:800;font-size:.9375rem;min-width:72px;text-align:center}
.wkpijl{display:grid;place-items:center;width:38px;height:38px;border:1.5px solid var(--border);background:var(--surface);border-radius:10px;font-weight:800;font-size:1.0625rem}.wkgrid.dagmodus{grid-template-columns:minmax(0,1fr)}
.wkgrid.dagmodus .wkcard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px}
.dagchips{display:none}
.orgdot{display:inline-block;width:9px;height:9px;border-radius:99px;margin-right:6px;flex:none;vertical-align:1px}
.avmini{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:99px;background:var(--side);color:#fff;font-size:.5938rem;font-weight:800;border:1.5px solid var(--surface);margin-right:-5px}
.avmini.meer{background:var(--bg);color:var(--ink-2);border-color:var(--border)}
/* ── planning weekgrid ── */
.wkgrid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;align-items:start}
.wkdag > header{display:flex;align-items:baseline;gap:7px;padding:4px 6px 8px;position:sticky;top:68px;background:var(--bg);z-index:5}
.wkdag > header b{font-size:.875rem;font-weight:800;text-transform:uppercase}
.wkdag > header span{color:var(--ink-2);font-weight:700;font-size:.7813rem}
.wkdag > header em{margin-left:auto;font-style:normal;color:var(--ink-2);font-weight:700;font-size:.6875rem;background:var(--surface);border:1px solid var(--border);border-radius:99px;padding:1px 7px}
.vandaagcol > header b{color:var(--red)}
.vandaagcol{background:oklch(0.965 0.012 26);border-radius:14px;padding:0 5px 5px}
.vandaagcol > header{background:transparent}
.wkdag:nth-child(6) > header b, .wkdag:nth-child(7) > header b{opacity:.55}
.wkcard{display:grid;gap:2px;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;padding:8px 10px;margin-bottom:7px;min-width:0;box-shadow:0 1px 2px oklch(0.3 0.02 30 / .05)}
.wkcard b{font-weight:800;font-size:.8125rem;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkcard .sub{color:var(--ink-2);font-size:.7188rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wkcard .tijd{font-weight:800;font-size:.75rem}
.wkcard .voet{display:flex;gap:5px;flex-wrap:wrap;margin-top:2px}
.wkcard .voet .chip{font-size:.6563rem;padding:2px 8px}.wkcard.eigen.st-concept{border-style:dashed}
.wkcard.extern{opacity:.62;background:var(--bg)}
.wkleeg{color:var(--ink-2);text-align:center;padding:14px 0;font-weight:700;border:1.5px dashed var(--border);border-radius:12px}
.orgfilter{margin-left:auto}
.orgfilter .cinput{padding:8px 12px;border-radius:99px;font-weight:700;font-size:.8125rem;border:1.5px solid var(--border);background:var(--surface)}
/* dienst-formulier (stappen-layout) */
.dform2{display:grid;gap:14px;max-width:980px}
.stap{background:var(--surface);border:1.5px solid var(--border);border-radius:14px;
  display:grid;grid-template-columns:280px minmax(0,1fr);gap:20px;padding:20px 22px}
.stapkop{display:flex;gap:13px;align-items:flex-start}
.stapnr{display:grid;place-items:center;width:30px;height:30px;border-radius:99px;background:var(--red);
  color:#fff;font-weight:800;font-size:.875rem;flex:none}
.stapkop h2{font-size:.9688rem;font-weight:800}
.stapkop p{color:var(--ink-2);font-size:.8125rem;font-weight:500;margin-top:3px;max-width:30ch}
.stapvelden{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;align-content:start}
.dfveld.breed{grid-column:1/-1}
.functieveld{grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.ftel{background:var(--bg);border:1.5px solid var(--border);border-radius:12px;padding:12px 14px}
.ftel .fnaam{font-weight:800;font-size:.875rem;color:var(--ink)}
.ftel .cinput{font-size:1.125rem;font-weight:800;text-align:center}
.dfbalk{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;justify-content:flex-end;
  background:var(--surface);border:1.5px solid var(--border);border-radius:14px;padding:12px 16px;
  box-shadow:0 -4px 14px oklch(0.3 0.02 30 / .07)}
@media (max-width:1023px){ .stap{grid-template-columns:1fr;gap:12px} .dfbalk{position:static} }
/* dienst-formulier (oud) */
.dform{padding:18px 20px;display:grid;gap:6px}
.dfgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px}
.dfveld{display:grid;gap:6px;font-weight:700;font-size:.8125rem;color:var(--ink-2)}
.dfveld.groot{grid-column:span 2}
.dfveld .cinput{width:100%}
.dfveld.chk{display:flex;align-items:center;gap:9px;align-self:end;color:var(--ink)}
.dfsectie{margin-top:14px;border-top:1px solid var(--border);padding-top:14px;display:grid;gap:12px}
.dfsectie h2{font-size:.9375rem;font-weight:800}
.dfacties{display:flex;align-items:center;gap:12px;margin-top:16px}
@media (max-width:1279px){ .wkgrid{grid-template-columns:repeat(2,minmax(0,1fr))} }

/* ── mobiel ── */
.mobsearch{display:none}
@media (max-width:1279px){
  .krec{grid-template-columns:280px minmax(0,1fr)}
  .krechts{grid-column:1 / -1;grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1023px){
  html{font-size:16.5px}
  .app{grid-template-columns:1fr}
  .side{position:fixed;top:0;bottom:0;left:0;width:294px;z-index:70;height:100dvh;
    transform:translateX(-104%);transition:transform .22s cubic-bezier(.2,.7,.3,1)}
  body.nav-open .side{transform:none}
  body.nav-open .scrim{display:block;position:fixed;inset:0;background:oklch(0.2 0.02 30 / .45);z-index:65}
  body.nav-open{overflow:hidden}
  .sideclose{display:grid;place-items:center}
  .hamb{display:grid}
  .top{padding:11px 16px;gap:10px}
  .top .search{display:none}
  .m-brand{display:flex;align-items:center;gap:10px;margin-right:auto;font-weight:800;font-size:1.0625rem}
  .m-brand .mark{width:38px;height:38px}
  .btn-new span{display:none}
  .btn-new{width:44px;height:44px;padding:0;justify-content:center}
  .newpanel{position:fixed;left:12px;right:12px;top:70px;min-width:0}
  .syncform{margin-left:0}
  .wrap{padding:16px 16px 48px}
  .synct{display:none}
  .hellobtn{display:none}
  .alert{padding:12px 14px;gap:11px}
  .alert b{font-size:.875rem}
  .aic{width:34px;height:34px;border-radius:10px}
  .alerthead{padding:12px 14px}
  .toast{margin:12px 16px 0}
  .mobsearch{display:flex;margin-bottom:14px}
  .hello h1{font-size:1.3125rem}
  .kpis{grid-template-columns:1fr 1fr}
  .kpi{padding:14px 15px;gap:11px}
  .kpi:nth-child(2){border-left:1px solid var(--border)}
  .kpi:nth-child(3){border-left:0;border-top:1px solid var(--border)}
  .kpi:nth-child(4){border-top:1px solid var(--border)}
  .cols{grid-template-columns:1fr}
  .alert .act{display:none}
  .krec{display:block}
  .krec > * + *{margin-top:14px}
  .krechts{display:grid;grid-template-columns:1fr}
  .quick{grid-template-columns:repeat(auto-fit,minmax(60px,1fr));gap:2px}
  .q .qi{width:46px;height:46px}
  .q{font-size:.6875rem}
  .tl time{display:none}
  .board{grid-template-columns:1fr;gap:18px}
  .mgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plgrid{grid-template-columns:1fr}
  .plside{position:static;grid-template-columns:1fr 1fr;align-items:start;display:grid;gap:10px}
  .plstat{grid-column:1 / -1;display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:12px 14px}
  .plstat .plrow{flex-direction:column;align-items:flex-start;gap:0}
  .plstat .plrow b{font-size:1.1875rem}
  .plstat .plrow span{font-size:.7188rem;white-space:nowrap}
  .pltoolbar{gap:10px}
  .wknav{margin-left:0;width:100%}
  .wknav b{margin:0 auto}
  .dagchips{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin:2px 0 12px}
  .dagchip{display:grid;justify-items:center;gap:1px;background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:8px 2px;position:relative}
  .dagchip b{font-size:.6875rem;font-weight:800;text-transform:uppercase;color:var(--ink-2)}
  .dagchip span{font-size:.9375rem;font-weight:800}
  .dagchip em{position:absolute;top:-6px;right:-4px;font-style:normal;background:var(--red);color:#fff;font-size:.625rem;font-weight:800;border-radius:99px;padding:1px 6px}
  .dagchip.on{border-color:var(--red);background:var(--red-tint)}
  .dagchip.on b, .dagchip.on span{color:var(--red-deep)}
  .dagchip.vandaag b{color:var(--red)}
  .wkgrid{grid-template-columns:1fr}
  .wkdag{display:none}
  .wkdag.mobielactief{display:block}
  .wkdag > header{position:static}
  .wkleeg{display:block}
  .dhrow{display:none}
  .bandgrid{grid-template-columns:1fr}
  .bandcel{display:none;border-left:0}
  .bandcel.mobielactief{display:grid}
  .pltitel h2{font-size:.9688rem}
  .acties{display:none}
  .verberg-smal{display:none}
  .btn-new{width:44px;height:44px;padding:0;justify-content:center}
  .dfveld.groot{grid-column:span 1}
  .orgfilter{margin-left:0;width:100%}
}
@media (prefers-reduced-motion: reduce){
  .side{transition:none}
}
@media (max-width:420px){
  .mgrid{grid-template-columns:1fr}
}

/* ── MOBIEL PLANNING = CG-voorbeeld: 7 mini-kolommen + filter-lade (wint cascade) ── */
.fbtn-mobiel{display:none;font:inherit;font-weight:700;font-size:.8125rem;align-items:center;gap:7px;
  padding:9px 13px;border-radius:10px;border:1.5px solid var(--border);background:var(--surface);cursor:pointer}
@media (max-width:1023px){
  .fbtn-mobiel{display:inline-flex}
  .dagchips{display:none}
  /* mobiele WEEK = alle 7 dagen zichtbaar (CG-stijl), ultra-compacte mini-kaarten */
  .dhrow{display:grid;grid-template-columns:repeat(7,minmax(0,1fr))}
  .plancanvas.dagmodus .dhrow, .plancanvas.dagmodus .bandgrid{grid-template-columns:minmax(0,1fr)}
  .plancanvas{overflow-x:hidden;overflow-y:auto}
  .bandgrid{grid-template-columns:repeat(7,minmax(0,1fr));min-width:0}
  .bandcel{display:grid;padding:2px;gap:2px;max-height:none;overflow:visible;min-width:0}
  .bandcel a.cgc{max-width:100%}
  /* duidelijke verticale rasters per dag (volle bandhoogte) bij concept én ingeplande diensten;
     hogere specificiteit dan `body.plapp .bandcel{border-left:0}` (regel ~1413) die mobiel de rand wist */
  body.plapp .plancanvas:not(.dagmodus) .bandgrid .bandcel{border-left:1px solid #e4e2ee}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid .bandcel:first-child{border-left:0}
  /* dag-veld (vandaag) en weekend niet apart inkleuren: uniform de #fafafa-surround tonen */
  body.plapp .bandcel.cel-vandaag, body.plapp .bandcel.cel-weekend,
  body.plapp .bandcel.cel-vandaag.cel-weekend{background:transparent}
  /* dag-modus: 1 kolom, volle kaart */
  .plancanvas.dagmodus .bandcel{display:none;padding:8px;gap:8px;border-left:0}
  .plancanvas.dagmodus .bandcel.mobielactief{display:grid}
  .bandkop{font-size:.5625rem;padding:8px 6px;position:sticky;top:0;z-index:2;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:-.2px}
  .bandkop .klapv{font-size:.6875rem}
  /* CG-stijl weekkaart (7 kolommen): links uitgelijnd, titel + opdrachtgever(kleurbadge+naam)
     + personeel + starttijd/bezetting; lange tekst kapt netjes af (badge-kleur = klant-identiteit) */
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc{padding:7px 5px 6px 6px;border-radius:6px;min-height:44px;
    display:flex;flex-direction:column;align-items:stretch;gap:1px;overflow:hidden}
  /* dunnere kleurbalk zodat de titel niet gepropt onder de balk zit */
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .topbalk{height:4px}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgt{font-size:10px;font-weight:600;line-height:1.2;
    white-space:nowrap;padding:0;margin-top:1px;overflow:hidden;text-overflow:ellipsis;gap:0}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgt .cgic{display:none}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgo{display:flex;align-items:center;gap:3px;min-width:0;margin:0}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgo .obadge{min-width:0;width:auto;height:14px;
    padding:0 2px;font-size:7.5px;letter-spacing:0;border-radius:4px;flex:0 0 auto;line-height:1}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgo .oname{font-size:8.5px;font-weight:500;color:#55516b;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgw{display:flex;align-items:center;gap:3px;min-width:0;margin:0}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgw .avmini{display:none}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgw .wnaam,
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgw .leegw{font-size:8.5px;font-weight:400;color:#3a3650;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgw .plusn{font-size:7.5px;flex:0 0 auto;color:#8a85a0}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgw .nbadge{flex:0 0 auto}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgtijd{margin-top:2px;gap:4px;flex-wrap:nowrap;overflow:hidden;
    font-size:9px;font-weight:400;color:#55516b;font-variant-numeric:tabular-nums;align-items:center}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgtijd .t1{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
  /* smalle kolom: alleen de starttijd (eind + streepje verborgen) + bezetting */
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgtijd .tsep,
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgtijd .t2{display:none}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .tijdchip{font-size:9px;padding:0;background:none;color:#55516b}
  /* bezetting 1/1 duidelijk zichtbaar: iets groter, vet pilletje, wijkt nooit weg */
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .bzt{font-size:9.5px;padding:1px 5px;flex:0 0 auto;
    font-weight:800;border-radius:5px;margin-left:1px}
  /* compacte 7-daagse kopregel */
  .dhrow .dh{padding:5px 2px;text-align:center;border-left:1px solid #f0eff5}
  .dhrow .dh:first-child{border-left:0}
  .dhrow .dh b{font-size:.75rem}
  .dhrow .dh span{font-size:.625rem;display:block}
  .plgrid{grid-template-columns:1fr}
  .plside{position:fixed;top:0;left:0;bottom:0;width:min(320px,88vw);z-index:85;border-radius:0;
    transform:translateX(-105%);transition:transform .22s cubic-bezier(.2,.7,.3,1);overflow-y:auto;margin:0}
  body.filters-open .plside{transform:none}
  body.filters-open .scrim{display:block;position:fixed;inset:0;background:oklch(0.2 0.02 30 / .4);z-index:80}
  .pltoolbar{gap:8px}
  .pltoolbar .acties{display:none}
  /* CG-stijl "|||"-handvat links: opent/sluit de filter-drawer, verschuift naar de naad bij open */
  body.plapp:has(.plside, .mwzij) .filterhandle{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:3px;
    position:fixed;left:0;top:50%;transform:translateY(-50%);z-index:90;width:23px;height:58px;padding:0;
    background:#fff;border:1px solid #e0ddea;border-left:0;border-radius:0 10px 10px 0;
    box-shadow:2px 1px 9px rgba(30,26,64,.16);cursor:pointer;transition:left .22s cubic-bezier(.2,.7,.3,1)}
  body.plapp .filterhandle i{width:2px;height:18px;background:#9a95ac;border-radius:2px;display:block}
  body.plapp.filters-open:has(.plside, .mwzij) .filterhandle{left:min(320px,88vw)}
  body.filters-open .filterhandle i{background:var(--pl)}
  /* de losse 'Filters'-knop in de toolbar vervalt: het handvat is de toggle */
  body.plapp #tbslot .fbtn-mobiel, body.plapp .fbtn-mobiel{display:none}
}
.filterhandle{display:none}
@media (prefers-reduced-motion: reduce){ .plside{transition:none} }

/* mobiel planning: compacte kop (CRM-topbar weg, hamburger in toolbar) */
@media (max-width:1023px){
  body.plapp .top{display:none}
  /* witte statusbalk-zone bovenaan (notch/safe-area) i.p.v. de grijze --bg */
  html, body.plapp{background:#fff}
  body.plapp .wrap{padding-top:max(10px, env(safe-area-inset-top))}
  /* menu-knop = enkel 3 zwarte strepen, geen achtergrond/box, iets groter */
  .hamb-pl{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    width:44px;height:44px;border:0;background:none;border-radius:0;cursor:pointer;flex:none;padding:0;margin-left:-8px}
  .hamb-pl i{display:block;width:27px;height:3px;background:#111;border-radius:2px}
  .hamb-pl .ic{display:none}
  .pltoolbar{gap:6px;margin-bottom:8px}
  .pltitel h2{font-size:.875rem}
  .pltitel{gap:6px;min-width:0}
  .pltitel h2{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wkbadge{font-size:.625rem;padding:2px 7px;flex:none}
  .wknav{gap:5px;margin-left:auto;width:auto}
  .wknav b{display:none}
  .wkpijl{width:34px;height:34px;font-size:.9375rem;border-radius:9px}
  .wknav .f{height:34px;padding:0 11px;font-size:.75rem;border-radius:9px}
  .viewpills{padding:2px}
  .viewpills a, .viewpills span{padding:6px 11px;font-size:.75rem}
  .fbtn-mobiel{padding:7px 10px;font-size:.75rem;border-radius:9px}
  .pltoolbar .btn-new{width:34px;height:34px;border-radius:9px}
}

/* ── CG dienst-pagina (2 kolommen) ── */
.cgpagina{display:grid;gap:14px}
.cgtop{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--surface);
  border:1.5px solid var(--border);border-radius:12px;padding:12px 16px}
.cgkop{margin-right:auto;min-width:0}
.cgkop h1{font-size:1.0625rem;font-weight:800;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cgkop .crumbrow{font-size:.75rem}
.pvk.klein{padding:6px 11px;font-size:.7188rem;border-radius:8px}
.cg2{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:16px;align-items:start}
.cgl, .cgr{background:var(--surface);border:1.5px solid var(--border);border-radius:12px;padding:18px;display:grid;gap:13px;align-content:start}
.cgtijden{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:10px}
.cgtoel{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.cgvraag{font-size:.8125rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:var(--ink-2)}
.cgradios{display:grid;gap:8px}
.cgfuncties{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.twtabel{width:100%;border-collapse:collapse;font-size:.8125rem}
.twtabel th{text-align:left;font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;
  color:var(--ink-2);padding:8px 8px;border-bottom:1.5px solid var(--border)}
.twtabel td{padding:9px 8px;border-bottom:1px solid var(--border);vertical-align:middle;font-weight:600}.tw-ok{color:var(--ok);font-weight:800;white-space:nowrap}
.tw-n{color:var(--ink-2)}
.kav2.mini{width:24px;height:24px;font-size:.5313rem;display:inline-grid;vertical-align:middle;margin-right:7px}
.stip{display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:6px}
.stip.ing{background:var(--red)}
.stip.vrij{background:var(--ok)}
@media (max-width:1279px){ .cg2{grid-template-columns:1fr} }
@media (max-width:1023px){
  .cgtoel{grid-template-columns:1fr}
  .cgtop{position:sticky;top:0;z-index:25}
  .twtabel th:nth-child(3), .twtabel td:nth-child(3){display:none}
}

/* ── Lege week: teachable moment met directe acties ── */
.weekleeg{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:34px 20px;margin:0 0 14px;border:1px dashed oklch(0.78 0.04 285);background:oklch(0.97 0.01 285)}
.weekleeg b{font-size:.9375rem;color:var(--ink)}
.weekleeg span{font-size:.7813rem;color:var(--ink-2)}
.weekleeg .wl-acties{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap;justify-content:center}

/* ── Harde designregels (Ayham): geen hover-effecten; binnenin alleen expliciete radii.
   NB 2026-07-08: dienstkaart-radius is nu 10px (mockup-keuze R5) — a.cgc uit deze regel gehaald ── */
.mwk, .krt, .mdchip, .mwverlof { border-radius: 2px !important; }
.cgc .topbalk, .cgc .cgic, .cgc .tsep, .cgc .t1, .cgc .t2, .cgc .oname, .cgc .wnaam { border-radius: 0 !important; }

/* ── Fase A: contextmenu, drag-drop, undo-toast, vrij zoeken ── */
#ctxmenu{display:none;position:fixed;z-index:80;min-width:220px;background:#fff;
  border:1px solid var(--ink);box-shadow:0 6px 18px oklch(0.2 0.02 285 / .18);padding:4px 0}
#ctxmenu button{display:block;width:100%;text-align:left;background:none;border:0;cursor:pointer;
  font:inherit;font-size:.8125rem;padding:9px 14px;color:var(--ink)}
#ctxmenu button.gevaar{color:var(--red);border-top:1px solid var(--lijn, #e8e6f0)}
.bandcel.dropdoel{outline:2px dashed var(--pl);outline-offset:-2px;background:oklch(0.96 0.02 285)}
a.cgc.sleept{opacity:.45}
a.cgc{cursor:grab}
.toastf .toastactie{margin-left:12px;background:none;border:1px solid #fff;color:#fff;cursor:pointer;
  font:inherit;font-size:.75rem;font-weight:700;padding:3px 10px}
.fzoek{margin-bottom:10px}
.fzoek input{width:100%}

/* ── Medewerker-weergave: swimlane per medewerker ── */
.mwgrid{margin-top:12px;background:#fff;border:1px solid var(--lijn,#e8e6f0);overflow-x:auto}
.mwkop,.mwrij{display:grid;grid-template-columns:200px repeat(7,minmax(110px,1fr));min-width:980px}
.mwkop{border-bottom:2px solid var(--ink);position:sticky;top:0;background:#fff;z-index:2}
.mwdag{padding:8px 6px;font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.02em;
  color:var(--ink-2);border-left:1px solid var(--lijn,#eceae8);text-align:center}
.mwdag.mw-vandaag{color:var(--pl);border-bottom:2px solid var(--pl)}
.mwnaam{padding:8px 10px;display:flex;flex-direction:column;gap:1px;justify-content:center}
.mwnaam.kop{font-size:.6875rem;font-weight:800;text-transform:uppercase;color:var(--ink-2)}
.mwnaam b{font-size:.7813rem;line-height:1.2}
.mwnaam span{font-size:.6563rem;color:var(--ink-2)}
.mwnaam .kav2.mini{margin-bottom:2px}
/* Urenregistratie: avatar VOOR de naam op één regel + klikbare naam → profiel */
.urengrid .mwnaam{flex-direction:row;align-items:center;justify-content:flex-start;gap:9px;padding:9px 11px;text-align:left}
.urengrid .mwnaam.kop{justify-content:flex-start}
.urengrid .mwnaam .mwav{margin:0;flex:0 0 auto;width:28px;height:28px;font-size:.625rem;text-decoration:none}
.urengrid .mwnaam .mwntxt{display:flex;flex-direction:column;gap:1px;min-width:0}
.urengrid .mwnaam .mwnlink{font-size:.7813rem;font-weight:700;line-height:1.2;color:#232136;text-decoration:none;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.urengrid .mwnaam .mwnlink:hover{color:var(--pl);text-decoration:underline}
.urengrid .mwnaam .mwntxt span{font-size:.6563rem;color:var(--ink-2)}
.mwrij{border-bottom:1px solid var(--lijn,#eceae8)}
.mwrij.openrij{background:oklch(0.97 0.01 285)}
.mwcel{border-left:1px solid var(--lijn,#eceae8);padding:3px;display:flex;flex-direction:column;gap:3px;min-height:44px}
.mwcel.mw-vandaag{background:oklch(0.98 0.008 285)}
.mwk{display:block;border:1px solid;border-left-width:3px;padding:3px 5px;font-size:.625rem;line-height:1.25;
  color:var(--ink);text-decoration:none;background:#fff}
.mwk b{display:block;font-variant-numeric:tabular-nums}
.mwk span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.mwk em{font-style:normal;font-weight:800;color:var(--red)}
.mwk.open{background:#fff}
a.dh{color:inherit;text-decoration:none;cursor:pointer}
@media (max-width:767px){
  .mwkop,.mwrij{grid-template-columns:130px repeat(7,minmax(92px,1fr));min-width:790px}
}

/* ── Multicreate: dienst op meerdere datums ── */
.multidag{display:flex;gap:8px}
.multidag input{flex:1}
.mdchips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.mdchip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--ink);
  padding:4px 8px;font-size:.7188rem;font-variant-numeric:tabular-nums;background:#fff}
.mdchip button{border:0;background:none;cursor:pointer;font-size:.875rem;line-height:1;color:var(--red);padding:0}

/* actieve-filter-indicator */
.fgroep summary .fdot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--pl);margin-left:6px;vertical-align:middle}

/* ── Conflictwaarschuwing: dubbel ingeplande medewerkers ── */
.cgc .konflikt{font-style:normal;font-weight:800;font-size:.5938rem;color:#fff;background:var(--red);
  padding:1px 4px;letter-spacing:.02em}
.twwaarschuw{color:var(--red);font-weight:700;font-variant-numeric:tabular-nums}

/* ── Sneltoets-overzicht (?) ── */
#snelhulp{display:none;position:fixed;z-index:85;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;border:1px solid var(--ink);box-shadow:0 8px 24px oklch(0.2 0.02 285 / .22);
  padding:18px 22px;min-width:320px;max-width:90vw}
#snelhulp h3{margin:0 0 10px;font-size:.875rem}
#snelhulp dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0;font-size:.7813rem}
#snelhulp dt{font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap}
#snelhulp dd{margin:0;color:var(--ink-2)}

/* mobiel: grotere tik-doelen op minikaarten */
@media (max-width:767px){
  a.cgc{min-height:38px}
  .bandcel{gap:4px}
}

/* vandaag- en weekendkolom in het grid zelf (NN/g: hele kolom highlighten) */
.bandcel.cel-vandaag{background:oklch(0.975 0.012 285)}
.bandcel.cel-weekend{background:oklch(0.985 0.002 60)}
.bandcel.cel-vandaag.cel-weekend{background:oklch(0.975 0.012 285)}

/* ── Fase C: bulk-selectie, dagtotalen, legenda, laadfeedback, sjabloonbeheer ── */
a.cgc.sel{outline:3px solid var(--pl);outline-offset:-1px}
#bulkbalk{display:none;position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:75;
  background:var(--ink);color:#fff;padding:10px 16px;gap:10px;align-items:center;
  box-shadow:0 6px 18px oklch(0.2 0.02 285 / .3)}
#bulkbalk b{font-size:.8125rem;margin-right:6px}
#bulkbalk .pvk{background:none;color:#fff;border:1px solid oklch(1 0 0 / .4);cursor:pointer}
#bulkbalk .pvk.rand-rood{border-color:oklch(0.72 0.16 25);color:oklch(0.85 0.1 25)}
.dh .dhtot{font-style:normal;font-size:.5938rem;font-weight:600;color:var(--ink-2);
  font-variant-numeric:tabular-nums;margin-left:auto}
#plgridwrap.laadt{opacity:.55;pointer-events:none;transition:opacity .15s}
.sjbeheer{margin:-6px 0 10px;font-size:.7188rem}
.sjbeheer summary{cursor:pointer;color:var(--ink-2)}
.sjbeheer ul{list-style:none;margin:6px 0 0;padding:0}
.sjbeheer li{display:flex;justify-content:space-between;align-items:center;padding:4px 0;
  border-bottom:1px solid var(--lijn,#eceae8)}
.sjbeheer li button{border:1px solid var(--red);background:none;color:var(--red);cursor:pointer;
  font-size:.8125rem;line-height:1;padding:2px 7px}
#legenda{display:none;position:fixed;z-index:85;top:50%;left:50%;transform:translate(-50%,-50%);
  background:#fff;border:1px solid var(--ink);box-shadow:0 8px 24px oklch(0.2 0.02 285 / .22);
  padding:18px 22px;min-width:300px;max-width:90vw;max-height:80vh;overflow-y:auto}
#legenda h3{margin:0 0 10px;font-size:.875rem}
#legenda h4{margin:14px 0 6px;font-size:.7188rem;text-transform:uppercase;color:var(--ink-2)}
#legenda .lgroep{display:grid;grid-template-columns:auto 1fr;gap:7px 10px;align-items:center;font-size:.7813rem}
#legenda .lvb{display:inline-block;width:26px;height:14px;border:1px solid var(--lijn,#d9d7de)}
#legenda .lvb.concept{background:repeating-linear-gradient(135deg,#f2f1f4 0 5px,#e8e6ee 5px 9px)}
#legenda .lvb.open{background:#fff;border-color:var(--pl)}
#legenda .lvb.dubbel{width:auto;height:auto;background:var(--red);color:#fff;font-size:.5938rem;
  font-weight:800;padding:1px 4px;border:0}
#legenda .ltip{margin:12px 0 0;font-size:.6875rem;color:var(--ink-2)}
@media (max-width:767px){
  #bulkbalk{left:8px;right:8px;transform:none;flex-wrap:wrap}
  .dh .dhtot{display:none}
}

/* verlof-marker in medewerker-weergave */
.mwverlof{display:block;font-size:.5938rem;font-weight:700;color:var(--red);
  background:oklch(0.97 0.02 25);border:1px dashed var(--red);padding:2px 4px;line-height:1.2}

/* ── Audit-fixes: focus, mobiel scroll-containment, tik-doelen ── */
input:focus-visible, select:focus-visible, textarea:focus-visible{
  outline:2px solid var(--pl, #46201b);outline-offset:-1px}
.plmain{min-width:0;max-width:100%}
@media (max-width:767px){
  .sideclose, .fsalles, .hamb, .fbtn-mobiel{min-height:44px;min-width:44px}
  .fset form button{min-height:36px;min-width:36px}
}

/* ── Rapporten: weekstaven personeelsuren ── */
.wkstaven{padding:10px 14px 14px;display:flex;flex-direction:column;gap:8px}
.wkstaaf{display:grid;grid-template-columns:52px 1fr 56px;gap:10px;align-items:center}
.wklbl{font-size:.7188rem;font-weight:700;color:var(--ink-2);font-variant-numeric:tabular-nums}
.wkbalk{display:block;height:16px;background:oklch(0.96 0.005 40);border:1px solid var(--lijn,#e8e6f0)}
.wkbalk i{display:block;height:100%;background:var(--pl, #46201b)}
.wkuur{font-size:.7188rem;font-weight:800;text-align:right;font-variant-numeric:tabular-nums}

/* ── Urenregistratie ── */
.urenkop{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;
  padding:4px 0 14px}
.urenkop .pltitel h2{margin:0}
.urenfilter{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.urenfilter .cinput{max-width:170px}
.urenacties{display:flex;gap:8px;flex-wrap:wrap}
.urennieuw{position:static;margin:0 0 12px;display:inline-block}
.urentabel{width:100%;background:#fff}
.urentabel .utijd{width:92px;padding:4px 6px}
.urentabel .upauze{width:64px;padding:4px 6px}
.urentabel .mono{font-variant-numeric:tabular-nums}
.urendienst{display:flex;flex-direction:column;line-height:1.25}
.urendienst small{color:var(--ink-2);font-size:.6563rem}
.urendienst .orgdot{margin-right:5px}
.ubron{display:block;font-size:.625rem;color:var(--ink-2)}
.uknoppen{display:flex;gap:6px}
.uuren{font-weight:800}
@media (max-width:900px){
  .urentabel thead{display:none}
  .urentabel tr{display:grid;grid-template-columns:1fr 1fr;gap:4px 10px;border-bottom:2px solid var(--lijn,#e8e6f0);padding:10px 6px}
  .urentabel td{border:0;padding:2px 0}
}

/* blokkade-melding dubbele inplanning */
.twfout{background:var(--red);color:#fff;font-size:.7813rem;font-weight:700;padding:9px 12px;margin:0 0 8px}

/* ── CG-layout: full width/height, banden = helften, klikbaar in/uitklapbaar ── */
.bandkop{display:block;width:100%;cursor:pointer;font:inherit;font-weight:700;font-size:.7813rem}
.bandkop .klapv{font-style:normal;display:inline-block;margin-left:6px;transition:transform .15s}
.band.dicht .klapv{transform:rotate(-90deg)}
.band.dicht .bandgrid{display:none}
@media (prefers-reduced-motion: reduce){ .bandkop .klapv{transition:none} }

@media (min-width:1024px){
  body.plkal .wrap{padding:10px 12px 12px;height:100vh;overflow:hidden;display:flex;flex-direction:column}
  body.plapp .plgrid{flex:1;min-height:0;gap:12px;align-items:stretch}
  body.plapp .plside{overflow-y:auto;min-height:0;scrollbar-width:thin}
  body.plapp .plmain{display:flex;flex-direction:column;min-height:0}
  body.plapp #plgrid-partial{display:flex;flex-direction:column;flex:1;min-height:0}
  body.plapp .plancanvas{flex:1;min-height:0;display:flex;flex-direction:column}
  body.plapp .dhrow{flex:0 0 auto}
  body.plapp .band{display:flex;flex-direction:column;flex:1 1 50%;min-height:0}
  body.plapp .band.dicht{flex:0 0 auto}
  body.plapp .bandkop{flex:0 0 auto}
  body.plapp .band .bandgrid{flex:1;min-height:0}
  body.plapp .bandgrid.bopen .bandcel, body.plapp .bandgrid.binge .bandcel{
    max-height:none;min-height:0;height:100%}
  body.plapp .mwgrid{flex:1;min-height:0;overflow-y:auto}
  /* lijstweergave: kaartkop vast, lijst scrollt intern (net als de kalender) */
  body.plkal .lijstkaart{flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  body.plkal .lijstkaart > header{flex:0 0 auto}
  body.plkal .lijstkaart .rows{flex:1;min-height:0;overflow-y:auto}
}

/* kaarten nooit samenpersen: rijen op inhoudshoogte, kolom scrollt */
.bandcel{grid-auto-rows:max-content}

/* ── CG-stijl kop: subtiele dagkoppen, breadcrumb, compacte filterbalk ── */
.pltitel{display:flex;flex-direction:column;gap:1px}
.pltrij{display:flex;align-items:center;gap:10px}
.pltrij h2{margin:0}
.plcrumb{font-size:.6875rem;color:var(--ink-2)}
@media (min-width:1024px){
  body.plapp .dhrow{background:oklch(0.965 0.003 285);border-bottom:0}
  body.plapp .dh{flex-direction:column;align-items:flex-start;gap:0;padding:5px 12px 6px;border-left:0}
  body.plapp .dh span{font-size:.6563rem;font-weight:400;color:var(--ink-2);text-transform:lowercase;letter-spacing:.01em}
  body.plapp .dh b{font-size:1.0625rem;font-weight:400;color:var(--ink-2);line-height:1.1;font-variant-numeric:tabular-nums}
  body.plapp .dh.dh-vandaag b{color:var(--pl);font-weight:400}
  body.plapp .dh.dh-vandaag::after{display:none}
  body.plapp .dh.dh-weekend span, body.plapp .dh.dh-weekend b{opacity:1}
  body.plapp .bandcel.cel-vandaag, body.plapp .bandcel.cel-weekend,
  body.plapp .bandcel.cel-vandaag.cel-weekend{background:transparent}
  body.plapp .fsacties .fsknop{padding:6px 12px;font-size:.7188rem}
  body.plapp .fzoek{margin-bottom:8px}
  body.plapp .plside .fgroep summary{padding:9px 2px}
}

/* CG-kop nuances: vandaag wint van weekend-demping; filterknoppen compact */
@media (min-width:1024px){
  body.plapp .dh.dh-vandaag span, body.plapp .dh.dh-vandaag b{opacity:1}
  body.plapp .fsacties{height:auto;min-height:0;align-items:stretch}
  body.plapp .fsacties .fsknop{flex:0 1 auto;height:auto;min-height:0}
}

/* filterbalk-rijen niet meestretchen met de volle hoogte */
@media (min-width:1024px){ body.plapp .plside{align-content:start} }

/* ══════════ VARIANT E "Duotone indigo" (gekozen door Ayham) ══════════ */
body.plapp{font-family:'Figtree','Schibsted Grotesk',sans-serif;background:#f6f5fa}
body.plapp .wrap{background:#f6f5fa}
/* medewerkers-plantoolpagina: zelfde #fafafa-surround + filter-sectie als de Diensten-pagina (lijst-kaart blijft wit) */
body.mw-plan{background:#fff}
body.mw-plan .wrap{background:#fafafa}
body.mw-plan .mwzij{background:#fafafa}
/* Diensten-pagina: alles om de kaartjes heen #fafafa, band-koppen #e9e9ec, kaarten zelf wit;
   body blijft wit zodat de statusbalk-zone bovenaan wit is */
body.plkal{background:#fff}
body.plkal .wrap{background:#fafafa}
body.plapp .plside{background:#fafafa;border:1px solid #e8e6f0}
body.plapp .pltoolbar{background:#fafafa}
body.plapp .plancanvas{background:#fafafa;border-color:#e8e6f0}
body.plapp .dhrow{background:#fafafa}
body.plapp .bandkop{background:#e9e9ec;color:#5a5670;border-color:#e0e0e5}
body.plapp .bandcel{border-left:0}
@media (min-width:1024px){
  /* daglijnen lopen door tot de onderkant, ook in lege dagvakken */
  body.plapp .bandcel{border-left:1px solid #ecebf3}
  body.plapp .bandcel:first-child{border-left:0}
}
body.plapp .bandgrid{background:#fafafa}

/* E-kaarten: flat kleurvlak, geen rand, kleurstip linksboven */
body.plapp a.cgc{border:0;padding:6px 9px 6px;box-shadow:none}
body.plapp a.cgc .strip{position:absolute;left:9px;top:10px;width:7px;height:7px;bottom:auto;right:auto}
body.plapp a.cgc{position:relative}
body.plapp a.cgc .cgt{padding:1px 2px 0 14px;color:#232136;font-size:.7188rem}
/* kaarten dichter + kleiner: interne verticale ruimte inkorten */
body.plapp a.cgc .cgo{padding-top:2px}
body.plapp a.cgc .cgw{padding-top:2px}
body.plapp a.cgc .cgtijd{padding-top:3px;padding-bottom:1px}
body.plapp a.cgc .cgo span{color:#6c687f}
body.plapp a.cgc .obadge{display:none}
body.plapp a.cgc .cgo{padding-left:0}
body.plapp a.cgc .avmini{background:#fff;color:#4f46c9;border:0}
body.plapp a.cgc .cgtijd{color:#232136}
body.plapp a.cgc .bzt{color:#4f46c9}
body.plapp a.cgc .bzt.vol{color:#4f46c9}
body.plapp a.cgc.st-concept{border:1px dashed #b9b4cc}
body.plapp a.cgc.st-concept .strip{background:#9d97b5}
body.plapp a.cgc.sel{outline:3px solid #4f46c9}

@media (min-width:1024px){
  body.plapp .bandcel{padding:5px;gap:5px}
  body.plapp .dh span{color:#6c687f}
  body.plapp .dh b{color:#6c687f}
  body.plapp .dh.dh-vandaag b{color:#4f46c9}
  body.plapp .bandcel.cel-vandaag{background:transparent}
  body.plapp .fsknop, body.plapp .cinput, body.plapp .pvk{border-radius:10px}
  body.plapp .viewpills{border-radius:10px;overflow:hidden}
}

/* Filterbalk vast tegen links, boven en onder (geen zwevend paneel) */
@media (min-width:1024px){
  body.plkal .wrap{padding:0}
  body.plapp .plgrid{gap:0}
  body.plapp .plside{border:0;border-right:1px solid #e8e6f0;border-radius:0;height:100%;padding:14px 14px 18px}
  body.plapp .plmain{padding:10px 14px 14px}
}

/* ── Vaste kopbalk boven filter+grid; uniforme knophoogte 36px; iconen ── */
#tbslot{background:#fafafa;border-bottom:1px solid #e8e6f0;flex:0 0 auto}
#tbslot .pltoolbar{display:flex;align-items:center;gap:10px;padding:9px 16px;margin:0;background:transparent;border:0}
#tbslot .pltitel{margin-right:4px}
#tbslot .wknav{display:flex;gap:6px;margin-left:6px}
#tbslot .wknav a, #tbslot .viewpills a, #tbslot .acties, #tbslot .btn-new, #tbslot .fbtn-mobiel, #tbslot .tbadd{
  height:36px;display:inline-flex;align-items:center;box-sizing:border-box}
#tbslot .tbadd{gap:7px;padding:0 15px;border-radius:9px;font-size:12.5px;font-weight:700;white-space:nowrap;margin-left:auto}
#tbslot .wknav a{border:1px solid #e0ddea;background:#fff;padding:0 14px;font-size:12.5px;font-weight:600;
  color:#232136;border-radius:10px;text-decoration:none}
#tbslot .wkpijl{width:36px;padding:0!important;justify-content:center}
#tbslot .viewpills{display:flex;align-items:center;background:#eff1f3;padding:0 3px;border-radius:10px;gap:2px;margin-left:2px;height:36px}
#tbslot .viewpills a{height:30px;padding:0 15px;font-size:12.5px;font-weight:600;color:#6c687f;
  border-radius:8px;text-decoration:none;border:0;background:transparent}
#tbslot .viewpills a.on{background:#4f46c9;color:#fff}
#tbslot .viewpills .vp-ic{width:38px;padding:0;justify-content:center}
#tbslot .acties{border:1px solid #e0ddea;border-radius:10px;background:#fff;padding:0 30px 0 12px;
  font-size:12.5px;font-weight:600;color:#232136;margin-left:auto}
#tbslot .btn-new{border-radius:10px;padding:0 18px;font-weight:800}
#tbslot .wkbadge{background:#eff1f3;color:#4f46c9;border:0;border-radius:99px;padding:3px 10px;font-weight:800}
@media (min-width:1024px){
  #tbslot .fbtn-mobiel{display:none}
  #tbslot .hamb-pl{display:none}
}
@media (max-width:1023px){
  #tbslot .pltoolbar{flex-wrap:wrap;gap:8px;padding:8px 10px}
  #tbslot .acties{margin-left:0}
}

/* Grid strak in de hoeken: geen marges/rand om het canvas */
@media (min-width:1024px){
  body.plapp .plmain{padding:0}
  body.plapp .plancanvas{border:0;border-radius:0;background:#fbfbfd}
}

/* dagkoppenrij: mee met de #fafafa-surround */
body.plapp .dhrow{background:#fafafa}
/* ALLE dag-kolommen wit (#fff); de verticale rasters + kaartranden geven de scheiding.
   Autoritatief: staat na alle eerdere cel-regels. */
body.plapp .bandcel,
body.plapp .bandcel.cel-vandaag,
body.plapp .bandcel.cel-weekend,
body.plapp .bandcel.cel-vandaag.cel-weekend{background:#ffffff}
/* grid-container mee wit zodat er geen #fafafa doorschemert tussen de kolommen;
   de dagkoppen-rij (.dhrow) blijft juist #fafafa (aparte regel hieronder) */
body.plapp .plancanvas, body.plapp .bandgrid{background:#ffffff}
body.plapp .dhrow{background:#fafafa}

/* Titelblok: groter, maand in accentkleur, crumb eronder zelfde uitlijning */
#tbslot .pltitel{gap:2px}
#tbslot .pltrij h2{font-size:21px;font-weight:800;letter-spacing:-.015em;line-height:1.15}
#tbslot .pltrij h2 .mnd{font-style:normal;color:#4f46c9}
#tbslot .wkbadge{font-size:12.5px;padding:4px 12px}
#tbslot .plcrumb{font-size:11.5px;color:#8a8598}

/* Weeknavigatie als één strakke groep: ‹ | Vandaag | › */
#tbslot .wknav{gap:0;border:1px solid #e0ddea;border-radius:10px;overflow:hidden;background:#fff}
#tbslot .wknav a{border:0;border-radius:0;height:34px}
#tbslot .wknav a + a{border-left:1px solid #eceaf2}
#tbslot .wknav a.f{font-weight:600;padding:0 18px}
#tbslot .pltitel{align-items:flex-start}

/* ── Rollen: beheerpagina + chips + dienstformulier ── */
.rolbeheer{background:#fff;border:1px solid #e8e6f0;border-radius:10px;padding:14px 16px;margin:0 0 14px}
.rolbeheer h3{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:#6c687f;margin:0 0 8px}
.rollijst{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.rolchip{display:inline-flex;align-items:center;gap:7px;border:1px solid #e0ddea;background:#fbfbfd;
  padding:6px 10px;font-size:12.5px;font-weight:700;border-radius:99px}
.rolchip i{width:9px;height:9px;background:var(--rk,#4f46c9);display:inline-block;border-radius:99px}
.rolchip em{font-style:normal;font-weight:600;color:#6c687f;font-size:11px}
.rolchip button{border:0;background:none;cursor:pointer;color:#b42318;font-size:14px;line-height:1;padding:0 0 0 2px}
.rolnieuw{display:flex;gap:8px}
.rolnieuw .cinput{max-width:280px}
.mwtabel{width:100%;background:#fff}
.mwtabel td{vertical-align:middle}
.rolcel{display:flex;flex-wrap:wrap;gap:6px;padding:8px}
.roltgl{border:1px solid #e0ddea;background:#fff;color:#6c687f;font:inherit;font-size:11.5px;font-weight:700;
  padding:5px 12px;border-radius:99px;cursor:pointer}
.roltgl.aan{background:#4f46c9;border-color:#4f46c9;color:#fff}
.rolkeuze{margin-bottom:2px}
.rolhint{padding:2px 2px 10px;font-size:.7188rem}

/* Filterbalk-verfijning: ruimte onder Open-alle-filters, titels gecentreerd, grotere pijlen */
body.plapp #btn-alles{margin-bottom:16px;padding-bottom:2px}
body.plapp .plside .fgroep summary{padding:15px 2px}
.fgroep summary::after{font-size:1.35rem;line-height:1}
@media (min-width:1024px){
  body.plapp .plside{gap:0}
  body.plapp .fsets{margin-bottom:10px}
  body.plapp #btn-legenda{margin-top:14px}
  /* uren + opdrachtgevers: actie-knoppen + 'Open alle filters' vast bovenaan; ALLEEN het
     filter-formulier scrollt (schone scroll-regio i.p.v. sticky, geen overlap met de lijst) */
  body.urenpg .plside, body.ogpg .plside{display:flex;flex-direction:column;overflow:hidden}
  body.urenpg .plside > .fsacties, body.urenpg .plside > .fsalles,
  body.ogpg .plside > .fsacties, body.ogpg .plside > .fsalles{flex:0 0 auto}
  body.urenpg .plside > .fsalles, body.ogpg .plside > .fsalles{margin-bottom:8px;padding-bottom:10px;border-bottom:1px solid #eceaf3}
  body.urenpg .plside > form, body.ogpg .plside > form{flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;margin:0 -4px;padding:0 4px}
  /* opdrachtgevers-lijst full width in het content-stuk */
  body.ogpg .ogvul{padding:0 0 20px}
  body.ogpg .oglijst{border-left:0;border-right:0;border-radius:0;margin:0}
  body.ogpg .mwpager{padding:12px 16px}
}

/* ── mobiele filter-drawer: strak + geordend (1 kolom, compacte rijen met scheidingslijnen) ──
   staat NA de globale `.plside .fgroep summary`-regel (1509) zodat de compacte summary wint;
   heft het 2-koloms grid (regel 988) op dat de drawer te groot/ongeordend maakte */
@media (max-width:1023px){
  body.plapp .plside{display:flex;flex-direction:column;grid-template-columns:none;gap:0;padding:0;align-items:stretch}
  body.plapp .plside > form{margin:0;padding:0;display:block}
  /* kop-acties: Sla filter op / Wissen naast elkaar, daaronder Open-alle-filters met onderlijn */
  body.plapp .plside .fsacties{display:flex;gap:8px;padding:12px 14px 10px;margin:0}
  body.plapp .plside .fsacties .fsknop{flex:1 1 0;justify-content:center;min-height:38px}
  body.plapp .plside .fsalles, body.plapp .plside #btn-alles{display:block;width:auto;margin:0;
    padding:11px 16px;border-bottom:1px solid #eceaf3;text-align:left}
  body.plapp .plside .fsets{padding:8px 16px 0;margin:0}
  /* filtergroepen: full-width rijen, dunne scheidingslijn, compacte summary (~46px tap-doel) */
  body.plapp .plside .fgroep{margin:0;border-top:0;border-bottom:1px solid #f1eff7}
  body.plapp .plside > form > .fgroep:last-of-type, body.plapp .plside > .fgroep:last-of-type{border-bottom:0}
  body.plapp .plside .fgroep summary{padding:13px 16px;font-size:.8438rem;font-weight:700;color:#3a3650;min-height:0}
  body.plapp .plside .fgroep[open] summary{color:#232136}
  body.plapp .plside .fgroep summary::after{margin-right:0}
  body.plapp .plside .fopts{padding:2px 16px 14px}
}

/* Kaarten vullen het dagvak volledig, diensten tegen elkaar aan */
body.plapp .bandcel{padding:0;gap:2px}
body.plapp .bandgrid .bandcel a.cgc{width:100%}

/* ── CG-stijl filterlijsten: checkboxes, zoek-in-lijst, badges, laat meer zien ── */
.lijstzoek{width:100%;margin-bottom:8px}
.cblijst{display:grid;gap:8px;max-height:280px;overflow-y:auto;scrollbar-width:thin}
.cbitem{display:flex;align-items:center;gap:9px}
.cbitem.meer{display:none}
.cblijst.alles .cbitem.meer{display:flex}
.cbnaam{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fopts .orgbadge{width:24px;height:17px;display:inline-flex;align-items:center;justify-content:center;
  color:#fff;font-size:8.5px;font-weight:800;border-radius:3px;flex:0 0 auto;font-style:normal}
.laatmeer{display:inline-block;font-size:11.5px;font-weight:400;text-decoration:underline;
  color:#4f46c9;margin-top:9px}

/* typeahead (medewerker-filter): dropdown met matches naar voren */
.typeahead{position:relative}
.tasug{position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:40;
  background:#fff;border:1px solid #e0ddea;border-radius:10px;overflow:hidden;
  box-shadow:0 8px 26px rgba(30,26,64,.14);max-height:264px;overflow-y:auto;scrollbar-width:thin}
.taopt{padding:9px 12px;font-size:.8438rem;color:#3a3650;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-bottom:1px solid #f4f3f9}
.taopt:last-child{border-bottom:0}
.taopt b{color:#232136;font-weight:800}
.taopt.op, .taopt:hover{background:#f2f1fb}

/* rol-label op dienstkaart en paneel */
.cgrol{display:block;font-size:.625rem;font-weight:700;color:#4f46c9;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.plapp a.cgc .cgrol{padding-left:0}
.pvrol{font-size:.7188rem;padding:4px 0 0}

/* Week-badge: radius 6px, zwart; filterknoppen grijs; chevron altijd leesbaar; Legenda onderaan */
#tbslot .wkbadge{border-radius:6px;color:#111318;background:#eff1f3}
body.plapp .fsknop{background:#eff1f3;border-color:#e3e5e9}
.fgroep summary::after{font-family:'Segoe UI Symbol','Arial',sans-serif;font-size:1.1rem;color:#232136}
@media (min-width:1024px){
  body.plapp .plside{display:flex;flex-direction:column}
  body.plapp #btn-legenda{margin-top:auto;padding-top:14px}
}

/* links zonder href blijven klikbaar ogen */
a[data-nav], a[data-paneel]{cursor:pointer}
/* rail: grotere iconen */
body.plapp .plrail .ic{width:26px;height:26px}

/* ── CG-toolbar: ruimer, groepen, iconknoppen, paarse acties, dichtheid ── */
#tbslot .pltoolbar{padding:14px 20px;gap:10px}
.ovcheck{display:flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;color:#232136;
  margin-left:10px;white-space:nowrap;cursor:pointer}
.ovcheck input{accent-color:#4f46c9;width:15px;height:15px}
.tbdiv{width:1px;height:28px;background:#e0ddea;margin:0 2px;flex:0 0 auto}
.tbicon{position:relative;width:38px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid #e0ddea;background:#fff;border-radius:10px;cursor:pointer;padding:0;text-decoration:none}
.tbicon.on{background:#4f46c9;border-color:#4f46c9}
.tbgroep{display:flex;background:#fff;border:1px solid #e0ddea;border-radius:10px;overflow:hidden;height:36px}
.tbgroep .tbicon{border:0;border-radius:0;height:34px}
.tbgroep .tbicon + .tbicon{border-left:1px solid #eceaf2}
.dichtknop.on{background:#eff1f3}
#datum-kies{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;left:50%;bottom:0}
.tbpaars{width:38px;height:36px;display:inline-flex;align-items:center;justify-content:center;
  background:#4f46c9;border:0;border-radius:10px;cursor:pointer;flex:0 0 auto}
.infoknop{width:20px;height:20px;border-radius:99px;border:1px solid #c9c5d8;background:#fff;color:#6c687f;
  font-size:11px;font-weight:800;cursor:pointer;margin-left:4px;line-height:1}
/* Urenregistratie-toolbar: labeled "Kies datum", gear rechts, legenda-popover (geordend als CG) */
#urenwrap{position:relative}
#urenwrap .tbmid{margin-left:auto}
.tbdatum{width:auto;gap:7px;padding:0 13px;font:inherit;font-weight:700;font-size:.8125rem;color:#232136;white-space:nowrap}
.tbdatum span{line-height:1}
.urengear{flex:0 0 auto}
/* legenda verschijnt op HOVER over de i (desktop) of tap → .open (mobiel) */
.uren-info-wrap{position:relative;display:inline-flex;align-items:center}
.uren-legenda{display:none;position:absolute;z-index:120;top:calc(100% + 9px);left:0;background:#fff;border:1px solid #e6e3f0;
  border-radius:12px;box-shadow:0 14px 40px rgba(30,26,64,.18);padding:14px 16px;flex-direction:column;gap:8px;min-width:255px}
.uren-legenda::before{content:"";position:absolute;top:-11px;left:0;right:0;height:11px}
.uren-info-wrap:hover .uren-legenda,
.uren-info-wrap.open .uren-legenda{display:flex}
.uren-legenda>b{font-size:.8125rem;color:#232136}
.lgrij{display:flex;align-items:center;gap:9px;font-size:.8125rem;color:#4a4668;font-weight:500}
.lgbol{width:13px;height:13px;border-radius:4px;flex:0 0 auto;border:1.5px solid}
.lgbol.grijs{background:#f2f1f6;border-color:#d8d5e4}
.lgbol.aqua{background:#eafcfe;border-color:#12b0c4}
.lgbol.rood{background:#fdecec;border-color:#e5484d}
.lgtot{margin-top:2px;padding-top:8px;border-top:1px solid #f0eff5;font-size:.75rem;font-weight:700;color:#6c687f}
/* mobiel: geen hover → tap opent (.open); pin als vaste balk onderin zodat altijd zichtbaar in scherm */
@media (max-width:640px){
  .uren-legenda{position:fixed;top:auto;bottom:14px;left:12px;right:12px;width:auto;min-width:0;z-index:400}
  .uren-legenda::before{display:none}
  .uren-info-wrap:hover .uren-legenda{display:none}
  .uren-info-wrap.open .uren-legenda{display:flex}
}
/* compacte dichtheid */
body.dicht a.cgc{padding:4px 8px}
body.dicht a.cgc .cgt{font-size:11px}
body.dicht a.cgc .cgo, body.dicht a.cgc .cgrol, body.dicht a.cgc .cgw{display:none}
body.dicht a.cgc .cgtijd{margin-top:1px;font-size:10.5px}
body.dicht .bandcel{gap:1px}
@media (max-width:1023px){ .ovcheck, .tbdiv, .tbgroep, #btn-datum, #btn-kopieerweek{display:none} }

/* ══ Kaart-herontwerp: alles links, één neutrale stijl; klantkleur alléén in ov-modus ══ */
body.plapp a.cgc{background:#fff;border:1px solid #ececf1;padding:8px 10px;text-align:left}
body.plapp a.cgc .cgt{padding-left:0;font-size:12.5px;font-weight:800;color:#232136;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
body.plapp a.cgc .cgo{display:block;padding-left:0;font-size:11px;font-weight:600;color:#8a8598;
  text-transform:uppercase;letter-spacing:.02em;margin-top:1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.plapp a.cgc .cgw{display:flex;align-items:center;justify-content:flex-start;gap:6px;margin-top:5px}
body.plapp a.cgc .avmini{width:17px;height:17px;flex:0 0 auto;background:#efeef8;color:#4f46c9;
  font-size:8.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;border-radius:99px}
body.plapp a.cgc .wnaam{font-weight:700;font-size:11.5px;color:#232136}
body.plapp a.cgc .plusn{font-style:normal;font-weight:800;font-size:10px;color:#4f46c9}
body.plapp a.cgc .cgtijd{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin-top:4px;
  font-size:11.5px;color:#55516b;font-variant-numeric:tabular-nums}
body.plapp a.cgc .bzt{margin-left:0;font-style:normal;font-weight:800;color:#4f46c9}
body.plapp a.cgc .cgrol{display:none}
/* concept: gearceerd, geen kleur */
body.plapp a.cgc.st-concept{background:repeating-linear-gradient(135deg,#f6f6f8 0 5px,#ececf0 5px 9px);
  border:1px dashed #c3bfce}
/* ov-modus: klantkleur als vlak + stip, titel schuift in */
body.plapp a.cgc.ovk{border-color:transparent}
body.plapp a.cgc.ovk .strip{position:absolute;left:10px;top:12px;width:8px;height:8px;bottom:auto;right:auto}
body.plapp a.cgc.ovk .cgt{padding-left:15px}
body.plapp a.cgc .plusn{background:transparent;padding:0}

/* ══ Kaart v2: alles op één linkerlijn, avatar rechtsboven, chips voor tijd/bezetting ══ */
body.plapp a.cgc{padding:6px 10px 6px 11px}
body.plapp a.cgc > *{margin-left:0;padding-left:0;text-align:left}
body.plapp a.cgc .avmini{position:absolute;top:9px;right:9px;width:20px;height:20px;
  background:#4f46c9;color:#fff;font-size:8.5px;font-weight:800;
  display:inline-flex;align-items:center;justify-content:center;border-radius:99px}
body.plapp a.cgc .cgt{padding-right:28px}
body.plapp a.cgc .cgw{display:block;margin-top:3px}
body.plapp a.cgc .wnaam{font-weight:800;font-size:11.5px;color:#232136}
body.plapp a.cgc .cgw.leegw{font-style:italic;font-weight:500;color:#8a8598;font-size:11px}
body.plapp a.cgc .cgtijd{margin-top:3px;gap:5px}
body.plapp a.cgc .tijdchip{font-style:normal;background:#f1f1f5;color:#3a3650;font-weight:700;
  font-size:10.5px;padding:2px 7px;font-variant-numeric:tabular-nums}
body.plapp a.cgc .bzt{font-size:10.5px;padding:2px 7px;background:#fdf3e3;color:#b45309;font-weight:800}
body.plapp a.cgc .bzt.vol{background:#4f46c9;color:#fff}

/* ══ COMPACTE weergave (dichtheid-toggle): duidelijk kleiner, minder detail dan ruim ══ */
body.dicht.plapp a.cgc{padding:3px 10px 4px 11px}
body.dicht.plapp a.cgc .cgo{display:none}
body.dicht.plapp a.cgc .cgw{display:none}
body.dicht.plapp a.cgc .cgtijd{margin-top:2px}
body.dicht.plapp a.cgc .cgt{font-size:11.5px}
body.dicht.plapp a.cgc .avmini{top:5px;width:0;height:0;opacity:0}
body.dicht.plapp .bandcel{gap:3px}
body.plapp a.cgc .konflikt{padding:2px 6px}
body.plapp a.cgc.ovk .cgt{padding-left:15px}
body.plapp a.cgc.ovk .cgo{padding-left:15px}

/* middengroep exact gecentreerd; Week-badge subtieler */
@media (min-width:1280px){
  #tbslot .pltoolbar{position:relative}
  #tbslot .tbmid{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:10px}
}
@media (max-width:1279px){
  #tbslot .tbmid{display:flex;align-items:center;gap:10px}
}
#tbslot .wkbadge{font-weight:600;color:#55516b}
#legenda{box-shadow:0 8px 24px oklch(0.2 0.02 285 / .16)}
/* centreren op het SCHERM (rail-breedte compenseren) */
@media (min-width:1280px){
  body.plapp #tbslot .tbmid{left:calc(50vw - 78px)}
}

/* ══ Kaart v3 — CG-stijl: indigo topbalk, badges inline, concept wit met kalender ══ */
body{font-family:'Figtree','Schibsted Grotesk',sans-serif}
body.plapp a.cgc{position:relative;overflow:hidden;background:#fff;border:1px solid #e4e2ea;
  padding:8px 10px 9px;text-align:left}
body.plapp a.cgc .topbalk{position:absolute;top:0;left:0;right:0;height:9px;background:#5b54c9;
  width:auto;bottom:auto}
body.plapp a.cgc.is-vol .topbalk{background:#5b54c9}
body.plapp a.cgc.is-open .topbalk{background:#8f89e0}
body.plapp a.cgc{padding-top:17px}
body.plapp a.cgc .cgt{padding:0;font-size:12.5px;font-weight:800;color:#000;display:flex;
  align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.3}
body.plapp a.cgc .cgic{flex:0 0 auto}
body.plapp a.cgc .cgo{display:flex;align-items:center;gap:6px;padding:0;margin-top:6px;
  font-size:11px;font-weight:700;color:#6c687f;text-transform:none;letter-spacing:0;line-height:1.3}
body.plapp a.cgc .obadge{display:inline-flex;min-width:26px;height:16px;padding:0 7px;border-radius:6px;
  align-items:center;justify-content:center;color:#fff;font-size:8.5px;font-weight:800;font-style:normal;flex:0 0 auto}
body.plapp a.cgc .cgw{display:flex;align-items:center;gap:6px;margin-top:6px;line-height:1.3}
body.plapp a.cgc .avmini{position:static;width:20px;height:20px;border-radius:50%;background:#3d63dc;color:#fff;
  font-size:8.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto}
body.plapp a.cgc .wnaam{font-weight:800;font-size:11.5px;color:#232136}
body.plapp a.cgc .nbadge{display:inline-flex;min-width:20px;height:16px;padding:0 6px;border-radius:6px;background:#3d63dc;
  color:#fff;font-size:10px;font-weight:800;align-items:center;justify-content:center;font-style:normal}
body.plapp a.cgc .nbadge.open{background:#b45309}
body.plapp a.cgc .leegw{font-style:italic;font-weight:500;color:#8a8598;font-size:11px}
body.plapp a.cgc .cgtijd{display:flex;align-items:center;gap:6px;margin-top:7px;font-size:11.5px;
  font-weight:600;color:#3a3650;font-variant-numeric:tabular-nums;line-height:1.3}
body.plapp a.cgc .tijdchip{background:transparent;padding:0;font-size:11.5px}
body.plapp a.cgc .bzt{font-size:10px;padding:1px 7px;margin-left:auto;border-radius:6px}
body.plapp a.cgc .bzt.vol{background:#3d63dc;color:#fff}
/* concept: grijs vlak, bovenrand iets donkerder grijs */
body.plapp a.cgc.st-concept{background:#f3f2f7;border:1px solid #e2e0ec}
body.plapp a.cgc.st-concept .topbalk{background:#c6c2d6}
/* ov-modus: alleen de topbalk kleurt naar de opdrachtgever */
body.plapp a.cgc.ovk{background:#fff}
body.plapp a.cgc.ovk .cgt{padding-left:0}
body.plapp a.cgc.ovk .cgo{padding-left:0}
/* legenda-voorbeeld concept aanpassen */
#legenda .lvb.concept{background:#f3f2f7;border:1px solid #c6c2d6}
/* bandkoppen: smaller, tekst iets groter en niet dikgedrukt */
body.plapp .bandkop{padding:3px 10px;font-weight:500;font-size:.8125rem}
/* mobiel: full width zoals desktop */
@media (max-width:1023px){
  /* band-kop op 1 regel: klein genoeg dat de volledige tekst past (overschrijft regel 1788) */
  body.plapp .bandkop{font-size:.5625rem;padding:3px 6px;font-weight:600;letter-spacing:-.2px;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  body.plapp .wrap{padding:0 0 48px;overflow-x:hidden}
  body.plapp .plmain{padding:0;min-width:0;overflow-x:hidden}
  body.plapp .plancanvas{border-left:0;border-right:0;border-radius:0}
  #tbslot .pltoolbar{padding:10px 12px}
  /* Filters-knop enkel icoon; Acties niet op mobiel */
  #tbslot .fbtn-mobiel{font-size:0;gap:0;width:44px;justify-content:center;padding:9px 0}
  #tbslot .acties{display:none}
}
/* mobiel: week- én dagweergave tonen de gekozen dag als volledige, leesbare CG-kaarten
   (de oude 7-koloms mini-kaartjes zijn vervangen door de 1-dag-weergave) */

/* ── CG-stijl kalenderpopup ── */
.kalpop{display:none;position:fixed;z-index:120;width:312px;background:#fff;border:1px solid #e8e6f0;
  border-radius:14px;box-shadow:0 18px 44px oklch(0.2 0.02 285 / .18);padding:14px 16px 16px}
.kalpop .kalkop{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kalpop .kalkop b{font-size:.9688rem;font-weight:800;color:#232136}
.kalpop .kalx{background:none;border:0;cursor:pointer;padding:2px;border-radius:99px;display:grid;place-items:center}
.kalpop .kalmaand{display:flex;align-items:center;justify-content:space-between;padding:8px 2px 10px;border-top:1px solid #efeef5}
.kalpop .kalmaand b{font-size:.875rem;font-weight:700;color:#232136}
.kalpop .kalpijlen{display:flex;gap:4px}
.kalpop .kalpijlen button{width:30px;height:30px;display:grid;place-items:center;background:none;border:0;border-radius:9px;cursor:pointer}
.kalpop .kalpijlen button:hover{background:#f2f1f8}
.kalpop .kalwk{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:2px}
.kalpop .kalwk span{text-align:center;font-size:.6875rem;font-weight:700;color:#8f8ba3;padding:4px 0}
.kalpop .kalgrid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.kalpop .kaldag{height:36px;display:grid;place-items:center;background:none;border:0;border-radius:9px;cursor:pointer;
  font:inherit;font-size:.8125rem;font-weight:600;color:#232136;font-variant-numeric:tabular-nums}
.kalpop .kaldag:hover{background:#f2f1f8}
.kalpop .kaldag.buiten{color:#c6c2d6}
.kalpop .kaldag.kal-vandaag{box-shadow:inset 0 0 0 1.5px #5b54c9;font-weight:800}
.kalpop .kaldag.kal-gekozen{background:#5b54c9;color:#fff;font-weight:800}
.kalpop .kaldag.kal-gekozen:hover{background:#5b54c9}

/* "Open alle filters": cursief, grijs, iets kleiner */
.fsalles{font-style:italic;color:#8f8ba3;font-weight:600;font-size:.75rem}

/* ══ Dienstformulier CG v3: Van/Tot, tellers, collapsibles, rol-dropdown, aantal-steppers ══ */
.veldteller{justify-self:end;font-size:.6875rem;font-weight:600;color:#9a96ad}
.cgvantot{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vtrij{display:flex;gap:8px;align-items:center}
.vtrij input[type=date]{flex:1 1 auto;min-width:0}
.vttijd{display:flex;align-items:center;gap:2px;flex:0 0 auto}
.vttijd input[type=time]{width:112px}
.tijdx{background:none;border:0;cursor:pointer;font-size:1.0625rem;line-height:1;color:#8f8ba3;padding:2px 5px;border-radius:6px}
.totdatum{background:#f3f2f7;color:#8f8ba3;pointer-events:none}
.vtsamen{display:none;justify-self:start;background:#efeef6;border-radius:6px;padding:4px 10px;
  font-size:.75rem;font-weight:700;color:#3a3650;font-variant-numeric:tabular-nums}
.cgcollapse{border-top:1px solid #edecf3}
.cgcollapse > summary{display:flex;align-items:center;justify-content:space-between;cursor:pointer;list-style:none;
  font-size:.9688rem;font-weight:800;color:#232136;padding:11px 0}
.cgcollapse > summary::-webkit-details-marker{display:none}
.cchev{font-style:normal;font-weight:800;font-size:1.125rem;color:#55516b;transition:transform .18s;display:inline-block}
.cgcollapse[open] > summary .cchev, .roldrop[open] > summary .cchev{transform:rotate(-90deg)}
@media (prefers-reduced-motion: reduce){ .cchev{transition:none} }
.cginhoud{display:grid;gap:12px;padding:2px 0 14px}
.rolaantal{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px;align-items:start}
.roldrop{position:relative}
.roldrop > summary{display:flex;align-items:center;justify-content:space-between;gap:8px;list-style:none;cursor:pointer;
  border:1.5px solid var(--border);border-radius:10px;background:#fff;min-height:40px;padding:5px 10px}
.roldrop > summary::-webkit-details-marker{display:none}
.rolchips{display:flex;flex-wrap:wrap;gap:4px}
.rolplaceholder{font-style:normal;color:#9a96ad;font-weight:600;font-size:.8125rem}
.rdchip{background:#efeef6;border-radius:6px;padding:2px 8px;font-size:.7188rem;font-weight:700;color:#232136}
.rolopts{position:absolute;top:calc(100% + 6px);left:0;right:0;z-index:40;background:#fff;border:1px solid #e4e2ee;
  border-radius:10px;box-shadow:0 14px 34px rgba(35,33,54,.14);padding:8px;display:grid;gap:2px;max-height:260px;overflow:auto}
.stappers{display:grid;gap:8px}
.stapper{display:grid;grid-template-columns:minmax(0,1fr) auto 52px auto;align-items:center;gap:6px}
.stapnaam{font-size:.75rem;font-weight:700;color:#3a3650;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.stapknop{width:30px;height:30px;border:1.5px solid var(--border);background:#fff;border-radius:8px;cursor:pointer;
  font-size:1rem;font-weight:700;color:#3a3650;display:grid;place-items:center;padding:0}
.stapinp{text-align:center;padding:6px 2px;height:34px;-moz-appearance:textfield;appearance:textfield}
.stapinp::-webkit-outer-spin-button, .stapinp::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.rolsamen{display:inline-flex;align-items:center;gap:6px;justify-self:start;background:#efeef6;border:1px solid #e0deea;
  border-radius:8px;padding:4px 8px;font-size:.75rem;font-weight:700;color:#232136}
.rolsamen button{background:none;border:0;cursor:pointer;color:#8f8ba3;font-size:.875rem;padding:0 2px;line-height:1}
.fopt.opend{margin-top:2px;padding-top:10px;border-top:1px dashed #e4e2ee}
.twkoprij{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.twkoprij .kzoekveld{flex:0 1 220px;margin:0}
.twstand{font-size:.75rem;font-weight:600;color:#55516b}
.twleegstaat{text-align:center;padding:24px 8px!important;color:#8f8ba3}
.cgradios .fopt input[type=radio], .cgradios .fopt input[type=checkbox], .rolopts input[type=checkbox]{accent-color:#4f46c9}
@media (max-width:740px){ .cgvantot, .rolaantal{grid-template-columns:1fr} }

/* ── mobiel: rooster vult het scherm (banden rekken mee, zoals desktop) ── */
@media (max-width:1023px){
  body.plapp .plancanvas{display:flex;flex-direction:column}
  body.plapp .plancanvas .dhrow{flex:0 0 auto}
  body.plapp .band{display:flex;flex-direction:column;flex:1 1 50%;min-height:0}
  body.plapp .band.dicht{flex:0 0 auto}
  body.plapp .bandkop{flex:0 0 auto}
  body.plapp .band .bandgrid{flex:1 1 auto;min-height:0}
  body.plapp .bandgrid.bopen .bandcel, body.plapp .bandgrid.binge .bandcel{max-height:none;min-height:0;height:100%}
}

/* ── toolbar: hover-schaduw per knop + soepele overgang ── */
#tbslot .wknav a, #tbslot .viewpills a, #tbslot .tbicon, #tbslot .tbpaars,
#tbslot .acties, #tbslot .fbtn-mobiel, #tbslot .infoknop{transition:box-shadow .15s}
#tbslot .wknav a:hover, #tbslot .viewpills a:hover, #tbslot .tbicon:hover, #tbslot .tbpaars:hover,
#tbslot .acties:hover, #tbslot .fbtn-mobiel:hover, #tbslot .infoknop:hover{
  box-shadow:0 3px 12px rgba(35,33,54,.18)}
@media (prefers-reduced-motion: reduce){
  #tbslot .wknav a, #tbslot .viewpills a, #tbslot .tbicon, #tbslot .tbpaars,
  #tbslot .acties, #tbslot .fbtn-mobiel, #tbslot .infoknop{transition:none}
}

/* ── dienst-paneel: CG-detailopbouw ── */
.pvplanwijze{font-size:.75rem;font-weight:600;color:#6c687f;padding-top:4px}
.pvregel{display:flex;align-items:center;gap:10px}
.pvregel label{font-size:.8125rem;font-weight:700;color:#232136}
.pvregel b{font-size:.8125rem;font-weight:600;color:#3a3650}
.pvlocatie{display:flex;align-items:center;gap:7px;font-size:.8125rem;font-weight:600;color:#3a3650}
.pvhistorie{border-top:1px solid #edecf3}
.pvhistorie > summary{font-size:.875rem;padding:12px 0}
#paneel .obadge{display:inline-flex;min-width:26px;height:16px;padding:0 7px;border-radius:6px;align-items:center;
  justify-content:center;color:#fff;font-size:8.5px;font-weight:800;font-style:normal}

/* ── rol-schrijfveld + verplichte rol + uitnodigen + functie per persoon ── */
.rolzoek{margin-bottom:6px}
.rolnieuw{border:1px dashed #b9b2e0;background:#f6f5fc;color:#4f46c9;border-radius:8px;padding:8px 10px;
  font:inherit;font-size:.7813rem;font-weight:700;cursor:pointer;text-align:left;width:100%}
.roldrop.rolfout > summary{border-color:#c0392b;box-shadow:0 0 0 3px rgba(192,57,43,.12)}
.fouttekst{color:#c0392b;font-weight:700}
.tw-uit{color:#4f46c9;font-weight:800;white-space:nowrap}
.fkeuze{margin-left:8px;border:1px solid #e0ddea;border-radius:8px;background:#fff;font:inherit;
  font-size:.7188rem;font-weight:600;color:#3a3650;padding:3px 6px}
.invnaam{font-weight:700}
.cgradios{display:flex;flex-wrap:wrap;gap:6px 18px}
.fopt.opend{border-top:0;padding-top:0;margin-top:-2px}
.stapper{grid-template-columns:minmax(0,1fr) auto;border:1px solid #edecf3;border-radius:10px;padding:7px 8px 7px 12px;background:#fff}
.stapbed{display:flex;align-items:center;gap:6px}
.stapbed .stapinp{width:48px}

/* ── datumvelden: overal de eigen kalenderpopup, native picker-icoon verbergen ── */
input[type=date]{cursor:pointer}
input[type=date]::-webkit-calendar-picker-indicator{display:none}

/* ══ App-breed E-thema: één stijl van CRM tot planningstool (indigo + Figtree + licht) ══ */
body{background:#f6f5fa}
.top{background:#fff;border-bottom:1px solid #e8e6f0}
.card, .statsbar{border-color:#e8e6f0}
.cinput{border-color:#e0ddea;border-radius:10px;background:#fff}
.cinput:focus{border-color:#5b54c9;box-shadow:0 0 0 3px rgba(91,84,201,.13);outline:0}
.btn-new, .csend, .csend.groot, .stapnr{background:#4f46c9}
.link{color:#4f46c9}
.pvk.primair{background:#4f46c9}
.pvk.primair:hover{background:#443dab}
.chip.new{background:#efeef8;color:#4f46c9}
.toast{border-color:#bfe3e7}
.search{border-color:#e0ddea}
::selection{background:rgba(91,84,201,.22)}

/* ── herhaal dienst + bijlagen + medewerkers CG ── */
.hheind{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.hhvk{font-size:.75rem;color:#6c687f;font-weight:600}
.hhsamen{font-size:.7813rem;font-weight:700;color:#3a3650;background:#efeef6;border-radius:6px;padding:5px 10px;justify-self:start}
.hhsamen:empty{display:none}
.uploadknop{display:inline-flex;align-items:center;gap:8px;border:1px solid #e0ddea;background:#fff;border-radius:10px;
  padding:9px 14px;font-size:.7813rem;font-weight:700;color:#232136;cursor:pointer;justify-self:start}
.uploadlijst{font-size:.7188rem;color:#6c687f;font-weight:600}
.uploadlijst:empty{display:none}
.bijlagelijst{list-style:none;display:grid;gap:4px;padding:0}
.bijlagelijst li{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:600}
.bijlagelijst button{border:0;background:none;cursor:pointer;color:#c0392b;font-size:.9375rem;padding:0 4px}
.mwtabs{display:flex;gap:2px;border-bottom:1px solid #e8e6f0;margin:2px 0 14px}
.mwtab{padding:10px 16px;font-size:.8438rem;font-weight:600;color:#6c687f;border-bottom:2px solid transparent}
.mwtab.on{color:#232136;font-weight:700;border-bottom-color:#4f46c9}
.mwlink{display:inline-flex;align-items:center}
.mwlink b{font-weight:700}
.mwmail{color:#55516b;font-weight:600}
.rolnieuwform{display:flex;gap:8px;margin-top:8px;max-width:420px}
.profkop{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start}
.profav{width:86px;height:86px;border-radius:50%;display:grid;place-items:center;color:#fff;
  font-size:1.75rem;font-weight:800}
.profvelden{display:grid;gap:10px}
.veldsub{font-weight:600;color:#9a96ad;font-size:.6875rem}
.sterrenrij{display:flex;align-items:center;gap:2px}
.ster{border:0;background:none;cursor:pointer;font-size:1.75rem;line-height:1;color:#dedbe9;padding:0 2px}
.ster.aan{color:#f0a92e}
.verloflijst{list-style:none;display:grid;gap:0;padding:0}
.verloflijst li{display:flex;align-items:center;gap:12px;padding:9px 2px;border-bottom:1px solid #f0eff5;font-size:.8125rem}
.verloflijst b{font-weight:700;font-variant-numeric:tabular-nums}
.verloflijst span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.verloflijst em{font-style:normal;font-size:.7188rem;font-weight:700;color:#8f8ba3}

/* ── medewerkers CG: filterbalk, eigen rollen per rij, rol-popup ── */
.mwside{align-content:start}
.wrollen{font-size:.8125rem;font-weight:600;color:#3a3650}
.rolplus{width:30px;height:30px;border:1px solid #e0ddea;background:#fff;border-radius:10px;cursor:pointer;
  font-size:1rem;font-weight:700;color:#4f46c9;display:grid;place-items:center;padding:0}
.rolplus:hover{box-shadow:0 3px 10px rgba(35,33,54,.16)}
#rolpop{display:none;position:fixed;z-index:130;width:300px;background:#fff;border:1px solid #e4e2ee;
  border-radius:12px;box-shadow:0 16px 40px rgba(35,33,54,.18);padding:10px}
#rolpop .rolpoplijst{display:flex;flex-wrap:wrap;gap:5px;max-height:280px;overflow:auto;margin-top:8px}
#rolpop .roltgl{border:1px solid #e0ddea;background:#fff;border-radius:99px;cursor:pointer;font:inherit;
  font-size:.7188rem;font-weight:600;color:#3a3650;padding:4px 11px}
#rolpop .roltgl.aan{background:#4f46c9;border-color:#4f46c9;color:#fff}
.cbn{margin-left:auto;font-style:normal;font-size:.6875rem;font-weight:700;color:#726e86}
.rolbeheerklap{margin-bottom:12px}
.profrollen{display:flex;align-items:center;gap:10px}
.mwtabel td{vertical-align:middle}

/* ── medewerkersprofiel CG-exact + uitnodigen ── */
.beheermenu{position:relative;margin-left:auto}
.beheermenu > summary{list-style:none;display:inline-flex;align-items:center;gap:8px;cursor:pointer}
.beheermenu > summary::-webkit-details-marker{display:none}
.beheermenu[open] > summary .cchev{transform:rotate(-90deg)}
.beheerpanel{position:absolute;top:calc(100% + 6px);right:0;z-index:60;background:#fff;border:1px solid #e4e2ee;
  border-radius:10px;box-shadow:0 14px 34px rgba(35,33,54,.14);padding:6px;min-width:230px}
.beheerpanel button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;cursor:pointer;
  font:inherit;font-size:.8125rem;font-weight:600;color:#232136;padding:9px 10px;border-radius:8px;text-align:left}
.beheerpanel button:hover{background:#f2f1f8}
.modalscrim{position:fixed;inset:0;z-index:140;background:rgba(35,33,54,.4);display:grid;place-items:center;padding:16px}
.modal{background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(35,33,54,.3);padding:20px;width:min(420px,100%);
  display:grid;gap:11px}
.modal h3{font-size:1.0625rem;font-weight:800}
.modalknoppen{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.proflinks{display:grid;gap:8px}
.profknop{display:flex;align-items:center;gap:9px;border:1px solid #e0ddea;background:#fff;border-radius:10px;
  cursor:pointer;font:inherit;font-size:.8125rem;font-weight:700;color:#232136;padding:10px 13px;text-align:left}
.profknop:hover{box-shadow:0 3px 10px rgba(35,33,54,.12)}
.profblok{display:flex;flex-wrap:wrap;gap:5px;padding:10px 2px;border-bottom:1px solid #f0eff5}
.reviewblok{margin-top:16px;border:1px solid #edecf3;border-radius:12px;padding:14px;display:grid;gap:8px}
.reviewrij{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}
.pvk.klein{padding:5px 11px;font-size:.7188rem}

/* ── CRM-medewerkerpagina Concept B: kopbalk + tabs ── */
.mkopbalk{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid #e8e6f0;
  border-radius:12px 12px 0 0;padding:16px 18px;flex-wrap:wrap}
.mkopinfo{flex:1;min-width:220px}
.mkopinfo b{font-size:1.1875rem;font-weight:800;display:block;line-height:1.2}
.mkopinfo span{font-size:.7813rem;color:#6c687f;font-weight:600}
.mkstatus{width:auto;max-width:170px;flex:0 0 auto;font-weight:700;font-size:.8125rem}
.mkopbalk .pvk{display:inline-flex;align-items:center;gap:7px}
.mtabs{background:#fff;border:1px solid #e8e6f0;border-top:0;margin:0 0 14px;padding:0 14px;border-radius:0 0 0 0}
.mlayout{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:14px;align-items:start}
.mgegevens{display:grid;grid-template-columns:1fr 1fr;gap:12px 22px}
.mgegevens .dfveld{gap:5px}
.mrollen{display:flex;align-items:center;min-height:40px;font-size:.8125rem;font-weight:700;color:#4f46c9;
  text-decoration:none;background:#fbfbfe}
.doc-rij{display:flex;align-items:center;gap:9px;padding:8px 0;border-bottom:1px solid #f0eff5;font-size:.8125rem;font-weight:600}
.doc-rij em{font-style:normal;margin-left:auto;font-size:.6875rem;color:#9a96ad}
.modalvelden{display:grid;grid-template-columns:1fr 1fr;gap:10px 12px}
.modalvelden .dfveld.breed{grid-column:1/-1}
@media (max-width:900px){ .mlayout{grid-template-columns:1fr} .mgegevens{grid-template-columns:1fr} .modalvelden{grid-template-columns:1fr} }

/* CRM-medewerkerkaart: inhoud netjes ingesprongen, tussenkoppen met scheidingslijn */
.kinhoud{padding:15px 18px;display:grid;gap:11px}
.card > header.tussenkop{border-top:1px solid var(--border)}
.mgegevens .dfveld > label{font-size:.7813rem;font-weight:700;color:#3a3650}

/* ── medewerkerpagina's mobiel: kopbalk stapelt, tabs scrollen op één regel ── */
.m-brand .mark{background:#4f46c9}
.mwtabs{overflow-x:auto;scrollbar-width:none}
.mwtabs::-webkit-scrollbar{display:none}
.mwtab{flex:0 0 auto;white-space:nowrap}
@media (max-width:740px){
  .mkopbalk{gap:10px;padding:14px}
  .mkopinfo{min-width:0;flex:1 1 100%}
  .mkopinfo span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .mkstatus{margin-left:0;flex:1 1 auto;max-width:none}
  .mkopbalk .pvk{flex:1 1 auto;justify-content:center}
  .kinhoud{padding:13px 14px}
  .mgegevens{gap:11px}
  .cgtop{position:static}
  .profkop{grid-template-columns:1fr;justify-items:start}
  .reviewrij{justify-content:flex-start}
  .modal{max-height:92dvh;overflow-y:auto}
}

/* medewerkerstabel mobiel: e-mail inkorten, geen horizontale overflow */
@media (max-width:740px){
  .mwtabel th:nth-child(2), .mwtabel td.mwmail{display:none}
  .mwtabel .wrollen{font-size:.75rem;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block}
  .plgrid .mwside{order:2}
}

/* ── medewerkerdetail: topbalk weg op desktop, kopbalk rond, tabs eigen kaart ── */
@media (min-width:1024px){
  body.mw-detail .top, body.mw-lijst .top{display:none}
  body.mw-detail .wrap, body.mw-lijst .wrap{padding-top:20px}
}
.mkopbalk{border-radius:12px}
.mkacties{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.mkopslaan{flex:0 0 auto}
.mtabs.mwtabs{background:#fff;border:1px solid #e8e6f0;border-radius:12px;margin:14px 0;padding:0 8px}
/* native datumveld (geboortedatum): typen én native kalender-icoon */
input.nativedate::-webkit-calendar-picker-indicator{display:block!important;opacity:.65;cursor:pointer;width:18px;height:18px}
/* documenten: kies-paneel met naam + geldigheid, lijst met verloopbadge */
.docpaneel{border:1px solid #e8e6f0;border-radius:10px;padding:14px;margin-top:10px;display:grid;gap:11px;background:#fbfbfe}
.docbestand{display:flex;align-items:center;gap:8px;font-size:.8125rem;font-weight:700;color:#232136}
.doclijst{list-style:none;display:grid;gap:0;padding:0}
.doclijst li{display:flex;align-items:center;gap:11px;padding:11px 2px;border-bottom:1px solid #f0eff5}
.docinfo{display:flex;flex-direction:column;min-width:0;flex:1}
.docinfo .link{font-weight:700}
.docsub{font-size:.6875rem;color:#9a96ad;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.docbadge{font-style:normal;font-size:.6875rem;font-weight:700;padding:3px 9px;border-radius:99px;white-space:nowrap;
  background:#f0eff5;color:#8a8598}
.docbadge.geldig{background:#e2f4f6;color:#0c7280}
.docbadge.binnenkort{background:#fdf0d9;color:#8a5a10}
.docbadge.verlopen{background:#fbe6e4;color:#c0392b}
.docdel{border:0;background:none;cursor:pointer;color:#c0392b;font-size:1rem;padding:0 4px;line-height:1}
.doc-rij .docbadge{margin-left:auto}

/* medewerkerdetail mobiel: Opslaan rechtsboven, acties op eigen regel */
@media (max-width:740px){
  .mkopbalk{flex-wrap:wrap;gap:10px;padding:14px}
  .profav{order:1}
  .mkopinfo{order:2;flex:1;min-width:0}
  .mkopslaan{order:3;flex:0 0 auto}
  .mkacties{order:4;flex:1 1 100%;gap:7px}
  .mkacties .mkstatus{flex:1 1 46%;max-width:none}
  .mkacties .pvk{flex:1 1 auto;justify-content:center}
  .mtabs.mwtabs{padding:0 4px}
  .mtabs .mwtab{padding:12px 11px;font-size:.8125rem}
  .doclijst li{flex-wrap:wrap;gap:8px}
  .docinfo{flex:1 1 60%}
}

/* hidden-attribuut moet altijd winnen van eigen display (grid/flex-panelen) */
[hidden]{display:none!important}

/* ── eigen status-dropdown met gekleurde stippen ── */
.statuskeuze{position:relative;flex:0 0 auto}
.statusknop{display:inline-flex;align-items:center;gap:8px;border:1px solid #e0ddea;background:#fff;border-radius:10px;
  padding:8px 12px;font:inherit;font-size:.8125rem;font-weight:700;color:#232136;cursor:pointer;min-width:140px;height:38px}
.statusknop .chev{margin-left:auto}
.statusdot{width:9px;height:9px;border-radius:50%;flex:0 0 auto}
.statusdot.active{background:#12b0c4}
.statusdot.invited{background:#e0a72e}
.statusdot.inactive{background:#b3adc4}
.statusmenu{position:absolute;top:calc(100% + 6px);left:0;z-index:60;background:#fff;border:1px solid #e4e2ee;
  border-radius:10px;box-shadow:0 14px 34px rgba(35,33,54,.16);padding:5px;display:grid;gap:2px;min-width:100%;width:max-content}
.statusmenu button{display:flex;align-items:center;gap:9px;width:100%;border:0;background:none;cursor:pointer;
  font:inherit;font-size:.8125rem;font-weight:600;color:#232136;padding:9px 12px;border-radius:8px;text-align:left;white-space:nowrap}
.statusmenu button:hover{background:#f2f1f8}
.statusmenu button.gekozen{background:#efeef8;font-weight:800}
@media (max-width:740px){
  .statuskeuze.mkstatus{flex:1 1 46%}
  .statusknop{width:100%}
}

/* ── medewerkerdetail v3: Opslaan bovenaan, losse blokken, strakke kopbalk, gelijke rol-chips ── */
/* Opslaan in de topbalk (mobiel) vs. in de kopbalk (desktop) */
.topopslaan{display:none}
@media (max-width:1023px){
  body.mw-detail .top .newmenu, body.mw-detail .top .syncform, body.mw-detail .top .search{display:none}
  body.mw-detail .top .topopslaan{display:inline-flex;margin-left:auto;height:40px}
  body.mw-detail .mkopbalk .mkopslaan{display:none}
}
/* kopbalk strakker: gelijke knophoogte, compacte gaps */
.mkopbalk .pvk, .mkopbalk .statusknop{height:38px}
.mkacties{gap:8px}
.mkopbalk{gap:12px;padding:14px 16px}
/* Documenten als eigen losse kaart onder het profiel */
.mcard-los{margin-top:14px}
/* rollen: chip en knop exact even groot */
.profrollen{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.profrollen .rdchip{height:34px;display:inline-flex;align-items:center;padding:0 14px;font-size:.8125rem;border-radius:9px}
.profrollen .pvk.klein{height:34px;padding:0 14px;font-size:.8125rem;display:inline-flex;align-items:center}

/* medewerkerdetail mobiel: actieknoppen strakker — status volle regel, Bel+WhatsApp 50/50 */
@media (max-width:740px){
  .mkacties{gap:7px}
  .mkacties .statuskeuze.mkstatus{flex:1 1 100%}
  .mkacties .pvk{flex:1 1 0;min-width:0}
}

/* ── document-verwijderknop: rond, opvallend, rood op hover ── */
.docdel{flex:0 0 auto;width:32px;height:32px;display:grid;place-items:center;border:1px solid #f0d9d6;
  background:#fdf3f2;border-radius:9px;cursor:pointer;transition:background .14s,border-color .14s,transform .1s}
.docdel:hover{background:#fbe2df;border-color:#e6b4ad}
.docdel:active{transform:scale(.94)}
/* ── rol-chip met verwijder-× ── */
.rdchip{display:inline-flex;align-items:center;gap:6px}
.rdx{border:0;background:none;cursor:pointer;color:#8f8ba3;font-size:1rem;line-height:1;padding:0 1px;
  border-radius:50%;width:18px;height:18px;display:grid;place-items:center;transition:background .12s,color .12s}
.rdx:hover{background:#fbe2df;color:#c0392b}
/* ── bevestigingsmelding vloeiend laten verdwijnen ── */
.toast{transition:opacity .5s,transform .5s}
.toast.weg{opacity:0;transform:translateY(-8px)}
@media (prefers-reduced-motion: reduce){ .toast{transition:none} }

/* ══ CRM Medewerkers-lijst: Clevergig-tabelopzet in profielstijl ══ */
.mwhead{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:16px}
.mwhead h1{font-size:1.5rem;font-weight:800;letter-spacing:-.01em}
.mwcrumb{font-size:.8125rem;color:#6c687f;font-weight:600}
.mwlay{display:grid;grid-template-columns:232px 1fr;gap:16px;align-items:start}
.mwzij{background:#fff;border:1px solid #e8e6f0;border-radius:12px;padding:6px 14px 12px;align-content:start}
.mwmain{min-width:0}
.mwmain .card{overflow:hidden}
.mwtabel{width:100%}
.mwtabel thead th{padding:13px 12px 13px 18px;background:#faf9fc;border-bottom:1px solid #eceaf3}
.mwtabel td{padding:12px 12px 12px 18px;border-bottom:1px solid #f0eff5;vertical-align:middle}
.mwtabel tbody tr:last-child td{border-bottom:0}
.mwtabel tbody tr{transition:background .12s}
.mwtabel tbody tr:hover{background:#faf9fe}
.mwsort{display:inline-flex;align-items:center;gap:5px;color:inherit;font:inherit;font-weight:800;text-decoration:none}
.mwsort i{font-style:normal;opacity:.35;font-size:.75rem}
.mwsort.on i{opacity:1;color:#4f46c9}
.mwlink{display:inline-flex;align-items:center;gap:11px}
.mwnaamcel{display:inline-flex;flex-direction:column;gap:1px;min-width:0}
.mwnaamcel b{font-weight:700;color:#232136}
.mwsterren{font-size:.75rem;color:#c67f0f;letter-spacing:1px;line-height:1}
.mwsterren .leeg{color:#c7c3d6}
.mwmeer{font-size:.75rem;color:#8a8598;padding:12px 18px 4px}
.mwzij .fsacties{margin-bottom:2px}
@media (max-width:900px){
  .mwlay{grid-template-columns:1fr}
  .mwzij{order:2}
  .mwhead h1{font-size:1.25rem}
}

/* ══ Offerte-popup: volledige offerte uit WeFact ══ */
#offmodal{z-index:150;padding:24px 16px;align-items:flex-start;overflow-y:auto}
.offbox{background:#fff;border-radius:16px;box-shadow:0 30px 70px rgba(35,33,54,.34);width:min(760px,100%);
  margin:auto;overflow:hidden}
.offrijlink{cursor:pointer;transition:background .12s}
.offrijlink:hover{background:#faf9fe}
.deal{cursor:pointer}
.offladen,.offfout{padding:40px;text-align:center;color:#6c687f;font-weight:600;font-size:.9375rem}
.offfout{color:#c0392b}
.offspin{display:inline-block;width:16px;height:16px;border:2px solid #d9d5ea;border-top-color:#4f46c9;
  border-radius:50%;vertical-align:-3px;margin-right:6px;animation:offdraai .7s linear infinite}
@keyframes offdraai{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .offspin{animation:none} }
.offvel{display:flex;flex-direction:column}
.offkop{display:flex;align-items:flex-start;gap:12px;padding:20px 22px;border-bottom:1px solid #eceaf3;position:relative}
.offcode{font-size:.75rem;font-weight:800;color:#4f46c9;letter-spacing:.02em}
.offkop h2{font-size:1.1875rem;font-weight:800;margin-top:2px}
.offkop .chip{margin-left:auto;align-self:center}
.offx{background:none;border:0;cursor:pointer;padding:2px;line-height:0;align-self:flex-start}
.offmeta{display:grid;grid-template-columns:1fr auto;gap:16px;padding:18px 22px;border-bottom:1px solid #f0eff5}
.offblok{display:flex;flex-direction:column;gap:2px;font-size:.8125rem;color:#3a3650}
.offblok b{font-weight:700;color:#232136}
dl.offblok.rechts{display:grid;grid-template-columns:auto auto;gap:7px 14px;align-items:baseline;margin:0}
dl.offblok.rechts dt{font-size:.6875rem;font-weight:700;color:#9a96ad;text-transform:uppercase;
  letter-spacing:.04em;text-align:right;align-self:center}
dl.offblok.rechts dd{margin:0;font-weight:700;color:#232136;font-size:.8125rem;
  font-variant-numeric:tabular-nums;text-align:left}
.offlabel{font-size:.6875rem;font-weight:700;color:#9a96ad;text-transform:uppercase;letter-spacing:.04em}
.offintro{padding:14px 22px 0;font-size:.8438rem;color:#3a3650;white-space:pre-line}
.offregels{padding:14px 22px 4px;overflow-x:auto}
.offtab{width:100%;border-collapse:collapse;font-size:.8125rem}
.offtab thead th{text-align:left;font-size:.6875rem;font-weight:800;text-transform:uppercase;letter-spacing:.03em;
  color:#8a8598;padding:8px 10px;border-bottom:1.5px solid #eceaf3}
.offtab th.r,.offtab td.r{text-align:right;white-space:nowrap}
.offtab td{padding:11px 10px;border-bottom:1px solid #f4f3f9;vertical-align:top}
.offoms{line-height:1.5}
.offoms strong{font-weight:700}
.offoms em{color:#6c687f}
.offleeg{color:#9a96ad;text-align:center;padding:18px}
.offtot{margin:6px 22px 0;padding:14px 0;border-top:1.5px solid #eceaf3;display:grid;gap:6px}
.offtrij{display:flex;justify-content:space-between;font-size:.8438rem;color:#3a3650}
.offtrij b{font-weight:700}
.offtrij.groot{font-size:1rem;font-weight:800;color:#232136;padding-top:8px;border-top:1px solid #f0eff5}
.offtrij.groot b{color:#4f46c9}
.offacties{display:flex;flex-wrap:wrap;gap:8px;padding:16px 22px 22px;justify-content:flex-end}
@media (max-width:600px){
  .offmeta{grid-template-columns:1fr}
  dl.offblok.rechts{justify-content:start}
  dl.offblok.rechts dt{text-align:left}
  .offacties{justify-content:stretch}
  .offacties .pvk{flex:1 1 auto;justify-content:center}
}

/* ── klantpagina: klikbare offerte-rijen, notitie/prijs verwijderen ── */
.tl-off, .tl li.tl-off{cursor:pointer;transition:background .12s}
.tl-off:hover{background:#faf9fe}
.tl li{position:relative}
.notedel{position:absolute;top:10px;right:8px;width:28px;height:28px;border:0;background:none;cursor:pointer;
  border-radius:8px;display:grid;place-items:center;opacity:0;transition:opacity .12s,background .12s}
.tl li.tl-note:hover .notedel{opacity:1}
.notedel:hover{background:#fbe2df}
.prijsdel{width:26px;height:26px;border:0;background:none;cursor:pointer;border-radius:7px;display:grid;place-items:center;
  transition:background .12s;margin-left:6px}
.prijsdel:hover{background:#fbe2df}
.prijslijst .end{display:flex;align-items:center;gap:2px}

/* ── medewerkerslijst mobiel: ruimere tap-targets (min. 40px) ── */
@media (max-width:740px){
  .mwzij .beheermenu{display:none}
  #beheermenu > summary{min-height:40px}
  .mwzij .laatmeer{display:inline-block;padding:8px 2px;min-height:40px}
  .mwtabel .mwsort{display:inline-flex;min-height:40px;align-items:center}
  .mwtabel .rolplus{width:40px;height:40px}
  .mwhead .beheermenu > summary{min-height:42px}
  .mwtabel td .mwlink{min-height:40px}
}

/* ══ Medewerkerslijst — premium finetune ══ */
.mwhead{align-items:center;margin-bottom:20px}
.mwhead h1{font-size:1.625rem;letter-spacing:-.02em}
.mwcrumb{margin-top:2px;display:inline-block}
/* filterbalk: nette kop, rustige groepen */
.mwzij{padding:4px 0 6px;overflow:hidden}
.mwzij-kop{display:flex;align-items:center;justify-content:space-between;padding:13px 16px 12px;border-bottom:1px solid #f0eff5}
.mwzij-titel{display:inline-flex;align-items:center;gap:7px;font-size:.9375rem;font-weight:800;color:#232136}
.mwzij-wis{font-size:.75rem;font-weight:700;color:#4f46c9}
.mwzij .fgroep{border-top:0;border-bottom:1px solid #f4f3f9;margin:0}
.mwzij .fgroep:last-of-type{border-bottom:0}
.mwzij .fgroep summary{padding:12px 16px;font-size:.8438rem;font-weight:700;color:#3a3650}
.mwzij .fgroep[open] summary{color:#232136}
.mwzij .fopts{padding:0 16px 14px}
.rollijst-vol{max-height:260px;overflow-y:auto;margin-top:6px;scrollbar-width:thin}
.rollijst-vol .cbitem{display:flex}
.mwzij .fgroep summary::after{margin-right:0}
/* tabs: verfijnde onderlijn-pills */
.mwtabs{display:inline-flex;gap:2px;padding:3px;margin:0 0 16px;background:#eeedf6;border-radius:11px;
  border:0;width:auto}
.mwtab{padding:7px 16px;font-size:.8125rem;font-weight:700;color:#6c687f;border-radius:8px;border:0;
  white-space:nowrap;transition:background .14s,color .14s,box-shadow .14s}
.mwtab:hover{color:#4f46c9}
.mwtab.on{background:#fff;color:#232136;box-shadow:0 1px 3px rgba(35,33,54,.13)}
/* tabel: ruimer, rustiger, met karakter */
.mwtabel thead th{padding:12px 14px 12px 20px;background:#fbfbfd;border-bottom:1px solid #eceaf3;
  font-size:.6875rem;letter-spacing:.06em;color:#726e86}
.mwtabel td{padding:0 14px 0 20px;height:60px;border-bottom:1px solid #f4f3f9}
.mwtabel tbody tr:hover{background:#f8f7fd}
.mwtabel .kav2.mini{width:34px;height:34px;font-size:.6875rem;box-shadow:0 0 0 3px #fff, 0 1px 3px rgba(35,33,54,.14)}
.mwtabel .mwlink{gap:13px}
.mwnaamcel b{font-size:.9063rem}
.mwmail{color:#55516b;font-weight:500;font-size:.8125rem}
/* rollen als chips */
.wrollen{display:flex;flex-wrap:wrap;gap:5px;align-items:center;max-width:340px}
.rchip{display:inline-flex;align-items:center;background:#efeef7;color:#4a4668;border-radius:7px;
  padding:4px 9px;font-size:.7188rem;font-weight:700;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.rchip.meer{background:#e5e3f3;color:#4f46c9}
.rleeg{color:#b9b4cc;font-weight:600}
/* koppel-knop verfijnd */
.rolplus{width:34px;height:34px;border:1px solid #e8e6f0;background:#fff;border-radius:9px;cursor:pointer;
  display:grid;place-items:center;padding:0;transition:border-color .12s,box-shadow .12s,background .12s}
.rolplus:hover{border-color:#c9c4ea;background:#faf9fe;box-shadow:0 2px 8px rgba(79,70,201,.14)}
/* nette lege staat */
.mwleeg{text-align:center;padding:44px 8px!important;display:table-cell}
.mwleeg .ic{margin:0 auto 10px}
.mwleeg b{display:block;font-size:.9375rem;color:#3a3650}
.mwleeg span{display:block;font-size:.8125rem;color:#9a96ad;margin-top:3px}
.mwmeer{padding:14px 20px 6px;color:#9a96ad}

/* ── medewerkerslijst: toolbar met tabs + Clevergig-stijl sorteren vanuit de kolomkop ── */
.mwtoolbar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.mwtoolbar .mwtabs{margin:0}
/* sorteerbare kolomkop = klikbare knop met chevron (opent keuzemenu eronder) */
.mwtabel thead th.kolh{padding:0}
.kolsort{display:inline-flex;align-items:center;gap:6px;width:100%;padding:12px 14px 12px 20px;
  background:none;border:0;cursor:pointer;text-align:left;color:#726e86;
  font-weight:800;font-size:.6875rem;letter-spacing:.06em;text-transform:uppercase;transition:color .12s}
.kolsort:hover{color:#4f46c9}
.kolsort.on{color:#4f46c9}
.kolsort .kchev{flex:0 0 auto;transition:transform .15s}
.kolsort.open .kchev{transform:rotate(180deg)}
/* het menu zelf: vast gepositioneerd (geen clipping), gegroepeerd per kolom */
.kolsortpop{position:fixed;z-index:120;background:#fff;border:1px solid #e6e4ef;border-radius:12px;
  box-shadow:0 16px 40px rgba(35,33,54,.16);padding:6px;min-width:210px}
.kspgroep{font-size:.6875rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:#9490a8;padding:9px 12px 4px}
.kspgroep:first-child{padding-top:5px}
.kspopt{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 12px;border-radius:8px;
  font-size:.8125rem;font-weight:600;color:#3a3650;text-decoration:none}
.kspopt:hover{background:#f4f3f9}
.kspopt.aan{background:#efeef8;color:#232136;font-weight:800}

/* plantool-medewerkerspagina = exact gelijk aan CRM: geen eigen breedte/marge meer
   (de gedeelde shell-regel body.mw-lijst/.mw-plan .wrap regelt de rest) */

/* ══ Medewerkers als tool: lijst scrollt intern, kop/toolbar vast, paginering onderaan de kaart ══ */
.mwkaart{padding:0;display:flex;flex-direction:column;min-height:0}
.mwpager{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:11px 16px;
  border-top:1px solid #eceaf3;background:#fff;border-radius:0 0 var(--r) var(--r)}
.mwpager-tel{font-size:.8125rem;font-weight:600;color:#8a8598}
.mwpager-tel b{color:#232136;font-weight:800;font-variant-numeric:tabular-nums}
.mwpag-knoppen{display:flex;align-items:center;gap:4px;margin-left:auto}
.mwpg{min-width:34px;height:34px;padding:0 7px;display:inline-flex;align-items:center;justify-content:center;
  border-radius:9px;font-size:.8125rem;font-weight:700;color:#3a3650;text-decoration:none;
  border:1px solid transparent;font-variant-numeric:tabular-nums;transition:background .12s,border-color .12s,color .12s}
.mwpg:hover{background:#f2f1f8}
.mwpg.nu{background:#4f46c9;color:#fff}
.mwpg.gap{color:#b9b4cc;pointer-events:none;min-width:18px;padding:0}
.mwpg.pijl{border:1px solid #e4e2ee;background:#fff}
.mwpg.pijl:hover{border-color:#c9c4ea;background:#faf9fe}
.mwpg.pijl.uit{opacity:.4;pointer-events:none}
@media (min-width:1024px){
  /* kop + toolbar vast; grid vult resthoogte; lijst scrollt binnen de kaart */
  body.mw-lijst .wrap, body.mw-plan .wrap{display:flex;flex-direction:column;min-height:0;overflow:hidden;
    padding-top:20px;padding-bottom:22px}
  body.mw-lijst .mwlay, body.mw-plan .mwlay{flex:1 1 auto;min-height:0;align-items:stretch}
  body.mw-lijst .mwzij, body.mw-plan .mwzij{overflow-y:auto;scrollbar-width:thin;align-self:stretch}
  body.mw-lijst .mwmain, body.mw-plan .mwmain{display:flex;flex-direction:column;min-height:0}
  body.mw-lijst .mwkaart, body.mw-plan .mwkaart{flex:1 1 auto;min-height:0;overflow:hidden}
  body.mw-lijst .mwtafel, body.mw-plan .mwtafel{flex:1 1 auto;min-height:0;overflow-y:auto}
  /* kolomkoppen blijven staan tijdens scrollen */
  body.mw-lijst .mwtafel thead th, body.mw-plan .mwtafel thead th{position:sticky;top:0;z-index:3}
}
/* ── plantool-medewerkerspagina = full-width app: edge-to-edge, vaste kopbalk + flush filterbalk ── */
@media (min-width:1024px){
  body.mw-plan .wrap{padding:0}
  body.mw-plan .mwhead{margin:0;padding:14px 24px;background:#fff;border-bottom:1px solid #e8e6f0;flex:0 0 auto}
  body.mw-plan .mwhead h1{font-size:1.375rem}
  body.mw-plan .mwlay{gap:0}
  body.mw-plan .mwzij{border:0;border-right:1px solid #e8e6f0;border-radius:0;padding:16px 16px 20px;background:#fafafa}
  body.mw-plan .mwmain{padding:16px 20px 16px;min-width:0}
}
/* medewerkers op mobiel: exact dezelfde CG-filter-drawer als de plantool (schuift links in via het "|||"-handvat) */
@media (max-width:1023px){
  body.plapp .mwzij{position:fixed;top:0;left:0;bottom:0;width:min(320px,88vw);z-index:85;
    order:0;margin:0;border:0;border-radius:0;background:#fafafa;
    transform:translateX(-105%);transition:transform .22s cubic-bezier(.2,.7,.3,1);overflow-y:auto}
  body.plapp.filters-open .mwzij{transform:none}
}
@media (prefers-reduced-motion: reduce){ .mwzij{transition:none} }
@media (max-width:740px){
  .mwpager{justify-content:space-between}
  .mwpag-knoppen{margin-left:0}
  .mwpg{min-width:32px;height:32px}
}

/* ══════════ DIENSTKAART 2026 — G·Duotone + V4 Gloed + R5-dichter (Ayham mockup-keuze 2026-07-08) ══════════
   Autoritatief blok: staat NA alle oudere kaart-blokken en wint dus per bronvolgorde.
   Staten: sk-vol (duotone) · sk-deels (amber) · sk-leeg (licht-amber) · sk-aanmeld (aqua)
         · sk-concept (grijs gestippeld) · sk-conceptmw (paarsgrijs gestippeld, personeel al ingepland) */
body.plapp a.cgc{display:flex;flex-direction:column;align-items:stretch;position:relative;overflow:hidden;
  border-radius:4px;padding:6px 12px 9px;padding-top:21px;
  background:#e0def3;
  border:1px solid #cbc7e6;box-shadow:0 1px 2px rgba(35,33,54,.04);
  transition:border-color .12s, box-shadow .12s}
body.plapp a.cgc::before{content:'';position:absolute;left:0;right:0;top:0;height:15px;background:#4f46c9;z-index:0}
body.plapp a.cgc::after{display:none}
body.plapp a.cgc > *{position:relative;z-index:1}
body.plapp a.cgc .cgt{font-size:12.5px;font-weight:600;line-height:1.25;padding:0;color:#232136;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
body.plapp a.cgc .cgcl{font-style:normal;font-size:8px;font-weight:800;letter-spacing:.06em;color:#8a85a0;
  background:#ecebf2;padding:2px 5px;border-radius:4px;margin-right:6px;vertical-align:1px}
body.plapp a.cgc .cgo{display:flex;align-items:center;gap:5px;padding:0;margin-top:2px;min-width:0}
body.plapp a.cgc .cgo .okort{min-width:17px;height:14px;padding:0 3px;border-radius:4px;background:var(--org,#8b85a8);
  color:#fff;font-size:7px;font-weight:800;font-style:normal;display:inline-flex;align-items:center;justify-content:center;
  flex:none;letter-spacing:.02em;line-height:1}
body.plapp a.cgc .cgo .oname{font-size:11px;font-weight:500;color:#3a3650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.plapp a.cgc .cgw{display:flex;align-items:center;gap:6px;padding:0;margin-top:6px;min-width:0}
body.plapp a.cgc .cgw .avmini{width:16px;height:16px;font-size:6.5px;font-weight:700;border:0;margin:0;
  background:#4f46c9;color:#fff;flex:none}
body.plapp a.cgc .cgw .avmini.avleeg{background:#fff;border:1.5px dashed #c6c2d6;color:#8a85a0;padding:0}
body.plapp a.cgc .cgw .avmini.avaan{background:#0f9b8e;padding:0}
body.plapp a.cgc .cgw .wnaam{font-size:11.5px;font-weight:500;color:#3a3650;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
body.plapp a.cgc .cgw .wnaam.stil{color:#8a85a0}
body.plapp a.cgc .cgw .wnaam.aanm{color:#0c7268;font-weight:600}
body.plapp a.cgc .plusn{font-style:normal;font-size:8.5px;font-weight:800;color:#fff;background:#4f46c9;
  border-radius:99px;min-width:20px;height:14px;padding:1px 5px 0;flex:none;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;line-height:1}
body.plapp a.cgc .openhint{font-style:normal;font-size:11px;color:#6b6880;flex:none;white-space:nowrap}
body.plapp a.cgc .openpil{font-style:normal;font-size:8.5px;font-weight:800;color:#fff;background:#d97706;
  border-radius:99px;height:14px;padding:1px 6px 0;flex:none;letter-spacing:.02em;
  display:inline-flex;align-items:center;justify-content:center;line-height:1;white-space:nowrap}
body.plapp a.cgc .aanpil{font-style:normal;font-size:9px;font-weight:800;color:#0c7268;background:#d7f0ea;
  border-radius:99px;padding:2px 7px;flex:none;white-space:nowrap}
body.plapp a.cgc .cgtijd{display:flex;align-items:center;gap:4px;padding:0;margin-top:6px;padding-top:6px;
  border-top:1px solid rgba(35,33,54,.08);font-size:11.5px;font-weight:500;color:#3a3650;
  font-variant-numeric:tabular-nums;overflow:hidden}
body.plapp a.cgc .cgtijd .t1, body.plapp a.cgc .cgtijd .t2, body.plapp a.cgc .cgtijd .tsep{font-weight:500;color:#3a3650;
  position:relative;top:1px}
body.plapp a.cgc .bzt{margin-left:auto;font-style:normal;font-size:9.5px;font-weight:700;padding:3px 8px 1px;
  border-radius:99px;background:#4f46c9;color:#fff;border:0;flex:none;line-height:1.26}
body.plapp a.cgc .bzt.vol{background:#4f46c9;color:#fff}
body.plapp a.cgc .konflikt{font-style:normal;font-weight:700;font-size:10px;color:#c0332b;background:none;
  padding:0;margin-left:6px;flex:none;white-space:nowrap}
body.plapp a.cgc .konflikt .kd{font-style:normal}

/* — staat: deels gevuld (amber) — */
body.plapp a.cgc.sk-deels{background:#e6f9f8;border-color:#b8e5e1}
body.plapp a.cgc.sk-deels::before{background:#4dcdc4}
body.plapp a.cgc.sk-deels .cgtijd{border-top-color:rgba(12,114,104,.16)}
body.plapp a.cgc.sk-deels .bzt{background:#d97706;color:#fff}
/* — staat: gepubliceerd, nog geen reacties (licht-amber) — */
body.plapp a.cgc.sk-leeg{background:#e6f9f8;border-color:#b8e5e1}
body.plapp a.cgc.sk-leeg::before{background:#4dcdc4}
body.plapp a.cgc.sk-leeg .cgtijd{border-top-color:rgba(12,114,104,.16)}
body.plapp a.cgc.sk-leeg .bzt{background:#fff;color:#b45309;border:1px solid #ecd9ae}
/* — staat: aanmeldingen te beoordelen (aqua) — */
body.plapp a.cgc.sk-aanmeld{background:#e6f9f8;border-color:#b8e5e1}
body.plapp a.cgc.sk-aanmeld::before{background:#4dcdc4}
body.plapp a.cgc.sk-aanmeld .cgtijd{border-top-color:rgba(12,114,104,.14)}
body.plapp a.cgc.sk-aanmeld .bzt{background:#fff;color:#b45309;border:1px solid #ecd9ae}
/* — staat: concept leeg (grijs gestippeld) — */
body.plapp a.cgc.sk-concept{background:linear-gradient(180deg,#fdfdfe 0%,#f4f3f8 100%);
  border:1.5px solid #b9b4cc;box-shadow:none}
body.plapp a.cgc.sk-concept::before{background:#c6c2d6}
body.plapp a.cgc.sk-concept::after{display:none}
body.plapp a.cgc.sk-concept .bzt{background:#8a85a0;color:#fff;border:0}
/* — staat: concept mét personeel (paarsgrijs gestippeld, klantkleur blijft) — */
body.plapp a.cgc.sk-conceptmw{background:linear-gradient(160deg,#f6f8fe 0%,#f0eef9 100%);
  border:1.5px solid #b9b2d9;box-shadow:none}
body.plapp a.cgc.sk-conceptmw::after{display:none}
body.plapp a.cgc.sk-conceptmw::before{background:#c6c2d6}
body.plapp a.cgc.sk-conceptmw .cgcl{color:#5b54c9;background:#e7e4f8}
body.plapp a.cgc.sk-conceptmw .bzt{background:#8681c9;color:#fff;border:0}

/* compacte weergave: titel + tijd, geen voet-lijn, strakke padding (nieuwe kaart) */
body.dicht.plapp a.cgc{padding:3px 10px 5px 12px;padding-top:18px}
body.dicht.plapp a.cgc .cgtijd{margin-top:2px;padding-top:0;border-top:0}

/* Opdrachtgever weergave (ov-check): kaart kleurt mee met de klant; status blijft leesbaar via de chip.
   Staat NA de sk-staten zodat de klanttint wint; concept blijft gestippeld (alleen border-color wijzigt). */
body.plapp a.cgc.ovk{background:linear-gradient(160deg,color-mix(in oklab,var(--org,#8b85a8) 7%,#fff) 0%,color-mix(in oklab,var(--org,#8b85a8) 16%,#fff) 100%);
  border-color:color-mix(in oklab,var(--org,#8b85a8) 34%,#fff)}
body.plapp a.cgc.ovk .cgtijd{border-top-color:color-mix(in oklab,var(--org,#8b85a8) 20%,transparent)}

/* legenda-vlakjes voor de 6 staten */
#legenda .lv6{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:2px;vertical-align:-2px}
#legenda .lv6.vol{background:#e0def3;border:1px solid #cbc7e6}
#legenda .lv6.deels{background:#e6f9f8;border:1px solid #4dcdc4}
#legenda .lv6.leeg{background:#e6f9f8;border:1px solid #b8e5e1}
#legenda .lv6.aanmeld{background:linear-gradient(160deg,#f6fffd,#e2f4f0);border:1px solid #bfe2da}
#legenda .lv6.concept{background:#f4f3f8;border:1.5px solid #b9b4cc}
#legenda .lv6.conceptmw{background:#f0eef9;border:1.5px solid #b9b2d9}

/* ── mobiel: zelfde systeem geschaald naar de 7-daagse week (wint van het oudere mobiele blok) ── */
@media (max-width:1023px){
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc{border-radius:4px;padding:5px 4px 5px 5px;padding-top:10px;min-height:44px;
    background:#e0def3;border:1px solid #cbc7e6;box-shadow:none}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc::before{height:7px}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgo{gap:3px;margin-top:1px}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgo .okort{min-width:13px;height:11px;padding:0 2px;font-size:6px;border-radius:3px}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgo .oname{color:#3a3650}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .plusn{order:-1;min-width:13px;height:10px;font-size:6px;padding:.5px 3px 0}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgcl{display:none}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .konflikt .kd{display:none}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .konflikt{position:absolute;top:9px;right:3px;margin:0;font-size:8px;z-index:2}
  /* conflict-driehoek naar de hoek zodat tijd + chip nooit afkappen */
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .konflikt{position:absolute;top:9px;right:3px;margin:0;font-size:8px;z-index:2}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .openhint,
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .openpil,
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .aanpil{display:none}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgw{margin-top:2px}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgw .wnaam{font-size:8px;font-weight:500}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgw .wnaam.aanm{font-weight:700}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .cgtijd{margin-top:3px;padding-top:0;border-top:0;font-size:8px;gap:2px;letter-spacing:-.1px}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc .bzt{font-size:6.5px;padding:1px 3px}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc.sk-deels{background:#e6f9f8;border-color:#b8e5e1}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc.sk-deels::before{background:#4dcdc4}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc.sk-leeg{background:#e6f9f8;border-color:#b8e5e1}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc.sk-leeg::before{background:#4dcdc4}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc.sk-aanmeld{background:#e6f9f8;border-color:#b8e5e1}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc.sk-aanmeld::before{background:#4dcdc4}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc.sk-concept{background:linear-gradient(180deg,#fdfdfe 0%,#f4f3f8 100%);border:1.5px solid #b9b4cc}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc.sk-concept::before{background:#c6c2d6}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc.sk-concept::after{display:none}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc.sk-conceptmw{background:linear-gradient(160deg,#f6f8fe 0%,#f0eef9 100%);border:1.5px solid #b9b2d9}
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc.sk-conceptmw::after{display:none}
  /* R5-dichter op mobiel: kaarten iets strakker op elkaar */
  .bandcel{gap:2.5px}
}

/* ── kaart-rij centrering: initialen exact midden in de cirkel, naam exact midden in de rij ── */
body.plapp a.cgc .cgw{align-items:center}
body.plapp a.cgc .cgw .avmini{display:inline-flex;align-items:center;justify-content:center;
  line-height:1;padding:1px 0 0;letter-spacing:.02em}
body.plapp a.cgc .cgw .wnaam, body.plapp a.cgc .cgw .plusn,
body.plapp a.cgc .cgw .openhint{line-height:1.25}

/* ── mobiel diensten-rooster: pagina staat VAST, elke dag scrolt in zijn eigen kolom ── */
@media (max-width:1023px){
  body.plkal{height:100dvh;overflow:hidden}
  body.plkal .wrap{height:100%;display:flex;flex-direction:column;overflow:hidden;padding-bottom:0}
  body.plkal #tbslot{flex:0 0 auto}
  body.plkal #plgridwrap, body.plkal #plgrid-partial{flex:1 1 auto;min-height:0;display:flex;flex-direction:column}
  body.plkal #plgrid-partial > .pltoolbar, body.plkal #plgrid-partial > .dagchips{flex:0 0 auto}
  body.plkal .plancanvas{flex:1 1 auto;min-height:0;overflow:hidden}
  body.plkal .bandgrid .bandcel{overflow-y:auto;max-height:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  body.plkal .bandgrid .bandcel::-webkit-scrollbar{display:none}
}

/* ── Crewly-logo (witte uil van Ayham, 2026-07-08): sidebar, mobiele kop, login ── */
.marklogo{height:38px;width:auto;display:block;flex:none}
.m-brand .marklogo{height:30px}
.loginbrand .marklogo.groot{height:52px}

/* aantal-blokje bij "Nog geen reacties": toont hoeveel personen op de dienst kunnen */
body.plapp a.cgc .cgw .avmini.avtal{border-radius:4px;background:#4dcdc4;border:0;color:#fff;
  font-size:9.5px;font-weight:800;padding:1px 0 0}
body.plapp a.cgc.sk-concept .cgw .avmini.avtal,
body.plapp a.cgc.sk-conceptmw .cgw .avmini.avtal{background:#8a85a0}

/* Opdrachtgever weergave: de 15px kop-balk kleurt mee met de klant (duidelijkste klant-signaal) */
body.plapp a.cgc.ovk::before{background:var(--org,#8b85a8)}
@media (max-width:1023px){
  body.plapp .plancanvas:not(.dagmodus) .bandgrid a.cgc.ovk::before{background:var(--org,#8b85a8)}
}