/* =====================================================================
   organisaties.css — module 6.1 · Organisaties & tenant.
   Uitsluitend tokens; Thermo-slate-blauw uit het prototype gemapt op
   ink (blauw verboden). Module-wortel-marge volgens de vaste norm.
===================================================================== */

.org { max-width: 1240px; margin: 0 auto; padding: 26px 32px 72px; display: flex; flex-direction: column; gap: 16px; }

.org-kop h1 { margin: 2px 0 6px; font-size: 1.45rem; letter-spacing: -.01em; }
.org-kop p { margin: 0; max-width: 74ch; color: var(--c-ink-2); font-size: .82rem; line-height: 1.5; }
.org-intro { margin: 0; font-size: .78rem; color: var(--c-ink-2); max-width: 80ch; line-height: 1.55; }
.org-voetnoot { font-size: .74rem; color: var(--c-ink-2); line-height: 1.55; }
.org-balk { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; }
.org-rek { flex: 1; }
.org-totaal { font-size: .8rem; color: var(--c-ink-2); }
.org-bloktitel { font-size: .92rem; display: block; margin-bottom: 4px; }

.org-knop {
  padding: 9px 14px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn-2);
  background: #fff; color: var(--c-ink); font: 700 .78rem var(--font-ui);
}
.org-knop:hover { border-color: var(--c-ink-3); }
.org-knop--primair { background: var(--c-groen); border-color: var(--c-groen); color: #fff; }
.org-knop--licht { background: color-mix(in srgb, #fff 12%, transparent); border-color: color-mix(in srgb, #fff 25%, transparent); color: #fff; }

.org-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
.org-tab {
  padding: 9px 15px; border-radius: 10px; cursor: pointer; white-space: nowrap;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .78rem var(--font-ui); color: var(--c-ink-2);
}
.org-tab.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); color: var(--c-groen-d); font-weight: 700; }
.org-flt {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 8px 14px; border-radius: 9px; cursor: pointer;
  border: var(--lijndikte) solid var(--c-lijn); background: #fff;
  font: 600 .74rem var(--font-ui); color: var(--c-ink-2);
}
.org-flt.is-actief { background: var(--c-ink); border-color: var(--c-ink); color: #fff; font-weight: 700; }

.org-dot { width: 9px; height: 9px; border-radius: 3px; display: inline-block; }
.is-groen.org-dot, .org-dot.is-groen { background: var(--c-groen); }
.org-dot.is-terra { background: var(--c-terra); }
.org-dot.is-ink { background: var(--c-ink); }

/* ---- rechtspersonen ---- */
.org-kaarten { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 16px; }
.org-kaart { overflow: hidden; }
.org-kaart__balk { display: block; height: 4px; }
.org-kaart__balk.is-groen { background: var(--c-groen); }
.org-kaart__balk.is-terra { background: var(--c-terra); }
.org-kaart__balk.is-ink { background: var(--c-ink); }
.org-kaart__body { padding: 17px 20px; display: flex; flex-direction: column; gap: 13px; }
.org-kaart__kop { display: flex; align-items: center; gap: 13px; }
.org-logo {
  width: 44px; height: 44px; flex: none; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font: 800 1.1rem var(--font-ui); color: #fff;
}
.org-logo.is-groen { background: var(--c-groen); }
.org-logo.is-terra { background: var(--c-terra); }
.org-logo.is-ink { background: var(--c-ink); }
.org-kaart__naam { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.org-kaart__naam strong { font-size: 1rem; }
.org-kaart__kop em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); }
.org-velden { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; font-size: .74rem; }
.org-velden span { color: var(--c-ink-3); }
.org-velden b { font-weight: 600; color: var(--c-ink); }
.org-velden .mono { font-size: .7rem; }
.org-reeksen { border-top: var(--lijndikte) solid var(--c-lijn); padding-top: 11px; display: flex; flex-direction: column; gap: 7px; }
.org-reeksen > div:not(.org-adminrij) { display: flex; flex-wrap: wrap; gap: 6px; }
.org-reeksen i {
  font-style: normal; font-size: .62rem; font-weight: 600;
  padding: 3px 8px; border-radius: 6px; background: var(--c-creme); color: var(--c-ink-2);
}
.org-adminrij { display: flex; gap: 8px; font-size: .72rem; }
.org-adminrij span { color: var(--c-ink-3); }
.org-adminrij b { font-weight: 600; }

/* ---- tenant & huur ---- */
.org-huurgrid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.org-huurgrid > div:first-child { display: flex; flex-direction: column; gap: 8px; }
.org-modrij { display: flex; align-items: center; gap: 12px; padding: 12px 15px; }
.org-modrij > div { flex: 1; min-width: 0; }
.org-modrij strong { font-size: .8rem; display: block; }
.org-modrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.org-toggle {
  width: 40px; height: 22px; flex: none; border-radius: 99px; border: 0; cursor: pointer;
  background: var(--c-lijn-2); position: relative; transition: background 160ms;
}
.org-toggle i {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: #fff; transition: left 160ms; font-style: normal;
}
.org-toggle.is-aan { background: var(--c-groen); }
.org-toggle.is-aan i { left: 21px; }
.org-toggle.is-vast { opacity: .45; cursor: not-allowed; }
.org-huurzij { display: flex; flex-direction: column; gap: 14px; }
.org-huurhero {
  border-radius: 16px; background: var(--c-ink); color: var(--c-creme);
  padding: 20px 22px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
}
.org-huurhero .kicker { color: var(--c-lijn); }
.org-huurhero strong { font-size: 2rem; line-height: 1; }
.org-huurhero em { font-style: normal; font-size: .74rem; opacity: .8; line-height: 1.5; }
.org-huurformule { font-size: .62rem; opacity: .6; }
.org-notitie { padding: 15px 18px; display: flex; flex-direction: column; gap: 5px; }
.org-notitie strong { font-size: .8rem; }
.org-notitie span { font-size: .72rem; color: var(--c-ink-2); line-height: 1.55; }

/* ---- commissie ---- */
.org-commrij { padding: 13px 16px; display: flex; flex-direction: column; gap: 7px; }
.org-commrij__kop { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.org-commrij__kop b { color: var(--c-groen-d); }
.org-commrij__kop > strong { font-size: .95rem; }
.org-ent { font: 700 .76rem var(--font-ui); padding: 3px 10px; border-radius: 6px; color: #fff; }
.org-ent.is-groen { background: var(--c-groen); }
.org-ent.is-terra { background: var(--c-terra); }
.org-ent.is-ink { background: var(--c-ink); }
.org-commrij__voet { font-size: .66rem; color: var(--c-ink-3); }

/* ---- gedeeld vs gescheiden ---- */
.org-tweekolom { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.org-lijstblok { padding: 18px 20px; display: flex; flex-direction: column; gap: 9px; }
.org-lijstblok.is-groen { border-color: var(--c-groen); }
.org-lijstblok.is-ink { border-color: var(--c-ink-3); }
.org-lijstblok__kop { display: flex; align-items: center; gap: 9px; }
.org-lijstblok__kop strong { font-size: .92rem; }
.org-lijstblok > em { font-style: normal; font-size: .7rem; color: var(--c-ink-3); margin-bottom: 4px; }
.org-lijstrij { display: flex; gap: 9px; align-items: flex-start; font: 500 .78rem/1.5 var(--font-ui); color: var(--c-ink); }
.org-lijstrij i { font-style: normal; font-weight: 800; flex: none; }
.org-lijstrij i.is-groen { color: var(--c-groen-d); }
.org-lijstrij i.is-ink { color: var(--c-ink-2); }

/* ---- klantreis ---- */
.org-krblok { padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
.org-krblok.is-groen { background: var(--c-groen-t); border-color: var(--c-groen); }
.org-krblok.is-ink { background: var(--c-paneel); border-color: var(--c-ink-3); }
.org-krstappen { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.org-krstap {
  display: inline-flex; align-items: center; gap: 9px;
  background: #fff; border: var(--lijndikte) solid var(--c-lijn);
  border-radius: 11px; padding: 9px 13px;
}
.org-krstap i {
  width: 20px; height: 20px; border-radius: 50%; font-style: normal; font-size: .62rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.org-krstap i.is-groen { background: var(--c-groen); }
.org-krstap i.is-ink { background: var(--c-ink); }
.org-krstap strong { font-size: .76rem; }
.org-krpijl { color: var(--c-ink-3); font-weight: 700; }
.org-krblok > em { font-style: normal; font-size: .72rem; color: var(--c-ink-2); line-height: 1.55; }

/* ---- responsief ---- */
@media (max-width: 1080px) {
  .org-huurgrid, .org-tweekolom { grid-template-columns: 1fr; }
}

/* F2-lat (16-07-2026) */
.org-knop--klein { font-size: 11px; padding: 5px 10px; align-self: flex-start; margin-top: 8px; }

/* F2c · white-label preview (klantweergave) */
.org-prev { border: 1px solid var(--c-lijn); border-radius: 12px; overflow: hidden; margin: 10px 0; background: var(--c-paneel); }
.org-prev__browser { font-size: 10.5px; color: var(--c-ink-2); background: var(--c-creme); padding: 7px 12px; border-bottom: 1px solid var(--c-lijn); }
.org-prev__kop { display: flex; gap: 12px; align-items: center; padding: 14px 16px 8px; }
.org-prev__kop strong { font-size: 15px; display: block; }
.org-prev__kop em { font-size: 11.5px; color: var(--c-ink-2); font-style: normal; }
.org-prev__stappen { display: flex; flex-direction: column; gap: 6px; padding: 8px 16px; }
.org-prevstap { display: flex; gap: 10px; align-items: center; border: 1px solid var(--c-lijn); border-radius: 10px; padding: 8px 12px; font-size: 12.5px; }
.org-prevstap.is-actief { border-color: var(--c-groen-d); background: color-mix(in srgb, var(--c-groen) 8%, transparent); font-weight: 700; }
.org-prevstap i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 10.5px; font-weight: 800; border: 1px solid var(--c-lijn); }
.org-prevstap i.is-groen { color: var(--c-groen-d); border-color: var(--c-groen-d); }
.org-prevstap i.is-ink { color: var(--c-ink); border-color: var(--c-ink); }
.org-prevstap i.is-terra { color: var(--c-terra); border-color: var(--c-terra); }
.org-prevstap em.chip { margin-left: auto; }
.org-prev__voet { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--c-ink-2); padding: 10px 16px 14px; border-top: 1px solid var(--c-lijn); margin-top: 6px; }

/* Documenten & opmaak (19-07-2026): links de organisatie, rechts wat vast
   staat en wat vrij is. Het onderscheid is de kern van deze aanpak. */
.org-docgrid { display: grid; grid-template-columns: 260px 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .org-docgrid { grid-template-columns: 1fr; } }
.org-orglijst { padding: 14px; display: grid; gap: 6px; }
.org-orgkies { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px;
  border-radius: var(--radius); border: var(--lijndikte) solid var(--c-lijn); background: var(--c-creme);
  cursor: pointer; transition: border-color var(--overgang); }
.org-orgkies:hover { border-color: var(--c-lijn-2); }
.org-orgkies.is-actief { border-color: var(--c-groen); background: var(--c-groen-t); }
.org-orgkies__dot { width: 12px; height: 12px; border-radius: 50%; flex: none; }
.org-orgkies strong { display: block; font-size: .82rem; }
.org-orgkies span { font-size: .66rem; color: var(--c-ink-3); }
.org-dockaart { padding: 18px 20px; }
.org-dockop { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.org-dockop strong { display: block; font-size: 1rem; }
.org-docsub { font-size: .76rem; line-height: 1.6; color: var(--c-ink-3); margin: 8px 0 14px; max-width: 74ch; }
.org-dockern { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 22px; margin-bottom: 12px; }
.org-docrij { display: flex; align-items: baseline; gap: 10px; padding: 6px 0;
  border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .78rem; }
.org-docrij span { color: var(--c-ink-3); min-width: 140px; }
.org-docrij strong { flex: 1; font-weight: 600; }
.org-docrij em { font-style: normal; font-size: .66rem; color: var(--c-ink-3); }
.org-docsectie { margin-top: 20px; padding-top: 16px; border-top: var(--lijndikte) solid var(--c-lijn-2); }
.org-docsectie .kicker { display: block; margin-bottom: 8px; }
.org-docsectie .kicker + .kicker, .org-docvinken + .btn { margin-top: 12px; }
.org-docvinken { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-bottom: 12px; }
.org-docvink { display: flex; align-items: center; gap: 8px; font-size: .78rem; cursor: pointer; }
.org-kleurdot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: middle; margin-right: 5px; }
.org-logovb { display: block; max-width: 180px; }
.org-linkknop { background: transparent; border: 0; padding: 0; cursor: pointer;
  font: 600 .66rem var(--font-ui); color: var(--c-groen-d); text-decoration: underline; }
.org-linkknop:hover { color: var(--c-ink); }
.org-docrij--brief { align-items: flex-start; }
.org-docrij--brief strong { font-weight: 400; font-size: .74rem; line-height: 1.5; color: var(--c-ink-2); }

/* ---- Huisstijl & merk (SaaS fase 2) ---- */
.org-hsgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.org-hskaart { padding: 18px; }
.org-hsvelden { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; margin-top: 12px; }
.org-hsvelden--onder { margin-top: 14px; padding-top: 14px; border-top: var(--lijndikte) solid var(--c-lijn); }
.org-hsveld label { display: block; font: 700 .68rem var(--font-ui); color: var(--c-ink-2); margin-bottom: 5px; }
.org-hsveld__rij { display: flex; gap: 7px; align-items: center; }
.org-hsveld__rij input[type="color"] { width: 40px; height: 34px; padding: 2px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: #fff; cursor: pointer; }
.org-hsveld__rij input[type="text"] { flex: 1; min-width: 0; font-size: .74rem; padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: #fff; color: var(--c-ink); }
.org-hsveld input[type="number"], .org-hsveld input[type="text"]:not(.mono) { width: 100%; font: 500 .78rem var(--font-ui); padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: #fff; color: var(--c-ink); }
.org-hsveld em { display: block; font-style: normal; font-size: .64rem; color: var(--c-ink-3); margin-top: 4px; }
.org-hsveld--breed { grid-column: 1 / -1; }
.org-hsfout { margin-top: 12px; padding: 10px 13px; border-radius: var(--radius); background: var(--c-rood-t); color: var(--c-rood); font: 600 .74rem var(--font-ui); }
.org-hsok { margin-top: 12px; padding: 10px 13px; border-radius: var(--radius); background: var(--c-groen-t); color: var(--c-groen-d); font: 600 .74rem var(--font-ui); }
.org-hsacties { display: flex; gap: 10px; align-items: center; margin-top: 14px; flex-wrap: wrap; }
.org-hsnoot { font-size: .66rem; color: var(--c-ink-3); line-height: 1.5; margin-top: 8px; display: block; }
.org-hsvoorbeeld { padding: 16px; display: grid; gap: 10px; }
.org-hsvb-kaart { padding: 14px 16px; display: grid; gap: 6px; font-size: .8rem; }
.org-hsvb-rij { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.org-hsvb-zone { padding: 11px 14px; font-size: .72rem; }
.org-hslogo { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.org-hslogo:last-of-type { border-bottom: 0; }
.org-hslogo > div { flex: 1; }
.org-hslogo strong { display: block; font-size: .76rem; }
.org-hslogo span { font-size: .64rem; color: var(--c-ink-3); }
.org-hslogo__beeld { max-height: 34px; max-width: 120px; object-fit: contain; }
.org-hslogo__leeg { font: 600 .66rem var(--font-ui); color: var(--c-ink-3); }
@media (max-width: 1100px) { .org-hsgrid { grid-template-columns: 1fr; } }

/* ---- Go-live & koppelingen (SaaS fase 3-5) ---- */
.org-glbalk { height: 7px; border-radius: 99px; background: var(--c-paneel); overflow: hidden; margin: 10px 0 12px; }
.org-glbalk i { display: block; height: 100%; background: var(--c-groen); border-radius: 99px; }
.org-glitem { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); }
.org-glitem:last-of-type { border-bottom: 0; }
.org-glitem > span { font-weight: 800; color: var(--c-rood); width: 16px; }
.org-glitem.is-ok > span { color: var(--c-groen-d); }
.org-glitem strong { display: block; font-size: .74rem; }
.org-glitem em { font-style: normal; font-size: .64rem; color: var(--c-ink-3); }
.org-glnoot { font-size: .68rem; color: var(--c-ink-2); line-height: 1.55; margin: 8px 0; }
.org-glrij { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.org-glrij input { flex: 1; font: 500 .74rem var(--font-ui); padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: #fff; color: var(--c-ink); }
.org-glok { margin-top: 10px; padding: 10px 12px; border-radius: var(--radius); background: var(--c-groen-t); color: var(--c-groen-d); font-size: .72rem; line-height: 1.5; }
.org-gllink { width: 100%; margin-top: 6px; font-size: .68rem; padding: 8px 10px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: #fff; color: var(--c-ink); }
.org-glstatus { display: flex; gap: 8px; align-items: center; font-size: .7rem; margin: 8px 0; flex-wrap: wrap; }
.org-glstatus em { font-style: normal; color: var(--c-ink-3); font-size: .62rem; }
.org-glfoutje { font-size: .62rem; color: var(--c-rood); background: var(--c-rood-t); border-radius: 8px; padding: 6px 9px; margin-bottom: 6px; word-break: break-all; }
.org-glpostbus { display: grid; grid-template-columns: 1.4fr .8fr auto; gap: 7px; align-items: center; padding: 5px 0; }
.org-glpostbus--hook { grid-template-columns: 1.3fr 1fr auto auto; }
.org-glpostbus input, .org-glpostbus select { font: 500 .72rem var(--font-ui); padding: 8px 9px; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 8px; background: #fff; color: var(--c-ink); min-width: 0; }
.org-glvink { display: flex; gap: 5px; align-items: center; font-size: .66rem; color: var(--c-ink-2); white-space: nowrap; }
.org-glsegment { display: flex; gap: 0; border: var(--lijndikte) solid var(--c-lijn-2); border-radius: 99px; overflow: hidden; width: fit-content; }
.org-glseg { border: 0; background: #fff; font: 700 .68rem var(--font-ui); color: var(--c-ink-3); padding: 7px 14px; cursor: pointer; }
.org-glseg.is-actief { background: var(--c-groen); color: #fff; }
.org-glsleutel { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: var(--lijndikte) solid var(--c-lijn); font-size: .72rem; }
.org-glsleutel:last-of-type { border-bottom: 0; }
.org-glsleutel.is-weg { opacity: .55; }
.org-glsleutel > div { flex: 1; }
.org-glsleutel strong { display: block; font-size: .72rem; }
.org-glsleutel em { font-style: normal; font-size: .62rem; color: var(--c-ink-3); }
.org-hsgrid > div > .org-hskaart { margin-bottom: 14px; }