/* ================================================================
   Liberforte Klantenportaal — Klantweergave (design-overname)
   ----------------------------------------------------------------
   Additieve laag bovenop main.css. Wordt NA main.css geladen en
   raakt main.css niet aan: alle regels zijn gescoped onder
   `.klant-main` (de <main>-wrapper van de klantview), zodat de
   beheer-/login-view volledig ongemoeid blijft.

   Ronde 3: de documentsectie is qua maatvoering 1-op-1 gelijk aan
   de beheer-"Gevraagde documenten"-sectie (zelfde kaart, kop-rij,
   4-koloms-grid, tegel-padding/-border/-gap en pill-styling).
   ================================================================ */

/* ----------------------------------------------------------------
   1. DESIGN-VARIABELEN  (gescoped onder .klant-main, geen :root)
   ---------------------------------------------------------------- */
.klant-main {
  /* Kleuren */
  --kp-bg:           #f4f2ed;
  --kp-primary:      #8a7a50;
  --kp-accent:       #c8b870;
  --kp-ink:          #2a2620;
  --kp-ink-soft:     #6b6353;
  --kp-line:         #c8b870;
  --kp-reject-box:   #f4c4c4;
  --kp-reject-text:  #7a2424;
  --kp-ok-icon:      #3f8a4b;
  /* Tegel-achtergronden per status — 1-op-1 met beheer (main.css) */
  --kp-tile-wacht:           #fff7ed;
  --kp-tile-afgewezen:       #fef2f2;
  --kp-tile-wacht-akkoord:   #eff6ff;
  --kp-tile-ontvangen:       #f0fdf4;

  /* Lettertypes */
  --kp-font-title: 'Cormorant Garamond', Georgia, serif;
  --kp-font-body:  'Inter', system-ui, sans-serif;

  /* Maatvoering — TWEAKS_DEFAULTS uit de design-export */
  --kp-block-gap:        22px;   /* blockGap */
  --kp-logo-w:           700px;  /* logoWidth */
  --kp-dot:              64px;   /* stepperDotSize */
  --kp-bar-h:            1px;    /* stepperBarHeight */
  --kp-bar-top:          34px;   /* stepperBarTop */
  --kp-flag-size:        23px;   /* flagSize */
  --kp-logout-size:      14px;   /* logoutSize */

  /* Fontgroottes — TWEAKS_DEFAULTS */
  --kp-fs-greeting:      49px;
  --kp-fs-adv-label:     18px;
  --kp-fs-adv-name:      22px;
  --kp-fs-adv-contact:   14px;
  --kp-fs-timestamp:     15px;
  --kp-fs-step-num:      18px;
  --kp-fs-step-label:    13px;
  --kp-fs-section-title: 27px;
  --kp-fs-section-body:  14px;

  /* Documentsectie — kolomdefinitie 1-op-1 met beheer.
     Vier kolommen: documentnaam (flex) · status · datum · acties.
     Header-rij én tegels gebruiken exact deze waarden → uitlijning. */
  --kp-doc-grid: minmax(180px, 1.4fr) 130px 105px 160px;
  --kp-doc-gap:  14px;

  /* Entry-animaties — TWEAKS_DEFAULTS */
  --kp-logo-travel:  100px;
  --kp-logo-dur:     3000ms;
  --kp-greet-travel: 670px;
  --kp-greet-dur:    2650ms;
  --kp-name-travel:  680px;
  --kp-name-dur:     2250ms;

  /* Positie-offsets — TWEAKS_DEFAULTS. Op desktop toegepast; onder
     900px op 0 (zie media query) zodat niets buiten beeld valt. */
  --kp-logout-offset-x:   -108px;  /* logoutOffsetX */
  --kp-flags-offset-x:    80px;    /* flagsOffsetX */
}

/* ----------------------------------------------------------------
   2. PAGINA-RAAMWERK  —  1100px breed, gelijk aan de beheer-pagina
   ---------------------------------------------------------------- */
.klant-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 40px 24px 80px;
}

.klant-main .klant-portaal {
  display: flex;
  flex-direction: column;
  gap: var(--kp-block-gap);
}

/* Generieke kaart — identiek aan beheer .kaart */
.klant-main .kp-card {
  background: #fff;
  border: 1.5px solid var(--kp-line);
  border-radius: 14px;
  padding: 28px 32px;
  position: relative;
}

/* ----------------------------------------------------------------
   3. LOGO-STRIP  —  uitloggen (links) | logo (midden) | vlaggen (rechts)
   ---------------------------------------------------------------- */
.klant-main .kp-logostrip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
}

.klant-main .kp-logout {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(var(--kp-logout-offset-x), -50%);
  background: #fff;
  border: 1.5px solid var(--kp-line);
  border-radius: 8px;
  padding: 0.55em 1.1em;
  font-family: var(--kp-font-body);
  font-size: var(--kp-logout-size);
  font-weight: 500;
  color: var(--kp-primary);
  letter-spacing: 0.02em;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.klant-main .kp-logout:hover {
  background: var(--kp-primary);
  color: #fff;
}

.klant-main .kp-logo-row {
  display: flex;
  justify-content: center;
  overflow: hidden;
}
.klant-main .kp-logo {
  display: block;
  width: var(--kp-logo-w);
  max-width: 100%;
  height: auto;
}

/* Vlaggen — actieve taal is gedimd/grijs, andere taal in kleur */
.klant-main .kp-flags {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translate(var(--kp-flags-offset-x), -50%);
  display: flex;
  gap: 10px;
  align-items: center;
}
.klant-main .kp-flag {
  display: block;
  width: calc(var(--kp-flag-size) * 1.5);
  height: var(--kp-flag-size);
  padding: 0;
  border: 1px solid rgba(138, 122, 80, 0.45);
  border-radius: 3px;
  overflow: hidden;
  line-height: 0;
  cursor: pointer;
  transition: filter 150ms ease, opacity 150ms ease, transform 150ms ease;
}
.klant-main .kp-flag svg {
  display: block;
  width: 100%;
  height: 100%;
}
.klant-main .kp-flag:hover { transform: scale(1.06); }
.klant-main .kp-flag-dim {
  filter: grayscale(1);
  opacity: 0.4;
}
.klant-main .kp-flag-dim:hover {
  transform: none;
  opacity: 0.7;
}

/* ----------------------------------------------------------------
   4. BEGROETING  (buiten de kaart)
   ---------------------------------------------------------------- */
/* Begroeting links uitgelijnd: linker-edge valt samen met de
   linkerrand van de kaarten eronder (.kp-card vult dezelfde
   .klant-portaal-breedte, dus flex-start volstaat). */
.klant-main .kp-greeting-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 60px;
  margin-top: 32px;
}
.klant-main .kp-greeting {
  margin: 0;
  text-align: left;
  font-family: var(--kp-font-title);
  font-size: var(--kp-fs-greeting);
  font-weight: 400;
  line-height: 1.1;
  color: var(--kp-ink);
}
.klant-main .kp-greeting-word,
.klant-main .kp-greeting-name {
  display: inline-block;
  will-change: transform, opacity;
}
.klant-main .kp-greeting-name {
  color: var(--kp-primary);
  font-style: italic;
  font-weight: 500;
}

/* ----------------------------------------------------------------
   5. ENTRY-ANIMATIES
   ---------------------------------------------------------------- */
@keyframes kp-logo-drop {
  from { transform: translateY(calc(var(--kp-logo-travel) * -1)); opacity: 0; }
  60%  { opacity: 1; }
  to   { transform: translateY(0); opacity: 1; }
}
@keyframes kp-slide-left {
  from { transform: translateX(calc(var(--kp-greet-travel) * -1)); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes kp-slide-right {
  from { transform: translateX(var(--kp-name-travel)); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.klant-main .lf-anim-logo {
  animation: kp-logo-drop var(--kp-logo-dur) cubic-bezier(0.34, 1.4, 0.5, 1) both;
}
.klant-main .lf-anim-left {
  animation: kp-slide-left var(--kp-greet-dur) cubic-bezier(0.22, 1, 0.36, 1) both;
}
.klant-main .lf-anim-right {
  animation: kp-slide-right var(--kp-name-dur) cubic-bezier(0.22, 1, 0.36, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .klant-main .lf-anim-logo,
  .klant-main .lf-anim-left,
  .klant-main .lf-anim-right {
    animation: none;
  }
}

/* ----------------------------------------------------------------
   6. ADVISEUR-KAART  (volledige 1100px-kaart, gecentreerde inhoud)
   ---------------------------------------------------------------- */
.klant-main .kp-adviser-card {
  padding: 28px 40px;
  text-align: center;
}
.klant-main .kp-adviser {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.klant-main .kp-adviser-label {
  font-family: var(--kp-font-body);
  font-size: var(--kp-fs-adv-label);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--kp-ink-soft);
}
.klant-main .kp-adviser-name {
  font-family: var(--kp-font-title);
  font-size: var(--kp-fs-adv-name);
  font-weight: 500;
  color: var(--kp-primary);
}
.klant-main .kp-adviser-contact {
  font-family: var(--kp-font-body);
  font-size: var(--kp-fs-adv-contact);
  color: var(--kp-primary);
  margin-top: 2px;
}
.klant-main .kp-adviser-contact a {
  color: inherit;
  text-decoration: none;
}
.klant-main .kp-adviser-contact a:hover { text-decoration: underline; }
.klant-main .kp-timestamp {
  margin-top: 22px;
  font-family: var(--kp-font-body);
  font-size: var(--kp-fs-timestamp);
  color: var(--kp-ink-soft);
}

/* ----------------------------------------------------------------
   7. STEPPER-KAART
      De stepper-balk houdt max-width 880px (gecentreerd) zodat de
      bolletjes/verbindingsbalk hun ontworpen proporties behouden op
      de bredere 1100px-pagina.
   ---------------------------------------------------------------- */
.klant-main .kp-stepper-card { padding: 36px 48px 32px; }

.klant-main .status-balk {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  list-style: none;
  background: transparent;
  border: 0;
  border-radius: 0;
}
/* Verbindingslijnen helemaal weg in de klant-view (zowel onze oude doorlopende
   lijn als de ::after-segmenten die main.css standaard rendert voor de
   beheer-stepper). */
.klant-main .status-stap:not(:last-child)::after,
.klant-main .status-stap-voltooid::after { content: none; }
.klant-main .status-stap {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0;
  text-align: center;
}
.klant-main .status-stap-bol {
  width: var(--kp-dot);
  height: var(--kp-dot);
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--kp-accent);
  color: var(--kp-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--kp-font-body);
  font-size: var(--kp-fs-step-num);
  font-weight: 500;
  line-height: 1;
  /* main.css zet hier align-self: flex-start (legacy beheer-stepper) — dat
     dwingt de bol naar de linkerkant van zijn grid-kolom waardoor de bols
     niet symmetrisch in de kaart staan. Forceer terug naar center. */
  align-self: center;
}
.klant-main .status-stap-label {
  font-family: var(--kp-font-body);
  font-size: var(--kp-fs-step-label);
  line-height: 1.45;
  color: var(--kp-ink-soft);
  max-width: 160px;
  text-align: center;
  align-self: center;        /* override main.css legacy flex-start */
  display: block;            /* zodat max-width werkt op een <span> */
}
.klant-main .status-stap-voltooid .status-stap-bol {
  /* Zelfde groen als de 'goedgekeurd'-rij in de documentenlijst
     (--kp-tile-ontvangen). */
  background: var(--kp-tile-ontvangen);
  border-color: var(--kp-accent);
  color: var(--kp-primary);
}
.klant-main .status-stap-actief .status-stap-bol {
  background: #3D2E1F;
  border-color: #3D2E1F;
  color: #ffffff;
}
.klant-main .status-stap-actief .status-stap-label,
.klant-main .status-stap-voltooid .status-stap-label {
  color: var(--kp-ink);
  font-weight: 600;
}

/* ----------------------------------------------------------------
   8. DOCUMENTSECTIE  —  1-op-1 met de beheer-"Gevraagde documenten".
      Kaart (.kp-doc-card) > kop-rij (.docrij-kop) + tegellijst
      (.docrijen, gap 8px) > tegels (.docrij, 4-koloms-grid).
      Classes .docrij/.docrij-open/.docrij-klaar/.docrij-titel/
      .upload-form/.delete-form blijven behouden — klantportaal.js
      leest/schrijft die en genereert dezelfde 4-cel-structuur.
   ---------------------------------------------------------------- */
.klant-main .doc-sectie-titel {
  margin: 0 0 16px;
  font-family: var(--kp-font-title);
  font-size: var(--kp-fs-section-title);
  font-weight: 500;
  color: var(--kp-ink);
}

/* Kop-rij — zelfde grid als de tegels (uitlijning), geen rand */
.klant-main .docrij-kop {
  display: grid;
  grid-template-columns: var(--kp-doc-grid);
  gap: var(--kp-doc-gap);
  align-items: center;
  padding: 4px 18px;
  margin-bottom: 8px;
  font-family: var(--kp-font-body);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--kp-ink-soft);
}

/* Tegellijst — randloze flex-kolom, 8px tussen tegels (= beheer) */
.klant-main .docrijen {
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* main.css geeft .docrijen een border/achtergrond/radius/overflow.
     Die hier expliciet uitzetten: anders krijgt de tegel-wrapper een
     gouden rand náást de rand van elke tegel (dubbele lijn). Alleen de
     buitenste .kp-card en de individuele tegels horen een rand te hebben. */
  border: 0;
  border-radius: 0;
  background: transparent;
  overflow: visible;
}

/* De tegel — 4-koloms-grid, identiek aan beheer-tegel */
.klant-main .docrij {
  display: grid;
  grid-template-columns: var(--kp-doc-grid);
  gap: var(--kp-doc-gap);
  align-items: center;
  padding: 14px 18px;
  border: 1.5px solid var(--kp-line);
  border-radius: 14px;
  background: #fff;
}
/* Upload-voortgangsbalk (door klantportaal.js toegevoegd): volle breedte */
.klant-main .docrij .upload-progress { grid-column: 1 / -1; }

/* Statusafhankelijke achtergrond — lichte tinten, 1-op-1 met beheer.
   `.docrij-open` zonder expliciete statusklasse (komt voor nadat de
   klant een document via AJAX verwijdert) valt terug op de wacht-tint. */
.klant-main .docrij-open                    { background: var(--kp-tile-wacht); }
.klant-main .docrij-status-wacht            { background: var(--kp-tile-wacht); }
.klant-main .docrij-status-afgewezen        { background: var(--kp-tile-afgewezen); }
.klant-main .docrij-status-wacht-op-akkoord { background: var(--kp-tile-wacht-akkoord); }
.klant-main .docrij-status-ontvangen        { background: var(--kp-tile-ontvangen); }

/* Cellen */
.klant-main .docrij-cel {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.klant-main .docrij-cel-datum {
  font-family: var(--kp-font-body);
  font-size: 13px;
  color: var(--kp-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.klant-main .docrij-titel {
  margin: 0;
  font-family: var(--kp-font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--kp-ink);
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.klant-main .docrij-titel-tekst { min-width: 0; }
/* Groen vinkje (alleen bij goedgekeurd; op blauwe rijen verborgen) */
.klant-main .docrij-vinkje {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--kp-ok-icon);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 12px;
}
.klant-main .docrij-status-wacht-op-akkoord .docrij-vinkje { display: none; }

/* Statuspill — 1-op-1 met de beheer-status-badge */
.klant-main .docrij-statuspill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-family: var(--kp-font-body);
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
}
/* De KLEUR per status stond hier een tweede keer, en gaf een ander antwoord
   dan de lijst die vandaag beslist (lf-klant.css). Weggehaald op 31-08-2026,
   nadat gemeten was dat deze regels niets raken:
     - `docrij-statuspill` wordt maar door één sjabloon gerenderd
       (portaal_klant.html), en dat erft base_klant.html;
     - base_klant.html overschrijft `main_class` naar `lfk-main`, dus
       `.klant-main` matcht daar niet;
     - de enige pagina die `klant-main` wél krijgt is dashboard/binnenkort.html
       en die heeft geen statuspil.
   Op het scherm nagemeten met een lijst van alle regels die de pil raken:
   uitsluitend lf-klant.css. De vorm van de pil (padding, radius, letter)
   hierboven blijft staan — dat is opmaak, geen statuslijst. */

/* Acties-cel — vaste subkolommen: knop (1fr) + ✕-slot (30px).
   De ✕-kolom wordt ALTIJD gereserveerd, ook bij upload-rijen waar
   geen ✕ staat → upload- en downloadknoppen staan op exact dezelfde
   x-positie. */
.klant-main .docrij-acties {
  display: grid;
  grid-template-columns: 1fr 30px;
  gap: 8px;
  align-items: center;
}
.klant-main .docrij-acties .upload-form,
.klant-main .docrij-acties .delete-form {
  margin: 0;
  display: block;
  min-width: 0;
}
.klant-main .docrij-acties .delete-form {
  display: flex;
  justify-content: center;
}

/* Slanke ghost-knop — transparant, gouden rand, icoon links naast tekst */
.klant-main .docrij-acties .btn {
  width: 100%;
  background: transparent;
  color: var(--kp-primary);
  border: 1.5px solid var(--kp-line);
  border-radius: 8px;
  height: 38px;
  padding: 0 14px;
  font-family: var(--kp-font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.klant-main .docrij-acties .btn:hover {
  background: var(--kp-primary);
  color: #fff;
  border-color: var(--kp-primary);
}
.klant-main .docrij-acties .btn .upload-icoon {
  display: block;
  flex-shrink: 0;
}
/* Upload-knop is een <label> met een verborgen file-input erin */
.klant-main .docrij-acties .upload-knop { position: relative; }
.klant-main .docrij-acties .upload-knop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

/* Verwijder-kruisje — compact rond knopje (in de ✕-slot) */
.klant-main .btn-kruisje {
  width: 30px;
  height: 30px;
  min-width: auto;
  padding: 0;
  border-radius: 50%;
  background: #fff;
  border: 1.5px solid #d6cea0;
  color: var(--kp-ink-soft);
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.klant-main .btn-kruisje:hover {
  background: #fff;
  color: var(--kp-reject-text);
  border-color: var(--kp-reject-text);
}

/* Rode afkeur-melding — volle breedte binnen de tegel (tweede grid-rij).
   Stijl bewust ongewijzigd: #f4c4c4, radius 12, geen donkere linkerrand. */
.klant-main .docrij-afkeur {
  grid-column: 1 / -1;
  margin: 0;
  padding: 12px 16px;
  background: var(--kp-reject-box);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.klant-main .docrij-afkeur-titel {
  font-family: var(--kp-font-body);
  font-size: 13px;
  font-weight: 600;
  color: var(--kp-reject-text);
}
.klant-main .docrij-afkeur-reden {
  font-family: var(--kp-font-body);
  font-size: 13px;
  font-style: italic;
  color: var(--kp-reject-text);
}

/* Sectie bij stellen (documenten per aanvrager) — elke sectie een kaart */
.klant-main .doc-sectie { display: block; }

/* ----------------------------------------------------------------
   9. OVERIGE UPLOADS  —  zelfde kaart + tegel-stijl als de doc-sectie
   ---------------------------------------------------------------- */
.klant-main .overige-uploads-titel {
  margin: 0 0 6px;
  font-family: var(--kp-font-title);
  font-size: var(--kp-fs-section-title);
  font-weight: 500;
  color: var(--kp-ink);
}
.klant-main .overige-uploads-uitleg {
  margin: 0 0 18px;
  font-family: var(--kp-font-body);
  font-size: var(--kp-fs-section-body);
  color: var(--kp-ink-soft);
}
.klant-main .overige-uploads-lijst {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Overige-rij = tegel met dezelfde rand/radius/padding als doc-tegels */
.klant-main .overige-upload-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 18px;
  background: var(--kp-tile-ontvangen);
  border: 1.5px solid var(--kp-line);
  border-radius: 14px;
}
.klant-main .overige-upload-naam {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--kp-font-body);
  font-size: 15px;
  font-weight: 400;
  color: var(--kp-ink);
}
.klant-main .overige-upload-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.klant-main .overige-upload-meta .docrij-uploaddatum {
  font-family: var(--kp-font-body);
  font-size: 13px;
  color: var(--kp-ink);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.klant-main .overige-upload-meta .btn {
  background: transparent;
  color: var(--kp-primary);
  border: 1.5px solid var(--kp-line);
  border-radius: 8px;
  height: 38px;
  padding: 0 16px;
  font-family: var(--kp-font-body);
  font-size: 13px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.klant-main .overige-upload-meta .btn:hover {
  background: var(--kp-primary);
  color: #fff;
  border-color: var(--kp-primary);
}
.klant-main .overige-upload-meta .delete-form { margin: 0; display: inline-flex; }

.klant-main .overige-uploads-actie {
  display: flex;
  align-items: center;
  gap: 14px;
}
/* "+ Document toevoegen" — gevulde primaire knop */
.klant-main .overige-uploads-actie .upload-knop {
  position: relative;
  background: var(--kp-primary);
  color: #fff;
  border: 1.5px solid var(--kp-primary);
  border-radius: 8px;
  padding: 10px 22px;
  font-family: var(--kp-font-body);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease;
}
.klant-main .overige-uploads-actie .upload-knop:hover { background: #74663f; }
.klant-main .overige-uploads-actie .upload-knop input[type="file"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.klant-main .overige-uploads-teller,
.klant-main .overige-uploads-limiet {
  font-family: var(--kp-font-body);
  font-size: 13px;
  color: var(--kp-ink-soft);
}

/* ----------------------------------------------------------------
   10. RESPONSIVE
   ---------------------------------------------------------------- */
/* DODE MEDIA QUERIES VERWIJDERD (11-08-2026) — vier blokken op 900px,
   1280px, 720px en 680px, allemaal gescoped op `.klant-main`. Dat is de
   OUDE klantschil; elke klantpagina draait sinds de LiberForte-restyling in
   `.lfk-main` (zie base_klant.html, blok `main_class`). Die regels matchten
   dus niets, terwijl ze wél de indruk wekten dat de documentenlijst al
   mobiel meeschaalde — inclusief een compleet 680px-blok dat de documentrij
   naar één kolom zette. Zie het inventarisatierapport voor de volledige
   lijst. De echte responsive port bouwt dit opnieuw op tegen `.lfk-main`. */

/* =========================================================================
   Upload-popup — checklist + sleepveld vóór de daadwerkelijke upload.
   Layout volgt het ASN-referentievoorbeeld: titel + X bovenin, intro,
   "Checklist:"-blok met bullets, dashed sleepveld met "Selecteer bestand"-
   knop in het midden, formaat-/maxgrootte-regel onder het sleepveld, en
   twee actieknoppen onderaan ("Document aanleveren" + "Annuleren").
   Liberforte design tokens (--kp-bg/--kp-primary/--kp-accent) zijn gescoped
   onder .klant-main; popups die via document.body.appendChild worden gemount
   krijgen deze vars NIET — kleuren in zulke popups hardcoden (zie de #8a7a50-
   hardcodes op .kp-upload-popup-selecteer en .kp-upload-popup-bevestig).
   ========================================================================= */
.kp-upload-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 22, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 16px;
  animation: kp-upload-popup-fade 0.18s ease-out;
}
@keyframes kp-upload-popup-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

.kp-upload-popup-kaart {
  /* Volle witte achtergrond — kaart moet contrasteren met de pagina-bg
     (#f4f2ed) en de gedimde overlay; gelijke beige-bg deed de kaart als
     transparant ogen. Geen box-shadow conform Liberforte design — de
     gouden 1.5px-rand + donkere overlay leveren voldoende scheiding. */
  background: #ffffff;
  border: 1.5px solid var(--kp-accent);
  border-radius: 14px;
  padding: 0;
  width: 100%;
  max-width: 640px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Kop: titel gecentreerd + sluitkruis rechtsboven. flex-shrink:0 zodat de
   kop niet wordt weggedrukt door een lange body. */
.kp-upload-popup-kop {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px 56px 14px;
  border-bottom: 1.5px solid var(--kp-accent);
  background: #fffdf8;
  flex-shrink: 0;
}
.kp-upload-popup-titel {
  font-family: var(--kp-font-title);
  font-size: 24px;
  font-weight: 600;
  color: var(--kp-primary);
  margin: 0;
  text-align: center;
  line-height: 1.2;
}
.kp-upload-popup-sluit {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 36px;
  height: 36px;
  border: none;
  background: transparent;
  color: var(--kp-primary);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  border-radius: 8px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.kp-upload-popup-sluit:hover,
.kp-upload-popup-sluit:focus-visible {
  background: rgba(138, 122, 80, 0.08);
  outline: none;
}

/* Body: scrollt indien nodig (4px gold scrollbar). flex: 1 1 auto +
   min-height: 0 is essentieel — zonder die combinatie overstroomt de
   body buiten zijn flex-container heen, waardoor de voet wordt verborgen
   en de content over de "Document aanleveren"/"Annuleren"-knoppen valt. */
.kp-upload-popup-body {
  padding: 20px 28px 16px;
  overflow-y: auto;
  font-family: var(--kp-font-body);
  font-size: 15px;
  line-height: 1.5;
  color: #2e2a22;
  background: #ffffff;
  flex: 1 1 auto;
  min-height: 0;
}
.kp-upload-popup-body::-webkit-scrollbar {
  width: 4px;
}
.kp-upload-popup-body::-webkit-scrollbar-thumb {
  background: var(--kp-accent);
  border-radius: 2px;
}
.kp-upload-popup-body::-webkit-scrollbar-track {
  background: transparent;
}
.kp-upload-popup-body {
  scrollbar-width: thin;
  scrollbar-color: var(--kp-accent) transparent;
}

.kp-upload-popup-intro {
  margin: 0 0 12px;
  font-size: 15px;
  line-height: 1.5;
}
.kp-upload-popup-intro strong {
  color: var(--kp-primary);
}

.kp-upload-popup-checklist-titel {
  font-weight: 600;
  margin: 4px 0 8px;
  color: var(--kp-primary);
  font-size: 15px;
}
.kp-upload-popup-checklist {
  margin: 0 0 16px;
  padding-left: 22px;
}
.kp-upload-popup-checklist li {
  margin: 4px 0;
  line-height: 1.45;
}
.kp-upload-popup-checklist li::marker {
  color: var(--kp-primary);
}

/* Tip-blok — stevig goud-getinte achtergrond + 5px linkerrand in donker
   goud, duidelijk afgetekend tegen witte body. */
.kp-upload-popup-tip {
  background: rgba(200, 184, 112, 0.32);
  border-left: 5px solid #6f6240;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 14px;
  line-height: 1.5;
  color: #3d3318;
  margin: 0 0 16px;
}

/* Sleepveld — dikke 3px dashed donker-goud rand (#6f6240) op stevige
   licht-goud achtergrond. Maximaal contrast voor zichtbaarheid van de
   stippellijn op een witte body. */
.kp-upload-popup-dropzone {
  border: 3px dashed #6f6240;
  border-radius: 12px;
  padding: 28px 18px;
  text-align: center;
  background: rgba(200, 184, 112, 0.28);
  transition: background 0.15s ease, border-color 0.15s ease;
  margin: 0 0 14px;
}
.kp-upload-popup-dropzone.is-hover {
  background: rgba(200, 184, 112, 0.45);
  border-color: var(--kp-primary);
}
.kp-upload-popup-dropzone-tekst {
  font-size: 14px;
  color: #4a3f25;
  font-weight: 500;
  margin: 0 0 14px;
}
/* Selecteer-knop — gevuld donker-goud op licht-goud dropzone-bg, witte
   tekst voor maximaal contrast. Eerder outline-stijl gaf te weinig
   visuele aanwezigheid op de dropzone. */
.kp-upload-popup-selecteer {
  font-family: var(--kp-font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 26px;
  background: #8a7a50;
  color: #ffffff;
  border: 2px solid #8a7a50;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease;
}
/* "Foto maken" — zet `capture="environment"` op de file-input en opent op
   iOS daarmee direct de camera. Alleen zichtbaar op een apparaat met een
   grove aanwijzer (vinger): op desktop is `capture` een no-op en zou de
   knop hetzelfde doen als "Selecteer bestand". Zo verandert er op de
   desktopweergave per constructie niets. Zelfde aanpak als .lfk-ht-camera. */
.kp-upload-popup-camera {
  display: none;
  font-family: var(--kp-font-body);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 26px;
  margin-right: 10px;
  background: #ffffff;
  color: #6f6240;
  border: 2px solid #8a7a50;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease,
              border-color 0.15s ease;
}
.kp-upload-popup-camera:hover,
.kp-upload-popup-camera:focus-visible {
  background: #f4f0e4;
  border-color: #6f6240;
}
@media (pointer: coarse) {
  .kp-upload-popup-camera { display: inline-block; }
}
.kp-upload-popup-selecteer:hover,
.kp-upload-popup-selecteer:focus-visible {
  background: #6f6240;
  border-color: #6f6240;
  outline: none;
}

/* Twee file-velden voor legitimatie (voorkant + achterkant). */
.kp-upload-popup-velden {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 10px;
}
.kp-upload-popup-veld {
  border: 3px dashed #6f6240;
  border-radius: 12px;
  padding: 16px;
  background: rgba(200, 184, 112, 0.28);
  text-align: center;
}
.kp-upload-popup-veld.is-hover {
  background: rgba(200, 184, 112, 0.45);
  border-color: var(--kp-primary);
}
.kp-upload-popup-veld-label {
  font-weight: 600;
  font-size: 14px;
  color: var(--kp-primary);
  margin: 0 0 6px;
}
.kp-upload-popup-veld-meta {
  font-size: 13px;
  color: #6a6052;
  margin: 0 0 8px;
}
.kp-upload-popup-veld-meta em {
  font-style: normal;
  opacity: 0.75;
}
/* Het `hidden`-attribuut moet het winnen van de `display` hieronder.
   Zonder deze regel stond er, zolang er nog geen bestand gekozen was, een
   leeg beige pilletje van ~24x6px naast de knop "Selecteer bestand" — de
   achtergrond en padding van een naamvakje zonder naam erin. Op mobiel was
   dit al afgedekt in lf-mobiel.css; dit zet het ook op desktop recht
   (TODO 2.3, opgelost 16-08-2026 op verzoek van Ross). */
.kp-upload-popup-bestandsnaam[hidden] { display: none; }

.kp-upload-popup-bestandsnaam {
  display: inline-block;
  font-size: 13px;
  color: var(--kp-primary);
  background: rgba(200, 184, 112, 0.16);
  border-radius: 999px;
  padding: 3px 12px;
  margin-top: 6px;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Naamveld — alleen bij een Overige upload. Die rij hangt aan geen enkel
   profiel-item, dus zonder deze vraag heet elk zo'n document in de
   downloadmap van de adviseur "Overig document <achternaam>". Gemeten op
   dossier 38: drie verschillende documenten, twee keer exact dezelfde naam.
   Liberforte-ontwerp: papierwit vlak, 1,5px gouden rand, 14px hoekradius,
   geen schaduw. Het veld is 44px hoog — het is een raakvlak. */
.kp-upload-popup-naamveld { margin: 10px 0 2px; }
.kp-upload-popup-naamlabel {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #2B2118;
  margin-bottom: 6px;
}
.kp-upload-popup-naam {
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 44px;
  padding: 10px 14px;
  font: inherit;
  font-size: 15px;
  color: #2B2118;
  background: #FBF9F5;
  border: 1.5px solid #CBB68C;
  border-radius: 14px;
  box-shadow: none;
}
.kp-upload-popup-naam:focus {
  outline: none;
  border-color: #8a7a50;
}
.kp-upload-popup-naamhint {
  font-size: 12px;
  color: #6a6052;
  margin: 6px 0 0;
  line-height: 1.4;
}

/* Onderaan: formaten + maxgrootte. */
.kp-upload-popup-formaten {
  font-size: 13px;
  color: #6a6052;
  text-align: center;
  margin: 4px 0 4px;
  line-height: 1.4;
}

/* Fout-blok (bestand te groot / verkeerd type). */
.kp-upload-popup-fout {
  background: #fdecea;
  border: 1px solid #e6a8a0;
  color: #8a2e22;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  margin: 8px 0 0;
}

/* Voetbalk: twee actieknoppen — bevestig links (gevuld), annuleer rechts
   (outline), conform het referentievoorbeeld. flex-shrink:0 zodat de voet
   altijd zichtbaar blijft. */
.kp-upload-popup-voet {
  display: flex;
  gap: 12px;
  justify-content: flex-start;
  padding: 14px 28px 20px;
  border-top: 1.5px solid var(--kp-accent);
  background: #fffdf8;
  flex-shrink: 0;
}
.kp-upload-popup-bevestig,
.kp-upload-popup-annuleer {
  font-family: var(--kp-font-body);
  font-weight: 500;
  font-size: 14px;
  padding: 10px 26px;
  border-radius: 999px;
  cursor: pointer;
  min-width: 160px;
  transition: background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}
.kp-upload-popup-bevestig {
  background: #8a7a50;
  color: #fff;
  border: 1.5px solid #8a7a50;
}
.kp-upload-popup-bevestig:hover:not(:disabled),
.kp-upload-popup-bevestig:focus-visible:not(:disabled) {
  background: #6f6240;
  border-color: #6f6240;
  outline: none;
}
/* Disabled-state — duidelijk leesbaar maar zichtbaar inactief. Eerder
   opacity 0.45 maakte de knop te subtiel; 0.6 + grijze tint behoudt de
   visuele aanwezigheid zodat klanten weten dat de knop er is. */
.kp-upload-popup-bevestig:disabled {
  background: #b5a984;
  border-color: #b5a984;
  color: #ffffff;
  opacity: 0.85;
  cursor: not-allowed;
}
.kp-upload-popup-annuleer {
  background: transparent;
  color: var(--kp-primary);
  border: 1.5px solid var(--kp-primary);
}
.kp-upload-popup-annuleer:hover,
.kp-upload-popup-annuleer:focus-visible {
  background: rgba(138, 122, 80, 0.08);
  outline: none;
}

/* Mobile: knoppen onder elkaar, kleinere padding. */
@media (max-width: 600px) {
  .kp-upload-popup-kaart { max-width: 100%; }
  .kp-upload-popup-kop { padding: 14px 48px 12px; }
  .kp-upload-popup-titel { font-size: 20px; }
  .kp-upload-popup-body { padding: 16px 18px 4px; font-size: 14px; }
  .kp-upload-popup-voet {
    flex-direction: column;
    padding: 12px 18px 18px;
  }
  .kp-upload-popup-bevestig,
  .kp-upload-popup-annuleer {
    width: 100%;
    min-width: 0;
  }
}

/* =========================================================================
   Upload-lockout — onzichtbare overlay die het hele portaal blokkeert
   tijdens een lopende upload. Bij een klik verschijnt de "moment geduld"-
   popup. Wordt door JS aangezet via body-class .kp-upload-bezig.
   ========================================================================= */
.kp-upload-lockout {
  position: fixed;
  inset: 0;
  background: rgba(241, 237, 232, 0.45);
  z-index: 9000;       /* boven content, onder de eigenlijke upload-popup */
  display: none;
  cursor: wait;
}
body.kp-upload-bezig .kp-upload-lockout { display: block; }

.kp-upload-wacht-popup-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 26, 22, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10500;      /* boven alles, incl. de upload-popup */
}
.kp-upload-wacht-popup-kaart {
  background: #fffdf8;
  border: 1.5px solid #8a7a50;
  border-radius: 12px;
  padding: 22px 28px;
  max-width: 380px;
  text-align: center;
  /* Inter-stack hardcoded omdat de popup buiten .klant-main mount; voor
     consistentie met het portaal-body-font. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: #2c2c2c;
}
.kp-upload-wacht-popup-kaart strong { font-size: 16px; display: block; margin-bottom: 6px; }
.kp-upload-wacht-popup-kaart p { margin: 6px 0 0; font-size: 14px; line-height: 1.4; }
.kp-upload-wacht-popup-ok {
  background: #8a7a50;
  color: #ffffff;
  border: 1.5px solid #8a7a50;
  border-radius: 999px;
  padding: 8px 24px;
  margin-top: 14px;
  cursor: pointer;
  font-weight: 600;
}
.kp-upload-wacht-popup-ok:hover { background: #6f6240; border-color: #6f6240; }

/* ================================================================
   AANKOOPPORTAAL — klant-journey (ge-port uit Aankoopportaal/app/
   static/css/klant.css). Alle selectors gescoped onder `.klant-main`
   zodat ze de beheer-/overige pagina's niet raken en lokaal de
   bestaande Platinum-stijl aanvullen. De bestaande kp-card / btn /
   btn-primary / btn-secondary blijven ongemoeid (worden hergebruikt).
   ================================================================ */
.klant-main {
  --gold: #8a7a50;
  --accent: #c8b870;
  --bg: #f4f2ed;
  --card: #ffffff;
  --border: #e8e2d8;
  --text-dark: #3a3225;
  --text-mid: #6a5f4e;
  --text-light: #a09880;
  --radius: 14px;
  --font-display: 'Cormorant Garamond', Georgia, serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* === SECTION HEADINGS === */
.klant-main .section-heading { font-family: var(--font-display); font-size: 20px; font-weight: 600; color: var(--text-dark); margin: 24px 0 12px; }
.klant-main .section-heading:first-of-type { margin-top: 8px; }

/* === INFO BLOCKS === */
.klant-main .klant-info-blocks { display: grid; grid-template-columns: 1fr 220px 1fr; gap: 20px; margin-bottom: 24px; align-items: stretch; }
.klant-main .info-block { background: var(--card); border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 20px 24px; }
.klant-main .info-block-logo { display: flex; align-items: center; justify-content: center; padding: 16px; }
.klant-main .info-logo { max-width: 100%; max-height: 150px; width: auto; height: auto; object-fit: contain; }
.klant-main .info-block-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 10px; }
.klant-main .info-list { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; font-size: 13px; }
.klant-main .info-list dt { color: var(--text-light); font-weight: 500; }
.klant-main .info-list dd { color: var(--text-dark); }

/* === FUNDA INVOER === */
.klant-main .woningen-input { display: flex; gap: 12px; align-items: center; margin-bottom: 20px; }
.klant-main .funda-form { display: flex; gap: 8px; flex: 1; }
.klant-main .funda-url-input { flex: 1; }
.klant-main .manual-link { font-size: 13px; color: var(--gold); text-decoration: none; white-space: nowrap; font-weight: 500; }
.klant-main .manual-link:hover { text-decoration: underline; color: var(--accent); }
.klant-main .form-input { padding: 9px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; font-family: var(--font-body); background: var(--card); color: var(--text-dark); }
.klant-main .form-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 184, 112, 0.15); }
.klant-main .form-button { font-family: var(--font-body); background: var(--gold); color: #fff; padding: 8px 20px; border: none; border-radius: 8px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all .15s; }
.klant-main .form-button:hover { background: var(--accent); }

/* === WONINGEN ACTIONS === */
.klant-main .woningen-actions { margin-bottom: 12px; }
.klant-main .btn-vergelijk { font-family: var(--font-body); padding: 8px 16px; border: 1.5px solid var(--accent); border-radius: 8px; font-size: 13px; font-weight: 600; color: var(--gold); background: transparent; cursor: pointer; transition: all .2s; }
.klant-main .btn-vergelijk:hover { background: var(--accent); color: #fff; }
.klant-main .btn-vergelijk:disabled { opacity: .4; cursor: not-allowed; }

/* === TABLES === */
.klant-main .woningen-table { width: 100%; border-collapse: collapse; background: var(--card); border: 1.5px solid var(--accent); border-radius: var(--radius); overflow: hidden; margin-bottom: 8px; }
.klant-main .woningen-table th { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; color: var(--text-light); text-align: left; padding: 10px 14px; border-bottom: 2px solid var(--border); }
.klant-main .woningen-row td { font-size: 13px; color: var(--text-dark); padding: 10px 14px; border-bottom: 1px solid #f0ece4; vertical-align: middle; }
.klant-main .woningen-table tr:last-child td { border-bottom: none; }
.klant-main .clickable-row { cursor: pointer; }
.klant-main .clickable-row:hover td { background: var(--bg); }
.klant-main .clickable-cell { cursor: pointer; }
.klant-main .clickable-cell:hover { background: var(--bg); }

/* === THUMBNAILS === */
.klant-main .woning-thumb { width: 60px; height: 40px; object-fit: cover; border-radius: 6px; }
.klant-main .woning-thumb-sm { width: 48px; height: 32px; object-fit: cover; border-radius: 3px; margin-right: 8px; }

/* === STATUS STEPS === */
.klant-main .status-steps { display: flex; align-items: center; gap: 4px; font-size: 11px; white-space: nowrap; }
.klant-main .status-step { color: var(--text-light); padding: 2px 6px; border-radius: 3px; }
.klant-main .status-step.step-done { background: rgba(200, 184, 112, 0.2); color: var(--gold); font-weight: 600; }
.klant-main .status-arrow { color: var(--border); font-size: 10px; }

/* === ROW ACTIONS / BUTTONS === */
.klant-main .row-actions { display: flex; gap: 4px; align-items: center; }
.klant-main .btn-view { background: rgba(200, 184, 112, 0.15); color: var(--gold); font-weight: 500; }
.klant-main .btn-view:hover { background: rgba(200, 184, 112, 0.3); }
.klant-main .btn-bid { background: var(--gold); color: #fff; font-weight: 600; }
.klant-main .btn-bid:hover { background: var(--accent); }
.klant-main .btn-delete { background: transparent; color: #c25a4a; font-size: 16px; padding: 2px 6px; border: none; cursor: pointer; }
.klant-main .btn-delete:hover { color: #9b2c2c; }
.klant-main .btn-funda { background: var(--gold); color: #fff; padding: 10px 24px; border-radius: 8px; font-size: 14px; font-weight: 600; margin: 12px 0; text-decoration: none; display: inline-block; }
.klant-main .btn-funda:hover { background: var(--accent); }
.klant-main .btn-small { padding: 5px 12px; font-size: 12px; }
.klant-main .btn-large { padding: 12px 28px; font-size: 15px; }

/* === LINKS === */
.klant-main .back-link { display: inline-block; color: var(--gold); text-decoration: none; font-size: 14px; margin-bottom: 16px; font-weight: 500; }
.klant-main .back-link:hover { text-decoration: underline; color: var(--accent); }
.klant-main .link-email { color: var(--gold); text-decoration: none; }
.klant-main .link-email:hover { text-decoration: underline; color: var(--accent); }
.klant-main .link-tel { color: var(--gold); text-decoration: none; }
.klant-main .link-tel:hover { text-decoration: underline; color: var(--accent); }

/* === FORMS === */
.klant-main .form-group { display: flex; flex-direction: column; gap: 4px; }
.klant-main .form-label { font-size: 13px; font-weight: 600; color: var(--text-mid); }
.klant-main .form-hint { display: block; margin-top: 4px; font-size: 12px; color: var(--text-light); }
.klant-main .form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.klant-main .form-row-3 { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; }
.klant-main .form-actions-row { display: flex; gap: 10px; align-items: center; margin-top: 4px; }
.klant-main .toggle-group { display: flex; gap: 12px; }
.klant-main .toggle-option { display: flex; align-items: center; gap: 4px; font-size: 14px; cursor: pointer; }
.klant-main .input-with-link { display: flex; gap: 6px; align-items: center; }
.klant-main .input-with-link .form-input { flex: 1; }

/* === EMPTY STATE === */
.klant-main .empty-state { text-align: center; padding: 40px 20px; background: var(--card); border: 1.5px dashed var(--accent); border-radius: var(--radius); color: var(--text-light); font-size: 15px; }
.klant-main .empty-hint { color: var(--text-light); font-size: 14px; }

/* === WONING DETAIL PAGE === */
.klant-main .woning-detail-page { max-width: 800px; margin: 0 auto; }
.klant-main .woning-detail-foto { width: 100%; max-height: 400px; object-fit: cover; border-radius: var(--radius); margin-bottom: 20px; }
.klant-main .woning-detail-header h1 { font-family: var(--font-display); font-size: 26px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.klant-main .woning-detail-plaats { color: var(--text-light); font-size: 15px; margin-bottom: 4px; }
.klant-main .woning-detail-prijs { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--gold); margin-bottom: 16px; }
.klant-main .woning-detail-status { margin-bottom: 20px; }
.klant-main .woning-detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }
.klant-main .woning-kenmerk { display: flex; flex-direction: column; padding: 12px; background: var(--card); border: 1.5px solid var(--accent); border-radius: 10px; }
.klant-main .kenmerk-label { font-size: 11px; font-weight: 600; color: var(--text-light); text-transform: uppercase; letter-spacing: .3px; }
.klant-main .kenmerk-value { font-size: 15px; font-weight: 500; color: var(--text-dark); }

/* === WONING SECTIONS === */
.klant-main .woning-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.klant-main .woning-section h2 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-dark); margin-bottom: 12px; }
.klant-main .form-hint-text { font-size: 13px; color: var(--text-light); margin-bottom: 8px; }
.klant-main .makelaar-form { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.klant-main .makelaar-form .btn-primary { grid-column: 1 / -1; justify-self: stretch; }
.klant-main .notities-form { margin-top: 8px; }
.klant-main .notities-textarea { width: 100%; min-height: 120px; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: 8px; font-family: var(--font-body); font-size: 14px; line-height: 1.5; color: var(--text-dark); background: var(--card); resize: vertical; }
.klant-main .notities-textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 184, 112, 0.15); }
.klant-main .notities-readonly { white-space: pre-wrap; font-size: 14px; line-height: 1.6; color: var(--text-dark); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; }

/* === STEPS VERTICAL === */
.klant-main .steps-vertical { display: flex; flex-direction: column; gap: 0; position: relative; }
.klant-main .step-item { display: flex; gap: 16px; padding: 16px 0; position: relative; }
.klant-main .step-marker { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex-shrink: 0; z-index: 1; }
.klant-main .step-complete .step-marker { background: var(--gold); color: #fff; }
.klant-main .step-current .step-marker { background: var(--accent); color: #fff; }
.klant-main .step-future .step-marker { background: var(--border); color: var(--text-light); }
.klant-main .step-faded .step-marker { background: var(--gold); color: #fff; opacity: .5; }
.klant-main .step-content { flex: 1; }
.klant-main .step-title { font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-dark); margin-bottom: 4px; }
.klant-main .step-desc { font-size: 13px; color: var(--text-light); margin-bottom: 8px; }
.klant-main .step-form { margin-top: 8px; }
.klant-main .step-faded .step-content { opacity: .5; }

/* === BOD WARNING === */
.klant-main .bod-warning { background: rgba(200, 184, 112, 0.12); color: var(--text-mid); padding: 12px 16px; border-radius: 8px; font-size: 13px; margin-top: 12px; border-left: 3px solid var(--accent); }

/* === DOCUMENT ITEMS === */
.klant-main .doc-item { display: flex; gap: 12px; align-items: center; margin-bottom: 8px; padding: 10px 14px; background: var(--card); border: 1px solid var(--border); border-radius: 10px; }
.klant-main .doc-label { flex: 1; font-size: 14px; font-weight: 500; color: var(--text-dark); }

/* === VERGELIJK === */
.klant-main .vergelijk-table { width: 100%; border-collapse: collapse; font-size: 13px; margin: 12px 0; background: var(--card); border: 1.5px solid var(--accent); border-radius: var(--radius); overflow: hidden; }
.klant-main .vergelijk-table th, .klant-main .vergelijk-table td { padding: 8px 12px; border-bottom: 1px solid #f0ece4; text-align: left; }
.klant-main .vergelijk-table th { background: var(--bg); font-weight: 600; color: var(--text-light); font-size: 12px; }
.klant-main .vergelijk-table tr:last-child td { border-bottom: none; }
.klant-main .vergelijk-thumb { width: 120px; height: 80px; object-fit: cover; border-radius: 6px; display: block; }
.klant-main .vergelijk-scroll { overflow-x: auto; }

/* === ANALYSE (KLANT) === */
.klant-main .stat-grid-klant { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin: 20px 0; }
.klant-main .stat-card-klant { background: var(--card); border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 20px; text-align: center; }
.klant-main .stat-value-klant { font-family: var(--font-display); font-size: 28px; font-weight: 700; color: var(--text-dark); }
.klant-main .stat-label-klant { font-size: 12px; color: var(--text-light); margin-top: 4px; }
.klant-main .analyse-table { font-size: 13px; }
.klant-main .analyse-table th { font-size: 12px; min-width: 120px; }
.klant-main .analyse-col-doelwoning { background: rgba(200, 184, 112, 0.1) !important; }
.klant-main .doelwoning-label { display: inline-block; background: var(--gold); color: #fff; font-size: 10px; padding: 1px 6px; border-radius: 3px; font-weight: 600; letter-spacing: .3px; margin-bottom: 2px; }
.klant-main .analyse-row-herberekening { background: rgba(106, 171, 106, 0.08); }
.klant-main .analyse-row-herberekening td { border-top: 2px solid #6aab6a; }
.klant-main .herberekening-toelichting { color: var(--text-light); font-size: 11px; }
.klant-main .analyse-section { margin-top: 20px; }
.klant-main .analyse-section h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
.klant-main .analyse-bullets { padding-left: 20px; font-size: 14px; line-height: 1.6; }
.klant-main .analyse-history-item { background: var(--card); border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; }
.klant-main .analyse-history-item[open] { padding-bottom: 20px; }
.klant-main .analyse-history-summary { cursor: pointer; display: flex; align-items: center; gap: 12px; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--text-dark); list-style: none; outline: none; }
.klant-main .analyse-history-summary::-webkit-details-marker { display: none; }
.klant-main .analyse-history-summary::before { content: "\25B8"; display: inline-block; transition: transform .15s; font-size: 12px; color: var(--text-light); }
.klant-main .analyse-history-item[open] .analyse-history-summary::before { transform: rotate(90deg); }
.klant-main .analyse-history-datum { flex: 1; }
.klant-main .analyse-history-badge { background: var(--gold); color: #fff; font-size: 10px; padding: 2px 8px; border-radius: 10px; font-weight: 600; letter-spacing: .3px; }

/* === BODTRAJECT CARD === */
.klant-main .bodtraject-card { background: var(--card); border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 20px 24px; margin-bottom: 20px; }
.klant-main .bodtraject-card h3 { font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }
.klant-main .bodtraject-card p { font-size: 14px; color: var(--text-mid); margin-bottom: 12px; }
.klant-main .deadline-form { margin-bottom: 16px; }
.klant-main .pdf-downloads { margin-top: 16px; }
.klant-main .pdf-downloads h4 { font-size: 14px; font-weight: 600; color: var(--text-mid); margin-bottom: 8px; }

/* === CHECKLIST === */
.klant-main .checklist-form { display: flex; flex-direction: column; gap: 20px; background: var(--card); border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 24px; }
.klant-main .checklist-question { display: flex; flex-direction: column; gap: 8px; }
.klant-main .score-group { display: flex; gap: 6px; flex-wrap: wrap; }
.klant-main .score-option { cursor: pointer; }
.klant-main .score-option input { display: none; }
.klant-main .score-label { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1.5px solid var(--border); border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text-mid); transition: all .15s; cursor: pointer; }
.klant-main .score-option input:checked + .score-label { background: var(--gold); color: #fff; border-color: var(--gold); }
.klant-main .score-label:hover { border-color: var(--accent); color: var(--gold); }

/* === BEZICHTIGING FORM === */
.klant-main .bezichtiging-form { display: flex; flex-direction: column; gap: 16px; background: var(--card); border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 24px; max-width: 500px; }
.klant-main .verbouw-details { display: flex; flex-direction: column; gap: 12px; }

/* === MANUAL FORM === */
.klant-main .manual-form { background: var(--card); border: 1.5px solid var(--accent); border-radius: var(--radius); padding: 24px; margin-bottom: 24px; }
.klant-main .manual-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 16px; }

/* === STATUS PILLS === */
.klant-main .pill { display: inline-block; padding: 3px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; vertical-align: middle; }
.klant-main .pill-green { background: #e8f5e8; color: #4a8a4a; }
.klant-main .pill-orange { background: #fdf3e0; color: #b8860b; }
.klant-main .pill-blue { background: #e8f0f8; color: #4a6a8a; }

/* === VISUELE INSPECTIE — read-only badges === */
.klant-main .vi-badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 10px; }
.klant-main .vi-beter { background: rgba(106, 171, 106, 0.15); color: #3f7a3f; }
.klant-main .vi-vergelijkbaar { background: rgba(212, 164, 56, 0.18); color: #8a6a18; }
.klant-main .vi-minder { background: rgba(194, 90, 74, 0.15); color: #a23d2e; }
.klant-main .vi-nvt { background: rgba(160, 152, 128, 0.15); color: var(--text-light); }

/* DODE MEDIA QUERIES VERWIJDERD (11-08-2026) — twee blokken op 900px en
   600px, gescoped op `.klant-main` (de oude schil, zie hierboven). Ze deden
   niets: `.stat-grid-klant` wordt op de klantpagina's gestyled door
   `.lfk-main .stat-grid-klant` in lf-klant.css, en `.klant-info-blocks`,
   `.woning-detail-grid` en `.manual-form-grid` bestaan in geen enkele
   template meer. */

/* Placeholder rekenmodule (berekeningen-pagina) — bewust niet functioneel */
.rekenmodule-preview { opacity: 0.85; margin-top: 24px; }
.rekenmodule-kop { display: flex; align-items: center; gap: 12px; }
.rekenmodule-badge {
  font-size: 11px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; padding: 4px 10px; border-radius: 999px;
  background: #f3efe8; color: #8a7a50;
}
.rekenmodule-uitleg { font-size: 14px; color: #6a5f4e; margin: 8px 0 16px; }
.rekenmodule-velden { display: grid; gap: 14px; max-width: 460px; }
.rekenmodule-veld { display: grid; gap: 4px; font-size: 13px; color: #6a5f4e; }
.rekenmodule-veld input[type="range"] { width: 100%; accent-color: #8a7a50; cursor: not-allowed; }
.rekenmodule-waarde { font-weight: 600; color: #3a3225; }
.rekenmodule-uitkomst {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid #e8e2d8; padding-top: 12px; font-size: 14px;
}
.rekenmodule-uitkomst strong { font-size: 1.4rem; color: #8a7a50; }

/* Werkende rekenmodule (vervangt de placeholder-stijl waar nodig) */
.rekenmodule { margin-top: 24px; }
.rekenmodule .rekenmodule-badge { background: #e8f0e8; color: #4a6a4a; }
.rekenmodule-opzet {
  display: grid; grid-template-columns: auto auto; gap: 4px 18px;
  font-size: 13px; color: #6a5f4e; margin: 6px 0 10px;
}
.rekenmodule-opzet dd { margin: 0; text-align: right; color: #3a3225; font-weight: 600; }
.rekenmodule-veld input[type="range"] { cursor: pointer; }
.rekenmodule-input {
  font: inherit; padding: 8px 10px; border: 1px solid #e8e2d8;
  border-radius: 8px; max-width: 200px;
}
.rekenmodule-scheider { border: none; border-top: 1px solid #e8e2d8; margin: 20px 0 14px; }
.rekenmodule-subtitel { font-size: 1.15rem; }
.rekenmodule-disclaimer {
  margin-top: 18px; padding: 12px 14px; border-radius: 10px;
  background: #fdf6e8; color: #7a6636; font-size: 13px; line-height: 1.5;
}

/* Adviseur-meekijkbalk (Login als klant / Bekijk als klant): alleen
   zichtbaar bij een adviseur-sessie, klanten zien deze nooit. */
.adviseur-meekijk-balk {
  background: #1c2b3a;
  color: #f5f1e8;
  padding: 10px 18px;
  font-size: 13.5px;
  text-align: center;
  border-radius: 0 0 10px 10px;
}
.adviseur-meekijk-balk a {
  color: #d9b96c;
  font-weight: 600;
  margin-left: 8px;
  text-decoration: underline;
}

/* Invoerveld naast de slider (koopsom/spaargeld): compact, zelfde stijl
   als .rekenmodule-input; slider en veld blijven via JS synchroon. */
.rekenmodule-invoer { max-width: 160px; }

/* Prominente indicatief-melding boven de rekenmodule + grens-meldingen
   (overdrachtsbelasting/NHG) die het script toont bij overschrijding. */
.rekenmodule-indicatief {
  margin: 4px 0 16px; padding: 10px 14px; border-radius: 10px;
  background: #fdf6e8; border: 1px solid #ecd9a8;
  color: #7a6636; font-size: 13.5px; font-weight: 600; line-height: 1.5;
}
.rekenmodule-melding {
  margin-top: 12px; padding: 10px 14px; border-radius: 10px;
  background: #fdeeea; border: 1px solid #edc2b5;
  color: #8a4a33; font-size: 13px; line-height: 1.5;
}

/* Reset-knop rechts in de rekenmodule-kop + basis-keuzemenu. */
.rekenmodule-kop { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.rekenmodule-reset { margin-left: auto; font-size: 13px; padding: 8px 14px; }
.rekenmodule-basis-keuze { margin: 0 0 16px; font-size: 13px; color: #6a5f4e; }
.rekenmodule-basis-keuze select { margin-left: 8px; max-width: 320px; }

/* ─── Berekeningen & offertes: handtekening-blok ───
   Kleine, nette preview i.p.v. de afbeelding op volle breedte, met een
   prullenbak-knop ernaast om de opgeslagen handtekening te wissen. */
.ber-handtekening-rij { display: flex; align-items: center; gap: 14px; }
.ber-handtekening-img {
  max-width: 240px; max-height: 90px; width: auto; height: auto;
  padding: 8px 12px; border: 1px solid #e8e2d8; border-radius: 10px;
  background: #fbfaf7;
}
.ber-handtekening-verwijder {
  border: 1px solid #e8e2d8; background: #fff; border-radius: 8px;
  font-size: 17px; line-height: 1; padding: 8px 10px; cursor: pointer;
  color: #8a4a33;
}
.ber-handtekening-verwijder:hover { background: #fdeeea; border-color: #edc2b5; }

/* Documentregel: bestandsgrootte bij een getekende offerte. */
.ber-grootte { font-size: 12.5px; color: #6a5f4e; font-weight: 400; }

/* ─── Berekeningen & offertes: documentenlijst in kolommen ───
   datum · naam · statuslabel · Ondertekenen/Wijzigen · Downloaden.
   Vaste kolombreedtes: datums, namen, statussen en de twee knopkolommen
   lijnen over alle regels strak onder elkaar uit; een lege cel houdt de
   kolom op zijn plek. Ruime rij-afstand tussen documenten. */
.ber-lijst { list-style: none; margin: 0; padding: 0; }
.ber-item {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) 158px 132px 132px;
  gap: 8px 14px;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #efe9df;
}
.ber-item:last-child { border-bottom: none; }
.ber-datum { font-size: 13px; color: #6a5f4e; white-space: nowrap; }
.ber-naam { font-weight: 600; overflow-wrap: anywhere; }
.ber-status-cel, .ber-actie { display: flex; justify-content: flex-start; }
/* Slankere, onderling even brede actieknoppen (naast elkaar, elk een
   eigen kolom). */
.btn-ber {
  width: 132px; padding: 6px 10px; font-size: 13px;
  text-align: center; box-sizing: border-box;
}

/* Statuslabel van een ondertekenbare offerte (klant-kant). */
.ber-status {
  padding: 3px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 600; line-height: 1.4;
  white-space: nowrap;
}
.ber-status-nieuw {
  color: #6a6a6a; background: #f2f1ee; border: 1px solid #dedbd4;
}
.ber-status-behandeling {
  color: #7a6636; background: #faf5e8; border: 1px solid #e6d9b4;
}
.ber-status-goedgekeurd {
  color: #1d6f42; background: #e6f4ec; border: 1px solid #bfe3cf;
}
.ber-status-afgewezen {
  color: #fff; background: #c0392b; border: 1px solid #96281b;
  cursor: pointer;
}
/* Rood knipperblokje: er is actie nodig van de klant. */
@keyframes ber-knipper {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
.ber-knipper { animation: ber-knipper 1.2s ease-in-out infinite; }
.ber-knipper:hover { animation-play-state: paused; }
/* Afwijs-opmerking: klapt open over de volle rijbreedte. */
.ber-afwijzing {
  grid-column: 1 / -1;
  font-size: 13.5px; line-height: 1.5; color: #8a4a33;
  background: #fdeeea; border: 1px solid #edc2b5;
  border-radius: 10px; padding: 10px 14px;
}
/* DODE MEDIA QUERY VERWIJDERD (11-08-2026) — 760px-blok voor `.ber-item`.
   Die class komt in geen enkele template of script voor; de documentenlijst
   onder Berekeningen gebruikt `.lfk-tabel-rij` in de lfk-schil. */

/* Overbod in euro's onder het percentage (aankoop-analysetabel klant). */
.klant-main .overbod-eur { color: var(--text-light, #a09880); font-size: 11px; }

/* Klantnaam in de adviseur-meekijkbalk: moet er in één oogopslag uitspringen,
   want dat is de hele reden dat hij er staat. */
.adviseur-meekijk-balk .meekijk-klantnaam {
  font-weight: 700;
  letter-spacing: 0.04em;
}