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

/* ─── Frame (module draait op volle breedte, padding regelen we zelf) ─── */
.rc-pad{padding:18px 26px 0}
.rc-pad-b{padding-bottom:4px}

/* ─── Dagelijkse cijfers ───────────────────────────────────────
   Recruitment zelf gebruikt deze strip sinds 1 augustus 2026 niet meer (zie
   .rc-doen hieronder), maar de Klanttrajecten lenen hem — js/pijplijn.js zet
   er zijn eigen cijfers in. Daarom blijft hij staan. */
.rc-bar{
  display:flex;flex-wrap:wrap;gap:0;background:var(--card);
  border-bottom:1px solid var(--line);padding:0 26px;
}
.rc-bar .rc-it{padding:14px 26px 14px 0;margin-right:26px;border-right:1px solid var(--line);min-width:132px}
.rc-bar .rc-it:last-child{border-right:none;margin-right:0}
/* Deze strook is de KPI-rij van recruitment; dezelfde behandeling als .big in
   base.css, zodat de kerncijfers in elke module er hetzelfde uitzien. */
.rc-bar .rc-v{font-family:var(--disp);font-weight:400;font-size:26px;letter-spacing:.5px;
  line-height:1.1;color:var(--ink);margin-top:4px}
.rc-bar .rc-it.amber .rc-v{color:var(--amber)}
.rc-bar .rc-it.goed .rc-v{color:var(--green)}
.rc-bar .rc-van{font-size:14px;font-weight:500;color:var(--muted);margin-left:4px}

.rc-tabwrap{padding:12px 26px 0;background:var(--card);border-bottom:1px solid var(--line)}
.rc-tabwrap .tabs{margin-bottom:0;border-bottom:none}

/* ─── Filterbalk + statuschips ───────────────────────────────── */
.rc-fil{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.rc-chips{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.rc-chips .chip{padding:4px 11px;gap:6px}
.rc-chips .chip b{font-weight:600;color:var(--muted)}
.rc-chips .chip.on b{color:inherit;opacity:.85}
.rc-chips .chip.on .dot{box-shadow:0 0 0 1px rgba(255,255,255,.5)}

/* ─── De doen-regel ──────────────────────────────────────────────
   Eén band boven de lijst, en het enige accent op dit scherm. Hier stonden
   drie blokken onder elkaar (werkstapel met staaf, de kaart "Blijft liggen"
   met zeven chips, en een rij van elf statuschips) die deels dezelfde getallen
   herhaalden. Het getal links is groot omdat het er als enige toe doet; de
   cijfers rechts zijn tekstgrootte, want je leest ze pas als je erom vraagt.
   Kleur komt alleen als er iets te lang ligt — staat alles bij, dan is de
   regel volledig neutraal. */
.rc-doen{display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:10px 16px;margin-bottom:12px}
/* Ligt er iets te lang, dan een streep links — dezelfde ingreep als bij een
   rij in de tabel (tr.rc-telang). Een amberkleurige rand rond het hele blok
   naast amberkleurige tekst erin is twee keer hetzelfde signaal. */
.rc-doen.let{box-shadow:inset 3px 0 0 var(--amber)}
.rc-doentel{display:flex;align-items:baseline;gap:7px;flex:0 0 auto}
.rc-doentel b{font-family:var(--disp);font-weight:400;font-size:26px;line-height:1;
  letter-spacing:.5px;color:var(--ink)}
.rc-doentel span{font-size:12px;font-weight:600;color:var(--txt-2);
  text-transform:uppercase;letter-spacing:.05em;white-space:nowrap}
.rc-doenzin{font-size:12.5px;color:var(--muted)}
.rc-doenzin em{font-style:normal}
.rc-doenzin em.op{color:var(--amber);font-weight:600}
.rc-doenklaar{font-size:13px;font-weight:600;color:var(--ink)}
.rc-doenop{font-size:14px;font-weight:700;color:var(--muted)}
.rc-doenop.klaar{color:var(--green)}

/* De stille cijfers rechts: wat blijft liggen, wat klaarstaat voor de AM, en
   de calls van deze week. Twee ervan zijn een doorklik — ze zien er als tekst
   uit en gedragen zich als knop, want een echte knop naast de wegwerkknop zou
   om dezelfde aandacht vragen. */
.rc-doenrest{display:flex;align-items:center;flex-wrap:wrap;gap:16px;
  font-size:12.5px;color:var(--muted)}
.rc-doenrest .num{font-weight:700;color:var(--txt-2)}
.rc-doenfeit{background:none;border:none;padding:0;font-family:var(--body);
  font-size:12.5px;color:var(--muted);cursor:pointer;white-space:nowrap}
.rc-doenfeit:hover{color:var(--olive)}
.rc-doenfeit:hover .num{color:var(--olive)}
.rc-doenfeit.on{color:var(--olive);font-weight:600}
.rc-doenfeit.on .num{color:var(--olive)}

/* ─── De filterbalk ──────────────────────────────────────────────
   Eén balk voor álles wat filtert: zoeken, status (met de tellers erin),
   bron, vacature en de twee knopfilters. De statuschips die hier als aparte
   band naast stonden deden hetzelfde werk. */
.rc-zoek{flex:1 1 180px;max-width:224px;min-width:160px}
/* Telling en weergaveschakelaar horen bij elkaar en schuiven naar rechts. Als
   groep, niet los: met een losse spacer viel de schakelaar als enige naar een
   tweede regel en hing daar in zijn eentje onder de balk. */
.rc-filr{display:flex;align-items:center;gap:10px;margin-left:auto}
/* Een select met width:auto groeit mee met de langste optie — 'Potentieel —
   andere vacature (3)' en de langste vacaturenaam duwden de balk dan over twee
   regels. Afkappen mag: de gekozen waarde staat er nog, en het volledige label
   staat in de lijst zodra je hem opent. */
.rc-fil select{width:auto;max-width:196px}
#rc_status{min-width:186px}
#rc_bron{min-width:124px}
#rc_vac{min-width:172px}
/* Smal genoeg dat de balk met vijf selects op een laptop één regel blijft,
   maar breed genoeg dat "— zonder eigenaar — (73)" er als gekozen waarde
   volledig in staat — een half afgekapt filter lees je als een ander filter. */
#rc_eigfil{min-width:118px;max-width:182px}
.rc-fil .chip.btn-like{padding:5px 12px}

/* ─── Meerdere sollicitanten tegelijk ────────────────────────────
   Verschijnt pas zodra er iets is aangevinkt, en verdwijnt weer. Een lege
   actiebalk die altijd staat is ruimte die niets doet. */
.rc-bulk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border:1px solid var(--olive-l);background:var(--card-2);
  border-radius:var(--r);padding:8px 14px;margin-bottom:10px}
.rc-bulk b{font-family:var(--body);font-size:15px;font-weight:700;color:var(--ink)}
.rc-bulk > span{font-size:12.5px;color:var(--txt-2);margin-right:4px}
.rc-tbl input[type=checkbox],.rc-tbl th input[type=checkbox]{cursor:pointer;margin:0}

/* Doorklik in een melding: leest als tekst, gedraagt zich als knop. */
.rc-lnk{background:none;border:none;padding:0;font-family:var(--body);font-size:inherit;
  font-weight:600;color:var(--olive);text-decoration:underline;cursor:pointer}
.rc-lnk:hover{color:var(--olive-d)}

/* Werk-af-knop in een bordkolomkop: alleen zichtbaar als je er bent. */
.rc-kolwerk{margin-left:auto;background:none;border:1px solid transparent;border-radius:999px;
  padding:1px 8px;font-family:var(--body);font-size:11px;font-weight:600;
  color:var(--muted);cursor:pointer;opacity:.55}
/* Zichtbaar zonder hover (motorkap-punt 13): een knop die pas bestaat als
   je er toevallig overheen zweeft wordt nooit gevonden. */
.bcol:hover .rc-kolwerk,.rc-kolwerk:focus-visible{opacity:1}
.rc-kolwerk:hover{border-color:var(--olive-l);color:var(--olive)}

/* ─── Leadtabel ──────────────────────────────────────────────── */
.rc-tbl td{vertical-align:top;padding-top:11px;padding-bottom:11px}
.rc-naam{font-weight:600;color:var(--ink)}
.rc-prio{display:block;width:8px;height:8px;border-radius:50%;margin-top:5px}
a.rc-tel{color:var(--txt);text-decoration:none;white-space:nowrap}
a.rc-tel:hover{color:var(--olive);text-decoration:underline}
/* Elke lead heeft WhatsApp, dus een groen label per rij zegt niets en maakt de
   tabel bont. Neutraal gehouden — de kleur in deze tabel is voor status en score. */
a.rc-wa{margin-left:6px;font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--muted);border:1px solid var(--line);
  background:var(--card-2);border-radius:4px;padding:1px 5px;vertical-align:1px}
a.rc-wa:hover{text-decoration:none;color:var(--olive);border-color:var(--olive-l)}
.rc-stil{color:var(--amber);font-weight:600}

/* Statusselect met kleurstip van de status ervoor.
   min-width is essentieel: de tabel heeft negen kolommen en kneep het veld
   anders samen tot een stip met een pijltje — je kon de status van een
   sollicitant dan niet meer lézen. De tabel schuift liever horizontaal. */
.rc-stwrap{position:relative;min-width:196px}
.rc-stwrap::before{content:'';position:absolute;left:9px;top:50%;transform:translateY(-50%);
  width:8px;height:8px;border-radius:50%;background:var(--sc,var(--muted));pointer-events:none;z-index:1}
.rc-stwrap select{padding-left:24px;font-size:12.5px;padding-top:5px;padding-bottom:5px;
  border-color:var(--line);background-color:var(--card-2)}
.rc-stwrap select:hover{border-color:var(--line-2)}

/* Deze rij had als enige in de app al een streep links, altijd amber, alleen
   voor "ligt te lang". Sinds 3 aug 2026 doet de hele app dat (.frand in
   base.css) en draagt de streep hier de statuskleur — met amber of rood
   erover zodra er iets blijft liggen. tr.rc-telang blijft bestaan voor de
   tekst in de rij, maar tekent zelf geen streep meer. */
.rc-oud-amber{color:var(--amber);font-weight:600}
.rc-oud-red{color:var(--red);font-weight:700}
.rc-dub{color:var(--purple);font-weight:600}

.bcard .rc-koppel,.bcard .rc-move{margin-top:6px;width:100%;justify-content:center;
  padding:3px 8px;font-size:11px}

/* ─── Het leadbord ───────────────────────────────────────────────
   Leunt op .board/.bcol/.bcard uit base.css en op de bord-opmaak van de
   Klanttrajecten (css/pijplijn.css, dat altijd meegeladen wordt). Alleen
   wat dit bord extra nodig heeft staat hier. */
.rc-leadbord{margin:0 -26px}
.rc-leadbord .rc-bordwrap .board{padding-top:0;min-height:0}
/* De kolomhoogte volgt wat er bóven het bord staat. Dat waren zes banden en
   zijn er nu twee, dus er is ruim honderd pixel bij gekomen — die geven we aan
   de kaarten, niet aan witruimte onder het bord. */
.rc-leadbord .bcol{max-height:calc(100vh - 300px);min-height:180px}
.rc-kaarttel{margin-top:7px;font-size:12px}
.rc-meer{font-size:11.5px;color:var(--muted);text-align:center;padding:8px 4px 2px}
/* De afsluitende kolom is geen werkvoorraad maar een overdracht: geen
   sleepdoel, en een rustiger vlak zodat het verschil meteen zichtbaar is. */
.bcol.rc-overdracht{background:var(--card-2);border-style:dashed}
.bcol.rc-overdracht .bcard{cursor:pointer}
.rc-overnote{font-size:11.5px;color:var(--txt-2);line-height:1.5;padding:0 2px 4px}

/* ─── Eindstations van het leadbord ──────────────────────────────
   De smalle strook rechts van het leadbord: "niet geïnteresseerd", "niet
   geschikt", "doorgeschoten". Dit is géén uitval — een lead die afhaakt
   voordat er een klant in beeld is. De uitvalstrook op Klanttrajecten is er
   op 31 juli 2026 uit; deze stijlen stonden in css/pijplijn.css en zijn
   daarom hierheen verhuisd, naar het enige scherm dat ze nog gebruikt. */
.rc-uit{flex:0 0 168px;width:168px;padding:4px 26px 30px 0;display:flex;flex-direction:column;gap:8px}
.rc-uitzone{
  border:1px dashed var(--line-2);border-radius:var(--r);background:var(--card-2);
  padding:12px;display:flex;flex-direction:column;gap:4px;border-left:3px solid var(--ph,var(--muted));
  transition:background .12s,border-color .12s;
}
/* Inter, geen Anton — Anton is alleen voor paginatitels en grote kerncijfers. */
.rc-uitzone b{font-family:var(--body);font-weight:600;font-size:12px;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink)}
.rc-uitzone .num{font-size:20px;font-weight:600;color:var(--txt-2);line-height:1.1}
/* Zelfde sleepterugkoppeling als .bcol.over in base.css. */
.rc-uitzone.over{background:var(--well-2);border-color:var(--olive-l);border-style:solid}
.rc-uitzone.geenslepen{border-style:solid;opacity:.75}
@media (max-width:900px){
  .rc-uit{flex:1 1 auto;width:auto;padding:0 14px 24px;flex-direction:row}
  .rc-uit .label{display:none}
  .rc-uitzone{flex:1}
}

/* ─── Afsluitende regel: klaar om voor te stellen ────────────── */
.rc-klaar{margin-top:18px;border-top:1px solid var(--line);padding:14px 2px 4px}
.rc-klaar.leeg{color:var(--muted)}
.rc-klaar.leeg b{font-size:12px;font-weight:600;color:var(--txt-2);margin-right:8px}
.rc-klaarkop{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.rc-klaarkop b{font-size:13px;font-weight:600;color:var(--ink)}
.rc-klaarkop .num{background:var(--green-bg);border:1px solid var(--green-line);color:var(--green);
  border-radius:999px;padding:0 9px;font-size:12px;font-weight:700}
.rc-klaarrij{display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* ─── Wegwerkmodus (de belronde) ─────────────────────────────── */
.rc-wwkop{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.rc-wwnaam{font-family:var(--disp);font-weight:400;font-size:24px;line-height:1.15;
  letter-spacing:.5px;color:var(--ink)}
.rc-wwbel{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:14px 0}
.rc-wwbel .btn{text-decoration:none}
.rc-wwinfo{border-top:1px solid var(--line);padding-top:6px}
.rc-wwkeuze{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.rc-wwkeuze button{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--card);border-radius:999px;padding:6px 13px;font-family:var(--body);
  font-size:12.5px;font-weight:600;color:var(--ink);cursor:pointer}
.rc-wwkeuze button:hover{border-color:var(--olive-l);background:var(--card-2)}
kbd{font-family:var(--body);font-size:10.5px;font-weight:700;color:var(--txt-2);
  background:var(--card-2);border:1px solid var(--line);border-radius:4px;padding:1px 5px}
.rc-wwkeuze button:hover kbd{border-color:var(--olive-l);color:var(--olive)}
/* Een keuze die de status níét verandert (nog een poging, herinnering,
   verzet) hoort er anders uit te zien dan een keuze die iemand verderop
   in de pijplijn zet — anders denk je dat je hem hebt afgehandeld. */
.rc-wwkeuze button.blijf{border-style:dashed;color:var(--txt-2)}

/* ─── Breed werkblad voor de rondes (10 sep 2026) ─────────────────
   Tjeerd: "kleine kaart, moet duidelijker en praktischer". Twee kolommen:
   links alles wat je wilt wéten tijdens het bellen (contact, vacature,
   botantwoorden open), rechts alles wat je dóét (notitie, belafspraak,
   uitkomst-knoppen groot onder elkaar). Zelfde ids en toetsen — alleen
   de vorm is anders. */
.modal.ww-modal{width:min(1080px,96vw)}
.ww-b{display:grid;grid-template-columns:1.08fr 1fr;gap:0 28px;align-items:start}
.ww-links{min-width:0}
.ww-rechts{min-width:0;border-left:1px solid var(--line);padding-left:28px;
  display:flex;flex-direction:column;align-self:stretch}
.ww-rechts .rc-wwkeuze{margin-top:8px}
.ww-uitkop{margin-top:auto;padding-top:16px;font-size:11px;font-weight:700;
  letter-spacing:.8px;text-transform:uppercase;color:var(--muted)}
.ww-modal .rc-wwkeuze{flex-direction:column;flex-wrap:nowrap;gap:8px}
.ww-modal .rc-wwkeuze button{width:100%;justify-content:flex-start;gap:12px;
  border-radius:12px;padding:12px 14px;font-size:14px}
.ww-modal .rc-wwkeuze button kbd{font-size:12px;padding:2px 8px;flex-shrink:0}
/* Toets 1 = de gewenste uitkomst — die mag net iets meer aanwezig zijn. */
.ww-modal .rc-wwkeuze button:first-child{border-color:var(--olive-l);background:var(--card-2)}
.ww-modal .rc-wwqa{margin-top:14px;border-top:1px solid var(--line);padding-top:10px}
.ww-qascroll{max-height:34vh;overflow-y:auto}
@media (max-width:900px){
  .ww-b{grid-template-columns:1fr}
  .ww-rechts{border-left:none;padding-left:0;margin-top:10px}
  .ww-uitkop{margin-top:16px}
  .ww-modal .rc-wwqa[open] .ww-qascroll{max-height:200px}
}

/* ─── Vacature koppelen: voorgestelde matches ────────────────── */
.rc-sug{display:flex;flex-direction:column;gap:6px}
.rc-sug button{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  border:1px solid var(--line);background:var(--card);border-radius:var(--r-s);
  padding:9px 12px;cursor:pointer;font-family:var(--body)}
.rc-sug button:hover{border-color:var(--olive-l);background:var(--card-2)}
.rc-sug b{font-size:13px;font-weight:600;color:var(--ink)}
.rc-sug small{display:block;font-size:11.5px;color:var(--muted)}
.rc-sug span{margin-left:auto;font-size:12px;font-weight:600;color:var(--txt-2)}
.rc-koppel{margin-top:4px}

/* ─── Sleutel/waarde-regels in drawers ───────────────────────── */
.rc-kv{display:flex;gap:14px;align-items:baseline;padding:5px 0;border-bottom:1px solid var(--line)}
.rc-kv:last-child{border-bottom:none}
.rc-kv .label{flex:0 0 108px;margin:0}
.rc-kv > span:last-child,.rc-kv > div:last-child{flex:1;min-width:0}

/* Vragen en antwoorden van de WhatsApp-agent */
table.rc-qa{width:100%;border-collapse:collapse;font-size:13px}
table.rc-qa th{text-align:left;font-weight:500;color:var(--muted);padding:6px 14px 6px 0;
  width:34%;vertical-align:top;text-transform:none;letter-spacing:0;font-family:var(--body);font-size:12.5px}
table.rc-qa td{padding:6px 0;border-bottom:1px solid var(--line)}
table.rc-qa tr:last-child td{border-bottom:none}
/* Dezelfde antwoorden in de belronde: ingeklapt, zodat de ronde licht blijft. */
.rc-wwqa{margin-top:12px}
.rc-wwqa summary{cursor:pointer;font-size:13px;color:var(--muted)}
.rc-wwqa[open] summary{margin-bottom:4px}

/* ─── Doorschietformulier ────────────────────────────────────── */
.rc-vol{background:var(--card-2);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px}
.rc-vol .label{margin:0 0 6px}
.f-row.rc-mist > label{color:var(--amber)}
/* Ontbrekend veld: alleen label + rand in signaalkleur. Een eigen tint als
   achtergrond hoorde niet in het contract thuis en voegde niets toe. */
.f-row.rc-mist input,.f-row.rc-mist select{border-color:var(--amber-line)}
.rc-req{font-family:var(--body);font-size:10.5px;font-weight:600;text-transform:uppercase;
  letter-spacing:.06em;color:var(--amber);margin-left:5px}

/* ─── Kolommen koppelen bij import ───────────────────────────── */
.rc-map{display:grid;grid-template-columns:1fr 1.3fr;gap:8px 14px;align-items:center}
.rc-map label{font-size:12.5px;font-weight:600;color:var(--txt-2)}
.rc-map select{padding-top:5px;padding-bottom:5px;font-size:12.5px}

/* Het bord + de uitvalstrook zijn verhuisd naar de Pijplijn-module —
   die stijlen staan nu in css/pijplijn.css. */

/* ─── Signaalstrook (naamchips, nazorg, weekstarts) ──────────── */
.rc-strook{background:var(--card);border-bottom:1px solid var(--line);padding:8px 26px 10px;
  display:flex;flex-direction:column;gap:6px}
.rc-strookrij{display:flex;align-items:center;flex-wrap:wrap;gap:6px}
.rc-strookrij > .label{margin-right:6px;flex:0 0 auto}
.rc-naamchip{display:inline-flex;align-items:baseline;gap:6px;border:1px solid var(--line);
  background:var(--card-2);border-radius:999px;padding:2px 10px;font-size:12px;font-weight:600;
  color:var(--ink);cursor:pointer;font-family:var(--body)}
.rc-naamchip em{font-style:normal;font-weight:500;font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.rc-naamchip:hover{border-color:var(--olive-l)}
.rc-naamchip.groen{border-color:var(--green-line);background:var(--green-bg)}
.rc-naamchip.rood{border-color:var(--red-line);background:var(--red-bg)}
.rc-naamchip.nu{border-color:var(--red-line);background:var(--red-bg)}
.rc-naamchip.nu em{color:var(--red);font-weight:700}

/* ─── Routekeuze (+ Sollicitant: handmatig of CV) ────────────── */
.rc-route{display:flex;flex-direction:column;gap:8px}
.rc-route button{display:block;width:100%;text-align:left;border:1px solid var(--line);
  background:var(--card);border-radius:var(--r-s);padding:12px 14px;cursor:pointer;font-family:var(--body)}
.rc-route button b{display:block;font-size:13.5px;font-weight:600;color:var(--ink)}
/* De twee routes komen op een ander eindpunt uit — een sollicitant in de
   pijplijn tegenover een kandidatenkaart — en dat kost één regel uitleg
   meer bij de één dan bij de ander. Vaste hoogte voor de toelichting houdt
   de blokken even groot; een keuze waarvan het ene vak groter is dan het
   andere leest als een voorkeur die we niet bedoelen. */
.rc-route button small{display:block;font-size:12px;color:var(--muted);margin-top:2px;
  line-height:1.45;min-height:calc(2 * 1.45em)}
.rc-route button:hover{border-color:var(--olive-l);background:var(--card-2)}

/* ─── Uitvalformulier: keuzeblokken ──────────────────────────── */
.rc-radio{display:flex;flex-direction:column;gap:6px}
.rc-opt{display:flex;gap:10px;align-items:flex-start;border:1px solid var(--line);
  border-radius:var(--r-s);padding:9px 12px;cursor:pointer;background:var(--card)}
.rc-opt input{margin-top:3px}
.rc-opt b{font-size:13px;font-weight:600;color:var(--ink)}
.rc-opt small{display:block;font-size:11.5px;color:var(--muted)}
.rc-opt.sel{border-color:var(--olive-l);background:var(--card-2)}

/* ─── Salaris: live totaal-jaarsalaris ───────────────────────── */
.rc-totsal{margin-top:4px;border-top:1px solid var(--line);padding-top:10px;font-size:13px;color:var(--txt-2)}
.rc-totsal b{font-size:15px;color:var(--ink)}
.rc-totsal .meta{margin-left:6px}

/* ─── Intake: keuzechips en cijferschaal ─────────────────────── */
.rc-inchips{display:flex;gap:6px;flex-wrap:wrap}
.rc-inchips .chip{padding:8px 16px;font-size:13px}
.rc-schaal{display:flex;gap:4px;flex-wrap:wrap}
.rc-schaal-rij{display:flex;align-items:center;gap:8px}
.rc-schaal-eind{font-size:11px;color:var(--muted);white-space:nowrap}
.rc-cijfer{width:34px;height:30px;border:1px solid var(--line);background:var(--card);
  border-radius:var(--r-s);font-family:var(--body);font-weight:600;font-size:13px;color:var(--txt-2);cursor:pointer}
.rc-cijfer:hover{border-color:var(--olive-l)}
.rc-cijfer.on{background:var(--olive);border-color:var(--olive);color:#fff}
.f-row label + .rc-inchips, .f-row label + .rc-schaal-rij{margin-top:4px}
.rc-inchips .chip.on.chip-warn{background:var(--amber);border-color:var(--amber)}
.rc-inchips .chip.on.chip-neg{background:var(--red);border-color:var(--red)}

/* ─── O&O-modaal: ledenlijst ─────────────────────────────────── */
.rc-oolid{border-bottom:1px solid var(--line);padding:6px 0}
.rc-oolid:last-child{border-bottom:none}

/* ─── Mobiel ─────────────────────────────────────────────────── */
@media (max-width:900px){
  .rc-strook{padding:8px 14px 10px}
  .rc-pad{padding:14px 14px 0}
  /* Als de strook op mobiel wrapt, blijft bij een flexrij de scheidingslijn
     rechts van de laatste tegel van elke regel hangen. Vaste twee kolommen
     lost dat op en halveert de hoogte boven de tabel. */
  .rc-bar{display:grid;grid-template-columns:1fr 1fr;padding:0 14px}
  .rc-bar .rc-it{padding:11px 0;margin-right:0;border-right:none;min-width:0;
    border-top:1px solid var(--line)}
  .rc-bar .rc-it:nth-child(-n+2){border-top:none}
  .rc-bar .rc-it:nth-child(odd){padding-right:14px;border-right:1px solid var(--line)}
  .rc-bar .rc-it:nth-child(even){padding-left:14px}
  .rc-bar .rc-it:last-child:nth-child(odd){border-right:none;grid-column:1/-1}
  .rc-bar .rc-v{font-size:22px}
  .rc-tabwrap{padding:10px 14px 0}
  .rc-chips .chip{font-size:11.5px;padding:3px 9px}
  .rc-map{grid-template-columns:1fr}
  /* De doen-regel wordt een blok: het getal boven, de stille cijfers eronder,
     de knop over de volle breedte. Naast elkaar wordt het op 375px onleesbaar. */
  .rc-doen{gap:8px 12px;padding:12px 14px}
  .rc-doenrest{flex:1 0 100%;gap:12px}
  .rc-doen .btn{width:100%;justify-content:center}
  .rc-doen .spacer{display:none}
  .rc-zoek{max-width:none}
  .rc-leadbord{margin:0 -14px}
  .rc-leadbord .bcol{max-height:none}
  /* Op mobiel wrapt de balk sowieso; telling + schakelaar krijgen dan hun
     eigen regel over de volle breedte. */
  .rc-filr{flex:1 0 100%;justify-content:space-between;margin-left:0}
  /* Op 375px passen er twee filters naast elkaar zodra hun eigen minimumbreedte
     losgelaten wordt; anders krijgt elke select een eigen regel en is de balk
     net zo hoog als de banden die we net hebben weggehaald. */
  .rc-fil select,#rc_status,#rc_bron,#rc_vac,#rc_eigfil{max-width:none;min-width:0;flex:1 1 44%}
  .rc-wwnaam{font-size:20px}
  .rc-wwkeuze button{flex:1 1 46%;justify-content:center}
  /* De bulkbalk moet op 375px leesbaar blijven: knoppen onder elkaar in
     plaats van vier halve knoppen naast elkaar. */
  .rc-bulk{gap:8px}
  .rc-bulk .btn{flex:1 1 100%;justify-content:center}
  /* Aanraken is grover dan klikken; een vinkje van 13px raak je niet. */
  .rc-tbl input[type=checkbox]{width:18px;height:18px}
  /* Op een telefoon is er geen hover, dus de werk-af-knop zou nooit
     verschijnen. */
  .rc-kolwerk{opacity:1}
}

/* Teamscherm (≥1900px, zie de breedteladder in base.css): de extra ruimte
   vullen we met méér kolommen tegelijk in beeld, niet met bredere kolommen. */
@media (min-width:1900px){
  .rc-leadbord .bcol{max-height:calc(100vh - 270px)}
}

/* ═══════════════════════════════════════════════════════════════
   GESPREKSMODUS VIDEO-INTAKE (.ig-) — het intakeformulier als
   zijpaneel (drawer) in plaats van modal, zie intakeForm in
   js/recruitment.js. Waarom een eigen sectie: het paneel heeft een
   paar elementen die nergens anders voorkomen (genummerde
   gespreksblokken, de samenvattingsregel) en die horen niet tussen
   de bord- en lijststijlen hierboven te sluipen.
   ═══════════════════════════════════════════════════════════════ */

/* Eén rustige instructieregel bovenaan; gedempte kleur zodat hij niet
   met de vragen concurreert zodra het gesprek eenmaal loopt. */
.ig-uitleg{margin:0 0 18px;font-size:12.5px;line-height:1.55;color:var(--muted)}

/* Genummerde blokkop. De dunne lijn erboven verdeelt het paneel in
   gespreksfasen — zo ziet de recruiter tijdens het bellen in één
   oogopslag waar hij is. Inter 700, géén Anton: dit is functionele
   tekst, geen paginatitel (huisstijlbrief 30 jul 2026). */
.ig-blok{display:flex;align-items:center;gap:9px;margin:22px 0 12px;
  padding-top:16px;border-top:1px solid var(--line);
  font-size:13px;font-weight:700;color:var(--ink);
  position:sticky;top:0;background:var(--paper);z-index:2}
/* Het eerste blok (0 · Feiten) volgt direct op de uitlegregel; een extra
   lijn plus marge zou daar alleen maar lucht tussen duwen. */
.ig-blok.ig-eerste{margin-top:0;padding-top:0;border-top:none}
/* Het nummer als rustig rondje met alleen een rand — kleur is betekenis,
   en een tellertje heeft er geen. */
.ig-nr{flex:0 0 auto;width:22px;height:22px;display:inline-flex;
  align-items:center;justify-content:center;border:1px solid var(--line-2);
  border-radius:50%;font-size:11.5px;font-weight:700;color:var(--txt-2)}
.ig-conclusie{background:var(--card);border:1px solid var(--olive-l);border-radius:var(--r);padding:16px}
.ig-conclusie .f-row:last-child{margin-bottom:0}

/* Brede uitvoering: het paneel moet zowel het formulier als een leesbare
   cv-kolom ernaast bieden. Alleen déze drawer wordt breder — de klasse
   wordt in onOpen() van intakeForm() toegevoegd, andere drawers raakt
   dit niet (zie .drawer in css/base.css). */
.drawer.ig-breed{width:min(1400px,97vw)}
.drawer-b.ig-split{display:flex;padding:0;overflow:hidden}
.ig-col-form{flex:1 1 auto;min-width:0;overflow-y:auto;padding:20px 22px 60px}
.ig-col-cv{flex:0 0 360px;overflow-y:auto;padding:18px;
  border-left:1px solid var(--line);background:var(--card-2)}
.ig-cv-kop{margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ig-cv-naam{font-family:var(--body);font-weight:600;font-size:13px;color:var(--ink);margin:0}
.ig-cv-blok{margin-top:14px}
.ig-cv-blok .label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;
  letter-spacing:.04em;color:var(--muted);margin-bottom:4px}
@media (max-width:900px){
  .drawer.ig-breed{width:100vw}
  .drawer-b.ig-split{flex-direction:column;overflow-y:auto}
  .ig-col-form{overflow-y:visible;padding:16px 14px 30px}
  .ig-col-cv{flex:0 0 auto;overflow-y:visible;border-left:0;border-top:0;border-bottom:1px solid var(--line);order:-1}
}

/* ── Herontwerp 3 sep 2026: belafspraken-regel + actieve-filters-rij ── */
.rc-doenbel{background:var(--amber-bg);border-color:var(--amber-line);margin-bottom:8px}
.rc-actief{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin:-4px 0 12px}
.rc-fchip{background:var(--olive);border-color:var(--olive);color:#fff;cursor:pointer}
.rc-fchip:hover{filter:brightness(1.12)}
.rc-fchip b{margin-left:4px;opacity:.75}