/* ═══════════════════════════════════════════════════════════════
   beheer.css — het dashboard

   Erft alles van style.css en tuinkamer.css: de kop, de knoppen
   (.lidknop, .stempel), de lijstregels (.lidrij), de bouwer, het
   ledenformulier (.beheer__*). Hier staat alleen wat het dashboard
   zelf is: een zijmenu links, één deel rechts, en de bevestiging.
   ═══════════════════════════════════════════════════════════════ */

.beheer-body { background: var(--haver); }

.beheer__wacht {
  margin: 40vh auto 0; text-align: center;
  font-family: var(--type); color: var(--inkt-dof);
}

/* de kop staat vast; het blad begint eronder */
.dashboard__blad {
  display: grid; grid-template-columns: 208px minmax(0, 1fr);
  gap: clamp(18px, 3vw, 40px);
  max-width: min(1680px, 100%); margin: 0 auto;
  padding: 108px clamp(16px, 3vw, 36px) 60px;
  min-height: 100vh;
}

/* ── het zijmenu ────────────────────────────────────────────────
   Drie kaartjes, niet één lijst met tussenkopjes. Een kopje boven een
   rij links laat je nog raden of het een titel is of gewoon de eerste
   regel; een eigen vlak met een rand eromheen zegt meteen: dit hoort
   bij elkaar en dat daaronder is iets anders. */

.zijmenu {
  position: sticky; top: 100px; align-self: start;
  display: grid; gap: 14px;
}
.zijmenu__groep {
  display: grid; gap: 2px;
  padding: 12px 10px 10px;
  background: rgba(255, 255, 255, .45);
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 14px 30px -26px rgba(34,31,26,.4);
}
.zijmenu__kop {
  margin: 2px 0 6px 12px;
  font-family: var(--grotesk); font-weight: 600; font-size: .6rem;
  letter-spacing: .16em; text-transform: uppercase; color: var(--groen);
}
/* Elk item zegt in één regel eronder wát het is. "Adresboek" alleen laat
   nog ruimte voor twijfel; "iedereen die zich ooit meldde" niet. */
.zijmenu__item {
  display: grid; gap: 1px; padding: 8px 12px; border-radius: 12px;
  text-decoration: none; color: var(--inkt);
  transition: background-color 150ms var(--ease-uit), color 150ms var(--ease-uit);
}
.zijmenu__item strong {
  font-family: var(--type); font-weight: 500; font-size: .95rem; line-height: 1.25;
}
.zijmenu__item span {
  font-family: var(--type); font-size: .74rem; line-height: 1.35;
  color: rgba(43,36,30,.66);
}
.zijmenu__item:hover { background: rgba(255,255,255,.62); }
.zijmenu__item.is-hier { background: rgba(58,107,68,.13); }
.zijmenu__item.is-hier strong { color: var(--groen-diep); font-weight: 600; }
.zijmenu__item.is-hier span { color: rgba(44,83,52,.78); }
.zijmenu__item:focus-visible { outline: 2px solid var(--groen); outline-offset: 2px; }

/* ── het deel ────────────────────────────────────────────────── */

.deel {
  min-width: 0;
  padding: clamp(22px, 3vw, 40px);
  background: rgb(250 247 240 / .82);
  -webkit-backdrop-filter: blur(14px) saturate(1.35);
          backdrop-filter: blur(14px) saturate(1.35);
  border: 1px solid rgba(255,255,255,.7);
  border-radius: 22px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 22px 46px -32px rgba(34,31,26,.4);
}
.deel__kop {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: clamp(14px, 2vh, 22px);
}
.deel__label {
  display: block; font-family: var(--grotesk); font-weight: 600;
  font-size: .64rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--groen);
}
.deel__titel {
  font-family: var(--serif); font-weight: 400; letter-spacing: -.02em;
  font-size: clamp(1.5rem, 2.6vw, 2rem); margin: .3rem 0 0;
}
.deel__uitleg {
  margin: 0 0 18px; max-width: 62ch;
  font-family: var(--type); font-size: .92rem; line-height: 1.6;
  color: rgba(43,36,30,.7);
}

/* ── pagina's per hoofdstuk ─────────────────────────────────── */

.paginas__rek + .paginas__rek { margin-top: 26px; }
.paginas__rekkop {
  display: flex; align-items: baseline; gap: 10px;
  font-family: var(--serif); font-weight: 400; font-size: 1.25rem;
  margin: 0 0 4px; color: var(--inkt);
}
.paginas__telling {
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--inkt-dof);
}
/* knoppen naast de schermtitel, en bij een hoofdstuk dat Nele zelf maakte */
.deel__knoppen { display: flex; gap: 10px; flex-wrap: wrap; }
.paginas__rekknoppen { margin-left: auto; display: inline-flex; gap: 6px; flex-wrap: wrap; }
.paginas__titel {
  background: none; border: 0; padding: 0; cursor: pointer; text-align: left;
  font-family: var(--type); font-weight: 600; font-size: .96rem; color: var(--inkt);
}
.paginas__titel:hover { color: var(--groen-diep); text-decoration: underline; text-underline-offset: 3px; }
.lidknop--pijl { padding-inline: .8em; font-size: .8rem; }
a.lidknop { text-decoration: none; display: inline-flex; align-items: center; }

/* ── contacten ──────────────────────────────────────────────── */

.contacten__filter {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  margin: 0 0 14px;
}
.contacten__filter .beheer__veld { flex: 1 1 260px; }
.contacten__filter .beheer__vink { margin-top: 0; }
.beheer__veld--breed { flex-basis: 100%; margin-top: 10px; border-radius: 14px; }
.contact__noot { margin-top: 4px; font-family: var(--type); font-size: .8rem; color: rgba(43,36,30,.6); }
.contact__noot summary { cursor: pointer; }
.contact__noottekst {
  margin: 6px 0 0; white-space: pre-wrap; font-family: var(--type); font-size: .8rem;
  line-height: 1.5; color: rgba(43,36,30,.75);
}
.contact__formulier {
  padding: 18px; border: 1px solid rgba(58,107,68,.18);
  border-radius: 16px; background: rgba(58,107,68,.05);
}
.contact__formulier[hidden] { display: none; }
.contact__velden { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.contact__formulier label {
  display: grid; gap: 7px; font-family: var(--grotesk); font-size: .68rem;
  font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--inkt-dof);
}
.contact__formulier .beheer__veld {
  width: 100%; min-width: 0; box-sizing: border-box; flex: none;
  border-radius: 12px; letter-spacing: normal; text-transform: none;
}
.contact__opmerking { margin-top: 12px; }
.contact__opmerking textarea { resize: vertical; }
.contact__acties { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
@media (max-width: 700px) { .contact__velden { grid-template-columns: 1fr; } }

/* ── de nieuwsbrief schrijven ───────────────────────────────── */

/* Het schrijfvak krijgt iets meer dan de helft: daar typ je, het
   voorbeeld kijk je alleen aan. De mail zelf is 580px breed en schaalt
   netjes mee, dus een smallere kolom maakt hem niet onleesbaar. */
.nb { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.nb__vorm .beheer__veldlabel { margin-top: 14px; }
.nb__vorm .beheer__veld--breed {
  width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box;
  margin-top: 0;
}
.nb__intro { font-family: var(--type); line-height: 1.6; resize: vertical; }
.nb__acties { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.nb__acties .stempel[disabled] { opacity: .45; cursor: not-allowed; }
.nb__voorbeeld { position: sticky; top: 100px; }
.mailbeheer {
  margin: 32px 0 24px; padding: 18px 22px;
  border: 1px solid rgba(58,107,68,.2); border-radius: 18px;
  background: rgba(255,255,255,.36);
}
.mailbeheer summary {
  cursor: pointer; font-family: var(--serif); font-size: 1.25rem; color: var(--inkt);
}
.mailbeheer[open] summary { margin-bottom: 16px; }
.mailbeheer__open { margin-top: 10px; }
.mailbeheer__keuze { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; }
.mailbeheer__keuze .beheer__veldlabel { flex: 0 0 100%; }
.mailbeheer__keuze .beheer__veld { flex: 1 1 220px; }
.mailbeheer__inhoud { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 28px; margin-top: 18px; }
.mailbeheer__vorm { min-width: 0; }
.nb__kader {
  display: block; width: 100%; height: min(78vh, 900px);
  border: 1px solid rgba(43,36,30,.14);
  border-radius: 16px; background: #EFE7DA; margin-top: 8px;
}
@media (max-width: 1000px) {
  .nb, .mailbeheer__inhoud { grid-template-columns: 1fr; }
  .nb__voorbeeld { position: static; }
  .nb__kader { height: 60vh; }
}

/* ── meerdere tegelijk ──────────────────────────────────────────
   De balk verschijnt pas als er iets aangevinkt staat, en blijft dan
   bovenaan hangen terwijl je verder scrolt: je vinkt onderaan de lijst
   nog iets aan en de knoppen staan nog steeds waar je ze zoekt. */
.bulk {
  position: sticky; top: 96px; z-index: 5;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 14px; padding: 10px 14px;
  background: rgba(58,107,68,.14);
  border: 1px solid rgba(58,107,68,.3);
  border-radius: 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.bulk__telling {
  font-family: var(--grotesk); font-weight: 600; font-size: .66rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--groen-diep);
}
.bulk__knoppen { display: flex; gap: 8px; flex-wrap: wrap; flex: 1; }
.bulk__wis {
  background: none; border: 0; padding: 4px; cursor: pointer;
  font-family: var(--type); font-size: .82rem; color: rgba(43,36,30,.7);
  text-decoration: underline; text-underline-offset: 3px;
}
.bulk__wis:hover { color: var(--inkt); }
/* Op een smal scherm kreeg .bulk__knoppen door flex:1 een minieme basis:
   elke knop viel op een eigen regel en "selectie wissen" hing er halverwege
   naast. Elk deel op zijn eigen regel leest rustiger. */
@media (max-width: 620px) {
  .bulk { gap: 9px; }
  .bulk__telling, .bulk__knoppen { flex: 1 1 100%; }
  .bulk__wis { margin-left: auto; padding-top: 0; }
}

/* het vinkje links van elke regel */
.bulk__vink { display: flex; align-items: center; gap: 8px; padding-top: 2px; cursor: pointer; }
.bulk__vink input { width: 17px; height: 17px; accent-color: var(--groen); cursor: pointer; }
.bulk__vink--alles {
  font-family: var(--grotesk); font-weight: 600; font-size: .62rem;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(43,36,30,.78);
  margin-right: 10px;
}
/* de regels krijgen er een kolom bij */
.lidrij { grid-template-columns: auto minmax(0, 1fr); align-items: start; }
.lidrij > .lidrij__knoppen { grid-column: 2; }
.lidrij > .contact__formulier { grid-column: 2; }
.beheer__telling { display: flex; align-items: center; }

/* ── het omslagbeeld in het palet van de bouwer ─────────────── */

.omslag { display: grid; gap: 8px; margin: 6px 0 4px; }
.omslag__beeld {
  display: block; width: 100%; height: auto; max-height: 160px; object-fit: cover;
  border-radius: 12px;
}
.omslag__weg {
  justify-self: start; background: none; border: 0; padding: 4px 0; cursor: pointer;
  font-family: var(--type); font-size: .8rem; color: rgba(154,52,18,.85);
  text-decoration: underline; text-underline-offset: 3px;
}

/* ── de bevestiging ─────────────────────────────────────────── */

.vraagdoek {
  position: fixed; inset: 0; z-index: 90;
  display: grid; place-items: center; padding: 24px;
  background: rgba(43,36,30,.35);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.bevestig {
  max-width: 440px; width: 100%;
  background: #FBF9F4; border-radius: 22px; padding: 28px 28px 24px;
  border: 1px solid rgba(255,255,255,.8);
  box-shadow: 0 30px 60px -30px rgba(34,31,26,.5);
}
.bevestig__tekst {
  margin: 0 0 22px; font-family: var(--type); font-size: 1rem; line-height: 1.6;
  color: var(--inkt);
}
/* Het veld in vraagTekst(). De tekst erboven houdt daarom minder ruimte
   onder zich dan bij een gewone ja/nee-vraag. */
.bevestig__tekst + .bevestig__veld { margin-top: -10px; }
.bevestig__veld {
  display: block; width: 100%; box-sizing: border-box; resize: vertical;
  font-family: var(--type); font-size: .98rem; line-height: 1.55; color: var(--inkt);
  background: #fff; border: 1px solid rgba(43,36,30,.22); border-radius: 12px;
  padding: 11px 13px;
  transition: border-color 160ms var(--ease-uit), box-shadow 160ms var(--ease-uit);
}
.bevestig__veld:focus {
  outline: 0; border-color: var(--groen);
  box-shadow: 0 0 0 3px rgba(58,107,68,.18);
}
.bevestig__veld::placeholder { color: rgba(43,36,30,.45); }
.bevestig__noot {
  margin: 9px 0 0; font-family: var(--type); font-size: .84rem; line-height: 1.5;
  color: rgba(43,36,30,.78);
}
.bevestig__noot + .bevestig__knoppen { margin-top: 20px; }
.bevestig__veld + .bevestig__knoppen { margin-top: 20px; }
.bevestig__knoppen { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.bevestig__knoppen .stempel[disabled] { opacity: .45; cursor: not-allowed; }
.stempel--rood { background: #9a3412; border-color: #9a3412; color: #fff; }
.stempel--rood:hover { background: #7a2e1f; border-color: #7a2e1f; color: #fff; }

/* het tandwiel-blok uit tuinkamer.css hergebruikt als "terug"-link */
a.kamer__beheer { text-decoration: none; }

@media (max-width: 860px) {
  .dashboard__blad { grid-template-columns: 1fr; padding-top: 96px; }
  .zijmenu {
    position: static;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
    gap: 10px; margin-bottom: 6px;
  }
}

/* ═══ Het voorbeeldvenster van de bouwer ═══════════════════════════
   Het stuk zoals het op de site komt, over het hele scherm, met bovenaan
   één balk: wat je ziet, een keuze computer/telefoon, en terug. Het kader
   zelf is de echte pagina in een iframe; op "Telefoon" krimpt het naar
   390px met een zachte rand, zodat je ziet hoe het op een gsm breekt. */
.voorbeeldvenster {
  position: fixed; inset: 0; z-index: 200;
  display: grid; grid-template-rows: auto minmax(0, 1fr);
  background: #DCD3C2;
}
.voorbeeldvenster__balk {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px clamp(14px, 3vw, 28px);
  background: #FBF9F4; border-bottom: 1px solid rgba(43,36,30,.12);
  font-family: var(--type); font-size: .92rem; color: var(--inkt);
}
.voorbeeldvenster__noot { color: rgba(43,36,30,.72); font-size: .84rem; }
.voorbeeldvenster__maat { display: flex; gap: 6px; margin-left: auto; }
.voorbeeldvenster__vak { display: grid; justify-items: center; overflow: auto; padding: 0; }
.voorbeeldvenster__kader {
  width: 100%; height: 100%; border: 0; background: #EFE7DA;
  transition: width 260ms var(--ease-uit);
}
.voorbeeldvenster__kader.is-smal {
  width: 390px; max-width: 100%; margin: 18px 0;
  height: calc(100% - 36px);
  border-radius: 28px; box-shadow: 0 0 0 10px #2B241E, 0 30px 60px -30px rgba(34,31,26,.6);
}