/* ═══════════════════════════════════════════════════════════════
   OPENSTAANDE VACATURES (+ HOT)

   Twee standen, één rustige vorm. Op de openstaande kaart draagt
   maar één ding kleur: de waarschuwing als er iets vastloopt. Het
   getal "nog te vullen" is groot genoeg om zonder kleur op te vallen.
   De verdeelbalk is de uitzondering — daar ís kleur de betekenis
   (olijf = geplaatst, blauw = in procedure, grijs = nog open).
   ═══════════════════════════════════════════════════════════════ */

/* ═══ OPENSTAAND — de lijst ═══════════════════════════════════ */

.ov-bar{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.ov-bar select{max-width:190px}
.ov-uitleg{max-width:74ch;margin:-4px 0 16px}

/* auto-fit: op een teamscherm komen er kolommen bij in plaats van
   witruimte, terwijl de kaart zelf ongeveer even breed blijft.
   Kaarten in dezelfde rij zijn even hoog (geen align-items:start), zodat de
   voetregel overal op dezelfde hoogte staat en het oog die kan aflopen. */
.ovlijst{display:grid;gap:14px;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}

.ovcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:16px 18px 14px;cursor:pointer;transition:border-color .12s;
  display:flex;flex-direction:column;min-width:0;
}
.ovcard:hover{border-color:var(--olive-l)}
.ovcard:focus-visible{outline:2px solid var(--olive);outline-offset:2px}
/* De 3px links komt van .frand (base.css) en draagt het knelniveau; hier
   alleen de padding terugnemen zodat de tekst niet verspringt. "Hot" zit in
   de chip bovenin en heeft geen eigen rand meer nodig. */
.ovcard.frand{padding-left:15px}

.ov-kop{display:flex;align-items:flex-start;gap:14px}
.ov-wie{flex:1;min-width:0}
.ov-functie{
  margin:0;font-family:var(--body);font-size:16px;font-weight:700;
  line-height:1.3;letter-spacing:-.01em;color:var(--ink);
}
.ov-klant{font-size:12.5px;color:var(--txt-2);margin-top:3px}
.ov-klant .ov-punt{color:var(--line-2);margin:0 1px}

/* Het hoofdgetal: hoeveel er nog te vullen zijn. Grote kerncijfers
   mogen Anton (huisstijl); de regel eronder blijft Inter. */
.ov-vullen{display:flex;flex-direction:column;align-items:flex-end;flex:0 0 auto;text-align:right}
.ov-getal{font-family:var(--disp);font-weight:400;font-size:27px;line-height:1;
  letter-spacing:.5px;color:var(--ink)}
.ov-vlbl{font-size:11px;color:var(--txt-2);margin-top:4px;white-space:nowrap}

.ov-chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:11px}
.ov-chips .chip{font-size:11px;padding:1px 9px}

/* Verdeelbalk: geplaatst · in procedure · nog open, als deel van het
   gevraagde aantal. Eén blik en je ziet waar de ruimte zit. */
.ov-balk{display:flex;height:8px;border-radius:99px;overflow:hidden;
  background:var(--card-2);gap:2px;margin:12px 0 10px}
.ov-balk i{display:block;height:100%;border-radius:99px;min-width:6px}
.ov-balk i.vol{background:var(--olive)}
.ov-balk i.proc{background:var(--blue)}
.ov-balk i.leeg{background:var(--line-2)}

.ov-voet{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:12px;color:var(--txt-2);margin-top:auto}
.ov-voet .ov-stand{color:var(--ink)}
/* Scheidingsteken in plaats van alleen een gat: "3 in procedure" en
   "30 dagen open" zijn twee verschillende dingen. */
.ov-voet .ov-meta::before{content:'·';margin-right:9px;color:var(--line-2)}
.ov-voet .ov-meta.oud{color:var(--ink);font-weight:600}
.ov-knel{margin-left:auto;font-size:11px;padding:1px 9px}

/* "Hot maken" hoort bij de kaart maar mag hem niet volplempen: hij verschijnt
   als je erover gaat. Op een apparaat zonder muis is er geen hover-stand, dus
   daar staat de knop er gewoon. */
.ov-hotknop{margin-left:auto;opacity:0;transition:opacity .12s;padding:3px 9px;font-size:11.5px}
.ov-voet > .ov-knel ~ .ov-hotknop{margin-left:0}
.ovcard:hover .ov-hotknop,.ovcard:focus-within .ov-hotknop,.ov-hotknop:focus-visible{opacity:1}
@media (hover:none){ .ov-hotknop{opacity:1} }

/* ── Wat buiten de lijst valt: on hold en vol-maar-open ──────── */
.ov-rest{margin-top:24px;border-top:1px solid var(--line);padding-top:10px;max-width:960px}
.ov-restlijst{margin-top:6px}
.ov-restrij{
  display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 -10px;
  border-radius:var(--r-s);cursor:pointer;font-size:13px;
}
.ov-restrij:hover{background:var(--card-2)}
.ov-restrij b{font-weight:600;color:var(--ink)}
.ov-restrij .meta{flex:1;min-width:0}
.ov-restrij .chip{font-size:11px;padding:1px 9px}
.ov-ga{color:var(--muted);font-size:13px}
.ov-restrij:hover .ov-ga{color:var(--olive)}

/* ═══ DETAILPAGINA ════════════════════════════════════════════ */

.ovd{display:flex;flex-direction:column;gap:16px}
.ovd-let{margin:0}
.ovd-kpi{gap:12px}

/* Links wat je leest (kandidaten, matches, de tekst), rechts wat je
   opzoekt (feiten, hot, historie). */
.ovd-body{display:grid;gap:16px;align-items:start;
  grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.ovd-kol{display:flex;flex-direction:column;gap:16px;min-width:0}

.ovd-veld{display:flex;gap:14px;align-items:baseline;
  padding:8px 0;border-bottom:1px solid var(--line)}
.ovd-veld:last-child{border-bottom:none;padding-bottom:0}
.ovd-veld .label{flex:0 0 148px;margin:0}
.ovd-veld > span:last-child{flex:1;min-width:0;font-size:13px;color:var(--ink);
  overflow-wrap:anywhere}
.ovd-veld .meta{font-weight:400}

.ovd-tekst{margin-bottom:18px}
.ovd-tekst:last-child{margin-bottom:0}
.ovd-tekst p{margin:6px 0 0;font-size:13.5px;line-height:1.65;color:var(--txt);max-width:68ch}

.ovd-match{display:flex;flex-direction:column;gap:1px}
.ovd-mrij{display:flex;align-items:center;gap:10px;padding:8px 10px;margin:0 -10px;
  border-radius:var(--r-s);cursor:pointer}
.ovd-mrij:hover{background:var(--card-2)}
.ovd-score{
  flex:0 0 auto;min-width:32px;height:24px;padding:0 7px;border-radius:99px;
  background:var(--card-2);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  font-size:12px;color:var(--txt-2);
}
.ovd-mwie{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.ovd-mwie b{font-size:13px;font-weight:600;color:var(--ink)}
.ovd-mrij .chip{font-size:11px;padding:1px 9px}
.ovd-mrij:hover .hk-ga{color:var(--olive)}
/* Een rij met geschiedenis blijft gewoon aanklikbaar en op zijn plek — hij
   krijgt alleen een streepje en een regel eronder. Wegfilteren zou de
   beslissing voor de accountmanager nemen; dat is niet aan het scherm. */
.ovd-mrij.let{border-left:2px solid var(--amber-line);padding-left:8px}
.ovd-mrij .ovd-msig{font-size:11.5px;line-height:1.45;color:#8a5a1a;margin-top:2px}
/* Op smal scherm mag de rij twee regels worden in plaats van te knijpen. */
@media (max-width:640px){
  .ovd-mrij{align-items:flex-start}
  .ovd-mrij .ovd-msig{white-space:normal}
}

/* ═══ HOT — rustige prioriteitenkaarten ═══════════════════════ */

.hotlijst{display:flex;flex-direction:column;gap:14px;max-width:960px}

.hotcard{
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-l);
  padding:18px 22px 14px;cursor:pointer;transition:border-color .12s;
}
.hotcard:hover{border-color:var(--olive-l)}
.hotcard.drag{opacity:.4}
/* De streep links komt van .frand (base.css) en draagt het knelniveau, niet
   de prioriteit. Dat de bovenste de bovenste is, zegt het gevulde cijfer al
   (.hotcard.top .hot-nr). Padding gelijk houden zodat 3px erbij de tekst
   niet laat verspringen. */
.hotcard.frand{padding-left:19px}

/* ── Kop: prioriteit · klant/functie · deadline ─────────────── */
.hot-top{display:flex;align-items:flex-start;gap:16px}

.hot-prio{display:flex;align-items:center;gap:6px;flex:0 0 auto;padding-top:2px}
.hot-nr{
  width:28px;height:28px;border-radius:50%;border:1px solid var(--line-2);
  display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;color:var(--txt-2);background:var(--card-2);
}
.hotcard.top .hot-nr{background:var(--olive);border-color:var(--olive);color:#fff}
.hot-pijlen{display:flex;flex-direction:column;gap:1px}
.hot-pijlen .pijl{
  background:none;border:none;padding:0 4px;font-size:9px;line-height:1.2;
  color:var(--muted);cursor:pointer;border-radius:4px;font-family:var(--body);
}
.hot-pijlen .pijl:hover{color:var(--olive);background:var(--card-2)}
.hot-pijlen .pijl:disabled{opacity:.25;cursor:default;background:none;color:var(--muted)}

.hot-wie{flex:1;min-width:0}
.hot-titel{font-size:16.5px;font-weight:700;color:var(--ink);line-height:1.3;letter-spacing:-.01em}
.hot-sub{font-size:12.5px;color:var(--txt-2);margin-top:2px}

/* Deadline rechts — de enige plek met signaalkleur op de kaart. */
.hot-deadline{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:0 0 auto;padding-top:1px}
.hot-deadline .dl-rest{font-size:13.5px;font-weight:700;color:var(--txt-2);white-space:nowrap}
.hot-deadline .dl-datum{font-size:11.5px;color:var(--muted)}
.hot-deadline.amber .dl-rest{color:var(--amber)}
.hot-deadline.rood .dl-rest{color:var(--red)}

/* ── Doel als zin + voortgang ───────────────────────────────── */
.hot-doel{margin:14px 0 0;padding-left:64px}
.hot-doel .doel-tekst{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:6px}
.hot-doel .doel-zin{font-size:13.5px;font-weight:600;color:var(--ink)}
.hot-doel .doel-status{font-size:12.5px;color:var(--txt-2)}
.hot-doel .doel-status .num{color:var(--ink)}
.hot-doel .doel-ok{color:var(--olive);font-weight:600}
.hot-doel .bar{max-width:340px}
.hot-doel.gehaald .doel-zin{color:var(--txt-2);font-weight:500}
.hot-doel.gehaald .bar > i{background:var(--olive)}

/* ── Mini-funnel + afspraak + acties ────────────────────────── */
.hot-onder{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:12px;padding-left:64px}
.hot-funnel{display:flex;flex-direction:column;gap:6px;min-width:0}
/* width:100% + een max-width uit de module: nooit breder dan de kaart. */
.hot-segbar{display:flex;height:6px;border-radius:99px;overflow:hidden;width:100%;max-width:340px;gap:2px}
.hot-segbar i{display:block;height:100%;border-radius:99px;min-width:8px}
.hot-funtekst{display:flex;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--txt-2)}
.hot-funtekst .leeg{color:var(--muted)}
.hot-funtekst span{display:inline-flex;align-items:center;gap:5px}
.hot-dot{width:8px;height:8px;border-radius:50%;flex:0 0 8px;display:inline-block}
.hot-afspraak{font-size:12px;color:var(--txt-2)}
/* `flex:0 0 auto` liet deze knoppenrij niet krimpen onder zijn eigen
   max-content-breedte (365px), terwijl er in de kaart maar 303px is. De
   eigen flex-wrap sloeg daardoor nooit aan en de pagina schoof 29px opzij
   op een telefoon — de knop 'Niet meer hot' viel buiten beeld. */
.hot-acties{margin-left:auto;display:flex;gap:2px;flex:0 1 auto;flex-wrap:wrap;
  min-width:0;max-width:100%}

/* ── Kandidaatrijen (uitklap én detailpagina) ───────────────── */
.hot-uitklap{border-top:1px solid var(--line);margin-top:14px;padding:12px 0 2px 64px}
.hk-row{
  display:flex;align-items:center;gap:10px;padding:7px 10px;margin:0 -10px;
  border-radius:var(--r-s);cursor:pointer;
}
.hk-row:hover{background:var(--card-2)}
.hk-row b{font-size:13px;font-weight:600;color:var(--ink)}
.hk-row .chip{font-size:11px;padding:1px 8px}
.hk-row .hk-actie{font-size:12px;color:var(--muted);margin-left:auto;text-align:right}
.hk-row .hk-ga{color:var(--muted);font-size:13px}
.hk-row:hover .hk-ga{color:var(--olive)}
.hk-row.af{opacity:.55}

/* ── Modal: vacature kiezen + zin-preview ───────────────────── */
.hm-lijst{display:flex;flex-direction:column;gap:6px;max-height:340px;overflow-y:auto}
.hm-item{
  display:flex;align-items:center;gap:10px;justify-content:space-between;
  border:1px solid var(--line);border-radius:var(--r);padding:10px 14px;cursor:pointer;
  transition:border-color .12s,background .12s;
}
.hm-item:hover{border-color:var(--olive-l);background:var(--card-2)}
.hm-item b{font-size:13.5px}
.hm-item .hk-ga{color:var(--muted)}
.hi-preview{
  margin-top:4px;background:var(--card-2);border:1px solid var(--line);
  border-radius:var(--r-s);padding:9px 12px;font-size:13px;font-weight:600;color:var(--olive);
}
.hi-preview .meta{font-weight:400}

/* ── Breed scherm: hot-kaarten naast elkaar ─────────────────────
   960px was de leesbreedte van één kaart; op een teamscherm betekende dat
   dat je nog steeds maar drie vacatures tegelijk zag met de helft van het
   scherm leeg ernaast. align-items:start zodat een uitgeklapte kaart zijn
   buurman niet oprekt. */
@media (min-width:1500px){
  .hotlijst{max-width:none;display:grid;align-items:start;
    grid-template-columns:repeat(auto-fit,minmax(500px,1fr))}
}

/* ── Detailpagina op een smaller scherm ─────────────────────── */
@media (max-width:1100px){
  .ovd-body{grid-template-columns:1fr}
}

/* ── Mobiel ─────────────────────────────────────────────────── */
@media (max-width:700px){
  .ov-bar{gap:8px}
  .ov-bar .searchbox{flex:1 1 100%}
  .ov-bar select{max-width:none;flex:1 1 100%}
  .ov-knel{margin-left:0}
  .ovd-veld{flex-direction:column;gap:3px}
  .ovd-veld .label{flex:none}
  .hot-top{flex-wrap:wrap}
  .hot-deadline{align-items:flex-start;width:100%;flex-direction:row;gap:8px;align-items:baseline;padding-left:64px}
  .hot-doel,.hot-onder,.hot-uitklap{padding-left:0}
  .hot-acties{margin-left:0}
}

/* ─── De vacaturekaart, variant B (3 aug 2026) ────────────────────
   Werkkolom links die blijft staan, dossier met tabbladen rechts. Er is
   bewust geen tabblad Overzicht: de linkerkolom ís het overzicht, en met
   zo'n tabblad zou alles twee keer op het scherm staan. */
.ovd-b{display:grid;grid-template-columns:290px minmax(0,1fr);gap:16px;align-items:start}
.ovd-werk{position:sticky;top:14px;display:flex;flex-direction:column;gap:12px}
.ovd-blok .card-b{padding:13px 15px}
.ovd-groot{font-family:var(--disp);font-weight:400;font-size:34px;line-height:1;letter-spacing:.5px;margin-top:2px}
.ovd-minis{margin-top:6px}
.ovd-mini{display:flex;justify-content:space-between;gap:10px;font-size:12.5px;padding:4px 0;border-bottom:1px solid #eef0e4}
.ovd-mini:last-child{border-bottom:none}
.ovd-mini span:first-child{color:var(--muted)}
.ovd-mini span:last-child{font-weight:600;text-align:right;min-width:0}
.ovd-mini a{font-weight:600}
.ovd-namen{display:flex;flex-direction:column;gap:6px;margin-top:7px}
.ovd-naam{display:flex;justify-content:space-between;gap:8px;align-items:baseline;cursor:pointer}
.ovd-naam b{font-size:13px;font-weight:600}
.ovd-naam:hover b{color:var(--olive)}
.ovd-acties{flex-wrap:wrap}

.ovd-doss{overflow:visible}
.ovd-tabs{padding:0 16px;background:var(--well-2);border-radius:var(--r) var(--r) 0 0;margin-bottom:0}
.ovd-binnen{padding:16px 18px}
.ovd-kols2{display:grid;grid-template-columns:1fr 1fr;gap:22px}

/* Eén kandidaatregel op het tabblad — zelfde vorm als hk-row, maar met de
   fasrand links (gedeelde kleurtaal). */
.ovd-lijstje{overflow:hidden}
.ovd-krij{display:flex;align-items:center;gap:9px;padding:9px 13px;border-bottom:1px solid #eef0e4;cursor:pointer;font-size:13px;flex-wrap:wrap}
.ovd-krij:last-child{border-bottom:none}
.ovd-krij:hover{background:#f7f9f1}
.ovd-krij b{font-weight:600}
.ovd-krij.af{opacity:.75;cursor:pointer}
.ovd-afval{display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--well)}

/* Vacaturetekst: de blokken zoals ze op de website staan. */
.ovd-tblok{border:1px solid var(--line);border-radius:var(--r-s);padding:12px 14px;margin-bottom:10px;background:var(--card)}
.ovd-tblokkop{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:7px}
.ovd-tblok p{margin:0;font-size:13px}
.ovd-tblok ul{margin:0;padding-left:18px;font-size:13px}
.ovd-tblok ul li{margin:2px 0}

@media (max-width:1000px){
  .ovd-b{grid-template-columns:1fr}
  .ovd-werk{position:static}
  .ovd-kols2{grid-template-columns:1fr}
}

/* Inline bewerken op de vacaturekaart: een waarde is klikbaar, en dat mag je
   zien — lichte hover, potloodloze uitnodiging via de cursor. Het invoerveld
   neemt de plek van de waarde in; geen formulier ertussen. */
.ovd-klik{cursor:pointer;border-radius:6px;margin:-2px -6px;padding:2px 6px;transition:background .1s}
.ovd-klik:hover,.ovd-klik:focus-visible{background:var(--card-2)}
.ovd-inline{
  width:100%;font-family:var(--body);font-size:13px;color:var(--ink);
  border:1px solid var(--olive-l);border-radius:6px;padding:5px 8px;background:#fff;
}
textarea.ovd-inline{resize:vertical;line-height:1.5}
.ovd-tinhoud{cursor:pointer;border-radius:6px;margin:-4px -6px;padding:4px 6px}
.ovd-tinhoud:hover{background:var(--card-2)}

/* ─── Merkkop op de vacaturekaart (optie 2, 4 aug 2026) ──────────
   Kop in de verdiepte tint met functie + kerngetal; het lijf is wit. Hot
   draagt een zachte olijftint — Tjeerd wilde het olijf "een stuk zachter,
   zoals de zijbalk", dus geen donker vlak en dus ook geen lime: het
   hot-signaal is een gevulde olijven pil met witte tekst. */
.ovcard.ov2{padding:0;overflow:hidden}
.ovcard.ov2.frand{padding-left:0}
/* Vacatures: rustige crème kop — de oranje kop kleurde élke kaart en dan
   betekent kleur niets meer (Tjeerd, 4 aug 2026, met visualisatie
   afgestemd). Urgentie zit in de linkerrand (rood hot, amber knelt, grijs
   incompleet); de kop draagt alleen nog de inhoud. */
.ov2-kop{
  background:var(--well-2);border-bottom:1px solid var(--line);
  padding:12px 16px;display:flex;align-items:center;gap:14px;
}
.ov2-wie{flex:1;min-width:0}
.ov2-kop .ov-getal{color:var(--ink)}
/* Hot is de pil: rood vlak, witte tekst — het enige rood op het bord. */
.ov2-kop.hot{background:var(--well-2)}
.ov2-hotchip{
  display:inline-flex;align-items:center;background:var(--red,#c0453b);color:#fff;
  border-radius:999px;padding:1px 9px;font-size:10.5px;font-weight:800;margin-top:6px;
}
.ov2-lijf{padding:12px 16px 13px;display:flex;flex-direction:column;flex:1}
.ov2-lijf .ov-chips{margin-top:0;margin-bottom:2px}
.ov2-lijf .ov-voet{margin-top:auto;padding-top:9px}

/* Klik-om-te-bewerken op de vacaturekaart-zijbalk. De stippellijn onder de
   waarde is de uitnodiging ("dit kún je aanpassen") zonder overal knopjes
   neer te zetten — de kaart moet rustig blijven. */
.ovd-edit{cursor:pointer;border-bottom:1px dashed var(--line-2,#c9c9bf)}
.ovd-edit:hover{border-bottom-color:var(--olive,#3D6400);color:var(--olive,#3D6400)}
.ovd-inp{
  font:inherit;color:var(--ink);background:var(--paper,#fff);
  border:1px solid var(--olive,#3D6400);border-radius:6px;
  padding:2px 6px;max-width:180px;
}

/* Verwijderen: gedempt tot je eroverheen gaat — pas dan kleurt hij naar
   het rood van "dit is definitief". Zo staat hij er wel, maar schreeuwt
   hij niet. */
.ovd-weg:hover{color:var(--red,#c0453b);border-color:var(--red,#c0453b)}

/* Bijzonderheden op de vacaturekaart (5 aug 2026): de vacature-notities
   in beeld in plaats van verstopt achter "+ Notitie" en Historie. */
.ovd-bijzlijst{margin-top:10px;display:flex;flex-direction:column;gap:2px}
.ovd-bijzrij{padding:6px 0;border-bottom:1px solid var(--line);font-size:12.5px;line-height:1.45}
.ovd-bijzrij:last-child{border-bottom:none}
.ovd-bijzrij .meta{display:block;margin-top:1px;font-size:11px}

/* De vacaturetekst als leesbaar document in plaats van een tekstveld.
   Smalle kolom (~70 tekens) omdat lange regels slecht lezen; koppen in
   de huisstijl-olijf zodat je de structuur ziet zonder te lezen. */
.ovd-doc{max-width:64ch;font-size:14px;line-height:1.62}
.ovd-doc p{margin:0 0 11px}
.ovd-doc .ovd-doc-k{
  font-size:11.5px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;
  color:var(--olive,#3D6400);margin:20px 0 7px;padding-bottom:4px;
  border-bottom:1px solid var(--line);
}
.ovd-doc .ovd-doc-k:first-child{margin-top:0}
.ovd-doc .ovd-doc-l{margin:0 0 11px;padding-left:20px}
.ovd-doc .ovd-doc-l li{margin:2px 0}

/* Snel vastleggen op de vacaturekaart — zelfde knoppen als op de
   relatiekaart, zodat de AM niet hoeft te wisselen van scherm. */
.ovd-uit{margin-bottom:10px;flex-wrap:wrap}
.ovd-uitveld{
  background:var(--well-2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;margin-bottom:12px;
}
.ovd-uitveld textarea{width:100%;resize:vertical}

/* ─── O&O-sessies op de vacaturekaart (7 aug 2026) ───────────────
   Eén sessie = één kaart, met de datum als kop. Rustig gehouden: het
   enige wat kleur draagt is de bezetting (amber = er moet nog iemand
   bij, olijfgroen = de streef van vier is gehaald). Een sessie die al
   geweest is dooft: hij hoort bij de geschiedenis van de vacature,
   niet bij het werk van vandaag. */
.oo-lijst{display:flex;flex-direction:column;gap:12px;margin-bottom:16px}
.oo-sessie{border-color:var(--line)}
.oo-sessie.geweest{background:var(--well);opacity:.78}

.oo-kop{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap}
.oo-wanneer{font-size:14.5px;font-weight:700;color:var(--ink);line-height:1.3}
.oo-kop .meta{margin-top:2px}

/* De functies op de sessie. De vacature waar je nú op staat krijgt de
   olijfrand, zodat je in één blik ziet welke van de twee de jouwe is. */
.oo-vacs{margin-top:9px}
.oo-vac.nu{border-color:var(--olive);color:var(--olive)}

/* Deelnemers: dunne scheiding, geen kader om elke regel — vier namen
   moeten als lijstje te lezen zijn, niet als vier kaarten. */
.oo-deel{margin-top:11px;padding-top:9px;border-top:1px solid var(--line);
  display:flex;flex-direction:column}
.oo-drij{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:6px 0;border-bottom:1px solid var(--line)}
.oo-drij:last-child{border-bottom:none}
.oo-naam{font-weight:700;font-size:13.5px;color:var(--ink);text-decoration:none;
  border-bottom:1px dashed var(--line-2)}
.oo-naam:hover{color:var(--olive);border-bottom-color:var(--olive)}
/* Loskoppelen is de uitzondering: gedempt tot je erover gaat. */
.oo-los{opacity:.7}
.oo-drij:hover .oo-los{opacity:1}
.oo-acties{margin-top:12px}

/* Extra vacatures in het planvenster: een vinklijstje in het verdiepte
   vlak, zodat het als één keuze leest en niet als losse regels. */
.oo-extra{background:var(--well);border:1px solid var(--line);border-radius:var(--r-s);
  padding:6px 10px;margin-bottom:6px}
.oo-extra .check:not(:last-child){border-bottom:1px solid var(--line)}

/* Kandidaat kiezen. Eén regel per persoon: naam links, waar hij vandaan
   komt eronder, de keuze voor welke functie en de knop rechts. */
/* Bewust NIET wrappend: met wrap sprong de knop bij een lange woonplaats naar
   een tweede regel en stond hij bij de buurman weer rechts — acht rijen die
   allemaal net iets anders zijn, lezen slechter dan acht gelijke rijen. De
   naamkolom krimpt in plaats daarvan en krijgt een beletselteken. */
.oo-kies{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;
  padding:8px 0;border-bottom:1px solid var(--line)}
.oo-kies:last-child{border-bottom:none}
.oo-kwie{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;overflow:hidden}
.oo-kwie b,.oo-kwie .meta{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.oo-kwie .meta{font-size:11.5px;margin-top:1px}
/* Een vaste breedte in plaats van "zo breed als de inhoud": de browser meet
   die inhoud vóórdat het webfont geladen is en kapte daardoor de laatste
   letter van "Productiemedewerker" af — precies het woord dat je hier moet
   lezen. Vast houdt de keuzelijsten bovendien onder elkaar uitgelijnd. */
.oo-kies select{flex:0 0 186px;width:186px;max-width:100%;padding:5px 8px;font-size:12.5px}
.oo-kies .btn{flex:0 0 auto}