/* ═══════════════════════════════════════════════════════════════
   PLOEGGENOTEN CRM — DESIGN SYSTEM
   Dit bestand is het CONTRACT. Modules gebruiken deze klassen en
   variabelen; ze definiëren geen eigen kleuren of knopstijlen.
   Rustig = veel witruimte, weinig kleur, één accent per scherm.
   ═══════════════════════════════════════════════════════════════ */

:root{
  /* Basis — warme crème, exact volgens de huisstijlbrief */
  --ink:#1a1f0a;          /* tekst op licht */
  --txt:#1a1f0a;
  --txt-2:#5b6544;        /* gedempte tekst op licht */
  --muted:#5b6544;
  --paper:#f4f6ec;        /* cream — licht canvas (donkere sidebar geeft het contrast) */
  --card:#ffffff;         /* kaarten */
  --card-2:#eef1e6;       /* cream-2 — subtiele vulling */
  /* Diepte door tinten (wens Tjeerd): componenten tekenen zich als aparte
     vlakken af. Ladder: paper → well (sectievlak/groep) → well-2 (verdiept:
     bordkolommen, zijrail) → card (wit, springt eruit) → card-2 (binnenvlak). */
  --well:#eceede;         /* sectievlak / groepscontainer */
  --well-2:#e3e7d1;       /* verdiept vlak: bordkolommen, kaartkoppen */
  --line:#e0e5d2;         /* dé rand, overal */
  --line-2:#d3dabf;       /* iets sterker, alleen voor invoervelden */

  /* Merk */
  --olive:#3d6400;        /* hoofdaccent — spaarzaam */
  --olive-d:#2b4700;      /* alleen in gradients */
  --olive-l:#6fa03c;
  --lime:#c8f135;         /* ALLEEN op donkere vlakken; tekst erop #171d08 */
  --sidebar:#eef1e6;      /* lichte sidebar in cream-2 */
  --oranje:#d4522a;       /* secundaire actie / waarschuwing */
  --gold:#a8862d;         /* golden candidates — gedempt goud */
  --whatsapp:#25d366;

  /* Donkere vlakken (spaarzaam) */
  --dark-ink:#0e1207; --dark-card:#1b2211; --dark-line:#2a3618;
  --dark-txt:#f6f7f1; --dark-muted:#9aa781;

  /* Status — gedempt */
  --green:#2f8f5b;  --green-bg:#e9f1ea;  --green-line:#bdd5c4;
  --red:#c0392b;    --red-bg:#f9ecea;    --red-line:#e5c0b9;
  /* Waarschuwing/urgentie = merkoranje (huisstijl: secundaire actie). */
  --amber:#d4522a;  --amber-bg:#fbede6;  --amber-line:#eec9b6;
  --blue:#2f6b9a;   --blue-bg:#ebf1f5;   --blue-line:#bfd3e2;
  --purple:#7e5aa6; --purple-bg:#f1edf6; --purple-line:#d2c4e2;

  /* Vorm — dunne randen, nauwelijks schaduw */
  --r-s:8px; --r:11px; --r-l:14px;
  --sh:none;
  --sh-2:0 2px 10px rgba(26,31,10,.05);
  --sh-3:0 16px 48px rgba(14,18,7,.16);

  /* Type */
  --disp:'Anton','Inter',system-ui,sans-serif;
  --body:'Inter',system-ui,-apple-system,sans-serif;
  --hand:'Caveat',cursive;

  --nav-w:232px;
}

/* ─── Breedtestappen — het scherm waar het team omheen staat ─────
   Ploeggenoten werkt dagelijks met het hele team om één groot scherm
   (±2000px). Modules hadden allemaal hun eigen leesbreedte-rem
   (860–1240px), waardoor rechts een derde van dat scherm leeg bleef.
   Vanaf nu geldt in het hele systeem dezelfde ladder:

     < 1500px  — één leeskolom, precies zoals het was (laptop, tablet)
     ≥ 1500px  — "breed":  de rem vervalt, blokken gaan 2 naast elkaar
     ≥ 1900px  — "teamscherm": waar het past een derde kolom erbij

   REGEL: extra breedte vullen we met MEER inhoud naast elkaar, nooit
   met dezelfde inhoud uitgerekt. Lopende tekst (uitleg, lege staten,
   hulpteksten) houdt daarom altijd zijn eigen max-width in ch/px —
   die remmen blijven staan. Deze twee getallen staan bewust alleen
   hier in een comment: media queries kunnen geen custom properties
   lezen, dus elke module herhaalt 1500px / 1900px letterlijk. */

*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  background:var(--paper);color:var(--txt);font-family:var(--body);
  font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;
}
a{color:var(--olive);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0}

/* Eén focusring voor het hele systeem. Elke module had knoppen, tabs en
   segmentschakelaars met de standaard blauwe browserring of helemaal geen
   zichtbaar merk — dat hoort in het design-system te staan, niet per module.
   Alleen bij toetsenbordgebruik (:focus-visible), dus muisklikken blijven rustig. */
:focus-visible{
  outline:2px solid var(--olive-l);outline-offset:2px;border-radius:var(--r-s);
}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:none}

/* ─── Typografie-helpers ─────────────────────────────────────── */
/* Anton (--disp) SPAARZAAM: alleen paginatitels (.h1) en grote
   kerncijfers (.big). Al het functionele — knoppen, labels, tabellen,
   tussenkoppen — is Inter. Datums en kleine cijfers: Inter + .num.  */
.h1{font-family:var(--disp);font-weight:400;font-size:24px;letter-spacing:.5px;line-height:1;text-transform:uppercase;color:var(--ink)}
.h2{font-family:var(--body);font-weight:700;font-size:15px;letter-spacing:-.01em;color:var(--ink)}
.label{font-family:var(--body);font-weight:600;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--txt-2)}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum";font-weight:600}
/* Cijfers met lading: positief in de merkkleur, negatief in rood. */
.pos{color:var(--olive)!important}
.neg{color:var(--red)!important}
.big{font-family:var(--disp);font-weight:400;font-size:30px;line-height:1;letter-spacing:.5px;color:var(--ink)}
/* Handschrift-accent: hooguit 1–2 per pagina. */
.hand{font-family:var(--hand);font-weight:600;font-size:1.25em;color:var(--olive);
  display:inline-block;transform:rotate(-2deg)}
.sub{font-size:12.5px;color:var(--txt-2)}
.meta{font-size:12px;color:var(--muted)}
.mono{font-variant-numeric:tabular-nums}
.trunc{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ─── App-frame ──────────────────────────────────────────────── */
#app{display:none;min-height:100%}
#app.on{display:flex}

/* Donkere olijf-sidebar (wens Tjeerd: donkerder en zakelijker).
   Gradient van olijf naar dieper olijf; lime alléén hier, op donker. */
/* Huisstijl-olijf op halve dekking over het crème: zachte merktint. */
nav.side{
  width:var(--nav-w);flex:0 0 var(--nav-w);color:#1e3300;
  background:linear-gradient(180deg,rgba(61,100,0,.24) 0%,rgba(43,71,0,.30) 100%);
  border-right:1px solid rgba(43,71,0,.18);
  display:flex;flex-direction:column;position:fixed;top:0;bottom:0;left:0;z-index:30;
}
.side .brand{padding:20px 20px 16px;display:flex;flex-direction:column;align-items:flex-start;gap:8px;border-bottom:1px solid rgba(30,51,0,.15)}
.side .brand img{width:100%;max-width:140px;height:auto;display:block}
.side .brand .bs{font-size:10px;font-weight:600;color:rgba(30,51,0,.5);letter-spacing:.2em;text-transform:uppercase}
.side .navscroll{flex:1;overflow-y:auto;padding:8px 12px 16px}
/* Groepstitels: vol merkoranje, springen eruit als wegwijzers. */
.side .navgroup{font-size:13.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--oranje);padding:22px 12px 8px;opacity:1;
  text-shadow:0 1px 0 rgba(246,247,241,.35)}
.side a.nav{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:999px;
  color:#1e3300;font-size:13.5px;font-weight:600;cursor:pointer;text-decoration:none;
  transition:background .12s,color .12s;position:relative;
}
.side a.nav svg{width:17px;height:17px;flex:0 0 17px;opacity:.9}
.side a.nav:hover{background:rgba(255,255,255,.28);color:#14240a;text-decoration:none}
/* Actieve pagina: donker olijf vlak op de lichtere balk + lime accentstreep. */
.side a.nav.on{background:#22380a;color:#fff;font-weight:700}
.side a.nav.on svg{opacity:1;stroke:var(--lime)}
.side a.nav.on::before{content:'';position:absolute;left:-12px;top:7px;bottom:7px;width:3px;border-radius:0 3px 3px 0;background:var(--lime)}
.side a.nav .cnt{margin-left:auto;background:rgba(255,255,255,.4);color:#1e3300;border-radius:999px;font-size:11px;padding:1px 7px;font-weight:600;font-variant-numeric:tabular-nums}
.side a.nav.on .cnt{background:var(--lime);color:#171d08}
.side .navfoot{border-top:1px solid rgba(30,51,0,.15);padding:12px 16px;display:flex;align-items:center;gap:9px}
.side .avatar{width:28px;height:28px;border-radius:50%;background:var(--olive-l);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:600;font-size:12px;flex:0 0 28px}
.side .who{flex:1;min-width:0}
.side .who b{display:block;font-size:12.5px;font-weight:600;color:#1e3300;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.side .who span{font-size:10.5px;color:rgba(30,51,0,.6)}
.side .out{background:none;border:none;color:rgba(30,51,0,.6);cursor:pointer;font-size:14px;padding:4px}
.side .out:hover{color:#14240a}

main.content{flex:1;min-width:0;margin-left:var(--nav-w);display:flex;flex-direction:column}
header.pagehead{
  background:rgba(244,246,236,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);
  padding:16px 28px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  position:sticky;top:0;z-index:20;min-height:64px;
}
header.pagehead .ph-t{display:flex;flex-direction:column;gap:2px;margin-right:auto}
header.pagehead .ph-t .h1{font-size:22px}
.view{padding:22px 26px 60px;flex:1}
.view.pad0{padding:0}
/* Paginawissel: subtiele fade + 3px lift — voelt verzorgd, leidt niet af. */
.view.v-in{animation:v-in .14s ease-out}
@keyframes v-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){.view.v-in{animation:none}}

/* ─── Knoppen — pill-vormig, ALTIJD Inter ────────────────────── */
.btn{
  background:var(--olive);color:#fff;border:1px solid var(--olive);
  border-radius:999px;padding:8px 16px;font-family:var(--body);font-size:13px;
  font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:7px;
  transition:filter .12s,background .12s;white-space:nowrap;
}
.btn:hover{filter:brightness(1.08)}
/* Indrukken = merkoranje (wens Tjeerd): kort en duidelijk klik-gevoel. */
.btn:active{background:var(--oranje);border-color:var(--oranje);color:#fff;filter:none}
.btn.ghost:active,.btn.sub:active{background:var(--oranje);border-color:var(--oranje);color:#fff}
.seg button:active,.tabs .tab:active{color:var(--oranje)}
.chip.btn-like:active{background:var(--oranje);border-color:var(--oranje);color:#fff}
.btn:disabled{opacity:.45;cursor:not-allowed;filter:none}
.btn.ghost{background:var(--card);color:var(--txt);border-color:var(--line-2)}
.btn.ghost:hover{background:var(--card-2);filter:none;border-color:var(--olive-l)}
.btn.sub{background:transparent;color:var(--txt-2);border-color:transparent;padding:6px 11px}
.btn.sub:hover{background:#eaedde;filter:none}
.btn.danger{background:var(--oranje);border-color:var(--oranje)}
/* Donkere knop: de enige plek waar lime mag leven op een lichte pagina. */
.btn.dark{background:var(--dark-ink);border-color:var(--dark-ink);color:var(--lime)}
.btn.dark:hover{background:#171d0c;filter:none}
.btn.whatsapp{background:var(--whatsapp);border-color:var(--whatsapp);color:#fff}
.btn.sm{padding:5px 12px;font-size:12px}
.btn.lg{padding:11px 22px;font-size:14px}
.btn.block{width:100%;justify-content:center}
.btn.icon{padding:6px 10px;font-size:13px}

/* ─── Formulier ──────────────────────────────────────────────── */
.f-row{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
.f-row > label{font-size:12px;font-weight:600;color:var(--txt-2)}
.f-row .hint{font-size:11.5px;color:var(--muted)}
.f-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:0 14px}
input[type=text],input[type=email],input[type=password],input[type=date],input[type=time],
input[type=number],input[type=search],input[type=tel],input[type=url],select,textarea{
  font-family:var(--body);font-size:13.5px;color:var(--txt);background:#fff;
  border:1px solid var(--line-2);border-radius:var(--r-s);padding:8px 10px;width:100%;
  transition:border-color .12s,box-shadow .12s;
}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--olive-l);box-shadow:0 0 0 3px rgba(111,160,60,.15);
}
input::placeholder,textarea::placeholder{color:#a8b096}
textarea{resize:vertical;min-height:80px;line-height:1.5}
select{appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%238a927c'/></svg>");background-repeat:no-repeat;background-position:right 10px center;padding-right:28px}
input[type=checkbox],input[type=radio]{width:auto;accent-color:var(--olive)}
.check{display:flex;align-items:center;gap:8px;font-size:13px;cursor:pointer;padding:3px 0}
.searchbox{position:relative;min-width:200px}
.searchbox input{padding-left:30px}
.searchbox::before{content:'🔍';position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:12px;opacity:.5;pointer-events:none}

/* ─── Kaart / paneel — dunne rand, royale padding, geen schaduw ─ */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r-l)}
.card.pad{padding:20px 24px}
.card-h{padding:16px 24px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--card-2);border-radius:var(--r-l) var(--r-l) 0 0}
.card-h .h2{margin-right:auto}
.card-b{padding:20px 24px}
.card-f{padding:12px 24px;border-top:1px solid var(--line);background:var(--card-2);border-radius:0 0 var(--r-l) var(--r-l)}

/* Sectievlak: groepeert kaarten/inhoud als één afgetekend component.
   Witte kaarten erbinnen springen eruit; nooit vlak-in-vlak-in-vlak. */
.vlak{background:var(--well);border:1px solid var(--line);border-radius:var(--r-l);padding:16px}
.vlak > .label{display:block;margin-bottom:10px}
.vlak .card,.vlak .kpi{border-color:var(--line-2)}
.grid{display:grid;gap:16px}
.grid.c2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}
.grid.c3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid.c4{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.row.tight{gap:6px}
.spacer{flex:1}
.stack{display:flex;flex-direction:column;gap:14px}

/* KPI-tegel: groot kerncijfer in Anton, label eronder gedempt in Inter. */
.kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 20px 16px}
.kpi .label{margin-bottom:10px}
.kpi .big{color:var(--ink)}
.kpi .kd{font-size:12px;margin-top:8px;color:var(--txt-2)}
.kpi .kd.up{color:var(--olive)}
.kpi .kd.down{color:var(--red)}
.kpi.accent{border-left:2px solid var(--olive)}

/* ─── Chips / badges ─────────────────────────────────────────── */
/* font-family staat er sinds jul 2026 expliciet bij. Reden: een filterchip
   die je kunt aan- en uitzetten ("Mijn klanten", de statusfilters van de
   Leadradar) hoort een <button> te zijn en geen <span> — alleen dan kom je
   er met Tab bij en leest een schermlezer de aan/uit-stand voor. Een
   <button> erft font-family niet van de pagina, dus zonder deze regel viel
   zo'n chip terug op het lettertype van de browser en stond hij scheef
   tussen de andere chips. Vorm en kleur veranderen niet. */
.chip{
  display:inline-flex;align-items:center;gap:5px;background:var(--card-2);
  border:1px solid var(--line-2);border-radius:999px;padding:2px 10px;
  font-family:var(--body);font-size:12px;font-weight:500;color:var(--txt-2);white-space:nowrap;
}
.chip.green{background:var(--green-bg);border-color:var(--green-line);color:#1e6b3f}
.chip.red{background:var(--red-bg);border-color:var(--red-line);color:#a4301f}
.chip.amber{background:var(--amber-bg);border-color:var(--amber-line);color:#b03d1c}
.chip.blue{background:var(--blue-bg);border-color:var(--blue-line);color:#255978}
.chip.purple{background:var(--purple-bg);border-color:var(--purple-line);color:#6a4a90}
.chip.solid{background:var(--olive);border-color:var(--olive);color:#fff}
.chip.btn-like{cursor:pointer}
.chip.btn-like:hover{border-color:var(--olive-l)}
.chip.on{background:var(--olive);border-color:var(--olive);color:#fff}
.dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;background:var(--muted)}

/* Avatar-initialen (klant/kandidaat) */
.ava{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;
  font-weight:600;font-size:12.5px;color:#fff;flex:0 0 34px;letter-spacing:.02em}
.ava.sm{width:26px;height:26px;flex:0 0 26px;font-size:10.5px;border-radius:6px}
.ava.lg{width:56px;height:56px;flex:0 0 56px;font-size:18px;border-radius:12px}
/* Avatar met foto of klantlogo */
.ava.foto{background:#fff;border:1px solid var(--line)}
.ava img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block}
.side .avatar{cursor:pointer;overflow:hidden}
.side .avatar img{width:100%;height:100%;object-fit:cover;display:block}

/* ─── Tabs ───────────────────────────────────────────────────── */
.tabs{display:flex;gap:2px;border-bottom:1px solid var(--line);flex-wrap:wrap;margin-bottom:18px}
.tabs .tab{
  background:none;border:none;border-bottom:2px solid transparent;padding:9px 14px;
  font-family:var(--body);font-size:13.5px;font-weight:500;color:var(--txt-2);cursor:pointer;
  display:flex;align-items:center;gap:7px;margin-bottom:-1px;
}
.tabs .tab:hover{color:var(--ink)}
.tabs .tab.on{color:var(--olive);border-bottom-color:var(--olive);font-weight:600}
.tabs .tab .cnt{background:var(--card-2);border:1px solid var(--line);border-radius:999px;font-size:11px;padding:0 6px;font-variant-numeric:tabular-nums}
.tabs .tab.on .cnt{background:var(--green-bg);border-color:var(--green-line);color:#1e6b3f}
/* Segment-schakelaar (bord/lijst) */
.seg{display:inline-flex;background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:2px}
.seg button{background:none;border:none;border-radius:999px;padding:5px 14px;font-size:12.5px;font-weight:500;color:var(--txt-2);cursor:pointer;font-family:var(--body)}
.seg button.on{background:#fff;color:var(--ink);font-weight:600;border:1px solid var(--line);margin:-1px}

/* ─── Fasrand — één kleurtaal door de hele app ────────────────────
   PROBLEEM: CRM.SALES_FASES, CRM.PHASES, CRM.INSTROOM en CRM.LEAD_STATUS
   hebben allemaal al een kleur, maar die werd alleen als stipje van 7px in
   een chip gebruikt. Je moest dus lézen om te zien waar iets stond, en op
   een lijst van tweehonderd relaties lees je niets.

   REGEL: een gekleurde rand links op een kaart of rij zegt overal in de app
   hetzelfde — WAAR STAAT DIT. De schaal loopt gelijk met de fasekleuren
   die er al zijn:

     grijs   nog niets gebeurd (Lead, Gebeld — geen gehoor)
     blauw   onderweg, vroeg  (Prospect, Voorgesteld, Nieuw)
     amber   onderweg, laat   (Voorstel gedaan, Offer, CV opgevraagd)
     groen   binnen / op koers (Afgerond, Contract getekend, Gestart)

   ROOD WINT. Is er iets dat vandaag rechtgezet moet worden — een gemist
   contactmoment, een vacature zonder één kandidaat — dan is de rand rood en
   zegt de fase even niets. Dat is bewust: op één rij past één signaal, en
   het dringendste hoort te winnen. (Dit is de regel die Plaatsingen sinds
   3 aug 2026 al volgde; hier staat hij nu één keer, voor iedereen.)

   ALLEEN LINKS, ALLEEN 3px. Een gekleurd vlak per rij maakt een lijst van
   tien onleesbaar; een randje links leest als een marge die je scant.
   Gebruik: zet de kleur in --fk en de klasse .frand op het element.
     <div class="card frand" style="--fk:#3d9968">
     <tr class="frand" style="--fk:…">        (kleurt de eerste cel)
   Of via de helper: CRM.ui.frand(kleur) → ` class="frand" style="--fk:…"`.
   NIET gebruiken op bordkaarten: daar staat de fase al als kleur boven de
   kolom, en dan zou dezelfde kleur twee keer hetzelfde zeggen.

   Een echte border en geen inset-schaduw: de rand moet ook zichtbaar blijven
   op een kaart met een getinte kop of voet, en die kindvlakken schilderen
   over een inset-schaduw heen. Een border van 3px in transparent houdt de
   breedte gelijk voor kaarten zónder kleur, dus een grid blijft uitlijnen.
   Bij tabellen kan het niet met een border — border-collapse poetst randen
   op een <tr> in sommige browsers weg — daar zit hij als inset-schaduw op
   de eerste cel. */
/* .frand.frand en niet .frand: modulebestanden laden ná base.css en zetten op
   hun kaarten vaak de shorthand `border:1px solid var(--line)`. Bij gelijke
   specificiteit wint de laatste regel, dus die shorthand veegde deze rand
   weg — precies wat er gebeurde op .ovcard (Vacatures). De klasse twee keer
   noemen tilt hem één stap omhoog en maakt hem onafhankelijk van laadvolgorde. */
.frand.frand{border-left:3px solid var(--fk,transparent)}
/* Op een kaart valt de 1px-rand links weg zodra we hem verbreden; zonder
   fasekleur valt hij daarom terug op de gewone randkleur, niet op niets.
   Drie klassen, zodat een module-eigen :hover op border-color hem niet
   overschrijft — anders springt de kleur weg zodra je de muis erop zet. */
.card.frand.frand,.card.frand.frand:hover{border-left-color:var(--fk,var(--line))}
tr.frand.frand{border-left:0}
tr.frand > td:first-child{box-shadow:inset 3px 0 0 var(--fk,transparent)}
/* Rood wint — zet .fr-let erbij zodra er iets is dat vandaag moet gebeuren. */
.frand.fr-let{--fk:var(--red)}
/* Afgesloten of vervallen: de kleur blijft, maar de rij dringt niet meer aan. */
.frand.fr-weg{--fk:var(--line-2)}

/* ─── Tabel ──────────────────────────────────────────────────── */
.tblwrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);background:var(--card)}
table.tbl{width:100%;border-collapse:collapse;font-size:13px}
table.tbl th{
  background:var(--card-2);text-align:left;padding:10px 16px;font-family:var(--body);
  font-weight:600;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2);
  border-bottom:1px solid var(--line);white-space:nowrap;position:sticky;top:0;
}
table.tbl th.sortable{cursor:pointer}
table.tbl th.sortable:hover{color:var(--olive)}
table.tbl td{padding:12px 16px;border-bottom:1px solid #eef0e4;vertical-align:middle}
table.tbl tbody tr:last-child td{border-bottom:none}
table.tbl tbody tr.clickable{cursor:pointer}
table.tbl tbody tr.clickable:hover{background:#f7f9f1}
table.tbl td.n,table.tbl th.n{text-align:right;font-variant-numeric:tabular-nums}
table.tbl .rowsub{font-size:11.5px;color:var(--muted)}

/* ─── Pijplijnbord (kolommen) ────────────────────────────────── */
.board{display:flex;gap:12px;align-items:flex-start;overflow-x:auto;padding:4px 28px 32px;min-height:60vh}
/* flex:1 0 268px in plaats van 0 0 268px: de kolommen mogen GROEIEN als ze
   met z'n allen passen (gefilterd bord, weinig fases) — dan blijft er rechts
   geen strook crème over. Krimpen mogen ze niet, anders zou een bord met elf
   fases zijn kolommen tot 150px persen; dan schuift het bord liever, precies
   zoals nu. max-width houdt een kolom leesbaar als er maar drie zijn. */
.bcol{flex:1 0 268px;width:268px;max-width:360px;background:var(--well-2);border:1px solid var(--line-2);border-radius:var(--r);display:flex;flex-direction:column;max-height:calc(100vh - 160px)}
.bcol.over{background:#dbe1c4;border-color:var(--olive-l)}
/* Bordkolommen mogen eruit springen: fasekleur als bovenrand + telbadge. */
.bcol-h{padding:10px 14px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:8px;
  border-top:3px solid var(--ph,var(--muted));border-radius:var(--r) var(--r) 0 0;background:#fff}
.bcol-h b{font-family:var(--body);font-weight:600;font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);flex:1;line-height:1.3}
.bcol-h .cnt{background:var(--ph,var(--muted));color:#fff;border-radius:999px;font-size:11px;font-weight:600;padding:1px 8px;font-variant-numeric:tabular-nums}
.bcol-h .sum{font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.bcol-b{padding:10px;display:flex;flex-direction:column;gap:8px;overflow-y:auto;flex:1;min-height:70px}
.bcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:12px 13px;
  cursor:grab;transition:border-color .12s;
}
.bcard:hover{border-color:var(--olive-l)}
.bcard:active{cursor:grabbing}
.bcard.drag{opacity:.4}
/* ─── Bordkaart 3A: "tint met kleurkiel" (Tjeerd, 4 aug 2026, na vijf
   ontwerprondes — de definitieve). Elke kaart leest de fasekleur van zijn
   kolom (--ph, die de kolommen al droegen) en maakt daar zelf twee dingen
   van: een lichte tint voor de kop (color-mix) en de vólle kleur als kiel
   van 3px links. Naam dónker op de tint — leesbaarheid was de harde eis —
   en compacter dan de vorige ronde ("de header is wat groot").
   Sales geeft --ph via css/sales.css (data-fase); Klanttrajecten en het
   Recruitment-leadbord zetten hem al op de kolom. Zonder --ph valt de kop
   terug op neutraal grijs — een kaart zonder fase liegt dan tenminste niet. */
.bcard.bck{padding:0;overflow:hidden;flex-shrink:0;
  border-left:3px solid var(--ph, var(--line-2))}
/* De hover kleurt de rand olijf — maar de kiel blijft van de fase. */
.bcard.bck:hover{border-left-color:var(--ph, var(--line-2))}
.bck .bc-kop{
  background:color-mix(in srgb, var(--ph, #9aa3b2) 18%, #fff);
  padding:6px 11px;display:flex;align-items:baseline;gap:8px;
}
.bck .bc-kop b{color:var(--ink);font-weight:700;font-size:13px;flex:1;min-width:0;line-height:1.4;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bc-dgn{font-size:10.5px;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.bc-dgn.let{color:var(--amber);font-weight:700}
.bc-dgn.rood{color:var(--red);font-weight:700}
.bck.vol .bc-kop{border-bottom:1px solid var(--line)}
.bck .bc-lijf{padding:7px 11px 9px}
.bck .bc-s{margin-top:0;font-size:11.5px}
.bck .bc-f{margin-top:7px}
.bck .bc-f:first-child{margin-top:0}

/* Alle kaarten dezelfde opzet — ook leads. Die hebben alleen minder in het
   lijf (eigenaar · plaats), geen aparte microvorm meer. */
.bcard .bc-t{display:flex;align-items:flex-start;gap:8px}
.bcard .bc-n{font-weight:600;font-size:13.5px;color:var(--ink);line-height:1.3;flex:1;min-width:0}
.bcard .bc-s{font-size:11.5px;color:var(--txt-2);margin-top:1px}
.bcard .bc-f{display:flex;align-items:center;gap:5px;flex-wrap:wrap;margin-top:8px}
.bcard .bc-f .chip{font-size:11px;padding:1px 8px}

/* ─── Detailpaneel (schuift in van rechts) ───────────────────── */
/* Let op: een gesloten scrim mag geen klikken opvangen, anders ligt er een
   onzichtbaar vlak over de app zodra één module ooit een paneel opende. */
.scrim{position:fixed;inset:0;background:rgba(25,35,20,.42);z-index:40;opacity:0;
  pointer-events:none;transition:opacity .18s;backdrop-filter:blur(2px)}
.scrim.on{opacity:1;pointer-events:auto}
.drawer{
  position:fixed;top:0;right:0;bottom:0;width:min(880px,94vw);background:var(--paper);
  z-index:41;box-shadow:var(--sh-3);display:flex;flex-direction:column;
  transform:translateX(100%);transition:transform .22s cubic-bezier(.4,0,.2,1);
}
.drawer.on{transform:none}
.drawer:not(.on){pointer-events:none}
/* Op het teamscherm staat iedereen naar hetzelfde detailpaneel te kijken.
   880px op 2000px liet daar driekwart scrim over; de velden binnenin staan
   in .f-grid (auto-fit 190px) en zetten die extra ruimte om in kolommen. */
@media (min-width:1900px){ .drawer{width:min(1180px,66vw)} }
.drawer-h{background:var(--card);border-bottom:1px solid var(--line);padding:16px 22px;display:flex;align-items:flex-start;gap:13px}
.drawer-h .x{margin-left:auto}
.drawer-b{flex:1;overflow-y:auto;padding:20px 22px 60px}
.drawer-f{border-top:1px solid var(--line);background:var(--card);padding:12px 22px;display:flex;gap:10px;align-items:center}

/* Modaal (klein, gecentreerd) */
.modal{
  position:fixed;z-index:41;top:50%;left:50%;transform:translate(-50%,-50%) scale(.97);
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  width:min(520px,94vw);max-height:90vh;overflow-y:auto;box-shadow:var(--sh-3);
  opacity:0;transition:opacity .16s,transform .16s;
  /* Onzichtbaar is niet weg. Zonder deze regel blijft er na élk gesloten
     venster een blok van 520px bij 90vh midden op het scherm liggen dat alle
     klikken opvangt — de knop eronder reageert dan niet meer, terwijl er niets
     te zien is. .scrim had dit al wel; .modal was vergeten. Gemeten: na één
     keer openen-en-sluiten gaf elementFromPoint op een knop midden in beeld
     `div.modal-b` in plaats van de knop. Dit raakte elk scherm. */
  pointer-events:none;
}
.modal.on{opacity:1;transform:translate(-50%,-50%)}
.modal-h{padding:18px 22px 0}
.modal-b{padding:16px 22px}
.modal-f{padding:14px 22px 18px;display:flex;gap:10px;justify-content:flex-end}

/* ─── Tijdlijn (activiteiten / notities) ─────────────────────── */
.tl{display:flex;flex-direction:column;gap:0;position:relative}
.tl-i{display:flex;gap:12px;padding:0 0 16px;position:relative}
.tl-i::before{content:'';position:absolute;left:13px;top:26px;bottom:0;width:1px;background:var(--line)}
.tl-i:last-child::before{display:none}
.tl-ic{width:27px;height:27px;border-radius:50%;background:var(--card);border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;font-size:12.5px;flex:0 0 27px;z-index:1}
.tl-c{flex:1;min-width:0;padding-top:3px}
.tl-c .tl-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.tl-c b{font-size:13px;font-weight:600}
.tl-c .tl-when{font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.tl-c .tl-txt{font-size:13px;color:var(--txt-2);margin-top:3px;white-space:pre-wrap;line-height:1.5}

/* ─── Lege staat / laden ─────────────────────────────────────── */
.empty{text-align:center;padding:46px 20px;color:var(--muted)}
/* Kleiner en lichter dan voorheen (30px / .5). De gestippelde cirkel die
   core meestuurt (◌) las op die maat als een laadspinner: je bleef wachten
   op inhoud die niet komt, precies in het scherm dat zegt dat er niets ís.
   Op 21px en .3 is het versiering bij de tekst eronder, geen belofte. */
.empty .ico{font-size:21px;line-height:1;opacity:.3;display:block;margin-bottom:10px}
.empty b{display:block;color:var(--txt-2);font-size:14.5px;font-weight:600;margin-bottom:5px}
.empty p{margin:0 auto;max-width:380px;font-size:13px;line-height:1.55}
.empty .btn{margin-top:16px}
.skel{background:linear-gradient(90deg,#eef1e7 25%,#f6f8f1 50%,#eef1e7 75%);background-size:200% 100%;
  animation:sk 1.3s infinite;border-radius:var(--r-s);height:14px}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}
.loading{padding:40px;text-align:center;color:var(--muted);font-size:13px}

/* Waarschuwingsblok */
.note{border-radius:var(--r-s);padding:11px 14px;font-size:13px;line-height:1.5;border:1px solid}
.note.info{background:var(--blue-bg);border-color:var(--blue-line);color:#255978}
.note.warn{background:var(--amber-bg);border-color:var(--amber-line);color:#8a5a1a}
.note.err{background:var(--red-bg);border-color:var(--red-line);color:#a4301f}
.note.ok{background:var(--green-bg);border-color:var(--green-line);color:#1e6b3f}

/* Voortgangsbalk */
.bar{height:7px;background:#e8ecdf;border-radius:99px;overflow:hidden}
.bar > i{display:block;height:100%;background:var(--olive-l);border-radius:99px;transition:width .3s}
.bar > i.green{background:var(--green)} .bar > i.amber{background:var(--amber)} .bar > i.red{background:var(--red)}

/* ─── Toast ──────────────────────────────────────────────────── */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);z-index:60;
  background:#fff;color:var(--ink);border:1px solid var(--line-2);border-radius:999px;
  padding:10px 20px;font-size:13.5px;font-weight:500;box-shadow:var(--sh-2);
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;max-width:90vw}
#toast.on{opacity:1;transform:translateX(-50%)}
#toast.err{background:#fbeae7;border-color:var(--red-line);color:#a4301f}
#toast.ok{background:var(--green-bg);border-color:var(--green-line);color:#1e6b3f}

/* ─── Login — het merkmoment waarmee elke werkdag begint ─────── */
#loginscreen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--dark-ink) 0%,#1c2c0d 55%,#2b4700 130%);
  padding:20px;z-index:50}
#loginscreen .lbox{background:var(--card);border-radius:var(--r-l);padding:40px 36px 32px;width:400px;max-width:94vw;
  box-shadow:var(--sh-3);border-top:4px solid var(--olive);animation:v-in .25s ease-out}
#loginscreen img{height:32px;margin-bottom:8px}
#loginscreen h1{font-family:var(--disp);font-weight:400;font-size:22px;letter-spacing:.5px;text-transform:uppercase;margin:12px 0 4px}
#loginscreen p.li{color:var(--txt-2);font-size:13px;margin:0 0 24px}
#loginscreen .err{color:var(--red);font-size:12.5px;min-height:17px;margin-top:9px}
#loginscreen .lnk{background:none;border:none;color:var(--txt-2);font-size:12px;cursor:pointer;padding:0;text-decoration:underline;font-family:var(--body)}

/* ─── Mobiel ─────────────────────────────────────────────────── */
.menubtn{display:none;background:none;border:1px solid var(--line-2);border-radius:var(--r-s);padding:6px 10px;font-size:15px;cursor:pointer}
@media (max-width:900px){
  /* Op desktop staat de zijbalk NAAST de pagina, dus de doorschijnende
     tint (rgba) leest prima tegen het lichte papier erachter. Op mobiel
     schuift dezelfde balk er als los paneel OVERHEEN — dan schijnt de
     kandidatenkaart/het bord erachter door en worden de kopjes links
     onleesbaar. Effen versie van dezelfde kleuren, alleen hier. */
  nav.side{
    transform:translateX(-100%);transition:transform .2s;box-shadow:var(--sh-3);
    background:linear-gradient(180deg,#cad4b7 0%,#b9c2a9 100%);
  }
  nav.side.open{transform:none}
  main.content{margin-left:0}
  .menubtn{display:block}
  .view{padding:16px 14px 60px}
  header.pagehead{padding:12px 14px}
  .board{padding:4px 14px 24px}
  .drawer{width:100vw}
}

/* Tekstknoppen (.lnk): "bewerk", "aanpassen", "verwijderen", "+ Afspraak".
   Hadden geen eigen stijl en vielen terug op de grijze browserknop
   (Tjeerd, 29 okt 2026: "de grijze knoppen vind ik niet mooi"). Specifiekere
   klassen (.ck-taakbewerk, #loginscreen .lnk …) gaan hier gewoon overheen. */
button.lnk, a.lnk{background:none;border:none;padding:0;margin:0;cursor:pointer;
  font:600 11.5px/1.4 var(--body);color:var(--olive,#3D6400);text-decoration:none}
button.lnk:hover, a.lnk:hover{text-decoration:underline}
button.lnk:focus-visible, a.lnk:focus-visible{outline:2px solid var(--olive,#3D6400);outline-offset:2px;border-radius:3px}
.kl-ag-acties .lnk[data-agweg]{color:var(--muted,#8a8f7a)}
.kl-ag-acties .lnk[data-agweg]:hover{color:var(--red,#b42318)}