/* Extra stijl voor de module klanten. Alleen deze module schrijft hier.
   Gebruik eerst de klassen uit base.css; voeg hier alleen toe wat echt mist. */

/* ─── Overzicht: klantkaartje ─────────────────────────────────── */
/* auto-fill i.p.v. auto-fit: één resultaat blijft kolombreed staan */
#kl_lijst .grid.c3{grid-template-columns:repeat(auto-fill,minmax(270px,1fr))}
/* Duidelijk gelaagde kaart (wens Tjeerd: verschillen moeten zichtbaar zijn):
   getinte kop, wit middenstuk, getinte voetstrook. De fasekleur stond hier
   als BOVENrand; sinds 3 aug 2026 staat hij links, want daar staat hij op
   elk ander scherm ook (.frand in base.css). Eén kleur op één plek, anders
   moet je per scherm opnieuw leren waar je moet kijken. */
.kl-kaart{cursor:pointer;transition:border-color .12s;border-color:var(--line-2);overflow:hidden}
.kl-kaart:hover{border-color:var(--olive-l)}
/* Zelfde kleurtaal als de borden (3A, Tjeerd 4 aug 2026): de kop is een
   lichte tint van de salesfase, de kiel links (via .frand, die de kaart al
   droeg) is de volle fasekleur. Zonder fase: neutraal grijs. */
.kl-kkop{background:color-mix(in srgb, var(--fk, #9aa3b2) 18%, #fff);
  border-bottom:1px solid var(--line-2);padding:13px 16px 11px}
.kl-kkop .chip{background:var(--card);border-color:var(--line-2)}
.kl-klijf .kl-stats{margin:0 0 0;padding:14px 0;border-top:0;border-bottom:0}
.kl-klijf{padding:0 16px}
.kl-klijf .kl-foot{background:var(--card-2);margin:0 -16px;padding:10px 16px;
  border-top:1px solid var(--line)}
.kl-kop{display:flex;align-items:flex-start;gap:11px}
.kl-naam{font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.3}
.kl-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0 12px;
  padding:12px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.kl-stats div{display:flex;flex-direction:column;gap:1px}
.kl-stats b{font-size:19px;font-weight:600;color:var(--ink);line-height:1.1}
.kl-stats span{font-size:11px;color:var(--muted);line-height:1.3}
.kl-foot{display:flex;align-items:center;justify-content:space-between;gap:8px}
.let{color:var(--amber);font-weight:600}

/* ─── Klantkaart: kop ─────────────────────────────────────────── */
.kl-hero{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
.kl-contact{margin-top:9px;font-size:13px;color:var(--txt-2);display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.kl-sep{color:var(--line-2)}
/* Eén gedempte feitenregel in plaats van een rij KPI-tegels. */
.kl-feiten{margin-top:5px}
.kl-feiten .num{color:var(--txt-2)}
/* Snelacties rechts in de kop */
.kl-snel{align-self:flex-start;justify-content:flex-end}

/* ─── Kaartweergave (kaart-engine uit js/source.js) ───────────── */
.kl-kaartwrap{min-height:60vh}

/* ─── Dossier met zijrail: links vast (gegevens · contactpersonen ·
   open taken), rechts de werkruimte met de tabs. De rail plakt onder
   de paginakop en scrollt zelf bij overloop, zodat contactpersonen en
   taken altijd in beeld blijven terwijl je rechts van tab wisselt. ─ */
.kl-dossier{display:grid;grid-template-columns:300px minmax(0,1fr);gap:16px;align-items:start}
/* De rail: losse witte blokken, geen extra vlak eromheen — Tjeerd wilde
   de rustige opzet van optie A houden; tint zit alleen in de kaartkoppen. */
.kl-rail{display:flex;flex-direction:column;gap:12px;
  position:sticky;top:84px;max-height:calc(100vh - 100px);overflow-y:auto;
  scrollbar-width:thin;min-width:0}
.kl-werk{min-width:0;display:flex;flex-direction:column;gap:14px}

/* Werkruimte: tab-inhoud gewoon op de pagina-achtergrond; de items
   (vacatures, kandidaatrijen, evaluaties) zijn witte kaarten met een
   getinte kopregel — dáár zit het gevraagde tintverschil. */
#k_tabinhoud{padding:2px}
.kl-tabkop{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;min-height:30px}
.kl-tabkop .h2{font-size:14px}

/* Railkaarten: iets compacter dan de gewone kaarten. */
.kl-railkaart > .card-h{padding:11px 16px}
.kl-railkaart > .card-b{padding:12px 16px 14px}
.kl-railkaart .h2{font-size:13.5px}
.kl-railknop{width:100%;margin-top:10px;justify-content:center}

/* Gegevens: label links, waarde rechts, alles op één regel. */
.kl-gg{display:flex;flex-direction:column;gap:7px}
.kl-gg-rij{display:flex;align-items:baseline;justify-content:space-between;gap:12px;font-size:12.5px}
.kl-gg-lbl{color:var(--muted);flex:0 0 auto}
.kl-gg-val{min-width:0;text-align:right;color:var(--txt)}

/* Rail: fase-wissel en team (aanvulling geïmporteerd oud ATS). */
button.kl-fasechip{font-family:var(--body);font-size:11.5px;padding:1px 9px;max-width:100%}
button.kl-fasechip .dot{width:7px;height:7px;flex-basis:7px}
.kl-fasesel{font-size:12px;padding:3px 6px;max-width:180px}
.kl-gg-w{cursor:text;border-radius:4px;padding:1px 6px;margin-right:-6px;
  border:1px solid transparent;display:inline-block}
.kl-gg-w:hover{background:var(--card-2);border-color:var(--line)}
.kl-gg-w:focus{outline:none;background:var(--card-2);border-color:var(--olive-l)}
.kl-gg-w.leeg{color:var(--muted);font-style:italic}
.kl-gg-inp{max-width:150px;font-size:12.5px !important;padding:3px 8px !important}

/* ─── Signalen ────────────────────────────────────────────────── */
ul.kl-sig{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px}
ul.kl-sig li{font-size:13px;color:var(--txt-2);line-height:1.5;padding-left:18px;position:relative}
ul.kl-sig li::before{content:'•';position:absolute;left:4px;top:-1px;color:var(--amber);font-size:15px}
ul.kl-sig b{color:var(--ink)}

/* ─── Vacatures: elk blok een witte kaart op het sectievlak, met een
   getinte kopregel (--card-2) en de uitklap met kandidaten op tint ── */
details.kl-vac{border:2px solid var(--line-2);border-radius:var(--r);margin-bottom:12px;background:var(--card)}
details.kl-vac:last-child{margin-bottom:0}
details.kl-vac > summary{
  list-style:none;cursor:pointer;padding:12px 14px;display:flex;align-items:center;gap:9px;
  flex-wrap:wrap;border-radius:var(--r);background:var(--card-2);
}
details.kl-vac > summary::-webkit-details-marker{display:none}
details.kl-vac > summary:hover{background:var(--well)}
details.kl-vac[open] > summary{border-bottom:1px solid var(--line);border-radius:var(--r) var(--r) 0 0}
details.kl-vac > summary b{font-size:13.5px;color:var(--ink)}
.kl-vac-b{padding:12px 14px}
.kl-vac-b .kl-kandlijst{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-s);padding:8px}

/* ─── Vacature: stand voor de website ─────────────────────────────
   Eén rustig kader bovenaan de vacature met de twee dingen die tussen de
   AM en de marketeer heen en weer gaan: is de informatie compleet, en
   staat de vacature online. Bewust smal en grijs — het is een stand van
   zaken, geen kaart op zichzelf. */
.kl-vweb{border:1px solid var(--line-2);border-radius:var(--r-s);
  background:var(--card-2);padding:10px 12px;margin:0 0 12px}
.kl-vweb-kop{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kl-vweb-bar{width:110px;flex:none}
.kl-vweb-m{margin-top:6px;line-height:1.5}
.kl-vweb-m a{color:var(--txt);text-decoration:underline}
.kl-vweb-m a:hover{color:var(--ink)}

/* Marketinginfo in het vacaturevenster: ingeklapt, met de teller in de
   samenvatting. Zo blijft het venster kort voor wie snel wil vastleggen,
   terwijl wél zichtbaar is hoeveel er nog mist. */
details.vacinfo{border:1px solid var(--line-2);border-radius:var(--r);
  background:var(--card-2);margin:0 0 4px}
details.vacinfo > summary{list-style:none;cursor:pointer;padding:11px 13px;
  display:flex;align-items:center;gap:10px;border-radius:var(--r)}
details.vacinfo > summary::-webkit-details-marker{display:none}
details.vacinfo > summary:hover{background:var(--well)}
details.vacinfo > summary b{font-size:13px;color:var(--ink)}
details.vacinfo > summary .meta{margin-top:2px}
details.vacinfo[open] > summary{border-bottom:1px solid var(--line);
  border-radius:var(--r) var(--r) 0 0}
.vacinfo-b{padding:12px 13px 0;background:var(--card);border-radius:0 0 var(--r) var(--r)}
.vacinfo-b textarea{min-height:58px}

/* ─── Kandidaatregels: witte kaartjes op het vlak ─────────────── */
.kl-kandlijst{display:flex;flex-direction:column;gap:6px}
a.kl-kand{
  display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r-s);
  color:var(--txt);text-decoration:none;border:1px solid var(--line-2);background:var(--card);
  transition:border-color .12s;
}
a.kl-kand:hover{border-color:var(--olive-l);text-decoration:none}
.kl-kand-wie{min-width:0;flex:1}
a.kl-kand b{font-size:13px;font-weight:600;display:block}
.kl-rec{min-width:56px;text-align:right}
.kl-when{min-width:104px;text-align:right}
.kl-groep{margin-bottom:20px}
.kl-groep:last-child{margin-bottom:0}
.kl-groep > .label{margin-bottom:6px}

/* ─── Contactpersonen — compact gestapeld in de rail.
   Hele rij klikbaar: opent het dossier (drawer) van de persoon. */
.kl-contacten{display:flex;flex-direction:column;margin-top:10px}
.kl-ct{display:flex;flex-direction:column;gap:2px;padding:9px 8px;border-radius:var(--r-s);
  cursor:pointer;border:1px solid transparent;transition:background .12s,border-color .12s}
.kl-ct:hover{background:var(--card-2);border-color:var(--line)}
.kl-ct + .kl-ct{margin-top:2px;position:relative}
.kl-ct + .kl-ct::before{content:'';position:absolute;left:8px;right:8px;top:-2px;height:1px;background:var(--line)}
.kl-ct b{font-size:13px}
.kl-ct-wie{min-width:0}
.kl-ct-links{margin-top:2px;font-size:12.5px;gap:7px}
.kl-ct-lc{white-space:nowrap;font-size:11.5px}
.kl-ctzoek{width:100%}

/* ─── Jarig deze maand — boven de contactpersonen.
   Groen, want dit is een kans en geen probleem (signalen zijn amber).
   Alleen dag en maand; het jaartal komt hier nooit in beeld.
   Rijen zijn klikbaar: ze openen hetzelfde dossier als de lijst eronder. */
.kl-jarig{margin-top:10px;padding:9px 10px;border-radius:var(--r-s);
  background:var(--green-bg);border:1px solid var(--green-line)}
.kl-jarig-kop{display:block;font-size:11px;font-weight:700;letter-spacing:.04em;
  text-transform:uppercase;color:#1e6b3f;margin-bottom:5px}
.kl-jarig-rij{display:flex;align-items:baseline;gap:8px;padding:3px 4px;margin:0 -4px;
  border-radius:var(--r-s);cursor:pointer;font-size:13px;color:var(--txt)}
.kl-jarig-rij:hover{background:rgba(255,255,255,.6)}
.kl-jarig-rij b{min-width:0;font-weight:600}
.kl-jarig-rij .num{margin-left:auto;font-size:11.5px;color:var(--txt-2);white-space:nowrap}
.kl-jarig-rij.nu .num{color:#1e6b3f;font-weight:700}

/* ─── Evaluaties: witte kaarten op het sectievlak ─────────────── */
.kl-evverloop{margin-bottom:14px}
.kl-evrij{display:flex;gap:14px;flex-wrap:wrap;margin-top:9px}
.kl-evtick{min-width:74px;display:flex;flex-direction:column;gap:4px}
.kl-evtick .num{font-size:13px;font-weight:600;color:var(--ink)}
.kl-eval{border:1px solid var(--line-2);border-radius:var(--r);padding:14px 16px;margin-bottom:12px;background:var(--card)}
.kl-eval:last-child{margin-bottom:0}
.kl-evcrit{display:flex;flex-direction:column;gap:8px}
.kl-evc{display:grid;grid-template-columns:190px 1fr 24px;align-items:center;gap:12px}
.kl-evc .num{text-align:right;font-weight:600;font-size:13px}
.kl-evtxt{margin-top:14px}
.kl-evtxt p{margin:4px 0 0;font-size:13px;color:var(--txt-2);line-height:1.55;white-space:pre-wrap}
.kl-evinput{display:grid;grid-template-columns:1fr 84px;align-items:center;gap:12px}
.kl-evinput > label{font-size:13px}

/* ─── Taken ───────────────────────────────────────────────────── */
.kl-taken{display:flex;flex-direction:column;gap:2px}
.kl-taak{display:flex;align-items:flex-start;gap:4px;border-radius:var(--r-s)}
.kl-taak:hover{background:var(--card-2)}
.kl-taak label{display:flex;align-items:flex-start;gap:10px;flex:1;min-width:0;padding:9px 10px;cursor:pointer}
.kl-taak b{font-size:13px;font-weight:600}
.kl-taak.klaar b{text-decoration:line-through;color:var(--muted);font-weight:500}
.kl-taak input{margin-top:3px}
/* Bewerken: pas zichtbaar bij hover, net als bij de tijdlijnregels
   (.tl-bewerk) — anders staat elke taak vol met knopjes. */
.kl-taakbewerk{background:none;border:none;padding:0;margin:11px 10px 0 0;font:600 11px/1 var(--body);
  color:transparent;cursor:pointer}
.kl-taak:hover .kl-taakbewerk{color:var(--muted)}
.kl-taakbewerk:hover{color:var(--olive,#3D6400)!important;text-decoration:underline}

/* ─── Mobiel: rail niet sticky maar gestapeld ───────────────────
   Volgorde: kop → contactpersonen (ingeklapt, JS toont eerste 3) →
   werkruimte met tabs → gegevens → taken. display:contents maakt de
   railkaarten losse stapel-items zodat ze een eigen plek krijgen. */
@media (max-width:900px){
  .kl-dossier{display:flex;flex-direction:column;gap:14px}
  .kl-rail{display:contents}
  #k_tabinhoud{padding:10px}
  /* Volgorde op naam in plaats van op positie: er kan een blok bij
     komen (komende afspraken) zonder dat de rest verspringt. */
  .kl-rail > .kl-r-ct{order:1}   /* contactpersonen */
  .kl-rail > .kl-r-ag{order:2}   /* komende afspraken */
  .kl-rail > .kl-r-nt{order:4}   /* notities */
  .kl-rail > .kl-r-gg{order:5}   /* gegevens */
  .kl-rail > .kl-r-tk{order:6}   /* open taken */
  .kl-rail > .kl-r-af{order:7}   /* commerciële afspraken (alleen Tjeerd) */
  /* width:100% expliciet: anders rekken de blokken tot hun inhoud
     en krijgt de hele pagina horizontale scroll of halve kaarten. */
  .kl-werk{order:3;width:100%}
  .kl-rail > .card{width:100%}
  /* Kandidaatrij: naam op een eigen regel zodat hij niet tot een
     enkele letter wordt afgekort naast de chips. */
  a.kl-kand{flex-wrap:wrap}
  .kl-kand-wie{flex:1 1 100%}
  .kl-when{min-width:0}
}

@media (max-width:700px){
  .kl-evc{grid-template-columns:1fr 60px}
  .kl-evc .sub{grid-column:1/-1}
  .kl-rec{display:none}

  /* Filterbalk: twee gelijke kolommen in plaats van een scheve trap van
     selects die elk hun eigen breedte kiezen. */
  .kl-fil{gap:8px}
  .kl-fil > .searchbox{flex:1 1 100% !important;max-width:none !important;min-width:0}
  .kl-fil > select{flex:1 1 calc(50% - 4px);min-width:0;text-overflow:ellipsis}
  .kl-fil > .spacer{display:none}
  .kl-fil > .chip{flex:0 0 auto}
  .kl-fil > .meta{margin-left:auto}
}

/* Rail: notities — gezamenlijk geheugen, altijd in beeld */
.rn-item{padding:8px 0;border-bottom:1px solid var(--line);cursor:pointer}
.rn-item:last-of-type{border-bottom:none}
.rn-item .rn-kop{font-size:11px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--muted);margin-bottom:2px}
/* Drie regels en dan afkappen: een uitgebreid gespreksverslag maakte de
   hele zijbalk metershoog. De volledige tekst staat één klik verderop in
   de tijdlijn. */
.rn-item .rn-tekst{font-size:12.5px;line-height:1.45;word-break:break-word;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rn-item .meta{margin-top:3px}
.kl-uitkomsten{flex-wrap:wrap;margin-bottom:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
#rn_tekst{font-size:12.5px;min-height:52px}

/* ─── Inplannen-venster ────────────────────────────────────────── */
/* Soort afspraak: kleine keuzerij die de standaarden zet. */
.kl-soorten{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.kl-soorten .chip{font-size:11.5px}

/* Deelnemers: contactpersonen van deze klant, aanvinkbaar. */
.kl-deelnemers{
  border:1px solid var(--line);border-radius:var(--r);
  max-height:190px;overflow-y:auto;margin-bottom:8px;background:var(--card)
}
.kl-deel{display:flex;align-items:center;gap:10px;padding:8px 10px;cursor:pointer;
  border-bottom:1px solid var(--line)}
.kl-deel:last-child{border-bottom:none}
.kl-deel:hover{background:var(--card-2)}
.kl-deel input{flex:0 0 auto;margin:0}
.kl-deel-wie{display:flex;flex-direction:column;gap:1px;min-width:0;flex:1}
.kl-deel-wie b{font-size:13px}
.kl-deel-wie .meta{font-size:11.5px}
/* Zonder e-mailadres: zichtbaar maar niet uit te nodigen. */
.kl-deel.uit{cursor:default;opacity:.5}
.kl-deel.uit:hover{background:transparent}

/* Opvolgtaak-datum verschijnt pas als je hem aanvinkt. */
.kl-opvolg[hidden]{display:none}

/* ─── Rail: komende afspraken uit Outlook ──────────────────────── */
.kl-afspraken{display:flex;flex-direction:column;gap:2px}
.kl-afspraak{padding:7px 0;border-bottom:1px solid var(--line)}
.kl-afspraak:last-child{border-bottom:none}
.kl-afspraak b{font-size:12.5px;display:block}
.kl-afspraak .meta{margin-top:2px}

/* ═══════════════════════════════════════════════════════════════
   MAIL (Outlook) — gedeelde stijl
   Hoort bij CRM.mailUI in js/klanten.js en wordt óók door de
   kandidatenkaart gebruikt; daarom één keer beschreven in plaats
   van twee keer. (Zie VERZOEK AAN CORE onderaan js/klanten.js.)
   ═══════════════════════════════════════════════════════════════ */
.ml-kaart .ml-adres{max-width:200px}
.ml-b{padding-top:6px;padding-bottom:6px}
.ml-leeg{margin:8px 0}
.ml-lijst{display:flex;flex-direction:column}
.ml-i{display:block;padding:11px 0;border-bottom:1px solid var(--line);
  color:inherit;text-decoration:none}
.ml-i:last-child{border-bottom:none}
a.ml-i:hover{background:var(--card-2)}
a.ml-i:hover b{text-decoration:underline}
.ml-i b{display:block;font-size:13px;font-weight:600}
.ml-i .meta{margin-top:2px;font-size:11.5px}
/* Fragment gedempt en kort: mail is gevoelig, dit is een geheugensteun. */
.ml-frag{margin:5px 0 0;font-size:12px;line-height:1.5;color:var(--muted);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ml-tekst{min-height:220px;line-height:1.55}
.ml-vanaf{margin:10px 0 0}
/* Opstelvenster als echte mail (js/klanten.js CRM.mailUI.opstellen, 3 nov 2026) */
.modal:has(.mv){width:min(880px,96vw);max-height:94vh}
.mv{display:flex;flex-direction:column}
.mv-top{display:flex;align-items:center;gap:12px;padding:14px 22px;border-bottom:1px solid var(--line);background:var(--well)}
.mv-top b{font-size:15px}
.mv-sj{display:flex;align-items:center;gap:8px;margin:0}
.mv-sj select{max-width:300px}
.mv-kop{padding:0 22px}
.mv-r{display:flex;align-items:center;gap:12px;border-bottom:1px solid var(--line);min-height:44px}
.mv-l{width:56px;flex:0 0 56px;color:var(--muted);font-size:14px;margin:0}
.mv-van{font-size:14px;color:var(--txt)}
.modal .mv-r input{flex:1;border:0;background:transparent!important;box-shadow:none!important;border-radius:0!important;padding:10px 0;font-size:14px;outline:none}
.modal .mv-ond input{font-size:17px;font-weight:600}
.mv-blad{padding:22px 22px 26px;background:#fff;font-family:Arial,Helvetica,sans-serif}
.mv-tekst{display:block;width:100%;border:0;resize:none;outline:none;box-shadow:none;padding:0;background:none;
  font-family:Arial,Helvetica,sans-serif;font-size:14px;line-height:1.5;color:#1a1f0a;min-height:260px;overflow:hidden}
.mv-hk{margin-top:14px}
.mv-hk img{max-width:100%;height:auto}
.mv-f{display:flex;align-items:center;gap:10px;padding:12px 22px 16px;border-top:1px solid var(--line);
  position:sticky;bottom:0;background:var(--card)}
@media (max-width:700px){.mv-top{flex-wrap:wrap}.mv-sj{width:100%}.mv-sj select{max-width:none;flex:1}.mv-hk table{width:100%!important}}

/* ═══════════════════════════════════════════════════════════════
   BESTANDEN (OneDrive / SharePoint) — gedeelde stijl
   Hoort bij CRM.bestandenUI in js/klanten.js en wordt óók door de
   kandidatenkaart gebruikt. Zelfde rustige regelstijl als de mail.
   ═══════════════════════════════════════════════════════════════ */
/* In de tab Documenten staat het blok los onder de tabel; in een .stack
   (kandidatenkaart) regelt de gap de afstand al. */
#kl_bestanden{margin-top:18px}
.ob-kaart .ob-term{max-width:200px}
.ob-b{padding-top:6px;padding-bottom:10px}
.ob-leeg{margin:8px 0}
.ob-lijst{display:flex;flex-direction:column}
.ob-i{display:block;padding:10px 0;border-bottom:1px solid var(--line);
  color:inherit;text-decoration:none}
.ob-i:last-child{border-bottom:none}
a.ob-i:hover{background:var(--card-2)}
a.ob-i:hover b{text-decoration:underline}
.ob-i b{display:block;font-size:13px;font-weight:600}
.ob-i .meta{margin-top:2px;font-size:11.5px}
.ob-meer{margin-top:12px}

/* ═══════════════════════════════════════════════════════════════
   COMMERCIËLE AFSPRAKEN (crm_afspraken)
   Railkaart met de samenvatting + het beheerpaneel in de drawer.
   Alleen zichtbaar achter CRM.canSeeMoney(); de stijl leunt bewust
   op de bestaande .kl-gg-rijen zodat de kaart niet opnieuw ontworpen
   hoeft te worden.
   ═══════════════════════════════════════════════════════════════ */
.kl-af-leeg{margin:0 0 10px;font-size:12.5px;line-height:1.5}
.kl-af-note{margin:0 0 10px;font-size:12.5px}
.kl-af-ouder{margin:10px 0 0;font-size:11.5px}

/* Beheerpaneel in de drawer: losse secties, rustig gestapeld. */
.kl-af-intro{margin:0 0 16px;max-width:64ch}
.kl-af-sec{margin-bottom:14px}
.kl-af-sec:last-child{margin-bottom:0}
.kl-af-uitleg{margin:0 0 12px;max-width:70ch;line-height:1.55}

/* Fee-regels: functiegroep · percentage · weg. Op smal onder elkaar. */
.kl-af-regels{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
/* Vier kolommen, want de regel heeft vier velden: functie, soort, bedrag
   en het kruisje. Stond op drie, waardoor het tariefveld van de regel af
   viel en het kruisje op een eigen regel belandde (6 aug 2026). Bij
   uitzenden vervalt de soortkeuze en schuift de rest op. */
.kl-af-regel{display:grid;grid-template-columns:minmax(0,1fr) 150px 92px auto 34px;gap:8px;align-items:center}
.kl-af-uitzend .kl-af-regel{grid-template-columns:minmax(0,1fr) 92px auto 34px}
.kl-af-eenheid{font-size:12px;color:var(--muted);white-space:nowrap}
.kl-af-regel input[type=number]{text-align:right}
.kl-af-regel .btn{padding:0;height:34px;line-height:1}
.kl-af-std{max-width:260px;margin-bottom:0}

/* Voorbeeldberekening: de invoer bovenaan, de opbouw eronder. */
.kl-af-vbin{margin-bottom:14px}
.kl-af-tbl td{padding:8px 12px;font-size:13px}
.kl-af-tbl tbody tr:last-child td{border-bottom:none}
.kl-af-buiten td{color:var(--muted);text-decoration:line-through}
.kl-af-buiten td .meta{text-decoration:none}
.kl-af-tot td{border-top:1px solid var(--line);font-weight:600}
.kl-af-fee td{background:var(--card-2);font-weight:700}
.kl-af-waarom{margin:10px 0 0;line-height:1.55}

/* Dienstverleningsknoppen: elke soort is een eigen afspraak, geen
   exclusieve keuze. ✓ = voor die soort ligt al een afspraak vast. */
.kl-af-soortrij{margin-bottom:14px}
.kl-af-soortrij .seg{flex-wrap:wrap;row-gap:2px}
.kl-af-soortuitleg{margin:8px 0 0;max-width:64ch;line-height:1.5}
.kl-af-vinkje{color:var(--olive);font-weight:700}
#af_soortnote .kl-af-note{margin:10px 0 0}

/* Overeenkomst inlezen: plak-vak, gevonden afspraken, vastleggen. */
.kl-af-import textarea{min-height:150px;font-size:12.5px;line-height:1.5}
.kl-af-impknoppen{display:flex;gap:8px;margin-top:10px}
.kl-af-impuit:empty{display:none}
.kl-af-impuit{margin-top:14px}
.kl-af-impkop{margin:14px 0 7px}
.kl-af-impkop:first-child{margin-top:0}
.kl-af-impuit .kl-af-tbl td:last-child{white-space:nowrap;text-align:right}
.kl-af-impvw{margin:8px 0 0;line-height:1.5}
.kl-af-impmis{margin:12px 0 0;line-height:1.5}

/* Historie: één regel per eerdere afspraak, met looptijd. */
.kl-af-hist{display:flex;flex-direction:column}
.kl-af-hrij{display:flex;align-items:center;gap:10px;padding:10px 0;
  border-bottom:1px solid var(--line)}
.kl-af-hrij:last-child{border-bottom:none}
.kl-af-hrij b{display:block;font-size:13px;font-weight:600}
.kl-af-hrij .meta{margin-top:2px;font-size:11.5px}

@media (max-width:700px){
  .kl-af-regel{grid-template-columns:minmax(0,1fr) 74px auto 34px;gap:6px}
  .kl-af-regel select{grid-column:1/-1;min-width:0}
  .kl-af-uitzend .kl-af-regel{grid-template-columns:minmax(0,1fr) 74px auto 34px}
  .kl-af-std{max-width:none}
}

/* ─── O&O-sessies op de klantkaart ────────────────────────────────
   Onder de vacatures, want één sessie gaat geregeld over meerdere vacatures
   tegelijk. Rustige rijen, geen kaarten: het is een agenda, en de vraag
   die je eraan stelt is "wanneer, voor welke functies, waar, en zitten er al
   genoeg mensen in". Alleen dat laatste krijgt kleur, en alleen als het
   goed is — vier is het streefgetal, minder is normaal onderweg.

   De rij was eerst één grote knop. Nu er losse doorkliks in zitten (naar de
   vacature, naar elke kandidaat) kan dat niet meer: een knop in een knop is
   geen geldige HTML en toetsenbordnavigatie loopt erop vast. Het is dus een
   gewone rij met een paar duidelijke klikbare stukken. */
.kl-oo{margin-top:26px;padding-top:22px;border-top:1px solid var(--line)}
.kl-oolijst{display:flex;flex-direction:column;gap:1px}
.kl-oohint{margin:0;max-width:62ch}
.kl-oorij{display:grid;grid-template-columns:96px minmax(0,1fr) auto auto;align-items:start;
  gap:6px 14px;padding:11px 4px;border-bottom:1px solid var(--line)}
.kl-oorij:last-child{border-bottom:none}
.kl-oorij:hover{background:var(--card-2)}
/* Geweest = klaar; wel leesbaar houden, want je kijkt er nog naar terug. */
.kl-oorij.weg{opacity:.6}

.kl-oodat{display:flex;flex-direction:column;gap:1px;font-size:12.5px;font-weight:600;
  color:var(--txt-2);white-space:nowrap;padding-top:2px}
.kl-ootijd{font-weight:600;color:var(--muted)}

.kl-oowat{display:flex;flex-direction:column;gap:3px;min-width:0}
.kl-oowat .meta{font-size:11.5px}
/* Meerdere functies in één sessie: als losse klikbare titels met een
   punt-scheiding die de CSS tekent — zo hoeft de JS geen scheidingsteken
   tussen twee knoppen te zetten. */
.kl-oovacs{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-width:0}
.kl-oovac{background:none;border:none;padding:0;font-family:var(--body);font-size:13px;
  font-weight:600;color:var(--ink);cursor:pointer;text-align:left}
.kl-oovac:hover{color:var(--olive);text-decoration:underline}
.kl-oovac + .kl-oovac::before{content:'·';margin-right:6px;color:var(--muted);
  text-decoration:none;display:inline-block}
/* Sessie van vóór de vacaturekoppeling: wel tonen, niet klikbaar. */
.kl-oolos{font-size:13px;font-weight:600;color:var(--muted)}

.kl-oomensen{display:flex;flex-wrap:wrap;gap:4px 6px;margin-top:2px}
.kl-ookand{background:var(--card-2);border:1px solid var(--line);border-radius:999px;
  padding:2px 9px;font-family:var(--body);font-size:11.5px;font-weight:600;color:var(--txt-2);
  cursor:pointer}
.kl-ookand:hover{border-color:var(--olive);color:var(--olive)}

.kl-ooaantal{font-size:13px;font-weight:700;color:var(--muted);white-space:nowrap;padding-top:2px}
.kl-ooaantal.goed{color:var(--olive)}
/* De wijzig-knop is aanwezig maar stil: je leest de agenda vaker dan je hem
   verandert. */
.kl-oobew{opacity:.6}
.kl-oorij:hover .kl-oobew, .kl-oobew:focus-visible{opacity:1}

/* De vinkjes in het plan-venster: één per regel, zodat een lange functietitel
   niet half achter de volgende valt. */
.kl-ooextra{display:flex;flex-direction:column;gap:2px}
.kl-ooextra .check .meta{font-size:11px}

@media (max-width:700px){
  /* Smal scherm: datum boven, teller en knop op één regel eronder. Vier
     kolommen naast elkaar wordt hier onleesbaar. */
  .kl-oorij{grid-template-columns:minmax(0,1fr) auto;align-items:center}
  .kl-oodat{grid-column:1/-1;flex-direction:row;gap:8px}
  .kl-oowat{grid-column:1/-1}
  .kl-oobew{opacity:1;justify-self:end}
}

/* Het invoerveld staat ónder de notities: eerst lezen wat er is, dan pas
   schrijven. Een streep ertussen zodat het niet als volgende notitie leest. */
.kl-ntinvoer{margin-top:12px;padding-top:12px;border-top:1px solid var(--line)}
.kl-r-nt .card-b > #rn_lijst:empty + .kl-ntinvoer{margin-top:0;padding-top:0;border-top:none}

/* Het uitkomst-invulveld dat na een klik op Gebeld/Geen gehoor/… opent. */
.kl-uitveld{margin:0 0 10px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--well-2, #f7f8ef)}
.kl-uitveld textarea{width:100%;resize:vertical}

/* De bewerk-knop in tijdlijnregels: aanwezig maar stil, tot je hem zoekt. */
.tl-bewerk{font-size:11px;color:var(--muted);margin-left:auto;padding-left:8px}
.tl-i:hover .tl-bewerk{color:var(--olive,#3D6400)}

/* Meerdere afspraken naast elkaar in de rail (4 aug 2026): een kopregeltje
   per soort en een dun scheidsel ertussen. */
.kl-af-soortkop{margin:2px 0 7px}
.kl-af-scheiding{border-top:1px solid var(--line);margin:12px 0}

/* Vervulde/gesloten vacatures op de klantkaart: gedempt — klaar werk
   vraagt geen aandacht (Tjeerd, 4 aug 2026). */
.kl-vac-stil > summary{opacity:.55}
.kl-vac-stil[open] > summary{opacity:.75}

/* De fasechip in de kop is een knop — zelfde wissel als in de zijbalk. */
.kl-fasewissel{background:none;border:none;padding:0;cursor:pointer;display:inline-flex;align-items:center;gap:4px;font:inherit}
.kl-fasepijl{font-size:9px;color:var(--muted)}
.kl-fasewissel:hover .kl-fasepijl{color:var(--olive,#3D6400)}

/* Sleepdoel voor de overeenkomst: de importkaart licht op zodra er een
   bestand boven hangt. */
.kl-drop{outline:2px dashed var(--olive,#3D6400);outline-offset:-2px;background:#f2f6e6}
/* De vormkeuze in een fee-regel (%, € vast, × maandsalaris). */
.kl-af-regel select{width:100%;min-width:0}

/* Gekozen chip (met-wie, snelkeuzes): de klasse .sel bestond wel in de
   code maar had nergens een stijl — klikken "deed niets" terwijl de
   selectie onder water gewoon stond (Tjeerd, 5 aug 2026). Globaal, want
   ook de datum-snelkeuzes in het taakvenster gebruiken .sel. */
.chip.btn-like.sel{background:var(--olive,#3D6400);border-color:var(--olive,#3D6400);color:#fff}

/* Vacatureblokken op de relatiekaart duidelijker van elkaar gescheiden
   (naam: Tjeerd, 5 aug 2026: "de omlijning een stuk dikgedrukter") en de
   functietitel als doorklik naar de vacaturekaart. */
details.kl-vac{box-shadow:var(--sh-2)}
.kl-vaclink{cursor:pointer}
.kl-vaclink:hover{color:var(--olive);text-decoration:underline}
/* Aanpassen/verwijderen onder een komende afspraak (29 okt 2026) */
.kl-ag-acties{display:flex;gap:12px;margin-top:3px;font-size:11.5px}
.kl-ag-acties .lnk{font-size:11.5px}