/**
 * Brain Zaalreservering - public frontend styles.
 *
 * House style: deep purple, self-hosted Geist (headings) + Source Sans 3 (body).
 * The whole palette is derived from --bzr-primary via color-mix, so changing the
 * primary colour in the plugin settings recolours the entire widget coherently.
 * The container exposes --bzr-primary / --bzr-accent / --bzr-font via an inline
 * style attribute (from plugin settings); every rule has a sensible fallback.
 */

/* ------------------------------------------------------------------ *
 * Self-hosted fonts (GDPR-friendly: no external requests)
 * ------------------------------------------------------------------ */
@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url( '../../assets/fonts/geist-500.woff2' ) format( 'woff2' );
}
@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url( '../../assets/fonts/geist-600.woff2' ) format( 'woff2' );
}
@font-face {
	font-family: 'Geist';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url( '../../assets/fonts/geist-700.woff2' ) format( 'woff2' );
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url( '../../assets/fonts/source-sans-3-400.woff2' ) format( 'woff2' );
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url( '../../assets/fonts/source-sans-3-600.woff2' ) format( 'woff2' );
}
@font-face {
	font-family: 'Source Sans 3';
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url( '../../assets/fonts/source-sans-3-700.woff2' ) format( 'woff2' );
}

/* ------------------------------------------------------------------ *
 * Design tokens
 * ------------------------------------------------------------------ */
.bzr-app {
	/* Brand colour, identiek aan de knoppen op terneuzen.braintestweb.nl. */
	--bzr-primary: #38244c;
	--bzr-accent: #4d3267;

	/* Purple surfaces/tints derived from the primary colour. */
	--bzr-primary-soft: color-mix( in srgb, var( --bzr-primary ) 7%, #ffffff );
	--bzr-primary-100: color-mix( in srgb, var( --bzr-primary ) 13%, #ffffff );
	--bzr-primary-200: color-mix( in srgb, var( --bzr-primary ) 22%, #ffffff );
	--bzr-ring: color-mix( in srgb, var( --bzr-primary ) 28%, transparent );

	--bzr-bg: #ffffff;
	--bzr-surface: #faf9fd;
	--bzr-border: #e8e5f2;
	--bzr-border-strong: #d9d5ea;
	--bzr-text: #211d33;
	--bzr-muted: #6b6880;

	--bzr-radius: 16px;
	--bzr-radius-md: 12px;
	--bzr-radius-sm: 10px;
	/* Volledig ronde knoppen, zoals op de website. */
	--bzr-radius-pill: 999px;
	--bzr-shadow: 0 1px 2px rgba( 33, 29, 51, 0.04 ), 0 8px 24px rgba( 56, 36, 76, 0.06 );
	--bzr-shadow-lg: 0 24px 60px rgba( 56, 36, 76, 0.28 );

	/* Eén maatvoering voor alle knoppen (website: 16px/39px bij 15px tekst). */
	--bzr-btn-py: 13px;
	--bzr-btn-px: 30px;
	--bzr-btn-height: 48px;
	--bzr-btn-font: 0.95rem;
	--bzr-btn-transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;

	--bzr-font: 'Source Sans 3', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--bzr-font-heading: 'Geist', var( --bzr-font );

	font-family: var( --bzr-font );
	color: var( --bzr-text );
	box-sizing: border-box;
	-webkit-font-smoothing: antialiased;
}

.bzr-app *,
.bzr-app *::before,
.bzr-app *::after {
	box-sizing: border-box;
}

/* ------------------------------------------------------------------ *
 * Page header
 * ------------------------------------------------------------------ */
.bzr-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 22px;
}

.bzr-header-text {
	min-width: 0;
}

.bzr-header-title {
	font-family: var( --bzr-font-heading );
	font-size: 1.9rem;
	line-height: 1.15;
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 6px;
	color: var( --bzr-text );
}

.bzr-header-sub {
	margin: 0;
	color: var( --bzr-muted );
	font-size: 0.98rem;
	max-width: 60ch;
}
/* Export / subscribe (iCal) */
.bzr-export {
	position: relative;
}

.bzr-export-panel {
	position: absolute;
	right: 0;
	top: calc( 100% + 8px );
	z-index: 60;
	width: 320px;
	/* Het paneel hangt rechts uitgelijnd onder een knop in een kolom van 284px;
	   zonder deze grens steekt het bij een smal venster buiten beeld. */
	max-width: min( 320px, calc( 100vw - 32px ) );
	background: var( --bzr-bg );
	border: 1px solid var( --bzr-border );
	border-radius: var( --bzr-radius-md );
	box-shadow: var( --bzr-shadow-lg );
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	text-align: left;
	animation: bzr-pop 0.16s ease;
}

.bzr-export-panel[hidden] {
	display: none;
}

.bzr-export-intro {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.4;
	color: var( --bzr-muted );
}

.bzr-export-subscribe {
	justify-content: center;
	text-decoration: none;
}

.bzr-export-download {
	font-size: 0.86rem;
	color: var( --bzr-primary );
	font-weight: 600;
	text-decoration: underline;
}

.bzr-export-url-label {
	font-size: 0.76rem;
	font-weight: 600;
	color: var( --bzr-muted );
	margin-top: 2px;
}

.bzr-export-copy {
	display: flex;
	gap: 8px;
}

.bzr-export-url {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-size: 0.82rem;
	color: var( --bzr-text );
	background: var( --bzr-surface );
	border: 1px solid var( --bzr-border-strong );
	border-radius: var( --bzr-radius-pill );
	padding: 9px 16px;
	min-height: 40px;
}

.bzr-export-url:focus {
	outline: none;
	border-color: var( --bzr-primary );
	box-shadow: 0 0 0 3px var( --bzr-ring );
}

.bzr-export-copy-btn {
	flex: 0 0 auto;
	--bzr-btn-py: 9px;
	--bzr-btn-px: 20px;
	--bzr-btn-height: 40px;
	--bzr-btn-font: 0.88rem;
}

@media ( max-width: 720px ) {
	.bzr-export-panel {
		right: auto;
		left: 0;
	}
}

/* ------------------------------------------------------------------ *
 * Formuliervelden
 * ------------------------------------------------------------------ */

/* Neutralise theme label AND control margins: Uncode geeft bare <select>- en
   <input>-elementen een eigen margin, waardoor ze niet meer op één lijn stonden
   met hun label. */
.bzr-app label,
.bzr-app .bzr-field-label,
.bzr-app .bzr-side-title,
.bzr-app .bzr-export-url-label {
	margin: 0 !important;
}

.bzr-app select,
.bzr-app input,
.bzr-app textarea,
.bzr-app button {
	margin: 0 !important;
	vertical-align: middle;
}

/* Required-field marker. */
.bzr-req {
	color: #dc2626;
	font-weight: 700;
}

.bzr-room-filter,
.bzr-field select,
.bzr-field input,
.bzr-field textarea {
	font: inherit;
	font-size: 0.95rem;
	color: var( --bzr-text );
	background-color: var( --bzr-bg );
	border: 1px solid var( --bzr-border-strong );
	border-radius: var( --bzr-radius-sm );
	padding: 9px 12px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bzr-room-filter {
	min-width: 168px;
}

/* Every select inside the widget paints its own single dropdown arrow. The
   !important background longhands are deliberate: themes (e.g. Uncode) style
   bare <select> elements with their own arrow background-image, and without
   an explicit no-repeat that theme arrow tiles across the whole control. */
.bzr-app select {
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	padding-right: 34px;
	background-color: var( --bzr-bg ) !important;
	background-image:
		linear-gradient( 45deg, transparent 50%, var( --bzr-muted ) 50% ),
		linear-gradient( 135deg, var( --bzr-muted ) 50%, transparent 50% ) !important;
	background-position: calc( 100% - 18px ) calc( 50% + 1px ), calc( 100% - 13px ) calc( 50% + 1px ) !important;
	background-size: 5px 5px, 5px 5px !important;
	background-repeat: no-repeat !important;
}

.bzr-room-filter:hover,
.bzr-app select:hover {
	border-color: var( --bzr-primary-200 );
}

.bzr-room-filter:focus,
.bzr-app select:focus,
.bzr-app input:focus,
.bzr-app textarea:focus {
	outline: none !important;
	border-color: var( --bzr-primary ) !important;
	box-shadow: 0 0 0 3px var( --bzr-ring ) !important;
}

/* ------------------------------------------------------------------ *
 * Layout: kalender + bedieningskolom
 * ------------------------------------------------------------------ */
.bzr-shell {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) 284px;
	gap: 20px;
	align-items: start;
}

.bzr-main {
	min-width: 0;
}

.bzr-sidebar {
	display: flex;
	flex-direction: column;
	gap: 14px;
	min-width: 0;
}

.bzr-side-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Alleen de knoppen ín de kolom zelf, niet die in het uitklappaneel. */
.bzr-side-actions > .bzr-btn,
.bzr-side-actions > .bzr-export,
.bzr-side-actions > .bzr-export > .bzr-export-toggle {
	width: 100%;
}

.bzr-side-block {
	background: var( --bzr-surface );
	border: 1px solid var( --bzr-border );
	border-radius: var( --bzr-radius-md );
	padding: 12px 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	min-width: 0;
}

.bzr-side-title {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --bzr-muted );
}

.bzr-side-title-row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 8px;
}

.bzr-legend-reset {
	font: inherit;
	font-size: 0.78rem;
	font-weight: 600;
	color: var( --bzr-primary );
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	text-decoration: underline;
}

.bzr-side-block .bzr-room-filter {
	width: 100%;
	min-width: 0;
}

/* Onder 1024px valt de kolom uiteen: knoppen en ruimtefilter bóven de
   kalender, de legenda eronder. `display: contents` haalt de <aside> uit de
   stroom zodat zijn blokken zelf grid-items worden en apart te ordenen zijn. */
@media ( max-width: 1024px ) {
	.bzr-shell {
		grid-template-columns: 1fr;
		gap: 14px;
	}

	.bzr-sidebar {
		display: contents;
	}

	.bzr-side-actions {
		order: 1;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.bzr-side-actions > .bzr-btn,
	.bzr-side-actions > .bzr-export,
	.bzr-side-actions > .bzr-export > .bzr-export-toggle {
		width: auto;
	}

	/* Ruimtefilter als compacte regel, niet als kaart. */
	.bzr-side-block--room {
		order: 2;
		flex-direction: row;
		align-items: center;
		gap: 10px;
		background: none;
		border: 0;
		padding: 0;
	}

	.bzr-side-block--room .bzr-room-filter {
		width: auto;
		flex: 0 1 220px;
	}

	.bzr-main {
		order: 3;
	}

	.bzr-side-block--legend {
		order: 4;
	}
}

/* ------------------------------------------------------------------ *
 * Legend (= het verenigingsfilter)
 * ------------------------------------------------------------------ */
.bzr-legend {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 1px;
}

.bzr-legend > li {
	display: flex;
}

/* In de smalle balk onder 1024px wikkelt de legenda weer horizontaal. */
@media ( max-width: 1024px ) {
	.bzr-legend {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 6px 10px;
	}

	.bzr-legend > li {
		display: inline-flex;
	}
}

/* Legend doubles as a filter: each item is a clickable chip. */
/* In de kolom is elk item een volle regel: één vereniging per regel leest
   rustiger dan een veld met wikkelende chips. */
.bzr-legend-item {
	display: flex;
	width: 100%;
	text-align: left;
	align-items: center;
	gap: 9px;
	font: inherit;
	font-size: 0.86rem;
	line-height: 1.3;
	color: var( --bzr-text );
	background: transparent;
	border: 1px solid transparent;
	border-radius: var( --bzr-radius-sm );
	padding: 6px 8px;
	cursor: pointer;
	transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

.bzr-legend-name {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.bzr-legend-item:hover {
	background: var( --bzr-primary-soft );
	border-color: var( --bzr-primary-200 );
}

.bzr-legend-item:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var( --bzr-ring );
}

.bzr-legend-item.is-active {
	background: var( --bzr-bg );
	border-color: var( --bzr-primary );
	box-shadow: 0 0 0 1px var( --bzr-primary ) inset;
	font-weight: 700;
}

/* Onder 1024px staat de legenda horizontaal: dan weer chips. */
@media ( max-width: 1024px ) {
	.bzr-legend-item {
		width: auto;
		background: var( --bzr-bg );
		border-color: var( --bzr-border-strong );
		border-radius: 999px;
		/* Minstens 38px hoog: als chip is dit het belangrijkste filter op een
		   telefoon en 30px is te klein om betrouwbaar te raken. */
		min-height: 38px;
		padding: 7px 14px 7px 12px;
	}

	.bzr-legend-name {
		white-space: normal;
		overflow: visible;
	}
}

/* Dim the non-selected verenigingen while a legend filter is active. */
.bzr-legend.has-active .bzr-legend-item:not( .is-active ) {
	opacity: 0.5;
}

.bzr-legend-swatch {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex: 0 0 auto;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.08 );
}

/* ------------------------------------------------------------------ *
 * Calendar container + FullCalendar overrides
 * ------------------------------------------------------------------ */
/* De kaart: rand, ronding, achtergrond en padding. */
.bzr-calendar-card {
	position: relative;
	background: var( --bzr-bg );
	border: 1px solid var( --bzr-border );
	border-radius: var( --bzr-radius );
	padding: 18px;
	box-shadow: var( --bzr-shadow );
}

/* Het FullCalendar-rootelement zelf blijft kaal. FullCalendar zet hier een
   hoogte op en verdeelt zijn kinderen over die volle hoogte; padding of een
   rand op dit element zou die kinderen buiten de contentbox duwen en de
   onderste weekrij afsnijden. */
.bzr-calendar {
	position: relative;
	padding: 0;
	border: 0;
	background: none;
	overflow: visible;
}

/* Alleen waar het rooster echt niet past is horizontaal scrollen nodig, en dan
   op de kaart — niet op het FullCalendar-element. */
@media ( max-width: 1024px ) {
	.bzr-calendar-card {
		overflow-x: auto;
	}
}

/* Slim progress bar while events are being fetched. */
/* De laadbalk hangt aan het FullCalendar-element, dat binnen de padding van de
   kaart staat. De negatieve offsets trekken hem terug naar de bovenrand. */
.bzr-calendar.is-loading::after {
	content: '';
	position: absolute;
	top: -18px;
	left: -18px;
	right: -18px;
	height: 3px;
	border-radius: var( --bzr-radius-pill );
	background: linear-gradient( 90deg, transparent, var( --bzr-primary ), transparent );
	background-size: 40% 100%;
	background-repeat: no-repeat;
	animation: bzr-loading 1.1s ease-in-out infinite;
}

@keyframes bzr-loading {
	0% { background-position: -40% 0; }
	100% { background-position: 140% 0; }
}

/* Day cells and the all-day row are clickable for people who may book (the
   all-day row fills 07:00–23:00), so hint at it — but only for them. */
.bzr-calendar.bzr-can-book .fc-daygrid-day-frame,
.bzr-calendar.bzr-can-book .fc-timegrid-col-frame {
	cursor: pointer;
}

.bzr-calendar.bzr-can-book .fc-timegrid-axis-frame,
.bzr-calendar.bzr-can-book .fc-timegrid-axis {
	cursor: default;
}

.bzr-app .fc {
	--fc-border-color: var( --bzr-border );
	--fc-today-bg-color: var( --bzr-primary-soft );
	--fc-now-indicator-color: var( --bzr-primary );
	--fc-page-bg-color: var( --bzr-bg );
	--fc-neutral-bg-color: var( --bzr-surface );
	font-size: 0.9rem;
}

/* Toolbar title + buttons. */
.bzr-app .fc .fc-toolbar-title {
	font-family: var( --bzr-font-heading );
	font-size: 1.2rem;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: capitalize;
}

.bzr-app .fc .fc-toolbar.fc-header-toolbar {
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 16px;
}

.bzr-app .fc .fc-button-primary {
	background-color: var( --bzr-bg );
	border: 1px solid var( --bzr-border-strong );
	border-radius: var( --bzr-radius-pill );
	color: var( --bzr-text );
	text-transform: capitalize;
	font-family: var( --bzr-font );
	font-weight: 600;
	font-size: 0.88rem;
	line-height: 1.2;
	padding: 10px 22px;
	min-height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: none;
	transition: var( --bzr-btn-transition );
}

.bzr-app .fc .fc-button-primary:hover:not( :disabled ) {
	background-color: transparent;
	border-color: var( --bzr-primary );
	color: var( --bzr-primary );
}

/* Actieve weergave (maand/week/dag) en ingedrukte knoppen vullen zich met de
   merkkleur. */
.bzr-app .fc .fc-button-primary:not( :disabled ):active,
.bzr-app .fc .fc-button-primary:not( :disabled ).fc-button-active {
	background-color: var( --bzr-primary );
	border-color: var( --bzr-primary );
	color: #fff;
}

.bzr-app .fc .fc-button-primary:focus,
.bzr-app .fc .fc-button-primary:focus-visible {
	box-shadow: 0 0 0 3px var( --bzr-ring );
}

.bzr-app .fc .fc-button:disabled {
	opacity: 0.45;
}

/* Een knoppengroep blijft één pil: alleen de buitenste hoeken zijn rond. */
.bzr-app .fc .fc-button-group {
	gap: 0;
}

.bzr-app .fc .fc-button-group > .fc-button {
	border-radius: 0;
}

.bzr-app .fc .fc-button-group > .fc-button:first-child {
	border-top-left-radius: var( --bzr-radius-pill );
	border-bottom-left-radius: var( --bzr-radius-pill );
	padding-left: 24px;
}

.bzr-app .fc .fc-button-group > .fc-button:last-child {
	border-top-right-radius: var( --bzr-radius-pill );
	border-bottom-right-radius: var( --bzr-radius-pill );
	padding-right: 24px;
}

.bzr-app .fc .fc-button-group > .fc-button:only-child {
	border-radius: var( --bzr-radius-pill );
}

.bzr-app .fc .fc-button-group > .fc-button:not( :first-child ) {
	margin-left: -1px;
}

.bzr-app .fc .fc-button-group > .fc-button:hover,
.bzr-app .fc .fc-button-group > .fc-button:focus,
.bzr-app .fc .fc-button-group > .fc-button.fc-button-active {
	z-index: 1;
}

/* Prev/next dragen alleen een pijl: gelijke padding rondom houdt ze rond. */
.bzr-app .fc .fc-button-group > .fc-prev-button,
.bzr-app .fc .fc-button-group > .fc-next-button,
.bzr-app .fc .fc-prev-button,
.bzr-app .fc .fc-next-button {
	padding-left: 14px;
	padding-right: 14px;
}

/* Alle weekrijen even hoog.
   Een dagcel is van nature zo hoog als zijn inhoud, dus een week met
   activiteiten werd hoger dan een lege week. Met een minimumhoogte per cel én
   een vast maximum aan zichtbare activiteiten (dayMaxEvents in public.js) is de
   natuurlijke hoogte van elke cel gelijk; expandRows verdeelt de resterende
   ruimte daarna gelijkmatig. */
/* LET OP: alleen in de MAANDweergave. De "Hele dag"-strook in de weekweergave
   gebruikt hetzelfde `.fc-daygrid-day-frame`, en zonder deze scoping werd die
   lege strook ruim 200px hoog en drukte hij het tijdrooster weg. */
.bzr-app .fc .fc-dayGridMonth-view .fc-daygrid-day-frame {
	/* Zo hoog als een gewone volle dag nodig heeft: dagnummer + twee
	   activiteiten (tijdregel + titel van één regel) + de "+n meer"-regel.
	   Lege weken blijven zo compact. Alleen een week met twee lange titels
	   over twee regels op één dag wordt iets hoger. In rem, zodat het
	   meeschaalt met de lettergrootte van het thema. */
	min-height: 7.6rem;
}

/* De "Hele dag"-strook blijft compact en groeit alleen mee met wat erin staat. */
.bzr-app .fc .fc-timegrid .fc-daygrid-day-frame {
	min-height: 0;
}

/* Een activiteit in het maandrooster blijft op één regel. Zonder dit maakt een
   lange titel de cel hoger dan de andere en lopen de weekrijen weer uiteen. */
.bzr-app .fc .fc-daygrid-event .fc-event-title,
.bzr-app .fc .fc-daygrid-event .fc-event-time {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.bzr-app .fc .fc-daygrid-event {
	min-width: 0;
}

.bzr-app .fc .fc-daygrid-day-events {
	min-height: 0;
}

/* Column headers. */
.bzr-app .fc .fc-col-header-cell-cushion {
	padding: 8px 4px;
	font-weight: 600;
	color: var( --bzr-muted );
	text-transform: capitalize;
}

.bzr-app .fc .fc-daygrid-day-number,
.bzr-app .fc .fc-timegrid-slot-label-cushion {
	color: var( --bzr-muted );
	font-variant-numeric: tabular-nums;
}

/* Hoogte per uurrij in de weekweergave. De kalender groeit mee met de pagina
   (height: 'auto'), dus er hoeft niets in een vaste doos te passen. 44px per
   uur is genoeg voor tijd + titel in een blok van een uur; korter dan een
   half uur toont alleen de tijd. 07:00-23:00 wordt zo zo'n 700px hoog. */
.bzr-app .fc .fc-timegrid-slot {
	height: 44px;
}

.bzr-app .fc .fc-timegrid-slot-label {
	font-size: 0.72rem;
	vertical-align: top;
}

.bzr-app .fc .fc-timegrid-slot-label-cushion {
	padding: 0 6px;
	line-height: 15px;
}

/* Alleen op het hele uur een label, anders wordt het te druk. */
.bzr-app .fc .fc-timegrid-slot-minor .fc-timegrid-slot-label-cushion {
	display: none;
}

.bzr-app .fc .fc-daygrid-day.fc-day-today .fc-daygrid-day-number,
.bzr-app .fc .fc-day-today .fc-col-header-cell-cushion {
	color: var( --bzr-primary );
	font-weight: 700;
}

/* Events – calm pastel fill, full colour as accent, dark readable text. */
.bzr-app .fc .fc-event {
	border: none;
	border-radius: 8px;
	padding: 0;
	cursor: pointer;
	font-size: 0.8rem;
	box-shadow: 0 1px 2px rgba( 33, 29, 51, 0.10 );
}

.bzr-app .fc .fc-event:hover {
	filter: brightness( 0.98 );
}

.bzr-app .fc .fc-event .fc-event-main {
	padding: 3px 7px;
}

/* Time-grid & all-day block events get a coloured left accent bar (the inline
   border-color is the full group colour). */
.bzr-app .fc .fc-timegrid-event,
.bzr-app .fc .fc-daygrid-block-event {
	border-radius: 8px;
	border-style: solid;
	border-width: 0 0 0 4px;
	overflow: hidden;
}

.bzr-app .fc .fc-event .fc-event-time {
	font-weight: 700;
	font-size: 0.74rem;
	font-variant-numeric: tabular-nums;
	opacity: 0.92;
}

.bzr-app .fc .fc-event .fc-event-title {
	font-weight: 700;
	font-size: 0.82rem;
	white-space: normal;
	overflow: hidden;
	line-height: 1.25;
}

.bzr-app .fc .fc-daygrid-event {
	white-space: normal;
}

/* Time-grid blocks: stack the time above the (wrapping) vereniging + room. */
.bzr-app .fc .fc-timegrid-event .fc-event-main-frame {
	display: flex;
	flex-direction: column;
	gap: 1px;
}

.bzr-app .fc .fc-timegrid-event .fc-event-time {
	white-space: normal;
}

.bzr-app .fc .fc-timegrid-event .fc-event-title-container {
	flex: 1 1 auto;
	min-height: 0;
}

/* Maandweergave: eigen opbouw per activiteit (zie monthEventContent in
   public.js). Bovenaan stip + tijd, daaronder de titel over hooguit twee
   regels. Lange woorden worden afgebroken in plaats van afgekapt. */
.bzr-app .fc .fc-dayGridMonth-view .fc-daygrid-event {
	display: block;
	padding: 3px 6px;
	white-space: normal;
}

.bzr-app .bzr-mev {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.bzr-app .bzr-mev-top {
	display: flex;
	align-items: center;
	gap: 5px;
	min-width: 0;
}

.bzr-app .bzr-mev-dot {
	flex: 0 0 auto;
	width: 8px;
	height: 8px;
	border-radius: 50%;
}

.bzr-app .bzr-mev-time {
	font-size: 0.72rem;
	font-weight: 600;
	line-height: 1.2;
	font-variant-numeric: tabular-nums;
	color: var( --bzr-muted );
	white-space: nowrap;
}

.bzr-app .bzr-mev-title {
	font-size: 0.8rem;
	font-weight: 700;
	line-height: 1.2;
	color: var( --bzr-text );
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	hyphens: auto;
	overflow-wrap: break-word;
}

/* Een activiteit over meerdere dagen wordt een gekleurde balk; die heeft de
   stip niet nodig en neemt de tekstkleur van de balk over. */
.bzr-app .fc .fc-daygrid-block-event .bzr-mev-dot {
	display: none;
}

.bzr-app .fc .fc-daygrid-block-event .bzr-mev-time,
.bzr-app .fc .fc-daygrid-block-event .bzr-mev-title {
	color: inherit;
}

/* Month-view dot events: keep the vivid dot, use dark readable text. */
.bzr-app .fc .fc-daygrid-dot-event {
	padding: 3px 5px;
	border-radius: 7px;
	font-weight: 600;
	color: var( --bzr-text );
}

.bzr-app .fc .fc-daygrid-dot-event .fc-event-time {
	color: var( --bzr-text );
}

.bzr-app .fc .fc-daygrid-dot-event:hover {
	background: var( --bzr-primary-soft );
}

.bzr-app .fc .fc-daygrid-event-dot {
	border-width: 5px;
}

/* Past events: clearly dimmed + desaturated so it reads as "already happened". */
.bzr-app .fc .fc-event.fc-event-past {
	opacity: 0.55;
	filter: grayscale( 0.4 );
}

.bzr-app .fc .fc-event.fc-event-past:hover {
	opacity: 0.8;
	filter: grayscale( 0.15 );
}

/* "Now" line: a clearly readable current-time marker. The line itself is a
   solid accent rule with a dot on the left; the time is printed in a small
   pill on the axis (filled in by JS) so you can read the current time at a
   glance instead of guessing from a thin stripe. */
.bzr-app .fc .fc-timegrid-now-indicator-line {
	border-color: var( --bzr-primary );
	border-top-width: 2px;
	box-shadow: 0 0 0 1px color-mix( in srgb, var( --bzr-primary ) 18%, transparent );
}

/* Dot where the line meets the day column. */
.bzr-app .fc .fc-timegrid-now-indicator-line::before {
	content: '';
	position: absolute;
	left: -5px;
	top: -5px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var( --bzr-primary );
	box-shadow: 0 0 0 3px color-mix( in srgb, var( --bzr-primary ) 22%, transparent );
}

/* The default axis arrow is replaced by a readable time pill. The indicator
   container clips its children by default, which would hide the pill. */
.bzr-app .fc .fc-timegrid-now-indicator-container {
	overflow: visible;
}

/* Stretch the (zero-width) arrow anchor across the axis so the pill can be
   right-aligned inside it, next to the line, instead of spilling out left. */
.bzr-app .fc .fc-timegrid-now-indicator-arrow {
	border-color: transparent;
	border-width: 0;
	left: 0;
	right: 0;
}

.bzr-app .fc .bzr-now-pill {
	position: absolute;
	right: 4px;
	transform: translateY( -50% );
	z-index: 5;
	background: var( --bzr-primary );
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	line-height: 1;
	padding: 3px 6px;
	border-radius: 999px;
	pointer-events: none;
	white-space: nowrap;
	box-shadow: 0 2px 6px rgba( 56, 36, 76, 0.28 );
}

/* Background (closure) events. */
.bzr-app .fc .fc-bg-event {
	opacity: 0.45;
}

/* List view. */
.bzr-app .fc .fc-list {
	border-radius: var( --bzr-radius-md );
	overflow: hidden;
}

.bzr-app .fc .fc-list-day-cushion {
	background: var( --bzr-surface );
}

.bzr-app .fc .fc-list-event:hover td {
	background: var( --bzr-primary-soft );
}

.bzr-app .fc .fc-list-event-dot {
	border-width: 6px;
}

.bzr-app .fc a {
	color: inherit;
	text-decoration: none;
}

.bzr-app .fc-theme-standard td,
.bzr-app .fc-theme-standard th {
	border-color: var( --bzr-border );
}

.bzr-app .fc-theme-standard .fc-scrollgrid {
	border-color: var( --bzr-border );
	border-radius: var( --bzr-radius-md );
}

.bzr-error {
	color: #b91c1c;
	padding: 24px;
	text-align: center;
}

/* ------------------------------------------------------------------ *
 * Buttons
 * ------------------------------------------------------------------ */
/* De maatvoering draagt !important om dezelfde reden als de kleuren hieronder:
   Uncode geeft bare <button>-elementen én specifiek button[type="submit"] een
   eigen padding, regelhoogte en lettergrootte. Zonder deze bescherming werd
   "Reserveren" zichtbaar groter dan "Annuleren" en "Vorige" ernaast. */
.bzr-btn {
	font: inherit;
	font-family: var( --bzr-font ) !important;
	font-weight: 600 !important;
	font-size: var( --bzr-btn-font ) !important;
	line-height: 1.2 !important;
	letter-spacing: normal !important;
	text-transform: none !important;
	border-style: solid !important;
	border-width: 1px !important;
	border-color: transparent;
	border-radius: var( --bzr-radius-pill ) !important;
	padding: var( --bzr-btn-py ) var( --bzr-btn-px ) !important;
	min-height: var( --bzr-btn-height ) !important;
	height: auto !important;
	width: auto;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	text-align: center;
	text-decoration: none;
	white-space: nowrap;
	box-shadow: none;
	text-shadow: none;
	transition: var( --bzr-btn-transition );
}

.bzr-btn:hover,
.bzr-btn:focus,
.bzr-btn:active {
	text-decoration: none;
}

.bzr-btn:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var( --bzr-ring );
}

.bzr-btn:disabled {
	opacity: 0.6;
	cursor: default;
}

/* Icoontjes mogen de knophoogte niet oprekken. */
.bzr-btn .bzr-btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	flex: 0 0 auto;
}

.bzr-btn .bzr-btn-icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Kleinere variant voor knoppen die naast een invoerveld staan. */
.bzr-btn-sm {
	--bzr-btn-py: 9px;
	--bzr-btn-px: 20px;
	--bzr-btn-height: 38px;
	--bzr-btn-font: 0.88rem;
}

/* De kleurregels dragen !important zodat de themastyling (Uncode kleurt kale
   <button>-elementen grijs) onze merkknoppen nooit kan overschrijven. Hover
   spiegelt de website: vulling valt weg, rand en tekst blijven in de
   merkkleur staan. */
.bzr-btn-primary {
	background-color: var( --bzr-primary ) !important;
	color: #fff !important;
	border-color: var( --bzr-primary ) !important;
}

.bzr-btn-primary:hover:not( :disabled ),
.bzr-btn-primary:focus-visible:not( :disabled ) {
	background-color: transparent !important;
	color: var( --bzr-primary ) !important;
	border-color: var( --bzr-primary ) !important;
}

.bzr-btn-ghost {
	background-color: var( --bzr-bg ) !important;
	color: var( --bzr-text ) !important;
	border-color: var( --bzr-border-strong ) !important;
}

.bzr-btn-ghost:hover:not( :disabled ),
.bzr-btn-ghost:focus-visible:not( :disabled ) {
	background-color: transparent !important;
	color: var( --bzr-primary ) !important;
	border-color: var( --bzr-primary ) !important;
}

.bzr-btn-danger {
	background-color: #dc2626 !important;
	color: #fff !important;
	border-color: #dc2626 !important;
}

.bzr-btn-danger:hover:not( :disabled ),
.bzr-btn-danger:focus-visible:not( :disabled ) {
	background-color: transparent !important;
	color: #dc2626 !important;
	border-color: #dc2626 !important;
}

/* ------------------------------------------------------------------ *
 * Accountkaart ([bzr_account])
 * ------------------------------------------------------------------ */
.bzr-account-card {
	background: var( --bzr-bg );
	border: 1px solid var( --bzr-border );
	border-radius: var( --bzr-radius );
	box-shadow: var( --bzr-shadow );
	padding: 20px 22px;
}

.bzr-account-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 16px;
	margin-bottom: 16px;
	padding: 16px 22px;
}

.bzr-account-title {
	font-family: var( --bzr-font-heading );
	margin: 0;
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.bzr-account-sub {
	margin: 2px 0 0;
	color: var( --bzr-muted );
	font-size: 0.92rem;
}

.bzr-account-rows {
	margin: 0;
	padding: 0;
}

.bzr-account-row {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 16px;
	padding: 12px 0;
	border-bottom: 1px solid var( --bzr-border );
}

.bzr-account-row:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.bzr-account-row dt {
	flex: 0 0 180px;
	margin: 0;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --bzr-muted );
	padding-top: 2px;
}

.bzr-account-row dd {
	flex: 1 1 220px;
	margin: 0;
	min-width: 0;
	color: var( --bzr-text );
}

.bzr-account-row dd a {
	color: var( --bzr-primary );
}

.bzr-account-note {
	color: var( --bzr-muted );
}

.bzr-account-groups {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
}

.bzr-account-groups li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* ------------------------------------------------------------------ *
 * Inlogpagina ([bzr_login])
 * ------------------------------------------------------------------ */
.bzr-login-card {
	max-width: 420px;
	margin: 0 auto;
}

.bzr-login-form {
	margin-top: 18px;
}

.bzr-login-regel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 8px 16px;
}

/* "Onthoud mij" kreeg de lettergrootte van het thema mee en werd daardoor veel
   groter dan de link ernaast. Hier vastzetten op dezelfde maat. */
.bzr-login .bzr-login-regel .bzr-check,
.bzr-login .bzr-login-regel .bzr-check span {
	font-size: 0.9rem !important;
	font-weight: 500 !important;
	line-height: 1.3 !important;
}

.bzr-login .bzr-login-regel .bzr-check {
	align-items: center;
	gap: 8px;
	margin: 0;
}

.bzr-login .bzr-login-regel .bzr-check input[ type="checkbox" ] {
	width: 16px;
	height: 16px;
	min-width: 16px;
	margin: 0;
}

.bzr-login .bzr-login-vergeten {
	font-size: 0.9rem !important;
	font-weight: 500 !important;
}

.bzr-login-form .bzr-form-actions .bzr-btn {
	width: 100%;
}

.bzr-login-terug {
	margin: 14px 0 0;
	font-size: 0.9rem;
}

.bzr-login .bzr-login-terug a,
.bzr-login .bzr-login-hulp a {
	color: var( --bzr-primary ) !important;
}

.bzr-login-hulp {
	margin: 16px 0 0;
	padding-top: 16px;
	border-top: 1px solid var( --bzr-border );
	font-size: 0.9rem;
}

.bzr-login-acties {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 16px;
}

/* ------------------------------------------------------------------ *
 * Kleuren vastzetten tegen de themastyling
 * ------------------------------------------------------------------ *
 * Uncode kleurt tekst per sectie: staat de accountpagina in een rij met
 * `.style-dark`, dan maakt het thema onder meer `dt` wit — op onze witte kaart
 * valt die tekst dan volledig weg. Die regels hebben twee klassen
 * (`.style-dark .detail`, specificiteit 0,2,0) en winnen het van een gewone
 * regel als `.bzr-account-row dt` (0,1,1), ongeacht de vololgorde in het
 * bestand. Daarom staan de kleuren hier met !important vast, net als bij de
 * knoppen. Alleen kleur en achtergrond; de rest blijft normaal overschrijfbaar.
 */
.bzr-account,
.bzr-login,
.bzr-account p,
.bzr-login p,
.bzr-account li,
.bzr-account dd,
.bzr-account span,
.bzr-login span {
	color: var( --bzr-text ) !important;
}

.bzr-account .bzr-account-card,
.bzr-login .bzr-account-card {
	background: var( --bzr-bg ) !important;
	color: var( --bzr-text ) !important;
}

.bzr-account .bzr-account-title,
.bzr-login .bzr-account-title {
	color: var( --bzr-text ) !important;
}

.bzr-login .bzr-account-sub,
.bzr-login .bzr-field label,
.bzr-login .bzr-account-note,
.bzr-account .bzr-account-sub,
.bzr-account .bzr-account-row dt,
.bzr-account .bzr-account-note,
.bzr-account .bzr-account-res-meta,
.bzr-account .bzr-check-hint,
.bzr-account .bzr-field label,
.bzr-account .bzr-field > span {
	color: var( --bzr-muted ) !important;
}

.bzr-login .bzr-login-vergeten,
.bzr-account .bzr-account-row dd a,
.bzr-account .bzr-login-link {
	color: var( --bzr-primary ) !important;
}

.bzr-account .bzr-account-tab {
	color: var( --bzr-muted ) !important;
	background: transparent !important;
}

.bzr-account .bzr-account-tab:hover {
	color: var( --bzr-primary ) !important;
}

.bzr-account .bzr-account-tab.is-active {
	color: var( --bzr-text ) !important;
	background: var( --bzr-bg ) !important;
}

/* Invoervelden: het thema geeft die in donkere secties een eigen kleurenschema. */
.bzr-login input[ type="text" ],
.bzr-login input[ type="password" ],
.bzr-account input[ type="text" ],
.bzr-account input[ type="email" ],
.bzr-account input[ type="password" ] {
	color: var( --bzr-text ) !important;
	background-color: var( --bzr-bg ) !important;
	border-color: var( --bzr-border-strong ) !important;
}

/* De meldingen houden hun eigen kleur. */
.bzr-account .bzr-account-melding--ok,
.bzr-account .bzr-account-melding--ok span {
	color: var( --bzr-text ) !important;
}

.bzr-login .bzr-account-melding--fout,
.bzr-account .bzr-account-melding--fout,
.bzr-account .bzr-account-melding--fout span {
	color: #b91c1c !important;
}

/* Knoppen houden hun eigen kleuren (zie .bzr-btn hierboven); de regel voor
   losse spans mag die niet overschrijven. */
.bzr-account .bzr-btn,
.bzr-login .bzr-btn,
.bzr-account .bzr-btn span,
.bzr-login .bzr-btn span {
	color: inherit !important;
}

.bzr-account .bzr-btn-primary,
.bzr-login .bzr-btn-primary,
.bzr-account .bzr-btn-primary span,
.bzr-login .bzr-btn-primary span {
	color: #fff !important;
}

.bzr-account .bzr-btn-primary:hover:not( :disabled ),
.bzr-account .bzr-btn-primary:hover:not( :disabled ) span {
	color: var( --bzr-primary ) !important;
}

/* Basisgrootte vastzetten: het thema gebruikt 18px, waardoor de kaart groter
   uitviel dan bedoeld. */
.bzr-account,
.bzr-login {
	font-size: 16px;
}

/* ------------------------------------------------------------------ *
 * Tabbladen
 * ------------------------------------------------------------------ */
.bzr-account-tablist {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin-bottom: -1px;
}

.bzr-account-tab {
	font: inherit;
	font-size: 0.92rem;
	font-weight: 600;
	color: var( --bzr-muted );
	background: none;
	border: 1px solid transparent;
	border-bottom: 0;
	border-radius: var( --bzr-radius-md ) var( --bzr-radius-md ) 0 0;
	padding: 10px 18px;
	cursor: pointer;
	transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}

.bzr-account-tab:hover {
	color: var( --bzr-primary );
}

.bzr-account-tab:focus-visible {
	outline: none;
	box-shadow: 0 0 0 3px var( --bzr-ring );
}

.bzr-account-tab.is-active {
	color: var( --bzr-text );
	background: var( --bzr-bg );
	border-color: var( --bzr-border );
}

/* Zolang het script niet gedraaid heeft blijven de tabknoppen verborgen en
   staan alle panelen gewoon onder elkaar — dan werkt de pagina zonder
   javascript nog volledig. */
.bzr-account-tabs:not( .is-ready ) .bzr-account-tablist {
	display: none;
}

.bzr-account-tabs:not( .is-ready ) .bzr-account-panel + .bzr-account-panel {
	margin-top: 16px;
}

/* Het actieve paneel sluit aan op de tabrij. */
.bzr-account-tabs.is-ready .bzr-account-card {
	border-top-left-radius: 0;
}

.bzr-account-panel[hidden] {
	display: none;
}

@media ( max-width: 600px ) {
	.bzr-account-tablist {
		gap: 2px;
	}

	.bzr-account-tab {
		flex: 1 1 auto;
		padding: 10px 12px;
		font-size: 0.86rem;
		text-align: center;
	}
}

/* Meer dan één kaart onder elkaar. */
.bzr-account .bzr-account-card + .bzr-account-card {
	margin-top: 16px;
}

/* Melding na opslaan. */
.bzr-account-melding {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: var( --bzr-radius-md );
	border: 1px solid var( --bzr-border );
	font-size: 0.94rem;
}

.bzr-account-melding--ok {
	background: var( --bzr-primary-soft );
	border-color: var( --bzr-primary-200 );
	color: var( --bzr-text );
}

.bzr-account-melding--fout {
	background: #fef2f2;
	border-color: #fecaca;
	color: #b91c1c;
}

/* Formulieren binnen de accountkaarten. */
.bzr-account-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 14px;
}

.bzr-account-form .bzr-field input {
	width: 100%;
}

.bzr-account-form .bzr-form-actions {
	justify-content: flex-start;
	border-top: 0;
	padding-top: 0;
}

/* Eigen reserveringen. */
.bzr-account-res {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
}

.bzr-account-res-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 0;
	border-bottom: 1px solid var( --bzr-border );
}

.bzr-account-res-item:last-child {
	border-bottom: 0;
	padding-bottom: 0;
}

.bzr-account-res-tekst {
	display: flex;
	flex-direction: column;
	gap: 1px;
	flex: 1 1 auto;
	min-width: 0;
}

.bzr-account-res-titel {
	font-weight: 600;
}

.bzr-account-res-meta {
	font-size: 0.86rem;
	color: var( --bzr-muted );
}

.bzr-account-res-actie {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
}

.bzr-account-res-actie form {
	margin: 0;
}

/* Annuleren binnen een reeks: een uitklapper met de drie keuzes. Een
   <details> werkt zonder javascript en sluit niets anders af. */
.bzr-account-annuleer {
	position: relative;
}

.bzr-account-annuleer > summary {
	list-style: none;
	cursor: pointer;
}

.bzr-account-annuleer > summary::-webkit-details-marker {
	display: none;
}

.bzr-account-annuleer[open] > summary {
	border-color: var( --bzr-primary );
}

.bzr-account .bzr-account-annuleer-keuze {
	position: absolute;
	right: 0;
	top: calc( 100% + 6px );
	z-index: 20;
	width: 260px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 12px;
	background: var( --bzr-bg );
	border: 1px solid var( --bzr-border );
	border-radius: var( --bzr-radius-sm );
	box-shadow: 0 10px 30px rgba( 0, 0, 0, 0.12 );
}

.bzr-account-annuleer-vraag {
	margin: 0 0 2px;
	font-size: 0.86rem;
	font-weight: 600;
	line-height: 1.4;
}

.bzr-account-annuleer-keuze .bzr-btn {
	width: 100%;
}

/* Kalenderknop en uitloggen naast elkaar in de kop. */
.bzr-account-acties {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

@media ( max-width: 600px ) {
	.bzr-account-res-item {
		flex-wrap: wrap;
	}

	.bzr-account-res-actie {
		flex: 1 1 100%;
	}

	.bzr-account-res-actie form,
	.bzr-account-res-actie > .bzr-btn,
	.bzr-account-annuleer {
		flex: 1 1 0;
	}

	/* Op een telefoon klapt de keuze uit onder de knoppen, over de volle
	   breedte, in plaats van als zwevend paneel. */
	.bzr-account-res-actie {
		flex-wrap: wrap;
	}

	.bzr-account-annuleer[open] {
		flex-basis: 100%;
		order: 2;
	}

	.bzr-account .bzr-account-annuleer-keuze {
		position: static;
		width: auto;
		margin-top: 8px;
		box-shadow: none;
	}

	.bzr-account-res-actie .bzr-btn {
		width: 100%;
	}

	.bzr-account-acties .bzr-btn {
		flex: 1 1 0;
	}
}

/* Op telefoonbreedte label boven waarde, en de uitlogknop over de volle breedte. */
@media ( max-width: 600px ) {
	.bzr-account-row dt {
		flex: 1 1 100%;
	}

	.bzr-account-head {
		flex-direction: column;
		align-items: stretch;
	}

	.bzr-account-logout {
		width: 100%;
	}
}

.bzr-login-note {
	background: var( --bzr-surface );
	border: 1px solid var( --bzr-border );
	border-radius: var( --bzr-radius-md );
	padding: 14px 16px;
	color: var( --bzr-text );
}

.bzr-login-link,
.bzr-toast-link {
	color: var( --bzr-primary );
	font-weight: 700;
	text-decoration: underline;
}

/* ------------------------------------------------------------------ *
 * Modal
 * ------------------------------------------------------------------ */
.bzr-modal-overlay[hidden],
.bzr-popover[hidden],
.bzr-group-field[hidden],
.bzr-admin-group-field[hidden],
.bzr-recur[hidden],
.bzr-recur-until[hidden],
.bzr-recur-hint[hidden],
.bzr-app .bzr-scope[hidden],
.bzr-app .bzr-scope-opt[hidden],
.bzr-form-error[hidden] {
	display: none;
}

.bzr-modal-overlay {
	position: fixed;
	inset: 0;
	z-index: 100000;
	background: rgba( 30, 19, 41, 0.55 );
	backdrop-filter: blur( 3px );
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	overflow-y: auto;
}

.bzr-modal-card {
	position: relative;
	background: var( --bzr-bg );
	border-radius: var( --bzr-radius );
	box-shadow: var( --bzr-shadow-lg );
	width: 100%;
	max-width: 460px;
	/* Nooit hoger dan het venster: kop en knoppenbalk blijven staan, alleen de
	   velden schuiven. */
	max-height: calc( 100vh - 32px );
	display: flex;
	flex-direction: column;
	padding: 20px 22px 16px;
	font-family: var( --bzr-font );
	color: var( --bzr-text );
	animation: bzr-pop 0.18s ease;
}

@keyframes bzr-pop {
	from { transform: translateY( 10px ) scale( 0.98 ); opacity: 0; }
	to { transform: none; opacity: 1; }
}

.bzr-modal-title {
	font-family: var( --bzr-font-heading );
	margin: 0 0 12px;
	padding-right: 36px;
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -0.01em;
	flex: 0 0 auto;
}

.bzr-modal-close,
.bzr-popover-close {
	position: absolute;
	top: 14px;
	right: 16px;
	background: none;
	border: none;
	font-size: 1.5rem;
	line-height: 1;
	color: var( --bzr-muted );
	cursor: pointer;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border-radius: var( --bzr-radius-pill );
	transition: var( --bzr-btn-transition );
}

.bzr-modal-close:hover,
.bzr-popover-close:hover {
	color: var( --bzr-primary );
	background: var( --bzr-primary-soft );
}

.bzr-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 0;
	flex: 1 1 auto;
}

/* Alleen de velden scrollen; stappenbalk en knoppen blijven in beeld. */
.bzr-form-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	overscroll-behavior: contain;
	margin: 0 -22px;
	padding: 2px 22px;
}

.bzr-step {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.bzr-step[hidden] {
	display: none;
}

/* ------------------------------------------------------------------ *
 * Stappenbalk
 * ------------------------------------------------------------------ */
.bzr-steps {
	list-style: none;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	padding: 0;
	flex: 0 0 auto;
}

.bzr-step-dot {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var( --bzr-muted );
	white-space: nowrap;
}

.bzr-step-dot + .bzr-step-dot::before {
	content: "";
	width: 18px;
	height: 1px;
	background: var( --bzr-border-strong );
	margin-right: 1px;
}

.bzr-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: var( --bzr-radius-pill );
	background: var( --bzr-surface );
	border: 1px solid var( --bzr-border-strong );
	font-size: 0.72rem;
	line-height: 1;
}

.bzr-step-dot.is-current {
	color: var( --bzr-text );
}

.bzr-step-dot.is-current .bzr-step-num,
.bzr-step-dot.is-done .bzr-step-num {
	background: var( --bzr-primary );
	border-color: var( --bzr-primary );
	color: #fff;
}

.bzr-field {
	display: flex;
	flex-direction: column;
	gap: 5px;
}

.bzr-field label,
.bzr-field-label {
	font-size: 0.83rem;
	font-weight: 600;
	color: var( --bzr-muted );
}

/* Van/Tot onder elkaar. Naast elkaar bleef er in een modal van 460px nog
   ~97px over per datumveld, waardoor "17-09-2026" werd afgekapt tot "17-09-2". */
.bzr-field-row {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

/* De herhalingsrij bevat twee smalle keuzevelden en past wél naast elkaar. */
.bzr-field-row.bzr-recur {
	flex-direction: row;
}

.bzr-datetime input[ type="date" ] {
	flex: 1.3;
}

.bzr-datetime input[ type="time" ] {
	flex: 1;
}

.bzr-field-row > .bzr-field {
	flex: 1;
	min-width: 0;
}

.bzr-datetime {
	display: flex;
	gap: 8px;
}

.bzr-datetime input {
	min-width: 0;
	flex: 1;
}

.bzr-group-field {
	background: var( --bzr-primary-soft );
	border: 1px solid var( --bzr-primary-100 );
	border-radius: var( --bzr-radius-sm );
	padding: 10px 12px;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}

.bzr-group-value {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	color: var( --bzr-text );
}

.bzr-group-swatch {
	width: 14px;
	height: 14px;
	border-radius: 50%;
	box-shadow: inset 0 0 0 1px rgba( 0, 0, 0, 0.08 );
}

.bzr-form-error {
	margin: 0;
	background: #fef2f2;
	color: #b91c1c;
	border: 1px solid #fecaca;
	border-radius: var( --bzr-radius-sm );
	padding: 10px 12px;
	font-size: 0.9rem;
}

.bzr-check-field {
	background: var( --bzr-surface );
	border: 1px solid var( --bzr-border );
	border-radius: var( --bzr-radius-sm );
	padding: 9px 12px;
	gap: 4px;
}

/* Room multi-select: a wrapping row of checkboxes. */
.bzr-rooms-check {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 14px;
	background: var( --bzr-bg );
	border: 1px solid var( --bzr-border-strong );
	border-radius: var( --bzr-radius-sm );
	padding: 8px 10px;
}

.bzr-check.bzr-check--inline {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	font-size: 0.92rem;
	cursor: pointer;
}

.bzr-check.bzr-check--inline input[type="checkbox"] {
	width: 16px;
	height: 16px;
	margin: 0;
	accent-color: var( --bzr-primary );
	cursor: pointer;
}

.bzr-check {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-weight: 600;
	color: var( --bzr-text );
	cursor: pointer;
}

.bzr-check input[type="checkbox"] {
	width: 17px;
	height: 17px;
	margin: 1px 0 0;
	flex: 0 0 auto;
	accent-color: var( --bzr-primary );
	cursor: pointer;
}

.bzr-check-hint {
	display: block;
	font-size: 0.78rem;
	color: var( --bzr-muted );
	font-weight: 400;
	line-height: 1.4;
}

/* Reekskeuze bij bewerken: alleen deze / deze en volgende / alle komende.
   Fieldset en legend krijgen van het thema (Uncode) eigen randen en marges;
   die zetten we hier terug. */
.bzr-app .bzr-scope {
	display: flex;
	flex-direction: column;
	gap: 6px;
	margin: 0 0 14px !important;
	padding: 10px 12px !important;
	min-width: 0;
	background: var( --bzr-primary-soft );
	border: 1px solid var( --bzr-primary-100 ) !important;
	border-radius: var( --bzr-radius-sm );
}

.bzr-app .bzr-scope legend {
	float: left;
	width: 100%;
	padding: 0 !important;
	margin: 0 0 4px !important;
	border: 0 !important;
	font-size: 0.83rem;
	font-weight: 600;
	color: var( --bzr-text );
}

.bzr-app .bzr-scope-opt {
	display: flex;
	align-items: center;
	gap: 9px;
	font-size: 0.92rem;
	line-height: 1.4;
	font-weight: 600;
	color: var( --bzr-text );
	cursor: pointer;
}

.bzr-app .bzr-scope-opt input[type="radio"] {
	width: 17px;
	height: 17px;
	margin: 0 !important;
	flex: 0 0 auto;
	accent-color: var( --bzr-primary );
	cursor: pointer;
}

.bzr-scope-count {
	font-weight: 400;
	color: var( --bzr-muted );
}

.bzr-recur-hint {
	margin: -4px 0 0;
}

.bzr-pop-question {
	margin: 0 0 2px;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.4;
}

.bzr-form-actions {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	flex: 0 0 auto;
	padding-top: 12px;
	border-top: 1px solid var( --bzr-border );
}

/* Annuleren links, de stapknoppen rechts. */
.bzr-form-actions > [data-bzr-close] {
	margin-right: auto;
}

/* `!important` is nodig omdat .bzr-btn zelf `display: inline-flex !important`
   draagt (om themastyling te weren). Zonder dit bleven de verborgen stapknoppen
   gewoon zichtbaar en stonden "Volgende" en "Reserveren" naast elkaar. */
.bzr-btn[hidden],
.bzr-form-actions .bzr-btn[hidden] {
	display: none !important;
}

body.bzr-modal-open {
	overflow: hidden;
}

/* ------------------------------------------------------------------ *
 * Popover (event details)
 * ------------------------------------------------------------------ */
.bzr-popover {
	/* Vast t.o.v. het venster: zie position() in public.js. */
	position: fixed;
	z-index: 100001;
	width: 290px;
	max-width: calc( 100vw - 16px );
	background: var( --bzr-bg );
	border: 1px solid var( --bzr-border );
	border-radius: var( --bzr-radius-md );
	box-shadow: var( --bzr-shadow-lg );
	padding: 18px 18px 16px;
	font-family: var( --bzr-font );
	color: var( --bzr-text );
}

.bzr-pop-title {
	font-family: var( --bzr-font-heading );
	margin: 0 24px 12px 0;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.bzr-pop-row {
	display: flex;
	flex-direction: column;
	gap: 1px;
	margin-bottom: 9px;
}

.bzr-pop-label {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var( --bzr-muted );
	font-weight: 700;
}

.bzr-pop-value {
	font-size: 0.92rem;
}

.bzr-pop-actions {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.bzr-pop-actions .bzr-btn {
	width: 100%;
}

/* ------------------------------------------------------------------ *
 * Toasts
 * ------------------------------------------------------------------ */
.bzr-toasts {
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 100002;
	display: flex;
	flex-direction: column;
	gap: 10px;
	max-width: min( 360px, calc( 100vw - 40px ) );
}

.bzr-toast {
	background: var( --bzr-text );
	color: #fff;
	padding: 12px 16px;
	border-radius: var( --bzr-radius-sm );
	box-shadow: var( --bzr-shadow );
	font-size: 0.92rem;
	opacity: 0;
	transform: translateY( 10px );
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.bzr-toast.is-visible {
	opacity: 1;
	transform: none;
}

.bzr-toast-success {
	background: var( --bzr-primary );
}

.bzr-toast-error {
	background: #dc2626;
}

.bzr-toast-info {
	background: var( --bzr-text );
}

/* Niet ingeplande data: opvallend en blijvend tot "Begrepen". */
.bzr-toast-warning {
	background: #fffbeb;
	color: #78350f;
	border: 1px solid #f59e0b;
	border-left-width: 5px;
}

.bzr-toast-title {
	font-weight: 700;
	display: block;
	margin-bottom: 4px;
	font-size: 0.95rem;
}

.bzr-toast-text {
	margin: 0 0 6px;
	line-height: 1.4;
}

.bzr-toast-list {
	margin: 0 0 10px;
	padding-left: 18px;
	max-height: 40vh;
	overflow-y: auto;
	line-height: 1.4;
}

.bzr-toast-list li {
	margin: 0 0 3px;
}

.bzr-app .bzr-toast-close,
.bzr-toast-close {
	background: #78350f;
	color: #fff;
	border-color: #78350f;
}

.bzr-toast-link {
	color: #fff;
	text-decoration: underline;
	margin-left: 4px;
}

/* ------------------------------------------------------------------ *
 * Telefoon: minder chroom vóór de kalender
 * ------------------------------------------------------------------ */
@media ( max-width: 767px ) {
	/* Twee knoppen naast elkaar in plaats van onder elkaar scheelt een hele
	   knoprij voordat je de kalender ziet. */
	.bzr-side-actions {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 8px;
		align-items: stretch;
	}

	.bzr-side-actions > .bzr-btn,
	.bzr-side-actions > .bzr-export {
		width: 100%;
		min-width: 0;
	}

	.bzr-side-actions > .bzr-export > .bzr-export-toggle {
		width: 100%;
	}

	/* Compactere knoppen: de tekst mag afbreken in plaats van de knop op te
	   rekken, maar de hoogte blijft ruim genoeg om te tikken. */
	.bzr-side-actions > .bzr-btn,
	.bzr-side-actions > .bzr-export > .bzr-export-toggle {
		--bzr-btn-px: 14px;
		--bzr-btn-py: 11px;
		--bzr-btn-font: 0.88rem;
		gap: 7px;
		white-space: normal;
		line-height: 1.15;
	}

	/* Kop en introregel kleiner; ze kosten anders een kwart van het scherm. */
	.bzr-header {
		margin-bottom: 12px;
	}

	.bzr-header-title {
		font-size: 1.3rem;
	}

	.bzr-header-sub {
		font-size: 0.86rem;
	}

	/* De kalenderbalk zelf: kleinere knoppen en titel, minder tussenruimte. */
	.bzr-calendar-card {
		padding: 10px;
	}

	.bzr-app .fc .fc-toolbar.fc-header-toolbar {
		gap: 8px;
		margin-bottom: 10px;
	}

	.bzr-app .fc .fc-toolbar-title {
		font-size: 1.05rem;
	}

	.bzr-app .fc .fc-button-primary {
		font-size: 0.8rem;
		padding: 7px 14px;
		min-height: 36px;
	}

	.bzr-app .fc .fc-button-group > .fc-button:first-child {
		padding-left: 16px;
	}

	.bzr-app .fc .fc-button-group > .fc-button:last-child {
		padding-right: 16px;
	}

	.bzr-app .fc .fc-button-group > .fc-prev-button,
	.bzr-app .fc .fc-button-group > .fc-next-button,
	.bzr-app .fc .fc-prev-button,
	.bzr-app .fc .fc-next-button {
		padding-left: 12px;
		padding-right: 12px;
	}
}

/* ------------------------------------------------------------------ *
 * Lijstweergave (standaard op een telefoon)
 * ------------------------------------------------------------------ */
.bzr-app .fc .fc-list {
	border: 1px solid var( --bzr-border );
	border-radius: var( --bzr-radius-md );
	overflow: hidden;
}

.bzr-app .fc .fc-list-day-cushion {
	background: var( --bzr-surface );
	font-weight: 700;
	text-transform: capitalize;
	padding: 9px 12px;
}

.bzr-app .fc .fc-list-event td {
	padding: 10px 12px;
}

.bzr-app .fc .fc-list-event:hover td {
	background: var( --bzr-primary-soft );
}

.bzr-app .fc .fc-list-event-time {
	white-space: nowrap;
	color: var( --bzr-muted );
	font-variant-numeric: tabular-nums;
}

.bzr-app .fc .fc-list-event-title a {
	color: var( --bzr-text );
	font-weight: 600;
	text-decoration: none;
}

/* Titel met daaronder vereniging en ruimte (zie listEventContent in public.js). */
.bzr-app .fc .bzr-list-row {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 0;
}

.bzr-app .fc .bzr-list-title {
	font-weight: 600;
	color: var( --bzr-text );
}

.bzr-app .fc .bzr-list-meta {
	font-size: 0.86em;
	color: var( --bzr-muted );
	font-weight: 400;
}

.bzr-app .fc .fc-list-event-dot {
	border-width: 5px;
}

.bzr-app .fc .fc-list-empty {
	background: var( --bzr-surface );
	color: var( --bzr-muted );
}

/* ------------------------------------------------------------------ *
 * Responsive
 * ------------------------------------------------------------------ */
@media ( max-width: 720px ) {
	.bzr-header-title {
		font-size: 1.55rem;
	}

	.bzr-app .fc .fc-toolbar.fc-header-toolbar {
		flex-direction: column;
		align-items: stretch;
	}

	.bzr-app .fc .fc-toolbar-title {
		text-align: center;
	}

	.bzr-field-row {
		flex-direction: column;
	}

	.bzr-calendar-card {
		padding: 12px;
	}

	.bzr-toasts {
		left: 16px;
		right: 16px;
		bottom: 16px;
		max-width: none;
	}

	/* Drie knoppen naast elkaar passen niet op telefoonbreedte; "Reserveren"
	   liep half buiten beeld. Onder elkaar, bevestigen bovenaan. */
	.bzr-form-actions {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.bzr-form-actions .bzr-btn {
		width: 100%;
	}

	.bzr-form-actions > [data-bzr-close] {
		margin-right: 0;
	}
}