/* Basisstyling voor het CMS zelf (internal/core/admin), niet voor de
 * publieke tenant-sites. Bewust tenant-neutraal (grijs/blauw) — dit bestand
 * hoort bij internal/core en mag dus geen tenant-kleur bevatten, zie
 * CLAUDE.md/ARCHITECTURE.md. Doel: leesbaar en bruikbaar, geen eigen
 * designsysteem — de bestaande semantische classes in web/templates/core/
 * (.cms-list, .cms-form, .cms-nav, .notice, .error, .hint, .auth,
 * .pagination) plus kale HTML-elementen (table/form/label/input/button)
 * zijn de enige haakjes; er zijn geen templates aangepast voor dit bestand.
 */

:root {
	--admin-bg: #f4f5f7;
	--admin-surface: #ffffff;
	--admin-border: #d9dce1;
	--admin-text: #1f2430;
	--admin-text-muted: #5b6270;
	--admin-accent: #2f5fda;
	--admin-accent-hover: #24449e;
	--admin-on-accent: #ffffff;
	--admin-danger: #b3261e;
	--admin-danger-bg: #fbe9e7;
	--admin-success: #1e6b3a;
	--admin-success-bg: #e6f4ea;
	--admin-warning: #9a5b00;
	--admin-warning-bg: #fdf3e1;
	--admin-radius: 6px;
	/* Kaarten/dialogen van de editor (iteratie 8c) — iets ronder en met een
	 * zachte schaduw, zodat ze als losse "vlakken" boven de grijze achtergrond
	 * liggen. */
	--admin-radius-lg: 10px;
	--admin-shadow-sm: 0 1px 2px rgba(16, 24, 40, 0.05);
	--admin-shadow-lg: 0 24px 48px -12px rgba(16, 24, 40, 0.3);
	--admin-focus-ring: 0 0 0 3px rgba(47, 95, 218, 0.25);
	/* Eén afgesproken breedte voor "een kaart met invoervelden" (het
	 * bewerkformulier, de losstaande Galerij-sectie, de inzending-detail-
	 * lijst) — punt was dat het formulier en Galerij vroeger niet dezelfde
	 * breedte hadden; nu delen ze 'm allebei via deze ene variabele. */
	--cms-content-max-width: 720px;
}

* {
	box-sizing: border-box;
}

body {
	margin: 0;
	background: var(--admin-bg);
	color: var(--admin-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.5;
}

main {
	max-width: 960px;
	margin: 0 auto;
	padding: 1.5rem 1.25rem 4rem;
}

h1 {
	font-size: 1.5rem;
	margin: 0 0 1rem;
}

a {
	color: var(--admin-accent);
}

a:hover {
	color: var(--admin-accent-hover);
}

p.hint {
	color: var(--admin-text-muted);
	font-size: 0.9rem;
}

p.notice,
p.error,
.auth p[role="alert"] {
	padding: 0.6rem 0.9rem;
	border-radius: var(--admin-radius);
	margin: 0 0 1rem;
}

p.notice {
	background: var(--admin-success-bg);
	color: var(--admin-success);
}

p.error,
.auth p[role="alert"] {
	background: var(--admin-danger-bg);
	color: var(--admin-danger);
}

/* Permanente linker sidebar (AdminChrome, cms_shared.templ) — op ELK
 * ingelogd scherm, niet meer alleen op Dashboard, en niet meer een
 * horizontale topbar (dat was de eerste opzet — Jacco's expliciete
 * vervolgvraag was links, met iconen, gegroepeerd naar Content/
 * Instellingen/Gebruiker, met het oog op schaalbaarheid: een groeiende
 * platte lijst boven in beeld wrapt lelijk, een sidebar met groepen niet).
 * `.cms-shell` is de flex-rij van sidebar + inhoud; `adminContentNavItems`/
 * `adminSettingsNavItems` (cms_shared.templ) zijn de enige plek die weet
 * welke secties er zijn — een nieuwe sectie is daar één regel. */
.cms-shell {
	display: flex;
	align-items: stretch;
}

.cms-sidebar {
	display: flex;
	flex-direction: column;
	flex: 0 0 220px;
	width: 220px;
	background: var(--admin-surface);
	border-right: 1px solid var(--admin-border);
	min-height: 100vh;
	padding: 1rem 0.75rem;
	position: sticky;
	top: 0;
	align-self: flex-start;
}

.cms-sidebar__brand {
	display: block;
	font-weight: 700;
	font-size: 1.15rem;
	color: var(--admin-text);
	text-decoration: none;
	padding: 0.25rem 0.5rem;
	margin-bottom: 1rem;
}

.cms-sidebar__group {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-bottom: 1.25rem;
}

.cms-sidebar__group--user {
	margin-top: auto;
	margin-bottom: 0;
	padding-top: 0.75rem;
	border-top: 1px solid var(--admin-border);
}

.cms-sidebar__heading {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--admin-text-muted);
	margin: 0 0.5rem 0.3rem;
}

.cms-sidebar__link {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	width: 100%;
	padding: 0.45rem 0.5rem;
	border-radius: var(--admin-radius);
	text-decoration: none;
	color: var(--admin-text);
	font-size: 0.9rem;
	background: none;
	border: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.cms-sidebar__link:hover {
	background: var(--admin-bg);
}

.cms-sidebar__link[aria-current="page"] {
	background: var(--admin-accent);
	color: var(--admin-on-accent);
}

.cms-sidebar__link .icon {
	flex: 0 0 auto;
}

.cms-sidebar__tenant {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.3rem 0.5rem;
	margin: 0 0 0.4rem;
	color: var(--admin-text-muted);
	font-size: 0.85rem;
}

.cms-sidebar__switcher {
	margin-bottom: 0.4rem;
}

.cms-sidebar__switcher select {
	width: 100%;
	max-width: none;
	font-size: 0.85rem;
	padding: 0.4rem 0.5rem;
}

.cms-sidebar form {
	margin: 0;
}

.cms-shell__content {
	flex: 1 1 auto;
	min-width: 0;
}

/* Mobiel (iteratie 15, fase A): de sidebar wordt een vaste topbalk met
 * merknaam + hamburger; het menu klapt open via een CSS-only checkbox
 * (#cms-nav-toggle, cms_shared.templ) zodat het ook zonder JS werkt. Menu-
 * items hebben weer hun label (op kleine schermen waren het kale iconen) en
 * een comfortabel raakvlak (min. 44px, Apple HIG/Material). */
.cms-nav-toggle,
.cms-nav-burger {
	display: none;
}

@media (max-width: 800px) {
	.cms-shell {
		flex-direction: column;
	}

	.cms-sidebar {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		align-self: stretch;
		width: auto;
		flex: 0 0 auto;
		min-height: 0;
		position: sticky;
		top: 0;
		z-index: 30;
		padding: 0.35rem 0.9rem;
		padding-top: max(0.35rem, env(safe-area-inset-top));
		border-right: none;
		border-bottom: 1px solid var(--admin-border);
		max-height: 100vh;
		max-height: 100dvh;
		overflow-y: auto;
	}

	.cms-sidebar__brand {
		margin: 0;
		padding: 0.5rem 0;
		flex: 1 1 auto;
	}

	.cms-nav-burger {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		border-radius: var(--admin-radius);
		cursor: pointer;
	}

	.cms-nav-burger .icon {
		width: 1.4rem;
		height: 1.4rem;
	}

	.cms-nav-toggle {
		display: block;
		position: absolute;
		opacity: 0;
		width: 1px;
		height: 1px;
		pointer-events: none;
	}

	.cms-nav-toggle:focus-visible + .cms-nav-burger {
		box-shadow: var(--admin-focus-ring);
	}

	.cms-nav-toggle:checked + .cms-nav-burger {
		background: var(--admin-bg);
	}

	.cms-sidebar__group {
		display: none;
		flex: 0 0 100%;
		margin: 0 0 0.75rem;
	}

	.cms-nav-toggle:checked ~ .cms-sidebar__group {
		display: flex;
	}

	.cms-sidebar__group--user {
		margin-top: 0;
		margin-bottom: 0.5rem;
	}

	.cms-sidebar__link {
		justify-content: flex-start;
		min-height: 44px;
		font-size: 1rem;
	}

	.cms-sidebar__switcher select {
		width: 100%;
		min-height: 44px;
	}
}

/* Mobiele lijsten (iteratie 15, fase A). Gewone tabellen scrollen op een
 * smal scherm horizontaal binnen hun eigen vak (de pagina zelf nooit);
 * `table.cms-cards` (Inzendingen, het belangrijkste mobiele scherm) wordt
 * per rij een kaart. Alleen onder 700px: de desktoptabel blijft ongemoeid
 * (zie de waarschuwing bij `main.cms-list table` hierboven). */
@media (max-width: 700px) {
	main.cms-list table:not(.cms-cards),
	main.cms-form table:not(.cms-cards) {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	main.cms-list table.cms-cards,
	table.cms-cards tbody {
		display: block;
		border: none;
		background: none;
		margin: 0;
	}

	table.cms-cards thead {
		display: none;
	}

	table.cms-cards tr {
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 0.15rem 0.75rem;
		align-items: center;
		background: var(--admin-surface);
		border: 1px solid var(--admin-border);
		border-radius: var(--admin-radius-lg);
		padding: 0.7rem 0.9rem;
		margin-bottom: 0.6rem;
	}

	table.cms-cards td {
		display: block;
		border: none;
		padding: 0;
		min-width: 0;
		overflow-wrap: anywhere;
	}

	table.cms-cards .cms-cards__title {
		grid-column: 1;
		font-weight: 600;
		font-size: 1.05rem;
	}

	table.cms-cards .cms-cards__link {
		color: inherit;
		text-decoration: none;
	}

	table.cms-cards .cms-cards__meta {
		grid-column: 1;
		color: var(--admin-text-muted);
		font-size: 0.85rem;
	}

	table.cms-cards .cms-cards__status {
		grid-column: 1;
		font-size: 0.85rem;
	}

	table.cms-cards td.cms-actions {
		grid-column: 2;
		grid-row: 1 / span 5;
	}

	/* Rijen met meerdere (tekst)acties (Gebruikers, iteratie 14): de acties
	 * krijgen een eigen regel onder de gegevens in plaats van een smalle
	 * rechterkolom die de tekst platdrukt. */
	table.cms-cards--wide td.cms-actions {
		grid-column: 1 / -1;
		grid-row: auto;
		display: flex;
		flex-wrap: wrap;
		gap: 0.4rem 1rem;
		align-items: center;
		margin-top: 0.4rem;
	}
	table.cms-cards--wide tr { grid-template-columns: 1fr; }
	/* Zonder koprij heeft een kaart de labels nodig ("Laatst actief: ..."). */
	table.cms-cards--wide td.cms-cards__meta[data-label]::before { content: attr(data-label) ": "; }

	.cms-tree__row {
		flex-wrap: wrap;
	}

	.cms-tree__status {
		margin-left: 0;
	}

	.cms-tree__tools,
	.cms-tree__actions {
		margin-left: auto;
	}
}

/* Icoonknoppen + custom tooltip (in plaats van het onstyleable native
 * title="..."). data-tooltip draagt de zichtbare tekst; aria-label draagt
 * 'm voor screenreaders (::after-content wordt niet betrouwbaar
 * voorgelezen), dus elke aanroeper zet allebei. */
[data-tooltip] {
	position: relative;
}

[data-tooltip]::after {
	content: attr(data-tooltip);
	position: absolute;
	bottom: calc(100% + 0.4rem);
	left: 50%;
	transform: translateX(-50%);
	background: var(--admin-text);
	color: var(--admin-surface);
	padding: 0.25rem 0.55rem;
	border-radius: 4px;
	font-size: 0.75rem;
	line-height: 1.2;
	white-space: nowrap;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.1s ease;
	z-index: 20;
}

[data-tooltip]:hover::after,
[data-tooltip]:focus-visible::after {
	opacity: 1;
	visibility: visible;
}

/* Info-icoontje naast een veldlabel (i.p.v. een hint-zin onder het veld,
 * 11b's vervolg) — dezelfde data-tooltip-region hierboven, maar links
 * uitgelijnd en met woordafbreking: een hint is een hele zin, geen
 * knop-label van één woord. */
.cms-field-label-row {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.cms-info,
.cms-info:hover,
.cms-info:focus-visible {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.2rem;
	height: 1.2rem;
	margin: 0;
	padding: 0;
	border: none;
	border-radius: 999px;
	/* button:hover's own background (higher specificity than a plain
	 * .cms-info rule, since it combines an element selector with :hover)
	 * would otherwise paint this solid on hover — stay transparent in
	 * every state, explicitly. */
	background: none;
	outline-offset: 2px;
	color: var(--admin-text-muted);
	cursor: help;
}

.cms-info:hover,
.cms-info:focus-visible {
	color: var(--admin-accent);
}

.cms-info .icon {
	width: 14px;
	height: 14px;
}

.cms-info[data-tooltip]::after {
	bottom: auto;
	top: calc(100% + 0.4rem);
	left: 0;
	transform: none;
	white-space: normal;
	width: max-content;
	max-width: 16rem;
	text-align: left;
}

.icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	padding: 0;
	margin: 0;
	border-radius: var(--admin-radius);
	border: 1px solid var(--admin-border);
	background: var(--admin-surface);
	color: var(--admin-text);
	text-decoration: none;
	cursor: pointer;
}

.icon-btn:hover {
	border-color: var(--admin-accent);
	color: var(--admin-accent);
	background: var(--admin-bg);
}

.icon-btn--danger:hover {
	border-color: var(--admin-danger);
	color: var(--admin-danger);
}

.icon-btn .icon,
svg.icon {
	width: 16px;
	height: 16px;
	display: block;
}

/* Terug-link (elk scherm) en statusfilter/"+ nieuw"-links (lijstschermen) —
 * voorheen kale <a>'s, hier bewust ondergeschikt aan .cms-nav (dat is de
 * hoofdnavigatie) maar wel duidelijk als navigatie-element herkenbaar, niet
 * als lopende tekst. */
p.cms-breadcrumb {
	margin: 0 0 0.75rem;
}

p.cms-breadcrumb a {
	font-size: 0.9rem;
	text-decoration: none;
	color: var(--admin-text-muted);
}

p.cms-breadcrumb a:hover {
	color: var(--admin-accent);
}

p.cms-filters {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 1rem;
}

p.cms-filters a {
	display: inline-block;
	padding: 0.3rem 0.7rem;
	border: 1px solid var(--admin-border);
	border-radius: 999px;
	background: var(--admin-surface);
	text-decoration: none;
	color: var(--admin-text);
	font-size: 0.9rem;
}

p.cms-filters a:hover {
	border-color: var(--admin-accent);
	color: var(--admin-accent);
}

/* Login/2FA (.auth) */
main.auth {
	max-width: 420px;
	margin: 3rem auto;
	padding: 2rem;
	background: var(--admin-surface);
	border: 1px solid var(--admin-border);
	border-radius: var(--admin-radius);
}

/* Het TOTP-geheim en de otpauth://-URI zijn lange strings zonder spaties:
 * zonder breekpunt lopen ze de kaart uit. */
main.auth code {
	overflow-wrap: anywhere;
}

main.auth svg {
	max-width: 220px;
	height: auto;
	display: block;
	margin: 1rem 0;
}

/* Lijstschermen (.cms-list) en tabellen. Bewust GEEN display:block/
 * overflow-x-truc: die brak de kolombreedtes (zichtbaar als een lege
 * rechterstrook in een tabel met weinig kolommen) en sneed de Acties-kolom
 * af achter een scrollbar bij tabellen met meer knoppen. In plaats daarvan
 * blijft het een gewone tabel en mag de inhoud van een cel gewoon
 * afbreken/wrappen (zie .cms-actions hieronder voor de Acties-kolom) — de
 * rij wordt dan iets hoger in plaats van dat de tabel breder wordt dan zijn
 * container. */
main.cms-list table,
main.cms-form table {
	width: 100%;
	table-layout: auto;
	border-collapse: collapse;
	background: var(--admin-surface);
	border: 1px solid var(--admin-border);
	border-radius: var(--admin-radius);
	margin: 1rem 0;
}

table th,
table td {
	padding: 0.55rem 0.75rem;
	border-bottom: 1px solid var(--admin-border);
	text-align: left;
	vertical-align: middle;
}

/* Acties-kolom: Bewerken-link + een paar losse eenrijïge <form>'s
 * (elk al style="display:inline" in de template), sinds punt 10 allemaal
 * icoonknoppen (.icon-btn, zelf al inline-flex) — laat ze los van elkaar
 * afbreken op een nieuwe regel in plaats van de kolom kunstmatig breed te
 * maken. Bewust geen eigen `display` hier (dat zou met .icon-btn's eigen
 * inline-flex kunnen botsen) — alleen de tussenruimte. */
td.cms-actions > * {
	margin: 0 0.35rem 0.35rem 0;
	vertical-align: middle;
}

/* Icoonknoppen horen naast elkaar te blijven staan; alleen de tabellen met
 * tekstacties (.cms-cards--wide, Gebruikers) mogen wrappen. */
table:not(.cms-cards--wide) td.cms-actions {
	white-space: nowrap;
}

td.cms-actions > *:last-child {
	margin-right: 0;
}

/* Velden-editor (forms.templ) — een brede tabel (7 kolommen) die niet in de
 * smallere formulierbreedte hierboven past. Een scrollbare WRAPPER om een
 * gewone tabel (niet de tabel zelf op display:block, dat brak eerder de
 * kolomuitlijning) — de tabel blijft dus een echte tabel, alleen de box
 * eromheen scrollt horizontaal wanneer het echt niet past. */
.cms-table-scroll {
	overflow-x: auto;
	margin: 1rem 0;
}

.cms-table-scroll table {
	margin: 0;
	min-width: 620px;
}

table thead th {
	background: var(--admin-bg);
	font-weight: 600;
}

table tbody tr:last-child td {
	border-bottom: none;
}

table img {
	display: block;
	border-radius: 4px;
}

nav.pagination {
	display: flex;
	gap: 1rem;
	align-items: center;
	margin: 1rem 0;
	color: var(--admin-text-muted);
}

/* Formulieren (.cms-form). Eén afgesproken breedte, op <main> zelf, niet op
 * losse kinderen: de eerste opzet centreerde alleen de witte kaart
 * (.cms-form form) binnen de volle <main>, terwijl de <h1>/breadcrumb erboven
 * gewoon links uitlijnden — dat gaf precies de mismatch die opviel (de kop
 * links, de kaart eronder "zwevend" in het midden). Door <main class=
 * "cms-form"> zélf te beperken en te centreren, delen kop, breadcrumb,
 * formulier, Galerij en de inzending-detail-lijst allemaal dezelfde
 * linker- én rechterrand. */
main.cms-form {
	max-width: var(--cms-content-max-width);
	margin-left: auto;
	margin-right: auto;
}

main.cms-form form {
	background: var(--admin-surface);
	border: 1px solid var(--admin-border);
	border-radius: var(--admin-radius);
	padding: 1.25rem 1.5rem 1.5rem;
}

main.cms-form label,
main.cms-list label,
main.auth label {
	display: block;
	font-weight: 600;
	margin: 1rem 0 0.3rem;
}

main.auth label.cms-remember {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	font-weight: 400;
	margin: 1rem 0;
	min-height: 44px;
}

main.auth label.cms-remember input {
	width: 1.2rem;
	height: 1.2rem;
	margin: 0;
}

main.cms-form label:first-of-type,
main.cms-list label:first-of-type,
main.auth label:first-of-type {
	margin-top: 0;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="url"],
input[type="search"],
input:not([type]),
textarea,
select {
	width: 100%;
	/* Val terug op de kaartbreedte buiten een .cms-form-kaart (bijv. het
	 * upload-formulier op Media, het filterformulier op Inzendingen) — een
	 * lege input mag ook daar niet edge-to-edge over <main> uitrekken. */
	max-width: var(--cms-content-max-width);
	padding: 0.5rem 0.6rem;
	border: 1px solid var(--admin-border);
	border-radius: var(--admin-radius);
	font: inherit;
	background: var(--admin-surface);
	color: var(--admin-text);
}

/* Binnen een tabelcel (bijv. de Velden-editor, forms.templ) mag een veld
 * gewoon de celbreedte volgen — anders blijft elke kolom onnodig breed. */
table input,
table select {
	max-width: none;
}

/* select: eigen pijltje (currentColor kan niet in een data-URI, dus de
 * kleur staat hardcoded als hex — dit is een vast, tenant-neutraal
 * kleurenschema, geen dark mode) in plaats van elke browser z'n eigen
 * OS-pijltje. Het OPENKLAPPENDE optielijstje zelf (de popup met de opties)
 * is browser-eigen chrome — daar heeft CSS in geen enkele browser
 * betrouwbare, volledige controle over (kleuren/hover/selectie-highlight);
 * dat is bewust niet nagebouwd met een eigen JS-component (nieuwe
 * afhankelijkheid, toegankelijkheidswerk) tenzij Jacco daar expliciet voor
 * kiest — zie docs/ARCHITECTURE.md §16. */
select {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%235b6270' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0.65rem center;
	background-size: 13px;
	padding-right: 2rem;
}

/* Bestandsveld (Media-upload): het native "Choose File"-knopje kon met
 * gewone border/padding nooit meegestyled worden (elke browser rendert die
 * knop+tekst-combinatie zelf) — ::file-selector-button kan dat wél, breed
 * ondersteund, geen JS nodig. De rest van het veld (de tekst "Geen bestand
 * gekozen") blijft kaal, dat hoort bij een systeemveld. */
input[type="file"] {
	max-width: none;
	padding: 0.3rem 0;
	border: none;
	background: none;
}

input[type="file"]::file-selector-button {
	font: inherit;
	padding: 0.5rem 1rem;
	margin-right: 0.75rem;
	border: 1px solid var(--admin-border);
	border-radius: var(--admin-radius);
	background: var(--admin-surface);
	color: var(--admin-text);
	cursor: pointer;
}

input[type="file"]::file-selector-button:hover {
	background: var(--admin-bg);
	border-color: var(--admin-accent);
	color: var(--admin-accent);
}

textarea {
	min-height: 6rem;
	resize: vertical;
}

fieldset {
	border: 1px solid var(--admin-border);
	border-radius: var(--admin-radius);
	margin: 1.25rem 0 0;
	padding: 0.75rem 1rem 1rem;
}

fieldset legend {
	padding: 0 0.4rem;
	font-weight: 600;
	color: var(--admin-text-muted);
}

/* "Genereer met AI" (sectie 5.9, iteratie 9) — a plain fieldset like any
 * other, just with a left accent border so it visually stands apart from
 * the ordinary content fields it sits above. */
.cms-ai-generate {
	border-left: 3px solid var(--admin-accent);
}

button,
input[type="submit"] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	font: inherit;
	padding: 0.55rem 1.1rem;
	border-radius: var(--admin-radius);
	border: 1px solid var(--admin-accent);
	background: var(--admin-accent);
	color: var(--admin-on-accent);
	cursor: pointer;
	margin-top: 1.25rem;
}

button:hover,
input[type="submit"]:hover {
	background: var(--admin-accent-hover);
	border-color: var(--admin-accent-hover);
}

button:disabled,
input[type="submit"]:disabled {
	opacity: 0.45;
	cursor: not-allowed;
	pointer-events: none;
}

/* Statuswijziging/verwijderen buiten een krappe tabelkolom (bijv. het
 * Inzending-detailscherm) — tekst is daar duidelijker dan een icoon, maar
 * niet als zware primary-knop: een rijtje gelijkwaardige status-opties mag
 * niet allemaal even overheersend ogen als de ene "Opslaan"-actie op een
 * formulier, en "definitief verwijderen" moet zich daar juist wél van
 * onderscheiden (rood, .btn-danger) in plaats van dezelfde kleur te delen
 * met een routineuze statuswijziging. */
.btn-secondary {
	background: var(--admin-surface);
	color: var(--admin-text);
	border-color: var(--admin-border);
}

.btn-secondary:hover {
	background: var(--admin-bg);
	border-color: var(--admin-accent);
	color: var(--admin-accent);
}

.btn-danger {
	background: var(--admin-surface);
	color: var(--admin-danger);
	border-color: var(--admin-danger);
}

.btn-danger:hover {
	background: var(--admin-danger-bg);
}

.cms-actions-row {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem;
	margin: 0.5rem 0 1rem;
}

.cms-actions-row form {
	margin: 0;
}

.cms-actions-row button {
	margin-top: 0;
}

/* Filterbalk (Inzendingen) — voorheen gestapelde label/select/label/select/
 * knop zonder duidelijke groepering; nu een kaart met per veld een kleine
 * bijschrift-achtige label boven een compacte select, op één rij naast
 * elkaar. Filtert meteen bij een wijziging (onchange="this.form.submit()"
 * in de template) — de knop blijft staan als fallback (progressive
 * enhancement, geen afhankelijkheid van JS om te kunnen filteren). */
.cms-filter-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 0.75rem 1rem;
	margin: 1rem 0 1.25rem;
	padding: 0.9rem 1rem;
	background: var(--admin-surface);
	border: 1px solid var(--admin-border);
	border-radius: var(--admin-radius);
}

.cms-filter-bar__field {
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}

.cms-filter-bar__field label {
	margin: 0;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--admin-text-muted);
}

.cms-filter-bar__field select {
	min-width: 200px;
	max-width: none;
}

.cms-filter-bar button {
	margin-top: 0;
}

.cms-filter-bar__reset {
	align-self: center;
	font-size: 0.9rem;
	padding: 0.4rem 0.2rem;
}

/* Mobiel: geen kaart met labels, alleen de keuzelijsten onder elkaar. */
@media (max-width: 700px) {
	.cms-filter-bar {
		padding: 0;
		background: none;
		border: none;
		gap: 0.5rem;
		margin: 0.5rem 0 1rem;
	}

	.cms-filter-bar__field {
		flex: 1 1 100%;
	}

	.cms-filter-bar__field label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.cms-filter-bar__field select {
		width: 100%;
		min-width: 0;
		min-height: 44px;
	}
}

/* Kleine inline &uarr;/&darr;-knopjes (offerings/portfolio-volgorde) staan
 * naast elkaar in een tabelcel — geen zware primary-knop-look daar. */
table button {
	margin-top: 0;
	padding: 0.25rem 0.5rem;
	background: var(--admin-surface);
	color: var(--admin-text);
	border-color: var(--admin-border);
}

table button:hover {
	background: var(--admin-bg);
	border-color: var(--admin-accent);
	color: var(--admin-accent);
}

/* Dashboard */
main.dashboard form {
	display: inline-block;
	margin: 0 0 1rem;
}

/* Inzending-detail (submissions.templ) — geen formulier, alleen tonen. */
main.cms-form dl {
	background: var(--admin-surface);
	border: 1px solid var(--admin-border);
	border-radius: var(--admin-radius);
	padding: 1rem 1.5rem;
	margin: 1rem 0;
}

main.cms-form dt {
	font-weight: 600;
	color: var(--admin-text-muted);
	margin-top: 0.75rem;
}

main.cms-form dt:first-child {
	margin-top: 0;
}

main.cms-form dd {
	margin: 0.15rem 0 0;
}

@media (max-width: 600px) {
	main {
		padding: 1rem 0.9rem 3rem;
	}

	main.cms-form form {
		padding: 1rem;
	}
}

/* Alpine (iteratie 8c): verberg x-cloak-elementen tot Alpine draait. */
[x-cloak] {
	display: none !important;
}

/* =========================================================================
 * Editor (iteratie 8c, docs/ARCHITECTURE.md §18) — web/templates/core/
 * editor.templ. Twee kolommen: de inhoud links, een meescrollende zijbalk
 * rechts met publiceren/AI/SEO/acties. Eén formulier, één Opslaan.
 * Onder 1100px (de CMS-zijbalk links telt mee) valt alles terug naar één
 * kolom met een vaste Opslaan-balk onderaan.
 * ========================================================================= */
main.cms-editor-page {
	max-width: 1180px;
	margin: 0 auto;
	padding: 1.5rem 1.5rem 5rem;
}

.cms-editor__header h1 {
	margin-bottom: 1.25rem;
}

.cms-editor {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 1.5rem;
	align-items: start;
}

.cms-editor__main {
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
	min-width: 0;
}

.cms-editor__side {
	position: sticky;
	top: 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	max-height: calc(100vh - 2.5rem);
	overflow-y: auto;
	/* Ruimte voor focusringen/schaduwen binnen de scrollbox. */
	padding: 3px;
	margin: -3px;
}

/* De globale knop-marge (formulieren zonder kaartindeling) hoort niet in
 * de editor: daar regelen de containers zelf de tussenruimte. */
.cms-editor-page button {
	margin-top: 0;
}

/* Uitgeschakeld (Opslaan zonder wijzigingen, Dupliceren met wijzigingen):
 * geen hover-effect, anders lijkt de knop toch klikbaar. */
.cms-editor-page button:disabled {
	opacity: 0.45;
	pointer-events: none;
}

.cms-editor-page :focus-visible {
	outline: 2px solid var(--admin-accent);
	outline-offset: 2px;
}

.cms-editor input,
.cms-editor textarea,
.cms-editor select,
.cms-dialog input,
.cms-dialog textarea {
	max-width: none;
}

.cms-editor input:focus,
.cms-editor textarea:focus,
.cms-editor select:focus,
.cms-dialog textarea:focus {
	outline: none;
	border-color: var(--admin-accent);
	box-shadow: var(--admin-focus-ring);
}

.cms-card {
	background: var(--admin-surface);
	border: 1px solid var(--admin-border);
	border-radius: var(--admin-radius-lg);
	padding: 1.25rem 1.5rem 1.5rem;
	box-shadow: var(--admin-shadow-sm);
}

.cms-card--quiet {
	background: transparent;
	box-shadow: none;
}

.cms-card__title {
	font-size: 0.95rem;
	font-weight: 600;
	margin: 0 0 0.75rem;
}

.cms-card p.hint {
	margin: 0.35rem 0 0;
}

.cms-card p.cms-card__hint {
	margin: -0.35rem 0 0.75rem;
}

.cms-editor label,
.cms-field-label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin: 1.1rem 0 0.35rem;
}

/* .cms-editor label's bold weight (hierboven) is bedoeld voor het label-
 * tekstje zelf — een veld dat zijn input binnen dezelfde <label> nest
 * (pages_blocks.templ's textField e.a., i.p.v. losse label[for]+input[id])
 * erft dat anders mee naar de ingevulde waarde. Hier expliciet weer normaal. */
.cms-editor label input,
.cms-editor label select,
.cms-editor label textarea {
	font-weight: 400;
}

.cms-card > label:first-child,
.cms-card > .cms-card__title + label,
.cms-title-slug > label:first-child {
	margin-top: 0;
}

.cms-field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 1rem;
}

.cms-editor label.cms-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.55rem;
	font-weight: 400;
}

.cms-checkbox input {
	margin-top: 0.3rem;
}

.cms-checkbox .hint {
	font-size: 0.85rem;
}

/* Titel + slug: de titel is het grootste veld, de slug staat eronder als
 * stukje van de URL. */
.cms-title-input {
	font-size: 1.3rem;
	font-weight: 600;
	padding: 0.6rem 0.75rem;
}

.cms-slug {
	display: flex;
	align-items: center;
	margin-top: 0.5rem;
	font-size: 0.85rem;
	color: var(--admin-text-muted);
}

.cms-editor .cms-slug label {
	margin: 0;
	font-size: inherit;
	font-weight: 400;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 65%;
	flex: 0 1 auto;
}

.cms-editor .cms-slug input {
	flex: 1 1 8rem;
	min-width: 6rem;
	padding: 0.15rem 0.3rem;
	font-size: inherit;
	color: var(--admin-text);
	background: transparent;
	border: none;
	border-bottom: 1px dashed var(--admin-border);
	border-radius: 0;
}

.cms-editor .cms-slug input:focus {
	box-shadow: none;
	border-bottom: 1px solid var(--admin-accent);
	background: var(--admin-bg);
}

.cms-slug__regenerate {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.6rem;
	height: 1.6rem;
	margin: 0 0 0 0.35rem;
	padding: 0;
	border: none;
	border-radius: var(--admin-radius);
	background: none;
	color: var(--admin-text-muted);
	cursor: pointer;
}

.cms-slug__regenerate:hover {
	color: var(--admin-accent);
	background: var(--admin-bg);
}

.cms-slug__regenerate .icon {
	width: 13px;
	height: 13px;
}

/* Publiceren-kaart */
.cms-publish__status {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin-bottom: 1rem;
}

.cms-pill {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.8rem;
	font-weight: 600;
	padding: 0.2rem 0.65rem;
	border-radius: 999px;
}

.cms-pill::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: currentColor;
}

.cms-pill--draft {
	background: var(--admin-bg);
	color: var(--admin-text-muted);
	box-shadow: inset 0 0 0 1px var(--admin-border);
}

.cms-pill--published {
	background: var(--admin-success-bg);
	color: var(--admin-success);
}

.cms-pill--trashed {
	background: var(--admin-danger-bg);
	color: var(--admin-danger);
}

.cms-dirty {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--admin-warning);
}

.cms-dirty::before {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	border-radius: 50%;
	background: currentColor;
}

.cms-publish__meta {
	display: grid;
	gap: 0.6rem;
	margin: 0 0 1.1rem;
	font-size: 0.875rem;
}

.cms-publish__meta:empty {
	display: none;
}

.cms-publish__meta dt {
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--admin-text-muted);
}

.cms-publish__meta dd {
	margin: 0.1rem 0 0;
}

.cms-publish__by {
	display: block;
	color: var(--admin-text-muted);
	overflow-wrap: anywhere;
}

.cms-publish__link {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	text-decoration: none;
	overflow-wrap: anywhere;
}

.cms-publish__link:hover span {
	text-decoration: underline;
}

.cms-publish__link .icon {
	flex: 0 0 auto;
	width: 14px;
	height: 14px;
}

.cms-publish__note {
	margin: 0 0 1rem;
	padding: 0.55rem 0.75rem;
	border-radius: var(--admin-radius);
	background: var(--admin-danger-bg);
	color: var(--admin-danger);
	font-size: 0.85rem;
}

.cms-publish__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
}

.cms-publish__actions > button {
	flex: 1 1 auto;
}

.btn-block {
	width: 100%;
}

.btn-link,
.btn-link:hover {
	background: none;
	border: none;
	padding: 0.2rem 0;
	color: var(--admin-text-muted);
	font-size: 0.85rem;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.btn-link:hover {
	color: var(--admin-accent);
}

.btn-link--danger:hover {
	color: var(--admin-danger);
}

/* Acties-kaart (dupliceren, prullenbak) */
.cms-editor-actions {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cms-editor-actions button {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
}

/* AI-kaart */
.cms-ai {
	background: linear-gradient(135deg, #f3f6ff 0%, #f7f3ff 100%);
	border-color: #dfe5fb;
}

.cms-ai__open,
.cms-ai__open:hover {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	width: 100%;
	background: var(--admin-surface);
	color: var(--admin-accent);
	border: 1px solid #c9d4f6;
	font-weight: 600;
}

.cms-ai__open:hover {
	border-color: var(--admin-accent);
	box-shadow: var(--admin-focus-ring);
}

.cms-ai p.hint {
	margin-top: 0.6rem;
	font-size: 0.8rem;
}

/* Dialogen (AI, afbeeldingkiezer) — native <dialog>, dus focusbeheer en
 * Esc-om-te-sluiten komen van de browser zelf. */
.cms-dialog {
	width: min(560px, calc(100vw - 2rem));
	padding: 0;
	border: none;
	border-radius: 12px;
	box-shadow: var(--admin-shadow-lg);
	color: var(--admin-text);
	background: var(--admin-surface);
}

.cms-dialog::backdrop {
	background: rgba(16, 24, 40, 0.45);
}

.cms-dialog__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem 1.25rem;
	border-bottom: 1px solid var(--admin-border);
}

.cms-dialog__header h2 {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0;
	font-size: 1.05rem;
}

.cms-dialog__body {
	padding: 1.1rem 1.25rem 1.25rem;
}

.cms-dialog__body p.hint {
	margin: 0 0 1rem;
}

.cms-dialog__body label {
	display: block;
	font-weight: 600;
	font-size: 0.9rem;
	margin: 0 0 0.35rem;
}

.cms-dialog__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.5rem;
	padding: 0.85rem 1.25rem;
	border-top: 1px solid var(--admin-border);
	background: var(--admin-bg);
	border-radius: 0 0 12px 12px;
}

.cms-dialog__spacer {
	flex: 1;
}

/* Afbeeldingkiezer */
.cms-picker {
	width: min(940px, calc(100vw - 2rem));
}

.cms-picker .cms-dialog__body {
	max-height: min(62vh, 640px);
	overflow-y: auto;
	padding-top: 0;
}

.cms-picker__search {
	position: sticky;
	top: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin: 0 -1.25rem 1rem;
	padding: 0.85rem 1.25rem;
	background: var(--admin-surface);
	border-bottom: 1px solid var(--admin-border);
	color: var(--admin-text-muted);
}

.cms-picker__search input {
	flex: 1 1 auto;
	width: auto;
	max-width: none;
}

.cms-picker__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.85rem;
}

.cms-picker__item,
.cms-picker__item:hover {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	padding: 0;
	overflow: hidden;
	text-align: left;
	color: var(--admin-text);
	background: var(--admin-surface);
	border: 1px solid var(--admin-border);
	border-radius: 8px;
}

.cms-picker__item:hover {
	border-color: var(--admin-accent);
	box-shadow: var(--admin-focus-ring);
}

.cms-picker__item.is-selected {
	border-color: var(--admin-accent);
	box-shadow: 0 0 0 2px var(--admin-accent);
}

.cms-picker__item:disabled:hover {
	border-color: var(--admin-border);
	box-shadow: none;
}

.cms-picker__item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--admin-bg);
}

.cms-picker__label {
	padding: 0.4rem 0.55rem;
	font-size: 0.75rem;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cms-picker__check {
	position: absolute;
	top: 0.45rem;
	right: 0.45rem;
	display: none;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%;
	background: var(--admin-accent);
	color: var(--admin-on-accent);
}

.cms-picker__item.is-selected .cms-picker__check {
	display: flex;
}

.cms-picker__check .icon {
	width: 13px;
	height: 13px;
}

.cms-picker__empty {
	color: var(--admin-text-muted);
	text-align: center;
	padding: 2rem 0;
}

.cms-picker__upload {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	font-size: 0.85rem;
	text-decoration: none;
}

.cms-picker__upload .icon {
	width: 14px;
	height: 14px;
}

/* Eén afbeelding (cover, voor/na, avatar, deel-afbeelding) */
.cms-media-field {
	margin-top: 1.1rem;
}

.cms-media-field:first-child {
	margin-top: 0;
}

.cms-media-field__preview,
.cms-media-field__preview:hover {
	display: block;
	width: 100%;
	max-width: 380px;
	aspect-ratio: 16 / 10;
	padding: 0;
	overflow: hidden;
	color: var(--admin-text-muted);
	background: var(--admin-bg);
	border: 1px solid var(--admin-border);
	border-radius: 8px;
}

.cms-media-field__preview:hover {
	border-color: var(--admin-accent);
	color: var(--admin-accent);
}

.cms-media-field__preview.is-empty {
	border: 2px dashed var(--admin-border);
}

.cms-media-field__preview.is-empty:hover {
	border-color: var(--admin-accent);
	background: #f5f8ff;
}

.cms-media-field__preview img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cms-media-field__placeholder {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
	height: 100%;
	font-size: 0.85rem;
}

.cms-media-field__placeholder .icon {
	width: 26px;
	height: 26px;
}

.cms-media-field__meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem;
	max-width: 380px;
	margin-top: 0.35rem;
	font-size: 0.8rem;
}

.cms-media-field__name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--admin-text-muted);
}

.cms-media-field__buttons {
	display: flex;
	flex: 0 0 auto;
	gap: 0.75rem;
}

.cms-editor__side .cms-media-field__preview,
.cms-editor__side .cms-media-field__meta,
.cms-media-pair .cms-media-field__preview,
.cms-media-pair .cms-media-field__meta {
	max-width: none;
}

.cms-media-pair {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
}

.cms-media-pair .cms-media-field {
	margin-top: 0;
}

/* Galerij */
.cms-gallery-field {
	margin-top: 1.5rem;
}

.cms-gallery-field__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 1rem;
}

.cms-gallery-field__head .cms-field-label {
	margin: 0 0 0.35rem;
}

.cms-gallery-field__count {
	font-size: 0.8rem;
	color: var(--admin-text-muted);
}

.cms-gallery-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
	gap: 0.75rem;
}

.cms-gallery-grid__item {
	position: relative;
	aspect-ratio: 4 / 3;
	border-radius: 8px;
	background: var(--admin-bg);
	box-shadow: 0 0 0 1px var(--admin-border);
	cursor: grab;
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.cms-gallery-grid__item img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
	pointer-events: none;
}

.cms-gallery-grid__item.is-dragging {
	opacity: 0.35;
}

.cms-gallery-grid__item.is-over {
	box-shadow: 0 0 0 3px var(--admin-accent);
	transform: scale(1.02);
}

.cms-gallery-grid__pos {
	position: absolute;
	top: 0.4rem;
	left: 0.4rem;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: rgba(16, 24, 40, 0.72);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 600;
}

.cms-gallery-grid__tools {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	display: flex;
	justify-content: center;
	gap: 0.3rem;
	padding: 1.25rem 0.4rem 0.45rem;
	border-radius: 0 0 8px 8px;
	background: linear-gradient(transparent, rgba(16, 24, 40, 0.55));
	opacity: 0;
	transition: opacity 0.15s ease;
}

.cms-gallery-grid__item:hover .cms-gallery-grid__tools,
.cms-gallery-grid__item:focus-within .cms-gallery-grid__tools {
	opacity: 1;
}

@media (hover: none) {
	.cms-gallery-grid__tools {
		opacity: 1;
	}
}

.cms-gallery-grid__tools .icon-btn {
	width: 1.85rem;
	height: 1.85rem;
	border-color: transparent;
	background: rgba(255, 255, 255, 0.95);
}

.cms-gallery-grid__tools .icon-btn:disabled {
	opacity: 0.4;
}

.cms-gallery-grid__tools .icon-btn:disabled:hover {
	color: var(--admin-text);
	border-color: transparent;
}

.cms-gallery-grid__add,
.cms-gallery-grid__add:hover {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.35rem;
	width: 100%;
	aspect-ratio: 4 / 3;
	padding: 0;
	font-size: 0.85rem;
	color: var(--admin-text-muted);
	background: transparent;
	border: 2px dashed var(--admin-border);
	border-radius: 8px;
}

.cms-gallery-grid__add:hover {
	color: var(--admin-accent);
	border-color: var(--admin-accent);
	background: #f5f8ff;
}

.cms-gallery-grid__add .icon {
	width: 20px;
	height: 20px;
}

.cms-gallery-field > p.hint {
	margin: 0.6rem 0 0;
}

/* Paginaopbouw-editor (iteratie 11): blok-kaarten, zelfde sleep-conventie
   als .cms-gallery-grid hierboven (is-dragging/is-over). */
.cms-section-list {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.cms-section-card {
	border-radius: 8px;
	background: var(--admin-bg);
	box-shadow: 0 0 0 1px var(--admin-border);
	cursor: grab;
	transition: opacity 0.15s ease, box-shadow 0.15s ease;
}

.cms-section-card.is-dragging {
	opacity: 0.35;
}

.cms-section-card.is-over {
	box-shadow: 0 0 0 3px var(--admin-accent);
}

.cms-section-card__head {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.6rem;
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--admin-border);
}

/* Boomweergave (iteratie 11c): Pagina's/Aanbod/Projecten, zelfde
   sleep-conventie als hierboven (is-dragging), plus een altijd-zichtbare
   "hoofdniveau"-droprij om een item terug naar root te slepen. */
.cms-tree {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.cms-tree__root {
	border: 1px dashed var(--admin-border);
	border-radius: 8px;
	padding: 0.5rem 0.75rem;
	color: var(--admin-muted, #6b7280);
	font-size: 0.85rem;
}

.cms-tree__row {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-radius: 8px;
	background: var(--admin-bg);
	box-shadow: 0 0 0 1px var(--admin-border);
	padding: 0.5rem 0.75rem;
	transition: opacity 0.15s ease;
}

.cms-tree__row.is-dragging {
	opacity: 0.35;
}

.cms-tree__handle {
	cursor: grab;
	color: var(--admin-muted, #6b7280);
}

/* visibility (not display:none) keeps the row's layout width reserved, so a
   locked row's label (no handle icon, e.g. the home page) stays aligned with
   every other row's label instead of shifting left. */
.cms-tree__handle--hidden {
	visibility: hidden;
}

.cms-tree__label {
	font-weight: 600;
}

.cms-tree__path {
	color: var(--admin-muted, #6b7280);
	font-size: 0.85rem;
}

.cms-tree__status {
	margin-left: auto;
	color: var(--admin-muted, #6b7280);
	font-size: 0.85rem;
}

.cms-tree__tools,
.cms-tree__actions {
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.cms-tree__move {
	font-size: 0.8rem;
	padding: 0.25rem 0.4rem;
	max-width: 11rem;
	min-height: 2rem;
}

/* Op touch is er geen hover: de (onzichtbare) tooltips zouden alleen de pagina
 * horizontaal laten scrollen. */
@media (hover: none) {
	[data-tooltip]::after {
		display: none;
	}
}

/* Op touch is slepen onbetrouwbaar: verberg de greep, "Verplaats naar" blijft. */
@media (hover: none) {
	.cms-tree__handle {
		display: none;
	}
}

.cms-section-card__pos {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 1.4rem;
	height: 1.4rem;
	padding: 0 0.35rem;
	border-radius: 999px;
	background: var(--admin-border);
	font-size: 0.72rem;
	font-weight: 600;
}

.cms-section-card__type {
	font-weight: 600;
	flex: 1;
}

.cms-section-card__tools {
	display: flex;
	gap: 0.3rem;
	margin-left: auto;
}

.cms-section-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 0.75rem;
	cursor: default;
}

/* Per-bloktype velden (11b's vervolg) — elk bloktype's eigen stapel
 * label+input, met wat lucht tussen elk veld zodat het niet aanvoelt als
 * één lang formulier. */
.cms-block-fields {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding-top: 0.6rem;
	border-top: 1px solid var(--admin-border);
}

.cms-block-fields .hint {
	margin: 0.25rem 0 0;
}

/* Herhaalbare rijtjes (Hero's Features, Stappen, Contact-lines, Over-blok's
 * alinea's, Contactformulier's puntenlijst) — een compacte kaart per
 * rij binnen het veld, met de velden ernaast en de verwijder-knop rechts. */
.cms-list-field {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.cms-list-field__row {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	padding: 0.5rem;
	border-radius: var(--admin-radius);
	background: var(--admin-surface);
	box-shadow: 0 0 0 1px var(--admin-border);
}

.cms-list-field__row > label {
	flex: 1 1 8rem;
	margin: 0;
}

.cms-list-field__row textarea {
	flex: 1 1 8rem;
}

.cms-list-field__remove {
	flex: 0 0 auto;
}

/* objectListField's rows have a label above each sub-field; nudge the
 * remove button down to line up with the inputs instead of the labels.
 * stringListField's rows have no such label, so they keep the default
 * flex-start (lines up with the textarea itself). */
.cms-list-field__row--labeled .cms-list-field__remove {
	margin-top: 1.5rem;
}

.cms-section-add {
	display: flex;
	gap: 0.6rem;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 0.75rem;
}

/* select's own `width: 100%` (hierboven) laat 'm anders de hele resterende
 * flex-breedte vullen, met een lange lege ruimte naast "Blok toevoegen" —
 * hier juist compact, naast de knop, geen los zwevend element. */
.cms-section-add select {
	width: auto;
	flex: 1 1 auto;
	min-width: 0;
	max-width: 16rem;
}

/* SEO-kaart met Google-voorbeeld */
.cms-seo__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0;
	cursor: pointer;
	list-style: none;
}

.cms-seo__summary::-webkit-details-marker {
	display: none;
}

.cms-seo__summary::after {
	content: "";
	width: 0.45rem;
	height: 0.45rem;
	margin-right: 0.2rem;
	border-right: 1.5px solid var(--admin-text-muted);
	border-bottom: 1.5px solid var(--admin-text-muted);
	transform: rotate(45deg);
	transition: transform 0.15s ease;
}

.cms-seo[open] .cms-seo__summary {
	margin-bottom: 0.75rem;
}

.cms-seo[open] .cms-seo__summary::after {
	transform: rotate(-135deg);
}

.cms-seo:not([open]) {
	padding-bottom: 1.25rem;
}

.cms-serp {
	margin: 0.75rem 0 0.25rem;
	padding: 0.8rem 0.9rem;
	border: 1px solid var(--admin-border);
	border-radius: 8px;
	background: var(--admin-surface);
	font-family: Arial, Helvetica, sans-serif;
}

.cms-serp p {
	margin: 0;
}

.cms-serp .cms-serp__label {
	margin-bottom: 0.45rem;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 0.68rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--admin-text-muted);
}

.cms-serp__url {
	font-size: 0.75rem;
	color: #202124;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.cms-serp .cms-serp__title {
	margin: 0.2rem 0;
	font-size: 1.02rem;
	line-height: 1.3;
	color: #1a0dab;
	overflow-wrap: anywhere;
}

.cms-serp__desc {
	font-size: 0.8rem;
	line-height: 1.45;
	color: #4d5156;
	overflow-wrap: anywhere;
}

.cms-counter-field__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem;
}

.cms-counter {
	font-size: 0.75rem;
	color: var(--admin-text-muted);
	font-variant-numeric: tabular-nums;
}

.cms-counter.is-over {
	color: var(--admin-warning);
	font-weight: 600;
}

/* Opslaan-balk onderaan, alleen op smalle schermen (de zijbalk staat daar
 * helemaal onderaan de inhoud). */
.cms-editor__mobilebar {
	display: none;
}

@media (max-width: 1100px) {
	.cms-editor {
		grid-template-columns: minmax(0, 1fr);
	}

	.cms-editor__side {
		position: static;
		max-height: none;
		overflow: visible;
	}

	.cms-editor__mobilebar {
		position: sticky;
		bottom: 0;
		z-index: 5;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		gap: 1rem;
		margin: 0 -1.5rem -5rem;
		padding: 0.75rem 1.5rem;
		background: var(--admin-surface);
		border-top: 1px solid var(--admin-border);
		box-shadow: 0 -4px 12px rgba(16, 24, 40, 0.06);
	}
}

@media (max-width: 600px) {
	main.cms-editor-page {
		padding: 1rem 0.9rem 5rem;
	}

	.cms-card {
		padding: 1rem;
	}

	.cms-field-row,
	.cms-media-pair {
		grid-template-columns: 1fr;
	}

	.cms-editor__mobilebar {
		margin: 0 -0.9rem -5rem;
		padding: 0.75rem 0.9rem;
	}
}

/* Formulier-builder (iteratie 12, /admin/forms/{id}/edit): dezelfde kaarten als
 * de blokkenlijst van de pagina-editor, binnen een gewone .cms-form-kaart —
 * die geeft elk <label> een bovenmarge/bold, hier juist compact per veld. */
main.cms-form .cms-formfields .cms-section-card__body label {
	margin: 0;
}

main.cms-form .cms-formfields label.cms-checkbox {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-weight: 400;
}

main.cms-form .cms-formfields label.cms-checkbox input {
	width: auto;
	margin: 0;
}

/* Veldlabel in de kaartkop, tussen het type en de knoppen. */
main.cms-form .cms-formfields .cms-formfields__label {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: var(--admin-muted, inherit);
}

main.cms-form .cms-formfields .cms-section-card__type {
	white-space: nowrap;
}

/* Accountbeheer (iteratie 14c) */
.cms-users { margin: 2rem 0; }
.cms-linkbutton {
  background: none; border: 0; padding: 0 .5rem 0 0; color: var(--cms-link, #2563eb);
  text-decoration: underline; cursor: pointer; font: inherit;
}
.cms-inline-form { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-top: 1rem; }
.cms-inline-form label { font-weight: 600; flex-basis: 100%; }
.cms-inline-form input[type=email] { flex: 1 1 16rem; max-width: 24rem; }

/* Mijn account (iteratie 14e) */
.cms-account section { margin: 2rem 0; max-width: 56rem; }
.cms-account__facts { display: grid; grid-template-columns: max-content 1fr; gap: .4rem 1.5rem; margin: 0; }
.cms-account__facts dt { font-weight: 600; }
.cms-account__facts dd { margin: 0; }
.cms-account__form { display: grid; gap: .5rem; max-width: 26rem; }
.cms-account__form button { justify-self: start; margin-top: .5rem; }
@media (max-width: 700px) {
  .cms-account__facts { grid-template-columns: 1fr; gap: 0; }
  .cms-account__facts dt { margin-top: .6rem; }
}

/* Herstelcodes (iteratie 14f) */
.cms-recovery-codes {
  list-style: none; padding: 0; margin: 1.2rem 0; display: grid;
  grid-template-columns: repeat(2, minmax(0, 14rem)); gap: .6rem 1.5rem;
}
.cms-recovery-codes code { font-size: 1.15rem; letter-spacing: .06em; }
a.cms-button {
  display: inline-block; padding: .55rem 1.1rem; background: var(--admin-accent); color: #fff;
  border-radius: var(--admin-radius, .4rem); text-decoration: none;
}
a.cms-button:hover { background: var(--admin-accent-hover); color: #fff; }
.cms-linkbutton { white-space: nowrap; }
/* Must out-rank the global button:hover (filled accent background). */
button.cms-linkbutton:hover,
button.cms-linkbutton:focus-visible {
  background: none; border-color: transparent; color: var(--admin-accent-hover, #1d4ed8);
  text-decoration: none;
}
.cms-account section > form { margin-bottom: 1.2rem; }

/* Eerste stappen (iteratie 14i) */
.cms-onboarding__steps { list-style: none; padding: 0; margin: .8rem 0; display: grid; gap: .5rem; }
.cms-onboarding__steps li { display: flex; gap: .6rem; align-items: baseline; }
.cms-onboarding__steps li.is-done a { color: var(--admin-text-muted); text-decoration: line-through; }
.cms-onboarding__mark { width: 1.2rem; flex: 0 0 1.2rem; text-align: center; }
.cms-onboarding__steps li.is-done .cms-onboarding__mark { color: #1f7a3d; }
.cms-onboarding small { color: var(--admin-text-muted); margin-left: .35rem; }
.cms-onboarding h2 { margin: 0 0 .4rem; }

/* Media-bibliotheek: uploaden (meerdere bestanden, slepen) en zoeken. */
.cms-dropzone {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
	padding: 0.9rem 1rem;
	border: 2px dashed var(--admin-border);
	border-radius: var(--admin-radius);
	background: var(--admin-surface);
}

.cms-dropzone--over {
	border-color: var(--admin-accent, #2f5bdc);
	background: rgba(47, 91, 220, 0.06);
}

.cms-upload__file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
	margin: 0.5rem 0;
}

.cms-upload__file input {
	flex: 1 1 14rem;
}

.cms-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin: 1rem 0 0;
}

.cms-search input[type="search"] {
	flex: 1 1 16rem;
	max-width: 28rem;
}

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

.cms-quickphoto summary {
	cursor: pointer;
	font-size: 0.85rem;
	color: var(--admin-accent);
}

.cms-quickphoto form {
	display: grid;
	gap: 0.4rem;
	margin-top: 0.4rem;
	min-width: 14rem;
}