/* =====================================================================
   uitvoerders.css — Module 2.5 · Uitvoerdersbeheer. Master-detail:
   partnerlijst links, compliance-dossier rechts (verificatie, certs,
   WKA + G-rekening, tarieven, scores, lifecycle). Tokens + bouwstenen.
===================================================================== */
/* Module-wortel: zelfde pagina-marge als de overige modules (fix 14-07-2026) */
.uv { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }


.uv-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 14px; }
@media (max-width: 1000px) { .uv-grid { grid-template-columns: 1fr; } }

/* banners */
.uv-banner { display: flex; align-items: center; gap: 11px; padding: 13px 18px; border-radius: 13px; font-size: .82rem; font-weight: 600; margin-bottom: 14px; border: var(--lijndikte) solid var(--c-lijn); }
.uv-banner--her { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); }
.uv-banner--ok { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.uv-banner--blok { background: var(--c-rood-t); border-color: var(--c-rood); color: var(--c-rood); }
.uv-banner--klein { margin-bottom: 0; font-size: .78rem; }
.uv-banner__ic { width: 26px; height: 26px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem; color: #fff; background: var(--c-groen-d); }
.uv-banner__ic--rood { background: var(--c-rood); }
.uv-banner__ic--amber { background: var(--c-amber); }

/* lijst links */
.uv-lijst { padding: 0 0 4px; overflow: hidden; }
.uv-lijst__kop { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.uv-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; padding: 12px 14px; border: 0; border-top: var(--lijndikte) solid var(--c-lijn); background: transparent; cursor: pointer; font-family: var(--font-ui); transition: background var(--overgang); }
.uv-item:first-of-type { border-top: 0; }
.uv-item:hover { background: var(--c-creme); }
.uv-item.is-actief { background: var(--c-groen-t); }
.uv-item__tekst { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.uv-item__tekst strong { font-size: .8rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uv-item__tekst span { font-size: .68rem; color: var(--c-ink-3); }
.uv-avatar { width: 38px; height: 38px; border-radius: 11px; background: var(--c-ink); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .74rem; flex: none; }
.uv-avatar--groot { width: 46px; height: 46px; border-radius: 13px; font-size: .88rem; }
.uv-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.uv-dot--groen { background: var(--c-groen); }
.uv-dot--amber { background: var(--c-amber); }
.uv-dot--rood { background: var(--c-rood); }

/* nieuw-formulier */
.uv-nieuw { border: 1.5px dashed var(--c-lijn-2); border-radius: 16px; background: var(--c-creme); padding: 20px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 9px; }
.uv-nieuw strong { font-size: .88rem; }
.uv-nieuw__sub { font-size: .74rem; color: var(--c-ink-3); margin: 0 0 4px; }
.uv-nieuw__rij { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.uv-veld { display: flex; flex-direction: column; gap: 4px; }

/* detail */
.uv-detail { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.uv-kaart { padding: 18px 20px; }
.uv-kaart__kop { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.uv-kaart__kop strong { font-size: .9rem; }
.uv-sub { font-size: .76rem; line-height: 1.55; color: var(--c-ink-3); margin: 0 0 12px; }
.uv-kaart__kop + .uv-sub { margin-top: -6px; }

.uv-kop { display: flex; align-items: center; gap: 14px; }
.uv-kop__tekst { flex: 1; min-width: 0; }
.uv-kop__naam { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.uv-kop__naam strong { font-size: 1.1rem; }
.uv-kop__sub { font-size: .76rem; color: var(--c-ink-3); }

.uv-verif { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px; }
.uv-verif .kicker { display: block; margin-bottom: 5px; }
.uv-verif__w { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .82rem; font-weight: 600; }

.uv-trij { display: grid; grid-template-columns: 1.6fr 1fr .8fr 1.1fr; gap: 10px; align-items: center; padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.uv-trij--kop { border-top: 0; padding: 0 0 8px; font-size: .56rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--c-ink-3); }
.uv-trij--doc { grid-template-columns: 1.8fr .8fr .9fr 1fr; }
.uv-trij--tarief { grid-template-columns: 1.6fr .9fr .8fr .9fr; }
.uv-trij__naam { font-weight: 700; font-size: .8rem; }
.uv-trij__nr { font-size: .7rem; color: var(--c-ink-3); }
.uv-trij__tot { font-size: .76rem; color: var(--c-ink-2); }
.uv-trij__type { font-size: .72rem; color: var(--c-ink-3); text-transform: capitalize; }
.uv-trij .chip { justify-self: start; }
.uv-artlink { font-size: .64rem; }

.uv-fact { display: flex; gap: 10px; margin-bottom: 11px; }
.uv-fact__optie { flex: 1; padding: 11px 14px; border-radius: 11px; cursor: pointer; text-align: center; font-family: var(--font-ui); font-size: .8rem; font-weight: 700; border: 1.5px solid var(--c-lijn-2); color: var(--c-ink-2); background: #fff; transition: background var(--overgang); }
.uv-fact__optie span { display: block; font-size: .64rem; font-weight: 500; opacity: .75; margin-top: 2px; }
.uv-fact__optie.is-actief { border-color: var(--c-groen-d); background: var(--c-groen-d); color: #fff; }
.uv-hint { font-size: .76rem; line-height: 1.55; color: var(--c-ink-2); padding: 11px 14px; border-radius: 10px; background: var(--c-paneel); }

.uv-wka { display: flex; align-items: flex-start; gap: 11px; padding: 6px 0; }
.uv-wka__ic { width: 20px; height: 20px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .68rem; color: #fff; background: var(--c-rood); }
.uv-wka.is-ok .uv-wka__ic { background: var(--c-groen); }
.uv-wka strong { display: block; font-size: .8rem; }
.uv-wka span:not(.uv-wka__ic) { font-size: .7rem; color: var(--c-ink-3); }

.uv-grek { margin-top: 15px; padding: 14px 16px; border-radius: 12px; background: var(--c-amber-t); border: var(--lijndikte) solid var(--c-amber); }
.uv-grek .kicker { display: block; color: var(--c-amber); margin-bottom: 8px; }
.uv-grek__vlakken { display: flex; gap: 10px; flex-wrap: wrap; }
.uv-grek__vak { flex: 1; min-width: 130px; padding: 10px 13px; border-radius: 10px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); }
.uv-grek__vak span { display: block; font-size: .68rem; color: var(--c-ink-3); }
.uv-grek__g { font-size: 1.05rem; color: var(--c-amber); }
.uv-grek__rest { font-size: 1.05rem; color: var(--c-groen-d); }
.uv-grek__nr { display: block; font-size: .7rem; color: var(--c-ink-2); margin-top: 8px; }

.uv-duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.uv-postcodes { display: flex; flex-wrap: wrap; gap: 7px; }
.uv-pc { font-size: .72rem; font-weight: 600; color: var(--c-ink); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); padding: 5px 10px; border-radius: 8px; }
.uv-max { display: flex; align-items: center; justify-content: space-between; padding: 9px 12px; border-radius: 10px; background: var(--c-paneel); margin-top: 8px; font-size: .78rem; color: var(--c-ink-2); }
.uv-max:first-of-type { margin-top: 0; }
.uv-max strong { font-size: .88rem; color: var(--c-ink); }

.uv-teams { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; }
.uv-team { display: inline-flex; flex-direction: column; padding: 8px 13px; border-radius: 11px; background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); }
.uv-team strong { font-size: .76rem; }
.uv-team span { font-size: .64rem; color: var(--c-ink-3); }
.uv-team--plus { padding: 9px 13px; border-radius: 11px; border: 1.5px dashed var(--c-lijn-2); background: transparent; font-family: var(--font-ui); font-size: .74rem; font-weight: 700; color: var(--c-groen-d); cursor: pointer; }

.uv-tarief { display: flex; align-items: center; gap: 4px; font-size: .72rem; color: var(--c-ink-3); }
.uv-tarief input { width: 76px; padding: 7px 9px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; font-family: var(--font-mono); font-size: .74rem; color: var(--c-ink); background: #fff; }

.uv-scores { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; align-items: end; }
.uv-score__kop { display: flex; justify-content: space-between; font-size: .74rem; color: var(--c-ink-2); margin-bottom: 5px; }
.uv-balk { height: 8px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; }
.uv-balk i { display: block; height: 100%; border-radius: 99px; background: var(--c-groen); }
.uv-klachten { padding: 11px 14px; border-radius: 11px; background: var(--c-terra-t); border: var(--lijndikte) solid var(--c-terra); }
.uv-klachten span { display: block; font-size: .7rem; color: var(--c-terra-d); }
.uv-klachten strong { font-size: 1.3rem; color: var(--c-terra-d); }

.uv-life { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }

.uv-info { padding: 20px 22px; border-radius: 16px; background: var(--c-ink); color: #fff; }
.uv-info__kicker { color: rgba(255, 255, 255, .75); }
.uv-info p { font-size: .84rem; line-height: 1.65; color: rgba(255, 255, 255, .8); max-width: 820px; margin: 9px 0 0; }
.uv-info strong { color: #fff; }

/* ---- 2.5b · inline bewerken, wizard en contracten ---- */
.uv-kaart__acties { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.uv-bewerk__voet { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); }
.uv-select { appearance: auto; }
.uv-trij--bewerk { grid-template-columns: 1.6fr 1fr .8fr 1.1fr; gap: 8px; padding: 6px 0; }
.uv-trij--team, .uv-trij--team.uv-trij--bewerk { grid-template-columns: 1.2fr 1.2fr .6fr; }
.uv-rijplus { margin-top: 10px; }
.uv-pc__x { border: 0; background: transparent; cursor: pointer; font-size: .62rem; color: var(--c-terra-d); padding: 0 0 0 4px; }

.uv-wiz { border-style: solid; border-color: var(--c-groen); background: var(--c-groen-t); }
.uv-wiz__kop { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.uv-wiz__kop strong { font-size: .92rem; }
.uv-wiz__stappen { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 6px; }
.uv-wiz__stap { display: flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 9px; border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; cursor: pointer; font-family: var(--font-ui); font-size: .72rem; font-weight: 600; color: var(--c-ink-2); }
.uv-wiz__stap.is-actief { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }
.uv-wiz__stap .mono { font-size: .64rem; font-weight: 700; }
.uv-wiz__stap.is-klaar:not(.is-actief) { border-color: var(--c-groen); color: var(--c-groen-d); }
.uv-wiz__inhoud { display: flex; flex-direction: column; gap: 9px; background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: 13px; padding: 16px; }
.uv-wiz__types { display: flex; gap: 7px; }
.uv-wiz__vink { display: flex; align-items: center; gap: 8px; font-size: .78rem; color: var(--c-ink); cursor: pointer; }
.uv-wiz__vink input { width: 16px; height: 16px; accent-color: var(--c-groen); }
.uv-wiz__tarieven { display: flex; flex-direction: column; gap: 7px; }
.uv-wiz__tarief { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.uv-wiz__voet { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.uv-wiz__status { flex: 1; min-width: 200px; font-size: .72rem; color: var(--c-ink-2); }

.uv-trij--ct { grid-template-columns: 1.4fr 1fr .7fr .9fr auto; }
.uv-trij__acties-ct { display: flex; gap: 6px; justify-content: flex-end; flex-wrap: wrap; }
.uv-ctnieuw { display: flex; align-items: flex-end; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; }
.uv-ctnieuw__keuze { flex: 1; min-width: 220px; }
.uv-ct__kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.uv-ct__kop h2 { margin: 3px 0 0; font-size: 1.05rem; }
.uv-ct__voet { display: flex; align-items: center; gap: 9px; margin-top: 14px; padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); flex-wrap: wrap; }

/* Kwaliteits-scorecard (C5a) + partner-forecast (C5c) */
.uv-scoresub { font-size: 12px; color: var(--c-ink-2); margin: 0 0 8px; }
.uv-scorerij { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--c-lijn); font-size: 13px; }
.uv-scorerij:last-child { border-bottom: 0; }
.uv-scorerij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); }
.uv-scorerij em { display: block; font-style: normal; font-size: 11.5px; color: var(--c-ink-2); }
.uv-fcrij { display: grid; grid-template-columns: .8fr 1.2fr 1fr 1fr auto; gap: 10px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--c-lijn); font-size: 12.5px; }
.uv-fcrij:last-child { border-bottom: 0; }
.uv-fcrij--kop { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--c-ink-2); }

/* Klantreviews (uitbreiding 4): registratie-rij in het dossier */
.uv-revform { display: flex; gap: 8px; margin-top: 10px; }
.uv-revform select, .uv-revform input { border: 1px solid var(--c-lijn-2); border-radius: 9px; padding: 7px 10px; font: 500 12.5px var(--font-ui); color: var(--c-ink); background: #fff; }
.uv-revform input { flex: 1; min-width: 0; }

/* Prestatie uit de uitvoering (FT-3.4) — naast de klantreviews telt hoe
   compleet de dossiers binnenkomen; dat is directe werkvoorbereidingstijd. */
.uv-prest { display: flex; flex-wrap: wrap; gap: 10px; }
.uv-prest__cel { flex: 1; min-width: 118px; padding: 12px 14px; border-radius: var(--radius);
  background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn); }
.uv-prest__cel strong { display: block; font-size: 1.15rem; letter-spacing: -.02em; }
.uv-prest__cel span { display: block; margin-top: 3px; font-size: .68rem; color: var(--c-ink-3); }
.uv-groen { color: var(--c-groen-d); }
.uv-amber { color: var(--c-amber); }
.uv-rood { color: var(--c-rood); }
.uv-sub--let { color: var(--c-amber); margin: 12px 0 0; }
.uv-banner--let { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); }

/* =====================================================================
   UV3 · register en dossier op echte data (bouwspec Uitvoerders §2).
   Vormtaal uit het beheerplatform: 1px-lijnen, paneel-tinten, de vaste
   diepte-tokens op kaarten. Geen losse schaduw- of gradient-literals.
===================================================================== */
.uv2 { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; }
.uv2-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px;
  flex-wrap: wrap; margin-bottom: 16px; }
.uv2-h1 { margin: 4px 0 0; font-size: 1.5rem; letter-spacing: -.02em; }
.uv2-intro { margin: 7px 0 0; max-width: 640px; font-size: .82rem; line-height: 1.6; color: var(--c-ink-2); }
.uv2-rek { flex: 1; }
.uv2-voet { margin: 16px 0 0; font-size: .74rem; line-height: 1.6; color: var(--c-ink-3); max-width: 820px; }
.uv2-let { margin: 10px 0 0; font-size: .72rem; line-height: 1.6; color: var(--c-ink-3); }
.uv2-sub { font-size: .68rem; color: var(--c-ink-3); margin-top: 2px; }

/* werkbalk: zoeken + filterlat + export */
.uv2-balk { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 14px 0 12px; }
.uv2-zoek { flex: 1; min-width: 240px; padding: 9px 13px; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: var(--radius); font: 500 .8rem var(--font-ui); color: var(--c-ink); background: #fff; }
.uv2-telling { font-size: .72rem; color: var(--c-ink-3); }

/* tabel */
.uv2-vlak { border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  background: #fff; overflow: auto; box-shadow: var(--schaduw-tegel); }
.uv2-tabel { border-collapse: collapse; width: 100%; }
.uv2-tabel th { position: sticky; top: 0; background: #fff; text-align: left; padding: 9px 12px; z-index: 1;
  border-bottom: var(--lijndikte) solid var(--c-lijn-2); font-size: .62rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); }
.uv2-tabel td { padding: 10px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn);
  font-size: .78rem; vertical-align: top; }
.uv2-tabel tr:last-child td { border-bottom: 0; }
.uv2-tabel .rechts { text-align: right; }
.uv2-tabel--klein td, .uv2-tabel--klein th { padding: 8px 12px; }
.uv2-rij { cursor: pointer; transition: background var(--overgang); }
.uv2-rij:hover td { background: var(--c-paneel-2); }
.uv2-rij.is-dicht td:first-child { box-shadow: inset 3px 0 0 var(--c-rood); }

/* stand-label: compleet / verloopt / mis — kleur draagt betekenis */
.uv2-stand { display: inline-block; font-size: .66rem; font-weight: 800; letter-spacing: .02em;
  border-radius: 99px; padding: 2px 10px; border: var(--lijndikte) solid var(--c-lijn-2); color: var(--c-ink-2); }
.uv2-stand.is-ok { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.uv2-stand.is-let { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); }
.uv2-stand.is-stop { background: var(--c-rood-t); border-color: var(--c-rood); color: var(--c-rood); }

/* dossier */
.uv2-dbalk { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
  padding-bottom: 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.uv2-terug { font-size: .74rem; font-weight: 700; color: var(--c-ink-2); text-decoration: none; }
.uv2-terug:hover { color: var(--c-groen-d); }
.uv2-dnaam { font-size: 1.15rem; letter-spacing: -.02em; }

.uv2-melding { border-radius: var(--radius); padding: 13px 17px; margin-bottom: 12px;
  border: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; line-height: 1.6; }
.uv2-melding b { display: block; margin-bottom: 5px; font-size: .82rem; }
.uv2-melding ul { margin: 0; padding-left: 18px; }
.uv2-melding span { display: block; margin-top: 7px; font-size: .72rem; color: var(--c-ink-2); }
.uv2-melding.is-stop { background: var(--c-rood-t); border-color: var(--c-rood); color: var(--c-rood); }
.uv2-melding.is-stop span { color: var(--c-ink-2); }
.uv2-melding.is-let { background: var(--c-amber-t); border-color: var(--c-amber); color: var(--c-amber); }

.uv2-drie { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; margin-bottom: 14px; }
.uv2-twee { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 14px; }
.uv2-kaart { padding: 17px 19px; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  background: #fff; box-shadow: var(--schaduw-tegel); }
.uv2-kkop { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  flex-wrap: wrap; margin-bottom: 11px; }
.uv2-kkop b { font-size: .88rem; }

.uv2-rooster { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: .78rem; }
.uv2-rooster dt { color: var(--c-ink-3); }
.uv2-rooster dd { margin: 0; font-weight: 600; color: var(--c-ink); }
.uv2-cap { display: flex; align-items: baseline; gap: 9px; padding: 12px 14px; margin-bottom: 11px;
  border-radius: var(--radius); background: var(--c-groen-t); border: var(--lijndikte) solid var(--c-groen); }
.uv2-cap b { font-size: 1.5rem; letter-spacing: -.02em; color: var(--c-groen-d); }
.uv2-cap span { font-size: .74rem; color: var(--c-ink-2); }

.uv2-knoppen { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 13px;
  padding-top: 12px; border-top: var(--lijndikte) solid var(--c-lijn); }

/* aanmeldroute */
.uv2-onboard { padding: 15px 19px; margin-bottom: 12px; border-radius: var(--radius);
  background: var(--c-creme); border: var(--lijndikte) solid var(--c-lijn-2); }
.uv2-route { display: flex; gap: 7px; flex-wrap: wrap; list-style: none; margin: 0 0 12px; padding: 0; }
.uv2-route li { display: flex; align-items: center; gap: 7px; padding: 7px 13px; border-radius: 99px;
  border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; font-size: .74rem;
  font-weight: 600; color: var(--c-ink-3); }
.uv2-route li .mono { font-size: .64rem; font-weight: 800; }
.uv2-route li.is-af { border-color: var(--c-groen); color: var(--c-groen-d); background: var(--c-groen-t); }
.uv2-route li.is-nu { border-color: var(--c-ink); background: var(--c-ink); color: #fff; }

/* tijdlijn */
.uv2-tl { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow: auto; }
.uv2-tl li { display: grid; grid-template-columns: 116px 1fr; gap: 12px; padding: 9px 0;
  border-top: var(--lijndikte) solid var(--c-lijn); font-size: .76rem; line-height: 1.55; }
.uv2-tl li:first-child { border-top: 0; }
.uv2-tl .mono { font-size: .66rem; color: var(--c-ink-3); }
.uv2-tl b { text-transform: uppercase; font-size: .6rem; letter-spacing: .06em; color: var(--c-ink-3); margin-right: 6px; }
.uv2-tl em { display: block; font-style: normal; font-size: .66rem; color: var(--c-ink-3); margin-top: 2px; }

@media (max-width: 900px) {
  .uv2 { padding: 20px 18px 60px; }
  .uv2-tl li { grid-template-columns: 1fr; gap: 2px; }
}

/* Kolombreedtes: de naam krijgt ruimte, de smalle kolommen breken niet af
   halverwege een woord en de zeven kolommen passen samen in het paneel. */
.uv2-tabel th:nth-child(1) { min-width: 168px; }
.uv2-tabel th:nth-child(2) { white-space: nowrap; }
.uv2-tabel th:nth-child(6) { min-width: 130px; }
.uv2-tabel td .chip, .uv2-tabel td .uv2-stand { white-space: nowrap; }
.uv2-tabel td { padding: 10px 9px; }
.uv2-tabel th { padding: 9px 9px; }

/* Snel naar een andere partij vanuit het dossier (wireframe v4) */
.uv2-spring select { padding: 7px 11px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius);
  font: 600 .76rem var(--font-ui); color: var(--c-ink); background: #fff; max-width: 220px; }
.uv2 .visueel-verborgen { position: absolute; width: 1px; height: 1px; margin: -1px;
  clip-path: inset(50%); overflow: hidden; white-space: nowrap; }

/* Mensen op de bouw (UV4): een uit-dienst-regel blijft leesbaar maar
   treedt terug — hij is er nog, hij telt alleen niet meer mee. */
.uv2-tabel tr.is-uit td { opacity: .6; }
.uv2-vinkje { display: inline-flex; align-items: center; gap: 6px; font-size: .72rem; color: var(--c-ink-2); }
.uv2-vinkje input { width: 15px; height: 15px; accent-color: var(--c-groen); }

/* ---- Inzet (UV5): bezettingscel, toewijsvoorstel ---- */
.uv2-melding.is-ok { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.uv2-melding.is-ok span { color: var(--c-ink-2); }
.uv2-naam { border: 0; background: none; font: inherit; font-weight: 700; color: var(--c-ink);
  padding: 0; cursor: pointer; text-align: left; }
.uv2-naam:hover { color: var(--c-groen-d); }

/* Eén weekcel: percentage groot, wat erachter zit klein, afwezigheid apart.
   De cel is een knop — afwezigheid vastleggen hoort waar je hem leest. */
.uv2-cel { display: block; width: 100%; min-width: 84px; padding: 7px 9px; border-radius: 10px;
  border: var(--lijndikte) solid var(--c-lijn-2); background: #fff; cursor: pointer;
  font-family: var(--font-ui); text-align: right; transition: background var(--overgang); }
.uv2-cel b { display: block; font-size: .84rem; font-family: var(--font-mono); }
.uv2-cel span { display: block; font-size: .6rem; color: var(--c-ink-3); }
.uv2-cel em { display: block; font-style: normal; font-size: .6rem; font-weight: 700; color: var(--c-amber); }
.uv2-cel.is-goed { background: var(--c-groen-t); border-color: var(--c-groen); }
.uv2-cel.is-vol { background: var(--c-rood-t); border-color: var(--c-rood); }
.uv2-cel.is-vol b { color: var(--c-rood); }
.uv2-cel.is-leeg { background: var(--c-creme); }
.uv2-cel.is-dicht { background: var(--c-paneel); border-style: dashed; color: var(--c-ink-3); }
button.uv2-cel:hover { background: var(--c-paneel-2); }
.uv2-totaal td { border-top: var(--lijndikte) solid var(--c-lijn-2); font-weight: 700; }

.uv2-voorstel { padding: 11px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.uv2-voorstel:first-of-type { border-top: 0; }
.uv2-vkop b { font-size: .84rem; }
.uv2-vkop span { display: block; font-size: .7rem; color: var(--c-ink-3); margin-top: 1px; }
.uv2-kandidaten { list-style: none; margin: 8px 0 0; padding: 0; }
.uv2-kandidaten li { display: grid; grid-template-columns: 1fr auto auto; gap: 4px 12px;
  align-items: center; padding: 8px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.uv2-kandidaten li b { font-size: .78rem; }
.uv2-kandidaten li span { font-size: .68rem; color: var(--c-ink-3); }
.uv2-kandidaten li span:first-of-type { grid-column: 1; }
.uv2-afvallers { margin-top: 8px; }
.uv2-afvallers summary { font-size: .7rem; color: var(--c-ink-3); cursor: pointer; }
.uv2-afvallers ul { margin: 6px 0 0; padding-left: 18px; font-size: .7rem; color: var(--c-ink-2); line-height: 1.6; }
.uv2-knoppen a.btn { text-decoration: none; }

/* ---- Prestatie (UV6) ---- */
.uv2-cijfer { display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 10px; font-weight: 800; font-size: .84rem;
  background: var(--c-paneel); color: var(--c-ink-2); }
.uv2-cijfer.is-a { background: var(--c-groen); color: #fff; }
.uv2-cijfer.is-b { background: var(--c-groen-t); color: var(--c-groen-d); }
.uv2-cijfer.is-c { background: var(--c-amber-t); color: var(--c-amber); }
.uv2-cijfer.is-d { background: var(--c-rood); color: #fff; }

.uv2-uitleg { list-style: none; margin: 0; padding: 0; counter-reset: uitleg; }
.uv2-uitleg li { padding: 10px 0 10px 34px; border-top: var(--lijndikte) solid var(--c-lijn); position: relative; }
.uv2-uitleg li:first-child { border-top: 0; }
.uv2-uitleg li::before { counter-increment: uitleg; content: counter(uitleg);
  position: absolute; left: 0; top: 11px; width: 22px; height: 22px; border-radius: 7px;
  background: var(--c-paneel); color: var(--c-ink-2); font: 800 .66rem var(--font-mono);
  display: flex; align-items: center; justify-content: center; }
.uv2-uitleg li.is-buiten::before { content: "+"; background: var(--c-creme); }
.uv2-uitleg li b { font-size: .8rem; }
.uv2-uitleg li .mono { font-size: .62rem; color: var(--c-ink-3); margin-left: 6px; }
.uv2-uitleg li p { margin: 4px 0 0; font-size: .74rem; line-height: 1.6; color: var(--c-ink-2); }
.uv2-uitleg li em { display: block; margin-top: 4px; font-style: normal; font-size: .64rem; color: var(--c-ink-3); }

.uv2-nooit { margin-top: 11px; padding-top: 10px; border-top: var(--lijndikte) solid var(--c-lijn); }
.uv2-nooit div { display: flex; justify-content: space-between; gap: 12px; padding: 4px 0; font-size: .76rem; }
.uv2-nooit span { color: var(--c-ink-3); }
.uv2-nooit b { text-align: right; }

/* Genummerde stappen (tekenroute) — zelfde vorm als de aanmeldroute, maar
   onder elkaar omdat het zinnen zijn en geen labels. */
.uv2-route--stappen { flex-direction: column; align-items: stretch; gap: 6px; }
.uv2-route--stappen li { border-radius: var(--radius); justify-content: flex-start;
  font-weight: 500; color: var(--c-ink-2); text-align: left; line-height: 1.5; }
.uv2-route--stappen li .mono { flex: none; width: 18px; }

/* ---- Geld (UV8) ---- */
.uv2-rooster--geld { margin-top: 12px; padding-top: 11px; border-top: var(--lijndikte) solid var(--c-lijn-2);
  grid-template-columns: 1fr auto; }
.uv2-rooster--geld dd { text-align: right; }
.uv2-mw { display: grid; grid-template-columns: 1fr auto; gap: 12px; padding: 10px 0;
  border-top: var(--lijndikte) solid var(--c-lijn); }
.uv2-mw:first-of-type { border-top: 0; }
.uv2-mw b { font-size: .8rem; }
.uv2-mw p { margin: 4px 0 0; font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); }

/* ---- Beheer (UV9) ---- */
.uv2-poort { padding: 10px 0; border-top: var(--lijndikte) solid var(--c-lijn); }
.uv2-poort:first-of-type { border-top: 0; }
.uv2-poort b { font-size: .78rem; }
.uv2-poort p { margin: 3px 0 4px; font-size: .74rem; line-height: 1.55; color: var(--c-ink-2); }