/* ═══════════════════════════════════════════════════════════════
   PLAATSINGEN — opmaak

   Alles komt uit css/base.css: .card, .kpi, .chip, .btn, .meta, .frand.
   Wat hier staat is uitsluitend indeling — hoe een persoonsregel is
   opgebouwd en hoeveel lucht ertussen zit.

   HET SCHERM IS OP 3 AUG 2026 OMGEBOUWD. Het bestond uit zes gestapelde
   blokken (zonder datum · deze week · later gepland · net gestart · aan het
   werk · gestopt), elk met een eigen kop, uitleg en teller. Nu is het één
   doorlopende tijdlijn met een filterbalk ervoor: de indeling die het
   systeem bedacht, is vervangen door de indeling die de gebruiker kiest.
   (Tjeerd: "het moet veel overzichtelijker zijn.")

   Eén accent: rood, voor een gemist contactmoment. Alles wat óók kleur zou
   krijgen, maakt dat rood zwakker.
   ═══════════════════════════════════════════════════════════════ */

/* Leesbreedte tot 1500px; daarboven mag het scherm zijn ruimte gebruiken.
   De ladder staat in css/base.css toegelicht — media queries kunnen geen
   custom properties lezen, dus 1500 staat hier letterlijk. */
.pl-wrap{max-width:1180px}
@media (min-width:1500px){ .pl-wrap{max-width:none} }

.pl-kpi{margin-bottom:16px}
#pl_lijsten{gap:18px}

/* ─── Filterbalk ─────────────────────────────────────────────────
   Op één regel, in de volgorde waarin je de vraag stelt: welke datum · welke
   periode · welke klant · welke vacature · en dan de schakelaars. Wrapt op
   een smal scherm; de knoppen rechts blijven bij elkaar. */
.pl-fil{margin-bottom:16px}
.pl-filrij{gap:10px;row-gap:10px;flex-wrap:wrap;align-items:center}
.pl-filrij .seg button{white-space:nowrap}
.pl-eigen{gap:7px}
.pl-eigen input[type=date]{width:auto;font-size:12.5px;padding:5px 8px}

.pl-sec .card-b{padding:14px 22px 18px}
/* De uitleg onder een sectiekop legt een keuze uit, en een keuze die je niet
   uitlegt ziet er van buiten uit als een bug. Lopende tekst houdt zijn eigen
   leesbreedte, ook op het teamscherm. */
.pl-uit{max-width:78ch;margin:0 0 12px}
.pl-leeg{margin:2px 0 0}
/* Zonder datum staat boven de tijdlijn en hoort daar niet in te verdwijnen:
   dit is het gat waar het scherm voor bestaat. */
.pl-zonder .card-h{border-left:3px solid var(--amber)}

/* ─── Eén persoon, één regel ─────────────────────────────────────
   Vier kolommen die over de hele lijst uitlijnen, zodat je verticaal kunt
   scannen: wie · waar · wat er mis is · wanneer. De datumkolom heeft een
   vaste breedte en staat rechts uitgelijnd — anders danst hij per regel mee
   met de lengte van de naam en kun je de kolom niet meer aflopen.
   Grid en geen flex: alleen zo staan de kolommen van regel tot regel op
   dezelfde x-positie. */
.pl-r{
  display:grid;
  grid-template-columns:minmax(130px,1.1fr) minmax(120px,1.4fr) minmax(0,1.3fr) 168px;
  align-items:baseline;gap:12px;
  border-top:1px solid var(--line);padding:10px 0 11px;cursor:pointer;
  transition:background .12s;
}
.pl-sec .card-b > .pl-r:first-child{border-top:none}
.pl-r:hover{background:#f7f9f1}
/* Negatieve marge + padding: de hoverstrook loopt door tot de rand van de
   kaart, zodat je hem als één rij leest en niet als een blok in het midden. */
.pl-r{margin:0 -22px;padding-left:22px;padding-right:22px}

.pl-naam{font-weight:600;font-size:14px;color:var(--ink)}
.pl-r:hover .pl-naam{color:var(--olive)}
.pl-sub{font-size:12.5px;color:var(--txt-2);min-width:0}

/* Datum + aftelling. De datum is waar je op controleert, de aftelling is wat
   je leest — vandaar de datum eerst en het aantal dagen gedempt erachter. */
.pl-datkol{text-align:right;white-space:nowrap}
.pl-start{display:inline-flex;align-items:baseline;gap:7px;white-space:nowrap}
.pl-start .pl-af{font-size:12px;color:var(--muted)}
/* Vandaag en de eerstvolgende dagen krijgen gewicht, geen kleur: dit is een
   feit dat opvalt, geen waarschuwing. */
.pl-start.nu .num,.pl-start.bijna .num{font-weight:700}
.pl-start.nu .pl-af{color:var(--txt-2);font-weight:600}
.pl-geen{font-size:12.5px;color:var(--muted);font-style:italic}
/* De tweede datum, klein eronder. Tekenen en beginnen zijn twee verschillende
   dagen en soms zit er een half jaar tussen; dat verschil stond nergens. */
.pl-ander{display:block;font-size:11px;color:var(--muted);margin-top:2px;
  font-variant-numeric:tabular-nums}

/* ─── De waarschuwingskolom ──────────────────────────────────────
   Eén melding per regel — de ergste — en de rest in de tooltip. Twee
   waarschuwingen naast elkaar en je leest er geen meer. Staat er niets mis,
   dan blijft de kolom leeg; dat is het hele punt van een vaste kolom. */
.pl-let{
  display:inline-flex;align-items:baseline;gap:7px;flex-wrap:wrap;
  font-size:12px;color:var(--txt-2);
}
.pl-let.erg{color:var(--red);font-weight:600}
.pl-letn{
  font-size:10.5px;color:var(--muted);font-weight:600;
  background:var(--card-2);border:1px solid var(--line);border-radius:999px;padding:0 6px;
}
.pl-let .btn{padding:2px 9px;font-size:11.5px}

/* ─── Scheiders in de tijdlijn ───────────────────────────────────
   Dezelfde vorm als de weekscheiders op het pijplijnbord (.rc-wdiv), zodat
   een week er hier niet anders uitziet dan daar. Bij een lange periode
   schakelt de JS naar maanden — dezelfde opmaak, andere tekst. */
.pl-wdiv{
  display:flex;align-items:center;gap:8px;margin:14px 0 2px;padding:5px 0;
  border-top:1px solid var(--line);
  font-size:10.5px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--txt-2);
}
.pl-sec .card-b > .pl-wdiv:first-child{border-top:none;margin-top:0}
.pl-wdiv b{margin-left:auto;color:var(--muted);font-size:11.5px;letter-spacing:0;text-transform:none}
.pl-wdiv + .pl-r{border-top:none}

/* VANDAAG. Zonder markering is een doorlopende lijst stuurloos: je ziet wel
   datums maar niet waar het heden zit, en dat is precies de scheiding tussen
   "hier kan ik niets meer aan doen" en "hier moet ik iets voor regelen".
   Een doorlopende lijn met het woord erin, in olijf — de enige plek op dit
   scherm waar de merkkleur staat, want dit is de enige regel die over jou
   gaat en niet over een kandidaat. */
.pl-nu{
  display:flex;align-items:center;gap:10px;margin:12px 0 2px;
  font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--olive);
}
.pl-nu::before,.pl-nu::after{content:'';height:1px;background:var(--olive-l);opacity:.5;flex:1}
.pl-nu::before{flex:0 0 8px}
.pl-nu + .pl-r{border-top:none}

/* ─── Slotregel: de optelsom ─────────────────────────────────────
   Zegt altijd hoeveel er buiten beeld vallen en waarom. Een filter dat
   stilletjes iemand wegneemt is hier de gevaarlijkste fout die er is: wie je
   niet ziet, bel je niet. */
.pl-tel{text-align:center;padding:4px 0 0;font-weight:500}

/* ─── Toestand ───────────────────────────────────────────────────
   De streep links komt uit .frand in base.css (kleuren: PL_RAND in
   js/plaatsingen.js). Wat hier blijft is het enige dat níét kleur is: wie
   weg is, dringt minder aan. */
.pl-r.pl-weg{opacity:.65}

/* ─── Smal scherm ────────────────────────────────────────────────
   Onder 900px past een regel van vier kolommen niet meer. Dan stapelt hij:
   naam en datum naast elkaar bovenaan (dat is het paar dat je scant),
   daaronder waar hij werkt en wat er mis is. */
@media (max-width:900px){
  .pl-r{
    grid-template-columns:1fr auto;gap:2px 12px;
    margin:0 -14px;padding-left:14px;padding-right:14px;
  }
  .pl-naam{grid-column:1}
  .pl-datkol{grid-column:2;grid-row:1 / span 2;align-self:start}
  .pl-sub{grid-column:1}
  .pl-letkol{grid-column:1 / -1;margin-top:4px}
  .pl-sec .card-b{padding:14px}
  .pl-filrij{gap:8px}
  .pl-filrij select{flex:1 1 46%;min-width:0}
}

/* ─── Het ploegvlak ──────────────────────────────────────────────
   Het enige donkere vlak van dit scherm, en dus de enige plek waar lime mag
   (huisstijl). Drie zones: de twee grote cijfers, de eerstvolgende start, en
   de alarmchips — die laatste zijn dezelfde filters als voorheen, maar op
   donker springen ze eindelijk uit het crème. */
/* Olijf, geen zwart (Tjeerd, 4 aug 2026) — het blijft een donker vlak in de
   zin van de huisstijl (lime mag erop), maar het is nu een mérkvlak. */
.pl-ploeg{
  display:flex;align-items:center;gap:26px;flex-wrap:wrap;
  background:linear-gradient(135deg, var(--olive) 0%, var(--olive-d) 100%);
  border:1px solid var(--olive-d);border-radius:var(--r-l);
  padding:16px 22px;margin-bottom:14px;color:#f6f7f1;
}
.pl-ploegcijfers{display:flex;gap:24px}
.pl-pc{display:flex;flex-direction:column;align-items:flex-start}
.pl-pgroot{font-family:var(--disp);font-weight:400;font-size:40px;line-height:1;letter-spacing:.5px;color:#f6f7f1}
.pl-pgroot.lime{color:var(--lime)}
.pl-plbl{font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:rgba(246,247,241,.65);margin-top:5px}
.pl-ploegstart{flex:1;min-width:220px;border-left:1px solid rgba(246,247,241,.25);padding-left:22px}
.pl-dlabel{color:rgba(246,247,241,.65)}
.pl-pstart{font-size:13.5px;margin-top:4px;color:#f6f7f1}
.pl-pstart b{font-weight:700}
.pl-pstart b.lime{color:var(--lime)}
.pl-pstart.sub2{font-size:12px;color:rgba(246,247,241,.7);margin-top:2px}
.pl-pstart.sub2 b{color:#f6f7f1;font-weight:600}
.pl-ploegchips{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.pl-dchip{
  display:inline-flex;align-items:baseline;gap:6px;cursor:pointer;
  background:#fff;border:1px solid #fff;border-radius:999px;
  padding:4px 13px;font-family:var(--body);font-size:12px;color:var(--txt-2);
}
.pl-dchip .num{font-weight:700;color:var(--ink)}
.pl-dchip.leeg{background:transparent;border-color:rgba(246,247,241,.3);color:rgba(246,247,241,.7);cursor:default}
.pl-dchip.leeg .num{color:rgba(246,247,241,.7)}
.pl-dchip.amber{background:var(--amber-bg);border-color:var(--amber-bg)}
.pl-dchip.amber .num{color:var(--amber)}
.pl-dchip.rood{background:var(--red-bg);border-color:var(--red-bg)}
.pl-dchip.rood .num{color:var(--red)}
.pl-dchip.aan{background:var(--lime);border-color:var(--lime);color:#171d08}
.pl-dchip.aan .num{color:#171d08}

/* ─── Startkalender ──────────────────────────────────────────────
   Veertien weekcellen, één blokje per persoon die die week begint. Planning
   vooruit, geen trend. De noten links en rechts zijn de niemand-valt-weg-
   garantie van de strip zelf. */
.pl-kal{
  display:flex;align-items:center;gap:14px;padding:10px 18px;margin-bottom:14px;
  overflow-x:auto;
}
.pl-kallbl{flex:0 0 auto}
.pl-kaleerder,.pl-kalzonder{flex:0 0 auto;font-size:11px;max-width:150px}
.pl-kwrap{display:flex;gap:2px;flex:1;justify-content:space-between;min-width:420px}
.pl-kw{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;
  gap:3px;min-width:30px;padding:16px 3px 4px;border:none;background:none;cursor:pointer;
  border-radius:var(--r-s);font-family:var(--body);
}
.pl-kw:hover{background:var(--card-2)}
.pl-kw.nu{background:var(--well)}
.pl-kmnd{position:absolute;top:1px;font-size:9px;font-weight:700;letter-spacing:.08em;color:var(--txt-2)}
.pl-kblok{display:flex;flex-direction:column-reverse;gap:2px;min-height:10px}
.pl-kblok i{width:9px;height:9px;border-radius:2.5px;display:block}
.pl-kblok i.werkt{background:var(--green)}
.pl-kblok i.komt{background:#5b8bbf}
.pl-kwk{font-size:10px;color:var(--muted)}
.pl-kw.nu .pl-kwk{font-weight:700;color:var(--olive)}
.pl-knu{font-size:8.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--olive)}

/* ─── Selectieregel ──────────────────────────────────────────────
   De optelsom van precies wat er in de tabel staat — de vervanger van de
   vier KPI-tegels, en hij beweegt wél met elk filter mee. */
.pl-selregel{
  display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;
  padding:9px 16px;border-bottom:1px solid var(--line);
  font-size:12.5px;color:var(--txt-2);background:var(--card);
}
.pl-selregel b{color:var(--ink);font-weight:700}

/* ─── De tabel ─/* ─── De tabel ───────────────────────────────────────────────────
   Vaste kolombreedtes, zodat de datums en bedragen over de hele lijst onder
   elkaar staan en je verticaal kunt scannen. De naam- en klantkolom mogen
   rekken; de rest niet — anders danst een getal per rij mee met de lengte van
   een naam ernaast. */
.pl-tbl{table-layout:fixed}
.pl-tblwrap{border:none;border-radius:0 0 var(--r-l) var(--r-l)}
.pl-tbl th:nth-child(1),.pl-tbl td:nth-child(1){width:15%}
.pl-tbl th:nth-child(2),.pl-tbl td:nth-child(2){width:16%}
.pl-tbl th:nth-child(3),.pl-tbl td:nth-child(3){width:92px}
.pl-tbl th:nth-child(4),.pl-tbl td:nth-child(4){width:100px}
.pl-tbl th:nth-child(5),.pl-tbl td:nth-child(5){width:108px}
.pl-tbl th:nth-child(6),.pl-tbl td:nth-child(6){width:17%}
.pl-tbl th:nth-child(8),.pl-tbl td:nth-child(8){width:104px}
/* Krant, geen dashboard: dichter op elkaar dan de standaardtabel. */
.pl-tbl td{vertical-align:top;padding:9px 12px}
.pl-tbl th{padding:8px 12px}
.pl-tbl td b{font-weight:600}
.pl-tbl .pl-let{font-size:11.5px}
.pl-amber{color:var(--amber);font-weight:600}
/* Garantie: het verloopbalkje. Grijs spoor, olijfgroen gevuld deel — hoe
   voller, hoe dichter bij het einde van de garantie. */
.pl-gbalk{height:3px;background:var(--card-2);border-radius:99px;margin-top:4px;overflow:hidden;max-width:80px;margin-left:auto}
.pl-gbalk i{display:block;height:100%;background:var(--green);border-radius:99px}
.pl-gplicht{color:var(--red);font-weight:600;font-size:12.5px}
.pl-cplicht{color:var(--amber);font-weight:600;font-size:12.5px}
.pl-cnu{color:var(--red);font-weight:600;font-size:12.5px}
/* Een gestopte buiten de plicht dringt niet meer aan. */
.pl-tbl tr.pl-wegr{opacity:.62}
/* Groepskop-staafje: werkt/komt/gestopt in 56px. */
.pl-gstaaf{display:inline-flex;width:56px;height:5px;border-radius:99px;overflow:hidden;gap:1px;margin:0 10px;vertical-align:middle}
.pl-gstaaf i{display:block;height:100%}
.pl-gstaaf i.werkt{background:var(--green)}
.pl-gstaaf i.komt{background:#5b8bbf}
.pl-gstaaf i.weg{background:var(--line-2)}
/* Een fee die niet te berekenen valt is geen gat maar een to-do: de reden
   staat er, afgekapt, met het hele verhaal in de tooltip. */
.pl-feeleeg{font-size:11px;font-style:italic;display:block;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}

/* Nazorg als telling, niet als zin. Rood alleen bij wat NU openstaat; wat
   eerder gemist is telt gedempt mee — dat kun je niet meer inhalen. */
.pl-naz{
  display:inline-flex;align-items:baseline;gap:2px;justify-content:flex-end;
  font-variant-numeric:tabular-nums;color:var(--muted);font-size:12px;
}
.pl-naz.open{color:var(--red);font-weight:700}
.pl-naz i{font-style:normal;opacity:.5}

/* Groepskop en vandaag-scheider in de tabel: dezelfde vorm als de scheiders
   in de tijdlijn, zodat een groep er in beide weergaven hetzelfde uitziet. */
.pl-tbl tr.pl-grp td{
  background:var(--well);border-top:1px solid var(--line);
  padding:7px 16px;font-size:10.5px;font-weight:600;letter-spacing:.07em;
  text-transform:uppercase;color:var(--txt-2);
}
.pl-tbl tr.pl-grp td{display:table-cell}
.pl-tbl tr.pl-grp b{float:right;color:var(--muted);font-size:11.5px;
  letter-spacing:0;text-transform:none;font-weight:600}
.pl-tbl tr.pl-nurij td{
  padding:5px 16px;font-size:10.5px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--olive);
  border-top:1px solid var(--olive-l);background:transparent;
}

@media (max-width:1100px){
  /* Onder deze breedte past zeven kolommen niet meer; de tabel schuift dan
     horizontaal binnen .tblwrap in plaats van de cellen te persen. */
  .pl-tbl{table-layout:auto;min-width:900px}
}

/* ─── ZZP-blok: wie werkt, wat loopt af, eindkalender ──────────── */
.pl-zzpgroep + .pl-zzpgroep{margin-top:14px}
.pl-zzprij{
  display:flex;align-items:baseline;gap:10px;width:100%;text-align:left;
  background:none;border:none;border-bottom:1px solid var(--line);
  padding:7px 2px;cursor:pointer;font-family:var(--body);font-size:13.5px;color:var(--txt);
}
.pl-zzprij:last-child{border-bottom:none}
button.pl-zzprij:hover{background:var(--card-2)}
.pl-zzprij b{font-weight:600;flex:0 1 auto;min-width:0}

/* ── Starters-overzicht mét namen (3 sep 2026, Tjeerd) ── */
.pl-starters{padding:12px 16px;display:flex;flex-direction:column;gap:10px;margin-bottom:12px}
.pl-startersrij{display:flex;align-items:flex-start;gap:14px}
.pl-startersrij>.label{padding-top:9px;min-width:118px}
.pl-startersk{display:flex;flex-wrap:wrap;gap:8px}
.pl-starter{display:flex;align-items:center;gap:10px;border:1px solid var(--line-2);
  background:var(--card);border-radius:10px;padding:7px 12px;cursor:pointer;
  font:inherit;text-align:left;transition:border-color .15s}
.pl-starter:hover{border-color:var(--olive-l)}
.pl-starter.werkt{border-color:var(--green-line);background:var(--green-bg)}
.pl-sdag{font-weight:700;font-size:12px;color:var(--olive);text-transform:uppercase;
  letter-spacing:.03em;min-width:38px}
.pl-swie{display:flex;flex-direction:column;line-height:1.25}
.pl-swie b{font-size:13px}
.pl-swie em{font-style:normal;font-size:11.5px;color:var(--muted)}