/* ═══════════════════════════════════════════════════════
   Mindcare 2.0 — Design System
   ═══════════════════════════════════════════════════════ */

/* ── Tokens ─────────────────────────────────────────── */
:root {
  color-scheme: light; /* s348 DES-02: native form-control-chrome (checkbox/select/datepicker/
     scrollbar) volgt data-theme i.p.v. losse OS-voorkeur (§3.3) — de [data-theme="dark"]-
     tegenhanger (color-scheme:dark) staat in het geconsolideerde dark-blok hieronder */
  --navy:      #1e3a5f;
  --navy-dark: #152942;
  --navy-mid:  #2d5282;
  --teal:      #0f766e;
  --teal-pale: #f0fdf9;
  --red:       #dc2626;
  --orange:    #c2410c; /* AA: 5,2:1 op wit, ook als achtergrond onder witte tekst */
  --green:     #166534;
  --green-pale:#f0fdf4;

  /* s259 DES-1 — de 2.0-surface/tekst/font-tokens zijn ge-aliast naar de
     3.0-tokens (r540+): de warme waarden zijn de basis; het thema
     (Instellingen → App-stijl) her-point de --mc-*-tokens via
     [data-mc-style="uitzicht"], en dark mode overschrijft hieronder met literals
     zoals voorheen. Alle oude var(--bg)/var(--font)-referenties volgen zo
     automatisch de gekozen stijl — einde drie-generaties-drift. */
  --bg:        var(--mc-bg-warm);
  --surface:   var(--mc-bg-elevated);
  --border:    var(--mc-border-warm);
  --border-2:  var(--mc-border-strong);

  --text:      var(--mc-text-warm);
  --text-mid:  var(--mc-text-mid);
  --text-light:var(--mc-text-light); /* s257 A11Y-1 blijft gedekt — --mc-text-light is AA (≥4,6:1) in beide stijlen */

  --r:         10px;
  --r-lg:      16px;
  /* s261 DES-5 — radius-schaal compleet + shadows ge-aliast naar de 3.0-laag
     (navy-getint, consistent met --mc-shadow*); losse px-radii migreren
     opportunistisch naar --r-sm/--r/--r-lg/--r-xl. */
  --r-sm:      7px;
  --r-xl:      20px;
  --shadow:    var(--mc-shadow);
  --shadow-lg: var(--mc-shadow-lg);

  /* s348 DES-04 — type-schaal (7 stappen, vloer 11px voor leesbaarheid). Doel voor nieuwe/
     gemigreerde declaraties; volledige migratie van de resterende app.css-sites + pages/*.js-
     inline-styles = apart XL-bouwplan (DES-01). De token-pariteit-guard in pre-deploy-check.js
     voorkomt ondertussen nieuwe drift. */
  --fs-1: 11px;  /* micro: badges/labels/meta/th/table-koppen (was 8.5-11px) */
  --fs-2: 12px;  /* small: kleine knoppen/iconlabels (was 11.5-12px) */
  --fs-3: 13px;  /* body-secundair: table/tabs/alerts/inputs (was 12.5-13px) */
  --fs-4: 14px;  /* basis: html-root/body/card-title (was 13.5-14px) */
  --fs-5: 17px;  /* subheading (was 15-19px) */
  --fs-6: 22px;  /* heading (was 20-25px) */
  --fs-7: 28px;  /* display/page-title (was 26-36px) */

  --lh-tight: 1.1;  /* koppen/kpi-cijfers (page-title, kpi-val) */
  --lh-body:  1.5;  /* lopende tekst — WCAG 1.4.12 Text-Spacing-richtwaarde (≥1.5×) */

  --font:      var(--mc-sans);
  --font-serif:var(--mc-serif);

  --sidebar-w: 224px;
  --header-h:  0px;
}

/* ── Donkere modus ────────────────────────────────────── */
/* s348 DES-02 — geconsolideerd tot ÉÉN generatie. --bg/--surface/--border/--border-2/--text/
   --text-mid/--text-light zijn HIER VERWIJDERD: ze liepen dubbel met de --mc-*-repointing op
   r~718 (via de s259-aliasing) maar met een ANDER hex-palet (#0f172a/#1e293b hier vs
   #0d1620/#14202e daar) — dat was de zichtbare kleurinconsistentie tussen "basis" en "kaart"-
   surfaces in dark mode. De accentprimitieven (--navy/--teal-familie + --shadow) blijven WÉL:
   ze zijn niet ge-aliast (--mc-navy:var(--navy) leunt op déze override) en voeden 84
   var(--navy)-call-sites. color-scheme:dark = de tegenhanger van :root{color-scheme:light}
   (EDIT 1): zónder deze regel blijft native form-control-chrome licht in dark mode. */
[data-theme="dark"] {
  --navy:      #60a5fa;
  --navy-dark: #3b82f6;
  --navy-mid:  #93c5fd;
  --teal:      #2dd4bf;
  --teal-pale: #0f2723;

  --shadow:    0 1px 4px rgba(0,0,0,.3), 0 4px 16px rgba(0,0,0,.2);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.4);

  color-scheme: dark; /* s348 DES-02 (reviewer-fix) — dark-tegenhanger van EDIT 1's :root{color-scheme:light} */
}

[data-theme="dark"] #sidebar { background: var(--mc-bg-elevated); border-right-color: var(--mc-border-warm); }
[data-theme="dark"] .sb-item:hover,
[data-theme="dark"] .sb-item.active { background: rgba(255,255,255,.08); }
[data-theme="dark"] .modal { background: var(--mc-bg-elevated); }
[data-theme="dark"] .card { background: var(--mc-bg-elevated); }
[data-theme="dark"] input, [data-theme="dark"] select, [data-theme="dark"] textarea {
  background: var(--mc-bg-warm); color: var(--text); border-color: var(--border);
}
/* s549 WCAG 1.4.3 — het dark-blok hierboven maakt --navy/--navy-mid/--teal juist LICHTER
   (#60a5fa / #93c5fd / #2dd4bf), terwijl .btn-primary/.btn-teal color:#fff houden (r317/r319).
   Gemeten met de WCAG-formule uit tests/design-contrast.test.mjs: wit op #60a5fa = 2,54:1, op
   #93c5fd (de hover-tint) = 1,80:1, op #2dd4bf = 1,86:1 — elke primaire knop in dark mode
   onleesbaar. Donkere knoptekst i.p.v. donkerdere accenten (kleinste diff, laat de accentkleur
   zelf ongemoeid voor borders/links): 7,17:1 · 10,10:1 · 9,79:1 — AAA, ook op de hover-tint.
   .btn-danger blijft bewust wit: --red wordt in dark NIET her-point, wit op #dc2626 = 4,83:1 (AA). */
[data-theme="dark"] .btn-primary,
[data-theme="dark"] .btn-teal { color: var(--mc-bg-warm); }
/* ⚠ s549 — DE REGEL HIERBOVEN WERD IN DE HELE INGELOGDE APP OVERSCHREVEN, en dat is in de
   browser gemeten, niet uit de CSS afgeleid. `body.mc-shell-active .btn-primary { color:#fff }`
   (r1593) heeft specificiteit (0,2,1) — een element plus twee klassen — en verslaat daarmee
   `[data-theme="dark"] .btn-primary` op (0,2,0). De shell staat aan zodra je ingelogd bent, dus
   de fix gold precies nergens: gemeten op productie gaf .btn-primary in dark mode nog steeds
   wit op #60a5fa = 2,55:1.
   WAAROM DE TEST HEM NIET VING: tests/design-contrast.test.mjs rekent met de TOKENS uit
   app.css. Tokenrekenwerk kent geen cascade. Een kleurcontrole die de specificiteit niet
   meeneemt, meet de bedoeling en niet wat de gebruiker ziet — dezelfde klasse als "een
   broncode-assert bewijst geen gedrag", nu op CSS.
   Deze twee selectoren staan op (0,3,1) en winnen dus wél. */
[data-theme="dark"] body.mc-shell-active .btn-primary,
[data-theme="dark"] body.mc-shell-active .btn-teal { color: var(--mc-bg-warm); }
[data-theme="dark"] table thead { background: var(--mc-bg-elevated); }
[data-theme="dark"] .page-header { background: var(--mc-bg-warm); border-color: var(--mc-border-warm); }

/* ── Reset ──────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 14px; -webkit-font-smoothing: antialiased; } /* s348 DES-04: 14px = --fs-4 (rem-anker, ongewijzigd) */
body { font-family: var(--font); background: var(--bg); color: var(--text); min-height: 100vh; min-height: 100dvh; }

/* ── iOS tap-highlight + reduced-motion (sessie 22 compat-pakket) ── */
button, a, .btn, [role="button"] {
  -webkit-tap-highlight-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ── Laadscherm ─────────────────────────────────────── */
#loading-screen {
  position: fixed; inset: 0;
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 4px; z-index: 9999;
  transition: opacity .3s;
}
#loading-screen::before {
  content: '';
  width: 120px; height: 60px;
  background: url('/logo-boot.png') center/contain no-repeat;   /* s557: zie index.html */
  filter: brightness(0) invert(1);
  margin-bottom: 12px;
}
.loading-logo { font-family: var(--font-serif); font-size: 32px; color: #fff; letter-spacing: -.01em; }
.loading-sub  { font-size: 12px; color: rgba(255,255,255,.4); font-weight: 500; letter-spacing: .12em; margin-bottom: 24px; }
.loading-spinner {
  width: 28px; height: 28px;
  border: 2.5px solid rgba(255,255,255,.15);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.mc-knop-spinner { display: inline-block; width: 12px; height: 12px; margin-right: 8px; vertical-align: -2px; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .mc-knop-spinner { animation-duration: 2s; } }

/* ── App layout ─────────────────────────────────────── */
#app-layout {
  display: flex;
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Sidebar ────────────────────────────────────────── */
#sidebar {
  width: var(--sidebar-w);
  background: var(--navy-dark);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 100;
  transition: transform .25s;
}
.sb-brand {
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.sb-brand-name  { font-family: var(--font-serif); font-size: 20px; line-height: 1; }
.sb-brand-ver   { font-size: 10px; opacity: .35; letter-spacing: .1em; margin-top: 2px; }
.sb-user        { padding: 12px 16px; border-bottom: 1px solid rgba(255,255,255,.08); }
.sb-user-name   { font-size: 13px; font-weight: 600; color: #fff; }
.sb-user-role   { font-size: 11px; color: rgba(255,255,255,.4); margin-top: 1px; }
.sb-nav         { flex: 1; overflow-y: auto; padding: 8px 0; scrollbar-width: none; }
.sb-nav::-webkit-scrollbar { display: none; }
.sb-section     { padding: 16px 16px 4px; font-size: var(--fs-1); font-weight: 700; letter-spacing: .1em; color: rgba(255,255,255,.3); text-transform: uppercase; } /* s348 DES-04: 9px→--fs-1 (11px, a11y-vloer) */
.sb-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 16px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,.65);
  cursor: pointer; border-radius: 0;
  transition: background .12s, color .12s;
  text-decoration: none;
  border: none; background: none; width: 100%; text-align: left;
}
.sb-item:hover  { background: rgba(255,255,255,.07); color: #fff; }
.sb-item.active { background: rgba(255,255,255,.12); color: #fff; }
.sb-item-icon   { width: 16px; text-align: center; opacity: .7; font-size: 14px; flex-shrink: 0; }
.sb-item-icon svg { display: block; width: 16px; height: 16px; }
.sb-badge {
  margin-left: auto; background: var(--teal);
  color: #fff; font-size: 10px; font-weight: 700;
  padding: 1px 6px; border-radius: var(--r); /* s262 DES-5 */
}
.sb-bottom {
  padding: 12px 16px;
  border-top: 1px solid rgba(255,255,255,.08);
  display: flex; gap: 8px; align-items: center;
}
.sb-sync-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--teal); flex-shrink: 0;
}
.sb-sync-dot.offline { background: var(--orange); }
.sb-sync-label  { font-size: 11px; color: rgba(255,255,255,.35); flex: 1; }
.sb-logout      { font-size: 11px; color: rgba(255,255,255,.3); cursor: pointer; border: none; background: none; }
.sb-logout:hover{ color: rgba(255,255,255,.6); }

/* ── Hoofdinhoud ────────────────────────────────────── */
#main-content {
  margin-left: var(--sidebar-w);
  flex: 1;
  min-width: 0; /* S596A11Y-F11: als flex-item groeit hij anders mee met zijn breedste inhoud en scrolt de hele pagina horizontaal (400 % zoom) */
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}
.page-header {
  padding: 24px 28px 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.page-title    { font-family: var(--font-serif); font-size: var(--fs-7); color: var(--navy); line-height: var(--lh-tight); } /* s348 DES-04: 26px→--fs-7 (28px) */
.page-subtitle { font-size: 12px; color: var(--text-light); margin-top: 2px; }
.card-sub { font-size: var(--fs-2); color: var(--text-light); }
.page-actions  { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* een knop of keuzelijst breekt naar een volgende regel i.p.v. afgekapt te worden */
.page-body     { padding: 20px 28px 40px; flex: 1; }

/* ── Login scherm ───────────────────────────────────── */
#login-screen {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 60%, var(--navy-mid) 100%);
}
.login-card {
  background: #fff;
  border-radius: var(--r-xl); /* s262 DES-5 */
  width: 100%;
  max-width: 400px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.login-header {
  background: var(--navy-dark);
  padding: 28px 32px 24px;
  color: #fff;
  text-align: center;
}
.login-title   { font-family: var(--font-serif); font-size: 28px; }
/* s459 UX-23: opacity .45 gaf wit-op-#152942 = 4,14:1 bij 11px — WCAG 1.4.3 AA vraagt 4,5.
   Gevonden door de nieuwe axe-scan, niet door het oog. .50 haalt het net (4,78); .55 = 5,47
   houdt marge zodat een renderingnuance de gate niet terugkantelt. */
.login-sub     { font-size: 11px; opacity: .55; letter-spacing: .1em; margin-top: 4px; }
.login-body    { padding: 28px 32px; }
.login-error   { background: var(--mc-danger-soft); border: 1px solid #fecaca; border-radius: 8px; padding: 10px 14px; font-size: 13px; color: var(--mc-danger); margin-bottom: 16px; } /* s261 DES-3 */

/* ── Kaarten ────────────────────────────────────────── */
.card {
  background: var(--surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
}
.card-head {
  padding: 14px 18px 13px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.card-title  { font-weight: 600; font-size: var(--fs-4); color: var(--navy); } /* s348 DES-04: waarde-identiek (14px) */
.card-body   { padding: 16px 18px; }
.card-pad    { padding: 16px 18px; }

/* ── Formulierelementen ─────────────────────────────── */
.field, .form-group { display: flex; flex-direction: column; gap: 4px; }
.field label, .form-group > label, .form-label { font-size: 11px; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: .04em; }
input[type=text], input[type=email], input[type=password],
input[type=date], input[type=time], input[type=tel],
input[type=number], select, textarea {
  padding: 8px 12px;
  border: 1.5px solid var(--border-2);
  border-radius: var(--r);
  font-size: 13px;
  font-family: var(--font);
  color: var(--text);
  background: #fff;
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(30,58,95,.08);
}
/* s257 A11Y-5: echte outline voor toetsenbord-focus — overleeft Windows High-Contrast-Mode,
   waar box-shadow wegvalt. Muis-focus houdt de zachte box-shadow (focus-visible-gate r3106+). */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}
input.error { border-color: var(--red); }

/* ── Knoppen ────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--border-2);
  border-radius: var(--r);
  font-size: 13px; font-weight: 500; font-family: var(--font);
  cursor: pointer; text-decoration: none;
  background: #fff; color: var(--text);
  transition: background .12s, border-color .12s, box-shadow .12s;
  white-space: nowrap;
}
.btn:hover   { background: var(--bg); border-color: var(--border-2); }
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-mid); border-color: var(--navy-mid); }
.btn-teal    { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-danger  { background: var(--red); color: #fff; border-color: var(--red); }
.btn-ghost, .btn-secondary { border-color: transparent; background: transparent; }
.btn-ghost:hover, .btn-secondary:hover { background: var(--bg); }
.btn-sm, .btn-xs { padding: 5px 10px; font-size: 12px; border-radius: 8px; min-height: 24px; } /* UX-BEH-23: doelgrootte WCAG 2.2 AA 2.5.8 (≥24 px), ook bij inline padding:2px */
.btn-lg      { padding: 12px 24px; font-size: 15px; }
.btn-full    { width: 100%; justify-content: center; }

/* ── Badges ─────────────────────────────────────────── */
.badge {
  display: inline-flex; align-items: center;
  padding: 2px 9px; border-radius: var(--r-xl); /* s262 DES-5 */
  font-size: 11px; font-weight: 600;
}
.badge-navy   { background: #eef2f8; color: var(--navy); }
.badge-green  { background: var(--green-pale); color: var(--green); }
.badge-teal   { background: var(--teal-pale); color: var(--teal); }
.badge-orange { background: var(--mc-warn-soft); color: var(--mc-warn-text); }
.badge-red    { background: #fef2f2; color: var(--red); }
.badge-gray   { background: #f1f5f9; color: #475569; }
/* s347 #15 Fase 0a — alias-brug: superadminpractices/-alerts renderden badge-ok/warn/default
   die GEEN CSS-regel hadden -> kleurloze pills. Deze 3 aliassen kleuren ze meteen (0 call-site-churn). */
.badge-ok      { background: var(--green-pale); color: var(--green); }
.badge-warn    { background: var(--mc-warn-soft); color: var(--mc-warn-text); }
.badge-default { background: #f1f5f9; color: #475569; }

/* ── Tabellen ───────────────────────────────────────── */
.table-wrap  { overflow-x: auto; border-radius: var(--r); }
table        { width: 100%; border-collapse: collapse; font-size: var(--fs-3); } /* s348 DES-04: waarde-identiek (13px) */
thead tr     { background: var(--bg); }
th           { padding: 9px 14px; text-align: left; font-size: var(--fs-1); font-weight: 700; color: var(--text-light); text-transform: uppercase; letter-spacing: .04em; border-bottom: 1px solid var(--border); white-space: nowrap; } /* s348 DES-04: waarde-identiek (11px) */
td           { padding: 11px 14px; border-bottom: 1px solid var(--border); color: var(--text); vertical-align: middle; }
tr:last-child td { border-bottom: none; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: #f8fafc; }

/* ── Tabs ───────────────────────────────────────────── */
.tabs        { display: flex; gap: 2px; border-bottom: 2px solid var(--border); margin-bottom: 20px; }
.tab         { padding: 9px 16px; font-size: 13px; font-weight: 500; color: var(--text-light); cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -2px; transition: color .12s, border-color .12s; white-space: nowrap; border: none; background: none; font-family: var(--font); }
.tab:hover   { color: var(--navy); }
.tab.active  { color: var(--navy); border-bottom: 2px solid var(--navy); font-weight: 600; margin-bottom: -2px; }

/* ── Alerts ─────────────────────────────────────────── */
.alert       { padding: 10px 14px; border-radius: var(--r); font-size: 13px; margin-bottom: 12px; }
.alert-info  { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.alert-warn  { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.alert-error, .alert-danger { background: var(--mc-danger-soft); color: var(--mc-danger); border: 1px solid #fecaca; } /* s261 DES-3 */
.alert-success { background: var(--green-pale); color: var(--green); border: 1px solid #bbf7d0; }

/* ── Modals ─────────────────────────────────────────── */
.modal-bg {
  position: fixed; inset: 0;
  background: rgba(15,23,42,.45);
  display: flex; align-items: center; justify-content: center;
  z-index: 500; padding: 16px;
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: fadeIn .15s;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal {
  background: #fff;
  border-radius: var(--r-lg);
  width: 100%; max-width: 560px;
  max-height: 90vh;
  display: flex; flex-direction: column;
  box-shadow: var(--shadow-lg);
  animation: slideUp .2s;
}
@keyframes slideUp { from { transform: translateY(12px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-lg    { max-width: 780px; }
.modal-xl    { max-width: 1000px; }
.modal-md    { max-width: 640px; }
.modal-sm, .modal-tiny { max-width: 420px; }
.modal-head  { padding: 16px 20px; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.modal-title { font-size: 15px; font-weight: 600; color: var(--navy); }
.modal-body  { padding: 20px; overflow-y: auto; flex: 1; }
.modal-foot  { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; flex-shrink: 0; flex-wrap: wrap; align-items: center; }
.close-btn   { background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text-light); line-height: 1; padding: 2px 6px; border-radius: 6px; }
.close-btn:hover { background: var(--bg); color: var(--text); }

/* ── Feature help (ℹ-icoon + uitleg-modal-content) ───── */
.help-icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  margin-left: 6px; padding: 0;
  border: 1px solid var(--border-2);
  border-radius: 50%;
  background: var(--bg); color: var(--text-light);
  font-size: 11px; font-weight: 700; font-family: Georgia, serif; font-style: italic;
  cursor: pointer; vertical-align: middle; line-height: 1;
  transition: background .12s, color .12s, border-color .12s;
}
.help-icon-btn:hover { background: var(--navy); color: #fff; border-color: var(--navy); }
.help-icon-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.feature-help-body { font-size: var(--fs-4); line-height: var(--lh-body); color: var(--text); } /* s348 DES-04: 14px waarde-identiek; 1.6→--lh-body (1.5, WCAG 1.4.12) */
.feature-help-body p { margin: 0 0 12px; }
.feature-help-body p:last-child { margin-bottom: 0; }
.feature-help-body ul { margin: 8px 0 12px; padding-left: 20px; }
.feature-help-body li { margin-bottom: 6px; }
.feature-help-body code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 12px; color: var(--navy); }
.feature-help-body strong { color: var(--navy); font-weight: 600; }
.feature-help-body em { color: var(--text-mid); font-style: italic; }
.feature-help-body a { color: var(--navy); text-decoration: underline; }

/* ── Toasts ─────────────────────────────────────────── */
#toasts      { position: fixed; bottom: 20px; right: 20px; z-index: 9000; display: flex; flex-direction: column; gap: 8px; }
.toast {
  background: var(--navy-dark); color: #fff;
  padding: 10px 16px; border-radius: var(--r); /* s262 DES-5 */
  font-size: 13px; font-weight: 500;
  box-shadow: var(--shadow-lg);
  animation: toastIn .2s;
  max-width: 340px;
}
.toast.warn  { background: var(--orange); }
.toast.error { background: var(--red); }
@keyframes toastIn { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── KPI strip ──────────────────────────────────────── */
.kpi-strip   { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 20px; }
.kpi-card    { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 16px 18px; }
.kpi-label   { font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-light); margin-bottom: 6px; } /* s348 DES-04: 10px→--fs-1 (11px, a11y-vloer) */
.kpi-val     { font-size: 26px; font-weight: 700; color: var(--navy); line-height: 1; font-family: var(--font-serif); }
.kpi-sub     { font-size: 11px; color: var(--text-light); margin-top: 3px; }

/* ── Empty state ────────────────────────────────────── */
.empty-state { text-align: center; padding: 40px 20px; color: var(--text-light); }
.empty-icon  { font-size: 36px; margin-bottom: 10px; }
.empty-title { font-size: 15px; font-weight: 600; color: var(--text-mid); margin-bottom: 4px; }
.empty-sub   { font-size: 13px; }
.mc-laden { text-align: center; padding: 40px; color: var(--text-light); }
.mc-laden .loading-spinner { border-color: rgba(0,0,0,.1); border-top-color: var(--navy); margin: 0 auto 8px; } /* .loading-spinner zelf is wit (loginscherm) */

/* ── Grids ──────────────────────────────────────────── */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; }
/* s347 #14 — full-width dode-ruimte-reductie: opt-in content-breedte + centreren.
   Add-only + opt-in (via class) → 45 niet-geraakte pagina's zien 'm nooit. */
.mc-content-max { max-width: 1100px; margin-left: auto; margin-right: auto; }
.mc-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; align-items: start; }
.flex   { display: flex; }
.gap-2  { gap: 8px; }
.gap-3  { gap: 12px; }
.gap-4  { gap: 16px; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.flex-1 { flex: 1; }
.mt-2   { margin-top: 8px; }
.mt-3   { margin-top: 12px; }
.mt-4   { margin-top: 16px; }
.mb-2   { margin-bottom: 8px; }
.mb-3   { margin-bottom: 12px; }
.mb-4   { margin-bottom: 16px; }

/* ── Tekst utilities ────────────────────────────────── */
.text-sm    { font-size: 12px; }
.text-xs    { font-size: 11px; }
.text-light { color: var(--text-light); }
.text-mid   { color: var(--text-mid); }
.text-navy  { color: var(--navy); }
.font-semibold { font-weight: 600; }
.font-bold  { font-weight: 700; }

/* s581 U-30 — vier ontbrekende gedeelde klassen, ADD-ONLY. Niets hierboven of hieronder is gewijzigd.
   Gemeten vóór het toevoegen: alle vier komen 0x als CSS-regel voor in dit bestand (niet als
   substring geteld maar als selector). Ze worden gebruikt door U-07, U-19 en U-21 in
   public/pages/clientmodal.js.
   CASCADE-CONTROLE, en die gaat verder dan de naamgenoot — een nieuwe klasse botst zelden met zijn
   eigen naam maar met wat er al op dat element stond:
   · text-align staat 9x in dit bestand, telkens op een eigen component (.pmc-*, .msg-*), nooit op
     td, .kpi-val of een utility. Gelijke specificiteit met .text-right, maar ze raken nooit hetzelfde
     element; staan ze ooit samen, dan wint de latere regel — dat is de component, niet deze utility.
   · font-variant-numeric bestaat 1x, op .dash3-today-time. Geen td, geen .kpi-val.
   · De twee hoog-specifieke overrides die een utility WEL zouden overstemmen
     (body.mc-shell-active table tbody td en body.mc-shell-active .kpi-val) zetten geen text-align en
     geen font-variant-numeric. Daar botst dus niets.
   · .mc-section-label bestaat al en is een ANDERE klasse (sidebar-sectiekop, eigen ::before). Geen
     cascade-conflict, wel een naamgenoot — vandaar deze regel, zodat de volgende lezer niet zoekt.
   ⚠ Geen enkele test beoordeelt een cascade. Dit blok is gemeten op tekst en specificiteit, niet op
   een scherm; de browsersmoke moet het bevestigen. */
.text-right { text-align: right; }
.tabular    { font-variant-numeric: tabular-nums; }
.section-label { font-size: var(--fs-1); font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-light); margin-bottom: 8px; }
.badge-sm   { font-size: 10px; }
.truncate   { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Responsive ─────────────────────────────────────── */
/* s262 RESP-1: dit blok is gemerged in het canonieke "Mobiel (< 768px)"-blok
   verderop (left-based slide, 260px). De oude transform-based sidebar-slide
   (224px) conflicteerde ermee (twee verberg-mechanismen tegelijk); .grid-3,
   .page-body-padding en #main-content zijn daarheen verhuisd. */

/* s348 DES-02 — dit @media(prefers-color-scheme:dark)-blok is VERWIJDERD. Het overschreef
   --bg/--surface/--border/--text rechtstreeks op OS-voorkeur, VOLLEDIG LOS van <html data-theme>,
   en negeerde de --mc-*-tokens (die enkel via [data-theme="dark"] omslaan) → de hybride uit §3.3
   (basis donker, kaarten/topbar/badges bleven licht). Vervanger: mobile-enhancements.js
   initThemePref() zet <html data-theme="dark"> bij boot — expliciete mc_theme-keuze wint, anders
   eenmalige matchMedia-check — zodat er nog maar ÉÉN dark-mechanisme is. */


/* ── Print stijlen ────────────────────────────────────── */
@media print {
  #sidebar, .page-header .page-actions, .sb-footer,
  .btn, button, .modal-backdrop, #portal-dash,
  [data-theme="dark"] { display: none !important; }
  body { background: #fff !important; color: #000 !important; }
  .page-body { padding: 0 !important; }
  main { margin-left: 0 !important; }
  .card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
  table { font-size: 11px; }
  .kpi-strip { display: flex !important; gap: 8px; }
  .kpi-card { border: 1px solid #ddd; padding: 8px; }
}

/* ── Mobiel (< 768px) ─────────────────────────────────── */
@media (max-width: 768px) {
  :root { --sidebar-w: 0px; }

  #sidebar {
    position: fixed; left: -260px; top: 0; bottom: 0;
    width: 260px; z-index: 100;
    transition: left .25s ease;
  }
  #sidebar.open { left: 0; box-shadow: var(--shadow-lg); }

  .sb-toggle {
    display: flex !important;
    position: fixed; top: 12px; left: 12px; z-index: 101;
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--navy); color: #fff; border: none;
    align-items: center; justify-content: center;
    font-size: 18px; cursor: pointer;
  }

  main { margin-left: 0 !important; padding: 12px !important; padding-top: 56px !important; }
  #main-content { margin-left: 0; } /* s262 RESP-1: uit het oude blok; div, dus niet gedekt door `main` */

  .page-header {
    flex-direction: column; gap: 8px;
    padding: 12px !important;
  }
  .page-header .page-actions { width: 100%; overflow-x: auto; }
  .page-body { padding-left: 16px; padding-right: 16px; } /* s262 RESP-1 */

  .grid-2, .grid-3 { grid-template-columns: 1fr !important; } /* s262 RESP-1: .grid-3 mee */
  .mc-card-grid { grid-template-columns: 1fr !important; } /* s347 #14: mobiel 1 kolom */

  .modal {
    width: 100vw !important; max-width: 100vw !important;
    height: 100vh; max-height: 100vh;
    height: 100dvh; max-height: 100dvh;
    border-radius: 0 !important;
    margin: 0 !important;
  }

  .kpi-strip {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 8px !important;
  }

  .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  table { min-width: 500px; }

  .card-head { flex-wrap: wrap; gap: 8px; }
}

/* Hamburger menu knop (verborgen op desktop) */
.sb-toggle { display: none; }

/* ═══════════════════════════════════════════════════════
   MINDCARE 3.0 — Shell refactor (Fase 1)
   Topbar + lichte sidebar + kaarten layout
   ═══════════════════════════════════════════════════════ */

/* LK05b: Google-Fonts-@import verwijderd — stond mid-file en was daardoor DODE CSS
   (@import moet vóór alle rules staan; Fraunces laadde hier dus nooit). De families
   komen nu uit /fonts/fonts.css (index.html) → Fraunces werkt nu wél in de warme thema's. */

:root {
  /* nieuwe tokens, naast bestaande --navy etc */
  --mc-bg-warm:        #faf7f2;
  --mc-bg-elevated:    #ffffff;
  --mc-bg-subtle:      #f3eee5;
  --mc-bg-hover:       #ede7da;
  --mc-border-warm:    #e8dfcf;
  --mc-border-strong:  #958c7a; /* s550 WCAG 1.4.11 — was #d6c9af = 1,53:1 op --mc-bg-warm
     (#faf7f2) en 1,64:1 op wit; een veldrand is non-text content en moet 3:1. Kleinste ingreep
     die dat haalt zonder de kleurfamilie te verlaten: alleen donkerder (sRGB x0,695), tint
     ongewijzigd warm-beige. Gemeten met de formule uit tests/design-contrast.test.mjs:
     3,11:1 op --mc-bg-warm, 3,33:1 op wit. */
  --mc-text-warm:      #1f1a14;
  --mc-text-mid:       #5c5448;
  --mc-text-light:     #6b6253; /* s257 A11Y-1: was #8a8071 → ~4,8:1 op warm wit (AA) */
  --mc-text-faint:     #7d735f; /* s257 A11Y-1: was #b3a994 → ~3,9:1; enkel voor groot/decoratief */
  --mc-text-dark:      var(--mc-text-warm);

  /* s158 — ontbrekende tokens die de Berichten-chat-CSS verwacht.
     Waren nooit gedefinieerd → therapeut-bubbels kregen geen achtergrond
     (wit-op-transparant = onleesbaar) en de verzendknop geen vulkleur. */
  --mc-navy:           var(--navy);
  --mc-navy-soft:      #e6ecf3;
  /* Paars accent (betaalwijze «mobiel», verjaardagsmail): achtergrond / rand / tekst. S581N-12 U-19. */
  --mc-purple-soft:    #fdf4ff;
  --mc-purple-border:  #e9d5ff;
  --mc-purple:         #7c3aed;
  --mc-navy-tint:      rgba(30, 58, 95, 0.08);
  --mc-teal-soft:      #d9f0ec;
  --mc-teal-tint:      rgba(15, 118, 110, 0.10);

  --mc-admin:          #92551a;
  --mc-admin-soft:     #f7e9d0;
  --mc-admin-strong:   #6f3e10;

  --mc-warn-soft:      #fff4e0;   /* --mc-warn als tekst hierop: 4,61:1 (WCAG 1.4.3); #fdecca gaf 4,31 (S593D-29) */
  --mc-success-soft:   #d9f0ec;
  --mc-success:        #15706a;

  /* s261 DES-3 — semantische status-tokens, één keer gedefinieerd. Voor app.js-
     inline-styles: var(--mc-success/-warn/-danger, fallback). Mail-templates
     blijven literals (mailclients kennen geen CSS-vars); agenda-thema's houden
     hun eigen pay-paid/opt-ink (thema's variëren enkel de surface-tint). */
  --mc-warn:           #b45309;
  /* s558b — TEKSTvariant van --mc-warn. --mc-warn zelf blijft #b45309: die wordt ook als
     VLAK en als RAND gebruikt (statspage.js:777/835 donut-fill, settings.js:263 border), dus daar
     is hij geen contrastvraag. Als TEKST op --mc-warn-soft haalde hij 4,31:1 en dat is onder de
     4,5 van WCAG 1.4.3. #92560a haalt 5,07:1 op hetzelfde vlak. Die waarde stond al in de codebase,
     als fallback in de vorm var(--orange, #92560a) — maar --orange is altijd gedefinieerd
     (app.css:16) en geen enkel palet overschrijft hem, dus die fallback kon nooit vuren. Iemand
     kende het goede getal en zette het op een plek waar het niet kon werken. Nu staat het op een
     plek waar het wel werkt. */
  --mc-warn-text:      #92560a;
  --mc-danger:         #b91c1c;
  --mc-danger-soft:    #fef2f2;

  /* s438 — vier tokens die pages/statspage.js al 21x gebruikt maar die hier nooit stonden.
     Elke var(--mc-teal,#3a7d7d) viel dus terug op de hardgecodeerde hex: elke grafiek op de
     statistiekenpagina negeerde het thema en zette in dark mode donkere cijfers op een donkere
     kaart. Dit is de fix voor alle 21 callsites tegelijk; statspage.js zelf is niet aangeraakt.

     --mc-teal en --mc-text zijn ALIASSEN, geen nieuwe kleuren (patroon --mc-navy r587 /
     --mc-text-dark r582). Daardoor volgen ze de vier data-mc-style-blokken (r627/649/681/708)
     en de dark-laag (r732) vanzelf — die her-pointen --teal en --mc-text-warm al. Ze hebben
     hieronder dus BEWUST geen dark-regel; die zou de aliasing juist doorbreken.
     Zichtbaar gevolg in light mode, en dat is het doel: --mc-teal wordt #0f766e i.p.v. de
     fallback #3a7d7d, waarmee het donut/gauge-palet (r457) en het categoriale palet (r1146,
     dat al var(--teal) gebruikte) voor het eerst dezelfde teal tonen.

     --mc-gold en --mc-plum bestaan nergens als basistoken en krijgen daarom een eigen waarde
     plus een dark-variant (r762). Hun light-waarde is exact de bestaande fallback-hex, dus in
     light mode verandert er niets aan de doel- en peer-referentielijnen. */
  --mc-teal:           var(--teal);
  --mc-text:           var(--mc-text-warm);
  --mc-border:         var(--mc-border-warm);  /* s438: VIJFDE dood token, gevonden door de
                          drift-assert in scripts/lib/s438-etappe1.test.mjs. De canon telde er
                          vier; statspage.js:777 (platformtabel) gebruikte er stilletjes nog een. */
  --mc-gold:           #c99a3a;   /* referentielijn "doel" (statspage r296) */
  --mc-plum:           #7d5a8c;   /* referentielijn "peer"  (statspage r310) */

  --mc-shadow-sm:      0 1px 2px rgba(30, 58, 95, 0.05);
  --mc-shadow:         0 1px 3px rgba(30, 58, 95, 0.08), 0 8px 24px rgba(30, 58, 95, 0.06);
  --mc-shadow-lg:      0 16px 40px rgba(30, 58, 95, 0.12);

  --mc-topbar-h:       56px;
  --mc-sidebar-w:      240px;

  --mc-serif:          'Fraunces', Georgia, serif;
  --mc-sans:           'Instrument Sans', system-ui, sans-serif;
}

/* s307 EPIC3 — App-stijl "uitzicht": Groepspraktijk Uitzicht-huisstijl. Warm
   zand-palet met merk-accenten petrol (#1f3a52) / salie (sage) / klei (terracotta).
   Her-point de 3.0-tokens + de basis-accenten --navy/--teal zodat de primaire
   UI (knoppen/actieve tab/headers) de merkkleur volgt. Fraunces + Instrument Sans
   (zelfde families als warm). De :not([data-theme="dark"])-guard laat dark mode
   altijd winnen. De sleutel «uitzicht» is historisch: het label in de app is «Klassiek».
   END_OF_S307_STYLE_UITZICHT_TOKENS */
html[data-mc-style="uitzicht"]:not([data-theme="dark"]) {
  --mc-bg-warm:        #f5f0e8; /* zand */
  --mc-bg-elevated:    #fffdf9;
  --mc-bg-subtle:      #efe7d8;
  --mc-bg-hover:       #e7dcc8;
  --mc-border-warm:    #e2d6c0;
  --mc-border-strong:  #9d845c; /* DESIGN.md-correctie: 3:1 op wit/elevated (1.4.11 AA) */
  --mc-text-warm:      #241d14;
  --mc-text-mid:       #574b3a;
  --mc-text-light:     #655847; /* DESIGN.md-correctie: ≥4,5:1 óók op hover-vlakken */
  --mc-text-faint:     #8a7c66; /* enkel groot/decoratief */
  /* Merk-accenten — petrol primair, sage-teal functioneel, klei admin */
  --navy:              #1f3a52; /* petrol → var(--navy)-consumenten (knoppen/actieve tab/headers) */
  --teal:              #3f7468; /* sage-teal, donker genoeg voor witte tekst (AA) */
  --mc-navy:           var(--navy);
  --mc-navy-soft:      #e3eaef;
  --mc-navy-tint:      rgba(31, 58, 82, 0.08);
  --mc-teal-soft:      #dde9e4; /* lichte salie-tint */
  --mc-teal-tint:      rgba(95, 138, 128, 0.12);
  --mc-success:        #3d685f;
  --mc-success-soft:   #dde9e4;
  --mc-admin:          #b0653f; /* klei, iets donkerder voor contrast */
  --mc-admin-soft:     #f3e2d4;
  --mc-admin-strong:   #8f4d2c;
  --mc-serif:          'Fraunces', Georgia, serif;
  --mc-sans:           'Instrument Sans', system-ui, sans-serif;
}

/* dark-mode overrides voor nieuwe tokens */
[data-theme="dark"] {
  --mc-bg-warm:        #0d1620;
  --mc-bg-elevated:    #14202e;
  --mc-bg-subtle:      #1a2838;
  --mc-bg-hover:       #213044;
  --mc-border-warm:    #25364c;
  --mc-border-strong:  #5d6d83; /* s550 WCAG 1.4.11 — was 3a4d68 (zonder # : de token-pariteit-guard telt hex in
     comments mee) = 2,12:1 op --mc-bg-warm
     en 1,91:1 op --mc-bg-elevated. In dark mode is de correctie LICHTER i.p.v. donkerder
     (naar wit toe, x0,820 van de afstand tot wit), zelfde blauwgrijze familie.
     Gemeten: 3,45:1 op --mc-bg-warm, 3,12:1 op --mc-bg-elevated. */
  --mc-text-warm:      #f0f2f5;
  --mc-text-mid:       #b0bccc;
  --mc-text-light:     #899ab0; /* s550 WCAG 1.4.3 — was 8294ab (zonder # : zie de guard-noot bij
     --mc-border-strong hierboven): 4,31:1 op --mc-bg-hover. Lichter (x0,945 van de afstand tot wit), zelfde blauwgrijs.
     Gemeten: 6,34 / 5,73 / 5,21 / 4,66:1 (warm / elevated / subtle / hover). */
  --mc-text-faint:     #6c7c92; /* s550 — enkel groot/decoratief (3:1). Was 5a6c84: 2,79:1 op
     --mc-bg-subtle en 2,49:1 op --mc-bg-hover. Lichter (x0,890 richting wit); blijft duidelijk
     onder --mc-text-light, dus de rangorde faint < light < mid < warm houdt stand.
     Gemeten: 4,28 / 3,87 / 3,51 / 3,14:1 (warm / elevated / subtle / hover). */

  --mc-navy-soft:      #1d2c44;
  --mc-purple-soft:    #2e1f47;
  --mc-purple-border:  #5b3f8c;
  --mc-purple:         #c4b5fd;
  --mc-navy-tint:      rgba(108, 141, 186, 0.15);
  --mc-teal-soft:      #0f3a35;
  --mc-teal-tint:      rgba(45, 212, 191, 0.12);

  --mc-admin:          #d49462;
  --mc-admin-soft:     #3a2715;
  --mc-admin-strong:   #f0b48a;

  --mc-warn-soft:      #3a2a10;
  --mc-success-soft:   #0f3a35;
  --mc-success:        #5cd3c0;

  /* s261 DES-3 — dark-varianten status-tokens */
  --mc-warn:           #e8a85c;
  /* s558b: alias i.p.v. een eigen hex — in dark haalt #e8a85c op #3a2a10 al 6,71:1, en een
     nieuwe hex in een dark-blok raakt de ratchet van de token-pariteitsguard. */
  --mc-warn-text:      var(--mc-warn);
  --mc-danger:         #f08d85;
  --mc-danger-soft:    #3a1512;

  /* s438 — alleen gold en plum: --mc-teal en --mc-text zijn aliassen op --teal resp.
     --mc-text-warm, en die worden hierboven al ge-dark-t. Een eigen dark-regel voor die
     twee zou de alias breken en de thema-blokken opnieuw buitenspel zetten. */
  --mc-gold:           #e0b45f;
  --mc-plum:           #c6a0d4;
}

/* Body krijgt warmere achtergrond + nieuwe sans */
body {
  font-family: var(--mc-sans);
  /* s259 DES-1: !important weg — de 2.0-body-rule (r73) verwijst via de
     token-aliasing nu naar exact dezelfde --mc-waarden, dus er valt niets
     meer te overrulen. */
  background: var(--mc-bg-warm);
  color: var(--mc-text-warm);
}

/* ═══ TOPBAR ═══════════════════════════════════════════ */
.mc-topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--mc-topbar-h);
  background: var(--mc-bg-elevated);
  border-bottom: 1px solid var(--mc-border-warm);
  display: flex;
  align-items: center;
  padding: 0 18px;
  gap: 8px;
  z-index: 95;
}

.mc-logo {
  font-family: var(--mc-serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.02em;
  margin-right: 18px;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 9px;
  cursor: pointer;
  user-select: none;
  text-decoration: none;
}
.mc-logo-mark {
  width: 22px; height: 22px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--teal) 100%);
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(30, 58, 95, 0.28), inset 0 1px 0 rgba(255,255,255,0.18);
  flex-shrink: 0;
  position: relative;
}
.mc-logo-mark::after {
  content: "M";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mc-serif);
  font-size: 14px;
  font-weight: 600;
  color: rgba(255,255,255,0.95);
  line-height: 1;
}

.mc-topbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 1;
}
.mc-topbar-item {
  padding: 7px 11px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mc-text-mid);
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  user-select: none;
  transition: background 120ms, color 120ms;
  position: relative;
  border: none;
  background: transparent;
  font-family: inherit;
}
.mc-topbar-item:hover { background: var(--mc-navy-soft); color: var(--navy); }
.mc-topbar-item .mc-chev { font-size: 9px; opacity: 0.6; }

.mc-topbar-item.is-admin { color: var(--mc-admin); font-weight: 600; }
.mc-topbar-item.is-admin:hover { background: var(--mc-admin-soft); color: var(--mc-admin-strong); }
.mc-topbar-item.is-admin::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--mc-admin);
  margin-right: 2px;
  box-shadow: 0 0 0 3px var(--mc-admin-soft);
}

.mc-topbar-right { display: flex; align-items: center; gap: 4px; }
.mc-icon-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: var(--mc-text-mid);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 120ms, color 120ms;
  font-size: 15px;
}
.mc-icon-btn:hover { background: var(--mc-navy-soft); color: var(--navy); }

.mc-search-btn {
  width: auto;
  padding: 0 10px 0 11px;
  gap: 10px;
  font-size: 13px;
  color: var(--mc-text-light);
  border: 1px solid var(--mc-border-warm);
  background: var(--mc-bg-warm);
  min-width: 220px;
  justify-content: space-between;
  height: 32px;
  font-family: var(--mc-sans);
  border-radius: 8px;
}
.mc-search-btn:hover { border-color: var(--navy); color: var(--navy); }
.mc-kbd {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10.5px;
  padding: 2px 5px;
  border: 1px solid var(--mc-border-warm);
  border-radius: 3px;
  color: var(--mc-text-faint);
  background: var(--mc-bg-elevated);
}

.mc-user-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border-radius: 22px;
  cursor: pointer;
  margin-left: 6px;
  transition: background 120ms;
  position: relative;
  border: none;
  background: transparent;
  font-family: inherit;
}
.mc-user-trigger:hover { background: var(--mc-navy-soft); }
.mc-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy), var(--teal));
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  font-weight: 600;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(30, 58, 95, 0.22);
}
.mc-user-name {
  font-size: 13px;
  font-weight: 500;
  color: var(--mc-text-warm);
}
.mc-role-badge {
  font-size: 9.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 4px;
  background: var(--mc-admin-soft);
  color: var(--mc-admin-strong);
}

/* ═══ DROPDOWN ═════════════════════════════════════════ */
.mc-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  background: var(--mc-bg-elevated);
  border: 1px solid var(--mc-border-warm);
  border-radius: 12px;
  box-shadow: var(--mc-shadow-lg);
  padding: 6px;
  min-width: 280px;
  z-index: 200;
  opacity: 0;
  pointer-events: none;
  /* Gesloten menu: uit tabvolgorde en toegankelijkheidsboom (anders nested-interactive in de trigger-knop). */
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 140ms, transform 140ms, visibility 0s linear 140ms;
}
/* Sessie 23 fix: :hover-trigger weggehaald — alleen click-toggle (.open) toont
   dropdowns. Voorheen bleef de :hover-state op desktop-Chrome plakken na
   navigeren (vooral op Herinneringen-pagina), waardoor dropdown-items
   semitransparant door de pagina heen gerenderd werden en scroll-events
   geblokkeerd raakten door pointer-events:auto. */
.mc-topbar-item.open .mc-dropdown,
.mc-user-trigger.open .mc-dropdown {
  opacity: 1; pointer-events: auto; transform: translateY(0);
  visibility: visible; transition-delay: 0s;
}
.mc-dropdown-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 9px 11px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13.5px;
  color: var(--mc-text-warm);
  font-weight: 400;
  transition: background 80ms;
  user-select: none;
}
.mc-dropdown-item:hover { background: var(--mc-navy-soft); }
.mc-dropdown-item .mc-icon { width: 24px; min-width: 24px; text-align: center; flex-shrink: 0; margin-top: 1px; font-size: 16px; line-height: 1; }
.mc-dropdown-item .mc-desc { font-size: 12px; color: var(--mc-text-light); margin-top: 2px; font-weight: 400; line-height: 1.45; }
.mc-dropdown-item .mc-label { flex: 1; line-height: 1.35; font-weight: 500; }

.mc-dropdown-item.is-admin:hover { background: var(--mc-admin-soft); }
.mc-dropdown-item.is-admin .mc-label::after {
  content: ""; display: inline-block;
  width: 5px; height: 5px;
  border-radius: 50%; background: var(--mc-admin);
  margin-left: 7px; vertical-align: middle;
}
.mc-dropdown-divider { height: 1px; background: var(--mc-border-warm); margin: 5px -2px; }
.mc-dropdown-section {
  font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.07em;
  color: var(--mc-text-faint);
  padding: 9px 11px 5px;
  display: flex; align-items: center; gap: 6px;
}
.mc-dropdown-section.is-admin { color: var(--mc-admin); }
.mc-dropdown-section.is-admin::before { content: "🔐"; font-size: 11px; }

.mc-user-trigger .mc-dropdown { left: auto; right: 0; min-width: 320px; }
.mc-user-info {
  padding: 14px;
  border-bottom: 1px solid var(--mc-border-warm);
  margin: -6px -6px 4px -6px;
  display: flex; align-items: center; gap: 10px;
  background: linear-gradient(180deg, var(--mc-navy-soft) 0%, transparent 100%);
  border-radius: 12px 12px 0 0;
}
.mc-user-info .mc-avatar { width: 38px; height: 38px; font-size: 14px; }
.mc-user-info-text { flex: 1; min-width: 0; line-height: 1.3; }
.mc-user-info-text .mc-user-info-name { font-weight: 600; font-size: 14px; color: var(--navy); }
.mc-user-info-text .mc-user-info-meta { font-size: 11.5px; color: var(--mc-text-light); margin-top: 2px; }

/* ═══ NIEUWE SIDEBAR ═══════════════════════════════════ */
/* Override bestaande #sidebar regels via #sidebar.mc-shell */
#sidebar.mc-shell {
  width: var(--mc-sidebar-w);
  background: var(--mc-bg-warm);
  color: var(--mc-text-warm);
  border-right: 1px solid var(--mc-border-warm);
  top: var(--mc-topbar-h);
  padding: 14px 10px;
}
#sidebar.mc-shell .sb-brand,
#sidebar.mc-shell .sb-user { display: none; }

#sidebar.mc-shell .sb-greet {
  font-family: var(--mc-serif);
  font-size: 13px;
  color: var(--mc-text-light);
  padding: 4px 10px 14px;
  line-height: 1.4;
  font-style: italic;
}
#sidebar.mc-shell .sb-greet strong {
  font-style: normal;
  color: var(--navy);
  font-weight: 600;
  display: block;
  font-size: 16px;
  margin-top: 1px;
  letter-spacing: -0.01em;
}
#sidebar.mc-shell .sb-nav { padding: 0; }
#sidebar.mc-shell .sb-section {
  color: var(--mc-text-faint);
  letter-spacing: 0.08em;
  font-size: 10.5px;
  padding: 14px 11px 6px;
}
#sidebar.mc-shell .sb-item {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 11px;
  border-radius: 8px;
  color: var(--mc-text-mid);
  font-size: 13.5px;
  font-weight: 500;
  margin-bottom: 1px;
  position: relative;
}
#sidebar.mc-shell .sb-item:hover { background: var(--mc-navy-soft); color: var(--navy); }
#sidebar.mc-shell .sb-item.active {
  background: var(--mc-navy-soft);
  color: var(--navy);
  font-weight: 600;
}
#sidebar.mc-shell .sb-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px; bottom: 8px;
  width: 3px;
  background: var(--navy);
  border-radius: 0 2px 2px 0;
}
#sidebar.mc-shell .sb-item-icon { color: var(--mc-text-mid); opacity: 0.75; }
#sidebar.mc-shell .sb-item.active .sb-item-icon { color: var(--navy); opacity: 1; }
#sidebar.mc-shell .sb-badge {
  background: var(--teal);
  box-shadow: 0 1px 3px var(--mc-teal-tint);
  color: #fff;
}
#sidebar.mc-shell .sb-bottom {
  padding: 12px 10px;
  border-top: 1px solid var(--mc-border-warm);
  font-size: 11.5px;
}
#sidebar.mc-shell .sb-sync-label { color: var(--mc-text-light); }
#sidebar.mc-shell .sb-logout { color: var(--mc-text-light); }
#sidebar.mc-shell .sb-logout:hover { color: var(--mc-admin); }

/* Main-content krijgt ruimte voor topbar */
body.mc-shell-active #main-content {
  margin-top: var(--mc-topbar-h);
  margin-left: var(--mc-sidebar-w);
}

/* ═══ INSTELLINGEN-KAARTEN ════════════════════════════ */
.mc-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); /* S596A11Y-F11: op 320 css-px (400 % zoom) is er minder dan 290 px; dan één kaart op volle breedte */
  gap: 14px;
}
.mc-section {
  margin-bottom: 38px;
}
.mc-section-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 14px;
  padding: 0 2px;
}
.mc-section-label {
  font-family: var(--mc-serif);
  font-size: 17px;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.mc-section-meta { font-size: 11.5px; color: var(--mc-text-light); }
.mc-section-label.is-admin { color: var(--mc-admin-strong); }
.mc-section-label.is-admin::before { content: "🔐 "; font-size: 13px; color: var(--mc-admin); }

.mc-scard {
  background: var(--mc-bg-elevated);
  border: 1px solid var(--mc-border-warm);
  border-radius: 12px;
  padding: 18px;
  cursor: pointer;
  transition: border-color 140ms, box-shadow 140ms, transform 140ms;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}
.mc-scard:hover {
  border-color: var(--navy);
  box-shadow: var(--mc-shadow);
  transform: translateY(-1px);
}
.mc-scard:active { transform: translateY(0); }
.mc-scard.is-admin {
  background: linear-gradient(180deg, var(--mc-admin-soft) 0%, var(--mc-bg-elevated) 65%);
  border-color: rgba(146, 85, 26, 0.18);
}
.mc-scard.is-admin:hover { border-color: var(--mc-admin); }
.mc-scard.is-admin::before {
  content: "ADMIN";
  position: absolute;
  top: 12px; right: 12px;
  font-size: var(--fs-1); /* s348 DES-04: 8.5px→--fs-1 (11px, a11y-vloer) */
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--mc-admin);
  background: rgba(146, 85, 26, 0.14);
  padding: 2px 6px;
  border-radius: 3px;
}
.mc-scard-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.mc-scard-icon {
  width: 38px; height: 38px;
  border-radius: 9px;
  background: var(--mc-navy-soft);
  color: var(--navy);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px;
  flex-shrink: 0;
}
.mc-scard.is-admin .mc-scard-icon { background: rgba(146, 85, 26, 0.15); color: var(--mc-admin); }
.mc-scard-status {
  font-size: 10.5px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  line-height: 1.4;
}
.mc-scard-status.ok { color: var(--mc-success); background: var(--mc-success-soft); }
.mc-scard-status.warn { color: var(--mc-warn-text); background: var(--mc-warn-soft); }
.mc-scard-status.muted { color: var(--mc-text-light); background: var(--mc-bg-subtle); }
/* s142-WP4 — info-status voor read-only kaarten zoals "Voorbeeld aanmeldformulier" */
.mc-scard-status.info { color: var(--mc-info, #2563eb); background: var(--mc-info-soft, rgba(37, 99, 235, 0.12)); }
.mc-scard-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.mc-scard-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--mc-text-warm);
}
.mc-scard-desc {
  font-size: 12.5px;
  color: var(--mc-text-light);
  line-height: 1.55;
}
.mc-scard-value {
  font-size: 12.5px;
  color: var(--navy);
  font-family: 'JetBrains Mono', monospace;
  background: var(--mc-navy-soft);
  padding: 5px 9px;
  border-radius: 5px;
  align-self: flex-start;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
}
.mc-scard.is-admin .mc-scard-value {
  background: rgba(146, 85, 26, 0.12);
  color: var(--mc-admin-strong);
}

/* ═══ DETAIL PANEL (right slide) ═══════════════════════ */
.mc-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(18, 40, 68, 0.45);
  z-index: 290;
  opacity: 0;
  pointer-events: none;
  transition: opacity 220ms;
}
.mc-panel-overlay.open { opacity: 1; pointer-events: auto; }
.mc-detail-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: 540px;
  max-width: 92vw;
  background: var(--mc-bg-elevated);
  border-left: 1px solid var(--mc-border-warm);
  box-shadow: -16px 0 40px rgba(18, 40, 68, 0.14);
  z-index: 291;
  transform: translateX(100%);
  transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1);
  display: flex;
  flex-direction: column;
}
.mc-detail-panel.open { transform: translateX(0); }
/* Gesloten paneel: uit tabvolgorde en toegankelijkheidsboom; visibility pas ná de slide-out. */
.mc-detail-panel:not(.open) { visibility: hidden; transition: transform 280ms cubic-bezier(0.32, 0.72, 0, 1), visibility 0s linear 280ms; }
.mc-detail-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--mc-border-warm);
  flex-shrink: 0;
  background: linear-gradient(180deg, var(--mc-navy-soft) 0%, transparent 100%);
}
.mc-detail-head h2 {
  font-family: var(--mc-serif);
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--navy);
  display: flex; align-items: center; gap: 10px;
}
.mc-detail-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px;
}
.mc-detail-foot {
  border-top: 1px solid var(--mc-border-warm);
  padding: 14px 22px;
  display: flex; justify-content: flex-end; gap: 8px;
  flex-shrink: 0;
  background: var(--mc-bg-warm);
}

/* Admin banner */
.mc-admin-banner {
  background: var(--mc-admin-soft);
  border: 1px solid rgba(146, 85, 26, 0.2);
  border-left: 4px solid var(--mc-admin);
  color: var(--mc-admin-strong);
  padding: 11px 16px;
  border-radius: 12px;
  margin-bottom: 22px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.mc-admin-banner::before { content: "🔐"; font-size: 16px; }

/* page-title in serif Mindcare-style binnen mc-shell */
body.mc-shell-active .page-title {
  font-family: var(--mc-serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--navy);
}

/* mobile */
@media (max-width: 768px) {
  body.mc-shell-active #main-content {
    margin-left: 0;
    padding-top: var(--mc-topbar-h);
  }
  .mc-topbar-nav .mc-topbar-item { display: none; }
  .mc-user-name { display: none; }
  .mc-search-btn { min-width: auto; padding: 0 8px; gap: 0; }
  .mc-search-btn .mc-kbd { display: none; }
  .mc-search-btn span:first-child { width: 1.3em; overflow: hidden; white-space: nowrap; } /* alleen het vergrootglas; de tekst blijft voorleesbaar */
}

/* ── Halfscherm / tablet (769–1099px) ─────────────────────────────────────
   s454. Onder 768px stuurt index.html:25 door naar de losse mobiele app /m/,
   dus alle mobiele shell-CSS zit onder die grens. Daarboven stond tot nu toe
   GEEN enkele shell-regel: de sidebar bleef 240px en .mc-topbar is een flexbox
   zonder wrap, zonder min-width en zonder overflow — vandaar dat de rechterkant
   (praktijk-toggle) buiten beeld liep zodra je het venster halveerde.
   Hergebruikt de bestaande lade: .sb-toggle + #sidebar.open + de backdrop en
   Escape-handler uit mobile-enhancements.js (die zijn niet breedte-gegated).
   Dit blok staat BEWUST hier en niet aan EOF: pre-deploy-check.js eist de
   sentinel END_OF_S227_TEAMCHAT_CSS in de laatste 2048 tekens van app.css. */

/* s485. De lade-uitbreiding van topbar-compact.js staat op ELKE breedte in de DOM
   (één injectie, idempotent) maar is alleen zichtbaar in de band hieronder — buiten
   de band staan de echte knoppen gewoon bereikbaar in de topbalk. De cold file zet
   `display` daarom bewust NIET inline: die beslissing hoort hier. */
#mc-drawer-extras { display: none; }

@media (min-width: 769px) and (max-width: 1099px) {
  /* Zelfde truc als het mobiele blok: de legacy-consumenten van --sidebar-w
     (o.a. #main-content margin-left op regel ~209) vallen vanzelf naar 0.
     --mc-sidebar-w blijft 240px — dat is de breedte van de lade zelf. */
  :root { --sidebar-w: 0px; }

  /* Base #sidebar heeft al transition:transform .25s, dus geen eigen transition. */
  #sidebar.mc-shell { transform: translateX(-100%); }
  #sidebar.mc-shell.open { transform: none; box-shadow: var(--shadow-lg); }
  body.mc-shell-active #main-content { margin-left: 0; }

  /* z-index 106 en niet 101 (de mobiele waarde): .mc-topbar springt vanaf exact
     769px naar z-105 via de desktop-stacking-fix verderop in dit bestand. Op 101
     zou de hamburger ONDER de fixed topbar vallen — zichtbaar noch klikbaar. */
  .sb-toggle {
    display: flex !important;
    position: fixed; top: 10px; left: 12px; z-index: 106;
    width: 36px; height: 36px; border-radius: 8px;
    background: var(--navy); color: #fff; border: none;
    align-items: center; justify-content: center;
    font-size: var(--fs-5); cursor: pointer; /* DES-04: geen px-literaal; 17px i.p.v. de 18px van het mobiele blok — op een ☰-glyph onzichtbaar */
  }
  .mc-topbar { padding-left: 58px; } /* houdt het logo vrij van de hamburger */

  /* Topbar mag krimpen i.p.v. overlopen. min-width:0 op BEIDE flexkinderen —
     alleen .mc-topbar-nav volstaat niet, de overloop zit rechts.
     s485: de scrollbar was hier verborgen. Met de drie knoppen hieronder in de lade
     past de nav er normaal gewoon in, maar als hij tóch scrolt moet dat ZICHTBAAR
     zijn — een verborgen scrollbar is geen bereikbaar menu, alleen een onvindbaar. */
  .mc-topbar-nav { min-width: 0; overflow-x: auto; scrollbar-width: thin; }
  .mc-topbar-nav::-webkit-scrollbar { height: 4px; }
  .mc-topbar-nav::-webkit-scrollbar-thumb { background: var(--mc-border-warm); border-radius: 999px; }
  .mc-topbar-right { min-width: 0; }
  .mc-user-name { display: none; }
  .mc-search-btn { min-width: auto; padding: 0 8px; gap: 0; }
  .mc-search-btn .mc-kbd { display: none; }
  .mc-search-btn span:first-child { width: 1.3em; overflow: hidden; white-space: nowrap; } /* alleen het vergrootglas; de tekst blijft voorleesbaar */

  /* s485 — de drie ruimtevreters rechts (samen 292px) verhuizen naar de lade:
     #mc-drawer-extras uit topbar-compact.js.
     GEMETEN IN DE BAND ZELF (viewport 945, 8 aug 2026), en dat corrigeert de eerste
     diagnose: hier wordt niets weggeknipt — de balk "past" (945/945) doordat
     .mc-topbar-nav wordt platgedrukt tot 121px zichtbaar op 448px inhoud. 327px zit
     dus achter een scrollbar die hierboven verborgen stond: "Voor cliënt" half
     afgekapt, "Voor behandelaars" volledig weg, zonder enig teken dat er te scrollen
     valt. Wegknippen gebeurt pas onder 768px, en daar redirect index.html naar /m/.
     De ruimte moet dus van rechts naar de nav, want die draagt het dagelijkse
     klinische werk en de rechterknoppen zijn incidenteel.
     VERBERGEN, niet verwijderen — .mc-topbar-right is het injectie-anker van
     praktijk-context.js én whatsnew-topbar.js en #mc-theme-btn hun insertBefore-anker
     (needle pre-deploy-check.js:143), én de lade-knoppen klikken juist deze echte
     knoppen aan. !important omdat beide cold files hun display INLINE zetten.
     .mc-user-trigger blijft bewust wél in de balk (108px, al ingekrompen). */
  #mc-practice-toggle, #mc-whatsnew-pill, #mc-theme-btn, #mc-ctxhelp-btn { display: none !important; }
  #mc-drawer-extras { display: flex; }

  /* s485 — de laatste pixels, live nagemeten op de draaiende app (viewport 945).
     Alleen de drie knoppen hierboven verplaatsen liet 30px overloop staan; met de
     hulpknop erbij bleef er 2px over; met de praktijknaam op 70px is het 0.
     Gemeten reeks: 327px verborgen → 30 → 2 → 0. De naam wordt alleen VISUEEL
     afgekapt: textContent blijft volledig, dus voorleessoftware krijgt hem heel, en
     de volledige lijst hangt in de dropdown eronder. Icoon "G" blijft staan —
     volledig verbergen zou een beheerder met meerdere praktijken laten raden waar
     hij zit. */
  #mc-practice-switcher-label { max-width: 70px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ── App-shell vanaf 1100px: de topbalk past op één regel ───────────────────
   Boven 1099px staat de zijbalk vast en zit alles in de topbalk. Met een
   beheerder, een lange praktijknaam en de Nieuw-pil is die balk ~1220px breed:
   de avatar liep rechts buiten beeld en de menulabels braken over twee regels.
   Menulabels breken nooit; de praktijknaam krijgt een ellips, en in de band
   1100–1399 worden zoeken, de Nieuw-pil en de voornaam alleen-icoon. De tekst
   blijft in de DOM (aria-label of visueel verborgen), dus voorleessoftware
   krijgt hem heel. Gate: tests/responsief/shell.spec.mjs. */
.mc-topbar-item { white-space: nowrap; }
#mc-whatsnew-pill { width: auto; } /* .mc-icon-btn zet 32px; de pil draagt icoon + tekst */
#mc-sb-rail-knop { display: none; } /* alleen in de band 1100–1399 hieronder */

@media (min-width: 1100px) {
  #mc-practice-switcher-label { max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

@media (min-width: 1100px) and (max-width: 1399px) {
  .mc-search-btn { min-width: auto; padding: 0 8px; gap: 0; }
  .mc-search-btn .mc-kbd { display: none; }
  .mc-search-btn span:first-child { width: 1.3em; overflow: hidden; white-space: nowrap; }
  #mc-whatsnew-pill span:last-child { display: none; } /* aria-label «Wat is nieuw» blijft */
  .mc-user-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  #mc-practice-switcher-label { max-width: 120px; }

  /* Icoonbalk: body.mc-sb-rail komt uit topbar-compact.js (onder 1280px standaard aan, keuze onthouden).
     Het label blijft als tekstnode in de knop staan (font-size 0), dus de toegankelijke naam blijft heel;
     de tooltip komt uit het title-attribuut dat dezelfde file zet. */
  #mc-sb-rail-knop {
    display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
    width: 28px; height: 28px; margin: 0 0 6px auto;
    border: 1px solid var(--mc-border-warm); border-radius: 8px;
    background: transparent; color: var(--mc-text-mid); font: inherit; font-size: 16px; cursor: pointer;
  }
  #sidebar:has(#bm-nav) #mc-sb-rail-knop { display: none; }
  body.mc-sb-rail { --mc-sidebar-w: 64px; }
  body.mc-sb-rail #mc-sb-rail-knop { transform: rotate(180deg); margin: 0 auto 6px; }
  body.mc-sb-rail #sidebar.mc-shell { padding: 14px 8px; }
  body.mc-sb-rail #sidebar.mc-shell .sb-greet,
  body.mc-sb-rail #sidebar.mc-shell .sb-section,
  body.mc-sb-rail #sb-tasks,
  body.mc-sb-rail #sb-sync-label { display: none; }
  body.mc-sb-rail #sidebar.mc-shell .sb-item { font-size: 0; gap: 0; justify-content: center; padding: 9px 0; }
  body.mc-sb-rail #sidebar.mc-shell .sb-item-icon { font-size: 17px; width: auto; }
  body.mc-sb-rail #sidebar.mc-shell .sb-badge { position: absolute; top: 2px; right: 4px; font-size: 10px; }
  /* Ingevoegde knoppen (beta-bug-report.js, translation-report.js) zetten hun maat inline: in de icoonbalk alleen een icoon.
     De tekst blijft als naam staan (font-size 0), de tooltip komt uit hun title; het icoon is een lijnicoon (geen emoji). */
  body.mc-sb-rail #mc-betabug-btn,
  body.mc-sb-rail #mc-transrep-btn { width: 44px !important; margin: 6px auto 4px !important; padding: 7px 0 !important; font-size: 0 !important; text-align: center !important; }
  body.mc-sb-rail #mc-betabug-btn::before,
  body.mc-sb-rail #mc-transrep-btn::before {
    content: ''; display: inline-block; width: 16px; height: 16px; background: currentColor;
    -webkit-mask: var(--mc-rail-ico) center / contain no-repeat; mask: var(--mc-rail-ico) center / contain no-repeat;
  }
  body.mc-sb-rail #mc-betabug-btn { --mc-rail-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/%3E%3Cpath d='M12 7v4M12 14h.01'/%3E%3C/svg%3E"); }
  body.mc-sb-rail #mc-transrep-btn { --mc-rail-ico: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E"); }
}

/* ═══ TABS BINNEN PAGINA (ClientsHub, DocsHub) ═══════════════════════ */
.mc-tabs-row {
  display: flex;
  gap: 18px;
  border-bottom: 1px solid var(--mc-border-warm);
  margin-bottom: 22px;
  margin-top: 4px;
  flex-wrap: wrap;
}
.mc-tab {
  padding: 10px 2px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--mc-text-light);
  cursor: pointer;
  border: none;
  background: transparent;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color 100ms, border-color 100ms;
  font-family: var(--mc-sans);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mc-tab:hover { color: var(--navy); }
.mc-tab.active {
  color: var(--navy);
  border-color: var(--navy);
  font-weight: 600;
}
.mc-tab .sb-badge {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 9px;
  background: var(--teal);
  color: #fff;
  margin-left: 2px;
}

/* Submodule .page-header verbergen wanneer in tab-content (ClientsHub/DocsHub) */
/* Verberg alleen titel/subtitle, behoud page-actions (knoppen!) */
#clients-tab-content > .page-header > div:first-child,
#docs-tab-content > .page-header > div:first-child {
  display: none;
}
/* Page-header zelf wordt header zonder titel — alleen acties rechts */
#clients-tab-content > .page-header,
#docs-tab-content > .page-header {
  padding: 0 0 12px 0;
  justify-content: flex-end;
}
/* Ook eventuele page-body padding-top resetten zodat het mooi aansluit op tabs */
#clients-tab-content > .page-body,
#docs-tab-content > .page-body { padding-top: 0; }

/* ═══ Reminder tabs ═══════════════════════════════════════ */
.rem-tab {
  background: transparent;
  border: none;
  padding: 6px 0;
  font-size: 13px;
  font-weight: 500;
  color: var(--mc-text-light, #8a8071);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  font-family: var(--mc-sans, inherit);
  transition: color 100ms, border-color 100ms;
}
.rem-tab:hover { color: var(--navy); }
.rem-tab.active {
  color: var(--navy);
  border-color: var(--navy);
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════
   STAP A — Globale herstyling van bestaande pagina-klassen
   Alleen actief binnen mc-shell zodat login etc. ongemoeid blijft
   ═══════════════════════════════════════════════════════ */

/* ── Page header ──────────────────────────────────────── */
body.mc-shell-active .page-header {
  padding: 32px 32px 0;
  align-items: flex-end;
  gap: 18px;
}
body.mc-shell-active .page-header .page-title {
  font-family: var(--mc-serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.15;
  color: var(--navy);
}
body.mc-shell-active .page-header .page-subtitle {
  font-size: 14px;
  color: var(--mc-text-light);
  margin-top: 6px;
  line-height: 1.45;
}
body.mc-shell-active .page-header .page-actions { gap: 8px; }
body.mc-shell-active .page-body { padding: 24px 32px 60px; }

/* ── Cards ──────────────────────────────────────────── */
body.mc-shell-active .card {
  background: var(--mc-bg-elevated);
  border-radius: 12px;
  border: 1px solid var(--mc-border-warm);
  box-shadow: var(--mc-shadow-sm);
  overflow: hidden;
}
body.mc-shell-active .card-head {
  padding: 14px 18px;
  border-bottom: 1px solid var(--mc-border-warm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, rgba(30,58,95,0.02) 0%, transparent 100%);
}
body.mc-shell-active .card-title {
  font-family: var(--mc-serif);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--navy);
}
body.mc-shell-active .card-body { padding: 16px 18px; }

/* ── Buttons ──────────────────────────────────────── */
body.mc-shell-active .btn {
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid var(--mc-border-warm);
  background: var(--mc-bg-elevated);
  font-size: 13.5px;
  font-weight: 500;
  cursor: pointer;
  color: var(--mc-text-warm);
  font-family: var(--mc-sans);
  transition: background 100ms, border-color 100ms, color 100ms;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  line-height: 1.4;
}
body.mc-shell-active .btn:hover {
  background: var(--mc-navy-soft);
  border-color: var(--navy);
  color: var(--navy);
}
body.mc-shell-active .btn-primary {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
body.mc-shell-active .btn-primary:hover {
  background: var(--navy-dark);
  border-color: var(--navy-dark);
  color: #fff;
}
body.mc-shell-active .btn-sm,
body.mc-shell-active .btn-xs {
  padding: 5px 10px;
  font-size: 12.5px;
  border-radius: 6px;
}
body.mc-shell-active .btn-ghost,
body.mc-shell-active .btn-secondary {
  background: transparent;
  border-color: transparent;
  color: var(--mc-text-mid);
}
body.mc-shell-active .btn-ghost:hover,
body.mc-shell-active .btn-secondary:hover {
  background: var(--mc-bg-hover);
  color: var(--navy);
  border-color: transparent;
}
body.mc-shell-active .btn-danger,
body.mc-shell-active .btn-error {
  background: var(--error, #a4271c);
  color: #fff;
  border-color: var(--error, #a4271c);
}
body.mc-shell-active .btn-danger:hover,
body.mc-shell-active .btn-error:hover {
  background: #8a1f17;
  border-color: #8a1f17;
  color: #fff;
}

/* Disabled state */
body.mc-shell-active .btn:disabled,
body.mc-shell-active .btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Form inputs ──────────────────────────────────────── */
body.mc-shell-active input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]),
body.mc-shell-active select,
body.mc-shell-active textarea {
  padding: 9px 11px;
  border: 1px solid var(--mc-border-warm);
  border-radius: 8px;
  font-size: 13.5px;
  font-family: var(--mc-sans);
  color: var(--mc-text-warm);
  background: var(--mc-bg-elevated);
  transition: border-color 120ms, box-shadow 120ms;
}
body.mc-shell-active input:focus,
body.mc-shell-active select:focus,
body.mc-shell-active textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px var(--mc-navy-soft);
}
body.mc-shell-active .field,
body.mc-shell-active .form-group {
  margin-bottom: 14px;
}
body.mc-shell-active .field > label,
body.mc-shell-active .form-group > label,
body.mc-shell-active .form-label,
body.mc-shell-active .field-label {
  display: block;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mc-text-mid);
  margin-bottom: 6px;
}

/* ── Tabellen ──────────────────────────────────────── */
body.mc-shell-active table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
}
body.mc-shell-active table thead {
  background: var(--mc-bg-subtle);
}
body.mc-shell-active table thead th {
  padding: 10px 14px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mc-text-mid);
  text-align: left;
  border-bottom: 1px solid var(--mc-border-warm);
}
body.mc-shell-active table tbody td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--mc-border-warm);
  vertical-align: middle;
  color: var(--mc-text-warm);
}
body.mc-shell-active table tbody tr:hover {
  background: var(--mc-bg-subtle);
}
body.mc-shell-active table tbody tr:last-child td {
  border-bottom: none;
}
body.mc-shell-active .table-wrap {
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid var(--mc-border-warm);
  background: var(--mc-bg-elevated);
}
/* Tabel binnen card heeft al border, dus wrap-border weghalen */
body.mc-shell-active .card .table-wrap {
  border: none;
  border-radius: 0;
}

/* ── Badges ──────────────────────────────────────── */
body.mc-shell-active .badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 11px;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
body.mc-shell-active .badge-gray {
  background: var(--mc-bg-subtle);
  color: var(--mc-text-mid);
}
body.mc-shell-active .badge-navy {
  background: var(--mc-navy-soft);
  color: var(--navy);
}
body.mc-shell-active .badge-green {
  background: var(--mc-success-soft);
  color: var(--mc-success);
}
body.mc-shell-active .badge-teal {
  background: var(--mc-teal-soft);
  color: var(--teal-dark, #0a4f4a);
}
[data-theme="dark"] body.mc-shell-active .badge-teal {
  color: var(--teal);
}
body.mc-shell-active .badge-orange {
  background: var(--mc-warn-soft);
  color: var(--mc-warn-text);
}
body.mc-shell-active .badge-red {
  background: var(--error-soft, #fbe5e2);
  color: var(--error, #a4271c);
}

/* ── Alerts ──────────────────────────────────────── */
body.mc-shell-active .alert {
  padding: 12px 15px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.55;
  margin-bottom: 16px;
  border: 1px solid transparent;
}
body.mc-shell-active .alert-info {
  background: var(--mc-navy-soft);
  color: var(--navy);
  border-color: rgba(30, 58, 95, 0.15);
}
body.mc-shell-active .alert-success {
  background: var(--mc-success-soft);
  color: var(--mc-success);
  border-color: rgba(15, 118, 110, 0.18);
}
body.mc-shell-active .alert-warn,
body.mc-shell-active .alert-warning {
  background: var(--mc-warn-soft);
  color: var(--mc-warn-text);
  border-color: rgba(146, 86, 10, 0.20);
}
body.mc-shell-active .alert-error,
body.mc-shell-active .alert-danger {
  background: var(--error-soft, #fbe5e2);
  color: var(--error, #a4271c);
  border-color: rgba(164, 39, 28, 0.18);
}

/* ── Empty state ──────────────────────────────────────── */
body.mc-shell-active .empty-state {
  text-align: center;
  padding: 50px 20px;
  color: var(--mc-text-light);
}
body.mc-shell-active .empty-icon {
  font-size: 36px;
  opacity: 0.5;
  margin-bottom: 8px;
}
body.mc-shell-active .empty-title {
  font-family: var(--mc-serif);
  font-size: 17px;
  color: var(--mc-text-warm);
  margin-bottom: 4px;
}
body.mc-shell-active .empty-sub {
  font-size: 12.5px;
  color: var(--mc-text-light);
}

/* ── KPI strip / dashboard stats ──────────────────────── */
body.mc-shell-active .kpi-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}
body.mc-shell-active .kpi-card {
  background: var(--mc-bg-elevated);
  border: 1px solid var(--mc-border-warm);
  border-radius: 12px;
  padding: 16px 18px;
  position: relative;
  overflow: hidden;
}
body.mc-shell-active .kpi-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--navy);
}
body.mc-shell-active .kpi-strip .kpi-card:nth-child(2)::before { background: var(--teal); }
body.mc-shell-active .kpi-strip .kpi-card:nth-child(3)::before { background: var(--mc-admin); }
body.mc-shell-active .kpi-strip .kpi-card:nth-child(4)::before { background: var(--mc-text-mid); }
body.mc-shell-active .kpi-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mc-text-light);
  font-weight: 600;
}
body.mc-shell-active .kpi-val {
  font-family: var(--mc-serif);
  font-size: 28px;
  font-weight: 500;
  margin-top: 6px;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--navy);
}
body.mc-shell-active .kpi-strip .kpi-card:nth-child(2) .kpi-val { color: var(--teal-dark, #0a4f4a); }
body.mc-shell-active .kpi-strip .kpi-card:nth-child(3) .kpi-val { color: var(--mc-admin-strong); }
body.mc-shell-active .kpi-sub {
  font-size: 11.5px;
  color: var(--mc-text-light);
  margin-top: 4px;
}

/* ── Dark mode tweaks voor header gradients (subtieler in dark) ─── */
[data-theme="dark"] body.mc-shell-active .card-head {
  background: linear-gradient(180deg, rgba(108,141,186,0.04) 0%, transparent 100%);
}

/* ── Helper text utilities (consistent met nieuwe palette) ───── */
body.mc-shell-active .text-light { color: var(--mc-text-light); }
body.mc-shell-active .text-mid { color: var(--mc-text-mid); }
body.mc-shell-active .text-xs { font-size: 11.5px; }
body.mc-shell-active .text-sm { font-size: 12.5px; }
body.mc-shell-active .font-semibold { font-weight: 600; }

/* ═══ Segmented control (Agenda view-toggle) ════════════ */
.mc-segmented {
  display: inline-flex;
  background: var(--mc-bg-subtle);
  border: 1px solid var(--mc-border-warm);
  border-radius: 8px;
  padding: 2px;
  gap: 0;
}
.mc-segmented button {
  appearance: none;
  background: transparent;
  border: none;
  padding: 5px 12px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mc-text-mid);
  cursor: pointer;
  border-radius: 6px;
  font-family: var(--mc-sans);
  transition: background 100ms, color 100ms;
  line-height: 1.4;
}
.mc-segmented button:hover { color: var(--navy); }
.mc-segmented button[data-active="1"] {
  background: var(--mc-bg-elevated);
  color: var(--navy);
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(30,58,95,0.08);
}

/* ═══ Nav cluster (vorige / vandaag / volgende) ═════════ */
.mc-navcluster {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--mc-border-warm);
  border-radius: 8px;
  background: var(--mc-bg-elevated);
  overflow: hidden;
}
.mc-navcluster .btn {
  border-radius: 0;
  border: none;
  border-left: 1px solid var(--mc-border-warm);
  background: transparent;
  margin: 0;
}
.mc-navcluster .btn:first-child { border-left: none; }
.mc-navcluster .btn:hover {
  background: var(--mc-navy-soft);
  color: var(--navy);
  border-color: var(--mc-border-warm);
}
.mc-navcluster .btn[aria-label="Vorige"],
.mc-navcluster .btn[aria-label="Volgende"] {
  font-size: 16px;
  padding: 5px 10px;
  line-height: 1;
}

/* ═══ Documents — Snel aanmaken rows ═══════════════════ */
.mc-doc-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 18px;
  border-bottom: 1px solid var(--mc-border-warm);
  cursor: pointer;
  transition: background 100ms;
}
.mc-doc-row:last-child { border-bottom: none; }
.mc-doc-row:hover { background: var(--mc-bg-hover); }
.mc-doc-arrow {
  color: var(--mc-text-light);
  font-size: 16px;
  flex: 0 0 auto;
  transition: color 100ms, transform 120ms;
}
.mc-doc-row:hover .mc-doc-arrow {
  color: var(--navy);
  transform: translateX(2px);
}

/* ═══ Documents — Opgeslagen documenten rows ═══════════ */
.mc-doc-saved-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  border-bottom: 1px solid var(--mc-border-warm);
  transition: background 100ms;
}
.mc-doc-saved-row:last-child { border-bottom: none; }
.mc-doc-saved-row:hover { background: var(--mc-bg-subtle); }

/* ═══ Reminders — Sjabloon-rows ═══════════════════════ */
.mc-tpl-row {
  padding: 14px 18px;
  border-bottom: 1px solid var(--mc-border-warm);
}
.mc-tpl-row:last-child { border-bottom: none; }
.mc-tpl-body {
  background: var(--mc-bg-subtle);
  border: 1px solid var(--mc-border-warm);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12.5px;
  font-family: var(--mc-sans);
  color: var(--mc-text-mid);
  white-space: pre-wrap;
  margin: 0;
  line-height: 1.55;
}
.mc-tpl-row code {
  background: var(--mc-bg-subtle);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 10.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--navy);
  border: 1px solid var(--mc-border-warm);
}

/* ═══════════════════════════════════════════════════════
   PRAKTIJKBEHEERDER-COCKPIT (s164, D-WP1..4 fase 1)
   Gelaagde cockpit: polsslag · zes domeinpanelen · vooruitblik.
   Statuskleuren: sage #8aab86 · amber #d9b46a · rose #d98a8a.
   ═══════════════════════════════════════════════════════ */
.pmc {
  padding: 26px 30px 48px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 1180px;
}
.pmc-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
}
.pmc-greet { font-size: 13px; color: var(--mc-text-light, #9a9384); }
.pmc-title { font-size: 25px; font-weight: 700; margin: 2px 0; color: var(--mc-text-dark, #3a3730); }
.pmc-date { font-size: 12.5px; color: var(--mc-text-mid, #6f6a5e); }
.pmc-seg { flex-shrink: 0; }

/* ── Diepte 1 — polsslag ── */
.pmc-pulse {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 14px;
}
.pmc-briefing {
  display: flex;
  gap: 14px;
  background: linear-gradient(135deg, #f4f6f0, #fbfaf6);
  border: 1px solid var(--mc-border-warm, #e6e1d6);
  border-radius: 14px;
  padding: 18px 20px;
}
.pmc-brief-ic { font-size: 28px; flex-shrink: 0; line-height: 1.1; }
.pmc-brief-txt p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.55; color: var(--mc-text-mid, #5e594e); }
.pmc-brief-txt p:first-child { font-weight: 600; color: var(--mc-text-dark, #3a3730); }
.pmc-brief-txt p:last-child { margin-bottom: 0; }

.pmc-score {
  display: flex;
  gap: 14px;
  align-items: center;
  background: #fff;
  border: 1px solid var(--mc-border-warm, #e6e1d6);
  border-radius: 14px;
  padding: 16px 18px;
}
.pmc-gauge { position: relative; width: 80px; height: 80px; flex-shrink: 0; cursor: pointer; }
.pmc-gauge svg { width: 80px; height: 80px; }
.pmc-gauge-num {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 24px; font-weight: 700; color: var(--mc-text-dark, #3a3730);
}
.pmc-score-side { flex: 1; min-width: 0; }
.pmc-score-lbl { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--mc-text-light, #9a9384); }
.pmc-score-sub { font-size: 12.5px; color: var(--mc-text-mid, #6f6a5e); margin: 3px 0 6px; line-height: 1.4; }
.pmc-drivers { margin: 8px 0 6px; }
.pmc-driver { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; font-size: 11.5px; color: var(--mc-text-mid, #6f6a5e); }
.pmc-driver > span:first-child { width: 78px; flex-shrink: 0; }
.pmc-driver-bar { flex: 1; height: 7px; background: rgba(0,0,0,.06); border-radius: 4px; overflow: hidden; }
.pmc-driver-bar i { display: block; height: 100%; border-radius: 4px; }
.pmc-driver-n { width: 22px; text-align: right; font-weight: 600; }
.pmc-driver-note { font-size: 10.5px; color: var(--mc-text-light, #9a9384); line-height: 1.4; margin-top: 6px; }
.pmc-link {
  background: none; border: none; padding: 0; cursor: pointer;
  font-size: 11.5px; color: var(--navy, #2f5b6b); font-weight: 600;
}
.pmc-link:hover { text-decoration: underline; }

/* ── Vitalen ── */
.pmc-vitals { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; }
.pmc-vital {
  background: #fff;
  border: 1px solid var(--mc-border-warm, #e6e1d6);
  border-radius: 12px;
  padding: 12px 13px;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.pmc-vital:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.07); }
.pmc-vital-na { cursor: default; background: var(--mc-bg-warm); }
.pmc-vital-na:hover { transform: none; box-shadow: none; }
.pmc-vital-top { display: flex; align-items: center; gap: 6px; }
.pmc-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; display: inline-block; }
.pmc-vital-lbl { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--mc-text-light, #9a9384); flex: 1; }
.pmc-vital-delta { font-size: 11px; font-weight: 700; }
.pmc-vital-val { font-size: 18px; font-weight: 700; color: var(--mc-text-dark, #3a3730); margin: 4px 0 1px; }
.pmc-vital-sub { font-size: 10.5px; color: var(--mc-text-mid, #6f6a5e); line-height: 1.35; }
.pmc-vital-naval { font-size: 13px; font-weight: 600; color: var(--mc-text-light, #9a9384); margin: 4px 0 1px; }
.pmc-vital-spark { margin-top: 6px; }
.pmc-spark { width: 100%; height: 24px; display: block; }

/* ── Diepte 3 — vooruitblik ── */
.pmc-l3 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pmc-card {
  background: #fff;
  border: 1px solid var(--mc-border-warm, #e6e1d6);
  border-radius: 14px;
  overflow: hidden;
}
.pmc-card-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 16px; border-bottom: 1px solid var(--mc-border-warm, #e6e1d6);
}
.pmc-card-t { font-size: 13.5px; font-weight: 700; color: var(--mc-text-dark, #3a3730); }
.pmc-count {
  font-size: 12px; font-weight: 700; min-width: 22px; text-align: center;
  background: #eef1ea; color: #5f7d5b; border-radius: var(--r-xl); padding: 2px 8px; /* s262 DES-5 */
}
.pmc-dec {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-bottom: 1px solid var(--mc-border-warm);
  border-left: 3px solid transparent;
}
.pmc-dec:last-child { border-bottom: none; }
.pmc-dec-ic { font-size: 17px; flex-shrink: 0; }
.pmc-dec-body { flex: 1; min-width: 0; }
.pmc-dec-t { font-size: 13px; font-weight: 600; color: var(--mc-text-dark, #3a3730); }
.pmc-dec-w { font-size: 11.5px; color: var(--mc-text-mid, #6f6a5e); margin-top: 1px; }
.pmc-dec-act { display: flex; gap: 5px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.pmc-snooze {
  background: none; border: 1px solid var(--mc-border-warm, #e6e1d6);
  border-radius: 6px; cursor: pointer; font-size: 11px; padding: 3px 6px; line-height: 1;
}
.pmc-snooze:hover { background: var(--mc-bg-subtle); }
.pmc-snoozed-note { padding: 8px 14px; font-size: 11px; color: var(--mc-text-light, #9a9384); }
.pmc-insight {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 11px 14px; border-bottom: 1px solid var(--mc-border-warm);
}
.pmc-insight:last-child { border-bottom: none; }
.pmc-insight-ic { font-size: 16px; flex-shrink: 0; }
.pmc-insight-body { flex: 1; min-width: 0; }
.pmc-insight-t { font-size: 12.5px; font-weight: 600; color: var(--mc-text-dark, #3a3730); line-height: 1.45; }
.pmc-insight-a { font-size: 11.5px; color: var(--mc-text-mid, #6f6a5e); margin-top: 3px; line-height: 1.4; }
.pmc-insight-act { margin-top: 6px; }
.pmc-empty { padding: 18px 16px; font-size: 12.5px; color: var(--mc-text-light, #9a9384); text-align: center; }

/* ── Diepte 2 — domeinpanelen ── */
.pmc-panels-head { display: flex; align-items: baseline; gap: 12px; margin-top: 6px; flex-wrap: wrap; }
.pmc-panels-hint { font-size: 11.5px; color: var(--mc-text-light, #9a9384); }
.pmc-panels { display: flex; flex-direction: column; gap: 9px; }
.pmc-panel {
  background: #fff;
  border: 1px solid var(--mc-border-warm, #e6e1d6);
  border-radius: 12px;
  overflow: hidden;
}
.pmc-panel-head {
  display: flex; align-items: center; gap: 10px;
  padding: 13px 15px; cursor: pointer;
}
.pmc-panel-head:hover { background: var(--mc-bg-warm); }
.pmc-panel-ic { font-size: 18px; flex-shrink: 0; }
.pmc-panel-titles { flex: 1; min-width: 0; }
.pmc-panel-name { font-size: 13.5px; font-weight: 700; color: var(--mc-text-dark, #3a3730); }
.pmc-panel-kern { font-size: 11.5px; color: var(--mc-text-mid, #6f6a5e); margin-top: 1px; }
.pmc-panel-ctrls { display: flex; gap: 3px; flex-shrink: 0; }
.pmc-pctrl {
  background: none; border: 1px solid var(--mc-border-warm, #e6e1d6);
  border-radius: 5px; cursor: pointer; font-size: 10px; width: 22px; height: 22px;
  color: var(--mc-text-mid, #6f6a5e); line-height: 1;
}
.pmc-pctrl:hover { background: var(--mc-bg-subtle); }
.pmc-pctrl-off { opacity: .22; cursor: default; display: inline-flex; align-items: center; justify-content: center; }
.pmc-panel-chev { font-size: 10px; color: var(--mc-text-light, #9a9384); flex-shrink: 0; }
.pmc-panel-body { padding: 4px 15px 15px; border-top: 1px solid var(--mc-border-warm); }
.pmc-facets { display: flex; gap: 5px; margin: 12px 0; flex-wrap: wrap; }
.pmc-facet {
  background: var(--mc-bg-subtle); border: 1px solid transparent; border-radius: var(--r-sm); /* s262 DES-5 */
  cursor: pointer; font-size: 11.5px; font-weight: 600; padding: 5px 11px;
  color: var(--mc-text-mid, #6f6a5e);
}
.pmc-facet:hover { background: #ebe9e1; }
.pmc-facet.active { background: var(--navy, #2f5b6b); color: #fff; }
.pmc-facet-content { font-size: 12.5px; }
.pmc-facet-lead { font-size: 12px; color: var(--mc-text-mid, #6f6a5e); margin-bottom: 10px; line-height: 1.45; }
.pmc-facet-note { font-size: 11px; color: var(--mc-text-light, #9a9384); margin-top: 10px; line-height: 1.45; }
.pmc-facet-note.pmc-warn { color: #b06b6b; }
.pmc-trend { margin: 8px 0; }
.pmc-trend .pmc-spark { height: 54px; }
.pmc-trend-legend { display: flex; justify-content: space-between; font-size: 10px; color: var(--mc-text-light, #9a9384); }

.pmc-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.pmc-bar-name { width: 130px; flex-shrink: 0; font-size: 12px; color: var(--mc-text-dark, #3a3730); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pmc-bar-track { flex: 1; height: 14px; background: var(--mc-bg-subtle); border-radius: 5px; overflow: hidden; }
.pmc-bar-track i { display: block; height: 100%; background: linear-gradient(90deg, #9bb795, #7c9a76); border-radius: 5px; }
.pmc-bar-shield { background: repeating-linear-gradient(45deg, var(--mc-bg-subtle), var(--mc-bg-subtle) 5px, var(--mc-bg-hover) 5px, var(--mc-bg-hover) 10px); }
.pmc-bar-val { width: 138px; flex-shrink: 0; font-size: 11.5px; color: var(--mc-text-mid, #6f6a5e); text-align: right; }
.pmc-bar-val.pmc-shield { font-style: italic; color: var(--mc-text-light, #9a9384); }

.pmc-listrow {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer; margin-bottom: 3px;
  background: var(--mc-bg-warm);
}
.pmc-listrow:hover { background: var(--mc-bg-subtle); }
.pmc-listrow-alert { background: #fbf2f0; }
.pmc-listrow-alert:hover { background: #f6e8e5; }
.pmc-listrow-n { font-size: 12.5px; font-weight: 600; color: var(--mc-text-dark, #3a3730); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmc-listrow-tag { font-size: 11px; color: var(--mc-text-mid, #6f6a5e); flex-shrink: 0; }

.pmc-na { display: flex; gap: 12px; align-items: center; padding: 14px; background: var(--mc-bg-warm); border-radius: var(--r); } /* s262 DES-5 */
.pmc-na-ic { font-size: 22px; color: var(--mc-text-light, #c2bcae); flex-shrink: 0; }
.pmc-na-t { font-size: 12.5px; font-weight: 700; color: var(--mc-text-mid, #6f6a5e); }
.pmc-na-s { font-size: 11.5px; color: var(--mc-text-light, #9a9384); margin-top: 2px; line-height: 1.4; }

.pmc-hidden-strip { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.pmc-hidden-lbl { font-size: 11.5px; color: var(--mc-text-light, #9a9384); }
.pmc-chip {
  background: var(--mc-bg-subtle); border: 1px solid var(--mc-border-warm, #e6e1d6);
  border-radius: var(--r-xl); cursor: pointer; font-size: 11.5px; padding: 4px 11px; /* s262 DES-5 */
  color: var(--mc-text-mid, #6f6a5e);
}
.pmc-chip:hover { background: #ebe9e1; }
.pmc-foot { font-size: 11px; color: var(--mc-text-light, #9a9384); line-height: 1.5; margin-top: 8px; }
.pmc-skel { font-size: 12.5px; color: var(--mc-text-light, #9a9384); }

@media (max-width: 920px) {
  .pmc { padding: 20px 16px 40px; }
  .pmc-pulse { grid-template-columns: 1fr; }
  .pmc-vitals { grid-template-columns: repeat(3, 1fr); }
  .pmc-l3 { grid-template-columns: 1fr; }
  .pmc-bar-name { width: 96px; }
  .pmc-bar-val { width: 104px; }
}
@media (max-width: 560px) {
  .pmc-vitals { grid-template-columns: repeat(2, 1fr); }
}
/* END_OF_S164_COCKPIT_CSS */

/* ═══════════════════════════════════════════════════════
   S177 — D-WP6: bezetting heatmap, 12-weken-trend stats, runway-tank
   ═══════════════════════════════════════════════════════ */
.pmc-heatmap { display: flex; flex-direction: column; gap: 3px; margin: 6px 0 8px; }
.pmc-heatmap-row {
  display: grid;
  grid-template-columns: 130px repeat(7, 1fr) 48px;
  gap: 3px; align-items: center;
}
.pmc-heatmap-row.pmc-heatmap-header { font-size: 10.5px; color: var(--mc-text-light, #9a9384); }
.pmc-heatmap-name {
  font-size: 11.5px; color: var(--mc-text-dark, #3a3730);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pmc-heatmap-cell-lbl { text-align: center; font-weight: 600; letter-spacing: .04em; }
.pmc-heatmap-cell {
  height: 22px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--mc-text-dark, #3a3730); font-weight: 600;
  border-radius: 3px; background: var(--mc-bg-subtle);
  transition: transform .12s ease;
  cursor: default;
}
.pmc-heatmap-cell:hover { transform: scale(1.06); }
.pmc-heatmap-cell.pmc-heatmap-l0 { background: var(--mc-bg-subtle); color: transparent; }
.pmc-heatmap-cell.pmc-heatmap-l1 { background: #d8e4d2; color: #4a5847; }
.pmc-heatmap-cell.pmc-heatmap-l2 { background: #b8cdb0; color: #2f3d2c; }
.pmc-heatmap-cell.pmc-heatmap-l3 { background: #93b389; color: #fff; }
.pmc-heatmap-cell.pmc-heatmap-l4 { background: #6f9466; color: #fff; }
.pmc-heatmap-tot {
  text-align: right; font-size: 11.5px; font-weight: 700;
  color: var(--mc-text-mid, #5e594e);
}
.pmc-heatmap-legend {
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
  font-size: 10.5px; color: var(--mc-text-light, #9a9384);
  margin: 6px 0 4px;
}
.pmc-heatmap-legend .pmc-heatmap-cell {
  width: 18px; height: 14px; min-width: 18px;
  border-radius: 2px; margin-left: 4px;
}
.pmc-heatmap-legend-note { margin-left: 6px; font-style: italic; }

.pmc-trend-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 8px 0 6px;
}
.pmc-trend-stats > div {
  background: var(--mc-bg-warm); border-radius: 6px; padding: 6px 8px;
  text-align: center;
}
.pmc-trend-stats span {
  display: block; font-size: 10px; text-transform: uppercase;
  color: var(--mc-text-light, #9a9384); letter-spacing: .04em; margin-bottom: 2px;
}
.pmc-trend-stats b {
  font-size: 15px; color: var(--mc-text-dark, #3a3730); font-weight: 700;
}

.pmc-runway { display: flex; flex-direction: column; gap: 7px; margin: 6px 0 8px; }
.pmc-runway-row {
  display: grid; grid-template-columns: 78px 1fr 140px;
  gap: 9px; align-items: center;
}
.pmc-runway-lbl {
  font-size: 11.5px; font-weight: 600; color: var(--mc-text-mid, #5e594e);
}
.pmc-runway-track {
  position: relative; flex: 1; height: 16px;
  background: var(--mc-bg-subtle); border-radius: 5px; overflow: hidden;
}
.pmc-runway-fill {
  display: block; height: 100%; border-radius: 5px;
  transition: width .25s ease;
}
.pmc-runway-fill.pmc-runway-sage  { background: linear-gradient(90deg, #9bb795, #7c9a76); }
.pmc-runway-fill.pmc-runway-amber { background: linear-gradient(90deg, #e2c890, #c89a4f); }
.pmc-runway-fill.pmc-runway-rose  { background: linear-gradient(90deg, #d8a8a8, #b06b6b); }
.pmc-runway-over {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 10.5px; font-weight: 700; color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,.25);
}
.pmc-runway-val {
  font-size: 11.5px; color: var(--mc-text-mid, #6f6a5e); text-align: right;
}
.pmc-runway-pct { color: var(--mc-text-light, #9a9384); }
.pmc-runway-summary {
  margin: 8px 0 4px; padding: 8px 10px;
  background: var(--mc-bg-warm); border-left: 3px solid #c4b8a0; border-radius: 4px;
  font-size: 12.5px; color: var(--mc-text-mid, #5e594e); line-height: 1.45;
}
.pmc-runway-summary b { color: var(--mc-text-dark, #3a3730); font-weight: 700; }

@media (max-width: 720px) {
  .pmc-heatmap-row { grid-template-columns: 96px repeat(7, 1fr) 40px; }
  .pmc-heatmap-name { font-size: 10.5px; }
  .pmc-trend-stats { grid-template-columns: repeat(2, 1fr); }
  .pmc-runway-row { grid-template-columns: 64px 1fr 110px; gap: 6px; }
}
/* END_OF_S177_DWP6_CSS */

/* ═══════════════════════════════════════════════════════
   PMC s178 — D-WP7: instroom-cliëntreis + herkomst + clientzorg-noshow + doorlooptijd
   (override-blok ná s177 CSS — geen drift met s164-base styles)
   ═══════════════════════════════════════════════════════ */
/* Cliëntreis-stroomdiagram */
.pmc-flow {
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 4px;
  margin: 6px 0 10px;
}
.pmc-flow-stage {
  display: flex; align-items: center; flex: 1 1 0; min-width: 84px; gap: 4px;
}
.pmc-flow-card {
  position: relative; flex: 1 1 auto; padding: 10px 8px 8px;
  border-radius: 8px; background: var(--mc-bg-subtle); color: var(--mc-text-dark, #3a3730);
  border: 1px solid #e7e2d3; text-align: center; min-width: 0;
  overflow: hidden;
}
.pmc-flow-card::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 3px;
  width: var(--pmc-stage-fill, 100%);
  background: linear-gradient(90deg, #b8cdb0, #7c9a76);
}
.pmc-flow-uit .pmc-flow-card { background: #efece4; border-color: #ddd6c4; }
.pmc-flow-uit .pmc-flow-card::before {
  background: linear-gradient(90deg, #d8d2bf, #a89e84);
}
.pmc-flow-n { font-size: 22px; font-weight: 700; line-height: 1; }
.pmc-flow-lbl { font-size: 11.5px; font-weight: 600; margin-top: 4px; }
.pmc-flow-sub { font-size: 10px; color: var(--mc-text-light, #9a9384); margin-top: 2px; }
.pmc-flow-arrow {
  color: #b8b0a0; font-size: 18px; font-weight: 700; flex: 0 0 auto;
  padding: 0 2px;
}
.pmc-flow-conv {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px;
  margin: 4px 0 8px;
}
.pmc-flow-conv > div {
  background: #faf8f2; border: 1px solid #ece8da; border-radius: 6px;
  padding: 6px 8px; display: flex; flex-direction: column; gap: 2px;
}
.pmc-flow-conv span { font-size: 10.5px; color: var(--mc-text-light, #9a9384); }
.pmc-flow-conv b { font-size: 15px; font-weight: 700; color: var(--mc-text-dark, #3a3730); }

/* Herkomst-attributie — bron-bars (vergelijkbaar met barRow maar met label-zijde) */
.pmc-bron { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; }
.pmc-bron-row {
  display: grid; grid-template-columns: 150px 1fr 130px; gap: 8px; align-items: center;
  font-size: 12.5px;
}
.pmc-bron-lbl {
  font-weight: 600; color: var(--mc-text-dark, #3a3730);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pmc-bron-row.pmc-bron-onbekend .pmc-bron-lbl {
  font-style: italic; color: var(--mc-text-light, #9a9384); font-weight: 500;
}
.pmc-bron-track {
  background: var(--mc-bg-subtle); border-radius: 4px; height: 10px; overflow: hidden;
}
.pmc-bron-track > i {
  display: block; height: 100%; background: linear-gradient(90deg, #b8cdb0, #7c9a76);
  border-radius: 4px;
}
.pmc-bron-row.pmc-bron-onbekend .pmc-bron-track > i {
  background: linear-gradient(90deg, #d8d2bf, #a89e84);
}
.pmc-bron-vals { font-size: 11.5px; color: var(--mc-text-light, #9a9384); text-align: right; }
.pmc-bron-vals b { color: var(--mc-text-dark, #3a3730); font-weight: 700; margin-right: 6px; }
.pmc-bron-conv { font-style: italic; }

/* No-show-week — 7 dag-tegels naast elkaar, 5-level amber-rose-schaal */
.pmc-noshow-week {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin: 6px 0 8px;
}
.pmc-noshow-day {
  border-radius: 6px; padding: 8px 4px; text-align: center;
  background: var(--mc-bg-subtle); transition: transform .1s ease;
}
.pmc-noshow-day:hover { transform: scale(1.04); }
.pmc-noshow-day.pmc-noshow-l0 { background: var(--mc-bg-subtle); color: var(--mc-text-light, #9a9384); }
.pmc-noshow-day.pmc-noshow-l1 { background: #faf2e1; color: #806b3c; }
.pmc-noshow-day.pmc-noshow-l2 { background: #f0e0b4; color: #6f5928; }
.pmc-noshow-day.pmc-noshow-l3 { background: #e6c890; color: #543f1a; }
.pmc-noshow-day.pmc-noshow-l4 { background: #c89a4f; color: #fff; }
.pmc-noshow-day-lbl { font-size: 10.5px; font-weight: 600; letter-spacing: .04em; }
.pmc-noshow-day-pct { font-size: 15px; font-weight: 700; margin-top: 2px; line-height: 1; }
.pmc-noshow-day-sub { font-size: 9.5px; margin-top: 2px; opacity: .85; }

/* Cohort/Doorlooptijd-histogram */
.pmc-cohort { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 8px; }
.pmc-cohort-bar {
  display: grid; grid-template-columns: 96px 1fr 48px; gap: 8px; align-items: center;
  font-size: 12.5px;
}
.pmc-cohort-lbl { font-weight: 600; color: var(--mc-text-dark, #3a3730); }
.pmc-cohort-track {
  background: var(--mc-bg-subtle); border-radius: 4px; height: 12px; overflow: hidden;
}
.pmc-cohort-track > i {
  display: block; height: 100%;
  background: linear-gradient(90deg, #b8cdb0, #7c9a76);
  border-radius: 4px;
}
.pmc-cohort-val { font-weight: 700; color: var(--mc-text-dark, #3a3730); text-align: right; }

/* Sub-header binnen een facet (gedeeld over D-WP7-facetten) */
.pmc-facet-sub {
  margin: 10px 0 4px; font-size: 11.5px; font-weight: 600;
  color: var(--mc-text-light, #9a9384); text-transform: uppercase; letter-spacing: .05em;
}

@media (max-width: 720px) {
  .pmc-flow { gap: 2px; }
  .pmc-flow-stage { min-width: 70px; }
  .pmc-flow-n { font-size: 18px; }
  .pmc-flow-lbl { font-size: 10.5px; }
  .pmc-flow-arrow { font-size: 14px; }
  .pmc-bron-row { grid-template-columns: 100px 1fr 96px; font-size: 11.5px; }
  .pmc-bron-vals { font-size: 10.5px; }
  .pmc-noshow-day { padding: 6px 2px; }
  .pmc-noshow-day-pct { font-size: 13px; }
  .pmc-cohort-bar { grid-template-columns: 72px 1fr 36px; font-size: 11.5px; }
}
/* END_OF_S178_DWP7_CSS */

/* ═══════════════════════════════════════════════════════
   D-WP8 (s179) — Financieel-domein + Team/Ontwikkeling
   Cockpit-CSS, mid-file (geen tail-sentinel-risico).
   ═══════════════════════════════════════════════════════ */

/* ── Financieel / Stand — drie periode-tegels + run-rate + forecast ── */
.pmc-fin-tiles {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 10px;
  margin: 10px 0 14px;
}
.pmc-fin-tile {
  background: var(--mc-bg-warm);
  border: 1px solid #ece5d2;
  border-radius: 8px;
  padding: 12px 14px;
  display: flex; flex-direction: column; gap: 4px;
}
.pmc-fin-tile-strong {
  background: var(--mc-bg-hover);
  border-color: #ddd0a6;
}
.pmc-fin-tile-lbl {
  font-size: 11px; color: #8a8270; text-transform: uppercase; letter-spacing: 0.04em;
}
.pmc-fin-tile-val {
  font-size: 20px; color: #2d3026; font-weight: 600;
}
.pmc-fin-tile-sub {
  font-size: 11px; color: #8a8270;
}
.pmc-fin-mrr {
  background: var(--mc-bg-elevated);
  border: 1px solid #ece5d2;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
}
.pmc-fin-mrr-head {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-bottom: 6px;
}
.pmc-fin-mrr-lbl { font-size: 12px; color: #5b6053; }
.pmc-fin-mrr-pct { font-size: 18px; font-weight: 600; color: #2d3026; }
.pmc-fin-mrr-bar {
  height: 8px; background: #ece5d2; border-radius: 4px; overflow: hidden;
}
.pmc-fin-mrr-bar > i {
  display: block; height: 100%; background: #7c9a76; transition: width 0.4s ease;
}
.pmc-fin-mrr-sage .pmc-fin-mrr-bar > i { background: #7c9a76; }
.pmc-fin-mrr-amber .pmc-fin-mrr-bar > i { background: #c89a4f; }
.pmc-fin-mrr-rose .pmc-fin-mrr-bar > i { background: #b06b6b; }
.pmc-fin-mrr-sub {
  font-size: 11.5px; color: #6b6f5f; margin-top: 6px;
}
.pmc-fin-fc {
  background: var(--mc-bg-warm);
  border: 1px dashed #ddd0a6;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
}
.pmc-fin-fc-head { font-size: 12px; color: #5b6053; margin-bottom: 6px; }
.pmc-fin-fc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 8px;
  align-items: baseline;
  padding: 3px 0;
  font-size: 12.5px;
}
.pmc-fin-fc-row > b { font-size: 15px; color: #2d3026; font-weight: 600; }
.pmc-fin-fc-meta { font-size: 10.5px; color: #8a8270; }

/* ── Financieel / Openstaand — aging-stack-bar per behandelaar ── */
.pmc-fin-aging-legend {
  display: flex; flex-wrap: wrap; gap: 14px;
  padding: 6px 0 10px;
  font-size: 11.5px; color: #5b6053;
}
.pmc-fin-aging-legend span { display: inline-flex; align-items: center; gap: 6px; }
.pmc-fin-aging-sw {
  display: inline-block; width: 12px; height: 12px; border-radius: 3px;
}
.pmc-fin-aging-b1 { background: #7c9a76; }
.pmc-fin-aging-b2 { background: #c89a4f; }
.pmc-fin-aging-b3 { background: #b06b6b; }
.pmc-fin-aging-row {
  display: grid;
  grid-template-columns: 140px 1fr 220px;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid #f0ebe0;
  font-size: 12.5px;
}
.pmc-fin-aging-row:last-child { border-bottom: 0; }
.pmc-fin-aging-track {
  display: flex; height: 12px; background: var(--mc-bg-subtle); border-radius: 4px; overflow: hidden;
}
.pmc-fin-aging-track > i {
  display: block; height: 100%;
}

/* ── Team / Ontwikkeling — teamgrid + stagiair-rij ── */
.pmc-team-grid {
  display: flex; flex-direction: column; gap: 4px;
  margin: 8px 0 12px;
}
.pmc-team-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 10px;
  align-items: center;
  padding: 7px 10px;
  background: var(--mc-bg-warm);
  border: 1px solid #ece5d2;
  border-radius: 6px;
  font-size: 12.5px;
}
.pmc-team-name { font-weight: 600; color: #2d3026; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pmc-team-role { font-size: 11px; color: #8a8270; text-transform: uppercase; letter-spacing: 0.03em; }
.pmc-team-cell { display: flex; flex-direction: column; gap: 2px; }
.pmc-team-cell > span { font-size: 10.5px; color: #8a8270; }
.pmc-team-cell > b { font-size: 12.5px; color: #2d3026; font-weight: 600; }
.pmc-stag-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.8fr;
  gap: 12px;
  align-items: center;
  padding: 9px 12px;
  background: var(--mc-bg-warm);
  border: 1px solid #ddd0a6;
  border-radius: 6px;
  margin-bottom: 5px;
  font-size: 12.5px;
}
.pmc-stag-name { font-weight: 600; color: #2d3026; }
.pmc-stag-meta { display: flex; flex-direction: column; gap: 2px; font-size: 11px; }
.pmc-stag-meta > span { color: #8a8270; }
.pmc-stag-meta > b { color: #2d3026; font-size: 12.5px; }
.pmc-stag-bar { display: flex; flex-direction: column; gap: 3px; }
.pmc-stag-bar-track {
  height: 8px; background: #ece5d2; border-radius: 4px; overflow: hidden;
}
.pmc-stag-bar-fill { display: block; height: 100%; transition: width 0.4s ease; }
.pmc-stag-bar-sage  { background: #7c9a76; }
.pmc-stag-bar-amber { background: #c89a4f; }
.pmc-stag-bar-rose  { background: #b06b6b; }
.pmc-stag-bar-val   { font-size: 11px; color: #6b6f5f; }

@media (max-width: 720px) {
  .pmc-fin-tiles { grid-template-columns: 1fr; }
  .pmc-fin-aging-row { grid-template-columns: 1fr; gap: 4px; }
  .pmc-team-row { grid-template-columns: 1fr 1fr; }
  .pmc-stag-row { grid-template-columns: 1fr; gap: 6px; }
}
/* END_OF_S179_DWP8_CSS */

/* ═══════════════════════════════════════════════════════
   s180 D-WP8-rest — stagiair-spoor v2 (schemavelden)
   Verbreedt de s179-stagiair-rij met 4 schemavelden + status-badge.
   ═══════════════════════════════════════════════════════ */
.pmc-stag-row-v2 {
  display: block; /* override de 3-koloms s179-grid */
  padding: 10px 12px;
}
.pmc-stag-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.pmc-stag-row-v2 .pmc-stag-name { font-size: 13px; }
.pmc-stag-missing {
  font-size: 10.5px;
  font-weight: 600;
  color: #8b5e1e;
  background: #f6e8c8;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.pmc-stag-complete {
  font-size: 10.5px;
  font-weight: 600;
  color: #4d6b48;
  background: #e3ece0;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.pmc-stag-fields {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}
.pmc-stag-field {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.pmc-stag-field > span {
  font-size: 10.5px;
  color: #8a8270;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pmc-stag-field > b {
  font-size: 12.5px;
  color: #2d3026;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pmc-stag-days {
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 6px;
  border-radius: 4px;
  margin-left: 2px;
  white-space: nowrap;
}
.pmc-stag-days-sage  { background: #e3ece0; color: #4d6b48; }
.pmc-stag-days-amber { background: #f6e8c8; color: #8b5e1e; }
.pmc-stag-days-rose  { background: #f1d8d8; color: #844040; }

@media (max-width: 720px) {
  .pmc-stag-fields { grid-template-columns: repeat(2, 1fr); }
}
/* END_OF_S180_STAGIAIR_CSS */

/* ═══════════════════════════════════════════════════════════════════════
   s181 D-WP8 — SEIZOENSLENS (jaar-op-jaar overlays)
   Toggle in cockpit-header + overlay-blokken voor bezetting/Trend,
   financieel/Stand en financieel/Herkomst. Sage/amber/rose-paletten
   matchen de bestaande pmc-*-tokens. Geen extra dependencies.
   ═══════════════════════════════════════════════════════════════════════ */

/* Toggle-knop in cockpit-header naast de "Mijn werk / Praktijk"-segmented */
.pmc-season-btn {
  background: #f4eedd;
  color: #6d6043;
  border: 1px solid #d9cea7;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 120ms ease, border-color 120ms ease;
}
.pmc-season-btn:hover { background: #ede4c5; border-color: #c6b986; }
.pmc-season-btn.active {
  background: #d2c280;
  border-color: #a89a55;
  color: #3d3618;
}

/* Overlay-blok per facet — staat onder de basis-render */
.pmc-season-block {
  margin-top: 18px;
  padding: 14px 16px;
  border: 1px dashed #c9bf94;
  border-radius: var(--r); /* s262 DES-5 */
  background: linear-gradient(180deg, rgba(244, 238, 221, .55) 0%, rgba(244, 238, 221, 0) 100%);
}
.pmc-season-block-empty { background: rgba(244, 238, 221, .35); }
.pmc-season-head {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  color: #6d6043;
  margin-bottom: 10px;
}
.pmc-season-note {
  margin-top: 8px;
  color: #7a7159;
  font-style: italic;
}

/* Δ%-badges (sage = stijging, amber = stabiel, rose = daling, taupe = onbepaald) */
.pmc-season-delta {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
}
.pmc-season-delta-sage  { background: #dfe7d5; color: #4a6037; }
.pmc-season-delta-amber { background: #f3e7c6; color: #7a5e1f; }
.pmc-season-delta-rose  { background: #f1d8d8; color: #844040; }
.pmc-season-delta-taupe { background: #ece8db; color: #6c6655; }
.pmc-season-delta-none  { background: transparent; color: #9a9081; font-weight: 500; }

/* Tegels — 1 of 2 koloms naast elkaar */
.pmc-season-tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 4px;
}
.pmc-season-tile {
  background: #fff;
  border: 1px solid #ece5cf;
  border-radius: 8px;
  padding: 10px 12px;
}
.pmc-season-tile-lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #8a7f63;
  margin-bottom: 4px;
}
.pmc-season-tile-val {
  font-size: 14px;
  font-weight: 600;
  color: #3d3618;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* 12-maand mini-bars (sparkline) */
.pmc-season-spark {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  align-items: end;
  height: 70px;
  margin: 8px 0 4px;
  padding: 4px 2px;
  background: rgba(255,255,255,.4);
  border-radius: 6px;
}
.pmc-season-spark-col {
  position: relative;
  height: 100%;
  display: flex;
  align-items: end;
  justify-content: center;
}
.pmc-season-spark-col > i {
  display: block;
  width: 70%;
  background: #b9b079;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.pmc-season-spark-col-hl > i {
  background: #6d6043;
}
.pmc-season-axis {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  font-size: 10px;
  color: #8a7f63;
  text-align: center;
  margin-bottom: 10px;
}

/* Heatmap — behandelaar × maand (Herkomst) */
.pmc-season-hm {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: 4px 0 6px;
}
.pmc-season-hm-row {
  display: grid;
  grid-template-columns: 140px repeat(12, minmax(28px, 1fr)) 90px;
  gap: 3px;
  align-items: center;
}
.pmc-season-hm-header {
  font-size: 10px;
  color: #8a7f63;
  font-weight: 600;
  text-transform: uppercase;
}
.pmc-season-hm-name {
  font-size: 12px;
  color: #3d3618;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pmc-season-hm-cell {
  height: 22px;
  border-radius: 4px;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #3d3618;
  background: var(--mc-bg-hover);
}
.pmc-season-hm-l0 { background: var(--mc-bg-hover); color: #c8bf9a; }
.pmc-season-hm-l1 { background: #e7e1c1; color: #6d6043; }
.pmc-season-hm-l2 { background: #d5cb95; color: #3d3618; }
.pmc-season-hm-l3 { background: #b9b079; color: #fff; }
.pmc-season-hm-l4 { background: #8a7f4f; color: #fff; font-weight: 600; }
.pmc-season-hm-cell-lbl {
  height: 16px;
  text-align: center;
  font-size: 10px;
  color: #8a7f63;
  font-weight: 600;
}
.pmc-season-hm-tot {
  font-size: 12px;
  text-align: right;
  font-weight: 600;
  color: #3d3618;
}
.pmc-season-hm-row-shielded { opacity: .75; }
.pmc-season-hm-shielded {
  grid-column: 2 / span 12;
  font-size: 11px;
  font-style: italic;
  color: #8a7f63;
  background: #ede7d3;
  border-radius: 4px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* "Nog niet beschikbaar"-melding binnen overlay-blok */
.pmc-empty-na {
  font-style: italic;
  color: #8a7f63;
  padding: 8px 4px;
}

/* Mobile: kolom-grids stapelen, heatmap krimpt */
@media (max-width: 720px) {
  .pmc-season-btn { margin-left: 0; margin-top: 8px; width: 100%; justify-content: center; }
  .pmc-season-tiles { grid-template-columns: 1fr; }
  .pmc-season-hm-row { grid-template-columns: 90px repeat(12, minmax(20px, 1fr)) 70px; }
  .pmc-season-hm-name { font-size: 11px; }
  .pmc-season-hm-cell { height: 18px; font-size: 9px; }
}
/* END_OF_S181_SEIZOENSLENS_CSS */

/* ═══════════════════════════════════════════════════════
   COCKPIT — D-WP8-rest (c): Compliance/Concentratie-verfijning (s182)
   ═══════════════════════════════════════════════════════ */
/* Wrapper rond sectie B (Financier) en sectie C (Verwijzer); zorgt voor
   visuele scheiding van sectie A (Behandelaar) die niet in een wrapper zit. */
.pmc-conc-section {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px dashed #e2dcc9;
}
/* Sectie-koptekst — variant op .pmc-facet-sub met iets meer adem. */
.pmc-conc-section-head {
  margin-top: 0;
  margin-bottom: 10px;
  font-weight: 600;
  color: #3d3618;
  display: flex;
  align-items: center;
  gap: 6px;
}
.pmc-conc-section-head::before {
  content: "";
  width: 4px;
  height: 14px;
  background: #c89a4f;
  border-radius: 2px;
  display: inline-block;
}
.pmc-conc-section .pmc-conc-section-head::before { background: #7c9a76; }
.pmc-conc-section + .pmc-conc-section .pmc-conc-section-head::before { background: #b08e58; }
/* Lege-staat binnen een concentratie-sectie — italic + lichte achtergrond. */
.pmc-conc-empty {
  font-style: italic;
  color: #8a7f63;
  padding: 8px 10px;
  background: #f7f3e6;
  border-radius: 6px;
  border-left: 3px solid #d2c280;
}
/* Milde concentratie-disclaimer — tussen "warn" (rood) en "default" (grijs)
   in: amber, niet alarmerend maar wel aandachts-vragend. */
.pmc-facet-note.pmc-conc-mild {
  color: #8c6a32;
  background: #fdf4e3;
  border-left: 3px solid #c89a4f;
  padding: 6px 10px;
  border-radius: 4px;
  margin-top: 6px;
}
/* END_OF_S182_CONCENTRATIE_CSS */

/* ═══════════════════════════════════════════════════════
   s184 — Kennisbank unified-editor: border-left in scope-kleur
   zodat persoonlijk vs praktijklink bij verticale scan direct
   herkenbaar is. De badge naast de titel is behouden voor
   leesbaarheid; het streepje is de snelle-scan-laag.
   ═══════════════════════════════════════════════════════ */
.kb-card-personal { border-left: 3px solid #a78bfa !important; }
.kb-card-practice { border-left: 3px solid #38bdf8 !important; }
/* END_OF_S184_KB_CARD_BORDER */

/* ═══════════════════════════════════════════════════════
   DASHBOARD 3.0 — One-glance layout
   ═══════════════════════════════════════════════════════ */
.dash3 {
  padding: 28px 32px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Header */
.dash3-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 18px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.dash3-greet {
  font-size: 13px;
  color: var(--mc-text-light);
  margin-bottom: 2px;
}
.dash3-name {
  font-family: var(--mc-serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--navy);
  line-height: 1.1;
}
.dash3-date {
  font-size: 13px;
  color: var(--mc-text-light);
  margin-top: 4px;
}
.dash3-controls { display: flex; gap: 10px; align-items: center; }

/* KPI strip */
.dash3-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.dash3-kpi {
  --kpi-color: var(--navy, #1e3a5f);
  background: var(--mc-bg-elevated);
  border: 1px solid var(--mc-border-warm);
  border-radius: 12px;
  padding: 14px 16px;
  position: relative;
  overflow: hidden;
}
.dash3-kpi::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--kpi-color);
}
.dash3-kpi-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--mc-text-light);
  font-weight: 600;
  margin-bottom: 4px;
}
.dash3-kpi-val {
  font-family: var(--mc-serif);
  font-size: 28px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--kpi-color);
}
.dash3-kpi-sub {
  font-size: 11.5px;
  color: var(--mc-text-light);
  margin-top: 4px;
}
.dash3-trend.up { color: var(--mc-success); font-weight: 600; } /* s261 DES-3 */
.dash3-trend.down { color: var(--error, #a4271c); font-weight: 600; }
.dash3-trend.flat { color: var(--mc-text-light); }

/* Main row: chart + side stack */
.dash3-main {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 16px;
}
.dash3-side-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* Cards */
.dash3-card {
  background: var(--mc-bg-elevated);
  border: 1px solid var(--mc-border-warm);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--mc-shadow-sm, 0 1px 2px rgba(30,58,95,0.04));
}
.dash3-card-head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--mc-border-warm);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: linear-gradient(180deg, rgba(30,58,95,0.02) 0%, transparent 100%);
}
.dash3-card-title {
  font-family: var(--mc-serif);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--navy);
}

/* Chart */
.dash3-chart-card {
  display: flex;
  flex-direction: column;
}
.dash3-chart-wrap {
  padding: 12px 14px 8px;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.dash3-chart-legend {
  font-size: 11.5px;
  color: var(--mc-text-mid);
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash3-legend-bar,
.dash3-legend-line {
  display: inline-block;
  margin-right: 4px;
  vertical-align: middle;
}
.dash3-legend-bar {
  width: 10px; height: 10px;
  background: var(--navy);
  opacity: 0.78;
  border-radius: 2px;
}
.dash3-legend-line {
  width: 14px; height: 2px;
  background: var(--mc-admin, #92551a);
  border-radius: 1px;
}

/* Today list */
.dash3-today-list { padding: 4px 0; }
.dash3-today-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--mc-border-warm);
  cursor: pointer;
  transition: background 100ms;
}
.dash3-today-row:last-child { border-bottom: none; }
.dash3-today-row:hover { background: var(--mc-bg-subtle); }
.dash3-today-time {
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  font-variant-numeric: tabular-nums;
  flex: 0 0 44px;
}
.dash3-today-name {
  flex: 1;
  font-size: 13px;
  color: var(--mc-text-warm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash3-today-status { flex: 0 0 auto; }

/* Quick actions */
.dash3-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  padding: 10px;
}
.dash3-action {
  appearance: none;
  border: 1px solid var(--mc-border-warm);
  background: var(--mc-bg-elevated);
  padding: 9px 10px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--mc-text-warm);
  cursor: pointer;
  text-align: left;
  font-family: var(--mc-sans);
  transition: background 100ms, border-color 100ms, color 100ms;
}
.dash3-action:hover {
  background: var(--mc-navy-soft);
  border-color: var(--navy);
  color: var(--navy);
}
.dash3-action-warn {
  background: var(--mc-warn-soft, #fff4e0);
  border-color: rgba(146,86,10,0.20);
  color: var(--mc-admin-strong, #6e3f15);
}
.dash3-action-warn:hover {
  background: rgba(146,86,10,0.16);
  border-color: var(--mc-admin, #92551a);
  color: var(--mc-admin-strong, #6e3f15);
}

/* Bottom row: attention + activity + portal-activity + taken (s19, s136 Taken-kaart) */
.dash3-bottom {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); /* s136 Taken-kaart — 4e kaart */
  gap: 16px;
}

/* Attention list */
.dash3-attn-list { padding: 4px 0; }
.dash3-attn-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--mc-border-warm);
  cursor: pointer;
  transition: background 100ms;
}
.dash3-attn-row:last-child { border-bottom: none; }
.dash3-attn-row:hover { background: var(--mc-bg-subtle); }
.dash3-attn-icon {
  font-size: 18px;
  width: 30px;
  height: 30px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  flex: 0 0 auto;
}
.dash3-attn-orange { background: var(--mc-warn-soft); }
.dash3-attn-red { background: var(--error-soft, #fbe5e2); }
.dash3-attn-navy { background: var(--mc-navy-soft); }
.dash3-attn-teal { background: var(--mc-teal-soft, #d9f0ec); }
.dash3-attn-text {
  flex: 1;
  font-size: 12.5px;
  color: var(--mc-text-warm);
  line-height: 1.4;
}
.dash3-attn-go {
  flex: 0 0 auto;
  padding: 3px 8px;
  font-size: 14px;
}

/* LK14 — aandacht-triage: Nu-kop, categorie-secties, snooze-knoppen, zachte strook (DES-04-tokens) */
.dash3-attn-sechead { padding: 8px 16px 2px; font-size: var(--fs-1); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mc-text-light, #94a3b8); }
.dash3-attn-sec summary { display: flex; align-items: center; gap: 8px; padding: 9px 16px; font-size: var(--fs-2); font-weight: 600; cursor: pointer; color: var(--mc-text-warm); border-top: 1px solid var(--mc-border-warm); list-style: none; }
.dash3-attn-sec summary::-webkit-details-marker { display: none; }
.dash3-attn-sec summary::before { content: '▸'; font-size: var(--fs-1); transition: transform 120ms; }
.dash3-attn-sec[open] summary::before { transform: rotate(90deg); }
.dash3-attn-snz { flex: 0 0 auto; padding: 3px 6px; font-size: var(--fs-2); opacity: .55; }
.dash3-attn-row:hover .dash3-attn-snz { opacity: 1; }
.dash3-attn-snoozed-note { padding: 8px 16px; font-size: var(--fs-2); color: var(--mc-text-light, #94a3b8); border-top: 1px solid var(--mc-border-warm); }
.dash3-attn-softstrip { border-top: 1px dashed var(--mc-border-warm); background: var(--mc-bg-subtle); }
.dash3-attn-softstrip .dash3-attn-row { border-bottom: none; padding: 8px 16px; }
.dash3-attn-softstrip .dash3-attn-text { color: var(--mc-text-light, #64748b); }

/* Activity list */
.dash3-activity-list { padding: 4px 0; }
.dash3-activity-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--mc-border-warm);
  cursor: pointer;
  transition: background 100ms;
}
.dash3-activity-row:last-child { border-bottom: none; }
.dash3-activity-row:hover { background: var(--mc-bg-subtle); }
.dash3-activity-icon {
  font-size: 16px;
  flex: 0 0 24px;
  text-align: center;
}
.dash3-activity-text { flex: 1; min-width: 0; }
.dash3-activity-primary {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mc-text-warm);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dash3-activity-secondary {
  font-size: 11px;
  color: var(--mc-text-light);
  margin-top: 1px;
}

/* s136 Taken-kaart: 4 kaarten in de onderste rij → 2×2 op middelgrote schermen */
@media (max-width: 1400px) and (min-width: 1101px) {
  .dash3-bottom { grid-template-columns: 1fr 1fr; }
}

/* Responsive: stapelen op smal */
@media (max-width: 1100px) {
  .dash3-main { grid-template-columns: 1fr; }
  .dash3-bottom { grid-template-columns: 1fr; }
  .dash3-kpis { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .dash3 { padding: 18px 16px 30px; }
  .dash3-actions { grid-template-columns: 1fr; }
  .dash3-kpis { grid-template-columns: 1fr; }
}

/* ═══ s397 fase 2 — modulair dashboard: 12-koloms kaarten-zone (dash-widgets.js) ═══
   #mc-dw-grid wordt post-render vóór .dash3-bottom geïnjecteerd en krijgt alle
   kaarten-zone-widgets (losse kaarten + de oude dash3-bottom-kaarten). Sizes:
   dash-w-S = span 4, dash-w-M = span 6, dash-w-L = span 12. De hero-zone
   (header/KPI's/dash3-main/eod) blijft erbuiten. .dash3 is flex-column met gap,
   dus het (leeggetrokken) .dash3-bottom en een lege tc-dash worden weggewerkt. */
#mc-dw-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 16px;
}
#mc-dw-grid > * { min-width: 0; margin-bottom: 0 !important; } /* inline margin-bottom:14px van de losse kaarten → grid-gap regelt de spacing */
#mc-dw-grid > .dash-w-S { grid-column: span 4; }
#mc-dw-grid > .dash-w-M { grid-column: span 6; }
#mc-dw-grid > .dash-w-L { grid-column: span 12; }
#mc-dw-grid > #tc-dash:empty { display: none; } /* lege teamchat-container = geen leeg grid-gat */
.dash3-bottom:empty { display: none; } /* na de verhuizing leeg — geen dubbele flex-gap */
@media (max-width: 900px) {
  /* mobiele fallback: alles volle breedte */
  #mc-dw-grid > .dash-w-S, #mc-dw-grid > .dash-w-M { grid-column: span 12; }
}
/* s397 fase 3 — drag-and-drop feedback */
.dash3-card-head[draggable="true"] { cursor: grab; }
.mc-dw-drop { outline: 2px dashed var(--mc-teal, #0d9488); outline-offset: 2px; }

/* ═══ Dashboard 3.0 — therapist-suffix in praktijk-mode ═══ */
.dash3-today-ther {
  font-size: 11px;
  color: var(--mc-text-light);
  font-weight: 400;
  margin-left: 4px;
}

/* ═══ Dashboard 3.0 — 3-koloms KPI-strip in praktijk-mode ═══ */
.dash3-kpis.dash3-kpis-3 {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1100px) {
  .dash3-kpis.dash3-kpis-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .dash3-kpis.dash3-kpis-3 { grid-template-columns: 1fr; }
}

/* ── Berichten chat-layout (admin app) ───────────────────────── */
body.mc-shell-active .msg-chat-wrap{display:grid;grid-template-columns:320px 1fr;gap:0;height:calc(100vh - 200px);height:calc(100dvh - 200px);min-height:500px;background:#fff;border:1px solid var(--mc-border-warm);border-radius:12px;overflow:hidden}
body.mc-shell-active .msg-chat-list{border-right:1px solid var(--mc-border-warm);background:var(--mc-bg-elevated);overflow-y:auto;display:flex;flex-direction:column}
body.mc-shell-active .msg-chat-list-head{padding:12px 14px;border-bottom:1px solid var(--mc-border-warm);font-size:12px;font-weight:700;color:var(--mc-text-mid);text-transform:uppercase;letter-spacing:.05em;display:flex;justify-content:space-between;align-items:center;background:#fff;position:sticky;top:0;z-index:2}
body.mc-shell-active .msg-chat-conv{padding:12px 14px;cursor:pointer;border-bottom:1px solid rgba(0,0,0,.05);transition:background .12s;display:flex;gap:10px;align-items:flex-start}
body.mc-shell-active .msg-chat-conv:hover{background:rgba(30,58,95,.04)}
body.mc-shell-active .msg-chat-conv.active{background:rgba(30,58,95,.08);border-left:3px solid var(--mc-navy);padding-left:11px}
body.mc-shell-active .msg-chat-conv.unread{background:#fffbeb}
body.mc-shell-active .msg-chat-conv-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--mc-navy),#0f2540);color:#fff;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:600;flex-shrink:0}
body.mc-shell-active .msg-chat-conv-body{flex:1;min-width:0}
body.mc-shell-active .msg-chat-conv-name{font-weight:600;font-size:13px;color:var(--mc-text-dark);display:flex;justify-content:space-between;gap:6px;margin-bottom:2px}
body.mc-shell-active .msg-chat-conv-time{font-size:10.5px;color:var(--mc-text-light);font-weight:400;flex-shrink:0}
body.mc-shell-active .msg-chat-conv-preview{font-size:12px;color:var(--mc-text-mid);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:4px}
body.mc-shell-active .msg-chat-conv-badge{display:inline-block;background:var(--mc-danger);color:#fff;border-radius:9px;min-width:18px;height:18px;font-size:10.5px;font-weight:700;text-align:center;line-height:18px;padding:0 5px;margin-left:auto;flex-shrink:0}
body.mc-shell-active .msg-chat-thread{display:flex;flex-direction:column;height:100%;background:#fafaf7}
body.mc-shell-active .msg-chat-thread-head{padding:14px 18px;border-bottom:1px solid var(--mc-border-warm);background:#fff;display:flex;justify-content:space-between;align-items:center;gap:10px}
body.mc-shell-active .msg-chat-thread-name{font-size:15px;font-weight:600;color:var(--mc-text-dark)}
body.mc-shell-active .msg-chat-thread-meta{font-size:11.5px;color:var(--mc-text-mid)}
body.mc-shell-active .msg-chat-msgs{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:10px}
body.mc-shell-active .msg-chat-empty{display:flex;align-items:center;justify-content:center;height:100%;color:var(--mc-text-light);font-size:13px;font-style:italic;text-align:center;padding:30px}
body.mc-shell-active .msg-chat-bubble-row{display:flex;flex-direction:column;max-width:75%;animation:msgIn .25s ease}
body.mc-shell-active .msg-chat-bubble-row.from-therapist{align-self:flex-end}
body.mc-shell-active .msg-chat-bubble-row.from-client{align-self:flex-start}
body.mc-shell-active .msg-chat-bubble{padding:10px 14px;border-radius:14px;font-size:13.5px;line-height:1.5;white-space:pre-wrap;word-wrap:break-word;box-shadow:0 1px 2px rgba(0,0,0,.04)}
body.mc-shell-active .msg-chat-bubble-row.from-therapist .msg-chat-bubble{background:var(--mc-navy);color:#fff;border-bottom-right-radius:4px}
body.mc-shell-active .msg-chat-bubble-row.from-client .msg-chat-bubble{background:#fff;color:var(--mc-text-dark);border:1px solid var(--mc-border-warm);border-bottom-left-radius:4px}
body.mc-shell-active .msg-chat-bubble-meta{font-size:10.5px;color:var(--mc-text-light);margin:4px 8px 0}
body.mc-shell-active .msg-chat-bubble-row.from-therapist .msg-chat-bubble-meta{text-align:right}
body.mc-shell-active .msg-chat-bubble-subject{font-size:11px;font-weight:600;color:var(--mc-text-mid);margin-bottom:4px;text-transform:uppercase;letter-spacing:.03em;padding:0 14px}
body.mc-shell-active .msg-chat-bubble-row.from-therapist .msg-chat-bubble-subject{text-align:right;color:var(--mc-navy)}
/* s158 — per-bericht actieknoppen (archiveren / verwijderen) in de chat-bubble */
body.mc-shell-active .msg-chat-bubble-act{border:none;background:transparent;cursor:pointer;font-size:11px;line-height:1;padding:0 2px;margin-left:3px;opacity:0;transition:opacity .12s}
body.mc-shell-active .msg-chat-bubble-row:hover .msg-chat-bubble-act{opacity:.5}
body.mc-shell-active .msg-chat-bubble-act:hover{opacity:1}
/* s32 Berichten input-wrap redesign: emoji-knop + zichtbare verzendknop + robuste textarea */
body.mc-shell-active .msg-chat-input-wrap{position:relative;border-top:1px solid var(--mc-border-warm);padding:12px;background:#fff;display:flex;gap:8px;align-items:flex-end}
body.mc-shell-active .msg-chat-emoji-btn{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:#f1f5f9;color:#475569;border:1px solid var(--mc-border-warm);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:20px;transition:background .12s,transform .12s,box-shadow .12s}
body.mc-shell-active .msg-chat-emoji-btn:hover:not(:disabled){background:#e2e8f0;transform:scale(1.05)}
body.mc-shell-active .msg-chat-emoji-btn:disabled{opacity:.4;cursor:not-allowed}
body.mc-shell-active .msg-chat-emoji-popover{position:absolute;bottom:60px;left:12px;display:grid;grid-template-columns:repeat(9,1fr);gap:4px;background:#fff;border:1px solid var(--mc-border-warm);border-radius:12px;padding:8px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:50;min-width:280px;max-width:340px}
body.mc-shell-active .msg-chat-emoji-pick{width:30px;height:30px;border:none;background:transparent;cursor:pointer;font-size:18px;border-radius:6px;padding:0;display:flex;align-items:center;justify-content:center;transition:background .1s}
body.mc-shell-active .msg-chat-emoji-pick:hover{background:#f1f5f9}
body.mc-shell-active .msg-chat-input{flex:1;resize:none;border:1.5px solid var(--mc-border-warm);border-radius:18px;padding:10px 14px;font-size:14px;line-height:1.45;min-height:42px;max-height:180px;overflow-y:auto;font-family:inherit;background:var(--mc-bg-elevated);outline:none;transition:border-color .12s,background .12s,box-shadow .12s;color:var(--mc-text-dark)}
body.mc-shell-active .msg-chat-input:focus{border-color:var(--mc-navy);background:#fff;box-shadow:0 0 0 3px rgba(30,58,95,.08)}
body.mc-shell-active .msg-chat-input:disabled{opacity:.6;background:#f8fafc;cursor:not-allowed}
body.mc-shell-active .msg-chat-send-btn{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:var(--mc-navy);color:#fff;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:600;box-shadow:0 2px 6px rgba(30,58,95,.25);transition:transform .12s,background .12s,box-shadow .12s;visibility:visible !important;opacity:1 !important}
body.mc-shell-active .msg-chat-send-btn:hover:not(:disabled){transform:scale(1.06);background:#0f2540;box-shadow:0 4px 10px rgba(30,58,95,.35)}
body.mc-shell-active .msg-chat-send-btn:active:not(:disabled){transform:scale(.95)}
body.mc-shell-active .msg-chat-send-btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none}
@media (max-width:520px){
  body.mc-shell-active .msg-chat-emoji-popover{grid-template-columns:repeat(6,1fr);min-width:auto;max-width:calc(100vw - 32px)}
}
body.mc-shell-active .msg-chat-status-bar{padding:8px 14px;background:#fffbeb;border-bottom:1px solid #fde68a;font-size:12px;color:#78350f;display:flex;align-items:center;gap:8px}
@keyframes msgIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

@media (max-width:768px){
  body.mc-shell-active .msg-chat-wrap{grid-template-columns:1fr;height:auto}
  body.mc-shell-active .msg-chat-list{height:auto;max-height:280px}
  body.mc-shell-active .msg-chat-thread{display:none;height:60vh}
  body.mc-shell-active .msg-chat-wrap.show-thread .msg-chat-list{display:none}
  body.mc-shell-active .msg-chat-wrap.show-thread .msg-chat-thread{display:flex}
}

/* ═══════════════════════════════════════════════════════════════════════
   Cross-browser polish (s19) — werkt op iOS Safari + Android Chrome +
   Firefox + Edge + Safari macOS. Geen runtime-impact, pure CSS.
   ═══════════════════════════════════════════════════════════════════════ */

/* iOS + Android: blue tap-flash uit op elke interactieve element */
button, a, .btn, [onclick], .clickable, .mc-dropdown-item,
input[type="button"], input[type="submit"], input[type="reset"] {
  -webkit-tap-highlight-color: transparent;
}

/* Android <Pie + iOS Safari oude versies: 300ms tap-delay weg */
button, .btn, a, [onclick] {
  touch-action: manipulation;
}

/* Keyboard-only focus-ring (verbergt focus-outline bij muis-klik) */
button:focus:not(:focus-visible),
a:focus:not(:focus-visible),
.btn:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible) {
  outline: none;
}
button:focus-visible,
a:focus-visible,
.btn:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 4px;
}
/* s258 A11Y-2: klikbare divs/spans krijgen role="button" + tabindex=0 via de
   centrale a11y-laag (mobile-enhancements initClickableA11y) — zichtbare
   toetsenbord-focus hoort daarbij. END_OF_S258_A11Y2_FOCUS_CSS */
[role="button"]:focus:not(:focus-visible) { outline: none; }
[role="button"]:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 2px;
  border-radius: 4px;
}
/* AUDITJULI-P1-08: klikbare tabelrijen/-cellen dragen geen role (tabelsemantiek) maar
   data-a11y-key (mobile-enhancements decorate): ook zij krijgen zichtbare toetsenbordfocus. */
[data-a11y-key]:focus:not(:focus-visible) { outline: none; }
[data-a11y-key]:focus-visible { outline: 2px solid var(--navy); outline-offset: -2px; }

/* iPhone notch + Android 3-button-nav: respect veilige zones */
body {
  padding-bottom: env(safe-area-inset-bottom);
}
#toasts {
  padding-bottom: max(16px, env(safe-area-inset-bottom));
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Geen pull-to-refresh / bounce wanneer modal-body scrollt naar einde */
.modal-overlay,
.modal-body,
.modal,
.table-wrap,
.dash3-activity-list {
  overscroll-behavior: contain;
}

/* iOS-momentum-scroll op containers met overflow */
.modal-body,
.table-wrap {
  -webkit-overflow-scrolling: touch;
}

/* Voorkom dat browsers form-elementen forceerd zoomen op iOS (input-font <16px = zoom-in) */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="password"],
input[type="search"],
input[type="date"],
input[type="time"],
select,
textarea {
  font-size: max(14px, 1rem);
}
/* s545 — HOOGTEBEGRENZING VAN DE AGENDA-SCROLLER, en waarom hij hier staat en niet inline.
   De bundle zet inline `max-height:calc(100vh-260px)` (app.js.partial-backup:1959). Die mist een
   spatie rond de `-`, dus CSS verwerpt de hele declaratie — de agenda groeide tot volle
   inhoudshoogte (~840px) en de dagkoppen scrollden weg.
   De spatie erin zetten LOST HET NIET OP: `agenda-fit.js:32` doet `sc.style.maxHeight = ''` bij
   elke MutationObserver-tik zolang de opt-in "Passend" uit staat (de standaard), en dat is de
   standaard. Een inline fix wordt dus binnen 120 ms weer gewist — precies het s543-patroon:
   bronregel gerepareerd, de laag eronder maakt het ongedaan.
   Een STYLESHEET-regel overleeft dat wel: `style.maxHeight = ''` verwijdert alleen de inline
   waarde, waarna deze regel weer geldt. En zet "Passend" wél aan, dan schrijft agenda-fit:35
   inline `none` — dat overrulet deze regel, wat precies de bedoeling is.
   Twee declaraties: dvh voor de verspringende adresbalk op mobiel Safari, vh als terugval. */
#agenda-scroll {
  max-height: calc(100vh - 260px);
  max-height: calc(100dvh - 260px);
}

@supports (-webkit-touch-callout: none) {
  /* iOS-only: minstens 16px om auto-zoom te vermijden.
     s545 — !important is hier GEEN luiheid maar noodzaak. Deze regel heeft specificiteit
     (0,1,1); `body.mc-shell-active input:not()×4` op :1630 heeft (0,5,2) en wint dus altijd,
     ongeacht bronvolgorde — @supports voegt zelf geen specificiteit toe. En `mc-shell-active`
     staat onvoorwaardelijk aan (app.js.partial-backup:4210), dus de fix was dood voor ELKE
     ingelogde gebruiker: iOS zoomde in bij elk formulierveld, precies wat dit moest voorkomen.
     Alternatief was de selector hieronder 12× prefixen met body.mc-shell-active; dat is meer
     tekens en breekt zodra die klasse ooit hernoemd wordt. Op iOS/iPadOS is <16px op een input
     nooit gewenst, dus een onvoorwaardelijke ondergrens is hier het juiste contract. */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="number"],
  input[type="password"],
  input[type="search"],
  input[type="date"],
  input[type="time"],
  select,
  textarea {
    font-size: 16px !important;
  }
}

/* iOS sticky-hover-bestrijding: op touch-only devices hover-effecten reverten.
   Sessie 22 compat-pakket: uitgebreid van 8 naar 40+ selectoren — dempt sticky-state
   op alle interactive rows/buttons/tabs. Dropdown-on-hover-triggers (mc-topbar-item +
   mc-user-trigger) bewust ongemoeid: dropdowns openen via tap-to-toggle (handled in JS). */
@media (hover: none) {
  .sb-item:hover,
  .sb-logout:hover,
  #sidebar.mc-shell .sb-item:hover,
  #sidebar.mc-shell .sb-logout:hover,
  .btn:hover,
  .btn-primary:hover,
  .btn-teal:hover,
  .btn-warm:hover,
  .btn-ghost:hover,
  .btn-danger:hover,
  .btn-error:hover,
  tr.clickable:hover td,
  .tab:hover,
  .close-btn:hover,
  .help-icon-btn:hover,
  .mc-topbar-item:hover,
  .mc-topbar-item.is-admin:hover,
  .mc-icon-btn:hover,
  .mc-search-btn:hover,
  .mc-user-trigger:hover,
  .mc-dropdown-item:hover,
  .mc-dropdown-item.is-admin:hover,
  .mc-scard:hover,
  .mc-scard.is-admin:hover,
  .mc-tab:hover,
  .rem-tab:hover,
  .mc-segmented button:hover,
  .mc-navcluster .btn:hover,
  .mc-doc-row:hover,
  .mc-doc-row:hover .mc-doc-arrow,
  .mc-doc-saved-row:hover,
  .dash3-today-row:hover,
  .dash3-action:hover,
  .dash3-action-warn:hover,
  .dash3-attn-row:hover,
  .dash3-activity-row:hover,
  .dash3-portal-row:hover,
  body.mc-shell-active .btn:hover,
  body.mc-shell-active .btn-primary:hover,
  body.mc-shell-active .btn-ghost:hover,
  body.mc-shell-active .btn-danger:hover,
  body.mc-shell-active .btn-error:hover,
  body.mc-shell-active table tbody tr:hover,
  body.mc-shell-active .msg-chat-conv:hover,
  body.mc-shell-active .msg-chat-send-btn:hover:not(:disabled) {
    background: revert;
    border-color: revert;
    transform: revert;
    box-shadow: revert;
    color: revert;
  }
}

/* Android select-element styling consistent maken (default ziet er primitief uit) */
select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' stroke='%23475569' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
  padding-right: 30px;
}
select:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Print-friendly: PWA-shell elementen verbergen tijdens afdrukken */
@media print {
  #sidebar, #toasts, .modal-foot, .dash3-actions { display: none !important; }
  #main-content { margin-left: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-AUDIT s25 (2026-05-04) — fixes voor 12 P0+P1 bevindingen.
   Volledig rapport in _audit/MOBILE_AUDIT_2026-05-04.md.
   Alle regels strikt scoped op viewport — geen impact op desktop.
   ═══════════════════════════════════════════════════════════════════════ */

/* M-15 body-scroll-lock bij open modal — voorkomt scroll-through op iOS Safari */
body.mc-modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  /* top wordt door JS gezet op -scrollY zodat positie behouden blijft */
}

/* M-07 sidebar-backdrop — click-outside-to-close pattern */
.sb-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  z-index: 99;
  -webkit-tap-highlight-color: transparent;
  animation: mc-fade-in 0.18s ease;
}
.sb-backdrop.show { display: block; }
@keyframes mc-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Mobile (max 480px) — iPhone SE/8 + smal Android ─────────────────── */
@media (max-width: 480px) {

  /* M-01 maandgrid-cellen kleiner font + dot i.p.v. cijfer */
  .mc-month-cell { font-size: 11px !important; padding: 4px 2px !important; }
  .mc-month-cell-count { display: none !important; }
  .mc-month-cell-dot {
    display: inline-block;
    width: 6px; height: 6px; border-radius: 50%;
    margin-top: 2px;
  }

  /* M-02 nieuwe-afspraak modal: form-rows stacken */
  .modal .form-row,
  .modal-body .form-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .modal input:not([type="checkbox"]):not([type="radio"]),
  .modal select,
  .modal textarea {
    width: 100% !important;
    box-sizing: border-box;
  }

  /* M-03 tarief-hint expliciet block + kleinere font */
  #na-rate-hint, #ae-rate-hint, #af-rate-hint {
    display: block !important;
    margin-top: 4px !important;
    font-size: 11px !important;
    line-height: 1.3 !important;
  }

  /* M-10 KPI-strip compacter op iPhone SE */
  .dash3-kpis .kpi-card,
  .dash3-kpis-3 .kpi-card {
    padding: 10px 12px !important;
  }
  .dash3-kpi-value { font-size: 22px !important; }
  .dash3-kpi-label { font-size: 11px !important; }

  /* M-16 ClientModal form-inputs full-width op smal */
  .modal label + input,
  .modal label + select,
  .modal label + textarea {
    width: 100% !important;
  }
}

/* ── Mobile (max 768px) — alle phone-portrait + smalle tablet ────────── */
@media (max-width: 768px) {

  /* M-08 hamburger touch-target ≥44px (was 36px) */
  .sb-toggle {
    width: 44px !important;
    height: 44px !important;
    top: 8px !important;
    left: 8px !important;
    font-size: 20px !important;
  }

  /* M-11 sub-nav badges horizontal-scroll met snap */
  .mc-tabs-row,
  .sub-nav,
  [data-mc-subnav],
  .page-header .page-actions {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    white-space: nowrap;
  }
  .mc-tabs-row::-webkit-scrollbar,
  .sub-nav::-webkit-scrollbar,
  [data-mc-subnav]::-webkit-scrollbar,
  .page-header .page-actions::-webkit-scrollbar {
    display: none;
  }
  .mc-tab,
  .sub-nav > * {
    flex-shrink: 0;
    scroll-snap-align: start;
  }

  /* M-12 page-actions overflow-fade — visueel duidelijk dat er rechts meer is */
  .page-header .page-actions {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 24px), transparent);
  }

  /* M-13 modal locked op 100dvh + position:fixed (geen toolbar-jitter op iOS) */
  .modal {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
    display: flex;
    flex-direction: column;
  }
  .modal-body {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
  }

  /* M-17 modal sticky-header */
  .modal-head,
  .modal .modal-head,
  body.mc-shell-active .modal-head {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--surface, #fff);
    border-bottom: 1px solid var(--border, #e2e8f0);
  }
  body.mc-shell-active .modal-head {
    background: var(--mc-bg-elevated, #fff);
    border-bottom-color: var(--mc-border-warm, #e8dfcf);
  }
  /* Modal-footer sticky onderaan zodat actie-knoppen altijd bereikbaar zijn */
  .modal-foot,
  .modal .modal-foot {
    position: sticky;
    bottom: 0;
    z-index: 2;
    background: var(--surface, #fff);
    border-top: 1px solid var(--border, #e2e8f0);
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
  }

  /* M-14 ClientModal tabs horizontal-scroll i.p.v. wrap */
  .modal .mc-tabs-row,
  .modal [class*="tabs"] {
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scrollbar-width: none;
  }
  .modal .mc-tabs-row::-webkit-scrollbar,
  .modal [class*="tabs"]::-webkit-scrollbar { display: none; }

  /* M-19 minimum touch-targets op tap-only devices.
     Beperkt tot interactieve elementen buiten dense tables (table buttons mogen
     compact blijven om data-density te behouden). */
  .btn,
  button:not(.modal-head button):not(table button),
  [role="button"]:not(table [role="button"]),
  .sb-item,
  .mc-tab,
  .rem-tab,
  .mc-dropdown-item {
    min-height: 44px;
  }
  /* btn-sm explicit override: tap-area via padding-uitbreiding, niet height */
  .btn-sm, .btn-xs {
    min-height: 36px;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  /* M-22 select-arrow groter op mobile */
  select {
    background-size: 16px !important;
    padding-right: 36px !important;
  }
}

/* ── ClientJourney filter-chips (s31) ────────────────────────────────── */
.cj-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 16px;
  padding: 10px;
  background: #f8fafc;
  border-radius: 8px;
  align-items: center;
}
.cj-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-mid);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background .12s, color .12s, border-color .12s, opacity .12s;
  opacity: .55;
}
.cj-chip:hover {
  border-color: var(--navy);
  opacity: .85;
}
.cj-chip.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  opacity: 1;
}
.cj-chip-count {
  background: rgba(0,0,0,.08);
  border-radius: 8px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 700;
  min-width: 18px;
  text-align: center;
}
.cj-chip.active .cj-chip-count {
  background: rgba(255,255,255,.22);
}
@media print {
  .cj-filters { display: none !important; }
}

/* ── iOS PWA standalone-mode tweaks ──────────────────────────────────── */
@media all and (display-mode: standalone) {
  /* Topbar krijgt extra padding voor status-bar wanneer apple-mobile-web-app-status-bar-style: black-translucent */
  body.mc-shell-active .mc-topbar {
    padding-top: calc(env(safe-area-inset-top) + 8px);
    height: calc(var(--mc-topbar-h) + env(safe-area-inset-top));
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE-AUDIT s25 — P2 backlog (2026-05-04, batch 2).
   M-04 week-view scroll-snap · M-09 topbar-icon-only.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  /* M-04 week-view scroll-snap — Agenda week/dag horizontaal swipen voelt nu
     scherper. Werkt via class .agenda-week-grid (en data-attribute fallback). */
  .agenda-week-grid,
  .agenda-day-grid,
  [data-mc-week-grid],
  [data-mc-day-grid] {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .agenda-week-col,
  .agenda-day-col,
  [data-mc-week-grid] > *,
  [data-mc-day-grid] > * {
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* M-09 topbar-icon-only — was: alle .mc-topbar-item display:none. Nu:
     icon-cellen blijven zichtbaar, alleen de tekst-labels verbergen. Geeft
     mobile-gebruiker single-tap toegang tot zoek/account-menu i.p.v. eerst
     hamburger openen. */
  .mc-topbar-nav .mc-topbar-item {
    display: inline-flex !important;
    padding: 8px 10px !important;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
  }
  .mc-topbar-nav .mc-topbar-item .mc-topbar-label,
  .mc-topbar-nav .mc-topbar-item span:not(.mc-topbar-icon):not(.sb-badge) {
    display: none !important;
  }
  .mc-topbar-nav .mc-topbar-item .mc-topbar-icon,
  .mc-topbar-nav .mc-topbar-item svg,
  .mc-topbar-nav .mc-topbar-item img {
    display: inline-block !important;
  }
  /* Topbar-search-knop blijft compact */
  .mc-search-btn .mc-search-icon { display: inline-block !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   UX-1 (s126) — Praktijk-switcher dropdown clipping fix.

   Bron: BACKLOG-UX-2026-05-17.md UX-1 + Jeroen schermopname 17 mei 2026.
   Symptoom:
     • Dropdown "Mijn praktijken" overlapt met trigger ipv eronder uitklap
     • Header-tekst wordt links afgeknipt
     • Eerste karakters praktijk-namen verstopt onder de topbar-knop

   Root cause: .mc-dropdown zit binnen een <button>-element (#mc-practice-
   switcher). Browsers behandelen absolute children van <button> inconsistent
   (Chrome/Edge: ok, Firefox/Safari: soms clip + text-align center bias).
   De default .mc-dropdown CSS gaat uit van een div-wrapper.

   Fix: per-switcher overrides die button-quirk-defensief zijn:
     - overflow:visible op de button (in geval UA clip-default toepast)
     - dropdown krijgt expliciet position+top+left+text-align-left
     - min-width:max-content → langste praktijk-naam bepaalt breedte, nooit clip
     - max-width:360px upper-bound voor extreme cases
     - z-index:250 (boven default .mc-dropdown z-index:200 om stacking-bugs
       met de fixed topbar te elimineren)
   ═══════════════════════════════════════════════════════════════════════ */
#mc-practice-switcher {
  overflow: visible;
  position: relative;
  text-align: left;
}
#mc-practice-switcher .mc-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: auto;
  min-width: max-content;
  max-width: 360px;
  z-index: 250;
  text-align: left;
}
#mc-practice-switcher .mc-dropdown-section,
#mc-practice-switcher .mc-dropdown-item,
#mc-practice-switcher #mc-practice-switcher-list > * {
  white-space: nowrap;
}
/* Op smal viewport (mobile) ankert dropdown rechts om viewport-overflow te vermijden */
@media (max-width: 768px) {
  #mc-practice-switcher .mc-dropdown {
    left: auto;
    right: 0;
  }
}
/* s379-hotfix: topbar-dropdowns (o.a. praktijk-switcher) boven de zijbalk. De sidebar (z-100) won van
   de topbar-stacking-context (z-95), waardoor zijbalk-items door het open panel heen mengden.
   Desktop-only: op mobiel moet .sb-toggle (fixed, z-101) klikbaar blijven boven de topbar-zone.
   105 blijft onder panel-overlay (290) en modal (500). */
@media (min-width: 769px) {
  .mc-topbar { z-index: 105; }
}
/* END_OF_S126_UX1_PRACTICE_SWITCHER_DROPDOWN */

/* ═══════════════════════════════════════════════════════════════════════
   UX-7 + UX-8 (s126) — Muiswiel-scroll op #billing en #appointments.

   Bron: BACKLOG-UX-2026-05-17.md UX-7+UX-8 + Jeroen 17 mei 2026.
   Symptoom: muiswiel scrolt niet door betalingen-lijst of afspraken-lijst.

   Root cause: page-body groeit zonder eigen scroll-zone. Sticky thead
   (top:0) binnen #billing-table heeft geen scrollable ancestor → werkt
   onbetrouwbaar. Body-scroll werkt wel maar voelt niet als "lijst-scroll"
   omdat de hele pagina meebeweegt (header + KPI-strip + tabs).

   Fix: maak #billing-table en #appt-table eigen scroll-containers met
   max-height berekend op viewport minus topbar+page-header+card-head.
   Sticky thead werkt nu automatisch correct binnen deze nieuwe scroll-
   ancestor. overscroll-behavior:contain voorkomt page-scroll-bleed bij
   eind van lijst.
   ═══════════════════════════════════════════════════════════════════════ */
body.mc-shell-active #billing-table,
body.mc-shell-active #appt-table {
  overflow-y: auto;
  overflow-x: auto;
  /* viewport - mc-topbar (~56px) - page-header (~120px met s125 padding) - card-head (~60px) - page-body-bottom-padding (~60px) - card-border+margin (~24px) ≈ 320px */
  max-height: calc(100vh - 320px);
  max-height: calc(100dvh - 320px);
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
@media (max-width: 768px) {
  /* Mobile: page-header compacter + sidebar gehidden → minder offset */
  body.mc-shell-active #billing-table,
  body.mc-shell-active #appt-table {
    max-height: calc(100vh - 240px);
    max-height: calc(100dvh - 240px);
  }
}
/* END_OF_S126_UX78_BILLING_APPT_SCROLL */

/* ═══ s227 — Collega-chat (teamruimte) ════════════════════════════════
   Stijl voor TeamChat (route 'team') + dashboard-widget (.tc-w). Mindcare-
   tokens (--navy/--teal/--border/...). Alles prefix tc-. Dark-mode-klaar. */
.tc-wrap{display:grid;grid-template-columns:264px 1fr;height:calc(100vh - 90px);height:calc(100dvh - 90px);background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.tc-rail{display:flex;flex-direction:column;min-width:0;min-height:0;background:linear-gradient(178deg,#fbfcfe,#f5f8fb);border-right:1px solid var(--border)}
[data-theme="dark"] .tc-rail{background:#0f172a}
.tc-rail-head{padding:13px 13px 11px;border-bottom:1px solid var(--border)}
.tc-me{display:flex;align-items:center;gap:10px;padding:8px 9px;border:1px solid var(--border);border-radius:12px;background:var(--surface);cursor:pointer;box-shadow:var(--shadow)}
.tc-me:hover{border-color:var(--border-2)}
.tc-me-meta{min-width:0;flex:1}
.tc-me-name{font-size:12.5px;font-weight:600;line-height:1.1;color:var(--text)}
.tc-me-mood{font-size:11px;color:var(--text-mid);margin-top:2px;display:flex;align-items:center;gap:4px}
.tc-chev{color:var(--text-light);font-size:11px}
.tc-rail-scroll{flex:1;overflow-y:auto;padding:8px 8px 12px;-webkit-overflow-scrolling:touch}
.tc-rail-label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-light);padding:12px 8px 6px}
.tc-conv{display:flex;align-items:center;gap:10px;padding:8px 9px;border-radius:11px;cursor:pointer;border:1px solid transparent;position:relative}
.tc-conv:hover{background:var(--surface);border-color:var(--border)}
.tc-conv.active{background:var(--surface);border-color:#cfe6e2;box-shadow:0 1px 6px rgba(15,118,110,.10)}
[data-theme="dark"] .tc-conv:hover,[data-theme="dark"] .tc-conv.active{background:rgba(255,255,255,.06)}
.tc-av{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:600;font-size:13px;flex-shrink:0;box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.tc-av.sm{width:28px;height:28px;font-size:11px}
.tc-av.lg{width:42px;height:42px;font-size:15px}
.tc-av.tc-ch{border-radius:11px;background:linear-gradient(135deg,var(--navy),var(--navy-mid)) !important;font-size:17px}
.tc-cmeta{flex:1;min-width:0}
.tc-ctop{display:flex;align-items:center;gap:6px}
.tc-cname{font-size:13px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--text)}
.tc-moodi{font-size:12.5px;flex-shrink:0}
.tc-ctime{margin-left:auto;font-size:10.5px;color:var(--text-light);flex-shrink:0}
.tc-cprev{font-size:11.5px;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.tc-badge{min-width:19px;height:19px;border-radius:999px;background:var(--teal);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;padding:0 5px;flex-shrink:0}
.tc-main{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--surface)}
.tc-head{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--border)}
.tc-htitle{font-size:15px;font-weight:700;color:var(--navy)}
.tc-hsub{font-size:11.5px;color:var(--text-mid);margin-top:2px}
.tc-stream{flex:1;overflow-y:auto;padding:16px 18px 6px;display:flex;flex-direction:column;gap:2px;-webkit-overflow-scrolling:touch}
.tc-daydiv{text-align:center;margin:12px 0 9px;position:relative}
.tc-daydiv span{font-size:10.5px;font-weight:600;color:var(--text-light);background:var(--bg);border:1px solid var(--border);padding:3px 12px;border-radius:999px;position:relative;z-index:1}
.tc-daydiv::before{content:"";position:absolute;left:0;right:0;top:50%;height:1px;background:var(--border)}
.tc-msg{display:flex;gap:10px;padding:5px 4px;border-radius:var(--r)} /* s262 DES-5 */
.tc-msg:hover{background:var(--bg)}
.tc-bwrap{min-width:0;max-width:76%}
.tc-msg.mine{flex-direction:row-reverse}
.tc-msg.mine .tc-bwrap{display:flex;flex-direction:column;align-items:flex-end}
.tc-who{display:flex;align-items:baseline;gap:8px;margin-bottom:3px}
.tc-msg.mine .tc-who{flex-direction:row-reverse}
.tc-who b{font-size:12.5px;font-weight:600;color:var(--navy)}
.tc-who .tc-t{font-size:10.5px;color:var(--text-light)}
.tc-bubble{background:var(--surface);border:1px solid var(--border);padding:9px 13px;border-radius:4px 14px 14px 14px;font-size:13.5px;line-height:1.5;color:var(--text);word-wrap:break-word;overflow-wrap:anywhere}
[data-theme="dark"] .tc-bubble{background:#243244}
.tc-msg.mine .tc-bubble{background:linear-gradient(135deg,var(--teal),#0b5a54);color:#fff;border:none;border-radius:14px 4px 14px 14px}
.tc-reacts{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;align-items:center}
.tc-react{display:inline-flex;align-items:center;gap:4px;font-size:12px;background:var(--surface);border:1px solid var(--border);border-radius:999px;padding:2px 8px 2px 6px;cursor:pointer;line-height:1.4}
.tc-react:hover{border-color:var(--border-2)}
.tc-react.on{background:var(--teal-pale);border-color:#9fd8d0}
.tc-react b{font-size:11px;color:var(--text-mid);font-weight:600}
.tc-react.on b{color:var(--teal)}
.tc-addreact{width:24px;height:22px;border-radius:999px;border:1px dashed var(--border-2);background:transparent;color:var(--text-light);cursor:pointer;font-size:12px;opacity:0;transition:opacity .12s}
.tc-msg:hover .tc-addreact{opacity:1}
.tc-empty{margin:auto;text-align:center;color:var(--text-light);font-size:13px;padding:40px 20px}
.tc-empty-ic{font-size:34px;margin-bottom:10px}
.tc-composer{padding:11px 14px 14px;border-top:1px solid var(--border)}
.tc-cbox{border:1px solid var(--border-2);border-radius:14px;background:var(--surface);padding:6px 6px 6px 10px;display:flex;align-items:flex-end;gap:6px}
.tc-cbox:focus-within{border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,118,110,.12)}
.tc-cbox textarea{flex:1;border:none;outline:none;resize:none;font-family:inherit;font-size:13.5px;line-height:1.5;color:var(--text);max-height:120px;padding:6px 0;background:transparent}
.tc-tool{width:32px;height:32px;border-radius:9px;border:none;background:transparent;cursor:pointer;font-size:17px;color:var(--text-mid);display:flex;align-items:center;justify-content:center}
.tc-tool:hover{background:var(--bg)}
.tc-send{width:36px;height:36px;border-radius:11px;border:none;background:linear-gradient(135deg,var(--teal),var(--navy));color:#fff;cursor:pointer;font-size:15px;display:flex;align-items:center;justify-content:center}
.tc-send:hover{filter:brightness(1.08)}
.tc-hint{font-size:10.5px;color:var(--text-light);margin:7px 4px 0}
.tc-pop{position:fixed;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:9px;z-index:9000;animation:tcPop .14s ease}
@keyframes tcPop{from{opacity:0;transform:translateY(6px) scale(.97)}to{opacity:1;transform:none}}
.tc-pop-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;width:288px}
.tc-pop-grid button{border:none;background:transparent;font-size:19px;width:33px;height:33px;border-radius:9px;cursor:pointer}
.tc-pop-grid button:hover{background:var(--bg)}
.tc-pop-title{font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.07em;color:var(--text-light);padding:3px 5px 7px}
.tc-mood-opt{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:9px;cursor:pointer;font-size:13px;color:var(--text);min-width:206px}
.tc-mood-opt:hover{background:var(--bg)}
.tc-mood-em{font-size:16px}
.tc-w{display:flex;flex-direction:column}
.tc-wh{display:flex;align-items:center;gap:9px;padding:12px 15px;border-bottom:1px solid var(--border)}
.tc-wic{width:28px;height:28px;border-radius:8px;background:linear-gradient(135deg,var(--navy),var(--teal));color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px}
.tc-wh b{font-size:13.5px;color:var(--navy)}
.tc-wh .tc-badge{margin-left:auto}
.tc-wrow{display:flex;gap:10px;padding:10px 15px;border-bottom:1px solid var(--border);cursor:pointer}
.tc-wrow:hover{background:var(--bg)}
.tc-wmeta{min-width:0;flex:1}
.tc-wl1{font-size:12.5px;color:var(--text)}
.tc-wl1 b{color:var(--navy);font-weight:600}
.tc-wl2{font-size:11.5px;color:var(--text-light);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.tc-wcta{padding:11px 15px;text-align:center;font-size:12px;font-weight:600;color:var(--teal);cursor:pointer}
.tc-wcta:hover{background:var(--teal-pale)}
/* mini-kanalen (s227-B) */
.tc-ch-mini{background:linear-gradient(135deg,#475569,#64748b) !important;font-size:16px !important}
.tc-newch{margin:5px 4px 2px;padding:8px 10px;border-radius:var(--r);border:1px dashed var(--border-2);background:transparent;color:var(--teal);font-size:12.5px;font-weight:600;cursor:pointer;text-align:center}
.tc-newch:hover{background:var(--teal-pale);border-color:#9fd8d0}
.tc-form{display:flex;flex-direction:column}
.tc-flabel{font-size:12px;font-weight:600;color:var(--text-mid);margin-bottom:5px}
.tc-finput{width:100%;padding:9px 11px;border:1px solid var(--border-2);border-radius:9px;font-size:13.5px;font-family:inherit;color:var(--text);background:var(--surface)}
.tc-finput:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(15,118,110,.12)}
.tc-memberpick{display:flex;flex-direction:column;gap:2px;margin-top:6px;max-height:280px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--r);padding:5px} /* s262 DES-5 */
.tc-memberopt{display:flex;align-items:center;gap:9px;padding:7px 8px;border-radius:8px;cursor:pointer;font-size:13px;color:var(--text)}
.tc-memberopt:hover{background:var(--bg)}
.tc-memberopt input{width:16px;height:16px;accent-color:var(--teal);cursor:pointer;flex-shrink:0}
@media(max-width:768px){.tc-wrap{grid-template-columns:1fr;grid-template-rows:auto 1fr;height:calc(100dvh - 72px)}.tc-rail{border-right:none;border-bottom:1px solid var(--border);max-height:40vh}.tc-bwrap{max-width:86%}}
/* s345 a11y (PATCH-4789c3 B3): skip-link — visueel verborgen tot focus */
.mc-skip-link{position:absolute;left:-9999px;top:0;z-index:10000;background:var(--navy);color:#fff;padding:10px 16px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.mc-skip-link:focus{left:0}
/* ── s550 WCAG 2.1 AA — Windows High Contrast Mode (forced-colors) ─────────────────────────
   GEMETEN VOORAF: 0 treffers voor `forced-colors` in heel public/ (prefers-reduced-motion
   stond er wel, op 8 plekken). Dat is een echt gat, geen cosmetiek: in forced-colors dwingt
   de UA alle achtergronden naar Canvas en alle tekst naar CanvasText, en hij GOOIT box-shadow
   WEG. Elke focus-indicatie die alléén op box-shadow leunt verdwijnt daarmee volledig — in dit
   bestand zijn dat input/select/textarea:focus (r313), .msg-chat-input:focus, .tc-cbox:focus-
   within en .tc-finput:focus. Gevolg: een toetsenbordgebruiker in hoog contrast weet niet waar
   hij staat (2.4.7 Focus Visible) en de ring haalt 1.4.11 niet.

   ⚠ WAAROM DIT BLOK ONDERAAN STAAT EN GEEN KALE `:focus` GEBRUIKT — dezelfde val als de
   s549-knopfix. Een @media-blok voegt GEEN specificiteit toe; binnen forced-colors gelden
   precies dezelfde cascaderegels. Twee dingen zouden dit blok stil uitschakelen:
     · `:focus` is (0,1,0) en verliest van `input:focus { outline: none }` (0,1,1) op r313 —
       daarom staan de concrete selectoren hieronder uitgeschreven i.p.v. één kale :focus;
     · `.tc-finput:focus { outline: none }` (TeamChat, verderop) staat LATER in het bestand en wint bij
       gelijke specificiteit — daarom staat dit blok ná alle componenten-CSS, vlak vóór de
       EOF-sentinel, en niet bij de focus-sectie rond END_OF_S258_A11Y2_FOCUS_CSS.
   Elke selector hieronder is dus (a) minstens even specifiek als zijn concurrent en (b) later
   in het bestand. Wie hem verplaatst naar boven, zet hem uit — zonder foutmelding.

   Drie ingrepen:
   (1) FOCUS ALS OUTLINE. outline is het enige ringmechanisme dat forced-colors overleeft.
       Kleur `Highlight` i.p.v. var(--navy): author-kleuren worden hier toch genegeerd, dus de
       systeemkleur is de enige die de gebruiker zelf kan instellen.
   (2) RANDEN. De UA forceert een BESTAANDE border-color al naar CanvasText — het probleem zit
       bij vlakken die hun grens uit een ACHTERGROND of een box-shadow halen en dus helemaal
       geen rand hebben: .badge (r350) en .modal (r401). Die vallen zonder deze regel naadloos
       weg tegen Canvas. Vandaar een echte rand, niet alleen een border-color.
   (3) forced-color-adjust WAAR KLEUR DE BETEKENIS DRAAGT. De badge-familie (groen=ok /
       oranje=let op / rood=fout) en .mc-scard-status worden anders alle zes platgeslagen naar
       dezelfde CanvasText-op-Canvas; het statusonderscheid is dan letterlijk weg.
       BEWUST NIET BREDER: forced-color-adjust zet de gebruikersvoorkeur opzij en hoort alleen
       waar informatie verdwijnt. (1.4.1 Use of Color blijft los gedekt door de TEKST in de
       badge — de kleur is de redundante laag, niet de enige drager.) */
@media (forced-colors: active) {
  /* (1) een echte ring; toetsenbord- én muisfocus op formuliervelden, want daar is de
     box-shadow de ENIGE indicatie en die bestaat hier niet meer */
  input:focus, select:focus, textarea:focus,
  input:focus-visible, select:focus-visible, textarea:focus-visible,
  button:focus-visible, a:focus-visible, .btn:focus-visible,
  [role="button"]:focus-visible, .help-icon-btn:focus-visible,
  .msg-chat-input:focus, .tc-finput:focus, .tc-cbox:focus-within {
    outline: 3px solid Highlight;
    outline-offset: 2px;
  }

  /* (2) vlakken zonder eigen rand krijgen er een; anders geen zichtbare grens tegen Canvas */
  .badge, .modal, .mc-scard-status {
    border: 1px solid CanvasText;
  }
  /* vlakken die WEL een rand hebben: de kleur expliciet, zodat een var(--mc-border-*) die
     hierboven op 3:1 is gebracht ook hier een zichtbare grens oplevert */
  .card, .table-wrap, input, select, textarea, .btn {
    border-color: CanvasText;
  }

  /* (3) kleur = betekenis: statuskleuren overleven het geforceerde palet */
  .badge-navy, .badge-green, .badge-teal, .badge-orange, .badge-red, .badge-gray,
  .badge-ok, .badge-warn, .badge-default,
  .mc-scard-status {
    forced-color-adjust: none;
  }
}
/* END_OF_S550_FORCED_COLORS */


/* s396 responsive-sweep — laptop 1280×800 → 1920×1080. Additief, buiten @media print.
   1) mc-shell .table-wrap (r1577) zette overflow:hidden (radius-clip) en overschreef zo
      de basis .table-wrap{overflow-x:auto} (r343) → brede tabellen werden op 1280px
      AFGEKNIPT zonder scrollbar. Alleen de x-as terug naar auto; y blijft hidden.
   2) ≥1600px: bewuste content-caps groeien mee (.mc-content-max 1100→1360,
      cockpit .pmc 1180→1400) — kaart-grids binnenin zijn fr/auto-fill en vullen
      de extra breedte vanzelf. .pmc centreert voortaan zoals .mc-content-max
      (was left-hugging met dode rechterrand op brede schermen). */
body.mc-shell-active .table-wrap { overflow-x: auto; }
.pmc { margin-left: auto; margin-right: auto; }
@media (min-width: 1600px) {
  .mc-content-max { max-width: 1360px; }
  .pmc { max-width: 1400px; }
}
/* END_OF_S396_RESPONSIVE_SWEEP */

/* s573 — muiswiel scrolde de pagina niet vanaf de clientenlijst (Chromium-only).
   r1752 zet overflow:hidden (radius-clip); r4262 gaf alleen overflow-x terug, dus
   overflow-y bleef hidden -> Chromium slikt het wiel, en overscroll-behavior (r3522)
   verbiedt doorgeven. BEIDE declaraties nodig; elk apart meet 0. Firefox/WebKit niet
   getroffen. Check: npx playwright test tests/smoke/wiel-tablewrap.spec.mjs */
body.mc-shell-active .table-wrap { overflow-y: auto; overscroll-behavior-y: auto; }
/* END_OF_S573_TABLEWRAP_WIEL */

/* s596 dossier-herbouw: kernkaart + inklapbare secties in de tab Dossier (tokens, geen vaste kleuren) */
.cm-kern { background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 10px; }
.cm-kern-rij { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: var(--fs-2); }
.cm-kern-naam { font-size: 16px; }
.cm-kern-status { margin: 0; }
.cm-kern-leeg { color: var(--text-light); }
.cm-chip { font: inherit; font-size: var(--fs-2); font-weight: 600; padding: 2px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--mc-bg-elevated, var(--bg)); color: var(--text); cursor: pointer; }
span.cm-chip { cursor: default; }
.cm-chip-rood { background: var(--mc-danger-soft, #fef2f2); border-color: var(--mc-danger, #dc2626); }
.cm-chip-geel { background: var(--mc-warn-soft, #fffbeb); border-color: var(--mc-warn, #b45309); }
.cm-chip-blauw { background: var(--mc-navy-soft, #eff6ff); border-color: var(--mc-navy, #0c4a6e); }
.cm-chip:focus-visible, .cm-sectie > summary:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; }
.cm-sectie { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; background: var(--mc-bg-elevated, var(--bg)); }
.cm-sectie > summary { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; padding: 10px 14px; cursor: pointer; list-style: none; }
.cm-sectie > summary::-webkit-details-marker { display: none; }
.cm-sectie > summary::before { content: '▸'; transition: transform 120ms; }
.cm-sectie[open] > summary::before { transform: rotate(90deg); }
.cm-sectie-titel { font-weight: 700; }
.cm-sectie-sam { color: var(--text-light); font-size: var(--fs-2); }
.cm-sectie-body { padding: 4px 14px 14px; }
@media (forced-colors: active) { .cm-chip, .cm-sectie { border-color: CanvasText; } }
/* Dossiervenster: de inhoud vult de modal (vaste 600/700/760 px lieten de rechterhelft leeg), met een leesbare bovengrens.
   Vanaf 1200 px staat de tab Dossier in twee kolommen: de kernkaart over de volle breedte, de secties ernaast in kolommen. */
.cm-inhoud { max-width: min(100%, 1100px); }
@media (min-width: 1200px) {
  .cm-inhoud.cm-raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 14px; align-items: start; }
  .cm-inhoud.cm-raster > :not(.cm-sectie) { grid-column: 1 / -1; }
}

/* Hover zonder inline handlers (CSP): !important wint van de inline stijl van het element. */
.mc-hov-bg:hover { background: var(--bg, #f1f5f9); }
#agenda-grid [data-mc-actie="ag-nieuw-op"]:hover { background: var(--bg) !important; }
[data-mc-actie="ag-hold-info"]:hover { box-shadow: 0 2px 8px rgba(245, 158, 11, .4) !important; }
[data-mc-actie="ag-open"]:hover { box-shadow: 0 2px 8px rgba(0, 0, 0, .15) !important; }
[data-mg-pick]:hover { transform: translateY(-1px); box-shadow: 0 2px 6px rgba(15, 23, 42, .12) !important; }

/* Agendakop (A46): menu «Weergave ▾» en de legenda achter «?» (native details). */
.ag-weergave, .ag-legenda { position: relative; }
.ag-weergave > summary, .ag-legenda > summary {
  list-style: none; cursor: pointer; border: 1px solid var(--border); background: var(--ag-surface, #fff);
  color: var(--text-mid, #475569); border-radius: 8px; font-size: 12px; font-weight: 600; padding: 5px 10px; min-height: 30px;
  display: inline-flex; align-items: center; gap: 6px;
}
.ag-weergave > summary::-webkit-details-marker, .ag-legenda > summary::-webkit-details-marker { display: none; }
.ag-weergave-n { min-width: 16px; padding: 0 5px; border-radius: 8px; background: #c2410c; color: #fff; font-size: 11px; text-align: center; }
.ag-weergave-menu, .ag-legenda-inhoud {
  position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; background: var(--ag-surface, #fff);
  border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 6px 18px rgba(15, 23, 42, .12);
}
.ag-weergave-menu { display: flex; flex-direction: column; align-items: stretch; gap: 6px; padding: 8px; min-width: 190px; }
.ag-legenda-inhoud { width: min(560px, 90vw); }
/* CSP-APP-PREP: vensters en kaarten die vroeger een style-attribuut zetten (setAttribute/cssText); nu klassen. */
.mcx-ov { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,.45); }
.mcx-ov--schorsing { background: rgba(15,23,42,.92); padding: 24px; }
.mcx-ov--cm { background: rgba(15,23,42,.55); padding: 16px; }
.mcx-z99999 { z-index: 99999; }
.mcx-z100000 { z-index: 100000; }
.mcx-z100001 { z-index: 100001; }
.mcx-z100003 { z-index: 100003; }
.mcx-notedict { margin-top: 4px; font-size: 11px; }
.mcx-cm-box { background: var(--mc-bg-elevated,#fff); max-width: 440px; width: 100%; border-radius: 12px; padding: 22px 24px; font-family: Arial,sans-serif; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.mcx-cm-h { margin: 0 0 8px; font-size: 16px; color: #7f1d1d; }
.mcx-cm-p { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: #334155; }
.mcx-cm-veld.mcx-cm-veld { width: 100%; padding: 8px; font-size: 14px; border: 1px solid var(--mc-border-strong,#868d94); border-radius: 6px; }
.mcx-cm-veld.mcx-cm-veld--10 { margin-bottom: 10px; }
.mcx-cm-veld.mcx-cm-veld--12 { margin-bottom: 12px; }
.mcx-cm-per { display: none; margin-bottom: 12px; font-size: 13px; color: #334155; line-height: 1.5; }
.mcx-cm-perlbl { display: flex; gap: 6px; align-items: flex-start; }
.mcx-cm-datum.mcx-cm-datum { margin-top: 6px; padding: 6px; font-size: 14px; border: 1px solid var(--mc-border-strong,#868d94); border-radius: 6px; }
.mcx-cm-fout { color: #dc2626; font-size: 12px; min-height: 16px; margin-bottom: 8px; }
.mcx-cm-rij { display: flex; gap: 8px; justify-content: flex-end; }
.mcx-cm-annuleer { padding: 8px 14px; border: 1px solid var(--mc-border-strong,#868d94); background: var(--mc-bg-elevated,#fff); border-radius: 6px; cursor: pointer; font-size: 14px; }
.mcx-cm-ok { padding: 8px 14px; border: none; background: #7f1d1d; color: #fff; border-radius: 6px; cursor: pointer; font-size: 14px; font-weight: bold; }
.mcx-pe-kaart { margin-top: 16px; border: 1px solid var(--mc-border-warm,#e2e8f0); background: var(--mc-bg-elevated,#fff); border-radius: 12px; padding: 16px 18px; max-width: 720px; }
.mcx-push-rij { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border-2,#e2e8f0); }
.mcx-sm-kaart { margin: 0 0 16px; border: 1px solid var(--mc-border,#e2e8f0); background: var(--mc-bg-elevated,#fff); border-radius: 10px; padding: 14px 16px; display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.mcx-sa-kaart { margin-top: 18px; border: 1px solid #fcd34d; background: #fffbeb; border-radius: 10px; padding: 16px 18px; max-width: 680px; }
/* INT-K26 (7 nov): de inline stijlen van K27-KLIN-A als klassen (kleur-inline-ratchet blijft op 10289). Waarden 1-op-1 overgenomen;
   de tweede selector houdt de specificiteit boven body.mc-shell-active .btn-sm / .alert, zoals de inline stijl dat deed. */
.mcx-k27-fbhost, body.mc-shell-active .mcx-k27-fbhost { font-size: 12.5px; padding: 0 14px 10px; }
.mcx-k27-fbblok, body.mc-shell-active .mcx-k27-fbblok { border-left: 3px solid var(--border); padding: 4px 10px; background: var(--bg); }
.mcx-k27-fbkop, body.mc-shell-active .mcx-k27-fbkop { font-size: 12px; color: var(--text-light); }
.mcx-k27-pre, body.mc-shell-active .mcx-k27-pre { white-space: pre-wrap; }
.mcx-k27-hint, body.mc-shell-active .mcx-k27-hint { font-size: 12px; color: var(--text-mid); margin-top: 4px; }
.mcx-k27-pakketgrid, body.mc-shell-active .mcx-k27-pakketgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; margin-bottom: 10px; }
.mcx-k27-pakketlabel, body.mc-shell-active .mcx-k27-pakketlabel { font-size: 13px; }
.mcx-k27-fbveld, body.mc-shell-active .mcx-k27-fbveld { margin: 6px 0 2px; }
.mcx-k27-fblabel, body.mc-shell-active .mcx-k27-fblabel { font-size: 12px; color: var(--muted); }
.mcx-k27-vol, body.mc-shell-active .mcx-k27-vol { width: 100%; }
.mcx-k27-ongelezen, body.mc-shell-active .mcx-k27-ongelezen { font-size: 12.5px; margin-bottom: 8px; }
.mcx-k27-muted, body.mc-shell-active .mcx-k27-muted { color: var(--muted); }
.mcx-k27-uitleg, body.mc-shell-active .mcx-k27-uitleg { font-size: 12px; margin-bottom: 12px; }
.mcx-k27-sigrij, body.mc-shell-active .mcx-k27-sigrij { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.mcx-k27-sigtekst, body.mc-shell-active .mcx-k27-sigtekst { flex: 1; min-width: 0; }
.mcx-k27-sigchip, body.mc-shell-active .mcx-k27-sigchip { font-size: var(--fs-2); color: var(--text-mid); margin-top: 2px; }
.mcx-k27-sigknop, body.mc-shell-active .mcx-k27-sigknop { font-size: var(--fs-2); }
/* INT-K26 (7 nov): de inline stijlen van K27-KLIN-B als klassen; zelfde waarden, specificiteit boven body.mc-shell-active zoals de inline stijl. */
.mcx-k27-vinklabel, body.mc-shell-active .mcx-k27-vinklabel { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px; }
.mcx-k27-vinklabel4, body.mc-shell-active .mcx-k27-vinklabel4 { display: inline-flex; align-items: center; gap: 4px; }
.mcx-k27-brief, body.mc-shell-active .mcx-k27-brief { padding: 8px 12px 10px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; font-size: 12px; margin-top: 6px; }
.mcx-k27-alertklein, body.mc-shell-active .mcx-k27-alertklein { font-size: 12px; }
.mcx-k27-marge8, body.mc-shell-active .mcx-k27-marge8 { margin: 8px 0; }
.mcx-k27-tabel, body.mc-shell-active .mcx-k27-tabel { width: 100%; font-size: 13px; }
.mcx-k27-mt6, body.mc-shell-active .mcx-k27-mt6 { margin-top: 6px; }
.mcx-k27-w60, body.mc-shell-active .mcx-k27-w60 { width: 60%; }
.mcx-k27-begeleiding, body.mc-shell-active .mcx-k27-begeleiding { font-size: 11.5px; color: var(--text-light); }
/* Gedeelde momentkiezer (shared/momentkiezer.js): dagstrook in cellen van 15 min, vrije starturen, aanpasbaar uur, reekspreview. */
.mk-strook{display:flex;height:22px;background:var(--mc-success-soft);border:1px solid var(--border);border-radius:4px;overflow:hidden}
.mk-cel{flex:1 1 0}
.mk-r-afspraak{background:var(--mc-danger)}
.mk-r-verlof{background:var(--mc-warn)}
.mk-r-buiten_rooster{background:var(--mc-border-strong)}
.mk-r-pauze{background:var(--mc-gold)}
.mk-r-lokaal{background:var(--mc-purple)}
.mk-gekozen{box-shadow:inset 0 3px 0 var(--navy),inset 0 -3px 0 var(--navy)}
.mk-schaal{display:flex;justify-content:space-between;font-size:9px;color:var(--text-light)}
.mk-bezet{font-size:11px;color:var(--text-mid);margin-top:4px}
.mk-vrije{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.mk-vrij{padding:2px 8px;font-size:11px}
.mk-rij{display:flex;align-items:center;gap:8px;margin-top:6px}
.mk-rij label{font-size:11px;margin:0}
.mk-tijd{width:110px;padding:3px 6px}
.mk-wel{color:var(--mc-success)}
.mk-niet{color:var(--mc-danger)}
.mk-vraag{color:var(--mc-warn-text)}
.mk-fout{font-size:12px}
.mk-reeks{font-size:11px;margin-top:8px}
.mk-reeks ul{margin:4px 0 0 16px;padding:0}
.mk-veld{grid-column:1/-1}
.mk-modus{display:flex;gap:4px;margin-bottom:4px}
.mk-week{display:flex;flex-direction:column;gap:2px}
.mk-weekdag{display:grid;grid-template-columns:56px 1fr 56px;align-items:center;gap:6px;width:100%;padding:1px 0;background:none;border:0;font:inherit;text-align:left;color:inherit}
button.mk-weekdag{cursor:pointer}
button.mk-weekdag:hover .mk-strook,.mk-dezedag .mk-strook{outline:2px solid var(--navy)}
.mk-wd,.mk-n{font-size:11px;color:var(--text-mid)}
.mk-schaal-week{margin:0 62px}
/* END_OF_S227_TEAMCHAT_CSS */

/* BOOT-CSP: loginscherm zonder style-attributen (style-src-attr). .login-verborgen zonder !important: de loginhandler zet display via el.style. */
.login-verborgen { display: none; }
.login-pass-wrap { position: relative; }
#login-pass-toggle { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--text-light); padding: 4px; line-height: 1; }
.login-reset { text-align: right; margin-top: 12px; }
#reset-btn { color: var(--text-light); }