/* kine-portal.css - extracted from kine-portal.html (Fase 1 split). Lives in mockups/ so assets/fonts/... paths stay valid. */
/* Self-hosted Hanken Grotesk (variable, weights 400-900). Bundled woff2, no CDN dependency. */
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('assets/fonts/hanken-grotesk-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face{
  font-family:'Hanken Grotesk';
  font-style:normal;
  font-weight:400 900;
  font-display:swap;
  src:url('assets/fonts/hanken-grotesk-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root{
  --teal-50:#effdfb; --teal-100:#d9f9f5; --teal-200:#a7f3e7; --teal-400:#2dd4bf; --teal-500:#14b8a6; --teal-600:#0d9488; --teal-700:#0f766e;
  --orange-50:#fff7ed; --orange-100:#ffedd5; --orange-400:#fb923c; --orange-500:#f97316; --orange-600:#ea580c; --orange-700:#c2410c; --orange-800:#9a3412;
  --pink-50:#fff1f4; --pink-500:#f43f5e; --pink-600:#e11d48; --pink-700:#be123c;
  --green-50:#ecfdf5; --green-500:#10b981; --green-700:#047857; --amber-400:#f59e0b;
  --slate-25:#fcfcfd; --slate-50:#f8fafc; --slate-100:#f1f5f9; --slate-200:#e2e8f0; --slate-900:#0f172a;
  --ink:#0f172a; --muted:#475569; --soft:#94a3b8;
  --line:rgba(15,23,42,.08); --line-2:rgba(15,23,42,.12);
  --bg:radial-gradient(circle at 12% -5%, rgba(45,212,191,.14), transparent 42rem), linear-gradient(180deg,#f6fffd,#f2fbfb);
  --sh-xs:0 1px 2px rgba(15,23,42,.05); --sh-sm:0 8px 24px rgba(15,23,42,.06); --sh:0 18px 44px rgba(15,23,42,.08); --sh-orange:0 14px 34px rgba(249,115,22,.22);
  --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:24px; --r-pill:999px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:'Hanken Grotesk','Segoe UI',system-ui,sans-serif;
  color:var(--ink); background:var(--bg); background-attachment:fixed;
  min-height:100vh; line-height:1.5; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  font-size:15px; font-weight:400; overflow-x:hidden;
}
button{font-family:inherit; cursor:pointer; border:none; background:none; color:inherit}
a{color:inherit; text-decoration:none}
svg{display:block}
/* Visible keyboard focus for every interactive element */
:focus-visible{outline:2px solid var(--teal-600); outline-offset:2px; border-radius:6px}
.nav-item:focus-visible, .tab:focus-visible, .btn:focus-visible, .triage-row:focus-visible, .add-ex:focus-visible{outline-offset:3px; box-shadow:0 0 0 4px rgba(13,148,136,.2)}
/* Spring-naar-inhoud-link: weggehouden tot een toetsenbordgebruiker erop tabt. */
.skip-link{position:fixed; top:-60px; left:12px; z-index:200; padding:10px 16px; border-radius:8px; background:var(--teal-600,#0d9488); color:#fff; font-weight:600; font-size:.9rem; box-shadow:0 6px 20px rgba(13,148,136,.35); transition:top .15s ease}
.skip-link:focus{top:12px; outline:3px solid #fff; outline-offset:2px}
#main-content:focus{outline:none}
.ic{width:20px; height:20px; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none; flex:none}
.ic-sm{width:16px; height:16px}
.kicker{text-transform:uppercase; font-size:.68rem; letter-spacing:.12em; font-weight:600; color:var(--muted)}
h1,h2,h3,h4{letter-spacing:-.025em; font-weight:600; line-height:1.18}
/* Optical tracking: tighten only the larger display sizes, let small panel titles breathe */
.panel-head h2,.section-title{letter-spacing:-.008em}
.num{font-weight:700; letter-spacing:-.035em; font-variant-numeric:tabular-nums}

/* ============ APP SHELL ============ */
/* Edge-anchored rail: the shell spans the full viewport so the nav rail hugs the LEFT edge.
   The max-width cap lives on the CONTENT column (.main-inner), not the whole .app, so there
   is no floating inset or dead space beside the rail on wide screens. */
.app{display:grid; grid-template-columns:264px minmax(0,1fr); min-height:100vh}

/* Sidebar: a SOLID full-height rail, flush to the left edge, anchored and intentional. */
.sidebar{
  position:sticky; top:0; align-self:start; height:100vh;
  display:flex; flex-direction:column; gap:4px;
  padding:22px 18px 18px; color:#dcf6f1;
  background:linear-gradient(196deg,#0c5b53 0%,#0a4842 56%,#073732 100%);
  border-right:1px solid rgba(15,23,42,.18);
  box-shadow:inset -1px 0 0 rgba(255,255,255,.04);
}
.brand{display:flex; align-items:center; gap:12px; padding:4px 6px 18px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.1)}
.brand-mark{width:40px; height:40px; border-radius:12px; background:linear-gradient(150deg,var(--teal-400),var(--teal-600)); display:grid; place-items:center; box-shadow:0 8px 20px rgba(20,184,166,.4); flex:none}
.brand-mark svg{width:23px; height:23px; stroke:#fff; stroke-width:2.4; fill:none}
.brand-name{font-weight:700; font-size:1.04rem; letter-spacing:-.035em; line-height:1; color:#fff}
.brand-name span{color:var(--teal-200)}
.brand-sub{font-size:.64rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:rgba(167,243,231,.78); margin-top:4px}
.nav{display:flex; flex-direction:column; gap:3px; flex:1; padding-top:8px}
.nav-eyebrow{font-size:.6rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:rgba(167,243,231,.58); padding:6px 12px 4px}
.nav-item{display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:var(--r); color:rgba(220,246,241,.82); font-weight:600; font-size:.92rem; min-height:44px; transition:background .15s,color .15s; position:relative}
/* Keep nav labels left-aligned so longer FR/DE labels wrap cleanly under the text, not centered under the icon. */
.nav-item .lbl{min-width:0; line-height:1.15; flex:1 1 auto; text-align:left}
@media (min-width:901px){
  /* In the fixed-width rail, top-align so a wrapped FR label (e.g. "Bibliothèque d'exercices") keeps its icon put. */
  .nav-item{align-items:flex-start}
  .nav-item .ic{margin-top:1px}
  .nav-item .badge-n{align-self:center}
}
.nav-item .ic{stroke:rgba(220,246,241,.78)}
.nav-item:hover{background:rgba(255,255,255,.08); color:#fff}
.nav-item:hover .ic{stroke:#fff}
/* Active item: brighter aqua fill plus a left accent bar so the current section reads instantly. */
.nav-item.active{background:rgba(45,212,191,.18); color:#fff; box-shadow:none}
.nav-item.active::before{content:""; position:absolute; left:-18px; top:9px; bottom:9px; width:4px; border-radius:0 4px 4px 0; background:linear-gradient(180deg,var(--teal-400),var(--teal-500))}
.nav-item.active .ic{stroke:#fff}
.nav-item .badge-n{margin-left:auto; font-size:.72rem; font-weight:700; background:var(--pink-600); color:#fff; border-radius:var(--r-pill); padding:1px 7px; min-width:20px; text-align:center}
.nav-item.active .badge-n{background:rgba(255,255,255,.22)}
.nav-item:focus-visible{outline:2px solid var(--teal-200); outline-offset:-2px; box-shadow:none}
/* Account block pinned to the rail foot. */
.me{display:flex; align-items:center; gap:11px; padding:10px; border-radius:var(--r); background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.1); margin-top:10px}
.me-av{width:38px; height:38px; border-radius:11px; background:linear-gradient(150deg,var(--teal-400),var(--teal-600)); color:#063b36; display:grid; place-items:center; font-weight:800; font-size:.84rem; flex:none}
.me-name{font-weight:600; font-size:.86rem; line-height:1.15; color:#fff}
.me-role{font-size:.72rem; color:rgba(167,243,231,.72); line-height:1.25}

/* ============ TOPBAR (content header strip) ============ */
.topbar{display:flex; align-items:center; gap:14px; min-height:60px; padding:12px clamp(16px,3vw,40px); border-bottom:1px solid var(--line); background:rgba(255,255,255,.66); backdrop-filter:blur(14px); position:sticky; top:0; z-index:50}
.topbar-inner{display:flex; align-items:center; gap:14px; width:100%; max-width:1240px; margin:0 auto}
.tb-context{display:flex; flex-direction:column; min-width:0; gap:1px}
/* Hamburger-knop: enkel zichtbaar op telefoon (zie media query <=900px). Desktop blijft ongewijzigd. */
.nav-toggle{display:none; width:44px; height:44px; flex:none; border-radius:var(--r); border:1px solid var(--line-2); background:#fff; color:var(--ink); place-items:center; box-shadow:var(--sh-xs); transition:border-color .15s,background .15s}
.nav-toggle:hover{border-color:var(--teal-200); background:var(--teal-50)}
.nav-toggle svg{width:22px; height:22px; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; fill:none}
.nav-toggle .nt-x{display:none}
/* Off-canvas overlay achter de uitgeschoven nav (alleen telefoon). */
.nav-overlay{position:fixed; inset:0; z-index:44; background:rgba(15,23,42,.42); backdrop-filter:blur(2px); opacity:0; transition:opacity .2s ease}
.nav-overlay[hidden]{display:none}
.tb-eyebrow{font-size:.62rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--teal-700)}
.tb-title{font-size:1rem; font-weight:650; letter-spacing:-.02em; color:var(--ink); line-height:1.2; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.tb-actions{display:flex; align-items:center; gap:8px; margin-left:auto; flex:0 0 auto}
/* Compact language dropdown: globe + current code + chevron, opens a small menu. */
.lang-dd{position:relative}
.lang-trigger{display:inline-flex; align-items:center; gap:7px; min-height:44px; padding:8px 12px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; color:var(--ink); font-weight:600; font-size:.84rem; box-shadow:var(--sh-xs); transition:border-color .15s,box-shadow .15s}
.lang-trigger:hover{border-color:var(--teal-200)}
.lang-trigger[aria-expanded="true"]{border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.lang-trigger .globe{width:18px; height:18px; stroke:var(--teal-600); stroke-width:2; fill:none}
.lang-trigger .code{letter-spacing:.04em}
.lang-trigger .chev{width:14px; height:14px; stroke:var(--soft); stroke-width:2.4; fill:none; transition:transform .18s}
.lang-trigger[aria-expanded="true"] .chev{transform:rotate(180deg)}
.lang-menu{position:absolute; top:calc(100% + 8px); right:0; min-width:184px; padding:6px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); box-shadow:var(--sh); z-index:60; display:none}
.lang-menu.open{display:block; animation:fade .16s ease}
.lang-opt{display:flex; align-items:center; gap:10px; width:100%; min-height:44px; padding:9px 11px; border-radius:var(--r); font-weight:600; font-size:.86rem; color:var(--ink); text-align:left; transition:background .12s}
.lang-opt:hover{background:var(--teal-50); color:var(--teal-700)}
.lang-opt .lo-code{font-size:.68rem; font-weight:700; letter-spacing:.04em; color:var(--muted); background:var(--slate-100); border-radius:6px; padding:2px 6px; min-width:30px; text-align:center}
.lang-opt .lo-name{flex:1 1 auto; min-width:0}
.lang-opt .lo-check{width:16px; height:16px; stroke:var(--teal-600); stroke-width:2.6; fill:none; opacity:0}
.lang-opt.active{background:var(--teal-50)}
.lang-opt.active .lo-code{background:var(--teal-600); color:#fff}
.lang-opt.active .lo-check{opacity:1}
.lang-opt:focus-visible{outline:2px solid var(--teal-600); outline-offset:-2px}
/* Account chip next to the language control. */
.tb-account{display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:5px 12px 5px 6px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; box-shadow:var(--sh-xs)}
.tb-account .ta-av{width:32px; height:32px; border-radius:9px; background:linear-gradient(150deg,var(--teal-400),var(--teal-700)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.76rem; flex:none}
.tb-account .ta-name{font-weight:600; font-size:.84rem; line-height:1; color:var(--ink)}
.tb-account .ta-role{font-size:.7rem; color:var(--muted); line-height:1.2; margin-top:2px}

/* ============ TOPBAR ZOEKKNOP (command-palette trigger) ============ */
.tb-search{display:inline-flex; align-items:center; gap:9px; min-height:44px; padding:8px 10px 8px 12px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; color:var(--muted); box-shadow:var(--sh-xs); font-weight:600; font-size:.84rem; transition:border-color .15s,box-shadow .15s,color .15s}
.tb-search:hover{border-color:var(--teal-200); color:var(--teal-700)}
.tb-search .ic{width:18px; height:18px; stroke:var(--teal-600); stroke-width:2; fill:none; flex:none}
.tb-search .tbs-label{color:var(--muted)}
.tb-search:hover .tbs-label{color:var(--teal-700)}
.tb-search .tbs-kbd{display:inline-flex; gap:2px}
.tb-search kbd{font-family:inherit; font-size:.66rem; font-weight:700; line-height:1; color:var(--muted); background:var(--slate-50); border:1px solid var(--line-2); border-radius:6px; padding:3px 5px; min-width:18px; text-align:center}
@media (max-width:720px){ .tb-search .tbs-label, .tb-search .tbs-kbd{display:none} .tb-search{padding:0; width:44px; height:44px; justify-content:center} }

/* ============ NOTIFICATIEBEL ============ */
.notif-dd{position:relative}
.notif-trigger{position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; color:var(--muted); box-shadow:var(--sh-xs); transition:border-color .15s,box-shadow .15s,color .15s}
.notif-trigger:hover{border-color:var(--teal-200); color:var(--teal-700)}
.notif-trigger[aria-expanded="true"]{border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14); color:var(--teal-700)}
.notif-trigger .ic{width:20px; height:20px; stroke-width:1.9}
.notif-badge{position:absolute; top:4px; right:4px; min-width:17px; height:17px; padding:0 4px; border-radius:var(--r-pill); background:var(--pink-600); color:#fff; font-size:.64rem; font-weight:700; line-height:17px; text-align:center; box-shadow:0 0 0 2px #fff}
.notif-badge[hidden]{display:none}
.notif-menu{position:absolute; top:calc(100% + 8px); right:0; width:340px; max-width:88vw; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); box-shadow:var(--sh); z-index:60; display:none; overflow:hidden}
.notif-menu.open{display:block; animation:fade .16s ease}
.notif-head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 16px 10px; border-bottom:1px solid var(--line)}
.notif-title{font-weight:700; font-size:.92rem; letter-spacing:-.01em}
.notif-allread{font-size:.78rem; font-weight:600; color:var(--teal-700); padding:4px 8px; border-radius:var(--r-sm); transition:background .12s}
.notif-allread:hover{background:var(--teal-50)}
.notif-allread:disabled{color:var(--soft); cursor:default; background:none}
.notif-list{max-height:min(70vh,420px); overflow-y:auto; padding:6px}
.notif-item{display:flex; gap:11px; width:100%; text-align:left; padding:10px 11px; border-radius:var(--r); transition:background .12s; align-items:flex-start; position:relative}
.notif-item:hover{background:var(--slate-50)}
.notif-item.unread{background:var(--teal-50)}
.notif-item.unread:hover{background:var(--teal-100)}
.notif-ic{width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none}
.notif-ic .ic{width:18px; height:18px; stroke-width:2}
.notif-ic.n-scan{background:var(--orange-50); color:var(--orange-700)}
.notif-ic.n-msg{background:var(--teal-50); color:var(--teal-700)}
.notif-ic.n-adherence{background:var(--pink-50); color:var(--pink-700)}
.notif-ic.n-followup{background:#eef2ff; color:#4338ca}
.notif-body{min-width:0; flex:1 1 auto}
.notif-text{font-size:.84rem; line-height:1.35; color:var(--ink)}
.notif-text b{font-weight:700}
.notif-time{font-size:.72rem; color:var(--soft); margin-top:3px}
.notif-dot{width:8px; height:8px; border-radius:50%; background:var(--teal-500); flex:none; margin-top:6px}
.notif-empty{padding:30px 16px; text-align:center; color:var(--muted); font-size:.86rem}

/* Main: full-width content column. The topbar spans it edge to edge; the readable content
   is capped and centered by .main-inner, so the rail hugs the screen edge while the working
   area never sprawls on ultra-wide monitors. */
.main{min-width:0; display:flex; flex-direction:column; min-height:100vh}
.main-inner{width:100%; max-width:1240px; margin:0 auto; padding:26px clamp(16px,3vw,40px) 56px; flex:1 0 auto}
.view{display:none}
.view.show{display:block; animation:fade .28s ease}
@keyframes fade{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* ============ BUTTONS / CHIPS ============ */
.btn{display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:var(--r-pill); font-weight:600; font-size:.9rem; min-height:44px; border:1px solid transparent; transition:transform .12s, box-shadow .15s, background .15s; white-space:nowrap}
.btn[hidden]{display:none}
.btn:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(120deg,var(--teal-700),#0c6056); color:#fff; box-shadow:0 6px 14px rgba(20,184,166,.16)}
.btn-primary:hover{box-shadow:0 10px 20px rgba(20,184,166,.22)}
.btn-ghost{background:rgba(255,255,255,.8); color:var(--ink); border-color:var(--line-2); box-shadow:var(--sh-xs)}
.btn-ghost:hover{background:#fff; border-color:var(--teal-200)}
.btn-orange{background:linear-gradient(120deg,var(--orange-600),var(--orange-700)); color:#fff; box-shadow:var(--sh-orange)}
.btn-sm{padding:9px 14px; min-height:44px; font-size:.82rem}
/* ----- CHIPS & STATUS-KLEURSCHAAL -----
   Eén set chip-varianten met vaste hoogte/padding/radius (border-box + min-height
   zodat chips met en zonder rand even hoog blijven). Vier verschijningsvormen:
     - filter-chip   : klikbaar, .rugscan-filters .chip (rand toggelt actief/inactief)
     - plan-badge     : chipPlan(), stip + tint (Premium = teal, Basis = slate)
     - tag-chip       : .chip met rand (regio/materiaal-tags in de bibliotheek)
     - status-badge   : stip + tint volgens de statuskleur-schaal hieronder
   Statuskleur-schaal (consequent op zowel lijst-stippen als kaart-pills):
     teal  = op schema / gekoppeld / actief
     amber = aandacht / opvolging (opvolgscan, zorgplan loopt af, intake bezig)
     pink  = enkel urgent / negatief (no-show, therapietrouw daalt, slechte feedback)
     slate = neutraal werkitem (niet gekoppeld, gepland, gearchiveerd)
     green = afgerond / klaar
   Oranje is GEEN statuskleur: het blijft de BackCare/meet-accent (scorering,
   scancijfers, andullatie). Gebruik het niet voor aandacht of acties. */
.chip{display:inline-flex; align-items:center; gap:6px; min-height:24px; padding:5px 11px; border-radius:var(--r-pill); font-weight:600; font-size:.74rem; line-height:1; box-sizing:border-box}
.chip .dot{width:7px; height:7px; border-radius:50%; flex:none}
.chip-teal{background:var(--teal-50); color:var(--teal-700)}
.chip-teal .dot{background:var(--teal-500)}
.chip-orange{background:var(--orange-50); color:var(--orange-700)}
.chip-orange .dot{background:var(--orange-500)}
.chip-pink{background:var(--pink-50); color:var(--pink-700)}
.chip-pink .dot{background:var(--pink-500)}
.chip-green{background:var(--green-50); color:var(--green-700)}
.chip-green .dot{background:var(--green-500)}
.chip-amber{background:#fffbeb; color:#b45309}
.chip-amber .dot{background:var(--amber-400)}
.chip-slate{background:var(--slate-100); color:var(--muted)}
.chip-slate .dot{background:var(--soft)}
.chip-indigo{background:#eef2ff; color:#4338ca}
.chip-indigo .dot{background:#6366f1}

/* ============ DASHBOARD ============ */
.dash-head{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:28px}
.dash-head h1{font-size:clamp(1.55rem,3.4vw,2.1rem); font-weight:650}
.dash-head .sub{color:var(--muted); font-weight:400; font-size:.94rem; margin-top:6px; max-width:46ch}
.dash-head .sub b{color:var(--teal-700)}
.quick{display:flex; flex-wrap:wrap; gap:10px}

.dash-grid{display:grid; grid-template-columns:minmax(0,1fr) 300px; gap:22px; align-items:start}

.panel{background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-sm); padding:22px 24px}
.panel + .panel{margin-top:20px}
.panel-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; flex-wrap:wrap}
.panel-head h2{font-size:1.08rem; font-weight:600}
.panel-head .meta{font-size:.8rem; color:var(--muted); font-weight:500}

/* Timeline */
.timeline{display:flex; flex-direction:column; position:relative}
.tl-row{display:grid; grid-template-columns:50px 1fr auto; gap:14px; align-items:center; padding:13px 8px; border-radius:var(--r); cursor:pointer; transition:background .15s; min-height:56px; position:relative; text-align:left; width:100%}
.tl-row:hover{background:var(--teal-50)}
.tl-time{font-weight:600; font-size:.88rem; letter-spacing:-.02em; color:var(--ink)}
.tl-rail{position:absolute; left:71px; top:6px; bottom:6px; width:2px; background:var(--line); border-radius:2px}
.tl-dot{position:absolute; left:64px; top:50%; transform:translateY(-50%); width:16px; height:16px; border-radius:50%; background:#fff; border:3px solid var(--teal-500); z-index:1}
.tl-row[data-kind="scan"] .tl-dot{border-color:var(--orange-500)}
.tl-row[data-kind="opvolging"] .tl-dot{border-color:var(--soft)}
.tl-main{padding-left:18px; min-width:0; display:flex; flex-direction:column}
.tl-name{display:block; font-weight:600; font-size:.95rem; letter-spacing:-.015em}
.tl-desc{display:block; font-size:.81rem; color:var(--muted); margin-top:2px}
.tl-go{color:var(--soft)}
.tl-row:hover .tl-go{color:var(--teal-600)}

/* Patient-app sync feed (activiteit uit de app) */
.appfeed{position:relative; display:flex; flex-direction:column}
.appfeed-rail{position:absolute; left:19px; top:14px; bottom:14px; width:2px; background:var(--line); border-radius:2px}
.appfeed-row{display:grid; grid-template-columns:40px 1fr auto; gap:12px; align-items:center; padding:11px 6px; border-radius:var(--r); position:relative; min-height:48px}
.appfeed-row:hover{background:var(--teal-50)}
.appfeed-dot{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:14px; height:14px; border-radius:50%; background:#fff; border:3px solid var(--teal-500); z-index:1}
.appfeed-row[data-kind="andullatie"] .appfeed-dot,
.appfeed-row[data-kind="scan"] .appfeed-dot{border-color:var(--orange-500)}
.appfeed-row[data-kind="feedback"] .appfeed-dot{border-color:var(--soft)}
.appfeed-ic{grid-column:1; justify-self:end; width:30px; height:30px; border-radius:9px; background:#fff; border:1px solid var(--line); color:var(--teal-600); display:grid; place-items:center}
.appfeed-row[data-kind="andullatie"] .appfeed-ic,
.appfeed-row[data-kind="scan"] .appfeed-ic{color:var(--orange-600); border-color:var(--orange-100)}
.appfeed-ic .ic{width:16px; height:16px}
.appfeed-smiley{grid-column:1; justify-self:end; display:grid; place-items:center}
.appfeed-smiley .smiley{width:30px; height:30px}
.appfeed-body{min-width:0; display:flex; flex-direction:column}
.appfeed-title{font-weight:600; font-size:.9rem; letter-spacing:-.015em; color:var(--ink)}
.appfeed-sub{font-size:.79rem; color:var(--muted); margin-top:2px}
.appfeed-time{font-size:.76rem; color:var(--muted); font-weight:500; white-space:nowrap; font-variant-numeric:tabular-nums}

/* Triage */
.triage{display:flex; flex-direction:column; gap:10px}
.triage-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:13px 14px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--slate-25); cursor:pointer; transition:border-color .15s, background .15s; min-height:56px; text-align:left; width:100%}
.triage-row:hover{border-color:var(--teal-200); background:#fff}
.triage-av{width:40px; height:40px; border-radius:12px; color:#fff; display:grid; place-items:center; font-weight:600; font-size:.82rem; flex:none}
/* Disciplined avatar tints: teal scale only, subtle per-person hue rotation within teal.
   Orange is the BackCare/scan-measurement accent (score ring + number, scan numbers, scan tier,
   andullatie intensity) and is never used for avatars or generic actions. */
.av-tint{background:var(--teal-50); color:var(--teal-700); border:1px solid var(--teal-200)}
.av-1{background:linear-gradient(150deg,var(--teal-400),var(--teal-600)); color:#fff; border:none}
.av-2{background:linear-gradient(150deg,var(--teal-500),var(--teal-700)); color:#fff; border:none}
.av-3{background:var(--teal-50); color:var(--teal-700); border:1px solid var(--teal-200)}
.av-4{background:var(--teal-100); color:var(--teal-700); border:1px solid var(--teal-200)}
.triage-info{flex:1; min-width:130px}
.triage-name{display:block; font-weight:600; font-size:.92rem}
.triage-reason{font-size:.8rem; color:var(--muted); margin-top:3px; display:flex; align-items:center; gap:6px; flex-wrap:wrap}
.triage-act{font-weight:600; font-size:.82rem; color:var(--teal-700); display:inline-flex; align-items:center; gap:5px; white-space:nowrap}

/* Scan-inbox: recente/onverwerkte scans als first-class rijen */
.rugscan-filters{display:flex; gap:8px; margin-left:auto}
.rugscan-filters .chip{cursor:pointer; border:1px solid transparent}
.rugscan-filters .chip-slate{border-color:var(--line)}
.scan-inbox{display:flex; flex-direction:column; gap:10px}
.scan-inbox-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:13px 14px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--slate-25); min-height:56px; text-align:left; width:100%; transition:border-color .15s, background .15s}
.scan-inbox-row:hover{border-color:var(--teal-200); background:#fff}
.scan-bron{width:40px; height:40px; border-radius:12px; background:#fff; border:1px solid var(--line); color:var(--teal-600); display:grid; place-items:center; flex:none}
.scan-bron .ic{width:20px; height:20px}
.scan-score-badge{display:flex; flex-direction:column; align-items:center; justify-content:center; width:52px; height:52px; border-radius:13px; background:linear-gradient(120deg,var(--orange-50),#fff); border:1px solid var(--orange-100); flex:none}
.scan-score-badge .score-val{font-size:1.32rem; font-weight:720; color:var(--orange-700); letter-spacing:-.04em; line-height:1; font-variant-numeric:tabular-nums}
.scan-score-badge .score-delta{font-size:.66rem; font-weight:600; color:var(--orange-600); margin-top:1px}
.scan-inbox-main{flex:1; min-width:160px; display:flex; flex-direction:column; gap:6px}
.scan-bron-label{font-size:.84rem; font-weight:600; color:var(--ink)}
.scan-inbox-meta{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.scan-datum{font-size:.8rem; color:var(--muted); font-weight:500}
.scan-inbox-act{margin-left:auto; display:flex; gap:8px; flex:none}
/* Scan-inbox: selectievakje per rij + bulk-toolbar + sorteerbare koppen */
.scan-inbox-check{flex:none; display:grid; place-items:center; width:22px}
.scan-inbox-check input{width:17px; height:17px; cursor:pointer; accent-color:var(--teal-600)}
.scan-inbox-row.is-selected{border-color:var(--teal-300, var(--teal-400)); background:#fff; box-shadow:inset 0 0 0 1px var(--teal-200)}
.scan-inbox-tools{display:flex; align-items:center; gap:12px; flex-wrap:wrap; padding:9px 12px; margin-bottom:10px; border-radius:var(--r-lg); border:1px solid var(--teal-200); background:var(--teal-50)}
.scan-inbox-tools .sit-count{font-size:.84rem; font-weight:650; color:var(--teal-700)}
.scan-inbox-tools .sit-act{display:flex; gap:8px; flex-wrap:wrap; margin-left:auto}
.scan-inbox-sort{display:flex; align-items:center; gap:6px; padding:4px 4px 10px; flex-wrap:wrap}
.scan-inbox-sort .sis-lbl{font-size:.76rem; font-weight:600; color:var(--muted); margin-right:2px}
.scan-sort-btn{display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff; color:var(--muted); font-size:.78rem; font-weight:600; cursor:pointer; transition:border-color .15s, color .15s, background .15s}
.scan-sort-btn:hover{border-color:var(--teal-200); color:var(--ink)}
.scan-sort-btn.is-active{border-color:var(--teal-400); color:var(--teal-700); background:var(--teal-50)}
.scan-sort-btn .ic{width:13px; height:13px; transition:transform .15s}
.scan-sort-btn.dir-asc .ic{transform:rotate(180deg)}
.scan-inbox-selall{display:inline-flex; align-items:center; gap:7px; font-size:.78rem; font-weight:600; color:var(--muted); cursor:pointer; user-select:none}
.scan-inbox-selall input{width:16px; height:16px; cursor:pointer; accent-color:var(--teal-600)}

/* Rugscan dossier: bron-toestel + koppeling + payout-status */
.scan-status-row{display:flex; align-items:center; gap:16px; flex-wrap:wrap; padding:12px 0 0; border-top:1px solid var(--line); margin-top:12px}
.scan-meta{display:inline-flex; align-items:center; gap:6px; font-size:.84rem; color:var(--muted)}
.scan-meta .label{font-weight:600; color:var(--ink)}
.payout-badge{display:inline-flex; align-items:center; gap:4px; padding:4px 9px; border-radius:var(--r-pill); font-weight:600; font-size:.75rem}
.payout-badge.badge-scheduled{background:var(--teal-50); color:var(--teal-700)}
.payout-badge.badge-paid{background:var(--green-50); color:var(--green-700)}
.payout-badge.badge-none{background:var(--slate-100); color:var(--muted)}
.payout-table td:nth-child(2),.payout-table th:nth-child(2){text-align:left}
.payout-table .payout-ref{font-variant-numeric:tabular-nums; font-weight:600; color:var(--muted)}

/* ============ GEDEELD KPI-KAART-PATROON ============
   Eén canoniek KPI-kaartje voor het hele portaal: witte kaart, vaste radius,
   zachte schaduw, klein uppercase label, groot getal, optionele delta-pill en
   optioneel icoon-chip. Gebruikt op het dashboard (zijbalk-kerncijfers), de
   workspace-statbalk (.status-strip) en de statistieken-KPI-tegels (.st-kpis),
   zodat alle drie identiek ogen en voldoende contrast hebben. */
.kpi-card{display:flex; align-items:center; gap:14px; padding:16px 18px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); min-width:0}
.kpi-chip{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none}
.kpi-chip .ic{width:20px; height:20px}
.kpi-body{flex:1; min-width:0}
.kpi-label{font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; line-height:1.25}
.kpi-val{display:flex; align-items:baseline; gap:8px; margin-top:7px; flex-wrap:wrap}
.kpi-val .n{font-size:1.6rem; font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--ink)}
.kpi-val .n .eu{font-size:.82rem; font-weight:700; color:var(--muted); margin-right:2px}
.kpi-val.orange .n{color:var(--orange-700)}
.kpi-pill{font-size:.72rem; font-weight:700; display:inline-flex; align-items:center; gap:2px; padding:2px 7px; border-radius:var(--r-pill); line-height:1}
.kpi-pill .ic{width:12px; height:12px}
.kpi-pill.up{background:var(--green-50); color:var(--green-700)}
.kpi-pill.down{background:var(--pink-50); color:var(--pink-600)}
.kpi-sub{font-size:.74rem; font-weight:500; color:var(--muted)}

/* Side rail stats (dashboard): stapel van gedeelde KPI-kaarten + tip-kaart. */
.rail{display:flex; flex-direction:column; gap:12px}
button.stat-link{width:100%; text-align:left; font:inherit; color:inherit; cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .12s}
button.stat-link:hover{border-color:var(--teal-200); box-shadow:var(--sh); transform:translateY(-1px)}
button.stat-link:focus-visible{outline:2px solid var(--teal-600); outline-offset:2px}
.up{color:var(--green-700)} .down{color:var(--pink-600)}
.spark{margin-top:10px; width:100%}
.rail-note{padding:16px 18px; background:linear-gradient(140deg,var(--teal-50),#fff); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm)}
.rail-note .t{font-weight:600; font-size:.86rem}
.rail-note .d{font-size:.8rem; color:var(--muted); margin-top:4px; line-height:1.5}

/* operationele dashboard-widgets (command center) */
.dash-ops{margin-top:20px}
.dash-ops .panel{margin-top:0}
.dash-ops-empty{font-size:.84rem; color:var(--muted); font-weight:500; padding:14px 14px; border-radius:var(--r-lg); border:1px dashed var(--line); background:var(--slate-25); line-height:1.5}

/* ============ PATIENT WORKSPACE ============ */
.back-link{display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:.86rem; color:var(--muted); padding:8px 4px; min-height:44px; margin-bottom:6px}
.back-link:hover{color:var(--teal-600)}
.pt-head{display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:20px 22px; background:rgba(255,255,255,.85); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-sm); margin-bottom:18px}
.pt-av{width:60px; height:60px; border-radius:18px; color:#fff; display:grid; place-items:center; font-weight:650; font-size:1.2rem; flex:none}
.pt-id{flex:1; min-width:180px}
.pt-name{font-size:1.32rem; font-weight:650; letter-spacing:-.035em; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
.pt-meta{display:flex; flex-wrap:wrap; gap:6px 16px; margin-top:7px; font-size:.84rem; color:var(--muted); font-weight:400}
.pt-meta b{color:var(--ink)}
.pt-act{display:flex; flex-wrap:wrap; gap:10px}

/* Tabs */
.tabs{display:flex; gap:4px; overflow-x:auto; padding:5px; background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:var(--r-pill); margin-bottom:20px; -webkit-overflow-scrolling:touch; scrollbar-width:none; -webkit-mask-image:linear-gradient(90deg,#000 94%,transparent); mask-image:linear-gradient(90deg,#000 94%,transparent)}
.tabs::-webkit-scrollbar{display:none}
.tab{display:inline-flex; align-items:center; padding:9px 16px; border-radius:var(--r-pill); font-weight:600; font-size:.86rem; color:var(--muted); white-space:nowrap; min-height:44px; transition:background .15s,color .15s}
.tab:hover{color:var(--teal-700)}
.tab.active{background:var(--teal-50); color:var(--teal-700); box-shadow:inset 0 0 0 1px var(--teal-200)}
.tabpanel{display:none}
.tabpanel.show{display:block; animation:fade .24s ease}

/* Status strip: grid van gedeelde KPI-kaarten (zelfde patroon als dashboard/statistieken). */
.status-strip{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:18px}
.ss-cell{display:block; padding:16px 18px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-sm); min-width:0}
.ss-label{font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.06em; line-height:1.25}
.ss-val{display:flex; align-items:baseline; gap:8px; margin-top:8px; flex-wrap:wrap}
.ss-val .n{font-size:1.6rem; font-weight:700; letter-spacing:-.04em; line-height:1; color:var(--ink)}
.ss-val.orange .n{color:var(--orange-700)}
.ss-sub{font-size:.76rem; color:var(--muted); margin-top:6px; font-weight:400}

/* Next step callout */
.nextstep{display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding:18px 20px; border-radius:var(--r-xl); background:linear-gradient(120deg,var(--teal-50),#fff 70%); border:1px solid var(--teal-200); box-shadow:var(--sh-sm); margin-bottom:18px; position:relative; overflow:hidden}
.nextstep::before{content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:linear-gradient(var(--teal-400),var(--teal-600))}
.ns-ic{width:46px; height:46px; border-radius:14px; background:#fff; border:1px solid var(--teal-200); color:var(--teal-600); display:grid; place-items:center; flex:none; box-shadow:var(--sh-xs)}
.ns-body{flex:1; min-width:180px}
.ns-k{font-size:.7rem; text-transform:uppercase; letter-spacing:.12em; font-weight:600; color:var(--teal-600)}
.ns-t{font-weight:600; font-size:1rem; margin-top:4px; letter-spacing:-.015em; line-height:1.35}

.cols-2{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start}

/* compact scan card */
.scan-compact{display:flex; gap:18px; align-items:center}
.scan-mini-spine{flex:none}
.scan-compact .body{flex:1; min-width:0}
.scan-score-row{display:flex; align-items:center; gap:12px; margin-bottom:10px}
.scan-orange-num{font-size:2.2rem; font-weight:720; color:var(--orange-700); letter-spacing:-.045em; line-height:1; font-variant-numeric:tabular-nums}
.findings{display:flex; flex-direction:column; gap:8px; margin:6px 0 12px}
.finding{display:flex; gap:9px; align-items:flex-start; font-size:.85rem; color:var(--muted); font-weight:400}
.finding .ic{margin-top:1px; width:16px; height:16px}
.linkbtn{display:inline-flex; align-items:center; gap:6px; font-weight:600; font-size:.85rem; color:var(--teal-700); padding:8px 2px; min-height:44px}
.linkbtn:hover{color:var(--teal-600)}

/* ===== Therapie-opvolging (signature list) ===== */
.followup{display:flex; flex-direction:column}
.fu-row{display:grid; grid-template-columns:46px minmax(0,1.4fr) auto auto; gap:14px; align-items:center; padding:15px 6px; border-top:1px solid var(--line)}
.fu-row:first-child{border-top:none}
.fu-thumb{width:46px; height:30px; border-radius:9px; overflow:hidden; background:var(--teal-50); border:1px solid var(--line); flex:none}
.fu-thumb img{width:100%; height:100%; object-fit:cover}
.fu-name{font-weight:600; font-size:.92rem; letter-spacing:-.015em}
.fu-presc{font-size:.78rem; color:var(--muted); margin-top:3px; display:flex; flex-wrap:wrap; gap:4px 10px}
.fu-presc b{color:var(--teal-700); font-weight:600}
.weekstrip{display:flex; gap:5px}
.wd{width:15px; height:15px; border-radius:5px; background:var(--slate-100); border:1px solid var(--line); display:grid; place-items:center}
.wd.done{background:var(--green-500); border-color:var(--green-500)}
.wd.done svg{width:9px; height:9px; stroke:#fff; stroke-width:3.4; fill:none; stroke-linecap:round; stroke-linejoin:round}
.wd.miss{background:#fff}
.fu-nums{display:flex; align-items:center; gap:14px}
.fu-num{text-align:right}
.fu-num .big{font-size:1.05rem; font-weight:700; letter-spacing:-.025em}
.fu-num .sm{font-size:.68rem; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:.05em}
.smiley{width:30px; height:30px; flex:none}
/* andullation row inside follow-up */
.andu-row{display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:15px 14px; margin-top:14px; border-radius:var(--r-lg); background:linear-gradient(120deg,var(--orange-50),#fff 75%); border:1px solid var(--orange-100)}
.andu-ic{width:42px; height:42px; border-radius:12px; background:#fff; border:1px solid var(--orange-100); color:var(--orange-500); display:grid; place-items:center; flex:none}
.andu-info{flex:1; min-width:170px}
.andu-info .t{font-weight:600; font-size:.92rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.andu-info .d{font-size:.8rem; color:var(--muted); margin-top:4px}
.andu-metrics{display:flex; gap:18px; flex-wrap:wrap}
.andu-metrics .m .n{font-weight:700; font-size:1rem}
.andu-metrics .m .l{font-size:.66rem; color:var(--muted); font-weight:500; text-transform:uppercase; letter-spacing:.05em}
/* adherence summary bar */
.adh-summary{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:16px 4px 4px; margin-top:14px; border-top:1px dashed var(--line-2)}
.adh-bar{flex:1; min-width:150px; height:11px; border-radius:var(--r-pill); background:var(--slate-100); overflow:hidden; position:relative}
.adh-fill{height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--teal-400),var(--green-500))}
.adh-pct{font-weight:700; font-size:1.2rem; letter-spacing:-.035em}

/* administratief / verzekering card (overzicht) */
.adm-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 22px}
.adm-cell{min-width:0}
.adm-k{font-size:.68rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.adm-v{font-weight:600; font-size:.9rem; margin-top:3px; overflow-wrap:anywhere; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.adm-v .pt-dim{font-weight:500}
.adm-presc{margin-top:16px; padding-top:14px; border-top:1px dashed var(--line-2)}
.adm-presc-h{font-weight:600; font-size:.86rem; margin-bottom:12px}
@media (max-width:560px){ .adm-grid{grid-template-columns:1fr} }

/* facturatie tab: RIZIV-prestaties + beurtenteller (deel 2) */
.fa-counter{margin:4px 0 18px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r-lg); background:var(--teal-50)}
.fa-counter-top{display:flex; align-items:baseline; justify-content:space-between; gap:12px}
.fa-counter-k{font-size:.68rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.fa-counter-v{font-weight:800; font-size:1.15rem; letter-spacing:-.03em; color:var(--teal-700)}
.fa-bar{height:8px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line); overflow:hidden; margin:8px 0 6px}
.fa-bar-fill{display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--teal-400),var(--teal-600))}
.fa-bar-fill.fa-fill-bijna{background:linear-gradient(90deg,var(--amber-400),#f59e0b)}
.fa-bar-fill.fa-fill-op{background:linear-gradient(90deg,#f59e0b,var(--orange-500))}
.fa-counter-sub{font-size:.78rem; color:var(--muted)}
.fa-counter-note{margin-top:8px; font-size:.8rem; font-weight:600; color:var(--orange-700)}
.fa-counter-note.fa-note-bijna{color:#b45309}
.fa-table-wrap{overflow-x:auto; -webkit-overflow-scrolling:touch}
.fa-table{min-width:560px}
.fa-table .fa-num{text-align:right; white-space:nowrap}
.fa-table .fa-code{font-variant-numeric:tabular-nums; font-weight:600; color:var(--teal-700)}
.fa-table .fa-status-cell{white-space:nowrap}
.fa-status-btn{background:none; border:0; padding:0; cursor:pointer; font:inherit}
.fa-status-btn:hover .chip{filter:brightness(.97)}
.fa-status-btn:focus-visible{outline:2px solid var(--teal-600); outline-offset:2px; border-radius:var(--r-pill)}
.fa-table tfoot .fa-total-row td{border-top:2px solid var(--line); border-bottom:none; font-weight:700; padding-top:10px}
.fa-table .fa-total-sub{font-weight:500; color:var(--muted); font-size:.8rem}
.fa-actions{margin-top:16px; display:flex; justify-content:flex-end}
@media (max-width:560px){ .fa-actions{justify-content:stretch} .fa-actions .btn{width:100%; justify-content:center} }

/* ===== Rugscan deep dive ===== */
.scan-hero{display:grid; grid-template-columns:200px 1fr; gap:24px; align-items:center}
.gauge-wrap{display:flex; flex-direction:column; align-items:center; gap:8px; width:200px}
.gauge-wrap svg.gauge{width:200px; height:200px; flex:none; display:block}
.gauge-legend{display:flex; gap:16px; flex-wrap:wrap; justify-content:center}
.gl{display:flex; align-items:center; gap:6px; font-size:.76rem; font-weight:500; color:var(--muted)}
.gl .sw{width:11px; height:11px; border-radius:4px; flex:none}
.scan-hero-side{min-width:0}
.region-list{display:flex; flex-direction:column; gap:12px; margin-top:6px}
.region{display:grid; grid-template-columns:118px 1fr 48px; gap:12px; align-items:center}
.region .rn{font-weight:500; font-size:.83rem}
.region .rbar{height:9px; border-radius:var(--r-pill); background:var(--slate-100); overflow:hidden}
.region .rbar i{display:block; height:100%; border-radius:var(--r-pill); background:linear-gradient(90deg,var(--teal-400),var(--teal-600))}
.region .rbar.warn i{background:linear-gradient(90deg,var(--orange-400),var(--orange-600))}
.region .rv{text-align:right; font-weight:600; font-size:.83rem; font-variant-numeric:tabular-nums}

.spine-deep{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.15fr); gap:22px; align-items:stretch}
.spine-note{min-width:0}
/* Real 3D spine viewer (embedded, lazy, served over http) */
.scan3d{position:relative; width:100%; height:clamp(420px,58vh,560px); border-radius:var(--r-xl); overflow:hidden; background:radial-gradient(circle at 50% 18%, #ffffff, #f4f9f8 70%); border:1px solid var(--line)}
/* Static on-brand fallback shown behind the iframe; hidden once the 3D viewer loads. */
.scan3d-fallback{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:20px; z-index:0}
.scan3d-fallback svg{height:88%; width:auto; max-width:100%}
.scan3d iframe{border:0; width:100%; height:100%; display:block}
.scan3d-load{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; background:radial-gradient(circle at 50% 18%, #ffffff, #f4f9f8 70%); color:var(--muted); font-size:.82rem; font-weight:500; transition:opacity .4s ease; z-index:1}
.scan3d-load.hide{opacity:0; pointer-events:none}
.scan3d-load .redeem-spin{width:24px; height:24px; border-width:3px}
.scan3d-cap{display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-top:10px}
.scan3d-hint{display:inline-flex; align-items:center; gap:6px; font-size:.76rem; color:var(--muted); font-weight:400}
.scan3d-legend{display:flex; flex-wrap:wrap; gap:8px 14px; margin-left:auto}
.scan3d-legend .gl{display:flex; align-items:center; gap:6px; font-size:.76rem; font-weight:400; color:var(--muted)}
.scan3d-legend .sw{width:11px; height:11px; border-radius:4px; flex:none; border:1px solid var(--line)}
.bevinding{display:flex; align-items:flex-start; gap:12px; padding:13px 14px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--slate-25)}
.bevinding + .bevinding{margin-top:10px}
.bev-body{flex:1; min-width:0}
.bev-t{font-weight:600; font-size:.9rem}
.bev-d{font-size:.82rem; color:var(--muted); margin-top:4px; line-height:1.5}

.delta-row{display:flex; flex-wrap:wrap; gap:10px}
.delta{flex:1; min-width:110px; padding:13px 15px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--slate-25)}
.delta .l{font-size:.72rem; color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em}
.delta .v{display:flex; align-items:baseline; gap:6px; margin-top:5px}
.delta .v .n{font-size:1.3rem; font-weight:700; letter-spacing:-.035em}

/* empty state */
.empty{display:flex; flex-direction:column; align-items:center; text-align:center; gap:14px; padding:42px 24px}
.empty-ic{width:72px; height:72px; border-radius:22px; background:var(--teal-50); color:var(--teal-500); display:grid; place-items:center}
.empty-ic .ic{width:34px; height:34px}
.empty h3{font-size:1.1rem}
.empty p{color:var(--muted); max-width:380px; font-size:.9rem; font-weight:500}
.empty .btn{margin-top:2px}

/* ===== Loading: herbruikbare skeleton-laadstaat met subtiele shimmer ===== */
/* .skeleton kleurt placeholder-blokken; de shimmer loopt over een lichte teal-gradient.
   prefers-reduced-motion zet de animatie uit en toont een rustige statische tint. */
.skeleton{position:relative; overflow:hidden; background:var(--slate-100); border-radius:var(--r-sm)}
.skeleton::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent 0, rgba(45,212,191,.10) 40%, rgba(255,255,255,.55) 50%, rgba(45,212,191,.10) 60%, transparent 100%);
  animation:skel-shimmer 1.25s ease-in-out infinite}
@keyframes skel-shimmer{100%{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){
  .skeleton::after{animation:none; background:rgba(45,212,191,.06)}
}
/* placeholder-vormen */
.skel-line{height:11px; margin:6px 0; border-radius:6px}
.skel-line.w-90{width:90%} .skel-line.w-75{width:75%} .skel-line.w-60{width:60%}
.skel-line.w-45{width:45%} .skel-line.w-30{width:30%} .skel-line.w-20{width:20%}
.skel-av{width:42px; height:42px; border-radius:50%; flex:0 0 auto}
.skel-pill{height:22px; width:74px; border-radius:var(--r-pill)}
.skel-num{height:30px; width:56px; border-radius:8px}
/* rij-skelet: avatar + twee tekstregels (triage/inbox/lijst) */
.skel-row{display:flex; align-items:center; gap:14px; padding:13px 12px; border-radius:var(--r-lg); border:1px solid var(--line); background:#fff; margin-bottom:10px}
.skel-row-body{flex:1 1 auto; min-width:0}
/* kaart-skelet: thumb + body (oefenbib-grid) */
.skel-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:16px}
.skel-card{border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; overflow:hidden}
.skel-thumb{height:140px; border-radius:0}
.skel-card-body{padding:14px}
/* tabel-skelet: cellen binnen een tabelrij */
.skel-cell{height:12px; border-radius:6px}
.skel-table-row .skel-av{width:34px; height:34px}
/* KPI / stat-skelet in de zijrail */
.skel-stat{display:flex; align-items:center; gap:12px; padding:12px 4px}

/* ===== Error/retry: herbruikbare foutstaat (aqua) ===== */
.state-error{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; padding:40px 24px}
.state-error .se-ic{width:64px; height:64px; border-radius:20px; background:var(--orange-50); color:var(--orange-500); display:grid; place-items:center}
.state-error .se-ic .ic{width:30px; height:30px}
.state-error h3{font-size:1.05rem; margin:0; color:var(--ink)}
.state-error p{color:var(--muted); max-width:360px; font-size:.88rem; font-weight:500; margin:0; line-height:1.5}
.state-error .btn{margin-top:4px}

/* ===== Therapie & zorgplan ===== */
.ex-list{display:flex; flex-direction:column}
.ex-item{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:14px 8px; border-top:1px solid var(--line)}
.ex-item:first-child{border-top:none}
.ex-grip{color:var(--soft); cursor:grab; display:flex; flex-direction:column; gap:3px}
.ex-grip span{width:14px; height:2px; background:currentColor; border-radius:2px}
.ex-thumb{width:54px; height:36px; border-radius:10px; overflow:hidden; background:var(--teal-50); border:1px solid var(--line); flex:none}
.ex-thumb img{width:100%; height:100%; object-fit:cover}
.ex-main{flex:1; min-width:150px}
.ex-name{font-weight:600; font-size:.94rem}
.ex-sub{font-size:.78rem; color:var(--muted); margin-top:3px; display:flex; flex-wrap:wrap; align-items:center; gap:5px 12px}
.ex-sub b{color:var(--teal-700); font-weight:600}
.ex-tools{display:flex; gap:6px}
.icon-btn{width:44px; height:44px; border-radius:11px; border:1px solid var(--line); background:#fff; color:var(--muted); display:grid; place-items:center; transition:border-color .15s,color .15s}
.icon-btn:hover{border-color:var(--teal-200); color:var(--teal-600)}
.add-ex{display:flex; align-items:center; justify-content:center; gap:9px; width:100%; padding:14px; margin-top:14px; border-radius:var(--r-lg); border:1px dashed var(--teal-200); color:var(--teal-600); font-weight:600; font-size:.9rem; background:var(--teal-50); min-height:52px}
.add-ex:hover{background:var(--teal-100)}

/* andullation recommendation */
.andu-rec{display:flex; flex-wrap:wrap; gap:14px; padding:18px 20px; border-radius:var(--r-xl); background:linear-gradient(125deg,var(--orange-50),#fff 80%); border:1px solid var(--orange-100); margin-bottom:18px}
.andu-rec .ic-big{width:50px; height:50px; border-radius:15px; background:#fff; border:1px solid var(--orange-100); color:var(--orange-500); display:grid; place-items:center; flex:none}
.andu-rec .body{flex:1; min-width:220px}
.andu-rec .k{font-size:.68rem; text-transform:uppercase; letter-spacing:.12em; font-weight:600; color:var(--orange-600)}
.andu-rec .t{font-weight:600; font-size:1.05rem; margin-top:4px; letter-spacing:-.015em}
.andu-rec .d{font-size:.85rem; color:var(--muted); margin-top:6px; line-height:1.6; max-width:560px}

.sched-table{width:100%; border-collapse:collapse; font-size:.84rem}
.sched-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-lg); border:1px solid var(--line)}
.sched-table th,.sched-table td{padding:10px 12px; text-align:center; border-bottom:1px solid var(--line); white-space:nowrap}
.sched-table th{background:var(--slate-50); font-weight:600; font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.sched-table tbody tr:last-child td{border-bottom:none}
.sched-table td:first-child,.sched-table th:first-child{text-align:left; font-weight:600; position:sticky; left:0; background:var(--slate-50)}
.sched-table tbody td:first-child{background:#fff}
.prog-pill{display:inline-block; min-width:30px; padding:3px 8px; border-radius:var(--r-pill); background:var(--orange-50); color:var(--orange-700); font-weight:600; font-size:.78rem}
.sched-meta{display:flex; flex-wrap:wrap; gap:10px; margin-top:14px}
.sm-pill{display:inline-flex; align-items:center; gap:7px; padding:7px 13px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line); font-weight:500; font-size:.8rem; color:var(--muted)}
.sm-pill b{color:var(--ink); font-weight:600}

/* ===== Voortgang chart ===== */
.chart-wrap{position:relative}
.chart-legend{display:flex; flex-wrap:wrap; gap:18px; margin-bottom:6px}
.cl{display:flex; align-items:center; gap:7px; font-size:.82rem; font-weight:500; color:var(--muted)}
.cl .ln{width:18px; height:3px; border-radius:2px; flex:none}
.axis{display:flex; justify-content:space-between; font-size:.72rem; color:var(--muted); font-weight:500; padding:0 4px; margin-top:4px}
/* Grafiek met y-as: een smalle waardekolom links + de uitrekbare SVG ernaast. De x-as
   onder de grafiek krijgt dezelfde linkerinspring zodat de maandlabels onder de staven
   blijven staan. De y-aslabels lijnen uit op de plot-band (boven=max, onder=min) via een
   padding die overeenkomt met de SVG-marges (top 18px, bodem 26px). */
.chart-wrap.has-yaxis{--yaxis-w:42px}
.chart-plot{display:flex; align-items:stretch; gap:8px}
.chart-svg{flex:1; min-width:0; display:flex}
.chart-svg svg{width:100%}
.chart-yaxis{flex:none; width:var(--yaxis-w); display:flex; flex-direction:column; justify-content:space-between; padding:18px 0 26px; text-align:right; font-size:.68rem; font-weight:600; color:var(--soft); font-variant-numeric:tabular-nums; line-height:1}
.chart-wrap.has-yaxis .axis{padding-left:calc(var(--yaxis-w) + 8px)}
.narrative{margin-top:16px; padding:15px 17px; border-radius:var(--r-lg); background:var(--teal-50); border:1px solid var(--teal-100); font-size:.88rem; color:var(--teal-700); font-weight:400; line-height:1.6}
.narrative b{font-weight:600}

/* aanklikbare scangeschiedenis (gedeelde scans:[]) */
.vg-hist-list{display:flex; flex-direction:column; gap:8px}
.vg-hist-row{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:11px 14px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; box-shadow:var(--sh-xs); cursor:pointer; transition:border-color .15s,box-shadow .15s,transform .15s}
.vg-hist-row:hover{border-color:var(--orange-400); box-shadow:var(--sh-sm)}
.vg-hist-row:focus-visible{outline:2px solid var(--orange-500); outline-offset:2px}
.vg-hist-ic{display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; flex:none; border-radius:10px; background:var(--orange-50); color:var(--orange-600)}
.vg-hist-body{display:flex; flex-direction:column; gap:2px; flex:1; min-width:0}
.vg-hist-t{font-weight:600; font-size:.9rem; color:var(--ink)}
.vg-hist-d{font-size:.78rem; color:var(--muted)}
.vg-hist-num{font-weight:700; font-size:1.05rem; color:var(--orange-700)}
.vg-hist-chev{color:var(--soft); flex:none}

/* ===== Intake / Afspraken / Notities ===== */
.q-list{display:flex; flex-direction:column}
.q-row{display:flex; align-items:center; gap:13px; padding:13px 6px; border-top:1px solid var(--line)}
.q-row:first-child{border-top:none}
.q-check{width:24px; height:24px; border-radius:8px; display:grid; place-items:center; flex:none}
.q-check.on{background:var(--green-500); color:#fff}
.q-check.off{background:var(--slate-100); color:var(--soft); border:1px solid var(--line)}
.q-check .ic{width:14px; height:14px; stroke-width:3}
.q-txt{flex:1; min-width:0; font-weight:500; font-size:.9rem}
.q-txt.muted{color:var(--muted); font-weight:400}
.q-status{font-size:.74rem; font-weight:600; padding:3px 10px; border-radius:var(--r-pill); white-space:nowrap}
.intake-progress{display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-bottom:18px; padding:16px 18px; border-radius:var(--r-lg); background:var(--slate-25); border:1px solid var(--line)}

.appt-list{display:flex; flex-direction:column; gap:10px}
.appt{display:flex; align-items:center; gap:14px; padding:14px 16px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--slate-25)}
.appt-date{width:54px; text-align:center; flex:none; padding:6px 0; border-radius:11px; background:#fff; border:1px solid var(--line)}
.appt-date .d{font-size:1.2rem; font-weight:700; letter-spacing:-.035em; line-height:1}
.appt-date .m{font-size:.66rem; font-weight:600; text-transform:uppercase; color:var(--muted)}
.appt-body{flex:1; min-width:0}
.appt-t{font-weight:600; font-size:.9rem}
.appt-d{font-size:.8rem; color:var(--muted); margin-top:3px}

.note-add{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:16px}
.note-add input{flex:1; min-width:160px; min-height:44px; padding:11px 15px; border-radius:var(--r-pill); border:1px solid var(--line-2); font-family:inherit; font-size:.9rem; background:#fff}
.note-add input::placeholder{color:var(--muted)}
.note-add input:focus{outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.notes{display:flex; flex-direction:column; gap:12px}
.note{padding:14px 16px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--slate-25)}
.note-meta{display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:.76rem; color:var(--muted); font-weight:500}
.note-meta .av{width:24px; height:24px; border-radius:7px; background:var(--teal-500); color:#fff; display:grid; place-items:center; font-size:.66rem; font-weight:600}
.note p{font-size:.88rem; color:var(--ink); line-height:1.6; font-weight:400}
/* Werkruimte-bewerken: afspraakacties + notitie verwijderen */
.appt-act{display:flex; gap:6px; flex:none}
.note-del{margin-left:auto; width:30px; height:30px; border-radius:8px; flex:none}
.note-del:hover{border-color:var(--pink-500); color:var(--pink-600)}
.appt-act .icon-btn:hover{border-color:var(--pink-500); color:var(--pink-600)}
.appt-act .icon-btn[data-appt-edit]:hover{border-color:var(--teal-200); color:var(--teal-600)}
.appt-act .icon-btn.appt-status-btn:hover{border-color:var(--teal-200); color:var(--teal-600)}

/* ===== Afspraak-levenscyclus (deel 3): statusweergave in het dossier ===== */
/* Afgeronde voorbije slots: grijs/afgevinkt. */
.appt.appt-st-aanwezig{background:var(--slate-50); border-color:var(--line)}
.appt.appt-st-aanwezig .appt-t{color:var(--muted)}
/* No-show: rood accent. Geannuleerd: doorgehaald + grijs. */
.appt.appt-st-niet-gekomen{background:var(--pink-50); border-color:var(--pink-200)}
.appt.appt-st-geannuleerd{background:var(--slate-50); opacity:.7}
.appt.appt-st-geannuleerd .appt-t{text-decoration:line-through; color:var(--muted)}
.appt.appt-st-geannuleerd .appt-date{opacity:.6}
/* Afgevinkt-chip + doorhaling-chip + rood-gestreepte no-show-chip. */
.appt-st-chip{gap:5px}
.appt-st-chip .ic{width:13px; height:13px}
.appt-cancelled-chip{text-decoration:line-through}
.appt-noshow-chip{color:var(--pink-700); background:repeating-linear-gradient(135deg, var(--pink-50), var(--pink-50) 5px, #ffe1e8 5px, #ffe1e8 10px); border:1px solid var(--pink-200)}

/* Zwevend statusmenu (dossier + agenda). */
.appt-status-menu{position:fixed; z-index:90; min-width:184px; background:#fff; border:1px solid var(--line-2); border-radius:var(--r-lg); box-shadow:var(--sh); padding:6px; display:flex; flex-direction:column; gap:2px}
.asm-item{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:9px 11px; border:none; border-radius:9px; background:transparent; font:inherit; font-size:.86rem; color:var(--ink); cursor:pointer}
.asm-item:hover,.asm-item:focus-visible{background:var(--teal-50); outline:none}
.asm-item .asm-dot{width:9px; height:9px; border-radius:50%; flex:none; background:var(--soft)}
.asm-aanwezig .asm-dot{background:var(--green-500)}
.asm-niet-gekomen .asm-dot{background:var(--pink-500)}
.asm-geannuleerd .asm-dot{background:var(--soft)}
.asm-gepland .asm-dot{background:var(--teal-500)}
.asm-item .asm-lbl{flex:1; min-width:0}
.asm-item.is-on{font-weight:650}
.asm-check{width:15px; height:15px; color:var(--teal-600); flex:none}
.appt-status-menu .asm-gepland{margin-top:3px; border-top:1px solid var(--line); padding-top:11px; border-radius:0 0 9px 9px}

.section-title{display:flex; align-items:center; gap:9px; font-size:.96rem; font-weight:600; margin:0 0 14px}
.section-title .ic{color:var(--teal-500)}
.lib-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:14px}
.lib-card{display:flex; align-items:center; gap:12px; border:1px solid var(--line); border-radius:var(--r-lg); padding:13px; background:var(--slate-25)}

/* ============ GRATIS-SCAN CODE VERZILVEREN ============ */
.redeem-grid{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; align-items:start}
.redeem-head{display:flex; align-items:flex-start; gap:14px; margin-bottom:18px}
.redeem-qr{width:46px; height:46px; border-radius:13px; background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-600); display:grid; place-items:center; flex:none}
.redeem-qr .ic{width:24px; height:24px}
.redeem-head .t{font-weight:600; font-size:1.05rem; letter-spacing:-.015em}
.redeem-head .d{font-size:.84rem; color:var(--muted); margin-top:4px; line-height:1.55; max-width:48ch}
.redeem-form{display:flex; flex-direction:column; gap:12px}
.redeem-input-row{display:flex; flex-wrap:wrap; gap:10px}
.code-input{flex:1; min-width:170px; min-height:44px; padding:13px 16px; border-radius:var(--r-pill); border:1px solid var(--line-2); font-family:inherit; font-size:1rem; font-weight:500; letter-spacing:.04em; font-variant-numeric:tabular-nums; background:#fff; color:var(--ink); text-transform:uppercase}
.code-input::placeholder{color:var(--muted); font-weight:400; letter-spacing:.02em}
.code-input:focus{outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.redeem-actions{display:flex; flex-wrap:wrap; gap:10px}
.redeem-result{display:none; align-items:flex-start; gap:12px; padding:15px 16px; border-radius:var(--r-lg); background:linear-gradient(120deg,var(--green-50),#fff 78%); border:1px solid #bbf7d0; margin-top:4px}
.redeem-result.show{display:flex; animation:fade .24s ease}
.redeem-result .rr-ic{width:36px; height:36px; border-radius:11px; background:#fff; border:1px solid #bbf7d0; color:var(--green-700); display:grid; place-items:center; flex:none}
.redeem-result .rr-t{font-weight:600; font-size:.92rem}
.redeem-result .rr-d{font-size:.82rem; color:var(--muted); margin-top:3px; line-height:1.5}
.redeem-scanning{display:none; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--r-lg); background:var(--teal-50); border:1px solid var(--teal-100); font-size:.84rem; color:var(--teal-700); font-weight:500; margin-top:4px}
.redeem-scanning.show{display:flex}
.redeem-spin{width:16px; height:16px; border-radius:50%; border:2px solid var(--teal-200); border-top-color:var(--teal-600); animation:redeemspin .8s linear infinite; flex:none}
@keyframes redeemspin{to{transform:rotate(360deg)}}
.redeem-aside{padding:16px 18px 16px 22px; border-radius:var(--r-xl); background:linear-gradient(135deg,var(--teal-50),#fff 70%); border:1px solid var(--teal-100); box-shadow:inset 3px 0 0 var(--teal-200)}
.redeem-aside .rk{font-size:.68rem; text-transform:uppercase; letter-spacing:.1em; font-weight:600; color:var(--muted)}
.redeem-aside .rbig{display:flex; align-items:baseline; gap:8px; margin-top:8px}
.redeem-aside .rbig .n{font-size:1.7rem; font-weight:700; letter-spacing:-.04em; line-height:1}
.redeem-aside .rbig .e{font-size:1.05rem; font-weight:600; color:var(--teal-700)}
.redeem-aside .rsub{font-size:.8rem; color:var(--muted); margin-top:6px; line-height:1.5}
.redeem-note{display:flex; gap:9px; align-items:flex-start; font-size:.78rem; color:var(--muted); font-weight:400; line-height:1.5; margin-top:12px; padding-top:12px; border-top:1px solid var(--line)}
.redeem-note .ic{margin-top:1px; color:var(--teal-500); flex:none}

/* ============ OEFENBIBLIOTHEEK ============ */
.lib-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:18px}
.lib-search{position:relative; flex:1; min-width:200px}
.lib-search .ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--soft); width:18px; height:18px}
.lib-search input{width:100%; min-height:44px; padding:12px 16px 12px 42px; border-radius:var(--r-pill); border:1px solid var(--line-2); font-family:inherit; font-size:.92rem; background:#fff; color:var(--ink)}
.lib-search input::placeholder{color:var(--muted); font-weight:400}
.lib-search input:focus{outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.lib-tabs{display:inline-flex; gap:4px; padding:4px; background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:var(--r-pill); max-width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none}
.lib-tabs::-webkit-scrollbar{display:none}
.lib-tab{display:inline-flex; align-items:center; flex:0 0 auto; padding:10px 16px; border-radius:var(--r-pill); font-weight:600; font-size:.84rem; color:var(--muted); white-space:nowrap; min-height:44px; transition:background .15s,color .15s}
.lib-tab:hover{color:var(--teal-700)}
.lib-tab.active{background:var(--teal-50); color:var(--teal-700); box-shadow:inset 0 0 0 1px var(--teal-200)}
/* Compacte filterbalk: vier dropdown-triggers op een rij. Spaart verticale ruimte t.o.v. de oude volle chip-rijen. */
.lib-filterbar{display:flex; flex-wrap:wrap; align-items:center; gap:9px; margin-bottom:12px}
.lib-fdd{position:relative}
.lib-fdd-trigger{display:inline-flex; align-items:center; gap:7px; padding:9px 12px; min-height:44px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line-2); color:var(--muted); font-family:inherit; font-weight:600; font-size:.82rem; line-height:1; cursor:pointer; transition:background .15s,border-color .15s,color .15s}
.lib-fdd-trigger:hover{border-color:var(--teal-200); color:var(--teal-700)}
.lib-fdd-trigger:focus-visible{outline:2px solid var(--teal-400); outline-offset:2px}
.lib-fdd-chev{width:14px; height:14px; color:var(--soft); transition:transform .15s,color .15s}
.lib-fdd-trigger[aria-expanded="true"]{border-color:var(--teal-200); color:var(--teal-700)}
.lib-fdd-trigger[aria-expanded="true"] .lib-fdd-chev{transform:rotate(180deg); color:var(--teal-500)}
/* Actieve dropdown: gevulde aqua-pil zodat een ingestelde filter opvalt. */
.lib-fdd.is-set .lib-fdd-trigger{background:var(--teal-50); border-color:var(--teal-200); color:var(--teal-700)}
.lib-fdd.is-set .lib-fdd-name{color:var(--muted); font-weight:600}
.lib-fdd-val{display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--r-pill); background:var(--teal-600); color:#fff; font-size:.74rem; font-weight:700; letter-spacing:.01em}
.lib-fdd-panel{position:absolute; top:calc(100% + 6px); left:0; min-width:184px; max-height:300px; overflow-y:auto; padding:6px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); box-shadow:var(--sh); z-index:60; animation:fade .16s ease}
.lib-fdd-opt{display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:9px 11px; border-radius:var(--r); font-family:inherit; font-weight:600; font-size:.86rem; color:var(--ink); text-align:left; background:none; border:0; cursor:pointer; transition:background .12s,color .12s}
.lib-fdd-opt:hover{background:var(--teal-50); color:var(--teal-700)}
.lib-fdd-opt:focus-visible{outline:2px solid var(--teal-600); outline-offset:-2px}
.lib-fdd-opt .lo-name{flex:1 1 auto; min-width:0}
.lib-fdd-opt .lo-check{width:16px; height:16px; stroke:var(--teal-600); stroke-width:2.6; fill:none; opacity:0; flex:none}
.lib-fdd-opt.active{background:var(--teal-50); color:var(--teal-700)}
.lib-fdd-opt.active .lo-check{opacity:1}
/* Rij met actieve filters als verwijderbare pillen + alles-wissen. */
.lib-active-filters{display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-bottom:20px}
.lib-active-lbl{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--muted)}
.lib-fpill{display:inline-flex; align-items:center; gap:6px; padding:6px 6px 6px 12px; border-radius:var(--r-pill); background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-700); font-weight:600; font-size:.78rem; line-height:1}
.lib-fpill .fp-x{display:inline-grid; place-items:center; width:22px; height:22px; border-radius:50%; border:0; background:transparent; color:var(--teal-700); cursor:pointer; transition:background .12s}
.lib-fpill .fp-x:hover{background:var(--teal-100)}
.lib-fpill .fp-x:focus-visible{outline:2px solid var(--teal-600); outline-offset:1px}
.lib-fpill .fp-x svg{width:13px; height:13px; stroke:currentColor; stroke-width:2.4; fill:none}
.lib-clear-all{display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; color:var(--muted); font-family:inherit; font-weight:600; font-size:.78rem; line-height:1; cursor:pointer; transition:background .15s,border-color .15s,color .15s}
.lib-clear-all:hover{border-color:var(--teal-200); color:var(--teal-700); background:var(--teal-50)}
.lib-clear-all:focus-visible{outline:2px solid var(--teal-400); outline-offset:2px}
.lib-clear-all svg{width:13px; height:13px; stroke:currentColor; stroke-width:2.4; fill:none}
.exlib-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:16px}
.exlib-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; overflow:hidden; transition:border-color .15s, box-shadow .15s}
.exlib-card:hover{border-color:var(--teal-200); box-shadow:var(--sh-sm)}
.exlib-thumb{position:relative; aspect-ratio:16/10; background:var(--teal-50); border-bottom:1px solid var(--line); overflow:hidden}
.exlib-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.exlib-badge{position:absolute; top:9px; left:9px; display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:var(--r-pill); background:rgba(255,255,255,.92); border:1px solid var(--line); color:var(--teal-700); font-weight:600; font-size:.68rem; backdrop-filter:blur(4px)}
.exlib-badge .ic{width:13px; height:13px}
.exlib-rep{position:absolute; top:9px; right:9px; padding:4px 9px; border-radius:var(--r-pill); background:rgba(15,23,42,.78); color:#fff; font-weight:600; font-size:.68rem; letter-spacing:.01em; font-variant-numeric:tabular-nums; backdrop-filter:blur(4px)}
/* Region-tinted thumbs + tags so the grid scans by body region at a glance (restrained set) */
.exlib-thumb.r-nek{background:#eef6ff} .chip.r-nek{background:#eef6ff; color:#3b6aa0} .chip.r-nek .dot{background:#3b6aa0}
.exlib-thumb.r-thoracaal{background:#f1f0fb} .chip.r-thoracaal{background:#f1f0fb; color:#6d5ca8} .chip.r-thoracaal .dot{background:#6d5ca8}
.exlib-thumb.r-lumbaal{background:var(--teal-50)} .chip.r-lumbaal{background:var(--teal-50); color:var(--teal-700)} .chip.r-lumbaal .dot{background:var(--teal-500)}
.exlib-thumb.r-bekken{background:#eafaf4} .chip.r-bekken{background:#eafaf4; color:var(--green-700)} .chip.r-bekken .dot{background:var(--green-500)}
.exlib-thumb.r-core{background:#eefcfb} .chip.r-core{background:#eefcfb; color:var(--teal-700)} .chip.r-core .dot{background:var(--teal-400)}
.exlib-body{display:flex; flex-direction:column; gap:8px; padding:14px 15px 15px; flex:1}
.exlib-name{font-weight:600; font-size:.96rem; letter-spacing:-.015em}
.exlib-desc{font-size:.8rem; color:var(--muted); line-height:1.5; flex:1}
.exlib-reps{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink); font-weight:600}
.exlib-reps .ic{width:14px; height:14px; color:var(--teal-500)}
.exlib-tags{display:flex; flex-wrap:wrap; gap:6px}
/* Materiaal-tag op de kaart (dumbbell-icoon) */
.chip.chip-mat{background:#fff7ed; color:#b45309; border:1px solid #fde2c4}
.chip.chip-mat .ic{width:13px; height:13px; color:#d97706}
/* Bodymap-filter + grid naast elkaar: aside met klikbare wervelkolomregio's */
.lib-body{display:flex; align-items:flex-start; gap:20px}
.lib-grid-wrap{flex:1; min-width:0}
.lib-bodymap{flex:none; width:140px; position:sticky; top:16px; display:flex; flex-direction:column; align-items:center; gap:10px; padding:14px 12px; border-radius:var(--r-lg); background:var(--slate-25); border:1px solid var(--line)}
.lib-bodymap-title{font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; font-weight:600; color:var(--muted); text-align:center}
.bodymap-svg{width:96px; height:auto; display:block; overflow:visible}
.bodymap-body{fill:#fff; stroke:var(--line-2); stroke-width:1.5}
.bodymap-region{fill:#fff; stroke:var(--soft); stroke-width:1.5; cursor:pointer; transition:fill .15s,stroke .15s,opacity .15s; opacity:.9}
.bodymap-region:hover{opacity:1; stroke-width:2}
.bodymap-region:focus-visible{outline:none; stroke:var(--teal-500); stroke-width:2.5}
.bodymap-region.r-nek:hover,.bodymap-region.r-nek.active{fill:#eef6ff; stroke:#3b6aa0}
.bodymap-region.r-thoracaal:hover,.bodymap-region.r-thoracaal.active{fill:#f1f0fb; stroke:#6d5ca8}
.bodymap-region.r-lumbaal:hover,.bodymap-region.r-lumbaal.active{fill:var(--teal-50); stroke:var(--teal-500)}
.bodymap-region.r-bekken:hover,.bodymap-region.r-bekken.active{fill:#eafaf4; stroke:var(--green-500)}
.bodymap-region.r-core{fill:none; stroke-dasharray:3 3}
.bodymap-region.r-core:hover,.bodymap-region.r-core.active{stroke:var(--teal-400); stroke-dasharray:none; fill:rgba(45,212,191,.1)}
.bodymap-region.active{stroke-width:2.5; opacity:1}
.bodymap-reset{padding:7px 10px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; color:var(--teal-700); font-weight:600; font-size:.74rem; line-height:1.2; cursor:pointer; transition:background .15s,border-color .15s}
.bodymap-reset:hover{background:var(--teal-50); border-color:var(--teal-200)}
@media (max-width:760px){
  .lib-body{flex-direction:column}
  .lib-bodymap{flex-direction:row; flex-wrap:wrap; justify-content:center; width:100%; position:static}
  .bodymap-svg{width:72px}
}
.exlib-foot{display:flex; align-items:center; gap:10px; padding:11px 15px; border-top:1px solid var(--line); background:var(--slate-25)}
.exlib-add{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px; border-radius:var(--r-pill); background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-700); font-weight:600; font-size:.82rem; min-height:44px; transition:background .15s}
.exlib-add:hover{background:var(--teal-100)}
.exlib-video{width:44px; height:44px; border-radius:11px; border:1px solid var(--line); background:#fff; color:var(--muted); display:grid; place-items:center; flex:none; transition:border-color .15s,color .15s}
.exlib-video:hover{border-color:var(--teal-200); color:var(--teal-600)}
/* Maturity: clickable cards, library count, source badges (HHP / Eigen / Aangepast), detail button */
.lib-count{font-size:.8rem; color:var(--muted); font-weight:500; white-space:nowrap}
/* Weergavetools (teller + dichtheid-toggle + sortering) rechts in de toolbar. */
.lib-viewtools{margin-left:auto; display:inline-flex; align-items:center; gap:10px; flex-wrap:wrap}
/* Dichtheid-toggle: twee segmenten (kaarten / compact) in een pil. */
.lib-density{display:inline-flex; gap:3px; padding:3px; background:rgba(255,255,255,.7); border:1px solid var(--line); border-radius:var(--r-pill)}
.lib-dens-btn{display:inline-flex; align-items:center; gap:6px; padding:7px 12px; border-radius:var(--r-pill); font-family:inherit; font-weight:600; font-size:.8rem; color:var(--muted); background:none; border:0; cursor:pointer; white-space:nowrap; min-height:38px; transition:background .15s,color .15s}
.lib-dens-btn .ic{width:15px; height:15px}
.lib-dens-btn:hover{color:var(--teal-700)}
.lib-dens-btn:focus-visible{outline:2px solid var(--teal-400); outline-offset:2px}
.lib-dens-btn.active{background:var(--teal-50); color:var(--teal-700); box-shadow:inset 0 0 0 1px var(--teal-200)}
/* Sort-dropdown: zelfde aqua-trigger + paneel als de filter-dropdowns. */
.lib-sort{position:relative}
.lib-sort-trigger{display:inline-flex; align-items:center; gap:7px; padding:8px 12px; min-height:38px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--line-2); color:var(--muted); font-family:inherit; font-weight:600; font-size:.8rem; line-height:1; cursor:pointer; transition:background .15s,border-color .15s,color .15s}
.lib-sort-trigger:hover{border-color:var(--teal-200); color:var(--teal-700)}
.lib-sort-trigger:focus-visible{outline:2px solid var(--teal-400); outline-offset:2px}
.lib-sort-trigger .ic{width:15px; height:15px; color:var(--soft)}
.lib-sort-chev{transition:transform .15s,color .15s}
.lib-sort-trigger[aria-expanded="true"]{border-color:var(--teal-200); color:var(--teal-700)}
.lib-sort-trigger[aria-expanded="true"] .lib-sort-chev{transform:rotate(180deg); color:var(--teal-500)}
.lib-sort-panel{position:absolute; top:calc(100% + 6px); right:0; min-width:184px; padding:6px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); box-shadow:var(--sh); z-index:60; animation:fade .16s ease}
.lib-sort-opt{display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:9px 11px; border-radius:var(--r); font-family:inherit; font-weight:600; font-size:.86rem; color:var(--ink); text-align:left; background:none; border:0; cursor:pointer; transition:background .12s,color .12s}
.lib-sort-opt:hover{background:var(--teal-50); color:var(--teal-700)}
.lib-sort-opt:focus-visible{outline:2px solid var(--teal-600); outline-offset:-2px}
.lib-sort-opt .lo-name{flex:1 1 auto; min-width:0}
.lib-sort-opt .lo-check{width:16px; height:16px; stroke:var(--teal-600); stroke-width:2.6; fill:none; opacity:0; flex:none}
.lib-sort-opt.active{background:var(--teal-50); color:var(--teal-700)}
.lib-sort-opt.active .lo-check{opacity:1}
/* Compacte lijstweergave: smalle rijen i.p.v. kaarten (zelfde data + click-handlers). */
.exlib-grid.exlib-compact{display:flex; flex-direction:column; gap:8px}
.exlib-row{display:flex; align-items:center; gap:14px; padding:9px 12px; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; transition:border-color .15s, box-shadow .15s}
.exlib-row:hover{border-color:var(--teal-200); box-shadow:var(--sh-sm)}
.exlib-row[data-src="eigen"]{box-shadow:inset 3px 0 0 var(--teal-500)}
.exlib-row[data-src="aangepast"]{box-shadow:inset 3px 0 0 var(--teal-200)}
.exlib-row[data-src="eigen"]:hover,.exlib-row[data-src="aangepast"]:hover{box-shadow:inset 3px 0 0 var(--teal-400), var(--sh-sm); border-color:var(--teal-200)}
.exrow-thumb{position:relative; flex:none; width:64px; height:48px; border-radius:9px; overflow:hidden; border:1px solid var(--line); background:var(--teal-50); padding:0; cursor:pointer}
.exrow-thumb.r-nek{background:#eef6ff} .exrow-thumb.r-thoracaal{background:#f1f0fb} .exrow-thumb.r-lumbaal{background:var(--teal-50)} .exrow-thumb.r-bekken{background:#eafaf4} .exrow-thumb.r-core{background:#eefcfb}
.exrow-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.exrow-thumb:focus-visible{outline:2px solid var(--teal-400); outline-offset:2px}
.exrow-vid{position:absolute; bottom:3px; left:3px; display:grid; place-items:center; width:18px; height:18px; border-radius:5px; background:rgba(15,23,42,.7); color:#fff}
.exrow-vid .ic{width:11px; height:11px}
.exrow-main{flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:5px}
.exrow-name{font:inherit; font-weight:600; font-size:.9rem; letter-spacing:-.015em; color:var(--ink); text-align:left; background:none; border:0; padding:0; cursor:pointer; align-self:flex-start}
.exrow-name:hover{color:var(--teal-700)}
.exrow-name:focus-visible{outline:2px solid var(--teal-400); outline-offset:2px; border-radius:4px}
.exrow-tags{display:flex; flex-wrap:wrap; gap:6px}
.exrow-dose{flex:none; display:inline-flex; align-items:center; gap:6px; font-size:.78rem; color:var(--ink); font-weight:600; white-space:nowrap}
.exrow-dose .ic{width:14px; height:14px; color:var(--teal-500)}
.exrow-actions{flex:none; display:inline-flex; align-items:center; gap:8px}
.exrow-star{width:38px; height:38px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); border-radius:9px; cursor:pointer; transition:background .15s, border-color .15s}
.exrow-star:hover{border-color:var(--teal-200)}
.exrow-star:focus-visible{outline:2px solid var(--teal-400); outline-offset:2px}
.exrow-star .ic{width:16px; height:16px; color:var(--muted); fill:none; stroke:currentColor; stroke-width:1.6}
.exlib-row[data-fav="true"] .exrow-star .ic{color:var(--orange-500); fill:currentColor; stroke:var(--orange-500)}
.exrow-add{display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border-radius:var(--r-pill); background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-700); font-family:inherit; font-weight:600; font-size:.8rem; min-height:38px; cursor:pointer; white-space:nowrap; transition:background .15s}
.exrow-add:hover{background:var(--teal-100)}
.exrow-add:focus-visible{outline:2px solid var(--teal-400); outline-offset:2px}
@media (max-width:680px){
  .exlib-row{flex-wrap:wrap}
  .exrow-dose{order:3; width:100%}
  .exrow-add span{display:none}
  .exrow-add{padding:9px 11px}
}
.exlib-thumb[data-lib-open]{cursor:pointer}
.exlib-open-name{font:inherit; font-weight:600; font-size:.96rem; letter-spacing:-.015em; color:var(--ink); text-align:left; background:none; border:0; padding:0; cursor:pointer; width:100%}
.exlib-open-name:hover{color:var(--teal-700)}
.exlib-open-name:focus-visible{outline:2px solid var(--teal-400); outline-offset:2px; border-radius:4px}
.exlib-src{display:inline-flex; align-items:center; gap:5px; padding:4px 9px; border-radius:var(--r-pill); font-weight:600; font-size:.68rem; letter-spacing:.02em; line-height:1}
.exlib-src .ic{width:12px; height:12px}
.src-hhp{background:var(--slate-50); color:var(--muted); border:1px solid var(--line)}
.src-eigen{background:var(--teal-500); color:#fff; border:1px solid var(--teal-500)}
.src-aangepast{background:var(--teal-50); color:var(--teal-700); border:1px solid var(--teal-200)}
.exlib-card[data-src="eigen"]{box-shadow:inset 3px 0 0 var(--teal-500)}
.exlib-card[data-src="aangepast"]{box-shadow:inset 3px 0 0 var(--teal-200)}
.exlib-card[data-src="eigen"]:hover,.exlib-card[data-src="aangepast"]:hover{box-shadow:inset 3px 0 0 var(--teal-400), var(--sh-sm); border-color:var(--teal-200)}
.exlib-detail{width:44px; height:44px; border-radius:11px; border:1px solid var(--line); background:#fff; color:var(--muted); display:grid; place-items:center; flex:none; transition:border-color .15s,color .15s}
.exlib-detail:hover{border-color:var(--teal-200); color:var(--teal-600)}
.exlib-detail svg{transition:transform .15s}
.exlib-detail:hover svg{transform:translateX(2px)}

/* Favoriet-knop (hartje) op de thumb; gevuld + oranje wanneer favoriet */
.exlib-star{position:absolute; top:9px; right:9px; width:32px; height:32px; display:grid; place-items:center; background:rgba(255,255,255,.92); border:1px solid var(--line); border-radius:9px; cursor:pointer; z-index:2; backdrop-filter:blur(4px); transition:background .15s, border-color .15s, transform .12s}
.exlib-star:hover{background:#fff; border-color:var(--teal-200); transform:scale(1.05)}
.exlib-star .ic{width:16px; height:16px; color:var(--muted); fill:none; stroke:currentColor; stroke-width:1.6}
.exlib-card[data-fav="true"] .exlib-star .ic{color:var(--orange-500); fill:currentColor; stroke:var(--orange-500)}
/* De rep-badge zit ook rechtsboven: schuif hem naar links zodat het hartje niet overlapt */
.exlib-card .exlib-rep{right:48px}

/* Bundel-kaarten (sjablonen-tab) */
.bundle-card{display:flex; flex-direction:column; border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; overflow:hidden; transition:border-color .15s, box-shadow .15s}
.bundle-card:hover{border-color:var(--teal-200); box-shadow:var(--sh-sm)}
.bundle-card-header{padding:16px 15px; border-bottom:1px solid var(--line); background:var(--teal-50)}
.bundle-card-title{font-weight:600; font-size:.96rem; letter-spacing:-.015em; color:var(--ink); margin:0}
.bundle-card-desc{font-size:.8rem; color:var(--muted); line-height:1.5; margin:8px 0 0}
.bundle-card-body{display:flex; flex-direction:column; gap:12px; padding:14px 15px; flex:1}
.bundle-count{font-size:.78rem; font-weight:600; color:var(--teal-700); display:inline-flex; align-items:center; gap:6px}
.bundle-count .ic{width:15px; height:15px; color:var(--teal-500)}
.bundle-thumbs{display:flex; gap:6px; flex-wrap:wrap}
.bundle-thumb-mini{width:32px; height:32px; border-radius:6px; overflow:hidden; border:1px solid var(--line); flex-shrink:0}
.bundle-thumb-mini img{width:100%; height:100%; object-fit:cover; display:block}
.bundle-card-foot{padding:11px 15px; border-top:1px solid var(--line); background:var(--slate-25)}
.bundle-add{width:100%; display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px; border-radius:var(--r-pill); background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-700); font-weight:600; font-size:.82rem; min-height:44px; transition:background .15s}
.bundle-add:hover{background:var(--teal-100)}
/* Eigen bundels: titel + badge, kaartacties en de "Nieuwe bundel"-kaart */
.bundle-card-titlerow{display:flex; align-items:center; justify-content:space-between; gap:8px}
.bundle-card[data-eigen="true"] .bundle-card-header{background:var(--slate-25)}
.bundle-card-actions{display:flex; gap:6px; margin-top:8px}
.bundle-action{display:inline-flex; align-items:center; justify-content:center; width:38px; min-height:38px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; color:var(--muted); transition:background .15s, color .15s, border-color .15s}
.bundle-action:hover{background:var(--slate-25); color:var(--ink); border-color:var(--line)}
.bundle-action .ic{width:15px; height:15px}
.bundle-action-danger:hover{background:var(--red-50,#fef2f2); color:var(--red-600,#dc2626); border-color:var(--red-200,#fecaca)}
.bundle-new{display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; min-height:140px; text-align:center; padding:18px; border:1.5px dashed var(--teal-200); border-radius:var(--r-lg); background:var(--teal-50); color:var(--teal-700); cursor:pointer; transition:background .15s, border-color .15s}
.bundle-new:hover{background:var(--teal-100); border-color:var(--teal-400)}
.bundle-new-ic{display:inline-flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:50%; background:#fff; border:1px solid var(--teal-200)}
.bundle-new-ic .ic{width:20px; height:20px; color:var(--teal-600)}
.bundle-new-tt{font-weight:600; font-size:.92rem; color:var(--ink)}
.bundle-new-sub{font-size:.76rem; color:var(--muted); line-height:1.4}
/* Oefening-keuzelijst in de eigen-bundel modal */
.bn-count{font-size:.74rem; font-weight:500; color:var(--muted); margin-left:6px}
.bn-exlist{max-height:300px; overflow-y:auto; border:1px solid var(--line-2); border-radius:var(--r-md); background:#fff}
.bn-exrow{display:flex; align-items:center; gap:10px; padding:9px 12px; border-bottom:1px solid var(--line); cursor:pointer; min-height:48px}
.bn-exrow:last-child{border-bottom:none}
.bn-exrow:hover{background:var(--slate-25)}
.bn-exrow input[type="checkbox"]{width:17px; height:17px; flex-shrink:0; accent-color:var(--teal-500); cursor:pointer}
.bn-exthumb{width:34px; height:34px; border-radius:6px; object-fit:cover; border:1px solid var(--line); flex-shrink:0}
.bn-exname{flex:1; font-size:.86rem; font-weight:500; color:var(--ink)}

/* ============ PATIENTEN LIST ============ */
.plist-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:18px}
.plist-search{position:relative; flex:1; min-width:200px}
.plist-search .ic{position:absolute; left:14px; top:50%; transform:translateY(-50%); color:var(--soft); width:18px; height:18px}
.plist-search input{width:100%; min-height:44px; padding:12px 16px 12px 42px; border-radius:var(--r-pill); border:1px solid var(--line-2); font-family:inherit; font-size:.92rem; background:#fff; color:var(--ink)}
.plist-search input::placeholder{color:var(--muted); font-weight:400}
.plist-search input:focus{outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.plist-filter{min-height:44px; padding:11px 38px 11px 15px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 14px center; font-family:inherit; font-size:.86rem; font-weight:500; color:var(--ink); -webkit-appearance:none; appearance:none; cursor:pointer}
.plist-filter:focus{outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.plist-count{font-size:.8rem; color:var(--muted); font-weight:500; margin-left:auto; white-space:nowrap}

/* Snelfilter-pillen boven de tabel */
.plist-pills{display:flex; flex-wrap:wrap; gap:8px; margin:-4px 0 16px}
.plist-pills:empty{display:none}
.plist-pill{display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; color:var(--muted); font-family:inherit; font-size:.78rem; font-weight:600; cursor:pointer; transition:border-color .14s, background .14s, color .14s}
.plist-pill:hover{border-color:var(--teal-300,var(--teal-400)); color:var(--teal-700)}
.plist-pill:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(20,184,166,.16)}
.plist-pill.on{background:var(--teal-700); border-color:var(--teal-700); color:#fff}
.plist-pill.tag{border-style:dashed}
.plist-pill.tag.on{background:var(--teal-600,var(--teal-700)); border-style:solid}
.plist-pill .ic{width:14px; height:14px}

/* Patiënt-tags als chips op de rij (klikbaar = filter) */
.pt-tags{display:flex; flex-wrap:wrap; gap:5px; margin-top:6px}
.pt-tag{display:inline-flex; align-items:center; padding:2px 9px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:var(--slate-25,#f8fafc); color:var(--muted); font-family:inherit; font-size:.7rem; font-weight:600; line-height:1.5; cursor:pointer; white-space:nowrap}
.pt-tag:hover{border-color:var(--teal-300,var(--teal-400)); color:var(--teal-700)}
.pt-tag:focus-visible{outline:none; box-shadow:0 0 0 2px rgba(20,184,166,.2)}
.pt-tag.on{background:var(--teal-50); border-color:var(--teal-400); color:var(--teal-700)}

.ptable-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--r-xl); border:1px solid var(--line); background:rgba(255,255,255,.82); box-shadow:var(--sh-sm)}
.ptable{width:100%; border-collapse:collapse; min-width:760px}
.ptable th{text-align:left; padding:13px 16px; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--muted); border-bottom:1px solid var(--line); white-space:nowrap; background:var(--slate-50)}
.ptable th.sortable{cursor:pointer; user-select:none}
.ptable th.sortable:hover{color:var(--teal-700)}
.ptable th .sort-ar{display:inline-block; width:0; height:0; margin-left:5px; vertical-align:middle; border-left:4px solid transparent; border-right:4px solid transparent; opacity:0}
.ptable th[aria-sort="ascending"] .sort-ar{opacity:1; border-bottom:5px solid currentColor}
.ptable th[aria-sort="descending"] .sort-ar{opacity:1; border-top:5px solid currentColor}
.ptable td{padding:13px 16px; border-bottom:1px solid var(--line); font-size:.86rem; vertical-align:middle; white-space:nowrap}
.ptable tbody tr{cursor:pointer; transition:background .14s}
.ptable tbody tr:hover{background:var(--teal-50)}
.ptable tbody tr:last-child td{border-bottom:none}
.pt-cell{display:flex; align-items:center; gap:12px; min-width:0}
.pt-cell-av{width:38px; height:38px; border-radius:11px; color:#fff; display:grid; place-items:center; font-weight:600; font-size:.78rem; flex:none}
.pt-cell-id{min-width:0}
.pt-cell-name{font-weight:600; font-size:.9rem; letter-spacing:-.01em}
.pt-open-btn{font:inherit; font-weight:600; font-size:.9rem; letter-spacing:-.01em; color:var(--ink); text-align:left; padding:0; background:none; border:none; cursor:pointer}
.pt-open-btn:hover{color:var(--teal-700)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0}
.pt-cell-sub{font-size:.76rem; color:var(--muted); margin-top:1px}
.pt-num{font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.02em}
.pt-bc{display:inline-flex; align-items:baseline; gap:5px}
.pt-bc .pt-num{color:var(--orange-700)}
.pt-bc .bc-when{font-size:.74rem; color:var(--muted); font-weight:400}
/* Lege scancel: zelfde ritme (cijfer + label) als de gevulde variant, maar gedempt. */
.pt-bc-empty .pt-num-empty{color:var(--soft); font-weight:600}
/* Lege therapietrouw: gedempte pill i.p.v. een los streepje. */
.pt-pill-empty{display:inline-flex; align-items:center; padding:2px 9px; border-radius:var(--r-pill); background:var(--slate-100); color:var(--muted); font-size:.72rem; font-weight:600; line-height:1.5; white-space:nowrap}
.pt-dim{color:var(--muted); font-weight:400}
.ptable-empty{padding:42px 24px; text-align:center; color:var(--muted); font-size:.9rem; font-weight:500}
.ptable-empty-state{display:flex; flex-direction:column; align-items:center; gap:8px; max-width:420px; margin:0 auto}
.ptable-empty-t{margin:0; font-size:1.05rem; font-weight:700; color:var(--ink)}
.ptable-empty-b{margin:0; color:var(--muted); font-size:.9rem; font-weight:500; line-height:1.5}
.ptable-empty-state .btn{margin-top:6px}

/* ============ MODAL + TOAST ============ */
.modal-backdrop{position:fixed; inset:0; z-index:100; display:none; align-items:flex-start; justify-content:center; padding:24px 16px; background:rgba(15,23,42,.42); backdrop-filter:blur(3px); overflow-y:auto}
.modal-backdrop.show{display:flex; animation:fade .2s ease}
.modal{width:100%; max-width:560px; margin:auto; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:0 30px 70px rgba(15,23,42,.28); animation:modalpop .26s cubic-bezier(.2,.8,.3,1)}
@keyframes modalpop{from{opacity:0; transform:translateY(14px) scale(.98)}to{opacity:1; transform:none}}
.modal-head{display:flex; align-items:flex-start; gap:14px; padding:22px 24px 16px; border-bottom:1px solid var(--line)}
.modal-head .m-ic{width:44px; height:44px; border-radius:13px; background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-600); display:grid; place-items:center; flex:none}
.modal-head .m-tt{flex:1; min-width:0}
.modal-head h2{font-size:1.12rem; font-weight:600; letter-spacing:-.02em}
.modal-head .m-sub{font-size:.84rem; color:var(--muted); margin-top:3px; font-weight:400; line-height:1.45}
.modal-close{width:44px; height:44px; border-radius:11px; border:1px solid var(--line); background:#fff; color:var(--muted); display:grid; place-items:center; flex:none; transition:border-color .15s,color .15s}
.modal-close:hover{border-color:var(--pink-500); color:var(--pink-600)}
.modal-body{padding:20px 24px}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px 16px}
.field{display:flex; flex-direction:column; gap:6px; min-width:0}
.field[hidden]{display:none}
.field.col-2{grid-column:1 / -1}
.field label{font-size:.78rem; font-weight:600; color:var(--ink)}
.field label .req{color:var(--pink-600); margin-left:2px}
.field input,.field select,.field textarea{min-height:44px; padding:11px 14px; border-radius:var(--r); border:1px solid var(--line-2); font-family:inherit; font-size:.9rem; background:#fff; color:var(--ink); width:100%}
.field textarea{min-height:74px; resize:vertical; line-height:1.5}
.field select{-webkit-appearance:none; appearance:none; padding-right:36px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 13px center; cursor:pointer}
.field input::placeholder,.field textarea::placeholder{color:var(--muted); font-weight:400}
.field input:focus,.field select:focus,.field textarea:focus{outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.field input[aria-invalid="true"],.field select[aria-invalid="true"],.field textarea[aria-invalid="true"]{border-color:var(--pink-500); box-shadow:0 0 0 3px rgba(244,63,94,.12)}
.field .err{font-size:.74rem; color:var(--pink-600); font-weight:500; display:none}
.field .err.show{display:block}
.field .hint{font-size:.74rem; color:var(--muted); font-weight:400}
.modal-foot{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:10px; padding:16px 24px 22px; border-top:1px solid var(--line)}
.modal-foot .m-note{margin-right:auto; font-size:.76rem; color:var(--muted); font-weight:400}

.toast-wrap{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:120; display:flex; flex-direction:column; gap:10px; width:max-content; max-width:calc(100vw - 32px); pointer-events:none}
.toast{display:flex; align-items:center; gap:11px; padding:12px 18px 12px 13px; border-radius:var(--r-pill); background:rgba(255,255,255,.86); backdrop-filter:blur(14px); border:1px solid var(--teal-200); color:var(--ink); box-shadow:0 16px 38px rgba(15,23,42,.14); font-size:.88rem; font-weight:600; pointer-events:auto; animation:toastin .28s cubic-bezier(.2,.8,.3,1)}
.toast .t-ic{width:26px; height:26px; border-radius:50%; background:var(--teal-700); color:#fff; display:grid; place-items:center; flex:none}
.toast .t-ic .ic{width:15px; height:15px; stroke-width:3}
.toast.leaving{animation:toastout .26s ease forwards}
@keyframes toastin{from{opacity:0; transform:translateY(14px)}to{opacity:1; transform:none}}
@keyframes toastout{to{opacity:0; transform:translateY(10px)}}

/* ============ COMMAND PALETTE / GLOBALE ZOEKFUNCTIE ============ */
.cp-backdrop{align-items:flex-start; padding:max(64px,9vh) 16px 24px}
.cp-panel{width:100%; max-width:600px; margin:0 auto; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:0 30px 70px rgba(15,23,42,.3); overflow:hidden; display:flex; flex-direction:column; max-height:min(72vh,560px); animation:modalpop .24s cubic-bezier(.2,.8,.3,1)}
.cp-search{display:flex; align-items:center; gap:11px; padding:14px 16px; border-bottom:1px solid var(--line)}
.cp-search-ic{width:20px; height:20px; stroke:var(--teal-600); stroke-width:2; fill:none; flex:none}
.cp-input{flex:1; min-width:0; border:0; outline:none; background:transparent; font-family:inherit; font-size:1rem; font-weight:500; color:var(--ink); padding:4px 0}
.cp-input::placeholder{color:var(--soft); font-weight:400}
.cp-esc{flex:none; border:0; background:transparent; padding:0; cursor:pointer}
.cp-esc kbd, .cp-foot kbd{font-family:inherit; font-size:.66rem; font-weight:700; line-height:1; color:var(--muted); background:var(--slate-50); border:1px solid var(--line-2); border-radius:6px; padding:4px 6px; display:inline-flex; align-items:center; justify-content:center; min-width:18px}
.cp-esc:hover kbd{border-color:var(--teal-200); color:var(--teal-700)}
.cp-results{overflow-y:auto; padding:6px 8px 8px; flex:1; min-height:88px}
.cp-group-label{font-size:.62rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--soft); padding:11px 10px 5px}
.cp-item{display:flex; align-items:center; gap:12px; width:100%; padding:9px 10px; border-radius:var(--r); text-align:left; cursor:pointer; transition:background .1s}
.cp-item:hover{background:var(--teal-50)}
.cp-item.is-active{background:var(--teal-50); box-shadow:inset 0 0 0 1px var(--teal-200)}
.cp-item-ic{width:36px; height:36px; border-radius:11px; background:var(--slate-50); border:1px solid var(--line); color:var(--teal-600); display:grid; place-items:center; flex:none}
.cp-item-ic .ic{width:18px; height:18px; stroke-width:1.9}
.cp-item-ic.cp-ic-avatar{color:#fff; border:0; font-weight:800; font-size:.78rem; letter-spacing:.02em}
.cp-item-ic.cp-ic-ex{background:var(--teal-50); border-color:var(--teal-200)}
.cp-item-tt{flex:1; min-width:0}
.cp-item-name{font-size:.9rem; font-weight:600; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.cp-item-ctx{font-size:.76rem; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px}
.cp-item-go{flex:none; color:var(--soft); display:grid; place-items:center}
.cp-item-go .ic{width:16px; height:16px; stroke-width:2}
.cp-item.is-active .cp-item-go{color:var(--teal-600)}
.cp-empty{padding:30px 18px; text-align:center}
.cp-empty-ic{width:46px; height:46px; margin:0 auto 12px; border-radius:14px; background:var(--slate-50); border:1px solid var(--line); color:var(--soft); display:grid; place-items:center}
.cp-empty-ic .ic{width:22px; height:22px; stroke-width:1.8}
.cp-empty-tt{font-size:.92rem; font-weight:600; color:var(--ink)}
.cp-empty-sub{font-size:.82rem; color:var(--muted); margin-top:4px; line-height:1.45}
.cp-foot{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:10px 16px; border-top:1px solid var(--line); background:var(--slate-25)}
.cp-hint{display:inline-flex; align-items:center; gap:6px; font-size:.74rem; font-weight:500; color:var(--muted)}
.cp-hint kbd{padding:4px 5px; min-width:22px; height:22px}
.cp-hint kbd .ic{width:13px; height:13px; stroke:var(--muted); stroke-width:2.4; fill:none}
@media (max-width:560px){ .cp-foot .cp-hint:last-child{display:none} }

/* ============ TOPBAR ICON-KNOP (help) ============ */
.tb-iconbtn{position:relative; display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; color:var(--muted); box-shadow:var(--sh-xs); transition:border-color .15s,box-shadow .15s,color .15s}
.tb-iconbtn:hover{border-color:var(--teal-200); color:var(--teal-700)}
.tb-iconbtn[aria-expanded="true"]{border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14); color:var(--teal-700)}
.tb-iconbtn .ic{width:20px; height:20px; stroke:currentColor; stroke-width:1.9; fill:none}

/* ============ HELPCENTRUM (paneel) ============ */
.hc-modal{max-width:680px; display:flex; flex-direction:column; max-height:min(86vh,760px)}
.hc-body{padding:18px 24px 6px; overflow-y:auto; flex:1; min-height:0}
.hc-search{position:relative; margin-bottom:18px}
.hc-search-ic{position:absolute; left:13px; top:50%; transform:translateY(-50%); width:18px; height:18px; stroke:var(--soft); stroke-width:2; fill:none; pointer-events:none}
.hc-input{width:100%; min-height:46px; padding:11px 14px 11px 40px; border-radius:var(--r); border:1px solid var(--line-2); background:var(--slate-50); font-size:.92rem; color:var(--ink); transition:border-color .15s,box-shadow .15s,background .15s}
.hc-input:focus{outline:none; border-color:var(--teal-400); background:#fff; box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.hc-sec{margin-bottom:20px}
.hc-sec-head{display:flex; align-items:center; gap:8px; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--teal-700); margin-bottom:11px}
.hc-sec-head .ic{width:15px; height:15px; stroke:var(--teal-600); stroke-width:2; fill:none}
.hc-tasks{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:9px}
.hc-task{display:flex; align-items:center; gap:11px; text-align:left; padding:11px 13px; border-radius:var(--r); border:1px solid var(--line-2); background:rgba(255,255,255,.7); box-shadow:var(--sh-xs); transition:border-color .15s,box-shadow .15s,transform .12s}
.hc-task:hover{border-color:var(--teal-200); box-shadow:var(--sh-sm)}
.hc-task:active{transform:translateY(1px)}
.hc-task .ht-ic{width:34px; height:34px; border-radius:10px; background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-600); display:grid; place-items:center; flex:none}
.hc-task .ht-ic .ic{width:18px; height:18px; stroke:var(--teal-600); stroke-width:2; fill:none}
.hc-task .ht-t{font-size:.86rem; font-weight:600; color:var(--ink); line-height:1.2}
.hc-task .ht-d{font-size:.74rem; color:var(--muted); margin-top:2px; line-height:1.3}
.hc-faq-item{border:1px solid var(--line); border-radius:var(--r); margin-bottom:8px; overflow:hidden; background:rgba(255,255,255,.7)}
.hc-faq-q{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:13px 15px; font-size:.9rem; font-weight:600; color:var(--ink); transition:background .15s}
.hc-faq-q:hover{background:var(--slate-50)}
.hc-faq-q .hq-chev{margin-left:auto; flex:none; width:17px; height:17px; stroke:var(--soft); stroke-width:2; fill:none; transition:transform .2s}
.hc-faq-item.open .hc-faq-q .hq-chev{transform:rotate(90deg)}
.hc-faq-a{display:none; padding:0 15px 14px 15px; font-size:.86rem; color:var(--muted); line-height:1.55}
.hc-faq-item.open .hc-faq-a{display:block; animation:fade .2s ease}
.hc-faq mark{background:var(--teal-100); color:var(--teal-700); border-radius:3px; padding:0 1px}
.hc-empty{padding:18px 4px; text-align:center; font-size:.85rem; color:var(--muted)}
.hc-keys{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px}
.hc-key{display:flex; align-items:center; gap:10px; padding:9px 12px; border-radius:var(--r); border:1px solid var(--line); background:rgba(255,255,255,.6)}
.hc-key .hk-d{font-size:.84rem; color:var(--ink); font-weight:500}
.hc-key .hk-keys{margin-left:auto; display:inline-flex; gap:3px; flex:none}
.hc-key kbd{font-family:inherit; font-size:.68rem; font-weight:700; line-height:1; color:var(--muted); background:var(--slate-50); border:1px solid var(--line-2); border-radius:6px; padding:4px 6px; min-width:20px; text-align:center}
.hc-link{font-weight:600; color:var(--teal-700); text-decoration:underline; text-underline-offset:2px}
.hc-link:hover{color:var(--teal-600)}
@media (max-width:560px){ .hc-tasks,.hc-keys{grid-template-columns:1fr} }

/* ============ ONBOARDING / RONDLEIDING ============ */
.ob-backdrop{position:fixed; inset:0; z-index:120; display:none; align-items:center; justify-content:center; padding:24px 16px; background:rgba(15,23,42,.5); backdrop-filter:blur(4px)}
.ob-backdrop.show{display:flex; animation:fade .22s ease}
.ob-card{position:relative; width:100%; max-width:460px; background:#fff; border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:0 36px 80px rgba(15,23,42,.32); padding:30px 30px 24px; text-align:center; animation:modalpop .3s cubic-bezier(.2,.8,.3,1)}
.ob-skip{position:absolute; top:16px; right:18px; font-size:.78rem; font-weight:600; color:var(--soft); padding:6px 8px; border-radius:8px; transition:color .15s,background .15s}
.ob-skip:hover{color:var(--muted); background:var(--slate-50)}
.ob-visual{width:78px; height:78px; margin:6px auto 18px; border-radius:22px; background:linear-gradient(150deg,var(--teal-100),var(--teal-50)); border:1px solid var(--teal-200); display:grid; place-items:center; box-shadow:0 10px 26px rgba(20,184,166,.2)}
.ob-visual .ic{width:38px; height:38px; stroke:var(--teal-600); stroke-width:1.8; fill:none}
.ob-eyebrow{font-size:.66rem; font-weight:700; letter-spacing:.13em; text-transform:uppercase; color:var(--teal-700); margin-bottom:8px}
.ob-title{font-size:1.32rem; font-weight:700; letter-spacing:-.02em; line-height:1.2; color:var(--ink)}
.ob-text{font-size:.92rem; color:var(--muted); line-height:1.55; margin:9px auto 0; max-width:34ch}
.ob-dots{display:flex; align-items:center; justify-content:center; gap:8px; margin:20px 0 22px}
.ob-dot{width:9px; height:9px; border-radius:var(--r-pill); background:var(--slate-200); border:none; padding:0; transition:width .2s,background .2s}
.ob-dot.active{width:24px; background:linear-gradient(120deg,var(--teal-400),var(--teal-600))}
.ob-dot.done{background:var(--teal-200)}
.ob-foot{display:flex; align-items:center; gap:10px}
.ob-foot .btn{flex:1; justify-content:center}
.ob-foot .ob-prev[hidden]{display:none}
.ob-foot .ob-prev{flex:0 0 auto; min-width:108px}

/* ============ DETAIL DRAWER (oefening) ============ */
.modal-backdrop.is-drawer{align-items:stretch; justify-content:flex-end; padding:0; overflow:hidden}
.drawer{display:flex; flex-direction:column; width:100%; max-width:480px; height:100%; background:#fff; border-left:1px solid var(--line); box-shadow:-24px 0 60px rgba(15,23,42,.22); animation:drawerin .3s cubic-bezier(.2,.8,.3,1)}
@keyframes drawerin{from{transform:translateX(34px); opacity:.5}to{transform:none; opacity:1}}
.drawer-head{display:flex; align-items:flex-start; gap:12px; padding:20px 22px 16px; border-bottom:1px solid var(--line)}
.drawer-htext{flex:1; min-width:0}
.drawer-htext h2{font-size:1.18rem; font-weight:700; letter-spacing:-.02em; line-height:1.2}
.exd-srcrow{display:flex; flex-wrap:wrap; gap:7px; margin-top:10px; align-items:center}
.drawer-body{flex:1; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:0 22px 20px}
.drawer-foot{display:flex; flex-wrap:wrap; gap:10px; padding:14px 22px; border-top:1px solid var(--line); background:var(--slate-25)}
.drawer-foot .btn{flex:1; min-width:150px; justify-content:center}
.exd-hero{position:relative; margin:18px 0 4px; border-radius:var(--r-lg); overflow:hidden; aspect-ratio:16/9; background:var(--teal-50); border:1px solid var(--line)}
.exd-hero img{width:100%; height:100%; object-fit:cover; display:block}
.exd-play{position:absolute; inset:0; display:grid; place-items:center; background:none; border:0; cursor:pointer}
.exd-play span{width:58px; height:58px; border-radius:50%; background:rgba(255,255,255,.93); border:1px solid var(--line); display:grid; place-items:center; box-shadow:var(--sh-sm); transition:transform .15s}
.exd-play:hover span{transform:scale(1.06)}
.exd-play svg{width:24px; height:24px; color:var(--teal-700); margin-left:3px}
.exd-vmeta{position:absolute; left:10px; bottom:10px; display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:var(--r-pill); background:rgba(15,23,42,.72); color:#fff; font-size:.72rem; font-weight:600; backdrop-filter:blur(4px)}
.exd-vmeta .ic{width:13px; height:13px}
/* ===== Oefenvideo: mock-speler (drawer-hero + losse modal) ===== */
.exd-hero.is-playing{background:#0b1220}
.vplayer{position:absolute; inset:0; display:flex; flex-direction:column; background:#0b1220; color:#fff; overflow:hidden}
.vplayer-stage{position:relative; flex:1; min-height:0; display:grid; place-items:center; overflow:hidden}
.vplayer-stage::before{content:""; position:absolute; inset:0; background:radial-gradient(120% 90% at 50% 0%, rgba(20,184,166,.28), transparent 60%), #0b1220; z-index:0}
.vplayer-scene{position:relative; z-index:1; width:74%; max-width:340px; filter:drop-shadow(0 10px 24px rgba(0,0,0,.45)); animation:vplayDemo 2.6s ease-in-out infinite alternate}
.vplayer-scene img{width:100%; height:auto; display:block; border-radius:var(--r-md)}
.vplayer-demo{position:absolute; z-index:2; top:10px; right:10px; display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:var(--r-pill); background:rgba(244,114,33,.92); color:#fff; font-size:.66rem; font-weight:800; letter-spacing:.06em; text-transform:uppercase}
.vplayer-demo::before{content:""; width:7px; height:7px; border-radius:50%; background:#fff; animation:vplayBlink 1.1s steps(1) infinite}
.vplayer-loop{position:absolute; z-index:2; left:10px; top:10px; display:inline-flex; align-items:center; gap:6px; padding:4px 9px; border-radius:var(--r-pill); background:rgba(15,23,42,.6); color:#cbeae5; font-size:.66rem; font-weight:700; backdrop-filter:blur(4px)}
.vplayer-loop .ic{width:12px; height:12px}
.vplayer-bar{position:relative; z-index:2; display:flex; align-items:center; gap:11px; padding:10px 12px; background:linear-gradient(0deg, rgba(0,0,0,.55), transparent)}
.vplayer-btn{flex:none; width:34px; height:34px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.92); color:var(--teal-700); display:grid; place-items:center; transition:transform .15s}
.vplayer-btn:hover{transform:scale(1.07)}
.vplayer-btn svg{width:16px; height:16px}
.vplayer-track{flex:1; height:5px; border-radius:99px; background:rgba(255,255,255,.22); overflow:hidden}
.vplayer-fill{height:100%; width:0; border-radius:99px; background:var(--teal-400); animation:vplayProgress 7s linear infinite}
.vplayer.is-paused .vplayer-fill,.vplayer.is-paused .vplayer-scene{animation-play-state:paused}
.vplayer-time{flex:none; font-size:.72rem; font-weight:600; color:#cbeae5; font-variant-numeric:tabular-nums}
.vplayer-close{position:absolute; z-index:3; top:10px; right:10px; display:none}
@keyframes vplayDemo{from{transform:translateY(-4px) rotate(-1deg)}to{transform:translateY(4px) rotate(1deg)}}
@keyframes vplayBlink{0%,50%{opacity:1}51%,100%{opacity:.2}}
@keyframes vplayProgress{0%{width:0}96%,100%{width:100%}}
/* losse video-modal (workspace-rijen) */
.modal.vmodal{max-width:560px}
.vmodal .vplayer{position:static; border-radius:var(--r-lg); aspect-ratio:16/9; border:1px solid var(--line)}
.vmodal-sub{margin:12px 2px 0; font-size:.82rem; color:var(--muted); display:flex; align-items:center; gap:7px}
.vmodal-sub .ic{width:14px; height:14px; color:var(--teal-500)}
@media (prefers-reduced-motion:reduce){.vplayer-scene,.vplayer-fill,.vplayer-demo::before{animation:none}}
.exd-meta{display:flex; flex-wrap:wrap; gap:8px; margin:13px 0 2px; align-items:center}
.exd-dose{display:inline-flex; align-items:center; gap:7px; padding:9px 13px; border-radius:var(--r-pill); background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-700); font-weight:700; font-size:.84rem; font-variant-numeric:tabular-nums}
.exd-dose .ic{width:15px; height:15px}
.exd-desc{font-size:.92rem; line-height:1.55; color:var(--ink); margin:12px 0 0}
.exd-sec{margin-top:22px}
.exd-sec-h{display:flex; align-items:center; gap:8px; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; font-weight:700; color:var(--muted); margin-bottom:12px}
.exd-sec-h .ic{width:15px; height:15px; color:var(--teal-500)}
.exd-steps{list-style:none; counter-reset:step; display:flex; flex-direction:column; gap:11px; padding:0; margin:0}
.exd-steps li{position:relative; padding-left:38px; font-size:.9rem; line-height:1.5; color:var(--ink); min-height:26px; display:flex; align-items:center}
.exd-steps li::before{counter-increment:step; content:counter(step); position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-700); font-size:.74rem; font-weight:700; display:grid; place-items:center}
.exd-list{list-style:none; display:flex; flex-direction:column; gap:9px; padding:0; margin:0}
.exd-list li{position:relative; padding-left:28px; font-size:.88rem; line-height:1.5; color:var(--ink)}
.exd-list li .ic{position:absolute; left:0; top:2px; width:16px; height:16px}
.exd-list.attn li .ic{color:var(--teal-500)}
.exd-list.contra li .ic{color:var(--pink-600)}
.exd-layer{margin-top:22px; padding:15px 16px; border-radius:var(--r-lg); border:1px solid var(--teal-200); background:var(--teal-50)}
.exd-layer-h{display:flex; align-items:center; gap:8px; font-weight:700; font-size:.92rem; color:var(--teal-700); margin-bottom:9px}
.exd-layer-h .ic{width:16px; height:16px}
.exd-layer-note{font-size:.88rem; line-height:1.55; color:var(--ink)}
.exd-layer-meta{display:flex; flex-wrap:wrap; gap:8px; margin-top:11px}
.exd-layer-actions{display:flex; flex-wrap:wrap; gap:8px; margin-top:13px}
.exd-block{margin-top:22px; padding:15px 16px; border-radius:var(--r-lg); border:1px dashed var(--line-2); background:var(--slate-25)}
.exd-block .t{font-weight:700; font-size:.92rem; color:var(--ink); margin-bottom:4px; display:flex; align-items:center; gap:8px}
.exd-block .t .ic{width:16px; height:16px; color:var(--teal-500)}
.exd-block .d{font-size:.84rem; color:var(--muted); line-height:1.5; margin-bottom:12px}
.exd-block-actions{display:flex; flex-wrap:wrap; gap:8px}
@media (max-width:700px){
  .drawer{max-width:none}
  .drawer-foot .btn{min-width:120px}
}

/* ============ MODAL: STEPS / RADIO CARDS / SCAN CAPTURE ============ */
.steps{display:flex; align-items:center; gap:8px; padding:14px 24px; border-bottom:1px solid var(--line); background:var(--slate-25)}
.step{display:flex; align-items:center; gap:8px; min-width:0}
.step-n{width:24px; height:24px; border-radius:50%; flex:none; display:grid; place-items:center; font-size:.74rem; font-weight:700; background:#fff; border:1px solid var(--line-2); color:var(--muted); transition:background .15s,color .15s,border-color .15s}
.step.active .step-n{background:linear-gradient(120deg,var(--teal-500),var(--teal-600)); color:#fff; border-color:transparent}
.step.done .step-n{background:var(--teal-50); color:var(--teal-700); border-color:var(--teal-200)}
.step.done .step-n svg{width:13px; height:13px; stroke:currentColor; stroke-width:3; fill:none; stroke-linecap:round; stroke-linejoin:round}
.step-lbl{font-size:.78rem; font-weight:600; color:var(--muted); white-space:nowrap}
.step.active .step-lbl{color:var(--ink)}
.step-sep{flex:1; min-width:14px; height:1px; background:var(--line-2)}
.modal-step{display:none}
.modal-step.show{display:block; animation:fade .22s ease}

.radio-cards{display:flex; flex-direction:column; gap:10px}
.radio-card{display:flex; align-items:flex-start; gap:13px; padding:14px 16px; border-radius:var(--r-lg); border:1px solid var(--line-2); background:#fff; cursor:pointer; transition:border-color .15s, background .15s; min-height:44px}
.radio-card:hover{border-color:var(--teal-200); background:var(--slate-25)}
.radio-card input{position:absolute; opacity:0; width:0; height:0}
.radio-card .rc-dot{width:20px; height:20px; border-radius:50%; border:2px solid var(--line-2); flex:none; margin-top:2px; display:grid; place-items:center; transition:border-color .15s}
.radio-card .rc-dot::after{content:""; width:10px; height:10px; border-radius:50%; background:var(--teal-600); transform:scale(0); transition:transform .15s}
.radio-card.sel{border-color:var(--teal-400); background:var(--teal-50)}
.radio-card.sel .rc-dot{border-color:var(--teal-600)}
.radio-card.sel .rc-dot::after{transform:scale(1)}
.radio-card .rc-body{flex:1; min-width:0}
.radio-card .rc-t{font-weight:600; font-size:.92rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.radio-card .rc-d{font-size:.8rem; color:var(--muted); margin-top:3px; line-height:1.5}
.radio-card .rc-price{font-weight:700; font-size:.9rem; color:var(--teal-700); white-space:nowrap}

.rs-redeem{margin-top:4px; padding:14px 16px; border-radius:var(--r-lg); border:1px dashed var(--orange-100); background:linear-gradient(120deg,var(--orange-50),#fff 78%)}
.rs-redeem .rsr-head{display:flex; align-items:center; gap:10px; font-weight:600; font-size:.88rem}
.rs-redeem .rsr-head .ic{color:var(--orange-500)}
.rs-redeem .rsr-d{font-size:.8rem; color:var(--muted); margin:5px 0 11px; line-height:1.5}
.rs-redeem .rsr-row{display:flex; flex-wrap:wrap; gap:9px}
.rs-redeem .rsr-row input{flex:1; min-width:150px; min-height:44px; padding:11px 14px; border-radius:var(--r-pill); border:1px solid var(--line-2); font-family:inherit; font-size:.94rem; font-weight:500; letter-spacing:.03em; text-transform:uppercase; background:#fff}
.rs-redeem .rsr-row input::placeholder{font-weight:400; letter-spacing:.01em; text-transform:none; color:var(--muted)}
.rs-redeem .rsr-row input:focus{outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.rs-redeem .rsr-ok{display:none; align-items:center; gap:8px; margin-top:10px; font-size:.82rem; font-weight:600; color:var(--green-700)}
.rs-redeem .rsr-ok.show{display:flex}
.rs-redeem .rsr-ok .ic{color:var(--green-500)}

.capture{display:flex; flex-direction:column; align-items:center; text-align:center; gap:16px; padding:18px 8px 6px}
.capture-ring{position:relative; width:130px; height:130px; flex:none}
.capture-ring svg{width:130px; height:130px; transform:rotate(-90deg)}
.capture-ring .cr-bg{fill:none; stroke:var(--teal-100); stroke-width:9}
.capture-ring .cr-fg{fill:none; stroke:url(#capgrad); stroke-width:9; stroke-linecap:round; stroke-dasharray:364.4; stroke-dashoffset:364.4; transition:stroke-dashoffset .4s ease}
.capture-ring .cr-ic{position:absolute; inset:0; display:grid; place-items:center; color:var(--teal-600)}
.capture-ring .cr-ic .ic{width:38px; height:38px}
.capture-ring.spinning .cr-ic{animation:capspin 1.1s linear infinite}
@keyframes capspin{to{transform:rotate(360deg)}}
.capture-t{font-weight:600; font-size:1.05rem; letter-spacing:-.01em}
.capture-d{font-size:.85rem; color:var(--muted); max-width:36ch; line-height:1.5}
.capture-steps{display:flex; flex-wrap:wrap; justify-content:center; gap:7px; margin-top:2px}
.capture-steps .cs{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border-radius:var(--r-pill); font-size:.76rem; font-weight:600; background:var(--slate-100); color:var(--muted)}
.capture-steps .cs.on{background:var(--teal-50); color:var(--teal-700)}
.capture-steps .cs.done{background:var(--green-50); color:var(--green-700)}
.capture-steps .cs .ic{width:13px; height:13px}

/* ============ AGENDA (day / week / month + search + sync) ============ */
.agenda-toolbar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 12px; margin-bottom:16px}
.agenda-legend{display:flex; flex-wrap:wrap; gap:8px 14px; margin-left:auto}
.agenda-legend .gl{display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:500; color:var(--muted)}
.agenda-legend .sw{width:11px; height:11px; border-radius:4px; flex:none}
.agenda-legend .sw.busy{background:repeating-linear-gradient(45deg,var(--slate-200),var(--slate-200) 3px,#fff 3px,#fff 6px); border:1px solid var(--line)}
/* segmented view switcher (Dag / Week / Maand) */
.ag-views{display:inline-flex; background:var(--slate-100); border:1px solid var(--line); border-radius:var(--r-pill); padding:3px; gap:2px}
.ag-views .seg{border:none; background:transparent; font:inherit; font-size:.84rem; font-weight:600; color:var(--muted); padding:10px 16px; min-height:44px; border-radius:var(--r-pill); cursor:pointer; transition:background .15s,color .15s}
.ag-views .seg:hover{color:var(--ink)}
.ag-views .seg.active{background:#fff; color:var(--teal-700); box-shadow:var(--sh-xs)}
.ag-views .seg:focus-visible{outline:2px solid var(--teal-500); outline-offset:2px}
/* date navigation */
.ag-nav{display:inline-flex; align-items:center; gap:4px}
.ag-nav .nav-btn{width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:#fff; color:var(--muted); display:grid; place-items:center; cursor:pointer; transition:border-color .15s,color .15s}
.ag-nav .nav-btn:hover{border-color:var(--teal-200); color:var(--teal-700)}
.ag-today-btn{height:40px; padding:0 14px; border-radius:11px; border:1px solid var(--line); background:#fff; font:inherit; font-size:.82rem; font-weight:600; color:var(--ink); cursor:pointer; transition:border-color .15s,color .15s}
.ag-today-btn:hover{border-color:var(--teal-200); color:var(--teal-700)}
.ag-range{font-size:1.04rem; font-weight:700; letter-spacing:-.02em; text-transform:capitalize; min-width:0}
/* search */
.ag-search{position:relative; display:inline-flex; align-items:center}
.ag-search .ic{position:absolute; left:12px; width:17px; height:17px; color:var(--soft); pointer-events:none}
.ag-search input{font:inherit; font-size:.86rem; min-height:40px; padding:8px 34px 8px 35px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; width:210px; max-width:46vw; transition:border-color .15s,box-shadow .15s}
.ag-search input:focus{outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px var(--teal-50)}
.ag-search .ag-clear{position:absolute; right:6px; width:28px; height:28px; border-radius:50%; border:none; background:transparent; color:var(--soft); display:grid; place-items:center; cursor:pointer}
.ag-search .ag-clear:hover{color:var(--ink); background:var(--slate-100)}
/* sync control */
.ag-sync{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 13px; border-radius:var(--r-pill); border:1px solid var(--line); background:#fff; font:inherit; font-size:.82rem; font-weight:600; color:var(--muted); cursor:pointer; transition:border-color .15s,color .15s}
.ag-sync:hover{border-color:var(--teal-200); color:var(--teal-700)}
.ag-sync .ic{width:16px; height:16px}
.ag-sync.connected{background:var(--teal-50); border-color:var(--teal-200); color:var(--teal-700)}
.ag-sync .sync-dot{width:8px; height:8px; border-radius:50%; background:var(--green-500); flex:none}
.ag-sync .sync-last{color:var(--soft); font-weight:500}
.ag-sync.connected .sync-last{color:var(--teal-600)}

/* shared calendar surface */
.cal{border:1px solid var(--line); border-radius:var(--r-xl); background:rgba(255,255,255,.86); box-shadow:var(--sh-sm); overflow:hidden}
.cal-scroll{overflow:auto; -webkit-overflow-scrolling:touch; max-height:min(72vh,860px)}
/* ---- time grid (day + week) ---- */
.tg{position:relative; display:grid; min-width:0}
.tg.week{min-width:740px}
.tg-head{display:contents}
.tg-corner{position:sticky; top:0; left:0; z-index:6; background:var(--slate-50); border-bottom:1px solid var(--line); border-right:1px solid var(--line)}
.tg-colhead{position:sticky; top:0; z-index:5; background:var(--slate-50); border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:9px 12px; text-align:left}
.tg-colhead:last-child{border-right:none}
.tg-colhead.today{background:var(--teal-50)}
.tg-colhead.weekend{background:var(--slate-100)}
.tg-colhead .wd-day{font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted)}
.tg-colhead .wd-date{font-size:1.02rem; font-weight:700; letter-spacing:-.03em; margin-top:1px}
.tg-colhead.today .wd-date{color:var(--teal-700)}
.tg-colhead.is-clickable{cursor:pointer}
.tg-colhead.is-clickable:hover .wd-date{color:var(--teal-700)}
.tg-gutter{position:sticky; left:0; z-index:4; background:rgba(255,255,255,.92); border-right:1px solid var(--line)}
.tg-hour-label{height:var(--hh); font-size:.7rem; font-weight:600; color:var(--soft); text-align:right; padding:0 8px; transform:translateY(-7px); font-variant-numeric:tabular-nums}
.tg-col{position:relative; border-right:1px solid var(--line); cursor:cell}
.tg-col:last-child{border-right:none}
/* Hover-hint: lege kolomruimte is klikbaar om snel een afspraak in te plannen. */
@media (hover:hover){ .tg-col:hover{background-color:rgba(20,184,166,.04)} .tg-col.today:hover,.tg-col.weekend:hover{background-blend-mode:multiply} }
.tg-col.today{background:linear-gradient(180deg,rgba(20,184,166,.05),rgba(20,184,166,.02))}
.tg-col.weekend{background:var(--slate-25)}
.tg-col.drop-active{background:var(--teal-50)}
.tg-hour{height:var(--hh); border-bottom:1px solid var(--line); pointer-events:none}
.tg-hour.half{border-bottom-style:dashed; border-bottom-color:rgba(15,23,42,.05)}
.now-line{position:absolute; left:0; right:0; height:2.5px; background:var(--pink-500); z-index:7; pointer-events:none; box-shadow:0 0 0 2px rgba(244,63,94,.12)}
.now-line::before{content:""; position:absolute; left:-3px; top:-3px; width:9px; height:9px; border-radius:50%; background:var(--pink-500); box-shadow:0 0 0 2px rgba(244,63,94,.18)}

/* appointment blocks (positioned in the time grid) */
.appt-block{text-align:left; padding:5px 8px; border-radius:10px; border:1px solid var(--line); background:#fff; box-shadow:var(--sh-xs); transition:border-color .15s, box-shadow .15s, transform .1s; border-left-width:4px; overflow:hidden; display:flex; flex-direction:column; gap:0; line-height:1.2}
.appt-abs{position:absolute; z-index:3; cursor:grab}
.appt-abs:hover{border-color:var(--teal-200); box-shadow:var(--sh-sm); z-index:8}
.appt-abs:focus-visible{outline:2px solid var(--teal-500); outline-offset:1px; z-index:8}
.appt-abs.dragging{opacity:.55; cursor:grabbing; box-shadow:var(--sh); z-index:9}
.appt-abs.flash{animation:apptFlash 1.3s ease}
@keyframes apptFlash{0%,100%{box-shadow:var(--sh-xs)}30%{box-shadow:0 0 0 3px var(--teal-200),var(--sh-sm)}}
.appt-block.t-scan{border-left-color:var(--orange-500)}
.appt-block.t-behandeling{border-left-color:var(--teal-500)}
.appt-block.t-opvolging{border-left-color:var(--soft)}
.appt-block .ab-time{display:block; font-size:.68rem; font-weight:700; letter-spacing:-.01em; font-variant-numeric:tabular-nums; color:var(--muted)}
.appt-block.t-scan .ab-time{color:var(--orange-700)}
.appt-block.t-behandeling .ab-time{color:var(--teal-700)}
.appt-block .ab-name{display:block; font-weight:650; font-size:.79rem; letter-spacing:-.01em; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.appt-block .ab-desc{display:block; font-size:.71rem; color:var(--muted); line-height:1.25; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
/* ---- afspraak-status in de agenda (deel 3) ---- */
/* Statusknop in een blok: subtiel, rechtsboven, opent het statusmenu. */
.appt-block .ab-status-btn{position:absolute; top:3px; right:3px; z-index:4; width:18px; height:18px; border-radius:6px; display:inline-grid; place-items:center; color:var(--muted); background:rgba(255,255,255,.7); opacity:0; transition:opacity .12s, background .12s; cursor:pointer}
.appt-block .ab-status-btn .ic{width:12px; height:12px}
.appt-abs:hover .ab-status-btn,.appt-abs:focus-visible .ab-status-btn{opacity:1}
.appt-block .ab-status-btn:hover{background:#fff; color:var(--teal-600)}
/* Aanwezig: afgevinkt-vink. No-show: rood-gestreepte badge. Geannuleerd: doorgehaald. */
.appt-block .ab-done{position:absolute; bottom:3px; right:4px; color:var(--green-700)}
.appt-block .ab-done .ic{width:13px; height:13px}
.appt-block .ab-noshow{position:absolute; bottom:3px; right:4px; font-size:.6rem; font-weight:800; text-transform:uppercase; letter-spacing:.02em; color:var(--pink-700); padding:1px 5px; border-radius:5px; background:repeating-linear-gradient(135deg,#ffe1e8,#ffe1e8 4px,#fff 4px,#fff 8px); border:1px solid var(--pink-200)}
.appt-block .ab-cancel{position:absolute; bottom:2px; right:5px; font-size:.9rem; font-weight:700; color:var(--muted); line-height:1}
.appt-block.appt-st-aanwezig{opacity:.78}
.appt-block.appt-st-niet-gekomen{border-left-color:var(--pink-500); background:repeating-linear-gradient(135deg,#fff,#fff 8px,var(--pink-50) 8px,var(--pink-50) 16px)}
.appt-block.appt-st-niet-gekomen .ab-name{color:var(--pink-700)}
.appt-block.appt-st-geannuleerd{opacity:.6}
.appt-block.appt-st-geannuleerd .ab-name{text-decoration:line-through}
/* Week-lijst (smal scherm): status-chip rechts in de rij. */
.awl-row .awl-st{margin-left:auto; flex:none}
.awl-row.appt-st-geannuleerd .awl-name{text-decoration:line-through; color:var(--muted)}
.awl-row.appt-st-aanwezig .awl-name{color:var(--muted)}
/* Dashboard-rail: subtitel onder de no-show-teller. */
.stat-sub{font-size:.74rem; font-weight:500; color:var(--muted)}
/* external "private / busy" block from a synced calendar (read-only) */
.busy-block{position:absolute; z-index:2; border-radius:10px; padding:5px 8px; border:1px dashed var(--slate-200); color:var(--slate-900); overflow:hidden; display:flex; flex-direction:column; gap:0; line-height:1.2;
  background:repeating-linear-gradient(45deg,rgba(148,163,184,.2),rgba(148,163,184,.2) 5px,rgba(255,255,255,.72) 5px,rgba(255,255,255,.72) 10px)}
.busy-block .bb-time{display:block; font-size:.68rem; font-weight:700; font-variant-numeric:tabular-nums}
.busy-block .bb-label{font-size:.72rem; font-weight:600; display:flex; align-items:center; gap:5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.busy-block .bb-prov{width:14px; height:14px; border-radius:3px; display:inline-grid; place-items:center; font-size:.56rem; font-weight:800; color:#fff; flex:none}

/* ---- week-lijst (smal scherm): gestapelde dag-per-dag agenda ---- */
.ag-weeklist{display:none}
.awl-day{border-bottom:1px solid var(--line)}
.awl-day:last-child{border-bottom:none}
.awl-head{display:flex; align-items:baseline; gap:10px; width:100%; text-align:left; padding:11px 15px 9px; background:var(--slate-50); border:none; border-bottom:1px solid var(--line); cursor:pointer; font:inherit}
.awl-day.today .awl-head{background:var(--teal-50)}
.awl-head .awl-wd{font-weight:700; font-size:.92rem; letter-spacing:-.01em; text-transform:capitalize}
.awl-head .awl-dt{font-size:.8rem; color:var(--muted); font-weight:600}
.awl-day.today .awl-head .awl-dt{color:var(--teal-700)}
.awl-head .awl-count{margin-left:auto; font-size:.72rem; font-weight:600; color:var(--soft); font-variant-numeric:tabular-nums}
.awl-items{display:flex; flex-direction:column}
.awl-row{display:flex; gap:11px; width:100%; text-align:left; padding:10px 15px; border:none; border-bottom:1px solid var(--line); background:#fff; cursor:pointer; font:inherit; align-items:flex-start}
.awl-row:last-child{border-bottom:none}
.awl-row:hover{background:var(--teal-50)}
.awl-row:focus-visible{outline:2px solid var(--teal-500); outline-offset:-2px}
.awl-row .awl-time{flex:none; width:42px; font-size:.78rem; font-weight:700; color:var(--muted); font-variant-numeric:tabular-nums; padding-left:7px; border-left:3px solid var(--soft); border-radius:1px}
.awl-row.t-scan .awl-time{border-left-color:var(--orange-500); color:var(--orange-700)}
.awl-row.t-behandeling .awl-time{border-left-color:var(--teal-500); color:var(--teal-700)}
.awl-row.t-opvolging .awl-time{border-left-color:var(--soft)}
.awl-row.busy{cursor:default; color:var(--muted)}
.awl-row.busy .awl-time{border-left-color:var(--line-2)}
.awl-row .awl-main{min-width:0; flex:1}
.awl-row .awl-name{display:block; font-weight:650; font-size:.86rem; letter-spacing:-.01em}
.awl-row .awl-desc{display:block; font-size:.77rem; color:var(--muted); margin-top:1px}
.awl-empty{display:block; width:100%; text-align:left; padding:10px 15px; border:none; background:#fff; color:var(--soft); font:inherit; font-size:.8rem; cursor:pointer}
.awl-empty:hover{background:var(--teal-50); color:var(--teal-700)}
.awl-empty:focus-visible{outline:2px solid var(--teal-500); outline-offset:-2px}

/* ---- month grid ---- */
.mg{display:grid; grid-template-columns:repeat(7,1fr)}
.mg-dow{padding:9px 10px; font-size:.72rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); border-bottom:1px solid var(--line); border-right:1px solid var(--line); background:var(--slate-50)}
.mg-dow:nth-child(7){border-right:none}
.mg-cell{min-height:104px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:7px 8px 9px; display:flex; flex-direction:column; gap:4px; cursor:pointer; transition:background .12s; text-align:left; background:#fff; font:inherit}
.mg-cell:nth-child(7n){border-right:none}
.mg-cell:hover{background:var(--teal-50)}
.mg-cell.out{background:var(--slate-25); cursor:default}
.mg-cell.out:hover{background:var(--slate-25)}
.mg-cell.weekend{background:var(--slate-25)}
.mg-cell .mg-num{font-size:.84rem; font-weight:650; color:var(--ink); align-self:flex-start; min-width:24px; height:24px; display:grid; place-items:center; border-radius:50%}
.mg-cell.out .mg-num{color:var(--soft); font-weight:500}
.mg-cell.today .mg-num{background:var(--teal-700); color:#fff}
.mg-chip{display:flex; align-items:center; gap:5px; font-size:.72rem; font-weight:600; color:var(--ink); border-radius:6px; padding:2px 6px; background:var(--slate-50); border-left:3px solid var(--soft); overflow:hidden; white-space:nowrap; text-overflow:ellipsis}
.mg-chip.t-scan{border-left-color:var(--orange-500); background:var(--orange-50)}
.mg-chip.t-behandeling{border-left-color:var(--teal-500); background:var(--teal-50)}
.mg-chip.t-opvolging{border-left-color:var(--soft)}
.mg-chip.busy{border-left-color:var(--line-2); color:var(--muted); background:repeating-linear-gradient(45deg,rgba(148,163,184,.12),rgba(148,163,184,.12) 4px,transparent 4px,transparent 8px)}
.mg-chip .mc-time{font-variant-numeric:tabular-nums; color:var(--muted); font-weight:700; font-size:.68rem}
.mg-more{font-size:.7rem; font-weight:600; color:var(--teal-700); padding:1px 6px}

/* ---- search results ---- */
.ag-results{display:flex; flex-direction:column}
.ag-result{display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:13px 16px; border:none; border-bottom:1px solid var(--line); background:transparent; cursor:pointer; font:inherit; transition:background .12s}
.ag-result:last-child{border-bottom:none}
.ag-result:hover{background:var(--teal-50)}
.ag-result:focus-visible{outline:2px solid var(--teal-500); outline-offset:-2px}
.ag-result .res-date{width:62px; flex:none; text-align:center; padding:6px 0; border-radius:11px; background:var(--slate-50); border:1px solid var(--line)}
.ag-result .res-date .d{font-size:1.18rem; font-weight:700; letter-spacing:-.03em; line-height:1}
.ag-result .res-date .m{font-size:.64rem; font-weight:600; text-transform:uppercase; color:var(--muted)}
.ag-result .res-main{flex:1; min-width:0}
.ag-result .res-name{font-weight:650; font-size:.9rem}
.ag-result .res-meta{font-size:.78rem; color:var(--muted); margin-top:2px}
.ag-empty{padding:42px 20px; text-align:center; color:var(--muted)}
.ag-empty .empty-ic{display:inline-grid; place-items:center; width:54px; height:54px; border-radius:16px; background:var(--slate-50); color:var(--soft); margin-bottom:12px}

/* ---- sync modal ---- */
.syncprov{display:flex; flex-direction:column; gap:12px}
.prov-card{display:flex; align-items:center; gap:14px; padding:15px 16px; border:1.5px solid var(--line-2); border-radius:var(--r-lg); cursor:pointer; transition:border-color .15s,background .15s}
.prov-card:hover{border-color:var(--teal-200)}
.prov-card.sel{border-color:var(--teal-500); background:var(--teal-50)}
.prov-card input{position:absolute; opacity:0; width:0; height:0}
.prov-logo{width:44px; height:44px; border-radius:12px; display:grid; place-items:center; color:#fff; font-weight:800; font-size:1.1rem; flex:none}
.prov-logo.outlook{background:linear-gradient(150deg,#0a78d4,#28a8ea)}
.prov-logo.gmail{background:linear-gradient(150deg,#ea4335,#fbbc04)}
.prov-body{flex:1; min-width:0}
.prov-t{font-weight:650; font-size:.95rem}
.prov-d{font-size:.8rem; color:var(--muted); margin-top:2px}
.prov-check{width:22px; height:22px; border-radius:50%; border:2px solid var(--line-2); flex:none; display:grid; place-items:center; color:#fff}
.prov-card.sel .prov-check{background:var(--teal-500); border-color:var(--teal-500)}
.prov-card .prov-check .ic{width:13px; height:13px; opacity:0}
.prov-card.sel .prov-check .ic{opacity:1}
/* faux provider consent screen */
.consent{border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden; background:#fff}
.consent-head{display:flex; align-items:center; gap:11px; padding:15px 17px; border-bottom:1px solid var(--line); background:var(--slate-25)}
.consent-head .prov-logo{width:34px; height:34px; border-radius:9px; font-size:.9rem}
.consent-head .ch-t{font-weight:650; font-size:.9rem}
.consent-head .ch-acct{font-size:.78rem; color:var(--muted)}
.consent-body{padding:16px 18px}
.consent-app{display:flex; align-items:center; gap:10px; font-weight:650; font-size:.92rem; margin-bottom:12px}
.consent-app .ca-logo{width:30px; height:30px; border-radius:8px; background:linear-gradient(150deg,var(--teal-400),var(--teal-700)); display:grid; place-items:center; color:#fff}
.consent-scope{display:flex; gap:10px; padding:9px 0; font-size:.84rem; color:var(--muted)}
.consent-scope .ic{width:18px; height:18px; color:var(--teal-600); flex:none; margin-top:1px}
.consent-note{font-size:.74rem; color:var(--soft); margin-top:10px; line-height:1.5}
/* connected settings */
.sync-status{display:flex; align-items:center; gap:12px; padding:13px 15px; border-radius:var(--r-lg); background:var(--teal-50); border:1px solid var(--teal-200); margin-bottom:16px}
.sync-status .ss-logo{flex:none}
.sync-status .ss-body{flex:1; min-width:0}
.sync-status .ss-t{font-weight:650; font-size:.9rem}
.sync-status .ss-d{font-size:.78rem; color:var(--teal-700); margin-top:1px}
.sync-opt{padding:14px 0; border-top:1px solid var(--line)}
.sync-opt:first-of-type{border-top:none}
.sync-opt .so-label{font-weight:600; font-size:.86rem; margin-bottom:9px}
.sync-opt .so-hint{font-size:.76rem; color:var(--muted); font-weight:400; margin-top:2px}
.seg-radio{display:inline-flex; flex-wrap:wrap; gap:8px}
.seg-radio label{display:inline-flex; align-items:center; gap:8px; padding:9px 14px; min-height:42px; border:1.5px solid var(--line-2); border-radius:var(--r-pill); font-size:.84rem; font-weight:600; color:var(--muted); cursor:pointer; transition:border-color .15s,background .15s,color .15s}
.seg-radio label:has(input:checked){border-color:var(--teal-500); background:var(--teal-50); color:var(--teal-700)}
.seg-radio label:focus-within{box-shadow:0 0 0 3px var(--teal-50)}
.seg-radio input{position:absolute; opacity:0; width:0; height:0}
.sync-window{min-height:44px; padding:10px 14px; border-radius:var(--r); border:1px solid var(--line-2); font-family:inherit; font-size:.9rem; background:#fff; width:100%; max-width:320px}
.sync-resync{display:flex; align-items:center; gap:12px; flex-wrap:wrap; justify-content:space-between}
.disconnect{color:var(--pink-600); background:none; border:none; font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; padding:6px 0; text-decoration:underline; text-underline-offset:3px}
.disconnect:hover{color:var(--pink-700)}

/* ============ RAPPORTEN ============ */
.rep-group{margin-top:18px}
.rep-group:first-child{margin-top:0}
.rep-group-h{display:flex; align-items:center; gap:11px; padding:6px 2px 12px}
.rep-group-h .rg-av{width:34px; height:34px; border-radius:10px; color:#fff; display:grid; place-items:center; font-weight:600; font-size:.74rem; flex:none}
.rep-group-h .rg-name{font-weight:600; font-size:.95rem}
.rep-group-h .rg-sub{font-size:.76rem; color:var(--muted)}
.rep-list{display:flex; flex-direction:column; gap:10px}
.rep-row{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:13px 15px; border-radius:var(--r-lg); border:1px solid var(--line); background:var(--slate-25)}
.rep-ic{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; flex:none; border:1px solid var(--line); background:#fff}
.rep-ic.scan{color:var(--orange-500)} .rep-ic.plan{color:var(--teal-600)}
.rep-main{flex:1; min-width:160px}
.rep-t{font-weight:600; font-size:.9rem}
.rep-d{font-size:.78rem; color:var(--muted); margin-top:3px}
.rep-act{display:flex; gap:8px; flex-wrap:wrap}

/* ============ INSTELLINGEN ============ */
.set-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:18px; align-items:start}
.set-card{background:rgba(255,255,255,.82); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-sm); padding:20px 22px}
.set-card h2{font-size:1rem; font-weight:600; display:flex; align-items:center; gap:9px; margin-bottom:4px}
.set-card h2 .ic{color:var(--teal-500)}
.set-card .set-sub{font-size:.8rem; color:var(--muted); margin-bottom:16px}
.set-row{display:flex; align-items:center; gap:14px; padding:12px 0; border-top:1px solid var(--line)}
.set-row:first-of-type{border-top:none}
.set-row .sr-label{font-size:.8rem; color:var(--muted); font-weight:500; min-width:96px}
.set-row .sr-val{font-weight:600; font-size:.88rem; flex:1; min-width:0}
.set-row .sr-val.muted{color:var(--muted); font-weight:500}
.set-av{width:44px; height:44px; border-radius:13px; background:linear-gradient(150deg,var(--teal-400),var(--teal-700)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.9rem; flex:none}
.btn.btn-sm{padding:7px 12px; min-height:36px; font-size:.82rem}
/* ----- Account: zelfbeheer (wachtwoord, 2FA, sessies) ----- */
.acc-actions{display:flex; flex-direction:column; gap:10px; margin-top:16px}
.acc-action{display:flex; align-items:center; gap:13px; width:100%; text-align:left; padding:13px 14px; border-radius:var(--r); border:1px solid var(--line-2); background:#fff; cursor:pointer; transition:border-color .15s, box-shadow .15s, background .15s}
.acc-action:hover{border-color:var(--teal-400); box-shadow:var(--sh-xs)}
.acc-action:focus-visible{outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.acc-action .aa-ic{width:40px; height:40px; border-radius:11px; background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-600); display:grid; place-items:center; flex:none}
.acc-action .aa-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.acc-action .aa-t{font-weight:600; font-size:.9rem; color:var(--ink); display:flex; align-items:center; gap:8px}
.acc-action .aa-d{font-size:.78rem; color:var(--muted); font-weight:400; line-height:1.4}
.acc-action .aa-chev{color:var(--soft); flex:none}
.acc-sessions{margin-top:20px; padding-top:16px; border-top:1px solid var(--line)}
.acc-sessions-head{margin-bottom:12px}
.acc-sessions-head .ash-t{display:block; font-weight:600; font-size:.9rem; color:var(--ink)}
.acc-sessions-head .ash-d{display:block; font-size:.78rem; color:var(--muted); margin-top:2px}
.session-row{display:flex; align-items:center; gap:13px; padding:12px 0; border-top:1px solid var(--line)}
.session-row:first-child{border-top:none}
.session-row .se-ic{width:40px; height:40px; border-radius:11px; border:1px solid var(--line); background:var(--slate-50); color:var(--muted); display:grid; place-items:center; flex:none}
.session-row .se-body{flex:1; min-width:0}
.session-row .se-t{font-weight:600; font-size:.86rem; color:var(--ink); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.session-row .se-d{font-size:.76rem; color:var(--muted); margin-top:2px}
.chip-current{background:var(--teal-50); color:var(--teal-700)}
.chip-current .dot{background:var(--teal-500)}
/* ----- Team & medewerkers ----- */
.set-card-head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; margin-bottom:14px}
.set-card-head h2{margin-bottom:4px}
.set-card-head .btn{flex:none}
.staff-row{display:flex; align-items:center; gap:13px; padding:12px 0; border-top:1px solid var(--line)}
.staff-row:first-child{border-top:none}
.staff-av{width:40px; height:40px; border-radius:11px; background:linear-gradient(150deg,var(--teal-400),var(--teal-700)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:.82rem; flex:none}
.staff-body{flex:1; min-width:0}
.staff-row .staff-t{font-weight:600; font-size:.86rem; color:var(--ink); display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.staff-row .staff-d{font-size:.76rem; color:var(--muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.staff-actions{display:flex; gap:6px; flex:none}
.staff-actions .icon-btn{width:36px; height:36px; border-radius:9px}
.icon-btn-danger:hover{border-color:var(--pink-200); color:var(--pink-600)}
.staff-self{font-size:.74rem; font-weight:600; color:var(--muted); background:var(--slate-100); border-radius:var(--r-pill); padding:4px 11px; flex:none}
.modal-head .m-ic.m-ic-danger{background:var(--pink-50); border-color:var(--pink-200); color:var(--pink-600)}
/* ----- 2FA setup + recovery codes (modal) ----- */
.tfa-step{display:none}
.tfa-step.show{display:block}
.tfa-qr-wrap{display:flex; gap:18px; align-items:flex-start; flex-wrap:wrap}
.tfa-qr{width:148px; height:148px; border-radius:var(--r); border:1px solid var(--line-2); background:#fff; padding:10px; flex:none}
.tfa-qr svg{width:100%; height:100%; display:block}
.tfa-qr-side{flex:1; min-width:180px}
.tfa-secret{display:inline-flex; align-items:center; gap:8px; margin-top:6px; padding:8px 12px; border-radius:var(--r-pill); background:var(--slate-50); border:1px solid var(--line-2); font-weight:700; letter-spacing:.12em; font-size:.92rem; color:var(--ink); cursor:pointer}
.tfa-secret:hover{border-color:var(--teal-400); background:var(--teal-50)}
.code-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:9px 14px; margin:14px 0}
.code-grid .rc-code{font-family:inherit; font-weight:700; letter-spacing:.1em; font-size:.92rem; color:var(--ink); background:var(--slate-50); border:1px solid var(--line-2); border-radius:var(--r-sm); padding:9px 12px; text-align:center}
/* ----- wachtwoord-sterkte ----- */
.pw-strength{margin-top:6px}
.pw-bar{height:6px; border-radius:var(--r-pill); background:var(--slate-100); overflow:hidden}
.pw-bar i{display:block; height:100%; width:0; border-radius:var(--r-pill); transition:width .2s, background .2s}
.pw-bar.s1 i{width:25%; background:var(--pink-500)}
.pw-bar.s2 i{width:55%; background:var(--amber-400)}
.pw-bar.s3 i{width:80%; background:var(--teal-500)}
.pw-bar.s4 i{width:100%; background:var(--green-500)}
.pw-strength .pw-label{font-size:.74rem; font-weight:600; margin-top:5px; color:var(--muted)}
.integration{display:flex; align-items:center; gap:13px; padding:13px 0; border-top:1px solid var(--line)}
.integration:first-of-type{border-top:none}
.integration .int-ic{width:42px; height:42px; border-radius:12px; border:1px solid var(--line); background:#fff; display:grid; place-items:center; flex:none; font-weight:700; font-size:.78rem; color:var(--ink)}
.integration .int-body{flex:1; min-width:0}
.integration .int-t{font-weight:600; font-size:.88rem}
.integration .int-d{font-size:.76rem; color:var(--muted); margin-top:2px}
.toggle{width:42px; height:24px; border-radius:var(--r-pill); background:var(--slate-200); position:relative; flex:none; transition:background .18s; cursor:pointer; border:none}
/* Enlarge the touch/click target to 44px without changing the drawn 42x24 track */
.toggle::before{content:""; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:var(--r-pill)}
.toggle::after{content:"0"; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:var(--sh-xs); transition:transform .18s; display:grid; place-items:center; font-size:.62rem; font-weight:800; line-height:1; color:var(--soft)}
.toggle.on{background:var(--teal-700)}
.toggle.on::after{transform:translateX(18px); content:"I"; color:var(--teal-700)}
.set-lang{display:inline-flex; align-items:center; gap:8px; padding:8px 13px; border-radius:var(--r-pill); background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-700); font-weight:600; font-size:.84rem}
/* Meldingskanalen: matrix met een toggle-kolom per kanaal (e-mail/SMS/push) per gebeurtenis */
.notif-matrix{margin-top:4px}
.notif-head{display:grid; grid-template-columns:1fr repeat(3,46px); gap:10px; align-items:end; padding-bottom:10px; border-bottom:1px solid var(--line)}
.notif-head .nh-spacer{min-width:0}
.notif-head .nh-ch{font-size:.7rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); text-align:center}
.notif-event{display:grid; grid-template-columns:1fr repeat(3,46px); gap:10px; align-items:center; padding:13px 0; border-top:1px solid var(--line)}
.notif-event:first-of-type{border-top:none}
.notif-event .ne-body{min-width:0}
.notif-event .ne-t{font-weight:600; font-size:.88rem}
.notif-event .ne-d{font-size:.76rem; color:var(--muted); margin-top:2px}
.notif-event .toggle{justify-self:center}
/* GDPR-/data-acties: rijen met icoon, omschrijving en knop (zelfde patroon als .acc-action) */
.gdpr-actions{display:flex; flex-direction:column; gap:10px; margin-top:4px}
.retention-seg{display:inline-flex; gap:6px; flex-wrap:wrap; margin-top:6px}
.retention-seg .rs-opt{padding:8px 13px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; font:inherit; font-size:.82rem; font-weight:600; color:var(--muted); cursor:pointer; transition:border-color .15s, background .15s, color .15s}
.retention-seg .rs-opt:hover{border-color:var(--teal-400)}
.retention-seg .rs-opt:focus-visible{outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.retention-seg .rs-opt.active{background:var(--teal-50); border-color:var(--teal-400); color:var(--teal-700)}

/* ============ FOOTER ============ */
.site-footer{margin-top:8px; border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(255,255,255,.5),rgba(255,255,255,.78))}
.footer-inner{max-width:1240px; margin:0 auto; padding:40px clamp(16px,3vw,40px) 0}
.footer-top{display:grid; grid-template-columns:minmax(220px,1.4fr) repeat(4,minmax(120px,1fr)); gap:28px 32px}
.foot-brand{min-width:0}
.foot-brand .fb-mark{display:flex; align-items:center; gap:11px; margin-bottom:13px}
.foot-brand .fb-logo{width:34px; height:34px; border-radius:10px; background:linear-gradient(150deg,var(--teal-400),var(--teal-600)); display:grid; place-items:center; flex:none; box-shadow:0 6px 16px rgba(20,184,166,.3)}
.foot-brand .fb-logo svg{width:19px; height:19px; stroke:#fff; stroke-width:2.4; fill:none}
.foot-brand .fb-name{font-weight:700; font-size:1rem; letter-spacing:-.03em}
.foot-brand .fb-name span{color:var(--teal-600)}
.foot-brand .fb-blurb{font-size:.84rem; color:var(--muted); line-height:1.55; max-width:34ch}
.foot-brand .fb-badges{display:flex; flex-wrap:wrap; gap:7px; margin-top:14px}
.foot-brand .fb-badge{display:inline-flex; align-items:center; gap:6px; font-size:.7rem; font-weight:600; color:var(--teal-700); background:var(--teal-50); border:1px solid var(--teal-200); border-radius:var(--r-pill); padding:4px 10px}
.foot-col h3{font-size:.68rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:13px}
.foot-col ul{list-style:none; display:flex; flex-direction:column; gap:2px}
.foot-link{display:inline-flex; align-items:center; min-height:36px; padding:3px 0; font-size:.86rem; font-weight:500; color:var(--ink); transition:color .14s; border-radius:6px}
.foot-link:hover{color:var(--teal-700)}
.foot-link:focus-visible{outline:2px solid var(--teal-600); outline-offset:2px}
.footer-legal{max-width:1240px; margin:28px auto 0; padding:18px clamp(16px,3vw,40px) 26px; border-top:1px solid var(--line); display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px}
.fl-copy{font-size:.78rem; color:var(--muted); font-weight:500}
.fl-meta{display:flex; flex-wrap:wrap; gap:6px 18px; font-size:.76rem; color:var(--soft)}
.fl-meta b{color:var(--muted); font-weight:600}
.fl-mini{display:flex; gap:6px 16px; margin-left:auto; flex-wrap:wrap}
.fl-mini .foot-link{font-size:.78rem; color:var(--muted); min-height:32px}

/* ============ INFO MODALS (privacy / contact) ============ */
.info-modal{max-width:680px}
.info-body{padding:0 24px 8px; max-height:min(70vh,640px); overflow-y:auto}
.info-sec{padding:18px 0; border-top:1px solid var(--line)}
.info-sec:first-child{border-top:none}
.info-sec h3{font-size:.96rem; font-weight:600; letter-spacing:-.01em; margin-bottom:7px; display:flex; align-items:center; gap:9px}
.info-sec h3 .num-badge{width:24px; height:24px; border-radius:7px; background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-700); font-size:.74rem; font-weight:700; display:grid; place-items:center; flex:none}
.info-sec p{font-size:.86rem; color:var(--muted); line-height:1.6}
.info-sec ul{margin:8px 0 0; padding-left:2px; list-style:none; display:flex; flex-direction:column; gap:7px}
.info-sec ul li{position:relative; padding-left:22px; font-size:.85rem; color:var(--muted); line-height:1.55}
.info-sec ul li::before{content:""; position:absolute; left:3px; top:8px; width:7px; height:7px; border-radius:2px; background:var(--teal-400)}
.info-updated{font-size:.76rem; color:var(--soft); font-weight:500; margin-top:4px}
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start}
.contact-aside{display:flex; flex-direction:column; gap:16px}
.contact-block{display:flex; gap:13px; align-items:flex-start}
.contact-block .cb-ic{width:40px; height:40px; border-radius:11px; background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-600); display:grid; place-items:center; flex:none}
.contact-block .cb-ic .ic{width:19px; height:19px}
.contact-block .cb-t{font-size:.72rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted)}
.contact-block .cb-v{font-size:.88rem; font-weight:500; color:var(--ink); line-height:1.5; margin-top:3px}
.contact-block .cb-v a{color:var(--teal-700); font-weight:600}
.contact-hours{font-size:.8rem; color:var(--muted); background:var(--slate-25); border:1px solid var(--line); border-radius:var(--r-lg); padding:13px 15px; line-height:1.6}
.contact-hours b{color:var(--ink)}
.info-sent{display:flex; gap:11px; align-items:center; padding:13px 15px; border-radius:var(--r-lg); background:var(--teal-50); border:1px solid var(--teal-200); color:var(--teal-700); font-weight:600; font-size:.86rem; margin-top:4px}
.info-sent[hidden]{display:none}
.info-sent .ic{stroke:var(--teal-600); flex:none}

/* zorgplan editor */
.zp-edit-andu{display:flex; flex-direction:column; gap:14px}
.zp-field{display:flex; flex-wrap:wrap; align-items:center; gap:12px}
.zp-field label{font-size:.82rem; font-weight:600; min-width:120px}
.zp-field select,.zp-field input[type="number"]{min-height:44px; padding:10px 14px; border-radius:var(--r); border:1px solid var(--line-2); font-family:inherit; font-size:.9rem; background:#fff}
.zp-field input[type="range"]{flex:1; min-width:140px; accent-color:var(--orange-500); height:6px}
.zp-field .zp-rangeval{font-weight:700; font-size:1rem; min-width:24px; text-align:center; color:var(--orange-700)}
/* andullatie pauzeren / hervatten */
.andu-pause{display:flex; flex-wrap:wrap; align-items:center; gap:14px; padding:14px 16px; margin:14px 0 4px; border-radius:var(--r-lg); border:1px solid var(--orange-100); background:linear-gradient(125deg,var(--orange-50),#fff 80%)}
.andu-pause .ap-body{flex:1; min-width:200px}
.andu-pause .ap-t{font-weight:600; font-size:.92rem; display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.andu-pause .ap-d{font-size:.8rem; color:var(--muted); margin-top:4px; line-height:1.5}
.sched-scroll.is-paused{opacity:.55; filter:saturate(.6)}
.andu-row.is-paused{opacity:.72}
/* inline-edit BackCare-doel */
.bc-doel-cell .v{display:flex; align-items:center; gap:6px}
.bc-doel-edit{width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--muted); display:grid; place-items:center; transition:border-color .15s,color .15s; flex:none}
.bc-doel-edit:hover{border-color:var(--teal-200); color:var(--teal-600)}
.bc-doel-form{display:flex; align-items:center; gap:8px}
.bc-doel-form input[type="number"]{width:64px; min-height:38px; padding:6px 10px; border-radius:var(--r); border:1px solid var(--line-2); font-family:inherit; font-size:1rem; font-weight:700; color:var(--teal-600); background:#fff}
.bc-doel-save{width:38px; height:38px}
/* overzicht scan-acties */
.ov-scan-acts{display:flex; flex-wrap:wrap; align-items:center; gap:14px}
.ex-remove{width:44px; height:44px; border-radius:11px; border:1px solid var(--line); background:#fff; color:var(--muted); display:grid; place-items:center; transition:border-color .15s,color .15s; flex:none}
.ex-remove:hover{border-color:var(--pink-500); color:var(--pink-600)}

/* ============ RESPONSIVE ============ */
@media (max-width:980px){
  .dash-grid{grid-template-columns:1fr}
  .dash-head{margin-bottom:18px}
  .cols-2{grid-template-columns:1fr}
}
/* Below ~820px the patient table reflows to stacked cards so no column (incl. Status
   + Volgende afspraak) is ever scrolled off-screen. No horizontal scrolling on tablet/mobile. */
@media (max-width:820px){
  .ptable-scroll{overflow-x:visible; border:none; background:none; box-shadow:none; border-radius:0}
  .ptable{min-width:0; border-collapse:separate; display:block}
  .ptable thead{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
  .ptable tbody{display:flex; flex-direction:column; gap:12px}
  .ptable tbody tr{display:grid; grid-template-columns:1fr auto; gap:8px 14px; align-items:center;
    background:rgba(255,255,255,.85); border:1px solid var(--line); border-radius:var(--r-lg); box-shadow:var(--sh-xs); padding:14px 16px}
  .ptable tbody tr:hover{background:#fff; border-color:var(--teal-200)}
  .ptable tbody tr:last-child td{border-bottom:1px solid var(--line)}
  .ptable td{display:flex; align-items:center; gap:8px; padding:0; border-bottom:none; white-space:normal; font-size:.84rem}
  .ptable td[data-label]::before{content:attr(data-label); font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; color:var(--muted); margin-right:auto}
  .ptable td.pt-td-name{grid-column:1 / -1; padding-bottom:10px; margin-bottom:2px; border-bottom:1px solid var(--line)}
  .ptable td.pt-td-name::before{display:none}
  .ptable td.pt-td-plan{grid-column:1; justify-content:flex-start}
  .ptable td.pt-td-plan::before{display:none}
  .ptable td.pt-td-status{grid-column:2; justify-content:flex-end}
  .ptable td.pt-td-status::before{display:none}
}
@media (max-width:900px){
  /* Telefoon/tablet: de zijbalk wordt een inklapbaar off-canvas paneel. De hamburger in de
     topbar opent/sluit hem; een overlay verduistert de inhoud. De content vult de volle breedte.
     Desktop (>900px) blijft exact ongewijzigd: daar is de hamburger verborgen en blijft het
     2-koloms grid met de vaste rail intact. */
  .app{grid-template-columns:minmax(0,1fr)}
  .nav-toggle{display:grid}
  /* Rail blijft zijn eigen verticale opmaak houden, maar staat nu vast links en buiten beeld. */
  .sidebar{position:fixed; top:0; left:0; bottom:0; height:100dvh; width:min(82vw,300px); z-index:45;
    padding-top:78px; border-right:1px solid rgba(15,23,42,.18); overflow-y:auto; -webkit-overflow-scrolling:touch;
    transform:translateX(-100%); transition:transform .26s cubic-bezier(.3,.8,.3,1); will-change:transform}
  .app.nav-open .sidebar{transform:none; box-shadow:24px 0 60px rgba(15,23,42,.34)}
  .app.nav-open .nav-overlay{opacity:1}
  .topbar{position:sticky; top:0; padding:10px clamp(14px,3vw,28px)}
  .topbar-inner{max-width:100%}
  .tb-context{flex:1 1 auto}
  .main{min-width:0; padding:18px clamp(14px,3vw,28px) 56px}
  /* Open: hamburger wordt een kruis. */
  .app.nav-open .nav-toggle .nt-bars{display:none}
  .app.nav-open .nav-toggle .nt-x{display:block}
  /* Body-scroll vergrendelen terwijl de off-canvas nav openstaat. */
  body.nav-locked{overflow:hidden}
}
@media (prefers-reduced-motion:reduce){
  .sidebar{transition:none}
  .nav-overlay{transition:none}
}
/* Tablet/telefoon (<=720px): vanaf hier wordt de zoekknop al een enkel icoon (zie .tb-search),
   dus geven we de paginatitel ademruimte door de account-naam/rol te verbergen. Alleen de avatar
   blijft als compacte identiteits-chip. Zo botst de actie-cluster niet meer met de titel/eyebrow. */
@media (max-width:720px){
  .tb-account .ta-meta{display:none}
  .tb-account{padding:5px}
}
@media (max-width:560px){
  .lang-trigger{padding:8px 10px}
}
/* Telefoon (<=480px): de topbar mag niet meer overlappen. De paginatitel krimpt en kapt
   netjes af met ellipsis (geen icoon dat eroverheen schildert); de breadcrumb-subtekst
   ("Kineportaal") valt weg; de actie-cluster blijft rechts uitgelijnd, krimpt niet (flex-shrink:0)
   en houdt een kleine rechter safe-gutter zodat de avatar volledig in beeld blijft. De inline
   zoek-affordance is hier al enkel het zoek-icoon (zie .tb-search <=720px), dus geen dubbele
   zoek-knop. Desktop blijft ongewijzigd. */
@media (max-width:480px){
  .topbar{padding-right:max(12px, env(safe-area-inset-right))}
  .topbar-inner{gap:8px}
  /* Titelkolom claimt de resterende ruimte en krimpt; de titel kapt af i.p.v. onder de iconen te vallen. */
  .tb-context{flex:1 1 auto; min-width:0}
  .tb-eyebrow{display:none}
  /* Actie-cluster: vaste breedte, rechts uitgelijnd, compactere tussenruimte. */
  .tb-actions{flex:0 0 auto; gap:6px}
  /* Avatar-chip volledig in beeld houden: geen extra rechter-padding die hem afsnijdt. */
  .tb-account{padding:4px}
}
@media (max-width:760px){
  .status-strip{grid-template-columns:1fr 1fr}
  .scan-hero{grid-template-columns:1fr; justify-items:center}
  .gauge-wrap{margin:0 auto}
  .scan-hero-side{width:100%}
  .spine-deep{grid-template-columns:1fr}
  .redeem-grid{grid-template-columns:1fr}
}
@media (max-width:760px){
  .steps .step-lbl{display:none}
  .agenda-legend{margin-left:0; width:100%; order:5}
  /* Agenda toolbar stacks: views + nav on their own rows, search full width. */
  .ag-toprow{gap:10px}
  .ag-views{order:1}
  .ag-nav{order:2}
  .ag-range{order:3; width:100%}
  .ag-search{order:4; flex:1 1 100%}
  .ag-search input{width:100%; max-width:none}
  .mg-cell{min-height:74px; padding:5px 4px 6px}
  .mg-chip .mc-time{display:none}
  .mg-chip{padding:2px 4px}
}
/* Smal scherm: week-weergave wordt een gestapelde dag-lijst i.p.v. het brede tijdrooster. */
@media (max-width:640px){
  .cal:has(.ag-weeklist) .cal-scroll{display:none}
  .ag-weeklist{display:block}
}
@media (max-width:560px){
  body{font-size:14.5px}
  .form-grid{grid-template-columns:1fr}
  .field.col-2{grid-column:auto}
  .plist-count{margin-left:0; width:100%}
  .rep-act{width:100%}
  .rep-act .btn{flex:1; justify-content:center}
  .zp-field label{min-width:100%}
  .fu-row{grid-template-columns:40px 1fr; row-gap:11px}
  .fu-row .weekstrip{grid-column:1 / -1; padding-left:54px}
  .fu-row .fu-nums{grid-column:1 / -1; padding-left:54px; justify-content:flex-start; gap:20px}
  .fu-num{text-align:left}
  .fu-thumb{width:40px}
  .scan-compact{flex-direction:column; align-items:flex-start}
  .region{grid-template-columns:88px 1fr 44px}
  .dash-head .quick{width:100%}
  .quick .btn{flex:1; justify-content:center}
}
@media (max-width:420px){
  .status-strip{grid-template-columns:1fr}
  .pt-name{font-size:1.16rem}
  .quick .btn .lbl{display:none}
  .quick .btn{padding:10px 14px; flex:0 1 auto}
}
/* Footer + info modal responsiveness */
@media (max-width:960px){
  .footer-top{grid-template-columns:1fr 1fr 1fr; gap:26px 28px}
  .foot-brand{grid-column:1 / -1}
}
@media (max-width:700px){
  .contact-grid{grid-template-columns:1fr}
}
@media (max-width:560px){
  .footer-inner{padding-top:32px}
  .footer-top{grid-template-columns:1fr 1fr; gap:24px 22px}
  .footer-legal{flex-direction:column; align-items:flex-start; gap:12px}
  .fl-mini{margin-left:0}
}
@media (max-width:380px){
  .footer-top{grid-template-columns:1fr}
}

/* ============ PATIENT CRUD: ROW ACTIONS / DANGER / WIZARD / POPUPS ============ */
:root{--pink-200:#fecdd3}
/* Desktop: zero-width sticky last cell, the buttons float over the visible row end on
   hover/focus, ook wanneer de tabel horizontaal scrolt. Cards (<=820px) tonen ze inline.
   Sticky cellen vereisen border-collapse:separate; de rand-look blijft identiek. */
.ptable{border-collapse:separate; border-spacing:0}
.ptable .pt-td-act{width:0; padding:0; position:sticky; right:0}
.pt-rowact{display:flex; gap:6px; align-items:center}
.rowact-btn{width:44px; height:44px; border-radius:12px; border:1px solid var(--line-2); background:#fff; box-shadow:var(--sh-xs); color:var(--muted); display:grid; place-items:center; cursor:pointer; transition:color .15s, background .15s, border-color .15s, opacity .15s}
.rowact-btn .ic{width:17px; height:17px}
.rowact-btn:hover,.rowact-btn:focus-visible{border-color:var(--teal-400); color:var(--teal-700); background:var(--teal-50)}
.rowact-btn.danger:hover,.rowact-btn.danger:focus-visible{border-color:var(--pink-200); color:var(--pink-600); background:var(--pink-50)}
@media (hover:hover) and (min-width:821px){
  .pt-rowact{position:absolute; right:0; top:0; bottom:0; padding:0 16px 0 56px; background:linear-gradient(90deg, transparent 0, var(--teal-50) 42%); opacity:0; transition:opacity .14s; pointer-events:none}
  .ptable tbody tr:hover .pt-rowact,.ptable tbody tr:focus-within .pt-rowact{opacity:1; pointer-events:auto}
}
/* Touch-toestellen boven het kaart-breakpoint: een echte kolom in plaats van zwevende
   knoppen, zodat permanent zichtbare acties nooit data bedekken. De actiekolom krijgt een
   vaste min-breedte (3 knoppen van 44px + tussenruimte) plus rechter kolompadding, zodat de
   knoppen volledig binnen de card-radius vallen en niet door de rechterrand worden afgesneden. */
@media (hover:none) and (min-width:821px){
  /* Iets krappere celpadding in deze variant maakt ruimte vrij voor de zichtbare actiekolom,
     zodat de tabel binnen de kaartbreedte blijft en de knoppen niet door de rechterrand worden
     afgesneden. De actiekolom krijgt een vaste min-breedte (3 knoppen + tussenruimte) plus
     rechter kolompadding zodat de knoppen volledig binnen de card-radius vallen. */
  .ptable th,.ptable td{padding-left:10px; padding-right:10px}
  .ptable th.pt-td-check,.ptable td.pt-td-check{padding-left:14px}
  .ptable .pt-td-act{position:static; width:1%; min-width:158px; padding:6px 16px 6px 8px}
  .pt-rowact{position:static; transform:none; justify-content:flex-end; gap:5px}
  /* De naamkolom krijgt een begrensde breedte en kort enkel uitzonderlijk lange namen netjes in,
     zodat de zichtbare actiekolom volledig binnen de kaartbreedte past en niets wordt afgesneden. */
  .ptable th.pt-td-name,.ptable td.pt-td-name{max-width:170px}
  .ptable td.pt-td-name .pt-cell-name,.ptable td.pt-td-name .pt-open-btn,.ptable td.pt-td-name .pt-cell-sub{
    max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; display:block}
}
@media (max-width:820px){
  .ptable .pt-td-act{width:auto; position:static; grid-column:1 / -1; justify-content:flex-end; border-top:1px solid var(--line); padding-top:10px}
  .pt-rowact{position:static; transform:none}
}

/* ============ PATIENTENLIJST: SELECTIE / BULKBALK / PAGINERING ============ */
/* Selectie-kolom: smalle eerste cel met de checkbox. */
.ptable th.pt-td-check,.ptable td.pt-td-check{width:42px; padding-left:16px; padding-right:0; text-align:center}
.pt-td-check input[type="checkbox"]{width:17px; height:17px; accent-color:var(--teal-600); cursor:pointer; vertical-align:middle}
.ptable tbody tr.row-sel{background:var(--teal-50)}
.ptable tbody tr.row-sel:hover{background:var(--teal-100,#ccfbf1)}

/* Bulkbalk: verschijnt boven de tabel zodra er een selectie is. */
.plist-bulkbar{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:14px; padding:10px 14px;
  border-radius:var(--r-lg); border:1px solid var(--teal-200); background:var(--teal-50); box-shadow:var(--sh-xs)}
.plist-bulkbar[hidden]{display:none}
.plb-count{font-weight:600; font-size:.86rem; color:var(--teal-800,#115e59); white-space:nowrap}
.plb-actions{display:flex; flex-wrap:wrap; gap:8px; margin-left:auto}
.plb-actions .btn{min-height:40px}
#plb-clear{padding-left:11px; padding-right:11px}
#plb-clear .ic{width:15px; height:15px}

/* Bulk plan/status popover: lichte menu-kaart die bij de knop opent. */
.plb-pop{position:absolute; z-index:90; min-width:200px; padding:7px; border-radius:var(--r-lg);
  border:1px solid var(--line-2); background:#fff; box-shadow:var(--sh-lg,0 16px 40px rgba(15,23,42,.16))}
.plb-pop-h{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted); padding:5px 8px 7px}
.plb-pop-opt{display:flex; align-items:center; width:100%; padding:8px 9px; border:none; background:none; border-radius:10px; cursor:pointer; text-align:left; font-family:inherit}
.plb-pop-opt:hover,.plb-pop-opt:focus-visible{background:var(--teal-50); outline:none}

/* Tag-editor popover (vrije labels per patiënt) */
.tag-pop{position:absolute; z-index:95; width:264px; padding:12px; border-radius:var(--r-lg);
  border:1px solid var(--line-2); background:#fff; box-shadow:var(--sh-lg,0 16px 40px rgba(15,23,42,.16))}
.tag-pop-h{font-size:.68rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted); margin-bottom:9px}
.tag-pop-chips{display:flex; flex-wrap:wrap; gap:6px; min-height:24px; margin-bottom:10px}
.tag-pop-empty{font-size:.78rem; color:var(--muted)}
.tag-pop-chip{display:inline-flex; align-items:center; gap:4px; padding:4px 6px 4px 10px; border-radius:var(--r-pill); background:var(--teal-50); color:var(--teal-700); font-size:.76rem; font-weight:600}
.tag-pop-x{display:grid; place-items:center; width:18px; height:18px; padding:0; border:none; background:none; color:var(--teal-700); cursor:pointer; border-radius:50%}
.tag-pop-x:hover,.tag-pop-x:focus-visible{background:rgba(20,184,166,.18); outline:none}
.tag-pop-x .ic{width:13px; height:13px}
.tag-pop-form{display:flex; gap:7px}
.tag-pop-input{flex:1; min-width:0; min-height:38px; padding:8px 11px; border-radius:10px; border:1px solid var(--line-2); font-family:inherit; font-size:.82rem; background:#fff; color:var(--ink)}
.tag-pop-input:focus{outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.tag-pop-form .btn-sm{min-height:38px; padding:8px 12px; white-space:nowrap}
.tag-pop-sugg{display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; padding-top:10px; border-top:1px solid var(--line)}
.tag-pop-suggchip{padding:4px 9px; border-radius:var(--r-pill); border:1px dashed var(--line-2); background:#fff; color:var(--muted); font-size:.74rem; font-weight:600; font-family:inherit; cursor:pointer}
.tag-pop-suggchip:hover,.tag-pop-suggchip:focus-visible{border-color:var(--teal-400); color:var(--teal-700); border-style:solid; outline:none}

/* Bulk verwijderen: stapel van avatars in de bevestigingskaart. */
.del-card .dc-avstack{display:flex; flex:none}
.del-card .dc-avstack .dc-av{margin-right:-10px; box-shadow:0 0 0 2px #fff}
.del-card .dc-avstack .dc-av:last-child{margin-right:0}
.del-card .dc-more{background:var(--slate-200,#e2e8f0); color:var(--muted); font-size:.78rem}

/* Paginering: bereik-tekst links, vorige/volgende + paginanummers rechts. */
.plist-pager{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-top:16px}
.plist-pager[hidden]{display:none}
.plp-range{font-size:.8rem; color:var(--muted); font-weight:500}
.plp-nav{display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-left:auto}
.plp-btn,.plp-num{min-height:40px; min-width:40px; padding:8px 12px; border-radius:10px; border:1px solid var(--line-2);
  background:#fff; box-shadow:var(--sh-xs); color:var(--ink); font-family:inherit; font-size:.84rem; font-weight:500;
  display:inline-flex; align-items:center; justify-content:center; gap:5px; cursor:pointer; transition:color .14s, border-color .14s, background .14s}
.plp-btn:hover:not(:disabled),.plp-num:hover{border-color:var(--teal-400); color:var(--teal-700); background:var(--teal-50)}
.plp-btn:disabled{opacity:.5; cursor:default}
.plp-num.active{background:var(--teal-600); border-color:var(--teal-600); color:#fff; cursor:default}
.plp-gap{color:var(--muted); padding:0 2px}
@media (max-width:560px){
  .plb-actions{margin-left:0; width:100%}
  .plb-actions .btn{flex:1 1 auto; justify-content:center}
  .plp-nav{margin-left:0; width:100%; justify-content:center}
  .plp-btn span{display:none}
}
/* Op kaartweergave (<=820px) krijgt de selectie-checkbox een eigen labelregel. */
@media (max-width:820px){
  .ptable td.pt-td-check{grid-column:1 / -1; justify-content:flex-start; order:-1; padding-bottom:8px; border-bottom:1px solid var(--line); margin-bottom:2px}
  .ptable td.pt-td-check::before{content:"Selecteren"; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; font-weight:600; color:var(--muted); margin-right:auto}
}

.modal.modal-sm{max-width:460px}
.nad-lead{margin:0; font-size:.95rem; line-height:1.55; color:var(--muted)}
.na-conflict{display:flex; gap:11px; align-items:flex-start; margin-top:14px; padding:12px 14px; border-radius:var(--r-lg); border:1px solid var(--orange-100); background:var(--orange-50)}
.na-conflict[hidden]{display:none}
.na-conflict .nc-ic{flex:none; color:var(--orange-600); display:grid; place-items:center; width:24px; height:24px}
.na-conflict .nc-title{font-weight:700; font-size:.9rem; color:var(--orange-700)}
.na-conflict .nc-body{font-size:.9rem; margin-top:2px; color:var(--ink)}
.na-conflict .nc-hint{font-size:.82rem; margin-top:4px; color:var(--soft)}
.m-ic.danger{background:var(--pink-50); border-color:var(--pink-200); color:var(--pink-600)}
.btn-danger{background:linear-gradient(120deg,var(--pink-500),var(--pink-600)); color:#fff; box-shadow:0 6px 14px rgba(244,63,94,.2)}
.btn-danger:hover{filter:brightness(1.04)}
.btn-danger:disabled{opacity:.45; cursor:not-allowed; filter:none}
.btn-ghost-danger{background:rgba(255,255,255,.8); color:var(--pink-600); border-color:var(--pink-200); box-shadow:var(--sh-xs)}
.btn-ghost-danger:hover{background:var(--pink-50); border-color:var(--pink-500)}

.del-card{display:flex; align-items:center; gap:13px; padding:13px 15px; border-radius:var(--r-lg); border:1px solid var(--line-2); background:var(--slate-25); margin-bottom:14px}
.del-card .dc-av{width:42px; height:42px; border-radius:13px; color:#fff; font-weight:700; font-size:.92rem; display:grid; place-items:center; flex:none}
.del-card .dc-name{font-weight:600; font-size:.95rem}
.del-card .dc-meta{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}
.del-warn{font-size:.84rem; color:var(--muted); margin-bottom:9px; line-height:1.5}
.del-list{display:flex; flex-direction:column; gap:7px; margin-bottom:16px}
.del-item{display:flex; align-items:center; gap:9px; font-size:.84rem; color:var(--ink); font-weight:500}
.del-item .ic{width:15px; height:15px; color:var(--pink-500); flex:none}
.confirm-row{display:flex; align-items:flex-start; gap:11px; padding:12px 14px; border-radius:var(--r); border:1px solid var(--pink-200); background:var(--pink-50); cursor:pointer}
.confirm-row input{width:19px; height:19px; margin-top:1px; flex:none; accent-color:var(--pink-600); cursor:pointer}
.confirm-row span{font-size:.83rem; font-weight:500; line-height:1.45; color:var(--ink)}

/* toast variants + inline action (undo) */
.toast.t-error{border-color:var(--pink-200)}
.toast.t-error .t-ic{background:var(--pink-600)}
.toast .t-act{margin-left:6px; padding:9px 16px; min-height:44px; border-radius:var(--r-pill); border:1px solid var(--teal-200); background:var(--teal-50); color:var(--teal-700); font:inherit; font-size:.8rem; font-weight:700; cursor:pointer; transition:background .15s}
.toast .t-act:hover{background:var(--teal-100)}

/* new-patient wizard extras */
.np-aside{display:flex; flex-direction:column; gap:9px; margin-top:14px; padding:13px 15px; border-radius:var(--r-lg); border:1px solid var(--teal-200); background:linear-gradient(120deg,var(--teal-50),#fff 80%)}
.np-aside-row{display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 9px; font-size:.82rem}
.np-aside-row .k{font-weight:600; color:var(--teal-700); white-space:nowrap}
.np-aside-row .v{font-weight:500; color:var(--ink)}
.np-aside-row .v .code{font-weight:700; letter-spacing:.04em; color:var(--teal-700); white-space:nowrap}
.np-aside-row .d{font-size:.76rem; color:var(--muted); font-weight:400}
.dup-warn{display:none; align-items:flex-start; gap:11px; margin-bottom:14px; padding:13px 15px; border-radius:var(--r-lg); border:1px solid #fde68a; background:#fffbeb}
.dup-warn.show{display:flex; animation:fade .2s ease}
.dup-warn .ic{width:18px; height:18px; color:#b45309; flex:none; margin-top:1px}
.dup-warn .dw-t{font-weight:600; font-size:.86rem; color:#92400e}
.dup-warn .dw-d{font-size:.8rem; color:#92400e; margin:3px 0 9px; line-height:1.5}
.dup-warn .dw-act{display:flex; gap:8px; flex-wrap:wrap}
.dup-warn .btn{min-height:44px; padding:9px 14px; font-size:.8rem}
.unit-wrap{position:relative}
.unit-wrap input{padding-right:46px}
.unit-wrap .unit{position:absolute; right:14px; top:50%; transform:translateY(-50%); font-size:.8rem; font-weight:600; color:var(--soft); pointer-events:none}
.modal.shake{animation:formshake .34s cubic-bezier(.36,.07,.19,.97)}
@keyframes formshake{10%,90%{transform:translateX(-2px)}20%,80%{transform:translateX(3px)}30%,50%,70%{transform:translateX(-5px)}40%,60%{transform:translateX(5px)}}

/* review step */
.rv-intro{font-size:.86rem; color:var(--muted); margin-bottom:14px; line-height:1.5}
.rv-group{border:1px solid var(--line); border-radius:var(--r-lg); background:#fff; margin-bottom:11px; overflow:hidden}
.rv-group-h{display:flex; align-items:center; gap:9px; padding:10px 15px; background:var(--slate-25); border-bottom:1px solid var(--line)}
.rv-group-h .t{font-size:.74rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--muted)}
.rv-group-h .rv-edit{margin-left:auto; border:none; background:none; color:var(--teal-700); font:inherit; font-size:.78rem; font-weight:700; cursor:pointer; padding:6px 12px; min-height:44px; display:inline-flex; align-items:center; border-radius:8px}
.rv-group-h .rv-edit:hover{background:var(--teal-50)}
.rv-row{display:flex; gap:14px; padding:9px 15px; font-size:.85rem; border-bottom:1px solid var(--line)}
.rv-row:last-child{border-bottom:none}
.rv-row .rv-k{width:128px; flex:none; color:var(--muted); font-weight:500}
.rv-row .rv-v{font-weight:600; min-width:0; overflow-wrap:anywhere}
.rv-row .rv-v .pt-dim{font-weight:500}

/* edit-patient form section separators */
.form-sep{grid-column:1 / -1; display:flex; align-items:center; gap:10px; margin-top:4px}
.form-sep span{font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; font-weight:700; color:var(--teal-700)}
.form-sep::after{content:""; flex:1; height:1px; background:var(--line)}
.invite-card{display:flex; align-items:flex-start; gap:12px; padding:13px 15px; border-radius:var(--r-lg); border:1px solid var(--line-2); background:#fff; cursor:pointer; transition:border-color .15s, background .15s}
.invite-card:hover{border-color:var(--teal-200)}
.invite-card.sel{border-color:var(--teal-400); background:var(--teal-50)}
.invite-card input{width:19px; height:19px; margin-top:2px; flex:none; accent-color:var(--teal-600); cursor:pointer}
.invite-card .iv-t{font-weight:600; font-size:.88rem}
.invite-card .iv-d{font-size:.79rem; color:var(--muted); margin-top:3px; line-height:1.5}
@media (max-width:560px){
  .rv-row{flex-direction:column; gap:2px}
  .rv-row .rv-k{width:auto}
  .dup-warn .dw-act .btn{flex:1; justify-content:center}
}

/* ============ INSTELLINGEN: PARTNERCODE + UITBETALING ============ */
/* Mockup-kaart die de Odoo-partnerstructuur toont (affiliate-code, programma, self-billing).
   Waarden zijn fictief; de structuur volgt res.partner affiliate/vendor + commissie-flow. */
.partner-hero{display:flex; align-items:center; gap:13px; padding:14px 15px; border-radius:var(--r-lg); border:1px solid var(--teal-200); background:linear-gradient(120deg,var(--teal-50),#fff 82%); margin-bottom:4px}
.partner-hero .ph-body{flex:1; min-width:0}
.partner-hero .ph-k{font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; font-weight:700; color:var(--teal-700)}
.codebox{display:inline-flex; align-items:center; gap:10px; min-height:44px; margin-top:5px; padding:7px 9px 7px 14px; border-radius:var(--r-pill); background:#fff; border:1px solid var(--teal-200); color:var(--teal-700); font:inherit; cursor:pointer; transition:background .15s,border-color .15s}
.codebox:hover{background:var(--teal-50); border-color:var(--teal-400)}
.codebox:focus-visible{outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.codebox code{font-family:inherit; font-weight:800; font-size:1rem; letter-spacing:.16em}
.codebox .cb-ic{width:30px; height:30px; border-radius:50%; background:var(--teal-50); display:grid; place-items:center; flex:none}
.codebox .cb-ic .ic{width:15px; height:15px}
.codebox.copied{background:var(--green-50); border-color:var(--green-500); color:var(--green-700)}
.codebox.copied .cb-ic{background:#fff}
.payout-stats{display:grid; grid-template-columns:repeat(3,1fr); gap:9px; margin-top:14px}
.ps-cell{display:flex; flex-direction:column; gap:3px; text-align:center; padding:12px 6px; border-radius:var(--r); background:var(--slate-25); border:1px solid var(--line)}
.ps-cell .ps-n{font-size:1.34rem; font-weight:800; letter-spacing:-.02em; color:var(--ink); line-height:1}
.ps-cell .ps-n .eu{font-size:.78rem; font-weight:700; color:var(--muted); margin-right:1px}
.ps-cell .ps-l{font-size:.68rem; color:var(--muted); font-weight:500; line-height:1.3}
.ps-cell.pending .ps-n{color:var(--teal-700)}
.payout-note{display:flex; align-items:flex-start; gap:8px; margin-top:12px; font-size:.74rem; color:var(--muted); font-weight:400; line-height:1.5}
.payout-note .ic{width:14px; height:14px; color:var(--teal-500); flex:none; margin-top:2px}
@media (max-width:380px){ .payout-stats{grid-template-columns:1fr} }

/* ===== Praktijkstatistieken (deel 4) ===== */
/* KPI-tegels gebruiken het gedeelde .kpi-card-patroon (zie boven), in een 4-koloms grid. */
.st-kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:0; margin-bottom:20px}
.st-charts{margin-top:0}
.st-mix-panel{margin-top:20px}
.st-mix{display:flex; align-items:center; gap:28px; flex-wrap:wrap}
.st-donut{flex:none}
.st-donut-n{font-size:1.6rem; font-weight:800; fill:var(--ink)}
.st-donut-l{font-size:.62rem; font-weight:600; fill:var(--muted); text-transform:uppercase; letter-spacing:.04em}
.st-mix-legend{display:flex; flex-direction:column; gap:10px; min-width:180px}
.st-mix-row{display:flex; align-items:center; gap:10px; font-size:.9rem}
.st-mix-sw{width:13px; height:13px; border-radius:4px; flex:none}
.st-mix-k{flex:1; font-weight:500; color:var(--muted)}
.st-mix-v{font-weight:700; color:var(--ink)}
.st-mix-total{font-size:.8rem; color:var(--muted); font-weight:500; margin-top:4px; padding-top:10px; border-top:1px solid var(--line)}
@media (max-width:760px){ .st-kpis{grid-template-columns:repeat(2,1fr)} }
@media (max-width:380px){ .st-kpis{grid-template-columns:1fr} }

/* ===== Progressie/regressie (lichter/zwaarder alternatief) in de detaildrawer ===== */
.exd-progression{display:flex; gap:10px; flex-wrap:wrap; margin-top:12px}
.exd-prog-btn{flex:1; min-width:150px; display:flex; flex-direction:column; align-items:flex-start; gap:5px; padding:11px 13px; border:1px solid var(--line-2); border-radius:var(--r-lg); background:rgba(255,255,255,.8); box-shadow:var(--sh-xs); cursor:pointer; text-align:left; transition:border-color .15s, background .15s}
.exd-prog-btn:hover{background:#fff; border-color:var(--teal-200)}
.exd-prog-lbl{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; letter-spacing:.01em; text-transform:uppercase; color:var(--teal-700)}
.exd-prog-lbl .ic{width:14px; height:14px}
.exd-prog-naam{font-size:.9rem; font-weight:600; color:var(--ink); line-height:1.25}
@media (max-width:620px){ .exd-progression{flex-direction:column} }

/* ===== Oefenblad afdrukken: schone A4-handout (apart printvenster) ===== */
.print-handout{max-width:19cm; margin:0 auto; font-size:10.5pt; line-height:1.6; color:#1f2937}
.print-handout .ph-top{display:flex; align-items:center; gap:8px; color:#0d9488; margin-bottom:6mm}
.print-handout .ph-mark{width:26px; height:26px; flex:none}
.print-handout .ph-kicker{font-size:9pt; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#0f766e}
.print-handout .ph-title{font-size:22pt; line-height:1.15; margin:0 0 6mm; color:#0f766e; font-weight:800; letter-spacing:-.01em}
.print-handout .ph-thumb{text-align:center; margin:0 0 6mm}
.print-handout .ph-thumb img{max-width:100%; max-height:62mm; height:auto; border:1px solid #e5e7eb; border-radius:8px}
.print-handout .ph-meta{display:flex; flex-wrap:wrap; gap:6mm; border-top:1pt solid #d1d5db; border-bottom:1pt solid #d1d5db; padding:3.5mm 0; margin:0 0 5mm; font-size:9.5pt}
.print-handout .ph-meta strong{color:#0f766e}
.print-handout .ph-desc{margin:0 0 6mm; font-size:10.5pt; line-height:1.5}
.print-handout .ph-sec{margin:0 0 6mm; page-break-inside:avoid; break-inside:avoid}
.print-handout .ph-sec h2{font-size:12.5pt; font-weight:700; color:#0f766e; margin:0 0 3.5mm; border-bottom:1pt solid #e5e7eb; padding-bottom:2mm}
.print-handout .exd-steps li,.print-handout .exd-list li{color:#1f2937; font-size:10pt}
/* In het printvenster is het SVG-sprite niet geladen: vervang het icoon door een schoon bolletje. */
.print-handout .exd-list li .ic{display:none}
.print-handout .exd-list li::before{content:""; position:absolute; left:2px; top:6px; width:7px; height:7px; border-radius:50%; background:#0d9488}
.print-handout .exd-list.contra li::before{background:#be185d}
.print-handout .exd-steps li::before{background:#0d9488; border-color:#0d9488; color:#fff}
/* getuigschrift voor verstrekte hulp: prestatietabel + ondertekening (deel 2) */
.print-handout .ph-table{width:100%; border-collapse:collapse; font-size:9.5pt; margin-top:1mm}
.print-handout .ph-table th{text-align:left; padding:2mm 2.5mm; font-size:8pt; text-transform:uppercase; letter-spacing:.04em; color:#0f766e; border-bottom:1pt solid #d1d5db}
.print-handout .ph-table td{padding:2mm 2.5mm; border-bottom:.5pt solid #e5e7eb; color:#1f2937}
.print-handout .ph-table .ph-num{text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums}
.print-handout .ph-table tfoot .ph-total td{border-top:1pt solid #9aa3ad; border-bottom:none; font-weight:700; padding-top:2.5mm}
.print-handout .ph-sign{display:flex; justify-content:space-between; align-items:flex-end; gap:14mm; margin:14mm 0 0; font-size:9.5pt; color:#374151}
.print-handout .ph-sign-line{min-width:62mm; border-top:1pt solid #9aa3ad; padding-top:2mm; text-align:center; font-size:8.5pt; color:#6b7280}
.print-handout .ph-footer{margin:8mm 0 0; padding-top:3.5mm; border-top:1pt solid #e5e7eb; font-size:8.5pt; color:#6b7280}
@media print{
  *{box-shadow:none !important; text-shadow:none !important}
  a{color:inherit; text-decoration:none}
  .print-handout .ph-sec{page-break-inside:avoid; break-inside:avoid}
}

/* ===================== RAPPORTEN: report builder + branded doc ===================== */
.rap-layout{display:grid; grid-template-columns:300px minmax(0,1fr); gap:20px; align-items:start}
.rap-aside{position:sticky; top:18px; display:flex; flex-direction:column; gap:18px; background:rgba(255,255,255,.9); border:1px solid var(--line); border-radius:var(--r-xl); box-shadow:var(--sh-sm); padding:16px}
.rap-aside-h{font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; font-weight:600; color:var(--muted); margin-bottom:10px}
.rap-types{display:flex; flex-direction:column; gap:6px}
.rap-type{display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; padding:9px 10px; border-radius:12px; border:1px solid var(--line); background:#fff; cursor:pointer; transition:background .14s,border-color .14s,box-shadow .14s}
.rap-type:hover{background:var(--slate-50)}
.rap-type.active{background:var(--teal-50); border-color:var(--teal-200); box-shadow:inset 0 0 0 1px var(--teal-200)}
.rap-type-ic{width:30px; height:30px; border-radius:9px; background:var(--slate-100); color:var(--muted); display:grid; place-items:center; flex:none}
.rap-type.active .rap-type-ic{background:var(--teal-100); color:var(--teal-700)}
.rap-type-ic .ic{width:16px; height:16px}
.rap-type-tx{display:flex; flex-direction:column; min-width:0}
.rap-type-name{font-weight:600; font-size:.86rem; color:var(--ink)}
.rap-type-sub{font-size:.74rem; color:var(--muted); line-height:1.4}
.rap-patients{display:flex; flex-direction:column; gap:6px}
.rap-pat-item{display:flex; align-items:center; gap:10px; width:100%; text-align:left; padding:8px 9px; border-radius:12px; border:1px solid transparent; background:none; cursor:pointer; transition:background .14s,border-color .14s; min-height:48px}
.rap-pat-item:hover{background:var(--slate-50)}
.rap-pat-item.active{background:var(--teal-50); border-color:var(--teal-200)}
.rap-pat-av{width:34px; height:34px; border-radius:10px; color:#fff; font-size:.74rem; font-weight:700; display:grid; place-items:center; flex:none}
.rap-pat-info{display:flex; flex-direction:column; min-width:0}
.rap-pat-name{font-weight:600; font-size:.86rem; color:var(--ink)}
.rap-pat-meta{font-size:.74rem; color:var(--muted)}
.rap-pat-empty{font-size:.84rem; color:var(--muted)}
.rap-sections{display:flex; flex-direction:column; gap:3px}
.rap-toggle{display:flex; align-items:center; gap:9px; padding:7px 4px; font-size:.85rem; color:var(--ink); cursor:pointer; border-radius:8px}
.rap-toggle:hover{background:var(--slate-50)}
.rap-toggle input{width:17px; height:17px; accent-color:var(--teal-600); cursor:pointer}
.rap-aside-actions{display:flex; flex-direction:column; gap:9px; border-top:1px solid var(--line); padding-top:14px}
.rap-aside-row{display:flex; gap:8px}
.rap-aside-row .btn{padding-left:12px; padding-right:12px; font-size:.84rem}
.rap-aside-note{font-size:.74rem; color:var(--muted); line-height:1.45; margin:0}
.rap-history{display:flex; flex-direction:column; gap:6px}
.rap-hist-item{display:flex; align-items:center; gap:10px; padding:8px 9px; border-radius:12px; border:1px solid var(--line); background:#fff}
.rap-hist-info{display:flex; flex-direction:column; min-width:0; flex:1}
.rap-hist-top{display:flex; align-items:center; gap:7px}
.rap-hist-name{font-weight:600; font-size:.84rem; color:var(--ink)}
.rap-hist-ver{font-size:.68rem; font-weight:600; color:var(--teal-700); background:var(--teal-50); border:1px solid var(--teal-200); border-radius:var(--r-pill); padding:1px 7px; flex:none}
.rap-hist-meta{font-size:.74rem; color:var(--muted)}
.rap-hist-status{font-size:.72rem; color:var(--muted); margin-top:1px}
.rap-hist-status.is-signed{color:var(--teal-700)}
.rap-hist-status.is-mailed{color:var(--teal-700); font-weight:600}
.rap-hist-view{flex:none; font-size:.78rem; font-weight:600; color:var(--teal-700); background:none; border:1px solid var(--teal-200); border-radius:var(--r-pill); padding:5px 11px; cursor:pointer; transition:background .14s,border-color .14s}
.rap-hist-view:hover{background:var(--teal-50); border-color:var(--teal-500)}
.rap-hist-empty{font-size:.78rem; color:var(--muted); line-height:1.45; margin:0}

.rap-doc-wrap{display:flex; justify-content:center}
.rap-doc{width:100%; max-width:760px; background:#fff; border:1px solid var(--line); border-radius:12px; box-shadow:0 12px 36px rgba(15,23,42,.10); padding:34px 38px 26px; color:var(--ink)}
.rap-doc-empty{padding:64px 24px; text-align:center; color:var(--muted)}
.rap-doc-empty .empty-ic{display:inline-grid; place-items:center; width:48px; height:48px; border-radius:14px; background:var(--slate-50); color:var(--muted); margin-bottom:10px}
.rap-head{display:flex; justify-content:space-between; align-items:flex-start; gap:16px; padding-bottom:16px; border-bottom:2px solid var(--teal-500)}
.rap-head-brand{display:flex; align-items:center; gap:11px}
.rap-logo{width:38px; height:38px; border-radius:11px; background:linear-gradient(135deg,var(--teal-500),var(--teal-600)); display:grid; place-items:center}
.rap-logo svg{width:21px; height:21px}
.rap-brand-name{font-weight:800; font-size:1.12rem; letter-spacing:-.02em; color:var(--ink)}
.rap-brand-name span{color:var(--teal-600)}
.rap-brand-sub{font-size:.78rem; color:var(--teal-700); font-weight:600}
.rap-head-prac{text-align:right}
.rap-prac-name{font-weight:700; font-size:.86rem; color:var(--ink)}
.rap-prac-line{font-size:.76rem; color:var(--muted)}
.rap-patient{display:grid; grid-template-columns:repeat(4,1fr); gap:12px 18px; padding:16px 0; border-bottom:1px solid var(--line)}
.rap-pat-block{display:flex; flex-direction:column}
.rap-pat-label{font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600}
.rap-pat-val{font-size:.86rem; font-weight:600; color:var(--ink); margin-top:2px}
.rap-sec{padding:18px 0; border-bottom:1px solid var(--line)}
.rap-sec:last-of-type{border-bottom:none}
.rap-sec-h{font-size:.82rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--teal-700); margin:0 0 12px}
.rap-score-sec{display:flex; gap:24px; align-items:center}
.rap-gauge{width:124px; height:124px; flex:none}
.rap-gauge-score{font-size:2rem; font-weight:800; fill:var(--ink)}
.rap-gauge-cap{font-size:.62rem; font-weight:600; fill:var(--muted); text-transform:uppercase; letter-spacing:.06em}
.rap-score-detail{flex:1; min-width:0}
.rap-score-big{font-size:1.7rem; font-weight:800; color:var(--orange-600); display:flex; align-items:baseline; gap:10px}
.rap-score-band{font-size:.82rem; font-weight:700; color:var(--orange-600); background:var(--orange-50); padding:2px 10px; border-radius:var(--r-pill)}
.rap-score-note{font-size:.85rem; color:var(--muted); line-height:1.5; margin:6px 0 10px}
.rap-rings{display:flex; gap:18px}
.rap-ring{display:flex; align-items:center; gap:7px; font-size:.82rem; color:var(--ink)}
.rap-ring b{font-weight:700}
.rap-ring-sw{width:11px; height:11px; border-radius:50%; flex:none}
.rap-table{width:100%; border-collapse:collapse; font-size:.84rem}
.rap-table th{text-align:left; padding:7px 10px; font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600; border-bottom:1px solid var(--line)}
.rap-table td{padding:8px 10px; border-bottom:1px solid var(--slate-100); color:var(--ink)}
.rap-table tr:last-child td{border-bottom:none}
.rap-num{font-variant-numeric:tabular-nums; font-weight:600}
.rap-ref{color:var(--muted)}
.rap-status{font-weight:600; white-space:nowrap}
.rap-status .rap-dot{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:6px; vertical-align:middle}
.rap-in{color:var(--green-700)} .rap-in .rap-dot{background:var(--green-500)}
.rap-out{color:var(--orange-600)} .rap-out .rap-dot{background:var(--orange-500)}
.rap-spine-grid{display:grid; grid-template-columns:repeat(5,1fr); gap:10px}
.rap-spine-cell{display:flex; flex-direction:column; align-items:center; gap:3px; padding:12px 6px; background:var(--slate-25); border:1px solid var(--line); border-radius:10px}
.rap-spine-v{font-size:1.2rem; font-weight:700; color:var(--ink)}
.rap-deg{font-size:.6rem; color:var(--muted); margin-left:2px}
.rap-spine-l{font-size:.7rem; color:var(--muted); text-align:center; line-height:1.3}
.rap-spine-hl{font-size:.82rem; color:var(--muted); margin:11px 0 0}
.rap-ref-band{font-weight:600; text-transform:none; letter-spacing:0; color:var(--muted)}
.rap-subh{font-size:.74rem; text-transform:uppercase; letter-spacing:.05em; font-weight:700; color:var(--teal-600); margin:18px 0 9px}
.rap-spine-deep{display:flex; gap:22px; align-items:flex-start}
.rap-spine-viz{flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; padding:10px 14px; background:var(--slate-25); border:1px solid var(--line); border-radius:12px}
.rap-spine-svg{width:120px; height:244px; display:block}
.rap-spine-vlabel{font-size:7.5px; font-weight:700; fill:var(--orange-700)}
.rap-spine-zone{font-size:9px; font-weight:700; fill:var(--muted)}
.rap-spine-legend{display:flex; flex-direction:column; gap:5px}
.rap-spine-lg{display:flex; align-items:center; gap:6px; font-size:.7rem; color:var(--muted)}
.rap-spine-sw{width:11px; height:9px; border-radius:2px; flex:none; display:inline-block}
.rap-spine-side{flex:1; min-width:0}
.rap-recs{margin:0; padding-left:20px; display:flex; flex-direction:column; gap:7px}
.rap-recs li{font-size:.85rem; color:var(--ink); line-height:1.5}
.rap-signoff{display:flex; gap:30px; flex-wrap:wrap; align-items:flex-end}
.rap-signoff-block,.rap-signoff-sign{display:flex; flex-direction:column; gap:3px}
.rap-signoff-sign{flex:1; min-width:180px}
.rap-signoff-label{font-size:.66rem; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:600}
.rap-signoff-val{font-size:.9rem; font-weight:700; color:var(--ink)}
.rap-signoff-sub{font-size:.74rem; color:var(--muted)}
.rap-signoff-line{margin-top:14px; border-bottom:1px dashed var(--slate-300); height:18px}
.rap-signoff-signed{margin-top:8px; display:flex; flex-direction:column; gap:2px; padding-bottom:4px; border-bottom:1px solid var(--teal-200)}
.rap-signoff-name{font-family:'Segoe Script','Brush Script MT',cursive; font-size:1.4rem; line-height:1; color:var(--teal-700)}
.rap-signoff-meta{font-size:.7rem; color:var(--muted)}
.rap-bev{list-style:none; display:flex; flex-direction:column; gap:11px}
.rap-bev-row{display:flex; gap:10px; align-items:flex-start}
.rap-bev-dot{width:9px; height:9px; border-radius:50%; flex:none; margin-top:5px}
.sev-warn{background:var(--orange-500)} .sev-good{background:var(--green-500)} .sev-neutral{background:var(--teal-400)}
.rap-bev-t{font-weight:600; font-size:.86rem; color:var(--ink)}
.rap-bev-d{font-size:.82rem; color:var(--muted); line-height:1.5}
.rap-andu{font-size:.82rem; color:var(--muted); margin:11px 0 0}
.rap-notes{list-style:none; display:flex; flex-direction:column; gap:9px}
.rap-notes li{display:flex; flex-direction:column}
.rap-note-meta{font-size:.7rem; color:var(--muted); font-weight:600}
.rap-note-txt{font-size:.84rem; color:var(--ink); line-height:1.5}
.rap-foot{display:flex; justify-content:space-between; gap:12px; padding-top:16px; margin-top:6px; border-top:1px solid var(--line); font-size:.72rem; color:var(--muted)}
@media (max-width:900px){
  .rap-layout{grid-template-columns:1fr}
  .rap-aside{position:static}
  .rap-patient{grid-template-columns:repeat(2,1fr)}
  .rap-spine-grid{grid-template-columns:repeat(2,1fr)}
  .rap-spine-deep{flex-direction:column; align-items:center}
  .rap-spine-side{width:100%}
  .rap-score-sec{flex-direction:column; align-items:flex-start}
  .rap-doc{padding:22px 18px}
}
/* Smal scherm: de gebrande rapport-tabellen krijgen een horizontale scroll binnen het
   document i.p.v. uit te lopen. (a) tabel-overflow. */
@media (max-width:560px){
  .rap-table{display:block; overflow-x:auto; -webkit-overflow-scrolling:touch; white-space:nowrap}
  .rap-table thead,.rap-table tbody{display:table; width:100%; min-width:340px}
  .rap-patient{grid-template-columns:1fr 1fr}
  .rap-spine-grid{grid-template-columns:repeat(2,1fr)}
}

/* (d) Kaart-grids vallen netjes terug naar 1 kolom op smal scherm. Het dashboard en de
   instellingen gebruiken al auto-fit/expliciete 1fr, dit borgt de telefoonbreedtes hard. */
@media (max-width:560px){
  .set-grid{grid-template-columns:1fr}
  .dash-grid{grid-template-columns:1fr}
  .cols-2,.cols-3{grid-template-columns:1fr}
}

/* (e) Modals passen op klein scherm: beperkte hoogte met interne scroll, zodat de kop en
   de actieknoppen altijd bereikbaar blijven. Het body-deel scrollt; kop/voet blijven staan. */
@media (max-width:640px){
  .modal-backdrop:not(.is-drawer){padding:14px 12px; align-items:flex-start}
  .modal-backdrop:not(.is-drawer) .modal{max-height:calc(100dvh - 28px); display:flex; flex-direction:column}
  .modal-head,.modal-foot{flex:none}
  .modal-body,.info-body{flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch}
  .info-body{max-height:none}
  /* Drawer (oefendetail) wordt vol-scherm op telefoon. */
  .drawer{max-width:100%}
}

@media print{
  body * { visibility:hidden !important; }
  #rapport-doc, #rapport-doc * { visibility:visible !important; }
  #rapport-doc{ position:absolute; left:0; top:0; width:100%; max-width:none; box-shadow:none; border:none; border-radius:0; padding:0; margin:0; }
  @page{ margin:14mm; }
}

/* ============ BERICHTEN (chat-oppervlak kine <-> patient) ============ */
.msg-panel{padding:0; overflow:hidden}
/* DEEL 3: 3-koloms layout - gesprekkenlijst | thread | patient-context-rail */
.msg-layout{display:grid; grid-template-columns:308px minmax(0,1fr) 286px; min-height:540px}
/* Ingeklapte context-rail: alleen de thread-knop blijft, de rechterkolom verdwijnt. */
.msg-panel.rail-collapsed .msg-layout{grid-template-columns:308px minmax(0,1fr)}
.msg-panel.rail-collapsed .msg-context{display:none}
/* Linker gesprekkenlijst */
.msg-convos{border-right:1px solid var(--line); display:flex; flex-direction:column; min-width:0; background:var(--slate-25)}
.msg-convos-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:16px 18px 12px}
.msg-convos-title{font-weight:700; font-size:.94rem; letter-spacing:-.01em}
.msg-convos-unread{font-size:.68rem; font-weight:700; background:var(--pink-600); color:#fff; border-radius:var(--r-pill); padding:2px 8px; min-width:20px; text-align:center}
/* Zoekveld + filter-tabs boven de lijst */
.msg-convos-search{display:flex; align-items:center; gap:8px; margin:0 14px 10px; padding:0 11px; height:38px; background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); transition:border-color .15s,box-shadow .15s}
.msg-convos-search:focus-within{border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.12)}
.msg-convos-search .ic{width:16px; height:16px; color:var(--soft); flex:none}
.msg-search-input{flex:1 1 auto; min-width:0; border:none; background:transparent; font-family:inherit; font-size:.85rem; color:var(--ink); padding:0}
.msg-search-input:focus{outline:none}
.msg-search-input::-webkit-search-cancel-button{cursor:pointer}
.msg-filter-tabs{display:flex; gap:5px; padding:0 14px 10px; flex-wrap:wrap}
.msg-tab{display:inline-flex; align-items:center; gap:5px; font-size:.74rem; font-weight:600; color:var(--muted); background:transparent; border:1px solid transparent; border-radius:var(--r-pill); padding:5px 11px; cursor:pointer; transition:background .12s,color .12s,border-color .12s}
.msg-tab:hover{background:#fff; color:var(--ink)}
.msg-tab.active{background:var(--teal-600); color:#fff; border-color:var(--teal-600)}
.msg-tab-count{min-width:16px; height:16px; line-height:16px; padding:0 4px; border-radius:var(--r-pill); background:var(--pink-600); color:#fff; font-size:.62rem; font-weight:700; text-align:center}
.msg-tab.active .msg-tab-count{background:rgba(255,255,255,.28)}
.msg-convos-list{flex:1 1 auto; overflow-y:auto; padding:0 8px 10px}
.msg-convos-none{padding:22px 16px; font-size:.82rem; color:var(--muted); text-align:center; line-height:1.5}
/* Gespreksrij = klikbare knop + archiveer-knop op hover */
.msg-convo-row{position:relative; border-radius:var(--r); margin-bottom:2px}
.msg-convo-row:hover{background:#fff}
.msg-convo-row.active{background:#fff; box-shadow:var(--sh-xs); border:1px solid var(--line)}
.msg-convo{display:flex; gap:11px; width:100%; text-align:left; padding:11px; border-radius:var(--r); transition:background .12s; align-items:center; position:relative; background:transparent}
.msg-convo-av-wrap{position:relative; flex:none}
.msg-convo-av{width:42px; height:42px; border-radius:12px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:.82rem; flex:none}
.msg-presence{position:absolute; right:-2px; bottom:-2px; width:12px; height:12px; border-radius:50%; border:2px solid var(--slate-25); background:var(--soft)}
.msg-convo-row:hover .msg-presence,.msg-convo-row.active .msg-presence{border-color:#fff}
.msg-presence.online{background:#22c55e}
.msg-presence.recent{background:#f59e0b}
.msg-convo-body{min-width:0; flex:1 1 auto}
.msg-convo-top{display:flex; align-items:baseline; justify-content:space-between; gap:8px}
.msg-convo-name{font-weight:600; font-size:.9rem; color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.msg-convo-time{font-size:.7rem; color:var(--soft); flex:none}
.msg-convo-last{display:flex; align-items:center; gap:4px; font-size:.8rem; color:var(--muted); margin-top:2px; min-width:0}
.msg-convo-last-t{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0}
.msg-convo.has-unread .msg-convo-last,.msg-convo-row.has-unread .msg-convo-last{color:var(--ink); font-weight:600}
.msg-convo-clip{display:inline-flex; flex:none; color:var(--soft)}
.msg-convo-clip .ic{width:13px; height:13px}
/* Leesvinkjes (1 = verzonden, 2 = gelezen) */
.msg-ticks{display:inline-flex; align-items:center; flex:none; color:var(--soft)}
.msg-ticks .ic{width:13px; height:13px}
.msg-ticks .ic + .ic{margin-left:-7px}
.msg-ticks.read{color:var(--teal-600)}
.msg-convo-badge{position:absolute; right:11px; bottom:11px; min-width:18px; height:18px; padding:0 5px; border-radius:var(--r-pill); background:var(--teal-600); color:#fff; font-size:.66rem; font-weight:700; line-height:18px; text-align:center}
/* Archiveer-knop verschijnt op hover/focus */
.msg-convo-arch{position:absolute; right:9px; top:9px; width:26px; height:26px; border-radius:8px; display:grid; place-items:center; background:#fff; border:1px solid var(--line); color:var(--muted); opacity:0; transition:opacity .12s,color .12s,background .12s; cursor:pointer}
.msg-convo-arch .ic{width:14px; height:14px}
.msg-convo-row:hover .msg-convo-arch,.msg-convo-arch:focus-visible{opacity:1}
.msg-convo-arch:hover{color:var(--teal-700); background:var(--teal-50)}
/* Rechter thread */
.msg-thread{display:flex; flex-direction:column; min-width:0; background:#fff}
.msg-thread-head{display:flex; align-items:center; gap:12px; padding:15px 22px; border-bottom:1px solid var(--line)}
.msg-thread-av{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:.8rem; flex:none}
.msg-thread-id{min-width:0}
.msg-thread-name{font-weight:700; font-size:.96rem; letter-spacing:-.01em}
.msg-thread-sub{font-size:.74rem; color:var(--muted); margin-top:2px; display:flex; align-items:center; gap:7px}
.msg-thread-open{margin-left:auto}
.msg-stream{flex:1 1 auto; overflow-y:auto; padding:22px; display:flex; flex-direction:column; gap:12px; background:linear-gradient(180deg,#f8fffe,#f4fbfb)}
.msg-daysep{align-self:center; font-size:.7rem; font-weight:600; color:var(--muted); background:#fff; border:1px solid var(--line); border-radius:var(--r-pill); padding:3px 12px; margin:4px 0}
.msg-bubble{max-width:74%; padding:10px 14px; border-radius:16px; font-size:.88rem; line-height:1.45; box-shadow:var(--sh-xs); word-wrap:break-word}
.msg-bubble .msg-meta{display:block; font-size:.66rem; margin-top:4px; opacity:.7}
.msg-bubble.them{align-self:flex-start; background:#fff; border:1px solid var(--line); border-bottom-left-radius:5px; color:var(--ink)}
.msg-bubble.me{align-self:flex-end; background:linear-gradient(150deg,var(--teal-500),var(--teal-600)); color:#fff; border-bottom-right-radius:5px}
.msg-bubble.me .msg-meta{opacity:.82}
/* DEEL 2: rijke thread - groepering per afzender, dag-chips, leesbevestiging, bijlagen, typ-indicator */
.msg-stream{gap:2px}
.msg-daysep{margin:14px 0 8px}
/* Een groep: opeenvolgende berichten van dezelfde afzender */
.msg-group{display:flex; flex-direction:column; gap:2px; max-width:84%}
.msg-group.me{align-self:flex-end; align-items:flex-end}
.msg-group.them{align-self:flex-start; align-items:flex-start}
/* Rij = avatar-kolom + bubbel; avatar enkel bij laatste van groep */
.msg-row{display:flex; align-items:flex-end; gap:8px; max-width:100%}
.msg-row.me{flex-direction:row-reverse; align-self:flex-end}
.msg-row.them{align-self:flex-start}
.msg-av{width:28px; height:28px; border-radius:9px; flex:none; display:grid; place-items:center; color:#fff; font-weight:700; font-size:.66rem; letter-spacing:.01em; visibility:hidden}
.msg-av.kine{background:linear-gradient(150deg,var(--teal-500),var(--teal-700))}
.msg-row.grp-end .msg-av{visibility:visible}
.msg-row .msg-bubble{max-width:none}
.msg-group .msg-bubble{margin-left:0; margin-right:0}
/* strakkere hoeken binnen een groep (b) */
.msg-bubble.them.grp-cont{border-top-left-radius:6px}
.msg-bubble.them.grp-open{border-bottom-left-radius:6px}
.msg-bubble.me.grp-cont{border-top-right-radius:6px}
.msg-bubble.me.grp-open{border-bottom-right-radius:6px}
.msg-bubble .msg-txt{display:block}
/* Tijd + vinkjes onderaan de groep (c); subtiel, sterker bij hover */
.msg-grp-meta{display:flex; align-items:center; gap:5px; font-size:.64rem; color:var(--muted); padding:1px 4px 5px; opacity:.55; transition:opacity .15s}
.msg-group:hover .msg-grp-meta,.msg-grp-meta:focus-within{opacity:1}
.msg-grp-meta.me{padding-right:36px}
.msg-grp-meta.them{padding-left:36px}
.msg-grp-time{font-variant-numeric:tabular-nums}
.msg-grp-meta .msg-ticks .ic{width:14px; height:14px}
/* Systeembericht (d): gecentreerde subtiele chip */
.msg-sys{align-self:center; max-width:90%; margin:6px 0}
.msg-sys-chip{display:inline-flex; align-items:center; gap:6px; font-size:.72rem; font-weight:600; color:var(--muted); background:var(--teal-50); border:1px solid var(--teal-100); border-radius:var(--r-pill); padding:5px 13px}
.msg-sys-chip .ic{width:13px; height:13px; color:var(--teal-600); flex:none}
/* Bijlage-kaarten (e) binnen de bubbel */
.msg-bubble .msg-attach,.msg-bubble .msg-card{display:block}
.msg-bubble .msg-attach + .msg-txt,.msg-bubble .msg-card + .msg-txt{margin-top:8px}
.msg-attach-video,.msg-attach-image{display:flex; flex-direction:column; gap:6px}
.msg-attach-thumb{position:relative; width:200px; max-width:100%; height:118px; border-radius:11px; background:linear-gradient(135deg,#d7efec,#bfe3df); display:grid; place-items:center; overflow:hidden}
.msg-bubble.me .msg-attach-thumb{background:linear-gradient(135deg,rgba(255,255,255,.28),rgba(255,255,255,.14))}
.msg-attach-thumb > .ic{width:30px; height:30px; color:rgba(15,118,110,.8)}
.msg-bubble.me .msg-attach-thumb > .ic{color:rgba(255,255,255,.9)}
.msg-play{width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.92); display:grid; place-items:center; box-shadow:var(--sh-sm)}
.msg-play .ic{width:22px; height:22px; color:var(--teal-700)}
.msg-attach-dur{position:absolute; right:7px; bottom:7px; font-size:.64rem; font-weight:600; color:#fff; background:rgba(15,23,42,.72); border-radius:6px; padding:2px 6px; font-variant-numeric:tabular-nums}
.msg-attach-cap{font-size:.8rem; opacity:.9}
.msg-card{display:flex; align-items:center; gap:11px; padding:9px; border-radius:12px; background:#fff; border:1px solid var(--line); width:248px; max-width:100%}
.msg-bubble.me .msg-card{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.28)}
.msg-card-thumb{width:46px; height:46px; border-radius:10px; overflow:hidden; flex:none; background:var(--teal-50)}
.msg-card-thumb img{width:100%; height:100%; object-fit:cover; display:block}
.msg-card-score{width:46px; height:46px; border-radius:10px; flex:none; display:grid; place-items:center; font-weight:800; font-size:1.05rem; color:#fff; background:linear-gradient(150deg,var(--teal-500),var(--teal-600))}
.msg-bubble.me .msg-card-score{background:rgba(255,255,255,.22)}
.msg-card-body{min-width:0; display:flex; flex-direction:column; gap:2px}
.msg-card-t{font-size:.82rem; font-weight:700; color:var(--ink); line-height:1.25}
.msg-bubble.me .msg-card-t{color:#fff}
.msg-card-sub{font-size:.7rem; color:var(--muted)}
.msg-bubble.me .msg-card-sub{color:rgba(255,255,255,.85)}
.msg-card-sub.up{color:var(--teal-700)}
.msg-bubble.me .msg-card-sub.up{color:#eafffb}
.msg-card-sub.down{color:#c2410c}
.msg-card-btn{align-self:flex-start; margin-top:4px; font-size:.7rem; font-weight:700; color:var(--teal-700); background:var(--teal-50); border:1px solid var(--teal-100); border-radius:var(--r-pill); padding:3px 10px; cursor:pointer; transition:background .15s,filter .15s}
.msg-card-btn:hover{background:var(--teal-100)}
.msg-bubble.me .msg-card-btn{color:#fff; background:rgba(255,255,255,.2); border-color:rgba(255,255,255,.34)}
.msg-bubble.me .msg-card-btn:hover{background:rgba(255,255,255,.32)}
/* Typ-indicator (f) */
.msg-typing{display:flex; align-items:flex-end; gap:8px; align-self:flex-start; margin-top:6px}
.msg-typing[hidden]{display:none}
.msg-typing .msg-av{visibility:visible}
.msg-typing-bubble{background:#fff; border:1px solid var(--line); border-radius:16px; border-bottom-left-radius:5px; padding:11px 14px; box-shadow:var(--sh-xs)}
.msg-typing-dots{display:inline-flex; gap:4px; align-items:center}
.msg-typing-dots i{width:7px; height:7px; border-radius:50%; background:var(--soft); display:block; animation:msgTypeBounce 1.2s infinite ease-in-out}
.msg-typing-dots i:nth-child(2){animation-delay:.18s}
.msg-typing-dots i:nth-child(3){animation-delay:.36s}
@keyframes msgTypeBounce{0%,60%,100%{transform:translateY(0); opacity:.5} 30%{transform:translateY(-4px); opacity:1}}
@media (prefers-reduced-motion:reduce){
  .msg-typing-dots i{animation:none; opacity:.7}
}
.msg-compose{display:flex; gap:10px; align-items:flex-end; padding:13px 18px; border-top:1px solid var(--line); background:#fff}
.msg-compose textarea{flex:1 1 auto; resize:none; border:1px solid var(--line-2); border-radius:var(--r-lg); padding:11px 14px; font-family:inherit; font-size:.9rem; line-height:1.4; min-height:44px; max-height:120px; color:var(--ink); background:#fff; transition:border-color .15s,box-shadow .15s}
.msg-compose textarea:focus{outline:none; border-color:var(--teal-400); box-shadow:0 0 0 3px rgba(20,184,166,.14)}
.msg-send{width:46px; height:46px; border-radius:var(--r-pill); background:linear-gradient(150deg,var(--teal-500),var(--teal-600)); color:#fff; display:grid; place-items:center; flex:none; box-shadow:var(--sh-xs); transition:transform .12s,box-shadow .15s,filter .15s}
.msg-send:hover{filter:brightness(1.05); box-shadow:var(--sh-sm)}
.msg-send:active{transform:translateY(1px)}
.msg-send .ic{width:20px; height:20px}
/* Lege staten */
.msg-empty{flex:1 1 auto; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:40px; color:var(--muted)}
.msg-empty-ic{width:58px; height:58px; border-radius:16px; background:var(--teal-50); color:var(--teal-600); display:grid; place-items:center}
.msg-empty-ic .ic{width:28px; height:28px}
.msg-empty-t{font-weight:700; font-size:1rem; color:var(--ink)}
.msg-empty-d{font-size:.86rem; max-width:34ch}
/* ============ DEEL 3: context-rail, rijkere compose, terug/context-knoppen ============ */
/* Terug-knop (telefoon, standaard verborgen op desktop) en context-toggle (altijd zichtbaar:
   zo kan een ingeklapte rail ook op desktop weer geopend worden). */
.msg-thread-back{display:none}
.msg-thread-back,.msg-thread-ctx{flex:none; width:34px; height:34px; border-radius:9px; border:1px solid var(--line); background:#fff; color:var(--muted); place-items:center; cursor:pointer; transition:border-color .15s,color .15s,background .15s}
.msg-thread-ctx{display:grid; margin-left:8px}
.msg-thread-back .ic,.msg-thread-ctx .ic{width:18px; height:18px}
.msg-thread-back:hover,.msg-thread-ctx:hover{border-color:var(--teal-200); color:var(--teal-700); background:var(--teal-50)}
/* Patient-context-rail (rechterkolom) */
.msg-context{display:flex; flex-direction:column; min-width:0; border-left:1px solid var(--line); background:var(--slate-25)}
.msg-ctx-head{display:flex; align-items:center; justify-content:space-between; gap:8px; padding:15px 16px 11px; border-bottom:1px solid var(--line)}
.msg-ctx-head-t{font-weight:700; font-size:.88rem; letter-spacing:-.01em; color:var(--ink)}
.msg-ctx-toggle{flex:none; width:30px; height:30px; border-radius:8px; border:1px solid var(--line); background:#fff; color:var(--muted); display:grid; place-items:center; cursor:pointer; transition:border-color .15s,color .15s,background .15s}
.msg-ctx-toggle .ic{width:16px; height:16px}
.msg-ctx-toggle:hover{border-color:var(--teal-200); color:var(--teal-700); background:var(--teal-50)}
.msg-ctx-scroll{flex:1 1 auto; overflow-y:auto; padding:16px}
.msg-ctx-empty{padding:24px 18px; font-size:.82rem; color:var(--muted); text-align:center; line-height:1.5}
/* Mini patient-kaart */
.msg-ctx-card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:4px 0 14px; border-bottom:1px solid var(--line)}
.msg-ctx-av{width:56px; height:56px; border-radius:16px; display:grid; place-items:center; color:#fff; font-weight:700; font-size:1.05rem; flex:none}
.msg-ctx-name{font-weight:700; font-size:.96rem; letter-spacing:-.01em; color:var(--ink); margin-top:2px}
.msg-ctx-dossier{font-size:.74rem; color:var(--muted); font-variant-numeric:tabular-nums}
/* Statregels */
.msg-ctx-stats{display:flex; flex-direction:column; gap:2px; padding:12px 0}
.msg-ctx-stat{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:10px}
.msg-ctx-stat:hover{background:#fff}
.msg-ctx-stat-l{font-size:.78rem; color:var(--muted)}
.msg-ctx-stat-v{font-size:.86rem; font-weight:700; color:var(--ink); text-align:right; font-variant-numeric:tabular-nums}
.msg-ctx-stat.score .msg-ctx-stat-v{color:var(--teal-700)}
.msg-ctx-stat.good .msg-ctx-stat-v{color:var(--teal-700)}
.msg-ctx-stat.warn .msg-ctx-stat-v{color:#b45309}
.msg-ctx-stat.low .msg-ctx-stat-v{color:#c2410c}
/* Snelacties onder de stats */
.msg-ctx-actions{display:flex; flex-direction:column; gap:7px; padding-top:14px; border-top:1px solid var(--line)}
.msg-ctx-act{display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:9px 12px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); color:var(--ink); font-weight:600; font-size:.84rem; text-align:left; cursor:pointer; transition:border-color .15s,background .15s,color .15s}
.msg-ctx-act .ic{width:17px; height:17px; color:var(--teal-600); flex:none}
.msg-ctx-act:hover{border-color:var(--teal-200); background:var(--teal-50); color:var(--teal-700)}
.msg-ctx-act:hover .ic{color:var(--teal-700)}
.msg-ctx-act:focus-visible{outline:2px solid var(--teal-600); outline-offset:1px}
/* Rijkere compose: bijlage-menu + snelantwoord-chips */
.msg-quick{display:flex; gap:8px; flex-wrap:wrap; padding:10px 18px 0; background:#fff}
.msg-quick-chip{font-size:.76rem; font-weight:600; color:var(--teal-700); background:var(--teal-50); border:1px solid var(--teal-100); border-radius:var(--r-pill); padding:6px 12px; cursor:pointer; transition:background .12s,border-color .12s; max-width:100%; min-width:0; white-space:normal; text-align:left; overflow-wrap:anywhere}
.msg-quick-chip:hover{background:var(--teal-100); border-color:var(--teal-200)}
.msg-quick-chip:focus-visible{outline:2px solid var(--teal-600); outline-offset:1px}
.msg-attach-dd{position:relative; flex:none}
.msg-attach-btn{width:46px; height:46px; border-radius:var(--r-pill); border:1px solid var(--line-2); background:#fff; color:var(--muted); display:grid; place-items:center; cursor:pointer; transition:border-color .15s,color .15s,background .15s}
.msg-attach-btn .ic{width:20px; height:20px}
.msg-attach-btn:hover,.msg-attach-btn[aria-expanded="true"]{border-color:var(--teal-200); color:var(--teal-700); background:var(--teal-50)}
.msg-attach-menu{position:absolute; left:0; bottom:calc(100% + 8px); min-width:206px; padding:6px; border-radius:var(--r-lg); background:#fff; border:1px solid var(--line); box-shadow:var(--sh); z-index:60}
.msg-attach-menu[hidden]{display:none}
.msg-attach-item{display:flex; align-items:center; gap:10px; width:100%; min-height:42px; padding:9px 11px; border-radius:var(--r); font-weight:600; font-size:.85rem; color:var(--ink); text-align:left; cursor:pointer; transition:background .12s,color .12s}
.msg-attach-item .ic{width:17px; height:17px; color:var(--teal-600); flex:none}
.msg-attach-item:hover{background:var(--teal-50); color:var(--teal-700)}
.msg-attach-item:focus-visible{outline:2px solid var(--teal-600); outline-offset:-2px}

@media (max-width:760px){
  /* Telefoon: 1 kolom tegelijk. Standaard de gesprekkenlijst; bij een open gesprek de thread. */
  .msg-layout{grid-template-columns:1fr; min-height:0}
  .msg-panel .msg-thread{display:none}
  .msg-panel.show-thread .msg-convos{display:none}
  .msg-panel.show-thread .msg-thread{display:flex}
  .msg-convos{border-right:none}
  .msg-convos-list{max-height:none}
  .msg-stream{min-height:300px}
  /* Terug-knop verschijnt in de thread-header. */
  .msg-thread-back{display:grid}
  /* De context-rail wordt een uitklapbaar overlay-paneel achter de context-knop. */
  .msg-thread-ctx{display:grid; margin-left:6px}
  .msg-thread-open .ic + span,.msg-thread-open span{display:none}
  .msg-thread-open{margin-left:auto; padding:8px}
  /* Op smal scherm telt de desktop-inklap-state niet; de rail is altijd een overlay. */
  .msg-panel.rail-collapsed .msg-layout{grid-template-columns:1fr}
  .msg-panel.rail-collapsed .msg-context{display:flex}
  .msg-panel{position:relative}
  .msg-context{position:absolute; top:0; right:0; bottom:0; width:min(300px,86vw); border-left:1px solid var(--line); box-shadow:-12px 0 32px rgba(15,23,42,.14); transform:translateX(102%); transition:transform .2s ease; z-index:30}
  /* Overlay verschijnt enkel als de gebruiker de context-knop indrukt (rail-open). */
  .msg-panel.rail-open .msg-context{transform:translateX(0)}
}
@media (prefers-reduced-motion:reduce){
  .msg-context{transition:none}
}