/* Mission Control portaal - Fysio Connect
   Design-systeem op de vaste huisstijl van Fysio Barendrecht:
   paars #5d16a6, geel #f7b801, blauw #40b6e4, body-font Indivisible,
   display-font Hanken Grotesk (naaste vervanger van het commerciele Articulat CF).
   Pill-knoppen (radius 5rem), kaarten radius ~1.4rem, ruistextuur op donkere vlakken. */

@import url("https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@500;600;700;800&display=swap");

@font-face{font-family:"Indivisible";src:url("brand/../fonts/Indivisible-Regular.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Indivisible";src:url("fonts/Indivisible-SemiBold.woff2") format("woff2");font-weight:600;font-display:swap}

:root{
  --paars:#5d16a6; --paars-diep:#3d0d73; --paars-donker:#2b0a52; --paars-licht:#9e73ca; --lila:#f4effb;
  --geel:#f7b801; --geel-licht:#fad467; --geel-donker:#946e01;
  --blauw:#40b6e4; --blauw-donker:#2596c4;
  --ink:#191716; --muted:#5f5a66; --line:#e9e3f2; --canvas:#faf8fd; --card:#ffffff;
  --rood:#d61b4a; --groen:#1d9e5f; --amber:#c47d08;
  --disp:"Hanken Grotesk",sans-serif; --body:"Indivisible","Hanken Grotesk",sans-serif;
  --r:1.4rem; --r-sm:.85rem;
  --shadow:0 24px 50px -30px rgba(61,13,115,.28); --shadow-sm:0 10px 26px -18px rgba(61,13,115,.30);
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{font-family:var(--body);color:var(--ink);background:var(--canvas);font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--disp);margin:0;letter-spacing:-.015em;line-height:1.12}
button{font-family:inherit}
a{color:inherit;text-decoration:none}
.num{font-family:var(--disp);font-variant-numeric:tabular-nums}
.ic{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ============ login ============ */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 600px at 80% -10%,rgba(64,182,228,.20),transparent 60%),
             radial-gradient(900px 500px at -10% 110%,rgba(247,184,1,.16),transparent 55%),
             linear-gradient(160deg,var(--paars) 0%,var(--paars-donker) 100%)}
.login-card{width:100%;max-width:392px;background:var(--card);border-radius:1.7rem;padding:34px 30px;box-shadow:0 40px 90px -40px rgba(0,0,0,.5);position:relative;overflow:hidden}
.login-card::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.035'/%3E%3C/svg%3E")}
.login-card>*{position:relative;z-index:1}
.login-card img{width:200px;height:auto;display:block;margin-bottom:10px}
.login-eyebrow{font-family:var(--disp);font-weight:800;font-size:10.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--geel-donker)}
.login-card h1{font-size:22px;font-weight:800;color:var(--paars);margin:14px 0 4px}
.login-card p.sub{color:var(--muted);font-size:13px;margin:0 0 22px}
.field{margin-bottom:14px}
.field label{display:block;font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.field input{width:100%;font-family:var(--body);font-size:15px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fdfcff;color:var(--ink)}
.field input:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(64,182,228,.18)}
.btn-primary{width:100%;font-family:var(--disp);font-weight:700;font-size:15px;color:#fff;background:var(--blauw);border:0;padding:13px;border-radius:5rem;cursor:pointer;transition:background .15s,transform .1s}
.btn-primary:hover{background:var(--blauw-donker)}
.btn-primary:active{transform:translateY(1px)}
.login-fout{background:#fdeaf0;color:var(--rood);font-size:13px;font-weight:600;padding:10px 13px;border-radius:12px;margin-bottom:16px}

/* ============ shell ============ */
.app{display:flex;min-height:100vh}
.sidebar{position:fixed;inset:0 auto 0 0;width:250px;background:linear-gradient(168deg,var(--paars) 0%,var(--paars-donker) 100%);color:#e9defa;display:flex;flex-direction:column;padding:22px 15px 15px;z-index:60;overflow:hidden}
.sidebar::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}
.brand{position:relative;z-index:1;padding:2px 8px 12px}
.brand img{width:166px;height:auto;display:block;filter:brightness(0) invert(1)}
.brand small{display:block;margin-top:9px;font-family:var(--disp);font-weight:800;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--geel)}
.nav{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;
  flex:1 1 auto;min-height:0;overflow-y:auto;scrollbar-width:thin;
  scrollbar-color:rgba(255,255,255,.3) transparent}
.nav::-webkit-scrollbar{width:5px}
.nav::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:5px}

/* Schuifbare vlakken laten aan de rand zien dat er meer is. Een masker in plaats
   van een gekleurde fade, want de zijbalk verloopt van paars naar dieppaars en
   een vaste fadekleur wordt daar een balk. De klassen komen van schuifhint() in
   portaal.js en staan alleen aan bij echte overflow. */
.schuif-boven{-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px);
  mask-image:linear-gradient(180deg,transparent 0,#000 22px)}
.schuif-onder{-webkit-mask-image:linear-gradient(0deg,transparent 0,#000 22px);
  mask-image:linear-gradient(0deg,transparent 0,#000 22px)}
.schuif-boven.schuif-onder{
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 22px,#000 calc(100% - 22px),transparent 100%)}
.schuif-links{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px);
  mask-image:linear-gradient(90deg,transparent 0,#000 26px)}
.schuif-rechts{-webkit-mask-image:linear-gradient(270deg,transparent 0,#000 26px);
  mask-image:linear-gradient(270deg,transparent 0,#000 26px)}
.schuif-links.schuif-rechts{
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%)}
.nav-group{font-family:var(--disp);font-weight:800;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:#a487c9;padding:11px 12px 4px}
.nav-item{display:flex;align-items:center;gap:12px;background:none;border:0;color:#cdb8e8;font-size:14px;font-weight:500;padding:8px 12px;border-radius:12px;cursor:pointer;text-align:left;transition:background .15s,color .15s;width:100%}
.nav-item:hover{background:rgba(255,255,255,.07);color:#fff}
.nav-item.on{background:rgba(255,255,255,.13);color:#fff;font-weight:600}
.nav-item.on .ic{color:var(--geel)}
.nav-item .ic{width:18px;height:18px}
.nav-badge{margin-left:auto;font-family:var(--disp);font-weight:800;font-size:10px;letter-spacing:.05em;background:var(--geel);color:var(--paars-donker);padding:3px 8px;border-radius:20px}
.nav-badge.live{background:var(--blauw);color:#fff}
.side-foot{position:relative;z-index:1;flex:none;padding-top:14px}
.side-metric{display:flex;align-items:center;gap:11px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:11px 12px}
.side-metric-dot{width:9px;height:9px;border-radius:50%;background:var(--geel);box-shadow:0 0 0 4px rgba(247,184,1,.2);flex:none}
.side-metric-dot.alles-live{background:#3ddc84;box-shadow:0 0 0 4px rgba(61,220,132,.22)}
.side-metric strong{font-family:var(--disp);font-weight:800;font-size:16px;color:#fff;display:block;line-height:1.1}
.side-metric small{color:#c9b3e8;font-size:11px}
.side-uit{display:block;text-align:center;margin-top:10px;font-size:12px;color:#b79fd8;padding:6px}
.side-uit:hover{color:#fff}

.main{margin-left:250px;flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{position:sticky;top:0;z-index:40;display:flex;align-items:center;gap:14px;background:rgba(250,248,253,.9);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);padding:12px 28px}
.hamb{display:none;background:none;border:0;cursor:pointer;padding:6px;flex-direction:column;gap:4px}
.hamb span{width:20px;height:2px;background:var(--paars);border-radius:2px;display:block}
.tb-title h1{font-size:18px;font-weight:800;color:var(--paars)}
.tb-title p{margin:1px 0 0;font-size:12px;color:var(--muted)}
.tb-right{margin-left:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* bedrijfsschakelaar */
.switch-wrap{display:flex;flex-direction:column;gap:7px;align-items:flex-end;max-width:100%;min-width:0}
.switch::-webkit-scrollbar,.switch-loc::-webkit-scrollbar{display:none}
/* Premium segmented control: een glijdende indicator-pill onder de actieve
   keuze, in plaats van een harde achtergrondwissel. */
.switch{position:relative;display:inline-flex;max-width:100%;overflow-x:auto;
  scrollbar-width:none;background:linear-gradient(180deg,#f6f1fc,var(--lila));
  border:1px solid #e4d8f4;border-radius:5rem;padding:4px;
  box-shadow:inset 0 1px 3px rgba(61,13,115,.06)}
.switch-glijder{position:absolute;top:4px;bottom:4px;left:0;width:0;opacity:0;border-radius:5rem;
  background:#fff;box-shadow:0 4px 12px -4px rgba(61,13,115,.4),0 1px 2px rgba(61,13,115,.12);
  transition:transform .34s cubic-bezier(.34,1.4,.5,1),width .34s cubic-bezier(.34,1.4,.5,1),opacity .2s;
  pointer-events:none;z-index:0}
.switch button{position:relative;z-index:1;font-family:var(--disp);font-weight:700;font-size:12.5px;
  color:var(--paars);background:none;border:0;padding:7px 16px;border-radius:5rem;cursor:pointer;
  transition:color .2s;white-space:nowrap}
.switch button:not(.on):hover{color:var(--paars-diep)}
.switch button.on{color:var(--paars-diep)}
/* Tweede rij: de vestigingen onder het gekozen bedrijf. Subtieler, glijder in paars. */
.switch-loc{background:linear-gradient(180deg,#fff,#fbf9fe);border-color:var(--line);
  padding:3px 4px 3px 5px;align-items:center;gap:1px}
.switch-loc .switch-glijder{background:linear-gradient(160deg,var(--paars),var(--paars-diep));
  box-shadow:0 4px 12px -3px rgba(61,13,115,.55)}
.switch-loc .switch-lab{position:relative;z-index:1;font-family:var(--disp);font-weight:800;font-size:9px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:0 8px 0 4px}
.switch-loc button{font-size:11.5px;font-weight:600;padding:6px 13px;color:var(--muted)}
.switch-loc button:not(.on):hover{color:var(--paars)}
.switch-loc button.on{color:#fff}
/* Multi-select: 2+ vestigingen samen. Geen glijder, wel een achtergrond per
   gekozen vestiging (zachtere paarse pil zodat de rij niet te zwaar wordt). */
.switch-loc.multi button.on{background:linear-gradient(160deg,var(--paars-licht),var(--paars));
  box-shadow:0 2px 8px -3px rgba(61,13,115,.45)}
.switch-loc.multi button{margin:0 1px}
@media (prefers-reduced-motion:reduce){.switch-glijder{transition:opacity .2s}}
.tb-user{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:var(--paars);background:var(--lila);border:1px solid #e2d5f4;padding:7px 12px;border-radius:20px}
.tb-week{font-family:var(--disp);font-weight:700;font-size:12px;color:var(--muted)}
.weekkiezer{display:inline-flex;align-items:center;gap:6px;background:var(--lila);
  border:1px solid #e2d5f4;border-radius:5rem;padding:3px 4px}
.wk-pijl{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;
  border:0;border-radius:50%;background:#fff;color:var(--paars);cursor:pointer;
  box-shadow:0 1px 4px -1px rgba(61,13,115,.3);transition:background .15s,opacity .15s}
.wk-pijl:hover{background:var(--paars);color:#fff}
.wk-pijl:disabled{opacity:.35;cursor:default;box-shadow:none}
.wk-pijl:disabled:hover{background:#fff;color:var(--paars)}
.wk-pijl .ic{width:16px;height:16px}
.wk-ic-l{transform:scaleX(-1)}
.wk-label{display:flex;flex-direction:column;line-height:1.05;text-align:center;padding:0 6px;min-width:74px}
.wk-label b{font-family:var(--disp);font-weight:800;font-size:13px;color:var(--paars-diep)}
.wk-label small{font-size:10px;font-weight:600;color:var(--muted);white-space:nowrap}
.wk-nu{font-family:var(--disp);font-weight:700;font-size:11.5px;color:#fff;background:var(--paars);
  border:0;border-radius:5rem;padding:6px 13px;min-height:30px;cursor:pointer;transition:background .15s}
.wk-nu:hover{background:var(--paars-diep)}

.content{padding:24px 28px 60px;max-width:1320px;width:100%}
.view{animation:rise .45s cubic-bezier(.16,1,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
/* Gestaggerde entrance: de blokken binnen een view komen een voor een op,
   wat het scherm rustig laat "opbouwen" in plaats van in een klap te tonen. */
.view>*{animation:kaartIn .5s cubic-bezier(.16,1,.3,1) both}
.view>*:nth-child(2){animation-delay:.05s}
.view>*:nth-child(3){animation-delay:.1s}
.view>*:nth-child(4){animation-delay:.15s}
.view>*:nth-child(n+5){animation-delay:.2s}
@keyframes kaartIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============ cards & grid ============ */
.grid{display:grid;gap:18px}
.g-4{grid-template-columns:repeat(4,1fr)}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-2{grid-template-columns:repeat(2,1fr)}
.g-21{grid-template-columns:2fr 1fr}
/* Premium card: gelaagde zachte schaduw met paarse tint, een haarfijne
   lichte rand bovenaan voor depth, en een subtiele hover-lift. */
.card{position:relative;background:
    linear-gradient(180deg,#fff,#fdfcff);border:1px solid #ece5f6;
  border-radius:var(--r);padding:20px;
  box-shadow:0 1px 2px rgba(61,13,115,.04),0 12px 28px -18px rgba(61,13,115,.18);
  transition:transform .28s cubic-bezier(.34,1.3,.5,1),box-shadow .28s ease}
.card::before{content:"";position:absolute;inset:0 0 auto;height:1px;border-radius:var(--r) var(--r) 0 0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.9),transparent);pointer-events:none}
.card:hover{transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(61,13,115,.05),0 22px 44px -22px rgba(61,13,115,.28)}
.card-h{display:flex;align-items:center;gap:11px;margin-bottom:14px}
/* Header-icoon in een zacht gekleurde chip in plaats van kaal. */
.card-h>.ic:first-child{width:30px;height:30px;padding:6px;box-sizing:border-box;color:var(--paars);
  background:linear-gradient(160deg,var(--lila),#ece1fa);border:1px solid #e6d9f8;border-radius:9px}
.card-h h3{font-size:15px;font-weight:800;color:var(--ink)}
.card-h .tag{margin-left:auto;font-size:11px;font-weight:700;color:var(--muted);background:var(--lila);padding:3px 9px;border-radius:20px}
/* --blauw-donker (#2596c4) haalt op dit lichtblauwe vlak maar 2,99:1. Deze
   badge staat 20x in het portaal, onder andere op "wel persoonsgegevens" bij de
   CRM-spiegel; dat label moet juist het best leesbare zijn. #1d769a haalt 4,54:1
   bij dezelfde tint. Alleen de tekstkleur wijzigt, de opmaak niet. */
.card-h .tag.live{background:#e5f4fb;color:#1d769a}

/* KPI */
.kpi{position:relative;overflow:hidden}
.kpi::before{content:"";position:absolute;right:-30px;top:-30px;width:120px;height:120px;border-radius:50%;background:radial-gradient(circle,var(--lila),transparent 70%)}
.kpi .lab{position:relative;font-size:12.5px;font-weight:600;color:var(--muted);display:flex;align-items:center;gap:8px}
.kpi .lab .ic{width:16px;height:16px;color:var(--paars-licht)}
.kpi .val{position:relative;font-family:var(--disp);font-weight:800;font-size:32px;color:var(--ink);margin:9px 0 3px;line-height:1}
.kpi .val em{font-style:normal;font-size:17px;color:var(--muted);font-weight:700}
.kpi .val.grijs{color:var(--muted);font-size:20px}
.kpi .meta{position:relative;display:flex;align-items:center;gap:8px;font-size:12px;flex-wrap:wrap}
.stoplicht{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.stoplicht.groen{background:var(--groen)}.stoplicht.oranje{background:var(--geel)}
.stoplicht.rood{background:var(--rood)}.stoplicht.grijs{background:#c9c3d2}
/* Op de borden zijn de lampjes het verhaal: groter, met een zachte gloed.
   Grijs is een hol lampje ("uit"), duidelijk anders dan een kleur. */
.bord-rij>.stoplicht{width:13px;height:13px}
.bord-rij>.stoplicht.groen{box-shadow:0 0 0 3px rgba(29,158,95,.16)}
.bord-rij>.stoplicht.oranje{box-shadow:0 0 0 3px rgba(247,184,1,.22)}
.bord-rij>.stoplicht.rood{box-shadow:0 0 0 3px rgba(214,27,74,.16)}
/* De rand haalde 1,62:1 tegen de witte kaart, ruim onder de 3:1 die WCAG 1.4.11
   vraagt voor een teken dat betekenis draagt: op een telefoon moest je het
   lampje zoeken (gemeten 6-sep-2026). #948aa8 haalt 3,25:1 en blijft duidelijk
   een HOL lampje, dus het verschil met een gevulde kleur blijft staan. */
.bord-rij>.stoplicht.grijs{background:#fff;border:2px solid #948aa8;width:12px;height:12px}
/* Bewust geen stoplicht (KPI 2, leads per kanaal) is iets anders dan nog geen
   cijfer. Een streepje in plaats van een lampje leest als "niet van
   toepassing" en houdt de kolom recht; het woord ernaast zegt hetzelfde, zodat
   het ook klopt als je de vormentaal niet kent of kleur niet onderscheidt. */
.stoplicht.informatief{width:13px;height:13px;border-radius:0;background:none;
  display:inline-flex;align-items:center;justify-content:center}
.stoplicht.informatief::before{content:"";display:block;width:12px;height:3px;
  border-radius:2px;background:var(--paars-licht)}
.infolabel{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.05em;
  text-transform:uppercase;color:var(--paars);background:var(--lila);
  border-radius:999px;padding:1px 7px;margin-left:7px;vertical-align:1px}
.lampjes{display:inline-flex;align-items:center;flex-wrap:wrap;font-size:11.5px;font-weight:700;color:var(--ink);white-space:nowrap}
.lampjes i.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:4px;flex:none}
.lampjes i.dot.groen{background:var(--groen)}.lampjes i.dot.oranje{background:var(--geel)}
.lampjes i.dot.rood{background:var(--rood)}.lampjes i.dot.grijs{background:#fff;border:1.5px solid #cfc9d8;width:8px;height:8px}
.lampjes i.dot.informatief{background:none;border:0;width:10px;height:3px;border-radius:2px;
  background-color:var(--paars-licht);margin-bottom:1px}
.lampjes b{width:10px}
.card-h .lampjes{margin-left:auto}
.card-h .lampjes+.tag{margin-left:12px}
.laag2 summary .lampjes{margin-left:auto}
.laag2 summary .lampjes+em{margin-left:14px}
@media (max-width:720px){
  .laag2 summary em{display:none}
  .bord .card-h .tag{display:none}
}
.doel{color:var(--muted)}
.herkomst{font-size:10.5px;font-weight:700;color:var(--geel-donker);background:#fcf3d6;padding:2px 7px;border-radius:20px;text-transform:lowercase}
.spark{position:relative;margin-top:12px;height:34px;width:100%}
.actieregel{position:relative;margin-top:10px;font-size:12px;color:var(--muted);border-top:1px dashed var(--line);padding-top:9px}

/* samenvatting / dagstart */
.dagstart{background:linear-gradient(140deg,var(--paars),var(--paars-diep));color:#fff;border-radius:var(--r);padding:24px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.dagstart::after{content:"";position:absolute;inset:0;opacity:.5;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}
.dagstart>*{position:relative;z-index:1}
.dagstart .eyebrow{font-family:var(--disp);font-weight:800;font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--geel)}
.dagstart h2{font-size:19px;font-weight:800;margin:8px 0}
.dagstart p.lead{color:#e3d3f7;font-size:14px;margin:0;max-width:70ch}
.ds-stats{margin-top:18px;display:flex;gap:26px;flex-wrap:wrap}
.ds-stat b{font-family:var(--disp);font-weight:800;font-size:24px;color:var(--geel);display:block;line-height:1}
.ds-stat span{font-size:12px;color:#e3d3f7}

/* stoplicht-rij (KPI-lijst compact) */
.kpi-row{display:flex;align-items:center;gap:12px;padding:13px 8px;margin:0 -8px;border-radius:10px;border-bottom:1px solid var(--line);transition:background .15s}
.kpi-row:hover{background:var(--lila);border-bottom-color:transparent}
.kpi-row:last-child{border-bottom:0}
.kpi-row .naam{font-weight:600;font-size:14px;flex:1;min-width:0}
.kpi-row .naam small{display:block;color:var(--muted);font-size:11.5px;font-weight:500}
.kpi-row .cijfer{font-family:var(--disp);font-weight:800;font-size:17px;text-align:right}
.kpi-row .doelw{font-size:11.5px;color:var(--muted);text-align:right;min-width:92px}

/* bars */
.bar{height:9px;border-radius:20px;background:var(--line);overflow:hidden}
.bar>span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--blauw),var(--paars))}
.barlabel{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}
.barlabel b{font-family:var(--disp)}

/* heatmap */
.heat-wrap{overflow-x:auto}
.heat{border-collapse:separate;border-spacing:6px}
.heat th{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:4px;white-space:nowrap}
.heat td.lab{text-align:left;font-size:13px;font-weight:600;color:var(--ink);white-space:nowrap;padding-right:8px}
.cell{width:54px;height:40px;border-radius:9px;display:grid;place-items:center;font-family:var(--disp);font-weight:800;font-size:12.5px;color:#fff}
.cell.leeg{background:var(--lila);color:#c3b6d8}

/* table */
.tbl{width:100%;border-collapse:collapse;font-size:13.5px}
.tbl th{text-align:left;font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;padding:0 10px 10px;border-bottom:1px solid var(--line)}
.tbl td{padding:11px 10px;border-bottom:1px solid var(--line)}
.tbl td.r,.tbl th.r{text-align:right;font-variant-numeric:tabular-nums}
.tbl tr:last-child td{border-bottom:0}
.tbl tbody tr{transition:background .15s}
.tbl tbody tr:hover td{background:var(--lila)}
.tbl tbody tr:hover td:first-child{border-radius:8px 0 0 8px}
.tbl tbody tr:hover td:last-child{border-radius:0 8px 8px 0}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:20px}
.pill.nieuw{background:#e5f4fb;color:var(--blauw-donker)}.pill.gebeld{background:#fcf3d6;color:var(--geel-donker)}
.pill.klant{background:#e7f6ee;color:var(--groen)}.pill.actief{background:#e7f6ee;color:var(--groen)}
.pill.opgezegd{background:#fdeaf0;color:var(--rood)}

/* afhandelen vanuit het dashboard (reacties, blog) */
.reactie-blok{border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:8px}
.reactie-blok:last-of-type{border-bottom:0;margin-bottom:0}
.reactie-actie{padding:0 0 0 26px}
.antwoord-veld{width:100%;font-family:var(--body);font-size:13.5px;line-height:1.45;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:#fdfcff;color:var(--ink);resize:vertical;min-height:44px}
.antwoord-veld:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(64,182,228,.18)}
.knoprij{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:8px}
.btn-mini{font-family:var(--disp);font-weight:700;font-size:12px;padding:7px 14px;border-radius:5rem;border:1px solid var(--line);background:#fff;color:var(--paars);cursor:pointer;transition:background .15s,transform .1s}
.btn-mini:hover{background:#f6f2fb}
.btn-mini.primair{background:var(--blauw);border-color:var(--blauw);color:#fff}
.btn-mini.primair:hover{background:var(--blauw-donker)}
.btn-mini:disabled{opacity:.55;cursor:default}
.btn-mini:active{transform:translateY(1px)}
.actie-status{font-size:12px;color:var(--muted)}
.concept-link{color:var(--paars);text-decoration:none;border-bottom:1px solid rgba(93,22,166,.25)}
.concept-link:hover{border-bottom-color:var(--paars)}

/* gesprekscoach: managersview */
.coach-pillen{display:flex;gap:8px;flex-wrap:wrap;margin-top:18px}
.coach-pil{font-family:var(--disp);font-weight:700;font-size:12.5px;padding:8px 16px;border-radius:5rem;border:1px solid var(--line);background:#fff;color:var(--paars);cursor:pointer;transition:background .15s}
.coach-pil:hover{background:#f6f2fb}
.coach-pil.aan{background:var(--paars);border-color:var(--paars);color:#fff}
.coach-hero{display:flex;align-items:center;gap:26px;padding:6px 0 14px;border-bottom:1px solid var(--line);margin-bottom:6px}
.coach-hero-score{flex:none;text-align:center}
.coach-hero-score small,.coach-hero-lijn small{display:block;font-size:11.5px;color:var(--muted);margin-top:3px}
.coach-hero-lijn{flex:1;min-width:0}
.coach-hero-lijn canvas{max-width:100%}
canvas.spark{flex:none;margin-left:12px}
@media (max-width:640px){.coach-hero{flex-direction:column;align-items:stretch;gap:10px}.coach-hero-score{text-align:left}.bord-rij>canvas.spark{display:none}}

/* bronnen */
.bron{display:flex;align-items:center;gap:13px;padding:14px;border:1px solid var(--line);border-radius:16px;background:#fff}
.bron .ico{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:var(--lila);color:var(--paars);flex:none}
.bron b{font-family:var(--disp);font-weight:700;font-size:14px;display:block}
.bron small{color:var(--muted);font-size:12px;display:block;margin-top:1px}
.bron .st{margin-left:auto;font-size:10.5px;font-weight:800;font-family:var(--disp);padding:4px 10px;border-radius:20px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;align-self:flex-start}
.st.live{background:#e7f6ee;color:var(--groen)}
.st.wacht{background:#fcf3d6;color:var(--geel-donker)}.st.fout{background:#fdeaf0;color:var(--rood)}
.st.uit{background:#f0edf6;color:var(--muted)}

/* meldingen / disclosure */
.melding{display:flex;gap:10px;font-size:12.5px;color:var(--muted);padding:9px 0;border-bottom:1px solid var(--line)}
.melding:last-child{border-bottom:0}
.melding .ic{width:16px;height:16px;color:var(--amber);margin-top:2px}
.leeg-blok{text-align:center;color:var(--muted);font-size:13px;padding:26px 10px}
.leeg-blok .ic{width:26px;height:26px;color:var(--paars-licht);margin:0 auto 8px;display:block}

.sec-title{display:flex;align-items:baseline;gap:12px;margin:4px 0 18px;flex-wrap:wrap}
.sec-title h2{font-size:22px;font-weight:800;color:var(--ink)}
.sec-title p{color:var(--muted);font-size:13px}
.mt{margin-top:18px}
.big{font-family:var(--disp);font-weight:800;font-size:30px;color:var(--paars);line-height:1}
.reputatie{display:flex;align-items:baseline;gap:8px}
.reputatie .ster{color:var(--geel);font-size:15px}

/* ============ borden (Mission Control) ============ */
.versheid{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;font-size:12.5px;color:var(--muted);
  background:#fff;border:1px solid var(--line);border-radius:1.2rem;padding:8px 16px;box-shadow:var(--shadow-sm)}
.versheid b{font-family:var(--disp);font-size:12.5px;color:var(--ink)}
.versheid .dot{width:9px;height:9px;border-radius:50%;flex:none}
.versheid.vers .dot{background:var(--groen);box-shadow:0 0 0 4px rgba(29,158,95,.15)}
.versheid.oud .dot{background:#c9c3d2;box-shadow:0 0 0 4px rgba(95,90,102,.12)}
.versheid.oud b{color:var(--amber)}
.versheid.histor{background:var(--lila);border-color:#e2d5f4}
.versheid.histor .dot{background:var(--paars);box-shadow:0 0 0 4px rgba(93,22,166,.15)}
.versheid.histor b{color:var(--paars-diep)}
.mt-s{margin-top:10px}
.jaardoel .val em{font-size:14px}
.jaardoel .bar{margin-bottom:8px}

.bord-rij{display:flex;align-items:center;gap:12px;padding:12px 8px;margin:0 -8px;border-radius:10px;border-bottom:1px solid var(--line);transition:background .15s}
.bord-rij:hover{background:var(--lila);border-bottom-color:transparent}
.bord-rij:last-child{border-bottom:0}
.bord-rij .naam{font-weight:600;font-size:13.5px;flex:1;min-width:0}
.bord-rij .naam small{display:block;color:var(--muted);font-size:11px;font-weight:500;margin-top:1px}
.bord-rij .cijferblok{text-align:right;min-width:86px}
.bord-rij .cijfer{font-family:var(--disp);font-weight:800;font-size:17px}
.bord-rij .doelw{font-size:11px;color:var(--muted)}
.bord-notitie{margin:-6px 0 10px;font-size:12.5px;color:var(--muted)}
.reeks{display:flex;align-items:flex-end;gap:3px;height:34px;flex:none}
.reeks span{width:7px;border-radius:3px 3px 0 0;background:linear-gradient(180deg,var(--blauw),var(--paars));opacity:.85;display:block}
.reeks span.leeg{background:var(--line)}

.laag2{margin-top:12px;border-top:1px dashed var(--line);padding-top:4px}
.laag2 summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;
  font-family:var(--disp);font-weight:700;font-size:12.5px;color:var(--paars);padding:9px 2px;border-radius:10px}
.laag2 summary::-webkit-details-marker{display:none}
.laag2 summary:hover{background:var(--lila)}
.laag2 summary .ic{width:15px;height:15px}
.laag2 summary em{margin-left:auto;font-style:normal;font-size:10.5px;font-weight:700;color:var(--muted);letter-spacing:.04em;text-transform:uppercase}
.laag2-fase{padding:4px 2px 8px}
.laag2-fase h4{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--geel-donker);margin:10px 0 2px}
.laag2 .bord-rij{padding:9px 2px}
.laag2 .bord-rij .cijfer{font-size:15px}

/* matrix-cellen: klikbare vlakken; de tabel vult de kaartbreedte.
   De naamkolom plakt links vast zodat rijen op een smal scherm
   herkenbaar blijven terwijl de weken eronderdoor scrollen. */
.heat{width:100%}
.heat td{padding:0}
.heat td.lab{width:1%;position:sticky;left:0;background:var(--card);z-index:1}
.heat th:first-child{position:sticky;left:0;background:var(--card);z-index:1}
button.cell,.cell.totaal{width:100%;min-width:54px}
button.cell{border:0;cursor:pointer;transition:transform .12s,box-shadow .12s;width:54px;height:40px}
button.cell:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}
button.cell:focus-visible{outline:3px solid var(--blauw);outline-offset:2px}
.cell.groen{background:var(--groen)}
.cell.oranje{background:var(--geel);color:var(--paars-donker)}
.cell.rood{background:var(--rood)}
/* neutrale intensiteitsschaal voor de uren-benadering (geen stoplicht, zie O7) */
.cell.i0{background:#ece4f7;color:#7a6a94}
.cell.i1{background:#cdb6ea;color:var(--paars-donker)}
.cell.i2{background:#a379d3;color:#fff}
.cell.i3{background:#7c3cba;color:#fff}
.cell.i4{background:var(--paars-diep);color:#fff}
.cell.totaal{opacity:.92;border:2px solid var(--paars-donker);cursor:default;width:54px;height:40px;display:grid;place-items:center;border-radius:9px;font-family:var(--disp);font-weight:800;font-size:12.5px;color:#fff}
.cell.totaal.oranje{color:var(--paars-donker)}
.cell.totaal.leeg{color:#c3b6d8}
.cell.totaal.i0{color:#7a6a94}
.cell.totaal.i1{color:var(--paars-donker)}
.matrix-detail{margin-top:14px;border:1px solid var(--line);border-radius:var(--r-sm);padding:14px;background:var(--lila);overflow-x:auto}
.matrix-detail .md-kop{display:flex;align-items:center;gap:8px;font-size:13px;margin-bottom:8px}
.matrix-detail .md-kop b{font-family:var(--disp)}
.md-sluit{margin-left:auto;font-family:var(--disp);font-weight:700;font-size:11.5px;color:var(--paars);background:#fff;border:1px solid var(--line);border-radius:5rem;padding:4px 12px;cursor:pointer}
.md-sluit:hover{background:var(--paars);color:#fff}
.matrix-detail .tbl{background:transparent;font-size:12.5px}
.matrix-detail .tbl td:first-child,.matrix-detail .tbl th{white-space:nowrap}

/* grafieken (historie) */
.grafiek{width:100%;height:auto;display:block}
.gr-lab{font-family:var(--disp);font-size:10px;font-weight:700;fill:var(--muted)}
.gr-legenda{display:flex;gap:18px;margin-top:8px;font-size:12px;color:var(--muted);flex-wrap:wrap}
.gr-legenda i{display:inline-block;width:14px;height:3px;border-radius:2px;vertical-align:middle;margin-right:6px}
.abo-lijst{display:flex;flex-direction:column;gap:9px;margin-top:4px}
.abo-rij{display:grid;grid-template-columns:minmax(84px,150px) 1fr 42px;align-items:center;gap:12px}
.abo-naam{font-size:12.5px;color:var(--ink);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.abo-baan{height:12px;border-radius:6px;background:var(--lila);overflow:hidden}
.abo-vul{display:block;height:100%;border-radius:6px;background:linear-gradient(90deg,var(--paars-licht),var(--paars));min-width:6px}
.abo-getal{font-size:13px;font-weight:800;color:var(--paars);text-align:right;font-variant-numeric:tabular-nums}
.staafrij{display:flex;align-items:flex-end;gap:8px;padding-top:6px}
.staaf{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0}
.staaf b{font-family:var(--disp);font-size:11.5px;color:var(--ink)}
.staaf span{display:block;width:100%;max-width:34px;border-radius:6px 6px 0 0;background:linear-gradient(180deg,var(--blauw),var(--paars))}
.staaf small{font-size:10px;color:var(--muted);white-space:nowrap}

/* ============ advertenties (de advertentiemachine) ============ */
/* De rekenketen: aanvraag, afspraak, patient, terugverdiend. Vier stappen met
   pijlen ertussen die vertellen waarom het ene getal in het andere overgaat. */
.keten-kaart{background:linear-gradient(150deg,#fff 0%,var(--lila) 100%)}
.keten{display:flex;align-items:stretch;gap:4px;flex-wrap:nowrap;overflow-x:auto;
  padding:2px 0 6px;scrollbar-width:thin}
.keten-stap{flex:1 1 0;min-width:132px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:13px 14px;box-shadow:var(--shadow-sm);
  animation:ketenIn .5s cubic-bezier(.16,1,.3,1) both}
.keten-stap:nth-child(1){animation-delay:.02s}
.keten-stap:nth-child(3){animation-delay:.10s}
.keten-stap:nth-child(5){animation-delay:.18s}
.keten-stap:nth-child(7){animation-delay:.26s;background:linear-gradient(150deg,var(--paars),var(--paars-diep));border-color:transparent}
.keten-stap:nth-child(7) .keten-lab{color:var(--geel)}
.keten-stap:nth-child(7) b{color:#fff}
.keten-stap:nth-child(7) small{color:#e3d3f7}
@keyframes ketenIn{from{opacity:0;transform:translateY(10px) scale(.98)}to{opacity:1;transform:none}}
.keten-lab{font-family:var(--disp);font-weight:800;font-size:9.5px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);display:block}
.keten-stap b{display:block;font-family:var(--disp);font-weight:800;font-size:22px;
  line-height:1.1;margin:7px 0 3px;color:var(--ink);font-variant-numeric:tabular-nums}
.keten-stap small{display:block;font-size:11.5px;color:var(--muted);line-height:1.35}
.keten-pijl{flex:0 0 104px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;padding:0 2px}
.keten-pijl .pijl-ic{width:22px;height:22px;color:var(--paars-licht);stroke-width:1.6}
/* De spatie van Indivisible is smal (ongeveer 0,19em); onder de 11px plakken de
   woorden in deze korte bijschriften aan elkaar. Vandaar de ondergrens en de
   extra woordafstand. */
.keten-pijl em{font-style:normal;font-size:11.5px;line-height:1.3;text-align:center;
  color:var(--muted);word-spacing:.14em}
.voetnoot{margin:14px 0 0;font-size:12.5px;color:var(--muted);line-height:1.5}

/* Campagnetabel: naam met vestiging eronder, en een balkje voor de kosten per
   aanvraag ten opzichte van het gemiddelde van de campagnes in beeld. */
.ads-tbl td{vertical-align:top}
.ads-tbl td b{font-family:var(--disp);font-weight:700;font-size:13.5px;display:block;max-width:34ch}
.rij-meta{display:block;color:var(--muted);font-size:11.5px;margin-top:2px}
.cpl-cel{min-width:132px}
.cpl-waarde{display:block;font-variant-numeric:tabular-nums}
.cpl-balk{display:block;height:5px;border-radius:20px;background:var(--line);margin-top:6px;overflow:hidden}
.cpl-balk i{display:block;height:100%;border-radius:20px;background:var(--paars-licht)}
.cpl-balk.goed i{background:var(--groen)}
.cpl-balk.midden i{background:var(--geel)}
.cpl-balk.duur i{background:var(--rood)}
.cpl-balk.geen i{background:var(--line)}
.cpl-legenda{display:flex;gap:16px;margin-top:12px;font-size:11.5px;color:var(--muted);flex-wrap:wrap}
.cpl-legenda i{display:inline-block;width:16px;height:5px;border-radius:20px;margin-right:6px;vertical-align:middle}
.cpl-legenda i.goed{background:var(--groen)}.cpl-legenda i.midden{background:var(--geel)}
.cpl-legenda i.duur{background:var(--rood)}

/* Verdeling per vestiging en per onderwerp */
.verdeel-rij{display:flex;align-items:center;gap:14px;padding:11px 2px;border-bottom:1px solid var(--line)}
.verdeel-rij:last-child{border-bottom:0}
.verdeel-rij .naam{flex:1 1 40%;min-width:0;font-weight:600;font-size:13.5px}
.verdeel-rij .naam small{display:block;color:var(--muted);font-size:11.5px;font-weight:500;margin-top:1px}
.verdeel-bar{flex:1 1 30%;height:8px;border-radius:20px;background:var(--line);overflow:hidden;min-width:60px}
.verdeel-bar span{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,var(--blauw),var(--paars))}
.verdeel-rij .cijferblok{min-width:78px;text-align:right}
.verdeel-rij .cijfer{font-family:var(--disp);font-weight:800;font-size:15px}

/* Briefing en advertentievarianten */
.briefing{margin:0;font-size:14.5px;line-height:1.6;color:var(--ink);max-width:78ch;
  border-left:3px solid var(--geel);padding-left:14px}
.sub-kop{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:var(--geel-donker);margin:22px 0 10px}
.ad-varianten{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.ad-variant{position:relative;border:1px solid var(--line);border-radius:var(--r-sm);
  padding:15px 15px 13px;background:#fff;display:flex;flex-direction:column;gap:8px;
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s}
.ad-variant:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.ad-variant .stoplicht{position:absolute;top:14px;right:14px}
.ad-variant h4{font-size:14px;font-weight:800;color:var(--paars);padding-right:16px;line-height:1.25}
.ad-variant p{margin:0;font-size:13px;color:var(--muted);line-height:1.5}
.ad-variant-voet{margin-top:auto;display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.ad-variant-voet small{font-size:11.5px;color:var(--muted)}
.ad-bevinding{color:var(--amber);font-size:11.5px}

/* ============ responsive ============ */
@media(max-width:960px){
  .g-4{grid-template-columns:repeat(2,1fr)}
  .g-3,.g-2,.g-21{grid-template-columns:1fr}
  .ad-varianten{grid-template-columns:1fr}
}
@media(max-width:1080px){
  /* Vier stappen plus drie pijlen vragen ongeveer 830px. Past dat niet naast
     elkaar, dan wordt de keten een kolom en wijzen de pijlen naar beneden;
     dat leest beter dan een kaart die horizontaal moet scrollen. */
  .keten{flex-direction:column;overflow-x:visible}
  .keten-stap{min-width:0}
  .keten-pijl{flex:none;flex-direction:row;gap:9px;padding:2px 0}
  .keten-pijl .pijl-ic{transform:rotate(90deg)}
  .keten-pijl em{text-align:left}
}
@media(max-width:760px){ .ads-tbl td b{max-width:none} }
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .28s cubic-bezier(.16,1,.3,1);width:266px;box-shadow:0 0 60px rgba(0,0,0,.3)}
  .sidebar.open{transform:none}
  .main{margin-left:0}
  .hamb{display:flex}
  .content{padding:18px 15px 50px}
  .scrim{position:fixed;inset:0;background:rgba(43,10,82,.4);z-index:55;opacity:0;pointer-events:none;transition:opacity .25s}
  .scrim.on{opacity:1;pointer-events:auto}
  .tb-title p{display:none}
  /* De twee schakelaar-rijen mogen op mobiel niet buiten het scherm lopen: elke
     rij scrollt horizontaal binnen de viewport in plaats van de body te verbreden. */
  .tb-right{min-width:0;max-width:100%}
  .switch-wrap{align-items:stretch;max-width:100%;min-width:0;width:100%}
  .switch{max-width:100%;overflow-x:auto;scrollbar-width:none}
  .switch::-webkit-scrollbar{display:none}
  .tb-week:not(.weekkiezer){display:none}
  .weekkiezer .wk-label small{display:none}
}
@media(max-width:560px){ .g-4{grid-template-columns:1fr} .switch button{padding:7px 11px} }

/* ============ weekinvoer (Borden) ============ */
.bord-rij .naam small.detail{color:var(--paars);font-weight:600}
.bord-rij .naam small.reden{color:var(--muted);font-style:normal;opacity:.85;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
@media (max-width:720px){.bord-rij .naam small.reden{-webkit-line-clamp:3}}
.wi-kaart .wi-uitleg{margin:2px 0 14px;font-size:12.5px;color:var(--muted);max-width:70ch}
.wi-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px 18px}
.wi-veld{display:flex;flex-direction:column}
.wi-veld label{display:block;flex:1;font-weight:600;font-size:12.5px;margin-bottom:5px}
.wi-invoer{display:flex;align-items:center;gap:10px}
.wi-invoer input{flex:1;min-width:0;font-family:var(--body);font-size:14px;padding:10px 13px;min-height:44px;
  border:1px solid var(--line);border-radius:12px;background:#fdfcff;color:var(--ink)}
.wi-invoer input:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(64,182,228,.18)}
.wi-invoer input::placeholder{color:#b3aebd}
.wi-stand{font-size:11px;color:var(--muted);white-space:nowrap;flex:none}
.wi-fout{display:block;min-height:0;font-size:11.5px;font-style:normal;color:var(--rood);margin-top:3px}
.wi-actie{display:flex;align-items:center;gap:14px;margin-top:16px;flex-wrap:wrap}
.wi-knop{font-family:var(--disp);font-weight:700;font-size:13.5px;color:#fff;background:var(--paars);
  border:0;border-radius:5rem;padding:12px 24px;min-height:44px;cursor:pointer;
  transition:background .18s,box-shadow .18s;box-shadow:var(--shadow-sm)}
.wi-knop:hover{background:var(--paars-diep)}
.wi-knop:focus-visible{outline:3px solid rgba(64,182,228,.5);outline-offset:2px}
.wi-knop:disabled{background:var(--paars-licht);cursor:default;box-shadow:none}
.wi-status{font-size:12.5px;color:var(--muted)}

/* ============ gesprek aanleveren (Gesprekscoach) ============ */
.gc-kaart .gc-uitleg{margin:2px 0 14px;font-size:12.5px;color:var(--muted);max-width:72ch}
.gc-regel{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap}
.gc-regel label{font-weight:600;font-size:12.5px;flex:none}
.gc-regel input{flex:1;min-width:200px;max-width:320px;font-family:var(--body);font-size:14px;
  padding:10px 13px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:#fdfcff;color:var(--ink)}
.gc-regel input:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(64,182,228,.18)}
.gc-acties{display:flex;gap:12px;flex-wrap:wrap}
.gc-knop{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);font-weight:700;
  font-size:13.5px;color:#fff;background:var(--paars);border:0;border-radius:5rem;
  padding:12px 22px;min-height:44px;cursor:pointer;transition:background .18s,box-shadow .18s;
  box-shadow:var(--shadow-sm)}
.gc-knop .ic{width:17px;height:17px}
.gc-knop:hover{background:var(--paars-diep)}
.gc-knop:focus-visible{outline:3px solid rgba(64,182,228,.5);outline-offset:2px}
.gc-knop--licht{color:var(--paars-diep);background:var(--lila);box-shadow:none}
.gc-knop--licht:hover{background:#eadff7}
.gc-knop.opneemt{background:var(--rood)}
.gc-knop.opneemt:hover{background:#b2153d}
.gc-knop.opneemt .ic{animation:gc-puls 1.2s ease-in-out infinite}
.gc-tijd{font-variant-numeric:tabular-nums;font-style:normal;font-weight:800}
@keyframes gc-puls{0%,100%{opacity:1}50%{opacity:.35}}
@media (prefers-reduced-motion:reduce){.gc-knop.opneemt .ic{animation:none}}
.gc-status{margin:12px 0 0;font-size:12.5px;color:var(--muted);min-height:1em}
/* closer-picker + beheer */
.coach-pil.gc-beheer-knop{display:inline-flex;align-items:center;gap:6px;color:var(--muted);border-style:dashed}
.coach-pil.gc-beheer-knop .ic{width:14px;height:14px}
.coach-pil.gc-beheer-knop.aan{background:var(--lila);border-color:var(--paars-licht);color:var(--paars-diep)}
.gc-beheer{margin:0 0 14px;padding:15px;border:1px solid var(--line);border-radius:14px;background:var(--canvas)}
.gc-beheer-rij{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.gc-beheer-rij input{flex:1;min-width:180px;max-width:300px;font-family:var(--body);font-size:14px;
  padding:10px 13px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--ink)}
.gc-beheer-rij input:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(64,182,228,.18)}
.gc-closer-chips{display:flex;gap:8px;flex-wrap:wrap}
.gc-chip{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600;color:var(--paars-diep);
  background:var(--lila);border:1px solid #e2d5f4;padding:5px 5px 5px 13px;border-radius:20px}
.gc-chip-x{border:0;background:none;color:var(--paars-licht);font-size:18px;line-height:1;cursor:pointer;
  width:22px;height:22px;border-radius:50%;display:grid;place-items:center;transition:background .15s,color .15s}
.gc-chip-x:hover{background:#fdeaf0;color:var(--rood)}
.gc-bonus{border:1px solid var(--line);background:#fff;color:var(--muted);font-size:10px;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;padding:3px 9px;border-radius:20px;cursor:pointer;
  transition:background .15s,color .15s,border-color .15s}
.gc-bonus:hover{border-color:var(--paars-licht)}
.gc-bonus.aan{background:var(--geel);border-color:var(--geel);color:var(--paars-donker)}
.gc-beheer-hint{margin:10px 0 0;font-size:11.5px;color:var(--muted)}
/* closer-lanes (klaar voor de eerste opname) */
.gc-lanes{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px}
.gc-lane{margin:0;background:var(--canvas)}
.gc-lane-uitleg{margin:2px 0 15px;font-size:12.5px;color:var(--muted);line-height:1.5}
.gc-dim-grid{display:flex;flex-direction:column;gap:10px}
.gc-dim-leeg{display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--muted)}
.gc-voorbeeldkaart{border-style:dashed;border-color:#d9cbef}
.cel-knop{font:inherit;background:none;border:0;padding:0;cursor:pointer;color:inherit}
.cel-knop:hover{text-decoration:underline}
.bord-rij.klikbaar{cursor:pointer}
.bord-rij.klikbaar:hover .naam{color:var(--paars)}
.side-wie{display:block;text-align:center;margin-top:10px;font-size:11px;color:#a487c9}
.mini-strip{display:flex;gap:34px;flex-wrap:wrap;margin-top:4px}
.mini-strip>div{min-width:130px}

/* ============================================================================
   CRM-spiegel
   De kloon van de twee CRM's. Zelfde tokens als de rest van het portaal, maar
   met een eigen ritme: het bord is dicht en horizontaal, de rest van Mission
   Control is ruim en verticaal. Dat verschil is bedoeld, want dit is een
   werkscherm en geen stuurscherm.
   z-index: sidebar 60, topbar 40, kaartpaneel 80 met scrim op 75.
   ========================================================================== */

.crm-balk{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.crm-modi{display:inline-flex;background:linear-gradient(180deg,#f6f1fc,var(--lila));
  border:1px solid var(--line);border-radius:5rem;padding:4px}
.crm-modi button{font-family:var(--disp);font-weight:700;font-size:12.5px;color:var(--muted);
  background:none;border:0;padding:8px 18px;border-radius:5rem;cursor:pointer;
  /* 44 px: dit is de enige plek in dit scherm waar met een duim wordt geschakeld. */
  min-height:44px;transition:background .18s,color .18s}
.crm-modi button:hover:not(.on){color:var(--paars-diep)}
.crm-modi button.on{background:linear-gradient(160deg,var(--paars),var(--paars-diep));color:#fff}
.crm-modi button:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}

.crm-zoek{position:relative;flex:1;min-width:210px;max-width:340px}
.crm-zoek .ic{position:absolute;left:13px;top:50%;transform:translateY(-50%);
  width:17px;height:17px;color:var(--muted);pointer-events:none}
.crm-zoek input{width:100%;font-family:var(--body);font-size:14px;padding:11px 13px 11px 39px;
  border:1px solid var(--line);border-radius:5rem;background:var(--card);color:var(--ink);min-height:44px}
.crm-zoek input:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(64,182,228,.18)}

.crm-filter{font-family:var(--body);font-size:13px;padding:10px 38px 10px 16px;
  border:1px solid var(--line);border-radius:5rem;background-color:var(--card);color:var(--ink);
  cursor:pointer;min-height:44px;-webkit-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235f5a66' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:15px}
.crm-filter:hover{border-color:var(--paars-licht)}
.crm-filter:focus{outline:none;border-color:var(--blauw);box-shadow:0 0 0 3px rgba(64,182,228,.18)}

/* Versheid. Een oude stand mag nooit als verse doorgaan, dus die kleurt. */
.crm-vers{display:inline-flex;align-items:center;gap:8px;margin-left:auto;font-family:var(--disp);
  font-size:12px;font-weight:600;color:var(--muted);background:var(--card);border:1px solid var(--line);
  padding:8px 14px;border-radius:5rem}
.crm-vers .stoplicht{width:8px;height:8px}
.crm-vers.oud{background:#fdf6e3;border-color:#f0dda2;color:var(--geel-donker)}
.crm-vers.stuk{background:#fdeaf0;border-color:#f6c2d2;color:var(--rood)}

/* ---- bord ---- */
.crm-bord{display:flex;align-items:flex-start;gap:14px;overflow-x:auto;padding:2px 2px 18px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.crm-kolom{flex:0 0 268px;min-width:0;display:flex;flex-direction:column;scroll-snap-align:start;
  background:linear-gradient(180deg,#fbf9fe,#f6f2fc);border:1px solid var(--line);
  border-radius:var(--r);max-height:var(--kolom-dak,calc(100vh - 260px))}
.crm-kolom.doelwit{border-color:var(--blauw);box-shadow:0 0 0 3px rgba(64,182,228,.16)}
.crm-kolom-kop{display:flex;align-items:center;gap:9px;padding:14px 15px 11px;
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:1;
  background:linear-gradient(180deg,#fbf9fe,rgba(251,249,254,.94));border-radius:var(--r) var(--r) 0 0}
.crm-kolom-kop .vlag{width:4px;height:19px;border-radius:3px;flex:none}
.crm-kolom-kop h4{font-size:12.5px;font-weight:800;color:var(--ink);flex:1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-kolom-kop .n{font-family:var(--disp);font-weight:800;font-size:11.5px;color:var(--paars-diep);
  background:var(--lila);padding:3px 9px;border-radius:20px;font-variant-numeric:tabular-nums}
.crm-kolom-lijf{overflow-y:auto;padding:10px;display:flex;flex-direction:column;gap:8px;flex:1;min-width:0}

.crm-kaartje{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:11px 12px;cursor:pointer;text-align:left;width:100%;min-width:0;overflow:hidden;font-family:inherit;
  /* Een flex-item krimpt standaard. In een kolom met een maximumhoogte drukt dat
     alle kaartjes plat in plaats van de kolom te laten scrollen. */
  flex:none;
  box-shadow:var(--shadow-sm);transition:border-color .18s,box-shadow .18s,transform .18s}
.crm-kaartje:hover{border-color:var(--paars-licht);transform:translateY(-1px);
  box-shadow:0 14px 30px -20px rgba(61,13,115,.4)}
.crm-kaartje:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}
.crm-kaartje.sleept{opacity:.4}
.crm-kaartje .naam{font-family:var(--disp);font-weight:800;font-size:13.5px;color:var(--ink);
  line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crm-kaartje .regel{display:flex;align-items:center;gap:7px;margin-top:7px;flex-wrap:wrap}
.crm-merk{font-family:var(--disp);font-size:10.5px;font-weight:700;letter-spacing:.02em;color:var(--muted);
  background:var(--lila);padding:2px 8px;border-radius:20px;white-space:nowrap;
  max-width:100%;overflow:hidden;text-overflow:ellipsis}
.crm-merk.geel{background:#fdf3d6;color:#8e6900}
.crm-merk.groen{background:#e2f5ec;color:#167c4b}
.crm-merk.blauw{background:#e5f4fb;color:#1d769a}
.crm-merk.rood{background:#fdeaf0;color:#c11742}
.crm-kaartje .stil{margin-left:auto;font-family:var(--disp);font-size:10.5px;font-weight:600;color:var(--muted);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.crm-kaartje .stil.lang{color:var(--rood)}

/* ---- lijst ---- */
/* De schuifhint zit in het masker (klasse schuif-links/-rechts), zodat de tekst
   in de vervaging oplost in plaats van hard afgesneden te worden. */
.crm-tabel-wrap{overflow-x:auto}
.crm-tabel-wrap .tbl tbody tr{cursor:pointer}
.crm-tabel-wrap .tbl td .naam{font-family:var(--disp);font-weight:700}
.crm-telling{font-size:12.5px;color:var(--muted);margin:0 0 12px}

/* ---- kaartpaneel ---- */
.crm-scrim{position:fixed;inset:0;background:rgba(43,10,82,.42);z-index:75;
  opacity:0;pointer-events:none;transition:opacity .25s}
.crm-scrim.open{opacity:1;pointer-events:auto}
.crm-paneel{position:fixed;top:0;right:0;bottom:0;width:min(520px,100%);z-index:80;
  background:var(--card);box-shadow:-30px 0 70px -40px rgba(43,10,82,.6);
  display:flex;flex-direction:column;transform:translateX(100%);
  transition:transform .3s cubic-bezier(.16,1,.3,1)}
.crm-paneel.open{transform:translateX(0)}
.crm-paneel-kop{padding:20px 22px 15px;border-bottom:1px solid var(--line);
  background:linear-gradient(160deg,var(--paars),var(--paars-diep));color:#fff;position:relative;overflow:hidden}
.crm-paneel-kop::after{content:"";position:absolute;inset:0;pointer-events:none;opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.05'/%3E%3C/svg%3E")}
.crm-paneel-kop>*{position:relative;z-index:1}
.crm-paneel-kop h2{font-size:20px;font-weight:800;padding-right:40px}
.crm-paneel-kop .onder{display:flex;align-items:center;gap:9px;margin-top:9px;flex-wrap:wrap}
.crm-paneel-kop .crm-merk{background:rgba(255,255,255,.16);color:#fff}
.crm-dicht{position:absolute;top:14px;right:14px;z-index:2;width:44px;height:44px;
  display:grid;place-items:center;background:rgba(255,255,255,.14);border:0;border-radius:50%;
  color:#fff;cursor:pointer;transition:background .18s}
.crm-dicht:hover{background:rgba(255,255,255,.26)}
.crm-dicht:focus-visible{outline:2px solid #fff;outline-offset:2px}
.crm-paneel-lijf{overflow-y:auto;padding:20px 22px 46px;flex:1}
.crm-groep{margin-bottom:22px}
.crm-groep h3{font-family:var(--disp);font-weight:800;font-size:10.5px;letter-spacing:.16em;
  text-transform:uppercase;color:#8c66b3;margin-bottom:10px}
.crm-veld{display:grid;grid-template-columns:145px 1fr;gap:10px;padding:8px 0;
  border-bottom:1px solid var(--line);font-size:13.5px;align-items:baseline}
.crm-veld:last-child{border-bottom:0}
.crm-veld dt{color:var(--muted);font-size:12.5px}
.crm-veld dd{margin:0;word-break:break-word}
.crm-veld dd.leeg{color:#787380}
.crm-veld a{color:var(--blauw-donker);text-decoration:underline;text-underline-offset:2px}
.crm-taak{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.crm-taak:last-child{border-bottom:0}
.crm-taak .titel{flex:1}
.crm-taak .wanneer{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums;white-space:nowrap}
.crm-paneel-voet{border-top:1px solid var(--line);padding:14px 22px;display:flex;gap:10px;
  align-items:center;flex-wrap:wrap;background:#fdfcff}
.crm-knop{font-family:var(--disp);font-weight:700;font-size:13px;padding:10px 18px;border-radius:5rem;
  border:1px solid var(--line);background:var(--card);color:var(--ink);cursor:pointer;min-height:42px;
  transition:background .18s,border-color .18s}
.crm-knop:hover{background:var(--lila);border-color:var(--paars-licht)}
.crm-knop:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}
.crm-knop.hoofd{background:var(--blauw);border-color:var(--blauw);color:#fff}
.crm-knop.hoofd:hover{background:var(--blauw-donker);border-color:var(--blauw-donker)}
.crm-knop[disabled]{opacity:.5;cursor:not-allowed}

.crm-melding{font-size:12.5px;font-weight:600;padding:10px 14px;border-radius:12px;margin-bottom:14px}
.crm-melding.fout{background:#fdeaf0;color:var(--rood)}
.crm-melding.goed{background:#e2f5ec;color:var(--groen)}
.crm-melding.let-op{background:#fdf6e3;color:var(--geel-donker)}

/* Alleen-lezen is een toestand, geen stille afwezigheid van een knop. */
.crm-slot{display:inline-flex;align-items:center;gap:7px;font-size:12px;color:var(--muted)}
.crm-slot .ic{width:15px;height:15px}

@media (max-width:900px){
  /* Alleen de breedte verschilt; het dak komt van --kolom-dak, dat in
     portaal.js wordt gemeten. Een vaste aftrek klopt hier niet omdat de
     werkbalk op smalle schermen naar meerdere rijen stapelt. */
  .crm-kolom{flex-basis:82vw}
  .crm-vers{margin-left:0}
  .crm-zoek{max-width:none}
  .crm-veld{grid-template-columns:1fr;gap:2px}
}
@media (prefers-reduced-motion:reduce){
  .crm-paneel,.crm-scrim,.crm-kaartje{transition:none}
  .crm-kaartje:hover{transform:none}
}

/* Label dat alleen de schermlezer hoort: het zoekveld en het fasefilter dragen
   hun uitleg in de placeholder, maar een placeholder is geen label. */
.visueel-verborgen{position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Welk van de twee CRM's er op het bord staat. De weergaveschakelaar bovenin
   kent ook een gecombineerde stand, maar twee CRM's met eigen fasen passen niet
   op één bord; dan moet er in elk geval staan welk CRM je ziet. */
.crm-welk{display:inline-flex;align-items:center;gap:8px;font-family:var(--disp);font-size:12.5px;font-weight:700;
  color:var(--paars-diep);background:var(--lila);border:1px solid var(--line);
  padding:8px 15px;border-radius:5rem;white-space:nowrap}
.crm-welk .ic{width:15px;height:15px;color:var(--paars-licht)}
.crm-welk em{font-style:normal;font-weight:500;color:var(--muted);font-size:11.5px}
@media (max-width:900px){ .crm-welk em{display:none} }

.crm-telling{font-size:12.5px;color:var(--muted);margin:0 0 12px;display:flex;
  align-items:center;gap:12px;flex-wrap:wrap}
.crm-wis{font-family:var(--disp);font-weight:700;font-size:11.5px;color:var(--paars-diep);
  background:var(--lila);border:1px solid var(--line);border-radius:5rem;
  padding:5px 13px;cursor:pointer;transition:background .18s,border-color .18s}
.crm-wis:hover{background:#ece2f8;border-color:var(--paars-licht)}
.crm-wis:focus-visible{outline:2px solid var(--blauw);outline-offset:2px}

/* Een fase die het CRM zelf niet in zijn faselijst heeft. De kaarten blijven
   staan (een lead verbergen is erger dan een vreemde kolomnaam tonen), maar het
   scherm zegt eerlijk dat dit geen erkende fase is. */
.crm-kolom-kop.onerkend .vlag{background:repeating-linear-gradient(45deg,
  #c9c3d2 0 3px,transparent 3px 6px)!important}
.crm-kolom-kop.onerkend h4{color:var(--muted)}
.crm-onerkend{font-family:var(--disp);font-weight:700;font-size:9.5px;letter-spacing:.04em;
  color:#787380;background:#f1eef6;border:1px dashed #cdc5da;padding:2px 7px;border-radius:20px;
  white-space:nowrap}

/* matrix op de eenheden-telling (motor): stoplicht per cel op Pims 90/85,
   schakelaar tussen de twee tellingen, legenda en onvolledige weken. */
.cell.grijs{background:var(--lila);color:#8d7fa6}
.cell.totaal.grijs{color:#8d7fa6}
.heat th.mx-onvolledig{color:#b7aec6;font-style:italic}
.mx-bron{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 12px}
.mx-legenda{display:flex;gap:14px;flex-wrap:wrap;margin:12px 0 0;font-size:12px;color:var(--muted)}
.mx-legenda i{display:inline-block;width:12px;height:12px;border-radius:4px;vertical-align:-1px;margin-right:6px}
.mx-legenda i.groen{background:var(--groen)}
.mx-legenda i.oranje{background:var(--geel)}
.mx-legenda i.rood{background:var(--rood)}
.mx-legenda i.grijs{background:var(--lila);border:1px solid #cfc9d8}

/* Matrix: de sticky naamkolom mag niet door de linker schuifhint vervagen
   (de eerste letters van de namen verdwenen op mobiel); rechts volstaat. */
.heat-wrap.schuif-links{-webkit-mask-image:none;mask-image:none}
.heat-wrap.schuif-links.schuif-rechts,.heat-wrap.schuif-rechts{
  -webkit-mask-image:linear-gradient(270deg,transparent 0,#000 26px);
  mask-image:linear-gradient(270deg,transparent 0,#000 26px)}
.md-sluit{white-space:nowrap}
.mx-voetnoot{margin:8px 0 0;font-size:12px;color:var(--muted)}

/* ============ Gesprekscoach: Pims CLOSER-scorecard ============
   De kaart volgt het papieren formulier van Pim (6-sep-2026): 7 blokken, per
   regel 0/1/2/n.v.t. met bewijs, behaald van haalbaar per blok, en onderaan het
   sterkste moment en precies een volgende training. Kleuren blijven binnen de
   huisstijl: paars voor structuur, groen/geel/rood alleen als oordeel. */
.cs-kop{display:flex;align-items:center;gap:26px;padding:4px 0 16px;border-bottom:1px solid var(--line);margin-bottom:14px}
.cs-score-groot{flex:none;text-align:center;min-width:120px}
.cs-score-groot .cijfer{font-family:var(--disp);font-weight:800;font-size:34px;line-height:1;letter-spacing:-.01em}
.cs-score-groot.groen .cijfer{color:var(--groen)}.cs-score-groot.oranje .cijfer{color:var(--geel-donker)}
.cs-score-groot.rood .cijfer{color:var(--rood)}.cs-score-groot.grijs .cijfer{color:var(--muted)}
.cs-score-groot small{display:block;font-size:11.5px;color:var(--muted);margin-top:5px}

.cs-fasen{flex:1;min-width:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.cs-fase{display:flex;flex-direction:column;align-items:center;gap:5px;min-width:0}
.cs-fase-letter{position:relative;font-family:var(--disp);font-weight:800;font-size:13px;color:var(--paars);
  width:28px;height:28px;border-radius:50%;background:var(--lila);display:inline-flex;align-items:center;justify-content:center}
.cs-fase.nvt .cs-fase-letter{background:transparent;border:1.5px dashed #b9b0c9;color:var(--muted)}
.cs-vink{position:absolute;right:-5px;top:-5px;width:14px;height:14px;border-radius:50%;background:#fff;
  border:1.5px solid #cfc9d8;display:inline-flex;align-items:center;justify-content:center;color:transparent}
.cs-vink .ic{width:9px;height:9px;stroke-width:3}
.cs-vink.aan{background:var(--groen);border-color:var(--groen);color:#fff}
.cs-fase-bar{display:block;width:100%;height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.cs-fase-bar i{display:block;height:100%;border-radius:3px;background:var(--paars-licht)}
.cs-fase-bar i.groen{background:var(--groen)}.cs-fase-bar i.oranje{background:var(--geel)}.cs-fase-bar i.rood{background:var(--rood)}
.cs-fase-stand{font-size:10.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.cs-fasen.leeg{opacity:.55;margin-top:6px}

.cs-rem{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:10px 14px;border-radius:12px;
  background:var(--geel-licht);color:var(--paars-donker);font-size:13px;font-weight:600}
.cs-rem .ic{width:18px;height:18px;flex:none;color:var(--geel-donker)}

.cs-blokken{display:flex;flex-direction:column;gap:6px}
.cs-blok{border:1px solid var(--line);border-radius:12px;background:var(--card);overflow:hidden}
.cs-blok.nvt{background:var(--canvas)}
.cs-blok summary{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer;list-style:none;
  font-size:13px;font-weight:600;color:var(--ink)}
.cs-blok summary::-webkit-details-marker{display:none}
.cs-blok summary:hover{background:var(--lila)}
.cs-blok[open] summary{border-bottom:1px solid var(--line);background:#fbf9fe}
.cs-blok-letter{font-family:var(--disp);font-weight:800;font-size:12px;color:var(--paars);width:24px;height:24px;
  border-radius:50%;background:var(--lila);display:inline-flex;align-items:center;justify-content:center;flex:none}
.cs-blok.nvt .cs-blok-letter{background:transparent;border:1.5px dashed #b9b0c9;color:var(--muted)}
.cs-blok-naam{flex:1;min-width:0}
.cs-blok-bar{width:110px;height:6px;border-radius:3px;background:var(--line);overflow:hidden;flex:none}
.cs-blok-bar i{display:block;height:100%;border-radius:3px}
.cs-blok-bar i.groen{background:var(--groen)}.cs-blok-bar i.oranje{background:var(--geel)}.cs-blok-bar i.rood{background:var(--rood)}
.cs-blok-stand{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:600;font-size:12.5px;flex:none;min-width:64px;text-align:right}
.cs-blok.nvt .cs-blok-stand{font-weight:500}

.cs-regels{padding:6px 14px 10px}
.cs-regel{display:grid;grid-template-columns:34px 46px 1fr;gap:10px;align-items:start;padding:9px 0;border-bottom:1px solid var(--line)}
.cs-regel:last-child{border-bottom:0}
.cs-regel-id{font-family:var(--disp);font-weight:700;font-size:11.5px;color:var(--muted);padding-top:3px}
.cs-regel-tekst{font-size:13px;line-height:1.45;min-width:0}
.cs-bewijs{display:block;margin-top:4px;padding-left:9px;border-left:2px solid var(--paars-licht);font-size:12px;color:var(--muted);line-height:1.4}
.cs-regel.nvt .cs-regel-tekst{color:var(--muted)}

.cs-score{display:inline-flex;align-items:center;justify-content:center;min-width:26px;height:22px;padding:0 7px;border-radius:999px;
  font-family:var(--disp);font-weight:800;font-size:12px;line-height:1;color:#fff}
.cs-score.s2{background:var(--groen)}.cs-score.s1{background:var(--geel);color:var(--paars-donker)}.cs-score.s0{background:var(--rood)}
.cs-score.nvt{background:transparent;border:1.5px dashed #b9b0c9;color:var(--muted);font-weight:700;font-size:10.5px;letter-spacing:.02em}

.cs-noot{margin:10px 0 0;font-size:12px;color:var(--muted)}
.cs-voet{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.cs-voet-kolom{padding:12px 14px;border-radius:12px;background:var(--canvas)}
.cs-voet-kop{display:block;font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.cs-voet-kolom p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink)}
.cs-training{background:var(--lila);border-left:3px solid var(--paars)}
.cs-training .cs-voet-kop{color:var(--paars)}
.cs-training p{font-weight:600;color:var(--paars-donker)}
.cs-training small{display:block;margin-top:6px;font-size:11.5px;color:var(--muted)}
.cs-training--lane{margin-top:12px;padding:10px 12px;border-radius:10px}
.cs-training--lane p{font-size:13px}
.cs-context{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px;font-size:11.5px;color:var(--muted)}
.cs-context b{color:var(--ink);font-weight:700}

.cs-lane-kop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.cs-lane-kop .cs-score-groot{text-align:left;min-width:0}
.cs-lane-kop canvas{flex:none;max-width:45%}
.cs-lane .cs-fasen{margin-bottom:2px}

.cs-tabel .cs-cel{font-variant-numeric:tabular-nums;font-weight:700}
.cs-tabel .cs-cel.groen{color:var(--groen)}.cs-tabel .cs-cel.oranje{color:var(--geel-donker)}.cs-tabel .cs-cel.rood{color:var(--rood)}
.cs-tabel .cs-cel.nvt{color:var(--muted);font-weight:500;font-size:11.5px}

.cs-legenda{margin:0;font-size:13px;line-height:1.75;color:var(--muted);max-width:78ch}
.cs-legenda .cs-score{vertical-align:middle;margin:0 2px}
.cs-voorbeeld .cs-kaart{border-style:dashed;border-color:#d9cbef}

@media (max-width:640px){
  .cs-kop{flex-direction:column;align-items:stretch;gap:14px}
  .cs-score-groot{text-align:left;display:flex;align-items:baseline;gap:10px}
  .cs-score-groot small{margin-top:0}
  .cs-fasen{gap:4px}
  .cs-fase-letter{width:26px;height:26px;font-size:12px}
  .cs-blok summary{gap:8px;padding:10px 12px}
  .cs-blok-bar{display:none}
  .cs-voet{grid-template-columns:1fr}
  .cs-regel{grid-template-columns:30px 42px 1fr;gap:8px}
}
@media (max-width:420px){
  .cs-fase-stand{font-size:9.5px}
}
/* Mobiel: de kopregel van lane en kaart draagt naam, trend en tag; die moet
   kunnen omslaan, anders duwt de tag de pagina breder dan het scherm
   (gemeten 6-sep: scrollWidth 463 op 390). Zelfde voor score plus sparkline. */
.cs-lane .card-h,.cs-kaart .card-h{flex-wrap:wrap;row-gap:6px}
.cs-lane-kop{flex-wrap:wrap}
.cs-lane-kop canvas{max-width:100%;height:auto}
@media (max-width:640px){
  .cs-lane-kop canvas{max-width:42%}
  .cs-lane-kop .cs-score-groot{flex:1 1 140px}
}
/* De naamkolom van de closertabel plakt links vast, zoals bij de matrix:
   op een telefoon schoof de tabel anders zo dat alleen de blokken zichtbaar
   waren en de naam erbij weg was (gemeten 6-sep). */
.cs-tabel th:first-child,.cs-tabel td:first-child{position:sticky;left:0;background:var(--card);z-index:1}
.cs-tabel thead th:first-child{background:var(--card)}

/* Uitlegregel onder de bedrijfsschakelaar op Borden (geen vestigingsrij daar). */
.switch-noot{margin:6px 0 0;font-size:12px;line-height:1.4;color:var(--muted)}

/* Standalone-PWA op iPhone (viewport-fit=cover): inhoud niet onder de statusbalk. */
.topbar{padding-top:calc(12px + env(safe-area-inset-top,0px))}
.sidebar{padding-top:calc(22px + env(safe-area-inset-top,0px));padding-bottom:calc(15px + env(safe-area-inset-bottom,0px))}
.content{padding-bottom:calc(60px + env(safe-area-inset-bottom,0px))}

/* Bronnenstatus: agenda-export ouder dan 36 uur of een mislukte nachtrun (bronstatus_versheid.py). */
.st.achterstallig{background:#fdeaf0;color:var(--rood)}
/* Vers maar niet compleet is geen storing: geel, zoals wacht. */
.st.onvolledig{background:#fcf3d6;color:var(--geel-donker)}
/* Vraag van de vertrekcontrole: iets dat een mens moet beantwoorden, in
   dezelfde gele familie als de ONVOLLEDIG-badge. Geen storing, wel actie. */
.bron-vragen{margin-top:9px;display:grid;gap:7px;min-width:0}
.bron-vraag{display:flex;gap:9px;align-items:flex-start;min-width:0;padding:9px 11px;
  border-radius:12px;background:#fdf8ea;border:1px solid #f2e2b4}
.bron-vraag .ic{width:16px;height:16px;color:var(--amber);flex:none;margin-top:2px}
/* Zonder min-width:0 duwt de niet-brekende code-regel de hele pagina breder. */
.bron-vraag>div{min-width:0;flex:1}
.bron-vraag span{display:block;font-size:12.5px;color:var(--ink);line-height:1.45}
.bron-vraag code{display:block;margin-top:6px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:11.5px;color:var(--paars-diep);background:#fff;border:1px solid var(--line);
  border-radius:8px;padding:5px 8px;white-space:pre-wrap;word-break:normal;overflow-wrap:break-word;
  user-select:all}
/* Op een telefoon is de tekstkolom in deze kaart al smal; het extra icoon en de
   ruime binnenmarge maken er een koker van. Daar valt het icoon weg en krijgt de
   tekst de volle breedte (gemeten op 390px). */
@media (max-width:480px){
  .bron-vraag{padding:8px 9px;gap:0}
  .bron-vraag .ic{display:none}
  .bron-vraag code{font-size:11px;padding:5px 7px}
}