:root {
	--menuheaderselected_BG: #ffffff;
	--menuheadernotselected_BG: #FF9800;
	--bordercolored: #878787;
	--AfasDome_BG: #0b7ad2;
	--LottoArena_BG: #ee3124;
	--StadsSchouwburg_BG: #8a6cd3;
	--tappen_BG: Yellow;
	--vrijwil_BG: Blue;
	--goeddoel_BG: Red;

	/* ── site-wide colors ──
	   Every color used across main.css, main_GSM.css, box.css
	   and plusmin.css is defined here, so the whole site's palette can be
	   changed from this one place. Grouped by role; each value is exactly
	   what was previously hard-coded at each usage site (see the commit
	   this block was introduced in for the original literal -> variable
	   mapping if you need to trace one back). */

	/* base named colors */
	--color-white: #ffffff;
	--color-black: #000000;
	--color-darkgray: darkgray;
	--color-lightgray: lightgray;
	--color-red: red;
	--color-blue: blue;
	--color-yellow: yellow;
	--color-green: green;
	--color-bisque: bisque;

	/* backgrounds */
	--color-bg-page: #0f0f0f;
	--color-bg-card: #1a1a1a;
	--color-bg-elevated: #1f1f1f;
	--color-bg-deep: #222;
	--color-bg-panel: #272727;
	--color-bg-medium: #555555;
	--color-bg-success: #e7f7db;
	--color-bg-offwhite: #f1f1f1;
	--color-bg-error-light: #ffd7d7;
	--color-bg-card-noalpha: rgba(26,26,26);
	--color-bg-gray-227: rgb(227, 227, 227);
	--color-bg-gray-241: rgb(241, 241, 241);
	--color-bg-gray-244: rgb(244, 244, 244);
	--color-bg-gray-75: rgb(75 75 75);

	/* text */
	--color-text-body: #f0f0f0;
	--color-text-light: #ddd;
	--color-text-muted: #666;
	--color-text-secondary: #444;
	--color-text-secondary-alt: #454545;
	--color-text-heading: #494949;
	--color-text-pink: #e09090;
	/* Strongest-contrast text on the page body - literal white in dark
	   theme (many public pages hardcode "color:white" on a word/phrase
	   for emphasis, matching .GD below), flipped to a strong dark in
	   light theme. Use .text-emphasis (or var(--color-text-emphasis)
	   directly) instead of a literal white/#fff for any such emphasis
	   text sitting on the page body - a literal white does not flip. */
	--color-text-emphasis: var(--color-white);

	/* borders */
	--color-border-dark: #2a2a2a;
	--color-border-subtle: #3a3a3a;
	--color-border-light: #a3a3a3;
	--color-border-lighter: #ccc;
	--color-border-lightest: #d5d5d5;
	--color-border-faint: #dfdfdf;
	--color-border-pale: #e2e2e2;
	--color-border-error: #ff6e58;

	/* neutral grays without a single clear role */
	--color-gray-200: #cbcbcb;
	--color-gray-250: #b3b3b3;
	--color-gray-300: #aaa;
	--color-gray-350: #999;
	--color-gray-400: #888;
	--color-gray-600: #555;
	--color-gray-900: #333;

	/* accents */
	--color-accent-orange: #f5933b;
	--color-accent-orange-dark: #e7572a;
	--color-accent-orange-bright: #f74410;
	--color-accent-red: #fd4312;

	/* shadows / overlays */
	--color-shadow: rgba(0, 0, 0, 0.4);
	--color-overlay-lightgray: rgba(211, 211, 211, 0.25);
	--color-overlay-gray: rgba(220, 220, 220, .4);
	--color-overlay-orange: rgba(254, 174, 89, 0.50);
	--color-overlay-orange-strong: rgba(254, 174, 89, 0.8);
	--color-overlay-white: rgba(255, 255, 255, .2);
}

/* ── light theme ──
   Overrides only the page/content neutrals that actually need to flip for
   a light look (page/panel backgrounds, body text). Deliberately leaves
   --color-white, --color-black and --color-bg-card untouched: they do
   double duty as "dark text on an already-light surface" in several spots
   (.lgBorderP5Bw, .aanmeldentext on the login card, table .odd rows) that
   must NOT flip, since those surfaces are already light in the dark theme
   and should stay exactly as-is here too. The top nav bar and its
   dropdown are kept visually dark in both themes on purpose (--color-
   border-dark and --color-bg-card are untouched) - a common, deliberate
   light-theme pattern where only the page content area switches. See
   ToggleTheme() in nav.php for how this attribute gets applied/persisted. */
html[data-theme="light"] {
	--color-bg-page: #f2f2f2;
	--color-bg-deep: #e2e2e2;
	--color-bg-panel: #ececec;
	--color-bg-medium: #cfcfcf;
	--color-bg-elevated: #ffffff;
	--color-text-body: #1a1a1a;
	--color-text-light: #2e2e2e;
	--color-text-emphasis: #000000;
}

/* Reusable class for the "highlighted word/phrase" pattern used across the
   public pages (index.php, over-ons.php, goededoelen.php, concerten.php,
   include/heading.php, include/footer.php) - use this instead of a literal
   color:white so the emphasis still reads correctly in the light theme. */
.text-emphasis {
	color: var(--color-text-emphasis);
}

/* The small build/version footer widget (include/footer.php) stays
   dark-mode styled in both themes on purpose, by request - locked back to
   its literal dark values here rather than following --color-bg-deep/
   --color-gray-400/--color-gray-900's site-wide light-theme flip. */
html[data-theme="light"] .footer {
	background: #222222;
	color: #888888;
	border-color: #333333;
}
html[data-theme="light"] .footer .text-emphasis {
	color: #ffffff;
}

/* Rich-text canvas + its public read-only display surfaces (Briefing on
   concerten.php, Lange omschrijving on goededoelen.php - both use the
   same shared editor, include/richtext_editor.php) stay locked to their
   original dark-theme literal colors in both themes. The editor's color
   picker lets an admin pick literal colors (including white) for
   emphasis, baked straight into the saved HTML (Concerten.Briefing /
   Goededoelen.LangeOmschrijving) and later injected raw via .html(...) -
   if the surrounding canvas followed the site theme and flipped to a
   light background, any white text baked into old content would turn
   invisible. Locking the canvas itself keeps every already-saved
   Briefing/omschrijving readable regardless of site theme, instead of
   trying to rewrite author-chosen inline colors. */
html[data-theme="light"] .richtext-editor {
	background: #0f0f0f;
	color: #f0f0f0;
	border-color: #2a2a2a;
}
html[data-theme="light"] .divBriefing {
	background: #1f1f1f;
	color: #ddd;
}
html[data-theme="light"] .divGoedDoelDetail {
	background: #272727;
	border-color: #2a2a2a;
	color: #f0f0f0;
}

/* Nav bar, light theme: by request, a light gray bar instead of staying
   dark - so its own text/hover need their own explicit light-theme
   colors too, since --color-gray-300/--color-white (their dark-theme
   values) would be far too low-contrast against #dddbdb. */
html[data-theme="light"] nav {
	background: #dddbdb;
}
html[data-theme="light"] .nav-brand,
html[data-theme="light"] .nav-links a,
html[data-theme="light"] .nav-username {
	color: #555555;
}
html[data-theme="light"] .nav-links a:hover,
html[data-theme="light"] .nav-links a.active,
html[data-theme="light"] .nav-username:hover {
	color: #000000;
}
html[data-theme="light"] .nav-toggle span {
	background: #555555;
}
/* Mobile/narrow-viewport dropdown panel that .nav-links becomes (see
   main_GSM.css's media queries) - its own --color-bg-card/--color-
   border-dark background is separate from the desktop bar above and
   was still rendering dark. Higher specificity here (an attribute
   selector added) wins over those media-query rules regardless of
   file load order, so one override covers every breakpoint. */
html[data-theme="light"] .nav-links {
	background: #dddbdb;
}
html[data-theme="light"] .nav-login {
	color: #555555;
}
html[data-theme="light"] .nav-login:hover {
	background: #c5c5c5;
}
/* The username-click logout dropdown visually appends right under the
   nav/mobile-menu panel above (see .nav-links:has(+ .nav-link_logout.open)
   in main_GSM.css) - it needs the same light treatment or it reads as a
   leftover dark fragment beneath an otherwise-light menu. */
html[data-theme="light"] .nav-link_logout {
	background: #dddbdb;
}
html[data-theme="light"] .nav-link_logout a {
	color: #555555;
}
html[data-theme="light"] .nav-link_logout a:hover,
html[data-theme="light"] .nav-link_logout a.active {
	color: #000000;
}

*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: 'Segoe UI', sans-serif;
	background: var(--color-bg-page);
	color: var(--color-text-body);
	min-height: 100vh;
	min-height: 99dvh;
	overflow-x: hidden;
	touch-action: pan-y;
	height: 100vh;
	height: 100dvh;
}


input, textarea {
		font: inherit;	
}
input {
	text-decoration:none;
	outline:none;
}

	a {
		cursor: pointer;
		text-decoration: none;
		color: var(--color-text-emphasis);
	}

	.divbody {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 90vh;
	}

	.divbody:has(#divOverOns) {
		height: calc(100vh - 70px);
		height: calc(100dvh - 70px);
	}

	.divbody:has(#page-body) {
		height: calc(100vh - 70px);
		height: calc(100dvh - 70px);
	}

	.divbody:has(#divGoededoelen) {
		height: calc(100vh - 70px);
		height: calc(100dvh - 70px);
	}

	.divbody:has(.Concerten) {
		height: calc(100vh - 70px);
		height: calc(100dvh - 70px);
	}

	.divbody:has(#divTrooper) {
		height: calc(100vh - 70px);
		height: calc(100dvh - 70px);
	}

	.divbody:has(#divLogin) {
		height: calc(100vh - 70px);
		height: calc(100dvh - 70px);
	}

	.divbody:has(#divInschrijvingen) {
		height: calc(100vh - 70px);
		height: calc(100dvh - 70px);
	}

	#map-canvas {
		width: 800px;
		height: 400px;
	}

	#adreskiezer {
		width: 335px;
		height: 400px;
	}

	.login {
		float: right;
	}

	.item {
		height: 700px;
	}

	.carousel {
	}

	#samenvatting {
		padding: 10px;
	}

	.admin th {
		cursor: pointer;
	}

	.order-overzicht {
		margin-left: 60px;
	}

		.order-overzicht div {
			padding-left: 30px;
		}

	#afbeeldingen {
		margin-bottom: 20px;
	}

	.fotoitem {
		width: 100px;
		height: 100px;
		position: relative;
		overflow: hidden;
		display: inline-block;
		border: 1px solid var(--color-black);
		margin: 5px;
	}

	img {
		image-orientation: from-image;
	}

	.fotoitem img {
		position: absolute;
		width: 150px;
		left: -50%;
		image-orientation: from-image;
	}

	.btn2 {
		margin-left: 50px;
		margin-top: 50px;
	}

	#selectproduct {
		width: 200px;
	}

	#selectbutton {
		width: 200px;
	}
	/*html, body {
	height:99%;
}*/
	* {
		box-sizing: border-box;
		-moz-box-sizing: border-box;
	}

	#search-result {
		width: 1470px;
	}

	.main {
		padding: 0 209px;
		display: -webkit-flex;
		/*    justify-content: center;  
	flex-wrap:wrap;*/
		height: 100%;
	}
	/*.overons-card {
	background: var(--color-bg-card);
	border: 1px solid var(--color-gray-600);
	border-radius: 12px;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	transition: opacity 5s linear;
	z-index: 1;
	width: 1125px;
	opacity: 0;
}

.overons-card.visible {
		opacity: 1;
	}
*/
	#divOverOns {
		opacity: 0;
		transition: opacity 0.5s linear;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		max-height: calc(100vh - 70px);
		max-height: calc(100dvh - 70px);
		/*gap: 0.75rem;*/
		/*	width: 1125px;
	height: 89vh;*/
	}

		#divOverOns.visible {
			opacity: 1;
			transition: opacity 0.5s linear 0.2s;
		}

	#divMailing {
		opacity: 0;
		transition: opacity 0.5s linear;
		display: flex;
		flex-direction: column;
		/*gap: 0.75rem;*/
		/*	width: 1125px;
	height: 89vh;*/
	}

		#divMailing.visible {
			opacity: 1;
			transition: opacity 0.5s linear 0.2s;
		}

	#divGoededoelen {
		opacity: 0;
		transition: opacity 0.5s linear;
		display: flex;
		flex-direction: column;
		overflow: hidden;
		max-height: calc(100vh - 70px);
		max-height: calc(100dvh - 70px);
		/*gap: 0.75rem;*/
		/*	width: 1125px;
	height: 89vh;*/
	}

		#divGoededoelen.visible {
			opacity: 1;
			transition: opacity 0.5s linear 0.2s;
		}

	#divBeheer {
		opacity: 0;
		transition: opacity 0.5s linear;
		display: flex;
		flex-direction: column;
	}

		#divBeheer.visible {
			opacity: 1;
			transition: opacity 0.5s linear 0.2s;
		}

	#divRapporten {
		opacity: 0;
		transition: opacity 0.5s linear;
		display: flex;
		flex-direction: column;
	}

		#divRapporten.visible {
			opacity: 1;
			transition: opacity 0.5s linear 0.2s;
		}

	.aanmelden {
		border-radius: 5px;
		padding: 5px;
		margin: 5px 10px;
		width: 90%;
	}

	input.aanmelden {
		padding: 20px 10px;
	}

	.aanmeldentext {
		padding: 5px;
		margin: 5px 10px;
		color: var(--color-bg-card);
		font-size: 23px;
		font-weight: bold;
	}

	.aanmeldenbutton {
		padding: 5px;
		margin: 25px 10px 5px 15px;
		border-radius: 5px;
		width: 60%;
		font-size: 20px;
		font-weight: bold;
		color: var(--color-white);
		background-color: var(--color-bg-card-noalpha);
		outline: none;
	}

	.aanmeldencheckbox {
		padding: 5px;
		margin: 1px 10px 5px;
	}

	.login-links {
		display: flex;
		justify-content: center;
		gap: 20px;
		margin-top: 5px;
		margin-bottom:10px;
		font-size: 0.85rem;
	}
	.login-links a {
		color: var(--color-text-secondary);
		text-decoration: underline;
		cursor: pointer;
	}
	.login-links a:hover {
		color: var(--color-black);
	}
	.req-helptext {
		font-size: 0.8rem;
		color: var(--color-text-muted);
		text-align: center;
		/* 34px clears the close (X) button, which sits top-right of .divLoginLogin
		   and overlaps this text when it's the topmost element (the post-Aanvragen
		   confirmation screen, where requestHelp is shown before requestFields is
		   hidden and no longer pushed down by it). */
		margin-top: 34px;
		margin-bottom: 10px;
		padding: 0 10px;
	}

	.tabheader {
		border-radius: 5px 5px 0px 0px;
		border-left: 1px solid var(--color-border-lightest);
		border-top: 1px solid var(--color-border-lightest);
		border-right: 1px solid var(--color-border-lightest);
		width: 200px;
		height: 36px;
		cursor: pointer;
		float: left;
		margin: 8px 0px 0px 10px;
		text-align: center;
		line-height: normal;
		padding: 10px;
	}

		.tabheader:hover, .subtabheader:hover {
			font-weight: bold;
			color: var(--color-accent-red);
			overflow: initial;
		}

	.subtabheader {
		border-radius: 5px 5px 0px 0px;
		border-left: 1px solid var(--color-border-lightest);
		border-top: 1px solid var(--color-border-lightest);
		border-right: 1px solid var(--color-border-lightest);
		width: 200px;
		height: 36px;
		cursor: pointer;
		float: left;
		margin: 8px 0px 0px 10px;
		text-align: center;
		line-height: normal;
		padding: 10px;
	}


	.tabheaderselected {
		border-bottom: 1px solid var(--color-bg-success);
		background-color: var(--color-bg-success);
		font-weight: bold;
		color: var(--color-accent-red);
	}

	.tabheadernotselected {
		background-color: var(--color-overlay-lightgray);
		overflow: hidden;
	}


	.menuheader {
		border-radius: 7px;
		width: 184px;
		height: 25px;
		cursor: pointer;
		float: left;
		margin: 7px;
		text-align: center;
		line-height: 4px;
		padding: 10px;
		background-color: var(--color-bisque);
	}

		.menuheader:not(.menuheaderdisabled):hover {
			font-weight: bold;
			color: var(--color-white);
		}

		.menuheader a {
			color: inherit;
		}

	.menuheaderselected {
		background-color: var(--menuheaderselected_BG);
		font-weight: bold;
		color: var(--color-white);
	}

		.menuheaderselected a:hover {
			color: inherit;
			text-decoration: none;
		}

	.menuheadernotselected {
		background-color: var(--color-accent-orange);
	}

		.menuheadernotselected a:hover {
			color: inherit;
			text-decoration: none;
		}

	.menuheaderdisabled {
		background-color: var(--color-accent-orange);
		color: var(--color-border-pale);
		cursor: default;
		pointer-events: none;
	}

	.tabbody {
		border: 1px solid var(--color-border-lightest);
		border-radius: 5px 5px 5px 5px;
		width: 1470px;
		height: 795px;
		background-color: var(--color-bg-success);
		margin-top: -1px;
		display: flex;
		padding: 10px;
	}

	.subtabbody {
		border: 1px solid var(--color-border-lightest);
		border-radius: 5px 5px 5px 5px;
		width: 1435px;
		height: 727px;
		background-color: var(--color-bg-success);
		margin-top: -1px;
		display: flex;
		padding: 10px;
	}

	.tabbodydetail {
		margin-left: auto;
		margin-right: auto;
		width: 100%;
		display: none;
	}

	.tabsubtitle {
		margin-left: 15px;
		background-color: var(--color-bg-gray-227);
		color: var(--color-black);
		border: 1px solid var(--color-darkgray);
		border-radius: 3px;
		padding-left: 5px;
		width: 210px;
	}

	.search {
		border-radius: 5px;
		border: 1px solid;
		border-color: var(--color-darkgray);
		//margin-top: 5px;
		padding: 5px;
		/*	height: 790px;
	overflow: hidden;
*/
	}


	.actions, overlay message buttons {
		display: block;
		/*	width: 99%;   */
		border-radius: 5px;
		border: 1px solid var(--color-darkgray);
		margin: 5px;
		padding: 5px;
		background-color: var(--color-bg-gray-241);
		text-align: left;
	}

		.actions input[type="button"], input[type="text"], input[type="password"], textarea, overlay message buttons submit {
			background-color: var(--color-white);
			border: 1px solid var(--color-border-faint);
			/*	padding: 6px 14px;  */
			border-radius: 5px;
			/*    height: 25px; */
		}

	.placehldr label {
		display: none;
	}

	.placehldr input:focus ~ label {
		display: block;
	}

	overlay message buttons submit {
		cursor: pointer;
	}

	th {
		font-size: 13px;
		font-weight: bold;
		font-family: arial, helvetica, sans-serif;
		color: var(--color-darkgray);
		background-color: var(--color-bg-card);
		height: 110%;
		text-align: left;
		padding-left: 2px;
		padding-right: 2px;
	}

	.odd {
		background-color: var(--color-white);
		color: var(--color-text-heading);
		cursor: pointer;
		height: 30px;
	}

	.even {
		background-color: var(--bordercolored);
		/*background-color: var(--color-overlay-orange);*/
		cursor: pointer;
		height: 30px;
	}

	tr.even a {
		color: var(--color-white);
	}

	tr.odd a {
		color: var(--color-text-heading);
	}

	.tabletext {
		background-color: var(--color-white);
		margin-left: 10px;
		margin-right: 10px;
		margin-bottom: 10px;
		/*	color:var(--color-white);
	border: 1px solid var(--color-darkgray); */
		border-radius: 3px;
		font-family: Arial;
		font-size: 16px;
	}

	.tablelabel, overlay message h2 {
		padding: 5px;
		margin: 5px;
		/*	text-align: center; */
		/*font-family: 'bahamasregular';*/
		font-size: 22px;
		/*	font-weight: bold; */
		border-radius: 5px;
		border: 1px solid var(--color-darkgray);
		background-color: var(--color-bg-gray-244);
		height: 40px;
	}
	/**/

	overlay {
		display: block;
		height: 100%;
		width: 100%;
		position: fixed;
		top: 0;
		left: 0;
		background-color: var(--color-overlay-gray);
		z-index: 200;
	}


		overlay message {
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
			width: 650px;
			height: 175px;
			padding: 10px;
			color: var(--color-text-secondary-alt);
			background-color: var(--color-white);
			border-radius: 20px;
			border: 1px solid var(--color-border-faint);
			box-shadow: 2px 2px 5px var(--color-gray-300);
			line-height: 25px;
			text-align: center;
		}
	/*
overlay message h2 {
	margin: -10px -10px 10px;
	padding: 10px;
	font-weight: lighter;
	font-size: 24px;
	text-transform: uppercase;
	background-color: var(--color-bg-offwhite);
	border-radius: 4px;
	border-bottom: 1px solid var(--color-border-faint);
	line-height: initial;
}

overlay message buttons {
	display: block;
	position: absolute;
	bottom: 0;
	right: 0;
	padding: 10px;
}

/*overlay message buttons submit {
	display: inline-block;
	border-radius: 3px;
	background-color: var(--color-accent-orange-dark);
	padding: 6px 16px;
	color: var(--color-white);
	cursor: pointer;
	transition: all linear .2s;
	text-decoration: none;
	margin: 0 2px;
	line-height: initial;
}*/

	.Bewerkingen {
		text-align: center;
		font-size: 17px;
	}

	.divHorColums {
		display: flex;
		align-items: center;
		flex-direction: column;
		height: 100%;
		width: 100%;
	}

	.divVertColums {
		display: flex;
		align-items: center;
		flex-direction: row;
		height: 100%;
		width: 100%;
	}

	.divTextBox {
		overflow: auto;
		border: 1px solid var(--color-lightgray);
		padding: 3px;
	}

	#divaudio img {
		opacity: .3;
		height: 60px;
		width: 60px;
		transition: opacity .3s ease;
		cursor: pointer;
	}

		#divaudio img .audiotxt {
			opacity: 0;
		}

		#divaudio img:hover {
			opacity: .8;
		}

	.ReadOnly {
		color: var(--color-darkgray);
	}

	.selected {
		background-color: var(--color-lightgray);
	}

	.Adv {
		/*opacity: 0.2;*/
		background-color: var(--color-accent-orange);
		border: 4px solid var(--color-white);
		border-radius: 20px;
		width: 25px;
		height: 25px;
		margin-top: 50px;
		cursor: pointer;
		margin-left: 20px;
	}

		.Adv:hover, .AdvSelected {
			background-color: var(--color-accent-orange-bright);
		}

	.dayselected {
		border: 2px solid var(--color-accent-orange);
		padding: 9px;
		background-image: url('../images/checkItem.png');
		background-repeat: no-repeat;
		background-size: 20px 20px;
		background-position: 373px 80px;
	}

	.voorraadbody {
		display: flex;
		flex-direction: column;
		height: 90vh;
		font-family: sans-serif;
		max-width: 420px;
		margin: auto;
		/*text-align: center;*/
		box-sizing: border-box;
		margin-top: 15px;
	}

		.voorraadbody > *:not(.registraties) {
			flex-shrink: 0;
		}

	.registraties {
		flex-grow: 1; /* neemt alle resterende ruimte */
		overflow-y: hidden;
		margin: 10px 5px 0px 5px;
		border: 1px solid var(--color-border-lighter);
		border-radius: 10px;
		width:391px;
	}

		.registraties table {
			background-color: transparent;
			margin-top: -1px;
			width: 100%;
			max-width: unset;
			border-spacing: 2px 2px;
			border-collapse: separate;
			background: var(--color-gray-250);
		}

			.registraties table thead {
				height: 25px;
			}

			.registraties table td {
				padding-left: 5px;
				padding-right: 5px;
			}

			.registraties table th {
				padding-left: 5px;
				padding-right: 5px;
			}

	button {
		padding: 5px;
		margin: 5px;
	}

	.digit {
		width: 60px;
		margin: 2px;
		border-radius: 10px;
		font-weight: bold;
		font-size: 25px;
	}

		.digit:active {
			transform: scale(0.95);
		}

.knoppen-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1px;
	width: 401px;
	/*margin: 10px;*/
	align-content: start;
	/*height: 212px;*/
}

	.knop {
		width: 187px;
		height: 60px;
		margin: 5px;
		border-radius: 10px;
		padding-top: 5px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

		.knop:active {
			transform: scale(0.95);
		}

	.disabled {
		opacity: 0.5;
		pointer-events: none;
	}

	table {
		width: 100%;
		margin-top: 10px;
	}

	.btn_main {
		font-size: x-large;
	}

	.DropDwn {
		background-color: var(--color-text-emphasis);
		padding: 1px;
		border-radius: 0 5px 5px 0;
		outline: none;
		vertical-align: -7.5px;
		margin-left: -1px;
		height: 34px;
		width: 34px;
	}

.DropDwnTxt {
	border-radius: 5px 0 0 5px !important;
	/* Same --color-text-emphasis as .DropDwn's arrow-button background just
	   above, so the border and the button read as one cohesive outline in
	   both themes - and, together with the text color below, actually
	   flips instead of staying white and invisible in the light theme. */
	border: 1px solid var(--color-text-emphasis) !important;
	height: 34px;
	color: var(--color-text-emphasis);
	padding-left: 4px;
	padding-top: 2px;
	outline: 0px;
	font-size: 22px;
	text-align: left;
}

	.DropDownImg {
		cursor: pointer;
	}

	.Ellipsis {
		display: inline-block;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

.lgBorderP5Bw {
	border: 1px solid var(--color-border-light);
	border-radius: 5px;
	padding: 5px;
	background-color: var(--color-white);
	color: var(--color-black);
}

	.lgrBorderP5Bw {
		border: 1px solid var(--bordercolored); /*var(--bordercolored)*/
		border-radius: 5px;
		padding: 5px;
		background-color: var(--color-white);
	}

	.dgBorderP5Bw {
		border: 1px solid var(--color-darkgray);
		border-radius: 5px;
		padding: 5px;
		background-color: var(--color-white);
	}

	.zaal {
		width: 45px;
		cursor: pointer;
	}

	.zaalinfo {
		position: absolute;
		opacity: 0;
		/*display:none;*/
		transition: 0.5s;
		top: 106px;
		border: 1px solid var(--color-white);
		border-radius: 10px;
		width: 300px;
		background-color: var(--color-gray-200);
		z-index: -100;
		height: 429px;
	}
		/*.titel .zaal:hover ~ .zaalinfo {
	opacity: 1;
	z-index: 100;*/
		/*display: block;*/
		/*}*/

		.zaalinfo.visible {
			opacity: 1;
			z-index: 100;
		}

		.zaalinfo .divimg {
			width: 100%;
			background-color: var(--color-black);
			border-radius: 9px 9px 0px 0px;
			padding-top: 10px;
			padding-bottom: 10px;
		}

	.toog {
		display: flex;
		border: 1px solid var(--color-white);
		height: 50px;
		background-color: var(--color-black);
		padding-top: 7px;
		color: var(--color-white);
		justify-content: center;
	}

	#ToogNaam {
		font-size: 25px;
	}

	#ToogOmschr {
		font-size: 17px;
		margin-left: 10px;
		margin-top: 5px;
	}

	.ConcertImg {
		width: 80%;
		display: flex;
		margin-left: auto;
		margin-right: auto;
	}

	.Concert {
		font-size: 24px;
		padding-top: 12px;
	}

	.ConcertDatum {
		font-size: 21px;
	}


	#CloseInfo {
		border: 1px solid var(--color-darkgray);
		border-radius: 10px;
		height: 30px;
		width: 101px;
		background-color: var(--ADcolor_BG);
		cursor: pointer;
		position: absolute;
		bottom: 10px;
		padding-top: 5px;
		text-align: center;
	}

	#Telling {
		height: 30px;
		background-color: var(--bordercolored);
		border-radius: 5px;
		padding: 6px 15px 5px 15px;
		width: 130px;
		margin-right: 20px;
		cursor: pointer;
		color: var(--color-white);
		font-weight: bold;
		border: 1px solid var(--color-white);
	}

	.footer {
		display: flex;
		position: fixed;
		left: 5px;
		bottom: 5px;
		background: var(--color-bg-deep);
		color: var(--color-gray-400);
		border: 1px solid var(--color-gray-900);
		border-radius: 6px;
		padding: 5px;
		width: 146px;
		z-index: 1000000;
		cursor: pointer;
	}
.footer-version {
	margin-left: 5px;
}

	.nav-link_logout {
		display: none;
		flex-direction: column;
		gap: 0;
		position: absolute;
		top: 69px;
		right: 0;
		width: 135px;
		background: var(--color-bg-card);
		border: 1px solid var(--color-border-dark);
		border-radius: 0 0 8px 8px;
		padding: 0.5rem 0;
		z-index: 1000;
		box-shadow: 0 8px 24px var(--color-shadow);
		height: 60px;
		list-style: none;
	}

		.nav-link_logout.open {
			display: flex;
			flex-wrap: nowrap;
			align-items: flex-end;
		}

		.nav-link_logout li a {
			display: block;
			padding: 12px 1rem;
		}

		.nav-link_logout a {
			color: var(--color-gray-300);
			text-decoration: none;
			font-size: 0.9rem;
			letter-spacing: 0.05em;
			transition: color 0.2s;
		}

			.nav-link_logout a:hover,
			.nav-link_logout a.active {
				color: var(--color-white);
			}

	.clsconcerten {
		background-color: var(--color-bg-deep);
		border: 1px solid var(--color-gray-900);
		border-radius: 10px;
		padding: 0px 5px 5px 5px;
		flex: 1;
		min-height: 0;
		overflow: auto;
	}

	.afgelast {
		color: var(--color-red) !important;
	}

	.kijkenkan {
		color: darkorange !important;
	}

	.vrijwimg, .prodimg, .concimg, .goeddoelimg {
		z-index: 1;
		width: 50px;
		height: 35px;
		object-fit: contain;
		object-position: center;
		border-radius: 10px;
		margin-top: 3px;
	}
.concimg {
	width: 65px;
}
	/*.vrijwimg:hover, .prodimg:hover {
		width: 250px;
		border: 1px solid var(--color-white);
		border-radius: 5px;
		padding: 5px;
		position: absolute;
		top: 0px;
		background-color: var(--color-bg-panel);
		height: unset;
	}*/
	/*.vrijwimg:hover, .prodimg:hover {
		width: 344px;
		border: 1px solid var(--color-white);
		border-radius: 5px;
		padding: 5px;
		position: absolute;
		top: 21px;
		background-color: var(--color-bg-panel);
		height: unset;
		right: 5px;
	}
*/
	#divPreview {
		width: 290px;
		border: 1px solid var(--color-white);
		border-radius: 10px;
		padding: 5px;
		position: absolute;
		top: 21px;
		background-color: var(--color-bg-panel);
		max-height: 400px;
		right: 5px;
		display: none;
	}

		#divPreview img {
			border-radius: 10px;
			width: 100%;
			max-height: 390px;
			object-fit: contain;
			object-position: center;
		}
#divPreviewName {
	width: 290px;
	border: 1px solid var(--color-white);
	border-radius: 10px;
	padding: 5px;
	position: absolute;
	background-color: var(--color-bg-panel);
	right: -1px;
	/*height: 40px;*/
	margin-top:10px;
	font-size: 25px;
	text-align:center;
}

/*#producten_tabel th, 
#vrijwilligers_tabel th, 
#verpakkingen_tabel th, 
#concerten_tabel th {*/
.beheer_tabel th {
	font-size: 17px;
}
/*
#producten_tabel tr,
#vrijwilligers_tabel tr,
#tabRegistraties tr,
#concerten_tabel tr,
#verpakkingen_tabel tr {*/
	.beheer_tabel tr {
		height: 30px;
	}

	/*#producten_tabel td,
	#vrijwilligers_tabel td,
	#tabRegistraties td,
	#concerten_tabel td,
	#verpakkingen_tabel td {*/
.beheer_tabel td {
	padding-left: 5px;
	padding-right: 5px;
}

/*#producten_tabel th .sortimg,
#vrijwilligers_tabel th .sortimg,
#tabRegistraties th .sortimg,
#concerten_tabel th .sortimg,
#verpakkingen_tabel th .sortimg {*/
	.beheer_tabel th .sortimg {
		width: 18px;
		position: absolute;
		top: 8px;
		right: 5px;
		opacity: 0.2;
	}

/*#producten_tabel th:hover .sortimg,
#vrijwilligers_tabel th:hover .sortimg,
#tabRegistraties th:hover .sortimg,
#concerten_tabel th:hover .sortimg,
#verpakkingen_tabel th:hover .sortimg {*/
	.beheer_tabel th:hover .sortimg {
		opacity: 0.5;
	}

/*#producten_tabel th .sortimg:hover,
#vrijwilligers_tabel th .sortimg:hover,
#tabRegistraties th .sortimg:hover,
#concerten_tabel th .sortimg:hover,
#verpakkingen_tabel th .sortimg:hover {*/
	.beheer_tabel th .sortimg:hover {
		opacity: 1;
	}

	/* Small "?" badge some pages add next to a control that has its own tap
	   action, so the tooltip has an unambiguous tap target on a phone.
	   Hidden by default (desktop hover already reaches the control itself);
	   shown by mobile breakpoints in main_GSM.css. */
	.mobile-hint {
		display: none;
	}

	.Balloon {
		border: 2px solid var(--color-white);
		z-index: 9999999999;
		background-color: var(--bordercolored);
		color: var(--color-white);
		border-radius: 5px;
		position: absolute;
		padding: 5px 10px 5px 10px;
		width: max-content;
		max-width: calc(100vw - 40px);
		overflow-wrap: break-word;
	}

		.Balloon::before {
			content: '';
			display: inline-block;
			border-top: 7px solid var(--color-white);
			border-right: 7px solid transparent;
			border-left: 7px solid transparent;
			left: 10px;
			position: absolute;
			bottom: -9px;
		}

		.Balloon::after {
			content: '';
			display: inline-block;
			border-top: 6px solid var(--bordercolored);
			border-right: 6px solid transparent;
			border-left: 6px solid transparent;
			left: 11px;
			position: absolute;
			bottom: -6px;
		}

		.Balloon.helemaal-vanboven::before {
			border-top: none;
			border-bottom: 7px solid var(--color-white);
			bottom: initial;
			top: -9px;
			left: unset !important;
			right: 10px !important;
		}

		.Balloon.helemaal-vanboven::after {
			border-top: none;
			border-bottom: 6px solid var(--bordercolored);
			bottom: initial;
			top: -6px;
			left: unset !important;
			right: 11px !important;
		}

		.Balloon.helemaal-rechts::before {
			border-top: 7px solid var(--color-white);
			border-bottom: none;
			bottom: initial;
			top: unset !important;
			left: unset !important;
			right: 4px !important;
			bottom: -7px !important;
		}

		.Balloon.helemaal-rechts::after {
			border-top: 6px solid var(--bordercolored);
			border-bottom: none;
			bottom: initial;
			top: unset !important;
			bottom: -4px !important;
			left: unset !important;
			right: 5px !important;
		}

		.Balloon.helemaal-vanboven.helemaal-rechts::before {
			border-top: none;
			border-bottom: 7px solid var(--color-white);
			bottom: initial;
			top: -7px !important;
			left: unset !important;
			right: 4px !important;
			bottom: unset !important;
		}

		.Balloon.helemaal-vanboven.helemaal-rechts::after {
			border-top: none;
			border-bottom: 6px solid var(--bordercolored);
			bottom: initial;
			top: -4px !important;
			bottom: unset !important;
			left: unset !important;
			right: 5px !important;
		}

	.actionButton {
		border: 1px solid var(--color-white);
		border-radius: 10px;
		width: 135px;
		height: 42px;
		text-align: center;
		padding: 6px;
		font-size: larger;
		cursor: pointer;
	}

	.vertikaal {
		/*transform: rotate(-90deg);*/
		white-space: nowrap;
		margin-top: 5px;
		font-size: 24px;
		margin-right: 5px;
	}

	.tabVrijw, .tabConc, .tabInschr, .tabGoedDoel {
		border-radius: 10px 0px 0px 10px;
		border-left: 1px solid var(--color-border-lightest);
		border-top: 1px solid var(--color-border-lightest);
		border-bottom: 1px solid var(--color-border-lightest);
		width: 35px;
		/*height: 125px;*/
		cursor: pointer;
		margin: 15px 0px 0px 0px;
		text-align: center;
		padding-inline: 10px;
		position: relative;
		opacity: 0.5;
		writing-mode: sideways-lr;
	}

		.tabVrijw.geselecteerd, .tabConc.geselecteerd, .tabInschr.geselecteerd, .tabGoedDoel.geselecteerd {
			border-right: 1px solid var(--color-border-dark);
			z-index: 1;
			opacity: 1 !important;
		}

	.ArtGrpBlok {
		border: 1px solid;
		border-radius: 10px;
		padding: 10px;
		margin-bottom: 5px;
		width: 880px;
	}

	.ArtikelGroep {
		font-size: x-large;
		padding-bottom: 10px;
	}

	.Artikel {
		font-size: large;
		width: 300px;
	}

		.Artikel.Hoofdaantal {
			/*color: var(--color-green);*/
			text-align: right;
			width: 50px;
		}

		.Artikel.Hoofdverp {
			/*color: lightgreen;*/
			width: 125px;
			margin-left: 10px;
		}

		.Artikel.Stuksaantal {
			/*color: var(--color-red);*/
			text-align: right;
			width: 50px;
		}

		.Artikel.Stuksverp {
			/*color: orangered;*/
			width: 125px;
			margin-left: 10px;
		}

		.Artikel.Extraaantal {
			/*color: lightsteelblue;*/
			text-align: right;
			width: 50px;
		}

		.Artikel.Extraverp {
			/*color: cornflowerblue;*/
			width: 125px;
			margin-left: 10px;
		}

	.conVrijwDiv {
		position: relative;
		/*margin-left: -3px;*/
		padding-left: 7px;
		border: 1px solid;
		border-radius: 10px;
		height: 465px;
		margin-top: 10px;
	}

	.conVrijw {
		display: flex;
		position: relative;
		border: 1px solid var(--color-white);
		background-color: var(--color-bg-medium);
		color: var(--color-white);
		border-radius: 5px;
		/*width: 180px;*/
		height: 30px;
		margin-bottom: 5px;
		padding-left: 5px;
		justify-content: space-between;
		padding-right: 5px;
	}

	.conVrijwSubDiv.drag-over {
		background: var(--color-bg-gray-75);
	}

	.conVrijw:active {
		cursor: grabbing;
	}

	.conVrijw:hover {
		background: var(--color-bg-card);
	}

	.conVrijw.dragging {
		opacity: 0.4;
	}
	/*.conVrijw * {
	pointer-events: none;*/ /* child elementen negeren drag events */
	/*}*/
	.conVrijw .N {
		color: var(--color-red);
	}

	.vrTT {
		border: 1px solid var(--color-white);
		border-radius: 5px;
		height: 20px;
		margin-top: 4px;
		line-height: 1;
		cursor: pointer;
		width: 25px;
		text-align: center;
	}

	.conVrijwDiv.T .conVrijw {
		width: 220px;
	}

	.conVrijwDiv.B .conVrijw {
		width: 180px;
	}

	.conVrijwDiv.R .conVrijw {
		width: 180px;
	}

	.conVrijwDiv.A .conVrijw {
		width: 180px;
	}

	.conVrijwDiv.B .vrTT {
		display: none;
	}

	.conVrijwDiv.R .vrTT {
		display: none;
	}

	/* Vrijwilliger-detail "Concerten" tab — zelfde drag-and-drop tussen 4
	   kolommen als .conVrijw* hierboven (vrijwilligers per concert), maar
	   met eigen class-namen zodat de document-brede drag/drop event-
	   listeners van concerten.js (die niet aangepast worden) en die van
	   vrijwilligers.js elkaars kaarten niet oppikken. */
	.vrConcertDiv {
		position: relative;
		padding-left: 7px;
		border: 1px solid;
		border-radius: 10px;
		height: 465px;
		margin-top: 10px;
	}

	.vrConcert {
		display: flex;
		position: relative;
		border: 1px solid var(--color-white);
		background-color: var(--color-bg-medium);
		color: var(--color-white);
		border-radius: 5px;
		min-height: 30px;
		margin-bottom: 5px;
		padding-left: 5px;
		justify-content: space-between;
		padding-right: 5px;
	}

	.vrConcertSubDiv.drag-over {
		background: var(--color-bg-gray-75);
	}

	.vrConcert:active {
		cursor: grabbing;
	}

	.vrConcert:hover {
		background: var(--color-bg-card);
	}

	.vrConcert.dragging {
		opacity: 0.4;
	}

	.vrConcert .N {
		color: var(--color-red);
	}

	.vrConcertDiv.T .vrConcert {
		width: 220px;
	}

	.vrConcertDiv.B .vrConcert {
		width: 180px;
	}

	.vrConcertDiv.R .vrConcert {
		width: 180px;
	}

	.vrConcertDiv.A .vrConcert {
		width: 180px;
	}

	.vrConcertDiv.B .vrTT {
		display: none;
	}

	.vrConcertDiv.R .vrTT {
		display: none;
	}

	#toast {
		position: fixed;
		/* top hier is enkel de fallback-waarde voor het (in de praktijk niet
		   voorkomende) geval dat er geen zichtbare #Save-knop is — toast() in
		   commonfunctions.js zet 'top' voor elke melding opnieuw via JS,
		   verticaal gecentreerd op de Opslaan-knop van het open detailpaneel.
		   Een vaste CSS-waarde volstond niet: die knoppenrij staat per pagina
		   én per vensterhoogte op een sterk wisselende positie. */
		top: 690px;
		left: 1005px;
		transform: translateX(-50%) translateY(20px);
		background: var(--color-bg-elevated);
		border: 1px solid var(--color-white);
		color: var(--color-text-light);
		border-radius: 10px;
		opacity: 0;
		pointer-events: none;
		transition: opacity 0.25s, transform 0.25s;
		z-index: 200;
		height: 43px;
		width: 435px;
		font-size: 15px;
		line-height: 1;
		text-align: center;
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		justify-content: center;
	}

		#toast.show {
			opacity: 1;
			transform: translateX(-50%) translateY(0);
		}

		#toast.error {
			border-color: var(--color-white);
			color: var(--color-text-pink);
		}

.divBriefing {
	display: none;
	opacity: 0;
	transition: opacity 0.25s, transform 0.25s;
	transform: translateX(-50%) translateY(20px);
	background: var(--color-bg-elevated);
	border: 1px solid var(--color-white);
	color: var(--color-text-light);
	border-radius: 10px;
	position: absolute;
	top: 247px;
	left: 972px;
	width: 776px;
	height: 619px;
	padding:5px;
}

#divBriefing.show {
	opacity: 1;
	transform: translateX(-50%) translateY(0);
	display:block;
}

/* ══════════════════════════════════════════
   Merged from CharityTap2.css
   ══════════════════════════════════════════ */

box span h4 {
    color: var(--color-text-secondary);
}

box span {
    border-radius:5px;
}

box:hover {
    border-color: var(--color-gray-600);
    transform: translateY(-4px);
    box-shadow: 0 12px 32px var(--color-shadow);
}

#divLogin {
    opacity: 0;
    transition: opacity 0.5s linear;
    width: auto;
    height: auto;
    background: var(--color-bg-card);
    border: 1px solid var(--color-gray-600);
    border-radius: 12px;
    flex-direction: column;
    display: none;
}

    #divLogin.visible {
        opacity: 1;
        transition: opacity 0.5s linear;
    }

#divTrooper {
    opacity: 0;
    transition: opacity 0.5s linear;
    display: none;
    overflow: auto;
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
}

    #divTrooper.visible {
        opacity: 1;
        transition: opacity 0.5s linear;
    }

.divGoedDoelDetail {
    opacity: 0;
    transition: opacity 0.5s linear;
    display: none;
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border-dark);
    margin-top: 20px;
    border-radius: 10px;
    padding: 10px;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}
    .divGoedDoelDetail.visible {
        opacity: 1;
        transition: opacity 0.5s linear;
    }

#goeddoelLogo {
    background: #fff;
    padding: 5px;
}

.divLoginLogin {
    width: 320px;
    border-radius: 0 10px 10px 0;
}

#divcloseLogin {
    position: relative;
}

.Concerten {
    opacity: 0;
    transition: opacity 0.5s linear;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
}

    .Concerten.visible {
        opacity: 1;
        transition: opacity 0.5s linear;
    }

/* ── PAGE BODY ── */
.page-body {
    opacity: 0;
    transition: opacity 0.5s linear;
}

#page-body {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    max-height: calc(100vh - 70px);
    max-height: calc(100dvh - 70px);
}

.MainDiv {
    width: 1000px;
    height: 89vh;
}

    .page-body.visible {
        opacity: 1;
        transition: opacity 0.5s linear;
    }

h1 {
    font-size: 4.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}

p {
    color: var(--color-gray-350);
    font-size: 1.45rem;
}

.AD {
    color: var(--color-text-emphasis);
}
.AD:hover {
    color: var(--AfasDome_BG);
}
.LA {
    color: var(--color-text-emphasis);
}
    .LA:hover {
        color: var(--LottoArena_BG);
    }
.SS {
    color: var(--color-text-emphasis);
}
.SS:hover {
    color: var(--StadsSchouwburg_BG);
}

.TP {
    color: var(--color-text-emphasis);
}
.TP:hover {
    color: var(--tappen_BG);
}

.VW {
    color: var(--color-text-emphasis);
}
    .VW:hover {
        color: var(--vrijwil_BG);
    }

.GD {
    color: var(--color-text-emphasis);
}

    .GD:hover {
        color: var(--goeddoel_BG);
    }

/* ── CARDS ── */
.cards-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 0.8rem;
	margin-top: 20px;
	flex: 1;
	min-height: 0;
	overflow: auto;
	padding-right: 10px;
	padding-left: 10px;
	padding-bottom: 1rem;
	padding-top:5px;
	align-content: start;
}

.cards-grid .card {
    background: var(--color-bg-panel);
    border: 1px solid var(--color-border-dark);
    border-radius: 12px;
    padding: 2rem 1.5rem;
    cursor: pointer;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    height:177px;
}

.goededoelen-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1.2rem;
    /*flex*/: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 10px;
    padding-bottom: 1rem;
	padding-top:5px;
    align-content: start;
}

    .goededoelen-grid .card {
        background: var(--color-bg-panel);
        border: 1px solid var(--color-border-dark);
        border-radius: 12px;
        padding: 1rem 1rem;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    }

.overons-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.2rem;
    margin-top: 2.5rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 10px;
    padding-bottom: 1rem;
    align-content: start;
}

    .overons-grid .card {
        background: var(--color-bg-panel);
        border: 1px solid var(--color-border-dark);
        border-radius: 12px;
        padding: 1.2rem 1.5rem;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 1.2rem;
        transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    }
        .overons-grid .card img {
            width: 80px;
            height: 80px;
            object-fit: cover;
            border-radius: 50%;
            flex-shrink: 0;
        }
        .overons-grid .card-info {
            display: flex;
            flex-direction: column;
            gap: 0.3rem;
        }

.beheer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 1.2rem;
    margin-top: 2.5rem;
}

    .beheer-grid .card {
        background: var(--color-bg-panel);
        border: 1px solid var(--color-border-dark);
        border-radius: 12px;
        padding: 2rem 1.5rem;
        cursor: pointer;
        text-decoration: none;
        color: inherit;
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
    }

        .card:hover {
            border-color: var(--color-gray-600);
            transform: translateY(-4px);
            box-shadow: 0 12px 32px var(--color-shadow);
        }

        .card-icon {
            font-size: 2rem;
            line-height: 1;
        }

        .card-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--color-text-emphasis);
        }

        .card-desc {
            font-size: 0.85rem;
            color: var(--color-text-muted);
            line-height: 1.6;
        }

        .card-arrow {
            margin-top: auto;
            font-size: 0.8rem;
            color: var(--color-text-secondary);
            transition: color 0.2s, transform 0.2s;
            display: inline-block;
        }

        .card:hover .card-arrow {
            /* --color-gray-300 stays a light gray in both themes on purpose
               (it also colors the nav dropdown's text, which is deliberately
               unflipped since nav stays dark) - text-body flips instead, so
               this hover state still darkens/lightens correctly either way. */
            color: var(--color-text-body);
            transform: translateX(4px);
        }

.beheer-detail {
	background: var(--color-bg-panel);
	border: 1px solid var(--color-border-dark);
	text-decoration: none;
	color: inherit;
	flex-direction: column;
	height: 89vh;
	display: none;
	position: relative;
}

#divInchrijvingen {
	background: var(--color-bg-panel);
	border: 1px solid var(--color-border-dark);
	text-decoration: none;
	color: inherit;
	flex-direction: column;
	height: 77vh;
	display: block;
	position: relative;
}

/* ══════════════════════════════════════════
   Merged from Menu.css
   ══════════════════════════════════════════ */

/* ── INTRO OVERLAY ── */
#intro-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-bg-page);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    /* hidden by default; JS adds .show only on first visit */
}
#intro-overlay.show {
    display: flex;
}
#intro-overlay.hide {
    animation: overlayFadeOut 0.6s ease forwards;
}
@keyframes overlayFadeOut {
    to {
        opacity: 0;
        pointer-events: none;
    }
}

/* Logo wrapper */
.logo-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    animation: logoIn 1s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes logoIn {
    from {
        opacity: 0;
        transform: scale(0.7) translateY(20px);
    }

    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.logo-wrap.pulse {
    animation: logoPulse 1.2s ease-in-out forwards;
}

@keyframes logoPulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 1;
        transform: scale(1.06);
    }

    100% {
        opacity: 0;
        transform: scale(0.9);
    }
}

.logo-icon {
    width: 50%;
}

.vrijwilligers {
    color: var(--color-text-body);
    animation: vrijwilligers 3s ease;
}

@keyframes vrijwilligers {
    0%, 33% {
        color: var(--color-blue);
        transform: scale(1.2);
    }

    34%, 100% {
        color: var(--color-text-body);
        transform: scale(1);
    }
}

.tappen {
    color: var(--color-text-body);
    animation: tappen 3s ease;
}

@keyframes tappen {
    0%, 33% {
        color: var(--color-text-body);
        transform: scale(1);
    }

    34%, 66% {
        color: var(--color-yellow);
        transform: scale(1.2);
    }

    67%, 100% {
        color: var(--color-text-body);
        transform: scale(1);
    }
}

.goededoel {
    color: var(--color-text-body);
    animation: goededoel 3s ease;
}

@keyframes goededoel {
    0%, 66% {
        color: var(--color-text-body);
        transform: scale(1);
    }

    67%, 100% {
        color: var(--color-red);
        transform: scale(1.2);
    }
}

.menu-logo {
    width: 65px;
}

.logo-name {
    font-size: 1.5rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--color-white);
}

/* loading dots */
.dots {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

    .dots span {
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: var(--color-gray-600);
        animation: dotPop 1.2s ease infinite;
    }

        .dots span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .dots span:nth-child(3) {
            animation-delay: 0.4s;
        }

@keyframes dotPop {
    0%, 80%, 100% {
        background: var(--color-text-secondary);
        transform: scale(1);
    }

    40% {
        background: var(--color-gray-300);
        transform: scale(1.4);
    }
}

/* ── NAV ── */
nav {
    background: var(--color-border-dark);
    border-bottom: 1px solid var(--color-border-subtle);
    padding: 0 2rem 0 15px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    position: sticky;
    top: 0;
    /* Was 100 - lower than several in-page popups (overlay/message's
       confirm dialogs, the richtext toolbar's color-popup, both 200),
       so those rendered over the mobile menu instead of under the
       always-on-top nav bar they're supposed to sit below. */
    z-index: 1000;
}

.nav-brand {
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-white);
    text-decoration: none;
}

.nav-links {
    display: flex;
    gap: 1.7rem;
    list-style: none;
    padding-top:3px;
}

    .nav-links a {
        color: var(--color-gray-300);
        text-decoration: none;
        font-size: 0.9rem;
        letter-spacing: 0.05em;
        transition: color 0.2s;
    }

        .nav-links a:hover,
        .nav-links a.active {
            color: var(--color-white);
        }

.nav-username {
    font-size: 0.85rem;
    color: var(--color-gray-300);
}
.nav-username:hover {
    color: var(--color-white);
    cursor:pointer;
}

.divLogin label {
    display: inline-block;
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--color-black);
}

/* ══════════════════════════════════════════
   Merged from nav.css
   ══════════════════════════════════════════ */

/* ── HAMBURGER KNOP (enkel zichtbaar op mobiel) ── */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    background: none;
    border: none;
    padding: 4px;
}

.nav-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--color-white);
    border-radius: 2px;
    transition: transform 0.3s, opacity 0.3s;
}

.nav-toggle.open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.nav-toggle.open span:nth-child(2) {
    opacity: 0;
}

.nav-toggle.open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

#ct_about {
	display: none;
	border: 1px solid var(--color-darkgray);
	border-radius: 10px;
	background-color: var(--color-bg-page);
	z-index: 20000;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 404px;
	max-width: calc(100vw - 20px);
	max-height: calc(100vh - 20px);
	max-height: calc(100dvh - 20px);
	overflow-y: auto;
}

	#ct_about.visible {
		display: flex;
	}

/* ─────────────────────────────────────────────
   mail.php — E-mail opstellen & versturen
   ───────────────────────────────────────────── */
#divMailing {
	display: flex;
	flex-direction: column;
}

.mail-card {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 0;
	box-sizing: border-box;
	background: var(--color-bg-card);
	border: 1px solid var(--color-border-dark);
	border-radius: 12px;
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 5px;
	gap: 10px;
}

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

.field input,
.field textarea {
	background: var(--color-bg-page);
	border: 1px solid var(--color-border-dark);
	color: var(--color-text-body);
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 0.95rem;
	font-family: inherit;
	outline: none;
	transition: border-color 0.2s;
}

.field input:focus,
.field textarea:focus {
	border-color: var(--color-white);
}

/* Ontvangers als klikbare "knoppen" i.p.v. een kale tekstarea. */
.recipient-box {
	flex: 1;
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: 6px;
	min-height: 42px;
	padding: 6px 8px;
	border: 1px solid var(--color-border-dark);
	border-radius: 10px;
	background: var(--color-bg-elevated);
	/* Hoogte wordt via JS gezet (RecomputeRowsHeight) op precies 2 rijen
	   knoppen (ingeklapt) of max. 5 rijen met scrollbar (uitgeklapt) —
	   hardcoded pixels zouden bij een andere font-size/browser niet
	   blijven kloppen. */
	overflow: hidden;
	transition: max-height 0.2s;
}

/* Zelfde look als .conVrijw (concerten.js se vrijwilliger-kaartjes in de
   Vrijwilligers-tab). */
.recipient-chip {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	border: 1px solid var(--color-white);
	background-color: var(--color-bg-medium);
	color: var(--color-white);
	border-radius: 5px;
	height: 30px;
	padding-left: 8px;
	padding-right: 4px;
	font-size: 14px;
	white-space: nowrap;
}

.recipient-chip:hover {
	background: var(--color-bg-card);
}

.recipient-chip .chip-remove {
	cursor: pointer;
	border: none;
	background: transparent;
	color: var(--color-white);
	font-size: 15px;
	line-height: 1;
	padding: 3px 7px;
	margin-left: 4px;
	border-radius: 50%;
}

.recipient-chip .chip-remove:hover {
	background: var(--color-red);
	color: var(--color-white);
}

/* Layout: Ontvangers blijft zijn natuurlijke hoogte, de witte kader rond
   Onderwerp/Bericht groeit om de rest van #divMailing (89vh, zie .MainDiv)
   te vullen — flexbox i.p.v. hardcoded posities/hoogtes, die liepen elders
   op deze site al snel uit elkaar per schermgrootte. */
.mail-content-box {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--color-white);
	border-radius: 10px;
	padding: 10px;
	box-sizing: border-box;
	/*margin-top: 10px;*/
}

.mail-content-box .field:last-child {
	flex: 1;
	min-height: 0;
	display: flex;
	flex-direction: column;
}

#subject {
	width: 100%;
	box-sizing: border-box;
}

/* #body is een contenteditable div (rich tekst), geen <textarea> meer —
   ".field textarea" hierboven matcht dat niet, dus krijgt hier zijn eigen
   volledige uitzicht mee i.p.v. enkel de lay-out-eigenschappen. */
.richtext-editor {
	flex: 1;
	min-height: 0;
	width: 100%;
	box-sizing: border-box;
	overflow-y: auto;
	background: var(--color-bg-page);
	border: 1px solid var(--color-border-dark);
	color: var(--color-text-body);
	padding: 10px 14px;
	border-radius: 8px;
	font-size: 0.95rem;
	outline: none;
	transition: border-color 0.2s;
}

.richtext-editor:focus {
	border-color: var(--color-white);
}

/* Contenteditable heeft geen native placeholder-attribuut. */
.richtext-editor:empty:before {
	content: attr(data-placeholder);
	color: var(--color-text-muted);
}

/* .richtext-field: wrapt een <label> + de door include/richtext_editor.php
   gegenereerde toolbar/attachmentInfo/editor-body samen — label en toolbar
   delen dezelfde rij (toolbar rechts uitgelijnd), de editor-body vult de
   volledig overblijvende hoogte. CSS Grid i.p.v. flex-wrap: een flex-rij die
   wrapt kan die nieuwe regel niet laten meegroeien met de resterende
   containerhoogte, een grid-rij met 1fr wel. Gedeeld door mail.php se
   "Bericht"-veld en Goededoelen se "Lange omschrijving"-veld. */
.richtext-field {
	flex: 1;
	min-height: 0;
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto 1fr;
	align-items: center;
	column-gap: 8px;
	row-gap: 6px;
}

.richtext-field > label {
	grid-column: 1;
	grid-row: 1;
}

.richtext-field .mail-toolbar {
	grid-column: 2;
	grid-row: 1;
	justify-self: end;
}

.richtext-field #attachmentInfo {
	grid-column: 1 / -1;
	grid-row: 2;
}

.richtext-field .richtext-editor {
	grid-column: 1 / -1;
	grid-row: 3;
	align-self: stretch;
}

.mail-toolbar {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.mail-toolbar button,
.mail-toolbar select {
	border: 1px solid var(--color-white);
	background: var(--color-bg-medium);
	color: var(--color-white);
	border-radius: 5px;
	height: 30px;
	cursor: pointer;
}

.mail-toolbar button {
	width: 30px;
	font-size: 14px;
	line-height: 1;
}

.mail-toolbar button:hover {
	background: var(--color-bg-card);
}

.mail-toolbar select {
	font-size: 13px;
	padding: 0 4px;
	font-family: inherit;
}

/* Kleurenpopup (Achtergrondkleur/Tekstkleur naast elkaar, raster van
   voorgestelde kleuren) i.p.v. de kale browser-kleurkiezer. */
.color-popup {
	position: absolute;
	top: 36px;
	left: 0;
	z-index: 200;
	display: flex;
	gap: 16px;
	background: var(--color-white);
	border: 1px solid var(--color-border-light);
	border-radius: 8px;
	padding: 10px;
	box-shadow: 0 4px 12px var(--color-shadow);
}

.color-popup-title {
	font-size: 12px;
	color: var(--color-black);
	margin-bottom: 6px;
	white-space: nowrap;
}

.color-grid {
	display: grid;
	grid-template-columns: repeat(10, 16px);
	grid-auto-rows: 16px;
	gap: 2px;
}

.color-grid .swatch {
	border-radius: 2px;
	cursor: pointer;
	border: 1px solid var(--color-border-subtle);
}

.color-grid .swatch:hover {
	outline: 2px solid var(--color-white);
}

#btnSend {
	flex-shrink: 0;
	align-self: flex-start;
	/*margin-top: 12px;*/
}

.verplicht::after {
	content: " *";
	color: red;
	font-weight: bold;
	margin-left: 2px;
}