/* vorio-base.css — Vorio gedeelde stijl. Backwards-compat: zowel --p (legacy) als --accent bestaan. Kantoor-kleuren worden overschreven via CSS-variabelen vanuit DB. */
@import "tokens.css";

/* Standaard color-scheme voor lichte modus (helpt form controls + scrollbars) */
/* Background ook op html: voorkomt witte flits bij overscroll-bounce (iOS/macOS Safari) */
html { color-scheme: light; background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-y: scroll }

/* SCROLLBAR (canoniek) — themed dunne bar op BEIDE assen (width+height); vervangt losse kopieën in offerte/debiteuren/portaal */
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border2);border-radius:var(--r-xs)}

/* FORM UTILITIES — canonical inline-style vervangers */
/* Kleine uppercase label boven een form-field */
.v-field-label{font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;display:block;margin-bottom:var(--space-1)}
.v-field-label--spaced{letter-spacing:.5px;margin-bottom:5px}

/* Text input: vaste hoogte (single-line). .v-select/.v-textarea krijgen bewust géén vaste height (mogen groeien; native-select descenders werden anders afgeklemd) */
.v-input{height:var(--ctrl-h)}
.v-input:disabled{opacity:.6;cursor:not-allowed}
.v-input[type=date]::-webkit-calendar-picker-indicator{background-image:url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 2v4M8 2v4m5-2h-2C7.229 4 5.343 4 4.172 5.172S3 8.229 3 12v2c0 3.771 0 5.657 1.172 6.828S7.229 22 11 22h2c3.771 0 5.657 0 6.828-1.172S21 17.771 21 14v-2c0-3.771 0-5.657-1.172-6.828S16.771 4 13 4M3 10h18'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center;background-size:15px;opacity:.55;cursor:pointer}

/* Layout utilities */
.v-mb-0{margin-bottom:0}
.v-gc-full{grid-column:1 / -1}
.v-flex-1-min0{flex:1;min-width:0}
.v-icon-inline{vertical-align:-2px;margin-right:5px}
/* Gedeelde inline-icoon presets (extractie uit handleiding.php — nul-visueel) */
.v-ico-dim{vertical-align:-1px;display:inline-block;opacity:.5}
.v-ico-dim65{vertical-align:-2px;display:inline-block;opacity:.65}
/* Mini-veldlabel (extractie uit akten.php) */
.v-lbl-mini{display:block;font-size:11px;font-weight:700;color:var(--text3);text-transform:uppercase;margin-bottom:5px}

/* iOS-stijl toggle-switch (label.v-switch > input.v-switch-input + span.v-switch-track) */
.v-switch {
  position: relative; display: inline-flex; align-items: center;
  width: 38px; height: 22px; flex-shrink: 0;
  cursor: pointer; vertical-align: middle;
}
.v-switch-input { position: absolute; opacity: 0; pointer-events: none; }
.v-switch-track {
  position: relative; flex-shrink: 0;
  width: 38px; height: 22px;
  background: color-mix(in srgb, var(--text3) 40%, transparent);
  border-radius:var(--r-pill);
  transition: background .18s ease;
}
.v-switch-thumb {
  position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: #fff;
  border-radius: 50%;
  box-shadow:var(--shadow);
  transition: transform .18s ease;
}
.v-switch-input:checked + .v-switch-track { background: var(--p); }
.v-switch-input:checked + .v-switch-track .v-switch-thumb { transform: translateX(16px); }
.v-switch-input:focus-visible + .v-switch-track { outline: 2px solid var(--p); outline-offset: 2px; }
.v-switch-input:disabled + .v-switch-track { opacity: .5; cursor: not-allowed; }
/* Kleiner variant (bv. dichtheid-toggle in het profielmenu) */
.v-switch--sm, .v-switch--sm .v-switch-track { width: 32px; height: 18px; }
.v-switch--sm .v-switch-thumb { width: 14px; height: 14px; }
.v-switch--sm .v-switch-input:checked + .v-switch-track .v-switch-thumb { transform: translateX(14px); }

/* Instelling-rij: titel + uitleg links, .v-switch rechts */
.v-tog-rij {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 14px var(--space-4);
  border:var(--bd); border-radius:var(--r);
  background: var(--bg2);
}
.v-tog-rij + .v-tog-rij { margin-top: 10px }
.v-tog-rij__tekst { flex: 1; min-width: 0 }
.v-tog-rij__titel { font-weight: 600; font-size: 13.5px; color: var(--text1) }
.v-tog-rij__uitleg { font-size: 12px; color: var(--text3); line-height: 1.55; margin-top: 2px }
/* Instelling niet beschikbaar (bijv. koppeling ontbreekt) */
.v-tog-rij.is-uit { opacity: .55 }

/* Toggle-cascade: .v-tog-rij die bij 'aan' een sub-paneel openvouwt */
.v-swc {
  border:var(--bd); border-radius:var(--r);
  background: var(--bg2); overflow: hidden;
}
.v-swc + .v-swc { margin-top: 10px }
.v-swc__kop {
  display: flex; align-items: center; gap: var(--space-3);
  padding: 14px var(--space-4); cursor: pointer; margin: 0;
}
.v-swc__tekst { flex: 1; min-width: 0 }
.v-swc__titel { display: block; font-weight: 600; font-size: 13.5px; color: var(--text1) }
.v-swc__uitleg { display: block; font-size: 12px; color: var(--text3); line-height: 1.55; margin-top: 2px }
/* Cascade: rij-hoogte 0fr → 1fr geeft een vloeiende open-/dichtvouw zonder JS */
.v-swc__body {
  display: grid; grid-template-rows: 0fr; opacity: 0;
  transition: grid-template-rows .28s ease, opacity .22s ease;
}
.v-swc__body > .v-swc__inner { overflow: hidden; min-height: 0 }
.v-swc__inner { padding: 0 var(--space-4) 14px }
.v-swc:has(.v-switch-input:checked) .v-swc__body { grid-template-rows: 1fr; opacity: 1 }

/* Inleidende regel boven de inhoud van een modal */
.v-modal__intro { font-size: 12.5px; color: var(--text3); line-height: 1.55; margin: 0 0 14px }

/* Segmented control (2-N opties, tab-stijl pick) */
.v-seg {
  display: inline-flex;
  background: var(--bg3);
  border:var(--bd);
  border-radius:var(--r-2);
  padding: 3px;
  font-family: inherit;
  width: max-content; /* niet rekken in grid/flex parent */
  max-width: 100%;
}
.v-seg-btn {
  padding: 0 var(--space-4); height:calc(var(--ctrl-h) - 8px); font-size: 12.5px; font-weight: 600;
  color: var(--text2); cursor: pointer; border: 0; background: transparent;
  border-radius:var(--r-sm); font-family: inherit; transition: color var(--t-base,.15s), background var(--t-base,.15s);
  display: inline-flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.v-seg-btn[aria-pressed="true"], .v-seg-btn.actief { background: var(--p); color: #fff; }
.v-seg-btn:not([aria-pressed="true"]):not(.actief):hover { color: var(--text1); }
.v-seg-btn:focus-visible { outline: 2px solid var(--p); outline-offset: 2px; }
.v-seg-btn svg { width: 14px; height: 14px; flex-shrink: 0; }
.v-seg--full{width:100%;display:flex}
.v-seg--full .v-seg-btn{flex:1;justify-content:center}

/* Range-slider met label/value */
.v-range-row { display: flex; align-items: center; gap: 14px; }
.v-range {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 4px;
  /* Track-fill via gradient stop op --v-range-pct (default 0%). JS-helper update --v-range-pct on input. */
  background: linear-gradient(to right,
  var(--p) 0%,
  var(--p) var(--v-range-pct, 0%),
  color-mix(in srgb, var(--text3) 25%, transparent) var(--v-range-pct, 0%),
  color-mix(in srgb, var(--text3) 25%, transparent) 100%);
  border-radius: 2px; outline: none; cursor: pointer;
  accent-color: var(--p); /* fallback voor browsers die de gradient niet kunnen toepassen */
}
.v-range::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: transparent; }
.v-range::-moz-range-track { height: 4px; border-radius: 2px; background: transparent; }
.v-range::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--p); }
.v-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; border: 2px solid var(--p);
  box-shadow:var(--shadow);
  cursor: pointer; margin-top: -7px;
  transition: transform var(--t-fast,.12s);
}
.v-range::-webkit-slider-thumb:hover, .v-range:active::-webkit-slider-thumb { transform: scale(1.1); }
.v-range::-moz-range-thumb {
  width: 14px; height: 14px; border-radius: 50%;
  background: #fff; border: 2px solid var(--p);
  box-shadow:var(--shadow); cursor: pointer;
}
.v-range:focus-visible { outline: 2px solid var(--p); outline-offset: 4px; border-radius: 2px; }
.v-range-val { font-size: 13.5px; font-weight: 600; color: var(--text1); min-width: 70px; text-align: right; }
.v-range-val small { color: var(--text3); font-weight: 400; font-size: 11px; margin-left: var(--space-1); }

/* Settings-card (container voor v-seg / v-range / v-switch rijen) */
.v-set-card {
  background: var(--bg2);
  border:var(--bd);
  border-radius:var(--r-card);
  padding: 18px 18px 20px;
  display: grid; gap: 18px;
}
.v-set-row { display: grid; gap: var(--space-2); }
.v-set-label { font-size: 11.5px; font-weight: 700; color: var(--text3); text-transform: uppercase; letter-spacing: .5px; }

/* Smooth thema-transitie (vermijdt flits bij toggle) */
html[data-theme-transition] body,
html[data-theme-transition] body * {
  /* onderdruk transitions tijdens de theme-switch -> kleuromslag in 1 paint, geen gefaseerde cascade */
  transition: none !important;
}

/* Reset & Base */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text1);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: geometricPrecision;
}
a { color: inherit; text-decoration: none }

/* Typografie */
h1 { font-size: 20px; font-weight: 800; letter-spacing: -.6px; margin-bottom: 3px; color: var(--text1) }
h2 { font-size: 16px; font-weight: 700; letter-spacing: -.4px; color: var(--text1) }
h3 { font-size: 14px; font-weight: 700; color: var(--text1) }

/* Kaarten */
/* Knoppen (.btn conventie) */
/* .btn varianten (admin.php / dossiers.html stijl) */
/* .btn gealiast op .v-btn (kern); variant-kleuren blijven per-surface. */
/* Badges */
.badge {
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  padding: 3px 10px; border-radius:var(--r-pill);
  font-size: 11px; font-weight: 600; line-height: 1.4;
  white-space: nowrap; border: 1px solid transparent;
}
.badge.groen,  .badge-groen,  .badge-ok { background: #e7f6ec; color: var(--green); border-color:transparent }
.badge.amber,  .badge-amber,  .badge.oranje, .badge-warn,.badge-wacht,.badge-herinnerd { background: #fdf3e0; color: #b45309; border-color:transparent }
.badge.rood,   .badge-rood,   .badge-err, .badge-verlopen { background: #fdecec; color: #c02929; border-color:transparent }
.badge.blauw,  .badge-blauw { background: #e8f0fd; color: var(--kc); border-color:transparent }
.badge.grijs,  .badge-grijs { background: #f1f5f9; color:#64748b; border-color:transparent }
.badge.paars   { background: color-mix(in srgb,var(--purple) 12%,transparent); color: var(--purple); border-color:transparent }
.badge.goud    { background: var(--goud-light); color: var(--goud2); border-color:transparent }
.badge-getekend { background: #e7f6ec; color: var(--green); border-color:transparent }

/* Badge dark-mode varianten */
html[data-theme="dark"] .badge.groen, html[data-theme="dark"] .badge-groen,
html[data-theme="dark"] .badge-ok,
html[data-theme="dark"] .badge-getekend {
  background: color-mix(in srgb, var(--green,#16a34a) 18%, transparent);
  color: color-mix(in srgb, var(--green,#16a34a) 25%, #fff);
  border-color: transparent;
}
html[data-theme="dark"] .badge.amber, html[data-theme="dark"] .badge-amber,
html[data-theme="dark"] .badge.oranje,
html[data-theme="dark"] .badge-warn, html[data-theme="dark"] .badge-wacht, html[data-theme="dark"] .badge-herinnerd {
  background: color-mix(in srgb, var(--amber,#d97706) 18%, transparent);
  color: color-mix(in srgb, var(--amber,#d97706) 25%, #fff);
  border-color: transparent;
}
html[data-theme="dark"] .badge.rood, html[data-theme="dark"] .badge-rood,
html[data-theme="dark"] .badge-err, html[data-theme="dark"] .badge-verlopen {
  background: color-mix(in srgb, var(--red,#dc2626) 18%, transparent);
  color: color-mix(in srgb, var(--red,#dc2626) 30%, #fff);
  border-color: transparent;
}
html[data-theme="dark"] .badge.blauw, html[data-theme="dark"] .badge-blauw {
  background: var(--kc-fill);
  color: var(--kc);
  border-color: transparent;
}
html[data-theme="dark"] .badge.grijs, html[data-theme="dark"] .badge-grijs {
  background: rgba(148,163,184,.12);
  color: #94a3b8;
  border-color: transparent;
}
html[data-theme="dark"] .badge.paars {
  background: color-mix(in srgb, var(--purple,#7c3aed) 18%, transparent);
  color: color-mix(in srgb, var(--purple,#7c3aed) 30%, #fff);
  border-color: transparent;
}
html[data-theme="dark"] .badge.goud {
  background: color-mix(in srgb, var(--goud2,#b8860b) 18%, transparent);
  color: color-mix(in srgb, var(--goud2,#b8860b) 35%, #fff);
  border-color: transparent;
}

/* Tabellen */
.tbl {
  width: 100%; border-collapse: collapse; font-size: 13.5px;
}
.tbl th {
  text-align: left; font-size: 11px; font-weight: 700;
  color: #94a3b8; text-transform: uppercase; letter-spacing: .6px;
  padding: 0 var(--space-3) 10px; border-bottom: 1.5px solid var(--bg4);
}
.tbl td {
  padding: 10px var(--space-3); border-bottom: 1px solid #f8fafc;
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: none }
.tbl tbody tr:hover td { background: var(--bg3) }

/* Formulier-elementen */
/* Meldingen */
/* Uniforme foutmelding voor inlog-flows (login, 2FA, reset, superadmin, cliëntportaal, invite, "wachtwoord vergeten") */
/* OTP-invoer — canoniek voor 6-cijferige codes; kleur via --p met --accent fallback (beheeromgevingen) */
.otp-row { display:flex; gap:var(--space-2); margin:18px 0 22px }
.otp-box {
  width:46px; height:54px; box-sizing:border-box; padding:0;
  text-align:center; font-family:inherit; font-size:22px; font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--text1, var(--text)); background:var(--bg2);
  border:var(--bd); border-radius:var(--r); outline:none;
  transition:border-color var(--t-base,.15s), box-shadow var(--t-base,.15s), background var(--t-base,.15s);
}
.otp-box:focus {
  border-color:var(--p, var(--accent));
  box-shadow:var(--ring);
}
.otp-box.filled {
  border-color:var(--p, var(--accent));
  background:color-mix(in srgb, var(--p, var(--accent)) 7%, var(--bg2));
}
@media (max-width:420px) {
  .otp-box { width:40px; height:48px; font-size:18px }
  .otp-row { gap:6px }
}

/* Codedialoog (step-up) */
.v-code-ov { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:var(--z-modal,9999);
  display:flex; align-items:center; justify-content:center; padding:20px }
.v-code-kaart { background:var(--bg2,#fff); border:var(--bd);
  border-radius:var(--r-lg); padding:22px; width:100%; max-width:380px;
  box-shadow:var(--shadow-lg) }
.v-code-titel { font-size:16px; font-weight:700; color:var(--text1, var(--text)); margin-bottom:var(--space-2) }
.v-code-tekst { font-size:13px; color:var(--text3); line-height:1.55 }
.v-code-kaart .otp-row { justify-content:center; margin:var(--space-4) 0 var(--space-1) }
.v-code-knoppen { display:flex; justify-content:flex-end; gap:var(--space-2); margin-top:var(--space-3) }

.v-auth-err {
  display: flex; align-items: center; gap: var(--space-2);
  background: var(--red-light); color: var(--red); border: 1px solid var(--red-border);
  padding: 10px 14px; border-radius:var(--r-2);
  font-size: 12.5px; font-weight: 600; line-height: 1.5;
  margin-bottom: 14px;
}
.v-auth-err[hidden] { display: none }

/* Uniforme autofill-styling — voorkomt gele/blauwe browser-highlight in inlogvelden.
 Werkt zowel light als dark via --text1 en --input-bg tokens. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-text-fill-color: var(--text1, var(--text, #0f172a));
  -webkit-box-shadow: 0 0 0 30px var(--input-bg, var(--bg2, #ffffff)) inset;
  caret-color: var(--text1, var(--text, #0f172a));
  transition: background-color 9999s ease-in-out 0s;
}

/* Pagina header (twee regels) */
.topbar {
  background: var(--bg2);
  border-bottom: 1.5px solid var(--border, #e2e8f0);
  padding: 0 28px; height: 56px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px;
  position: sticky; top: 0; z-index: 10;
  box-shadow: 0 1px 0 var(--border), 0 2px 6px rgba(15,23,42,.04);
}
.topbar-title, .content-topbar-titel { font-size: 13.5px; font-weight: 600; color: var(--text3, #64748b) }
/* Gedeelde page-body wrapper — uniforme horizontale offset tegen sidebar */
.page-body { padding: 18px 28px 14px; }
@media (max-width: 768px) { .page-body { padding: 14px 14px; } }

.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 10px }

/* Canonical page wrapper — uniforme padding voor content na .topbar/.page-banner.
 Pagina-specifieke CSS kan max-width/extra padding toevoegen indien nodig. */
.page{padding:18px 28px 14px}

/* Topbar overrides — uniforme witte headers (medewerker-pagina's)
 Hogere specificity via `html` ipv !important — wint van page-CSS `.topbar`. */
html .topbar, html .kb-topbar {
  background: var(--bg2); color: var(--text1);
  box-shadow: none;
  border-bottom: 1.5px solid var(--border);
  height: 56px; overflow: visible;
}
html .topbar::before, html .topbar::after { display: none }
html .topbar h1, html .topbar-title, html .content-topbar-titel {
  font-size: 13.5px; font-weight: 600;
  color: var(--text3);
  font-family: 'DM Sans', sans-serif;
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
html .topbar .meta {
  color: var(--text3); opacity: 1;
  font-family: 'DM Sans', sans-serif;
}
html .topbar-logo { height: 28px; filter: none }

/* Canonical stat-cards (gedeeld door ondertekenen/akten/debiteuren etc.) */
.stats-grid {
  display: grid; grid-template-columns: repeat(3,1fr); gap: var(--space-3);
}
.stat-card {
  background: var(--bg2); border: 1px solid var(--border, #e2e8f0);
  border-radius:var(--r); padding: 14px 18px; cursor: pointer;
  transition: border-color var(--t-base,.15s), box-shadow var(--t-base,.15s), transform var(--t-fast,.12s);
  box-shadow: var(--shadow, 0 1px 3px rgba(0,0,0,.04));
}
.stat-card:hover {
  border-color: var(--border2, #cbd5e1);
  box-shadow:var(--shadow-sm);
}
.stat-num { font-size: 22px; font-weight: 700; line-height: 1.1; letter-spacing: -.5px; color: var(--text1, #1a1a2e) }
.stat-lbl { font-size: 12px; color: var(--text3, #64748b); margin-top: var(--space-1); font-weight: 500 }
.stat-lbl svg { display: none }
@media (max-width: 700px) {
  .stats-grid { gap: var(--space-2) }
  .stat-num { font-size: 22px }
}

/* Header (cliënt-facing site-header) */
.site-header {
  background: linear-gradient(135deg, color-mix(in srgb, var(--p) 80%, #003d6b), var(--p));
  padding: 0 28px;
  display: flex; align-items: center; justify-content: space-between;
  height: 62px; gap: var(--space-4);
  position: relative; overflow: hidden;
  box-shadow: 0 2px 16px rgba(0,80,160,.18);
}
.site-header::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(118deg, rgba(255,255,255,.08) 0%, rgba(255,255,255,0) 55%);
  pointer-events: none;
}
.site-header > * { position: relative; z-index: 1 }

/* Stappen indicator */
.stappen { display: flex; gap: 0; margin-bottom: 28px }
.stap { flex: 1; text-align: center; position: relative }
.stap:not(:last-child)::after { content: ''; position: absolute; top: 14px; left: 50%; right: -50%; height: 2px; background: var(--border); z-index: 0 }
.stap.actief::after, .stap.klaar::after { background: var(--p) }
.stap-nr { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--border); background: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text3); margin: 0 auto 6px; position: relative; z-index: 1 }
.stap.actief .stap-nr { border-color: var(--p); color: var(--kc); background: var(--p-light) }
.stap.klaar .stap-nr { border-color: var(--green); background: var(--green); color: #fff }
.stap-label { font-size: 11px; color: var(--text3); font-weight: 500 }
.stap.actief .stap-label { color: var(--kc); font-weight: 600 }
.stap.klaar .stap-label { color: var(--green) }

/* Selectie-actiebalk */
/* Spinner */
.spinner, .spin {
  display: inline-block; width: 18px; height: 18px;
  border: 2.5px solid rgba(255,255,255,.4); border-top-color: #fff;
  border-radius: 50%; animation: vr-spin .7s linear infinite;
}
@keyframes vr-spin { to { transform: rotate(360deg) } }

/* Knop-in-uitvoering: spinner vóór het label — label blijft leesbaar, geen overlap.
 currentColor past zich aan knop-kleur en thema aan (licht/donker). */
.v-btn.is-laden{ pointer-events:none; }
.v-btn.is-laden::before{
  content:''; width:15px; height:15px; flex-shrink:0;
  border:2.5px solid color-mix(in srgb, currentColor 28%, transparent); border-top-color:currentColor;
  border-radius:50%; animation:vr-spin .7s linear infinite;
}

/* Bevestig-modal: de actieknop toont tijdens het uitvoeren alleen een
 gecentreerde spinner; het label verdwijnt (i.p.v. spinner naast het label).
 De OK-knop is altijd danger/primary (witte tekst), dus witte spinner. */
#bevestigJa.is-laden{ position:relative; color:transparent; }
#bevestigJa.is-laden > *{ visibility:hidden; }
#bevestigJa.is-laden::before{
  position:absolute; top:50%; left:50%; margin:-7.5px 0 0 -7.5px;
  border-color:color-mix(in srgb, #fff 30%, transparent); border-top-color:#fff;
}

/* Danger zone */
.danger-zone {
  border: 1.5px solid #fecaca; border-radius:var(--r);
  padding: 18px 20px; background: #fff5f5; margin-top: var(--space-4);
}
.danger-zone h3 { font-size: 13px; font-weight: 700; color: var(--red); margin-bottom: var(--space-2) }
.danger-zone p { font-size: 12.5px; color: var(--text3); margin-bottom: var(--space-3) }

/* Checkbox/Radio styling */
.checkbox-wrap {
  display: flex; align-items: flex-start; gap: var(--space-3);
  background: var(--bg); border:var(--bd);
  border-radius:var(--r-2); padding: 14px var(--space-4);
  cursor: pointer; transition: border-color var(--t-base,.15s);
}
.checkbox-wrap:hover { border-color: var(--p) }
.checkbox-wrap input[type=checkbox] {
  width: 18px; height: 18px; flex-shrink: 0;
  accent-color: var(--p); cursor: pointer;
}

/* Canonieke checkbox (.v-cb) — skint alle checkboxes behalve .v-switch-input. Vink = achtergrond-SVG, geen ::after (input ondersteunt pseudo-els niet betrouwbaar). Maat 16/14px per dichtheid */
input[type="checkbox"]:not(.v-switch-input) {
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0; box-sizing: border-box;
  width: 16px; height: 16px; margin: 0;
  border:var(--bd-strong);
  border-radius:var(--r-sm);
  background-color: var(--bg2);
  background-repeat: no-repeat; background-position: center; background-size: 72%;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.04);
  cursor: pointer;
  transition: border-color var(--t-base,.15s), background-color var(--t-base,.15s), box-shadow var(--t-base,.15s);
}

input[type="checkbox"]:not(.v-switch-input):hover { border-color: var(--p); }

input[type="checkbox"]:not(.v-switch-input):checked {
  background-color: var(--p); border-color: var(--p);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--p) 45%, transparent);
  background-size: 78%;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'><path d='M20.6 5.3a1.6 1.6 0 0 1 .1 2.3l-9.4 10.2a1.6 1.6 0 0 1-2.4.05L3.4 13a1.6 1.6 0 1 1 2.3-2.2l4.2 4.4 8.3-9a1.6 1.6 0 0 1 2.4-.05Z'/></svg>");
}

input[type="checkbox"]:not(.v-switch-input):indeterminate {
  background-color: var(--p); border-color: var(--p);
  background-size: 60% 2px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 4'><rect width='24' height='4' rx='2' fill='white'/></svg>");
}

input[type="checkbox"]:not(.v-switch-input):focus-visible {
  outline: none; box-shadow:var(--ring);
}

input[type="checkbox"]:not(.v-switch-input):disabled {
  opacity: .45; cursor: not-allowed; border-color: var(--border2);
}

html.density-compact input[type="checkbox"]:not(.v-switch-input) {
  width: 14px; height: 14px; border-radius:var(--r-xs);
}

/* Canonieke radio ── rond, bruin-gevuld middelpunt; matcht .v-cb */
input[type="radio"] {
  appearance: none; -webkit-appearance: none;
  flex-shrink: 0; box-sizing: border-box;
  width: 16px; height: 16px; margin: 0;
  border:var(--bd-strong);
  border-radius: 50%;
  background-color: var(--bg2);
  background-repeat: no-repeat; background-position: center;
  box-shadow: inset 0 1px 1px rgba(0,0,0,.04);
  cursor: pointer;
  transition: border-color var(--t-base,.15s), background-color var(--t-base,.15s), box-shadow var(--t-base,.15s);
}
input[type="radio"]:hover { border-color: var(--p); }
input[type="radio"]:checked {
  border-color: var(--p);
  background-image: radial-gradient(circle at center, var(--p) 0 3.5px, transparent 4.5px);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--p) 40%, transparent);
}
input[type="radio"]:focus-visible {
  outline: none; box-shadow:var(--ring);
}
input[type="radio"]:disabled { opacity: .45; cursor: not-allowed; border-color: var(--border2); }
html.density-compact input[type="radio"] { width: 14px; height: 14px; }
/* Code input (verificatiecode) */
.code-wrap { display: flex; gap: var(--space-2); justify-content: center; margin: var(--space-2) 0 var(--space-1) }
.code-input {
  width: 44px; height: 52px;
  border: 2px solid var(--border); border-radius:var(--r-2);
  font-size: 22px; font-weight: 700; text-align: center;
  font-family: var(--font); color: var(--text1);
  background: #fff; transition: border-color var(--t-base,.15s); outline: none;
}
.code-input:focus { border-color: var(--p) }
.code-input.fout { border-color: var(--red); background: var(--red-light) }

/* PDF Viewer */
.pdf-wrap {
  border-radius:var(--r-2); overflow: hidden;
  border:var(--bd);
  margin-bottom: 20px; background: #fff;
}

/* Modal */
.modal-bg {
  position: fixed; top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,.55); z-index: 1000;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
}
.modal-bg.actief { display: flex }
.modal {
  background: #fff; border-radius:var(--r-lg);
  box-shadow:var(--shadow-lg);
  width: 100%; max-width: 540px; overflow: hidden;
}
.modal-header {
  padding: var(--space-4) 20px; border-bottom: 1.5px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.modal-body { padding: 20px }
.modal-footer {
  padding: 14px 20px; border-top: 1.5px solid var(--border);
  display: flex; gap: var(--space-2); justify-content: flex-end;
}

/* Upload zones */
.upload-zone {
  border: 2px dashed var(--border); border-radius:var(--r);
  padding: 20px; text-align: center; cursor: pointer;
  transition: all .2s; background: var(--bg3);
  min-height: 80px;
  display: flex; align-items: center; justify-content: center;
}
.upload-zone:hover { border-color: var(--p); background: #f0f7ff }
.upload-zone.heeft-foto { border-style: solid; border-color: var(--green); background: var(--green-bg) }

/* Notificatie toast */
/* Grid helpers */
/* Responsive */
@media(max-width:520px) {
  .site-header { padding: 0 var(--space-4); height: 56px }
  .code-input { width: 38px; height: 46px; font-size: 18px }
}

/* Print */
@media print {
  body { background: #fff }
  .site-header, .sidebar, .btn, .danger-zone { display: none }
}

/* UNIFIED DESIGN COMPONENTS — vr-* namespace, opt-in markup */
/* Stat cards (rij van klikbare cijfer-kaartjes bovenaan) */
/* Color-variants (apply to .vr-stat-value via modifier class on card) */
/* Filter-bar (search + select + chips combineren) */
/* Search-pill (rounded grey met 🔍-icon links) */
/* Select-pill (dropdown met chevron) */
.vr-select-pill {
  background: var(--bg2);
  border:var(--bd);
  border-radius:var(--r-2);
  color: var(--text2);
  font-family: var(--font); font-size: 12.5px; font-weight: 600;
  /* Canonieke controlehoogte: gelijk aan .v-btn--sm (32px) */
  height: 32px; box-sizing: border-box;
  padding: 0 28px 0 var(--space-3);
  outline: none; cursor: pointer;
  appearance: none; -webkit-appearance: none;
  background-image: var(--v-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 10px;
  transition: border-color var(--t-base,.15s);
}
.vr-select-pill:hover, .vr-select-pill:focus { border-color: var(--p); }
html[data-theme="dark"] .vr-select-pill {
  background-image: var(--v-chevron);
}

/* Filter-chip (rounded white pill — variant met dot of badge) */
/* Variant: gekleurde dot vóór tekst (•) */
/* Variant: getal-badge ná tekst (15, 109) */
/* Color-coded badges (Controleren-amber, Nog-afronden-goud, etc.) */
/* Tabel-koppen (uppercase grey small-caps) */
/* CANONICAL search & filter bar — debiteuren/dossiers/offertes/ondertekenen/vorioconnect. Edit HERE, all pages update. */
.filterbar { display:flex; gap:var(--space-2); align-items:center; margin-bottom:var(--space-4); flex-wrap:wrap; }
.filterbar input[type="text"], .filterbar input[type="search"], .toolbar > input[type="search"] {
  padding:6px 11px 6px var(--space-6); border:var(--bd); border-radius:var(--r-2);
  font-size:var(--font-md); font-family:var(--font, inherit); color:var(--text1, var(--text));
  background-color:var(--bg2);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2212%22%20height%3D%2212%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2394a3b8%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Ccircle%20cx%3D%2211%22%20cy%3D%2211%22%20r%3D%227%22%2F%3E%3Cline%20x1%3D%2221%22%20y1%3D%2221%22%20x2%3D%2216.65%22%20y2%3D%2216.65%22%2F%3E%3C%2Fsvg%3E");
  background-repeat:no-repeat;
  background-position:11px center;
  min-width:220px; outline:none; transition:border-color var(--t-base,.15s), box-shadow var(--t-base,.15s);
}
.filterbar input:focus, .toolbar > input[type="search"]:focus { border-color:var(--p, var(--accent)); box-shadow:none; }
.filterbar select {
  padding:6px 30px 6px 11px; border:var(--bd); border-radius:var(--r-2);
  background-color:var(--bg2);
  background-image:var(--v-chevron);
  background-repeat:no-repeat;
  background-position:right 10px center;
  font-family:var(--font, inherit); font-size:var(--font-md); line-height:1.4;
  color:var(--text1, var(--text)); outline:none; cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
}
.filterbar input, .filterbar select, .toolbar > input[type="search"] { box-sizing:border-box; height:var(--ctrl-h); }
/* Filter-chips in dezelfde balk op controlehoogte (36) zodat de filterbar één band is. */
.filterbar .chip, .filterbar .v-chip { height:var(--ctrl-h); box-sizing:border-box; padding-top:0; padding-bottom:0; }
/* Portaal .toolbar = filterband op controlehoogte (zelfde idee als .filterbar) */
.toolbar .search-box, .toolbar .filter-btn, .toolbar .deb-select-btn, .toolbar .chip, .toolbar .select-styled, .toolbar select { height:var(--ctrl-h); box-sizing:border-box; }
.toolbar .chip { padding-top:0; padding-bottom:0; }

.search-box {
  display:flex; align-items:center; gap:7px;
  background:var(--bg2); border:var(--bd); border-radius:var(--r-2);
  padding:6px 11px; min-width:220px; transition:border-color var(--t-base,.15s), box-shadow var(--t-base,.15s);
}
.search-box:focus-within { border-color:var(--p, var(--accent)); box-shadow:var(--ring); }
.search-box input {
  background:none; border:none; outline:none;
  color:var(--text1, var(--text)); font-family:var(--font, inherit);
  font-size:12.5px; width:100%;
}
.search-box input::placeholder { color:var(--text3); }

/* CANONICAL chips & table-head — debiteuren/dossiers/offertes share via base. */
.filter-chips { display:flex; gap:6px; flex-wrap:wrap; }
.chip, .v-chip {
  padding:7px 13px; border-radius:var(--r-2);
  font-size:12px; font-weight:500; font-family:var(--font, inherit);
  cursor:pointer; user-select:none; white-space:nowrap;
  border:var(--bd); background:var(--bg2);
  color:var(--text2, var(--text));
  display:inline-flex; align-items:center; gap:5px;
  transition:border-color var(--t-base,.15s), background var(--t-base,.15s), color var(--t-base,.15s);
}
.chip:hover, .v-chip:hover { border-color:var(--border2, var(--border)); }
.filterbar .chip:hover, .filterbar .v-chip:hover, .toolbar .chip:hover, .toolbar .v-chip:hover { border-color:var(--p, var(--accent)); }
.chip.active, .v-chip.actief {
  border-color:var(--p, var(--accent));
  background:var(--accent-light, #eff6ff);
  color:var(--p, var(--accent));
}
.chip-dot {
  width:7px; height:7px; border-radius:50%;
  background:currentColor; display:inline-block; flex-shrink:0;
}
.chip-cnt, .v-chip-cnt {
  background:var(--p, var(--accent));
  color:#fff;
  padding:1px 6px;
  border-radius:var(--r-pill);
  font-size:10px;
  font-weight:700;
  margin-left:var(--space-1);
  line-height:1.3;
}
.chip.active .chip-cnt, .v-chip.actief .v-chip-cnt { background:#fff; color:var(--p, var(--accent)); }
.chip-cnt.rood, .sf-btn .chip-cnt.rood { background:var(--red,#dc2626); color:#fff; }
.chip-cnt.amber, .sf-btn .chip-cnt.amber { background:var(--amber,#d97706); color:#fff; }
.chip-cnt.groen, .sf-btn .chip-cnt.groen { background:var(--green,#16a34a); color:#fff; }
.chip-cnt.grijs, .sf-btn .chip-cnt.grijs { background:var(--bg4); color:var(--text2); } /* neutrale telling (geen status, bv. populatie-totaal in tab-chip) */
.chip.active .chip-cnt.grijs, .v-chip.actief .v-chip-cnt.grijs { background:#fff; color:var(--p, var(--accent)); }
html[data-theme="dark"] .chip-cnt.amber, html[data-theme="dark"] .sf-btn .chip-cnt.amber { color:#3a2a00; } /* felle dark --amber #fbbf24 → donkere tekst i.p.v. wit (leesbaar) */
.sf-btn.actief .chip-cnt { background:#fff; color:var(--p, var(--accent)); }

/* Canonical tabel (.v-tbl) — gedeeld door dossiers/offertes/lijst-views */
.v-tbl{width:100%;border-collapse:collapse;background:var(--bg2);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden;border:var(--bd)}
.v-tbl thead{position:sticky;top:0;z-index:5;background:var(--bg)}
.v-tbl thead tr{border-bottom:1.5px solid var(--border)}
.v-tbl th{padding:9px 14px;font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;color:var(--text3);text-align:left;font-family:'DM Sans',system-ui,-apple-system,BlinkMacSystemFont,sans-serif}
.v-tbl th.center{text-align:center}
.v-tbl th.sortable{cursor:pointer;user-select:none;transition:color var(--t-base,.15s),opacity var(--t-base,.15s)}
.v-tbl th.sortable:hover{color:var(--text2)}
.v-tbl th.sortable .sort-ic{display:none;margin-left:var(--space-1);font-style:normal}
.v-tbl th.sortable .sort-ic svg{width:13px;height:13px;display:block;color:var(--kc);will-change:transform;transform:translateZ(0)}
.v-tbl th.sortable.actief .sort-ic{display:inline-flex;vertical-align:middle}
.v-sort-ic{display:inline-flex;vertical-align:middle}
.v-sort-ic svg{width:13px;height:13px;display:block;color:var(--kc);will-change:transform;transform:translateZ(0)}
.v-tbl th.sortable.actief{color:var(--kc);opacity:1}
.v-tbl th.sortable:not(.actief){opacity:.85}
.v-tbl tbody tr{height:40px;cursor:pointer;transition:background var(--t-fast,.12s);border-bottom:1px solid var(--border-soft,var(--border))}
.v-tbl tbody tr:last-child{border-bottom:none}
.v-tbl tbody tr:hover{background:var(--row-hover)}
.v-tbl td{padding:var(--space-2) 14px;font-size:13px;line-height:1.4;vertical-align:middle;color:var(--text)}
.v-tbl td.center{text-align:center}
.v-loadmore{text-align:center;padding:28px var(--space-4) 28px}
.v-tbl td.v-loadmore,td.v-loadmore,html.density-compact .v-tbl td.v-loadmore{padding:28px var(--space-4) 28px}
.v-dr-row:has(.v-loadmore){border-bottom:0}
.v-loadmore .v-btn.v-btn--primary{display:inline-flex;align-items:center;gap:9px;background:transparent;color:var(--text1);border:var(--bd);border-radius:var(--r-pill);padding:9px 10px 9px 18px;font-weight:600;box-shadow:none;min-height:0}
.v-loadmore .v-btn.v-btn--primary:hover{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 8%,transparent);color:var(--text1);filter:none}
.v-loadmore .v-btn.v-btn--primary svg{width:15px;height:15px;color:var(--kc)}
.v-loadmore-count{background:color-mix(in srgb,var(--text2) 12%,transparent);color:var(--text2);font-weight:700;font-size:11.5px;padding:3px 9px;border-radius:var(--r-pill);font-variant-numeric:tabular-nums}
.v-loadmore-meta{font-size:11.5px;color:var(--text3);margin-top:10px}
@media(max-width:700px){
  /* Tabel zelf wordt scrollable container, inner-rendering blijft table-layout */
  .v-tbl{
    display:block;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    width:100%;
    max-width:100%;
    font-size:12px;
    border-radius:var(--r);
  }
  .v-tbl thead, .v-tbl tbody, .v-tbl tfoot{display:table-row-group}
  .v-tbl tr{display:table-row}
  .v-tbl td, .v-tbl th{display:table-cell;padding:var(--space-2) 10px;white-space:nowrap}
  .v-tbl tbody tr{height:auto}
}
/* Canonical table-head — geldt voor elke <thead> tenzij page override */
/* Canonical voor alle tabel-headers (page override via specifieke class indien nodig) */
table thead th{
  padding:9px 14px; text-align:left;
  font-size:10.5px; font-weight:600;
  color:var(--text3); text-transform:uppercase; letter-spacing:.6px;
  background:var(--bg3); border-bottom:1px solid var(--border);
  white-space:nowrap; font-family:var(--font, inherit); vertical-align:middle;
}

/* Canonical select-styled — gebruikt door dossiers/debiteuren/vorioconnect/portaal */
.select-styled {
  background:var(--bg2) var(--v-chevron) no-repeat right 10px center;
  border:var(--bd); border-radius:var(--r-2);
  color:var(--text2, var(--text)); font-family:var(--font, inherit); font-size:12.5px;
  padding:5px 28px 5px 11px; outline:none; cursor:pointer;
  appearance:none; -webkit-appearance:none; -moz-appearance:none;
  box-sizing:border-box; height:var(--ctrl-h);
  transition:border-color var(--t-base,.15s), box-shadow var(--t-base,.15s);
}
.select-styled:focus, .select-styled:hover {
  border-color:var(--p, var(--accent));
  color:var(--text1, var(--text));
}
.select-styled:focus { box-shadow:var(--ring); }

/* Centrale Vorio-loader (favicon + roterende ring) */
.vorio-loader{
  position:relative;
  width:48px;height:48px;
  display:inline-flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.vorio-loader::before{
  content:'';position:absolute;inset:0;border-radius:50%;
  border:3px solid rgba(15,23,42,.08);
  border-top-color:var(--vorio-brand);
  animation:vorioLoaderSpin .9s linear infinite;
}
.vorio-loader::after{
  content:'';
  width:60%;height:60%;
  background:url('/vorio_favicon.png?v=8') center/contain no-repeat;
  animation:vorioLoaderPulse 1.4s ease-in-out infinite;
}
html[data-theme="dark"] .vorio-loader::before{
  border-color:rgba(255,255,255,.10);
  border-top-color:var(--vorio-brand);
}
/* Dark-loader: wordmark zonder extra cirkel (geen "dubbele spinner") */
html[data-theme="dark"] .vorio-loader::after{
  background-image:url("/vorio_wm_dark.png?v=1");
}
.vorio-loader-sm{ width:28px;height:28px; }
.vorio-loader-sm::before{ border-width:2px; }
.vorio-loader-lg{ width:72px;height:72px; }
.vorio-loader-lg::before{ border-width:4px; }

@keyframes vorioLoaderSpin{ to{ transform:rotate(360deg) } }
@keyframes vorioLoaderPulse{ 0%,100%{ opacity:.85; transform:scale(.96) } 50%{ opacity:1; transform:scale(1.04) } }

/* XL variant + fullscreen overlay + inline-button helper */
.vorio-loader-xl{ width:120px;height:120px; }
.vorio-loader-xl::before{ border-width:5px; }

.vorio-loader-overlay{
  position:fixed;inset:0;z-index:var(--z-loader,100000);
  background:rgba(255,255,255,.92);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  color:var(--text2, #475569);font-size:14.5px;font-weight:500;letter-spacing:.2px;
  opacity:0;pointer-events:none;transition:opacity .18s ease;
}
.vorio-loader-overlay.actief{ opacity:1;pointer-events:auto; }
.vorio-loader-overlay--solid{ background:var(--bg2,#fff);backdrop-filter:none;-webkit-backdrop-filter:none; }
.vorio-loader-overlay .vol-tekst{ max-width:340px;text-align:center;line-height:1.5; }

/* Voor in-knop gebruik: kleine variant inline — clean ring zonder favicon (te klein voor detail) */
.vorio-loader-inline{
  width:14px;height:14px;display:inline-block;vertical-align:-3px;margin-right:6px;
  border-radius:50%;
  border:2px solid rgba(15,23,42,.18);
  border-top-color:var(--vorio-brand);
  animation:vorioLoaderSpin .8s linear infinite;
  background:transparent;position:relative;
}
.vorio-loader-inline::before, .vorio-loader-inline::after{ content:none; display:none; }

/* Spinner-klassen — canonical single source of truth */
/* Alleen deze regels bepalen .spinner / .spin / .upload-spinner appearance.
 Dark-context (sidebars, donkere modals) → white variant via context-selectors hieronder. */
.spinner, .upload-spinner, .spin{
  position:relative;
  box-sizing:border-box;
  border-radius:50%;
  background:transparent;
  display:inline-block;vertical-align:middle;
  animation:vorioLoaderSpin .8s linear infinite;
}
.spinner::before, .upload-spinner::before, .spin::before,
.spinner::after,  .upload-spinner::after,  .spin::after{
  content:none; display:none;
}
/* Per-klasse geometrie + kleur (default = donker op licht bg) */
.spin, .upload-spinner{
  width:14px;height:14px;
  border:2px solid rgba(15,23,42,.18);
  border-top-color:var(--p, #1a6bdc);
}
.spinner{
  width:32px;height:32px;
  border:3px solid rgba(15,23,42,.14);
  border-top-color:var(--p, #1a6bdc);
}
/* Witte variant binnen donkere contexten (primary buttons, sidebar, dark modals) */
.btn-primary .spinner, .btn-primary .spin, .btn-primary .upload-spinner,
.btn-primary .vorio-loader-inline,
.sidebar .spinner, .sidebar .spin, .sidebar .upload-spinner,
.sidebar .vorio-loader-inline{
  border-color:rgba(255,255,255,.35);
  border-top-color:#fff;
}
/* Canonical Vorio-wordmark — één bron voor "vorio." renderen.
 Helper: lib/vorio_logo.php (PHP) + js/vorio_logo.js (client).
 Tokens: DM Sans 700, navy #0f2744 / brand-blue var(--p), letter-spacing −3.8% van font-size, dot bottom-aligned. */
.v-logo {
  display: inline-flex;
  align-items: flex-end;
  gap: 1px;
  font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif;
  font-weight: 700;
  color: #0f2744;
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}
.v-logo .v-dot {
  background: var(--vorio-brand);
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* Sizes: dot schaalt ~23% van font-size, margin-bottom ~15% */
.v-logo-xs { font-size: 14px; letter-spacing: -.55px; }
.v-logo-xs .v-dot { width: 3.5px; height: 3.5px; margin-bottom: 2px; }
.v-logo-sm { font-size: 18px; letter-spacing: -.7px; }
.v-logo-sm .v-dot { width: 4.5px; height: 4.5px; margin-bottom: 2.5px; }
.v-logo-md { font-size: 22px; letter-spacing: -.85px; }
.v-logo-md .v-dot { width: 5px; height: 5px; margin-bottom: 3px; }
.v-logo-lg { font-size: 26px; letter-spacing: -1px; }
.v-logo-lg .v-dot { width: 6px; height: 6px; margin-bottom: var(--space-1); }
.v-logo-xl { font-size: 44px; letter-spacing: -1.7px; }
.v-logo-xl .v-dot { width: 10px; height: 10px; margin-bottom: 7px; }

/* Variants — brand-blue dot blijft hetzelfde, alleen tekstkleur verandert */
.v-logo-dark { color: #ffffff; }
.v-logo-inverted { color: #ffffff; }
.v-logo-inverted .v-dot { background: #ffffff; }

/* Automatic dark-mode honoring */
html[data-theme="dark"] .v-logo:not(.v-logo-light):not(.v-logo-inverted) { color: #ffffff; }

/* "powered by vorio." compositie — wordmark schaalt mee met omringende tekst */
.v-powered {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 9px;
  color: #6b7280;
  font-weight: 500;
  letter-spacing: .2px;
}
.v-powered-dark { color: #9ca3af; }
.v-powered-inverted  { color: rgba(255,255,255,.85); }
.v-powered .v-logo { font-size: 1em; letter-spacing: -.4px }
.v-powered .v-logo .v-dot { width: 3px; height: 3px; margin-bottom: 1.5px }

/* Dark-mode override met !important — beats inline-fallback in vorioPoweredBy() */
html[data-theme="dark"] .v-powered { color: #cbd5e1 }
html[data-theme="dark"] .v-powered .v-logo,
html[data-theme="dark"] .v-powered span[style*="currentColor"] { color: #ffffff !important }

/* .v-rij-x — gedeelde rij-verwijderknop
 Voor delete-knoppen IN form-rijen (offerte-regels, vestigingen-rijen).
 Klein, bordered, transparante achtergrond, rode hover.
 Niet bedoeld voor lijst-record-deletes — gebruik daar .adm-icon-btn.danger met trash-sprite.*/
.v-rij-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  background: transparent;
  border:var(--bd);
  border-radius:var(--r-sm);
  color: var(--text3);
  font-size: 14px;
  font-family: inherit;
  line-height: 1;
  cursor: pointer;
  transition: color var(--t-fast,.12s), border-color var(--t-fast,.12s), background var(--t-fast,.12s);
  box-sizing: border-box;
  flex-shrink: 0;
}
.v-rij-x:hover { color: var(--red); border-color: rgba(239,68,68,.32) }
.v-rij-x:focus-visible { outline: 2px solid var(--p,#1a6bdc); outline-offset: 1px }
/* Grotere variant — sluit aan op de 36px veld- en knop-hoogte */
.v-rij-x-lg { width: 36px; height: 36px; font-size: 16px; font-weight: 400; border-radius: 7px }
.v-rij-x svg { width: 14px; height: 14px }
.v-rij-x-lg svg { width: 16px; height: 16px }

/* Vorio Design System — herbruikbare component-classes. Gebruik <button class="v-btn v-btn--primary">
 i.p.v. eigen page-CSS. Volgt BEM: .v-component / .v-component__part / .v-component--variant */
/* Cards */
/* Canon component-classes voor inline-sweep */
/* Canonieke verplicht-asterisk: rood, app-breed (was alleen .veld/.modal label .req in dossiers.css) */
.req{color:var(--red-solid);font-weight:700;margin-left:2px}
.v-eyebrow{display:block;font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text3);line-height:1.3;margin-bottom:var(--space-2)}
.v-avatar-img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-pill)}

.v-card{
  background:var(--surface);
  border:var(--bd);
  border-radius:var(--r-card);
  padding:var(--space-4) var(--space-5);
  box-shadow:var(--shadow-sm);
  color:var(--text1);
}

/* Stat-card (rounded number-card zoals dossiers-strip) */
.v-stat-strip{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:var(--space-3);margin-bottom:var(--space-4);
}
/* Content-hug variant: kaarten zo breed als hun inhoud, links, geen uitrekken. */
.v-stat-strip--hug{display:flex;flex-wrap:wrap;justify-content:flex-start}
.v-stat-strip--hug .v-stat{flex:0 0 auto}
.v-stat{
  background:var(--surface);
  border:var(--bd);
  border-radius:var(--r-tile);
  padding:var(--space-3) var(--space-4);
  display:flex;align-items:center;gap:var(--space-3);
  color:var(--text2);
}
.v-stat__num{font-size:var(--font-2xl);font-weight:800;line-height:1;color:var(--kc);letter-spacing:-.5px}
/* Laad-skeleton kerncijfer-tegels: lege .v-stat__num toont pulsbalk tot JS de waarde vult; line-height:1 houdt regelhoogte gelijk → geen sprong */
@keyframes vStatSkel{0%,100%{opacity:1}50%{opacity:.4}}
.v-stat__num:empty::after{content:"";display:inline-block;width:1.4em;height:.72em;border-radius:var(--r-sm);background:var(--bg4);animation:vStatSkel 1.1s ease-in-out infinite;vertical-align:middle}

/* Canonieke tooltip (.v-tip) — gedeeld door wizard/notificatie-voorkeuren/ontvangers/onboarding.
 Icoon (info of ?) + hover-tooltip. Markup:
 <span class="v-tip"><svg class="v-tip__ic" viewBox="0 0 24 24"><use href="…#icon-help-circle"/></svg>
 <span class="v-tip__pop"><b>Titel</b>uitleg</span></span>
 Titel (<b>) is optioneel. Standaard boven het icoon; .v-tip--left plaatst 'm links (smalle/scrollende lijsten). */
.v-tip{position:relative;display:inline-flex;align-items:center;vertical-align:middle;flex-shrink:0;margin-left:5px}
.v-tip__ic{width:14px;height:14px;color:var(--text3);cursor:help;opacity:.55;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:opacity .14s,color .14s;transform:translateZ(0)}
.v-tip:hover .v-tip__ic{opacity:1;color:var(--kc)}
.v-tip__pop{position:absolute;bottom:100%;left:50%;margin-bottom:9px;transform:translateX(-50%) translateY(4px);width:max-content;max-width:240px;background:var(--bg2);border:var(--bd);border-radius:var(--r-2);padding:var(--space-2) 11px;font-size:11.5px;line-height:1.5;font-weight:400;color:var(--text2);text-align:left;text-transform:none;letter-spacing:normal;box-shadow:0 14px 40px rgba(15,30,58,.16),0 0 0 1px rgba(15,30,58,.04);opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s,transform .14s;z-index:400}
.v-tip__pop b{color:var(--text1);font-weight:600;display:block;margin-bottom:2px}
.v-tip__pop::before{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:7px solid transparent;border-top-color:var(--border)}
.v-tip__pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:var(--bg2)}
.v-tip:hover .v-tip__pop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
html[data-theme="dark"] .v-tip__pop{box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04)}
.v-tip--left .v-tip__pop{bottom:50%;left:auto;right:100%;margin:0 11px 0 0;transform:translateY(50%) translateX(6px)}
.v-tip--left .v-tip__pop::before{top:50%;left:100%;transform:translateY(-50%);border:7px solid transparent;border-left-color:var(--border);border-top-color:transparent}
.v-tip--left .v-tip__pop::after{top:50%;left:100%;transform:translateY(-50%);border:6px solid transparent;border-left-color:var(--bg2);border-top-color:transparent}
.v-tip--left:hover .v-tip__pop{transform:translateY(50%) translateX(0)}
.v-stat__lbl{font-size:var(--font-sm);color:var(--text3);font-weight:500;line-height:1.3}
.v-stat--amber  .v-stat__num{color:var(--amber)}
.v-stat--red    .v-stat__num{color:var(--red)}
.v-stat--green  .v-stat__num{color:var(--green)}
.v-stat--grijs  .v-stat__num{color:var(--text3)}
.v-stat--goud   .v-stat__num{color:var(--goud2)}
/* Clickable + actief-staat (filter-pillen) */
.v-stat--btn{cursor:pointer;transition:border-color var(--t-base,.15s), box-shadow var(--t-base,.15s), transform .1s}
.v-stat--btn:hover{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.v-stat--goud.v-stat--btn:hover{border-color:var(--goud2)}
.v-stat--btn:active{transform:translateY(1px)}
.v-stat--btn[aria-pressed="true"]{border-color:var(--accent);box-shadow:var(--shadow-sm)}
.v-stat--stacked{flex-direction:column;align-items:stretch;text-align:left;gap:2px}
.v-stat.is-active,.v-stat.active{border-color:var(--accent);background:var(--accent-light);box-shadow:0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent), var(--shadow-sm)}
html[data-theme="dark"] .v-stat.is-active,
html[data-theme="dark"] .v-stat.active{box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 30%, transparent), var(--shadow-sm)}
.v-stat.is-active .v-stat__num,.v-stat.active .v-stat__num{color:var(--kc)}
/* Dark mode: bedrag in actieve kaart krijgt wit-blauw zodat het leesbaar blijft op het accent-tint vlak */
html[data-theme="dark"] .v-stat.is-active .v-stat__num,
html[data-theme="dark"] .v-stat.active .v-stat__num{color:color-mix(in srgb, var(--accent) 35%, #fff 65%)}
html[data-theme="dark"] .v-stat--goud.is-active .v-stat__num,
html[data-theme="dark"] .v-stat--goud.active .v-stat__num{color:color-mix(in srgb, var(--goud2) 35%, #fff 65%)}
.v-stat--goud.is-active,.v-stat--goud.active{border-color:var(--goud2);background:var(--goud-light);box-shadow:0 0 0 2px color-mix(in srgb, var(--goud2) 35%, transparent), var(--shadow-sm)}
.v-stat--goud.is-active .v-stat__num,.v-stat--goud.active .v-stat__num{color:var(--goud2)}
/* Lege stat (count = 0) — gedimd zodat alleen kaarten met waarde aandacht trekken */
.v-stat.is-empty{opacity:.45}
.v-stat.is-empty:hover{opacity:.7}
.v-stat.is-empty.active,.v-stat.is-empty.is-active{opacity:1}

/* Knoppen (.btn = legacy-alias op .v-btn, 2026-09-16) */
.v-btn, .btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:0 var(--space-4);min-height:var(--ctrl-h);
  font-family:inherit;font-size:var(--font-md);font-weight:600;
  border-radius:var(--r-ctrl);
  border:1px solid transparent;
  cursor:pointer;background:none;color:var(--text1);
  text-decoration:none;line-height:1.2;
  transition:background var(--t-fast,.12s) ease,border-color var(--t-fast,.12s) ease,color var(--t-fast,.12s) ease,filter var(--t-fast,.12s) ease;
  vertical-align:middle;
}
.v-btn:focus-visible, .btn:focus-visible{outline:none;box-shadow:var(--ring)}

.v-btn[disabled],.v-btn:disabled,.btn[disabled],.btn:disabled{opacity:.55;cursor:not-allowed;pointer-events:none}
.v-btn svg,.btn svg{width:14px;height:14px;flex-shrink:0;stroke-width:2}

.v-btn--primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.v-btn--primary:hover{background:color-mix(in srgb, var(--accent) 90%, black);border-color:color-mix(in srgb, var(--accent) 90%, black)}
.v-btn--ghost{background:transparent;color:var(--text2);border-color:color-mix(in srgb, var(--text3) 45%, transparent)}
.v-btn--ghost:hover{background:color-mix(in srgb, var(--text3) 22%, transparent);border-color:color-mix(in srgb, var(--text3) 60%, transparent);color:var(--text1)}
.v-btn--outline{background:transparent;color:var(--kc);border-color:var(--accent)}
.v-btn--outline:hover{background:color-mix(in srgb, var(--accent) 10%, transparent)}
.v-btn--danger{background:var(--red-solid);color:#fff;border-color:var(--red-solid)}
.v-btn--danger-soft{background:transparent;color:var(--red-text);border-color:color-mix(in srgb, var(--red-solid) 32%, transparent)}
.v-btn--danger-soft:hover{background:color-mix(in srgb, var(--red-solid) 9%, transparent);border-color:var(--red-solid)}
.v-btn--danger:hover{background:color-mix(in srgb, var(--red-solid) 78%, black);border-color:color-mix(in srgb, var(--red-solid) 78%, black)}
.v-btn--success{background:var(--green);color:#fff;border-color:var(--green)}
.v-btn--success-outline{background:var(--bg2);color:var(--green);border-color:var(--green)}
.v-btn--success-outline:hover{background:color-mix(in srgb, var(--green) 10%, transparent);color:var(--green);border-color:var(--green)}
.v-btn--amber-outline{background:var(--bg2);color:var(--amber);border-color:var(--amber)}
.v-btn--amber-outline:hover{background:color-mix(in srgb, var(--amber) 10%, transparent);color:var(--amber);border-color:var(--amber)}
.v-btn--primary-soft{background:color-mix(in srgb, var(--accent) 12%, transparent);color:var(--kc);border-color:color-mix(in srgb, var(--accent) 38%, transparent)}
.v-btn--primary-soft:hover{background:color-mix(in srgb, var(--accent) 20%, transparent);border-color:var(--accent)}
.v-btn--link{background:transparent;color:var(--kc);border-color:transparent;padding:0 var(--space-2)}
.v-btn--link.is-current{background:color-mix(in srgb,var(--p) 8%,transparent);color:color-mix(in srgb,var(--p) 65%,transparent);cursor:default}
.v-btn--link.is-current:hover{background:color-mix(in srgb,var(--p) 8%,transparent);color:color-mix(in srgb,var(--p) 65%,transparent)}
.v-btn--link:hover{background:color-mix(in srgb,var(--p) 8%,transparent);color:var(--kc)}
/* Terug-link: geen bg/rand in rust of actief — alleen kleur-wissel */
.v-back{display:inline-flex;align-items:center;gap:5px;background:none;border:0;padding:4px 4px;margin:0;color:var(--text2);font-family:inherit;font-size:13px;font-weight:600;line-height:1;cursor:pointer;text-decoration:none;transition:color var(--t-fast,.12s)}
.v-back:hover,.v-back:focus-visible{color:var(--text1);background:none}
.v-back:focus-visible{outline:2px solid var(--p);outline-offset:2px}
.v-back svg{width:14px;height:14px;flex-shrink:0}
.v-btn--quiet{background:transparent;color:var(--text3);border-color:transparent}
.v-btn--quiet:hover{background:color-mix(in srgb,var(--text3) 14%,transparent);color:var(--text1)}

.v-btn--success-soft{background:color-mix(in srgb, var(--green) 14%, transparent);color:var(--green);border-color:color-mix(in srgb, var(--green) 38%, transparent)}
.v-btn--success-soft:hover{background:color-mix(in srgb, var(--green) 20%, transparent);border-color:var(--green)}
.v-btn--success:hover{background:color-mix(in srgb, var(--green) 88%, black);border-color:color-mix(in srgb, var(--green) 88%, black)}
html[data-theme="dark"] .v-btn--success{background:color-mix(in srgb, var(--green) 68%, #0f2724);border-color:color-mix(in srgb, var(--green) 68%, #0f2724)}
html[data-theme="dark"] .v-btn--success:hover{background:color-mix(in srgb, var(--green) 80%, #0f2724);border-color:color-mix(in srgb, var(--green) 80%, #0f2724)}
.v-btn--amber{background:color-mix(in srgb, var(--amber) 14%, transparent);color:var(--amber);border-color:color-mix(in srgb, var(--amber) 38%, transparent)}
.v-btn--amber:hover{background:color-mix(in srgb, var(--amber) 20%, transparent);border-color:var(--amber)}

.v-btn--sm{padding:6px var(--space-3);min-height:var(--ctrl-h-sm);font-size:var(--font-sm)}
.v-btn--lg{padding:var(--space-3) 22px;min-height:var(--ctrl-h-lg);font-size:var(--font-lg)}
.v-btn--md{padding:0 20px;min-height:40px;font-size:14px}

/* Responsive button labels — gebruik .btn-lbl-full + .btn-lbl-short voor compact mobile labeling */
.btn-lbl-short,.lbl-short{display:none}
.btn-lbl-full,.lbl-full{display:inline}
@media(max-width:700px){
  .btn-lbl-full,.lbl-full{display:none}
  .btn-lbl-short,.lbl-short{display:inline}
}

.v-iconbtn{
  display:inline-flex;align-items:center;justify-content:center;
  width:32px;height:32px;border-radius:var(--r-sm);
  background:var(--surface-2);color:var(--text2);
  border:var(--bd);cursor:pointer;
  transition:background var(--t-base,.15s),color var(--t-base,.15s),border-color var(--t-base,.15s);
}
.v-iconbtn:hover{background:var(--surface-hover);color:var(--text1)}
.v-iconbtn:focus-visible{outline:none;box-shadow:var(--ring)}
.v-iconbtn svg{width:15px;height:15px}

/* Badges / Chips / Pills */
.v-badge{
  display:inline-flex;align-items:center;gap:var(--space-1);
  padding:3px 9px;border-radius:var(--r-pill);
  font-size:var(--font-xs);font-weight:600;line-height:1.4;white-space:nowrap;
  background:var(--bg4);color:var(--text2);border:1px solid transparent;
}
.v-badge svg{width:10px;height:10px;flex:none;position:relative;top:-0.5px}
.v-badge--green {background:var(--green-light); color:var(--green);  border-color:transparent}
.v-badge--amber {background:var(--amber-light); color:var(--amber);  border-color:transparent}
.v-badge--red   {background:var(--red-light);   color:var(--red);    border-color:transparent}

/* .v-chip: canonieke definitie in de chips-sectie hieronder */
/* Tabellen */
.v-table{
  width:100%;border-collapse:collapse;font-size:var(--font-md);
  background:var(--surface);
}
.v-table th{
  text-align:left;font-size:var(--font-xs);font-weight:700;
  color:var(--text3);text-transform:uppercase;letter-spacing:.5px;
  padding:10px var(--space-3);border-bottom:1.5px solid var(--border);
  background:var(--surface-2);
}
.v-table td{
  padding:var(--space-3);border-bottom:1px solid var(--border);
  color:var(--text1);vertical-align:middle;
}
.v-table tbody tr:hover td{background:var(--surface-hover)}
.v-table tbody tr:last-child td{border-bottom:none}
.v-table--compact td{padding:var(--space-2) 10px}

/* Formulier-elementen */
.v-field{margin-bottom:var(--space-4)}
.v-label{
  display:block;font-size:var(--font-xs);font-weight:600;
  color:var(--text2);margin-bottom:5px;
  text-transform:uppercase;letter-spacing:.4px;
}
.v-input,.v-select,.v-textarea{
  width:100%;padding:10px var(--space-3);min-height:var(--ctrl-h);
  font-family:inherit;font-size:var(--font-md);
  background:var(--input-bg);color:var(--text1);
  border:var(--bd-ctrl);
  border-radius:var(--r-ctrl);
  outline:none;box-sizing:border-box;line-height:1.4;
  transition:border-color var(--t-base,.15s),box-shadow var(--t-base,.15s);
}
.v-input:focus,.v-select:focus,.v-textarea:focus{
  border-color:var(--accent);
  box-shadow:var(--ring);
}
.v-textarea{min-height:80px;resize:vertical}
/* Compacte veld-variant voor dense inline-editors (token-driven i.p.v. bespoke radius-4/font-11.5) */
.v-input.v-input--sm,.v-select.v-select--sm{height:var(--ctrl-h-sm);min-height:var(--ctrl-h-sm);padding:0 var(--space-2);font-size:var(--font-sm);border-radius:var(--r-sm)}
.v-select.v-select--sm{padding-right:26px;background-position:right 8px center}
.v-textarea.v-textarea--sm{min-height:52px;padding:6px var(--space-2);font-size:var(--font-sm);border-radius:var(--r-sm)}

/* Token/pill-invoer (.v-tokens) — e-mailadressen als pills (CC e.d.); volgt .email-field zodat de hoogte gelijk is aan Aan/Onderwerp. Gedreven door vorioTokens() in vorio-lib.js */
.v-tokens{display:flex;flex-wrap:wrap;align-items:center;gap:5px;width:100%;min-height:32px;padding:var(--space-1) 11px;background:var(--bg3);color:var(--text1);border:var(--bd);border-radius:var(--r-2);box-sizing:border-box;cursor:text;transition:border-color var(--t-base,.15s),box-shadow var(--t-base,.15s)}
.v-tokens:focus-within{border-color:var(--accent);box-shadow:var(--ring)}
/* Vormgrammatica gelijk aan .mcs-chip (spreekkamer): radius 99, 11px/600, 1.2px rand.
 Wél token-semantiek (zachte fill + ✕) i.p.v. de toggle-actief-stijl. */
.v-token{display:inline-flex;align-items:center;gap:var(--space-1);max-width:100%;background:color-mix(in srgb,var(--accent) 12%,transparent);color:var(--kc,var(--accent));border:1.2px solid color-mix(in srgb,var(--accent) 26%,transparent);border-radius:var(--r-pill);padding:2px var(--space-1) 2px 9px;font-size:11px;font-weight:600;line-height:1.4}
.v-token>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.v-token button{background:none;border:0;cursor:pointer;color:inherit;opacity:.55;display:inline-flex;align-items:center;padding:1px;border-radius:50%}
.v-token button:hover{opacity:1}
.v-token button svg{width:10px;height:10px}
/* Hogere specificiteit dan .email-field input, anders krijgt de interne input z'n eigen kader (dubbele rand). */
.v-tokens .v-tokens-inp,
.v-tokens .v-tokens-inp:focus{flex:1;min-width:120px;width:auto;border:0;outline:0;background:transparent;box-shadow:none;border-radius:0;min-height:0;color:var(--text1);font-family:var(--font-body,inherit);font-size:12px;padding:2px 0;line-height:1.4}
.v-select{
  height:var(--ctrl-h);        /* gelijk aan .v-input (was: groeide naar ~42px via min-height) */
  appearance:none;-webkit-appearance:none;
  padding-top:5px;padding-bottom:5px;  /* DM Sans descenders (g/j/p) niet afklemmen; werkt bij ctrl-h 34-36 (content-box >= regelhoogte). 2026-09-16 */
  padding-right:var(--space-6);
  background-image:var(--v-chevron);
  background-repeat:no-repeat;background-position:right 12px center;
}

/* Modal / Overlay */
.v-overlay{
  position:fixed;inset:0;z-index:var(--z-modal,9999);
  background:var(--overlay-bg,rgba(0,0,0,.45));
  backdrop-filter:var(--overlay-blur,blur(2px));-webkit-backdrop-filter:var(--overlay-blur,blur(2px));
  display:flex;align-items:center;justify-content:center;
  padding:var(--space-3);
  visibility:hidden;opacity:0;transition:opacity .2s;
}
.v-overlay.open{visibility:visible;opacity:1}
.v-modal{
  background:var(--surface);color:var(--text1);
  border:var(--bd);
  border-radius:var(--r-lg);
  width:100%;max-width:var(--modal-md);max-height:calc(100vh - 60px);
  display:flex;flex-direction:column;
  overflow:hidden;
  box-shadow:var(--shadow-lg);
}
.v-modal__head{
  display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);
  padding:var(--space-4) var(--space-5);
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.v-modal__title{font-size:var(--font-lg);font-weight:700;color:var(--text1);margin:0}
.v-modal__body{
  padding:var(--space-4) var(--space-5);
  overflow-y:auto;flex:1;
}
.v-modal__foot{
  padding:var(--space-3) var(--space-5);
  border-top:1px solid var(--border);
  display:flex;gap:var(--space-2);justify-content:flex-end;
  flex-shrink:0;background:var(--surface-2);
}
.v-modal--sm{max-width:var(--modal-sm)}
.v-modal--lg{max-width:var(--modal-lg)}

/* Brand-modal-header
 Light: dynamische kantoor-kleur (var(--p)) met witte tekst/X/inverted btn
 Dark : matcht reguliere modal-head (var(--bg2)) — geen felle kleur op donker */
.v-modal__head--brand{background:var(--p);border-bottom:1px solid color-mix(in srgb,#000 12%,var(--p))}
/* Brand-header loopt tot de modalrand: de lichte --border tekent daar een lijn overheen. border-color:transparent helpt niet (background-clip:border-box laat wit doorlopen), dus border-width:0; de schaduw bakent al af */
.v-modal:has(> .v-modal__head--brand){border-width:0}
.v-modal__head--brand .v-modal__title{color:#fff}
.v-modal__head--brand .v-btn--primary{background:#fff;color:var(--kc);border-color:#fff}
.v-modal__head--brand .v-btn--primary:hover{background:rgba(255,255,255,.92);color:var(--kc)}

/* Dark mode: modal-body & brand-header op donker oppervlak (anders blijven inputs/labels mismatch met witte modal) */
html[data-theme="dark"] .modal{background:var(--bg2);color:var(--text1)}
html[data-theme="dark"] .modal-header{border-bottom-color:var(--border)}
html[data-theme="dark"] .v-modal__head--brand{background:var(--bg2);border-bottom:1px solid var(--border)}
html[data-theme="dark"] .v-modal__head--brand .v-modal__title{color:var(--text1)}
html[data-theme="dark"] .v-modal__head--brand .v-btn--primary{background:var(--p);color:#fff;border-color:var(--p)}
html[data-theme="dark"] .v-modal__head--brand .v-btn--primary:hover{filter:brightness(1.08)}

@media(max-width:480px){
  .v-modal{max-width:100%;border-radius:var(--r);max-height:calc(100vh - 24px)}
  .v-modal__head,.v-modal__body{padding:var(--space-3) var(--space-4)}
  .v-modal__foot{padding:var(--space-3) var(--space-4);flex-wrap:wrap}
  .v-modal__foot .v-btn{flex:1 1 calc(50% - 4px)}
}

/* Search-input met icoon (zoek-balk patroon) */
.v-search{
  position:relative;display:flex;align-items:center;
}
.v-search__input{
  width:100%;padding:0 var(--space-3) 0 36px;min-height:var(--ctrl-h);
  font-family:inherit;font-size:var(--font-md);
  background:var(--input-bg);color:var(--text1);
  border:var(--bd-ctrl);
  border-radius:var(--r-sm);outline:none;box-sizing:border-box;
  transition:border-color var(--t-base,.15s),box-shadow var(--t-base,.15s);
}
.v-search__input:focus{border-color:var(--p,var(--accent));box-shadow:none}
.v-search__icon{
  position:absolute;left:12px;color:var(--text3);
  width:14px;height:14px;pointer-events:none;
}

/* Empty-state */
.v-empty{
  text-align:center;padding:var(--space-7) var(--space-4);
  display:flex;flex-direction:column;align-items:center;
  color:var(--text3);
}
.v-empty__ico{
  width:48px;height:48px;border-radius:50%;
  background:var(--surface-2);color:var(--text3);
  display:inline-flex;align-items:center;justify-content:center;
  margin-bottom:var(--space-3);
}
.v-empty__ico svg{width:24px;height:24px;stroke-width:2;vector-effect:non-scaling-stroke}
.v-empty__title{font-size:var(--font-lg);font-weight:600;color:var(--text2);margin:0 0 var(--space-1)}
.v-empty__sub{font-size:var(--font-md);color:var(--text3);max-width:340px;margin:0 auto;line-height:1.5}

/* Mobile-safety voor v-* components */
@media(max-width:760px){
  .v-stat-strip{grid-template-columns:repeat(2,1fr);gap:var(--space-2)}
  .v-stat{padding:var(--space-3)}
  .v-table{font-size:var(--font-sm)}
}
@media(max-width:480px){
  .v-card{padding:var(--space-3) var(--space-4);border-radius:var(--r)}
  .v-btn{padding:9px 14px}
}

/* iOS date-input alignment fix
 iOS Safari toont datum-tekst rechts-uitgelijnd in <input type="date">.
 Forceer links + neutraliseer default appearance voor consistentie. */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"]{
  text-align:left;
  -webkit-appearance:none;
  appearance:none;
  font-family:inherit;
}

/* Mobile responsive — gedeeld voor alle pages */
@media (max-width: 600px) {
  /* Filter chips — kantoor pills compacter zonder logo-overlap */
  .filter-chips { gap: 5px }
  .chip, .v-chip { padding: 6px 11px; font-size: 11.5px; max-width: calc(50% - 6px) }
  .chip img { max-height: 14px; width: auto; flex-shrink: 0 }
  .chip-cnt, .v-chip-cnt { padding: 1px 5px; font-size: 9.5px; margin-left: 3px }

  /* Stat grid — 2-koloms wrap, niet horizontaal scrollen */
  .stats { gap: 6px }
  .stats > .stat-card,
  .stats > .v-stat-card { flex: 1 1 calc(50% - 6px); min-width: calc(50% - 6px) }
  .stat-num{ font-size: 20px }
  .stat-lbl{ font-size: 11px }

  /* Filter-row — alles stack-bar onder elkaar als 't krap is */
  .filterbar { gap: 6px; flex-wrap: wrap }
  .filterbar > select,
  .filterbar > input { flex: 1 1 100%; min-width: 0 }
  /* Chip-groepen expliciet meenemen: een filterbalk die niet op een div
   eindigt (bv. een trailing <span>) liet .filter-chips anders zijn
   margin-left:auto houden, waardoor de rij buiten de viewport liep. */
  .filterbar > .filter-chips,
  .filterbar > div:last-child { width: 100%; min-width: 0; margin-left: 0 }

  /* Page padding compacter op mobile */
  .page { padding: var(--space-3) 10px }
  .topbar { padding: 0 var(--space-3); gap: var(--space-2) }
}

@media (max-width: 400px) {
  /* Extra-narrow — kantoor chips ook stacken als nodig */
  .chip, .v-chip { max-width: 100% }
  .filter-chips .chip img { max-height: 13px }
}

/* Status-dropdown (gekleurde dot per optie)
 Shared component voor alle aanklikbare status-pills (offertes, dossiers,
 debiteuren, ondertekenen, etc). Open via window.vorioStatusDd.open(...). */
.v-statusdd{
  position:fixed; z-index:9999;
  background:var(--bg2); border:var(--bd); border-radius:var(--r);
  box-shadow:var(--shadow-md);
  padding:var(--space-1); min-width:170px;
  font-size:12.5px; font-family:var(--font);
  animation:v-statusdd-in var(--t-fast,.12s) ease-out;
}
@keyframes v-statusdd-in{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
.v-statusdd__item{
  display:flex; align-items:center; gap:9px;
  padding:7px var(--space-3); border-radius:var(--r-2); cursor:pointer;
  color:var(--text1); font-weight:500;
  transition:background var(--t-fast,.12s);
}
.v-statusdd__item:hover{ background:var(--bg3) }
.v-statusdd__item.is-current{
  background:var(--bg3); font-weight:700;
}
.v-statusdd__dot{
  width:9px; height:9px; border-radius:50%;
  background:var(--dot,var(--text3));
  flex-shrink:0;
  box-shadow:0 0 0 2px color-mix(in srgb, var(--dot, var(--text3)) 25%, transparent);
}

/* Status-dropdown · optionele Geschiedenis-sectie
 Gedeeld (offertes/debiteuren/…): tijdlijn met icoon-chips boven de wijzig-opties.
 Kleur = betekenis (grijs/blauw/groen/rood/amber), glyph = welke gebeurtenis.       */
.v-statusdd--hist{ min-width:264px; max-width:300px; max-height:min(76vh,560px); overflow-y:auto; }
.v-dd-histwrap:empty{ display:none }
.v-dd-svg{ width:13px; height:13px; display:block; fill:none; stroke:currentColor }
.v-dd-hist-head{ display:flex; align-items:center; gap:6px; padding:var(--space-2) 10px 6px; font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text3) }
.v-dd-hist-head .v-dd-svg{ width:12px; height:12px }
.v-dd-hist{ padding:2px 10px 0 }
.v-dd-hist--laden{ padding:2px 2px var(--space-2); color:var(--text3); font-size:11.5px }
.v-dd-ev{ display:flex; gap:9px }
.v-dd-ev__rail{ display:flex; flex-direction:column; align-items:center; flex-shrink:0 }
.v-dd-ev__ico{ width:20px; height:20px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-shrink:0 }
.v-dd-ev__ico .v-dd-svg{ width:12px; height:12px }
.v-dd-ev__line{ flex:1; width:1.5px; background:var(--border); margin:2px 0 }
.v-dd-ev__body{ flex:1; min-width:0; padding-bottom:10px }
.v-dd-ev:last-child .v-dd-ev__body{ padding-bottom:2px }
.v-dd-ev__lbl{ font-size:12px; font-weight:600; color:var(--text1); line-height:1.3 }
.v-dd-ev__dt{ font-size:10px; color:var(--text3); margin-top:1px }
.v-dd-div{ height:1px; background:var(--border); margin:6px 6px }
.v-dd-sub{ padding:2px 10px var(--space-1); font-size:10px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text3) }
.v-dd-ev__ico.tone-grey{ background:var(--bg4); color:var(--text3) }
.v-dd-ev__ico.tone-blue{ background:var(--pg); color:var(--kc,var(--p)) }
.v-dd-ev__ico.tone-green{ background:var(--green-bg); color:var(--green) }
.v-dd-ev__ico.tone-red{ background:var(--red-bg); color:var(--red) }
.v-dd-ev__ico.tone-amber{ background:var(--amber-bg); color:var(--amber) }
[data-theme="dark"] .v-dd-ev__ico.tone-green{ background:rgba(34,197,94,.18); color:#86efac }
[data-theme="dark"] .v-dd-ev__ico.tone-red{ background:rgba(220,38,38,.18); color:#fca5a5 }
[data-theme="dark"] .v-dd-ev__ico.tone-amber{ background:rgba(217,119,6,.20); color:#fcd34d }

/* Vorio language+theme bar (.lt-bar) — canoniek.
 Pill: [🌐 NL] | [🌙] (3 cellen: lang-toggle / sep / theme-toggle).
 Klik op lang flipt NL↔EN. Dark start auto via prefers-color-scheme. */
.lt-bar{display:inline-flex;align-items:stretch;background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.40);border-radius:var(--r-2);padding:2px;gap:1px;line-height:1;font-family:inherit;flex-shrink:0}
.lt-bar>button,.lt-bar>a{background:transparent;border:0;color:#fff;font-size:11.5px;font-weight:700;letter-spacing:.4px;padding:6px 10px;cursor:pointer;font-family:inherit;border-radius:var(--r-sm);display:inline-flex;align-items:center;justify-content:center;gap:6px;transition:background var(--t-fast,.12s);line-height:1;text-decoration:none}
.lt-bar>button:hover,.lt-bar>a:hover{background:rgba(255,255,255,.16)}
.lt-bar-lang svg{width:13px;height:13px;opacity:.88;flex-shrink:0}
.lt-bar-sep{width:1px;background:rgba(255,255,255,.32);margin:5px 2px;flex-shrink:0;align-self:stretch}
.lt-bar-theme{padding:6px 9px}
.lt-bar-theme svg{width:13px;height:13px;display:block}
.lt-bar-theme .icon-sun{display:none}
[data-theme="dark"] .lt-bar-theme .icon-moon{display:none}
[data-theme="dark"] .lt-bar-theme .icon-sun{display:block}
/* Foot-strip context: mode-aware neutraal (var(--text2)-based) — canonical voor succes/status/offertes pagina's */
/* Footer-variant in dezelfde pill-maten als de vorio-form-header lt-bar */
.foot-strip .lt-bar{background:var(--bg, #ffffff);border:1px solid var(--line, #e2e8f0);border-radius:var(--r-pill);padding:3px 6px;gap:2px;align-items:center;overflow:visible}
.foot-strip .lt-bar>button,.foot-strip .lt-bar>a{height:28px;background:transparent;border:0;color:var(--text2, #475569);font-size:12.5px;font-weight:600;letter-spacing:0;padding:0 10px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:6px;cursor:pointer;font-family:inherit;text-decoration:none;transition:background var(--t-base,.15s),color var(--t-base,.15s)}
.foot-strip .lt-bar>button:hover,.foot-strip .lt-bar>a:hover{background:color-mix(in srgb, var(--text1, #0f172a) 4%, transparent);color:var(--text1, #0f172a)}
.foot-strip .lt-bar>button.actief,.foot-strip .lt-bar>a.actief{background:var(--p, #1a6bdc);color:#fff}
.foot-strip .lt-bar>button.actief:hover,.foot-strip .lt-bar>a.actief:hover{background:color-mix(in srgb, var(--p, #1a6bdc) 88%, black);color:#fff}
.foot-strip .lt-bar-sep{display:none}

/* Vorio canonical invalid-state — alleen border-color verandert bij validatie-fout,
 géén achtergrond-fill, géén rode tekst. Doel: cliënt-friendly, niet aggressive. */
.is-invalid,input.is-invalid,select.is-invalid,textarea.is-invalid,.vmp-trigger.is-invalid{border-color:var(--red,#dc2626);box-shadow:0 0 0 1px var(--red,#dc2626) inset}
.is-invalid:focus,input.is-invalid:focus,select.is-invalid:focus,textarea.is-invalid:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--red,#dc2626) 15%,transparent),0 0 0 1px var(--red,#dc2626) inset;outline:none}

/* Font-sharpness — crispness via -webkit-font-smoothing. */
.stat-label{ letter-spacing:.85px }
/* ICON-SHARPNESS TEST — geometricPrecision + uniform stroke */
svg{ shape-rendering:geometricPrecision }
.nav-icon,.adm-icon-btn svg,.btn svg,svg[class*='ic-']{ vector-effect:non-scaling-stroke }

/* TOPBAR LIJN-UNIFICATIE — dark mode dunner + zelfde tint als sidebar logo-lijn */
html[data-theme="dark"] .topbar,
html[data-theme="dark"] .content-topbar,
html[data-theme="dark"] .kb-topbar,
html[data-theme="dark"] #embedNav{
  border-bottom:1px solid rgba(255,255,255,.07);
}

/* Multi-pick popover (canonical, gebruikt door calendar + dossiers + ...) */
.vmp-pop{position:absolute;top:100%;left:0;margin-top:6px;background:var(--bg2);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--shadow-lg);padding:var(--space-2) 6px;min-width:230px;max-height:340px;overflow-y:auto;z-index:200;font-family:var(--font-body,inherit)}
.vmp-hd{display:flex;align-items:center;justify-content:space-between;padding:var(--space-1) 10px var(--space-2);border-bottom:1px solid var(--border);margin-bottom:6px}
.vmp-hd-act{background:transparent;border:none;font-size:11px;font-weight:600;cursor:pointer;color:var(--text3);padding:3px 6px;border-radius:var(--r-sm);font-family:inherit;transition:color var(--t-fast,.12s),background var(--t-fast,.12s)}
.vmp-hd-act:hover{background:var(--bg);color:var(--text)}
.vmp-hd-act.primair{color:var(--kc)}
.vmp-grp{font-size:9.5px;font-weight:700;text-transform:uppercase;letter-spacing:.7px;color:var(--text3);padding:7px 10px var(--space-1);display:flex;align-items:center;justify-content:space-between}
.vmp-grp-cnt{font-size:9px;color:var(--text3);background:var(--bg);padding:1px 5px;border-radius:var(--r-xs)}
.vmp-row{display:flex;align-items:center;gap:9px;padding:6px 10px;border-radius:var(--r-2);cursor:pointer;font-size:12.5px;color:var(--text);transition:background var(--t-fast,.12s);user-select:none}
.vmp-row:hover{background:var(--bg)}
.vmp-row input[type="checkbox"]{cursor:pointer;accent-color:var(--p);margin:0;flex-shrink:0}
.vmp-row .vmp-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;background:var(--text3);box-shadow:0 0 0 2px rgba(0,0,0,.04)}
.vmp-row .vmp-nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vmp-row.uit{color:var(--text3)}
.vmp-row.uit .vmp-nm{opacity:.7}
.vmp-empty{padding:14px 10px;text-align:center;color:var(--text3);font-size:12px;font-style:italic}
.vmp-trigger{appearance:none;-webkit-appearance:none;-moz-appearance:none;height:var(--ctrl-h);padding:0 var(--space-6) 0 11px;cursor:pointer;border-radius:var(--r-2);border:var(--bd);background-color:var(--bg2);background-image:var(--v-chevron);background-repeat:no-repeat;background-position:right 10px center;font-family:inherit;font-size:12.5px;color:var(--text);text-align:left;transition:border-color var(--t-base,.15s),color var(--t-base,.15s),box-shadow var(--t-base,.15s);outline:none;box-sizing:border-box;line-height:36px}
.vmp-trigger:hover,.vmp-trigger:focus{border-color:var(--p);box-shadow:var(--ring)}
.vmp-trigger.actief{border-color:var(--p);color:var(--kc)}
.vmp-filter-wrap{position:sticky;top:0;background:var(--bg2);padding:var(--space-2) var(--space-2) 10px;margin:-8px -6px var(--space-1);border-bottom:1px solid var(--border);z-index:1}
.vmp-filter{width:100%;padding:6px 10px;border:1.5px solid var(--p);border-radius:var(--r-2);font-size:12.5px;font-family:inherit;outline:none;background:var(--bg2);color:var(--text)}
.vmp-filter:focus{box-shadow:var(--ring)}

.vmp-pillrij{display:flex;flex-wrap:wrap;gap:6px;padding:0 10px var(--space-2)}
.vmp-pill{display:inline-flex;align-items:center;padding:5px var(--space-3);font-size:12px;font-weight:600;background:var(--bg2);color:var(--text);border:var(--bd);border-radius:var(--r-xl);cursor:pointer;transition:all var(--t-fast,.12s);font-family:inherit;line-height:1.3}
.vmp-pill:hover{border-color:var(--p);color:var(--kc)}
.vmp-pill.on{background:color-mix(in srgb,var(--p) 14%,transparent);color:var(--kc);border-color:var(--p)}
.vmp-pill.on::before{content:"";display:inline-block;width:5px;height:5px;border-radius:50%;background:currentColor;margin-right:6px}
.vmp-pill.on.primair{background:var(--p);color:#fff;border-color:var(--p)}
.vmp-pill.on.primair::before{background:#fff}

/* DATA-LIST COMPONENTS — canonical card-list (A) + data-rows (C) */
/* Doel: .v-card-list voor "thing-with-status" lijsten (kantoren/dossiers/offertes);
 .v-data-rows voor dichte/financiële/log-tabellen (BTW/log/error). Status-pills delen. */
/* Status-pills (gedeeld) */
.v-pill{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border-radius:var(--r-pill);font-size:11px;font-weight:600;line-height:1.4;white-space:nowrap;border:1px solid transparent}
/* Pill die binnen een smalle (grid)kolom moet blijven: knipt af met ellipsis i.p.v. over de buurkolom heen te lopen */
.v-pill--trunc{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
.v-pill .v-pill-dot{width:5px;height:5px;border-radius:50%;background:currentColor;flex-shrink:0}
.v-pill-actief{background:#e7f6ec;color:var(--green);border-color:transparent}
.v-pill-verzonden{background:#e8f0fd;color:var(--kc);border-color:transparent}
.v-pill-wacht{background:#fdf3e0;color:#b45309;border-color:transparent}
.v-pill-fout{background:#fdecec;color:#c02929;border-color:transparent}
.v-pill-inactief{background:#f1f5f9;color:#64748b;border-color:transparent}
.v-pill-neutraal{background:var(--bg4,#f1f5f9);color:var(--text2,#475569);border-color:transparent}
.v-pill-oranje{background:#fdeede;color:#c2410c;border-color:transparent}
.v-pill-teal{background:#e2f5f1;color:#0f766e;border-color:transparent}
.v-pill-paars{background:color-mix(in srgb,var(--purple) 12%,transparent);color:var(--purple);border-color:transparent}
.v-pill-kc{background:color-mix(in srgb,var(--kc) 13%,transparent);color:var(--kc);border-color:transparent}
[data-theme="dark"] .v-pill-neutraal{background:rgba(255,255,255,.06);color:var(--text2);border-color:var(--border)}
/* Plan-pills — matchen offerte/onboarding 3-stop gradients (basis lichtblauw, pro navy-blauw, enterprise deep-navy) */
/* Plan-pills aligned met hero brand-gradient: lichtblauw (Basis) → blauw (Pro) → navy (Enterprise) */
.v-pill-plan-basis{background:#e8f0fb;color:var(--vorio-brand);border-color:color-mix(in srgb,var(--p) 28%,transparent)}
.v-pill-plan-pro{background:var(--vorio-brand);color:#fff;border-color:var(--vorio-brand)}
.v-pill-plan-enterprise{background:#0a1d3a;color:#fff;border-color:#0a1d3a}

/* Variant A — card-list (clickable cards met icon+body+pills+actions) */
.v-card-list{display:flex;flex-direction:column;gap:var(--space-2)}
.v-cl-row{display:flex;align-items:center;gap:14px;padding:14px var(--space-4);background:var(--bg2);border:1px solid var(--border-soft,var(--border));border-radius:var(--r);transition:all var(--t-base,.15s);text-decoration:none;color:inherit}
.v-cl-row.is-link{cursor:pointer}
.v-cl-row.is-link:hover{background:var(--card,#fff);border-color:var(--p);transform:translateX(2px)}
.v-cl-icon{width:38px;height:38px;flex-shrink:0;border-radius:var(--r-2);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;background:#f0f5ff;color:var(--kc);overflow:hidden}
.v-cl-icon.has-logo{background:#fff;padding:3px;border:1px solid var(--border-soft,var(--border))}
.v-cl-icon.has-logo img{width:100%;height:100%;object-fit:contain;display:block}
.v-cl-icon.is-colored{background:linear-gradient(135deg,var(--ic-bg,#1a6bdc),color-mix(in srgb,var(--ic-bg,#1a6bdc) 70%,#000));color:#fff}
.v-cl-body{flex:1;min-width:0}
.v-cl-title{font-size:13.5px;font-weight:600;color:var(--text);display:flex;align-items:center;gap:var(--space-2);flex-wrap:wrap}
.v-cl-title .v-cl-tag{font-size:11.5px;color:var(--text3);background:#f1f5f9;padding:2px var(--space-2);border-radius:var(--r-sm);font-weight:500;font-family:var(--font-mono,ui-monospace,SFMono-Regular,Menlo,monospace)}
.v-cl-meta{font-size:11.5px;color:var(--text3);margin-top:var(--space-1);display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.v-cl-meta .v-cl-sep{color:var(--text4)}
.v-cl-pills{display:flex;gap:6px;align-items:center;flex-shrink:0}
.v-cl-actions{display:flex;gap:6px;flex-shrink:0}
.v-cl-storage{display:grid;grid-template-columns:120px 1fr 50px;gap:10px;align-items:center;margin-top:6px;font-size:11.5px;color:var(--text3)}
.v-cl-storage-label{font-variant-numeric:tabular-nums}
.v-cl-storage-bar{height:5px;border-radius:3px;background:var(--border);overflow:hidden;position:relative}
.v-cl-storage-bar > span{display:block;height:100%;background:var(--p);width:var(--bar-pct,0%)}
.v-cl-storage.is-warning .v-cl-storage-bar > span,.v-cl-storage.is-warning .v-cl-storage-pct{background:var(--amber);color:var(--amber)}
.v-cl-storage.is-danger .v-cl-storage-bar > span,.v-cl-storage.is-danger .v-cl-storage-pct{background:var(--red);color:var(--red)}
.v-cl-storage-pct{font-weight:600;font-variant-numeric:tabular-nums;text-align:right;color:var(--kc)}
.v-cl-verloop.is-verlopen{color:var(--red)}

/* Variant C — data-rows (dichte tabel met grid + numerieke uitlijning)
 Kolombreedten worden per-tabel injected via inline --cols custom-property,
 bv. style="--cols: 90px 1fr 100px auto" */
.v-data-rows{display:flex;flex-direction:column;background:var(--bg2)}
.v-dr-head{display:grid;grid-template-columns:var(--cols,1fr);gap:var(--space-4);padding:9px 14px;border-bottom:1.5px solid var(--border);font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;font-weight:600;color:var(--text3)}
.v-dr-row{display:grid;grid-template-columns:var(--cols,1fr);gap:var(--space-4);align-items:center;min-height:var(--row-h);padding:var(--space-2) 14px;border-bottom:1px solid var(--border-soft,var(--border));font-size:13px;color:var(--text);transition:background var(--t-fast,.12s)}
.v-dr-row:hover{background:var(--row-hover)}
.v-dr-row:last-child,.v-dr-row:has(+ div[style*="display:none"]:last-child){border-bottom:none}
.v-dr-row strong{font-weight:600;color:var(--text)}
.v-dr-row .v-dr-num{text-align:right;font-variant-numeric:tabular-nums}
.v-dr-row .v-dr-num.is-positive{color:var(--green,#16a34a);font-weight:600}
.v-dr-row .v-dr-num.is-total{font-weight:700}
.v-dr-row .v-dr-muted{color:var(--text3);font-size:12.5px}
.v-dr-row .v-dr-sub{color:var(--text3);font-size:12px;margin-top:2px}
.v-dr-head .v-dr-num{text-align:right}
/* offertes-lijst: bedrag lucht t.o.v. status */
.v-data-rows:has(#offerteTbody) .v-dr-num,
.v-data-rows:has(#offerteTbody) .v-dr-right{padding-right:14px}
/* Gridcellen mogen krimpen tot onder hun contentbreedte, zodat lange waarden afknippen binnen hun eigen kolom */
.v-dr-row>span,.v-dr-head>span{min-width:0}

/* Compact icon-buttons binnen rows (overal hergebruikbaar) */
.v-row-iconbtn{width:var(--row-icon);height:var(--row-icon);flex:0 0 var(--row-icon);display:inline-flex;align-items:center;justify-content:center;background:transparent;border:1px solid transparent;border-radius:var(--r-2);color:var(--text3);cursor:pointer;transition:background .16s ease,color .16s ease,border-color .16s ease;text-decoration:none}
.v-row-iconbtn:hover{color:var(--kc,var(--p));background:color-mix(in srgb,var(--p) 9%,transparent);border-color:color-mix(in srgb,var(--p) 18%,transparent)}
.v-row-iconbtn:active{background:color-mix(in srgb,var(--p) 15%,transparent)}
.v-row-iconbtn:focus-visible{outline:2px solid color-mix(in srgb,var(--p) 55%,transparent);outline-offset:1px}
.v-row-iconbtn.is-danger:hover{color:var(--red-solid);border-color:color-mix(in srgb,var(--red-solid) 20%,transparent);background:color-mix(in srgb,var(--red-solid) 9%,transparent)}
.v-row-iconbtn--send{color:var(--p,#1a6bdc);border-color:color-mix(in srgb,var(--p,#1a6bdc) 32%,transparent)}
.v-row-iconbtn--send:hover{color:#fff;background:var(--p,#1a6bdc);border-color:var(--p,#1a6bdc)}
.v-row-iconbtn.v-row-iconbtn--onboard{color:#16a34a;border-color:color-mix(in srgb,#16a34a 32%,transparent)}
.v-row-iconbtn.v-row-iconbtn--onboard:hover{color:#16a34a;background:color-mix(in srgb,#16a34a 14%,transparent);border-color:color-mix(in srgb,#16a34a 55%,transparent)}
html[data-theme="dark"] .v-row-iconbtn.v-row-iconbtn--onboard{color:#4ade80;border-color:color-mix(in srgb,#4ade80 32%,transparent)}
html[data-theme="dark"] .v-row-iconbtn.v-row-iconbtn--onboard:hover{color:#4ade80;background:color-mix(in srgb,#4ade80 18%,transparent);border-color:color-mix(in srgb,#4ade80 55%,transparent)}
.v-backlink{color:var(--kc);text-decoration:none;transition:opacity var(--t-base,.15s) ease}
.v-backlink:hover{text-decoration:underline;text-underline-offset:2px;opacity:.82}
.v-row-iconbtn svg{width:14px;height:14px;display:block;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
/* Modifiers: icon-btn schaalt mee met sibling .v-btn in mixed action-clusters
 --btn    = match .v-btn (36px)
 --btn-sm = match .v-btn--sm (32px) */
.v-row-iconbtn--btn{width:36px;height:36px;flex:0 0 36px;border-radius:var(--r-2)}
.v-row-iconbtn--btn svg{width:15px;height:15px}
.v-row-iconbtn--btn-sm{width:32px;height:32px;flex:0 0 32px;border-radius:var(--r-2)}
.v-row-iconbtn--btn-sm svg{width:14px;height:14px}
/* Canon rij-actiemenu (.v-rowmenu kebab) — in base zodat het op ALLE surfaces beschikbaar is; + __bij sub-label + disabled. Gedrag: window.vRowMenu (vorio-lib.js). */
.v-rowmenu{position:relative;display:inline-flex}
.v-rowmenu__pop{position:fixed;z-index:9000;min-width:204px;background:var(--bg2);border:var(--bd);border-radius:var(--r-2);box-shadow:var(--shadow-lg);padding:5px;display:none}
.v-rowmenu.is-open .v-rowmenu__pop{display:block}
.v-rowmenu__item{display:flex;align-items:center;gap:10px;width:100%;min-height:34px;padding:7px 10px;border:0;background:none;border-radius:var(--r-sm);font-family:inherit;font-size:13px;color:var(--text1);cursor:pointer;text-align:left;text-decoration:none;white-space:nowrap;box-sizing:border-box}
.v-rowmenu__item:hover{background:color-mix(in srgb,var(--text3) 13%,transparent)}
.v-rowmenu__item:disabled{color:var(--text3);cursor:default}
.v-rowmenu__item:disabled:hover{background:transparent}
.v-rowmenu__item svg{width:15px;height:15px;flex:0 0 auto;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.v-rowmenu__item.is-danger{color:var(--red)}
.v-rowmenu__item.is-danger:hover{background:color-mix(in srgb,var(--red) 10%,transparent)}
.v-rowmenu__bij{margin-left:auto;font-size:11px;font-weight:500;color:var(--text3);white-space:nowrap}
.v-rowmenu__sep{height:1px;background:var(--border);margin:var(--space-1) 2px}

/* Row-utilities binnen .v-data-rows */
.v-dr-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end}
.v-dr-cb{display:flex;align-items:center;justify-content:center}
.v-dr-nowrap{white-space:nowrap}
.v-dr-right{text-align:right}
.v-dr-sort.v-dr-right{justify-self:end}
.v-dr-center{text-align:center}
.v-dr-sort.v-dr-center{justify-self:center}
.v-dr-empty{color:var(--text4)}
.v-dr-inline-form{display:inline}
.v-dr-clamp2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.4;max-height:2.8em;font-size:12px}
.v-dr-p{font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.v-dr-ellip{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.v-dr-sort{cursor:pointer;display:inline-flex;align-items:center;gap:var(--space-1);user-select:none}
.v-dr-sort:hover{color:var(--text2)}
.v-dr-sort .sic{display:none;align-items:center}
.v-dr-sort .sic svg{width:11px;height:11px;display:block;color:var(--kc);will-change:transform}
.v-dr-sort.actief{color:var(--kc)}
.v-dr-sort.actief .sic{display:inline-flex}
.v-dr-meer{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:var(--r-pill);font-size:10.5px;font-weight:600;color:var(--text3);background:var(--bg4);vertical-align:middle}

/* Dark mode tweaks */
[data-theme="dark"] .v-cl-row{background:var(--bg2);border-color:var(--border)}
[data-theme="dark"] .v-cl-row.is-link:hover{background:rgba(255,255,255,.04)}
[data-theme="dark"] .v-cl-icon:not(.has-logo){background:color-mix(in srgb,var(--p) 15%,transparent)}
[data-theme="dark"] .v-cl-title .v-cl-tag{background:rgba(255,255,255,.06);color:var(--text3)}
[data-theme="dark"] .v-pill-actief{background:rgba(34,197,94,.15);border-color:transparent;color:#4ade80}
[data-theme="dark"] .v-pill-verzonden{background:var(--kc-fill);border-color:transparent;color:var(--kc)}
[data-theme="dark"] .v-pill-plan-basis{background:rgba(126,174,255,.12);border-color:rgba(126,174,255,.35);color:#7eaeff}
[data-theme="dark"] .v-pill-plan-pro{background:var(--vorio-brand);border-color:var(--vorio-brand);color:#fff}
[data-theme="dark"] .v-pill-wacht{background:rgba(217,119,6,.16);border-color:transparent;color:#fbbf24}
[data-theme="dark"] .v-pill-plan-enterprise{background:#0f2744;border-color:#15315a;color:#e2e8f0}
[data-theme="dark"] .v-pill-inactief{background:rgba(255,255,255,.06);border-color:transparent;color:var(--text3)}
[data-theme="dark"] .v-pill-oranje{background:rgba(234,88,12,.18);color:#fdba74;border-color:transparent}
[data-theme="dark"] .v-pill-teal{background:rgba(20,184,166,.16);color:#5eead4;border-color:transparent}
[data-theme="dark"] .v-pill-paars{background:rgba(167,139,250,.18);color:#c4b5fd;border-color:transparent}
[data-theme="dark"] .v-pill-fout{background:rgba(239,68,68,.15);border-color:transparent;color:#f0a0a0}
[data-theme="dark"] .v-row-iconbtn{background:transparent;border-color:transparent}
[data-theme="dark"] .v-row-iconbtn:hover{color:var(--kc,var(--p));background:color-mix(in srgb,var(--kc,var(--p)) 16%,transparent);border-color:color-mix(in srgb,var(--kc,var(--p)) 34%,transparent)}
[data-theme="dark"] .v-row-iconbtn.is-danger:hover{color:#f87171;background:color-mix(in srgb,#f87171 15%,transparent);border-color:color-mix(in srgb,#f87171 32%,transparent)}

/* Mobile (≤640px): card-list blijft prima, data-rows wordt card met cb rechtsboven + actions rechtsonder.
 Wide-tables (.mw-tbl, .cp-off-tbl, .cp-ond-tbl) opt-out — die scrollen horizontaal, geen card-view. */
@media (max-width:640px){
  .v-cl-row{flex-wrap:wrap;gap:10px}
  .v-cl-pills,.v-cl-actions{width:100%;justify-content:flex-start}
  .v-data-rows:not(.mw-tbl):not(.cp-off-tbl):not(.cp-ond-tbl):not(.cp-ai-tbl) .v-dr-head{display:none}
  .v-data-rows:not(.mw-tbl):not(.cp-off-tbl):not(.cp-ond-tbl):not(.cp-ai-tbl) .v-dr-row{grid-template-columns:1fr;gap:6px;padding:14px;position:relative;border:var(--bd);border-radius:var(--r);background:var(--bg2);margin-bottom:10px;min-height:auto}
  /* Alleen rijen met een actiekolom reserveren voetruimte voor de absoluut
   gepositioneerde .v-dr-actions; rijen zonder acties hielden anders 48px
   dode ruimte onderin de kaart. */
  .v-data-rows:not(.mw-tbl):not(.cp-off-tbl):not(.cp-ond-tbl) .v-dr-row:has(.v-dr-actions){padding-bottom:var(--space-7)}
  .v-data-rows:not(.mw-tbl):not(.cp-off-tbl):not(.cp-ond-tbl) .v-dr-row:last-child{border-bottom:1px solid var(--border)}
  .v-data-rows:not(.mw-tbl):not(.cp-off-tbl):not(.cp-ond-tbl) .v-dr-row .v-dr-num{text-align:left}
  .v-data-rows:not(.mw-tbl):not(.cp-off-tbl):not(.cp-ond-tbl) .v-dr-row .v-dr-right{text-align:left}
  /* Formuliervelden krimpen mee: in kaartweergave is elke cel volle breedte */
  .v-data-rows:not(.mw-tbl):not(.cp-off-tbl):not(.cp-ond-tbl) .v-dr-row select,
  .v-data-rows:not(.mw-tbl):not(.cp-off-tbl):not(.cp-ond-tbl) .v-dr-row input:not([type="checkbox"]){width:auto;max-width:100%}
  .v-data-rows:not(.mw-tbl):not(.cp-off-tbl):not(.cp-ond-tbl) .v-dr-cb{position:absolute;top:10px;right:10px;justify-content:flex-end}
  .v-data-rows:not(.mw-tbl):not(.cp-off-tbl):not(.cp-ond-tbl) .v-dr-actions{position:absolute;right:8px;bottom:8px;padding-top:6px;border-top:1px solid var(--border)}
  /* Status-icoon links uitlijnen in kaartmodus i.p.v. gecentreerd */
  .v-data-rows:not(.mw-tbl):not(.cp-off-tbl):not(.cp-ond-tbl) .v-dr-st{justify-content:flex-start}
}

/* Cockpit-tabellen (admin.php dashboard) */
.cp-off-tbl .v-dr-head, .cp-off-tbl .v-dr-row { --cols: 80px minmax(160px,1.8fr) 110px 110px }
.cp-ond-tbl .v-dr-head, .cp-ond-tbl .v-dr-row { --cols: minmax(140px,1.2fr) minmax(160px,1.5fr) 110px 110px }
.cp-ai-tbl .v-dr-head, .cp-ai-tbl .v-dr-row { --cols: 112px 22px 1fr; gap: 10px }
.cp-ai-tbl .v-dr-row { min-height: 36px; padding: 0 var(--space-2); font-size: 12px }
.cp-off-tbl .v-dr-row { min-height: 36px; padding: 0 var(--space-4); font-size: 12px }
.cp-off-tbl .v-dr-head { min-height: 36px; padding: 0 var(--space-4); align-items: center }
.cp-meer { font-size: 12px; color: var(--text3); padding: 6px 2px }

/* Medewerkers tabel (admin.php) */
.mw-kantoor-blok { margin-bottom: var(--space-5) }
.mw-kantoor-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--text3); margin-bottom: 10px }
/* Generieke horizontale scroll-container voor wide-tables (min-width op de tabel zelf) */
.v-scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; min-width: 0; max-width: 100% }
.mw-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch }
.mw-tbl { min-width: max-content }
.mw-tbl .v-dr-head, .mw-tbl .v-dr-row { --cols: 40px minmax(120px,1.4fr) minmax(140px,1.7fr) 70px 100px 110px 100px 110px 60px 84px; gap: var(--space-2) }
.mw-tbl .v-dr-row.is-inactief { opacity: .45 }
.mw-av-wrap { display: inline-flex }
.mw-av-img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border:var(--bd) }
.mw-av-init { width: 28px; height: 28px; border-radius: 50%; background: var(--bg4); display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; color: var(--text2) }
.mw-ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0 }
.mw-actief { text-align: center; font-size: 13px }
.mw-actief-yes { color: var(--green); font-weight: 700 }
.mw-actief-no { color: var(--red); font-size: 11px }
.mw-actions { white-space: nowrap; display: flex; justify-content: flex-end }

/* Sprite-icons consistent stroke voor alle iconbtn-classes */
.adm-btn svg, .adm-btn-ghost svg, .adm-icon-btn svg, .v-row-iconbtn svg{stroke-width:2;vector-effect:non-scaling-stroke}

/* Grid-cell min-width fix — voorkomt overflow van lange content waardoor alignment scheef gaat */
.v-dr-head > *, .v-dr-row > *{min-width:0}

/* Utility classes (vervangen veel-gebruikte inline styles) */
.v-mla{margin-left:auto}
.t-right{text-align:right}
.flex-1{flex:1}
.m-0{margin:0}
.gap-1{gap:6px}
.gap-2{gap:var(--space-2)}
.gap-3{gap:var(--space-3)}
.items-center{align-items:center}
.va-middle{vertical-align:middle}
.t-center{text-align:center}
.t-left{text-align:left}
.t-num{font-variant-numeric:tabular-nums}
.c-red{color:var(--red)}
.c-green{color:var(--green)}
.c-muted{color:var(--text3)}
.c-soft{color:var(--text2)}
.no-deco{text-decoration:none}
.hint-sm{font-size:11px;color:var(--text3);margin-top:2px}
.flex-min{flex:1;min-width:0}

.bg-soft{background:var(--bg3)}

/* Compact AI-vragen rij (SA kantoor monitoring) — match cockpit ai-row hoogte */
.mon-airecent-tbl .v-dr-head{min-height:auto;padding:6px var(--space-3);font-size:10.5px}
.mon-airecent-tbl .v-dr-row{min-height:auto;padding:7px var(--space-3);font-size:12px}
.mon-airecent-tbl .mon-user{display:inline-flex;align-items:center;gap:6px;min-width:0}
.mon-airecent-tbl .mon-user-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}

/* MODAL CLOSE — 3 semantische families, allemaal sprite-SVG (#icon-close).
 Familie 1 (kaal, wit) · Familie 2 (bordered icon, wit) · Familie 3 (brand/donker) */
.v-modal__close{
  background:transparent;border:0;padding:6px;
  cursor:pointer;color:var(--text3);
  display:inline-flex;align-items:center;justify-content:center;
  border-radius:var(--r-sm);
}
.v-modal__close svg{width:20px;height:20px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.v-modal__close:hover{background:color-mix(in srgb,var(--text3) 12%,transparent);color:var(--text1)}
.v-modal__close:focus-visible{outline:2px solid var(--p);outline-offset:2px}
/* Modal-autofocus-paneel (tabindex=-1) toont nooit een focus-ring — alleen programmatisch focusbaar, dus geen a11y-verlies */
[data-autofocus]:focus{outline:none}

.v-modal__close--icon{
  width:28px;height:28px;padding:0;
  background:transparent;border:1px solid transparent;border-radius:var(--r-2);
  cursor:pointer;color:var(--text3);opacity:1;
  display:inline-flex;align-items:center;justify-content:center;
}
.v-modal__close--icon svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.v-modal__close--icon:hover{background:color-mix(in srgb,var(--text3) 12%,transparent);border-color:color-mix(in srgb,var(--text3) 25%,transparent);color:var(--text1)}
.v-modal__close--icon:focus-visible{outline:2px solid var(--p);outline-offset:2px}

.v-modal__close--light{
  width:32px;height:32px;padding:0;
  background:rgba(255,255,255,.14);border:0;border-radius:var(--r-2);
  cursor:pointer;color:#fff;opacity:1;
  display:inline-flex;align-items:center;justify-content:center;
  transition:background var(--t-base,.15s) ease;
}
.v-modal__close--light svg{width:16px;height:16px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.v-modal__close--light:hover{background:rgba(255,255,255,.24)}
.v-modal__close--light:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* BUTTON CANONICAL FAMILY — compound-selectors (0,2,0) beat page-CSS .btn (0,1,0) altijd.
 Deprecated: .btn.btn-* — migreer HTML naar .v-btn.v-btn--*. */
.btn.btn-primary,
.v-btn.v-btn--primary {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn.btn-primary:hover,
.v-btn.v-btn--primary:hover {
  background: color-mix(in srgb, var(--accent) 90%, black);
  border-color: color-mix(in srgb, var(--accent) 90%, black);
  color: #fff;
}

.btn.btn-ghost {
  background: var(--surface-2);
  color: var(--text2);
  border-color: color-mix(in srgb, var(--text3) 45%, transparent);
}
.btn.btn-ghost:hover {
  background: var(--surface-hover);
  color: var(--text1);
}

.btn.btn-sm,
.v-btn.v-btn--sm {
  padding: 6px var(--space-3);
  min-height: 32px;
  font-size: var(--font-sm);
}

.btn.btn-secondary,
.v-btn.v-btn--outline {
  background: transparent;
  color: var(--kc);
  border-color: var(--accent);
}
.btn.btn-secondary:hover,
.v-btn.v-btn--outline:hover {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  color: var(--kc);
}

/* UNIQUE-NAME COMPONENT HOIST — componenten met unieke namen. Excludes: body/html/sidebar/main/pp-collapsed */
.aw-mw-av img,
.user-av img,
.profiel-menu-avatar img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

.aw-blok .aw-dot,
.model-pop-item .mp-bullet {
  width:8px;
  height:8px;
  border-radius:50%;
  flex-shrink:0;
}
.model-pop-item .mp-bullet.mp-eng-haiku{background:var(--eng-briza)}
.model-pop-item .mp-bullet.mp-eng-sonnet{background:var(--eng-pneuma)}
.model-pop-item .mp-bullet.mp-eng-opus{background:var(--eng-boreas)}

.aw-modal-hd,
.jr-page .jr-modal-head {
  padding:var(--space-4) 20px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.sf-btn {
  padding:7px 13px;
  border-radius:var(--r-2);
  font-size:12px;
  font-weight:500;
  cursor:pointer;
  border:1px solid var(--border,#e5e9f0);
  background:var(--bg2,#fff);
  color:var(--text2,#475569);
  font-family:var(--font);
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:5px;
  transition:border-color var(--t-base,.15s),background var(--t-base,.15s),color var(--t-base,.15s);
  white-space:nowrap;
}

#aktFsBackdrop,
.sk-dictaat-backdrop {
  position:fixed;
  inset:0;
  background:rgba(15,23,42,.45);
  z-index:10004;
  backdrop-filter:blur(2px);
}

.akt-gespr-lege,
.akt-gespr-bezig,
.saved-empty {
  padding:18px;
  text-align:center;
  color:var(--text3);
  font-size:12.5px;
}

.tvg-card,
.bdl-card,
.sa-hero-card {
  background:var(--bg2);
  border:var(--bd);
  border-radius:var(--r);
  padding:14px var(--space-4);
}

.tvg-field label,
.toe-field label,
.field label {
  display:block;
  font-size:11px;
  font-weight:600;
  color:var(--text3);
  margin-bottom:var(--space-1);
  letter-spacing:.3px;
  text-transform:uppercase;
}

.wz-rubr-lbl,
.meer-item .meer-lbl,
.akte-trigger-label {
  flex:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.toe-form,
.cr-card-panel {
  background:var(--bg2);
  border:var(--bd);
  border-radius:var(--r);
  padding:var(--space-4) 18px;
}

.tvg-d-aand .p,
.off-plan-card .pr small {
  font-weight:500;
  color:var(--text3);
  font-size:10px;
  margin-left:2px;
}

.tvg-drawer-titel{
  font-size:13.5px;
  font-weight:700;
  color:var(--text1);
  letter-spacing:-.1px;
}

.topbar-right {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
}

.vh-nw-top {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:var(--space-2);
}

.sidebar-overlay {
  display:none;
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.45);
  z-index:149;
}

.dv-totaal-l,
.saved-item-label {
  font-size:11px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:600;
}

.crop-box {
  background:var(--bg2);
  border-radius:var(--r-lg);
  padding:20px;
  width:340px;
  max-width:92vw;
  box-shadow:var(--shadow-lg);
}

.crop-box h3 {
  margin:0 0 var(--space-3);
  font-size:14px;
  font-weight:600;
  color:var(--text1);
}

.crop-preview-wrap {
  position:relative;
  width:260px;
  height:260px;
  margin:0 auto 14px;
  overflow:hidden;
  border-radius:50%;
  border:3px solid var(--border);
  background:#f7f8fa;
  cursor:grab;
}

.crop-actions button {
  padding:7px var(--space-4);
  border-radius:var(--r-2);
  font-size:12.5px;
  font-family:var(--font-body);
  cursor:pointer;
  border:none;
}

.sk-dictaat-wrap.maximized .sk-dictaat-body,
.kb-inner {
  flex:1;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.form-check,
.sec-head {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  margin-bottom:14px;
}

.form-check input[type="checkbox"],
.taak-cb {
  width:16px;
  height:16px;
  accent-color:var(--p);
  cursor:pointer;
}

.df-tbl .df-naam {
  font-size:11px;
  color:var(--text3);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.off-chip.active {
  background:var(--p);
  color:#fff;
  font-weight:600;
  border-color:var(--p);
}

.vmp-row .vmp-nm,
.link-box__url {
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.live-dot {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--s-bet);
  display:inline-block;
  margin-right:var(--space-1);
  animation:pulse 2s infinite;
}

.progress-bar-wrap {
  background:var(--bg4);
  border-radius:3px;
  height:2px;
  overflow:hidden;
  margin-top:5px;
}

.toolbar {
  display:flex;
  align-items:center;
  gap:7px;
  margin-bottom:var(--space-3);
  flex-wrap:wrap;
}

.filter-btn {
  display:flex;
  align-items:center;
  gap:5px;
  padding:6px 11px;
  border-radius:var(--r-2);
  background:var(--bg2);
  border:var(--bd);
  color:var(--text2);
  font-size:12px;
  cursor:pointer;
  transition:all var(--t-base,.15s);
  font-family:var(--font-body);
}

.td-mono {
  font-family:var(--font-body);
  font-size:11px;
  color:var(--text2);
  font-weight:600;
}

.td-party {
  font-weight:500;
  max-width:150px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tl-date {
  font-family:var(--font-body);
  font-size:10px;
  color:var(--text3);
  margin-top:1px;
}

.td-amount {
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  text-align:right;
}

.td-days {
  font-family:var(--font-body);
  font-size:11px;
  font-weight:600;
  text-align:center;
  white-space:nowrap;
}

.badge {
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:2px 7px;
  border-radius:var(--r-xl);
  font-size:10px;
  font-weight:500;
  white-space:nowrap;
}

.detail-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.35);
  z-index:300;
  display:none;
  align-items:flex-start;
  justify-content:flex-end;
  backdrop-filter:blur(2px);
}

.detail-panel {
  width:440px;
  height:100vh;
  background:var(--bg2);
  border-left:1px solid var(--border2);
  overflow-y:auto;
  animation:slideIn .2s ease;
  display:flex;
  flex-direction:column;
}

.detail-header {
  padding:18px 20px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:flex-start;
  gap:9px;
}

.detail-party {
  font-family:var(--font-body);
  font-size:var(--font-lg);
  font-weight:700;
  color:var(--text1);
  margin-bottom:2px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.amount-big {
  font-family:var(--font-body);
  font-size:22px;
  color:#fff;
  font-weight:800;
  letter-spacing:-.5px;
}

.saldo-card .saldo-label {
  font-size:10px;
  text-transform:uppercase;
  letter-spacing:.8px;
  opacity:.7;
  margin-bottom:var(--space-1);
}

.saldo-card .saldo-badge {
  display:inline-flex;
  align-items:center;
  gap:var(--space-1);
  padding:2px var(--space-2);
  border-radius:var(--r-sm);
  font-size:10px;
  font-weight:700;
  background:rgba(255,255,255,.2);
  color:#fff;
}

.stepper {
  display:flex;
  gap:0;
  padding:0 var(--space-1);
  margin-bottom:14px;
}

.step {
  flex:1;
  text-align:center;
  position:relative;
  padding-bottom:var(--space-1);
  cursor:pointer;
  transition:transform var(--t-fast,.12s);
}

.step-dot {
  width:20px;
  height:20px;
  border-radius:50%;
  border:2px solid var(--border);
  background:var(--bg2);
  margin:0 auto var(--space-1);
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  z-index:1;
  transition:all var(--t-base,.15s);
}

.step-label {
  font-size:8px;
  color:var(--text3);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.3px;
  line-height:1.2;
  transition:color var(--t-base,.15s);
}

.step-line {
  position:absolute;
  top:10px;
  left:50%;
  right:-50%;
  height:2px;
  background:var(--border);
  z-index:0;
}

.mail-btn {
  display:flex;
  align-items:center;
  gap:var(--space-2);
  padding:10px 14px;
  border-radius:var(--r-2);
  border:var(--bd);
  background:var(--bg2);
  cursor:pointer;
  transition:all var(--t-base,.15s);
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  color:var(--text2);
}

.mail-btn .mail-icon {
  width:28px;
  height:28px;
  border-radius:var(--r-2);
  display:flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.mail-btn span.mail-sub {
  font-size:9px;
  color:var(--text3);
  font-weight:500;
  display:block;
  margin-top:1px;
}

.detail-grid {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px;
  margin-bottom:14px;
}

.detail-field {
  padding:10px 14px;
  background:var(--bg3);
  border-radius:var(--r-2);
  border:var(--bd);
}

.detail-field label {
  display:block;
  font-size:9px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.6px;
  font-weight:600;
  margin-bottom:3px;
}

.section-title {
  font-size:10px;
  color:var(--kc);
  text-transform:uppercase;
  letter-spacing:.8px;
  font-weight:700;
  margin:var(--space-3) 0 10px;
  display:flex;
  align-items:center;
  gap:6px;
}

.status-row {
  display:flex;
  gap:var(--space-1);
  flex-wrap:wrap;
  margin-bottom:14px;
}

.status-btn {
  padding:var(--space-1) 9px;
  border-radius:var(--r-2);
  font-size:11px;
  font-weight:500;
  cursor:pointer;
  border:var(--bd);
  background:var(--bg3);
  color:var(--text2);
  font-family:var(--font-body);
  transition:all var(--t-base,.15s);
}

.tl-dot-wrap {
  display:flex;
  flex-direction:column;
  align-items:center;
  flex-shrink:0;
}

.tl-dot {
  width:7px;
  height:7px;
  border-radius:50%;
  background:var(--bg4);
  border:2px solid var(--border2);
  margin-top:3px;
  flex-shrink:0;
}

.tl-line {
  flex:1;
  width:1px;
  background:var(--border);
  margin-top:2px;
}

.ml-status {
  font-size:10px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.4px;
  color:var(--text3);
}

.email-overlay {
  position:fixed;
  inset:0;
  background:rgba(0,0,0,.7);
  z-index:400;
  display:none;
  align-items:center;
  justify-content:center;
  backdrop-filter:blur(3px);
}

.email-modal {
  width:var(--modal-mail);
  max-height:86vh;
  background:var(--bg2);
  border:var(--bd-strong);
  border-radius:var(--r-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  box-shadow:var(--shadow-lg);
}

.email-header {
  padding:14px 18px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:9px;
  background:var(--bg3);
}

.tab-btn {
  padding:var(--space-1) 11px;
  border-radius:var(--r-sm);
  font-size:11px;
  cursor:pointer;
  border:1px solid transparent;
  background:transparent;
  color:var(--text2);
  font-family:var(--font-body);
  transition:all var(--t-base,.15s);
}

.email-field label {
  display:block;
  font-size:10px;
  color:var(--text3);
  text-transform:uppercase;
  letter-spacing:.6px;
  margin-bottom:3px;
}

.email-field input,
.email-field textarea {
  width:100%;
  background:var(--bg3);
  border:var(--bd);
  border-radius:var(--r-2);
  padding:7px 11px;
  color:var(--text1);
  font-family:var(--font-body);
  font-size:12px;
  outline:none;
  transition:border var(--t-base,.15s);
  resize:none;
}

.email-footer {
  padding:11px 18px;
  border-top:1px solid var(--border);
  display:flex;
  gap:7px;
  justify-content:flex-end;
  background:var(--bg3);
}

.deb-status-dd {
  position:fixed;
  z-index:9999;
  background:var(--bg2);
  border:var(--bd);
  border-radius:var(--r-2);
  box-shadow:var(--shadow-md);
  padding:var(--space-1);
  min-width:170px;
  animation:rowIn var(--t-base,.15s) ease;
}

.deb-status-dd button {
  display:flex;
  align-items:center;
  gap:6px;
  width:100%;
  padding:6px 10px;
  border:none;
  background:none;
  font-family:var(--font-body);
  font-size:12px;
  color:var(--text2);
  cursor:pointer;
  border-radius:var(--r-sm);
  transition:background .1s;
  text-align:left;
}

.modal h3 {
  font-size:17px;
  font-weight:800;
  color:var(--text1);
  margin-bottom:6px;
  letter-spacing:-.3px;
}

.modal p {
  font-size:13px;
  color:var(--text3);
  margin-bottom:20px;
  line-height:1.6;
}

.header {
  background: var(--bg2, #fff);
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  border-bottom: 1.5px solid var(--border, #e2e8f0);
  position: sticky;
  top: 0;
  z-index: 200;
}

.header-badge {
  background: var(--bg, #f4f7fb);
  color: var(--kc);
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius:var(--r-sm);
  border: 1px solid var(--border, #e2e8f0);
}

.sidebar-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.3px;
  color: var(--kc);
  padding: 0 20px var(--space-3);
}

.nav-link {
  display: block;
  padding: 7px 20px;
  font-size: 12.5px;
  color: var(--text2, #444);
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: all var(--t-base,.15s);
  line-height: 1.4;
}

.nav-link.active {
  color: var(--kc);
  background: var(--pg);
  border-left-color: var(--p);
  font-weight: 600;
}

.doc-hero::before {
  content:'';
  position:absolute;
  inset:0;
  background:linear-gradient(118deg,rgba(255,255,255,.08) 0%,rgba(255,255,255,0) 55%);
  pointer-events:none;
}

/* Scope: alleen de portaal-welkomstbanner (#heroBanner). Een kale .hero::after
 lekte dit vignet naar elke pagina met een element dat toevallig .hero heet. */
.doc-hero::after,
#heroBanner::after {
  content:'';
  position:absolute;
  bottom:0;
  right:0;
  width:45%;
  height:100%;
  background:linear-gradient(to left,rgba(0,0,0,.06) 0%,rgba(0,0,0,0) 100%);
  pointer-events:none;
}

.doc-hero-title {
  font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: 19px;
  font-weight: 700;
  margin-bottom: var(--space-1);
  text-shadow: 0 1px 4px rgba(0,0,0,.18);
  letter-spacing: -.2px;
}

.doc-hero-sub {
  font-size: 12.5px;
  opacity: .85;
  line-height: 1.45;
  text-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.wwft-hero-pills {
  display:flex;
  gap:10px;
  flex-shrink:0;
  position:relative;
  z-index:1;
}

.wwft-hero-pill-num.ok::before {
  content:"";
  display:inline-block;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#86efac;
  margin-right:7px;
  vertical-align:2px;
  box-shadow:0 0 0 2px rgba(134,239,172,.22);
}

.doc-hero-ask {
  position:relative;
  z-index:1;
  flex-shrink:0;
  display:flex;
  align-items:center;
  gap:14px;
  background:rgba(255,255,255,.13);
  border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-card);
  padding:var(--space-3) 18px;
  backdrop-filter:blur(6px);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  transition:all var(--t-base,.15s);
  font-family:inherit;
}

.doc-hero-ask-ic {
  width:34px;
  height:34px;
  border-radius:var(--r-2);
  background:rgba(255,255,255,.18);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}

.doc-hero-ask-txt {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.2;
}

.doc-hero-ask-sub {
  font-size:10.5px;
  opacity:.78;
  text-transform:uppercase;
  letter-spacing:.4px;
  font-weight:600;
  margin-top:2px;
}

.subsection-heading {
  font-size: 14px;
  font-weight: 700;
  color: var(--kc);
  padding: var(--space-2) 14px;
  background: var(--pg);
  border-left: 4px solid var(--p);
  border-radius: 0 6px 6px 0;
  margin: var(--space-5) 0 10px;
  scroll-margin-top: 84px;
}

.doc-p {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  margin-bottom: 10px;
}

.doc-list li {
  font-size: 14px;
  line-height: 1.75;
  color: #333;
  margin-bottom: 5px;
}

.doc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  background: var(--bg2, #fff);
}

.doc-table th {
  background: var(--p);
  color: #fff;
  font-weight: 600;
  padding: 10px 14px;
  text-align: left;
}

.doc-table td {
  padding: 9px 14px;
  border-bottom: 1px solid #e8eef5;
  color: #333;
  vertical-align: top;
}

.zoek-nav-btn {
  background:transparent;
  border:none;
  padding:var(--space-1) 7px;
  cursor:pointer;
  color:#4a5470;
  display:inline-flex;
  align-items:center;
  line-height:1;
}

mark.zoek-hl {
  background:#fff176;
  color:inherit;
  border-radius:2px;
  padding:0 1px;
}

/* UTILITY CLASSES — voor HTML-migratie van inline style="" patterns.
 Gebruik: class="grow-min" ipv style="flex:1;min-width:0" */
/* Display */
/* Canoniek verbergen. Dubbele selector (0,2,0) wint zonder !important van component-rules die display zetten (kaal .hidden/[hidden] verloor die strijd). Gebruik el.hidden of classList.toggle('v-hidden'); .hidden = legacy-alias */
.v-hidden.v-hidden, [hidden][hidden], .hidden.hidden { display: none }
.block { display: block }
.inline { display: inline }
.inline-block { display: inline-block }
.flex { display: flex }
.inline-flex { display: inline-flex }

/* Flex */
.grow { flex: 1 }
.row { display: flex; gap: 6px }
.stack { display: flex; flex-direction: column; gap: var(--space-2) }

/* Text */
.nowrap { white-space: nowrap }
.text-muted { color: var(--text3) }
.text-2 { color: var(--text2) }
.v-meta{font-size:12px;color:var(--text2);line-height:1.45}
.v-meta--sm{font-size:11px;color:var(--text3)}
.v-meta--md{font-size:13px}
.text-danger { color: var(--red-solid) }

/* Position */
.relative { position: relative }
.overflow-x-auto { overflow-x: auto }

/* Profiel-menu — canonical usermenu (portaal/kantoor-admin/superadmin). Elke rol eigen kleur via var(--p)/var(--red). Modifier: .pm-kantoor-row (SA kantoor-switcher) */
.profiel-menu{
  display:none;position:fixed;left:8px;top:auto;width:252px;
  background:var(--bg2);
  border:1px solid var(--border2,rgba(15,39,68,.10));
  border-radius:var(--r-card);
  box-shadow:0 6px 20px rgba(15,23,42,.10),0 22px 60px rgba(15,23,42,.22);
  overflow:hidden;z-index:1300;padding:6px;
  color:var(--text1);
  font-family:var(--font,'DM Sans',system-ui,sans-serif);
  font-size:13px;letter-spacing:-.005em;
  -webkit-font-smoothing:antialiased
}
.profiel-menu.open{display:block}
.profiel-menu-overlay{display:none;position:fixed;inset:0;background:transparent;z-index:1299}
.profiel-menu-overlay.open{display:block}
.profiel-menu-grip{display:none}
/* Mobiel: usermenu = paneel in de sidebar-kolom (niet full-width), breedte = drawer, gescoped op --sheet zodat admin/superadmin ongemoeid blijft. Breakpoint 700px = drawer */
@media(max-width:700px){
  .profiel-menu--sheet{
    left:8px;right:auto;bottom:calc(10px + env(safe-area-inset-bottom,0px));top:auto;
    width:min(280px,82vw);max-width:calc(100vw - 16px);
    max-height:min(80vh,560px);overflow-y:auto;
    border-radius:var(--r-lg);
    padding:6px;
    box-shadow:0 14px 44px rgba(15,23,42,.30),0 4px 14px rgba(15,23,42,.16);
    display:block;
    transform-origin:left bottom;transform:scale(.94) translateY(10px);opacity:0;visibility:hidden;
    transition:transform .32s cubic-bezier(.22,.61,.36,1),opacity .26s ease,visibility 0s linear .32s
  }
  .profiel-menu--sheet.open{
    transform:none;opacity:1;visibility:visible;
    transition:transform .24s cubic-bezier(.22,.61,.36,1),opacity .18s ease
  }
  .profiel-menu-overlay--sheet{
    display:block;background:rgba(15,23,42,.38);
    opacity:0;visibility:hidden;
    transition:opacity .22s ease,visibility 0s linear .22s
  }
  .profiel-menu-overlay--sheet.open{opacity:1;visibility:visible;transition:opacity .22s ease}
  /* Grip is een full-width-sheet-affordance; niet nodig voor het zij-paneel. */
  .profiel-menu--sheet .profiel-menu-grip{display:none}
  /* Ruimere touch-targets binnen het paneel (voorheen ongescoped in blok B). */
  .profiel-menu--sheet .profiel-menu-header{padding:10px 11px 9px}
  .profiel-menu--sheet .profiel-menu-avatar{width:40px;height:40px;font-size:13.5px}
  .profiel-menu--sheet .profiel-menu-naam{font-size:14px}
  .profiel-menu--sheet .profiel-menu-email{font-size:12px}
  .profiel-menu--sheet .profiel-menu-item{padding:9px var(--space-3);font-size:13.5px;border-radius:var(--r-2)}
  .profiel-menu--sheet .profiel-menu-item svg{width:17px;height:17px}
  .profiel-menu--sheet .pm-kantoor-row{padding:var(--space-2) 11px;min-height:46px}
  .profiel-menu--sheet .pm-k-av{width:32px;height:32px}
  .profiel-menu--sheet .pm-k-naam{font-size:13.5px}
}

/* Account-pill chevron roteert bij open menu; state-driven via :has() zodat het niet uit sync raakt met de JS */
.user-pill .chevron{transition:transform .2s}
.user-pill.open .chevron,
body:has(#admAccountPopup.open) #admUserPill .chevron,
body:has(#saAccountPopup.open) #saUserPill .chevron{transform:rotate(180deg)}

.profiel-menu-header{padding:var(--space-2) 10px 9px;display:flex;align-items:center;gap:10px;min-width:0;border-bottom:none}
.profiel-menu-header > div:last-child{min-width:0;flex:1}
.profiel-menu-avatar{
  width:36px;height:36px;border-radius:50%;
  background:color-mix(in srgb,var(--p,#1a6bdc) 14%,transparent);
  color:var(--p,#1a6bdc);border:none;
  display:flex;align-items:center;justify-content:center;
  font-size:12.5px;font-weight:600;flex-shrink:0;overflow:hidden;
  cursor:pointer;position:relative;transition:opacity var(--t-base,.15s);letter-spacing:0
}
.profiel-menu-avatar:hover{opacity:.9}
.profiel-menu-avatar img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.profiel-menu-avatar .foto-hint{position:absolute;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity var(--t-base,.15s);border-radius:50%;color:#fff;z-index:2}
.profiel-menu-avatar .foto-hint svg{width:18px;height:18px}
.profiel-menu-avatar:hover .foto-hint{opacity:1}
/* Status-dot rechtsonder avatar (medewerker). Dot escapt overflow:hidden
 van avatar door op de wrap-parent te positioneren. */
.pm-av-wrap{position:relative;flex-shrink:0;line-height:0}
.pm-av-dot{display:none;position:absolute;right:0;bottom:0;width:12px;height:12px;border-radius:50%;background:#22c55e;border:2.5px solid var(--bg2,#fff);z-index:3;box-shadow:0 0 0 0.5px rgba(15,23,42,0.08)}
.pm-av-dot.show{display:block}
.pm-av-dot.op-kantoor{background:#22c55e}
.pm-av-dot.voorbij,
.pm-av-dot.vrij,
.pm-av-dot.overig,
.pm-av-dot.afwezig{background:#94a3b8}
.pm-av-dot.vakantie{background:#f59e0b}
.pm-av-dot.ziek{background:var(--red-solid)}
html[data-theme="dark"] .pm-av-dot{border-color:#111a2c}

/* Kleinere status-dot voor medewerker-lijst avatars (24px) */
.mw-av-wrap{position:relative;display:inline-block;flex-shrink:0;line-height:0;vertical-align:top}
.mw-av-dot{position:absolute;right:14.6%;bottom:14.6%;transform:translate(50%,50%);width:8px;height:8px;border-radius:50%;background:#22c55e;border:1.5px solid var(--bg2,#fff);z-index:2;box-shadow:0 0 0 0.5px rgba(15,23,42,0.06)}
.mw-av-dot.op-kantoor{background:#22c55e}
.mw-av-dot.voorbij,
.mw-av-dot.vrij,
.mw-av-dot.overig{background:#94a3b8}
.mw-av-dot.vakantie{background:var(--amber)}
.mw-av-dot.ziek{background:var(--red-solid)}
html[data-theme="dark"] .mw-av-dot{border-color:#111a2c}
.mw-av-dot--lg{width:10px;height:10px;border-width:2px}

/* Vandaag-blok bovenaan Mijn beschikbaarheid-modal */
.aw-vandaag{display:flex;align-items:center;gap:10px;padding:10px 14px;margin:0 0 14px;border-radius:var(--r);background:rgba(15,39,68,.04);font-size:13.5px;font-weight:600;color:var(--text1);line-height:1.2}
.aw-vandaag-dot{width:9px;height:9px;border-radius:50%;background:#94a3b8;flex-shrink:0}
.aw-vandaag.op-kantoor{background:color-mix(in srgb,#22c55e 12%,transparent);color:#166534}
.aw-vandaag.op-kantoor .aw-vandaag-dot{background:#22c55e}
.aw-vandaag.vakantie{background:color-mix(in srgb,#f59e0b 14%,transparent);color:#92400e}
.aw-vandaag.vakantie .aw-vandaag-dot{background:#f59e0b}
.aw-vandaag.ziek{background:color-mix(in srgb,var(--red-solid) 12%,transparent);color:#991b1b}
.aw-vandaag.ziek .aw-vandaag-dot{background:var(--red-solid)}
.aw-vandaag.voorbij,.aw-vandaag.vrij,.aw-vandaag.overig{background:color-mix(in srgb,#94a3b8 18%,transparent);color:var(--text2)}
html[data-theme="dark"] .aw-vandaag.op-kantoor{color:#86efac}
html[data-theme="dark"] .aw-vandaag.vakantie{color:#fbbf24}
html[data-theme="dark"] .aw-vandaag.ziek{color:#fca5a5}
/* Klikbare aw-vandaag: cursor + chevron + dropdown-menu */
.aw-vandaag{cursor:pointer;position:relative;user-select:none;transition:filter var(--t-fast,.12s);isolation:isolate;z-index:5}
.aw-vandaag:hover{filter:brightness(0.98)}
.aw-vandaag-chev{margin-left:auto;opacity:.55;transition:transform .18s;will-change:transform}
/* Number-stepper - sprite chevrons i.p.v. native number-spinner (max besprekingen e.d.) */
.v-numstep{position:relative;display:block}
.v-numstep>input[type=number]{width:100%;box-sizing:border-box;-moz-appearance:textfield;appearance:textfield}
.v-numstep>input[type=number]::-webkit-outer-spin-button,.v-numstep>input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.v-numstep__btns{position:absolute;top:1.5px;right:1.5px;bottom:1.5px;width:22px;display:flex;flex-direction:column;border-left:1px solid var(--input-border,var(--border2));border-radius:0 var(--r-sm,6px) var(--r-sm,6px) 0;overflow:hidden}
.v-numstep__b{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:0;border:0;background:transparent;color:var(--text3);cursor:pointer;transition:background-color var(--t-fast,.12s),color var(--t-fast,.12s)}
.v-numstep__b:first-child{border-bottom:1px solid var(--input-border,var(--border2))}
.v-numstep__b:hover{background:var(--bg3,rgba(15,39,68,.05));color:var(--text1)}
.v-numstep__b:active{background:var(--bg3,rgba(15,39,68,.09))}
.v-numstep__b svg{width:11px;height:11px;display:block;pointer-events:none}
/* Focus: laat de deler de focus-kleur volgen i.p.v. grijs, zodat 'ie niet als
 dubbele rand naast de focus-ring valt. */
.v-numstep__btns{transition:border-color var(--t-fast,.12s)}
.v-numstep:focus-within .v-numstep__btns{border-left-color:color-mix(in srgb,var(--p) 38%,transparent)}
.v-numstep:focus-within .v-numstep__b:first-child{border-bottom-color:color-mix(in srgb,var(--p) 24%,transparent)}
.aw-vandaag.open .aw-vandaag-chev{transform:rotate(180deg);opacity:1}
.aw-vandaag-menu{display:none;position:absolute;top:calc(100% + 6px);left:0;right:0;background:var(--bg2);border:var(--bd);border-radius:var(--r);padding:6px;box-shadow:0 8px 24px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.06);z-index:100}
.aw-vandaag.open .aw-vandaag-menu{display:block}
.aw-vandaag-mi-dot.op-kantoor{background:#22c55e}
.aw-vandaag-mi-dot.overig,.aw-vandaag-mi-dot.voorbij,.aw-vandaag-mi-dot.vrij{background:#94a3b8}
.aw-vandaag-mi-dot.vakantie{background:#f59e0b}
.aw-vandaag-mi-dot.ziek{background:var(--red-solid)}
.aw-vandaag-mi{display:flex;align-items:center;gap:10px;width:100%;padding:var(--space-2) 10px;border:0;background:transparent;border-radius:var(--r-2);font-family:inherit;font-size:13px;font-weight:500;color:var(--text1);cursor:pointer;text-align:left;line-height:1.2;transition:background .10s}
.aw-vandaag-mi:hover{background:var(--bg3,rgba(15,39,68,.05))}
.aw-vandaag-mi-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
html[data-theme="dark"] .aw-vandaag-menu{border-color:rgba(255,255,255,.10);box-shadow:var(--shadow-md)}
html[data-theme="dark"] .aw-vandaag-mi:hover{background:rgba(255,255,255,.06)}
.profiel-menu-info{flex:1;min-width:0}
.profiel-menu-naam{font-size:13.5px;font-weight:600;color:var(--text1);line-height:1.2;letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.profiel-menu-email{font-size:11px;color:var(--text3);font-weight:400;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}

/* Status-pill weg — dot rechtsonder avatar volstaat */
/* Sectie-label (superadmin "SNELMENU KANTOREN") */
.pm-kantoor-label{
  font-size:10.5px;font-weight:600;
  letter-spacing:.05em;text-transform:uppercase;
  color:var(--text3);padding:var(--space-2) 10px var(--space-1)
}

/* Menu-items */
.profiel-menu-item{
  display:flex;align-items:center;gap:10px;
  padding:7px 10px;border-radius:var(--r-2);
  font-size:13px;font-weight:500;color:var(--text1);
  cursor:pointer;line-height:1.2;letter-spacing:-.005em;
  transition:background var(--t-fast,.12s),color var(--t-fast,.12s);
  font-family:inherit;border:0;background:none;
  width:100%;text-align:left;text-decoration:none
}
.profiel-menu-item:hover{background:var(--bg3,rgba(15,39,68,.05));color:var(--text1)}
.profiel-menu-item svg{width:16px;height:16px;flex-shrink:0;color:var(--text2);opacity:1;transition:color var(--t-fast,.12s)}
.profiel-menu-item:hover svg{color:var(--text1)}
.profiel-menu-item.danger{color:var(--red)}
.profiel-menu-item.danger svg{color:var(--red)}
.profiel-menu-item.danger:hover{background:var(--red-light,rgba(239,68,68,.08));color:var(--red)}
.profiel-menu-item.danger:hover svg{color:var(--red)}
.profiel-menu-item.no-deco{text-decoration:none}

/* Kantoor-switcher rows (superadmin) */
.profiel-menu .pm-kantoor-row{padding:6px 10px;gap:11px;min-height:44px}
.profiel-menu .pm-k-av{width:32px;height:32px;border-radius:var(--r-2);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;color:#fff;flex-shrink:0;overflow:hidden;letter-spacing:.02em}
.profiel-menu .pm-k-av--logo{background:#fff;border:1px solid rgba(15,39,68,.08)}
.profiel-menu .pm-k-av img{width:100%;height:100%;object-fit:contain;padding:2px}
.profiel-menu .pm-k-naam{flex:1;font-size:13.5px;font-weight:600;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* SA-profielmenu · icoonkolom uitgelijnd + rij-ritme 36px, scoped op #saAccountPopup. Volgorde profiel-menu-item vóór pm-kantoor-row zodat de kantoor-gap wint bij gelijke specificiteit */
#saAccountPopup .profiel-menu-item{padding:6px 10px;gap:14px;min-height:36px}
#saAccountPopup .pm-k-av{width:22px;height:22px;border-radius:var(--r-sm)}
#saAccountPopup .pm-k-av img{padding:1.5px}
#saAccountPopup .pm-kantoor-row{padding:6px 10px;gap:var(--space-2);min-height:36px}

/* Kantoor-scope-switcher in het medewerker-profielmenu: trigger-rij (chevron) + zij-flyout.
   Item-visuals hergebruiken .pm-k-av/.pm-k-naam (zelfde als SA), maar scoped op de body-level
   flyout die BUITEN .profiel-menu leeft (die heeft overflow:hidden → zou de flyout clippen). */
.pm-kchev{margin-left:auto;flex:none;stroke:currentColor;stroke-width:1.8;transition:opacity .18s ease;opacity:.55}
.pm-kantoor-trigger:hover .pm-kchev,.pm-kantoor-trigger.open .pm-kchev{opacity:.9}
/* z-index boven de ingeklapte-sidebar-overlay (.profiel-menu-overlay=9998/menu=9999),
   anders ligt die transparante overlay eróver en zijn de items niet klikbaar. */
.pm-kantoor-flyout{
  display:none;position:fixed;z-index:10000;width:228px;
  background:var(--bg2);
  border:1px solid var(--border2,rgba(15,39,68,.10));
  border-radius:var(--r-card);
  box-shadow:0 6px 20px rgba(15,23,42,.10),0 22px 60px rgba(15,23,42,.22);
  padding:6px;color:var(--text1);
  font-family:var(--font,'DM Sans',system-ui,sans-serif);
  font-size:13px;letter-spacing:-.005em;-webkit-font-smoothing:antialiased
}
.pm-kantoor-flyout.open{display:block}
.pm-kantoor-flyout .pm-kantoor-row{padding:8px 12px;gap:10px;min-height:0}
.pm-kantoor-flyout .pm-k-naam{flex:1;font-size:13.5px;font-weight:600;color:var(--text1);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.pm-kantoor-flyout .pm-kantoor-row.is-actief{background:color-mix(in srgb,var(--p,#1a6bdc) 10%,transparent)}
.pm-kantoor-flyout .pm-k-check{width:16px;height:16px;flex:none;color:var(--p,#1a6bdc)}
.pm-kantoor-flyout .pm-k-check--off{visibility:hidden}
html[data-theme="dark"] .pm-kantoor-flyout{border-color:rgba(255,255,255,.10);box-shadow:0 6px 20px rgba(0,0,0,.4),0 22px 60px rgba(0,0,0,.55)}
html[data-theme="dark"] .pm-kantoor-flyout .pm-kantoor-row.is-actief{background:color-mix(in srgb,var(--p,#5b8dff) 20%,transparent)}

/* Divider */
.profiel-menu-divider,.pm-prefs-divider{height:1px;background:var(--bg4,rgba(15,39,68,.08));margin:3px var(--space-2)}

/* Dark-mode */
html[data-theme="dark"] .profiel-menu{border-color:rgba(255,255,255,.10);box-shadow:0 6px 20px rgba(0,0,0,.4),0 22px 60px rgba(0,0,0,.55)}
html[data-theme="dark"] .profiel-menu-item:hover{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .pm-kantoor-row:hover{background:rgba(255,255,255,.06)}
html[data-theme="dark"] .profiel-menu-avatar{background:rgba(255,255,255,.10);color:var(--text1)}
html[data-theme="dark"] .profiel-menu-grip{background:rgba(255,255,255,.22)}

/* Portaal-only: modal-stijl bij collapsed sidebar */
body.pp-collapsed .profiel-menu{z-index:9999 !important;width:234px !important}
body.pp-collapsed .profiel-menu-overlay{z-index:9998 !important;background:transparent !important}

/* Mobiel-usermenu geconsolideerd in het .profiel-menu--sheet blok hierboven. */
/* END: canonical .profiel-menu */
/* Notitieblok · canonical meldings-/toelichtingsblok. Basis volgt var(--p), semantische varianten eigen statuskleur; color-mix houdt de tint transparant zodat dark-mode meeloopt.
 Gebruik: <div class="v-note v-note--warn"><svg…/><span>tekst</span></div> */
.v-note{
  display:flex; align-items:flex-start; gap:var(--space-2);
  padding:var(--space-3) var(--space-4);
  background:color-mix(in srgb, var(--p) 8%, transparent);
  border-left:3px solid var(--p);
  border-radius:0 var(--r) var(--r) 0;
  font-size:var(--font-md); line-height:1.6; color:var(--text1);
}
.v-note strong, .v-note b{color:var(--kc)}
.v-note svg{flex-shrink:0; color:var(--kc); margin-top:2px}
.v-note--warn{background:color-mix(in srgb, var(--amber) 10%, transparent); border-left-color:var(--amber)}
.v-note--warn strong, .v-note--warn b, .v-note--warn svg{color:var(--amber)}
/* Compacte variant voor krappe plekken zoals binnen een wizard-stap */
.v-note--sm{padding:var(--space-2) var(--space-3); font-size:var(--font-sm); line-height:1.5; gap:7px}
/* Links erven de variantkleur, zodat een link in een waarschuwing amber is
 en in een foutmelding rood — geen aparte link-klasse per variant nodig. */
.v-note a{color:inherit; font-weight:600; text-decoration:underline}

/* v-coachtip */
.v-coach-anchor{position:relative;display:inline-block}
.v-coachtip{
  --vct-bg:var(--p);--vct-fg:#fff;
  position:absolute;background:var(--vct-bg);color:var(--vct-fg);
  border-radius:var(--r-lg);padding:14px 40px 14px var(--space-4);
  font-family:inherit;font-size:13.5px;line-height:1.5;
  width:264px;text-align:left;z-index:100;
  box-shadow:0 12px 28px -8px rgba(15,23,42,.28),0 2px 6px rgba(15,23,42,.10);
  animation:vct-in .32s cubic-bezier(.16,.84,.32,1);pointer-events:auto;
}
@keyframes vct-in{from{opacity:0;translate:0 4px;scale:.96}to{opacity:1;translate:0 0;scale:1}}
.v-coachtip[data-coach-defer]{display:none}
.v-coachtip__h{margin:0 0 2px;font-weight:600;font-size:14px;letter-spacing:-.005em;color:var(--vct-fg)}
.v-coachtip__body{margin:0;font-size:13.5px;color:var(--vct-fg);opacity:.92}
.v-coachtip__x{
  position:absolute;top:10px;right:10px;width:22px;height:22px;padding:0;
  display:inline-flex;align-items:center;justify-content:center;
  background:transparent;border:0;border-radius:var(--r-sm);color:var(--vct-fg);
  cursor:pointer;opacity:.72;transition:background .14s,opacity .14s;
}
.v-coachtip__x:hover{background:rgba(255,255,255,.16);opacity:1}
.v-coachtip__x svg{width:14px;height:14px;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;fill:none}
.v-coachtip::before{content:"";position:absolute;width:14px;height:14px;background:var(--vct-bg);transform:rotate(45deg);border-radius:3px;z-index:-1}
.v-coachtip--top{top:calc(100% + 12px);left:50%;transform:translateX(-50%)}
.v-coachtip--top::before{top:-5px;left:calc(50% - 7px)}
.v-coachtip--bottom{bottom:calc(100% + 12px);left:50%;transform:translateX(-50%)}
.v-coachtip--bottom::before{bottom:-5px;left:calc(50% - 7px)}
.v-coachtip--right{top:50%;left:calc(100% + 12px);transform:translateY(-50%)}
.v-coachtip--right::before{left:-5px;top:calc(50% - 7px)}
.v-coachtip--left{top:50%;right:calc(100% + 12px);transform:translateY(-50%)}
.v-coachtip--left::before{right:-5px;top:calc(50% - 7px)}
.v-coachtip__actions{margin-top:10px;display:flex;gap:6px}
.v-coachtip__cta{
  background:rgba(255,255,255,.16);color:#fff;border:0;border-radius:var(--r-2);
  padding:6px var(--space-3);font-family:inherit;font-size:12.5px;font-weight:600;
  cursor:pointer;transition:background .14s;
}
.v-coachtip__cta:hover{background:rgba(255,255,255,.28)}
.v-coachtip--mini{width:auto;padding:7px 9px 7px var(--space-3);border-radius:var(--r-card);display:inline-flex;align-items:center;gap:var(--space-1)}
.v-coachtip__try{background:transparent;border:0;color:var(--vct-fg);font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:1px 2px;white-space:nowrap}
.v-coachtip__try:hover{text-decoration:underline}
.v-coachtip--mini .v-coachtip__x{position:static;top:auto;right:auto;width:18px;height:18px}
@media(max-width:760px){.v-coachtip{display:none}}

/* Dark-mode: hover-shift op v-btn — color-mix richting wit i.p.v. filter:brightness.
 filter triggert GPU-re-composite tijdens .12s-transitie → subpixel-wobble op tekst+SVG.*/
html[data-theme="dark"] .v-btn--danger:hover{
  background:color-mix(in srgb, var(--red-solid) 80%, #fff);
  border-color:color-mix(in srgb, var(--red-solid) 80%, #fff);
}
html[data-theme="dark"] .v-btn--primary:hover{
  background:color-mix(in srgb, var(--accent) 80%, #fff);
  border-color:color-mix(in srgb, var(--accent) 80%, #fff);
}
html[data-theme="dark"] .v-btn--ghost:hover{
  background:color-mix(in srgb,#fff 10%,transparent);
  border-color:color-mix(in srgb,#fff 22%,transparent);
  color:var(--text1);
}

/* Kiesbalk — dossier/cliënt kiezen boven een werkpagina. Eén grid met vaste kolommen zodat elk veld dezelfde linkerrand en hoogte heeft */
.v-kiesbalk{
  display:grid;
  grid-template-columns:minmax(160px,1fr) minmax(220px,1.6fr) auto;
  gap:var(--space-3);
  align-items:end;
  max-width:760px;
  margin:0 auto;
}
.v-kiesbalk-veld{display:flex;flex-direction:column;gap:6px;min-width:0}
/* Twee klassen diep: wint van de algemene .v-kiesbalk input-regel verderop
 op specificiteit, dus onafhankelijk van de volgorde in het bestand. */
.v-kiesbalk-veld--breed{grid-column:1 / 3}
.v-kiesbalk-label{
  font-size:11.5px;font-weight:600;letter-spacing:.2px;color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
/* Elk bedienend element in de balk is even hoog, ongeacht of het een input,
 een select of een knop is. box-sizing expliciet omdat knoppen anders afwijken. */
.v-kiesbalk input,
.v-kiesbalk select,
.v-kiesbalk button{
  height:42px;
  box-sizing:border-box;
  font-family:inherit;
  font-size:14px;
}
.v-kiesbalk input,
.v-kiesbalk select{
  width:100%;
  padding:0 var(--space-3);
  border:var(--bd-strong);
  border-radius:var(--r-2);
  background:var(--bg2);
  color:var(--text1);
}
/* De systeem-chevron van een select zit binnen de rechter padding. Met de gedeelde
 12px liep lange optietekst er dwars onderdoor; 34px reserveert de ruimte. Twee klassen
 diep zodat dit wint van de gedeelde .v-kiesbalk input,select-regel hierboven. */
.v-kiesbalk select{cursor:pointer}
.v-kiesbalk .v-kiesbalk-veld select{
  padding-right:34px;
  /* Zonder dit kapt de browser een lange optie hard af midden in een woord, wat als een
   weergavefout leest. Met ellipsis eindigt de tekst zichtbaar met een beletselteken. */
  text-overflow:ellipsis;white-space:nowrap;overflow:hidden;
}
.v-kiesbalk input:focus,
.v-kiesbalk select:focus{outline:none;border-color:var(--p)}
.v-kiesbalk button{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:0 18px;
  border-radius:var(--r-2);
  font-weight:600;
  white-space:nowrap;
  cursor:pointer;
  border:1.5px solid transparent;
  transition:filter var(--t-base,.15s) ease,background var(--t-base,.15s) ease;
}
.v-kiesbalk button:disabled{opacity:.45;cursor:default}
.v-kiesbalk button svg{width:14px;height:14px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
@media(max-width:640px){
  .v-kiesbalk{grid-template-columns:1fr}
  .v-kiesbalk-veld--breed{grid-column:1}
}

/* Dossier-zoekveld met resultatenlijst (nr + omschrijving + cliënten). De originele <select> blijft verborgen als waardeopslag zodat bestaande code die erop luistert blijft werken */
.v-doszoek{position:relative}
.v-doszoek-veld{
  display:flex;align-items:center;gap:10px;
  height:42px;padding:0 var(--space-3);box-sizing:border-box;
  border:var(--bd-strong);border-radius:var(--r-2);background:var(--bg2);
  transition:border-color var(--t-base,.15s);
}
.v-doszoek-veld:focus-within{border-color:var(--p)}
.v-doszoek-icoon{
  width:15px;height:15px;flex-shrink:0;color:var(--text3);
  fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
}
/* Twee klassen diep: pagina-CSS zet input[type=text]{border;background} met even zware selector en won op volgorde → dit veld kreeg een tweede rand binnen de omhullende rand */
.v-doszoek .v-doszoek-veld input{
  flex:1;min-width:0;height:100%;
  border:0;background:transparent;padding:0;outline:none;box-shadow:none;
  font-family:inherit;font-size:14px;color:var(--text1);
}
.v-doszoek .v-doszoek-veld input:focus{border:0;background:transparent}
.v-doszoek-pop{
  position:absolute;top:calc(100% + 4px);left:0;right:0;z-index:60;
  background:var(--bg2);border:var(--bd);border-radius:var(--r);
  box-shadow:var(--shadow-lg);
  max-height:320px;overflow-y:auto;padding:var(--space-1);
}
.v-doszoek-rij{
  display:flex;align-items:center;gap:10px;
  padding:var(--space-2) 10px;border-radius:var(--r-2);cursor:pointer;
}
.v-doszoek-rij:hover,.v-doszoek-rij[aria-selected="true"]{background:var(--pg)}
.v-doszoek-nr{
  flex-shrink:0;font-size:12px;font-weight:700;color:var(--kc);
  background:color-mix(in srgb,var(--p) 10%,transparent);
  border-radius:var(--r-pill);padding:3px 10px;font-variant-numeric:tabular-nums;
}
.v-doszoek-naam{
  flex-shrink:1;min-width:0;max-width:48%;
  font-size:13px;font-weight:600;color:var(--text1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v-doszoek-sub{
  flex:1;min-width:0;text-align:right;
  font-size:12.5px;color:var(--text3);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v-doszoek-leeg{padding:14px var(--space-3);font-size:13px;color:var(--text3);text-align:center}
.v-doszoek-gekozen{
  display:flex;align-items:center;gap:10px;
  height:42px;padding:0 var(--space-3);box-sizing:border-box;
  border:1.5px solid var(--p);border-radius:var(--r-2);background:var(--pg);
}
.v-doszoek-tekst{
  flex:1;min-width:0;font-size:13px;color:var(--text1);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.v-doszoek-wissel{
  flex-shrink:0;border:0;background:transparent;color:var(--kc);
  font-family:inherit;font-size:12.5px;font-weight:600;cursor:pointer;padding:var(--space-1) 6px;
}
.v-doszoek-wissel:hover{text-decoration:underline}
/* Kiesbalk met één zoekveld in plaats van twee kolommen */
.v-kiesbalk--enkel{grid-template-columns:1fr auto}
@media(max-width:640px){.v-kiesbalk--enkel{grid-template-columns:1fr}}

/* Userflow-componenten (gedeeld) */
/* Quick-filter chips */
.v-chips{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 var(--space-3);align-items:center}
/* .v-chip = alias van .chip (canon, zacht actief); styling via .chip / .chip-cnt / .filterbar .chip hierboven */
/* Dichtheid-toggle + compacte modus */
.v-dens{display:inline-flex;gap:3px;background:var(--bg4,#f1f5f9);padding:3px;border-radius:var(--r-2)}
.v-dens button{border:0;background:none;padding:5px 11px;font-size:12px;font-weight:600;color:var(--text3);border-radius:var(--r-sm);cursor:pointer;font-family:inherit}
.v-dens button.actief{background:var(--bg2);color:var(--text1);box-shadow:var(--shadow)}
/* Dichtheids-as: compact zet control- én rijhoogte samen (comfortabel = :root 36/44). */
html.density-compact{--row-h:38px;--ctrl-h:34px;--ctrl-h-sm:30px}
html.density-compact .v-data-rows .v-dr-row{padding-top:var(--space-1);padding-bottom:var(--space-1)}
html.density-compact .v-data-rows .v-dr-sub{display:none}
html.density-compact .cp-ai-tbl .v-dr-row{min-height:30px;padding-top:0;padding-bottom:0;font-size:11.5px}
html.density-compact .cp-off-tbl .v-dr-row{min-height:30px;padding-top:0;padding-bottom:0;font-size:11.5px}
html.density-compact .cp-off-tbl .v-dr-head{min-height:30px;padding-top:0;padding-bottom:0}
/* Compacte weergave voor de medewerker-lijsten (alle delen .v-tbl). Toggle via
 het profielmenu (vDensity). Strakke rijen + secundaire (afleidbare) regels weg;
 urgentie-badges, bedragen en status blijven altijd staan. .v-sub = markeer een
 subregel die in compact mag verdwijnen (bv. behandelaar onder de partijnaam). */
html.density-compact .v-tbl tbody tr{height:30px}
html.density-compact .v-tbl td{padding-top:3px;padding-bottom:3px;font-size:12.5px}
html.density-compact .v-tbl th{padding-top:5px;padding-bottom:5px}
html.density-compact .v-sub{display:none}
/* Canonieke medewerker-avatar (vorioAvatar). Grijs default; --v-av-size stuurt grootte; colored via inline */
.v-av{position:relative;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--v-av-size,26px);height:var(--v-av-size,26px);border-radius:50%;font-size:10.5px;font-weight:700;letter-spacing:.2px;overflow:hidden;color:#334155;background:linear-gradient(135deg,#e2e8f0,#cbd5e1);border:var(--bd-strong)}
.v-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:50%}
.v-av--leeg{color:var(--text3);background:var(--bg3);border-style:dashed;font-weight:500}
.mw-cell{display:inline-flex;align-items:center;gap:var(--space-2);min-width:0;max-width:100%}
.mw-naam{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
html.density-compact .mw-cell .v-av{--v-av-size:20px;font-size:9px}
.v-av--colored{border-color:transparent}
html[data-theme="dark"] .v-av{color:#dbe4f5;background:linear-gradient(135deg,#2a3b5c,#1c2740)}
html.density-compact .td-client{display:none}
/* Compact: partij-/clientnaam op 1 regel binnen de kolom. line-clamp respecteert de
 celbreedte (i.p.v. vaste px), dus geen overloop naar de WWFT-kolom. */
html.density-compact .dos-rij.in-groep td:nth-child(3){max-width:0}
html.density-compact .dos-rij.in-groep td:nth-child(3)>span{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;white-space:normal}

/* Skeleton-laadstaat */
.v-skel{height:13px;border-radius:var(--r-sm);background:linear-gradient(90deg,var(--bg4,#eef1f5) 25%,color-mix(in srgb,var(--bg4,#eef1f5) 55%,#fff) 37%,var(--bg4,#eef1f5) 63%);background-size:400% 100%;animation:vSkel 1.3s ease infinite}
.v-skel--60{width:60%}.v-skel--80{width:80%}.v-skel--45{width:45%}.v-skel--30{width:30%}
@keyframes vSkel{0%{background-position:100% 0}100%{background-position:-100% 0}}
[data-theme="dark"] .v-skel{background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,rgba(255,255,255,.11) 37%,rgba(255,255,255,.05) 63%);background-size:400% 100%}

/* Bulk-actiebalk (zwevend, één per pagina, gedeeld via vBulk) */
.v-bulkbar{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(20px);opacity:0;pointer-events:none;transition:opacity .16s ease,transform .16s ease;display:flex;align-items:center;gap:10px;padding:10px var(--space-3) 10px var(--space-4);background:var(--text1);color:#fff;border-radius:var(--r-card);box-shadow:var(--shadow-lg);z-index:9200;max-width:calc(100vw - 32px)}
/* Dark-mode: --text1 flipt naar licht, dus expliciet donker elevated oppervlak i.p.v. var(--text1) */
html[data-theme="dark"] .v-bulkbar{background:var(--bg4);border:var(--bd-strong)}
.v-bulkbar.show{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.v-bulkbar b{font-size:13px;font-weight:600;white-space:nowrap}
.v-bulkbar .v-bb-sp{flex:1;min-width:4px}
.v-bulkbar button{height:31px;padding:0 var(--space-3);border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;border-radius:var(--r-2);font-size:12.5px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;font-family:inherit;white-space:nowrap}
.v-bulkbar button:hover{background:rgba(255,255,255,.16)}
.v-bulkbar button.v-bb-danger{background:rgba(220,38,38,.85);border-color:transparent}
.v-bulkbar button.v-bb-danger:hover{background:rgba(220,38,38,1)}
.v-bulkbar .v-bb-x{width:28px;height:28px;padding:0;justify-content:center;background:none;border:0;border-radius:var(--r-2);color:rgba(255,255,255,.7);font-size:16px;cursor:pointer;flex-shrink:0;transition:background var(--t-fast,.12s) ease,color var(--t-fast,.12s) ease}
.v-bulkbar .v-bb-x:hover{background:rgba(255,255,255,.16);color:#fff}
/* menu-actie (bijv. "Status wijzigen") in de bulkbar */
.v-bulkbar .v-bb-menuwrap{position:relative}
.v-bulkbar .v-bb-menu{position:absolute;bottom:calc(100% + 8px);right:0;min-width:184px;background:var(--bg2);border:var(--bd-strong);border-radius:var(--r);box-shadow:var(--shadow-lg);padding:5px;display:none}
.v-bulkbar .v-bb-menuwrap.open .v-bb-menu{display:block}
.v-bulkbar .v-bb-menu button{width:100%;height:auto;padding:var(--space-2) 11px;border:0;background:transparent;color:var(--text1);font-size:13px;font-weight:500;justify-content:flex-start;border-radius:var(--r-2)}
.v-bulkbar .v-bb-menu button:hover{background:color-mix(in srgb,var(--p,#1a6bdc) 12%,transparent)}
.v-bulkbar .v-bb-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.v-bulkbar .v-bb-caret{transition:transform var(--t-base,.15s) ease}
.v-bulkbar .v-bb-menuwrap.open .v-bb-caret{transform:rotate(180deg)}

/* Kompas-spinner — opt-in variant op .vorio-loader.
 Additief: bestaande spinners blijven ongewijzigd. Alleen elementen MÉT
 .vorio-loader--kompas krijgen het kompas i.p.v. de favicon-ring.
 Vereist een child-<svg> met .ks-track/.ks-arc/.ks-rose/.ks-needle/.ks-hub/.ks-dir.
 Accent = kantoorkleur var(--p) via color-mix met navy-anker (--ks-accent): houdt
 de kantoortint maar blijft contrastrijk; groen/beige worden niet "raar" of bleek.
 Naald/roos blijven altijd navy/zilver = het instrument. */
.vorio-loader--kompas{ --ks-accent:color-mix(in srgb, var(--p,#1a6bdc) 60%, #12305a); }
.vorio-loader--kompas::before,
.vorio-loader--kompas::after{ content:none; display:none; }
.vorio-loader--kompas > svg{ width:100%; height:100%; overflow:visible; }
.vorio-loader--kompas .ks-track{ fill:none; stroke:rgba(15,39,68,.12); stroke-width:3; }
.vorio-loader--kompas .ks-arc{ fill:none; stroke:var(--ks-accent); stroke-width:3; stroke-linecap:round;
  stroke-dasharray:33 200; transform-box:view-box; transform-origin:50% 50%;
  animation:ksSeek 2s infinite; }
.vorio-loader--kompas .ks-rose{ fill:#c2ccd8; transform-box:view-box; transform-origin:50% 50%;
  animation:ksSeek 2s infinite; }
.vorio-loader--kompas .ks-needle{ transform-box:view-box; transform-origin:50% 50%;
  animation:ksSeek 2s infinite; }
.vorio-loader--kompas .n-n{ fill:var(--ks-accent); }
.vorio-loader--kompas .n-s{ fill:#94a3b8; }
.vorio-loader--kompas .ks-hub{ fill:#ffffff; stroke:var(--ks-accent); stroke-width:1.3; }
.vorio-loader--kompas .ks-dir{ fill:#0f2744; font:700 4.2px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  text-anchor:middle; dominant-baseline:central; }
html[data-theme="dark"] .vorio-loader--kompas{ --ks-accent:color-mix(in srgb, var(--p,#4d90ff) 72%, #ffffff); }
html[data-theme="dark"] .vorio-loader--kompas .ks-track{ stroke:rgba(255,255,255,.14); }
html[data-theme="dark"] .vorio-loader--kompas .ks-rose{ fill:rgba(255,255,255,.32); }
html[data-theme="dark"] .vorio-loader--kompas .n-s{ fill:rgba(255,255,255,.48); }
html[data-theme="dark"] .vorio-loader--kompas .ks-dir{ fill:#cbd6e8; }
/* Naald+roos+boog draaien samen: traag op, versnellen, landen zacht op Noord
 (1080° = 3 omwentelingen -> veelvoud v/360°), houden Noord ~0,6s vast, herhalen. */
@keyframes ksSeek{
  0%{ transform:rotate(0deg); animation-timing-function:cubic-bezier(.5,0,.35,1); }
  70.3%{ transform:rotate(1080deg); animation-timing-function:linear; }
  100%{ transform:rotate(1080deg); }
}
@media(prefers-reduced-motion:reduce){
  .vorio-loader--kompas .ks-arc{ animation:none; stroke-dasharray:none; opacity:.85; }
  .vorio-loader--kompas .ks-rose,
  .vorio-loader--kompas .ks-needle{ animation:none; transform:rotate(0deg); }
}

/* Overlay onder de sticky .header (56px) — opt-in: header/menu blijft in beeld,
 content eronder wordt afgedekt. Twee-class specificity wint van inset:0. */
.vorio-loader-overlay.vorio-loader-overlay--onder-header{ top:56px; }
/* v-btn--stil — quiete borderless actieknop (o.a. flow-stap hero-acties); geen rand, alleen lichte kantoorkleur-hover */
.v-btn--stil{background:transparent;color:var(--text1);border-color:transparent}
.v-btn--stil:hover{background:color-mix(in srgb, var(--accent) 12%, transparent);border-color:transparent;color:var(--text1)}

/* Taalkeuze met vlag — gedeeld component (offerte, aanvulformulier, ondertekenen, dossier-wizard) */
/* Rond vlag-icoon. Maat via --taal-vlag-sz (vaste px i.p.v. % ivm Safari die height:100% op inline-svg niet betrouwbaar oplost). */
.taal-vlag{--taal-vlag-sz:18px;flex:0 0 auto;width:var(--taal-vlag-sz);height:var(--taal-vlag-sz);border-radius:50%;overflow:hidden;box-shadow:0 0 0 1px rgba(15,39,68,.12);display:inline-flex;line-height:0;vertical-align:middle}
html[data-theme="dark"] .taal-vlag{box-shadow:0 0 0 1px rgba(255,255,255,.16)}
.taal-vlag svg{display:block;width:var(--taal-vlag-sz);height:var(--taal-vlag-sz)}
/* Segmented taalknoppen (2 opties naast elkaar) */
.taal-seg{display:flex;gap:10px;flex-wrap:wrap}
.taal-seg__opt{flex:1 1 150px;min-width:140px;display:flex;align-items:center;gap:10px;padding:10px 14px;border:var(--bd-strong);border-radius:var(--r-2);background:var(--bg2);color:var(--text2);font-size:14px;font-family:var(--font);font-weight:500;cursor:pointer;transition:border-color var(--t-base,.15s),background var(--t-base,.15s),box-shadow var(--t-base,.15s),color var(--t-base,.15s);box-sizing:border-box;text-align:left}
.taal-seg__opt:hover{border-color:var(--p)}
.taal-seg__opt.actief{border-color:var(--p);background:color-mix(in srgb,var(--p) 8%,var(--bg2));color:var(--kc);box-shadow:0 0 0 1px var(--p) inset;font-weight:600}
/* Vlag over een native <select> (waarde-uitlezing blijft de select). Flag links, select houdt zijn eigen chevron. */
.v-taalselect{position:relative;display:inline-flex;align-items:center}
.v-taalselect>.taal-vlag{position:absolute;left:9px;top:50%;transform:translateY(-50%);pointer-events:none;z-index:1}
.v-taalselect>select{padding-left:var(--space-6)}
/* Compacte taal-select (.client-lang) + vlag-only variant. Canoniek — gebruikt in
 ondertekenen-overzicht (36px via --cl-h) én de debiteuren-mailmodal (32px fallback). */
.client-lang{flex-shrink:0;height:var(--cl-h,32px);box-sizing:border-box;padding:0 26px 0 10px;border:var(--bd-strong);border-radius:var(--r-2);font-size:12.5px;font-weight:600;font-family:var(--font);color:var(--text2);background:var(--bg2) var(--v-chevron) no-repeat right 9px center;appearance:none;-webkit-appearance:none;-moz-appearance:none;cursor:pointer;outline:none;transition:border-color var(--t-base,.15s),box-shadow var(--t-base,.15s)}
.client-lang:hover{border-color:var(--p);color:var(--text1)}
.client-lang:focus{border-color:var(--p);box-shadow:var(--ring)}
.v-taalselect--vlagonly>.taal-vlag{position:absolute;left:9px;top:50%;transform:translateY(-50%);z-index:1;pointer-events:none;--taal-vlag-sz:18px}
.v-taalselect--vlagonly>.client-lang{width:58px;padding:0 22px 0 30px;color:transparent}
.v-taalselect--vlagonly>.client-lang option{color:var(--text1)}
/* Aanvulformulier: verborgen radio + label-knop (pure CSS, uitlezing via :checked blijft werken) */
.taal-seg__opt input[type=radio]{position:absolute;opacity:0;width:0;height:0;margin:0}
.taal-seg__opt:has(input:checked){border-color:var(--p);background:color-mix(in srgb,var(--p) 8%,var(--bg2));color:var(--kc);box-shadow:0 0 0 1px var(--p) inset;font-weight:600}
.taal-seg__opt:has(input:focus-visible){outline:2px solid var(--p);outline-offset:2px}
/* fix 30-07: strakke actieve rand op segment-taalknop (geen inset-shadow, geen focus-glow) */
.taal-seg__opt:has(input:checked){box-shadow:none}
.taal-seg__opt:has(input:focus-visible){outline:none}
/* Compact taal-segment (B) — vlag + code, zacht getint actief. Canoniek voor
 editor-headers (dossierflow, offerte, akte, herinneringen). Zie vorioTaalSegment(). */
.taal-seg--compact{display:inline-flex;gap:6px;flex-wrap:nowrap;padding:3px;border:0;box-shadow:0 0 0 1.5px var(--border2);border-radius:var(--r);background:var(--bg3)}
.taal-seg__pill{display:inline-flex;align-items:center;gap:7px;font-family:var(--font);font-size:12.5px;font-weight:600;color:var(--text2);background:none;border:0;padding:6px 13px;border-radius:var(--r-2);cursor:pointer;transition:background .14s,color .14s;box-sizing:border-box}
.taal-seg__pill:hover{color:var(--text1)}
.taal-seg__pill.on{background:color-mix(in srgb,var(--p) 16%,transparent);color:var(--kc);box-shadow:0 0 0 1px color-mix(in srgb,var(--p) 45%,transparent) inset;font-weight:600}
.taal-seg__pill .taal-vlag{--taal-vlag-sz:16px}

/* v-datepicker (klik-kalender voor DD-MM-JJJJ velden, js/vorio-datepicker.js) */
.v-dp-wrap{position:relative;display:block}
.v-dp-wrap>input{padding-right:38px}
.v-dp-btn{position:absolute;top:50%;right:6px;transform:translateY(-50%);width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:var(--r-sm);color:var(--text3);cursor:pointer;padding:0;transition:color var(--t-fast,.12s)}
.v-dp-btn:hover{background:var(--bg3);color:var(--kc)}
.v-dp-wrap.is-open .v-dp-btn{color:var(--kc)}
.v-dp-pop{position:fixed;z-index:var(--z-modal-top,11000);width:248px;background:var(--bg2);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--shadow-lg);padding:var(--space-3) var(--space-3) var(--space-2);font-family:var(--font)}
.v-dp-kop{display:flex;align-items:center;gap:2px;margin:0 2px var(--space-2)}
.v-dp-titel{flex:1;text-align:center;font-weight:700;font-size:13px;color:var(--text1);text-transform:capitalize}
.v-dp-nav{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:0;background:transparent;border-radius:var(--r-sm);color:var(--text3);cursor:pointer;padding:0}
.v-dp-nav:hover{background:var(--bg3);color:var(--text1)}
.v-dp-tab{width:100%;border-collapse:collapse;font-size:12px;text-align:center}
.v-dp-tab th{color:var(--text3);font-weight:600;padding:3px 0}
.v-dp-tab td{padding:1px}
.v-dp-tab td button{display:inline-flex;width:28px;height:28px;align-items:center;justify-content:center;border:0;background:transparent;border-radius:50%;color:var(--text2);cursor:pointer;font-size:12px;font-variant-numeric:tabular-nums;font-family:inherit}
.v-dp-tab td button:hover{background:var(--bg3);color:var(--text1)}
.v-dp-tab td button.dim{color:var(--border)}
.v-dp-tab td button.vandaag{box-shadow:inset 0 0 0 1.5px var(--p);font-weight:700}
.v-dp-tab td button.gekozen{background:var(--p);color:#fff;font-weight:700}
.v-dp-tab td button.gekozen:hover{background:var(--p);color:#fff}
.v-dp-voet{display:flex;justify-content:center;margin-top:6px;padding-top:var(--space-2);border-top:1px solid var(--border)}
.v-dp-vandaag{border:0;background:transparent;color:var(--kc);font-weight:600;font-size:12px;cursor:pointer;padding:var(--space-1) 10px;border-radius:var(--r-sm);font-family:inherit}
.v-dp-vandaag:hover{background:var(--bg3)}

/* Mijn notities — inklapbaar zijpaneel (drawer) + edge-tab.
 Vorio-stijl: DM Sans + kantoor-accent (--accent), tokens uit vorio-base.css.
 Geïnjecteerd door de notities-module in js/vorio-lib.js. */
/* flag/priority-kleuren (semantisch, thema-onafhankelijk) */
:root{
  --vnot-red:#e5484d; --vnot-orange:#e08a2b; --vnot-yellow:#d4a200;
  --vnot-green:#2e9e6b; --vnot-blue:#2f74d0; --vnot-purple:#8256d0;
}
html[data-theme="dark"]{--vnot-yellow:#e8bd3a; --vnot-green:#43b985;}

/* scrim + drawer */
.vnot-scrim{position:fixed;inset:0;z-index:var(--z-drawer,8500);background:rgba(15,23,42,.34);opacity:0;visibility:hidden;transition:opacity .3s}
html[data-theme="dark"] .vnot-scrim{background:rgba(0,0,0,.5)}
.vnot-scrim.open{opacity:1;visibility:visible}
.vnot-drawer{position:fixed;top:0;right:0;height:100%;width:600px;max-width:96vw;z-index:calc(var(--z-drawer,8500) + 1);
  background:var(--bg2);border-left:1px solid var(--border);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .34s cubic-bezier(.4,0,.2,1)}
html[data-theme="dark"] .vnot-drawer.open{box-shadow:-24px 0 70px -24px rgba(0,0,0,.6)}
.vnot-drawer.open{transform:none;box-shadow:-24px 0 60px -24px rgba(26,26,46,.28)}

.vnot-dhead{display:flex;align-items:center;gap:11px;padding:15px var(--space-4);border-bottom:1px solid var(--border)}
.vnot-dhead__ic{width:34px;height:34px;border-radius:var(--r);background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--kc);display:flex;align-items:center;justify-content:center;flex:none}
.vnot-dhead__ic svg{width:18px;height:18px}
.vnot-dhead__t{font-weight:700;font-size:16px;letter-spacing:-.2px;color:var(--text1)}
.vnot-dhead__s{font-size:12px;color:var(--text3);margin-top:1px}
.vnot-dhead__tools{margin-left:auto;display:flex;gap:var(--space-1)}
.vnot-ibtn{width:31px;height:31px;border-radius:var(--r-2);border:0;background:transparent;color:var(--text2);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.14s}
.vnot-ibtn:hover{background:var(--row-hover);color:var(--text1)}
.vnot-ibtn svg{width:17px;height:17px}

.vnot-dbody{flex:1;display:grid;grid-template-columns:172px minmax(0,1fr);min-height:0;transition:grid-template-columns .28s ease}
.vnot-drawer.mini .vnot-dbody{grid-template-columns:54px minmax(0,1fr)}

/* rail (slimme lijsten; in Fase 3 komen eigen lijsten/submappen erbij) */
.vnot-rail{background:var(--bg);border-right:1px solid var(--border);display:flex;flex-direction:column;min-height:0;overflow:hidden}
html[data-theme="dark"] .vnot-rail{background:var(--bg)}
.vnot-rail__top{display:flex;align-items:center;justify-content:space-between;padding:10px var(--space-2) 3px}
.vnot-rail__lbl{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text3);padding-left:6px}
.vnot-drawer.mini .vnot-rail__lbl{display:none}
.vnot-drawer.mini .vnot-rail__top{justify-content:center}
.vnot-railtog{width:26px;height:26px;border:0;background:transparent;border-radius:var(--r-2);color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.vnot-railtog:hover{background:var(--row-hover);color:var(--text1)}
.vnot-railtog svg{width:16px;height:16px;transition:transform .28s}
.vnot-drawer.mini .vnot-railtog svg{transform:rotate(180deg)}
.vnot-rail__scroll{flex:1;overflow:auto;padding:10px var(--space-3) 10px}
.vnot-lrow{display:flex;align-items:center;gap:10px;height:34px;padding:0 9px;border-radius:var(--r-2);cursor:pointer;font-size:13.5px;color:var(--text1);transition:background var(--t-fast,.12s)}
.vnot-lrow:hover{background:var(--row-hover)}
.vnot-lrow.sel{background:color-mix(in srgb,var(--accent) 13%,transparent);font-weight:600}
.vnot-lic{width:23px;height:23px;border-radius:var(--r-2);flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.vnot-lic svg{width:14px;height:14px}
.vnot-llbl{white-space:nowrap;overflow:hidden}
.vnot-lc{margin-left:auto;font-size:12px;color:var(--text3);font-weight:600;font-variant-numeric:tabular-nums}
.vnot-lrow.sel .vnot-lc{color:var(--kc)}
.vnot-drawer.mini .vnot-llbl,.vnot-drawer.mini .vnot-lc{display:none}
.vnot-drawer.mini .vnot-lrow{justify-content:center;padding:0}

/* main */
.vnot-main{display:flex;flex-direction:column;min-height:0;background:var(--bg2)}
.vnot-mtop{display:flex;align-items:center;gap:9px;padding:15px 18px 9px}
.vnot-mtitle{font-weight:700;font-size:19px;letter-spacing:-.3px;display:flex;align-items:center;gap:var(--space-2);color:var(--text1)}
.vnot-mtitle svg{width:20px;height:20px;color:var(--kc)}
.vnot-mcount{font-size:14px;color:var(--text3);font-weight:600}
.vnot-scroll{flex:1;overflow:auto;padding:2px var(--space-3) var(--space-2)}
.vnot-empty{padding:40px 22px;text-align:center;color:var(--text3);font-size:13px}
.vnot-empty--rich{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100%;box-sizing:border-box;padding:var(--space-5) 22px 104px}
.vnot-empty-ic{width:52px;height:52px;border-radius:15px;display:flex;align-items:center;justify-content:center;margin-bottom:15px}
.vnot-empty-ic svg{width:25px;height:25px}
.vnot-empty-t{font-size:14px;font-weight:600;color:var(--text1);margin-bottom:5px}
.vnot-empty-s{font-size:12px;line-height:1.5;color:var(--text3);max-width:240px}
.vnot-sec{display:flex;align-items:center;gap:7px;padding:var(--space-3) 10px 5px;font-size:11px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;color:var(--text3)}
.vnot-sec svg{width:12px;height:12px}

.vnot-item{display:flex;gap:11px;align-items:flex-start;padding:10px 10px;border-radius:var(--r);position:relative;
  animation:vnotRise .4s cubic-bezier(.2,.7,.3,1) both}
@keyframes vnotRise{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
.vnot-item:hover{background:var(--row-hover)}
.vnot-item+.vnot-item{box-shadow:0 -1px 0 var(--border)}
.vnot-item.pinnd{background:linear-gradient(90deg,color-mix(in srgb,var(--accent) 6%,transparent),transparent 66%)}
.vnot-pbar{position:absolute;left:1px;top:10px;bottom:10px;width:3px;border-radius:3px}
.vnot-pbar.p3{background:var(--vnot-red)} .vnot-pbar.p2{background:var(--vnot-orange)} .vnot-pbar.p1{background:var(--text3)}
.vnot-chk{width:20px;height:20px;border-radius:50%;flex:none;margin-top:1px;cursor:pointer;border:1.7px solid var(--text3);display:flex;align-items:center;justify-content:center;transition:var(--t-base,.15s);background:transparent;padding:0}
.vnot-chk[data-c]{border-color:var(--cc)}
.vnot-chk svg{width:11px;height:11px;color:#fff;opacity:0;transform:scale(.6);transition:var(--t-base,.15s)}
.vnot-item.done .vnot-chk{background:var(--cc,var(--accent));border-color:var(--cc,var(--accent))}
.vnot-item.done .vnot-chk svg{opacity:1;transform:none}
.vnot-ib{flex:1;min-width:0}
.vnot-it{font-size:14px;font-weight:500;color:var(--text1);display:flex;align-items:center;gap:7px;letter-spacing:-.1px}
.vnot-item.done .vnot-it{color:var(--text3);text-decoration:line-through}
.vnot-txt{cursor:text}
.vnot-meta{display:flex;align-items:center;gap:7px;margin-top:7px;flex-wrap:wrap}
.vnot-chip{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:600;padding:3px var(--space-2);border-radius:var(--r-xl);background:var(--bg);border:var(--bd);color:var(--text2)}
.vnot-chip svg{width:12px;height:12px}
.vnot-chip.d-red{background:color-mix(in srgb,var(--vnot-red) 12%,transparent);color:var(--vnot-red);border-color:transparent}
.vnot-chip.d-amber{background:color-mix(in srgb,var(--vnot-orange) 15%,transparent);color:#b96f1c;border-color:transparent}
html[data-theme="dark"] .vnot-chip.d-amber{color:#e8a34a}
.vnot-chip.dossier{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--kc);border-color:transparent}
.vnot-chip.openlink{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--kc);border-color:transparent;cursor:pointer}
.vnot-chip.openlink:hover{background:color-mix(in srgb,var(--accent) 20%,transparent)}
.vnot-subgo{margin-left:auto;display:inline-flex;align-items:center;gap:3px;background:transparent;border:0;color:var(--kc);font:inherit;font-size:11px;font-weight:700;cursor:pointer;padding:2px 7px;border-radius:var(--r-sm)}
.vnot-subgo:hover{background:color-mix(in srgb,var(--accent) 13%,transparent)}
.vnot-subgo svg{width:12px;height:12px}
.vnot-flag{width:14px;height:14px;flex:none}
.vnot-prio{font-weight:800;font-size:13px;letter-spacing:-1px}
.vnot-prio.p3{color:var(--vnot-red)} .vnot-prio.p2{color:var(--vnot-orange)} .vnot-prio.p1{color:var(--text3)}
.vnot-pinmark{width:14px;height:14px;color:var(--kc);flex:none;align-self:flex-start;margin-top:2px}
.vnot-pinmark svg{display:block;width:100%;height:100%}
.vnot-acts{display:flex;gap:1px;margin-left:auto;align-self:flex-start;margin-top:1px;opacity:0;transition:.14s}
.vnot-item:hover .vnot-acts{opacity:1}
.vnot-acts button{width:27px;height:27px;border:0;background:transparent;border-radius:var(--r-2);color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer}
.vnot-acts button:hover{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--text1)}
.vnot-acts button.on{color:var(--kc)}
.vnot-acts svg{width:15px;height:15px}

.vnot-compose{flex:none;display:flex;align-items:center;gap:var(--space-2);padding:11px 14px;border-top:1px solid var(--border);background:var(--bg)}
.vnot-compose input{min-width:0;height:var(--ctrl-h);border:var(--bd);background:var(--bg2);border-radius:var(--r);padding:0 11px;font:inherit;font-size:13.5px;color:var(--text1)}
.vnot-compose input::placeholder{color:var(--text3)}
.vnot-compose input:focus{outline:none;border-color:var(--accent)}
.vnot-cdate{width:108px;flex:none;text-align:center;height:var(--ctrl-h);border:var(--bd);background:var(--bg2);border-radius:var(--r);color:var(--text1);font:inherit;font-size:13px;padding:0 var(--space-2)}
.vnot-cdate::placeholder{color:var(--text3)}
.vnot-cdate:focus{outline:none;border-color:var(--accent)}
.vnot-cgo{width:38px;height:38px;flex:none;border:0;border-radius:var(--r);background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:background var(--t-fast,.12s)}
.vnot-cgo:hover{background:color-mix(in srgb,var(--accent) 88%,#000)}
.vnot-cgo svg{width:17px;height:17px}

/* inline bewerken */
.vnot-edit__ta{width:100%;height:54px;padding:var(--space-2) 10px;resize:vertical;border:var(--bd);background:var(--bg2);border-radius:var(--r-2);color:var(--text1);font:inherit;font-size:13.5px}
.vnot-edit__ta:focus{outline:none;border-color:var(--accent)}
.vnot-edit__row{display:flex;gap:var(--space-2);margin-top:7px;align-items:center;flex-wrap:wrap}
.vnot-cgo.vnot-edit__save{width:auto;padding:0 14px;font-size:12.5px;font-weight:600}
.vnot-edit__cancel{border:0;background:transparent;color:var(--text3);cursor:pointer;font:inherit;font-size:12.5px;padding:6px var(--space-1)}
.vnot-edit__cancel:hover{color:var(--text1)}

/* coach bij de tab (body-fixed) */
.vnot-coach{position:fixed;z-index:10000;width:230px}
.vnot-coach::before{content:"";position:absolute;left:-5px;top:calc(50% - 7px);width:14px;height:14px;background:var(--vct-bg,var(--accent));transform:rotate(45deg);border-radius:3px;z-index:-1}

/* help-FAB (Vorio Assistent) wegduwen zolang het notities-paneel open is */
html.vnot-open .vh-fab{display:none}

/* context-menu (rechtermuisknop / ⋯) */
.vnot-menu{position:fixed;z-index:calc(var(--z-drawer,8500) + 2);min-width:210px;max-width:min(340px,calc(100vw - 16px));background:var(--bg2);border:var(--bd);border-radius:var(--r-card);box-shadow:var(--shadow-lg);padding:6px;font-family:var(--font,'DM Sans',system-ui,sans-serif)}
html[data-theme="dark"] .vnot-menu{box-shadow:var(--shadow-lg)}
.vnot-mi{display:flex;align-items:center;gap:10px;width:100%;border:0;background:transparent;border-radius:var(--r-2);padding:var(--space-2) 10px;font:inherit;font-size:13.5px;color:var(--text1);cursor:pointer;text-align:left}
.vnot-mi:hover{background:var(--row-hover)}
.vnot-mi svg{width:16px;height:16px;color:var(--text2);flex:none}
.vnot-mi.danger{color:var(--vnot-red)} .vnot-mi.danger svg{color:var(--vnot-red)}
.vnot-msec{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;color:var(--text3);padding:var(--space-2) 10px var(--space-1)}
.vnot-msep{height:1px;background:var(--border);margin:5px var(--space-1)}
.vnot-mswatches{display:flex;gap:7px;padding:2px 10px 5px;flex-wrap:wrap}
.vnot-sw{width:22px;height:22px;border-radius:50%;border:0;background:var(--sw);cursor:pointer;padding:0}
.vnot-sw.on{box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--sw)}
.vnot-sw--none{background:var(--bg);border:var(--bd);color:var(--text3);display:flex;align-items:center;justify-content:center}
.vnot-sw--none svg{width:13px;height:13px}
.vnot-sw--none.on{box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--text3)}
.vnot-mprio{display:flex;gap:5px;padding:2px 10px 7px}
.vnot-pr{flex:1;border:var(--bd);background:var(--bg2);border-radius:var(--r-2);padding:5px var(--space-1);font:inherit;font-size:11.5px;font-weight:600;color:var(--text2);cursor:pointer}
.vnot-pr:hover{border-color:var(--accent);color:var(--text1)}
.vnot-pr.on{background:color-mix(in srgb,var(--accent) 14%,transparent);border-color:transparent;color:var(--kc)}

/* menu-item badge (aantal open notities in het profielmenu) */
.vnot-badge{margin-left:auto;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r);background:var(--vnot-red);color:#fff;font-size:11.5px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;line-height:1}
.vnot-badge[hidden]{display:none}

/* Fase 3: eigen lijsten in de rail */
.vnot-rlabel{font-size:10.5px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--text3);padding:14px 10px 5px}
.vnot-ldot{width:11px;height:11px;border-radius:50%;flex:none;margin:0 6px}
.vnot-lrow--sub{padding-left:28px}
.vnot-lrow--sub .vnot-ldot{opacity:.6}
.vnot-newlist{display:flex;align-items:center;gap:9px;padding:var(--space-2) 10px;margin-top:var(--space-1);border-radius:var(--r-2);color:var(--kc);font-size:13px;font-weight:600;cursor:pointer}
.vnot-newlist:hover{background:var(--row-hover)}
.vnot-newlist svg{width:15px;height:15px;flex:none}
.vnot-newlist--editing{display:block;cursor:default}
.vnot-newlist--editing:hover{background:transparent}
.vnot-nlinput{width:100%;height:var(--ctrl-h-sm);border:1px solid var(--accent);background:var(--bg2);border-radius:var(--r-2);padding:0 10px;font:inherit;font-size:13px;color:var(--text1)}
.vnot-nlinput:focus{outline:none}
.vnot-nlsw-row{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap}
.vnot-nlsw{width:19px;height:19px;border-radius:50%;border:0;background:var(--sw);cursor:pointer;padding:0}
.vnot-nlsw.on{box-shadow:0 0 0 2px var(--bg2),0 0 0 4px var(--sw)}

/* navigatiekolom verbergen */
.vnot-drawer.railverborgen .vnot-rail{display:none}
.vnot-drawer.railverborgen .vnot-dbody{grid-template-columns:1fr}

/* context-menu: verplaats naar lijst */
.vnot-mlijsten{display:flex;flex-direction:column;gap:1px;padding:2px 6px var(--space-1);max-height:150px;overflow:auto}
.vnot-ml{display:flex;align-items:center;gap:var(--space-2);width:100%;border:0;background:transparent;border-radius:var(--r-2);padding:6px var(--space-2);font:inherit;font-size:12.5px;color:var(--text1);cursor:pointer;text-align:left}
.vnot-ml:hover{background:var(--row-hover)}
.vnot-ml.on{background:color-mix(in srgb,var(--accent) 13%,transparent);color:var(--kc);font-weight:600}
.vnot-mldot{width:9px;height:9px;border-radius:50%;flex:none}

/* Fase 5: dossierkoppeling */
button.vnot-chip{font-family:inherit;cursor:pointer}
.vnot-chip.dossier{cursor:pointer}
.vnot-chip.dossier:hover{text-decoration:underline}
.vnot-dz{padding:2px}
.vnot-dzin{width:100%;height:34px;border:1px solid var(--accent);background:var(--bg2);border-radius:var(--r-2);padding:0 10px;font:inherit;font-size:13px;color:var(--text1)}
.vnot-dzin:focus{outline:none}
.vnot-dzres{max-height:210px;overflow:auto;margin-top:var(--space-1)}
.vnot-dzrij{display:block;width:100%;border:0;background:transparent;border-radius:var(--r-2);padding:7px 9px;font:inherit;font-size:12.5px;color:var(--text2);cursor:pointer;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vnot-dzrij b{color:var(--text1)}
.vnot-dzrij:hover{background:var(--row-hover)}
.vnot-dzleeg{padding:10px;color:var(--text3);font-size:12.5px;text-align:center}

/* Fase 4: subtaken (checklist in een notitie) */
.vnot-subs{margin-top:7px;display:flex;flex-direction:column;gap:1px}
.vnot-sub{display:flex;align-items:center;gap:var(--space-2);padding:3px 2px;border-radius:var(--r-sm)}
.vnot-sub:hover{background:var(--row-hover)}
.vnot-subchk{width:16px;height:16px;border-radius:var(--r-sm);flex:none;border:1.6px solid var(--text3);background:transparent;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.vnot-subchk svg{width:9px;height:9px;color:#fff;opacity:0;transition:.14s}
.vnot-subchk.done{background:var(--accent);border-color:var(--accent)}
.vnot-subchk.done svg{opacity:1}
.vnot-subtxt{flex:1;font-size:13px;color:var(--text1);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.vnot-subtxt.done{color:var(--text3);text-decoration:line-through}
.vnot-subdel{width:22px;height:22px;border:0;background:transparent;border-radius:var(--r-sm);color:var(--text3);display:flex;align-items:center;justify-content:center;cursor:pointer;opacity:0;flex:none}
.vnot-sub:hover .vnot-subdel{opacity:.7}
.vnot-subdel:hover{opacity:1;color:var(--vnot-red)}
.vnot-subdel svg{width:13px;height:13px}
.vnot-subadd{display:flex;align-items:center;gap:6px;padding:var(--space-1) 2px;font-size:12.5px;color:var(--text3);cursor:pointer;opacity:0;border-radius:var(--r-sm)}
.vnot-item:hover .vnot-subadd{opacity:.75}
.vnot-subadd:hover{opacity:1;color:var(--kc)}
.vnot-subadd svg{width:13px;height:13px;flex:none}
.vnot-subin{width:100%;height:28px;border:1px solid var(--accent);background:var(--bg2);border-radius:var(--r-2);padding:0 var(--space-2);font:inherit;font-size:13px;color:var(--text1)}
.vnot-subin:focus{outline:none}

/* Dossiers-groepering */
.vnot-dossec{padding-top:14px}
.vnot-doslink{border:0;background:transparent;color:var(--kc);font:inherit;font-size:11.5px;font-weight:700;letter-spacing:.3px;display:inline-flex;align-items:center;gap:6px;cursor:pointer;padding:0}
.vnot-doslink svg{width:13px;height:13px}
.vnot-doslink:hover{text-decoration:underline}

.vnot-rdiv{height:1px;background:var(--border);margin:9px var(--space-3) 7px}

/* Fase 6: tijdstip-veld (native time, thema-aware) */
.vnot-ctime{width:66px;flex:none;height:var(--ctrl-h);border:var(--bd);background:var(--bg2);border-radius:var(--r);padding:0 6px;font:inherit;font-size:12.5px;color:var(--text1);text-align:center}
html[data-theme="dark"] .vnot-ctime{color-scheme:dark}
.vnot-ctime:focus{outline:none;border-color:var(--accent)}
.vnot-edit__row .vnot-cdate{width:132px}
.vnot-edit__row .vnot-ctime{width:70px}

.vnot-cgo{flex:none}
.vnot-compose{gap:7px}

/* herinnering-toast (klokje, blijft staan tot wegklikken) */
.vnot-rtoasts{position:fixed;right:20px;bottom:20px;z-index:9200;display:flex;flex-direction:column;gap:10px;max-width:340px}
.vnot-rtoast{display:flex;align-items:flex-start;gap:11px;background:#1f2937;color:#fff;padding:var(--space-3) var(--space-3) var(--space-3) 14px;border-radius:var(--r-card);box-shadow:var(--shadow-lg);border-left:3px solid var(--vnot-orange);cursor:pointer;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s}
.vnot-rtoast.in{opacity:1;transform:none}
.vnot-rtoast__ic{color:var(--vnot-orange);flex:none;margin-top:1px}
.vnot-rtoast__ic svg{width:18px;height:18px}
.vnot-rtoast__body{flex:1;min-width:0}
.vnot-rtoast__lbl{font-size:10.5px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;opacity:.65}
.vnot-rtoast__txt{font-size:13.5px;font-weight:500;margin-top:2px;word-break:break-word;line-height:1.35}
.vnot-rtoast__x{flex:none;width:24px;height:24px;border:0;background:transparent;color:rgba(255,255,255,.7);border-radius:var(--r-sm);cursor:pointer;display:flex;align-items:center;justify-content:center}
.vnot-rtoast__x:hover{background:rgba(255,255,255,.15);color:#fff}
.vnot-rtoast__x svg{width:14px;height:14px}

/* actieknoppen (pin/⋯) verbergen tijdens bewerken */
.vnot-item.vnot-editing .vnot-acts{display:none}
.vnot-item.vnot-editing:hover{background:transparent}

.vnot-ibtn.vnot-notif-off{color:var(--text3)}

.vnot-compose>input[data-vnot="tekst"]{flex:1}

/* snooze-knoppen op de herinnering-toast */
.vnot-rtoast__snooze{display:flex;gap:6px;margin-top:var(--space-2)}
.vnot-rtoast__snooze button{border:0;background:rgba(255,255,255,.14);color:#fff;font:inherit;font-size:11.5px;font-weight:600;padding:var(--space-1) 9px;border-radius:var(--r-2);cursor:pointer}
.vnot-rtoast__snooze button:hover{background:rgba(255,255,255,.26)}

/* datum/tijd-chip is klikbaar -> bewerken */
.vnot-chip--edit{cursor:pointer}
.vnot-chip--edit:hover{filter:brightness(1.12)}

/* Mijn notities — back-knop (alleen zichtbaar in mobiel-detail) */
.vnot-dhead__back{display:none}

/* Mijn notities — mobiel: single-pane (lijst → detail, gestapeld) */
@media (max-width:560px){
  .vnot-drawer{width:100%;max-width:100%;border-left:0}
  .vnot-dbody{display:block;position:relative;overflow:hidden}
  .vnot-rail,.vnot-main{position:absolute;top:0;left:0;right:0;bottom:0;width:auto}
  .vnot-rail{border-right:0}
  .vnot-main{opacity:0;visibility:hidden;transition:opacity .2s ease}
  .vnot-drawer.m-detail .vnot-rail{visibility:hidden}
  .vnot-drawer.m-detail .vnot-main{opacity:1;visibility:visible}
  .vnot-rail__scroll{padding:var(--space-2) 10px var(--space-4)}
  .vnot-lrow{height:46px;font-size:15px;padding:0 var(--space-3);gap:var(--space-3)}
  .vnot-lic{width:30px;height:30px;border-radius:var(--r-2)}
  .vnot-lic svg{width:17px;height:17px}
  .vnot-lc{font-size:13px}
  .vnot-drawer.m-detail .vnot-dhead__back{display:flex}
  .vnot-drawer.m-detail .vnot-dhead__ic{display:none}
  .vnot-ibtn[data-vnot="railtog"]{display:none}
  .vnot-mtop{padding:13px var(--space-4) 6px}
  .vnot-compose{flex-wrap:wrap;gap:7px}
  .vnot-compose>input[data-vnot="tekst"]{flex:1 1 100%}
  .vnot-cdate{flex:1 1 auto;width:auto}
  .vnot-ctime{flex:none}
}

/* Avatar-select dropdown (gedeeld: passeeragenda + dossierlijst-behandelaar). Verplaatst uit calendar.css naar base zodat er één bron is. */
.pas-avsel{position:relative;width:100%}
.pas-avsel-trig{position:relative;display:flex;align-items:center;gap:var(--space-2);width:100%;height:36px;box-sizing:border-box;padding:0 30px 0 var(--space-2);border:var(--bd);border-radius:var(--r-2);background-color:var(--bg2);background-image:var(--v-chevron);background-repeat:no-repeat;background-position:right 10px center;color:var(--text);font-size:13px;font-family:var(--font);cursor:pointer;text-align:left;outline:none;transition:border-color var(--t-base,.15s)}
.pas-avsel.open .pas-avsel-trig,.pas-avsel-trig:focus-visible{border-color:var(--p)}
.pas-avsel-val{display:flex;align-items:center;gap:var(--space-2);min-width:0;flex:1}
.pas-avsel-val.pas-avsel-ph{color:var(--text3)}
.pas-avsel-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pas-avsel-pop{position:absolute;z-index:70;top:calc(100% + 4px);left:0;right:0;max-height:280px;overflow-y:auto;background:var(--bg2);border:var(--bd);border-radius:var(--r-2);box-shadow:var(--shadow-lg);padding:var(--space-1)}
.pas-avsel-opt{position:relative;display:flex;align-items:center;gap:var(--space-2);width:100%;box-sizing:border-box;padding:6px var(--space-2);border:0;border-radius:var(--r-sm);background:transparent;color:var(--text);font-size:13px;font-family:var(--font);cursor:pointer;text-align:left}
.pas-avsel-opt:hover{background:var(--pg)}
.pas-avsel-opt.is-sel{background:var(--pg)}
.pas-avsel-opt .pas-avsel-nm{flex:1}
.pas-avsel-check{color:var(--p);flex-shrink:0}
.pas-avsel-leeg{padding:10px;color:var(--text3);font-size:12px;text-align:center}
html.density-compact .pas-avsel-trig{height:32px;font-size:12.5px}
html.density-compact .pas-avsel-opt{padding:var(--space-1) var(--space-2);font-size:12.5px}

/* Behandelaar/medewerker-filter selects: vaste breedte zodat ze niet async breder worden zodra
 JS de medewerkernamen inlaadt (native select auto-sized naar breedste optie → verschuivende filterbalk). */
#medewerkerFilter,#offMedFilter,#debHandlerFilter,#awMwFilter,#agfBehFilter,#ondBeh,#filterBehandelaar.select-styled{width:170px;max-width:100%}

/* twemoji inline sizing (gedeeld; was 6x inline in medewerker/*.php) */
img.emoji{height:1em;width:1em;vertical-align:-0.1em;display:inline-block;}
/* Sleep-en-hecht dropzone-overlay (gedeeld: agenda + debiteuren) */
.v-dropzone{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;background:color-mix(in srgb,var(--kc,var(--p)) 8%,rgba(0,0,0,.3));pointer-events:none}
.v-dropzone.actief{display:flex}
.v-dropzone__card{display:flex;align-items:center;gap:var(--space-3);padding:22px 30px;background:var(--bg2);border:2px dashed var(--kc,var(--p));border-radius:var(--r-lg);color:var(--kc,var(--p));font-weight:600;font-size:15px;box-shadow:var(--shadow-lg)}
.v-dropzone__card svg{width:28px;height:28px;flex-shrink:0}