/* =============================================================================
   app.css - vormgeving van de tuinier offerte-app
   Licht bladgroen, één vriendelijk lettertype, zonnegele vraagkaarten als
   enige opvallende element. Al de rest blijft rustig.
   ============================================================================= */

/* --- Kleuren en maten ------------------------------------------------------- */
:root {
  --blad: #f1f6ef;          /* achtergrond */
  --wit: #ffffff;           /* vlakken */
  --inkt: #1d2a21;          /* tekst */
  --zacht: #5a6a5f;         /* bijtekst */
  --lijn: #d7e3d4;          /* randen */
  --mos: #2d6a44;           /* hoofdkleur, knoppen */
  --mos-donker: #214f33;
  --scheut: #e2f0de;        /* lichte groene achtergrond */
  --zon: #f5c342;           /* vragen */
  --zon-licht: #fff5d4;
  --zon-rand: #ecd28a;
  --let-op: #8a5a00;        /* waarschuwingstekst */
  --rond: 14px;
  --rond-klein: 9px;
  --schaduw: 0 1px 2px rgba(29, 42, 33, .06), 0 4px 14px rgba(29, 42, 33, .05);
}

/* --- Basis ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--blad);
  color: var(--inkt);
  font-family: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
}
a { color: var(--mos); text-underline-offset: 3px; }
h1, h2, h3, h4 { line-height: 1.2; margin: 0 0 .5rem; font-weight: 700; }
h1 { font-size: 2rem; letter-spacing: -.01em; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.15rem; }
p { margin: 0 0 .8rem; }
.zacht { color: var(--zacht); }
.klein { font-size: .88rem; }
.getal { font-variant-numeric: tabular-nums; }
:focus-visible { outline: 3px solid var(--zon); outline-offset: 2px; border-radius: 4px; }

/* --- Pagina-opbouw ---------------------------------------------------------- */
.balk {
  background: var(--wit);
  border-bottom: 1px solid var(--lijn);
}
.balk-binnen, main {
  max-width: 920px;
  margin: 0 auto;
  padding: 0 1rem;
}
.balk-binnen {
  display: flex; align-items: center; gap: 1.2rem; min-height: 64px; flex-wrap: wrap;
}
.logo { font-weight: 800; font-size: 1.2rem; color: var(--inkt); text-decoration: none; margin-right: auto; }
.logo span { color: var(--mos); }
.balk nav a { color: var(--zacht); text-decoration: none; font-weight: 600; }
.balk nav a:hover, .balk nav a.actief { color: var(--inkt); }
.balk nav { display: flex; gap: 1.2rem; align-items: center; }
.nieuw-knop, .nieuw-knop:hover { color: #fff; white-space: nowrap; }
main { padding-top: 1.8rem; padding-bottom: 4rem; }
section { margin-top: 2.2rem; }

/* --- Vlakken ---------------------------------------------------------------- */
.vlak {
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: var(--rond);
  padding: 1.2rem 1.3rem;
  box-shadow: var(--schaduw);
}
.vlak + .vlak { margin-top: .9rem; }

/* --- Knoppen ---------------------------------------------------------------- */
button, .knop {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  font: inherit; font-weight: 700; font-size: .95rem;
  padding: .6rem 1.1rem; border-radius: 999px;
  border: 2px solid var(--mos); background: var(--mos); color: #fff;
  cursor: pointer; text-decoration: none; line-height: 1.2;
}
button:hover, .knop:hover { background: var(--mos-donker); border-color: var(--mos-donker); }
.knop-rand { background: transparent; color: var(--mos); }
.knop-rand:hover { background: var(--scheut); color: var(--mos-donker); }
.knop-stil { background: transparent; border-color: transparent; color: var(--zacht); font-weight: 600; padding-left: .5rem; padding-right: .5rem; }
.knop-stil:hover { background: transparent; border-color: transparent; color: var(--inkt); text-decoration: underline; }
.knop-klein { padding: .35rem .8rem; font-size: .85rem; }
.knop-groot { padding: .85rem 1.5rem; font-size: 1.05rem; }
.knoppen { display: flex; gap: .6rem; flex-wrap: wrap; align-items: center; }
.knoppen form { margin: 0; }

/* --- Formulieren ------------------------------------------------------------ */
label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .8rem; }
label > input, label > select, label > textarea { margin-top: .3rem; }
input[type=text], input[type=date], select, textarea {
  width: 100%; font: inherit; font-weight: 400; font-size: 1rem; color: var(--inkt);
  background: var(--wit); border: 1.5px solid var(--lijn); border-radius: var(--rond-klein);
  padding: .55rem .7rem;
}
input:focus, select:focus, textarea:focus { border-color: var(--mos); outline: none; box-shadow: 0 0 0 3px var(--scheut); }
textarea { resize: vertical; min-height: 3.2rem; }
input[type=checkbox] { width: 1.15rem; height: 1.15rem; accent-color: var(--mos); vertical-align: -2px; }
.vinkje { display: flex; gap: .55rem; align-items: center; font-weight: 500; }
.rooster { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.rooster-breed { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* --- Meldingen -------------------------------------------------------------- */
.melding {
  background: var(--scheut); border: 1px solid #c3dfbd; color: var(--mos-donker);
  padding: .7rem 1rem; border-radius: var(--rond-klein); margin-bottom: 1.2rem; font-weight: 600;
}
.melding.fout { background: #fdecea; border-color: #f2c4bd; color: #8a2a1c; }
.let-op {
  background: var(--zon-licht); color: var(--let-op);
  border-radius: var(--rond-klein); padding: .5rem .8rem; font-size: .92rem; margin: .6rem 0 0;
}

/* --- Chips en labels -------------------------------------------------------- */
.chips { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: .5rem 0 0; }
.chip { background: var(--scheut); color: var(--mos-donker); border-radius: 999px; padding: .15rem .7rem; font-size: .88rem; font-weight: 600; }
.chip-grijs { background: #eef1ec; color: var(--zacht); }
.status { border-radius: 999px; padding: .15rem .7rem; font-size: .82rem; font-weight: 700; background: #eef1ec; color: var(--zacht); }
.status-verstuurd { background: #e3edf8; color: #28507a; }
.status-aanvaard { background: var(--scheut); color: var(--mos-donker); }
.status-geweigerd { background: #fbe9e6; color: #8a2a1c; }

/* --- Tabellen --------------------------------------------------------------- */
.tabel-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: .93rem; }
th { text-align: left; font-weight: 600; color: var(--zacht); padding: .4rem .5rem; border-bottom: 1.5px solid var(--lijn); white-space: nowrap; }
td { padding: .45rem .5rem; border-bottom: 1px solid #edf2eb; vertical-align: middle; }
td.r, th.r { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table input[type=text], table select { padding: .35rem .5rem; font-size: .9rem; min-width: 5rem; }
tr:last-child td { border-bottom: none; }

/* --- Uitklapbare stukken ---------------------------------------------------- */
details > summary { cursor: pointer; font-weight: 600; color: var(--mos); list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before { content: "+"; display: inline-block; width: 1.1rem; font-weight: 800; }
details[open] > summary::before { content: "–"; }
details.uitklap { margin-top: .8rem; }
details.uitklap[open] > summary { margin-bottom: .7rem; }

/* =============================================================================
   Offertepagina
   ============================================================================= */

.kop-offerte { display: flex; justify-content: space-between; gap: 1.5rem; flex-wrap: wrap; align-items: flex-start; }
.kop-offerte .totaal { text-align: right; }
.totaal-bedrag { font-size: 2.3rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.verdeling { display: flex; gap: 1.8rem; flex-wrap: wrap; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--lijn); }
.verdeling div { min-width: 7rem; }
.verdeling strong { display: block; font-size: 1.1rem; font-variant-numeric: tabular-nums; }

/* --- Vragen van de AI: het opvallende element ------------------------------ */
.vragen-kop { display: flex; align-items: baseline; gap: .7rem; }
.teller { background: var(--zon); color: var(--inkt); border-radius: 999px; font-weight: 800; font-size: .9rem; padding: .05rem .6rem; }
.vraag {
  background: var(--zon-licht);
  border: 1.5px solid var(--zon-rand);
  border-left: 6px solid var(--zon);
  border-radius: var(--rond);
  padding: 1rem 1.2rem 1.1rem;
}
.vraag + .vraag { margin-top: .8rem; }
.vraag-tekst { font-size: 1.12rem; font-weight: 700; margin-bottom: .15rem; }
.vraag .over { color: var(--let-op); font-size: .88rem; margin-bottom: .7rem; }
.antwoord-rij { display: flex; gap: .6rem; align-items: stretch; }
.antwoord-rij textarea { flex: 1; margin: 0; border-color: var(--zon-rand); }
.mic {
  flex: none; width: 3.4rem; border-radius: var(--rond);
  background: var(--wit); color: var(--inkt); border: 1.5px solid var(--zon-rand);
  font-size: 1.35rem; padding: 0;
}
.mic:hover { background: var(--zon); border-color: var(--zon); color: var(--inkt); }
.mic.luistert { background: #d9412b; border-color: #d9412b; color: #fff; animation: pols 1.2s ease-in-out infinite; }
@keyframes pols { 50% { box-shadow: 0 0 0 7px rgba(217, 65, 43, .18); } }
.vraag .knoppen { margin-top: .7rem; }
.spraak-hint { display: none; font-size: .85rem; color: var(--zacht); margin: .4rem 0 0; }
.geen-spraak .mic { display: none; }
.geen-spraak .spraak-hint { display: block; }
.alles-beantwoord { background: var(--scheut); border-radius: var(--rond); padding: .9rem 1.2rem; color: var(--mos-donker); font-weight: 600; }
.beantwoord-lijst { list-style: none; padding: 0; margin: .3rem 0 0; }
.beantwoord-lijst li { padding: .6rem 0; border-bottom: 1px solid var(--lijn); }
.beantwoord-lijst li:last-child { border-bottom: none; }

/* --- Werken (posten) -------------------------------------------------------- */
.werk-kop { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; }
.werk-kop h3 { margin: 0; }
.werk-kop .bedrag { font-size: 1.2rem; font-weight: 800; white-space: nowrap; font-variant-numeric: tabular-nums; }
.recept-naam { font-size: .88rem; color: var(--zacht); margin: .1rem 0 0; }
.notitie { border-left: 3px solid var(--lijn); padding-left: .7rem; margin: .7rem 0 0; color: var(--zacht); font-size: .93rem; white-space: pre-line; }

/* =============================================================================
   Overzicht en instellingen
   ============================================================================= */

.lijst-offertes { list-style: none; padding: 0; margin: 0; }
.lijst-offertes a.vlak {
  display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem;
  text-decoration: none; color: inherit;
}
.lijst-offertes a.vlak:hover { border-color: var(--mos); }
.lijst-offertes li + li { margin-top: .7rem; }
.lijst-offertes .bedrag { font-weight: 800; font-size: 1.15rem; text-align: right; font-variant-numeric: tabular-nums; }
.leeg { text-align: center; padding: 2.5rem 1.5rem; }

.tegels { display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tegels a.vlak { text-decoration: none; color: inherit; display: block; }
.tegels a.vlak:hover { border-color: var(--mos); }
.tegels h3 { color: var(--mos); }
.tegels p { margin: 0; color: var(--zacht); font-size: .93rem; }

.terug { display: inline-block; margin-bottom: 1rem; font-weight: 600; text-decoration: none; }

/* --- Nieuwe offerte --------------------------------------------------------- */
.invoer-groot { font-size: 1.1rem; min-height: 11rem; }
.invoer-rij { display: flex; gap: .7rem; align-items: stretch; }
.invoer-rij textarea { flex: 1; }
.invoer-rij .mic { width: 4.2rem; font-size: 1.7rem; border-color: var(--lijn); }

/* --- Kleine schermen -------------------------------------------------------- */
@media (max-width: 640px) {
  body { font-size: 16px; }
  .balk-binnen { gap: .2rem 1rem; padding-top: .6rem; padding-bottom: .5rem; }
  .logo { order: 1; }
  .nieuw-knop { order: 2; }
  .balk nav { order: 3; width: 100%; gap: 1.1rem; font-size: .95rem; }
  h1 { font-size: 1.6rem; }
  .kop-offerte .totaal { text-align: left; }
  .totaal-bedrag { font-size: 1.9rem; }
  .verdeling { gap: 1rem; }
  .vlak { padding: 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .mic.luistert { animation: none; }
}

/* --- Correcties ------------------------------------------------------------- */
.tegels > .vlak + .vlak { margin-top: 0; }
table input[name=omschrijving] { min-width: 12rem; }
table select[name=artikel_id] { min-width: 11rem; }
table select[name=berekening] { min-width: 8rem; }

/* =============================================================================
   Materialen, leveranciers en prijzen
   Vervallen prijzen in baksteenrood, prijzen die binnenkort vervallen in amber.
   ============================================================================= */
:root {
  --vervallen: #b23a22;
  --vervallen-licht: #fbeae5;
  --vervallen-rand: #efc3b8;
}

.lijst-kaarten { list-style: none; padding: 0; margin: 0 0 1rem; }
.lijst-kaarten li + li { margin-top: .7rem; }
.kaart { display: grid; grid-template-columns: 1fr auto; gap: .3rem 1.2rem; align-items: start; }
a.kaart { text-decoration: none; color: inherit; }
a.kaart:hover { border-color: var(--mos); }
.kaart-vervallen { border-color: var(--vervallen-rand); }
.rechts-uitgelijnd { text-align: right; }
.bedrag { font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.per { font-weight: 500; font-size: .85rem; color: var(--zacht); }
.stil-link { color: inherit; text-decoration: none; }
.stil-link:hover { color: var(--mos); text-decoration: underline; }

/* --- Zoeken en filteren ----------------------------------------------------- */
.zoekbalk { display: flex; gap: .6rem; margin: 1rem 0 .8rem; }
.zoekbalk input { flex: 1; }
.filters { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.2rem; }
.filter {
  border: 1.5px solid var(--lijn); background: var(--wit); color: var(--zacht);
  border-radius: 999px; padding: .25rem .85rem; font-weight: 600; font-size: .9rem; text-decoration: none;
}
.filter:hover { border-color: var(--mos); color: var(--mos); }
.filter.actief { background: var(--mos); border-color: var(--mos); color: #fff; }

/* --- Prijzen ------------------------------------------------------------------ */
.prijs-kop { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.prijslabel {
  display: inline-block; border-radius: 999px; padding: .1rem .6rem; margin-top: .25rem;
  font-size: .8rem; font-weight: 700; background: #eef1ec; color: var(--zacht);
}
.prijslabel-vervallen { background: var(--vervallen); color: #fff; }
.prijslabel-binnenkort { background: var(--zon-licht); color: var(--let-op); border: 1px solid var(--zon-rand); }
.prijslabel-toekomst { background: #e3edf8; color: #28507a; }
.prijslabel-gekozen { background: var(--scheut); color: var(--mos-donker); vertical-align: 2px; margin: 0 0 0 .4rem; }

.prijs-vervallen { color: var(--vervallen); }
.prijs-kaart.prijs-vervallen { background: var(--vervallen-licht); border-color: var(--vervallen-rand); color: var(--inkt); }
.prijs-kaart.prijs-vervallen .getal-doorstreept { color: var(--vervallen); text-decoration: line-through; text-decoration-thickness: 1.5px; }
.prijs-kaart.prijs-binnenkort { border-color: var(--zon-rand); }
tr.rij-vervallen td { background: var(--vervallen-licht); }
tr.rij-vervallen .prijs-bedrag, tr.rij-vervallen a { color: var(--vervallen); }
tr.rij-vervallen .getal-doorstreept { text-decoration: line-through; }

/* --- Categorieën ------------------------------------------------------------- */
fieldset.categorie-keuze { border: 1.5px solid var(--lijn); border-radius: var(--rond-klein); padding: .6rem 1rem .2rem; margin: 0 0 1rem; }
fieldset.categorie-keuze legend { font-weight: 600; font-size: .9rem; padding: 0 .3rem; }
fieldset.categorie-keuze .vinkje { display: inline-flex; margin: 0 1.2rem .6rem 0; }
.categorie-rij { display: flex; gap: .8rem; align-items: center; padding: .4rem 0; border-bottom: 1px solid #edf2eb; }
.categorie-rij:last-of-type { border-bottom: none; }

@media (max-width: 640px) {
  .kaart { grid-template-columns: 1fr; }
  .rechts-uitgelijnd { text-align: left; }
}

/* =============================================================================
   ⓘ-uitleg
   ============================================================================= */
.info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.15rem; height: 1.15rem; margin-left: .3rem; vertical-align: 1px;
  border-radius: 50%; border: 1.5px solid var(--mos); color: var(--mos);
  font: italic 700 .72rem/1 Georgia, serif; cursor: help; user-select: none;
}
.info:hover, .info:focus-visible { background: var(--mos); color: #fff; }
.uitleg-ballon {
  position: absolute; z-index: 50; max-width: min(300px, calc(100vw - 16px));
  background: var(--inkt); color: #fff; border-radius: var(--rond-klein);
  padding: .55rem .75rem; font-size: .88rem; font-weight: 500; line-height: 1.45;
  box-shadow: 0 6px 20px rgba(29, 42, 33, .25);
}
.uitleg-ballon[hidden] { display: none; }

/* --- Logo bij de bedrijfsinstellingen --------------------------------------- */
.logo-rij { display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap; }
.logo-voorbeeld {
  width: 180px; height: 90px; display: flex; align-items: center; justify-content: center;
  border: 1.5px dashed var(--lijn); border-radius: var(--rond-klein); background: #fafcf9; padding: .5rem;
}
.logo-voorbeeld img { max-width: 100%; max-height: 100%; object-fit: contain; }
input[type=file] { font: inherit; font-size: .9rem; max-width: 100%; }
input[type=password] {
  width: 100%; font: inherit; font-weight: 400; font-size: 1rem; color: var(--inkt);
  background: var(--wit); border: 1.5px solid var(--lijn); border-radius: var(--rond-klein); padding: .55rem .7rem;
}
input[type=password]:focus { border-color: var(--mos); outline: none; box-shadow: 0 0 0 3px var(--scheut); }

/* --- Velden in een rooster altijd onderaan uitgelijnd, ook als het label
       (met ⓘ) over twee regels loopt ------------------------------------------- */
.rooster > label:not(.vinkje) { display: flex; flex-direction: column; justify-content: space-between; }
.rooster > label:not(.vinkje) > input, .rooster > label:not(.vinkje) > select { margin-top: .3rem; }

/* =============================================================================
   Recepten
   ============================================================================= */
.recept-rij {
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
  padding: .7rem 0; border-top: 1px solid #edf2eb; text-decoration: none; color: inherit;
}
.recept-rij:hover strong { color: var(--mos); text-decoration: underline; }

/* --- Lagen: genummerd van onder naar boven, met een kleurrand per soort ---- */
ol.lagen { list-style: none; padding: 0; margin: 0 0 .9rem; display: flex; flex-direction: column; gap: .7rem; }
ol.lagen > li.vlak + li.vlak { margin-top: 0; }
.laag { border-left: 6px solid var(--lijn); }
.laag-volume { border-left-color: #b9a27a; }        /* grond, puin, stabilisé */
.laag-oppervlakte { border-left-color: var(--mos); }
.laag-lengte { border-left-color: #6f8fa8; }
.laag-stuk, .laag-vast { border-left-color: #a58bb0; }
.laag-kop { display: flex; gap: .9rem; align-items: flex-start; }
.laag-nummer {
  flex: none; width: 1.9rem; height: 1.9rem; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--scheut); color: var(--mos-donker); font-weight: 800;
}
.laag-voorbeeld { color: var(--inkt); font-size: 1rem; }
.materiaal-keuze { margin-top: .2rem; }
.nieuw-materiaal {
  background: var(--zon-licht); border: 1.5px solid var(--zon-rand); border-radius: var(--rond-klein);
  padding: .7rem .9rem .1rem; margin: -.3rem 0 .9rem;
}
.nieuw-materiaal[hidden] { display: none; }

/* =============================================================================
   Prijs vragen
   ============================================================================= */
.kies-lijst { list-style: none; padding: 0; margin: .3rem 0 0; }
.kies-lijst[hidden], .kies-lijst li[hidden] { display: none; }
.kies-rij {
  display: flex; gap: .8rem; align-items: flex-start; font-weight: 500;
  padding: .7rem .6rem; margin: 0; border-radius: var(--rond-klein); cursor: pointer;
}
.kies-rij:hover { background: var(--scheut); }
.kies-rij input { margin-top: .25rem; }
.kies-rij:has(input:checked) { background: var(--scheut); box-shadow: inset 0 0 0 1.5px var(--mos); }
.kies-rij.uitgeschakeld { cursor: default; opacity: .75; }
.kies-rij.uitgeschakeld:hover { background: none; }
.kies-lijst li + li .kies-rij { border-top: 1px solid #edf2eb; }
.toon-overige { margin: 1rem 0 .2rem; }
.ontvangers { list-style: none; padding: 0; margin: 0 0 .6rem; }
.ontvangers li { padding: .3rem 0; }
.mailtekst { font-size: .98rem; line-height: 1.55; min-height: 22rem; }
.aanvragen ul { padding-left: 1.1rem; margin: 0; }
.aanvragen li { margin-bottom: .3rem; }
.prijs-vraag-rij {
  display: flex; gap: .8rem; justify-content: space-between; align-items: center; flex-wrap: wrap;
  background: var(--zon-licht); border-radius: var(--rond-klein); padding: .5rem .8rem; margin: .6rem 0 0;
  color: var(--let-op); font-size: .92rem;
}
button[disabled] { opacity: .45; cursor: not-allowed; }

/* --- Melding als inspreken via de browser niet lukt -------------------------- */
.spraak-fout {
  background: var(--zon-licht); color: var(--let-op); border-radius: var(--rond-klein);
  padding: .5rem .8rem; font-size: .9rem; margin: .5rem 0 0;
}

/* --- Eerdere antwoorden boven een vervolgvraag -------------------------------- */
.gesprek { list-style: none; padding: 0 0 .5rem; margin: 0 0 .6rem; border-bottom: 1px dashed var(--zon-rand); font-size: .92rem; }
.gesprek li + li { margin-top: .4rem; }

/* =============================================================================
   Kalender
   Voorlopig: lichte achtergrond met gestreepte rand. Definitief: gevuld groen.
   ============================================================================= */
.overloop-kaart {
  display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--zon-licht); border: 1.5px solid var(--zon-rand); border-left: 6px solid var(--zon);
  border-radius: var(--rond); padding: .9rem 1.1rem; margin-bottom: 1.4rem; color: var(--inkt); text-decoration: none;
}
.overloop-kaart:hover { border-color: var(--zon); }

.kal-balk { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; margin: 1.2rem 0 .7rem; }
.kal-maand { margin: 0 .3rem; min-width: 10rem; text-align: center; text-transform: capitalize; }

.kal-rooster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); padding: 0; overflow: hidden; }
.kal-kop { padding: .5rem; font-size: .8rem; font-weight: 700; color: var(--zacht); text-align: center; border-bottom: 1px solid var(--lijn); }
.kal-dag {
  min-height: 6.4rem; padding: .3rem; border-right: 1px solid #edf2eb; border-bottom: 1px solid #edf2eb;
  display: flex; flex-direction: column; gap: .2rem; min-width: 0;
}
.kal-dag:nth-child(7n) { border-right: none; }
.kal-dag.rust { background: #f7faf6; }
.kal-dag.buiten { opacity: .45; }
.kal-nummer { font-size: .82rem; font-weight: 700; color: var(--zacht); align-self: flex-end; padding: 0 .2rem; }
.kal-dag.vandaag .kal-nummer { background: var(--mos); color: #fff; border-radius: 999px; padding: 0 .45rem; }
.kal-item {
  display: block; font-size: .76rem; font-weight: 600; line-height: 1.25; padding: .15rem .35rem;
  border-radius: 6px; text-decoration: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.kal-voorlopig { background: #fffaf0; color: var(--let-op); border: 1.5px dashed var(--zon-rand); }
.kal-definitief { background: var(--mos); color: #fff; border: 1.5px solid var(--mos); }
.kal-voorlopig.kal-soort-onderhoud { background: #f3f7fb; color: #28507a; border-color: #b8cbe0; }
.kal-definitief.kal-soort-onderhoud { background: #3e6f99; border-color: #3e6f99; }
.kal-verlof { display: inline-block; font-size: .72rem; font-weight: 600; color: var(--zacht); background: #e9ede7; border-radius: 6px; padding: .1rem .35rem; }
.kal-legende { display: flex; gap: .6rem; align-items: center; margin: .5rem 0 0; }
.kal-legende .kal-item { display: inline-block; }

.kal-weeklijst { list-style: none; padding: 0; margin: 0; }
.kal-weeklijst li { padding: .5rem 0; border-top: 1px solid #edf2eb; }
.kal-weeklijst li:first-child { border-top: none; }

.overloop-rij.achterstallig { border-color: var(--vervallen-rand); }
.keuze-soort { border: none; padding: 0; margin: 0 0 .8rem; display: flex; gap: 1.5rem; align-items: center; }
.keuze-soort legend { float: left; margin-right: .5rem; }
.keuze-soort .vinkje { margin: 0; }
[data-soort][hidden], [data-freq][hidden] { display: none !important; }
.dag-keuze { margin: 0 .6rem .4rem 0; }
.planning-kaart p a { white-space: nowrap; }
.vinkje-form { margin: 0; }

@media (max-width: 760px) {
  .kal-rooster, .kal-legende { display: none; }
}

/* --- Menu met vier items: op smalle schermen kleiner, en nooit breder dan het scherm */
.balk nav { overflow-x: auto; scrollbar-width: none; }
.balk nav a { white-space: nowrap; }
@media (max-width: 640px) {
  .balk nav { gap: .85rem; font-size: .86rem; }
  .kal-maand { min-width: 0; font-size: 1.2rem; }
}
@media (max-width: 400px) {
  .balk nav { gap: .65rem; font-size: .8rem; }
}
.kal-maand { white-space: nowrap; }
.kal-extern { display: inline-block; font-size: .7rem; font-weight: 600; color: #6b5b9a; background: #f0edf8; border-radius: 6px; padding: .1rem .35rem; }

/* --- Stappenlijst bij het instellen van Google --------------------------------- */
ol.stappen { padding-left: 1.3rem; margin: .4rem 0 1.2rem; }
ol.stappen li { margin-bottom: .55rem; line-height: 1.5; }
code.kopieer {
  display: inline-block; margin-top: .3rem; padding: .25rem .5rem; border-radius: 6px;
  background: var(--scheut); color: var(--mos-donker); font-size: .9rem; user-select: all; word-break: break-all;
}

/* =============================================================================
   Offerteaanvragen: formulier voor klanten, momenten kiezen, melding in de app
   ============================================================================= */
input[type=email], input[type=tel], input[type=time], input[type=file] {
  width: 100%; font: inherit; font-size: 1rem; color: var(--inkt);
  background: var(--wit); border: 1.5px solid var(--lijn); border-radius: var(--rond-klein); padding: .6rem .75rem;
}
input[type=file] { padding: .5rem; }
input[type=email]:focus, input[type=tel]:focus, input[type=time]:focus { border-color: var(--mos); outline: none; }
[data-extra][hidden], #mailblok[hidden] { display: none !important; }

/* --- Publieke pagina's -------------------------------------------------------- */
.publiek-main { max-width: 760px; padding-top: 1.6rem; padding-bottom: 2rem; }
.publiek-kop { min-height: 72px; max-width: 760px; }
.publiek-logo { max-height: 52px; max-width: 220px; object-fit: contain; }
.publiek-voet { max-width: 760px; margin: 0 auto; padding: 1.5rem 1rem 2.5rem; border-top: 1px solid var(--lijn); }
.honing { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.keuzes { border: 0; padding: 0; margin: 0 0 1rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.keuzes legend { font-weight: 600; font-size: .9rem; margin-bottom: .5rem; padding: 0; }
.keuze { margin: 0; font-weight: 600; font-size: .95rem; cursor: pointer; }
.keuze input { position: absolute; opacity: 0; pointer-events: none; }
.keuze span {
  display: inline-block; padding: .55rem 1rem; border: 1.5px solid var(--lijn); border-radius: 999px; background: var(--wit);
}
.keuze input:checked + span { background: var(--mos); border-color: var(--mos); color: #fff; }
.keuze input:focus-visible + span { outline: 3px solid var(--zon); outline-offset: 2px; }

.voorbehoud {
  background: var(--zon-licht); border: 1.5px solid var(--zon-rand); border-left: 6px solid var(--zon);
  border-radius: var(--rond); padding: .8rem 1.1rem; margin: 0 0 1rem;
}
.moment-gekozen { font-size: 1.3rem; font-weight: 700; margin: 0 0 .8rem; }

/* Rooster: op groot scherm 7 kolommen, op gsm een lijst van dagen met momenten */
.moment-rooster { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: .45rem; }
.moment-dag { border: 1px solid var(--lijn); border-radius: var(--rond-klein); padding: .45rem; min-height: 4.2rem;
  display: flex; flex-direction: column; gap: .3rem; }
.moment-dag.leeg-dag { background: #f6f8f5; }
.moment-dag.buiten { opacity: .45; }
.moment-datum { font-weight: 700; font-size: .85rem; }
.moment-datum span { color: var(--zacht); font-weight: 600; text-transform: capitalize; }
.moment { margin: 0; cursor: pointer; }
.moment input { position: absolute; opacity: 0; pointer-events: none; }
.moment span { display: block; text-align: center; padding: .35rem .2rem; border: 1.5px solid var(--mos); border-radius: 8px;
  color: var(--mos); font-weight: 700; font-size: .9rem; background: var(--wit); }
.moment input:checked + span { background: var(--mos); color: #fff; }
.moment input:focus-visible + span { outline: 3px solid var(--zon); outline-offset: 2px; }
.liever-bellen { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; margin-top: 1rem; }
@media (max-width: 640px) {
  .moment-rooster { grid-template-columns: 1fr; }
  .moment-dag.leeg-dag { display: none; }
  .moment-dag { flex-direction: row; flex-wrap: wrap; align-items: center; min-height: 0; padding: .6rem; }
  .moment-datum { width: 100%; font-size: .95rem; }
  .moment span { padding: .5rem .9rem; }
}

/* --- In de app ----------------------------------------------------------------- */
.nav-teller { background: var(--zon); color: var(--inkt); border-radius: 999px; font-size: .75rem; font-weight: 800;
  padding: 0 .45rem; vertical-align: 1px; }
.status-aanvraag-gekozen, .status-aanvraag-zonder_moment { background: var(--zon-licht); color: var(--let-op); }
.status-aanvraag-bellen { background: #fbe9e6; color: #8a2a1c; }
.status-aanvraag-ingepland { background: var(--scheut); color: var(--mos-donker); }
.gegevens { display: grid; grid-template-columns: max-content 1fr; gap: .3rem 1rem; margin: 0; }
.gegevens dt { color: var(--zacht); font-weight: 600; font-size: .9rem; }
.gegevens dd { margin: 0; overflow-wrap: anywhere; }
.fotos { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: .5rem; margin-top: .9rem; }
.fotos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--rond-klein); border: 1px solid var(--lijn); display: block; }
.popup { border: 0; border-radius: var(--rond); padding: 1.4rem 1.5rem; max-width: min(440px, calc(100vw - 2rem));
  box-shadow: 0 12px 40px rgba(29, 42, 33, .25); color: var(--inkt); }
.popup::backdrop { background: rgba(29, 42, 33, .35); }
.popup-lijst { list-style: none; padding: 0; margin: .4rem 0 1.1rem; display: grid; gap: .5rem; }
.popup-lijst li { display: flex; flex-direction: column; }
.kal-soort-bezoek.kal-definitief { background: #7a4f9e; border-color: #7a4f9e; }
.kal-soort-bezoek.kal-voorlopig { background: #f6f1fa; color: #5b3a78; border-color: #cdb8de; }
.aanvragen-kaart { display: flex; justify-content: space-between; align-items: center; gap: 1rem;
  background: var(--wit); border: 1.5px solid var(--lijn); border-left: 6px solid var(--mos);
  border-radius: var(--rond); padding: .9rem 1.1rem; margin-bottom: 1.4rem; color: var(--inkt); text-decoration: none; }
.aanvragen-kaart:hover { border-color: var(--mos); }

/* =============================================================================
   Recepten in stappen: hoeveelheid, prijs, tijd
   ============================================================================= */
ol.stappen-lijst { list-style: none; padding: 0; margin: 0 0 .9rem; display: flex; flex-direction: column; gap: .7rem; }
ol.stappen-lijst > li.vlak + li.vlak { margin-top: 0; }
.stap { border-left: 6px solid var(--mos); padding-bottom: .6rem; }
.stap-nieuw { border-left-color: var(--lijn); border-style: dashed; border-left-style: solid; background: #fafcf9; }
.stap-kop { display: flex; gap: .9rem; align-items: flex-end; }
.stap-naam { flex: 1; margin-bottom: .6rem; }
.stap-velden { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 1rem; }
.stap-velden > label { margin-bottom: .4rem; }
.samen { display: flex; gap: .4rem; margin-top: .3rem; }
.samen input { flex: 1 1 60%; min-width: 0; }
.samen select { flex: 1 1 40%; min-width: 0; }
.stap-materiaalprijs { display: block; margin-top: .45rem; line-height: 1.35; font-weight: 500; }
[data-veld=prijs][hidden], [data-materiaalprijs][hidden], [data-nieuw][hidden], [data-afvoer-manueel][hidden] { display: none !important; }
.stap-uitkomst { margin: .1rem 0 0; min-height: 1.2em; }
.stap-meer { margin-top: .3rem; }
.recept-totaal {
  background: var(--scheut); border-radius: var(--rond); padding: .9rem 1.1rem; line-height: 1.7;
  position: sticky; bottom: .6rem; box-shadow: var(--schaduw);
  display: flex; gap: 1rem; align-items: center; justify-content: space-between; flex-wrap: wrap;
}
.keuzes-klein { margin: .3rem 0 .8rem; }
.keuzes-klein .keuze span { padding: .35rem .8rem; font-size: .88rem; }
@media (max-width: 640px) {
  .stap-velden { grid-template-columns: 1fr; }
  .stap-kop { align-items: flex-start; }
  .stap-kop .laag-nummer { margin-top: 1.7rem; }
}

/* === Aanmelden ============================================================ */
.login-main { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1.5rem; }
.login-vlak { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: .4rem; }
.login-vlak h1 { margin: 0 0 .6rem; }
.login-vlak button { margin-top: .6rem; }
.login-logo { font-size: 1.6rem; margin: 0 0 .4rem; }