/**
 * De dagstatus: de balk op de kioskpagina en het knopscherm op /beheer/status/.
 *
 * Open en dicht zijn betekenis, geen vormgeving. Ze staan daarom als twee vaste
 * presets in theme.json van het thema — naast hoofd en accent, maar buiten de
 * kleurenkiezer om: ze bewegen niet mee, anders kan een gekozen hoofdkleur
 * "open" en "dicht" op elkaar laten lijken.
 *
 * De hexen hieronder zijn de terugval en niet de bron. Ze zijn nodig omdat dit
 * bestand óók het knopscherm op /beheer/status/ draagt, en dat rendert kaal,
 * zonder thema en dus zonder presets.
 *
 * Beide kleuren halen ruim 6:1 met witte tekst erop, en er staat altijd tekst bij:
 * nooit informatie alleen via kleur.
 */

.schelle-status,
.schelle-beheer {
	--schelle-open: var(--wp--preset--color--open, #0f6b33);
	--schelle-dicht: var(--wp--preset--color--dicht, #b01818);
	--schelle-op-kleur: #ffffff;
	--schelle-tekst: #1c1c1c;
	--schelle-vlak: #f4f2ee;
	--schelle-rand: #d3cec6;
}

.schelle-status [hidden],
.schelle-beheer [hidden] {
	display: none !important;
}

/* ---------------------------------------------------------------------
 * 1. De balk op de kioskpagina en op de kaart op de voorpagina
 * ------------------------------------------------------------------ */

.schelle-status {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border: 2px solid transparent;
	border-radius: 0.5rem;
	font-family: inherit;
}

.schelle-status--open {
	background: var(--schelle-open);
	color: var(--schelle-op-kleur);
}

.schelle-status--dicht {
	background: var(--schelle-dicht);
	color: var(--schelle-op-kleur);
}

.schelle-status--onbevestigd {
	background: var(--schelle-vlak);
	color: var(--schelle-tekst);
	border-color: var(--schelle-rand);
}

.schelle-status__kop {
	margin: 0;
	font-size: clamp(1.35rem, 5.5vw, 2rem);
	font-weight: 700;
	line-height: 1.2;
}

/* Het tijdstip staat er groot bij: dat is de enige menselijke controle
   als de stand ooit ergens blijft hangen. */
.schelle-status__tijd {
	margin: 0.35rem 0 0;
	font-size: clamp(1.2rem, 5vw, 1.7rem);
	font-weight: 700;
	line-height: 1.2;
}

.schelle-status__toelichting,
.schelle-status__extra {
	margin: 0.6rem 0 0;
	font-size: 1.05rem;
	line-height: 1.45;
}

/* Dezelfde balk op een kaart in een overzicht: kleiner, maar met hetzelfde
   tijdstip erin — ook hier moet je kunnen zien hoe vers de stand is. */
.schelle-kaartstatus {
	margin-bottom: 0.75rem;
	padding: 0.6rem 0.8rem;
}

.schelle-kaartstatus .schelle-status__kop {
	font-size: 1.15rem;
}

.schelle-kaartstatus .schelle-status__tijd {
	font-size: 1.05rem;
}

.schelle-kaartstatus .schelle-status__toelichting,
.schelle-kaartstatus .schelle-status__extra {
	margin-top: 0.35rem;
	font-size: 0.95rem;
}

/* ---------------------------------------------------------------------
 * 2. Het knopscherm: kale pagina, geen thema, geen wp-admin
 * ------------------------------------------------------------------ */

.schelle-beheer {
	margin: 0;
	padding: 0;
	background: #ffffff;
	color: var(--schelle-tekst);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	font-size: 1.125rem;
	line-height: 1.5;
	-webkit-text-size-adjust: 100%;
}

.schelle-beheer *,
.schelle-beheer *::before,
.schelle-beheer *::after {
	box-sizing: border-box;
}

.schelle-beheer__inhoud {
	max-width: 34rem;
	margin: 0 auto;
	padding: 0.75rem 1rem 2rem;
}

/* Alles hieronder geldt UITSLUITEND op het losse kioskscherm (/beheer/status/).
   Het staat achter .schelle-beheer omdat namen als .schelle-knop ook in het
   thema bestaan en daar iets heel anders betekenen. Zonder dat hek kreeg elke
   knop op de site een halve schermhoogte mee. */
.schelle-beheer .schelle-knoppen {
	margin: 0 0 2rem;
}

.schelle-beheer .schelle-knoppen__titel {
	margin: 0 0 0.5rem;
	font-size: 1.25rem;
	font-weight: 600;
}

.schelle-beheer .schelle-knop-vorm {
	margin: 0 0 0.75rem;
}

.schelle-beheer .schelle-knop {
	display: block;
	width: 100%;
	min-height: 45vh;
	min-height: 45dvh;
	margin: 0;
	padding: 1rem;
	border: 4px solid;
	border-radius: 0.75rem;
	background: #ffffff;
	font-family: inherit;
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	cursor: pointer;
	touch-action: manipulation;
	-webkit-appearance: none;
	appearance: none;
	-webkit-tap-highlight-color: transparent;
}

.schelle-beheer .schelle-knop--open {
	border-color: var(--schelle-open);
	color: var(--schelle-open);
}

.schelle-beheer .schelle-knop--dicht {
	border-color: var(--schelle-dicht);
	color: var(--schelle-dicht);
}

.schelle-beheer .schelle-knop--open.is-actief {
	background: var(--schelle-open);
	color: var(--schelle-op-kleur);
}

.schelle-beheer .schelle-knop--dicht.is-actief {
	background: var(--schelle-dicht);
	color: var(--schelle-op-kleur);
}

/* Welke stand nu geldt, staat er in letters bij en niet alleen in kleur. */
.schelle-beheer .schelle-knop__nu {
	display: block;
	margin-top: 0.75rem;
	font-size: 1rem;
	font-weight: 600;
	text-transform: none;
	letter-spacing: 0;
}

.schelle-beheer .schelle-nu {
	margin: 1rem 0 0.5rem;
	font-size: 1.1rem;
}

.schelle-beheer .schelle-nu__kop {
	display: block;
	font-weight: 600;
}

.schelle-beheer .schelle-nu__tijd {
	display: block;
	font-size: 1.5rem;
	font-weight: 700;
}

.schelle-beheer .schelle-herstel {
	margin: 0;
}

.schelle-beheer .schelle-herstel__knop {
	min-height: 3rem;
	padding: 0.5rem 0;
	border: 0;
	background: none;
	color: var(--schelle-tekst);
	font-family: inherit;
	font-size: 1.1rem;
	text-decoration: underline;
	cursor: pointer;
	touch-action: manipulation;
}

.schelle-beheer .schelle-melding {
	margin: 0 0 0.75rem;
	padding: 0.75rem 1rem;
	border-left: 6px solid var(--schelle-rand);
	background: var(--schelle-vlak);
	font-size: 1.1rem;
}

.schelle-beheer .schelle-melding--fout {
	border-left-color: var(--schelle-dicht);
	background: #fdf2f2;
	color: var(--schelle-dicht);
	font-weight: 600;
}

.schelle-beheer .schelle-leeg,
.schelle-beheer .schelle-terug {
	font-size: 1.1rem;
}

.schelle-beheer .schelle-terug a {
	color: var(--schelle-tekst);
}

.schelle-beheer :focus-visible {
	outline: 3px solid var(--schelle-tekst);
	outline-offset: 3px;
}