:root {
  --maasblauw: #1F4E5F;
  --maasblauw-deep: #153842;
  --mergelcreme: #F5F1E8;
  --basaltinkt: #242320;
  --mergelgoud: #C9A227;
  --mergelgoud-hover: #b8931f;
  --dakpanroest: #8C6A56;
  --wit: #FBF9F3;

  --gevaar: #b3402a;
  --gevaar-rand: rgba(179, 64, 42, 0.35);
  --gevaar-achtergrond-hover: rgba(179, 64, 42, 0.08);
  --tekst-gedempt: #565349;
  --tekst-zwak: #8a8677;
  --rand-standaard: rgba(36, 35, 32, 0.2);

  --status-amber-bg: #f3e6c4;    --status-amber-tekst: #7a5d0f;
  --status-groen-bg: #dcece6;    --status-groen-tekst: #1f5f4a;
  --status-blauw-bg: #dde7ec;    --status-blauw-tekst: var(--maasblauw-deep);
  --status-rood-bg: #f3ddd6;     --status-rood-tekst: var(--gevaar);
  --status-neutraal-bg: #e8e5db; --status-neutraal-tekst: var(--basaltinkt);
  /* Fase C: "Geselecteerd" krijgt bewust een subtiel goud accent i.p.v. fel
     groen/rood - spec fase C, punt 53 ("Geen neon", "subtiel goud/groen"). */
  --status-goud-bg: #ede1bd;     --status-goud-tekst: #6b5215;

  --ruimte-1: 0.35rem; --ruimte-2: 0.5rem; --ruimte-3: 0.7rem;
  --ruimte-4: 0.9rem;  --ruimte-5: 1.2rem; --ruimte-6: 1.5rem;

  --radius-klein: 6px; --radius-midden: 8px; --radius-groot: 10px; --radius-pill: 999px;
  /* MIA VISUAL REFRESH V2: bijna geen zware schaduw meer - een haarfijne
     rand doet het meeste werk, de schaduw is er nog uitsluitend voor
     zwevende elementen (overflow-menu, edit-paneel) waar echte diepte nodig
     is (zie .schaduw-zwevend hieronder). Kaarten/rijen gebruiken voortaan
     primair --rand-fijn. */
  --schaduw-kaart: 0 1px 2px rgba(21, 56, 66, 0.05);
  --schaduw-zwevend: 0 12px 32px rgba(21, 56, 66, 0.16);
  --rand-fijn: 1px solid rgba(36, 35, 32, 0.09);

  /* Typografische schaal (spec V2 punt 11) - vaste stappen i.p.v. losse
     rem-waarden per component. paginatitel/entiteitstitel gebruiken Fraunces
     (serif) elders al via h2/h3; deze tokens zijn voor de tussenliggende/
     kleinere niveaus die voorheen willekeurig varieerden. */
  --tekst-xs: 0.78rem; --tekst-sm: 0.85rem; --tekst-md: 0.92rem;
  --tekst-lg: 1rem;    --tekst-xl: 1.15rem; --tekst-2xl: 2.2rem;
  --tekst-micro: 0.7rem;    /* micro-label: uppercase, gedempt */
  --tekst-sectietitel: 0.95rem;  /* sectiekopjes binnen een dossier/paneel */
}

* {
  box-sizing: border-box;
}

/* Waarborgt dat het native hidden-attribuut ALTIJD wint, ook op elementen
   die zelf een expliciete display-regel hebben (bijv. .wwso-formulier-
   sectie-grid { display: grid }, die anders de standaard [hidden] {
   display: none } van de browser overschrijft - gevonden via de WWSO-demo:
   de is_zolder/keuken_aanwezig/energieprestatie_type-conditionele velden
   bleven zichtbaar ondanks hidden). */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  background: var(--mergelcreme);
  color: var(--basaltinkt);
  overflow-x: hidden;
  /* Fase L.3: tabular-nums app-breed i.p.v. losse per-component regels (die
     her en der al stonden, zie .dashboard-strip-getal/.financieel-tx-bedrag/
     e.a.) - font-variant-numeric erft door naar alle kinderen, dus elk
     bedrag/getal in elke tabel/kaart/dossier krijgt nu gelijkbrede cijfers
     zonder dat elke afzonderlijke geld-selector dat apart hoeft te zetten. */
  font-variant-numeric: tabular-nums;
}

h2, h3 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* Pagina-titel (V2 punt 2): elke tabblad-h2 is nu de "Financieel"/"Verhuring"-
   stijl kop, consistent over de hele app. */
.tab-sectie h2 {
  margin-top: 0;
  margin-bottom: 0.15rem;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--maasblauw-deep);
}
.tab-sectie > .sectie-uitleg:first-of-type,
.tab-sectie h2 + .sectie-uitleg {
  margin-top: 0;
  margin-bottom: 1.7rem;
  font-size: 0.92rem;
}

/* Fase L.3.1 (QA-bevinding: "gewone muisklik laat een volledige gouden
   rounded outline achter"), verscherpt in Fase L.4 (eindreview-bevinding:
   dit was op meerdere screenshots nog zichtbaar, o.a. actieve sidebar-items
   en Financieel-subtabs) - de eerdere :focus-visible-only aanpak leunde op
   de browser-eigen heuristiek, die niet in elke omgeving/interactie
   deterministisch bleek. Nu leidend: de JS-bijgehouden .mia-toetsenbord-
   navigatie-klasse op <html> (zie de mousedown/keydown-listeners bovenaan
   app.js) - outline is standaard uit, en verschijnt uitsluitend zolang die
   klasse actief is (dus na een Tab-druk, nooit na een muisklik). */
a:focus, button:focus, input:focus, textarea:focus, select:focus {
  outline: none;
}
html.mia-toetsenbord-navigatie a:focus,
html.mia-toetsenbord-navigatie button:focus,
html.mia-toetsenbord-navigatie input:focus,
html.mia-toetsenbord-navigatie textarea:focus,
html.mia-toetsenbord-navigatie select:focus {
  outline: 2px solid var(--mergelgoud);
  outline-offset: 2px;
}

/* Fase L.3.1 (QA-bevinding: "disabled footerknop oogt browser-default") -
   een generieke, terughoudende disabled-staat voor ELKE knop app-breed,
   ongeacht welke kleurklasse hij verder heeft; voorkomt dat een individuele
   knop zonder eigen :disabled-regel terugvalt op kale browser-chrome. */
button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.app-layout {
  display: flex;
  align-items: stretch;
  min-height: 100vh;
}

/* L.1 2.5 "Protected routes": index.html's markup (sidebar + tab-shells) is
   bewust publiek laadbaar (zie OPENBARE_BESTANDEN in server.js) zodat app.js
   zelf de sessie kan controleren - dat betekent zonder deze regel wél een
   korte flits van het lege app-skelet vóórdat de auth-check klaar is. Body
   start met deze class; app.js verwijdert 'm pas na een bevestigde geldige
   sessie (en stuurt anders meteen door naar /login.html, dus de class wordt
   in dat pad nooit weggehaald - geen belang, er wordt toch weggenavigeerd). */
body.auth-controle-bezig .app-layout {
  visibility: hidden;
}

.sidebar {
  width: 232px;
  flex-shrink: 0;
  background: linear-gradient(175deg, var(--maasblauw) 0%, var(--maasblauw-deep) 100%);
  color: var(--wit);
  padding: 1.7rem 1rem 1.3rem;
  display: flex;
  flex-direction: column;
  gap: 1.9rem;
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
  overflow-y: auto;
}

.logo-wrap {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  text-decoration: none;
  width: fit-content;
  padding: 0 0.75rem;
}

.logo {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: 1.2rem;
  color: var(--wit);
  letter-spacing: 0.03em;
}

.logo-sub {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: rgba(251, 249, 243, 0.55);
  margin-left: 2px;
}

.logo-bar {
  display: flex;
  width: 30px;
  height: 2px;
  border-radius: 2px;
  overflow: hidden;
}

.logo-bar span {
  flex: 1;
  background: var(--maasblauw);
}

.logo-bar span:nth-child(1) { background: var(--mergelgoud); }
.logo-bar span:nth-child(2) { background: var(--dakpanroest); }
.logo-bar span:nth-child(3) { background: var(--wit); }

#tabs, .sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 1.55rem;
}

.nav-groep {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(251, 249, 243, 0.09);
}

.nav-groep-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(251, 249, 243, 0.42);
  padding: 0 0.75rem;
  margin-bottom: 0.35rem;
}

.tab-knop {
  background: transparent;
  color: rgba(251, 249, 243, 0.78);
  border: none;
  border-left: 2px solid transparent;
  padding: 0.5rem 0.75rem 0.5rem 0.7rem;
  border-radius: 0 var(--radius-klein) var(--radius-klein) 0;
  cursor: pointer;
  font-size: 0.87rem;
  font-weight: 500;
  font-family: inherit;
  text-align: left;
  width: 100%;
  letter-spacing: 0.01em;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}

.tab-knop:hover {
  background: rgba(251, 249, 243, 0.07);
  color: var(--wit);
}

/* Rustig private-banking-accent i.p.v. een volle gouden pil (V2, punt 1):
   een dunne linkerrand + subtiele tint + goudgekleurde tekst - de knop
   blijft verder net zo groot/vlak als de rest van de navigatie. */
.tab-knop.actief {
  background: rgba(201, 162, 39, 0.12);
  border-left-color: var(--mergelgoud);
  color: var(--wit);
  font-weight: 600;
}

/* Eigenaar-/huurderportaal-header (eigenaar.html/huurder.html): geen donkere sidebar
   hier zoals in het beheerscherm, dus .logo/.logo-sub (bedoeld voor een donkere
   achtergrond) krijgen die achtergrond hier zelf mee - anders oogt de kop kaal en
   staat "naam + uitloggen" ongestileerd onder elkaar te zwerven. */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
  padding: 1.1rem 1.6rem;
  background: var(--maasblauw);
}

/* :not(.verborgen) i.p.v. gewoon #portaal-nav, anders wint deze ID-selector qua
   specificiteit van .verborgen { display: none } en blijft "Uitloggen" zichtbaar
   vóórdat er is ingelogd. */
#portaal-nav:not(.verborgen) {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}

#ingelogd-als {
  color: rgba(251, 249, 243, 0.85);
  font-style: normal;
  font-weight: 500;
}

#portaal-nav #uitlog-knop {
  width: auto;
  background: rgba(251, 249, 243, 0.12);
  border-color: rgba(251, 249, 243, 0.25);
  padding: 0.45rem 0.95rem;
  font-size: 0.82rem;
}

#portaal-nav #uitlog-knop:hover {
  background: rgba(251, 249, 243, 0.22);
  color: var(--wit);
}

.menu-knop {
  display: none;
  position: fixed;
  top: 0.9rem;
  left: 0.9rem;
  z-index: 1200;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: var(--radius-midden);
  background: var(--maasblauw-deep);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
}

.menu-knop span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--wit);
  border-radius: 2px;
}

/* MIA MASTER UX & VISUAL REFRESH (sectie 4/7): "Instellingen / Beheer" +
   het gedeprioriseerde legacy-financieel-blok onderaan de sidebar, los van de
   primaire moduleknoppen erboven - margin-top: auto duwt dit blok naar de
   onderkant zolang er ruimte is, zodat het duidelijk als "secundair" oogt. */
.sidebar-onderkant {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(251, 249, 243, 0.09);
}

.sidebar-legacy-groep summary {
  cursor: pointer;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(251, 249, 243, 0.4);
  padding: 0.4rem 0.75rem;
  list-style: none;
}
.sidebar-legacy-groep summary::-webkit-details-marker { display: none; }
.sidebar-legacy-groep .sidebar-nav { gap: 0.1rem; margin-top: 0.2rem; }
.sidebar-legacy-groep .tab-knop { font-size: 0.82rem; }

.sidebar-backdrop {
  display: none;
}

@media (max-width: 860px) {
  .menu-knop {
    display: flex;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1100;
    transform: translateX(-100%);
    transition: transform 0.22s ease;
    box-shadow: 4px 0 24px rgba(21, 56, 66, 0.3);
  }

  body.menu-open .sidebar {
    transform: translateX(0);
  }

  .sidebar-backdrop {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(21, 56, 66, 0.45);
    z-index: 1050;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  body.menu-open .sidebar-backdrop {
    opacity: 1;
    pointer-events: auto;
  }

  .content-area main {
    margin-top: 4.5rem;
  }
}

.content-area {
  flex: 1;
  min-width: 0;
}

main {
  max-width: 1100px;
  margin: 1.5rem auto;
  padding: 0 1.5rem 3rem 1.5rem;
}

.verborgen {
  display: none;
}

.tab-sectie h2 {
  margin-top: 0;
}

/* Fase L.3.1: standalone inline checkbox-label buiten een .formulier (bijv.
   "Toon archief" boven de Leveranciers-tabel) - zelfde compacte rij-stijl
   als .formulier label.checkbox-label, maar niet aan een formuliercontext
   gebonden. */
.checkbox-label-inline {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  color: var(--tekst-gedempt);
  margin-bottom: 0.9rem;
  cursor: pointer;
}
.checkbox-label-inline input[type="checkbox"] { width: auto; margin: 0; }

.zoek-veld {
  width: 100%;
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  margin-bottom: 0.9rem;
  background: var(--wit);
}

.tabel-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-midden);
  box-shadow: var(--schaduw-kaart);
  margin-bottom: 1.5rem;
}

table {
  width: 100%;
  border-collapse: collapse;
  background: var(--wit);
}

th, td {
  text-align: left;
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid rgba(36, 35, 32, 0.08);
  font-size: 0.92rem;
}

@media (max-width: 600px) {
  th, td {
    padding: 0.45rem 0.55rem;
    font-size: 0.82rem;
  }
}

th {
  background: var(--mergelcreme);
  font-weight: 600;
  color: var(--maasblauw-deep);
}

tbody tr:last-child td {
  border-bottom: none;
}

tbody tr:hover {
  background: rgba(31, 78, 95, 0.04);
}

.leeg-rij td {
  color: var(--tekst-zwak);
  font-style: italic;
}

.formulier {
  background: var(--wit);
  border-radius: var(--radius-midden);
  box-shadow: var(--schaduw-kaart);
  padding: 1rem 1.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
  align-items: end;
}

.formulier-breed {
  grid-column: 1 / -1;
}

/* MIA MASTER UX & VISUAL REFRESH sectie 30 ("2-koloms desktop, 1-koloms
   mobiel"): .formulier is standaard auto-fit (zoveel kolommen als passen),
   wat bij formulieren met veel korte velden (bijv. huurwijziging: 7 velden)
   tot 4 gedrongen kolommen naast elkaar leidde - het oude bulk-huurverhoging-
   formulier (met maar 2 korte velden) oogde daardoor rustiger, niet door een
   ander patroon maar puur omdat er minder velden waren. Dit modifier-klasje
   dwingt een vast maximum van 2 kolommen af voor formulieren die dat nodig
   hebben, i.p.v. .formulier zelf overal te herschrijven (kleinere blast
   radius voor de overige ~12 inklapbare formulieren die al goed oogden). */
.formulier-2kolom {
  grid-template-columns: repeat(2, 1fr);
}
@media (max-width: 640px) {
  .formulier-2kolom {
    grid-template-columns: 1fr;
  }
}

.formulier label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--basaltinkt);
  gap: 0.3rem;
}

.formulier input,
.formulier select,
.formulier textarea {
  font-size: 0.95rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  font-weight: 400;
  font-family: inherit;
  background: var(--wit);
  color: var(--basaltinkt);
}

.formulier textarea {
  resize: vertical;
  min-height: 2.4rem;
}

.formulier label.checkbox-label {
  flex-direction: row;
  align-items: center;
  gap: 0.45rem;
  font-weight: 400;
}

.formulier label.checkbox-label input[type="checkbox"] {
  width: auto;
  margin: 0;
}

.formulier-details {
  border: 1px solid rgba(36, 35, 32, 0.15);
  border-radius: 6px;
  padding: 0.6rem 0.8rem;
}

/* Compacte inklapbare create-formulieren (Eigenaar/Huurder/Contract/
   Servicekosten-afrekening/Huurverhoging/Betaling/Onderhoud/Inspectie/
   Extra inkomst/Leverancier/Eigenaar-kost) - MIA-stijl: fijne rand, mergel/
   crème, geen zware schaduw. De togglerij blijft in BEIDE standen zichtbaar
   (chevron draait mee) - zo is een per ongeluk geopend formulier altijd
   weer dicht te klikken, ook als het geen eigen Annuleren-knop heeft
   (bijv. de jaarlijkse-huurverhoging-bulkactie). */
.formulier-sectie { margin-top: var(--ruimte-4); }
.formulier-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  background: var(--mergelcreme);
  border: var(--rand-fijn);
  border-radius: var(--radius-midden);
  padding: 0.65rem 0.9rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--maasblauw-deep);
  cursor: pointer;
  text-align: left;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.formulier-toggle:hover { background: rgba(31, 78, 95, 0.05); border-color: rgba(31, 78, 95, 0.22); }
/* Fase L.3.1: markeert de ÉÉN primaire "+ Nieuw ..."-toggle op een pagina
   met meerdere add-accordions naast elkaar (bijv. Panden: "Nieuw pand"
   primair, "Kamer toevoegen" blijft de neutrale standaardstijl hierboven) -
   een restrained goud-tint i.p.v. de volle .knop-primair-pil, want dit
   blijft een brede togglebalk, geen los knopje. */
.formulier-toggle-primair {
  background: rgba(201, 162, 39, 0.1);
  border-color: rgba(201, 162, 39, 0.4);
}
.formulier-toggle-primair:hover { background: rgba(201, 162, 39, 0.16); border-color: var(--mergelgoud); }
.formulier-toggle-icoon { color: var(--mergelgoud-hover); font-weight: 700; font-size: 1rem; line-height: 1; }
.formulier-toggle-chevron { margin-left: auto; color: var(--tekst-zwak); font-weight: 400; transition: transform 0.15s ease; }
.formulier-sectie:not(.formulier-ingeklapt) .formulier-toggle-chevron { transform: rotate(90deg); }
.formulier-sectie:not(.formulier-ingeklapt) .formulier-toggle {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-color: transparent;
}
.formulier-sectie.formulier-ingeklapt .formulier-toggle-inhoud { display: none; }
.formulier-toggle-inhoud {
  border: var(--rand-fijn);
  border-top: none;
  border-radius: 0 0 var(--radius-midden) var(--radius-midden);
  padding: var(--ruimte-4) var(--ruimte-4) 0;
}
.formulier-toggle-inhoud > h3 { margin-top: 0; }
.formulier-toggle-inhoud > form.formulier { box-shadow: none; border-radius: 0; padding: 0 0 var(--ruimte-4); }

/* Fase L.3.3: "workflow-card"-variant voor Huurverhogingen "Nieuwe
   huurverhogingsronde" - dit is de hoofdactie van de hele pagina (een
   volledig werkscherm: instellingen, contractselectie, tabel, footer-CTA),
   geen simpel invoerformulier zoals de andere formulier-toggle-secties -
   krijgt daarom een lichte achtergrondtint en iets meer lucht, zodat het
   duidelijk als hét operationele werkgebied van de pagina oogt. */
.huurwijziging-workflow-card {
  background: var(--wit);
  padding: var(--ruimte-5) var(--ruimte-5) var(--ruimte-4);
}
.huurwijziging-workflow-card > h3 {
  font-size: var(--tekst-sectietitel);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: var(--tekst-gedempt);
  font-family: 'Inter', sans-serif;
}

.formulier-details summary {
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--maasblauw-deep);
}

.formulier-details[open] summary {
  margin-bottom: 0.8rem;
}

.formulier-details-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
}

@media (max-width: 480px) {
  .formulier,
  .formulier-details-grid {
    grid-template-columns: 1fr;
  }
}

/* Alleen de echte submit-knop (opslaan/toevoegen) krijgt de solide accentkleur -
   dat is bewust de enige "kleurknop" per formulier. Annuleren/Vul-standaardtarief
   e.d. zijn altijd type="button" en houden hun eigen (ghost) stijl. */
.formulier button[type="submit"] {
  background: var(--mergelgoud);
  color: var(--maasblauw-deep);
  border: none;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  height: fit-content;
  font-family: inherit;
}

.formulier button[type="submit"]:hover {
  background: var(--mergelgoud-hover);
}

h3 {
  font-size: 1rem;
  color: var(--maasblauw-deep);
  margin: 0 0 0.6rem 0;
}

.kamer-lijst {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
  color: var(--tekst-gedempt);
}

.status-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 600;
}

.status-vrij, .status-open { background: var(--status-amber-bg); color: var(--status-amber-tekst); }
.status-verhuurd, .status-betaald { background: var(--status-groen-bg); color: var(--status-groen-tekst); }
.status-in_onderhoud, .status-in_behandeling { background: var(--status-blauw-bg); color: var(--status-blauw-tekst); }
.status-te_laat { background: var(--status-rood-bg); color: var(--status-rood-tekst); }
.status-opgelost { background: var(--status-neutraal-bg); color: var(--status-neutraal-tekst); }
.status-intake { background: var(--status-groen-bg); color: var(--status-groen-tekst); }
.status-uitcheck { background: var(--status-rood-bg); color: var(--status-rood-tekst); }
.status-periodiek { background: var(--status-blauw-bg); color: var(--status-blauw-tekst); }
.status-goed { background: var(--status-groen-bg); color: var(--status-groen-tekst); }
.status-schade { background: var(--status-rood-bg); color: var(--status-rood-tekst); }
.status-gekoppeld { background: var(--status-groen-bg); color: var(--status-groen-tekst); }
.status-niet-gekoppeld { background: var(--status-neutraal-bg); color: var(--status-neutraal-tekst); }
.status-opmerking { background: var(--status-amber-bg); color: var(--status-amber-tekst); }
.status-openstaand, .status-wacht_op_goedkeuring, .status-wacht_op_beoordeling, .status-deels_betaald { background: var(--status-amber-bg); color: var(--status-amber-tekst); }
.status-automatisch_goedgekeurd, .status-goedgekeurd_door_eigenaar, .status-goedgekeurd { background: var(--status-groen-bg); color: var(--status-groen-tekst); }
.status-afgewezen { background: var(--status-rood-bg); color: var(--status-rood-tekst); }
.status-gearchiveerd { background: var(--status-neutraal-bg); color: var(--status-neutraal-tekst); }
.status-verlopen { background: var(--status-amber-bg); color: var(--status-amber-tekst); }
.status-afgesloten { background: var(--status-groen-bg); color: var(--status-groen-tekst); }
.status-binnen-doel { background: var(--status-groen-bg); color: var(--status-groen-tekst); }
.status-buiten-doel { background: var(--status-amber-bg); color: var(--status-amber-tekst); }
.status-toegepast { background: var(--status-groen-bg); color: var(--status-groen-tekst); }

.knop-klein {
  background: var(--wit);
  color: var(--maasblauw-deep);
  border: 1px solid rgba(31, 78, 95, 0.28);
  padding: 0.35rem 0.7rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  font-family: inherit;
  transition: background-color 0.12s, border-color 0.12s;
}

.knop-klein:hover {
  background: rgba(31, 78, 95, 0.07);
  border-color: var(--maasblauw);
}
/* .knop-klein wordt soms op een <a> gebruikt (bv. "Dossier"-link in een
   actiekolom) i.p.v. een <button> - browser-default onderstreping/inline
   uitschakelen zodat het er identiek uitziet. */
a.knop-klein { display: inline-block; text-decoration: none; }

/* Uitgelicht t.o.v. de andere knoppen in een acties-kolom (bijv. "Inkomsten" bij
   een eigenaar) - vooral bedoeld om de belangrijkste/meest gezochte actie in een
   rij met meerdere knoppen sneller te laten opvallen, zonder een grote redesign. */
.knop-klein-accent {
  background: var(--maasblauw);
  color: var(--wit);
  border-color: var(--maasblauw);
}

.knop-klein-accent:hover {
  background: var(--maasblauw-deep);
  border-color: var(--maasblauw-deep);
}

/* Fase L.4: klein-formaat PRIMAIRE-actieknop met de gouden taal die elders
   in de gepolijste app al staat (.knop-primair) - i.p.v. het gedeelde
   .knop-klein-accent (marineblauw) hier blindelings te herkleuren. Dat zou
   ALLES raken dat .knop-klein-accent gebruikt: de generieke primaire actie
   van renderDossierShell() (Pand/Kamer/Huurder/Contract/Traject-dossiers),
   WWSO, Onderhoud, Periodieke diensten, Kandidaat-acties, enz. - géén van
   die andere modules is in deze polish-ronde meegenomen. Deze losse
   modifier wordt daarom alleen gecombineerd (class="knop-klein
   knop-klein-primair", zelfde combinatiepatroon als het bestaande
   "knop-klein knop-klein-accent") op de specifieke Financieel-primaire-
   acties (Bank Matching/Maandafsluiting/Servicekosten/Borg). */
.knop-klein-primair {
  background: var(--mergelgoud);
  color: var(--maasblauw-deep);
  border-color: var(--mergelgoud);
}
.knop-klein-primair:hover {
  background: var(--mergelgoud-hover);
  border-color: var(--mergelgoud-hover);
}
.knop-klein-primair:disabled {
  background: rgba(36, 35, 32, 0.1);
  color: var(--tekst-zwak);
  border-color: transparent;
  opacity: 1;
}

.melding {
  position: fixed;
  top: 1.25rem;
  right: 1.25rem;
  z-index: 1000;
  max-width: 360px;
  padding: 0.8rem 1.1rem;
  border-radius: var(--radius-klein);
  font-size: var(--tekst-md);
  box-shadow: 0 4px 16px rgba(36, 35, 32, 0.18);
}

@media (max-width: 480px) {
  .melding {
    left: 1.25rem;
    right: 1.25rem;
    max-width: none;
  }
}

.melding.verborgen {
  display: none;
}

.melding.succes {
  background: #dcece6;
  color: #1f5f4a;
}

.melding.fout {
  background: #f3ddd6;
  color: #99341b;
}

/* Dashboard */
.kaarten-rij {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
}

/* Fase L.3: uitgelijnd met de V2-vlakke kaarttaal (.dashboard-blok e.a.) -
   was nog de vooroudere schaduw+dikke-linkerrand-stijl (kaart-soep t.o.v. de
   rest van de app na de Dashboard V2/subtabs-refresh). Blast radius bewust
   beperkt tot deze ene klasse: de enige overgebleven gebruikers zijn de
   Workspace-integratiestatuskaarten (.kaart-compact) en één "Borg onder
   beheer"-kaart in het financieel-legacy-blok - puur chrome-css, geen markup
   gewijzigd. */
.kaart {
  background: var(--wit);
  border: var(--rand-fijn);
  border-radius: var(--radius-midden);
  padding: var(--ruimte-5);
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.kaart-getal {
  font-family: 'Fraunces', serif;
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--maasblauw-deep);
}

.kaart-label {
  font-size: 0.9rem;
  color: var(--tekst-gedempt);
}

/* Waarschuwingsvariant behoudt een signaal zonder een dikke accentbalk: een
   subtiele randtint (i.p.v. --rand-fijn) + de al bestaande dakpanroest-tint
   op het getal zelf. */
.kaart-waarschuwing {
  border-color: rgba(140, 106, 86, 0.4);
}

.kaart-waarschuwing .kaart-getal {
  color: var(--dakpanroest);
}

/* Sub-tabbladen (bijv. Onderhoud: actief / geschiedenis; Financieel; en de
   nieuwe Vastgoed/Verhuur/Onderhoud/Instellingen-modulesubtabs uit
   injecteerModuleSubtabs()). MIA MASTER UX & VISUAL REFRESH sectie 10: dit
   waren voorheen brede pills met een volle goud-tint-achtergrond + goud
   border in actieve staat ("dubbele gold-outline", spec sectie 9/23/38
   verbiedt dat) - nu een rustige tekst-tab met een dunne gouden underline,
   consistent met de sidebar (die al langer de "2px links, geen volledige
   rand"-discipline volgt). Eén gedeeld systeem i.p.v. losse per-fase
   varianten. */
.subtabs, .module-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid var(--rand-standaard);
}

.subtab-knop, .module-subtab-knop {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--tekst-gedempt);
  padding: 0.45rem 0.05rem;
  margin-bottom: -1px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  font-family: inherit;
  transition: color 0.12s ease, border-color 0.12s ease;
}

.subtab-knop:hover, .module-subtab-knop:hover {
  color: var(--maasblauw-deep);
}

.subtab-knop.actief, .module-subtab-knop.actief {
  border-bottom-color: var(--mergelgoud);
  color: var(--maasblauw-deep);
  font-weight: 600;
}

/* Fase L.4 (Onderhoud-navigatiehiërarchie, QA-bevinding: "te veel
   navigatiegewicht" - Onderhoud stapelde de module-rij (Onderhoud/
   Leveranciers) en deze lokale rij (Meldingen/Inspecties/Periodieke
   diensten) visueel IDENTIEK boven elkaar). De basisregels hierboven
   (.subtabs, .module-subtabs gedeeld) blijven de structuur/lay-out leveren;
   deze regels overschrijven de module-rij naar duidelijk secundair: kleiner,
   gedempter, geen eigen volledige onderstreep-balk, en een neutrale
   (niet-gouden) actief-indicator - goud blijft voorbehouden aan de ene,
   echte primaire tabrij (.subtabs/.subtab-knop, ongewijzigd).
   Bewust GEEN eigen ".subtabs-klein"-derde-niveau meer (voorheen Onderhouds
   Actief/Geschiedenis) - dat hergebruikt nu .verhuring-filters, hetzelfde
   rustige filterknop-patroon als Verhuring, i.p.v. een derde bijna-
   identieke tabrij.

   Fase L.4-eindreview-bevinding: deze override stond eerst app-breed op
   ALLE module-subtabs-groepen (ook Panden/Eigenaren/Huurders, Verhuring/
   Contracten/Huurverhogingen, Workspace/Activiteit/Beheerders/Sjablonen) -
   voor Onderhoud/Leveranciers is dat terecht (een ECHTE lokale tabrij staat
   eronder), maar bij de andere drie groepen is de module-rij de ENIGE
   navigatie op die pagina, en werd die daardoor onterecht te zwak/klein
   t.o.v. vergelijkbare "enige navigatie op de pagina"-rijen elders (bijv.
   Financieel's eigen .subtabs). Nu bewust GESCOPED tot alleen #tab-onderhoud
   en #tab-leveranciers (de twee secties waar deze bar ook daadwerkelijk
   secundair is); de andere drie groepen vallen terug op de gedeelde
   basisregel hierboven (volle grootte, gouden actief-indicator). */
#tab-onderhoud .module-subtabs,
#tab-leveranciers .module-subtabs {
  gap: 1rem;
  margin-bottom: 0.6rem;
  border-bottom: none;
}
#tab-onderhoud .module-subtab-knop,
#tab-leveranciers .module-subtab-knop {
  font-size: var(--tekst-xs);
  padding: 0.15rem 0.05rem;
  color: var(--tekst-zwak);
}
#tab-onderhoud .module-subtab-knop.actief,
#tab-leveranciers .module-subtab-knop.actief {
  border-bottom-color: var(--rand-standaard);
  color: var(--maasblauw-deep);
  font-weight: 600;
}

.leverancier-link {
  margin: 0.5rem 0 1.2rem;
}

/* Workspace: compacte statuskaarten */
.kaart-compact {
  max-width: 420px;
}

.kaart-compact-mt {
  margin-top: 1rem;
}

.kaart-getal-klein {
  font-size: 1.3rem;
}

.formulier-knoppen-mt {
  margin-top: 0.6rem;
}

/* Formulierknoppen (opslaan + annuleren naast elkaar) */
.formulier-knoppen {
  display: flex;
  gap: 0.5rem;
}

/* Fase L.3.1: Postvak-toolbar (primaire CTA + compacte AI/Gmail-status) -
   .postvak-status is bewust GEEN .klein-label (dat is font-style: italic,
   QA-bevinding: "voelt technisch") maar gewone, niet-cursieve gedempte
   tekst. */
.postvak-toolbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: var(--ruimte-4);
}
.postvak-status {
  font-size: 0.82rem;
  color: var(--tekst-gedempt);
}

/* Fase L.4 (Maandafsluiting-layoutpas): kalme toolbar voor de periode-kiezer,
   losgetrokken uit de bespoke tweekoloms .verhuring-kop-indeling. Zelfde
   vorm als .postvak-toolbar hierboven. */
.financieel-toolbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: var(--ruimte-4);
}
.financieel-toolbar label {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--basaltinkt);
}
.financieel-toolbar input[type="month"] {
  font-size: 0.95rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  font-family: inherit;
  background: var(--wit);
  color: var(--basaltinkt);
}

/* Fase L.4 (Leveranciers-visuele polish): generieke lijst-toolbar voor een
   zoekveld + filter-checkbox naast elkaar (i.p.v. de checkbox los boven de
   tabel). Zelfde vorm als .financieel-toolbar/.postvak-toolbar hierboven -
   herbruikbaar voor elke tabelmodule die zoek + een checkbox-filter combineert. */
.tabel-toolbar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: var(--ruimte-4);
}
.tabel-toolbar .zoek-veld {
  flex: 1;
  min-width: 12rem;
  margin-bottom: 0;
}

.knop-annuleer {
  background: var(--wit);
  color: var(--basaltinkt);
  border: 1px solid var(--rand-standaard);
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.95rem;
  font-family: inherit;
}

.knop-annuleer:hover {
  background: var(--mergelcreme);
}

/* Bewerken/verwijderen/archiveren-knoppen in tabellen - flex-wrap i.p.v. nowrap,
   anders lopen rijen met meerdere knoppen (bijv. ook een document genereren/
   bekijken) over de rand van de tabel heen i.p.v. netjes op een nieuwe regel. */
.acties-kolom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.knop-gevaar {
  background: var(--wit);
  color: var(--gevaar);
  border-color: var(--gevaar-rand);
}

.knop-gevaar:hover {
  background: var(--gevaar-achtergrond-hover);
  border-color: var(--gevaar);
}

.link-knop {
  background: none;
  border: none;
  color: var(--maasblauw);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  text-decoration: underline;
  font-family: inherit;
}

/* Fase L.3.1 (QA-bevinding: "oogt native/ruw" - een kaal onderstreept
   linkje naast nette omrande velden/knoppen valt uit de toon): een quiet-
   chip-variant van .link-knop voor toolbar-/instellingenbalk-contexten
   (Huurverhogingen "Meer opties"/"Alles gereed selecteren"/"Selectie
   wissen"/"Bekijk N uitzondering(en)" e.d.) - zelfde kleine bordered-pil-
   taal als .knop-klein, maar zonder de zware achtergrond, dus duidelijk
   secundair t.o.v. een primaire knop ernaast. */
.link-knop-chip {
  text-decoration: none;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--tekst-gedempt);
  transition: background-color 0.12s, border-color 0.12s, color 0.12s;
}
/* Fase L.3.4 (micro-polish, QA-bevinding: "Alle gereed selecteren/Selectie
   wissen more subtle toolbar text-actions") - één stap terug van de
   .link-knop-chip-bordered-pil hierboven: puur tekst, geen rand/achtergrond,
   voor de twee toolbar-snelkoppelingen naast het zoekveld specifiek. "Meer
   opties" (een echte veldcontrole naast Percentage/Ingangsdatum) en "Bekijk
   N uitzondering(en)" (een footer-actie naast de primaire CTA) blijven
   bewust wél .link-knop-chip - alleen deze twee toolbar-snelkoppelingen
   worden quieter. */
.link-knop-tekst {
  text-decoration: none;
  padding: 0;
  border: none;
  background: none;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--maasblauw);
}
.link-knop-tekst:hover { color: var(--maasblauw-deep); text-decoration: underline; }

.link-knop-chip:hover {
  background: rgba(31, 78, 95, 0.05);
  border-color: var(--maasblauw);
  color: var(--maasblauw-deep);
}

/* Fase L.3.1: gedeelde primaire-CTA-pilknop bedoeld voor de ÉÉN duidelijke
   hoofdactie buiten een <form>-context (waar button[type=submit] deze
   gouden stijl al automatisch krijgt via .formulier hieronder) - bijv. een
   sticky actiebalk of paginakop-toolbar. Zonder deze klasse viel zo'n knop
   terug op kale browser-default chrome (QA-bevinding: de "N conceptvoorstellen
   aanmaken"-knop in Huurverhogingen had géén enkele class). */
.knop-primair {
  background: var(--mergelgoud);
  color: var(--maasblauw-deep);
  border: none;
  padding: 0.55rem 1rem;
  border-radius: var(--radius-pill);
  cursor: pointer;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: inherit;
}
.knop-primair:hover { background: var(--mergelgoud-hover); }
/* Fase L.3.4 (micro-polish, QA-bevinding: "disabled footer CTA neutral/
   stone-grey instead of gold") - de generieke button:disabled { opacity:
   0.5 } liet de knop nog steeds gouden (alleen gedimd) ogen; goud hoort
   uitsluitend een ENABLED primaire actie te signaleren. Expliciete
   stone-tint i.p.v. opacity op de goudkleur zelf. */
.knop-primair:disabled {
  background: rgba(36, 35, 32, 0.1);
  color: var(--tekst-zwak);
  opacity: 1;
  cursor: not-allowed;
}

/* Meerdere acties/links in één tabelcel (bijv. bekijken/uploaden/genereren bij een
   document) - i.p.v. losse " · "-tekens die bij smalle kolommen lelijk midden-in-de-
   punt afbreken, wrapt dit netjes met een scheidingsstreepje aan het begin van elke
   nieuwe regel i.p.v. aan het eind van de vorige. */
.link-lijst {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.55rem;
}

.link-lijst > span:not(:first-child) {
  padding-left: 0.55rem;
  border-left: 1px solid var(--rand-standaard);
}

.link-knop-gevaar {
  color: var(--gevaar);
}

.kamer-lijst li {
  margin-bottom: 0.2rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}

/* Kamers per pand in de Panden-tab: standaard alleen een samenvatting ("4 kamers ·
   3 verhuurd · 1 vrij"), pas bij "Bekijk kamers" een compacte tabel - anders wordt
   de Panden-tabel bij meerdere kamers per pand meteen eindeloos lang. */
.kamer-samenvatting {
  font-size: 0.85rem;
  color: var(--tekst-gedempt);
}

.kamer-uitgeklapt {
  min-width: 260px;
}

.kamer-tabel {
  margin-top: 0.4rem;
  font-size: 0.82rem;
}

.kamer-tabel th, .kamer-tabel td {
  padding: 0.35rem 0.5rem;
  vertical-align: top;
}

/* Compacte Huur/WWSO-kolommen in de kamer-tabel: hoofdbedrag/hoofdgetal op de
   eerste regel, aanvullende info (servicekosten, max. huur, peildatum,
   waarschuwingen) als kleinere regels eronder i.p.v. alles op één brede regel. */
.kamer-subregel {
  display: block;
  font-size: 0.76rem;
  color: var(--tekst-gedempt);
  margin-top: 0.1rem;
}

.kamer-subregel.kamer-waarschuwing {
  color: var(--gevaar);
}

.kamer-wwso-punten {
  display: block;
  font-weight: 600;
}

.kamer-tabel .status-badge {
  padding: 0.08rem 0.5rem;
  font-size: 0.72rem;
  font-weight: 500;
}

/* Kamer-acties: één ⋯-knop i.p.v. vier losse links naast elkaar. Bij klikken komt
   er een compacte actierij onder de kamerrij bij (zelfde patroon als de bestaande
   huur-verhogen-rij), i.p.v. een los zwevend dropdown-paneel dat door de
   .tabel-scroll-overflow afgesneden zou kunnen worden. */
.kamer-acties-toggle {
  padding: 0.2rem 0.55rem;
  line-height: 1;
  font-size: 0.95rem;
  letter-spacing: 0.05em;
}

.kamer-acties-rij td {
  background: var(--mergelcreme);
  padding: 0.5rem 0.8rem;
}

.kamer-acties-lijst {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 0.9rem;
}

/* MIA MASTER UX & VISUAL REFRESH sectie 12: zelfde overflow-menu-patroon als
   .kamer-acties-rij/.kamer-acties-lijst hierboven, nu voor de pand-rij zelf
   (WWSO-dossier/Drive-link/Beheerovereenkomst/Verwijderen achter "⋯" i.p.v.
   vijf losse knoppen naast elkaar). */
.pand-acties-rij td {
  background: var(--mergelcreme);
  padding: 0.5rem 0.8rem;
}

.pand-acties-lijst {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem 1.1rem;
}

.pand-acties-toggle {
  padding: 0.35rem 0.55rem;
  line-height: 1;
}

/* Wonen/Commercieel-scheiding binnen de kamer-tabel van een pand - subtiele
   kop i.p.v. een volledig aparte tabel/kaart. */
.kamer-groep-kop td {
  padding-top: 0.7rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--tekst-zwak);
  border-bottom: 1px solid var(--rand-standaard);
}

/* Eigenaar "Inkomsten"-sectie - demo-polish: één sterke totaalkop, compacte
   KPI's, rustige scheiding tussen huurinkomsten en voorschotten. Bewust geen
   grote SaaS-kaarten - subtiele achtergrond/separators i.p.v. losse schaduw-
   kaarten per cijfer. */
.inkomsten-paneel-rij td {
  padding: 0;
}

.inkomsten-paneel {
  background: var(--mergelcreme);
  padding: 1.1rem 1.3rem 1.3rem;
  border-top: 1px solid var(--rand-standaard);
  border-bottom: 1px solid var(--rand-standaard);
}

.inkomsten-kop {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}

.inkomsten-kop-label {
  font-size: 0.85rem;
  color: var(--tekst-gedempt);
}

.inkomsten-kop-bedrag {
  font-family: 'Fraunces', serif;
  font-size: 1.9rem;
  font-weight: 500;
  color: var(--maasblauw-deep);
}

.inkomsten-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
  margin-bottom: 0.4rem;
}

.inkomsten-kpi {
  background: var(--wit);
  border-radius: var(--radius-midden);
  border-left: 3px solid var(--maasblauw);
  padding: 0.6rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.inkomsten-kpi-accent {
  border-left-color: var(--mergelgoud);
}

.inkomsten-kpi-label {
  font-size: 0.78rem;
  color: var(--tekst-gedempt);
}

.inkomsten-kpi-bedrag {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--basaltinkt);
}

.inkomsten-scheiding {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin: 0.9rem 0 0.2rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--rand-standaard);
  font-size: 0.9rem;
}

/* "Verwacht na MIA beheerfee" - projectie op basis van de kale huurrol, geen
   werkelijke betaling. Compacte breakdown i.p.v. een losse SaaS-kaart, netjes
   ingebed tussen de rest van de Inkomsten-sectie. */
.inkomsten-beheerfee {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--rand-standaard);
}

.inkomsten-kop-bedrag-accent {
  color: var(--mergelgoud-hover);
}

.inkomsten-beheerfee-regels {
  max-width: 360px;
  margin-top: 0.5rem;
  font-size: 0.88rem;
}

.inkomsten-beheerfee-regel {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.25rem 0;
  color: var(--tekst-gedempt);
}

.inkomsten-beheerfee-totaal {
  margin-top: 0.15rem;
  padding-top: 0.45rem;
  border-top: 1px solid var(--rand-standaard);
  font-weight: 600;
  color: var(--basaltinkt);
}

.inkomsten-pand-blok {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--rand-standaard);
}

.inkomsten-pand-blok h4 {
  margin: 0 0 0.4rem;
  font-family: 'Fraunces', serif;
  font-weight: 500;
  color: var(--maasblauw-deep);
}

.inkomsten-unit-tabel {
  font-size: 0.85rem;
  margin-bottom: 0.7rem;
}

.inkomsten-unit-tabel-commercieel {
  border-left: 3px solid var(--dakpanroest);
}

/* DEMO-documenten/simulatie (huurcontract, beheerovereenkomst, maandafsluiting)
   - altijd een opvallend maar rustig (amber, geen rood/alarm) label bovenaan,
   zodat nooit de indruk ontstaat dat dit een echt/ondertekend document of een
   echte betaling is. */
.demo-badge {
  display: inline-block;
  margin: 0 0 0.6rem;
  padding: 0.25rem 0.7rem;
  border-radius: var(--radius-pill);
  background: var(--status-amber-bg);
  color: var(--status-amber-tekst);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.inkomsten-demo-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed var(--rand-standaard);
}

.inkomsten-demo-maand {
  margin-top: 1rem;
  padding: 0.9rem 1rem;
  background: var(--wit);
  border: 1px dashed var(--mergelgoud);
  border-radius: var(--radius-midden);
}

.inkomsten-demo-maand .inkomsten-beheerfee-regel {
  color: var(--basaltinkt);
}

/* Groepskoppen (bijv. huurders per pand) */
.groep-header td {
  background: var(--mergelcreme);
  font-weight: 700;
  color: var(--maasblauw-deep);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* Huurders-tab: groepskoppen zijn standaard dichtgeklapt (inklapbaar per pand),
   anders wordt de tabel bij veel huurders meteen eindeloos lang. */
.groep-header-klikbaar {
  cursor: pointer;
}

.groep-header-klikbaar:hover td {
  background: var(--status-amber-bg);
}

/* Herinnering-concept paneel bij betalingen */
.knop-herinnering {
  background: var(--wit);
  color: var(--dakpanroest);
  border-color: rgba(140, 106, 86, 0.4);
}

.knop-herinnering:hover {
  background: rgba(140, 106, 86, 0.1);
  border-color: var(--dakpanroest);
}

.klein-label {
  font-size: 0.78rem;
  color: var(--tekst-zwak);
  font-style: italic;
}

.klein-waarschuwing {
  font-size: 0.78rem;
  color: var(--status-rood-tekst);
  font-weight: 600;
}

.klein-waarschuwing-tekst {
  font-size: 0.78rem;
  color: var(--tekst-zwak);
}

/* WWSO fase 1: neutrale info-melding op een pand met migration_review_required
   - bewust GEEN rood/foutstijl, dit is een openstaande actie, geen fout. */
.wwso-melding-rij td {
  padding: 0;
}

.wwso-melding {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-4);
  background: var(--status-blauw-bg);
  color: var(--status-blauw-tekst);
  padding: 0.7rem 1rem;
}

.wwso-melding-tekst strong {
  font-size: 0.9rem;
}

.wwso-melding-tekst p {
  margin: 0.15rem 0 0;
  font-size: 0.82rem;
}

.wwso-paneel-rij td {
  padding: 0.9rem 1rem;
  background: var(--mergelcreme);
}

.wwso-ruimte-paneel {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-4);
}

.wwso-ruimte-kaart {
  background: var(--wit);
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-midden);
  padding: 0.7rem 0.9rem;
}

.wwso-ruimte-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-3);
}

.wwso-ruimte-kop-knoppen {
  display: flex;
  gap: var(--ruimte-3);
}

.wwso-ruimte-kenmerken {
  font-size: 0.82rem;
  color: var(--tekst-gedempt);
  margin-top: 0.2rem;
}

.wwso-toegang-formulier {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-3);
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--rand-standaard);
}

.wwso-toegang-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--basaltinkt);
}

.wwso-toegang-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.85rem;
  font-weight: 400;
}

.wwso-bevestig-blok {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
  flex-wrap: wrap;
}

/* ============================================================
   FASE 5 - WWSO-DOSSIER (pandniveau overzicht + kamerdetail)
   ============================================================ */
.wwso-dossier-rij td {
  padding: 0.9rem 1rem;
  background: var(--mergelcreme);
}

.wwso-dossier {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-5);
}

.wwso-niet-van-toepassing {
  font-size: 0.9rem;
  color: var(--tekst-gedempt);
  background: var(--status-neutraal-bg);
  border-radius: var(--radius-midden);
  padding: var(--ruimte-3) var(--ruimte-4);
  margin: 0;
}
.wwso-niet-van-toepassing strong {
  color: var(--basaltinkt);
}

.wwso-kpi-rij {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-4);
}

.wwso-kpi {
  display: flex;
  flex-direction: column;
  background: var(--wit);
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-midden);
  padding: var(--ruimte-3) var(--ruimte-4);
  min-width: 7rem;
}

.wwso-kpi-getal {
  font-family: 'Fraunces', serif;
  font-size: var(--tekst-2xl);
  color: var(--maasblauw-deep);
  line-height: 1.1;
}

.wwso-kpi-label {
  font-size: var(--tekst-xs);
  color: var(--tekst-gedempt);
  margin-top: 0.2rem;
}

.wwso-detail-sectie {
  border-top: 1px solid var(--rand-standaard);
  padding-top: var(--ruimte-4);
}
.wwso-detail-sectie h5 {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--maasblauw-deep);
  margin: 0 0 var(--ruimte-3);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.wwso-kamers-tabel th, .wwso-kamers-tabel td {
  font-size: 0.88rem;
  padding: 0.5rem 0.7rem;
}

.wwso-kamer-detail-rij td {
  background: var(--wit);
  padding: 0;
}

.wwso-kamer-detail {
  padding: var(--ruimte-5);
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-4);
}

.wwso-kamer-detail-kop {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
}

.wwso-kamer-detail-titel {
  display: flex;
  align-items: center;
  gap: var(--ruimte-3);
}
.wwso-kamer-detail-titel h4 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.05rem;
  color: var(--basaltinkt);
  margin: 0;
}

.wwso-huur-vergelijking {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ruimte-5);
}
.wwso-huur-vergelijking > div {
  display: flex;
  flex-direction: column;
}

.wwso-cijfer-label {
  font-size: var(--tekst-xs);
  color: var(--tekst-gedempt);
}
.wwso-cijfer-groot {
  font-family: 'Fraunces', serif;
  font-size: 1.3rem;
  color: var(--maasblauw-deep);
}
.wwso-cijfer-groot.wwso-cijfer-waarschuwing {
  color: var(--gevaar);
}

.wwso-rubriek-accordion {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
}

.wwso-rubriek-regel {
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  background: var(--wit);
}

.wwso-rubriek-kop {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-3);
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--basaltinkt);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.55rem 0.8rem;
  text-align: left;
}

.wwso-rubriek-punten {
  font-weight: 600;
  color: var(--maasblauw-deep);
  white-space: nowrap;
}

.wwso-rubriek-body {
  padding: 0 0.8rem 0.7rem;
  border-top: 1px solid var(--rand-standaard);
  padding-top: 0.6rem;
}

.wwso-rubriek-reden {
  font-size: 0.85rem;
  color: var(--tekst-gedempt);
  margin: 0 0 0.4rem;
}

.wwso-detail-regel {
  display: flex;
  justify-content: space-between;
  gap: var(--ruimte-3);
  font-size: 0.85rem;
  margin: 0 0 0.25rem;
}
.wwso-detail-regel span:first-child {
  color: var(--tekst-gedempt);
}
.wwso-detail-regel span:last-child {
  font-weight: 600;
  color: var(--basaltinkt);
  text-align: right;
}

.wwso-checklist {
  background: var(--status-amber-bg);
  color: var(--status-amber-tekst);
  border-radius: var(--radius-midden);
  padding: var(--ruimte-3) var(--ruimte-4);
  margin-top: 0.5rem;
}

.wwso-voorbeeld-label {
  font-weight: 600;
  color: var(--maasblauw-deep);
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
}

.wwso-voorbeeld-resultaat {
  background: var(--status-blauw-bg);
  border-radius: var(--radius-midden);
  padding: var(--ruimte-3) var(--ruimte-4);
  margin-top: 0.5rem;
}
.wwso-voorbeeld-resultaat .wwso-voorbeeld-label { color: var(--status-blauw-tekst); }

.wwso-bevestig-paneel {
  background: var(--wit);
  border: 1px solid var(--mergelgoud);
  border-radius: var(--radius-midden);
  margin-top: 0.6rem;
}

.wwso-historie-lijst {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
}

.wwso-historie-kop {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-3);
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--basaltinkt);
  background: var(--wit);
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  cursor: pointer;
  padding: 0.5rem 0.8rem;
  text-align: left;
}

.wwso-historie-body {
  padding: 0.7rem 0.2rem 0.2rem;
}

.wwso-technisch-lijst {
  background: var(--mergelcreme);
  border-radius: var(--radius-klein);
  padding: 0.6rem 0.8rem;
  margin-top: 0.5rem;
}

.status-wwso-groen { background: var(--status-groen-bg); color: var(--status-groen-tekst); }
.status-wwso-amber { background: var(--status-amber-bg); color: var(--status-amber-tekst); }
.status-wwso-rood { background: var(--status-rood-bg); color: var(--status-rood-tekst); }
.status-wwso-blauw { background: var(--status-blauw-bg); color: var(--status-blauw-tekst); }
.status-wwso-neutraal { background: var(--status-neutraal-bg); color: var(--status-neutraal-tekst); }

/* ============================================================
   FASE 5.2 - visuele polish: dossier-hiërarchie, progressive disclosure,
   tri-state-onderscheid, checklist-kaarten, action hierarchy.
   ============================================================ */
/* WWSO VISUAL DEMO — NEVER PERSIST: onmiskenbaar gelabeld, nooit te
   verwarren met een echt pand (rood/gevaar-kleur, bewust niet subtiel). */
.wwso-demo-badge {
  display: inline-block;
  background: var(--status-rood-bg);
  color: var(--gevaar);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-pill);
  margin-bottom: 0.3rem;
}
.wwso-demo-rij td {
  background: rgba(179, 64, 42, 0.04);
}
.wwso-dossier-kop h4 {
  font-family: 'Fraunces', serif;
  font-weight: 500;
  font-size: 1.3rem;
  color: var(--basaltinkt);
  margin: 0 0 0.15rem;
}
.wwso-dossier-kop .sectie-uitleg {
  margin: 0;
}

/* Secundaire pandinformatie (kenmerken/ruimtes/R7-10) - duidelijk rustiger
   dan de KPI's/kamerlijst hierboven: een subtiele scheidingslijn en iets
   minder padding, geen eigen kaartachtergrond (voorkomt "kaarten-op-kaarten"). */
.wwso-secundair {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-5);
  padding-top: var(--ruimte-4);
  border-top: 1px dashed var(--rand-standaard);
}
.wwso-secundair .wwso-detail-sectie, .wwso-secundair > details {
  border-top: none;
  padding-top: 0;
}

/* Sectie die zelf ondergeschikt is aan wat erboven staat (bijv. huur-vs-max
   t.o.v. de kerncijfers in de kamerkop) - kleiner, gedempt, geen eigen
   sectiekop-zwaarte. Losse klasse van .wwso-secundair hierboven (dat is de
   pandbrede "secundaire pandinformatie"-groep, dit is per-kamerdetail). */
.wwso-kamerdetail-secundair {
  font-size: 0.9rem;
  opacity: 0.85;
}
.wwso-kamerdetail-secundair h5 {
  font-size: 0.78rem;
}

/* Progressive disclosure: <details>-secties i.p.v. één lange veldenlijst
   (spec fase 5.2, punt 5). Native, geen JS nodig voor open/dicht. */
details.wwso-formulier-sectie {
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-midden);
  background: var(--wit);
  padding: 0.15rem 0.9rem;
  margin-bottom: var(--ruimte-2);
  /* .formulier is zelf een multi-kolom grid (zie .formulier hierboven) -
     zonder dit zou elke <details>-sectie een smalle grid-cel worden i.p.v.
     de volle breedte in te nemen (zelfde truc als .formulier-breed). */
  grid-column: 1 / -1;
}
details.wwso-formulier-sectie > summary {
  cursor: pointer;
  padding: 0.55rem 0;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--maasblauw-deep);
  list-style: none;
}
details.wwso-formulier-sectie > summary::-webkit-details-marker { display: none; }
details.wwso-formulier-sectie > summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  color: var(--tekst-zwak);
  transition: transform 0.12s;
}
details.wwso-formulier-sectie[open] > summary::before {
  transform: rotate(90deg);
}
details.wwso-formulier-sectie > summary h5 {
  display: inline;
  font-size: inherit;
  font-weight: inherit;
  color: inherit;
  margin: 0;
  text-transform: none;
  letter-spacing: normal;
}
.wwso-formulier-sectie-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 0.8rem;
  padding: 0.2rem 0 0.9rem;
}
.wwso-formulier-sectie-grid label {
  display: flex;
  flex-direction: column;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--basaltinkt);
  gap: 0.3rem;
}
.wwso-formulier-sectie-grid input,
.wwso-formulier-sectie-grid select {
  font-size: 0.95rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  font-weight: 400;
  font-family: inherit;
  background: var(--wit);
  color: var(--basaltinkt);
}
details.wwso-formulier-sectie .sectie-uitleg {
  margin: -0.3rem 0 0.4rem;
}

/* Tri-state "nog niet gecontroleerd" - visueel ondubbelzinnig anders dan
   "Nee" (spec fase 5.2, punt 6): amber, gestippelde rand. Precieze CSS-haak
   (data-onbekend, alleen door wwsoTriStateOpties gezet) i.p.v. elke lege
   select te raken. */
.wwso-formulier-sectie-grid select:has(option[data-onbekend]:checked) {
  border-style: dashed;
  border-color: var(--status-amber-tekst);
  background: var(--status-amber-bg);
  color: var(--status-amber-tekst);
}

/* Checklist - één van de sterkste onderdelen van de pagina (spec fase 5.2,
   punt 7): elke regel een eigen gestapelde kaart, geen lopende <li>-tekst. */
.wwso-checklist-kop {
  margin: 0 0 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--status-amber-tekst);
}
.wwso-checklist-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  padding: 0.6rem 0;
  border-top: 1px solid rgba(122, 93, 15, 0.15);
}
.wwso-checklist-item:first-of-type {
  border-top: none;
}
.wwso-checklist-bullet {
  color: var(--status-amber-tekst);
  font-size: 0.7rem;
  line-height: 1.6;
}
.wwso-checklist-tekst {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.wwso-checklist-tekst strong {
  font-size: 0.88rem;
  color: var(--basaltinkt);
}
.wwso-checklist-reden {
  font-size: 0.82rem;
  color: var(--tekst-gedempt);
}
.wwso-checklist-actie {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.3rem;
}

@media (max-width: 720px) {
  .wwso-huur-vergelijking, .wwso-kpi-rij {
    gap: var(--ruimte-3);
  }
  .wwso-rubriek-kop, .wwso-historie-kop, .wwso-detail-regel {
    flex-wrap: wrap;
  }
  .wwso-kpi-rij {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .wwso-formulier-sectie-grid {
    grid-template-columns: 1fr;
  }
}

/* Audit-spoor van heropende maandafsluitingen (Afrekeningen-tab) - blijft zichtbaar
   i.p.v. dat een correctie onvindbaar wordt zodra de bevroren rij verwijderd is. */
#heropend-log {
  background: var(--status-amber-bg);
  color: var(--status-amber-tekst);
  border-radius: var(--radius-midden);
  padding: var(--ruimte-3) var(--ruimte-4);
  margin-bottom: var(--ruimte-3);
  font-size: 0.85rem;
}

#heropend-log h4 {
  margin: 0 0 0.3rem;
  font-size: 0.85rem;
}

#heropend-log ul {
  margin: 0;
  padding-left: 1.2rem;
}

.maand-kiezer {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--basaltinkt);
  margin-bottom: 1rem;
}

.afrekeningen-koppen {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.afrekeningen-koppen .maand-kiezer {
  margin-bottom: 0;
}

.maand-kiezer input {
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  background: var(--wit);
}

.sectie-uitleg {
  font-size: 0.9rem;
  color: var(--tekst-zwak);
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

/* Fase L.3.1 (QA-bevinding: "Google Drive-uitleg [boven Contracten] is te
   dominant") - gedeelde compacte "informatieve mededeling"-stijl voor lange
   contextuele/implementatie-uitleg die als kale doorlopende bodytekst te
   zwaar oogde naast de titel. Zelfde restrained rand/tint-taal als de
   andere L.3(.1)-notice-varianten (.dashboard-leeg-uitleg-notitie), maar
   generiek herbruikbaar buiten het dashboard. */
.info-notitie {
  margin: 0 0 var(--ruimte-4);
  padding: 0.55rem 0.75rem;
  background: var(--mergelcreme);
  border: var(--rand-fijn);
  border-radius: var(--radius-klein);
  font-size: 0.83rem;
  line-height: 1.5;
  color: var(--tekst-gedempt);
}

/* MIA HUURVERHOGINGEN BULK UX V2 — één doorlopend werkscherm: compacte
   instellingenbalk, samenvatting/filters in dunne horizontale regels, sticky
   actiebalk onderaan, detail-drawer opzij. Bewust géén "grote cards"/zware
   knoppen (spec punt 3/17: "geen spreadsheetgevoel", zelfde stijlfamilie als
   de rest van de MIA Master UX & Visual Refresh). */
.huurwijziging-ronde-overzicht {
  position: relative;
  background: var(--crème-zacht, #f7f4ec);
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  padding: 0.7rem 2.2rem 0.7rem 0.9rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.huurwijziging-ronde-sluiten {
  position: absolute;
  top: 0.5rem;
  right: 0.6rem;
  color: var(--tekst-zwak);
  font-size: 0.85rem;
}
.huurwijziging-rij-uitgeschakeld {
  opacity: 0.6;
}
/* V3 (oude-systeem-inspiratie): pandkop iets sterker dan de contractrijen,
   subtiele stone/petrol-tint, nooit een zware donkere balk (spec punt 29). */
.huurwijziging-pand-header {
  background: rgba(31, 78, 95, 0.05);
}
.huurwijziging-pand-header td {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}
.huurwijziging-pand-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--basaltinkt);
  cursor: pointer;
  padding: 0;
  text-align: left;
}
.huurwijziging-pand-toggle .pijl {
  color: var(--tekst-zwak);
  width: 0.9em;
}
.huurwijziging-rij {
  cursor: pointer;
}
.huurwijziging-rij:hover {
  background: rgba(31, 78, 95, 0.04);
}

/* Compacte instellingenbalk (spec punt 2): één horizontale rij, geen groot
   formulier. "Meer opties" houdt minder gebruikte velden weg. */
.huurwijziging-instellingenbalk {
  display: flex;
  flex-wrap: wrap;
  /* Fase L.3.1 (QA-bevinding: "controls niet mooi uitgelijnd") -
     flex-end i.p.v. center: de label+veld-paren (.huurwijziging-veld-label)
     zijn twee regels hoog, "Meer opties"/"Bijwerken…" zijn dat niet -
     center liet ze zweven t.o.v. het invoerveld, flex-end lijnt ze op de
     onderkant van de velden uit. */
  align-items: flex-end;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.huurwijziging-instellingenbalk select,
.huurwijziging-instellingenbalk input {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  font-size: 0.88rem;
  font-family: inherit;
  background: var(--wit);
  color: var(--basaltinkt);
}
.huurwijziging-instellingenbalk input[type="number"] {
  width: 8.5rem;
}
/* Percentage/Ingangsdatum staan bovenaan, altijd zichtbaar (spec V4: "At the
   top only: Percentage (%), Ingangsdatum") - los label boven het veld i.p.v.
   een title-tooltip, zodat meteen duidelijk is wat elk veld betekent. */
.huurwijziging-veld-label {
  display: flex;
  flex-direction: column;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tekst-zwak);
  gap: 0.2rem;
}
.huurwijziging-bijwerken-indicator {
  font-size: 0.82rem;
  color: var(--tekst-zwak);
  font-style: italic;
}
.huurwijziging-meer-opties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-bottom: 0.8rem;
  padding: 0.6rem 0.8rem;
  background: rgba(31, 78, 95, 0.03);
  border-radius: var(--radius-klein);
}
.huurwijziging-meer-opties label {
  display: flex;
  flex-direction: column;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--basaltinkt);
  gap: 0.25rem;
}
.huurwijziging-meer-opties input,
.huurwijziging-meer-opties select {
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  font-family: inherit;
  font-size: 0.85rem;
  background: var(--wit);
  color: var(--basaltinkt);
}

/* Samenvatting + filters: dunne horizontale regels, kleine badges (spec
   punt 3/7: "geen grote cards"). */
.huurwijziging-samenvatting-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.9rem;
  font-size: 0.85rem;
  color: var(--tekst-zwak);
  margin: 0.4rem 0 0.6rem;
}
/* Fase L.3.3 (QA-bevinding: "statuscijfers niet als felgekleurde pill-soep")
   - dezelfde stip+tekst-taal als .dashboard-actie-stip (Dashboard V2)
   i.p.v. gevulde .dossier-status-pillen: rustiger naast elkaar, geen
   drie gekleurde vlakken die om aandacht concurreren. Alleen de
   samenvattingsbalk hier - de status per rij in de contractentabel blijft
   bewust wél een echte badge (.dossier-status), dat is daar een primair,
   scanbaar gegeven per contract, geen samengevatte teller. */
.huurwijziging-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--basaltinkt);
}
.huurwijziging-status-stip { flex-shrink: 0; width: 7px; height: 7px; border-radius: 50%; }
.huurwijziging-status-stip-groen { background: #1f5f4a; }
.huurwijziging-status-stip-amber { background: #b8860b; }
.huurwijziging-status-stip-rood { background: var(--gevaar); }
/* V4 (oude-systeem-benchmark): één zoekveld + twee simpele knoppen i.p.v. de
   eerdere Eigenaar/Pand/Status-filterselects + "Selectie ▾"-dropdown ("keep
   it simple like the old system"). */
.huurwijziging-zoek-balk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.huurwijziging-zoek-balk .zoek-veld {
  flex: 1 1 16rem;
  min-width: 12rem;
}

/* Kort oplichten van de rij die "Bekijk N uitzondering(en)" aanwijst. */
.huurwijziging-rij-gemarkeerd {
  animation: huurwijziging-markering 1.6s ease-out;
}
@keyframes huurwijziging-markering {
  0% { background: rgba(200, 160, 60, 0.28); }
  100% { background: transparent; }
}

/* Fase L.3.3 (QA-bevinding: "stabiele kolomuitlijning") - vaste kolom-
   breedtes i.p.v. auto table-layout, zodat de tabel niet breedte per
   breedte verspringt zodra filteren/zoeken andere (langere/kortere)
   inhoud toont. */
.huurwijziging-tabel { table-layout: fixed; }
.huurwijziging-tabel th:nth-child(1), .huurwijziging-tabel td:nth-child(1) { width: 2.4rem; }
.huurwijziging-tabel th:nth-child(2), .huurwijziging-tabel td:nth-child(2) { width: 28%; }
.huurwijziging-tabel th:nth-child(3), .huurwijziging-tabel td:nth-child(3) { width: 18%; }
.huurwijziging-tabel th:nth-child(4), .huurwijziging-tabel td:nth-child(4) { width: 13%; }
.huurwijziging-tabel th:nth-child(5), .huurwijziging-tabel td:nth-child(5) { width: 13%; }
.huurwijziging-tabel th:nth-child(6), .huurwijziging-tabel td:nth-child(6) { width: auto; }

/* Fase L.3.3 (QA-bevinding: "oude archiefregel veel subtieler onderaan") -
   voorheen kale, ongestylede <details>/<summary> (volle native browser-
   chrome + volwaardig-ogende samenvattingstekst). Duidelijk gedempt en
   losgekoppeld van de nieuwe werkstroom erboven via een dunne scheidingsrand
   en kleiner lettertype - blijft wel volledig functioneel/bereikbaar
   (alleen-lezen archief, spec: "blijft zichtbaar voor de historie"). */
.huurverhoging-legacy-archief {
  margin-top: var(--ruimte-6);
  padding-top: var(--ruimte-4);
  border-top: 1px solid var(--rand-standaard);
}
.huurverhoging-legacy-archief summary {
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--tekst-zwak);
  list-style: none;
}
.huurverhoging-legacy-archief summary::-webkit-details-marker { display: none; }
.huurverhoging-legacy-archief summary::before { content: '▸ '; }
.huurverhoging-legacy-archief[open] summary::before { content: '▾ '; }
.huurverhoging-legacy-archief .sectie-uitleg { font-size: 0.8rem; margin-top: 0.5rem; }

/* Jurisdictie als subtiele badge naast Pand/kamer, geen eigen kolom (spec
   punt 8). */
.huurwijziging-jurisdictie-badge {
  display: inline-block;
  margin-left: 0.4rem;
  padding: 0.05rem 0.35rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--tekst-zwak);
  background: rgba(31, 78, 95, 0.06);
  border-radius: var(--radius-klein);
}
/* Zichtbare, korte redentekst onder de status-badge (spec punt 10/11) -
   nooit alleen een hover-tooltip. */
.huurwijziging-reden-tekst {
  font-size: 0.75rem;
  color: var(--tekst-zwak);
  margin-top: 0.15rem;
}

/* Sticky actiebalk (spec punt 12/13) - het belangrijkste UX-element: blijft
   zichtbaar bij scrollen, CTA telt alleen veilig aan te maken voorstellen. */
.huurwijziging-sticky-actiebalk {
  position: sticky;
  bottom: 0;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-top: 0.8rem;
  padding: 0.7rem 0.9rem;
  background: var(--crème-zacht, #f7f4ec);
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  box-shadow: 0 -2px 8px rgba(31, 78, 95, 0.06);
}
.huurwijziging-sticky-samenvatting {
  font-size: 0.85rem;
  color: var(--tekst-zwak);
}
.huurwijziging-sticky-knoppen {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

/* Detail-drawer (spec punt 9) - technisch/juridisch detail apart van de
   simpele hoofdtabel. Vaste positie rechts, geen animatiebibliotheek nodig. */
.huurwijziging-detail-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(26rem, 92vw);
  overflow-y: auto;
  background: var(--wit);
  border-left: 1px solid var(--rand-standaard);
  box-shadow: -6px 0 20px rgba(31, 78, 95, 0.12);
  padding: 1.2rem 1.3rem;
  z-index: 50;
}
.huurwijziging-detail-sluiten {
  position: absolute;
  top: 0.8rem;
  right: 0.9rem;
  color: var(--tekst-zwak);
  font-size: 0.95rem;
}
.huurwijziging-detail-lijst {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.35rem 0.8rem;
  font-size: 0.85rem;
  margin: 0.6rem 0 1rem;
}
.huurwijziging-detail-lijst dt {
  color: var(--tekst-zwak);
  font-weight: 600;
}
.huurwijziging-detail-lijst dd {
  margin: 0;
  color: var(--basaltinkt);
}
.huurwijziging-detail-redenen {
  font-size: 0.82rem;
  padding-left: 1.1rem;
  margin: 0.4rem 0;
}
.huurwijziging-detail-redenen li {
  margin-bottom: 0.35rem;
}

.herinnering-rij td {
  background: #faf3e3;
  padding: 0;
}

.herinnering-paneel {
  padding: 0.9rem 1rem;
}

/* Afvink-checklist bij een inspectie (Onderhoud-tab > Inspecties) */
.checklist-lijst {
  display: flex;
  flex-direction: column;
  gap: var(--ruimte-2);
  margin-bottom: var(--ruimte-4);
}

.checklist-rij {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-3);
  padding: var(--ruimte-2) var(--ruimte-3);
  background: var(--wit);
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
}

.checklist-onderdeel {
  font-weight: 600;
  min-width: 8rem;
}

.checklist-statusknoppen {
  display: flex;
  gap: var(--ruimte-1);
}

.checklist-status-knop {
  font-family: inherit;
  font-size: var(--tekst-xs);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  border: 1px solid var(--rand-standaard);
  background: var(--mergelcreme);
  color: var(--tekst-gedempt);
  cursor: pointer;
}

.checklist-status-knop:hover {
  border-color: var(--dakpanroest);
}

.checklist-status-knop.actief.status-goed { background: var(--status-groen-bg); color: var(--status-groen-tekst); border-color: transparent; }
.checklist-status-knop.actief.status-schade { background: var(--status-rood-bg); color: var(--status-rood-tekst); border-color: transparent; }
.checklist-status-knop.actief.status-opmerking { background: var(--status-amber-bg); color: var(--status-amber-tekst); border-color: transparent; }

.checklist-details {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--ruimte-2);
  flex: 1;
}

.checklist-opmerking {
  font-family: inherit;
  font-size: var(--tekst-sm);
  padding: 0.3rem 0.5rem;
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  min-width: 12rem;
  flex: 1;
}

.herinnering-paneel p {
  margin: 0 0 0.5rem 0;
  font-size: 0.88rem;
}

.herinnering-tekst {
  width: 100%;
  min-height: 8rem;
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.6rem;
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  resize: vertical;
  margin-bottom: 0.7rem;
  background: var(--wit);
  color: var(--basaltinkt);
}

.herinnering-knoppen {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.herinnering-knoppen a.knop-klein {
  text-decoration: none;
  display: inline-block;
}

.contract-tekst {
  min-height: 16rem;
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 0.82rem;
}

/* Eigenaar-/huurderportaal: inlogscherm als losstaande, centrale kaart i.p.v.
   een kale titel + formulier op de pagina. */
#login-sectie, #check-email-sectie {
  max-width: 440px;
  margin: 3rem auto 0 auto;
  background: var(--wit);
  border-radius: 14px;
  box-shadow: 0 8px 28px rgba(21, 56, 66, 0.14);
  padding: 2.4rem 2.4rem 2.2rem 2.4rem;
}

@media (max-width: 480px) {
  #login-sectie, #check-email-sectie {
    margin: 1.5rem auto 0 auto;
    padding: 1.6rem 1.4rem 1.5rem 1.4rem;
    border-radius: 12px;
  }
}

#login-sectie h2, #check-email-sectie h2 {
  margin-top: 0;
}

#login-sectie .formulier, #check-email-sectie .formulier {
  box-shadow: none;
  padding: 0;
  background: none;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-top: 1.2rem;
}

#login-sectie .formulier button {
  width: 100%;
}

#check-email-sectie {
  text-align: center;
}

#check-email-sectie::before {
  content: '✉';
  display: block;
  font-size: 2rem;
  margin-bottom: 0.6rem;
}

/* Portaalherontwerp: laadstatus tussen toonSectie('dashboard-sectie') en het klaar zijn
   van laadDashboard() - voorkomt dat lege kaarten ("-") en lege tabellen als kapot ogen. */
.portaal-laadstatus {
  font-size: var(--tekst-sm);
  color: var(--tekst-gedempt);
  margin: 0 0 var(--ruimte-4) 0;
}

.portaal-laadstatus::before {
  content: '';
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.5em;
  border: 2px solid var(--rand-standaard);
  border-top-color: var(--mergelgoud);
  border-radius: 50%;
  vertical-align: -0.1em;
  animation: portaal-laad-spin 0.7s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  .portaal-laadstatus::before { animation: none; }
}

@keyframes portaal-laad-spin {
  to { transform: rotate(360deg); }
}

#dashboard-sectie.portaal-laden > :not(#portaal-laadstatus) {
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.15s ease;
}

/* eigenaar.html heeft 6 subtabs - op smalle schermen horizontaal laten scrollen
   i.p.v. laten omslaan/verdrukken. */
@media (max-width: 480px) {
  #portaal-subtabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 0.2rem;
  }
  #portaal-subtabs .subtab-knop {
    flex: 0 0 auto;
  }
}

/* dash-betaalstatus (huurderportaal) toont voortaan een statusbadge i.p.v. platte tekst
   in het Fraunces-cijferlettertype van .kaart-getal - een woord oogde daarin als een getal. */
.kaart-status {
  display: flex;
  align-items: center;
  min-height: 2.2rem;
}

/* ============================================================
   MIA-ROADMAP FASE A — individuele manager-login, teambeheer, activiteit
   ============================================================ */

/* Ingelogde-beheerder-blok onderaan de sidebar (verborgen bij de gedeelde
   Basic-Auth-login, zie initManagerSessie in app.js). margin-top: auto duwt
   'm naar de onderkant van de flex-sidebar, ook als de nav zelf kort is. */
.sidebar-gebruiker {
  margin-top: auto;
  padding: 0.9rem 0.75rem 0.1rem;
  border-top: 1px solid rgba(251, 249, 243, 0.12);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-3);
}
.sidebar-gebruiker-info { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.sidebar-gebruiker-avatar {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border-radius: var(--radius-klein);
  background: rgba(201, 162, 39, 0.16);
  border: 1px solid rgba(201, 162, 39, 0.4);
  color: var(--mergelgoud);
  font-weight: 700;
  font-size: 0.74rem;
  letter-spacing: 0.02em;
  display: flex; align-items: center; justify-content: center;
}
.sidebar-gebruiker-tekst { display: flex; flex-direction: column; min-width: 0; gap: 0.05rem; }
.sidebar-gebruiker-naam { color: var(--wit); font-size: 0.82rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-gebruiker-rol { color: rgba(251, 249, 243, 0.5); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; }

/* ============================================================
   FASE L.1 — Login Portal (public/login.html, public/reset-wachtwoord.html)
   ============================================================
   Private-banking-achtige split-layout i.p.v. de oude zwevende crème-kaart
   op een donkere achtergrond (V1): een vaste petrol-merkzijde en een crème
   formulierzijde, edge-to-edge - zelfde randvoorwaarde als de rest van de
   app-shell (geen outer border-radius/shadow, zie .app-layout). Het
   formulier staat rechtstreeks op de crème achtergrond (geen kaart-in-kaart
   schaduw); de enige scheiding is de kleurbreuk tussen de twee zijdes zelf. */
.login-body-v2 { margin: 0; background: var(--mergelcreme); min-height: 100vh; }
.login-shell { display: flex; min-height: 100vh; }

.login-merkzijde {
  flex: 0 0 45%;
  max-width: 45%;
  background: linear-gradient(175deg, var(--maasblauw) 0%, var(--maasblauw-deep) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ruimte-6);
}
.login-merkzijde-inner { max-width: 320px; }
.login-merk-logo { font-size: 1.7rem; }
.login-statement {
  font-family: 'Fraunces', serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: rgba(251, 249, 243, 0.8);
  margin: 1.8rem 0 0;
  line-height: 1.5;
}

.login-formzijde {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ruimte-6);
}
.login-formzijde-inner { width: 100%; max-width: 440px; }

.login-titel {
  font-family: 'Fraunces', serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--maasblauw-deep);
  margin: 0 0 0.3rem;
}
.login-subtitel { color: var(--tekst-gedempt); font-size: 0.95rem; margin: 0 0 1.7rem; }

.login-formulier {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--rand-standaard);
}
.login-veld { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.85rem; font-weight: 600; color: var(--basaltinkt); }
.login-veld input {
  font-family: inherit;
  font-size: 0.95rem;
  padding: 0.65rem 0.8rem;
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-klein);
  background: var(--wit);
}
.login-cta {
  margin-top: 0.3rem;
  background: var(--mergelgoud);
  color: var(--maasblauw-deep);
  border: none;
  border-radius: var(--radius-klein);
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.login-cta:hover { background: var(--mergelgoud-hover); }
.login-cta:disabled { opacity: 0.6; cursor: default; }

.login-link-knop {
  display: inline-block;
  margin-top: 1.1rem;
  background: none;
  border: none;
  padding: 0;
  color: var(--maasblauw);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.login-voetnoot { margin-top: 2.2rem; font-size: 0.78rem; color: var(--tekst-gedempt); line-height: 1.5; }

.login-foutmelding {
  background: var(--status-rood-bg);
  color: var(--status-rood-tekst);
  border-radius: var(--radius-klein);
  padding: 0.65rem 0.85rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}
.login-bevestiging {
  background: var(--status-groen-bg);
  color: var(--status-groen-tekst);
  border-radius: var(--radius-klein);
  padding: 0.65rem 0.85rem;
  font-size: 0.85rem;
  margin-bottom: 1rem;
}

@media (max-width: 860px) {
  .login-merkzijde { flex-basis: 36%; max-width: 36%; padding: var(--ruimte-5); }
  .login-merkzijde-inner { max-width: none; }
}

@media (max-width: 640px) {
  .login-shell { flex-direction: column; min-height: auto; }
  .login-merkzijde { flex: 0 0 auto; max-width: none; width: 100%; padding: 1.3rem var(--ruimte-5); }
  .login-statement { display: none; }
  .login-formzijde { padding: var(--ruimte-6) var(--ruimte-5); }
  .login-formzijde-inner { max-width: none; }
}

/* Session-expired overlay (app.js, alle beheerschermen) - blokkerend,
   geen blank scherm/ruwe API-fout. Zelfde crème/petrol-taal als de
   loginpagina zodat de overgang niet als een andere app aanvoelt. */
.sessie-verlopen-overlay {
  position: fixed; inset: 0;
  background: rgba(21, 56, 66, 0.55);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--ruimte-6);
}
.sessie-verlopen-kaart {
  background: var(--mergelcreme);
  border-radius: var(--radius-midden);
  padding: 2rem 2.2rem;
  max-width: 380px;
  width: 100%;
  text-align: center;
}
.sessie-verlopen-kaart h2 { font-family: 'Fraunces', serif; font-size: 1.3rem; color: var(--maasblauw-deep); margin: 0 0 0.5rem; }
.sessie-verlopen-kaart p { color: var(--tekst-gedempt); font-size: 0.9rem; margin: 0 0 1.4rem; }

/* Accountmenu (L.1 2.7): klein popover i.p.v. een permanent zichtbare
   Uitloggen-knop - .sidebar-gebruiker-info wordt de togglende knop. */
.sidebar-gebruiker { position: relative; }
.sidebar-gebruiker-info {
  background: none; border: none; padding: 0; width: 100%; cursor: pointer;
  display: flex; align-items: center; gap: 0.65rem; min-width: 0;
  border-radius: var(--radius-klein);
}
.sidebar-gebruiker-info:hover { background: rgba(251, 249, 243, 0.07); }
.sidebar-gebruiker-menu {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 0;
  right: 0;
  background: var(--wit);
  border-radius: var(--radius-klein);
  box-shadow: var(--schaduw-zwevend);
  padding: 0.3rem;
  z-index: 60;
}
.sidebar-gebruiker-menu-item {
  display: block; width: 100%; text-align: left;
  background: none; border: none; padding: 0.5rem 0.6rem;
  font-family: inherit; font-size: 0.85rem; color: var(--basaltinkt);
  border-radius: var(--radius-klein); cursor: pointer;
}
.sidebar-gebruiker-menu-item:hover { background: var(--mergelcreme); }

.mijn-account-overlay {
  position: fixed; inset: 0;
  background: rgba(21, 56, 66, 0.45);
  z-index: 1500;
  display: flex; align-items: center; justify-content: center;
  padding: var(--ruimte-6);
}
.mijn-account-kaart {
  background: var(--wit);
  border-radius: var(--radius-midden);
  padding: 1.6rem 1.8rem;
  max-width: 340px;
  width: 100%;
}
.mijn-account-kaart h2 { font-family: 'Fraunces', serif; font-size: 1.15rem; color: var(--maasblauw-deep); margin: 0 0 1rem; }
.mijn-account-rij { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rand-standaard); font-size: 0.85rem; }
.mijn-account-rij:last-of-type { border-bottom: none; }
.mijn-account-label { color: var(--tekst-gedempt); }
.mijn-account-waarde { color: var(--basaltinkt); font-weight: 600; text-align: right; }
.mijn-account-sluit { margin-top: 1.2rem; width: 100%; }

/* ============================================================
   FASE L.2 — Dashboard V2
   ============================================================
   "Operationeel startpunt", geen rapportagepagina (spec 3.1) - een strip +
   6 compacte blokken in een vaste grid, geen wand losse KPI-kaarten. */
.dashboard-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ruimte-4); margin-bottom: 0; }
.dashboard-kop h2 { margin-bottom: 0.15rem; }

.dashboard-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ruimte-5);
  /* Fase L.3: iets krapper dan de oorspronkelijke ruimte-5/ruimte-6 (was
     1.2rem/1.5rem) - geeft Recente activiteit onderaan wat meer kans om
     zonder scrollen in beeld te blijven, zonder de strip zelf gedrongen te
     maken. */
  padding: var(--ruimte-4) 0;
  margin: var(--ruimte-3) 0 var(--ruimte-5);
  border-top: 1px solid var(--rand-standaard);
  border-bottom: 1px solid var(--rand-standaard);
}
.dashboard-strip-item { display: flex; flex-direction: column; gap: 0.15rem; }
.dashboard-strip-item-klikbaar { cursor: pointer; }
.dashboard-strip-getal { font-family: 'Fraunces', serif; font-size: 1.75rem; font-weight: 600; color: var(--maasblauw-deep); font-variant-numeric: tabular-nums; line-height: 1.1; }
.dashboard-strip-label { font-size: var(--tekst-xs); color: var(--tekst-gedempt); }

.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--ruimte-4);
  grid-template-areas:
    "actie actie vastgoed"
    "financieel onderhoud verhuur"
    "activiteit activiteit activiteit";
}
.dashboard-blok-actie { grid-area: actie; }
.dashboard-blok-vastgoed { grid-area: vastgoed; }
.dashboard-blok-financieel { grid-area: financieel; }
.dashboard-blok-onderhoud { grid-area: onderhoud; }
.dashboard-blok-verhuur { grid-area: verhuur; }
.dashboard-blok-activiteit { grid-area: activiteit; }

.dashboard-blok {
  background: var(--wit);
  border: var(--rand-fijn);
  border-radius: var(--radius-midden);
  padding: var(--ruimte-4);
}
.dashboard-blok h3 { margin: 0 0 var(--ruimte-3); font-size: var(--tekst-sectietitel); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tekst-gedempt); font-family: 'Inter', sans-serif; }

/* Actie vereist (spec 3.4): elke regel = urgency-stip + titel + context +
   klikbare dossierlink, géén losse kolommen-tabel. */
.dashboard-actie-lijst { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.dashboard-actie-rij {
  display: flex; align-items: flex-start; gap: 0.7rem;
  padding: 0.5rem 0.2rem; border-bottom: 1px solid var(--rand-standaard);
  cursor: pointer;
}
.dashboard-actie-lijst > *:last-child .dashboard-actie-rij,
.dashboard-actie-rij:last-child { border-bottom: none; }
.dashboard-actie-rij:hover { background: var(--mergelcreme); }
.dashboard-actie-stip { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; margin-top: 0.4rem; }
.dashboard-actie-stip-rood { background: var(--gevaar); }
.dashboard-actie-stip-amber { background: #b8860b; }
.dashboard-actie-stip-petrol { background: var(--maasblauw); }
.dashboard-actie-tekst { min-width: 0; flex: 1; }
.dashboard-actie-titel { font-size: 0.9rem; font-weight: 600; color: var(--basaltinkt); }
/* Fase L.3-verfijning: context-regel gedempt naar --tekst-zwak (i.p.v.
   --tekst-gedempt) zodat de titel ernaast sterker scant als eerste
   leesniveau - dezelfde toon als .dashboard-leeg/.dashboard-activiteit-tijd
   hieronder, geen nieuw kleurtoken nodig. */
.dashboard-actie-context { font-size: var(--tekst-xs); color: var(--tekst-zwak); margin-top: 0.1rem; }

.dashboard-leeg { font-size: 0.85rem; color: var(--tekst-zwak); padding: 0.4rem 0.2rem; }
.dashboard-leeg-uitleg { font-size: 0.78rem; color: var(--tekst-zwak); margin-top: 0.2rem; line-height: 1.5; }
/* Fase L.3-verfijning: alleen voor de Financieel-ledger-nog-niet-actief-
   toelichting (renderDashboardLegeStaat(..., ..., true)) - een compacte,
   ingekaderde notitie i.p.v. doorlopende bodytekst, met dezelfde
   terughoudende rand/tint als de rest van V2 (--rand-fijn, --mergelcreme).
   Blijft bewust een addertje bovenop .dashboard-leeg-uitleg, niet die klasse
   zelf herschrijven - de andere twee gebruiken (reload-hint bij "kon
   gegevens niet laden") horen gewone, korte bijschrift-tekst te blijven. */
.dashboard-leeg-uitleg-notitie {
  margin-top: 0.4rem;
  padding: 0.5rem 0.65rem;
  background: var(--mergelcreme);
  border: var(--rand-fijn);
  border-radius: var(--radius-klein);
  line-height: 1.45;
}

/* Vastgoed vandaag: compacte rij per pand, geen 10 mini-widgets (spec 3.5) */
.dashboard-pand-rij { padding: 0.4rem 0.2rem; border-bottom: 1px solid var(--rand-standaard); cursor: pointer; }
.dashboard-pand-rij:last-child { border-bottom: none; }
.dashboard-pand-rij:hover { background: var(--mergelcreme); }
.dashboard-pand-adres { font-size: 0.9rem; font-weight: 600; color: var(--basaltinkt); }
.dashboard-pand-metrieken { display: flex; gap: 0.9rem; margin-top: 0.25rem; font-size: var(--tekst-xs); color: var(--tekst-gedempt); font-variant-numeric: tabular-nums; }

/* Financieel/Onderhoud/Verhuur: compacte signaalregels (label + getal) */
.dashboard-signaal-lijst { display: flex; flex-direction: column; }
.dashboard-signaal-rij {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  padding: 0.32rem 0.2rem; border-bottom: 1px solid var(--rand-standaard);
  font-size: 0.85rem; cursor: pointer;
}
.dashboard-signaal-rij:last-child { border-bottom: none; }
.dashboard-signaal-rij:hover { background: var(--mergelcreme); }
.dashboard-signaal-label { color: var(--basaltinkt); }
.dashboard-signaal-getal { font-weight: 600; color: var(--maasblauw-deep); font-variant-numeric: tabular-nums; }

/* Recente activiteit: compacte tijdlijn, max 5-7 regels (spec 3.9) */
.dashboard-activiteit-rij { display: flex; gap: 0.7rem; padding: 0.35rem 0.2rem; border-bottom: 1px solid var(--rand-standaard); font-size: 0.85rem; cursor: pointer; }
.dashboard-activiteit-rij:last-child { border-bottom: none; }
.dashboard-activiteit-rij:hover { background: var(--mergelcreme); }
.dashboard-activiteit-tijd { flex-shrink: 0; width: 4.5rem; color: var(--tekst-zwak); font-size: var(--tekst-xs); }
.dashboard-activiteit-tekst { color: var(--basaltinkt); }

@media (max-width: 1000px) {
  .dashboard-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-template-areas:
      "actie actie"
      "vastgoed financieel"
      "onderhoud verhuur"
      "activiteit activiteit";
  }
}
@media (max-width: 640px) {
  .dashboard-strip { grid-template-columns: repeat(2, 1fr); gap: var(--ruimte-4); }
  .dashboard-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "actie" "vastgoed" "financieel" "onderhoud" "verhuur" "activiteit";
  }
}

/* Beheerders-tabblad (teambeheer) */
.beheerder-status { padding: 0.15rem 0.55rem; border-radius: var(--radius-pill); font-size: 0.75rem; font-weight: 600; }
.beheerder-status-active { background: var(--status-groen-bg); color: var(--status-groen-tekst); }
.beheerder-status-disabled { background: var(--status-amber-bg); color: var(--status-amber-tekst); }
.beheerder-status-archived { background: var(--status-neutraal-bg); color: var(--status-neutraal-tekst); }
.beheerder-acties { display: flex; gap: 0.4rem; flex-wrap: wrap; }

/* Activiteit-tabblad - editorial tijdlijn i.p.v. een rauwe admin-logtabel. */
.activiteit-filters { display: flex; gap: var(--ruimte-4); flex-wrap: wrap; margin-bottom: var(--ruimte-5); align-items: end; }
.activiteit-filters label { display: flex; flex-direction: column; gap: 0.2rem; font-size: 0.78rem; color: var(--basaltinkt); opacity: 0.8; }
.activiteit-lijst { display: flex; flex-direction: column; gap: var(--ruimte-4); }
.activiteit-item {
  background: var(--wit);
  border: 1px solid rgba(36, 35, 32, 0.08);
  border-radius: var(--radius-midden);
  padding: var(--ruimte-4) var(--ruimte-5);
}
.activiteit-tijd { font-size: 0.72rem; color: var(--basaltinkt); opacity: 0.6; margin-bottom: 0.2rem; }
.activiteit-tekst { font-size: 0.92rem; line-height: 1.5; }
.activiteit-diff {
  margin-top: 0.35rem;
  padding-left: var(--ruimte-3);
  border-left: 2px solid var(--mergelgoud);
  font-size: 0.85rem;
  color: var(--basaltinkt);
}
.activiteit-diff span { font-weight: 600; margin-right: 0.4em; }

/* ============================================================
   MIA-ROADMAP FASE B — DOSSIER-SHELL
   ============================================================ */

.dossier-breadcrumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--tekst-xs);
  color: var(--tekst-gedempt);
  margin-bottom: var(--ruimte-4);
  flex-wrap: wrap;
}
.dossier-breadcrumb-link { color: var(--maasblauw); text-decoration: none; }
.dossier-breadcrumb-knop { background: none; border: none; padding: 0; font: inherit; cursor: pointer; }
.dossier-breadcrumb-link:hover { text-decoration: underline; }
.dossier-breadcrumb-huidig { color: var(--basaltinkt); font-weight: 600; }
.dossier-breadcrumb-scheiding { opacity: 0.5; }

.dossier-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--ruimte-6);
  flex-wrap: wrap;
  padding-bottom: var(--ruimte-5);
  margin-bottom: var(--ruimte-5);
  border-bottom: 1px solid var(--rand-standaard);
}
.dossier-header-tekst { min-width: 0; flex: 1 1 260px; }
.dossier-header-tekst h2 { margin: 0.1rem 0 0; }
.dossier-header-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-pill);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.dossier-subtitel { margin: 0.2rem 0 0; color: var(--tekst-gedempt); font-size: var(--tekst-sm); }

.dossier-kpis { display: flex; gap: var(--ruimte-6); flex-wrap: wrap; }
.dossier-kpi { display: flex; flex-direction: column; gap: 0.1rem; }
.dossier-kpi-getal { font-family: 'Fraunces', serif; font-size: 1.4rem; color: var(--maasblauw-deep); font-weight: 600; }
.dossier-kpi-label { font-size: var(--tekst-xs); color: var(--tekst-gedempt); }

.dossier-header-acties { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; position: relative; }
.dossier-overflow { position: relative; }
.dossier-overflow-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 0.3rem);
  background: var(--wit);
  border: 1px solid var(--rand-standaard);
  border-radius: var(--radius-midden);
  box-shadow: 0 8px 24px rgba(36, 35, 32, 0.15);
  padding: 0.4rem;
  flex-direction: column;
  min-width: 180px;
  z-index: 20;
}
/* :not(.verborgen) i.p.v. gewoon "display: flex" hierboven, anders wint deze
   klasse qua brontijdsordening van .verborgen { display: none } (allebei
   evenveel specificiteit) - zelfde bug/oplossing als eerder bij #portaal-nav. */
.dossier-overflow-menu:not(.verborgen) { display: flex; }
.dossier-overflow-menu .link-knop { text-align: left; padding: 0.4rem 0.5rem; border-radius: var(--radius-klein); }
.dossier-overflow-menu .link-knop:hover { background: rgba(31, 78, 95, 0.06); }
.dossier-overflow-menu .link-knop-gevaar:hover { background: var(--gevaar-achtergrond-hover); }

.dossier-tabs {
  display: flex;
  gap: var(--ruimte-2);
  flex-wrap: wrap;
  margin-bottom: var(--ruimte-5);
  border-bottom: 1px solid var(--rand-standaard);
}
.dossier-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.15rem;
  margin-right: var(--ruimte-5);
  font-size: var(--tekst-sm);
  font-weight: 600;
  color: var(--tekst-gedempt);
  cursor: pointer;
}
.dossier-tab:hover { color: var(--basaltinkt); }
.dossier-tab.actief { color: var(--maasblauw-deep); border-bottom-color: var(--mergelgoud); }

.dossier-sectie-inhoud { display: flex; flex-direction: column; gap: var(--ruimte-6); }
.dossier-sectie-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--ruimte-5); }
.dossier-blok {
  background: var(--wit);
  border-radius: var(--radius-midden);
  box-shadow: var(--schaduw-kaart);
  padding: var(--ruimte-5);
}
.dossier-blok h4 { margin: 0 0 var(--ruimte-3); font-size: var(--tekst-sm); text-transform: uppercase; letter-spacing: 0.03em; color: var(--tekst-gedempt); }
.dossier-veldenlijst { display: flex; flex-direction: column; gap: var(--ruimte-2); }
.dossier-veld { display: flex; justify-content: space-between; gap: var(--ruimte-4); font-size: var(--tekst-md); padding: 0.25rem 0; border-bottom: 1px dashed rgba(36, 35, 32, 0.08); }
.dossier-veld:last-child { border-bottom: none; }
.dossier-veld-label { color: var(--tekst-gedempt); }
.dossier-veld-waarde { font-weight: 600; text-align: right; }

/* V2-polish: een lange waarde (IBAN e.d.) breekt lelijk af als "label
   links / waarde rechts, rechts uitgelijnd" te weinig ruimte overhoudt.
   Label boven, waarde eronder, links uitgelijnd - past in dezelfde
   kaartbreedte, geen kaart die groter hoeft. */
.dossier-veld.dossier-veld-stack { flex-direction: column; align-items: flex-start; gap: 0.15rem; }
.dossier-veld.dossier-veld-stack .dossier-veld-waarde { text-align: left; }
.dossier-veld-iban { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; font-size: 0.93rem; }

/* Fase L.3.1 (QA-bevinding: "grijze placeholder-streepjes naast tabs ogen
   onaf") - de vier Financieel-subtab-statusbadges staan standaard leeg +
   .verborgen in de HTML (financieel-bank-matching-badge e.a.), maar
   .dossier-status { display: inline-block } wint qua brontijdsordening van
   .verborgen { display: none } (zelfde specificiteit, later gedefinieerd) -
   ze bleven dus zichtbaar als lege afgeronde streepjes. Zelfde
   :not(.verborgen)-patroon als .dossier-overflow-menu hierboven i.p.v.
   .verborgen zelf herschrijven (dat is de generieke show/hide-utility-
   klasse voor de hele app). */
.dossier-status:not(.verborgen) { display: inline-block; padding: 0.15rem 0.6rem; border-radius: var(--radius-pill); font-size: var(--tekst-xs); font-weight: 700; }
.dossier-status-groen { background: var(--status-groen-bg); color: var(--status-groen-tekst); }
.dossier-status-amber { background: var(--status-amber-bg); color: var(--status-amber-tekst); }
.dossier-status-rood { background: var(--status-rood-bg); color: var(--status-rood-tekst); }
.dossier-status-blauw { background: var(--status-blauw-bg); color: var(--status-blauw-tekst); }
.dossier-status-neutraal { background: var(--status-neutraal-bg); color: var(--status-neutraal-tekst); }

.dossier-link { color: var(--maasblauw); text-decoration: none; font-weight: 600; }
.dossier-link:hover { text-decoration: underline; }

/* Fase L.3.1 (QA-bevinding): dit gedeelde lege-staat-patroon (49 aanroepen
   app-breed - Bank Matching/Maandafsluiting/Financieel-ledger-inactief/
   Verhuring-lege-lijsten/Postvak/etc.) oogde als een grote, gecentreerde
   witte vlek zonder duidelijke functie. Compacter, links uitgelijnd (leest
   als een korte mededeling i.p.v. een "leeg scherm"-illustratie) en met
   dezelfde rand-fijn-taal als de rest van V2 i.p.v. een randloos wit vlak. */
.dossier-lege-staat { padding: var(--ruimte-4) var(--ruimte-5); text-align: left; color: var(--tekst-gedempt); background: var(--wit); border: var(--rand-fijn); border-radius: var(--radius-midden); }
.dossier-lege-staat p { margin: 0 0 var(--ruimte-3); font-size: 0.9rem; line-height: 1.5; }
.dossier-lege-staat p:last-child { margin-bottom: 0; }

/* Compacte unit/kamer-rijkaarten binnen een panddossier (spec fase B, punt 15) */
.dossier-unit-lijst { display: flex; flex-direction: column; }
.dossier-unit-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--ruimte-4);
  padding: 0.7rem 0.2rem;
  background: transparent;
  border-bottom: var(--rand-fijn);
  cursor: pointer;
  flex-wrap: wrap;
  transition: background 0.12s ease;
}
.dossier-unit-lijst > .dossier-unit-rij:last-child { border-bottom: none; }
.dossier-unit-rij:hover { background: rgba(31, 78, 95, 0.035); }
.dossier-unit-naam { font-weight: 700; color: var(--maasblauw-deep); font-size: 0.95rem; }
.dossier-unit-sub { font-size: var(--tekst-xs); color: var(--tekst-gedempt); margin-top: 0.1rem; }
.dossier-unit-huur { font-family: 'Fraunces', serif; font-weight: 600; color: var(--basaltinkt); font-variant-numeric: tabular-nums; }
.dossier-unit-huur-hint { font-family: 'Inter', sans-serif; font-weight: 500; font-size: var(--tekst-xs); color: var(--tekst-zwak); }
.dossier-unit-groep-kop { font-size: var(--tekst-micro); font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--tekst-zwak); margin: var(--ruimte-3) 0 0.2rem; }

/* Activiteit binnen een dossier - compacter dan de volledige Activiteit-pagina */
.activiteit-item-compact { padding: var(--ruimte-3) var(--ruimte-4); }

/* Edit-zijpaneel (spec fase B, punt 31) */
.bewerk-paneel-overlay {
  position: fixed; inset: 0;
  background: rgba(21, 56, 66, 0.35);
  z-index: 90;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
}
.bewerk-paneel-overlay:not(.verborgen) { opacity: 1; pointer-events: auto; }
.bewerk-paneel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(480px, 100vw);
  background: var(--mergelcreme);
  z-index: 91;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
/* box-shadow lives here, not on the base rule above: a fixed, right:0
   element keeps casting its box-shadow at its POST-transform position even
   while translateX(100%) has moved its own box fully off-screen - with 7
   of these panels permanently mounted in the DOM (bank-match-drawer,
   month-close-drawer, onderhoud-drawer, kandidaat-drawer, document-genereer-
   paneel, sjabloon-detail-paneel, and the generic #bewerk-paneel), all
   stacked at the exact same position, their negative-offset/blurred shadows
   compounded into a persistent dark right-edge vignette on every page -
   confirmed live via getComputedStyle/getBoundingClientRect against the
   deployed dashboard (elementsFromPoint at the true right edge found only
   .content-area/.app-layout/body/html - nothing unusual in the DOM there -
   while every .bewerk-paneel measured box-shadow: rgba(36,35,32,0.25) -8px
   0px 32px 0px at rect.x === window.innerWidth). Scoping the shadow to
   .open means a closed panel casts no shadow at all, and the fade-in/out
   is covered by the added box-shadow transition above. */
.bewerk-paneel.open { transform: translateX(0); box-shadow: -8px 0 32px rgba(36, 35, 32, 0.25); }
.bewerk-paneel-kop {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--ruimte-5); border-bottom: 1px solid var(--rand-standaard);
  background: var(--maasblauw); flex-shrink: 0;
}
.bewerk-paneel-kop h3 { margin: 0; color: var(--wit); font-size: var(--tekst-lg); }
.bewerk-paneel-sluit { background: none; border: none; color: var(--wit); font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0.2rem 0.5rem; }
.bewerk-paneel-sluit:hover { opacity: 0.75; }
.bewerk-paneel-inhoud { padding: var(--ruimte-5); overflow-y: auto; flex: 1; }
.bewerk-paneel-inhoud .formulier { background: none; box-shadow: none; padding: 0; grid-template-columns: 1fr; }
.bewerk-paneel-inhoud .formulier-details-grid { grid-template-columns: 1fr; }

@media (max-width: 640px) {
  .bewerk-paneel { width: 100vw; }
  .dossier-header { flex-direction: column; }
  /* .dossier-header-tekst's flex-basis:260px hierboven is bedoeld als
     minimumBREEDTE in de normale rijrichting - zodra .dossier-header hier
     naar column omklapt, telt diezelfde 260px als minimumHOOGTE, wat een
     groot leeg gat onder de titel veroorzaakte op mobiel (gevonden tijdens
     Fase C visuele QA van het trajectdossier, maar treft elk dossiertype). */
  .dossier-header-tekst { flex: unset; }
  .dossier-header-acties { width: 100%; }
}

/* ============================================================
   MIA-ROADMAP FASE C — VERHURING
   ============================================================
   Zelfde ingrediënten als de dossier-shell hierboven (dossier-blok,
   dossier-status, dossier-lege-staat, etc. worden hergebruikt) - dit blok
   voegt alleen toe wat echt nieuw is: de operationele samenvattingsstrip
   (spec punt 17/51), de rustige traject-/kandidaatkaarten (spec punt 19/22,
   "geen card soup" - spec punt 52) en de kandidaat-actiehiërarchie (spec
   punt 59). */
.dossier-status-goud { background: var(--status-goud-bg); color: var(--status-goud-tekst); }

.verhuring-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--ruimte-5); flex-wrap: wrap; margin-bottom: var(--ruimte-5); }
.verhuring-kop h2 { margin: 0.1rem 0 0; }
.verhuring-kop p { margin: 0.2rem 0 0; color: var(--tekst-gedempt); font-size: var(--tekst-sm); }

/* Operationele samenvattingsstrip (spec punt 17/51) - bewust GEEN kaarten
   ("geen grafieken om grafieken"), alleen typografie + een dunne scheiding. */
.verhuring-strip {
  display: flex;
  gap: var(--ruimte-6);
  flex-wrap: wrap;
  padding: var(--ruimte-5) 0;
  margin-bottom: var(--ruimte-6);
  border-top: 1px solid var(--rand-standaard);
  border-bottom: 1px solid var(--rand-standaard);
}
.verhuring-strip-item { display: flex; flex-direction: column; gap: 0.15rem; }
.verhuring-strip-getal { font-family: 'Fraunces', serif; font-size: 1.65rem; font-weight: 600; color: var(--maasblauw-deep); font-variant-numeric: tabular-nums; line-height: 1.1; }
.verhuring-strip-getal.verhuring-strip-actie-nodig { color: var(--dakpanroest); }
.verhuring-strip-label { font-size: var(--tekst-xs); color: var(--tekst-gedempt); }

.verhuring-sectie { margin-bottom: var(--ruimte-6); }
.verhuring-sectie h3 { margin: 0 0 var(--ruimte-3); font-size: var(--tekst-sectietitel); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--tekst-gedempt); font-family: 'Inter', sans-serif; }
.verhuring-filters { display: flex; gap: var(--ruimte-2); margin-bottom: var(--ruimte-4); flex-wrap: wrap; }
/* Fase L.3.1 (QA-bevinding: "filterchips zijn te SaaS/pill-achtig") - een
   volle ronde pil met een solide donkere vulling in actieve staat is precies
   het generieke SaaS-filterpatroon dat de visuele richting uitsluit (spec:
   "no pill-tab overload"). Zelfde restrained tint+randkleur-taal als
   .tab-knop.actief/.subtab-knop.actief i.p.v. een volle vulling. */
.verhuring-filter-knop {
  background: none; border: 1px solid var(--rand-standaard); border-radius: var(--radius-klein);
  padding: 0.3rem 0.7rem; font-size: var(--tekst-xs); font-weight: 600; color: var(--tekst-gedempt); cursor: pointer;
  transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.verhuring-filter-knop:hover { background: rgba(31, 78, 95, 0.05); border-color: var(--maasblauw); color: var(--maasblauw-deep); }
.verhuring-filter-knop.actief { background: rgba(31, 78, 95, 0.1); border-color: var(--maasblauw); color: var(--maasblauw-deep); }

/* Trajectkaart (spec punt 19) - compact, één primaire actie ("Open"), geen
   zes knoppen. */
.traject-lijst { display: flex; flex-direction: column; gap: var(--ruimte-3); }
/* V2-polish: traject-/kandidaat-/bezichtigingsrijen zijn nu fijne
   lijstrijen i.p.v. losse schaduw-kaarten per rij ("geen CRM-card-soup",
   spec V2 punt 2/8) - alleen .selectie-blok (verderop) blijft bewust een
   kaart, dat is de ene plek waar nadruk gewenst is. */
.traject-lijst { display: flex; flex-direction: column; }
.traject-kaart {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-4);
  padding: 0.85rem 0.3rem;
  background: transparent; border-bottom: var(--rand-fijn);
  cursor: pointer; flex-wrap: wrap; transition: background 0.12s ease;
}
.traject-lijst > .traject-kaart:last-child { border-bottom: none; }
.traject-kaart:hover { background: rgba(31, 78, 95, 0.035); }
.traject-kaart-links { min-width: 0; flex: 1 1 220px; }
.traject-kaart-unit { font-weight: 700; color: var(--maasblauw-deep); font-size: 0.97rem; }
.traject-kaart-pand { font-size: var(--tekst-xs); color: var(--tekst-gedempt); margin-top: 0.1rem; }
.traject-kaart-midden { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; }
.traject-kaart-huur { font-family: 'Fraunces', serif; font-weight: 600; font-variant-numeric: tabular-nums; }
.traject-kaart-tellingen { font-size: var(--tekst-xs); color: var(--tekst-gedempt); }
.traject-kaart-volgende { font-size: var(--tekst-xs); color: var(--maasblauw-deep); font-weight: 600; }
.traject-kaart-rechts { display: flex; align-items: center; gap: var(--ruimte-3); }

/* Bezichtigingen-agenda (spec punt 29/57) - datum links, tijd prominent, geen
   calendar-grid. */
.bezichtiging-lijst { display: flex; flex-direction: column; }
.bezichtiging-rij {
  display: flex; align-items: center; gap: var(--ruimte-4);
  padding: 0.65rem 0.3rem;
  background: transparent; border-bottom: var(--rand-fijn);
  flex-wrap: wrap;
}
.bezichtiging-lijst > .bezichtiging-rij:last-child { border-bottom: none; }
.bezichtiging-tijd { font-family: 'Fraunces', serif; font-weight: 700; font-size: var(--tekst-lg); color: var(--maasblauw-deep); min-width: 3.2rem; }
.bezichtiging-datum { font-size: var(--tekst-xs); color: var(--tekst-gedempt); min-width: 4.5rem; }
.bezichtiging-details { flex: 1 1 200px; min-width: 0; }
.bezichtiging-kandidaat { font-weight: 600; }
.bezichtiging-unit { font-size: var(--tekst-xs); color: var(--tekst-gedempt); }

/* Actie-nodig-lijst (spec punt 60) - subtiel, geen alarmerende rode banner. */
.actie-nodig-lijst { display: flex; flex-direction: column; gap: 0.3rem; }
.actie-nodig-item {
  display: flex; align-items: center; gap: var(--ruimte-3);
  padding: var(--ruimte-2) 0; font-size: var(--tekst-sm); cursor: pointer;
  border-bottom: 1px dashed rgba(36, 35, 32, 0.08);
}
.actie-nodig-item:hover { color: var(--maasblauw-deep); }
.actie-nodig-stip { width: 6px; height: 6px; border-radius: 50%; background: var(--dakpanroest); flex-shrink: 0; }

/* MIA-ROADMAP FASE D — Financieel (spec punt 51/52/64/65/75/76): compacte
   tijdlijnrijen, geen ruwe boekhoudtabel als hoofdweergave - de "technische
   boeking" (debet/credit) zit ingeklapt achter <details>, business-
   breakdown staat voorop. */
.financieel-tx-rij {
  display: flex; align-items: flex-start; gap: var(--ruimte-4);
  padding: 0.7rem 0.2rem;
  background: transparent; border-bottom: var(--rand-fijn);
  flex-wrap: wrap;
}
.financieel-tx-rij:last-child { border-bottom: none; }
.financieel-tx-rij.financieel-tx-teruggedraaid { opacity: 0.6; }
.financieel-tx-datum { font-size: var(--tekst-xs); color: var(--tekst-gedempt); min-width: 6.5rem; padding-top: 0.15rem; }
.financieel-tx-details { flex: 1 1 240px; min-width: 0; }
.financieel-tx-type { font-weight: 600; font-size: 0.93rem; }
.financieel-tx-reden { font-size: var(--tekst-xs); color: var(--tekst-gedempt); margin-top: 0.15rem; }
.financieel-tx-bedrag { font-family: 'Fraunces', serif; font-weight: 600; font-size: 1.05rem; color: var(--maasblauw-deep); white-space: nowrap; font-variant-numeric: tabular-nums; }
.financieel-tx-technisch { margin-top: 0.3rem; font-size: var(--tekst-xs); color: var(--tekst-gedempt); }
.financieel-tx-technisch summary { cursor: pointer; }
.financieel-boeking-regel { display: flex; justify-content: space-between; gap: var(--ruimte-3); padding: 0.1rem 0; font-family: monospace; }
.financieel-aandacht-lijst { display: flex; flex-direction: column; gap: 0.3rem; list-style: none; margin: 0; padding: 0; }
.financieel-aandacht-lijst li { padding: var(--ruimte-2) 0; font-size: var(--tekst-sm); border-bottom: 1px dashed rgba(36, 35, 32, 0.08); }
.financieel-eigenaar-samenvatting { display: flex; gap: var(--ruimte-6); flex-wrap: wrap; }
.financieel-eigenaar-samenvatting > div { display: flex; flex-direction: column; gap: 0.15rem; }
.financieel-eigenaar-samenvatting strong { font-family: 'Fraunces', serif; font-size: 1.2rem; color: var(--maasblauw-deep); }

/* MIA VISUAL REFRESH V2 — Dashboard tweekoloms operationeel overzicht. */
/* MIA MASTER UX & VISUAL REFRESH sectie 15: Actie nodig (links, het
   belangrijkste dashboarddeel) krijgt ~60-65% breedte, Recente activiteit
   (rechts) ~35-40% - voorheen een kale 50/50-verdeling. */
.dashboard-tweekolom { display: grid; grid-template-columns: 1.7fr 1fr; gap: var(--ruimte-6) 2.2rem; align-items: start; }
@media (max-width: 860px) { .dashboard-tweekolom { grid-template-columns: 1fr; } }
.dashboard-tweekolom .financieel-aandacht-lijst li { display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
.dashboard-tweekolom .financieel-aandacht-lijst li:hover { color: var(--maasblauw-deep); }
.dashboard-tweekolom .financieel-aandacht-lijst li span.dashboard-actie-getal { font-family: 'Fraunces', serif; font-weight: 600; color: var(--maasblauw-deep); }
.dashboard-actie-leeg { color: var(--tekst-zwak); cursor: default; }
.dashboard-actie-leeg:hover { color: var(--tekst-zwak) !important; }
#dash-activiteit-lijst .activiteit-item { padding: 0.55rem 0; border-bottom: var(--rand-fijn); }
#dash-activiteit-lijst .activiteit-item:last-child { border-bottom: none; }
.formulier-inline { display: flex; align-items: center; gap: var(--ruimte-2); margin-top: var(--ruimte-2); flex-wrap: wrap; }
.formulier-inline input { padding: 0.35rem 0.6rem; border: 1px solid rgba(36, 35, 32, 0.2); border-radius: var(--radius-klein); font-size: var(--tekst-sm); }

/* Kandidatenweergave binnen een trajectdossier (spec punt 22) - compacte
   rows, geen CRUD-table. */
.kandidaat-lijst { display: flex; flex-direction: column; }
.kandidaat-rij {
  display: flex; align-items: center; justify-content: space-between; gap: var(--ruimte-4);
  padding: 0.7rem 0.3rem;
  background: transparent; border-bottom: var(--rand-fijn);
  cursor: pointer; flex-wrap: wrap; transition: background 0.12s ease;
}
.kandidaat-lijst > .kandidaat-rij:last-child { border-bottom: none; }
.kandidaat-rij:hover { background: rgba(31, 78, 95, 0.035); }
.kandidaat-rij.kandidaat-rij-inactief { opacity: 0.55; }
.kandidaat-rij-naam { font-weight: 700; min-width: 140px; color: var(--maasblauw-deep); }
.kandidaat-rij-details { display: flex; gap: var(--ruimte-5); flex-wrap: wrap; font-size: var(--tekst-xs); color: var(--tekst-gedempt); flex: 1 1 240px; }
.kandidaat-rij-details strong { color: var(--basaltinkt); font-weight: 600; }
.kandidaat-rij-actie { flex-shrink: 0; }

/* V2-polish: primaire actie + <details>-overflow voor secundaire acties in
   de kandidaat-drawer (spec "button hierarchy" - geen rij met 3-4
   gelijkwaardige knoppen). Zelfde visuele taal als .dossier-overflow-menu,
   maar zonder JS-toggle nodig (native <details>). */
.dossier-drawer-acties { display: flex; align-items: center; gap: var(--ruimte-3); position: relative; }
.dossier-drawer-overflow summary {
  list-style: none; cursor: pointer; width: 32px; height: 32px; border-radius: var(--radius-klein);
  border: 1px solid var(--rand-standaard); display: flex; align-items: center; justify-content: center;
  color: var(--tekst-gedempt); font-size: 1.1rem;
}
.dossier-drawer-overflow summary::-webkit-details-marker { display: none; }
.dossier-drawer-overflow summary:hover { background: rgba(31, 78, 95, 0.06); }
.dossier-drawer-overflow[open] summary { background: rgba(31, 78, 95, 0.06); }
.dossier-drawer-overflow-menu {
  position: absolute; bottom: calc(100% + 0.4rem); left: 0;
  background: var(--wit); border: 1px solid var(--rand-standaard); border-radius: var(--radius-midden);
  box-shadow: var(--schaduw-zwevend); padding: 0.4rem; display: flex; flex-direction: column; gap: 0.15rem;
  min-width: 190px; z-index: 20;
}
.dossier-drawer-overflow-menu .link-knop { text-align: left; padding: 0.4rem 0.5rem; border-radius: var(--radius-klein); text-decoration: none; }
.dossier-drawer-overflow-menu .link-knop:hover { background: rgba(31, 78, 95, 0.06); }
.dossier-drawer-overflow-menu .link-knop-gevaar:hover { background: var(--gevaar-achtergrond-hover); }

/* Geselecteerde kandidaat - premium visuele nadruk (spec punt 54), geen
   grote groene success-card. */
.selectie-blok {
  background: var(--wit); border-radius: var(--radius-groot); box-shadow: var(--schaduw-kaart);
  padding: var(--ruimte-6); border-left: 3px solid var(--mergelgoud);
}
.selectie-blok h4 { margin: 0 0 var(--ruimte-1); font-size: var(--tekst-xs); text-transform: uppercase; letter-spacing: 0.03em; color: var(--tekst-gedempt); }
.selectie-blok-naam { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; margin: 0 0 var(--ruimte-4); }

/* Contract-/dossier-compleetheidschecklist (spec punt 34) */
.checklist { display: flex; flex-direction: column; gap: var(--ruimte-2); }
.checklist-item { display: flex; align-items: center; gap: var(--ruimte-2); font-size: var(--tekst-sm); }
.checklist-vinkje { width: 1.1rem; height: 1.1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; flex-shrink: 0; }
.checklist-item.compleet .checklist-vinkje { background: var(--status-groen-bg); color: var(--status-groen-tekst); }
.checklist-item.ontbreekt .checklist-vinkje { background: var(--status-neutraal-bg); color: var(--tekst-zwak); }
.checklist-item.ontbreekt { color: var(--tekst-gedempt); }

/* Bronvermelding op huurder-/contractdossier ("ontstaan uit verhuurtraject
   Kamer 2.4", spec punt 49/50) - klein, geen groot extra blok. */
.dossier-bronvermelding { font-size: var(--tekst-xs); color: var(--tekst-gedempt); margin: -0.6rem 0 0.4rem; }

@media (max-width: 860px) {
  .traject-kaart, .kandidaat-rij { flex-direction: column; align-items: stretch; }
  .traject-kaart-rechts { align-self: flex-end; }
  /* De 220px flex-basis hierboven is bedoeld als minimumBREEDTE in de
     rijrichting - zodra flex-direction hier naar column omklapt, telt
     diezelfde 220px als minimumHOOGTE, wat een groot leeg gat onder de
     pandnaam veroorzaakte (visuele QA, tablet/mobiel). */
  .traject-kaart-links, .traject-kaart-midden { flex: unset; }
}

@media (max-width: 640px) {
  .verhuring-strip { gap: var(--ruimte-4); }
  .bezichtiging-rij { flex-direction: column; align-items: flex-start; }
}

/* MIA-ROADMAP FASE K: sjablonenbibliotheek + "document maken"-paneel */
/* Fase L.4 (eindreview-bevinding: "category headers ... voelen
   administratief/legacy") - was platte 1rem-regeltekst, terwijl elke andere
   sectiekop in de gepolijste app (.verhuring-sectie h3: Vandaag & aankomend,
   Lopende verhuringen, Eigenaren — <periode>, enz.) een consistente
   micro-kop-taal gebruikt: hoofdletters, letter-spacing, gedempte kleur,
   Inter. Alleen opmaak - de groepering/filtering zelf is ongewijzigd. */
.sjablonen-categorie-kop {
  margin: var(--ruimte-6) 0 var(--ruimte-3);
  font-size: var(--tekst-sectietitel);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--tekst-gedempt);
  font-family: 'Inter', sans-serif;
}
.sjablonen-categorie-kop:first-child { margin-top: 0; }
.document-genereer-extra { display: flex; flex-direction: column; gap: 0.6rem; margin: 0.8rem 0; }
.document-genereer-extra label { display: flex; flex-direction: column; font-size: 0.85rem; font-weight: 600; color: var(--basaltinkt); gap: 0.25rem; }
.document-genereer-extra input { padding: 0.4rem 0.55rem; border: 1px solid var(--rand-standaard); border-radius: var(--radius-klein); font-family: inherit; }
.document-genereer-body { white-space: pre-wrap; background: rgba(31, 78, 95, 0.03); border-radius: var(--radius-klein); padding: 0.8rem; font-family: inherit; font-size: 0.88rem; margin: 0.6rem 0; }
.sjabloon-demo-kaart { border: 1px solid var(--rand-standaard); border-radius: var(--radius-klein); padding: 0.9rem 1rem; margin: 0 0 0.8rem 0; }
.sjabloon-demo-kaart h4 { margin: 0 0 0.4rem 0; display: flex; align-items: center; gap: 0.5rem; }
.sjabloon-demo-body { white-space: pre-wrap; background: rgba(31, 78, 95, 0.03); border-radius: var(--radius-klein); padding: 0.7rem; font-family: inherit; font-size: 0.85rem; margin: 0.4rem 0; }

/* MIA-ROADMAP FASE K.2: sjablonenbibliotheek UX/IA-correctie - compacte
   documentbibliotheek i.p.v. een database-achtige versietabel.
   Fase L.4 (eindreview-bevindingen: "filters staan dicht op elkaar" /
   "andere contentbreedte" gevoel): zoekveld/selects kregen dezelfde
   padding-/gap-taal als .tabel-toolbar/.zoek-veld elders in de app
   (voorheen 0.4rem 0.6rem + 0.5rem gap, merkbaar krapper dan de rest). */
.sjablonen-filterbalk { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: center; margin: 0 0 var(--ruimte-4); }
.sjablonen-filterbalk input[type="search"] { flex: 1 1 200px; padding: 0.55rem 0.8rem; border: 1px solid var(--rand-standaard); border-radius: var(--radius-klein); font-family: inherit; font-size: 0.92rem; }
.sjablonen-filterbalk select { padding: 0.55rem 0.7rem; border: 1px solid var(--rand-standaard); border-radius: var(--radius-klein); font-family: inherit; font-size: 0.92rem; background: var(--wit); }
.sjablonen-filter-historie { display: flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--tekst-gedempt); white-space: nowrap; }
/* Fase L.4 (eindreview-bevinding: "category headers en template-rows voelen
   administratief/legacy") - .sjabloon-groep-blok was een volledig omrande,
   afgeronde "tabel-doos" per categorie (border + border-radius + overflow:
   hidden), zichtbaar anders dan elke andere rijenlijst in de gepolijste app
   (.dossier-unit-lijst/.traject-lijst/.bezichtiging-lijst e.d. gebruiken
   nooit een omkaderde container, alleen dunne rij-scheidingslijnen). De
   rijen zelf houden hun eigen border-bottom-scheiding; de sectiekop
   hierboven levert nu de ruimte tussen categorieën i.p.v. de doos-marge. */
.sjabloon-groep-blok { display: flex; flex-direction: column; }
.sjabloon-rij { border-bottom: 1px solid var(--rand-standaard); }
.sjabloon-rij:last-child { border-bottom: none; }
.sjabloon-rij-hoofd { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem 0.2rem; cursor: pointer; }
.sjabloon-rij-hoofd:hover { background: rgba(31, 78, 95, 0.04); }
.sjabloon-rij-tekst { display: flex; flex-direction: column; flex: 1 1 auto; min-width: 0; }
.sjabloon-rij-naam { font-weight: 600; color: var(--maasblauw-deep); }
.sjabloon-rij-meta { font-size: var(--tekst-xs); color: var(--tekst-gedempt); }
.sjabloon-rij-badges { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; justify-content: flex-end; }
.sjabloon-overflow { position: relative; }
.sjabloon-overflow-knop { line-height: 1; }
.sjabloon-detail-velden { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 1rem; margin: 0.6rem 0; }
.sjabloon-detail-velden > div { display: flex; flex-direction: column; gap: 0.15rem; }
.sjabloon-detail-label { font-size: var(--tekst-xs); color: var(--tekst-gedempt); text-transform: uppercase; letter-spacing: 0.02em; }
.sjabloon-detail-varianten-lijst { display: flex; flex-direction: column; gap: 0.4rem; margin: 0.6rem 0; }
.sjabloon-detail-variant-knop { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; width: 100%; text-align: left; padding: 0.5rem 0.7rem; border: 1px solid var(--rand-standaard); border-radius: var(--radius-klein); background: var(--wit); cursor: pointer; font-family: inherit; font-size: 0.9rem; }
.sjabloon-detail-variant-knop:hover { background: rgba(31, 78, 95, 0.04); }
.sjabloon-detail-historie { margin-top: var(--ruimte-3); font-size: 0.88rem; }
.sjabloon-detail-historie summary { cursor: pointer; font-weight: 600; color: var(--basaltinkt); padding: 0.3rem 0; }
.sjabloon-detail-historie-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.3rem 0; border-top: 1px solid var(--rand-standaard); }