/* =====================================================================
   relaties.css — Module 1.5 · Relaties & Klant-360. Bouwt op tokens +
   bouwstenen.css (lijst, drawer, chips).
===================================================================== */

/* Lijst */
.rel-lijstkaart { --bs-kolommen: .9fr 1.2fr 1.4fr .7fr .9fr .9fr; }
.rel-chips { margin-bottom: 0; }
.rel-grid { padding-top: 4px; }
.rel-rij { display: grid; grid-template-columns: var(--bs-kolommen); gap: 10px; align-items: center; padding: 10px 20px; border-top: var(--lijndikte) solid var(--c-lijn); cursor: pointer; transition: background var(--overgang); }
.rel-rij:hover { background: var(--c-creme); }
.rel-rij.is-actief { background: var(--c-groen-t); }
.rel-cel { min-width: 0; }
.rel-naam { display: block; font-weight: 700; font-size: .82rem; }
.rel-bag { font-size: .6rem; color: var(--c-ink-3); }
.rel-adres { font-size: .78rem; color: var(--c-ink-2); }
.rel-scan { font-size: .72rem; color: var(--c-ink-2); }
.rel-stage { justify-self: start; }

/* Drawer: wat speelt er nu */
.rel-nu { padding: 14px 16px; border-radius: var(--radius); background: var(--c-groen-t); margin-bottom: 4px; }
.rel-nu__kicker { color: var(--c-groen-d); display: block; margin-bottom: 8px; }
.rel-nu__tekst { font-size: .8rem; line-height: 1.55; color: var(--c-ink); margin-bottom: 11px; }
.rel-nu__cta { width: 100%; }

/* Woning BAG-verrijkt */
.rel-woning { display: flex; align-items: center; gap: 12px; padding: 13px 14px; }
.rel-label { width: 30px; height: 30px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 800; font-size: .9rem; }
.rel-label--groend { background: var(--c-groen-d); }
.rel-label--groen { background: var(--c-groen); }
.rel-label--amber { background: var(--c-amber); }
.rel-label--terra { background: var(--c-terra); }
.rel-label--terrad { background: var(--c-terra-d); }
.rel-woning__adres { flex: 1; min-width: 0; font-weight: 700; font-size: .8rem; }
.rel-woning__pc { font-size: .66rem; color: var(--c-ink-3); font-weight: 400; }
.rel-cs { text-align: right; display: flex; flex-direction: column; }
.rel-cs .mono { font-size: 1.25rem; font-weight: 800; }
.rel-cs--groen { color: var(--c-groen-d); }
.rel-cs--amber { color: var(--c-amber); }
.rel-cs--terra { color: var(--c-terra-d); }
.rel-kenmerken { display: flex; gap: 7px; flex-wrap: wrap; margin-top: 8px; }
.rel-kenmerk { font-size: .68rem; color: var(--c-ink-2); background: var(--c-paneel); padding: 4px 9px; border-radius: 6px; }

/* Tijdlijn */
.rel-tijdlijn { display: flex; flex-direction: column; gap: 10px; }
.rel-event { display: flex; gap: 10px; align-items: flex-start; }
.rel-event__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-groen); flex: none; margin-top: 4px; }
.rel-event__tekst { font-size: .78rem; line-height: 1.4; }
.rel-event__tijd { font-size: .64rem; color: var(--c-ink-3); }

/* Opdrachten & facturen */
.rel-docs { display: flex; flex-direction: column; gap: 8px; }
.rel-doc { width: 100%; text-align: left; padding: 11px 13px; border: var(--lijndikte) solid var(--c-lijn); border-radius: 11px; background: #fff; cursor: pointer; font-family: var(--font-ui); transition: border-color var(--overgang); }
.rel-doc:hover { border-color: var(--c-lijn-2); }
.rel-doc__kop { display: flex; justify-content: space-between; gap: 8px; font-size: .66rem; color: var(--c-groen-d); }
.rel-docst { font-weight: 700; }
.rel-docst--groen { color: var(--c-groen-d); }
.rel-docst--amber { color: var(--c-amber); }
.rel-docst--terra { color: var(--c-terra-d); }
.rel-doc__label { font-weight: 700; font-size: .8rem; margin-top: 3px; }
.rel-doc__bedrag { font-weight: 800; font-size: .84rem; margin-top: 2px; }
.rel-leeg { font-size: .76rem; color: var(--c-ink-3); }

/* Woningkluis */
.rel-kluis { display: flex; flex-direction: column; gap: 8px; }
.rel-kluisdoc { display: flex; align-items: center; gap: 9px; padding: 9px 11px; border-radius: 10px; background: var(--c-groen-t); }
.rel-kluisdoc__ic { color: var(--c-groen-d); font-size: .78rem; }
.rel-kluisdoc__naam { font-size: .74rem; line-height: 1.35; }
.rel-kluisdoc__bron { font-size: .62rem; color: var(--c-ink-3); }

/* Bewerken */
.rel-bewerk { display: flex; flex-direction: column; gap: 10px; padding: 13px 14px; border: 1px dashed var(--c-groen); border-radius: var(--radius); margin-bottom: 14px; background: #fff; }
.rel-bewerk__acties { display: flex; gap: 8px; justify-content: flex-end; }
/* Relatie-360 · personalia bewerken (2-koloms raster in de drawer) */
.rel-bewerk__raster { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; }
.rel-bewerk__raster .off-veld { margin: 0; }
/* Communicatie-tijdlijn: inkomend krijgt een terra-stip */
.rel-event__dot--in { background: var(--c-terra); }
/* offerte-kaartjes in de Klant-360: div-variant (klik zit op het nummer) */
.rel-doc--stil { cursor: default; }

/* ---- leadbron-verdeling (21-07): instroom → omzet per bron ---- */
.rel-leadbron { margin: 4px 0 16px; padding: 16px 18px; }
.rel-leadbron__kop { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; }
.rel-leadbron__hint { font: 500 .66rem var(--font-ui); color: var(--c-ink-3); }
.rel-leadbron__hint a { color: var(--c-groen-d); font-weight: 700; }
.rel-leadbron__rij { display: grid; grid-template-columns: 1.4fr 64px 1fr 70px 84px 110px; gap: 10px; align-items: center; padding: 7px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font: 500 .72rem var(--font-ui); color: var(--c-ink-2); }
.rel-leadbron__rij:last-child { border-bottom: none; }
.rel-leadbron__rij--kop { font-size: .56rem; text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); }
.rel-leadbron__balk { height: 6px; border-radius: 99px; background: var(--c-creme); overflow: hidden; }
.rel-leadbron__balk i { display: block; height: 100%; background: var(--c-groen-d); border-radius: 99px; }

/* soort-wissel nieuwe relatie (21-07): klant- ↔ leverancier-velden */
.rel-soort--klant, .rel-soort--lev { grid-column: 1 / -1; padding: 0; }
.bs-form[hidden] { display: none !important; }

/* KVK-ophalen in het bedrijfsformulier (22-07) */
.rel-kvkuit { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 10px; border: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme); font: 500 .7rem var(--font-ui); color: var(--c-ink-2); }
.rel-kvkuit i { color: var(--c-groen-d); font-style: normal; font-weight: 700; }
.rel-kvkuit div { display: flex; flex-direction: column; gap: 2px; }
.rel-kvkuit__test { color: var(--c-ink-3); font-size: .64rem; }
.rel-kvkuit__fout { color: var(--c-rood); }
.rel-kvkuit__laden { color: var(--c-ink-3); }
.rel-kvkres { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; border: none; background: #fff; border-radius: 8px; padding: 8px 12px; cursor: pointer; font: inherit; text-align: left; }
.rel-kvkres:hover { background: var(--c-groen-t); }
.rel-kvkres .mono { font-size: .62rem; color: var(--c-ink-3); }

/* Verstilling 31-07 (akkoord Michiel): twee tegels boven de lijst —
   Instroom · herkomst (cijfers klikken door) en Klanten (alleen het
   getal; klik = filter op relaties mét opdracht). */
.rel-instroomtegels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; margin: 14px 0 4px; }
.rel-intgl { display: flex; flex-direction: column; gap: 4px; text-align: left;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn); border-radius: var(--radius);
  padding: 14px 18px; font-family: var(--font-ui); box-shadow: var(--schaduw-tegel);
  transition: border-color var(--overgang), box-shadow var(--overgang); }
.rel-intgl__lbl { font-size: .74rem; font-weight: 700; color: var(--c-ink-2); }
.rel-intgl__n { font-size: 1.5rem; font-weight: 800; color: var(--c-ink); }
.rel-intgl__delen { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 2px; }
.rel-intgl__deel { border: 0; background: transparent; padding: 0; cursor: pointer;
  font-family: var(--font-ui); font-size: .72rem; color: var(--c-ink-2); }
.rel-intgl__deel b { font-weight: 800; color: var(--c-ink); }
.rel-intgl__deel:hover { color: var(--c-groen-d); }
.rel-intgl__deel:hover b { color: var(--c-groen-d); }
button.rel-intgl { cursor: pointer; }
button.rel-intgl:hover { border-color: var(--c-lijn-2); box-shadow: var(--schaduw-tegel-hover); }
.rel-intgl--klant.is-actief { border-color: var(--c-groen); }
.rel-intgl--klant.is-actief .rel-intgl__n { color: var(--c-groen-d); }
@media (prefers-reduced-motion: reduce) { .rel-intgl { transition: none; } }

/* Verdeling 01-08: pure lijst — selectie-actiebalk + klikbaar klantnummer */
.rel-knr--knop { border: 0; background: transparent; padding: 0; cursor: pointer; text-align: left;
  color: var(--c-groen-d); font-weight: 700; text-decoration: none; }
.rel-knr--knop:hover { text-decoration: underline; }
.rel-actiebalk { display: flex; gap: 8px; flex-wrap: wrap; padding: 10px 16px; background: var(--c-creme);
  border-top: var(--lijndikte) solid var(--c-lijn); }

/* ═══ RE2 · de relatielijst uit wireframe v3 ═══
   Tweeluik: links de opgeslagen weergaven (filter + kolommen + sortering),
   rechts de tabel met kolomkeuze en bulk-acties. Alleen tokens. */
.rl-schil { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.rl-balk { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  padding: 18px 26px 12px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.rl-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0 0; }
.rl-rek { flex: 1; }
.rl-zoek { min-width: 300px; padding: 8px 12px; font-size: .8rem; font-family: inherit;
  border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); }
/* RE7 (voorstel A, 12-08): het weergaven-paneel is weg — de lijst krijgt
   de volle breedte; de .rl-views-stijlen hieronder zijn ongebruikt tot
   het sloopbesluit (uitzetlijst) */
.rl-vlak { display: grid; grid-template-columns: minmax(0, 1fr); flex: 1; min-height: 0; }

/* RE7 · segment- en rollenbalk: aaneengesloten chipgroepen mét telling */
.rl-segmentbalk { display: flex; align-items: center; gap: 14px; padding: 10px 20px 0; flex-wrap: wrap; }
.rl-seggroep { display: inline-flex; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; overflow: hidden; }
.rl-seg { border: 0; background: #fff; padding: 6px 12px; font: 700 .72rem var(--font-ui); color: var(--c-ink-2);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border-right: var(--lijndikte) solid var(--c-lijn); }
.rl-seg:last-child { border-right: 0; }
.rl-seg.is-actief { background: var(--c-groen); color: #fff; }
.rl-seg.is-actief .rl-tel { color: #fff; opacity: .85; }
.rl-tel { font-size: .62rem; color: var(--c-ink-3); }
.rl-richting { margin-left: 4px; font-size: .6rem; }
.rl-sorteer.is-actief { color: var(--c-ink); }

/* links: weergaven */
.rl-views { border-right: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme);
  display: flex; flex-direction: column; padding: 14px 12px; gap: 2px; overflow-y: auto; }
.rl-vkop { font-size: .64rem; text-transform: uppercase; letter-spacing: .07em; color: var(--c-ink-3);
  margin: 0 0 4px; font-weight: 800; }
.rl-vknop { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left; border: 0;
  background: none; border-radius: var(--radius); padding: 7px 10px; font-size: .78rem;
  font-family: inherit; color: var(--c-ink); cursor: pointer; }
.rl-vknop:hover { background: var(--c-paneel-2); }
.rl-vknop.is-actief { background: var(--c-groen-t); font-weight: 700; color: var(--c-groen-d); }
.rl-vknop small { margin-left: auto; color: var(--c-ink-3); font-size: .68rem; }
.rl-vweg { color: var(--c-ink-3); font-size: .7rem; padding: 0 2px; }
.rl-vweg:hover { color: var(--c-rood); }
.rl-vscheiding { height: 1px; background: var(--c-lijn); margin: 10px 4px; }
.rl-vnieuw { display: flex; align-items: center; gap: 6px; width: 100%; text-align: left;
  border: 1px dashed var(--c-lijn-2); background: none; border-radius: var(--radius);
  padding: 7px 10px; font-size: .74rem; font-family: inherit; color: var(--c-ink-2); cursor: pointer; }
.rl-vnieuw:hover { background: var(--c-paneel-2); }
.rl-vnieuw small { margin-left: auto; color: var(--c-ink-3); }
.rl-vnieuw.is-actief { background: var(--c-groen-t); color: var(--c-groen-d); border-style: solid; border-color: var(--c-groen); }

/* rechts: tabel */
.rl-tabelvlak { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.rl-lkop { display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.rl-lkop b { font-size: .86rem; }
.rl-telling { font-size: .72rem; color: var(--c-ink-3); margin-right: 8px; }
.rl-bulk { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 9px 20px;
  background: var(--c-groen-t); border-bottom: var(--lijndikte) solid var(--c-groen); font-size: .78rem; }
.rl-tabelscroll { flex: 1; overflow: auto; }
.rl-tabel { border-collapse: collapse; width: 100%; }
.rl-tabel th { position: sticky; top: 0; background: #fff; text-align: left; padding: 8px 10px;
  border-bottom: var(--lijndikte) solid var(--c-lijn-2); z-index: 1; }
.rl-sorteer { border: 0; background: none; font: inherit; font-size: .66rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .06em; color: var(--c-ink-3); cursor: pointer; padding: 0; }
.rl-sorteer:hover { color: var(--c-ink); }
.rl-tabel td { padding: 9px 10px; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; vertical-align: top; }
.rl-rij { cursor: pointer; }
.rl-rij:hover td { background: var(--c-paneel-2); }
.rl-rij.is-archief td { opacity: .62; }
.rl-vink { width: 34px; }
.rl-sub { font-size: .68rem; color: var(--c-ink-3); }
.rl-fase { font-size: .64rem; font-weight: 700; border: var(--lijndikte) solid var(--c-lijn-2);
  border-radius: 99px; padding: 1px 9px; color: var(--c-ink-2); white-space: nowrap; }
.rl-fase.is-klant { background: var(--c-ink); border-color: var(--c-ink); color: #fff; }
.rl-fase.is-offerte { border-color: var(--c-groen); color: var(--c-groen-d); }
.rl-fase.is-akkoord { background: var(--c-groen-t); border-color: var(--c-groen); color: var(--c-groen-d); }
.rl-fase.is-opvolging { border-color: var(--c-amber); color: var(--c-amber); }
.rl-dubbel { font-size: .6rem; font-weight: 800; color: var(--c-amber); border: 1px solid var(--c-amber);
  border-radius: 4px; padding: 0 5px; margin-left: 6px; white-space: nowrap; }
.rl-tag { font-size: .62rem; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px;
  padding: 0 7px; margin-right: 3px; color: var(--c-ink-2); }
.rl-pagina { display: flex; align-items: center; gap: 10px; justify-content: center;
  padding: 10px; border-top: var(--lijndikte) solid var(--c-lijn); font-size: .74rem; }

/* modalen: kolomkeuze en de verzendlijst van een campagne */
.rl-kolkeuze { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 6px; }
.rl-kolvink { display: flex; align-items: center; gap: 6px; font-size: .76rem; color: var(--c-ink-2); }
.rl-kolvink input { accent-color: var(--c-groen); }
.rl-verzendlijst { max-height: 240px; overflow-y: auto; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: var(--radius); }
.rl-verzendrij { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px;
  font-size: .74rem; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.rl-verzendrij:last-child { border-bottom: 0; }
.rl-let { font-size: .72rem; color: var(--c-amber); margin: 8px 0 0; }

@media (max-width: 1000px) {
  .rl-vlak { grid-template-columns: 1fr; }
  .rl-views { border-right: 0; border-bottom: var(--lijndikte) solid var(--c-lijn); max-height: 220px; }
}

/* RE4 · de tweede ingang: schakelaar Relaties | Woningen */
.rl-schakel { display: flex; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: var(--radius); overflow: hidden; }
.rl-schakelknop { border: 0; background: #fff; padding: 6px 14px; font-size: .74rem; font-weight: 700;
  color: var(--c-ink-2); font-family: inherit; cursor: pointer; }
.rl-schakelknop.is-actief { background: var(--c-groen); color: #fff; }
.rl-vlak--breed { grid-template-columns: minmax(0, 1fr); }