/* Stijl voor de module Klanttrajecten (bestandsnaam blijft pijplijn):
   het bord én de lijstweergave. De module hergebruikt bewust de
   rc-*-frameklassen (rc-bar, rc-pad, rc-fil) uit css/recruitment.css
   zodat beide schermen er identiek uitzien; hieronder staat alles wat
   alleen dit scherm nodig heeft. */

/* ─── Bord ────────────────────────────────────────────────────
   De uitvalstrook naast het bord is er per 31 juli 2026 uit. Twee getallen
   in een eigen kolom kostten een zesde van de breedte, en als sleepdoel gaf
   het uitval de status van een fase waar je iemand naartoe verplaatst. De
   fase volgt uit wat er bij de klant gebeurt; afvallen leg je vast op de
   kaart, waar ook de reden wordt gevraagd. Wat overblijft is de regel
   .pp-uitregel onder het bord: de stand, meer niet. */
.rc-bordwrap{display:flex;align-items:flex-start;gap:0}
.rc-bordwrap .board{flex:1;min-width:0;padding:4px 12px 30px 26px}
/* Kolomhoogte: precies tot onder aan het scherm, zodat je binnen een kolom
   scrolt in plaats van de hele pagina. Dat getal stond hier hardgecodeerd op
   330px en klopte alleen zolang de kop even hoog bleef; de regel "klaar om
   voor te stellen" duwde het bord er meteen doorheen. tekenKolommen() meet nu
   waar het bord begint en zet --bcolmax; de waarde hieronder is alleen de
   terugval als dat (nog) niet gebeurd is. max() houdt de kolom bruikbaar op
   een smal scherm, waar het bord ver naar beneden staat. */
.rc .bcol{max-height:max(280px, var(--bcolmax, calc(100vh - 330px)))}
/* Uitval onder het bord: dezelfde rustige toon als .pp-klaarregel. */
.pp-uitregel{margin:0;padding:0 26px 26px;display:flex;align-items:center;gap:10px;
  font-size:12.5px;line-height:1.5;flex-wrap:wrap}
.pp-uitregel:empty{display:none}
.pp-uitregel b.num{color:var(--ink);font-weight:600}

.rc-leegkol{font-size:12px;color:var(--muted);text-align:center;padding:16px 8px;line-height:1.5}
/* Toelichting onder de filters: kandidaten zonder intake of met een fase die
   niet meer bestaat horen niet op dit bord. Opruimwerk, dus meta-tekst. */
.rc-geenfase:not(:empty){margin-top:8px}
.rc-geenfase a{color:var(--olive);font-weight:600}

/* ─── Klaar om voor te stellen ────────────────────────────────────
   Het bord begint bij Voorgesteld, dus wie de intake gehad heeft maar nog
   aan geen klant hangt komt in géén kolom voor. Deze regel houdt die groep
   zichtbaar en klikbaar. Bewust een rustige kaart en geen alarm: het is
   werkvoorraad, geen fout. Eén accent (olijf) op het getal. */
.pp-klaar:not(:empty){margin-top:2px}
/* Eén regel tekst met een link, dezelfde vorm als de hint eronder. Geen
   kader: het is werkvoorraad om te weten, geen knop om op te drukken. */
.pp-klaarregel{margin:0;font-size:12.5px;line-height:1.5;color:var(--txt-2)}
.pp-klaarregel b{color:var(--ink);font-weight:600}
.pp-klaarregel b.num{color:var(--olive)}

/* ─── Lijstweergave ───────────────────────────────────────────────
   Dezelfde selectie als het bord, maar sorteerbaar. Bewust géén
   max-breedte: het team werkt op een groot scherm, en een tabel die op
   2000px halverwege ophoudt terwijl de KPI-balk en de filterbalk er wél
   doorlopen ziet er onaf uit. De naamkolom neemt de extra ruimte op. */
.pp-lijstwrap{padding-bottom:30px}
.pp-tbl th:first-child,.pp-tbl td:first-child{width:24%}
.pp-lijstkop{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  flex-wrap:wrap;margin-bottom:8px}
.pp-tbl th{white-space:nowrap}
.pp-tbl td{padding:10px 16px}
.pp-tbl .pp-fase{
  display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);
  background:var(--card-2);border-radius:999px;padding:3px 11px 3px 9px;cursor:pointer;
  font-family:var(--body);font-size:12px;font-weight:600;color:var(--ink);white-space:nowrap;
}
.pp-tbl .pp-fase:hover{border-color:var(--olive-l)}
/* Stilstand: dezelfde grenzen als de chip op de kaart (4 dagen opletten,
   10 dagen actie), zodat bord en lijst hetzelfde zeggen. */
.pp-tbl .pp-let{color:var(--amber);font-weight:600}
.pp-tbl .pp-stil{color:var(--red);font-weight:600}
.pp-tbl .pp-mist{color:var(--muted);font-style:italic}
.pp-tbl .pp-eerst .num{font-weight:600;color:var(--txt-2)}
.pp-tbl .pp-eerst small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.pp-tbl .pp-eerst.vandaag .num,.pp-tbl .pp-eerst.morgen .num,.pp-tbl .pp-eerst.start .num{color:var(--green)}
.pp-tbl .pp-eerst.gemist .num{color:var(--red)}
.pp-tbl tr.pp-grprij td{background:var(--card-2);font-size:11.5px;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;color:var(--txt-2);padding:7px 16px}
.pp-tbl tr.pp-grprij:hover td{background:var(--card-2)}
.pp-lijstvoet{display:flex;justify-content:space-between;align-items:center;gap:16px;
  flex-wrap:wrap;margin-top:12px}
.rc-rec{background:var(--card-2);border:1px solid var(--line);border-radius:5px;font-size:10px;
  font-weight:600;color:var(--txt-2);padding:2px 5px;letter-spacing:.03em;flex:0 0 auto}
.bcard .bc-act{margin-top:7px;font-size:11.5px;color:var(--txt-2);border-top:1px solid var(--line);padding-top:6px}
.bcard .bc-act.over{color:var(--txt-2);font-weight:600}
.bcard .rc-intakebtn{margin-top:8px;width:100%;justify-content:center;padding:4px 8px;font-size:11.5px}

/* ─── Kaart: afspraak/start-regel + vandaag/gemist ───────────── */
.rc-when{margin-top:7px;font-size:12px;font-weight:600;color:var(--txt-2)}
.rc-when.vandaag{color:var(--green)}
.rc-when.morgen{color:var(--green)}
/* Gemist: het wóórd zegt het al — geen rood ("de rode signalen zijn teveel,
   houd het clean", Tjeerd 4 aug 2026). Zelfde besluit als de dagenteller. */
.rc-when.gemist{color:var(--txt-2)}
.rc-when.start{color:var(--green)}
.rc-when.verw{font-weight:500;color:var(--muted);margin-top:3px}
/* Vandaag = dezelfde fasekleur, één slag dieper (Tjeerd, 4 aug 2026: "een
   iets diepere kleur in dezelfde kleur" — geen groen kader meer, dat was
   een tweede kleurtaal). Kop en kaart verdiepen allebei; de kiel blijft. */
.bcard.bck.vandaag{background:color-mix(in srgb, var(--ph, #9aa3b2) 9%, #fff);
  border-color:color-mix(in srgb, var(--ph, #9aa3b2) 45%, #fff)}
.bcard.bck.vandaag .bc-kop{background:color-mix(in srgb, var(--ph, #9aa3b2) 32%, #fff)}
/* Geen rood kader meer om een gemiste afspraak — de regel op de kaart
   draagt het woord 'gemist' al. */
.bcard.gemist{border-color:var(--line)}

/* ─── Week-indeling, klantgroepen en startnotitie in kolommen ── */
.rc-wdiv{font-size:10.5px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;
  color:var(--muted);padding:6px 2px 2px;border-bottom:1px solid var(--line);margin-top:2px}
.rc-wdiv.nu{color:var(--olive);border-bottom-color:var(--olive-l)}
.rc-startnote{font-size:12px;font-weight:600;color:var(--green);background:var(--green-bg);
  border:1px solid var(--green-line);border-radius:var(--r-s);padding:5px 9px}
/* Zelfde vorm, maar dan als aandachtspunt: kandidaten in Voorgesteld zonder
   geplande afspraak — die wachten op de klant. (Deze melding hing eerder aan
   de Intake-kolom, die sinds de splitsing niet meer op dit bord staat.) */
.rc-letnote{font-size:12px;font-weight:600;color:var(--amber);background:var(--amber-bg);
  border:1px solid var(--amber-line);border-radius:var(--r-s);padding:5px 9px}
.rc-grp{display:flex;justify-content:space-between;align-items:center;font-size:11px;
  font-weight:600;color:var(--txt-2);padding:5px 2px 2px;border-bottom:1px solid var(--line)}

/* ─── O&O-sessiekop in de kolom ──────────────────────────────── */
.rc-sess{display:flex;justify-content:space-between;align-items:center;gap:8px;width:100%;
  text-align:left;border:1px solid var(--line);border-left:3px solid var(--line-2);
  background:var(--card);border-radius:var(--r-s);padding:7px 10px;cursor:pointer;font-family:var(--body)}
.rc-sess span{font-size:12px;font-weight:600;color:var(--ink);min-width:0}
.rc-sess small{display:block;font-weight:500;font-size:11px;color:var(--muted)}
.rc-sess b{font-size:12px;flex:0 0 auto}
.rc-sess:hover{border-color:var(--olive-l)}
.rc-sess.goed{border-left-color:var(--green)}
.rc-sess.matig{border-left-color:var(--amber)}
.rc-sess.laag{border-left-color:var(--red)}

/* ─── Compact/ruim-weergave ──────────────────────────────────── */
.rc-bordwrap.compact .bcol{flex-basis:212px;width:212px}
.rc-bordwrap.compact .bcard{padding:7px 9px;border-radius:8px}
.rc-bordwrap.compact .bc-n{font-size:12.5px}
.rc-bordwrap.compact .bc-s{font-size:11px}
.rc-bordwrap.compact .bc-f{margin-top:5px;gap:4px}
.rc-bordwrap.compact .bc-f .chip{font-size:10px;padding:0 6px}
.rc-bordwrap.compact .rc-when{margin-top:5px;font-size:11px}
.rc-bordwrap.compact .bc-act{margin-top:5px;padding-top:4px;font-size:11px}
.rc-bordwrap.compact .rc-intakebtn{margin-top:5px;padding:2px 6px;font-size:10.5px}

/* ─── Fase-picker (mobiel: tikken in plaats van slepen) ──────── */
.rc-move{display:none;margin-top:8px;width:100%;justify-content:center;padding:4px 8px;font-size:11.5px}
.rc-fasepick{display:flex;flex-direction:column;gap:6px}
.rc-fasepick 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;
  font-size:13px;font-weight:600;color:var(--ink);cursor:pointer;font-family:var(--body)}
.rc-fasepick button:hover{border-color:var(--olive-l)}
.rc-fasepick button.nu{background:var(--card-2)}
.rc-fasepick button .meta{margin-left:auto}

/* ─── Mobiel ─────────────────────────────────────────────────── */
@media (max-width:900px){
  .rc-move{display:inline-flex}
  .rc-bordwrap{flex-direction:column}
  /* align-self:stretch overruled de align-items:flex-start van de wrapper.
     Zonder dat werd het bord in kolomrichting zo breed als al zijn kolommen
     samen (±3000px) en kreeg de héle pagina een horizontale schuifbalk; nu
     schuift alleen het bord zelf, zoals op desktop. */
  .rc-bordwrap .board{padding:4px 14px 16px;align-self:stretch;width:100%}
  .pp-uitregel{padding:0 14px 20px}
  /* De tabel schuift horizontaal in .tblwrap; de kolommen die het smalst
     dragen (woonplaats-subregel, AM) mogen dan gewoon meeschuiven. */
  .pp-lijstwrap{padding-bottom:24px}
  .pp-lijstkop{gap:4px}
  .pp-tbl td,.pp-tbl th{white-space:nowrap}
}

/* ─── Sleepdoel "Geplaatst" ──────────────────────────────────────
   Geen kolom met kaarten maar een doel: smaller dan de echte kolommen en
   gedimd, zodat hij niet meedingt naar aandacht — tot je sleept en de
   bestaande .over-stijl hem laat oplichten. */
.rc .bcol.rb-plaatsdoel{flex:0 0 148px;width:148px;border-style:dashed;background:transparent}
.rc .bcol.rb-plaatsdoel .bcol-h{border-bottom-style:dashed}
.rc .bcol.rb-plaatsdoel .cnt{background:var(--olive,#3D6400)}
.rb-plaatsuitleg{font-size:12px;line-height:1.5;color:var(--muted)}
.rc .bcol.rb-plaatsdoel.over{background:#dbe1c4;border-style:solid}

/* ─── Afspraken-weergave (7 aug 2026) ─────────────────────────────
   Alles wat gepland staat, op tijd, per dag gegroepeerd. Bewust een
   strakke regel en geen kaartjes: je scant hier op tijd en naam, niet op
   vorm. Vaste kolombreedtes zodat de tijden onder elkaar staan. */
.pp-ag-tel{margin:0 0 14px;display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.pp-ag-tel .num{font-size:15px;color:var(--ink)}
.pp-ag-uitleg{color:var(--muted)}
.pp-ag-dag{margin-bottom:18px}
.pp-ag-dagkop{display:flex;align-items:baseline;gap:8px;font-size:12px;font-weight:700;
  letter-spacing:.6px;text-transform:uppercase;color:var(--txt-2);
  padding:0 0 6px;border-bottom:1px solid var(--line-2);margin-bottom:2px}
.pp-ag-dagkop .num{font-weight:400;color:var(--muted);letter-spacing:0;text-transform:none}
/* Vandaag krijgt het accent — dat is de dag waar je op stuurt. */
.pp-ag-dagkop.vandaag{color:var(--olive);border-bottom-color:var(--olive)}

.pp-ag-rij{display:grid;
  grid-template-columns:58px minmax(0,1.5fr) minmax(0,1fr) 150px minmax(0,140px);
  gap:14px;align-items:center;padding:12px 14px;
  cursor:pointer;border-radius:var(--r-s)}
.pp-ag-rij:focus-visible{outline:2px solid var(--olive-l);outline-offset:-2px}
.pp-ag-tijd{font-size:14px;font-weight:700;color:var(--ink)}
.pp-ag-wie{display:flex;flex-direction:column;gap:1px;min-width:0}
.pp-ag-wie b{font-size:14px;color:var(--ink)}
.pp-ag-wie .sub{font-size:12.5px;color:var(--txt-2)}
.pp-ag-klant{font-size:13.5px;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pp-ag-fase .chip{border-width:1.5px}
.pp-ag-extra{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
/* Een sessie is geen kandidaat maar een moment met meerdere mensen —
   één streepje links zodat je hem in de rij herkent. */
.pp-ag-oo .pp-ag-wie b{letter-spacing:.2px}

@media (max-width:900px){
  .pp-ag-rij{grid-template-columns:52px minmax(0,1fr);gap:6px 10px}
  .pp-ag-klant,.pp-ag-fase,.pp-ag-extra{grid-column:2}
  .pp-ag-extra{justify-content:flex-start}
}

/* Elke afspraak is een eigen kaartje met een volle rand in de fasekleur
   (7 aug 2026). Eerder was het een lichte waas over een rij zonder rand:
   de kleur klopte, maar de regels liepen in elkaar over en de tekst werd
   er grauw van. Nu: witte kaart, gekleurde rand, dikke balk links, en de
   tekst gewoon in de leeskleuren van de rest van de app. */
.pp-ag-rij{background:var(--card);
  border:1.5px solid color-mix(in srgb, var(--fase, var(--line-2)) 45%, var(--line));
  border-left:5px solid var(--fase, var(--line-2));
  margin-bottom:7px;box-shadow:var(--sh-2)}
.pp-ag-rij:hover{border-color:var(--fase, var(--line-2));
  background:color-mix(in srgb, var(--fase, transparent) 6%, var(--card))}
/* De fasenaam draagt de kleur, maar altijd donker genoeg om te lezen: de
   lichtblauwe en gele fasekleuren zijn op wit anders te vaag. */
.pp-ag-fase{font-size:12.5px;font-weight:700;letter-spacing:.2px;
  color:color-mix(in srgb, var(--fase, var(--txt-2)) 78%, #101505)}