/* Multifurn werkplek (fase 3, stap 2): shell, componenten en het Role Center van het interne dashboard.
   Richtlijn multifurn-werkplek 1.2 (hoofdstuk 7 shell, 8 paginatypen, 9 componenten, 12 mobiel).
   Alles geldt alleen met class="wpf" op <html> (vlag werkplek uit /auth/ik) en alle klassen beginnen met wp-,
   zodat app.css en de oude pagina's niet botsen. Elke waarde komt uit tokens.css (--wp-*) of uit de toegestane
   lijst van richtlijn 3.7 (test T6). Breakpoints in em (48em = 768, 64em = 1024, 80em = 1280), zodat er geen losse px staan. */

/* ---------- Overgang: element-regels van portal 1.0 (tokens.css) erven op een werkplekpagina van html ---------- */
:where(.wpf) :is(body,h1,h2,h3,h4){font:inherit;color:inherit}
/* Oude pagina's en oude vensters (nog niet omgezet) houden hun eigen typografie binnen de nieuwe shell. */
:where(.wpf) :is([data-oud], body > :not(#app):not(.wp-laag):not(#melding)){font:var(--mf-body);color:var(--mf-text-secondary);white-space:normal;font-variant-numeric:normal}
:where(.wpf) :is([data-oud], body > :not(#app):not(.wp-laag):not(#melding)) h1{font:var(--mf-h1);color:var(--mf-text-primary)}
:where(.wpf) :is([data-oud], body > :not(#app):not(.wp-laag):not(#melding)) h2{font:var(--mf-h2);color:var(--mf-text-primary)}
:where(.wpf) :is([data-oud], body > :not(#app):not(.wp-laag):not(#melding)) h3{font:var(--mf-h3);color:var(--mf-text-primary)}
:where(.wpf) :is([data-oud], body > :not(#app):not(.wp-laag):not(#melding)) h4{font:var(--mf-h4);color:var(--mf-text-primary)}
.wpf [data-oud]{min-width:0;overflow-x:auto}

/* ---------- Basis ---------- */
.wpf{font-family:var(--wp-font);font-size:var(--wp-t-body);line-height:var(--wp-lh-body);font-weight:var(--wp-fw-regular);color:var(--wp-text);background:var(--wp-canvas);font-variant-numeric:tabular-nums}
.wpf body{margin:0;background:var(--wp-canvas)}
.wpf [hidden]{display:none!important}
.wpf .wp-app,.wpf .wp-laag{box-sizing:border-box;font-family:var(--wp-font);font-size:var(--wp-t-body);line-height:var(--wp-lh-body);color:var(--wp-text);font-variant-numeric:tabular-nums}
.wpf :where(.wp-app,.wp-laag) :where(:not([data-oud] *)),.wpf :where(.wp-app,.wp-laag) :where(:not([data-oud] *))::before,.wpf :where(.wp-app,.wp-laag) :where(:not([data-oud] *))::after{box-sizing:border-box}
.wpf :where(.wp-app,.wp-laag) :where(a:not([data-oud] *)){color:inherit;text-decoration:none}
.wpf :where(.wp-app,.wp-laag) :where(button:not([data-oud] *)){font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:inherit}
.wpf :where(.wp-app,.wp-laag) :where(:is(h1,h2,h3,p,ul):not([data-oud] *)){margin:0;padding:0}
.wpf .wp-i{flex:none;fill:none;stroke:currentColor;stroke-width:var(--wp-icon-stroke);stroke-linecap:round;stroke-linejoin:round;display:block}
.wpf .wp-i14{width:var(--wp-icon-s);height:var(--wp-icon-s)}
.wpf .wp-i16{width:var(--wp-icon);height:var(--wp-icon)}
.wpf .wp-i20{width:var(--wp-icon-l);height:var(--wp-icon-l)}
.wpf .wp-ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.wpf .wp-grow{flex:1}
.wpf .wp-meta{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-3);white-space:nowrap}
.wpf .wp-c2{color:var(--wp-text-2)}
.wpf .wp-sb{font-weight:var(--wp-fw-semibold)}
.wpf .wp-warn{color:var(--wp-warn)}
.wpf .wp-bad{color:var(--wp-bad)}
.wpf .wp-ok{color:var(--wp-ok)}
.wpf .wp-sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);white-space:nowrap}
.wpf :is(.wp-app,.wp-laag) :focus-visible:not([data-oud] *){outline:var(--wp-focus-w) solid var(--wp-focus);outline-offset:var(--wp-focus-offset)}

/* ---------- Knoppen, link, info, avatar (9.1, 9.2, 9.14) ---------- */
.wpf .wp-ibtn{width:var(--wp-h-control);height:var(--wp-h-control);display:inline-flex;align-items:center;justify-content:center;border-radius:var(--wp-r-control);color:var(--wp-text-2);flex:none;position:relative}
.wpf .wp-ibtn:hover{background:var(--wp-neutral);color:var(--wp-text)}
.wpf .wp-btn{height:var(--wp-h-control);padding:0 var(--wp-s3);display:inline-flex;align-items:center;gap:var(--wp-s2);border:var(--wp-border-w) solid var(--wp-border-strong);border-radius:var(--wp-r-control);background:var(--wp-surface);color:var(--wp-text);font-weight:var(--wp-fw-semibold);flex:none;white-space:nowrap}
.wpf .wp-btn:hover{background:var(--wp-hover)}
.wpf .wp-btn-pri{background:var(--wp-primary);border-color:var(--wp-primary);color:var(--wp-on-dark)}
.wpf .wp-btn-pri:hover{background:var(--wp-primary-hover);border-color:var(--wp-primary-hover)}
.wpf .wp-btn[aria-disabled="true"]{color:var(--wp-text-3);background:var(--wp-subtle);border-color:var(--wp-border);cursor:not-allowed}
.wpf .wp-btn:active,.wpf .wp-ibtn:active,.wpf .wp-ritem:active,.wpf .wp-seg button:active,.wpf .wp-tab:active{background:var(--wp-neutral)}
.wpf .wp-btn-pri:active{background:var(--wp-primary-pressed);border-color:var(--wp-primary-pressed)}
.wpf .wp-lnk{display:inline-flex;align-items:center;gap:var(--wp-s1);font-weight:var(--wp-fw-semibold);color:var(--wp-text);white-space:nowrap;position:relative}
.wpf .wp-lnk:hover{text-decoration:underline}
.wpf .wp-info{width:var(--wp-h-control-s);height:var(--wp-h-control-s);border-radius:var(--wp-r-full);display:inline-flex;align-items:center;justify-content:center;color:var(--wp-text-3);flex:none;position:relative}
.wpf .wp-info:hover,.wpf .wp-info[aria-expanded="true"]{background:var(--wp-neutral);color:var(--wp-text)}
.wpf .wp-avatar{width:var(--wp-avatar);height:var(--wp-avatar);border-radius:var(--wp-r-full);background:var(--wp-count-dark);color:var(--wp-on-dark);font-size:var(--wp-t-small);line-height:28px;font-weight:var(--wp-fw-semibold);text-align:center;display:block;flex:none}
.wpf .wp-acct{height:var(--wp-h-control);width:var(--wp-h-control);display:flex;align-items:center;justify-content:center;border-radius:var(--wp-r-control);flex:none}
.wpf .wp-acct:hover{background:var(--wp-neutral)}
.wpf .wp-ibtn-b{width:var(--wp-h-touch);height:var(--wp-h-touch);display:inline-flex;align-items:center;justify-content:center;border:var(--wp-border-w) solid var(--wp-border-strong);border-radius:var(--wp-r-control);background:var(--wp-surface);color:var(--wp-text);flex:none}
.wpf .wp-ibtn-b:hover{background:var(--wp-hover)}
.wpf .wp-draai{animation:wp-draai 1s linear infinite}
@keyframes wp-draai{to{transform:rotate(360deg)}}

/* ---------- Tellers en statuslabel (9.10, 9.11, 9.12) ---------- */
.wpf .wp-cnt{display:inline-flex;align-items:center;justify-content:center;height:var(--wp-h-badge);min-width:var(--wp-h-badge);padding:0 var(--wp-s1);border-radius:var(--wp-r-full);font-size:var(--wp-t-small);line-height:20px;font-weight:var(--wp-fw-semibold);flex:none}
.wpf .wp-cnt.wp-w{background:var(--wp-warn-bg);color:var(--wp-warn)}
.wpf .wp-cnt.wp-b{background:var(--wp-bad-bg);color:var(--wp-bad)}
.wpf .wp-cnt.wp-z{background:var(--wp-neutral);color:var(--wp-text-3)}
.wpf .wp-cnt-s{display:inline-flex;align-items:center;justify-content:center;height:var(--wp-h-badge-s);min-width:var(--wp-h-badge-s);padding:0 var(--wp-s1);border-radius:var(--wp-r-full);background:var(--wp-count-dark);color:var(--wp-on-dark);font-size:var(--wp-t-small);line-height:var(--wp-lh-small);font-weight:var(--wp-fw-semibold);flex:none}
.wpf .wp-cnt-s.wp-b{background:var(--wp-bad)}
.wpf .wp-label{display:inline-flex;align-items:center;height:var(--wp-h-badge);padding:0 var(--wp-s2);border-radius:var(--wp-r-full);font-size:var(--wp-t-small);line-height:var(--wp-lh-small);font-weight:var(--wp-fw-semibold);background:var(--wp-neutral);color:var(--wp-text-2);vertical-align:middle}
.wpf .wp-label.wp-l-ok{background:var(--wp-ok-bg);color:var(--wp-ok)}
.wpf .wp-label.wp-l-w{background:var(--wp-warn-bg);color:var(--wp-warn)}
.wpf .wp-label.wp-l-b{background:var(--wp-bad-bg);color:var(--wp-bad)}

/* ---------- Kaart, kaartkop, omgevingskop, popover (9.4, 9.6, 9.14) ---------- */
.wpf .wp-kaart{background:var(--wp-surface);border:var(--wp-border-w) solid var(--wp-border);border-radius:var(--wp-r-surface);overflow:hidden;display:flex;flex-direction:column;min-width:0;position:relative;white-space:nowrap}
.wpf .wp-kaart.wp-pop-open{overflow:visible}
.wpf .wp-kop{height:var(--wp-h-card-head);padding:0 var(--wp-s4);display:flex;align-items:center;justify-content:space-between;gap:var(--wp-s3);flex:none;position:relative}
.wpf .wp-kop-l{display:flex;align-items:center;gap:var(--wp-s2);min-width:0}
.wpf .wp-kop-r{display:flex;align-items:center;gap:var(--wp-s3);flex:none}
.wpf .wp-ktitel{font-size:var(--wp-t-card);line-height:var(--wp-lh-card);font-weight:var(--wp-fw-semibold);color:var(--wp-text);white-space:nowrap;flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis}
.wpf .wp-kop-l .wp-meta{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wpf .wp-omgkop{height:var(--wp-h-card-head);padding:0 var(--wp-s4);background:var(--wp-subtle);border-bottom:var(--wp-border-w) solid var(--wp-border);display:flex;align-items:center;gap:var(--wp-s2);flex:none;position:relative}
.wpf .wp-omgkop .wp-ot{display:flex;align-items:center;gap:var(--wp-s2);font-size:var(--wp-t-card);line-height:var(--wp-lh-card);font-weight:var(--wp-fw-semibold);color:var(--wp-text)}
.wpf .wp-pop{position:absolute;z-index:var(--wp-z-popover);top:var(--wp-s8);width:var(--wp-w-popover);max-width:calc(100vw - var(--wp-s6));padding:var(--wp-s3) var(--wp-s4);background:var(--wp-surface);border:var(--wp-border-w) solid var(--wp-border-strong);border-radius:var(--wp-r-surface);font-size:var(--wp-t-small);line-height:var(--wp-lh-small);font-weight:var(--wp-fw-regular);color:var(--wp-text-2);white-space:normal;flex-direction:column;gap:var(--wp-s2);text-align:left}
.wpf .wp-pop:not([hidden]){display:flex}
.wpf .wp-pop .wp-pt{font-size:var(--wp-t-body);line-height:var(--wp-lh-body);font-weight:var(--wp-fw-semibold);color:var(--wp-text)}

/* ---------- Cues, sectiekop, mailboxregel (9.7, 9.8, 9.25) ---------- */
.wpf .wp-cues{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-bottom:var(--wp-border-w) solid var(--wp-divider)}
.wpf .wp-cue{height:var(--wp-h-cue);padding:0 var(--wp-s4);display:flex;flex-direction:column;justify-content:center;min-width:0}
.wpf .wp-cue+.wp-cue{border-left:var(--wp-border-w) solid var(--wp-divider)}
.wpf .wp-cue:hover{background:var(--wp-hover)}
.wpf .wp-cue-v{font-size:var(--wp-t-cue);line-height:var(--wp-lh-cue);font-weight:var(--wp-fw-semibold);color:var(--wp-text);display:flex;align-items:center;gap:var(--wp-s1)}
.wpf .wp-cue-v.wp-nul{font-weight:var(--wp-fw-regular);color:var(--wp-text-3)}
.wpf .wp-cue-v.wp-bad{color:var(--wp-bad)}
.wpf .wp-cue-l{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-2)}
.wpf .wp-sect{height:var(--wp-h-row);padding:0 var(--wp-s4);display:flex;align-items:center;justify-content:space-between;font-weight:var(--wp-fw-semibold);flex:none}
.wpf .wp-sect h3{font:inherit}
.wpf .wp-mbx{box-sizing:content-box;height:var(--wp-h-row);border-top:var(--wp-border-w) solid var(--wp-divider);padding:0 var(--wp-s4);display:flex;align-items:center;gap:var(--wp-s4);font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-2);flex:none}
.wpf .wp-mbx a{color:var(--wp-text-2);position:relative}
.wpf .wp-mbx a:hover{text-decoration:underline}
.wpf .wp-mbx b{font-weight:var(--wp-fw-semibold);color:var(--wp-text);margin-left:var(--wp-s1)}

/* ---------- Tabel (9.5, 9.24) ---------- */
.wpf .wp-tbl{font-family:var(--wp-font);font-variant-numeric:tabular-nums;width:100%;table-layout:fixed;border-collapse:separate;border-spacing:0;font-size:var(--wp-t-body);line-height:var(--wp-lh-body)}
.wpf .wp-tbl th,.wpf .wp-tbl td{padding:0 var(--wp-s3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;vertical-align:middle;text-align:left}
.wpf .wp-tbl th{height:var(--wp-h-th);font-size:var(--wp-t-small);line-height:var(--wp-lh-small);font-weight:var(--wp-fw-semibold);color:var(--wp-text-2);background:var(--wp-subtle);border-top:var(--wp-border-w) solid var(--wp-divider);border-bottom:var(--wp-border-w) solid var(--wp-border)}
.wpf .wp-tbl td{height:var(--wp-h-row);border-bottom:var(--wp-border-w) solid var(--wp-divider);font-size:var(--wp-t-body);line-height:var(--wp-lh-body);font-weight:var(--wp-fw-regular);color:var(--wp-text)}
.wpf .wp-tbl tbody tr:last-child td{border-bottom:0}
.wpf .wp-tbl th:first-child,.wpf .wp-tbl td:first-child{padding-left:var(--wp-s4)}
.wpf .wp-tbl th:last-child,.wpf .wp-tbl td:last-child{padding-right:var(--wp-s4)}
.wpf .wp-tbl .wp-num{text-align:right}
.wpf .wp-tbl td.wp-c2{color:var(--wp-text-2)}
.wpf .wp-tbl tr.wp-klik{cursor:pointer;position:relative}
.wpf .wp-tbl tr.wp-klik:hover td{background:var(--wp-hover)}
.wpf .wp-tbl tr.wp-tot td{font-weight:var(--wp-fw-semibold);color:var(--wp-text)}
.wpf .wp-rijlink{color:inherit;display:inline;font:inherit}
.wpf button.wp-rijlink{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.wpf .wp-rijlink::after{content:"";position:absolute;inset:0}
.wpf .wp-tbl td .wp-st,.wpf .wp-st{display:inline-flex;align-items:center;gap:var(--wp-s1);vertical-align:top}
.wpf .wp-tr{display:inline-flex;align-items:center;gap:var(--wp-s1);vertical-align:top}
.wpf .wp-cel{display:inline-flex;align-items:center;gap:var(--wp-s2);vertical-align:top}
.wpf .wp-prod{display:flex;align-items:center;gap:var(--wp-s2);min-width:0}
.wpf .wp-foto{width:var(--wp-photo);height:var(--wp-photo);border-radius:var(--wp-r-control);display:block;flex:none;object-fit:cover}
.wpf .wp-balk{display:block;height:var(--wp-s2);border-radius:var(--wp-r-indicator);background:var(--wp-neutral);overflow:hidden}
.wpf .wp-balk>span{display:block;height:var(--wp-s2);background:var(--wp-text-2)}
/* Trend in staafjes (Verzoeken t.o.v. verkoop): 16 hoog, staafjes 4 breed met gap 4, neutraal; de laatste periode text-2 */
.wpf .wp-staaf{display:inline-flex;align-items:flex-end;gap:var(--wp-s1);height:var(--wp-s4);vertical-align:middle;flex:none}
.wpf .wp-staaf>span{display:block;width:var(--wp-s1);background:var(--wp-text-3);border-radius:var(--wp-r-indicator) var(--wp-r-indicator) 0 0}
.wpf .wp-staaf>span.wp-nu{background:var(--wp-text-2)}
.wpf .wp-kpi-v .wp-staaf{margin-left:var(--wp-s1)}
/* Mijn taken: omschrijving na de titel in dezelfde regel, secundair */
.wpf .wp-prod .wp-tlink{flex:0 1 auto}
.wpf .wp-tbl .wp-ckz{height:var(--wp-h-control-s)}
.wpf .wp-prod .wp-oms{flex:1 1 0;color:var(--wp-text-2)}

/* ---------- Lege staat, fout, laden (9.20, 9.21) ---------- */
.wpf .wp-leeg{height:var(--wp-h-row);padding:0 var(--wp-s4);border-top:var(--wp-border-w) solid var(--wp-divider);display:flex;align-items:center;gap:var(--wp-s2);color:var(--wp-text-2);flex:none}
.wpf .wp-leeg .wp-lnk{margin-left:var(--wp-s2)}
.wpf .wp-sk{height:var(--wp-h-row);border-top:var(--wp-border-w) solid var(--wp-divider);padding:0 var(--wp-s4);display:flex;align-items:center}
.wpf .wp-sk>span{display:block;height:var(--wp-s3);width:40%;border-radius:var(--wp-r-indicator);background:var(--wp-neutral)}
.wpf .wp-sk-titel{display:block;height:var(--wp-s4);width:120px;border-radius:var(--wp-r-indicator);background:var(--wp-neutral)}

/* ---------- KPI (9.9) ---------- */
.wpf .wp-kpis{display:grid;border-top:var(--wp-border-w) solid var(--wp-divider)}
.wpf .wp-kpi{padding:var(--wp-s3) var(--wp-s4);display:flex;flex-direction:column;gap:0;min-width:0;height:84px}
.wpf .wp-kpi+.wp-kpi{border-left:var(--wp-border-w) solid var(--wp-divider)}
.wpf a.wp-kpi:hover{background:var(--wp-hover)}
.wpf .wp-kpi-l{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-2)}
.wpf .wp-kpi-v{font-size:var(--wp-t-title);line-height:var(--wp-lh-title);font-weight:var(--wp-fw-semibold);display:flex;align-items:center;gap:var(--wp-s1);color:var(--wp-text)}
.wpf .wp-kpi-v.wp-warn{color:var(--wp-warn)}
.wpf .wp-kpi-v.wp-ok{color:var(--wp-ok)}
.wpf .wp-kpi-v.wp-c2{color:var(--wp-text-2)}
.wpf .wp-kpi-s{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-3);height:var(--wp-s4);display:flex;align-items:center;gap:var(--wp-s1);min-width:0}
.wpf .wp-kpi-s .wp-ok{display:flex;align-items:center;gap:var(--wp-s1)}

/* ---------- Segment-control (9.16) ---------- */
.wpf .wp-seg{display:inline-flex;border:var(--wp-border-w) solid var(--wp-border-strong);border-radius:var(--wp-r-control);overflow:hidden;flex:none}
.wpf .wp-seg button{height:22px;padding:0 var(--wp-s2);font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-2)}
.wpf .wp-seg button+button{border-left:var(--wp-border-w) solid var(--wp-border-strong)}
.wpf .wp-seg button:hover{background:var(--wp-hover)}
.wpf .wp-seg button[aria-pressed="true"]{background:var(--wp-selected);color:var(--wp-text);font-weight:var(--wp-fw-semibold)}

/* ---------- Werkstroomregel (9.17) ---------- */
.wpf .wp-ws{height:var(--wp-h-workflow);border-top:var(--wp-border-w) solid var(--wp-divider);display:grid;grid-template-columns:minmax(200px,1.4fr) 72px 1fr 1fr 1fr var(--wp-icon);gap:var(--wp-s4);padding:0 var(--wp-s4);align-items:center;flex:none}
.wpf .wp-ws.wp-ws3{grid-template-columns:minmax(200px,1.4fr) 72px 1fr 1fr var(--wp-icon)}
.wpf .wp-ws:hover{background:var(--wp-hover)}
.wpf .wp-ws-naam{display:flex;align-items:center;gap:var(--wp-s2);font-weight:var(--wp-fw-semibold);color:var(--wp-text);min-width:0}
.wpf .wp-ws-c{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.wpf .wp-ws-c>span:last-child{max-width:100%;overflow:hidden;text-overflow:ellipsis}
.wpf .wp-ws-l{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-2);max-width:100%;overflow:hidden;text-overflow:ellipsis}
.wpf .wp-ws-chev{color:var(--wp-text-3)}
.wpf .wp-wsm{height:var(--wp-h-workflow-m);border-top:var(--wp-border-w) solid var(--wp-divider);padding:0 var(--wp-s4);display:grid;grid-template-columns:minmax(0,1fr) 24px auto var(--wp-icon);gap:var(--wp-s2);align-items:center;flex:none}
.wpf .wp-wsm:hover{background:var(--wp-hover)}
.wpf .wp-wsm .wp-n{display:flex;align-items:center;gap:var(--wp-s2);font-weight:var(--wp-fw-semibold);min-width:0}
.wpf .wp-wsm .wp-o{display:flex;align-items:baseline;gap:var(--wp-s1)}
.wpf .wp-wsm .wp-o .wp-ws-l{color:var(--wp-text-2)}

/* ---------- Agenda (9.18) ---------- */
.wpf .wp-s-rit{--sk:var(--wp-ag-rit);--sv:var(--wp-ag-rit-bg)}
.wpf .wp-s-service{--sk:var(--wp-ag-service);--sv:var(--wp-ag-service-bg)}
.wpf .wp-s-overleg{--sk:var(--wp-ag-overleg);--sv:var(--wp-ag-overleg-bg)}
.wpf .wp-s-spoed{--sk:var(--wp-ag-spoed);--sv:var(--wp-ag-spoed-bg)}
.wpf .wp-s-taak{--sk:var(--wp-ag-taak);--sv:var(--wp-ag-taak-bg)}
.wpf .wp-legenda{display:flex;align-items:center;gap:var(--wp-s4)}
.wpf .wp-lg{display:flex;align-items:center;gap:var(--wp-s1);font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-2)}
.wpf .wp-sw{width:var(--wp-swatch);height:var(--wp-swatch);border-radius:var(--wp-r-indicator);background:var(--sv);border:var(--wp-border-w) solid var(--sk);flex:none}
.wpf .wp-week{border-top:var(--wp-border-w) solid var(--wp-divider)}
.wpf .wp-dag{height:var(--wp-h-day);display:grid;grid-template-columns:var(--wp-w-day) minmax(0,1fr);border-bottom:var(--wp-border-w) solid var(--wp-divider)}
.wpf .wp-dag:last-child{border-bottom:0}
.wpf .wp-dcol{padding:0 var(--wp-s4);border-right:var(--wp-border-w) solid var(--wp-divider);display:flex;align-items:center;gap:var(--wp-s2)}
.wpf .wp-dcol .wp-wd{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-2)}
.wpf .wp-vandaag .wp-dcol{background:var(--wp-selected)}
.wpf .wp-vandaag :is(.wp-wd,.wp-dt){font-weight:var(--wp-fw-semibold);color:var(--wp-text)}
.wpf .wp-icol{display:flex;align-items:center;gap:var(--wp-s2);padding:0 var(--wp-s3);min-width:0}
.wpf .wp-item{height:var(--wp-h-agenda-item);border-radius:var(--wp-r-control);background:var(--sv);border:var(--wp-border-w) solid var(--sv);padding:0 var(--wp-s3) 0 var(--wp-s2);display:flex;align-items:center;gap:var(--wp-s2);text-align:left;color:var(--wp-text);min-width:0}
.wpf .wp-item:hover{border-color:var(--sk)}
.wpf .wp-icol .wp-item{flex:0 1 400px;min-width:200px}
.wpf .wp-item .wp-ic{width:var(--wp-icon);flex:none;display:flex;justify-content:center;color:var(--sk)}
.wpf .wp-item .wp-tx{display:flex;flex-direction:column;min-width:0;text-align:left}
.wpf .wp-item .wp-l1{font-weight:var(--wp-fw-semibold);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpf .wp-item .wp-l2{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpf .wp-item .wp-l2 b{font-weight:var(--wp-fw-semibold);color:var(--sk)}
.wpf .wp-item input{width:var(--wp-icon);height:var(--wp-icon);margin:0;accent-color:var(--wp-text);cursor:pointer}
.wpf .wp-item .wp-tbtn{min-width:0;flex:1;position:relative}
.wpf .wp-item.wp-gedaan .wp-l1{text-decoration:line-through;color:var(--wp-text-3)}
.wpf .wp-plusn{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);font-weight:var(--wp-fw-semibold);color:var(--wp-text);flex:none;position:relative}
.wpf .wp-plusn:hover{text-decoration:underline}
.wpf .wp-ckz{width:var(--wp-h-control-s);height:var(--wp-h-touch);display:flex;align-items:center;justify-content:center;flex:none;cursor:pointer;position:relative}

/* ---------- Mobiele lijsten (9.25) ---------- */
.wpf .wp-lr{height:var(--wp-h-list-2);border-top:var(--wp-border-w) solid var(--wp-divider);padding:0 var(--wp-s4);display:flex;flex-direction:column;justify-content:center;flex:none}
.wpf .wp-lr:hover{background:var(--wp-hover)}
.wpf .wp-lr .wp-a{display:flex;align-items:center;justify-content:space-between;gap:var(--wp-s2);min-width:0}
.wpf .wp-lr .wp-s{font-weight:var(--wp-fw-semibold)}
.wpf .wp-lr .wp-wt{flex:none;display:inline-flex;align-items:center;gap:var(--wp-s1)}
.wpf .wp-lr .wp-b{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-2)}
.wpf .wp-khead{height:var(--wp-h-th);padding:0 var(--wp-s4);display:flex;align-items:center;justify-content:space-between;font-size:var(--wp-t-small);line-height:var(--wp-lh-small);font-weight:var(--wp-fw-semibold);color:var(--wp-text-2);background:var(--wp-subtle);border-top:var(--wp-border-w) solid var(--wp-divider);border-bottom:var(--wp-border-w) solid var(--wp-border);flex:none}
.wpf .wp-br{height:var(--wp-h-list-2);border-top:var(--wp-border-w) solid var(--wp-divider);padding:0 var(--wp-s4);display:flex;flex-direction:column;justify-content:center;flex:none;text-align:left;width:100%}
.wpf .wp-khead+.wp-br{border-top:0}
.wpf .wp-br .wp-a{display:flex;align-items:center;justify-content:space-between;gap:var(--wp-s2);min-width:0}
.wpf .wp-br .wp-v{font-weight:var(--wp-fw-semibold);flex:none}
.wpf .wp-br .wp-b{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-2);padding-left:var(--wp-s8)}
.wpf .wp-alles{width:100%;height:var(--wp-h-touch);border-top:var(--wp-border-w) solid var(--wp-divider);background:var(--wp-surface);display:flex;align-items:center;justify-content:center;gap:var(--wp-s1);font-weight:var(--wp-fw-semibold);color:var(--wp-text);flex:none}

/* ---------- Topbalk, rail, subnav, hoofdgebied (7.1 tot 7.5) ---------- */
.wpf .wp-app{min-height:100vh;background:var(--wp-canvas)}
.wpf .wp-top{position:sticky;top:0;z-index:var(--wp-z-sticky);height:var(--wp-h-topbar);background:var(--wp-surface);border-bottom:var(--wp-border-w) solid var(--wp-border);display:flex;align-items:center;gap:var(--wp-s3);padding:0 var(--wp-s3) 0 var(--wp-s2);white-space:nowrap}
.wpf .wp-merk{display:flex;align-items:center;gap:var(--wp-s2);font-weight:var(--wp-fw-semibold);flex:none}
.wpf .wp-merk .wp-ctx{font-weight:var(--wp-fw-regular)}
.wpf .wp-logo{width:var(--wp-photo);height:var(--wp-photo);border-radius:var(--wp-r-control);display:block;flex:none}
.wpf .wp-mtitel{display:none;flex:1;min-width:0;font-size:var(--wp-t-card);line-height:var(--wp-lh-card);font-weight:var(--wp-fw-semibold)}
.wpf .wp-zoek{flex:0 1 var(--wp-w-search);min-width:160px;margin:0 auto;height:var(--wp-h-control);padding:0 var(--wp-s2) 0 var(--wp-s3);border:var(--wp-border-w) solid var(--wp-border-input);border-radius:var(--wp-r-control);background:var(--wp-subtle);display:flex;align-items:center;gap:var(--wp-s2);color:var(--wp-text-3);position:relative}
.wpf .wp-zoek:hover{border-color:var(--wp-text-3)}
.wpf .wp-zoek:focus-within{border-color:var(--wp-text);outline:var(--wp-focus-w) solid var(--wp-focus);outline-offset:var(--wp-focus-offset)}
.wpf .wp-zoek input{flex:1;min-width:0;border:0;background:transparent;font:inherit;color:var(--wp-text);padding:0;outline:none;height:var(--wp-h-control)}
.wpf .wp-zoek input::placeholder{color:var(--wp-text-3)}
.wpf .wp-zoek input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none}
.wpf .wp-kbd{font-family:inherit;font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-3);border:var(--wp-border-w) solid var(--wp-border);border-radius:var(--wp-r-control);padding:0 var(--wp-s1);background:var(--wp-surface);flex:none}
.wpf .wp-shell{display:flex;align-items:flex-start}
/* Rail (7.2, N1, N2, N8): 80 breed, elk domein een link van 56 met icoon 20, 4 ruimte en label 12/16 op één regel (afgekapt met tooltip).
   Actief domein: selected, label 600 en een indicatorbalk van 3 x 24 links. Domein met open paneel: neutral, geen balk. Aanwijzen: alleen hover. */
.wpf .wp-rail{position:sticky;top:var(--wp-h-topbar);height:calc(100vh - var(--wp-h-topbar));overflow:auto;width:var(--wp-w-rail);flex:none;background:var(--wp-surface);border-right:var(--wp-border-w) solid var(--wp-border);padding:var(--wp-s2) var(--wp-s1);display:flex;flex-direction:column;align-items:stretch;gap:var(--wp-s1);z-index:var(--wp-z-sticky)}
.wpf .wp-ritem{position:relative;height:var(--wp-h-list-2);padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--wp-s1);border-radius:var(--wp-r-control);color:var(--wp-text-2);flex:none;min-width:0}
.wpf .wp-ritem .wp-rl{display:block;max-width:100%;padding:0 var(--wp-s1);font-size:var(--wp-t-small);line-height:var(--wp-lh-small);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--wp-text-2)}
.wpf .wp-ritem:hover{background:var(--wp-hover);color:var(--wp-text)}
.wpf .wp-ritem:hover .wp-rl{color:var(--wp-text)}
.wpf .wp-ritem.wp-open{background:var(--wp-neutral);color:var(--wp-text)}
.wpf .wp-ritem.wp-open .wp-rl{color:var(--wp-text)}
.wpf .wp-ritem[aria-current="true"]{background:var(--wp-selected);color:var(--wp-text)}
.wpf .wp-ritem[aria-current="true"] .wp-rl{color:var(--wp-text);font-weight:var(--wp-fw-semibold)}
.wpf .wp-ritem[aria-current="true"]::before{content:"";position:absolute;left:0;top:0;bottom:0;margin:auto 0;height:var(--wp-h-control-s);width:var(--wp-w-indicator);border-radius:var(--wp-r-indicator);background:var(--wp-text)}
.wpf .wp-rlijn{height:var(--wp-border-w);background:var(--wp-border);margin:var(--wp-s1) var(--wp-s3);flex:none}
.wpf .wp-rloket{height:68px;border:var(--wp-border-w) solid var(--wp-border-strong)}
.wpf .wp-subnav{position:sticky;top:var(--wp-h-topbar);height:calc(100vh - var(--wp-h-topbar));overflow:auto;width:var(--wp-w-subnav);flex:none;background:var(--wp-surface);border-right:var(--wp-border-w) solid var(--wp-border);padding:var(--wp-s3) var(--wp-s2);display:flex;flex-direction:column;gap:0;white-space:nowrap}
.wpf .wp-sn-titel{font-weight:var(--wp-fw-semibold);margin:var(--wp-s1) var(--wp-s2) var(--wp-s2)}
.wpf .wp-sn-item{height:var(--wp-h-control);padding:0 var(--wp-s2);border-radius:var(--wp-r-control);display:flex;align-items:center;gap:var(--wp-s2);color:var(--wp-text);flex:none;width:100%;min-width:0}
.wpf .wp-sn-item:hover{background:var(--wp-neutral)}
.wpf .wp-sn-item[aria-current="page"]{background:var(--wp-selected);font-weight:var(--wp-fw-semibold)}
.wpf .wp-sn-groep{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-3);margin:var(--wp-s4) var(--wp-s2) var(--wp-s1)}
.wpf .wp-sn-tel{margin-left:auto;font-size:var(--wp-t-small);line-height:var(--wp-lh-small);font-weight:var(--wp-fw-regular);color:var(--wp-text-2)}
.wpf .wp-sn-tel.wp-bad{font-weight:var(--wp-fw-semibold);color:var(--wp-bad)}
.wpf .wp-sn-omg{margin:calc(var(--wp-s3) * -1) calc(var(--wp-s2) * -1) var(--wp-s2);padding:10px var(--wp-s3);background:var(--wp-subtle);border-bottom:var(--wp-border-w) solid var(--wp-border);display:flex;flex-direction:column;flex:none}
.wpf .wp-sn-omg .wp-ot{display:flex;align-items:center;gap:var(--wp-s2);font-weight:var(--wp-fw-semibold)}
.wpf .wp-sn-omg .wp-os{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-2)}
.wpf .wp-sn-open{margin:var(--wp-s3) var(--wp-s2) 0;justify-content:center}
.wpf .wp-main{flex:1;min-width:0;max-width:var(--wp-w-main-max);padding:var(--wp-s6) var(--wp-s6) var(--wp-s8)}
.wpf .wp-main>.inhoud{max-width:none;margin:0}
.wpf .wp-home{display:flex;flex-direction:column;gap:var(--wp-s4);white-space:nowrap}
.wpf .wp-phead{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--wp-s4);height:var(--wp-h-touch)}
.wpf .wp-phead h1{font-size:var(--wp-t-title);line-height:var(--wp-lh-title);font-weight:var(--wp-fw-semibold);color:var(--wp-text)}
.wpf .wp-abar{display:flex;gap:var(--wp-s2);position:relative}
.wpf .wp-mhead{display:none;height:var(--wp-h-touch);align-items:center;justify-content:space-between;gap:var(--wp-s2)}
.wpf .wp-mhead .wp-r{display:flex;gap:var(--wp-s2);position:relative}
.wpf .wp-mhead .wp-btn{height:var(--wp-h-touch)}
.wpf .wp-raster{display:flex;flex-direction:column;gap:var(--wp-s4)}
.wpf .wp-rij{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:var(--wp-s4);align-items:stretch}
.wpf .wp-b4{grid-column:span 4}
.wpf .wp-b6{grid-column:span 6}
.wpf .wp-b8{grid-column:span 8}
.wpf .wp-b12{grid-column:span 12}
.wpf .wp-tabbar,.wpf .wp-lade{display:none}

/* ---------- Bewerkstand Indeling aanpassen (V35) ---------- */
.wpf .wp-bewerkbalk{height:var(--wp-h-card-head);padding:0 var(--wp-s4);display:flex;align-items:center;justify-content:space-between;gap:var(--wp-s3);background:var(--wp-surface);border:var(--wp-border-w) dashed var(--wp-border-strong);border-radius:var(--wp-r-surface)}
.wpf .wp-bewerkbalk .wp-r{display:flex;gap:var(--wp-s2)}
.wpf .wp-bewerk .wp-kaart{border-style:dashed;border-color:var(--wp-border-strong)}
.wpf .wp-bewerk .wp-kaart-inhoud{pointer-events:none}
.wpf .wp-greep{cursor:grab;touch-action:none;color:var(--wp-text-2)}
.wpf .wp-zwevend{opacity:0.9;z-index:var(--wp-z-dialog)}
.wpf .wp-rand{position:absolute;top:0;right:0;bottom:0;width:var(--wp-s2);display:flex;align-items:center;justify-content:center;cursor:ew-resize;touch-action:none}
.wpf .wp-rand::after{content:"";display:block;width:var(--wp-s1);height:var(--wp-s6);border-radius:var(--wp-r-indicator);background:var(--wp-border-strong)}
.wpf .wp-rand:hover,.wpf .wp-rekken .wp-rand{background:var(--wp-hover)}
.wpf .wp-rand:hover::after,.wpf .wp-rekken .wp-rand::after{background:var(--wp-text-3)}
.wpf .wp-rekken{cursor:ew-resize}
.wpf .wp-plek{border:var(--wp-border-w) dashed var(--wp-border-strong);border-radius:var(--wp-r-surface);background:var(--wp-subtle)}

/* ---------- Lagen: menu, popover zoeken, tooltip, detailpaneel, dialoog, lade, toast ---------- */
.wpf .wp-menu{position:absolute;z-index:var(--wp-z-menu);width:var(--wp-w-menu);padding:var(--wp-s1) 0;background:var(--wp-surface);border:var(--wp-border-w) solid var(--wp-border-strong);border-radius:var(--wp-r-surface);display:flex;flex-direction:column;white-space:nowrap}
.wpf .wp-menu-item{height:var(--wp-h-control);padding:0 var(--wp-s3);display:flex;align-items:center;gap:var(--wp-s2);color:var(--wp-text);width:100%;text-align:left}
.wpf .wp-menu-item:hover,.wpf .wp-menu-item:focus-visible{background:var(--wp-hover)}
.wpf .wp-menu-item[aria-checked="true"]{font-weight:var(--wp-fw-semibold)}
.wpf .wp-menu-kop{padding:var(--wp-s2) var(--wp-s3);display:flex;flex-direction:column;border-bottom:var(--wp-border-w) solid var(--wp-divider);margin-bottom:var(--wp-s1)}
.wpf .wp-menu-kop .wp-meta{color:var(--wp-text-2)}
.wpf .wp-menu-lijn{height:var(--wp-border-w);background:var(--wp-divider);margin:var(--wp-s1) 0}
.wpf .wp-zk{position:absolute;z-index:var(--wp-z-popover);top:calc(100% + var(--wp-s1));left:0;right:0;max-height:calc(100vh - 80px);overflow:auto;padding:var(--wp-s1) 0;background:var(--wp-surface);border:var(--wp-border-w) solid var(--wp-border-strong);border-radius:var(--wp-r-surface);color:var(--wp-text)}
.wpf .wp-zk-item{height:var(--wp-h-row);padding:0 var(--wp-s3);display:flex;align-items:center;gap:var(--wp-s2);min-width:0}
.wpf .wp-zk-item[aria-selected="true"]{background:var(--wp-selected)}
.wpf .wp-zk-item .wp-zt{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wpf .wp-zk-item .wp-zs{color:var(--wp-text-2);font-size:var(--wp-t-small);line-height:var(--wp-lh-small);flex:none}
.wpf .wp-zk-leeg{height:var(--wp-h-row);padding:0 var(--wp-s3);display:flex;align-items:center;color:var(--wp-text-2)}
.wpf .wp-tip{position:fixed;z-index:var(--wp-z-tooltip);max-width:var(--wp-w-tooltip);padding:var(--wp-s1) var(--wp-s2);background:var(--wp-text);color:var(--wp-on-dark);border-radius:var(--wp-r-control);font-family:var(--wp-font);font-size:var(--wp-t-small);line-height:var(--wp-lh-small);font-weight:var(--wp-fw-regular);white-space:normal;pointer-events:none;opacity:0;transition:opacity var(--wp-dur-fast) var(--wp-ease);top:0;left:0}
.wpf .wp-tip[data-open]{opacity:1}
.wpf .wp-overlay{position:fixed;inset:0;z-index:var(--wp-z-dialog);background:var(--wp-overlay);display:flex;align-items:center;justify-content:center;padding:var(--wp-s4)}
.wpf .wp-overlay.wp-ov-paneel{z-index:var(--wp-z-panel);background:transparent;pointer-events:none;align-items:stretch;justify-content:flex-end;padding:0;top:var(--wp-h-topbar)}
.wpf .wp-paneel{pointer-events:auto;width:var(--wp-w-panel);max-width:100vw;max-height:calc(100vh - var(--wp-h-topbar) - var(--wp-s8));margin:var(--wp-s4) var(--wp-s4) 0 0;background:var(--wp-surface);border:var(--wp-border-w) solid var(--wp-border);border-radius:var(--wp-r-surface);display:flex;flex-direction:column;overflow:auto;align-self:flex-start;white-space:nowrap}
.wpf .wp-dialoog{width:var(--wp-w-dialog);max-width:100%;max-height:calc(100vh - var(--wp-s8));background:var(--wp-surface);border-radius:var(--wp-r-surface);display:flex;flex-direction:column;overflow:auto;white-space:nowrap}
.wpf .wp-pkop{height:var(--wp-h-card-head);padding:0 var(--wp-s2) 0 var(--wp-s4);display:flex;align-items:center;gap:var(--wp-s2);flex:none;border-bottom:var(--wp-border-w) solid var(--wp-divider)}
.wpf .wp-pkop h2:focus:not(:focus-visible){outline:none}
.wpf .wp-pkop h2{flex:1;min-width:0;font-size:var(--wp-t-card);line-height:var(--wp-lh-card);font-weight:var(--wp-fw-semibold);overflow:hidden;text-overflow:ellipsis}
.wpf .wp-pkop .wp-sw{width:var(--wp-icon);height:var(--wp-icon)}
.wpf .wp-pwanneer{padding:var(--wp-s4) var(--wp-s4) var(--wp-s3);display:flex;flex-direction:column;gap:var(--wp-s1)}
.wpf .wp-pwanneer .wp-pw1{font-weight:var(--wp-fw-semibold)}
.wpf .wp-pwanneer .wp-pw2{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-2)}
.wpf .wp-pwanneer .wp-pw2 b{font-weight:var(--wp-fw-semibold);color:var(--sk)}
.wpf .wp-pregel{min-height:var(--wp-h-row);padding:0 var(--wp-s4);border-top:var(--wp-border-w) solid var(--wp-divider);display:grid;grid-template-columns:112px minmax(0,1fr);align-items:center}
.wpf .wp-pregel .wp-pl{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-2)}
.wpf .wp-pregel .wp-pv{min-width:0;overflow:hidden;text-overflow:ellipsis}
.wpf .wp-pregel .wp-pv[data-wrap]{white-space:normal;padding:var(--wp-s2) 0}
.wpf .wp-pregel a{text-decoration:underline;text-decoration-color:var(--wp-border-strong)}
.wpf .wp-pacties{padding:var(--wp-s3) var(--wp-s4) var(--wp-s4);background:var(--wp-subtle);border-top:var(--wp-border-w) solid var(--wp-divider);display:flex;gap:var(--wp-s2);flex:none}
.wpf .wp-pacties .wp-grow{flex:1}
.wpf .wp-plijst{display:flex;flex-direction:column;gap:var(--wp-s2);padding:var(--wp-s3) var(--wp-s4)}
.wpf .wp-plijst .wp-item{width:100%}
.wpf .wp-keuze{min-height:var(--wp-h-row);padding:0 var(--wp-s4);border-top:var(--wp-border-w) solid var(--wp-divider);display:flex;align-items:center;gap:var(--wp-s2);width:100%;text-align:left}
.wpf .wp-keuze:hover{background:var(--wp-hover)}
.wpf .wp-keuze.wp-keuze2{min-height:var(--wp-h-list-2)}
.wpf .wp-keuze .wp-tx{display:flex;flex-direction:column;min-width:0}
.wpf .wp-keuze input{width:var(--wp-icon);height:var(--wp-icon);margin:0;accent-color:var(--wp-text)}
.wpf .wp-lade-achter{position:fixed;inset:0;z-index:var(--wp-z-dialog);background:var(--wp-overlay)}
.wpf .wp-lade{position:fixed;top:0;left:0;bottom:0;z-index:var(--wp-z-dialog);width:var(--wp-w-drawer);max-width:100vw;background:var(--wp-surface);overflow:auto;flex-direction:column;padding:0 0 var(--wp-s6);white-space:nowrap}
.wpf .wp-lade:not([hidden]){display:flex}
.wpf .wp-lade-kop{height:var(--wp-h-topbar);padding:0 var(--wp-s1) 0 var(--wp-s4);display:flex;align-items:center;justify-content:space-between;border-bottom:var(--wp-border-w) solid var(--wp-border);flex:none;font-weight:var(--wp-fw-semibold)}
.wpf .wp-zl-top{height:var(--wp-h-topbar);padding:0 var(--wp-s1);display:flex;align-items:center;gap:var(--wp-s1);border-bottom:var(--wp-border-w) solid var(--wp-border);flex:none}
.wpf .wp-lade-kop .wp-ibtn,.wpf .wp-zl-top .wp-ibtn{width:var(--wp-h-touch);height:var(--wp-h-touch)}
.wpf .wp-infowrap{position:relative;display:inline-flex;flex:none}
.wpf .wp-lade-groep{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text-3);padding:var(--wp-s4) var(--wp-s4) var(--wp-s1)}
.wpf .wp-lade-item{height:var(--wp-h-touch);padding:0 var(--wp-s4);display:flex;align-items:center;gap:var(--wp-s2);flex:none}
.wpf .wp-lade-item[aria-current="page"]{background:var(--wp-selected);font-weight:var(--wp-fw-semibold)}
.wpf .wp-lade-lijn{height:var(--wp-border-w);background:var(--wp-border);margin-top:var(--wp-s4);flex:none}
.wpf .wp-lade .wp-sn-omg{margin:0}
.wpf .wp-zoeklaag{position:fixed;inset:0;z-index:var(--wp-z-dialog);background:var(--wp-surface);display:flex;flex-direction:column;white-space:nowrap}
.wpf .wp-zoeklaag .wp-zoek{flex:1;margin:0;min-width:0;height:var(--wp-h-touch)}
.wpf .wp-zoeklaag .wp-zoek input{height:var(--wp-h-row);min-width:0}
.wpf .wp-zoeklaag .wp-zk{position:static;border:0;border-radius:0;max-height:none}
.wpf .wp-zoeklaag .wp-zk-item{height:var(--wp-h-touch)}
.wpf #melding{position:fixed;left:50%;bottom:var(--wp-s6);transform:translateX(-50%);z-index:var(--wp-z-toast);height:var(--wp-h-row);padding:0 var(--wp-s4);display:flex;align-items:center;border-radius:var(--wp-r-control);background:var(--wp-text);color:var(--wp-on-dark);font-family:var(--wp-font);font-size:var(--wp-t-body);line-height:var(--wp-lh-body);font-weight:var(--wp-fw-regular);white-space:nowrap;max-width:calc(100vw - var(--wp-s8))}
.wpf #melding[hidden]{display:none}
.wpf #melding.fout{background:var(--wp-bad)}

/* ---------- Beweging (V4) ---------- */
.wpf :is(.wp-btn,.wp-ibtn,.wp-ritem,.wp-sn-item,.wp-cue,.wp-ws,.wp-item,.wp-info,.wp-tbl tr.wp-klik td,.wp-seg button,.wp-zoek){transition:background-color var(--wp-dur-fast) var(--wp-ease),border-color var(--wp-dur-fast) var(--wp-ease)}
@media (prefers-reduced-motion: reduce){.wpf *{transition:none!important;animation:none!important}}

/* ---------- Ingeklapt (7.3, N3 tot N6): de stand zet shell.js (wp-sn-dicht; standaard van 1024 tot 1279 en altijd onder 1024) ----------
   Een klik op een domein opent de subnav als paneel over de inhoud: vast naast de rail, onder de topbalk, rand border-strong, geen schaduw. */
.wpf .wp-app.wp-sn-dicht .wp-subnav:not(.wp-snpaneel){display:none}
.wpf .wp-snpaneel{position:fixed;left:var(--wp-w-rail);top:var(--wp-h-topbar);z-index:var(--wp-z-panel);border-right-color:var(--wp-border-strong)}

/* ---------- 768 tot 1023: rijen van 2 onder elkaar, KPI 2 x 2 (V6) ---------- */
@media (width < 64em){
  .wpf .wp-kpis.wp-k4{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .wpf .wp-kpis.wp-k4 .wp-kpi:nth-child(3){border-left:0}
  .wpf .wp-kpis.wp-k4 .wp-kpi:nth-child(-n+2){border-bottom:var(--wp-border-w) solid var(--wp-divider)}
  .wpf .wp-kpis.wp-k4 .wp-kpi:nth-child(-n+2){box-sizing:content-box;height:auto;min-height:0}
  .wpf .wp-icol .wp-item{min-width:0}
}

/* ---------- Onder 768: mobiel (hoofdstuk 12) ---------- */
@media (width < 48em){
  .wpf body{padding-bottom:var(--wp-h-tabbar)}
  .wpf .wp-top{padding:0 var(--wp-s1);gap:var(--wp-s1)}
  .wpf .wp-top .wp-ibtn,.wpf .wp-top .wp-acct{width:var(--wp-h-touch);height:var(--wp-h-touch)}
  .wpf .wp-merk,.wpf .wp-top>.wp-zoek{display:none}
  .wpf .wp-mtitel{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .wpf .wp-rail,.wpf .wp-subnav{display:none}
  .wpf .wp-main{padding:var(--wp-s3)}
  .wpf .wp-home,.wpf .wp-raster{gap:var(--wp-s3)}
  .wpf .wp-phead{display:none}
  .wpf .wp-mhead{display:flex}
  .wpf .wp-rij{display:flex;flex-direction:column;gap:var(--wp-s3)}
  .wpf .wp-cues{grid-template-columns:repeat(2,minmax(0,1fr))}
  .wpf .wp-cue+.wp-cue{border-left:0}
  .wpf .wp-cue:nth-child(odd){border-right:var(--wp-border-w) solid var(--wp-divider)}
  .wpf .wp-cue:nth-child(-n+2){border-bottom:var(--wp-border-w) solid var(--wp-divider)}
  .wpf .wp-omgkop .wp-btn,.wpf .wp-bewerkbalk .wp-btn{height:var(--wp-h-touch)}
  .wpf .wp-bewerkbalk{height:auto;min-height:var(--wp-h-card-head);padding:var(--wp-s1) var(--wp-s4)}
  /* Klikbare tabelrij op mobiel: 44 hoog (klikzone), tekst blijft verticaal gecentreerd; niet-klikbare rijen en de totaalregel blijven 40 (Toon 04-11) */
  .wpf .wp-tbl tr.wp-klik td{height:var(--wp-h-touch)}
  /* Mijn taken: de taaktekst is een knop in de eerste cel, dus ook een klikbare rij van 44; het vinkje 24 met een klikzone van 44 x 44 */
  .wpf .wp-tbl tr:has(.wp-tlink) td{height:var(--wp-h-touch)}
  .wpf .wp-tbl .wp-ckz::after{inset:-10px}
  .wpf .wp-mbx{min-height:var(--wp-h-touch);height:auto}
  .wpf .wp-mbx a{min-width:30px}
  .wpf .wp-mbx a::after{content:"";position:absolute;inset:-14px -7px}
  .wpf .wp-info::after{content:"";position:absolute;inset:-10px}
  .wpf .wp-lnk::after{content:"";position:absolute;inset:-12px 0}
  .wpf .wp-plusn::after{content:"";position:absolute;inset:-14px -7px}
  .wpf .wp-item .wp-tbtn::after{content:"";position:absolute;inset:-4px 0}
  .wpf .wp-ckz::after{content:"";position:absolute;inset:0 -10px}
  .wpf .wp-tlink{position:relative}
  .wpf .wp-tlink::after{content:"";position:absolute;inset:-12px 0}
  .wpf .wp-seg{overflow:visible}
  .wpf .wp-seg button{height:30px;min-width:var(--wp-h-touch);position:relative}
  .wpf .wp-seg button:first-child{border-radius:var(--wp-r-control) 0 0 var(--wp-r-control)}
  .wpf .wp-seg button:last-child{border-radius:0 var(--wp-r-control) var(--wp-r-control) 0}
  .wpf .wp-seg button::after{content:"";position:absolute;inset:-7px 0}
  .wpf .wp-legenda{padding:0 var(--wp-s4) var(--wp-s3);flex-wrap:wrap;gap:var(--wp-s2) var(--wp-s4)}
  .wpf .wp-week{border-top:0}
  .wpf .wp-dag{height:auto;min-height:var(--wp-h-day);grid-template-columns:var(--wp-w-day-m) minmax(0,1fr);border-bottom:0;border-top:var(--wp-border-w) solid var(--wp-divider)}
  .wpf .wp-dcol{padding:0 var(--wp-s3) 0 var(--wp-s4)}
  .wpf .wp-icol{flex-direction:column;justify-content:center;align-items:stretch;gap:var(--wp-s2);padding:var(--wp-s2)}
  .wpf .wp-icol .wp-item{width:100%;flex:none;min-width:0}
  .wpf .wp-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:var(--wp-z-sticky);height:var(--wp-h-tabbar);background:var(--wp-surface);border-top:var(--wp-border-w) solid var(--wp-border);padding:var(--wp-s1) var(--wp-s1) 30px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)) 1px 80px;align-items:start;white-space:nowrap}
  .wpf .wp-tab{height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:var(--wp-text-2);min-width:0}
  .wpf .wp-tab .wp-ir{height:var(--wp-icon-l);display:flex;align-items:center;gap:var(--wp-s1)}
  .wpf .wp-tab .wp-lb{font-size:var(--wp-t-small);line-height:var(--wp-lh-small)}
  .wpf .wp-tab[aria-current="page"]{color:var(--wp-text);font-weight:var(--wp-fw-semibold)}
  .wpf .wp-tlijn{width:1px;height:40px;background:var(--wp-border);margin-top:var(--wp-s1)}
  .wpf .wp-tab-loket{margin:0 var(--wp-s1);border:var(--wp-border-w) solid var(--wp-border-strong);border-radius:var(--wp-r-control);color:var(--wp-text);font-weight:var(--wp-fw-semibold)}
  .wpf .wp-overlay.wp-ov-paneel{top:0;background:var(--wp-surface)}
  .wpf .wp-paneel{width:100%;max-height:none;height:100%;margin:0;border:0;border-radius:0}
  .wpf .wp-pkop .wp-ibtn,.wpf .wp-pacties .wp-btn,.wpf .wp-dialoog .wp-btn{height:var(--wp-h-touch)}
  .wpf .wp-pkop .wp-ibtn{width:var(--wp-h-touch)}
  .wpf .wp-menu-item{height:var(--wp-h-touch)}
  .wpf .wp-keuze{min-height:var(--wp-h-touch)}
  .wpf .wp-dialoog .wp-pkop .wp-ibtn{width:var(--wp-h-touch);height:var(--wp-h-touch)}
  /* Dialoog als onderblad (9.x Dialoog, D1): volle breedte, onderaan, radius 8 alleen boven, maximaal venster min topbalk, eigen scroll */
  .wpf .wp-overlay:not(.wp-ov-paneel){align-items:flex-end;padding:0}
  .wpf .wp-dialoog{width:100%;max-height:calc(100vh - var(--wp-h-topbar));border-radius:var(--wp-r-surface) var(--wp-r-surface) 0 0}
}
/* Logistiek > Nieuwhoff (Lijst met detailpaneel; ontwerp v8 akkoord Toon 04-11: meldingsbalk, formulier in het paneel) */
.wpf .wp-nh-kop{height:auto}
/* Geen automatische tekstvergroting op iPad of iPhone: de meldingsbalk blijft even groot als de rest */
.wpf .wp-nh,.wpf.wp-nh-laaghost{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.wpf .wp-nh-kopl{min-width:0}
.wpf .wp-nh-oud{min-height:0;background:transparent}
.wpf .wp-nh-kruimel{margin-bottom:var(--wp-s1)}
.wpf .wp-nh-kruimel a:hover{text-decoration:underline}
.wpf .wp-nh-abar{align-items:center;gap:var(--wp-s3);min-width:0}
.wpf .wp-nh-abar>.wp-meta{min-width:0}
.wpf .wp-nh-mkop{height:auto;min-height:0}
.wpf .wp-nh-mkop>.wp-meta{max-width:100%}
/* Meldingsbalk: één regel, zelfde tekstmaat als de pagina, getinte grond met een dunne rand */
.wpf .wp-nh-mb{min-height:var(--wp-h-row);padding:var(--wp-s1) var(--wp-s1) var(--wp-s1) var(--wp-s3);border:var(--wp-border-w) solid var(--wp-border);border-radius:var(--wp-r-control);display:flex;align-items:center;gap:var(--wp-s2);background:var(--wp-subtle);flex:none}
.wpf .wp-nh-mb-ok{background:var(--wp-ok-bg)}.wpf .wp-nh-mb-warn{background:var(--wp-warn-bg)}.wpf .wp-nh-mb-bad{background:var(--wp-bad-bg)}
.wpf .wp-nh-mbi{display:flex;flex:none;color:var(--wp-text-2)}
.wpf .wp-nh-mb-ok .wp-nh-mbi{color:var(--wp-ok)}.wpf .wp-nh-mb-warn .wp-nh-mbi{color:var(--wp-warn)}.wpf .wp-nh-mb-bad .wp-nh-mbi{color:var(--wp-bad)}
.wpf .wp-nh-mbt{flex:1}
.wpf .wp-nh-mbt2{flex:1;min-width:0;display:flex;flex-direction:column}
.wpf .wp-nh-mb .wp-btn{height:var(--wp-h-control-s);padding:0 var(--wp-s2);gap:var(--wp-s1)}
/* Bestandsnaam met spreadsheet-icoon (geen merklogo) */
.wpf .wp-nh-bestand{display:inline-flex;align-items:center;gap:var(--wp-s2);min-width:0}
.wpf .wp-nh-xls{width:var(--wp-icon);height:var(--wp-icon);flex:none;display:block}
.wpf .wp-nh-xls-f{fill:var(--wp-surface);stroke:var(--wp-ok);stroke-width:1}
.wpf .wp-nh-xls-l{fill:none;stroke:var(--wp-ok);stroke-width:1}
.wpf .wp-nh-xls-g{fill:var(--wp-ok-bg);stroke:var(--wp-ok);stroke-width:1}
.wpf .wp-nh-orders .wp-kop-l{min-width:0}
/* Kaartkop (filter, Opnieuw ophalen) altijd boven de klikvlakken van de rijen: in browsers zonder position:relative op <tr> (oudere Safari) liggen die anders over de hele kaart */
.wpf .wp-nh-orders>.wp-kop{position:relative;z-index:1;background:var(--wp-surface)}
.wpf .wp-nh-orders>.wp-tbl{position:relative}
.wpf .wp-nh-orders .wp-rijlink::after{content:none}
.wpf .wp-nh .wp-ktitel{flex:none}
.wpf .wp-nh-pv>.wp-meta{flex:0 1 auto}
.wpf .wp-nh-pv>.wp-nh-bestand,.wpf .wp-nh-pv>.wp-ell:first-child{flex:0 1 auto}
.wpf .wp-nh-dr{grid-template-columns:112px minmax(0,1fr) auto;gap:var(--wp-s3)}
.wpf .wp-nh-pv{display:flex;align-items:center;gap:var(--wp-s2);min-width:0}
.wpf .wp-nh-rij{display:grid;grid-template-columns:minmax(0,1fr) var(--wp-w-panel);gap:var(--wp-s4);align-items:start}
.wpf .wp-nh-art{grid-template-columns:minmax(0,1fr)}
.wpf .wp-nh-sect{border-top:var(--wp-border-w) solid var(--wp-divider)}
.wpf .wp-tbl tr.wp-sel td{background:var(--wp-selected)}
.wpf .wp-nh-lr{width:100%;text-align:left}
.wpf .wp-nh-orders td.wp-num button.wp-rijlink{width:100%;text-align:right}
.wpf .wp-nh-nr{margin-right:var(--wp-s2);font-weight:var(--wp-fw-regular);color:var(--wp-text-2)}
.wpf .wp-nh-groep{height:var(--wp-h-th);padding:0 var(--wp-s4);display:flex;align-items:center;background:var(--wp-subtle);border-top:var(--wp-border-w) solid var(--wp-divider);font-size:var(--wp-t-small);line-height:var(--wp-lh-small);font-weight:var(--wp-fw-semibold);color:var(--wp-text-2)}
/* Formulier in het paneel */
.wpf .wp-nh-issue{margin:0 var(--wp-s4) var(--wp-s3);padding:var(--wp-s2) var(--wp-s3);border-radius:var(--wp-r-control);display:flex;flex-direction:column;align-items:stretch;gap:var(--wp-s1);min-width:0;background:var(--wp-subtle)}
.wpf .wp-nh-issue>.wp-nh-chk,.wpf .wp-nh-issue>.wp-nh-vk{align-self:flex-start}
.wpf .wp-nh-issue-warn{background:var(--wp-warn-bg)}.wpf .wp-nh-issue-bad{background:var(--wp-bad-bg)}
.wpf .wp-nh-sect+.wp-nh-issue{margin-top:0}
.wpf .wp-nh-form{padding:var(--wp-s4);border-top:var(--wp-border-w) solid var(--wp-divider);display:flex;flex-direction:column;gap:var(--wp-s3)}
.wpf .wp-nh-veld{display:flex;flex-direction:column;gap:var(--wp-s1);min-width:0}
.wpf .wp-nh-dveld{padding:var(--wp-s4)}
.wpf .wp-nh-groepveld{display:flex;flex-direction:column;gap:var(--wp-s1);min-width:0}
.wpf .wp-nh-f2{display:grid;gap:var(--wp-s3)}
.wpf .wp-nh-f2a{grid-template-columns:minmax(0,1fr) 112px}
.wpf .wp-nh-f2b{grid-template-columns:144px minmax(0,1fr)}
.wpf .wp-nh-label{font-size:var(--wp-t-small);line-height:var(--wp-lh-small);font-weight:var(--wp-fw-semibold);color:var(--wp-text-2);display:flex;align-items:center;gap:var(--wp-s2);min-width:0}
.wpf .wp-nh-tag{flex:none;height:var(--wp-h-badge-s);padding:0 var(--wp-s1);border-radius:var(--wp-r-control);background:var(--wp-neutral);color:var(--wp-text-2);font-size:var(--wp-t-small);line-height:var(--wp-lh-small);font-weight:var(--wp-fw-semibold)}
.wpf .wp-nh-invoer{width:100%;min-width:0;height:var(--wp-h-control);padding:0 var(--wp-s2);border:var(--wp-border-w) solid var(--wp-border-input);border-radius:var(--wp-r-control);font:inherit;color:var(--wp-text);background:var(--wp-surface)}
.wpf .wp-nh-invoer:focus-visible{outline:var(--wp-focus-w) solid var(--wp-focus);outline-offset:var(--wp-focus-offset)}
.wpf .wp-nh-invoer[aria-invalid="true"]{border-color:var(--wp-bad)}
.wpf .wp-nh-waarde{height:var(--wp-h-control);line-height:var(--wp-h-control)}
.wpf .wp-nh-hulpen{display:flex;flex-direction:column;gap:var(--wp-s1);min-width:0}
.wpf .wp-nh-hulp{display:flex;align-items:center;justify-content:space-between;gap:var(--wp-s2);min-width:0;font-size:var(--wp-t-small);line-height:var(--wp-lh-small)}
.wpf .wp-nh-vm{flex:1 1 auto;min-width:0;font-size:var(--wp-t-small);line-height:var(--wp-lh-small)}
.wpf .wp-nh-vk{flex:none;display:inline-flex;align-items:center;gap:var(--wp-s1)}
.wpf .wp-nh-chk{flex:none;display:inline-flex;align-items:center;gap:var(--wp-s1);font-size:var(--wp-t-small);line-height:var(--wp-lh-small);color:var(--wp-text);cursor:pointer;position:relative}
.wpf .wp-nh-chk input{width:var(--wp-icon-s);height:var(--wp-icon-s);margin:0;accent-color:var(--wp-text);cursor:pointer}
.wpf .wp-nh-bc{display:flex;align-items:center;gap:var(--wp-s2);min-width:0}
.wpf .wp-nh-terug{flex:none;font-size:inherit;line-height:inherit;color:var(--wp-text)}
.wpf .wp-nh-dmeta{min-height:var(--wp-h-row);padding:0 var(--wp-s4);display:flex;align-items:center;border-top:var(--wp-border-w) solid var(--wp-divider)}
@media (width < 48em){
  .wpf .wp-nh-invoer{height:var(--wp-h-touch)}
  .wpf .wp-nh .wp-lr .wp-lnk{position:relative}
  .wpf .wp-nh .wp-lr .wp-lnk::after{content:"";position:absolute;inset:-14px}
  .wpf .wp-nh-mb{min-height:var(--wp-h-list-2);padding:var(--wp-s2) var(--wp-s3)}
}