/* ==========================================================================
   HOOGWERKT PLATFORM — PLANBOARD (frozen staff surface)
   Bron: Design Freeze 2026-08-31, `uploads/UI/Hoogwerkt Planboard.dc.html`
   (sha256 988fc8ed…). Tokens, shell (zijbalk · kop · werkbalk), schermen en
   overlays van het Planbord. Alles staat onder `.pb`; de compat-laag `.pb-skin`
   trekt de bestaande operationele schermen (planning.js, admin.js, …) in
   dezelfde vormtaal zolang zij nog niet op het bevroren ontwerp staan.
   Geen businesslogica hier: alleen vorm.
   ========================================================================== */

.pb, .pb-skin {
  --bg:#EEF2F3; --surface:#FFFFFF; --surface-raised:#F5F8F8; --surface-muted:#E9EEEF; --field:#FFFFFF;
  --text-primary:#24353E; --text-secondary:#46555C; --text-muted:#5A6B74;
  --border:#E1E7E9; --border-strong:#D3DBDF; --brand:#85C5C4; --brand-ink:#2F5F5E; --brand-soft:rgba(133,197,196,.16);
  --action:#FF6A1A; --accent-ink:#1A2830; --focus:#85C5C4; --link:#4E8F8E;
  --success-fg:#256B49; --success-bg:#E4F1E9; --warning-fg:#7A4E06; --warning-bg:#F8EEDA; --warning-bd:#E7C97F;
  --danger-fg:#A33F33; --danger-bg:#F7E7E4; --info-fg:#454F55; --info-bg:#EDF0F2; --info-bd:#D3DBDF;
  --shadow:rgba(20,40,48,.16); --glass:rgba(255,255,255,.96); --glass2:rgba(238,242,243,.97);
  --st-beh-fg:#47596B; --st-beh-bg:#EAEEF0; --st-avl-fg:#7A5406; --st-avl-bg:#F8F0DE;
  --st-gep-fg:#2C6C6B; --st-gep-bg:#E2EFEE; --st-ond-fg:#3A5F8F; --st-ond-bg:#E7EEF7;
  --st-proj-fg:#2F7049; --st-proj-bg:#E5F0E9; --st-oph-fg:#6B4E8C; --st-oph-bg:#F0EAF5;
  --st-afg-fg:#586369; --st-afg-bg:#EDEFF0;
  --ok-fg:#2F7D57; --ok-bg:#E4F1E9; --ok-bd:#A9D6BC;
  --pb-font:"Montserrat", system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pb-body:system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pb-mono:ui-monospace, SFMono-Regular, Menlo, monospace;
  --pb-side-w:248px; --pb-head-h:66px;
  color-scheme: light;
}
.pb[data-theme="dark"], .pb-skin[data-theme="dark"], .pb[data-theme="dark"] .pb-skin {
  --bg:#141D22; --surface:#1E2A30; --surface-raised:#243138; --surface-muted:#26343B; --field:#243138;
  --text-primary:#EAF1F1; --text-secondary:#B9C6CC; --text-muted:#93A1A8;
  --border:#31424A; --border-strong:#3C4E57; --brand:#85C5C4; --brand-ink:#85C5C4; --brand-soft:rgba(133,197,196,.14);
  --link:#85C5C4;
  --success-fg:#84C89C; --success-bg:rgba(78,145,102,.18); --warning-fg:#E3B65C; --warning-bg:rgba(178,126,30,.18); --warning-bd:rgba(178,126,30,.45);
  --danger-fg:#E88C7F; --danger-bg:rgba(192,87,74,.20); --info-fg:#A6B2B7; --info-bg:rgba(140,150,157,.16); --info-bd:#3C4E57;
  --shadow:rgba(0,0,0,.5); --glass:rgba(30,42,48,.96); --glass2:rgba(20,29,34,.97);
  --st-beh-fg:#A6B6C1; --st-beh-bg:rgba(94,118,135,.22); --st-avl-fg:#E3B65C; --st-avl-bg:rgba(178,126,30,.20);
  --st-gep-fg:#74C3C2; --st-gep-bg:rgba(63,143,142,.20); --st-ond-fg:#86B2E0; --st-ond-bg:rgba(76,121,176,.24);
  --st-proj-fg:#84C89C; --st-proj-bg:rgba(78,145,102,.22); --st-oph-fg:#BEA2D8; --st-oph-bg:rgba(138,109,168,.24);
  --st-afg-fg:#A6B2B7; --st-afg-bg:rgba(108,122,128,.22);
  --ok-fg:#84C89C; --ok-bg:rgba(78,145,102,.18); --ok-bd:rgba(78,145,102,.45);
  color-scheme: dark;
}
html[data-pb-theme="dark"] body { background:#141D22; }
/* Staging-omgevingsmarker (core.js, 29px vast bovenaan): shell en plakkende koppen schuiven mee. */
body:has(#staging-environment-marker) .pb { padding-top:29px; }
body:has(#staging-environment-marker) .pb-side { top:29px; height:calc(100dvh - 29px); }
body:has(#staging-environment-marker) .pb-head { top:29px; }
body:has(#staging-environment-marker) .pb-toolbar { top:calc(var(--pb-head-h) + 29px); }
body:has(#staging-environment-marker) .pb-mnav, body:has(#staging-environment-marker) .pb-drawer, body:has(#staging-environment-marker) .pb-tl-wrap.is-full { top:29px; }

@keyframes pbFade { from { opacity:0; } to { opacity:1; } }
@keyframes pbSlideR { from { transform:translateX(28px); opacity:0; } to { transform:none; opacity:1; } }
@keyframes pbSheet { from { transform:translateY(24px); opacity:0; } to { transform:none; opacity:1; } }
@media (prefers-reduced-motion: reduce) { .pb *, .pb *::before, .pb *::after { animation-duration:.001ms !important; transition-duration:.001ms !important; } }

/* ---------- shell ---------- */
.pb { display:flex; align-items:flex-start; min-height:100dvh; background:var(--bg); color:var(--text-primary); font-family:var(--pb-body); font-size:14px; line-height:1.45; -webkit-font-smoothing:antialiased; }
.pb *, .pb *::before, .pb *::after { box-sizing:border-box; }
.pb a { color:var(--link); text-decoration:none; }
.pb a:hover { filter:brightness(1.1); }
.pb button { font-family:inherit; }
.pb ::-webkit-scrollbar { width:10px; height:10px; }
.pb ::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:8px; border:2px solid transparent; background-clip:padding-box; }

.pb-side { position:sticky; top:0; height:100dvh; flex:0 0 auto; width:var(--pb-side-w); display:none; flex-direction:column; background:linear-gradient(180deg,#26383F 0%,#1E2E35 100%); border-right:1px solid rgba(255,255,255,.06); z-index:20; }
.pb-side-head { display:flex; align-items:center; gap:12px; padding:20px 18px; border-bottom:1px solid rgba(255,255,255,.07); min-height:70px; }
.pb-side-head img { width:36px; height:36px; flex:0 0 auto; object-fit:contain; filter:drop-shadow(0 3px 6px rgba(0,0,0,.35)); }
.pb-side-brand { min-width:0; }
.pb-side-brand strong { display:block; font-family:var(--pb-font); font-weight:700; font-size:16px; letter-spacing:-.01em; color:#F2F7F7; line-height:1; }
.pb-side-brand span { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:#85C5C4; margin-top:4px; }
.pb-nav { flex:1 1 auto; overflow-y:auto; padding:14px 12px; display:flex; flex-direction:column; gap:3px; }
.pb-nav-group { font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(226,236,236,.42); padding:14px 12px 5px; }
.pb-nav-btn { position:relative; display:flex; align-items:center; gap:13px; width:100%; padding:11px 12px; border:none; border-radius:10px; background:transparent; color:rgba(226,236,236,.72); font-size:14px; font-weight:500; text-align:left; cursor:pointer; text-decoration:none; transition:background-color .15s ease,color .15s ease; }
.pb-nav-btn:hover { background:rgba(255,255,255,.06); color:#EAF6F5; }
.pb-nav-btn.is-active { background:rgba(133,197,196,.16); color:#EAF6F5; font-weight:600; }
.pb-nav-btn.is-active::before { content:""; position:absolute; left:0; top:50%; transform:translateY(-50%); width:3px; height:20px; border-radius:0 3px 3px 0; background:#85C5C4; }
.pb-nav-ico { flex:0 0 auto; width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center; color:rgba(226,236,236,.6); }
.pb-nav-btn.is-active .pb-nav-ico { color:#85C5C4; }
.pb-nav-ico svg { width:20px; height:20px; }
.pb-nav-lbl { flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-nav-badge { flex:0 0 auto; font-size:11px; font-weight:700; color:#1A2830; background:#85C5C4; padding:1px 8px; border-radius:999px; }
/* VD-05 — de accountvoet is een echte knop naar hetzelfde profielmenu als in de
   kop, en neemt minder ruimte in zodat hij niet met de navigatie concurreert. */
.pb-side-foot { width:100%; padding:9px 12px; border:0; border-top:1px solid rgba(255,255,255,.07); background:none; color:inherit; font:inherit; text-align:left; display:flex; align-items:center; gap:10px; cursor:pointer; transition:background .15s; }
.pb-side-foot:hover, .pb-side-foot:focus-visible { background:rgba(255,255,255,.06); }
.pb-side-foot .pb-side-foot-go { margin-left:auto; flex:0 0 auto; opacity:.5; }
.pb-side-foot .pb-side-foot-go svg { width:15px; height:15px; display:block; }
.pb-avatar { flex:0 0 auto; width:38px; height:38px; border-radius:50%; background:rgba(133,197,196,.18); color:#85C5C4; display:inline-flex; align-items:center; justify-content:center; font-weight:700; font-size:14px; }
.pb-side-foot > div { min-width:0; }
.pb-side-foot strong { display:block; color:#EAF1F1; font-weight:600; font-size:13px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-side-foot span { display:block; color:rgba(234,241,241,.55); font-size:11.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.pb-mainwrap { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; min-height:100dvh; }
.pb-head { position:sticky; top:0; z-index:15; display:flex; align-items:center; gap:14px; padding:12px clamp(14px,2.4vw,28px); background:var(--glass); border-bottom:1px solid var(--border); min-height:var(--pb-head-h); }
.pb-head-titles { flex:1 1 auto; min-width:0; }
.pb-head-titles h1 { margin:0; font-family:var(--pb-font); font-weight:700; font-size:clamp(18px,2vw,23px); letter-spacing:-.02em; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; line-height:1.2; }
.pb-head-titles p { margin:2px 0 0; font-size:12.5px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-head-actions { flex:0 0 auto; display:flex; align-items:center; gap:10px; }
.pb-head-logo { width:34px; height:34px; flex:0 0 auto; object-fit:contain; }
.pb-icon-btn { position:relative; flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:11px; background:var(--surface); color:var(--text-secondary); cursor:pointer; transition:background-color .15s ease; padding:0; }
.pb-icon-btn:hover { background:var(--surface-raised); }
.pb-icon-btn:focus-visible, .pb-cc-btn:focus-visible, .pb-actor-btn:focus-visible, .pb-tb-btn:focus-visible, .pb-nav-btn:focus-visible { outline:2px solid #85C5C4; outline-offset:2px; }
.pb-icon-btn svg { width:19px; height:19px; }
.pb-icon-btn .notif-badge, .pb-notif-badge { position:absolute; top:5px; right:6px; min-width:16px; height:16px; padding:0 4px; border-radius:999px; background:#FF6A1A; color:#1A2830; font-size:10px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; border:2px solid var(--surface); line-height:1; }
.pb-cc-btn { display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 14px; border:1px solid var(--brand); border-radius:11px; background:var(--brand-soft); color:var(--brand-ink); font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.pb-cc-btn:hover { filter:brightness(1.04); }
.pb-actor-btn { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:5px 10px 5px 5px; border:1px solid var(--border); border-radius:999px; background:var(--surface); cursor:pointer; transition:background-color .15s ease; }
.pb-actor-btn:hover { background:var(--surface-raised); }
.pb-actor-btn .pb-avatar { width:32px; height:32px; font-size:13px; background:rgba(133,197,196,.20); color:var(--brand-ink); }
.pb-actor-txt { line-height:1.15; text-align:left; }
.pb-actor-txt strong { display:block; font-weight:600; font-size:13px; color:var(--text-primary); }
.pb-actor-txt span { display:block; font-size:11px; color:var(--text-secondary); }
.pb-menu-wrap { position:relative; }
.pb-menu-scrim { position:fixed; inset:0; z-index:30; }
.pb-menu { position:absolute; top:calc(100% + 8px); right:0; z-index:31; width:min(296px,88vw); background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:0 24px 60px -24px rgba(20,40,48,.5); overflow:hidden; animation:pbSheet .2s ease both; }
.pb-menu.pb-menu--left { right:auto; left:0; width:min(300px,92vw); }
.pb-menu-head { padding:15px 16px; border-bottom:1px solid var(--bg); }
.pb-menu-head strong { display:block; font-weight:700; font-size:14px; color:var(--text-primary); }
.pb-menu-head span { display:block; font-size:12px; color:var(--text-secondary); margin-top:1px; }
.pb-menu-cap { display:inline-flex; align-items:center; gap:6px; margin-top:10px; font-size:11px; font-weight:600; color:var(--brand-ink); background:rgba(133,197,196,.16); padding:3px 9px; border-radius:999px; }
.pb-menu-cap::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--link); }
.pb-menu-body { padding:6px; }
.pb-menu-item { display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:11px 12px; border:none; background:var(--surface); border-radius:9px; color:var(--text-secondary); font-size:13.5px; font-weight:500; cursor:pointer; text-decoration:none; }
.pb-menu-item:hover { background:var(--surface-raised); }
.pb-menu-item svg { width:16px; height:16px; color:#85C5C4; flex:0 0 auto; }
.pb-menu-item.is-danger { color:var(--danger-fg); font-weight:600; }
.pb-menu-item.is-danger svg { color:currentColor; }
.pb-menu-item.is-danger:hover { background:var(--danger-bg); }
.pb-menu-form { display:flex; flex-direction:column; gap:13px; padding:15px; }
.pb-lbl { display:flex; flex-direction:column; gap:6px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); }
.pb-check { display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--text-secondary); cursor:pointer; user-select:none; text-transform:none; letter-spacing:0; font-weight:500; }
.pb-check input { width:16px; height:16px; accent-color:var(--link); cursor:pointer; margin:0; }

/* ---------- werkbalk ---------- */
/* §G item 5 — het zoekveld stond op 88px met het icoon over de placeholder
   (gemeten op 1280/1024/390) omdat de globale formulierregel `select{width:100%}`
   elke werkbalk-select een basis van de volle rij gaf; die krompen tot hun
   minimum en het zoekveld kreeg de rest. Selects krijgen hier hun eigen breedte
   en mogen krimpen; het zoekveld heeft een echt minimum. Onder 1080px breekt de
   werkbalk af in plaats van te knippen (gemeten op 390px: selects buiten beeld). */
.pb-toolbar { position:sticky; top:var(--pb-head-h); z-index:12; display:flex; align-items:center; gap:8px; padding:10px clamp(10px,2.2vw,28px); background:var(--glass2); border-bottom:1px solid var(--border); min-width:0; }
.pb-toolbar[hidden] { display:none; }
/* §G item 1 — werkruimte-tabstrook onder de kop; de werkbalk schuift eronder. */
.pb { --pb-ws-h:52px; }
.pb-ws { position:sticky; top:var(--pb-head-h); z-index:13; display:flex; align-items:center; min-height:var(--pb-ws-h); padding:6px clamp(10px,2.2vw,28px); background:var(--glass2); border-bottom:1px solid var(--border); }
.pb-ws .pb-tabs a.pb-tab { color:var(--text-secondary); text-decoration:none; }
.pb-ws .pb-tabs a.pb-tab[aria-selected="true"] { color:var(--surface); }
.pb-ws .pb-tabs a.pb-tab:hover { filter:none; color:var(--text-primary); }
.pb-ws .pb-tabs a.pb-tab[aria-selected="true"]:hover { color:var(--surface); }
.pb-ws-slot:has(.pb-ws) + .pb-toolbar { top:calc(var(--pb-head-h) + var(--pb-ws-h)); }
body:has(#staging-environment-marker) .pb-ws { top:calc(var(--pb-head-h) + 29px); }
body:has(#staging-environment-marker) .pb-ws-slot:has(.pb-ws) + .pb-toolbar { top:calc(var(--pb-head-h) + var(--pb-ws-h) + 29px); }
.pb-search { position:relative; flex:1 1 160px; min-width:150px; max-width:300px; }
.pb-toolbar > .pb-select { width:auto; flex:0 1 auto; min-width:118px; }
.pb-search svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:17px; height:17px; color:var(--text-muted); pointer-events:none; }
.pb-search input { width:100%; height:42px; padding:0 12px 0 36px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); color:var(--text-primary); font-family:inherit; font-size:14px; outline:none; transition:border-color .15s ease,box-shadow .15s ease; }
.pb-search input:focus { border-color:#85C5C4; box-shadow:0 0 0 3px rgba(133,197,196,.28); }
.pb-tb-btn { position:relative; display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 14px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); color:var(--text-secondary); font-size:13.5px; font-weight:600; cursor:pointer; white-space:nowrap; }
.pb-tb-btn:hover { background:var(--surface-raised); }
.pb-tb-btn.is-on { border-color:var(--brand); background:var(--brand-soft); }
.pb-tb-btn svg { width:16px; height:16px; flex:0 0 auto; }
.pb-tb-count { min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--brand); color:var(--brand-ink); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.pb-tb-scroll { display:flex; align-items:center; gap:10px; flex:0 1 auto; min-width:0; overflow-x:auto; }
.pb-tabs { display:inline-flex; flex:0 0 auto; padding:3px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); }
.pb-tab { display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 12px; border:none; border-radius:8px; background:transparent; color:var(--text-secondary); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.pb-tab[aria-selected="true"] { background:var(--text-primary); color:var(--surface); }
.pb-tab svg { width:15px; height:15px; flex:0 0 auto; }
.pb-seg { display:inline-flex; align-items:center; gap:2px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); padding:3px; flex:0 0 auto; }
.pb-seg-btn { min-width:26px; height:32px; padding:0 8px; border:none; border-radius:7px; background:transparent; color:var(--text-secondary); font-size:12.5px; font-weight:700; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; justify-content:center; }
.pb-seg-btn:hover { background:var(--surface-raised); }
.pb-seg-btn[aria-pressed="true"] { background:var(--text-primary); color:var(--surface); }
.pb-seg-btn svg { width:16px; height:16px; }
.pb-seg-unit { padding:0 7px 0 4px; font-size:11px; font-weight:600; color:var(--text-muted); white-space:nowrap; }
.pb-range { font-family:var(--pb-font); font-weight:700; font-size:13.5px; color:var(--text-primary); white-space:nowrap; flex:0 0 auto; }
.pb-tb-spacer { flex:1 1 auto; min-width:0; }
.pb-primary { display:inline-flex; align-items:center; gap:8px; height:42px; padding:0 16px; border:none; border-radius:10px; background:var(--action); color:#1A2830; font-size:14px; font-weight:700; cursor:pointer; box-shadow:0 10px 22px -12px rgba(255,106,26,.75); transition:filter .15s ease,transform .15s ease; white-space:nowrap; flex:0 0 auto; }
.pb-primary:hover { filter:brightness(1.05); transform:translateY(-1px); }
.pb-primary:focus-visible { outline:3px solid var(--focus); outline-offset:2px; }
.pb-primary svg { width:17px; height:17px; }
.pb-select { height:40px; padding:0 30px 0 12px; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface) url('data:image/svg+xml;utf8,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%2212%22 height=%2212%22 viewBox=%220 0 12 12%22><path d=%22M2 4l4 4 4-4%22 stroke=%22%237B8890%22 stroke-width=%221.6%22 fill=%22none%22 stroke-linecap=%22round%22/></svg>') no-repeat right 10px center; color:var(--text-primary); font-family:inherit; font-size:13.5px; outline:none; cursor:pointer; -webkit-appearance:none; appearance:none; }
.pb-select:focus, .pb-input:focus { border-color:#85C5C4; box-shadow:0 0 0 3px rgba(133,197,196,.28); }
.pb-input { height:44px; padding:0 12px; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface); color:var(--text-primary); font-family:inherit; font-size:14px; outline:none; width:100%; }
.pb-input--sm { height:36px; font-size:13px; }

/* ---------- inhoud ---------- */
.pb-main { flex:1 1 auto; min-width:0; padding:clamp(14px,2.2vw,24px); }
.pb-main:focus { outline:none; }
.pb-stack { display:flex; flex-direction:column; gap:14px; }
.pb-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:18px; }
.pb-card--flush { padding:0; overflow:hidden; }
.pb-h2 { margin:0 0 12px; font-family:var(--pb-font); font-size:14px; font-weight:700; color:var(--text-primary); }
.pb-h3 { margin:0 0 10px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); }
.pb-kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:14px; }
.pb-kpi { background:var(--surface); border:1px solid var(--border); border-radius:14px; padding:16px 18px; text-align:left; }
.pb-kpi-lbl { display:flex; align-items:center; gap:8px; font-size:12px; font-weight:600; color:var(--text-secondary); }
.pb-kpi-lbl i { width:9px; height:9px; border-radius:3px; background:var(--kpi,#85C5C4); }
.pb-kpi-val { font-family:var(--pb-font); font-weight:700; font-size:30px; color:var(--text-primary); margin-top:8px; line-height:1; }
.pb-kpi-sub { font-size:12px; color:var(--text-muted); margin-top:6px; }
.pb-dist { display:flex; height:12px; border-radius:999px; overflow:hidden; background:var(--bg); }
.pb-dist span { display:block; height:100%; }
.pb-dist-legend { display:flex; flex-wrap:wrap; gap:10px 18px; margin-top:14px; }
.pb-dist-legend div { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-secondary); }
.pb-dist-legend b { color:var(--text-primary); }
.pb-dot { width:9px; height:9px; border-radius:50%; background:var(--pc,#85C5C4); flex:0 0 auto; }
.pb-2col { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:14px; }
.pb-attn { display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; padding:11px 12px; border:1px solid var(--warning-bd); background:var(--warning-bg); border-radius:10px; cursor:pointer; color:inherit; text-decoration:none; font:inherit; }
.pb-attn:hover { filter:brightness(.985); }
.pb-attn svg { flex:0 0 auto; margin-top:1px; width:15px; height:15px; color:var(--warning-fg); }
.pb-attn b { display:block; font-size:12px; font-weight:700; color:var(--text-primary); }
.pb-attn span { display:block; font-size:12.5px; color:var(--warning-fg); line-height:1.4; margin-top:2px; }
.pb-attn.is-info { border-color:var(--info-bd); background:var(--info-bg); }
.pb-attn.is-info svg, .pb-attn.is-info span { color:var(--info-fg); }
.pb-trow { display:flex; align-items:center; gap:11px; width:100%; text-align:left; padding:10px 12px; border:1px solid var(--bg); background:var(--surface-raised); border-radius:10px; cursor:pointer; color:inherit; text-decoration:none; font:inherit; }
.pb-trow:hover { filter:brightness(.985); }
.pb-trow-ico { flex:0 0 auto; width:30px; height:30px; border-radius:8px; background:rgba(133,197,196,.14); color:var(--brand-ink); display:inline-flex; align-items:center; justify-content:center; }
.pb-trow-ico svg { width:16px; height:16px; }
.pb-trow-txt { flex:1 1 auto; min-width:0; }
.pb-trow-txt b { display:block; font-size:12.5px; font-weight:700; color:var(--text-primary); }
.pb-trow-txt span { display:block; font-size:12px; color:var(--text-secondary); }
.pb-pill { display:inline-flex; align-items:center; gap:6px; max-width:100%; white-space:nowrap; font-size:11.5px; font-weight:600; color:var(--pc,var(--text-secondary)); background:var(--pbg,var(--bg)); padding:3px 9px; border-radius:999px; }
.pb-pill::before { content:""; width:6px; height:6px; border-radius:50%; background:var(--pc,var(--text-secondary)); flex:0 0 auto; }
.pb-pill--plain::before { display:none; }
.pb-pill--lg { font-size:12px; padding:4px 10px; }
.pb-pill--bd { border:1px solid var(--pbd,transparent); }
.pb-tag { display:inline-flex; align-items:center; font-size:10px; font-weight:700; letter-spacing:.05em; padding:2px 8px; border-radius:999px; white-space:nowrap; color:var(--warning-fg); background:var(--warning-bg); border:1px solid var(--warning-bd); }
.pb-tag--brand { color:var(--brand-ink); background:var(--brand-soft); border-color:var(--brand); }
.pb-tag--ok { color:var(--success-fg); background:var(--success-bg); border-color:var(--ok-bd); }
.pb-tag--err { color:var(--danger-fg); background:var(--danger-bg); border-color:var(--danger-fg); }
.pb-tag--ink { color:var(--surface); background:var(--text-primary); border-color:var(--text-primary); }
.pb-tag--muted { color:var(--text-muted); background:var(--surface-raised); border-color:var(--border-strong); }
.pb-note { display:flex; flex-wrap:wrap; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); line-height:1.5; }
.pb-note--box { padding:11px 13px; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); align-items:flex-start; flex-wrap:nowrap; }
.pb-note--box span { color:var(--text-muted); }
.pb-muted { color:var(--text-muted); }
.pb-mono { font-family:var(--pb-mono); font-size:12px; color:var(--text-primary); }
.pb-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:64px 20px; color:var(--text-secondary); }
.pb-empty--sm { padding:22px 16px; font-size:12.5px; color:var(--text-muted); }
.pb-empty-ico { width:56px; height:56px; border-radius:14px; background:var(--surface); border:1px solid var(--border); display:flex; align-items:center; justify-content:center; margin-bottom:16px; color:#B7C2C7; }
.pb-empty p { margin:0; font-size:13px; }
.pb-empty p:first-of-type { margin-bottom:4px; font-weight:600; color:var(--text-secondary); }
.pb-foot-note { display:flex; align-items:center; gap:8px; margin-top:16px; padding:0 2px; font-size:12px; color:var(--text-muted); }
.pb-foot-note b { font-weight:600; color:var(--text-secondary); }
.pb-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:12px; align-items:start; }
.pb-art { border:1px solid var(--border); border-radius:14px; background:var(--surface); padding:13px 14px; display:flex; flex-direction:column; gap:8px; min-width:0; }
.pb-art-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.pb-art-title { font-family:var(--pb-font); font-size:13.5px; font-weight:700; color:var(--text-primary); min-width:0; }
.pb-art-sub { font-size:12px; color:var(--text-secondary); }
.pb-art-meta { font-size:11.5px; color:var(--text-muted); }
.pb-art-sep { padding:8px 0 2px; border-top:1px solid var(--border); display:flex; flex-direction:column; gap:5px; }
.pb-spacer { flex:1 1 auto; }
.pb-chips { display:flex; flex-wrap:wrap; gap:6px; }
.pb-chip { height:24px; padding:0 9px; border:none; border-radius:999px; background:var(--pbg,var(--bg)); color:var(--pc,var(--text-secondary)); font-family:inherit; font-size:11px; font-weight:700; cursor:pointer; white-space:nowrap; display:inline-flex; align-items:center; text-decoration:none; }
.pb-chip--outline { background:var(--surface-raised); color:var(--link); border:1px solid var(--border-strong); }
.pb-btn { display:inline-flex; align-items:center; justify-content:center; gap:7px; height:38px; padding:0 14px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); color:var(--text-primary); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; text-decoration:none; transition:background-color .15s ease,filter .15s ease; }
.pb-btn:hover { background:var(--surface-raised); }
.pb-btn:disabled { cursor:not-allowed; opacity:.55; }
.pb-btn--sm { height:32px; padding:0 12px; border-radius:8px; font-size:12px; }
.pb-btn--xs { height:30px; padding:0 11px; border-radius:8px; font-size:11.5px; }
.pb-btn--lg { height:46px; font-size:14px; }
.pb-btn--link { color:var(--link); }
.pb-btn--ink { background:var(--text-primary); color:var(--surface); border-color:var(--text-primary); font-weight:700; }
.pb-btn--ink:hover { filter:brightness(1.1); background:var(--text-primary); }
.pb-btn--brand { background:var(--brand-soft); color:var(--brand-ink); border-color:var(--brand); font-weight:700; }
.pb-btn--brand:hover { background:var(--brand-soft); filter:brightness(1.04); }
.pb-btn--danger { background:var(--danger-bg); color:var(--danger-fg); border-color:var(--danger-fg); font-weight:700; }
.pb-btn--dashed { border-style:dashed; background:transparent; color:var(--text-muted); }
.pb-btn--dashed:hover { background:transparent; }
.pb-btn--action { background:var(--action); color:#1A2830; border-color:var(--action); font-weight:700; box-shadow:0 10px 24px -12px rgba(255,106,26,.75); }
.pb-btn--action:hover { background:var(--action); filter:brightness(1.05); }
.pb-btn--block { width:100%; flex:1 1 auto; }
.pb-kv { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:4px 16px; }
.pb-kv-row { display:flex; justify-content:space-between; gap:14px; padding:11px 0; border-bottom:1px solid var(--border); }
.pb-kv-row:last-child { border-bottom:none; }
.pb-kv-row > span:first-child { font-size:12px; color:var(--text-secondary); font-weight:600; }
.pb-kv-row > span:last-child { font-size:13px; color:var(--text-primary); text-align:right; }
.pb-actions { display:flex; flex-wrap:wrap; align-items:center; gap:10px; }

/* lijst (Reserveringen · Historie · Lijst-weergave) */
.pb-list { background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; }
.pb-list-head, .pb-list-row { display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1.6fr) minmax(0,1.3fr) minmax(0,1.2fr) minmax(max-content,1fr) minmax(max-content,1.1fr); gap:14px; padding:12px 18px; align-items:center; }
/* De twee statuskolommen krijgen altijd hun eigen breedte: een status is nooit afgekapt; tekstkolommen ellipsen. */
.pb-list-head { background:var(--surface-raised); border-bottom:1px solid var(--border); font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); }
.pb-list-head > div { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pb-list-row { padding:14px 18px; border-bottom:1px solid var(--bg); cursor:pointer; transition:background-color .12s ease; text-align:left; width:100%; border-left:0; border-right:0; border-top:0; background:transparent; color:inherit; font:inherit; }
.pb-list-row:hover { background:var(--surface-raised); }
.pb-list-row:focus-visible { outline:none; background:var(--brand-soft); box-shadow:inset 3px 0 0 #85C5C4; }
.pb-list-row > div { min-width:0; overflow:hidden; }
.pb-list-row .pb-num { font-family:var(--pb-font); font-weight:700; font-size:12.5px; color:var(--text-primary); white-space:nowrap; }
.pb-list-row .pb-co { font-weight:700; font-size:14px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-list-row .pb-sub { font-size:12px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-list-row .pb-cell { font-size:13px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-list-row .pb-cell b { font-weight:600; color:var(--text-primary); }
.pb-pager { display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:12px 18px; border-top:1px solid var(--border); background:var(--surface-raised); font-size:12.5px; color:var(--text-secondary); }
.pb-prio { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--pc); background:var(--pbg); padding:1px 6px; border-radius:5px; white-space:nowrap; }

/* documentenlijst */
.pb-doc-head, .pb-doc-row { display:grid; grid-template-columns:1.4fr 1fr 1.6fr 1fr 1fr; gap:12px; align-items:center; padding:13px 16px; border-bottom:1px solid var(--border); }
.pb-doc-head { padding:11px 16px; background:var(--surface-raised); font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); }
.pb-doc-ico { flex:0 0 auto; width:32px; height:32px; border-radius:8px; background:var(--brand-soft); color:var(--brand-ink); display:inline-flex; align-items:center; justify-content:center; }
.pb-doc-ico svg { width:16px; height:16px; }

/* ---------- Planbord: legenda + tijdlijn ---------- */
.pb-legend { display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; margin-bottom:12px; padding:9px 13px; border:1px solid var(--border); border-radius:10px; background:var(--surface-raised); }
.pb-legend-row { display:flex; align-items:center; gap:8px 14px; flex-wrap:nowrap; overflow-x:auto; width:100%; }
.pb-legend-lbl { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); flex:0 0 auto; }
.pb-legend-item { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); flex:0 0 auto; white-space:nowrap; }
.pb-legend-item i { width:11px; height:11px; border-radius:3px; border:1px solid var(--pc); background:var(--pbg); }
.pb-legend-hint { flex:1 1 100%; display:flex; align-items:flex-start; gap:6px; font-size:11.5px; color:var(--text-secondary); }
.pb-tl-wrap { position:relative; }
.pb-tl-wrap.is-full { position:fixed; inset:0; z-index:60; background:var(--bg); padding:16px clamp(14px,2.4vw,28px); overflow-y:auto; }
.pb-tl-close { position:absolute; top:16px; right:clamp(14px,2.4vw,28px); z-index:61; }
.pb-tl { border:1px solid var(--border); border-radius:14px; overflow:hidden; background:var(--surface); }
/* §G item 2 — de tijdlijn is één scrollcontainer voor beide assen: zo blijven de
   datumkop (sticky top) én de product/asset-kolom (sticky left) zichtbaar
   terwijl de planner over dagen en over 90+ producten navigeert. De hoogte is
   begrensd op de viewport minus de vaste kop + werkbalk; korte borden krimpen
   gewoon mee. */
.pb-tl-scroll { overflow:auto; max-height:calc(100dvh - 215px); }
body:has(#staging-environment-marker) .pb-tl-scroll { max-height:calc(100dvh - 244px); }
.pb-tl-wrap.is-full .pb-tl-scroll { max-height:calc(100dvh - 150px); }
.pb-tl-grid { position:relative; }
.pb-tl-now { position:absolute; top:0; bottom:0; width:1px; background:var(--action); opacity:.35; pointer-events:none; z-index:0; }
.pb-tl-nowrow { display:flex; align-items:stretch; height:24px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:0; z-index:7; }
.pb-tl-nowrow > div:first-child { flex:0 0 auto; border-right:1px solid var(--border); position:sticky; left:0; z-index:1; background:var(--surface); }
.pb-tl-nowrow + .pb-tl-headrow { top:24px; }
.pb-tl-nowrow > div:last-child { flex:1 1 auto; position:relative; overflow:hidden; }
.pb-tl-nowlbl { position:absolute; top:50%; transform:translate(-50%,-50%); font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--text-secondary); background:var(--surface); padding:2px 8px; border-radius:4px; white-space:nowrap; }
.pb-tl-depot { display:flex; align-items:center; gap:9px; padding:8px 14px; background:var(--text-primary); color:var(--surface); }
.pb-tl-depot b { font-family:var(--pb-font); font-weight:700; font-size:13px; }
.pb-tl-depot span { font-size:10.5px; font-weight:600; letter-spacing:.04em; opacity:.7; }
.pb-tl-depot svg { width:14px; height:14px; flex:0 0 auto; }
.pb-tl-headrow { display:flex; align-items:stretch; position:sticky; top:0; z-index:6; background:var(--surface-raised); border-bottom:1px solid var(--border); }
.pb-tl-headrow > .pb-tl-label { padding:10px 14px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--text-secondary); background:var(--surface-raised); }
/* Sticky-left labelkolom: boven de cellen/blokken (z 3), onder de plakkende koppen (z 6/7). */
.pb-tl-label { position:sticky; left:0; z-index:3; flex:0 0 auto; border-right:1px solid var(--border); min-width:0; overflow:hidden; }
.pb-tl-days { flex:1 1 auto; display:grid; }
.pb-tl-day { padding:8px 4px; text-align:center; border-left:1px solid var(--border); }
.pb-tl-day.is-today { background:var(--brand-soft); }
.pb-tl-day-wd { font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); }
.pb-tl-day.is-today .pb-tl-day-wd { color:var(--brand-ink); }
.pb-tl-day-n { font-size:15px; font-weight:700; color:var(--text-primary); margin-top:1px; }
.pb-tl-day.is-today .pb-tl-day-n { color:var(--brand-ink); }
.pb-tl-group { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 14px; background:var(--surface-muted); border:none; border-bottom:1px solid var(--border); border-top:1px solid var(--border); cursor:pointer; color:inherit; font:inherit; }
.pb-tl-group:hover { filter:brightness(.98); }
/* De groepskop beslaat de volle gridbreedte; de inhoud plakt links zodat de
   productnaam zichtbaar blijft tijdens horizontaal scrollen. */
.pb-tl-gin { position:sticky; left:0; display:inline-flex; align-items:center; gap:9px; min-width:0; max-width:100%; }
.pb-tl-caret { flex:0 0 auto; width:14px; color:var(--text-secondary); font-size:11px; }
.pb-tl-group svg { width:14px; height:14px; flex:0 0 auto; color:var(--brand-ink); }
.pb-tl-gname { font-family:var(--pb-font); font-weight:700; font-size:13.5px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pb-tl-gcode { flex:0 0 auto; font-size:11px; font-weight:700; color:var(--brand-ink); background:var(--brand-soft); padding:2px 8px; border-radius:999px; white-space:nowrap; }
.pb-tl-gcount { flex:0 0 auto; font-size:11.5px; color:var(--text-secondary); white-space:nowrap; }
.pb-tl-caprow { display:flex; align-items:stretch; border-bottom:1px solid var(--border); background:var(--surface); }
.pb-tl-caprow > .pb-tl-label { padding:5px 14px; display:flex; align-items:center; gap:6px; background:var(--surface); }
.pb-tl-caplbl { font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); }
.pb-tl-captag { font-size:9px; font-weight:700; color:var(--brand-ink); background:var(--brand-soft); border:1px solid var(--brand); padding:1px 5px; border-radius:5px; cursor:help; }
.pb-tl-cap { border-left:1px solid var(--border); padding:3px 2px; display:flex; align-items:center; justify-content:center; }
.pb-tl-cap:focus-visible { outline:2px solid var(--link); outline-offset:-2px; }
.pb-tl-cap span { min-width:20px; text-align:center; font-size:11px; font-weight:700; color:var(--pc); background:var(--pbg); border-radius:5px; padding:1px 0; }
.pb-tl-row { display:flex; align-items:stretch; border-bottom:1px solid var(--border); }
.pb-tl-rowlabel { padding:8px 14px; display:grid; grid-auto-rows:min-content; align-content:center; gap:2px; background:var(--surface); }
.pb-tl-rowlabel.is-unassigned { background:var(--warning-bg); }
.pb-tl-rowlabel-main { display:flex; align-items:center; gap:6px; min-width:0; }
.pb-tl-rowlabel-main i { flex:0 0 auto; width:7px; height:7px; border-radius:2px; background:var(--warning-fg); }
.pb-tl-rowlabel-main span { font-size:12.5px; line-height:16px; font-weight:600; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pb-tl-rowlabel.is-unassigned .pb-tl-rowlabel-main span { font-weight:700; color:var(--warning-fg); }
.pb-tl-rowlabel-sub { font-size:11px; line-height:14px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-rd { display:inline-flex; align-items:center; gap:5px; margin-top:3px; font-size:10px; font-weight:700; color:var(--pc); background:var(--pbg); border:1px solid var(--pbd); padding:2px 7px; border-radius:999px; align-self:flex-start; white-space:nowrap; max-width:100%; overflow:hidden; }
.pb-rd::before { content:""; flex:0 0 auto; width:6px; height:6px; border-radius:50%; background:var(--pc); }
.pb-tl-cells { flex:1 1 auto; position:relative; }
.pb-tl-bg { position:absolute; inset:0; display:grid; }
.pb-tl-bg > div { border-left:1px solid var(--border); }
.pb-tl-bg > div.is-today { background:var(--brand-soft); }
.pb-tl-bg > div.is-weekend { background:var(--surface-raised); }
.pb-tl-lanes { position:relative; display:grid; gap:4px; }
.pb-tl-block { min-width:0; display:flex; flex-direction:column; justify-content:center; text-align:left; padding:3px 9px; border:1px solid var(--pc); border-left:3px solid var(--pc); background:var(--pbg); cursor:pointer; overflow:hidden; font:inherit; color:inherit; }
.pb-tl-block:hover { filter:brightness(.97); box-shadow:0 4px 12px -6px var(--shadow); }
.pb-tl-block:focus-visible { outline:2px solid var(--link); outline-offset:1px; }
.pb-tl-block.is-open { border-right-style:dashed; }
.pb-tl-block b { font-size:11.5px; line-height:14px; font-weight:700; color:var(--pc); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-tl-block span { font-size:10.5px; line-height:13px; color:var(--text-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-tl-block small { font-size:10px; line-height:13px; color:var(--text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-tl-empty { text-align:center; padding:40px 20px; color:var(--text-secondary); }
.pb-tl-empty p { margin:0; font-size:13px; }
.pb-tl-empty p:first-child { margin-bottom:4px; font-weight:600; }

/* ---------- Planbord: statusbord + kaarten ---------- */
.pb-lanes { display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; align-items:flex-start; }
.pb-lane { flex:0 0 auto; width:306px; max-width:82vw; display:flex; flex-direction:column; background:var(--surface-muted); border:1px solid var(--border); border-radius:14px; }
.pb-lane-head { display:flex; align-items:center; gap:9px; padding:13px 14px 11px; border-bottom:1px solid rgba(0,0,0,.05); }
.pb-lane-head h2 { margin:0; font-size:13px; font-weight:700; color:var(--text-primary); flex:1 1 auto; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; font-family:inherit; }
.pb-lane-count { font-size:12px; font-weight:700; color:var(--pc); background:var(--pbg); padding:2px 9px; border-radius:999px; flex:0 0 auto; }
.pb-lane-body { display:flex; flex-direction:column; gap:10px; padding:12px; }
.pb-lane-empty { padding:18px 10px; text-align:center; font-size:12.5px; color:var(--text-muted); border:1px dashed var(--border-strong); border-radius:10px; }
.pb-rcard { text-align:left; cursor:pointer; background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--pc); border-radius:11px; padding:13px 13px 12px; box-shadow:0 1px 2px rgba(20,40,48,.04); transition:box-shadow .15s ease,transform .15s ease; color:inherit; font:inherit; width:100%; display:block; }
.pb-rcard:hover { box-shadow:0 10px 24px -14px rgba(20,40,48,.35); transform:translateY(-1px); }
.pb-rcard:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(133,197,196,.5); }
.pb-rcard-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pb-rcard-top .pb-num { font-family:var(--pb-font); font-weight:700; font-size:12.5px; color:var(--text-primary); }
.pb-rcard-top .pb-src { font-size:11.5px; color:var(--text-secondary); }
.pb-rcard-co { font-weight:700; font-size:14.5px; color:var(--text-primary); line-height:1.3; margin-bottom:2px; }
.pb-rcard-line { display:flex; align-items:center; gap:7px; font-size:12.5px; color:var(--text-secondary); min-width:0; }
.pb-rcard-line svg { flex:0 0 auto; width:13px; height:13px; color:var(--text-muted); }
.pb-rcard-line span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pb-rcard-prod { font-size:13px; margin-bottom:10px; }
.pb-rcard-prod svg { width:14px; height:14px; color:#85C5C4; }
.pb-rcard-meta { display:flex; flex-direction:column; gap:5px; margin-bottom:11px; }
.pb-rcard-foot { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.pb-qty { flex:0 0 auto; font-size:11px; font-weight:700; color:var(--text-secondary); background:var(--bg); padding:1px 6px; border-radius:5px; }

/* ---------- overlays: lade · menu · voorbeeld · dialoog ---------- */
.pb-scrim { position:fixed; inset:0; z-index:50; background:rgba(20,32,38,.5); animation:pbFade .2s ease both; }
.pb-drawer { position:fixed; top:0; right:0; bottom:0; z-index:51; width:min(480px,100vw); background:var(--bg); box-shadow:-20px 0 60px -30px rgba(0,0,0,.6); display:flex; flex-direction:column; animation:pbSlideR .28s cubic-bezier(.2,.75,.25,1) both; }
.pb-drawer--wide { width:min(560px,100vw); }
.pb-drawer-head { flex:0 0 auto; display:flex; align-items:flex-start; gap:12px; padding:18px 20px; background:var(--surface); border-bottom:1px solid var(--border); }
.pb-drawer-head > div { flex:1 1 auto; min-width:0; }
.pb-drawer-title { display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.pb-drawer-title b { font-family:var(--pb-font); font-weight:700; font-size:17px; color:var(--text-primary); }
.pb-drawer-head h2 { margin:0; font-family:var(--pb-font); font-weight:700; font-size:17px; color:var(--text-primary); }
.pb-drawer-sub { margin-top:6px; font-size:13px; color:var(--text-secondary); }
.pb-eyebrow { font-size:10px; font-weight:700; letter-spacing:.1em; color:var(--brand-ink); }
.pb-x { flex:0 0 auto; width:40px; height:40px; border:1px solid var(--border); background:var(--surface); border-radius:10px; color:var(--text-secondary); cursor:pointer; font-size:17px; display:inline-flex; align-items:center; justify-content:center; }
.pb-x:hover { background:var(--surface-raised); }
.pb-drawer-body { flex:1 1 auto; overflow-y:auto; padding:18px 20px; display:flex; flex-direction:column; gap:18px; }
.pb-drawer-foot { flex:0 0 auto; display:flex; align-items:center; gap:10px; padding:14px 20px; background:var(--surface); border-top:1px solid var(--border); }
.pb-flag { display:flex; align-items:flex-start; gap:9px; padding:11px 13px; border:1px solid var(--pbd,var(--warning-bd)); background:var(--pbg,var(--warning-bg)); border-radius:10px; font-size:12.5px; line-height:1.5; color:var(--pc,var(--warning-fg)); }
.pb-flag svg { flex:0 0 auto; margin-top:1px; width:15px; height:15px; }
.pb-facts { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:4px 16px; }
.pb-fact { display:flex; align-items:flex-start; gap:14px; padding:12px 0; border-bottom:1px solid var(--bg); }
.pb-fact:last-child { border-bottom:none; }
.pb-fact-k { flex:0 0 116px; display:flex; align-items:center; gap:8px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); }
.pb-fact-k svg { width:15px; height:15px; color:#85C5C4; flex:0 0 auto; }
.pb-fact-v { flex:1 1 auto; min-width:0; font-size:13.5px; color:var(--text-primary); line-height:1.5; }
.pb-fact-v b { font-weight:600; display:block; }
.pb-fact-v span { display:block; font-size:12.5px; color:var(--text-secondary); margin-top:2px; }
.pb-chain { display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; }
.pb-chain-step { display:flex; align-items:center; gap:11px; padding:5px 0; font-size:13px; color:var(--text-muted); }
.pb-chain-step i { flex:0 0 auto; width:18px; height:18px; border-radius:50%; border:2px solid var(--border-strong); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; }
.pb-chain-step i::after { content:""; width:6px; height:6px; border-radius:50%; background:var(--border-strong); }
.pb-chain-step.is-done { color:var(--text-secondary); font-weight:600; }
.pb-chain-step.is-done i { border-color:var(--st-proj-fg); background:var(--st-proj-fg); }
.pb-chain-step.is-done i::after { background:var(--surface); }
.pb-chain-step.is-cur { color:var(--text-primary); font-weight:700; }
.pb-chain-step.is-cur i { border-color:var(--link); background:var(--st-gep-bg); }
.pb-chain-step.is-cur i::after { background:var(--st-gep-fg); }
.pb-chain-step.is-cancel { color:var(--danger-fg); font-weight:700; }
.pb-chain-step.is-cancel i { border-color:var(--danger-fg); background:var(--danger-fg); }
.pb-chain-step.is-cancel i::after { background:var(--surface); }
.pb-cur-tag { font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--brand-ink); background:rgba(133,197,196,.18); padding:2px 8px; border-radius:999px; }
.pb-states { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.pb-state { background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:11px 12px; }
.pb-state-k { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin-bottom:6px; }
.pb-state-v { display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--pc); }
.pb-state-v::before { content:""; width:7px; height:7px; border-radius:50%; background:var(--pc); }
.pb-intern { margin-top:6px; font-size:10px; font-weight:700; letter-spacing:.04em; color:var(--st-oph-fg); }
.pb-box { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:14px 16px; display:flex; flex-direction:column; gap:10px; }
.pb-box-sep { display:flex; align-items:center; gap:8px; margin-top:2px; padding-top:11px; border-top:1px dashed var(--border); font-size:12px; color:var(--text-muted); }
.pb-mv { display:flex; align-items:center; gap:11px; }
.pb-mv > div { flex:1 1 auto; min-width:0; }
.pb-mv b { display:block; font-weight:600; font-size:13px; color:var(--text-primary); }
.pb-mv span { display:block; font-size:12px; color:var(--text-secondary); }
.pb-hist { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:6px 16px; }
.pb-hist-row { display:flex; align-items:flex-start; gap:12px; padding:9px 0; border-bottom:1px solid var(--border); }
.pb-hist-row:last-child { border-bottom:none; }
.pb-hist-row b { flex:0 0 64px; font-size:11.5px; font-weight:600; color:var(--text-secondary); }
.pb-hist-row span { flex:1 1 auto; font-size:12.5px; color:var(--text-secondary); line-height:1.45; }
.pb-notebox { background:var(--surface); border:1px solid var(--border); border-radius:11px; padding:12px 14px; }
.pb-notebox b { display:block; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.03em; color:var(--text-muted); margin-bottom:5px; }
.pb-notebox p { margin:0; font-size:13px; color:var(--text-primary); line-height:1.55; white-space:pre-wrap; }
.pb-notebox--intern { background:#FBF7EE; border-color:#EBDCB6; }
.pb-notebox--intern b { color:#9A7A2E; }
.pb-notebox--intern p { color:#5A4E2E; }
.pb-ctx { position:fixed; z-index:59; min-width:210px; background:var(--surface); border:1px solid var(--border-strong); border-radius:11px; box-shadow:0 18px 44px -18px rgba(0,0,0,.55); padding:6px; animation:pbFade .12s ease both; }
.pb-ctx-head { padding:7px 10px 8px; border-bottom:1px solid var(--border); margin-bottom:4px; }
.pb-ctx-head b { display:block; font-family:var(--pb-font); font-weight:700; font-size:12px; color:var(--text-primary); }
.pb-ctx-head span { display:block; font-size:11px; color:var(--text-secondary); }
.pb-ctx-item { display:flex; align-items:center; gap:9px; width:100%; text-align:left; padding:9px 10px; border:none; border-radius:7px; background:transparent; color:var(--text-primary); font-size:13px; font-weight:600; cursor:pointer; text-decoration:none; }
.pb-ctx-item:hover { background:var(--surface-raised); }
.pb-ctx-item.is-danger { color:var(--danger-fg); }
.pb-ctx-scrim { position:fixed; inset:0; z-index:58; }
.pb-preview { position:fixed; z-index:57; width:250px; background:var(--surface); border:1px solid var(--border-strong); border-radius:11px; box-shadow:0 18px 44px -20px rgba(0,0,0,.5); padding:12px 13px; pointer-events:none; animation:pbFade .1s ease both; }
.pb-preview b { display:block; font-family:var(--pb-font); font-weight:700; font-size:12.5px; color:var(--brand-ink); margin-bottom:8px; }
.pb-preview-rows { display:grid; grid-template-columns:66px 1fr; gap:4px 10px; font-size:11.5px; color:var(--text-secondary); line-height:1.35; }
.pb-preview-rows span:nth-child(odd) { font-size:11px; font-weight:600; }
.pb-preview-foot { margin-top:9px; padding-top:8px; border-top:1px solid var(--border); font-size:10.5px; color:var(--text-muted); }
.pb-cc-tabs { flex:0 0 auto; display:flex; gap:4px; padding:10px 16px; background:var(--surface); border-bottom:1px solid var(--border); overflow-x:auto; }
.pb-cc-tab { display:inline-flex; align-items:center; gap:7px; height:36px; padding:0 13px; border:none; border-radius:9px; background:transparent; color:var(--text-secondary); font-size:13px; font-weight:600; cursor:pointer; white-space:nowrap; }
.pb-cc-tab[aria-selected="true"] { background:var(--text-primary); color:var(--surface); }
.pb-cc-tab small { font-size:10px; font-weight:700; color:var(--brand-ink); background:var(--brand-soft); padding:1px 7px; border-radius:999px; }
.pb-exc { background:var(--surface); border:1px solid var(--border); border-left:3px solid var(--warning-fg); border-radius:12px; padding:14px 15px; }
.pb-exc-top { display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.pb-exc-top b { font-family:var(--pb-font); font-weight:700; font-size:12.5px; color:var(--text-secondary); }
.pb-exc-top span { font-size:12.5px; font-weight:600; color:var(--text-primary); }
.pb-exc-what { font-size:13px; font-weight:600; color:var(--warning-fg); line-height:1.45; }
.pb-exc-grid { display:grid; grid-template-columns:62px 1fr; gap:4px 10px; margin-top:8px; font-size:12px; color:var(--text-secondary); line-height:1.45; }
.pb-exc-grid b { font-weight:700; }
.pb-map { position:relative; height:150px; background:repeating-linear-gradient(45deg,var(--surface-raised),var(--surface-raised) 10px,var(--surface) 10px,var(--surface) 20px); display:flex; align-items:center; justify-content:center; text-align:center; color:var(--text-secondary); font-size:12px; padding:0 16px; }
.pb-map p { margin:0; max-width:460px; }
.pb-dialog-wrap { position:fixed; inset:0; z-index:60; background:rgba(20,32,38,.55); backdrop-filter:blur(2px); -webkit-backdrop-filter:blur(2px); animation:pbFade .2s ease both; display:flex; align-items:flex-start; justify-content:center; padding:clamp(16px,4vh,48px) 16px; overflow-y:auto; }
.pb-dialog { width:100%; max-width:760px; background:var(--bg); border-radius:18px; overflow:hidden; box-shadow:0 40px 100px -30px rgba(0,0,0,.6); animation:pbSheet .3s cubic-bezier(.2,.75,.25,1) both; display:flex; flex-direction:column; }
.pb-dialog--sm { max-width:440px; }
.pb-dialog-head { flex:0 0 auto; display:flex; align-items:flex-start; gap:12px; padding:20px 24px; background:linear-gradient(180deg,#26383F 0%,#223038 100%); color:#F2F7F7; }
.pb-dialog-head > div { flex:1 1 auto; min-width:0; }
.pb-dialog-head h2 { margin:0; font-family:var(--pb-font); font-weight:700; font-size:19px; letter-spacing:-.01em; color:#F2F7F7; }
.pb-dialog-head p { margin:5px 0 0; font-size:13px; color:rgba(234,241,241,.7); }
.pb-dialog-head .pb-x { border-color:rgba(255,255,255,.14); background:rgba(255,255,255,.06); color:#EAF1F1; }
.pb-dialog-body { flex:1 1 auto; overflow-y:auto; padding:22px 24px; display:flex; flex-direction:column; gap:18px; }
.pb-dialog-foot { flex:0 0 auto; display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px 24px; background:var(--surface); border-top:1px solid var(--border); }
.pb-dialog-err { flex:1 1 auto; min-width:120px; font-size:12.5px; color:var(--danger-fg); }
.pb-steps { display:flex; flex-wrap:wrap; align-items:center; gap:6px; }
.pb-step { font-size:10px; font-weight:700; letter-spacing:.04em; padding:3px 9px; border-radius:999px; background:var(--surface-raised); color:var(--text-muted); white-space:nowrap; }
.pb-step.is-on { background:var(--text-primary); color:var(--surface); }
.pb-checks { display:flex; flex-direction:column; gap:6px; }
.pb-checkrow { display:flex; align-items:flex-start; gap:9px; font-size:12.5px; }
.pb-checkrow i { flex:0 0 auto; margin-top:4px; width:9px; height:9px; border-radius:50%; background:var(--pc); box-shadow:0 0 0 3px var(--pbg); }
.pb-checkrow em { flex:0 0 auto; width:66px; font-style:normal; font-size:10.5px; font-weight:800; letter-spacing:.04em; color:var(--pc); padding-top:1px; }
.pb-checkrow b { font-weight:600; color:var(--text-primary); }
.pb-checkrow span { color:var(--text-muted); }
.pb-tp-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px 16px; }
.pb-tp-grid > div > span:first-child { display:block; font-size:10.5px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); }
.pb-tp-grid > div > span:last-child { font-size:12.5px; color:var(--text-secondary); }
.pb-tp-grid > div > span.is-strong { font-weight:600; color:var(--text-primary); }
.pb-tp-cols { display:grid; grid-template-columns:minmax(330px,1fr) minmax(400px,1.4fr); gap:14px; align-items:start; }
.pb-sect { border:1px solid var(--border); border-radius:14px; background:var(--surface); overflow:hidden; min-width:0; }
.pb-sect--brand { border-color:var(--brand); }
.pb-sect-head { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:11px 14px; background:var(--surface-raised); border-bottom:1px solid var(--border); }
.pb-sect--brand > .pb-sect-head { background:var(--brand-soft); padding:11px 16px; }
.pb-sect-head h3 { margin:0; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:var(--text-secondary); }
.pb-sect-count { font-size:11px; font-weight:700; color:var(--pc,var(--warning-fg)); background:var(--pbg,var(--warning-bg)); padding:1px 8px; border-radius:999px; }
.pb-sect-body { display:flex; flex-direction:column; gap:10px; padding:12px; }
.pb-sect-body--pad { padding:14px 16px; gap:12px; }
.pb-tp-item { border:1px solid var(--border-strong); border-radius:12px; padding:11px 12px; display:flex; flex-direction:column; gap:7px; background:var(--bg); }
.pb-tp-item.is-sel { border-color:var(--brand); }
.pb-tp-item-top { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.pb-tp-item-top b { font-size:13px; color:var(--text-primary); }
.pb-tp-move { font-size:11px; font-weight:600; color:var(--text-secondary); background:var(--surface-raised); padding:2px 8px; border-radius:999px; }
.pb-tp-item .pb-co { font-size:12.5px; font-weight:600; color:var(--text-primary); }
.pb-tp-item .pb-ln { font-size:12px; color:var(--text-secondary); }
.pb-tp-item .pb-ln--mut { font-size:11.5px; color:var(--text-muted); }
.pb-route { border:1px solid var(--border); border-radius:12px; overflow:hidden; background:var(--bg); }
.pb-route-head { display:flex; flex-wrap:wrap; align-items:center; gap:9px; padding:10px 13px; background:var(--surface-raised); border-bottom:1px solid var(--border); }
.pb-route-head b { font-size:13px; color:var(--text-primary); }
.pb-route-head span { font-size:11.5px; color:var(--text-secondary); }
.pb-route-tag { font-size:11px; font-weight:700; color:var(--text-secondary); background:var(--surface); border:1px solid var(--border-strong); padding:2px 9px; border-radius:999px; }
.pb-stop { display:flex; align-items:flex-start; gap:10px; padding:10px 0; border-bottom:1px solid var(--border); }
.pb-stop-seq { flex:0 0 auto; width:22px; height:22px; border-radius:50%; background:var(--text-primary); color:var(--surface); font-size:11px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; }
.pb-stop-body { flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pb-stop-top { display:flex; flex-wrap:wrap; align-items:center; gap:7px; }
.pb-stop-top b { font-size:12.5px; color:var(--text-primary); }
.pb-stop-top span { font-size:12px; color:var(--text-secondary); }
.pb-stop .pb-ln { font-size:11.5px; color:var(--text-secondary); }
.pb-stop .pb-ln--mut { font-size:11px; color:var(--text-muted); }
.pb-fields { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pb-field label { display:block; font-size:12.5px; font-weight:600; color:var(--text-secondary); margin-bottom:6px; }
.pb-field .pb-err { margin:6px 0 0; font-size:12px; color:var(--danger-fg); }
.pb-radio { height:40px; padding:0 15px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); color:var(--text-secondary); font-size:13px; font-weight:600; cursor:pointer; transition:all .12s ease; }
.pb-radio[aria-checked="true"] { border-color:var(--text-primary); background:var(--text-primary); color:var(--surface); }
.pb-result-ok { background:rgba(78,145,102,.08); border:1px solid rgba(78,145,102,.3); border-radius:12px; padding:14px 16px; font-size:13px; line-height:1.55; color:#35604A; }
.pb-result-badge { flex:0 0 auto; width:52px; height:52px; border-radius:50%; background:rgba(78,145,102,.14); color:var(--st-proj-fg); display:inline-flex; align-items:center; justify-content:center; }
.pb-mnav-scrim { position:fixed; inset:0; z-index:40; background:rgba(20,32,38,.5); animation:pbFade .2s ease both; }
.pb-mnav { position:fixed; top:0; left:0; bottom:0; z-index:41; width:82vw; max-width:300px; display:flex; flex-direction:column; background:linear-gradient(180deg,#26383F 0%,#1E2E35 100%); animation:pbSlideR .26s cubic-bezier(.2,.75,.25,1) both; }
.pb-mnav .pb-side-head { min-height:0; }
.pb-mnav .pb-nav-btn { padding:13px 12px; font-size:15px; }
.pb-mnav-x { width:40px; height:40px; border:none; background:rgba(255,255,255,.06); border-radius:9px; color:#EAF1F1; cursor:pointer; font-size:18px; margin-left:auto; }
.pb-danger-ico { width:38px; height:38px; border-radius:10px; background:var(--danger-bg); color:var(--danger-fg); display:inline-flex; align-items:center; justify-content:center; }
.pb-menu-btn { flex:0 0 auto; width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border:1px solid var(--border); border-radius:10px; background:var(--surface); color:var(--text-primary); cursor:pointer; }
.pb-menu-btn svg { width:20px; height:20px; }
.pb-only-desktop { display:none; }

@media (min-width:768px) { .pb-side { display:flex; } .pb-menu-btn, .pb-head-logo { display:none; } .pb-only-desktop { display:inline-flex; } }
@media (max-width:1079px) and (min-width:768px) { .pb { --pb-side-w:76px; } .pb-side-brand, .pb-nav-lbl, .pb-nav-badge, .pb-side-foot > div, .pb-side-foot-go, .pb-nav-group { display:none; } .pb-nav-btn { justify-content:center; padding:11px 0; } .pb-side-foot { justify-content:center; } }
@media (max-width:1079px) { .pb-toolbar { flex-wrap:wrap; } .pb-primary-lbl { display:none; } }
@media (max-width:1399px) { .pb-tb-hide-md { display:none; } }
@media (max-width:1199px) { .pb-tab-lbl { display:none; } }
@media (max-width:1319px) { .pb-tb-lbl { display:none; } }
@media (max-width:1539px) { .pb-range { display:none; } }
@media (max-width:767px) { .pb-head-titles p, .pb-actor-txt, .pb-cc-btn { display:none; } .pb-toolbar .pb-search { flex:1 1 100%; max-width:none; order:-1; } .pb-list-head { display:none; } .pb-list-row { grid-template-columns:1fr; gap:6px; } .pb-doc-head { display:none; } .pb-doc-row { grid-template-columns:1fr; gap:6px; } .pb-tp-cols { grid-template-columns:1fr; } .pb-states { grid-template-columns:1fr; } .pb-fields { grid-template-columns:1fr; } .pb-dialog-wrap { padding:0; } .pb-dialog { border-radius:0; min-height:100dvh; } }
@media (max-width:619px) { .pb-primary-lbl { display:none; } }

/* ==========================================================================
   COMPAT-LAAG — bestaande operationele schermen binnen de bevroren shell
   ========================================================================== */
.pb-skin { font-family:var(--pb-body); color:var(--text-primary); }
.pb-skin h1, .pb-skin h2, .pb-skin h3 { font-family:var(--pb-font); color:var(--text-primary); }
.pb-skin .muted { color:var(--text-muted); }
.pb-skin .hw-pagehead { margin-bottom:16px; }
.pb-skin .hw-pagehead h1 { display:none; }
.pb-skin .hw-pagehead .ph-sub { display:none; }
.pb-skin .ph-crumb { display:flex; flex-wrap:wrap; gap:6px; font-size:12px; color:var(--text-muted); margin-bottom:8px; }
.pb-skin .ph-crumb a { color:var(--link); }
.pb-skin .ph-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; }
.pb-skin .ph-actions { display:none; } /* acties staan in de shell-werkbalk (pageHeader) */
.pb-toolbar .btn { height:40px; }
.pb-skin .ph-meta { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.pb-skin .hw-fact { display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--text-secondary); background:var(--surface); border:1px solid var(--border); border-radius:999px; padding:4px 10px; }
.pb-skin .card, .pb-skin .hw-card, .pb-skin .hw-toolbar, .pb-skin .table-wrap, .pb-skin .hw-tile, .pb-skin .hw-list, .pb-skin .hw-empty, .pb-skin .machine-card { background:var(--surface); border:1px solid var(--border); border-radius:14px; box-shadow:none; color:var(--text-primary); }
.pb-skin .hw-card-head, .pb-skin .hw-section-head, .pb-skin .section-head { color:var(--text-primary); }
.pb-skin .hw-section-head h2, .pb-skin .section-head h2 { font-family:var(--pb-font); font-size:14px; font-weight:700; }
.pb-skin .hw-tile .t-num { font-family:var(--pb-font); color:var(--text-primary); }
.pb-skin .hw-tile .t-lbl, .pb-skin .hw-tile .t-hint { color:var(--text-secondary); }
.pb-skin .btn { min-height:42px; padding:8px 16px; border-radius:10px; font-size:13.5px; font-weight:600; border:1px solid var(--border-strong); background:var(--surface); color:var(--text-primary); }
.pb-skin .btn:hover:not(:disabled) { background:var(--surface-raised); }
.pb-skin .btn-primary { background:var(--text-primary); color:var(--surface); border-color:var(--text-primary); font-weight:700; }
.pb-skin .btn-primary:hover:not(:disabled) { background:var(--text-primary); filter:brightness(1.1); }
.pb-skin .btn-cta { background:var(--action); color:#1A2830; border-color:var(--action); font-weight:700; }
.pb-skin .btn-cta:hover:not(:disabled) { background:var(--action); filter:brightness(1.05); }
.pb-skin .btn-secondary { background:var(--surface); border-color:var(--border-strong); color:var(--text-primary); }
.pb-skin .btn-ghost { background:transparent; border-color:transparent; color:var(--link); text-decoration:none; }
.pb-skin .btn-danger { background:var(--danger-fg); color:#fff; border-color:var(--danger-fg); }
.pb-skin .btn-danger-outline { background:var(--surface); border-color:var(--danger-fg); color:var(--danger-fg); }
.pb-skin .btn-outline-light { border-color:var(--border-strong); color:var(--text-secondary); background:var(--surface); }
.pb-skin .btn-sm { min-height:36px; padding:6px 12px; font-size:12.5px; }
.pb-skin .btn-xs { min-height:30px; padding:4px 10px; font-size:11.5px; border-radius:8px; }
.pb-skin .badge { font-size:11.5px; font-weight:600; padding:3px 9px; border-radius:999px; border:1px solid transparent; }
.pb-skin .badge-neutral { background:var(--surface-raised); color:var(--text-secondary); border-color:var(--border); }
.pb-skin .badge-info, .pb-skin .badge-electric { background:var(--st-gep-bg); color:var(--st-gep-fg); }
.pb-skin .badge-warn { background:var(--warning-bg); color:var(--warning-fg); }
.pb-skin .badge-err { background:var(--danger-bg); color:var(--danger-fg); }
.pb-skin .badge-ok { background:var(--success-bg); color:var(--success-fg); }
.pb-skin .notice { border-radius:10px; font-size:12.5px; }
.pb-skin .notice-info { background:var(--brand-soft); border-color:var(--brand); color:var(--brand-ink); }
.pb-skin .notice-warn { background:var(--warning-bg); border-color:var(--warning-bd); color:var(--warning-fg); }
.pb-skin .notice-err { background:var(--danger-bg); border-color:var(--danger-fg); color:var(--danger-fg); }
.pb-skin .notice-ok { background:var(--success-bg); border-color:var(--ok-bd); color:var(--success-fg); }
.pb-skin .field label { font-size:12.5px; font-weight:600; color:var(--text-secondary); }
.pb-skin .field .hint { color:var(--text-muted); }
.pb-skin input:not([type=checkbox]):not([type=radio]):not([type=file]), .pb-skin select, .pb-skin textarea { border:1px solid var(--border-strong); border-radius:9px; background:var(--field); color:var(--text-primary); font-family:inherit; font-size:14px; min-height:44px; padding:0 12px; }
.pb-skin textarea { padding:10px 12px; min-height:74px; }
.pb-skin input:focus, .pb-skin select:focus, .pb-skin textarea:focus { border-color:#85C5C4; box-shadow:0 0 0 3px rgba(133,197,196,.28); outline:none; }
/* §G item 5: de compatregel hierboven (specificiteit 0,4,1) overschreef de
   36px linkerpadding van het zoekveld (.pb-search input = 0,1,1), waardoor het
   zoekicoon over de placeholder stond. Zelfde specificiteitsklasse, later in
   het bestand, dus wint dit voor het zoekveld. */
.pb-skin .pb-search input:not([hidden]):not([type=checkbox]):not([type=radio]) { padding:0 12px 0 36px; height:42px; min-height:42px; }
.pb-skin .field-error { color:var(--danger-fg); font-size:12px; }
.pb-skin .hw-toolbar { padding:12px; }
.pb-skin .hw-toolbar .field label { font-size:11px; letter-spacing:.05em; color:var(--text-secondary); }
.pb-skin .table { color:var(--text-primary); }
.pb-skin .table th { background:var(--surface-raised); color:var(--text-secondary); font-size:11.5px; text-transform:uppercase; letter-spacing:.05em; border-bottom:1px solid var(--border); }
.pb-skin .table td { border-bottom:1px solid var(--bg); font-size:13px; }
.pb-skin .table tr:hover td { background:var(--surface-raised); }
.pb-skin .rowlink { border:1px solid var(--border); border-radius:12px; background:var(--surface); color:var(--text-primary); }
.pb-skin .rowlink:hover { background:var(--surface-raised); }
.pb-skin .rowlink .sub { color:var(--text-secondary); }
.pb-skin .hw-list .it-title { color:var(--text-primary); }
.pb-skin .hw-list .it-meta, .pb-skin .hw-list .it-trail { color:var(--text-secondary); }
.pb-skin .hw-list a, .pb-skin .hw-list .it-body { color:inherit; }
.pb-skin .hw-empty { border-style:dashed; color:var(--text-secondary); }
.pb-skin .skel { background:var(--surface-raised); border-radius:12px; }
.pb-skin .dl-row dt { color:var(--text-secondary); }
.pb-skin .dl-row dd { color:var(--text-primary); }
.pb-skin .modal { background:var(--bg); color:var(--text-primary); border-radius:18px; box-shadow:0 40px 100px -30px rgba(0,0,0,.6); }
.pb-skin .modal h2 { font-family:var(--pb-font); }
.pb-skin .modal-backdrop { background:rgba(20,32,38,.55); backdrop-filter:blur(2px); }
.pb-skin .job-tag { font-size:11px; font-weight:700; border-radius:999px; padding:2px 8px; background:var(--st-gep-bg); color:var(--st-gep-fg); }
.pb-skin .job-tag-pickup { background:var(--st-oph-bg); color:var(--st-oph-fg); }
.pb-skin .job-tag-idle { background:var(--surface-raised); color:var(--text-muted); }
.pb-skin .task-assign { min-height:36px; font-size:12.5px; }
.pb-skin .grid { gap:12px; }
.pb-skin a { color:var(--link); }

/* ==========================================================================
   MACHINEBEHEER — productkaarten (ProductMedia 4:3 wit), assetrijen, taken
   ========================================================================== */
.mb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; }
.mb-pcard { cursor:pointer; background:var(--surface); border:1px solid var(--border); border-radius:14px; overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .15s ease,transform .15s ease; }
.mb-pcard:hover { box-shadow:0 14px 30px -18px var(--shadow); transform:translateY(-2px); }
.mb-pcard:focus-visible { outline:none; box-shadow:0 0 0 3px var(--brand-soft); }
.mb-media { position:relative; aspect-ratio:4 / 3; background:#FFFFFF; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.mb-media img { width:100%; height:100%; object-fit:contain; padding:10px; }
.mb-media .kp-prod-fallback { color:#B7C2C7; display:inline-flex; }
.mb-media--lg { border:1px solid var(--border); border-radius:12px; }
.mb-media-tag { position:absolute; top:10px; left:10px; font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--brand-ink); background:var(--brand-soft); padding:3px 8px; border-radius:6px; }
.mb-pbody { padding:13px 14px 15px; display:flex; flex-direction:column; gap:8px; flex:1 1 auto; }
.mb-pname { font-weight:700; font-size:14px; color:var(--text-primary); line-height:1.3; }
.mb-pmeta { display:flex; align-items:center; gap:8px; margin-top:4px; font-size:12px; color:var(--text-secondary); }
.mb-specs { display:flex; flex-wrap:wrap; gap:6px 12px; font-size:12px; color:var(--text-secondary); }
.mb-pfoot { font-size:11.5px; color:var(--text-muted); border-top:1px solid var(--border); padding-top:9px; }
.mb-arow { cursor:pointer; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:12px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; transition:box-shadow .15s ease; }
.mb-arow:hover { box-shadow:0 10px 24px -16px var(--shadow); }
.mb-arow:focus-visible { outline:none; box-shadow:0 0 0 3px var(--brand-soft); }
.mb-arow-id { display:flex; align-items:center; gap:12px; flex:1 1 240px; min-width:0; }
.mb-athumb { flex:0 0 auto; width:44px; height:44px; border-radius:9px; background:var(--surface-raised); display:inline-flex; align-items:center; justify-content:center; overflow:hidden; }
.mb-athumb img { width:100%; height:100%; object-fit:contain; padding:4px; }
.mb-athumb .kp-prod-fallback svg { width:26px; height:26px; }
.mb-arow-pills { display:flex; flex-wrap:wrap; align-items:center; gap:6px; flex:2 1 300px; }
/* Werkplaats — gereedheidstegels als filter */
.pb-kpi-btn { border:1px solid var(--border); border-radius:12px; background:var(--surface); padding:11px 14px; display:flex; align-items:center; gap:10px; width:100%; text-align:left; cursor:pointer; font:inherit; color:inherit; transition:box-shadow .15s ease, border-color .15s ease; }
.pb-kpi-btn:hover { border-color:var(--border-strong); }
.pb-kpi-btn[aria-pressed="true"] { border-color:var(--brand-ink); box-shadow:0 0 0 2px var(--brand-soft); }
.pb-kpi-btn:focus-visible { outline:none; box-shadow:0 0 0 3px var(--brand-soft); }
/* Materieel — lijst per categorie (producten) en groepen per type (assets) */
.mb-group { margin:0; }
.mb-group + .mb-group { margin-top:14px; }
.mb-group-h { display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size:13.5px; font-weight:700; color:var(--text-primary); }
.mb-group-h > span:not(.mb-athumb) { font-weight:600; color:var(--text-muted); font-size:12px; }
.mb-group-h > .pb-mono { color:var(--text-secondary); font-size:12px; }
details.mb-group > summary { cursor:pointer; list-style:none; padding:8px 12px; border-radius:10px; background:var(--surface-raised); border:1px solid var(--border); }
details.mb-group > summary::-webkit-details-marker { display:none; }
details.mb-group > summary::before { content:"\203A"; display:inline-block; width:12px; color:var(--text-muted); transition:transform .15s ease; }
details.mb-group[open] > summary::before { transform:rotate(90deg); }
details.mb-group > summary .mb-athumb { width:34px; height:34px; border-radius:7px; background:var(--surface); }
.mb-rows { display:flex; flex-direction:column; gap:8px; }
details.mb-group > .mb-rows { margin-top:8px; padding-left:6px; }
.mb-prow { cursor:pointer; background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:10px 14px; display:flex; flex-wrap:wrap; align-items:center; gap:8px 16px; transition:box-shadow .15s ease; }
.mb-prow:hover { box-shadow:0 10px 24px -16px var(--shadow); }
.mb-prow:focus-visible { outline:none; box-shadow:0 0 0 3px var(--brand-soft); }
.mb-prow-main { flex:1 1 260px; min-width:0; }
.mb-prow-name { font-weight:700; font-size:13.5px; }
.mb-prow-meta { display:flex; flex-wrap:wrap; gap:4px 12px; font-size:12px; color:var(--text-secondary); margin-top:2px; }
.mb-prow-pills { display:flex; flex-wrap:wrap; align-items:center; gap:6px; flex:0 1 auto; }
.mb-prow-foot { font-size:11.5px; color:var(--text-muted); text-align:right; flex:0 0 auto; line-height:1.4; }
.mb-arow-asg { flex:1 1 200px; min-width:0; font-size:12.5px; color:var(--text-secondary); }
.mb-trow { border-left:3px solid var(--pc); }

/* ==========================================================================
   NIEUWE RESERVERING — frozen telephone-booking dialog (slice G5)
   ========================================================================== */
.pb-select--full { width:100%; height:44px; }
.pb-input.is-invalid, .pb-select.is-invalid { border-color:var(--danger-fg); }
.pb-fs { border:none; margin:0; padding:0; min-width:0; }
.pb-fs legend { display:flex; align-items:center; gap:9px; padding:0; margin:0 0 14px; font-family:var(--pb-font); font-size:13px; font-weight:700; letter-spacing:.02em; color:var(--text-primary); }
.pb-fs legend::before { content:""; width:4px; height:15px; border-radius:3px; background:var(--brand); }
.pb-fs-body { display:flex; flex-direction:column; gap:16px; }
.pb-bk-lblrow { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.pb-bk-lblrow label, .pb-bk-lbl { font-size:12.5px; font-weight:600; color:var(--text-secondary); }
.pb-bk-lbl { display:block; margin-bottom:6px; }
.pb-linkbtn { border:none; background:none; color:var(--link); font-family:inherit; font-size:12px; font-weight:600; cursor:pointer; padding:2px 4px; }
.pb-req { color:var(--danger-fg); }
.pb-bk-machine { display:grid; grid-template-columns:2fr 1fr; gap:12px; }
.pb-bk-grid2 { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.pb-bk-grid2--tight { gap:10px; }
.pb-bk-grid3 { display:grid; grid-template-columns:2fr 1fr 1.4fr; gap:12px; }
.pb-bk-hint { font-size:11.5px; color:var(--text-muted); margin-top:6px; line-height:1.45; }
.pb-chips { display:flex; flex-wrap:wrap; gap:8px; }
.pb-chip { display:inline-flex; align-items:center; gap:7px; height:38px; padding:0 13px; border:1px solid var(--border-strong); border-radius:999px; background:var(--surface); color:var(--text-primary); font-family:inherit; font-size:13px; font-weight:500; cursor:pointer; transition:all .12s ease; }
.pb-chip i { width:15px; height:15px; border-radius:4px; border:1.5px solid var(--border-strong); background:var(--surface); display:inline-flex; align-items:center; justify-content:center; color:#1A2830; font-style:normal; font-size:11px; }
.pb-chip[aria-pressed="true"] { border-color:var(--brand); background:var(--brand-soft); }
.pb-chip[aria-pressed="true"] i { border-color:var(--brand); background:var(--brand); }
.pb-seggroup { display:inline-flex; padding:3px; border:1px solid var(--border-strong); border-radius:10px; background:var(--surface); }
.pb-seggroup .pb-radio { height:36px; padding:0 16px; border:none; border-radius:8px; background:transparent; }
.pb-seggroup .pb-radio[aria-checked="true"] { background:var(--text-primary); color:var(--surface); }
.pb-textarea { width:100%; padding:10px 12px; border:1px solid var(--border-strong); border-radius:9px; background:var(--surface); color:var(--text-primary); font-family:inherit; font-size:14px; outline:none; resize:vertical; min-height:74px; }
.pb-textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(133,197,196,.28); }
.pb-input--intern { border-color:#EBDCB6; background:#FBF7EE; color:#5A4E2E; }
.pb-input--intern:focus { border-color:#D9BE72; box-shadow:0 0 0 3px rgba(217,190,114,.28); }
.pb-tag-intern { font-size:9.5px; font-weight:700; color:var(--st-oph-fg); margin-left:6px; }
.pb-avail { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:16px; }
.pb-avail-top { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; }
.pb-avail-top b { display:block; font-family:var(--pb-font); font-size:13px; font-weight:700; color:var(--text-primary); }
.pb-avail-top span { display:block; font-size:12px; color:var(--text-secondary); margin-top:2px; }
.pb-avail-btn { height:40px; padding:0 15px; border:1px solid var(--link); border-radius:10px; background:var(--surface); color:var(--link); font-family:inherit; font-size:13px; font-weight:600; cursor:pointer; }
.pb-avail-btn:hover:not(:disabled) { background:rgba(78,143,142,.10); }
.pb-avail-btn:disabled { background:var(--surface-raised); color:var(--text-muted); border-color:var(--border-strong); cursor:not-allowed; opacity:.7; }
.pb-avail-res { display:flex; align-items:flex-start; gap:10px; margin-top:13px; padding:12px 13px; border-radius:10px; background:var(--warning-bg); border:1px solid var(--warning-bd); }
.pb-avail-res.is-ok { background:var(--success-bg); border-color:var(--ok-bd); }
.pb-avail-res i { flex:0 0 auto; width:9px; height:9px; border-radius:50%; background:var(--warning-fg); margin-top:4px; }
.pb-avail-res.is-ok i { background:var(--success-fg); }
.pb-avail-res b { display:block; font-size:13px; font-weight:700; color:var(--warning-fg); }
.pb-avail-res.is-ok b { color:var(--success-fg); }
.pb-avail-res span { display:block; font-size:12.5px; color:var(--text-secondary); margin-top:3px; line-height:1.5; }
.pb-avail-res .pb-muted { display:inline; font-size:12px; font-weight:500; margin:0; }
.pb-bk-submit { height:46px; padding:0 22px; border:none; border-radius:10px; background:var(--action); color:#1A2830; font-family:inherit; font-size:14.5px; font-weight:700; cursor:pointer; box-shadow:0 10px 24px -12px rgba(255,106,26,.75); transition:filter .15s ease, transform .15s ease; }
.pb-bk-submit:hover:not(:disabled) { filter:brightness(1.05); transform:translateY(-1px); }
.pb-bk-submit:focus-visible { outline:3px solid var(--brand); outline-offset:2px; }
.pb-bk-submit:disabled { opacity:.75; cursor:default; }
.pb-result-head { display:flex; align-items:center; gap:14px; }
.pb-result-head h3 { margin:0; font-family:var(--pb-font); font-size:19px; font-weight:700; color:var(--text-primary); }
.pb-result-head p { margin:4px 0 0; font-size:13.5px; color:var(--text-secondary); }
.pb-result-rows { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:4px 16px; }
.pb-result-row { display:flex; align-items:flex-start; gap:14px; padding:12px 0; border-bottom:1px solid var(--bg); }
.pb-result-row:last-child { border-bottom-color:transparent; }
.pb-result-row > b { flex:0 0 150px; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--text-secondary); padding-top:2px; }
.pb-result-row > span { flex:1 1 auto; min-width:0; font-size:13.5px; font-weight:600; color:var(--text-primary); }
.pb-result-warn { display:flex; align-items:flex-start; gap:10px; padding:13px 15px; background:var(--warning-bg); border:1px solid var(--warning-bd); border-radius:12px; font-size:12.5px; line-height:1.55; color:var(--warning-fg); }
.pb-result-id { font-size:11.5px; color:var(--text-muted); }
.pb-result-id code { font-family:ui-monospace,"SF Mono",Menlo,monospace; color:var(--text-secondary); }
.pb-btn-row { display:flex; flex-wrap:wrap; gap:12px; margin-top:4px; }
.pb-btn--dark { background:var(--text-primary); color:var(--surface); border-color:var(--text-primary); }
@media (max-width:767px) { .pb-bk-machine, .pb-bk-grid2, .pb-bk-grid3 { grid-template-columns:1fr; } .pb-result-row { flex-direction:column; gap:4px; } .pb-result-row > b { flex:0 0 auto; } }
/* Mobiel (≤640px): een gewikkelde werkbalk van 150–210px mag de viewport niet blijven bezetten; hij scrolt mee.
   Aanraakdoelen in tabellen en segmentknoppen zijn minimaal 40px hoog. */
@media (max-width:640px) {
  .pb-toolbar { position:static; }
  .pb-skin .btn-xs, .pb-skin .btn-sm, .pb-btn--xs, .pb-btn--sm { min-height:40px; }
  .pb-btn--xs { height:auto; padding:8px 12px; }
  .pb-seg-btn { min-width:40px; height:40px; }
  .pb-kpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .pb-kpi { padding:12px 12px; }
}