/* Instellingenformulier — gedeeld door de wp-admin metabox en het
 * organisator-dashboard op de front-end. Bewust sober en framework-loos. */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500;600&family=Montserrat:wght@400;500;600;700&display=swap');

/* De native "Publish"-box (status/zichtbaarheid/datum) is verwarrend naast
 * onze eigen Status-instelling en wordt daarom verborgen — niet verwijderd:
 * de verborgen nonce-/statusvelden erin blijven gewoon meesturen, alleen
 * "Feest opslaan" hieronder is het zichtbare opslaan-mechanisme. Zie
 * Cpt_Feest voor de forced-publish-filter die "Status: Concept" in die box
 * verder overbodig maakt. */
body.post-type-feest #submitdiv { display: none; }

.af-opslaan-rij { margin: 24px 0 4px; }
.af-opslaan-rij .button-primary { padding: 6px 18px; height: auto; font-size: 14px; }

/* wp-admin reset dit al globaal, maar op het front-end organisator-dashboard
 * (waar deze template ook geïncludeerd wordt) ontbreekt dat — zonder deze
 * reset telt de padding/rand van een input bovenop de 100%-breedte op, en
 * dat duwt het veld over de rand van zijn grid-kolom heen in de buurvelden. */
.af-instellingen, .af-instellingen * { box-sizing: border-box; }
.af-instellingen input, .af-instellingen select, .af-instellingen textarea, .af-instellingen button {
  font-family: inherit;
  font-size: 14px;
}

/* font-size hier (i.p.v. alleen op losse input/select/textarea/button-tags
 * hierboven): anders bleef gewone tekst ernaast (bijv. de "Betaald"-tekst
 * naast een checkbox, of "Totaal: ...") op de browser-standaardgrootte
 * staan terwijl de velden zelf al op 14px stonden — zichtbaar ongelijke
 * tekstgroottes binnen dezelfde rij. */
.af-instellingen { max-width: 900px; font-size: 14px; }

/* Organisatoren: een los, altijd-open blok (geen <details>-accordion zoals
 * de secties in instellingen-formulier.php) — dit is expliciet vereist om
 * "helemaal bovenin de pagina, los van het feestinstellingen-blok" te staan,
 * dus geen ondergeschikte/inklapbare sectie ertussen. */
.af-organisatoren-blok { border: 1px solid #dcdcd4; border-radius: 4px; padding: 18px 20px 20px; margin: 0 0 20px; }
.af-organisatoren-blok-kop { font-weight: 600; font-size: 17px; margin: 0 0 4px; }
.af-organisator-rij input[type="tel"] { flex: 0 0 160px; }
.af-dashboard .af-organisatoren-blok { background: var(--af-dash-kaart); border-color: var(--af-dash-rand); }
.af-dashboard .af-organisatoren-blok-kop { font-family: 'Cormorant Garamond', serif; font-size: 24px; font-weight: 500; color: var(--af-dash-goud); }

.af-voorbeeld { margin: 0 0 24px; border: 1px solid #dcdcd4; border-radius: 4px; overflow: hidden; }
.af-voorbeeld-kop { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #f7f7f5; border-bottom: 1px solid #dcdcd4; }
.af-voorbeeld-kop .af-hulptekst { margin: 0; flex: 1; }
.af-voorbeeld-iframe { display: block; width: 100%; height: 640px; border: 0; background: #fff; }
.af-voorbeeld-laden .af-voorbeeld-iframe { opacity: 0.5; }
.af-voorbeeld-fout { padding: 10px 14px; background: #fbe9e7; color: #8a2c22; font-size: 13px; border-bottom: 1px solid #dcdcd4; word-break: break-word; }
/* Elke sectie is een <details> (dicht by default) i.p.v. een <fieldset> —
 * dit formulier is met alle onderdelen erbij (vormgeving, kosten,
 * cadeaulijst, ...) te lang geworden om in één keer overzichtelijk te
 * tonen. Velden binnen een gesloten <details> blijven gewoon meesturen bij
 * opslaan (alleen de weergave is dicht, niet de content), dus dit is een
 * zuiver visuele wijziging. */
.af-instellingen .af-sectie {
  border: 1px solid #dcdcd4;
  border-radius: 4px;
  padding: 0 20px 8px;
  margin: 0 0 14px;
}
.af-instellingen .af-sectie[open] { padding-top: 8px; }
/* Los "Opslaan"-knopje onderaan elke sectie: het formulier is één geheel
 * (dit knopje slaat, net als de knop helemaal onderaan de pagina, gewoon
 * alles op) — puur zodat je niet voor elke wijziging naar beneden hoeft te
 * scrollen naar de ene grote knop. */
.af-sectie-opslaan { margin: 18px 0 4px; padding-top: 14px; border-top: 1px solid #e2e4e7; }
.af-dashboard .af-sectie-opslaan { border-top-color: var(--af-dash-rand); }
.af-instellingen .af-sectie-kop {
  font-weight: 600;
  font-size: 17px;
  padding: 16px 8px;
  margin: 0 -8px;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  user-select: none;
}
.af-instellingen .af-sectie-kop::-webkit-details-marker { display: none; }
.af-instellingen .af-sectie-kop::before {
  content: '▸';
  display: inline-block;
  margin-right: 10px;
  font-size: 13px;
  color: #888;
  transition: transform 0.15s ease;
}
.af-instellingen .af-sectie[open] > .af-sectie-kop::before { transform: rotate(90deg); }
.af-veld { margin: 0 0 16px; }
.af-veld label { display: block; font-weight: 600; margin-bottom: 4px; }
.af-veld input[type="text"],
.af-veld input[type="email"],
.af-veld input[type="tel"],
.af-veld input[type="url"],
.af-veld input[type="date"],
.af-veld input[type="number"],
.af-veld select,
.af-veld textarea {
  width: 100%;
  max-width: 480px;
  padding: 8px 10px;
  border: 1px solid #ccc;
  border-radius: 3px;
}
.af-veld textarea { max-width: 100%; }
.af-veld.af-veld-inline { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.af-veld.af-veld-inline label { margin: 0; }
.af-hulptekst { display: block; font-size: 12px; color: #666; margin-top: 4px; max-width: 60ch; }
.af-inline-checkbox { display: inline-flex; align-items: center; gap: 6px; font-weight: 400; margin-right: 14px; }

.af-veld .af-code-invoer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; }
.af-veld .af-code-invoer input[type="text"] { width: auto; flex: 1 1 200px; max-width: 260px; text-transform: uppercase; letter-spacing: 0.05em; }
.af-veld .af-code-invoer input[type="text"]:disabled { opacity: 0.6; cursor: not-allowed; }
.af-code-vergrendel-label input:disabled { cursor: not-allowed; }

.af-veld-groep { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; margin-bottom: 16px; }

.af-kosten-verdeling { margin-top: 10px; }
.af-kosten-verdeling-tabel { border-collapse: collapse; font-size: 13px; }
.af-kosten-verdeling-tabel td { padding: 3px 14px 3px 0; }
.af-kleur-invoer { display: flex; align-items: center; gap: 8px; }
.af-kleur-invoer input[type="color"] {
  flex: none; width: 36px; height: 36px; padding: 2px; border: 1px solid #ccc; border-radius: 3px; background: none; cursor: pointer;
}
.af-kleur-invoer input[type="text"] { width: 110px !important; }

.af-template-preview { display: block; margin-top: 10px; max-width: 320px; width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px; }

.af-media-veld { margin-bottom: 12px; }
.af-media-preview { border: 1px solid #ddd; border-radius: 3px; }
/* Eigen breedte i.p.v. de generieke .af-input-smal-klasse (90px vast) — die
 * knipte de langere positie-opties ("Links naast de tekst") onleesbaar af.
 * flex-basis:auto + een ruime min-width laat elke select precies zo breed
 * worden als zijn langste optie nodig heeft. */
.af-media-grootte-positie { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.af-media-grootte-positie select { flex: 0 1 auto; min-width: 160px; width: auto; }

/* Grootte/positie/pixelmaat achter een dichtgeklapte <details> i.p.v.
 * meteen alle velden open en breed tonen: bij een repeater met meerdere
 * foto's/video's naast elkaar (programma, praktische info, ...) oogde dit
 * anders al snel overweldigend druk. Bewust sober/klein gehouden — dit is
 * een fijnere, optionele instelling, geen hoofdveld. */
.af-media-afmeting-details { margin-top: 6px; font-size: 12px; }
.af-media-afmeting-details summary {
  cursor: pointer;
  color: #666;
  list-style: none;
  user-select: none;
  display: inline-block;
}
.af-media-afmeting-details summary::-webkit-details-marker { display: none; }
.af-media-afmeting-details summary::before { content: '▸ '; }
.af-media-afmeting-details[open] summary::before { content: '▾ '; }
.af-media-afmeting-details[open] {
  padding: 10px 12px;
  margin-top: 8px;
  max-width: 300px;
  background: #f7f7f5;
  border: 1px solid #e2e4e7;
  border-radius: 3px;
}
.af-media-afmeting-pixels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.af-media-afmeting-pixels input[type="number"] {
  width: 85px; flex: 0 0 auto; padding: 3px 6px; border: 1px solid #ccc; border-radius: 3px; font-size: 11px;
}
.af-media-afmeting-pixels .af-hulptekst { flex-basis: 100%; margin-top: 2px; }

.af-code-editor { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 13px; }

.af-repeater-rijen { margin-bottom: 10px; }
.af-repeater-rij {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-bottom: 8px;
  padding: 8px;
  background: #f7f7f5;
  border-radius: 3px;
}
/* Repeater-rijen zitten niet in een .af-veld-wrapper (zie regel 76-88
 * hierboven), dus zonder deze eigen padding/rand/afronding vielen ze terug
 * op de kale, per-browser-verschillende standaardopmaak van <input>/
 * <select> — zichtbaar ongelijke veldhoogtes/-uitlijning binnen dezelfde
 * rij. :not([type="checkbox"]) omdat een checkbox (bijv. "Betaald") deze
 * padding/rand niet moet krijgen. */
.af-repeater-rij input:not([type="checkbox"]), .af-repeater-rij select, .af-repeater-rij textarea {
  flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid #ccc; border-radius: 3px;
}
.af-repeater-rij .af-input-smal { flex: 0 0 90px; }
.af-repeater-rij .af-rij-verwijderen { flex: 0 0 auto; line-height: 1; }
.af-formulierveld-rij { flex-wrap: wrap; }
.af-formulierveld-rij .af-veld-label { flex-basis: 100%; }
template.af-repeater-blueprint { display: none; }

/* Cadeaulijst-rij: gestapeld in twee subrijen (tekstvelden erboven, media +
 * statustekst eronder) in plaats van alles in één flex-rij te proppen —
 * met wisselende veldbreedtes (omschrijving, video-URL) en een
 * mediaplaatje ertussen liep dat anders al snel rommelig door elkaar. */
.af-cadeau-item-rij { flex-direction: column; align-items: stretch; gap: 8px; }
.af-repeater-rij-hoofd { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.af-repeater-rij-sub { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.af-cadeau-omschrijving { flex: 2 1 200px; }
.af-cadeau-video { flex: 1 1 160px; }
.af-cadeau-link { flex: 1 1 160px; }

/* Kostenregel: zelfde gestapelde hoofd/sub-opzet als de cadeaulijst-rij
 * hierboven (naam/categorie/aantal/bedrag prominent erboven, opmerkingen/
 * link/totaal/betaald-vinkje ondergeschikt eronder) — loste dezelfde
 * "allemaal op een kluitje"-uitlijningsklacht op. */
.af-kostenregel-rij { flex-direction: column; align-items: stretch; gap: 10px; }
/* align-items: flex-end (i.p.v. de standaard "center" hierboven): AANTAL/
 * € per stuk hebben een eigen klein label erboven (.af-veld-klein) en zijn
 * daardoor als geheel hoger dan de kale naam/categorie/aantal-type-velden
 * ernaast — met "center" kwam het BOVENSTE randje van elk veld daardoor niet
 * gelijk te liggen (de kale velden staken boven de invoervelden met label
 * uit). Met "flex-end" liggen de ONDERkanten van alle velden wél gelijk,
 * wat er bij een rij met deze mix van wel/niet-gelabelde velden verreweg
 * het netst uitziet. */
.af-kostenregel-rij .af-repeater-rij-hoofd { gap: 14px; align-items: flex-end; }
.af-kostenregel-naam { flex: 2 1 180px; }
.af-kostenregel-rij .af-repeater-rij-sub .af-kostenregel-opmerkingen,
.af-kostenregel-rij .af-repeater-rij-sub .af-kostenregel-link { flex: 1 1 160px; }
.af-kosten-regel-totaal { font-size: 12px; opacity: 0.75; white-space: nowrap; }

/* Klein label boven aantal/bedrag-per-stuk (zie templates/kosten-formulier.php)
 * — anders was op het oog niet te zien welk van de twee kale getalvelden wat
 * betekende, zeker zodra bedrag_per_stuk op "0" stond (placeholder-tekst
 * verdwijnt dan, een label erboven blijft altijd zichtbaar). */
.af-veld-klein { display: flex; flex-direction: column; gap: 2px; }
.af-veld-klein-label { font-size: 10px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.6; }
.af-veld-klein .af-input-smal { flex: none; }

.af-kostenregel-link-wrap { display: inline-flex; align-items: center; gap: 4px; flex: 1 1 160px; }
.af-kostenregel-link-wrap .af-kostenregel-link { flex: 1 1 auto; }
.af-kostenregel-link-openen { flex: none; text-decoration: none; font-size: 15px; }

.af-kosten-categorieen-beheer { margin: 4px 0 16px; }
.af-kosten-categorieen-beheer summary { cursor: pointer; user-select: none; display: inline-block; }
.af-kosten-categorieen-beheer summary::-webkit-details-marker { display: none; }
/* Kleuren bewust altijd licht/hardcoded (i.p.v. de omgevings-tekstkleur te
 * erven) — dit paneel is een neutrale, altijd-witte "popover"-kaart, zowel
 * in wp-admin als op het (donkere) front-end dashboard. Zonder een eigen
 * "color" hier erfde de tekst de lichte --af-dash-tekst van .af-dashboard
 * (bedoeld voor tekst OP de donkere achtergrond), wat op deze witte kaart
 * vrijwel onleesbaar licht-op-licht werd. */
.af-kosten-categorieen-paneel { margin-top: 8px; padding: 12px; background: #fff; color: #1d2327; border: 1px solid #dcdcde; border-radius: 6px; max-width: 420px; }

.af-kosten-categorieen-lijst { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.af-kosten-categorieen-lijst li { background: #f0f0ef; color: #1d2327; border-radius: 999px; padding: 4px 6px 4px 12px; font-size: 13px; display: inline-flex; align-items: center; gap: 4px; }
.af-kosten-categorieen-lijst button { padding: 0 4px; font-size: 15px; }

.af-kosten-categorie-toevoegen-form { display: flex; gap: 6px; align-items: center; }
.af-kosten-categorie-toevoegen-form input[type="text"] { flex: 1 1 auto; background: #fff; color: #1d2327; border: 1px solid #8c8f94; }

/* Organisator-dashboard (front-end): zelfde merkidentiteit als de voorpagina
 * met de code (donkere achtergrond, Cormorant Garamond voor koppen, goud als
 * accentkleur) in plaats van een generieke lichte "admin"-look. */
:root {
  --af-dash-bg: #14150F;
  --af-dash-kaart: #1C1D16;
  --af-dash-rand: #35362A;
  --af-dash-tekst: #F1EEE3;
  --af-dash-gedempt: #A3A492;
  --af-dash-goud: #C7A96B;
  --af-dash-goud-hover: #E0C68F;
}
body.af-dashboard-body { margin: 0; background: var(--af-dash-bg); }
.af-dashboard, .af-dashboard * { box-sizing: border-box; }
/* 1000px liet de Genodigden/Aanmeldingen-tabellen (8 kolommen) op een
 * gewoon breed beeldscherm al veel te veel in de breedte inkrimpen — elke
 * cel moest daardoor 4-6 regels tekst wrappen i.p.v. de max. 2 die met wat
 * meer ruimte wél passen. Breder dashboard + table min-width hieronder. */
.af-dashboard { max-width: 1300px; margin: 0 auto; padding: 0 20px 60px; font-family: Montserrat, sans-serif; color: var(--af-dash-tekst); }
.af-dashboard input, .af-dashboard select, .af-dashboard textarea, .af-dashboard button { font-family: inherit; }
.af-dashboard a { color: var(--af-dash-goud); }

.af-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 20px;
  padding: 30px 4px 20px;
  margin-bottom: 30px;
  border-bottom: 1px solid var(--af-dash-rand);
}
.af-topbar-titel {
  font-family: 'Cormorant Garamond', serif;
  font-size: 34px;
  font-weight: 500;
  margin-right: auto;
  color: var(--af-dash-tekst);
}
.af-tabs { display: flex; gap: 8px; flex-wrap: wrap; }
/* ".af-dashboard a" (0,1,1) hierboven zou een simpele ".af-tab"-klasse (0,1,0)
 * qua specificiteit overstemmen — vandaar hier ".af-topbar .af-tab" (0,2,0),
 * anders krijgt zowel de gewone als de actieve tab evengoed de goud-kleurige
 * linktekst uit die algemene regel, onleesbaar tegen een eigen goud-vlak. */
.af-topbar .af-tab {
  display: inline-block;
  padding: 9px 20px;
  border-radius: 999px;
  text-decoration: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--af-dash-gedempt);
  background: transparent;
  border: 1px solid var(--af-dash-rand);
}
.af-topbar .af-tab:hover { border-color: var(--af-dash-goud); color: var(--af-dash-tekst); }
.af-topbar .af-tab-actief, .af-topbar .af-tab-actief:hover { background: var(--af-dash-goud); border-color: var(--af-dash-goud); color: #14150F; }
.af-topbar-acties { display: flex; gap: 18px; align-items: center; }
.af-topbar-acties a { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; letter-spacing: 0.04em; color: var(--af-dash-gedempt); text-decoration: underline; }
.af-topbar-acties a:hover { color: var(--af-dash-tekst); }
.af-topbar-acties .af-icoon { flex: none; }

.af-dashboard-inhoud { background: transparent; }

.af-dashboard .af-feesten-lijst { list-style: none; margin: 20px 0; padding: 0; }
.af-dashboard .af-feesten-lijst li { margin-bottom: 10px; }
.af-dashboard .af-feesten-lijst a {
  display: inline-block; padding: 14px 22px; background: var(--af-dash-kaart); border: 1px solid var(--af-dash-rand); border-radius: 6px; text-decoration: none; color: var(--af-dash-tekst);
}
.af-dashboard .af-feesten-lijst a:hover { border-color: var(--af-dash-goud); }

.af-dashboard .button, .af-dashboard button, .af-dashboard input[type="submit"] {
  display: inline-block; padding: 12px 24px; background: var(--af-dash-goud); color: #14150F; border: 0; border-radius: 999px;
  cursor: pointer; text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
}
.af-dashboard .button:hover, .af-dashboard button:hover, .af-dashboard input[type="submit"]:hover { background: var(--af-dash-goud-hover); }
.af-dashboard .button-secundair { background: transparent; color: var(--af-dash-goud); border: 1px solid var(--af-dash-goud); }
.af-dashboard .button-secundair:hover { background: rgba(199,169,107,0.12); color: var(--af-dash-goud-hover); }

/* .button-link (bijv. de "Markeer als nieuwe gast"/"Verwijderen"-links in
 * tabelcellen, zie class-organisator-dashboard.php genodigde_cel_html() e.d.)
 * is bewust een subtiele inline tekstlink, geen primaire actieknop — zonder
 * deze regel erfde zo'n <button class="button-link ..."> toch de grote,
 * goudgekleurde pil-knopstijl hierboven (elk <button>-element wordt
 * geraakt), met een veel te dominante/wrappende knop in een tabelcel tot
 * gevolg. */
.af-dashboard button.button-link {
  display: inline; padding: 0; background: none; color: var(--af-dash-goud); border: 0; border-radius: 0;
  font-size: inherit; font-weight: 400; letter-spacing: normal; text-transform: none; text-decoration: underline;
}
.af-dashboard button.button-link:hover { background: none; color: var(--af-dash-goud-hover); }

/* Geen wrapper-element om input+knop in de PHP-kant (class-organisator-login.php)
 * - zonder deze flex-layout leunt de ruimte ertussen alleen op de
 * inline-whitespace tussen de tags, die wegvalt zodra het inputveld door
 * max-width:100% de volle breedte pakt (elk scherm smaller dan 320px, dus
 * vrijwel elke telefoon) en de knop er zonder marge vlak onder komt te
 * staan. */
.af-dashboard .af-login-form { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; max-width: 320px; }
.af-dashboard .af-login-form input[type="email"] {
  padding: 12px 14px; width: 100%; background: var(--af-dash-kaart); border: 1px solid var(--af-dash-rand); border-radius: 4px; color: var(--af-dash-tekst);
}

/* De inlog-aanvraagpagina is voor een organisator net zo goed een "poort"
 * naar zijn feest als de code-pagina dat is voor gasten (zie voorpagina.css)
 * - zelfde kleuren staan al vast via de --af-dash-*-variabelen hierboven,
 * hier alleen de centrerende lay-out en typografie om ook echt zo aan te
 * voelen in plaats van als generiek instellingenscherm. */
.af-login-gateway {
  min-height: 80vh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px;
}
.af-login-gateway .af-login-icoon { width: 40px; height: 40px; border-radius: 50%; margin-bottom: 16px; }
.af-login-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.32em; text-transform: uppercase; color: var(--af-dash-goud); }
.af-login-gateway h1 {
  font-family: 'Cormorant Garamond', serif; font-weight: 400; font-size: clamp(32px, 5vw, 48px); margin: 16px 0 0; color: var(--af-dash-tekst);
}
.af-login-lead { color: var(--af-dash-gedempt); max-width: 40ch; margin: 8px 0 28px; }
.af-login-gateway .af-melding { max-width: 360px; }
.af-login-gateway .af-login-form { align-items: center; }
.af-login-gateway .af-login-form input[type="email"] { text-align: center; }

/* Kaart-look voor instellingensecties en het live voorbeeld, in dezelfde
 * donkere merkidentiteit als de rest van het dashboard. */
.af-dashboard .af-instellingen .af-sectie { background: var(--af-dash-kaart); border-color: var(--af-dash-rand); }
.af-dashboard .af-instellingen .af-sectie-kop {
  font-family: 'Cormorant Garamond', serif;
  font-size: 24px;
  font-weight: 500;
  color: var(--af-dash-goud);
}
.af-dashboard .af-instellingen .af-sectie-kop::before { color: var(--af-dash-goud); }
.af-dashboard .af-veld label { color: var(--af-dash-tekst); }
.af-dashboard .af-hulptekst { color: var(--af-dash-gedempt); }
/* Bewust op .af-instellingen zelf (niet alleen .af-veld): de velden binnen
 * een .af-repeater-rij (formulierbouwer) zitten niet in een .af-veld-wrapper
 * en zouden anders in het felwitte browserstandaard blijven staan — een
 * storend contrast tussen de blokken. */
.af-dashboard .af-instellingen input[type="text"],
.af-dashboard .af-instellingen input[type="email"],
.af-dashboard .af-instellingen input[type="tel"],
.af-dashboard .af-instellingen input[type="url"],
.af-dashboard .af-instellingen input[type="date"],
.af-dashboard .af-instellingen input[type="number"],
.af-dashboard .af-instellingen select,
.af-dashboard .af-instellingen textarea {
  background: var(--af-dash-bg); border-color: var(--af-dash-rand); color: var(--af-dash-tekst);
}
.af-dashboard .af-instellingen input:focus,
.af-dashboard .af-instellingen select:focus,
.af-dashboard .af-instellingen textarea:focus {
  outline: none; border-color: var(--af-dash-goud);
}
.af-dashboard .af-instellingen ::placeholder { color: var(--af-dash-gedempt); opacity: 0.8; }

/* Repeater-rijen (formulierbouwer, programma, praktische info): zelfde
 * kaart-look als .af-sectie/.af-voorbeeld, zodat het net zo'n "blok" oogt
 * als de rest van het instellingenformulier. */
.af-dashboard .af-repeater-rij {
  background: var(--af-dash-kaart);
  border: 1px solid var(--af-dash-rand);
  border-radius: 6px;
  padding: 14px;
}
.af-dashboard .af-repeater-rij .af-rij-verwijderen {
  padding: 6px 14px;
  background: transparent;
  color: var(--af-dash-gedempt);
  border: 1px solid var(--af-dash-rand);
}
.af-dashboard .af-repeater-rij .af-rij-verwijderen:hover { color: #e8b3a4; border-color: #e8b3a4; }
.af-dashboard .af-inline-checkbox { color: var(--af-dash-tekst); }
.af-dashboard .af-voorbeeld { background: var(--af-dash-kaart); border-color: var(--af-dash-rand); }
.af-dashboard .af-voorbeeld-kop { background: transparent; border-color: var(--af-dash-rand); }
.af-dashboard .af-voorbeeld-kop .af-hulptekst { color: var(--af-dash-gedempt); }
.af-dashboard .af-opslaan-rij { position: sticky; bottom: 0; padding: 16px 0; background: linear-gradient(to top, var(--af-dash-bg) 60%, transparent); }

.af-aanmeldingen-aantal { font-size: 14px; color: var(--af-dash-gedempt); margin: 0 0 16px; }
.af-export-knoppen { margin: 0 0 20px; display: flex; gap: 10px; flex-wrap: wrap; }
.af-tabel-wrap { background: var(--af-dash-kaart); border: 1px solid var(--af-dash-rand); border-radius: 6px; overflow-x: auto; }

/* Zonder min-width kromp deze tabel (bij de Genodigden-tab tot 8 kolommen)
 * op een gewoon breed scherm nog steeds mee tot elke cel amper woorden kon
 * laten passen — met een min-width kán de tabel breder worden dan zijn
 * omhulsel, en vangt .af-tabel-wrap's overflow-x hierboven dat verschil op
 * met een horizontale scrollbalk i.p.v. onleesbaar samengeperste kolommen. */
.af-dashboard table.af-aanmeldingen-tabel { width: 100%; min-width: 960px; border-collapse: collapse; margin: 0; }
.af-dashboard table.af-aanmeldingen-tabel th, .af-dashboard table.af-aanmeldingen-tabel td { border: 1px solid var(--af-dash-rand); padding: 10px 12px; text-align: left; font-size: 14px; vertical-align: top; }
.af-dashboard table.af-aanmeldingen-tabel th { background: rgba(255,255,255,0.03); font-weight: 600; color: var(--af-dash-goud); }
.af-dashboard table.af-aanmeldingen-tabel tbody tr:hover { background: rgba(255,255,255,0.03); }
/* Op desktop blijven meerdere stukjes info/acties in één cel (bijv. Status:
 * badge + knop) net als in wp-admin's compacte .widefat-tabellen op één
 * regel, met een " — " als scheiding tussen elk stukje. Pas onder de mobiele
 * drempel hieronder worden dit losse blokjes (kaart-layout). */
.af-dashboard table.af-aanmeldingen-tabel td > * + * { margin-left: 6px; }
.af-dashboard table.af-aanmeldingen-tabel td > * + *::before { content: '\2014\00a0'; opacity: 0.6; }

/* Onder de WP-eigen mobiele drempel (782px, zelfde als wp-admin's eigen
 * responsive tabellen) wordt elke rij een losse "kaart" met de kolomnaam
 * als klein label boven elke waarde — een tabel met 8 smalle kolommen past
 * simpelweg niet leesbaar op een telefoonscherm. Zie data-label="..." op
 * elke <td> in class-organisator-dashboard.php. */
@media (max-width: 782px) {
  .af-dashboard table.af-aanmeldingen-tabel thead { display: none; }
  .af-dashboard table.af-aanmeldingen-tabel, .af-dashboard table.af-aanmeldingen-tabel tbody,
  .af-dashboard table.af-aanmeldingen-tabel tr, .af-dashboard table.af-aanmeldingen-tabel td { display: block; width: 100%; min-width: 0; }
  .af-dashboard table.af-aanmeldingen-tabel tr { margin-bottom: 14px; border: 1px solid var(--af-dash-rand); border-radius: 6px; overflow: hidden; }
  .af-dashboard table.af-aanmeldingen-tabel tr:last-child { margin-bottom: 0; }
  .af-dashboard table.af-aanmeldingen-tabel td { border: 0; border-bottom: 1px solid var(--af-dash-rand); }
  .af-dashboard table.af-aanmeldingen-tabel td:last-child { border-bottom: 0; }
  .af-dashboard table.af-aanmeldingen-tabel td:empty { display: none; }
  .af-dashboard table.af-aanmeldingen-tabel td[data-label]::before {
    content: attr(data-label); display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--af-dash-goud); margin-bottom: 4px;
  }
  .af-dashboard table.af-aanmeldingen-tabel td > * { display: block; }
  .af-dashboard table.af-aanmeldingen-tabel td > * + * { margin-top: 6px; margin-left: 0; }
  .af-dashboard table.af-aanmeldingen-tabel td > * + *::before { content: none; }
}
.af-verwijder-aanmelding { color: #d98a72; text-decoration: none; }
.af-verwijder-aanmelding:hover { color: #e8b3a4; }
.af-verwijder-aanmelding:disabled { opacity: 0.6; cursor: default; }

/* Zonder eigen max-width trekt een <textarea> met width:100% op een breed
 * wp-admin/dashboard-scherm helemaal door tot de rand — bij de vrij korte
 * regels van een e-mail/WhatsApp-tekst ("Beste [naam],") oogt dat als een
 * hoop lege ruimte rechts van de tekst. Een leesbare kolombreedte (net als
 * een gewone e-mailclient) lost dat op. */
.af-uitnodiging { max-width: 640px; }
.af-uitnodiging-blok { margin: 0 0 28px; }
.af-uitnodiging-blok h3 { margin: 0 0 4px; font-size: 15px; }
.af-uitnodiging-blok textarea { width: 100%; max-width: 100%; padding: 10px 12px; border: 1px solid #ccc; border-radius: 3px; font-family: inherit; box-sizing: border-box; }
.af-uitnodiging-pdf-instelling { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(127,127,127,0.2); }
.af-uitnodiging-pdf-instelling .af-hulptekst { margin: 6px 0 0; }
.af-uitnodiging-foto-instelling { margin-top: 14px; padding-top: 14px; border-top: 1px solid rgba(127,127,127,0.2); }
.af-uitnodiging-foto-instelling label { display: block; margin-bottom: 8px; }
.af-uitnodiging-foto-instelling .af-hulptekst { margin: 6px 0 0; }
.af-uitnodiging-kopieerveld { display: flex; align-items: center; gap: 8px; }
.af-uitnodiging-kopieerveld input[type="text"] { flex: 1 1 auto; width: auto; max-width: none; box-sizing: border-box; }
.af-uitnodiging-knoppenrij { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
/* ">" met opzet: geeft alleen de losstaande kopieerknop bij de e-mailtekst
 * (rechtstreeks kind van .af-veld) een eigen margin — bij de WhatsApp-tekst
 * zit dezelfde knop ín .af-uitnodiging-knoppenrij naast "Open in WhatsApp",
 * die al zijn eigen margin-top heeft. Zonder deze ">" kreeg de knop dáár
 * een EXTRA margin-top bovenop die van de rij, waardoor hij een paar pixels
 * lager kwam te staan dan de knop ernaast. */
.af-uitnodiging-blok .af-veld > button.af-kopieer-tekst { margin-top: 8px; }

.af-dashboard .af-uitnodiging-blok textarea,
.af-dashboard .af-uitnodiging-blok input[type="text"],
.af-dashboard .af-uitnodiging-blok input[type="email"],
.af-dashboard .af-uitnodiging-blok input[type="tel"],
.af-dashboard .af-uitnodiging-blok select { background: var(--af-dash-bg); border-color: var(--af-dash-rand); color: var(--af-dash-tekst); }
.af-dashboard .af-uitnodiging-blok h3 { color: var(--af-dash-goud); font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: 20px; }

.af-dashboard .af-melding { padding: 12px 16px; border-radius: 4px; margin: 0 0 20px; }
.af-dashboard .af-melding-fout { background: #3a201b; color: #e8b3a4; }
.af-dashboard .af-melding-ok { background: #1d2c17; color: #b9d9a3; }

.af-subnav { font-size: 13px; margin: 0 0 14px; }
.af-subnav a { text-decoration: none; }
.af-subnav a.af-subnav-actief { font-weight: 700; text-decoration: underline; }
.af-dashboard .af-subnav a { color: var(--af-dash-gedempt); }
.af-dashboard .af-subnav a.af-subnav-actief { color: var(--af-dash-goud); }

.af-status-ok { color: #2a7a2a; }
.af-status-wacht { color: #a06a2a; }
.af-status-fout { color: #b32d2e; }
.af-dashboard .af-status-ok { color: #b9d9a3; }
.af-dashboard .af-status-wacht { color: #e0c68f; }
.af-dashboard .af-status-fout { color: #e8b3a4; }
.af-hulptekst-inline { font-size: 12px; opacity: 0.75; }

.af-genodigden-inline-form input[type="text"],
.af-genodigden-inline-form input[type="email"] { width: auto; max-width: 160px; display: inline-block; }
.af-genodigden-inline-form input[type="number"] { width: 52px; display: inline-block; }
.af-genodigden-inline-form { display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }

/* Echte "kaartjes" in plaats van kale tekst: witte kaart, subtiele schaduw
 * en een gekleurde streep bovenaan als accent — zowel in wp-admin (blauw,
 * WP's eigen accentkleur) als op het front-end dashboard (goud, dezelfde
 * accentkleur als de rest van dat thema). */
/* CSS grid i.p.v. flex-wrap: bij flex-wrap kreeg een tegel die alleen op de
 * laatste rij overbleef alleen zijn eigen inhoud-breedte (geen flex-basis),
 * en oogde dan duidelijk smaller/anders dan de volle rij(en) erboven. Met
 * een grid-kolomraster krijgt elke tegel, ook op een onvolledige laatste
 * rij, altijd exact dezelfde kolombreedte. */
.af-dashboard-tegels { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; margin: 14px 0 24px; }
.af-tegel {
  background: #fff; border: 1px solid #e2e4e7; border-top: 3px solid #2271b1;
  border-radius: 6px; padding: 14px 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  container-type: inline-size; /* zie .af-tegel-getal: laat het getal meeschalen met de eigen tegelbreedte */
}
/* clamp() met cqi (percentage van de tegel-eigen breedte, niet de viewport)
 * i.p.v. een vaste px-waarde: een groter bedrag (kosten kunnen oplopen tot
 * enkele tonnen, "€ 500.000,00") past hierdoor altijd binnen de tegel, ook
 * op een smalle tegel (bijv. maar 2 tegels op een rij) — bij een kort getal
 * ("2") blijft de tekst gewoon prettig leesbaar-groot i.p.v. onnodig klein. */
.af-tegel-getal { display: block; font-size: clamp(16px, 13cqi, 28px); font-weight: 700; line-height: 1.15; color: #1d2327; white-space: nowrap; }
.af-tegel-label { display: block; font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #787c82; margin-top: 5px; }
.af-dashboard .af-tegel {
  background: var(--af-dash-kaart); border-color: var(--af-dash-rand); border-top: 3px solid var(--af-dash-goud);
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
.af-dashboard .af-tegel-getal { color: var(--af-dash-goud); font-family: 'Cormorant Garamond', serif; font-weight: 500; font-size: clamp(18px, 14cqi, 30px); }
.af-dashboard .af-tegel-label { color: var(--af-dash-gedempt); }
.af-aanmeldingen-tabel .af-genodigden-koppel-select { max-width: 160px; }

@media (max-width: 600px) {
  .af-topbar { flex-direction: column; align-items: flex-start; }
  .af-topbar-titel { margin-right: 0; }
}