/* Stijl voor Sourcing en de kaart-engine (js/source.js).
   Alleen deze module schrijft hier. Kleuren komen uit de :root-variabelen. */

/* ─── Kaart ───────────────────────────────────────────────────── */
.src-kaartwrap{overflow:hidden;position:relative;z-index:0}   /* eigen stacking-context: Leaflet blijft onder drawer/modal */
.src-kaart{height:min(62vh,560px);min-height:340px;width:100%;background:var(--card-2)}
.src-kaart .leaflet-container{font-family:var(--body)}

/* Popups in de huisstijl: dunne rand, geen zware schaduw. */
.leaflet-popup-content-wrapper{border-radius:var(--r-s);border:1px solid var(--line);box-shadow:var(--sh-2)}
.leaflet-popup-content{margin:10px 14px;font-family:var(--body);font-size:12.5px;line-height:1.45}
.src-pop b{font-size:13px;color:var(--ink)}
.src-pop a{font-weight:600}
.src-pop-sub{color:var(--txt-2);font-size:11.5px;margin-top:2px}

/* ─── Filterbalk boven de kaart ───────────────────────────────── */
.src-top .row{row-gap:8px}
.src-filters{margin-top:14px;border-top:1px solid var(--line);padding-top:14px}
.src-fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0 14px}
.src-fgrid .f-row{margin-bottom:10px}

/* ─── Legenda + sterren ───────────────────────────────────────── */
.src-legenda{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:2px 4px}
.src-leg{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--txt-2)}
.src-dot{width:11px;height:11px;border-radius:50%;display:inline-block;flex:0 0 11px}
.src-dot.sm{width:8px;height:8px;flex-basis:8px}
.src-ster{color:var(--olive);opacity:.7;letter-spacing:1px;font-size:12px;white-space:nowrap}

/* ─── "Niet op de kaart" — inklapbaar, want dit kunnen er honderden zijn ── */
.src-buiten{padding:2px 4px;font-size:12px;color:var(--txt-2)}
.src-buiten > summary{cursor:pointer;list-style:none;padding:4px 0;font-weight:600;color:var(--txt-2)}
.src-buiten > summary::-webkit-details-marker{display:none}
.src-buiten > summary::before{content:'▸';display:inline-block;width:14px;color:var(--muted)}
.src-buiten[open] > summary::before{content:'▾'}
.src-buiten > summary:hover{color:var(--ink)}
.src-buitenlijst{display:flex;flex-wrap:wrap;gap:6px;padding:8px 0 4px 14px}
.src-buiten p.meta{margin:4px 0 8px;padding-left:14px;max-width:70ch}
.src-buitenlijst a.chip:hover{text-decoration:none;border-color:var(--olive-l)}

/* ═══════════════════════════════════════════════════════════════
   SOURCING-SCHERM
   Drie kolommen: werkvoorraad · kaart · wat je nu kunt doen.
   Extra breedte vullen we met méér inhoud naast elkaar, nooit met
   dezelfde inhoud uitgerekt (zie de ladder in css/base.css).
   ═══════════════════════════════════════════════════════════════ */
.src2-wrap{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);
  grid-template-areas:'rail' 'kaart' 'detail'}
.src2-rail{grid-area:rail;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden}
.src2-kaartcard{grid-area:kaart;display:flex;flex-direction:column}
.src2-detail{grid-area:detail;min-width:0}

@media (min-width:1040px){
  .src2-wrap{grid-template-columns:330px minmax(0,1fr);
    grid-template-areas:'rail kaart' 'rail detail';align-items:start}
  /* De rail blijft staan terwijl je door het detailpaneel scrolt — anders
     ben je je lijstje kwijt zodra een vacature veel kandidaten heeft. */
  .src2-rail{position:sticky;top:12px;max-height:calc(100vh - 40px);
    display:flex;flex-direction:column}
}
@media (min-width:1500px){
  .src2-wrap{grid-template-columns:330px minmax(0,1fr) 400px;
    grid-template-areas:'rail kaart detail'}
}
@media (min-width:1900px){
  .src2-wrap{grid-template-columns:380px minmax(0,1fr) 460px;gap:16px}
}

/* ─── Rail: kop, lijst, voet ──────────────────────────────────── */
.src2-railkop{padding:14px 16px 10px;border-bottom:1px solid var(--line);flex:0 0 auto}
.src2-railkop p.meta{margin:4px 0 0;max-width:44ch}
.src2-lijst{display:flex;flex-direction:column;overflow-y:auto;min-height:0}
.src2-railvoet{padding:10px 16px 14px;border-top:1px solid var(--line);flex:0 0 auto}
.src2-railvoet p.meta{margin:0;max-width:46ch}

.src2-rij{display:flex;flex-direction:column;gap:3px;width:100%;text-align:left;
  background:none;border:none;border-bottom:1px solid #eef0e4;padding:11px 16px;
  cursor:pointer;font-family:var(--body);color:var(--txt);border-left:2px solid transparent}
.src2-rij:last-child{border-bottom:none}
.src2-rij:hover{background:var(--card-2)}
.src2-rij.aan{background:var(--card-2);border-left-color:var(--olive)}
.src2-rij-t{font-weight:600;font-size:13.5px;color:var(--ink);line-height:1.3;
  display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.src2-rij-s{font-size:11.5px;color:var(--txt-2)}
.src2-rij-m{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:4px}
.src2-rij .chip{font-size:11px;padding:1px 8px}
.src2-goud{color:var(--gold)}

/* ─── Kaartkolom ──────────────────────────────────────────────── */
.src2-onder{border-top:1px solid var(--line);padding:10px 14px 12px;background:var(--card)}
.src2-uitleg{margin:8px 0 0;max-width:78ch}
/* Zonder Leaflet is er niets te tonen in het kaartvlak: laat het krimpen tot
   de melding in plaats van een leeg vak van 560px achter te laten. */
.src2-kaartcard.geenkaart .src-kaart{height:auto;min-height:0;background:none}
.src2-geenkaart{margin:14px}

/* ─── Detailpaneel ────────────────────────────────────────────── */
.src2-paneel .card-h{padding:14px 18px}
.src2-paneel .card-b{padding:16px 18px}
.src2-leeg{padding:0}
.src2-kandlijst{display:flex;flex-direction:column;gap:8px}

.src2-kand{border:1px solid var(--line);border-radius:var(--r);padding:11px 12px;background:var(--card)}
.src2-kand-t{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.src2-kand-t a{color:var(--ink)}
.src2-kand-t a:hover{color:var(--olive)}
.src2-kand-t b{font-size:13.5px}
.src2-kand-s{font-size:11.5px;color:var(--txt-2);margin-top:2px}
.src2-kand-c{margin-top:7px;row-gap:5px}
.src2-kand-c .chip{font-size:11px;padding:1px 8px}
.src2-kand-a{margin-top:9px;row-gap:5px}
.src2-kand-a .btn.sm{padding:4px 10px;font-size:11.5px}
.src2-kand-a a.btn:hover{text-decoration:none}
/* Waarom een match wél of niet klopt. Drie niveaus, drie tonen: rood is
   "hier gaat het op stuk", oranje is "past minder goed", grijs is "dit weten
   we niet". Alleen de bovenste krijgt een vlak — kleur is betekenis, en er
   mag er maar één schreeuwen. */
.src2-blok{margin-top:6px;font-size:11.5px;line-height:1.45;color:var(--red);
  background:var(--red-bg);border:1px solid var(--red-line);border-radius:var(--r-s);padding:4px 8px}
.src2-twijfel{margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--oranje)}
.src2-onbekend{margin-top:5px;font-size:11.5px;line-height:1.45;color:var(--muted)}
.src2-vacrij .src2-blok{display:block}

.src2-goudknop{color:var(--muted)}
.src2-goudknop.aan{color:var(--gold)}

.src2-vaclijst{display:flex;flex-direction:column;gap:2px}
.src2-vacrij{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:9px 10px;border-radius:var(--r-s);color:var(--txt)}
.src2-vacrij:hover{background:var(--card-2);text-decoration:none}
.src2-vacrij b{font-size:13px;display:block}
.src2-vacrij > span:first-child{min-width:0}

.src2-nietmeten{margin-top:14px;border-top:1px solid var(--line);padding-top:8px}
.src2-kwaliteit{display:flex;flex-direction:column;gap:2px}

/* ═══════════════════════════════════════════════════════════════
   ZOEKEN — de kaartenbak doorzoeken
   Eén zoekkaart boven, daaronder een werklijst. Vier velden meteen
   zichtbaar, de rest achter "Meer verfijnen": twaalf velden tegelijk
   is precies wat we bij Kandidaten hebben weggehaald.
   ═══════════════════════════════════════════════════════════════ */
.src3-zoek{padding:18px 20px}
.src3-vrij{min-width:0;margin-bottom:16px}
.src3-vrij input{font-size:14.5px;padding-top:10px;padding-bottom:10px}

.src3-basis{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:0 16px}
/* De functiechips groeien met het aantal termen; die krijgt daarom de meeste
   ruimte zodra het scherm die heeft. */
@media (min-width:900px){ .src3-basis{grid-template-columns:1.5fr 1.3fr 1fr .9fr} }
.src3-basis .f-row{margin-bottom:12px}
.src3-straal{flex-wrap:nowrap;gap:7px}
.src3-straal select{width:auto;flex:0 0 auto}
.src3-straal .meta{flex:0 0 auto}
.src3-straal input{min-width:0}

/* Chips + invoerveld in één vlak, zodat het als één veld leest. */
.src3-chips{display:flex;flex-wrap:wrap;align-items:center;gap:6px;
  border:1px solid var(--line-2);border-radius:var(--r-s);background:#fff;padding:5px 6px;min-height:37px}
.src3-chips:focus-within{border-color:var(--olive-l);box-shadow:0 0 0 3px rgba(111,160,60,.15)}
.src3-chips input{border:none;box-shadow:none;padding:2px 4px;flex:1 1 110px;min-width:90px;font-size:13px}
.src3-chips input:focus{border:none;box-shadow:none}
.src3-chip{cursor:pointer;font-size:11.5px}
.src3-chip:hover{border-color:var(--red-line);color:#a4301f}
.src3-fnc .hint{margin-top:4px;max-width:44ch}
.src3-fnc .hint:empty{display:none}

.src3-meerbalk{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-top:1px solid var(--line);margin-top:4px;padding-top:12px}
.src3-extra{margin-top:14px;border-top:1px dashed var(--line);padding-top:14px}
.src3-extra .f-row{margin-bottom:10px}

/* ─── Resultaten ──────────────────────────────────────────────── */
.src3-reskop{row-gap:8px;padding:0 2px}
.src3-noot{margin:-6px 2px 0;max-width:80ch}
.src3-noot:empty{display:none}
.src3-lijst{display:flex;flex-direction:column;gap:10px}

.src3-rij{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px}
.src3-rij-t{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.src3-rij-t a{color:var(--ink)}
.src3-rij-t a:hover{color:var(--olive)}
.src3-rij-t b{font-size:14px}
.src3-rij-t .chip{font-size:11px;padding:1px 8px}
.src3-rij-s{font-size:12px;color:var(--txt-2);margin-top:3px}
.src3-rij-a{margin-top:10px;row-gap:5px}
.src3-rij-a .btn.sm{padding:4px 10px;font-size:11.5px}
.src3-rij-a a.btn:hover{text-decoration:none}

/* De beste openstaande vacature. Een streepje links in plaats van een kader:
   het hoort bij de kandidaat, het is geen tweede kaart. */
.src3-match{margin-top:9px;padding:8px 0 2px 11px;border-left:2px solid var(--olive-l)}
.src3-match.zwak{border-left-color:var(--line-2)}
.src3-match-t{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:13px}
.src3-match-t b{color:var(--ink)}
.src3-match-s{font-size:11.5px;color:var(--txt-2)}
.src3-plus{margin-top:4px;font-size:11.5px;color:var(--txt-2)}
.src3-onbekend{margin-top:4px;font-size:11.5px;color:var(--muted)}
.src3-geenmatch{margin-top:8px;font-size:11.5px;color:var(--muted)}
.src3-drrij{padding:12px 0;border-bottom:1px solid var(--line)}
.src3-drrij:last-child{border-bottom:none}

@media (max-width:700px){
  .src3-zoek{padding:15px 15px}
  .src3-straal{flex-wrap:wrap}
  .src-kaart{height:46vh;min-height:260px}
  .src-fgrid{grid-template-columns:1fr 1fr}
  .src2-rij{padding:10px 13px}
  .src2-railkop{padding:12px 13px 9px}
  /* Vier KPI's onder elkaar vulden op een telefoon het hele eerste scherm,
     nog vóór de eerste vacature. Twee naast elkaar, compacter. */
  .src2 .grid.c4{grid-template-columns:1fr 1fr;gap:10px}
  .src2 .kpi{padding:13px 13px 11px}
  .src2 .kpi .big{font-size:23px}
  .src2 .kpi .label{margin-bottom:7px}
}