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

/* ─── Overzicht ───────────────────────────────────────────────── */
.kd-vol{display:flex;align-items:center;gap:9px;min-width:132px}
.kd-vol .bar{flex:1}
.kd-let{color:var(--red);font-weight:600}
.kd-warn{color:var(--amber);font-weight:600}

/* Sterren: functioneel, gedempt olijf — geen fel geel. */
.kd-ster{color:var(--olive);opacity:.65;letter-spacing:1.5px;font-size:13px;white-space:nowrap;font-weight:400}

/* Bron-chip "Import oud ATS" in de lijst: 235 stuks — bewust bijna
   onzichtbaar (gedempt, gestippelde rand) zodat er geen muur ontstaat. */
.kd-bronimp{display:inline-block;font-size:10px;line-height:1.5;padding:0 7px;margin-left:4px;
  color:var(--muted);border:1px dashed var(--line);border-radius:999px;
  vertical-align:1px;white-space:nowrap;opacity:.85}

/* ─── Gekwalificeerde voorraad (regel boven de lijst) ──────────
   Eén rustige regel: hoeveel er klaarstaan, wie er te lang niet gesproken
   is en de doorklik. Was een blok van vier regels hoog met een cijfer in
   Anton; dat nam meer ruimte dan de lijst waar het over gaat. De
   uitsplitsing per functie of woonplaats zit er nog gewoon onder, maar
   opgevouwen. Eén accent op dit scherm: de olijfrand links. */
.kd-vr{border-left:2px solid var(--olive);padding:12px 16px}
.kd-vrregel{gap:8px 10px;align-items:baseline}
.kd-vrregel > .label{margin:0}
/* Het kerncijfer blijft Inter (Anton is voor .h1/.big) — het valt op door
   gewicht en formaat, niet door een tweede lettertype. */
.kd-vrn{font-size:19px;font-weight:700;color:var(--ink);line-height:1}
.kd-vrtekst{font-size:12.5px;color:var(--txt-2);line-height:1.45}
.kd-vruit{margin-top:12px;border-top:1px solid var(--line);padding-top:12px}
.kd-vruit[hidden]{display:none}
.kd-vrchips{margin-top:10px}
.kd-vrchip{font-family:var(--body);font-weight:500}
.kd-vrchip .num{font-weight:700;margin-right:4px}
.kd-vrleegchip{border-style:dashed;color:var(--txt-2)}
.kd-vrnoot{margin:12px 0 0;line-height:1.55;max-width:82ch}

/* ─── Kolom "Laatst gesproken" ────────────────────────────────
   Nooit gesproken is geen groot getal maar een ander soort regel: gedempt
   en cursief, met eronder hoe lang die persoon al wacht. Zo zie je in één
   oogopslag het verschil tussen een gat in het proces en een belletje. */
.kd-stilte{min-width:132px}
.kd-nooit{font-style:italic}
.kd-stilte .rowsub{margin-top:2px}

/* ─── Doorverwijzing naar het uitgebreide zoeken (Sourcing) ─────
   Bewust een gewone ghost-knop en geen eigen kleur: het is een zijpad, niet
   de hoofdactie van dit scherm. Het pijltje zegt al dat je hier weggaat. */
.kd-uitgebreid{white-space:nowrap}
/* Een select is zo breed als zijn langste optie. Zonder deze grens duwt het
   statusfilter de sortering en de telling naar een tweede regel. */
.kd-statussel{width:auto;max-width:210px}

/* ─── Kaart: kop ──────────────────────────────────────────────── */
.kd-hero{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap}
/* Foto met een klein wijzig/toevoeg-knopje in de hoek — zelfde soort
   overlay als een avatar-editor elders. De ava zelf toont initialen op
   kleur zolang er geen foto is (CRM.avaKleur), zodat het knopje nooit op
   een kaal wit vlak zweeft. */
.kd-fotowrap{position:relative;flex:0 0 56px}
.kd-fotowrap .ava{color:#fff;font-weight:700}
.kd-fotobtn{position:absolute;right:-6px;bottom:-6px;width:22px;height:22px;border-radius:50%;
  border:2px solid var(--card,#fff);background:var(--olive,#3d6400);color:#fff;font-size:12px;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.kd-fotobtn:hover{filter:brightness(1.1)}
.kd-contact{margin-top:10px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:13px}
.kd-meter{flex:0 0 236px;min-width:200px;border-left:1px solid var(--line);padding-left:18px}
.kd-meter b{font-size:14px;color:var(--ink);min-width:38px;text-align:right}
.kd-kolommen{align-items:start}
/* Waar normaal de voortgangsmeter staat, staat op een geanonimiseerde kaart
   de uitleg. Even breed, zodat de kop niet verspringt, en zonder kleur —
   het is geen waarschuwing maar een vastgestelde situatie. */
.kd-anonmeter{flex:0 0 260px}
.kd-anontekst{margin:6px 0 0;font-size:12.5px;line-height:1.55;color:var(--txt-2)}

/* Kandidaat zonder naam (net doorgeschoten sollicitant): geen leeg gat
   in de titel, maar dezelfde "invullen…"-toon als de velden eronder. */
.kd-geennaam{font-family:var(--body);font-weight:500;font-size:18px;letter-spacing:0;
  text-transform:none;color:var(--muted);font-style:italic}

/* ─── "Wat mist nog" — strip onder de kop ─────────────────────── */
.kd-mist{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.kd-mist > .label{margin:0}
.kd-mist[hidden]{display:none}
.kd-mistchip{cursor:pointer;font-family:var(--body);font-weight:600;font-size:12px;
  line-height:1.6;padding:3px 11px;border-style:dashed;color:var(--txt-2)}
.kd-mistchip:hover{border-style:solid;border-color:var(--olive-l);color:var(--olive);background:#fff}
/* Eén chip mag zich onderscheiden: het CV inlezen vult meerdere gaten in
   één handeling, de andere chips openen één veld. Vandaar een doorgetrokken
   rand in plaats van de streepjes — geen tweede kleur op het scherm. */
.kd-mistchip.sterk{border-style:solid;border-color:var(--olive);color:var(--olive);background:#fff}
.kd-mistchip.sterk:hover{background:var(--card-2)}
/* Kort oplichten waar je heen springt — anders zoek je het veld alsnog. */
.kd-wijs{background:var(--card-2);border-color:var(--olive-l) !important;
  box-shadow:0 0 0 3px rgba(111,160,60,.15)}

/* ─── Videocall-venster ───────────────────────────────────────── */
.kd-vcteams{margin-top:12px;font-weight:600}
.kd-vcgeenmail{margin-top:10px}
.kd-vcgeenmail > span{display:block}
.kd-vcgeenmail .btn{margin-top:9px}
.kd-vchint{margin:14px 0 0;line-height:1.5}
.kd-teamsl{margin-left:6px;vertical-align:1px}

/* ─── Veldenlijst (inline bewerkbaar) ─────────────────────────── */
.kd-velden{display:flex;flex-direction:column;gap:1px}
.kd-veld{display:grid;grid-template-columns:150px 1fr;align-items:baseline;gap:12px;
  padding:7px 0;border-bottom:1px solid #eef0e4;font-size:13px}
.kd-veld:last-child{border-bottom:none}
.kd-veld > .label{margin:0}
.kd-w{cursor:text;border-radius:4px;padding:2px 6px;margin-left:-6px;
  border:1px solid transparent;display:inline-block;min-width:60px;color:var(--txt)}
.kd-w:hover{background:var(--card-2);border-color:var(--line)}
.kd-w:focus{outline:none;background:var(--card-2);border-color:var(--olive-l)}
.kd-w.leeg{color:var(--muted);font-style:italic}
.kd-inp{max-width:280px;padding:4px 8px !important;font-size:13px !important}

/* ─── Ster-beoordeling in de kop ──────────────────────────────── */
.kd-sterren{display:flex;align-items:center;gap:2px;margin-top:6px}
.kd-sterren .meta{margin-left:8px}
.kd-sterbtn{background:none;border:none;cursor:pointer;font-size:19px;line-height:1;padding:1px 2px;
  color:var(--line-2);transition:color .12s,transform .08s}
.kd-sterbtn.aan{color:var(--olive);opacity:.8}
.kd-sterbtn:hover{transform:scale(1.12);color:var(--olive)}

/* Merkteken bij een veld dat uit het CV is overgenomen. De rest van de
   oude verrijkings-CSS (aanvullingen/conflicten) is weg: dat venster staat
   nu in js/cvparse.js met een eigen stylesheet. */
.kd-cvchip{font-size:10.5px;padding:0 7px;vertical-align:middle}

/* ─── CV ──────────────────────────────────────────────────────── */
.kd-cvlijst{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.kd-cvrij{display:grid;grid-template-columns:1fr auto;gap:2px 14px;padding:8px 0;border-bottom:1px solid #eef0e4}
.kd-cvrij:last-child{border-bottom:none}
.kd-cvrij b{font-size:13px}
.kd-cvrij .sub{grid-column:1;grid-row:2}
.kd-cvrij .meta{grid-column:2;grid-row:1/3;align-self:center}

/* ─── Certificaten met geldigheidsdatum ───────────────────────────
   Geen pillenrij meer: er hoort een datum en een status bij, en dat past
   niet in een chip zonder onleesbaar te worden. Zelfde rijopmaak als de
   werkervaring erboven, zodat het blok één geheel blijft. */
.kd-certs{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.kd-cert{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  padding:8px 0;border-bottom:1px solid #eef0e4}
.kd-cert:last-child{border-bottom:none}
.kd-cert b{font-size:13px;flex:1 1 auto;min-width:0}
.kd-cert .num{font-size:12.5px;color:var(--txt-2)}
.kd-cert .btn{margin-left:auto}
.kd-cert.verlopen b{color:var(--red)}
.kd-cert.verlopen .num{text-decoration:line-through}

/* ─── Opvolging (js/opvolging.js) ──────────────────────────────────
   Het hele contactritme van één kandidaat: nazorg tot een jaar na de
   start, warm houden vóór de start, verjaardag, felicitatiemail.
   Standaard staat alleen zichtbaar wat speelt; `.alles` klapt het
   volledige ritme uit. Vandaar dat het verbergen op de LIJST zit en
   niet op de regel: één klasse erbij en alles staat er.
   Deze stijlen zijn niet kandidaat-specifiek maar wonen hier omdat het
   blok op de kandidatenkaart staat; css/kandidaten.css laadt altijd. */
.ov-kaart .bar{margin-bottom:12px}
.ov-lijst{display:flex;flex-direction:column;gap:2px}
.ov-r{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;
  padding:8px 0;border-bottom:1px solid #eef0e4;font-size:13px}
.ov-r:last-child{border-bottom:none}
.ov-r.verborgen{display:none}
.ov-lijst.alles .ov-r.verborgen{display:flex}
.ov-r-k{font-weight:600;color:var(--txt-2);flex:0 0 86px}
.ov-r-d{color:var(--txt-2);flex:0 0 116px;font-size:12.5px}
.ov-r-t{flex:1 1 200px;min-width:0}
.ov-r-kan{font-style:normal;color:var(--muted);font-size:12px;margin-left:7px}
.ov-r .btn{margin-left:auto}
.ov-ok{color:var(--green);font-weight:600;font-size:12.5px}
.ov-open{color:var(--amber);font-weight:600;font-size:12.5px}
.ov-gemist{color:var(--muted);font-weight:600;font-size:12.5px;text-decoration:line-through}
.ov-r.af .ov-r-k,.ov-r.af .ov-r-d,.ov-r.af .ov-r-t{color:var(--muted);font-weight:500}
.ov-r.open .ov-r-t{font-weight:600}
.ov-meer{margin-top:12px}
.ov-uit{margin:12px 0 0;max-width:66ch;line-height:1.5}

/* Felicitatiemail-venster: wat er ontbreekt, en de tekst zelf. */
.ov-gaten{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.ov-gaten li{line-height:1.45}
.ov-mailtekst{width:100%;min-height:260px;font-family:var(--body);font-size:13.5px;
  line-height:1.55;white-space:pre-wrap}
/* Het berichtje vóór een afspraak is een appje, geen brief: klein vlak,
   zodat de lengte zelf al laat zien dat het kort hoort te zijn. */
.ov-bericht{width:100%;min-height:110px;font-family:var(--body);font-size:13.5px;
  line-height:1.55}

@media(max-width:560px){
  .ov-r-k{flex:0 0 100%}
  .ov-r-d{flex:0 0 auto}
  .ov-r .btn{margin-left:0}
  .ov-mailtekst{min-height:220px}
}

/* Reisafstand: de waarschuwing hoort achter de afstand, niet eronder. */
.kd-reisver{margin-left:4px;vertical-align:1px}

/* ─── Kansen ──────────────────────────────────────────────────── */
.kd-kans{border:1px solid var(--line);border-radius:var(--r-s);padding:13px 15px;margin-bottom:10px;background:var(--card-2)}
.kd-kans:last-child{margin-bottom:0}
.kd-kans b{font-size:13.5px;color:var(--ink)}
.kd-score{flex:0 0 108px;display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.kd-score .bar{width:100%}
.kd-uitleg{margin:9px 0 11px;line-height:1.5}

/* Wat het systeem al wist — één regel per geval, geen chipmuur.
   Een streepje links in plaats van een gevuld vlak: dit is een
   kanttekening bij een voorstel, geen alarm dat het scherm overneemt. */
.kd-kanslet{margin:0 0 14px}
.kd-sig{font-size:12.5px;line-height:1.5;color:var(--txt-2);
  border-left:2px solid var(--line-2);padding-left:9px;margin:0 0 9px}
.kd-sig.amber{border-left-color:var(--amber);color:#8a5a1a}
.kd-sig.red{border-left-color:var(--red);color:#a4301f}
.kd-kansnoot{margin:12px 0 0;line-height:1.55;max-width:82ch}

/* ─── Traject-stappen ─────────────────────────────────────────── */
.kd-stappen{display:flex;gap:3px;margin:16px 0 8px}
.kd-stappen i{flex:1;height:6px;border-radius:99px;background:#e8ecdf}

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

@media (max-width:900px){
  .kd-meter{border-left:none;padding-left:0;border-top:1px solid var(--line);padding-top:14px;flex:1 1 100%}
  .kd-veld{grid-template-columns:1fr}
}

/* ─── Balk op mobiel ──────────────────────────────────────────── */
/* Zonder deze regels krijgt elke select zijn eigen breedte en ontstaat er een
   scheve trap van losse regels. Status en sortering delen één regel in twee
   gelijke kolommen; zoeken pakt de volle breedte. */
@media (max-width:700px){
  .kd-fil{gap:8px}
  .kd-fil > .searchbox{flex:1 1 100% !important;max-width:none !important;min-width:0}
  .kd-fil > select{flex:1 1 calc(50% - 4px);min-width:0;text-overflow:ellipsis}
  .kd-fil > .spacer{display:none}
  .kd-fil > .chip{flex:0 0 auto}
  .kd-fil > .meta{margin-left:auto}
  .kd-vrregel > .spacer{display:none}
}

/* ─── Golden candidates ───────────────────────────────────────── */
/* Gedempt goudgeel — bewust geen fel geel; sluit aan op de warme
   cream-tinten van het palet. VERZOEK AAN CORE: als er vaker goud
   nodig is, neem --gold(-bg/-line) op in :root van base.css. */
.kd-goldster{color:#a8862d;font-size:13px;line-height:1}
.kd-goldster.lg{font-size:19px;vertical-align:2px}
.kd-goldbtn{color:var(--muted)}
.kd-goldbtn:hover{border-color:#dcc98a}
.kd-goldbtn.aan{background:#f6f0dd;border-color:#dcc98a;color:#7a601c;font-weight:600}

/* ─── Mailwisseling (Outlook) ─────────────────────────────────────
   Het blok in de rechterkolom gebruikt de gedeelde `.ml-*`-stijl die
   onderaan css/klanten.css staat (samen met CRM.mailUI). Hier alleen
   de plaatsing: het blok volgt de andere kaarten in de kolom. */
.kd-kolommen .ml-kaart{margin-top:0}

/* ─── Traject & contract (verhuisd uit de bewerk-drawer van het bord)
   Zelfde regel als op het bord: het totaal-jaarsalaris onder de
   looncomponenten, rustig en zonder eigen kleur. */
.kd-totsal{margin-top:14px;border-top:1px solid var(--line);padding-top:10px;
  font-size:13px;color:var(--txt-2)}
.kd-totsal b{font-size:15px;color:var(--ink)}
.kd-totsal .meta{margin-left:6px}
/* Knoppenrij onder het Traject-blok: op smalle schermen valt de spacer weg,
   zodat de knoppen netjes onder elkaar wrappen in plaats van uit te rekken. */
@media(max-width:520px){ .card-f .spacer{display:none} }

/* ─── Klaar voor facturatie ───────────────────────────────────────
   Lijstje van wat er nog ontbreekt voordat de fee berekend kan worden.
   Bewust een lijst en geen chips: de labels zijn hele zinnen ("Vaste
   dertiende maand of eindejaarsuitkering"), en die passen niet in een pil
   zonder dat het een onleesbare brij wordt. */
.kd-mistlijst{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.kd-mistlijst li{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;
  padding:7px 0;border-bottom:1px solid var(--line)}
.kd-mistlijst li:last-child{border-bottom:0}
.kd-mistlijst button{background:none;border:0;padding:0;font:inherit;font-weight:600;
  color:var(--oranje);cursor:pointer;text-align:left;border-bottom:1px solid transparent}
.kd-mistlijst button:hover{border-bottom-color:currentColor}
.kd-mistlijst button:focus-visible{outline:2px solid var(--olive);outline-offset:2px;border-radius:2px}
.kd-mistlijst span:first-child{font-weight:600;color:var(--txt-2)}
.kd-mistlijst .meta{flex:1;min-width:0}



/* Werkzaamheden onder een dienstverband. Inspringen zodat de kolom met
   functies leesbaar blijft, en gedempt: de functie en de werkgever zijn
   waar je op scant, de taken lees je pas als je iemand echt beoordeelt. */
.kd-cvtaken{grid-column:1/-1;grid-row:3;margin:6px 0 0;padding:0 0 0 15px;
  list-style:disc;color:var(--txt-2);font-size:12px;line-height:1.55}
.kd-cvtaken li{margin:0 0 2px}
.kd-cvtaken li::marker{color:var(--line-2)}

/* ─── Waar deze kandidaat loopt ────────────────────────────────────
   Het belangrijkste feit op de kaart, en het stond als rode waarschuwing
   bovenaan de kansenlijst. Rood leest als "er is iets mis", terwijl er juist
   iets goed gaat. Groen, apart, en met de vacature erbij. */
.kd-loopt{border-left:3px solid var(--green, #3d9968);background:var(--card)}
.kd-loopt .card-b{padding-top:14px;padding-bottom:14px}
.kd-loopt .label{margin:0 0 4px}
.kd-looptklant{font-size:17px;font-weight:700;color:var(--ink);line-height:1.25}
.kd-looptklant a{color:inherit;text-decoration:none}
.kd-looptklant a:hover{color:var(--olive);text-decoration:underline}
.kd-looptvac{font-size:13px;font-weight:600;color:var(--green, #3d9968);margin-top:1px}
.kd-looptvac.leeg{color:var(--muted);font-weight:500;font-style:italic}
.kd-looptvac-knop{background:none;border:0;padding:0;font-family:inherit;cursor:pointer;text-align:left}
.kd-looptvac-knop:hover{color:var(--olive);text-decoration:underline}

/* ─── Kansen: één regel per vacature ──────────────────────────────
   Was een kaart per kans met balk, uitlegzin, alle blokkers en een knop over
   de volle breedte. Vijf daarvan vulden de hele kolom. Score links, wat het
   is in het midden, actie rechts. De uitlegzin zit in de tooltip. */
.kd-kans{display:grid;grid-template-columns:44px minmax(0,1fr) auto;align-items:center;
  gap:12px;padding:9px 0;border-bottom:1px solid #eef0e4}
.kd-kans:last-child{border-bottom:none}
.kd-kansscore{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.kd-kansscore b{font-size:15px;font-weight:700;color:var(--txt-2)}
.kd-kansscore.green b{color:var(--green, #3d9968)}
.kd-kansscore.amber b{color:var(--amber)}
.kd-kanswat{min-width:0;display:flex;flex-direction:column;gap:1px}
.kd-kanswat b{font-size:13px;color:var(--ink)}
.kd-kanswat .meta{font-size:11.5px}
.kd-kans .kd-sig{font-size:11px;margin-top:1px}

/* ─── Laatst vastgelegd, pal onder de kop ─────────────────────────
   Wat een collega gisteren opschreef bepaalt wat jij vandaag doet. Rustig
   gehouden: het is een aanwijzing, geen alarm — één streep links en verder
   gewone tekst. Staan er geen notities, dan staat dit blok er ook niet. */
.kd-lnot{border-left:2px solid var(--line-2)}
.kd-lnot .card-b{padding-top:12px;padding-bottom:12px}
.kd-lnot .label{margin:0 0 6px}
.kd-lnotrij{display:flex;align-items:baseline;gap:12px;padding:3px 0;flex-wrap:wrap}
.kd-lnottekst{flex:1;min-width:220px;font-size:13px;color:var(--txt);line-height:1.5}
.kd-lnotrij .meta{white-space:nowrap;font-size:11.5px}

/* "Ook in beeld voor": één regel per extra vacature (4 aug 2026). */
.kd-sollrij{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid #eef0e4;font-size:13px}
.kd-sollrij:last-child{border-bottom:none}

/* ─── Plaatsbaarheidsstrip (5 aug 2026) ───────────────────────────
   Vier chips onder de kop: beschikbaar, ploegen, vervoer + afstand,
   salariswens. Groen = kan, amber = knelt, gestippeld grijs = nog leeg.
   Alle vier klikbaar; ze springen naar hun veld op de kaart. */
.kd-strip{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:10px 20px;border-top:1px solid var(--line)}
.kd-strip>.label{margin-right:4px}
.kd-pchip.leeg{color:var(--muted);border-style:dashed;background:transparent}

/* ─── Dealbalk (5 aug 2026) ───────────────────────────────────────
   Eén regel direct onder de kop: deal, fase, type, fee-status en de
   eerstvolgende stap. In de gewone lichte kaartstijl — een donker vlak
   met lime paste niet in het thema (naam: Tjeerd, 5 aug 2026); het
   accent zit nu alleen in de olijfgroene stap-knop rechts, dezelfde
   als elke andere hoofdknop. */
.kd-dealbalk{display:flex;align-items:center;gap:22px;flex-wrap:wrap;
  background:var(--well-2);border:1.5px solid var(--olive);
  border-radius:var(--r);padding:11px 18px}
.kd-dealcel{display:flex;flex-direction:column;gap:2px;font-size:13px;min-width:0;
  border:0;background:none;padding:0;text-align:left;font-family:inherit;color:var(--txt)}
.kd-dealcel .dl{font-size:10px;letter-spacing:.9px;text-transform:uppercase;color:var(--muted)}
.kd-dealcel.klik{cursor:pointer}
.kd-dealcel.klik:hover{color:var(--olive)}
.kd-dealcel .knel{color:var(--oranje)}
.kd-dealcel .leeg{color:var(--muted);font-style:italic}
.kd-dealstap{background:var(--olive);color:#fff;border:1px solid var(--olive);
  border-radius:999px;padding:8px 15px;font-family:inherit;font-size:13px;
  font-weight:600;cursor:pointer;transition:filter .12s}
.kd-dealstap:hover{filter:brightness(1.08)}

/* ─── Blok-bewerken: alle velden van een blok tegelijk open ────── */
.kd-blokform .f-row{margin-bottom:9px}
.kd-blokform .f-row .meta{display:block;margin-top:3px}

/* De samenvatting-voor-de-klant is hét stuk dat je voorleest als je de
   klant belt — daarom bovenaan het intakeblok, met een eigen vlak. */
.kd-intsam{background:var(--card-2);border-radius:var(--r-s);padding:10px 14px;margin-bottom:14px}
.kd-intsam .label{margin-bottom:4px}
.kd-intsam p{margin:0;font-size:13.5px;line-height:1.55}

/* Het logboek (activiteiten/taken/notities/historie) staat sinds 5 aug
   2026 bovenaan de kaart. De lijst scrollt binnen een vast vlak: een druk
   dossier mag de kolommen eronder niet van het scherm duwen. */
.kd-logboek #c_tabinhoud .card-b{max-height:280px;overflow-y:auto}

/* Invoerregel bovenaan het notitietabblad: typen, Enter, klaar. */
.kd-notinvoer{display:flex;gap:10px;align-items:flex-start;margin-bottom:14px}
.kd-notinvoer textarea{flex:1;resize:vertical}

/* ─── Eén kaart, twee kolommen (6 aug 2026) ───────────────────────
   Links wie de kandidaat is, rechts wat we ermee doen. De linkerkolom
   blijft staan terwijl je rechts doorscrolt — tijdens een intakegesprek
   lees je links en typ je rechts, zonder heen en weer te scrollen. Is de
   linkerkolom langer dan het scherm, dan scrolt hij binnen zichzelf. */
.kd-tweeluik{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);
  gap:16px;align-items:start}
/* Geen eigen scrollbalk in de kolom (naam: Tjeerd, 6 aug 2026: "naar
   beneden scrollen vind ik niets"). De pagina scrolt als geheel. */
.kd-profielkol{min-width:0}
/* Smallere schermen: kolommen onder elkaar en niets vastgezet — een
   vastgeplakte kolom op een klein scherm laat geen ruimte over. */
@media (max-width:1180px){
  .kd-tweeluik{grid-template-columns:minmax(0,1fr)}
}

/* ─── Snelbalk bovenaan de werkkolom ──────────────────────────────
   Altijd op dezelfde plek: typ wat er gebeurd is en kies wat het is.
   Olijfrand links, zoals overal waar iets van jou gevraagd wordt. */
/* De invoerregel staat in het blok Activiteiten & notities zelf, met een
   streep eronder vóór de tijdlijn — geen losse balk erboven meer. */
.kd-snelrij{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;
  margin-bottom:14px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.kd-snelrij textarea{flex:1;min-width:240px;resize:none;overflow:hidden;
  font-size:13px;line-height:1.5}
.kd-snelknoppen{flex-wrap:wrap;row-gap:6px}

/* De "nu"-regels bovenaan Werkervaring: waar hij zit, opzegtermijn en
   salariswens, met een streep eronder vóór de loopbaan uit het cv. */
.kd-nu{margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}

/* ─── Werkervaring: kopjes per lijst (6 aug 2026) ─────────────────
   Elke lijst heeft zijn eigen toevoegknop, ook als hij leeg is. Dat
   scheelde vier knoppen in de kaartkop en zegt duidelijker wáár je iets
   toevoegt. De lege regel eronder legt uit wat er hoort te staan. */
.kd-ervkop{display:flex;align-items:center;gap:10px;margin:18px 0 6px}
.kd-ervkop:first-of-type{margin-top:4px}
.kd-ervkop > .label{margin:0}
.kd-ervkop .btn{margin-left:auto}
.kd-ervnog{margin:0;font-size:12.5px;line-height:1.5}
.kd-ervleeg{margin:0 0 4px;font-size:12.5px;line-height:1.6;color:var(--txt-2)}

/* Vaardigheid weghalen: kruisje in de chip zelf, gedempt tot je erover
   gaat — anders leest een rij chips als een rij sluitknoppen. */
.kd-skills{margin-top:2px}
.kd-skill{padding-right:5px}
.kd-skillweg{background:none;border:0;cursor:pointer;color:var(--muted);
  font-size:14px;line-height:1;padding:0 2px;margin-left:5px}
.kd-skillweg:hover{color:var(--oranje)}

/* ─── Slepen om de volgorde te wijzigen (6 aug 2026) ──────────────
   De volgorde bepaalt hoe de loopbaan op het kandidaatprofiel voor de
   klant komt te staan, dus wat het meest relevant is zet je bovenaan. */
.kd-greep{cursor:grab;color:var(--line-2);font-size:13px;line-height:1;
  grid-row:1/3;align-self:center;margin-right:2px;user-select:none}
.kd-greep:active{cursor:grabbing}
.kd-cvrij:hover .kd-greep{color:var(--muted)}
.kd-cvlijst.kd-sleep .kd-cvrij{grid-template-columns:auto 1fr auto}
.kd-sleep [draggable="true"].sleept{opacity:.4}
.kd-sleep .kd-cvrij.doel{box-shadow:inset 0 2px 0 var(--olive)}
.kd-sleep .kd-skill{cursor:grab}
.kd-sleep .kd-skill.doel{border-color:var(--olive);box-shadow:inset 2px 0 0 var(--olive)}

/* ─── Documenten bij de kandidaat ─────────────────────────────── */
.kd-docrij{display:flex;align-items:center;gap:10px;padding:9px 0;
  border-bottom:1px solid #eef0e4;font-size:13px}
.kd-docrij:last-of-type{border-bottom:none}
.kd-docic{color:var(--muted);font-size:15px;line-height:1}
.kd-doct{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.kd-doct b{font-size:13px}
/* Het ingelezen cv is geen gewone bijlage maar de bron van de kaart —
   één streepje links, verder dezelfde regel. */
.kd-doccv{border-left:2px solid var(--olive);padding-left:10px;
  background:var(--card-2);border-radius:var(--r-s);margin-bottom:6px}

/* ─── Werkervaring als doorlopend formulier (7 aug 2026) ──────────
   Elk veld staat meteen open; geen bewerkknop per regel meer. Vaste
   kolommen zodat de functies, werkgevers en periodes onder elkaar staan. */
.kd-ervlijst{display:flex;flex-direction:column;gap:10px;margin-top:8px}
.kd-ervblok{border-bottom:1px solid #eef0e4;padding-bottom:10px}
.kd-ervblok:last-child{border-bottom:none;padding-bottom:0}
.kd-ervrij1{display:grid;grid-template-columns:auto minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,150px) 26px;
  gap:6px;align-items:center}
/* Opleiding en certificaten hebben geen sleepgreep — één kolom minder. */
.kd-ervlijst > .kd-ervrij1{grid-template-columns:minmax(0,1.1fr) minmax(0,1.1fr) minmax(0,150px) 26px}
.kd-ervrij1 input{font-size:13px}
.kd-ervblok textarea{width:100%;margin-top:6px;font-size:12.5px;line-height:1.5;resize:vertical}
.kd-ervweg{background:none;border:0;cursor:pointer;color:var(--line-2);
  font-size:16px;line-height:1;padding:0 2px}
.kd-ervweg:hover{color:var(--oranje)}
.kd-ervrij1.verlopen input[type=date]{border-color:var(--red-line);background:var(--red-bg)}
.kd-ervrij1.bijna input[type=date]{border-color:var(--amber-line);background:var(--amber-bg)}

@media (max-width:1180px){
  .kd-ervrij1,.kd-ervlijst > .kd-ervrij1{grid-template-columns:minmax(0,1fr) 26px}
  .kd-ervrij1 > .kd-greep{display:none}
}

/* Uitkomst van een Flex-plaatsing: marge per uur, per week en tot de
   overname. Eén regel eronder, gescheiden door puntjes — het zijn drie
   antwoorden op dezelfde vraag, geen lijst. */
.kd-flexuit{margin-top:6px;font-size:12.5px;color:var(--txt-2);line-height:1.6}
.kd-flexuit .num{color:var(--ink)}
.kd-flexpunt{margin:0 8px;color:var(--line-2)}

/* ─── O&O-sessie op de kandidatenkaart (7 aug 2026) ───────────────
   Staat pal onder Traject en gebruikt bewust dezelfde .kd-velden-stijl:
   het is dezelfde tijdlijn, alleen dan een stap die niet van deze
   kandidaat alleen is. Verder geen eigen kleur of streep — er hoort
   hooguit één accent op een scherm, en dat is het lopende traject
   (.kd-loopt) hierboven. */
.kd-oo .card-b{padding-top:14px;padding-bottom:14px}
.kd-oo a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line-2)}
.kd-oo a:hover{color:var(--olive);border-bottom-color:var(--olive)}
/* Een telling met een nuance erachter blijft één regel; het getal draagt,
   de nuance mag kleiner. */
.kd-oo .kd-veld .num{font-weight:700;color:var(--ink)}
.kd-oo .kd-veld .meta{font-size:11.5px}