/* ==========================================================================
   Stalling Kroneman — huisstijl
   ========================================================================== */

:root {
  --groen-900: #12291f;
  --groen-800: #17362a;
  --groen-700: #1d4838;
  --groen-600: #256a4e;
  --groen-100: #e3efe8;
  --groen-50: #f1f7f3;
  --zand-500: #d98c3d;
  --zand-600: #c1762c;
  --zand-100: #faeedd;
  --tekst: #24312b;
  --tekst-licht: #5c6b63;
  --achtergrond: #f7f6f2;
  --kaart: #ffffff;
  --rand: #e4e4de;
  --rood-100: #fbe1e1;
  --rood-700: #a33232;
  --radius: 10px;
  --radius-groot: 16px;
  --schaduw: 0 1px 3px rgba(18, 41, 31, 0.07), 0 4px 14px rgba(18, 41, 31, 0.06);
  --schaduw-groot: 0 4px 10px rgba(18, 41, 31, 0.08), 0 16px 40px rgba(18, 41, 31, 0.12);
  --max-breedte: 1100px;
}

* { box-sizing: border-box; }

/* Zorgt dat het [hidden]-attribuut altijd wint van een class die zelf een display zet
   (bijv. .paginering { display: flex }) — anders blijft zo'n element toch zichtbaar. */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; height: 100%; }

body {
  margin: 0;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  font-family: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  color: var(--tekst);
  background: var(--achtergrond);
  line-height: 1.6;
  font-size: 1rem;
}

body > main {
  flex: 1 0 auto;
}

body > footer.site-footer {
  flex-shrink: 0;
}

h1, h2, h3, h4 {
  line-height: 1.2;
  color: var(--groen-800);
  letter-spacing: -0.015em;
}

h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
h2 { font-size: clamp(1.35rem, 3vw, 1.8rem); }
h3 { font-size: 1.15rem; }

a { color: var(--groen-600); }
a:hover { color: var(--groen-700); }

.container {
  max-width: var(--max-breedte);
  margin: 0 auto;
  padding: 0 20px;
}

/* --------------------------------------------------------------------------
   Header & navigatie
   -------------------------------------------------------------------------- */

.topbalk {
  background: var(--groen-900);
  color: #cfe0d7;
  font-size: 0.85rem;
}

.topbalk .container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 20px;
  padding-top: 7px;
  padding-bottom: 7px;
}

.topbalk-contact { display: flex; flex-wrap: wrap; gap: 4px 18px; }
.topbalk a { color: #fff; text-decoration: none; font-weight: 600; }
.topbalk a:hover { color: var(--zand-500); }

/* Op een smal scherm zou de balk drie regels hoog worden; houd dan alleen het
   telefoonnummer en WhatsApp over, en centreer die. */
@media (max-width: 640px) {
  .topbalk .container { justify-content: center; }
  .topbalk .topbalk-melding,
  .topbalk .topbalk-mail { display: none; }
}

header.site-header {
  background: var(--groen-800);
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 12px rgba(18, 41, 31, 0.25);
}

header.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  flex-wrap: wrap;
  gap: 10px 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: #fff;
}

.logo img {
  flex-shrink: 0;
  display: block;
  height: 44px;
  width: auto;
  background: #fff;
  border-radius: 8px;
  padding: 5px 9px;
}

.logo .logo-sub {
  font-size: 0.68rem;
  font-weight: 500;
  color: #a8c5b6;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  max-width: 9em;
  line-height: 1.35;
}

nav.main-nav ul {
  list-style: none;
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
  align-items: center;
}

nav.main-nav a {
  display: inline-block;
  color: #d9e6df;
  text-decoration: none;
  font-weight: 500;
  font-size: 0.95rem;
  padding: 7px 12px;
  border-radius: 7px;
  transition: background 0.15s, color 0.15s;
}

nav.main-nav a:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

nav.main-nav a.nav-actief { background: rgba(255, 255, 255, 0.14); color: #fff; }

nav.main-nav a.nav-cta {
  background: var(--zand-500);
  color: var(--groen-900);
  font-weight: 600;
  margin-left: 6px;
}

nav.main-nav a.nav-cta:hover { box-shadow: 0 0 0 2px rgba(18, 41, 31, 0.25) inset; }

/* Rode variant van de oranje nav-cta-knop, bijv. de 'Melden'-knop voor personeel: zelfde vorm
   en gewicht, andere kleur zodat hij zich onderscheidt van de gewone portaal-CTA. */
nav.main-nav a.nav-cta-rood {
  background: #b91c1c;
  color: #fff;
}

nav.main-nav a.nav-cta-rood:hover { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35) inset; }

/* Hamburgerknop: alleen zichtbaar onder de 800px-breakpoint (zie hieronder). */
.menu-knop {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  padding: 0;
  background: transparent;
  border: 1.5px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  cursor: pointer;
  margin-left: auto;
}

.menu-knop-streep {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: #fff;
  border-radius: 1px;
  transition: transform 0.15s, opacity 0.15s;
}

.menu-knop[aria-expanded="true"] .menu-knop-streep:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-knop[aria-expanded="true"] .menu-knop-streep:nth-child(2) { opacity: 0; }
.menu-knop[aria-expanded="true"] .menu-knop-streep:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

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

  nav.main-nav {
    display: none;
    flex-basis: 100%;
    order: 3;
  }

  nav.main-nav.menu-open { display: block; }

  nav.main-nav ul { flex-direction: column; align-items: stretch; gap: 2px; padding-top: 8px; }
  nav.main-nav a { display: block; padding: 10px 12px; }
  nav.main-nav a.nav-cta { margin-left: 0; text-align: center; }
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.hero {
  background:
    radial-gradient(1100px 420px at 85% -10%, rgba(217, 140, 61, 0.22), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(37, 106, 78, 0.5), transparent 60%),
    linear-gradient(150deg, var(--groen-700), var(--groen-900));
  color: #fff;
  padding: clamp(48px, 8vw, 96px) 0;
}

.hero .container { max-width: 820px; text-align: center; }

.hero .hero-kicker {
  display: inline-block;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #f0e2cd;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 14px;
  border-radius: 999px;
  margin-bottom: 20px;
}

.hero h1 {
  color: #fff;
  margin: 0 0 16px;
  font-size: clamp(1.9rem, 5vw, 2.9rem);
}

.hero p {
  font-size: clamp(1rem, 2vw, 1.15rem);
  color: #d5e3db;
  margin: 0 auto 28px;
  max-width: 620px;
}

.hero-acties { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: 12px 24px;
  border-radius: 9px;
  background: var(--zand-500);
  color: var(--groen-900);
  text-decoration: none;
  border: none;
  font-weight: 600;
  cursor: pointer;
  font-size: 1rem;
  font-family: inherit;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 2px 8px rgba(217, 140, 61, 0.35);
}

/* Achtergrond blijft op hover ongewijzigd: --zand-600 geeft met donkere tekst
   onvoldoende WCAG AA-contrast (was wit-op-oranje, 2,70:1; zie audit 24-08-2026). */
.btn:hover { color: var(--groen-900); transform: translateY(-1px); box-shadow: 0 4px 14px rgba(217, 140, 61, 0.5); }
.btn:active { transform: translateY(0); }

.btn-secundair {
  background: transparent;
  color: var(--groen-700);
  border: 1.5px solid var(--groen-600);
  box-shadow: none;
}

.btn-secundair:hover { background: var(--groen-50); color: var(--groen-700); }

.btn-rood {
  background: #b91c1c;
  color: #fff;
  box-shadow: 0 2px 8px rgba(185, 28, 28, 0.35);
}

.btn-rood:hover { color: #fff; box-shadow: 0 4px 14px rgba(185, 28, 28, 0.5); }

.btn-wit {
  background: rgba(255, 255, 255, 0.12);
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  box-shadow: none;
}

.btn-wit:hover { background: rgba(255, 255, 255, 0.22); color: #fff; }

.btn-klein { padding: 8px 16px; font-size: 0.9rem; }

.btn-vernieuwen-subtiel {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  color: var(--zand-600);
  background: var(--zand-100);
  border: 1px solid var(--zand-500);
  border-radius: 50%;
  cursor: pointer;
  flex: none;
  transition: background 0.15s, color 0.15s;
}

.btn-vernieuwen-subtiel::after {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--zand-500);
  border: 1.5px solid var(--zand-100);
}

.btn-vernieuwen-subtiel:hover { background: var(--zand-500); color: #fff; }
.btn-vernieuwen-subtiel:hover::after { border-color: var(--zand-500); }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* "Naar de inhoud"-link: onzichtbaar tot een toetsenbordgebruiker 'm focust, dan
   bovenaan zichtbaar zodat de topbalk en hoofdnavigatie overgeslagen kunnen worden. */
.skip-link {
  position: absolute;
  top: -100%;
  left: 12px;
  z-index: 100;
  background: var(--groen-900);
  color: #fff;
  padding: 10px 18px;
  border-radius: 0 0 8px 8px;
  text-decoration: none;
  font-weight: 600;
  transition: top 0.15s;
}

.skip-link:focus { top: 0; }

/* Vector-icoon (Tabler Icons) voor kopjes, in de huisstijlkleur i.p.v. emoji: consistente
   weergave op elk apparaat/besturingssysteem. */
.icoon-koptekst {
  color: var(--zand-600);
  margin-right: 6px;
  font-size: 0.9em;
  vertical-align: -0.05em;
}

/* --------------------------------------------------------------------------
   Secties & kaarten
   -------------------------------------------------------------------------- */

main { padding: clamp(32px, 5vw, 56px) 0 24px; min-height: 55vh; }

.sectie { margin-bottom: clamp(40px, 6vw, 64px); }

.sectie-kop { text-align: center; max-width: 640px; margin: 0 auto 32px; }
.sectie-kop p { color: var(--tekst-licht); margin-top: 8px; }

.card {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius-groot);
  padding: 28px;
  margin-bottom: 20px;
  box-shadow: var(--schaduw);
}

.card h3 { margin-top: 0; }

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid .card { margin-bottom: 0; }

/* Vaste 2-koloms indeling (2x2 bij vier kaarten) i.p.v. auto-fit, voor overzichten waar de
   volgorde van de kaarten er expliciet toe doet. Onder 700px alsnog één kolom. */
.grid.grid-2koloms { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 700px) {
  .grid.grid-2koloms { grid-template-columns: 1fr; }
}

/* Pagina met een brede hoofdkolom en een smallere kolom ernaast (formulier + overzicht).
   Breakpoint op 800px zodat het ook werkt naast de portaalsidebar (die al ~250px inneemt). */
.tweekolom { display: grid; gap: 20px; grid-template-columns: minmax(0, 1fr); align-items: start; }
.tweekolom .card { margin-bottom: 0; }

@media (min-width: 800px) {
  .tweekolom { grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); }
}

.feature-card { transition: transform 0.15s, box-shadow 0.15s; }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--schaduw-groot); }

.feature-icoon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: var(--groen-100);
  color: var(--groen-600);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
}

.feature-icoon svg { width: 26px; height: 26px; }

/* Stappen (hoe werkt het) */

.stappen { counter-reset: stap; display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

.stap {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius-groot);
  padding: 24px;
  position: relative;
  box-shadow: var(--schaduw);
}

.stap::before {
  counter-increment: stap;
  content: counter(stap);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--groen-700);
  color: #fff;
  font-weight: 700;
  font-size: 1.05rem;
  margin-bottom: 12px;
}

.stap h3 { margin: 0 0 6px; font-size: 1.05rem; }
.stap p { margin: 0; color: var(--tekst-licht); font-size: 0.95rem; }

/* Objecttypes */

.types-lijst {
  display: grid;
  gap: 12px;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 16px 10px;
  text-align: center;
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--groen-800);
  text-decoration: none;
  box-shadow: var(--schaduw);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

a.type-item:hover {
  transform: translateY(-2px);
  border-color: var(--groen-600);
  box-shadow: var(--schaduw-groot);
  color: var(--groen-700);
}

.type-item img {
  width: 100%;
  max-width: 110px;
  height: 56px;
  object-fit: contain;
}

/* Objecttype-icoon in lijsten/tabellen (portaal en beheerportaal) */
.object-type-cel {
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}

/* De bronafbeeldingen zijn 2:1 — het vakje volgt die verhouding, anders
   ontstaat er evenveel lege ruimte boven/onder als het beeld zelf hoog is. */
.object-type-icoon {
  width: 30px;
  height: 15px;
  object-fit: contain;
  flex-shrink: 0;
}

/* Gestapelde variant: type op regel 1, merk/model op regel 2. Scheelt zoveel
   breedte dat tabellen met een objectkolom binnen het scherm blijven passen. */
.object-type-cel--gestapeld {
  align-items: flex-start;
  white-space: normal;
  min-width: 0;
}

.object-type-cel--gestapeld .object-type-icoon { margin-top: 4px; }

.object-type-regels {
  display: flex;
  flex-direction: column;
  min-width: 0;
  line-height: 1.3;
}

.object-type-merk {
  color: var(--tekst-licht);
  font-size: 0.85rem;
}


/* CTA-band */

.cta-band {
  background: linear-gradient(135deg, var(--groen-700), var(--groen-900));
  border-radius: var(--radius-groot);
  color: #fff;
  padding: clamp(32px, 5vw, 48px);
  text-align: center;
}

.cta-band h2 { color: #fff; margin-top: 0; }
.cta-band p { color: #cfe0d7; max-width: 560px; margin: 12px auto 24px; }

/* USP-balk onder hero */

.usp-balk {
  background: var(--groen-50);
  border-bottom: 1px solid var(--rand);
  padding: 14px 0;
}

.usp-balk .container {
  display: flex;
  gap: 8px 32px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--groen-700);
}

.usp-balk span { display: inline-flex; align-items: center; gap: 7px; }
.usp-balk svg { width: 17px; height: 17px; color: var(--groen-600); }

/* Sectie met een illustratie naast de tekst (Over ons, Halen & brengen) */

.beeld-sectie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: center;
}

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

.beeld-sectie .beeld {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius-groot);
  box-shadow: var(--schaduw);
  padding: 18px;
}

.beeld-sectie .beeld img { display: block; width: 100%; height: auto; }

@media (max-width: 760px) {
  .beeld-sectie { grid-template-columns: 1fr; }
  .beeld-sectie .beeld { order: -1; }
}

/* Eenvoudige lijst met een omschrijving links en een bedrag/waarde rechts */

.info-lijst { margin: 0; padding: 0; list-style: none; }

.info-lijst li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rand);
}

.info-lijst li:last-child { border-bottom: none; }
.info-lijst .waarde { font-weight: 600; color: var(--groen-800); white-space: nowrap; }

/* --------------------------------------------------------------------------
   Tabellen & badges
   -------------------------------------------------------------------------- */

.tabel-wrapper { overflow-x: auto; }

table.data-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--schaduw);
}

table.data-table th, table.data-table td {
  text-align: left;
  padding: 13px 16px;
  border-bottom: 1px solid var(--rand);
}

table.data-table tbody tr:last-child td { border-bottom: none; }
table.data-table tbody tr:hover { background: var(--groen-50); }

/* Klikbare regel in een tabel: de link vult de cel, zonder linkopmaak */
a.rij-link { display: block; color: inherit; text-decoration: none; }
a.rij-link:hover { color: var(--groen-800); text-decoration: underline; }

table.data-table th {
  color: var(--tekst-licht);
  font-weight: 600;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  background: #fbfbf9;
}

/* Sorteerbare kolomkop (facturen/klanten/objecten/overzichtstabellen): klikbaar, met
   hover-feedback zodat duidelijk is dat er gesorteerd kan worden. */
table.data-table th.sorteerbare-kolom { cursor: pointer; user-select: none; }
table.data-table th.sorteerbare-kolom:hover { color: var(--groen-800); }

.weekoverzicht { display: flex; flex-direction: column; }

.weekoverzicht-rij {
  display: flex;
  align-items: baseline;
  gap: 18px;
  padding: 10px 0;
  border-bottom: 1px solid var(--rand);
}
.weekoverzicht-rij:last-child { border-bottom: none; }

.weekoverzicht-dag {
  flex: 0 0 92px;
  font-weight: 600;
  font-size: 0.9rem;
}

.weekoverzicht-tijdvakken { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }

.tijdvak-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--groen-50);
  border: 1px solid var(--rand);
  border-radius: 999px;
  padding: 3px 6px 3px 12px;
  font-size: 0.85rem;
}
.tijdvak-chip--uit { background: transparent; }

.tijdvak-chip-tijd { white-space: nowrap; }

.tijdvak-chip form { margin: 0; }

.tijdvak-chip-actie,
.actie-ghost {
  display: inline-block;
  background: none;
  border: none;
  padding: 3px 8px;
  border-radius: 999px;
  font-size: 0.78rem;
  color: var(--tekst-licht);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
.tijdvak-chip-actie:hover,
.actie-ghost:hover { background: var(--groen-100); color: var(--groen-800); }
.tijdvak-chip-actie--verwijderen:hover,
.actie-ghost--verwijderen:hover { background: var(--rood-100); color: var(--rood-700); }

.acties-rij--compact { gap: 2px; }
.acties-rij form { margin: 0; }

table.data-table--compact th,
table.data-table--compact td { padding: 9px 16px; }

/* Facturatie-overzicht: klant/object-namen zijn vaak lang en duwden rijen
   anders over meerdere regels, waardoor de tabel niet meer op één pagina
   past. Klant/datum/betaalmethode/status/actie blijven op één regel; alleen
   de objectkolom mag breed genoeg zijn om normaal te lopen en knipt anders af. */
table.data-table--facturen th,
table.data-table--facturen td { white-space: nowrap; }

table.data-table--facturen th:nth-child(2),
table.data-table--facturen td:nth-child(2) { white-space: normal; }

/* Alleen op desktop afknippen: onder 640px is dit een kaartenstapel en is er
   ruimte zat voor de volledige naam. Het type staat op één regel, het
   merk/model mag twee regels gebruiken — daarna knipt het af, de volledige
   naam staat in de tooltip en in de detailmodal. */
@media (min-width: 641px) {
  table.data-table--facturen th:nth-child(2),
  table.data-table--facturen td:nth-child(2) { max-width: 190px; }

  table.data-table--facturen .object-type-naam {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  table.data-table--facturen .object-type-merk {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

table.data-table--facturen .btn.btn-klein {
  padding: 6px 10px;
  font-size: 0.8rem;
}

/* "Contante factuur maken" is als één regel breder dan de actiekolom mag zijn;
   daardoor liep de tabel buiten het scherm en viel de knop half weg. Smallere
   celpadding plus een knop die over twee regels mag lopen houdt alles binnen
   de wrapper. Alleen op desktop; op mobiel is dit een kaartenstapel. */
@media (min-width: 641px) {
  table.data-table--facturen th,
  table.data-table--facturen td { padding: 9px 8px; }

  table.data-table--facturen td:last-child .btn {
    white-space: normal;
    max-width: 130px;
    text-align: center;
    line-height: 1.25;
  }
}

/* Klantnaam mag over twee regels lopen i.p.v. de kolom breed te duwen —
   compacter dan één lange regel, en niets van de naam gaat verloren. */
table.data-table--facturen th:first-child,
table.data-table--facturen td:first-child {
  max-width: 110px;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Locatie-overzicht: per locatie staan er tientallen rijen onder elkaar, dus de
   winst zit in hoogte én in een tabel die binnen zijn kader blijft. Zonder vaste
   kolombreedtes duwt de nowrap op .object-type-cel (zie boven) de objectkolom
   zo breed dat de tabel buiten de wrapper loopt en de actiekolom wegvalt.
   Alleen op desktop: onder 640px is dit een kaartenstapel, geen tabel. */
@media (min-width: 641px) {
  table.tabel-locaties {
    table-layout: fixed;
    width: 100%;
  }

  table.tabel-locaties th,
  table.tabel-locaties td {
    padding: 7px 12px;
    vertical-align: middle;
  }

  table.tabel-locaties th:nth-child(1),
  table.tabel-locaties td:nth-child(1) { width: 23%; }
  table.tabel-locaties th:nth-child(2),
  table.tabel-locaties td:nth-child(2) { width: 38%; }
  table.tabel-locaties th:nth-child(3),
  table.tabel-locaties td:nth-child(3) { width: 18%; }
  table.tabel-locaties th:nth-child(4),
  table.tabel-locaties td:nth-child(4) { width: 21%; }

  /* De nowrap uit .object-type-cel moet hier terug naar normaal, anders kan de
     naam niet afbreken en heeft de vaste kolombreedte geen effect. */
  table.tabel-locaties .object-type-cel {
    white-space: normal;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
  }

  /* Type staat op regel 1, merk/model op regel 2; het merk mag over twee
     regels lopen en knipt daarna af — de volledige naam staat in de modal. */
  table.tabel-locaties .object-type-naam {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  table.tabel-locaties .object-type-merk {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

  /* Het icoon is 2:1 en staat optisch op de eerste tekstregel. */
  table.tabel-locaties .object-type-icoon { margin-top: 3px; }

  table.tabel-locaties .object-detail-knop {
    display: block;
    width: 100%;
    min-width: 0;
  }

  /* Idem voor de klantnaam: één dubbele achternaam rekt anders de hele rij op.
     De volledige naam staat in title=. */
  table.tabel-locaties td:nth-child(1) > a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.25;
  }

  /* De badge mag afbreken i.p.v. de kolom op te rekken. */
  table.tabel-locaties .stroom-toggle-knop {
    white-space: normal;
    text-align: center;
  }
}

/* Inkoopfacturen: leveranciersnamen en de factuurnummers van de leverancier zijn
   vrije tekst en soms erg lang. Een factuurnummer is bovendien één woord zonder
   spaties, dus zonder overflow-wrap breekt het nergens af: in de tabel duwt het de
   actiekolom buiten beeld, in de kaartweergave loopt het de kaart uit.
   `anywhere` en niet `break-word`: een nummer als "888888888888888888" bevat geen
   enkel natuurlijk afbreekpunt, en alleen `anywhere` mag daar middenin afbreken.
   Bewust buiten de mediaquery — dit geldt in beide weergaven. */
table.data-table--inkoop td:nth-child(1),
table.data-table--inkoop td:nth-child(2) { overflow-wrap: anywhere; }

/* De rest is puur tabelindeling en geldt alleen op desktop: onder 640px is dit
   een kaartenstapel zonder kolommen. */
@media (min-width: 641px) {
  table.data-table--inkoop {
    table-layout: fixed;
    width: 100%;
    /* De vaste kolombreedtes hieronder tellen op tot ~470px; zonder ondergrens
       houdt de leverancierskolom bij een smal venster nog maar een paar pixels
       over. Onder deze breedte laat .tabel-wrapper de tabel liever horizontaal
       scrollen dan de eerste kolom plat te drukken. */
    min-width: 720px;
  }

  table.data-table--inkoop th,
  table.data-table--inkoop td {
    padding: 9px 10px;
    vertical-align: top;
  }

  table.data-table--inkoop th:nth-child(1),
  table.data-table--inkoop td:nth-child(1) { width: auto; }
  table.data-table--inkoop th:nth-child(2),
  table.data-table--inkoop td:nth-child(2) { width: 15%; }
  /* 130px is de gemeten minimumbreedte voor de kop "Factuurdatum" inclusief
     celpadding; smaller en de kop raakt die van de kolom ernaast. */
  table.data-table--inkoop th:nth-child(3),
  table.data-table--inkoop td:nth-child(3) { width: 130px; }
  table.data-table--inkoop th:nth-child(4),
  table.data-table--inkoop td:nth-child(4) { width: 110px; }
  table.data-table--inkoop th:nth-child(5),
  table.data-table--inkoop td:nth-child(5) { width: 85px; }
  table.data-table--inkoop th:nth-child(6),
  table.data-table--inkoop td:nth-child(6) { width: 145px; }

  /* De drie knoppen passen niet naast elkaar in de actiekolom; ze vullen daarom de
     kolombreedte en stapelen onder elkaar in plaats van de kolom op te rekken.
     De formulieren eromheen moeten mee-blokken, anders blijft de knop erin op
     zijn eigen breedte staan.
     Bewust met `>`: de betaald-popup (_betaald_knop.html) staat óók in deze cel en
     die knoppen horen naast elkaar te blijven staan, niet over de volle breedte. */
  table.data-table--inkoop td:nth-child(6) { white-space: normal; }

  table.data-table--inkoop td:nth-child(6) > form { display: block; }

  table.data-table--inkoop td:nth-child(6) > .btn,
  table.data-table--inkoop td:nth-child(6) > form > .btn {
    display: block;
    width: 100%;
    margin: 0 0 4px 0;
    text-align: center;
    padding: 6px 10px;
    font-size: 0.8rem;
  }

  table.data-table--inkoop td:nth-child(6) > form:last-child > .btn { margin-bottom: 0; }
}

/* --------------------------------------------------------------------------
   Tabellen op mobiel
   --------------------------------------------------------------------------
   Een overzichtstabel met 4+ kolommen past niet op een telefoon; horizontaal
   scrollen verstopt precies de actiekolom die je nodig hebt. Twee behandelingen,
   allebei alleen actief onder 640px:

   .data-table--kaarten  bouwt de tabel om tot een stapel kaartjes: één kaartje
                         per rij, met de kolomkop als label voor de waarde.
   .data-table--matrix   houdt de tabel intact voor overzichten waar juist de
                         vergelijking tussen rijen de functie is (tarieven), en
                         plakt de eerste kolom vast zodat je weet wat je leest.

   De labels staan niet in de templates maar worden door
   static/js/tabel-mobiel.js uit de <th>-teksten gekopieerd naar data-label. Dat
   script zet ook .kol-actie op de laatste kolom als die "Actie(s)" heet of geen
   kop heeft, en .rij-vol op een rij die uit één cel bestaat (een uitklaprij of
   een colspan-melding). Een tabel meelaten doen kost dus alleen de klasse.

   Handmatig te zetten in een template:
     .kol-actie      knoppen of een select — volle breedte, onderaan de kaart
     .kol-secundair  minder belangrijke kolom — helemaal verbergen op mobiel
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
  table.data-table--kaarten,
  table.data-table--kaarten tbody,
  table.data-table--kaarten tfoot,
  table.data-table--kaarten tr,
  table.data-table--kaarten td { display: block; }

  table.data-table--kaarten thead { display: none; }

  /* display: block hierboven overrulet het display: none dat [hidden] uit de
     browserstijl krijgt. De filters en paginering (static/js/overzicht-filter.js
     en de filters in de templates) verbergen rijen juist via .hidden, dus dat
     moet expliciet terug. */
  table.data-table--kaarten tr[hidden],
  table.data-table--kaarten tbody[hidden] { display: none; }

  /* De tabel zelf is niet langer het kader — de losse rijen zijn dat. */
  table.data-table--kaarten {
    width: auto;
    min-width: 0;
    margin: 12px;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }

  table.data-table--kaarten tr {
    background: var(--kaart);
    border: 1px solid var(--rand);
    border-radius: var(--radius);
    padding: 12px 14px;
    margin-bottom: 10px;
  }
  table.data-table--kaarten tr:last-child { margin-bottom: 0; }
  /* Hover-arcering hoort bij een rij, niet bij een kaart (en doet niets op touch). */
  table.data-table--kaarten tbody tr:hover { background: var(--kaart); }

  /* Label links, waarde rechts. Absoluut gepositioneerd i.p.v. flex of grid, zodat
     een cel met meerdere elementen (een knop naast een formulier) blijft doorlopen. */
  table.data-table--kaarten td {
    position: relative;
    padding: 5px 0 5px 38%;
    border-bottom: none;
    font-size: 0.9rem;
    min-height: 1.5em;
    text-align: left;
  }

  table.data-table--kaarten td::before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    top: 6px;
    width: 35%;
    color: var(--tekst-licht);
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1.4;
  }

  /* Eerste kolom = kop van de kaart: geen label, maar een titel met scheidingslijn. */
  table.data-table--kaarten tbody tr > td:first-child {
    padding: 0 0 9px;
    margin-bottom: 7px;
    border-bottom: 1px solid var(--rand);
    font-size: 0.98rem;
    font-weight: 600;
  }
  table.data-table--kaarten tbody tr > td:first-child::before { display: none; }

  /* Kolom zonder koptekst, en cellen in tfoot (die het script overslaat):
     geen lege labelkolom reserveren. */
  table.data-table--kaarten td[data-label=""],
  table.data-table--kaarten td:not([data-label]) { padding-left: 0; }
  table.data-table--kaarten td[data-label=""]::before,
  table.data-table--kaarten td:not([data-label])::before { display: none; }

  /* Rij van één cel: een uitklappaneel of een colspan-melding. Die hoort geen
     kaartomlijsting te krijgen, want hij brengt zijn eigen opmaak mee. */
  table.data-table--kaarten tr.rij-vol {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
  }
  table.data-table--kaarten tr.rij-vol > td,
  table.data-table--kaarten tr.rij-vol > td:first-child {
    padding: 0;
    margin: 0;
    border-bottom: none;
    font-weight: 400;
    font-size: 0.9rem;
  }

  /* De actiekolom staat onderaan de kaart en vult de volle breedte. De knoppen
     komen onder elkaar: naast elkaar passen ze niet op 375px, en de templates
     zetten er op desktop white-space: nowrap op via een inline stijl — die is
     alleen met !important te overrulen. */
  table.data-table--kaarten td.kol-actie {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    white-space: normal !important;
    padding: 10px 0 0;
    margin-top: 8px;
    border-top: 1px solid var(--rand);
  }
  table.data-table--kaarten td.kol-actie::before { display: none; }
  table.data-table--kaarten td.kol-actie form { margin: 0; }
  table.data-table--kaarten td.kol-actie select,
  table.data-table--kaarten td.kol-actie .btn { width: 100%; }

  table.data-table--kaarten td.kol-secundair,
  table.data-table--kaarten th.kol-secundair { display: none; }

  /* Totaalregel onderaan (factuurregels): geen kaart, maar een afsluitende regel. */
  table.data-table--kaarten tfoot tr {
    background: transparent;
    border: none;
    border-top: 2px solid var(--tekst);
    border-radius: 0;
    padding: 10px 14px 0;
  }

  /* Matrix: de tabel blijft een tabel en scrollt, maar de eerste kolom blijft
     staan zodat je bij het scrollen ziet bij welke rij een waarde hoort. */
  table.data-table--matrix th,
  table.data-table--matrix td { padding: 8px 10px; font-size: 0.85rem; }

  /* Twee dingen blokkeren position: sticky op een cel:
     - Chrome doet het niet bij border-collapse: collapse (separate + spacing 0
       ziet er hetzelfde uit);
     - de overflow: hidden die .data-table gebruikt voor zijn afgeronde hoeken
       maakt van de tabel zelf een scrollcontainer, waaraan de cel dan vastplakt
       in plaats van aan .tabel-wrapper. Vandaar ook border-radius: 0. */
  table.data-table--matrix {
    border-collapse: separate;
    border-spacing: 0;
    overflow: visible;
    border-radius: 0;
  }

  table.data-table--matrix th:first-child,
  table.data-table--matrix td:first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background: var(--kaart);
    box-shadow: 6px 0 8px -6px rgba(0, 0, 0, 0.18);
  }
  table.data-table--matrix thead th:first-child {
    background: #fbfbf9;
    z-index: 2;
  }
}


.wijzigingen-lijst {
  margin: 0;
  padding-left: 18px;
  font-size: 0.9rem;
}
.wijzigingen-lijst li { margin: 2px 0; }
.wijziging-detail-knop {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  display: block;
  width: 100%;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rand);
}
.wijziging-detail-knop:hover { text-decoration-color: currentColor; }

/* Standaard linkstijl voor het klant- en beheerportaal: een gedempte
   onderstreping die pas volle kleur krijgt bij hover, in plaats van de vaste
   browserstandaard-onderstreping. Zet deze klasse op elke <a> in
   templates/portal en templates/beheer die niet al een eigen stijl heeft
   (knoppen, navigatie, tabbladen etc.). */
.portaal-link {
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rand);
}
.portaal-link:hover { text-decoration-color: currentColor; }

/* Afwijzen in het beheerportaal: de reden (verplicht, gaat per e-mail naar de klant)
   wordt ingevuld in een popup, zodat de actiekolom net zo smal blijft als met een
   gewone knop. Zie templates/beheer/_afwijzen.html en initAfwijsPopups in beheer-live.js. */
dialog.afwijs-dialoog {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 24px;
  max-width: 420px;
  width: 100%;
}
dialog.afwijs-dialoog::backdrop { background: rgba(0, 0, 0, 0.4); }
dialog.afwijs-dialoog textarea {
  display: block;
  width: 100%;
  min-height: 90px;
  font-size: 0.9rem;
  box-sizing: border-box;
}
/* Ook hergebruikt door _klant_goedkeuren.html (klantnummerveld) en
   _object_goedkeuren.html (startdatum/betaalmethode) bij het goedkeuren van
   respectievelijk een nieuwe klantaanvraag en een objectaanvraag. */
dialog.afwijs-dialoog input[type="text"],
dialog.afwijs-dialoog input[type="date"],
dialog.afwijs-dialoog select {
  display: block;
  width: 100%;
  font-size: 0.9rem;
  box-sizing: border-box;
  margin-top: 4px;
}
dialog.afwijs-dialoog label { font-weight: 600; font-size: 0.9rem; }

/* FAQ-pagina klantportaal: <details>/<summary> zonder het standaard driehoekje. */
.faq-item > summary { list-style: none; }
.faq-item > summary::-webkit-details-marker { display: none; }

/* Objectdetail-popups in het beheerportaal (klik op kenteken/type in een overzicht
   opent een <dialog> met alle gegevens). Zie o.a. object_locaties.html, verzoeken.html
   en objectaanvragen.html. */
dialog.object-detail-dialoog {
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 28px;
  max-width: 460px;
  width: 100%;
}
.object-detail-knop {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  color: var(--groen-600);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rand);
  cursor: pointer;
  text-align: left;
}
.object-detail-knop:hover { text-decoration-color: currentColor; }
.object-detail-knop--wijzigingen {
  display: block;
  width: 100%;
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: var(--rand);
}
.object-detail-knop--wijzigingen:hover {
  text-decoration-color: currentColor;
}
.object-notitie-knop {
  position: relative;
  line-height: 1;
}
.object-notitie-knop--gevuld::after {
  content: "";
  position: absolute;
  top: 1px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--groen-600);
  border: 1px solid var(--wit, #fff);
}
.object-detail-lijst {
  margin: 0;
  display: grid;
  gap: 10px;
}
.object-detail-lijst > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rand, #e5e7eb);
  font-size: 0.9rem;
}
.object-detail-lijst dt { color: var(--tekst-licht); }
.object-detail-lijst dd { margin: 0; text-align: right; font-weight: 500; }

.badge {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

.badge-actief, .badge-goedgekeurd, .badge-betaald, .badge-afgerond, .badge-ingepland, .badge-opgelost { background: #dff3e6; color: #1f7a44; }
.badge-zelfstandig { background: var(--zand-500); color: #fff; }
.badge-open, .badge-nieuw, .badge-aangevraagd, .badge-in_behandeling { background: var(--zand-100); color: #a3660b; }
.badge-opgezegd, .badge-afgewezen, .badge-geannuleerd, .badge-geweigerd { background: var(--rood-100); color: var(--rood-700); }
.badge-vervallen { background: #f8d6d6; color: #8f1d1d; }
.badge-gearchiveerd { background: #e5e7eb; color: #4b5563; }
.badge-niet-verstuurd { background: #fef3c7; color: #92400e; }

/* Statusbadges chatgesprekken (klant- en beheerportaal) */
.badge-chat-afgerond { background: #fef9c3; color: #854d0e; }
.badge-chat-open { background: #dff3e6; color: #1f7a44; }
/* Soort-badges voor gecombineerde objecthistorie */
.badge-aanvraag  { background: #dbeafe; color: #1d4ed8; }
.badge-opzegging { background: #fee2e2; color: #b91c1c; }
.badge-wijziging { background: #ede9fe; color: #6d28d9; }

/* Categorie-badges activiteitslog */
.badge-categorie { font-size: 0.75rem; padding: 2px 9px; }
.badge-categorie--login,
.badge-categorie--logout        { background: #e0f2fe; color: #0369a1; }
.badge-categorie--klantaanvraag,
.badge-categorie--objectaanvraag { background: #dbeafe; color: #1d4ed8; }
.badge-categorie--verzoek       { background: #ecfdf5; color: #065f46; }
.badge-categorie--opzegging     { background: #fee2e2; color: #b91c1c; }
.badge-categorie--gegevenswijziging,
.badge-categorie--objectwijziging { background: #ede9fe; color: #6d28d9; }
.badge-categorie--factuur       { background: #fef3c7; color: #92400e; }
.badge-categorie--klantgegevens,
.badge-categorie--object        { background: #f0fdf4; color: #166534; }
.badge-categorie--openingstijden,
.badge-categorie--tarieven      { background: #fdf4ff; color: #7e22ce; }
.badge-categorie--mededeling    { background: #fff7ed; color: #c2410c; }
.badge-categorie--chat          { background: #f0f9ff; color: #0c4a6e; }
.badge-categorie--portaal       { background: #f8fafc; color: #475569; }
.badge-categorie--systeem       { background: #f1f5f9; color: #334155; }

/* Visuele onderscheiding voor nieuwe mededelingen */
.card-nieuw {
  border-color: var(--zand-500);
  border-width: 2px 1px 1px 1px;
  background: linear-gradient(135deg, var(--kaart) 0%, rgba(250, 238, 221, 0.3) 100%);
}

/* Tabelrijen met nieuwe mededelingen */
table.data-table tbody tr.rij-nieuw {
  background: rgba(250, 238, 221, 0.4);
}

table.data-table tbody tr.rij-nieuw:hover {
  background: rgba(250, 238, 221, 0.6);
}

/* --------------------------------------------------------------------------
   Formulieren
   -------------------------------------------------------------------------- */

form p { margin: 0 0 18px; }

form label {
  display: block;
  font-weight: 600;
  margin-bottom: 5px;
  font-size: 0.92rem;
  color: var(--groen-800);
}

input, select, textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1.5px solid var(--rand);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--tekst);
  transition: border-color 0.15s, box-shadow 0.15s;
}

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--groen-600);
  box-shadow: 0 0 0 3px rgba(37, 106, 78, 0.15);
}

textarea { min-height: 110px; resize: vertical; }

/* Aanvinkvakjes mogen niet de volle breedte krijgen zoals de andere invoervelden. */
input[type="checkbox"], input[type="radio"] { width: auto; margin: 0; }

/* Keuze tussen 'met de stallinghouder aanwezig' en 'zelfstandig', als twee even zichtbare
   radio-opties — bewust geen los akkoordvinkje, dat las als een verplichte voorwaarde.
   Django's RadioSelect rendert elke optie als een eigen <div><label><input>...</label></div>. */
.keuze-veld .keuze-titel { display: block; font-weight: 600; margin-bottom: 6px; }
.keuze-veld > div { display: grid; gap: 6px; margin-bottom: 6px; }
.keuze-veld > div > div { display: flex; align-items: flex-start; gap: 8px; }
.keuze-veld label { display: inline; margin: 0; font-weight: 400; }
.keuze-veld input[type="radio"] { margin-top: 3px; }
.keuze-veld .helptext { display: block; }

/* Extra witruimte boven het gewenste-tijd-veld, ter afscheiding van de keuze erboven. */
.veld-extra-ruimte-boven { margin-top: 24px; }

/* Kenteken: altijd in hoofdletters tonen, ook als de JS-opmaak niet geladen is. */
input.kenteken-veld { text-transform: uppercase; letter-spacing: 0.06em; }

/* Vergrendeld veld (automatisch ingevuld, readonly). */
.veld-readonly {
  background: var(--groen-50) !important;
  color: var(--tekst-licht) !important;
  cursor: default;
  border-color: var(--rand) !important;
}
.veld-readonly:focus { box-shadow: none !important; }

/* Handmatige adresinvoer — tekstknop */
.adres-handmatig-link {
  background: none;
  border: none;
  padding: 0;
  font-family: inherit;
  font-size: .82rem;
  color: var(--groen-600);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.adres-handmatig-link:hover { color: var(--groen-700); }

/* Melding onder een veld, bijv. het adres dat bij postcode en huisnummer is gevonden. */
.veld-hint {
  margin: 6px 0 0;
  font-size: 0.85rem;
  color: var(--groen-800);
}

.veld-hint.veld-hint-fout    { color: var(--rood-700); }
.veld-hint.veld-hint-gevonden { color: var(--groen-600); }

/* Toon/verberg-knop op wachtwoordvelden (wachtwoord_controle.js). */
.wachtwoord-veld-wrapper { position: relative; }
.wachtwoord-veld-wrapper input { padding-right: 76px; }
.wachtwoord-toon-knop {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 6px 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--groen-600);
  cursor: pointer;
}
.wachtwoord-toon-knop:hover { color: var(--groen-700); text-decoration: underline; }

/* Live overzicht van de wachtwoordeisen onder het nieuwe-wachtwoordveld
   (wachtwoord_controle.js). */
.wachtwoord-eisen {
  list-style: none;
  margin: -8px 0 18px;
  padding: 12px 14px;
  border-radius: 8px;
  background: var(--groen-50);
  font-size: 0.85rem;
}
.wachtwoord-eisen li {
  position: relative;
  padding-left: 24px;
  margin: 4px 0;
  color: var(--tekst-licht);
}
.wachtwoord-eisen li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1.5px solid var(--rand);
  background: #fff;
}
.wachtwoord-eisen li.wachtwoord-eis-ok { color: var(--groen-700); }
.wachtwoord-eisen li.wachtwoord-eis-ok::before { border-color: var(--groen-600); background: var(--groen-600); }
.wachtwoord-eisen li.wachtwoord-eis-ok::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 6px;
  width: 6px;
  height: 3px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* Melding met de openingstijden die bij de gekozen datum horen. */
.openingstijden-hint {
  margin: -8px 0 18px;
  padding: 10px 13px;
  border-radius: 8px;
  background: var(--groen-50);
  color: var(--groen-800);
  font-size: 0.9rem;
}

.openingstijden-hint.openingstijden-hint-dicht { background: #fdf1e7; color: var(--rood-700); }

.helptext { display: block; font-size: 0.82rem; color: var(--tekst-licht); margin-top: 4px; }

/* Gestructureerde formuliersecties (aanvraagformulier) */
.formulier-sectie { padding: 20px 0; }
.formulier-sectie:first-child { padding-top: 0; }
.formulier-sectie + .formulier-sectie { border-top: 1px solid var(--rand); }
.formulier-sectie-kop {
  margin: 0 0 16px;
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--groen-600);
}
.veld-groep { margin-bottom: 18px; }
.veld-groep:last-child { margin-bottom: 0; }
.veld-rij { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 18px; }
.veld-rij > .veld-groep { flex: 1 1 160px; margin-bottom: 0; }
.veld-rij > .veld-smal { flex: 0 1 130px; min-width: 110px; }
.veld-rij--afmetingen { flex-wrap: nowrap; }
.veld-rij--afmetingen > .veld-groep { flex-basis: 0; min-width: 70px; }
.afmeting-hint { margin-top: -4px; margin-bottom: 18px; }

@media (max-width: 440px) {
  .veld-rij--afmetingen { flex-wrap: wrap; }
  .veld-rij--afmetingen > .veld-groep { flex-basis: 100px; }
}

form ul.errorlist {
  list-style: none;
  margin: 0 0 6px;
  padding: 0;
  color: var(--rood-700);
  font-size: 0.88rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Meerstaps aanvraagformulier
   -------------------------------------------------------------------------- */

/* Stapper */
.stapper {
  display: flex;
  align-items: flex-start;
  margin: 0 0 24px;
}

.stap-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex: 1;
  position: relative;
}

.stap-item:not(:last-child)::after {
  content: '';
  position: absolute;
  top: 15px;
  left: calc(50% + 18px);
  right: calc(-50% + 18px);
  height: 2px;
  background: var(--rand);
  transition: background .3s;
}

.stap-item.klaar:not(:last-child)::after { background: var(--groen-600); }

.stap-nr {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .8rem;
  font-weight: 700;
  border: 2px solid var(--rand);
  background: var(--kaart);
  color: var(--tekst-licht);
  position: relative;
  z-index: 1;
  transition: border-color .2s, background .2s, color .2s;
  flex-shrink: 0;
}

.stap-item.actief .stap-nr { border-color: var(--groen-600); background: var(--groen-600); color: #fff; }
.stap-item.klaar .stap-nr  { border-color: var(--groen-600); background: var(--groen-600); color: #fff; }

.stap-naam {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--tekst-licht);
  text-align: center;
  line-height: 1.3;
}

.stap-item.actief .stap-naam { color: var(--groen-700); }
.stap-item.klaar  .stap-naam { color: var(--groen-600); }

/* Stap-panels */
.stap-paneel { display: none; }
.stap-paneel.actief { display: block; }

/* Type-keuzeknoppen */
.type-knoppen {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 0;
}

@media (max-width: 440px) {
  .type-knoppen { grid-template-columns: repeat(2, 1fr); }
}

.type-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 12px 6px 10px;
  border: 1.5px solid var(--rand);
  border-radius: var(--radius);
  cursor: pointer;
  font-size: .78rem;
  font-weight: 600;
  color: var(--tekst-licht);
  background: var(--kaart);
  transition: border-color .15s, color .15s, background .15s;
  user-select: none;
  text-align: center;
  line-height: 1.2;
  font-family: inherit;
}

.type-btn:hover  { border-color: var(--groen-600); color: var(--groen-700); }
.type-btn.gekozen { border-color: var(--groen-600); background: var(--groen-50); color: var(--groen-800); }
.type-btn img { width: 44px; height: 22px; object-fit: contain; }

.type-btn { position: relative; }

.type-btn:disabled {
  cursor: not-allowed;
  opacity: .5;
  background: var(--achtergrond);
}
.type-btn:disabled:hover { border-color: var(--rand); color: var(--tekst-licht); }
.type-btn:disabled img { filter: grayscale(100%); }
.type-btn:disabled::before {
  content: "VOL";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 140%;
  transform: translate(-50%, -50%) rotate(-30deg);
  font-size: 1.4rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-align: center;
  color: var(--tekst);
  opacity: .8;
  pointer-events: none;
  white-space: nowrap;
}

/* Optie-kaarten (checkboxes) */
.optie-kaart {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--rand);
  border-radius: var(--radius);
  cursor: pointer;
  margin-bottom: 10px;
  transition: border-color .15s, background .15s;
  background: var(--kaart);
}

.optie-kaart:hover { border-color: var(--groen-600); }
.optie-kaart:has(input:checked) { border-color: var(--groen-600); background: var(--groen-50); }
.optie-kaart input[type="checkbox"] { width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--groen-600); }
.optie-kaart-info { display: flex; flex-direction: column; gap: 3px; }
.optie-kaart-info strong { font-size: .9rem; font-weight: 600; color: var(--groen-800); }
.optie-kaart-info span  { font-size: .82rem; color: var(--tekst-licht); line-height: 1.4; }

/* Navigatie-rij */
.stap-nav { display: flex; justify-content: flex-end; align-items: center; margin-top: 20px; gap: 10px; }

.btn-stap-terug {
  background: transparent;
  color: var(--groen-700);
  border: 1.5px solid var(--rand);
  padding: 10px 18px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: border-color .15s;
}
.btn-stap-terug:hover { border-color: var(--groen-600); }

.btn-stap-verder {
  background: var(--groen-600);
  color: #fff;
  border: none;
  padding: 11px 22px;
  border-radius: 8px;
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s;
}
.btn-stap-verder:hover { background: var(--groen-700); }

/* Samenvatting boven stap 3 */
.stap-samenvatting { display: flex; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.sv-vak { flex: 1 1 150px; background: var(--groen-50); border: 1px solid var(--groen-100); border-radius: var(--radius); padding: 10px 14px; }
.sv-label { font-size: .7rem; text-transform: uppercase; letter-spacing: .07em; font-weight: 700; color: var(--tekst-licht); margin-bottom: 3px; }
.sv-waarde { font-size: .9rem; font-weight: 600; color: var(--groen-800); }

/* --------------------------------------------------------------------------
   Meldingen
   -------------------------------------------------------------------------- */

.messages { list-style: none; padding: 0; margin: 0 0 24px; }

.messages li {
  padding: 13px 18px;
  border-radius: var(--radius);
  margin-bottom: 8px;
  background: #dff3e6;
  color: #1f7a44;
  border: 1px solid #b9e2c8;
  font-weight: 500;
}

.messages li.error { background: var(--rood-100); color: var(--rood-700); border-color: #eec3c3; }

/* --------------------------------------------------------------------------
   Portaal — zijbalk-indeling
   -------------------------------------------------------------------------- */

/* Twee-koloms wrapper: sidebar links, inhoud rechts */
.portaal-layout {
  display: flex;
  gap: 28px;
  align-items: flex-start;
}

.portaal-sidebar {
  width: 220px;
  flex-shrink: 0;
  position: sticky;
  top: 88px;
  max-height: calc(100vh - 108px);
  overflow-y: auto;
}

.portaal-inhoud {
  flex: 1;
  min-width: 0;
}

/* Verticale navigatie in de zijbalk */
.portal-nav {
  display: block;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 10px 8px;
  box-shadow: var(--schaduw);
}

.portal-nav a {
  display: block;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.91rem;
  color: var(--tekst-licht);
  padding: 8px 14px;
  border-radius: 7px;
  margin-bottom: 2px;
  transition: background 0.15s, color 0.15s;
}

.portal-nav a:hover { background: var(--groen-50); color: var(--groen-700); }
.portal-nav a.actief { background: var(--groen-700); color: #fff; }

/* .portal-nav a hierboven is specifieker dan .btn-rood (klasse+tag vs. klasse) en zou de
   witte tekst anders overschrijven met de standaard menukleur — vandaar deze override. */
.portal-nav a.btn-rood,
.portal-nav a.btn-rood:hover { color: #fff; }

/* Sectiekop boven een groep links: tegelijk de inklap-knop van de groep */
.portal-nav-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  width: 100%;
  background: none;
  border: none;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--tekst-licht);
  padding: 16px 14px 4px;
  margin: 0;
  opacity: 0.7;
  cursor: pointer;
  transition: opacity 0.15s;
}
.portal-nav-kop:hover { opacity: 1; }

.portal-nav-chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.15s ease;
}
.portal-nav-kop[aria-expanded="false"] .portal-nav-chevron { transform: rotate(-90deg); }

.portal-nav-groep-inhoud {
  display: block;
  overflow: hidden;
  max-height: 600px;
  /* Bewust géén transition hier: de in-/uitklapstand wordt bij het laden van de
     pagina meteen gecorrigeerd naar de in localStorage onthouden voorkeur (zie
     beheer/base.html en beheer-live.js). Zonder deze regel zou die correctie in
     de live omgeving (trager netwerk dan lokaal) als een zichtbare "flikkerende"
     in-/uitklapanimatie te zien zijn. Pas zodra .portal-nav-klaar gezet is (na
     die correctie) wordt de animatie hieronder weer aangezet, zodat een
     handmatige klik op een groep nog wél soepel animeert. */
}
.portal-nav.portal-nav-klaar .portal-nav-groep-inhoud {
  transition: max-height 0.18s ease;
}
.portal-nav-groep.portal-nav-groep-dicht .portal-nav-groep-inhoud {
  max-height: 0;
}

/* Sub-items, bijv. aanvraag-typen, iets ingesprongen */
.portal-nav a.portal-nav-subitem {
  font-size: 0.86rem;
  font-weight: 500;
  padding-left: 26px;
}

/* Uitloggen-sectie: scheidingslijn boven de knop */
.portal-nav .portal-nav-rechts {
  margin-left: 0;
  margin-top: 6px;
  padding: 10px 6px 2px;
  border-top: 1px solid var(--rand);
}

/* Mobiele menuknop boven de portaalnavigatie: standaard verborgen (alleen ≤ 800px zichtbaar) */
.portaal-menu-toggle-input { display: none; }
.portaal-mobiel-balk { display: none; }

/* Responsive: sidebar wordt een inklapbaar menu op schermen ≤ 800px */
@media (max-width: 800px) {
  /* De rest van de site (topbalk met logo/hoofdmenu) hoeft niet zichtbaar te zijn
     zolang je bent ingelogd in het portaal op mobiel — de portaalnav vervangt hem. */
  body.portaal-mobiel header.site-header { display: none; }

  .portaal-layout {
    flex-direction: column;
    gap: 0;
    /* align-items: flex-start hierboven houdt de sticky sidebar op zijn eigen hoogte,
       maar in een kolom stuurt align-items de breedte aan — dan zou .portaal-inhoud
       naar zijn inhoud krimpen i.p.v. het scherm te vullen. */
    align-items: stretch;
  }
  .portaal-sidebar {
    width: 100%;
    position: static;
    max-height: none;
    overflow-y: visible;
    margin-bottom: 20px;
  }

  .portaal-mobiel-balk {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--groen-800);
    color: #fff;
    padding: 12px 16px;
    border-radius: var(--radius);
  }
  .portaal-menu-toggle-input:checked ~ .portaal-mobiel-balk {
    border-radius: var(--radius) var(--radius) 0 0;
  }
  .portaal-mobiel-titel { font-weight: 700; font-size: 1.05rem; }

  .portaal-menu-toggle-knop {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 30px;
    height: 30px;
    padding: 6px;
    cursor: pointer;
  }
  .portaal-menu-toggle-knop span {
    display: block;
    width: 100%;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.2s ease, opacity 0.15s ease;
  }
  .portaal-menu-toggle-input:checked ~ .portaal-mobiel-balk .portaal-menu-toggle-knop span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }
  .portaal-menu-toggle-input:checked ~ .portaal-mobiel-balk .portaal-menu-toggle-knop span:nth-child(2) {
    opacity: 0;
  }
  .portaal-menu-toggle-input:checked ~ .portaal-mobiel-balk .portaal-menu-toggle-knop span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  /* Navigatie zelf: uitgeklapt/verborgen op basis van de menuknop */
  .portal-nav {
    display: none;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    padding: 6px;
    border-top: none;
    border-radius: 0 0 var(--radius) var(--radius);
  }
  .portaal-menu-toggle-input:checked ~ .portal-nav {
    display: flex;
  }
  .portal-nav a {
    display: block;
    width: 100%;
    margin-bottom: 0;
    padding: 10px 14px;
    font-size: 0.92rem;
  }
  .portal-nav a.portal-nav-subitem { padding-left: 22px; }
  .portal-nav-kop { display: flex; }
  .portal-nav .portal-nav-rechts {
    margin-top: 6px;
    padding: 10px 6px 2px;
    border-top: 1px solid var(--rand);
    margin-left: 0;
    width: 100%;
  }
}

.filter-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.filter-tabs a {
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--tekst-licht);
  background: var(--kaart);
  border: 1px solid var(--rand);
  padding: 6px 14px;
  border-radius: 999px;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.filter-tabs a:hover { background: var(--groen-50); color: var(--groen-700); }
.filter-tabs a.actief { background: var(--groen-700); border-color: var(--groen-700); color: #fff; }

/* Stipje op een filterknop: er zit iets ongelezens onder dit filter. */
.filter-stip {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--zand-500);
  vertical-align: middle;
}
.filter-tabs a.actief .filter-stip { background: #fff; }

.paginering {
  display: flex;
  gap: 16px;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--rand);
  font-size: 0.9rem;
}

.paginering a { font-weight: 600; text-decoration: none; color: var(--groen-700); }
.paginering a:hover { text-decoration: underline; }

.stat-tegels {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  margin-bottom: 24px;
}

.stat-tegel {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--schaduw);
}

.stat-tegel .stat-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tekst-licht);
  margin-bottom: 4px;
}

.stat-tegel .stat-waarde { font-size: 1.7rem; font-weight: 700; color: var(--groen-800); }
.stat-tegel .stat-waarde.stat-alarm { color: var(--rood-700); }

.stat-tegel--klikbaar { cursor: pointer; }
.stat-tegel--klikbaar:hover { border-color: var(--groen-700); }
.stat-tegel--klikbaar:focus-visible { outline: 2px solid var(--groen-700); outline-offset: 2px; }

/* Inklapbare secties op het beheerdashboard (bezetting, financieel, aanvragen, ...). */
.dashboard-sectie {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  margin-bottom: 20px;
  padding: 4px 20px 20px;
}
.dashboard-sectie > summary {
  list-style: none;
  cursor: pointer;
  font-size: 1.1rem;
  font-weight: 700;
  padding: 16px 0;
  color: var(--groen-800);
}
.dashboard-sectie > summary::-webkit-details-marker { display: none; }
.dashboard-sectie > summary::before {
  content: "▸";
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
}
.dashboard-sectie[open] > summary::before { transform: rotate(90deg); }
.dashboard-sectie > summary:hover { color: var(--groen-600); }
.dashboard-sectie .stat-tegels { margin-bottom: 20px; }
.dashboard-sectie .stat-tegels:last-child { margin-bottom: 0; }

.dashboard-tabellen {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* Grid-items zijn standaard min-width: auto, waardoor een brede tabel niet krimpt maar over
   de buurkolom heen loopt. min-width: 0 laat de kolom wel krimpen; overflow-x op de tabel
   zelf zorgt dat een tabel die dan nog te breed is, horizontaal scrolt in plaats van overlapt. */
.dashboard-tabellen > div { min-width: 0; }
.dashboard-tabellen h3 { font-size: 0.95rem; margin: 0 0 8px; color: var(--tekst-licht); }
.dashboard-tabel-wrapper { overflow-x: auto; }
.dashboard-tabel { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.dashboard-tabel td, .dashboard-tabel th {
  padding: 6px 8px;
  border-bottom: 1px solid var(--rand);
  text-align: left;
}
.dashboard-tabel td:last-child, .dashboard-tabel th:last-child { text-align: right; }
.dashboard-tabel--breed th { font-weight: 600; color: var(--tekst-licht); font-size: 0.8rem; }
.dashboard-tabel tr.rij-alarm td { color: var(--rood-700); font-weight: 600; }
.dashboard-tabel--klikbaar tr { cursor: pointer; }
.dashboard-tabel--klikbaar tr:hover td { background: var(--achtergrond-hover, rgba(0, 0, 0, 0.03)); }

/* Bijschrift onder een cijfer: de vergelijking of context die het cijfer betekenis geeft. */
.stat-tegel .stat-bijschrift {
  font-size: 0.78rem;
  color: var(--tekst-licht);
  margin-top: 4px;
  line-height: 1.35;
}
.tekst-alarm { color: var(--rood-700); }
.tekst-goed { color: var(--groen-600); }
.bedrag-negatief { color: var(--rood-700); }
.bedrag-positief { color: var(--groen-700); }

/* Korte uitleg boven een sectie — waarom dit cijfer ertoe doet. */
.sectie-uitleg {
  font-size: 0.86rem;
  color: var(--tekst-licht);
  margin: 0 0 16px;
  max-width: 70ch;
}

/* Blok dat om aandacht vraagt (geldlekken, ontbrekende berekening, gemiste vraag). */
.signaal-blok {
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-left: 4px solid var(--zand-500);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin-bottom: 22px;
}
.signaal-blok details.signaal { margin-bottom: 8px; }
.signaal-blok details.signaal > summary {
  cursor: pointer;
  padding: 8px 0;
  font-size: 0.93rem;
}
.signaal-blok details.signaal > summary:hover { color: var(--groen-600); }

/* Staafgrafiek — puur CSS, geen grafiekbibliotheek. De hoogte van elke staaf is een
   percentage van de hoogste waarde in de reeks (zie de 'aandeel'-filter). */
.staafgrafiek {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 150px;
  margin: 0 0 26px;
  padding-top: 18px;
  overflow-x: auto;
}
.staafgrafiek--breed .staaf-kolom { min-width: 26px; }
.staafgrafiek--week { height: 120px; }
.staaf-kolom {
  flex: 1 1 0;
  min-width: 22px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  position: relative;
}
.staaf {
  width: 100%;
  max-width: 34px;
  background: var(--groen-600);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
  transition: background 0.15s ease;
}
.staaf--accent { background: var(--zand-500); }
/* Twee reeksen naast elkaar in één kolom (verwacht halen vs. brengen per maand). */
.staaf-paar {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 2px;
  width: 100%;
  height: 100%;
}
.staaf-paar .staaf { max-width: 13px; }
.staaf--halen { background: var(--zand-500); }
.staaf--brengen { background: var(--groen-600); }
.staaf-kolom:hover .staaf--halen { background: var(--zand-600); }
.staaf-kolom:hover .staaf--brengen { background: var(--groen-800); }
.staaf--negatief { background: var(--rood-700); opacity: 0.75; }
.staaf-kolom:hover .staaf { background: var(--groen-800); }
.staaf-kolom--nu .staaf { background: var(--zand-500); }
.staaf-waarde {
  font-size: 0.7rem;
  color: var(--tekst-licht);
  margin-bottom: 3px;
  white-space: nowrap;
}
.staaf-label {
  font-size: 0.68rem;
  color: var(--tekst-licht);
  margin-top: 5px;
  text-align: center;
  white-space: nowrap;
  line-height: 1.25;
}

/* Jaarlijn — per kalenderjaar één balk die laat zien wanneer een object in de stalling stond
   (groen) en wanneer de klant het had opgehaald (zand). Dezelfde kleurafspraak als de
   haal/breng-labels in de dagplanning hieronder. De links/breedte van elk stuk komt als
   percentage uit storage.stallingspatroon; hier staat alleen de vormgeving. */
.jaarlijn { margin: 0; }
.jaarlijn-rij {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.jaarlijn-jaar {
  flex: 0 0 42px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--tekst-licht);
  text-align: right;
}
.jaarlijn-balk {
  position: relative;
  flex: 1 1 auto;
  height: 22px;
  border-radius: 4px;
  background: var(--groen-50);
  border: 1px solid var(--rand);
  overflow: hidden;
}
.jaarlijn-balk--schaal {
  height: 16px;
  background: none;
  border: none;
  overflow: visible;
}
.jaarlijn-maand {
  position: absolute;
  top: 0;
  font-size: 0.65rem;
  color: var(--tekst-licht);
  text-align: center;
  line-height: 1;
}
.jaarlijn-raster {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rand);
}
.jaarlijn-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 1px;
}
.jaarlijn-segment--stalling { background: var(--groen-600); }
.jaarlijn-segment--opgehaald { background: var(--zand-500); }
.jaarlijn-vandaag {
  position: absolute;
  top: -2px;
  bottom: -2px;
  width: 2px;
  background: var(--groen-900);
}
.jaarlijn-totaal {
  flex: 0 0 86px;
  font-size: 0.75rem;
  color: var(--tekst-licht);
  white-space: nowrap;
}
.jaarlijn-totaal-stalling { color: var(--groen-600); font-weight: 600; }
.jaarlijn-totaal-opgehaald { color: var(--zand-600); font-weight: 600; }
.jaarlijn-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  align-items: center;
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--tekst-licht);
}
.jaarlijn-vlak {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: -2px;
  margin-right: 4px;
}
.jaarlijn-vlak--leeg { background: var(--groen-50); border: 1px solid var(--rand); }

/* Hoe hard is een voorspelling: ingepland is een afspraak, de rest is een verwachting. */
.zekerheid {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 1px 7px;
  border-radius: 999px;
  vertical-align: 1px;
}
.zekerheid--ingepland { background: var(--groen-600); color: #fff; }
.zekerheid--hoog { background: var(--groen-100); color: var(--groen-800); }
.zekerheid--gemiddeld { background: var(--zand-100); color: var(--zand-600); }
.zekerheid--laag { background: var(--rand); color: var(--tekst-licht); }

/* Winterplanning (beheer/voorspelling.html): de plaatsingsvolgorde per hal.
   De balk werkt net als de jaarlijn hierboven — CSS-percentages, geen grafiekbibliotheek —
   maar loopt van augustus tot augustus, zodat één winter er in één keer op past. */
.plaatsnummer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--groen-100);
  color: var(--groen-800);
  font-weight: 700;
  font-size: 0.9rem;
}
.plaatsnummer--jaarrond { background: var(--groen-600); color: #fff; }
/* Een object dat achterin hoort maar laat binnenkomt: die plek moet bewust open blijven. */
tr.rij-reserveren td:first-child { box-shadow: inset 3px 0 0 var(--zand-500); }
/* Plaatsnummer met de signalen eronder: het eerste wat je ziet, en het enige dat je in de hal
   echt nodig hebt. Daarom links en niet in een kolom die buiten beeld kan vallen. */
.kol-plek { white-space: normal; }
/* De twee datumkolommen mogen niet meer ruimte pakken dan een datum nodig heeft, anders duwen ze
   de balk uit beeld. */
.tabel-voorspelling td, .tabel-voorspelling th {
  vertical-align: top;
  padding-left: 8px;
  padding-right: 8px;
}
.kol-plek .badge {
  display: block;
  margin-top: 4px;
  font-size: 0.68rem;
  padding: 2px 8px;
  text-align: center;
}
/* Kop boven elke band (achterin / midden / vooraan): waar in de hal deze objecten horen. */
tr.bandkop td {
  background: var(--groen-50);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--tekst-licht);
  padding: 5px 12px;
}

.winterbalk {
  position: relative;
  height: 18px;
  min-width: 150px;
  border-radius: 4px;
  background: var(--groen-50);
  border: 1px solid var(--rand);
  overflow: hidden;
}
.winterbalk--schaal {
  height: 14px;
  background: none;
  border: none;
  overflow: visible;
  margin-top: 4px;
  font-weight: 400;
}
.winterbalk-maand {
  position: absolute;
  top: 0;
  font-size: 0.6rem;
  color: var(--tekst-licht);
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}
.winterbalk-raster {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--rand);
}
.winterbalk-segment {
  position: absolute;
  top: 0;
  bottom: 0;
  min-width: 2px;
  border-radius: 3px;
  background: var(--groen-600);
}
.winterbalk-segment--jaarrond { background: var(--groen-800); }
/* Loopt het verblijf buiten het venster door, dan hoort die kant geen nette rand te hebben. */
.winterbalk-segment--door-links { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.winterbalk-segment--door-rechts { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.zekerheid--zeker { background: var(--groen-800); color: #fff; }

.dashboard-tabel tr.rij-eerstvolgend td { font-weight: 600; }
.dashboard-tabel tr.rij-eerstvolgend td .tekst-licht { font-weight: 400; }

/* Dagplanning op het dashboard: wie komt er vandaag/morgen halen of brengen. */
.planning-lijst { list-style: none; margin: 0; padding: 0; }
.planning-regel {
  display: flex;
  gap: 12px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--rand);
  font-size: 0.9rem;
}
.planning-regel:last-child { border-bottom: none; }
.planning-tijd { font-weight: 700; min-width: 46px; }
.planning-type {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 7px;
  border-radius: 999px;
  white-space: nowrap;
}
.planning-type--halen { background: var(--zand-500); color: #fff; }
.planning-type--brengen { background: var(--groen-600); color: #fff; }
.planning-inhoud { display: flex; flex-direction: column; gap: 2px; }
.planning-inhoud .tekst-licht { font-size: 0.82rem; }
.planning-vlag {
  font-size: 0.74rem;
  color: var(--rood-700);
  font-weight: 600;
}
.waarschuwing-regel {
  background: var(--rood-50, #fdecea);
  color: var(--rood-700);
  border-radius: var(--radius);
  padding: 8px 12px;
  font-size: 0.9rem;
  margin: 0 0 12px;
}

/* --------------------------------------------------------------------------
   Chat
   -------------------------------------------------------------------------- */

/* Teller voor ongelezen/onbeantwoorde berichten, naast een titel of gesprek. */
.chat-teller {
  display: inline-block;
  background: var(--zand-500);
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  line-height: 1;
  padding: 4px 8px;
  border-radius: 999px;
  vertical-align: middle;
}

/* --------------------------------------------------------------------------
   Melding-banner (bijv. live update-melding op de aanvragenoverzichten)
   -------------------------------------------------------------------------- */
.melding {
  border-radius: var(--radius);
  border: 1px solid var(--rand);
  padding: 12px 18px;
}

.melding-info {
  background: var(--zand-100);
  border-color: var(--zand-500);
  color: var(--groen-800);
}

.melding-info:hover { background: #f6e3c8; }

.gesprek-lijst { display: grid; gap: 12px; margin-bottom: 24px; }

.gesprek-item {
  display: block;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  padding: 14px 18px;
  box-shadow: var(--schaduw);
  color: inherit;
  text-decoration: none;
}

.gesprek-item:hover { border-color: var(--groen-600); color: inherit; }

.gesprek-item-kop {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
}

.gesprek-item-kop .tekst-licht { font-size: 0.85rem; white-space: nowrap; }
.gesprek-item-regel { margin: 4px 0 8px; font-size: 0.92rem; }

/* Berichtenverloop: eigen berichten rechts, die van de tegenpartij links. */
.chat-verloop {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
  max-height: 60vh;
  overflow-y: auto;
}

.chat-bericht { max-width: 78%; align-self: flex-start; }
.chat-bericht.chat-eigen { align-self: flex-end; text-align: right; }

.chat-afzender {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--tekst-licht);
  margin-bottom: 3px;
}

/* Rolaanduiding achter de naam van een medewerker, zodat de klant ziet namens wie
   er wordt geantwoord. */
.chat-afzender .chat-rol {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.7rem;
  color: var(--groen-600);
  margin-left: 5px;
}

.chat-bubbel {
  display: inline-block;
  text-align: left;
  background: var(--groen-50);
  border: 1px solid var(--groen-100);
  border-radius: var(--radius-groot);
  border-bottom-left-radius: 4px;
  padding: 10px 14px;
  line-height: 1.5;
  overflow-wrap: break-word;
  word-break: break-word;
}

.chat-eigen .chat-bubbel {
  background: var(--groen-700);
  border-color: var(--groen-700);
  color: #fff;
  border-bottom-left-radius: var(--radius-groot);
  border-bottom-right-radius: 4px;
}

.chat-tijd { font-size: 0.75rem; color: var(--tekst-licht); margin-top: 3px; }

.chat-antwoord { border-top: 1px solid var(--rand); padding-top: 16px; }
.chat-antwoord textarea { min-height: 90px; margin-bottom: 12px; }

@media (max-width: 640px) {
  .chat-bericht { max-width: 92%; }
}

.lege-staat {
  text-align: center;
  padding: 36px 20px;
  color: var(--tekst-licht);
}

.lege-staat .lege-emoji { font-size: 2.2rem; display: block; margin-bottom: 8px; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

footer.site-footer {
  background: var(--groen-900);
  color: #a8c5b6;
  padding: 40px 0 28px;
  margin-top: 56px;
  font-size: 0.92rem;
}

footer.site-footer .footer-grid {
  display: grid;
  gap: 28px;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  margin-bottom: 26px;
}

footer.site-footer h4 {
  color: #fff;
  font-size: 0.95rem;
  margin: 0 0 10px;
  letter-spacing: 0.02em;
}

footer.site-footer ul { list-style: none; margin: 0; padding: 0; }
footer.site-footer li { margin-bottom: 6px; }
footer.site-footer a { color: #cfe0d7; text-decoration: none; }
footer.site-footer a:hover { color: #fff; text-decoration: underline; }

footer.site-footer .footer-onder {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding-top: 18px;
  font-size: 0.84rem;
  color: #7fa391;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* --------------------------------------------------------------------------
   Datumkiezer (eigen kalendertje i.p.v. het kale input[type=date])
   -------------------------------------------------------------------------- */

.datumkiezer-wrapper { position: relative; display: inline-block; width: 100%; }

.datumkiezer-popup {
  position: absolute;
  z-index: 40;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  max-width: 90vw;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-groot);
  padding: 12px;
}

.datumkiezer-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.datumkiezer-maandlabel {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--groen-800);
  text-transform: capitalize;
}
.datumkiezer-nav {
  border: 1px solid var(--rand);
  background: var(--kaart);
  color: var(--groen-700);
  border-radius: 6px;
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 1rem;
  cursor: pointer;
}
.datumkiezer-nav:hover { background: var(--groen-50); }

.datumkiezer-raster {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.datumkiezer-dagkop {
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--tekst-licht);
  padding: 2px 0 6px;
  text-transform: uppercase;
}
.datumkiezer-dag {
  border: none;
  background: none;
  border-radius: 6px;
  padding: 6px 0;
  font-size: 0.82rem;
  text-align: center;
  color: var(--tekst);
  cursor: pointer;
}
.datumkiezer-dag-leeg { cursor: default; }
.datumkiezer-dag:not(.datumkiezer-niet-beschikbaar):not(.datumkiezer-dag-leeg):hover {
  background: var(--groen-50);
}
.datumkiezer-vandaag { outline: 1.5px solid var(--groen-600); outline-offset: -1.5px; }
.datumkiezer-geselecteerd { background: var(--groen-700) !important; color: #fff; font-weight: 700; }

/* Dag in een gesloten periode of buiten het toegestane bereik: niet aan te klikken. */
.datumkiezer-niet-beschikbaar {
  color: #b9b9b0;
  background: repeating-linear-gradient(45deg, transparent, transparent 5px, var(--achtergrond) 5px, var(--achtergrond) 10px);
  cursor: not-allowed;
}

/* Dag zonder reguliere openingstijden (bijv. zondag): gedempt maar nog klikbaar, want dat
   kan nog wel als de klant zelfstandig haalt/brengt. */
.datumkiezer-gedempt { color: var(--tekst-licht); background: var(--groen-50); }

.datumkiezer-voet { margin-top: 10px; text-align: right; }
.datumkiezer-wis {
  border: 1px solid var(--rand);
  background: var(--kaart);
  color: var(--tekst-licht);
  border-radius: var(--radius);
  padding: 5px 12px;
  font-size: 0.8rem;
  cursor: pointer;
}
.datumkiezer-wis:hover { background: var(--groen-50); color: var(--groen-700); }

/* --------------------------------------------------------------------------
   Hulpjes
   -------------------------------------------------------------------------- */

.smal { max-width: 560px; }
.tekst-licht { color: var(--tekst-licht); }
.mb-0 { margin-bottom: 0; }

.acties-rij { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }

/* Knoppenrij onderaan een kaart: de knoppen blijven naast elkaar staan, ook in
   een smalle kolom. Compactere knoppen zodat de labels op één regel passen. */
.acties-rij-onder { flex-wrap: nowrap; gap: 8px; }
.acties-rij--kolom { flex-direction: column; align-items: stretch; gap: 6px; }
.acties-rij--kolom .btn { width: 100%; text-align: center; }
.acties-rij--kolom input, .acties-rij--kolom select { width: 100%; }
/* De afwijs-popup zit in de DOM binnen .acties-rij--kolom, maar rendert los (top layer)
   met eigen knoppen naast elkaar — die mogen niet de 100%-breedte hierboven overnemen. */
.acties-rij--kolom dialog.afwijs-dialoog .btn { width: auto; }

/* Kaart met zo'n knoppenrij: de rij wordt tegen de onderkant geduwd, zodat de
   knoppen van alle kaarten in een rij op dezelfde hoogte uitlijnen. */
.card-acties { display: flex; flex-direction: column; }
.card-acties .acties-rij-onder { margin-top: auto; padding-top: 16px; }
.acties-rij-onder .btn { flex: 0 1 auto; text-align: center; padding: 8px 11px; font-size: 0.8rem; }

@media (max-width: 800px) {
  /* Op smalle schermen wrapt de navigatie en wordt de header hoog:
     dan niet vast laten plakken, anders bedekt hij de halve pagina. */
  header.site-header { position: static; }
}

@media (max-width: 640px) {
  header.site-header .container { justify-content: center; text-align: center; }
  .hero-acties .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   Filterbalk + paginering (overzichtstabellen in klant- en beheerportaal)
   -------------------------------------------------------------------------- */

.verzoek-filterbalk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.verzoek-filterbalk-links {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.filter-select {
  width: auto;
  font-size: 0.875rem;
  padding: 7px 30px 7px 12px;
  border: 1px solid var(--rand);
  border-radius: 999px;
  background: var(--kaart);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  font-weight: 600;
  color: var(--tekst-licht);
  transition: border-color 0.15s;
}
.filter-select:focus { outline: none; border-color: var(--groen-700); }
.filter-select.actief { border-color: var(--groen-700); color: var(--groen-700); }

.paginering {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 16px 20px 8px;
  flex-wrap: wrap;
}
.paginering-knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  height: 36px;
  padding: 0 10px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--kaart);
  color: var(--tekst);
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1;
}
.paginering-knop:hover:not(:disabled) {
  border-color: var(--groen-700);
  color: var(--groen-700);
}
.paginering-knop.actief {
  background: var(--groen-700);
  border-color: var(--groen-700);
  color: #fff;
  cursor: default;
}
.paginering-knop:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* ==========================================================================
   Klantdocumenten (beheerportaal) — sleepzone en gekozen-bestandenlijst
   Zie templates/beheer/klant_detail.html en static/js/klant-documenten.js.
   ========================================================================== */

.document-upload {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.document-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 26px 20px;
  border: 2px dashed var(--rand);
  border-radius: var(--radius);
  background: var(--groen-50);
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.document-dropzone:hover,
.document-dropzone:focus-within {
  border-color: var(--groen-600);
}
.document-dropzone--actief {
  border-color: var(--groen-600);
  background: var(--groen-100);
}

/* Het bestandsveld zelf blijft bereikbaar voor toetsenbord en schermlezers, maar is
   onzichtbaar: het omliggende label vormt de klikbare sleepzone. */
.document-bestandsveld {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.document-dropzone-icoon { font-size: 1.6rem; line-height: 1; }
.document-dropzone-titel { font-weight: 500; }
.document-dropzone-link { color: var(--groen-600); text-decoration: underline; }
.document-dropzone-hint {
  font-size: 0.82rem;
  color: var(--tekst-licht);
  max-width: 42em;
  line-height: 1.45;
}

.document-keuze {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.document-keuze-item {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 7px 12px;
  border: 1px solid var(--rand);
  border-radius: 8px;
  background: var(--kaart);
  font-size: 0.87rem;
}
.document-keuze-item--fout {
  border-color: var(--rood-700);
  background: var(--rood-100);
}
.document-keuze-naam {
  overflow-wrap: anywhere;
}
.document-keuze-meta {
  white-space: nowrap;
  color: var(--tekst-licht);
  font-variant-numeric: tabular-nums;
}
.document-keuze-item--fout .document-keuze-meta { color: var(--rood-700); }

.document-totaal-fout {
  margin: 0;
  padding: 9px 12px;
  border: 1px solid var(--rood-700);
  border-radius: 8px;
  background: var(--rood-100);
  color: var(--rood-700);
  font-size: 0.87rem;
}

.document-upload-regel {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.document-upload-regel input[type="text"] {
  flex: 1 1 260px;
  min-width: 0;
}

/* Op een telefoon zou de sleepzone anders het halve scherm vullen en de documentenlijst
   uit beeld duwen; slepen kan daar toch niet, dus de zone hoeft alleen aantikbaar te zijn. */
@media (max-width: 640px) {
  .document-dropzone { padding: 16px 14px; }
  .document-upload-regel .btn { width: 100%; }
}

/* ==========================================================================
   Rondleiding door het klantportaal
   Een donkere laag over de pagina met een uitsparing ("spot") rond het element
   dat aan de beurt is, plus een tekstballon met de uitleg. De laag en de ballon
   worden opgebouwd door static/js/rondleiding.js; de stappen staan in
   portal/rondleiding.py.
   ========================================================================== */

.rondleiding-laag {
  position: fixed;
  inset: 0;
  z-index: 2000;
}

/* De uitsparing zelf is doorzichtig; de verduistering van de rest van het scherm
   komt uit de enorme schaduw eromheen. Zo blijft het uitgelichte element gewoon
   leesbaar zonder dat de laag eromheen uit vier losse blokken hoeft te bestaan. */
.rondleiding-spot {
  position: fixed;
  border-radius: 12px;
  box-shadow: 0 0 0 9999px rgba(18, 41, 31, 0.62), 0 0 0 3px var(--zand-500);
  pointer-events: none;
  transition: top 0.2s ease, left 0.2s ease, width 0.2s ease, height 0.2s ease;
}

/* Stap zonder uitgelicht element (welkom en afsluiting): dan verduistert de laag
   zelf het scherm en staat de ballon in het midden. */
.rondleiding-laag.rondleiding-zonder-doel {
  background: rgba(18, 41, 31, 0.62);
}
.rondleiding-zonder-doel .rondleiding-ballon {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.rondleiding-ballon {
  position: fixed;
  top: 50%;
  left: 50%;
  width: min(380px, calc(100vw - 32px));
  background: var(--kaart);
  border-radius: var(--radius);
  box-shadow: var(--schaduw-groot);
  padding: 20px 22px 16px;
  outline: none;
}

.rondleiding-titel {
  margin: 0 26px 8px 0;
  font-size: 1.08rem;
  color: var(--groen-700);
}

.rondleiding-tekst {
  margin: 0 0 16px;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--tekst);
}

.rondleiding-voet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-top: 1px solid var(--rand);
  padding-top: 12px;
}

.rondleiding-teller {
  font-size: 0.8rem;
  color: var(--tekst-licht);
}

.rondleiding-knoppen {
  display: flex;
  gap: 8px;
}
.rondleiding-knoppen .btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.rondleiding-sluiten {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--tekst-licht);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
}
.rondleiding-sluiten:hover { background: var(--groen-50); color: var(--groen-700); }

/* Pijltje naar het uitgelichte element. De JS zet de richting via een class. */
.rondleiding-ballon::before {
  content: "";
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--kaart);
  transform: rotate(45deg);
  top: 20px;
  left: -6px;
  display: none;
}
.rondleiding-ballon.rondleiding-ballon-rechts::before { display: block; }

@media (prefers-reduced-motion: reduce) {
  .rondleiding-spot { transition: none; }
}

/* Smal scherm: de ballon staat vast onderaan, over de volle breedte. */
@media (max-width: 640px) {
  .rondleiding-ballon,
  .rondleiding-zonder-doel .rondleiding-ballon {
    top: auto;
    bottom: 12px;
    left: 12px;
    right: 12px;
    width: auto;
    transform: none;
    padding: 16px 18px 12px;
  }
  .rondleiding-ballon::before { display: none !important; }
  .rondleiding-voet { flex-wrap: wrap; }
}

/* Knop om de rondleiding opnieuw te bekijken (dashboard en veelgestelde vragen) */
.rondleiding-herstart {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

/* ==========================================================================
   Dropdown-menu — bijv. de "Overeenkomst"-knop bij klanten/objecten, met
   keuze tussen de native en met-achtergrond variant van een gegenereerd
   document. Sluit bij klikken buiten het menu (zie main.js).
   ========================================================================== */
.dropdown { position: relative; display: inline-block; }

.dropdown-toggle::after {
  content: "▾";
  margin-left: 6px;
  font-size: 0.75em;
}

.dropdown-menu {
  display: none;
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  right: 0;
  min-width: 220px;
  background: var(--kaart);
  border: 1px solid var(--rand);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
  padding: 6px;
}

.dropdown.open .dropdown-menu { display: block; }

.dropdown-menu__label {
  padding: 6px 10px 2px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--tekst-licht);
}

.dropdown-menu__label:not(:first-child) {
  margin-top: 4px;
  border-top: 1px solid var(--rand);
  padding-top: 8px;
}

.dropdown-item {
  display: block;
  padding: 7px 10px;
  border-radius: 6px;
  color: var(--tekst);
  text-decoration: none;
  font-size: 0.88rem;
  white-space: nowrap;
}

.dropdown-item:hover { background: var(--groen-50); color: var(--groen-700); }

.dropdown-menu__leeg {
  padding: 7px 10px;
  font-size: 0.85rem;
  color: var(--tekst-licht);
}