/* White-label beheerapp: eigen, snelle interface los van wp-admin */

#mnb-beheer, #mnb-beheer * { box-sizing: border-box; }

#mnb-beheer {
	position: fixed;
	inset: 0;
	z-index: 999999;
	display: flex;
	background: #f4f7fa;
	font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
	color: #14233a;
	-webkit-font-smoothing: antialiased;
}

/* ---- Zijbalk ---- */
#mnb-beheer .mn-side {
	width: 232px;
	flex: 0 0 232px;
	background: linear-gradient(180deg, #003a66, #005899);
	color: #fff;
	display: flex;
	flex-direction: column;
	padding: 20px 14px;
	overflow-y: auto;
}
#mnb-beheer .mn-logo {
	font-weight: 800;
	font-size: 19px;
	letter-spacing: .01em;
	margin: 0 8px 22px;
	line-height: 1.25;
}
#mnb-beheer .mn-logo small { display: block; color: #ceff00; font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
#mnb-beheer .mn-nav { display: flex; flex-direction: column; gap: 3px; }
#mnb-beheer .mn-nav button, #mnb-beheer .mn-nav a {
	all: unset;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 10px 13px;
	border-radius: 10px;
	font-weight: 600;
	font-size: 13.5px;
	color: #bcd9ee;
	transition: background .12s, color .12s;
}
#mnb-beheer .mn-nav button:hover, #mnb-beheer .mn-nav a:hover { background: rgba(255,255,255,.09); color: #fff; }
#mnb-beheer .mn-nav button.is-active { background: #ff5722; color: #fff; box-shadow: 0 6px 16px rgba(255,87,34,.35); }
#mnb-beheer .mn-navsep { margin: 10px 8px 5px; font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #7fb0d3; }
#mnb-beheer .mn-badge {
	background: #ff5722;
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	min-width: 19px;
	height: 19px;
	border-radius: 10px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0 6px;
}
#mnb-beheer .mn-nav button.is-active .mn-badge { background: #fff; color: #ff5722; }
#mnb-beheer .mn-side-foot { margin-top: auto; padding-top: 16px; font-size: 12px; color: #9cc3de; line-height: 1.7; }
#mnb-beheer .mn-side-foot a { color: #d7ecf9; text-decoration: underline; cursor: pointer; }

/* ---- Hoofdgebied ---- */
#mnb-beheer .mn-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#mnb-beheer .mn-top {
	height: 60px;
	flex: 0 0 60px;
	background: #fff;
	border-bottom: 1px solid #e4eaf1;
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 0 22px;
}
#mnb-beheer .mn-top h1 { font-size: 17px; font-weight: 700; margin: 0; flex: 0 0 auto; }
#mnb-beheer .mn-search { flex: 1; max-width: 420px; position: relative; }
#mnb-beheer .mn-search input {
	width: 100%;
	height: 38px;
	border: 1.5px solid #e4eaf1;
	border-radius: 10px;
	padding: 0 14px;
	font-family: inherit;
	font-size: 13.5px;
	outline: none;
}
#mnb-beheer .mn-search input:focus { border-color: #005899; }
#mnb-beheer .mn-top-user { margin-left: auto; font-size: 13px; color: #51607a; }

#mnb-beheer .mn-body { flex: 1; overflow-y: auto; padding: 22px; }

/* ---- Kaarten & stats ---- */
#mnb-beheer .mn-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; margin-bottom: 20px; }
#mnb-beheer .mn-stat {
	background: #fff;
	border: 1px solid #e4eaf1;
	border-radius: 14px;
	padding: 16px 18px;
	display: flex;
	flex-direction: column;
	gap: 3px;
}
#mnb-beheer .mn-stat-num { font-size: 24px; font-weight: 800; color: #005899; }
#mnb-beheer .mn-stat-num.orange { color: #ff5722; }
#mnb-beheer .mn-stat-label { font-size: 12.5px; color: #51607a; font-weight: 500; }
#mnb-beheer .mn-stat-sub { font-size: 12.5px; color: #2f7d4f; font-weight: 700; margin-top: 2px; }
#mnb-beheer .mn-stat-wa { border-color: #bfe3cc; cursor: pointer; }
#mnb-beheer .mn-stat-wa .mn-stat-num { color: #2f7d4f; }
#mnb-beheer .mn-stat-wa:hover { border-color: #2f7d4f; }

#mnb-beheer .mn-card {
	background: #fff;
	border: 1px solid #e4eaf1;
	border-radius: 14px;
	padding: 18px 20px;
	margin-bottom: 18px;
}
#mnb-beheer .mn-card h2 { font-size: 15px; font-weight: 700; margin: 0 0 12px; }
#mnb-beheer .mn-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
@media (max-width: 1100px) { #mnb-beheer .mn-grid2 { grid-template-columns: 1fr; } }

/* ---- Tabellen ---- */
#mnb-beheer table.mn-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
#mnb-beheer .mn-table th {
	text-align: left;
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #8a93a3;
	padding: 8px 10px;
	border-bottom: 1px solid #e4eaf1;
}
#mnb-beheer .mn-table td { padding: 10px; border-bottom: 1px solid #eef2f7; vertical-align: middle; }
#mnb-beheer .mn-table tr:last-child td { border-bottom: 0; }
#mnb-beheer .mn-table tr.is-click { cursor: pointer; }
#mnb-beheer .mn-table tr.is-click:hover td { background: #f6f9fc; }
#mnb-beheer .mn-muted { color: #8a93a3; }
#mnb-beheer .mn-strong { font-weight: 600; }

/* ---- Badges & knoppen ---- */
#mnb-beheer .mn-pill {
	display: inline-flex;
	align-items: center;
	font-size: 11.5px;
	font-weight: 700;
	padding: 3px 10px;
	border-radius: 999px;
	white-space: nowrap;
}
#mnb-beheer .mn-pill.p-pending   { background: rgba(255,87,34,.12); color: #ff5722; }
#mnb-beheer .mn-pill.p-confirmed { background: rgba(0,88,153,.12); color: #005899; }
#mnb-beheer .mn-pill.p-completed { background: rgba(46,125,50,.14); color: #2e7d32; }
#mnb-beheer .mn-pill.p-cancelled { background: #eef0f4; color: #8a93a3; }
#mnb-beheer .mn-pill.p-paid      { background: rgba(46,125,50,.14); color: #2e7d32; }
#mnb-beheer .mn-pill.p-open      { background: rgba(255,87,34,.12); color: #ff5722; }
#mnb-beheer .mn-pill.p-off       { background: #eef0f4; color: #8a93a3; }
#mnb-beheer .mn-pill.p-on        { background: rgba(46,125,50,.14); color: #2e7d32; }

#mnb-beheer .mn-btn {
	all: unset;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: #005899;
	color: #fff;
	font-weight: 600;
	font-size: 13px;
	padding: 8px 15px;
	border-radius: 9px;
	transition: background .13s;
}
#mnb-beheer .mn-btn:hover { background: #00446f; }
#mnb-beheer .mn-btn.orange { background: #ff5722; }
#mnb-beheer .mn-btn.orange:hover { background: #e64a19; }
#mnb-beheer .mn-btn.ghost { background: transparent; color: #005899; border: 1.5px solid #cfdce8; }
#mnb-beheer .mn-btn.ghost:hover { border-color: #005899; }
#mnb-beheer .mn-btn.small { padding: 5px 11px; font-size: 12px; }
#mnb-beheer .mn-btn:disabled { opacity: .5; cursor: default; }

#mnb-beheer .mn-actions { display: flex; gap: 6px; flex-wrap: wrap; }

/* ---- Formuliervelden ---- */
#mnb-beheer .mn-field { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; }
#mnb-beheer .mn-field span { font-size: 12.5px; font-weight: 600; color: #51607a; }
#mnb-beheer .mn-field input, #mnb-beheer .mn-field select, #mnb-beheer .mn-field textarea {
	border: 1.5px solid #e4eaf1;
	border-radius: 9px;
	padding: 9px 12px;
	font-family: inherit;
	font-size: 13.5px;
	outline: none;
	background: #fff;
}
#mnb-beheer .mn-field input:focus, #mnb-beheer .mn-field textarea:focus { border-color: #005899; }
#mnb-beheer .mn-frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#mnb-beheer .mn-inline-edit { width: 82px; border: 1.5px solid #e4eaf1; border-radius: 7px; padding: 5px 8px; font-family: inherit; font-size: 13px; }

/* ---- Filters & paginatie ---- */
#mnb-beheer .mn-filters { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; align-items: center; }
#mnb-beheer .mn-chip {
	all: unset;
	cursor: pointer;
	padding: 6px 13px;
	border-radius: 999px;
	border: 1.5px solid #e4eaf1;
	background: #fff;
	font-size: 12.5px;
	font-weight: 600;
	color: #51607a;
}
#mnb-beheer .mn-chip.is-active { background: #005899; border-color: #005899; color: #fff; }
#mnb-beheer .mn-pag { display: flex; gap: 8px; align-items: center; margin-top: 14px; font-size: 13px; color: #51607a; }

/* ---- Detail & terugknop ---- */
#mnb-beheer .mn-back { all: unset; cursor: pointer; color: #005899; font-weight: 600; font-size: 13px; margin-bottom: 12px; display: inline-block; }
#mnb-beheer .mn-detailgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 20px; }
#mnb-beheer .mn-dd { display: flex; flex-direction: column; gap: 2px; }
#mnb-beheer .mn-dd b { font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: #8a93a3; }

/* ---- Omzet-grafiek ---- */
#mnb-beheer .mn-chart { display: flex; align-items: flex-end; gap: 8px; height: 190px; padding: 8px 4px 0; }
#mnb-beheer .mn-bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; }
#mnb-beheer .mn-bar i {
	width: 100%;
	max-width: 42px;
	background: linear-gradient(180deg, #ff7a50, #ff5722);
	border-radius: 7px 7px 0 0;
	transition: height .3s;
}
#mnb-beheer .mn-bar em { font-style: normal; font-size: 11px; color: #8a93a3; }
#mnb-beheer .mn-bar strong { font-size: 10.5px; color: #14233a; }

/* ---- Leeg & laden ---- */
#mnb-beheer .mn-empty { color: #8a93a3; font-size: 13.5px; padding: 18px 4px; }
#mnb-beheer .mn-loading { color: #8a93a3; font-size: 13.5px; padding: 24px; }
#mnb-beheer .mn-msg { font-size: 13px; margin-left: 10px; }
#mnb-beheer .mn-msg.ok { color: #2e7d32; }
#mnb-beheer .mn-msg.err { color: #c62828; }

/* ---- Vandaag-lijst op dashboard ---- */
#mnb-beheer .mn-today li {
	list-style: none;
	display: grid;
	grid-template-columns: 52px 1fr auto;
	gap: 12px;
	align-items: center;
	padding: 9px 0;
	border-bottom: 1px solid #eef2f7;
}
#mnb-beheer .mn-today { margin: 0; padding: 0; }
#mnb-beheer .mn-today li:last-child { border-bottom: 0; }
#mnb-beheer .mn-today .t { font-weight: 700; color: #005899; font-size: 13.5px; }

/* ---- Agenda ---- */
#mnb-beheer .ag-grid { display: flex; gap: 0; overflow-x: auto; }
#mnb-beheer .ag-time { flex: 0 0 52px; }
#mnb-beheer .ag-time-head, #mnb-beheer .ag-col-head {
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: #51607a;
	border-bottom: 1px solid #e4eaf1;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	padding: 0 4px;
}
#mnb-beheer .ag-time-body { position: relative; }
#mnb-beheer .ag-hour {
	position: absolute;
	right: 8px;
	transform: translateY(-50%);
	font-size: 10.5px;
	color: #8a93a3;
}
#mnb-beheer .ag-col { flex: 1 1 0; min-width: 110px; border-left: 1px solid #eef2f7; }
#mnb-beheer .ag-col.is-today .ag-col-head { color: #ff5722; }
#mnb-beheer .ag-col-body { position: relative; background: #fff; }
#mnb-beheer .ag-col-body.is-drop { background: #f0f7ff; }
#mnb-beheer .ag-line { position: absolute; left: 0; right: 0; border-top: 1px solid #f1f4f9; }
#mnb-beheer .ag-off { position: absolute; left: 0; right: 0; background: repeating-linear-gradient(45deg, #f6f8fb, #f6f8fb 6px, #eef2f7 6px, #eef2f7 12px); }
#mnb-beheer .ag-closed {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #b3bcc9;
	font-size: 12px;
	font-weight: 600;
	background: repeating-linear-gradient(45deg, #f6f8fb, #f6f8fb 6px, #eef2f7 6px, #eef2f7 12px);
}
#mnb-beheer .ag-now { position: absolute; left: 0; right: 0; border-top: 2px solid #ff5722; z-index: 5; }
#mnb-beheer .ag-now::before { content: ''; position: absolute; left: -1px; top: -4px; width: 7px; height: 7px; border-radius: 50%; background: #ff5722; }

#mnb-beheer .ag-ev {
	position: absolute;
	border-radius: 8px;
	padding: 4px 8px 6px;
	font-size: 11px;
	line-height: 1.35;
	overflow: hidden;
	border-left: 3px solid;
	cursor: pointer;
	user-select: none;
	touch-action: none;
	z-index: 2;
	box-sizing: border-box;
}
#mnb-beheer .ag-ev.is-mv { cursor: grab; }
#mnb-beheer .ag-ev.is-drag { opacity: .85; z-index: 20; cursor: grabbing; box-shadow: 0 10px 24px rgba(0,40,80,.25); }
#mnb-beheer .ag-ev-t { display: block; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#mnb-beheer .ag-ev-s { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: .85; }
#mnb-beheer .ag-ev.st-pending   { background: #fdece4; border-color: #ff5722; color: #8a3413; }
#mnb-beheer .ag-ev.st-confirmed { background: #e3eef6; border-color: #005899; color: #0b3c62; }
#mnb-beheer .ag-ev.st-completed { background: #e7f4ea; border-color: #2e7d32; color: #1d4d20; }
#mnb-beheer .ag-rs {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 7px;
	cursor: ns-resize;
}
#mnb-beheer .ag-rs::after {
	content: '';
	position: absolute;
	left: 50%;
	bottom: 2px;
	transform: translateX(-50%);
	width: 22px;
	height: 3px;
	border-radius: 2px;
	background: currentColor;
	opacity: .35;
}

/* ---- Instellingen: openingstijden-rij ---- */
#mnb-beheer .mn-hours-row { display: flex; gap: 8px; align-items: center; padding: 5px 0; }
#mnb-beheer .mn-hours-row input[type=time] {
	border: 1.5px solid #e4eaf1;
	border-radius: 8px;
	padding: 6px 9px;
	font-family: inherit;
	font-size: 13px;
}
#mnb-beheer .mn-hours-row input[type=time]:disabled { opacity: .45; }

/* ================= DESIGN 2.0, premium pass (systeemfont, brandkleuren) ================= */

#mnb-beheer { background: linear-gradient(160deg, #f2f6fb 0%, #eef1fa 55%, #f6f3fb 100%); }

/* Kaarten: meer lucht, zachtere randen en schaduw */
#mnb-beheer .mn-card,
#mnb-beheer .mn-stat {
	border: 1px solid #e9eef5;
	border-radius: 18px;
	box-shadow: 0 10px 30px rgba(0, 40, 80, .05);
}
#mnb-beheer .mn-card { padding: 22px 24px; }
#mnb-beheer .mn-body { padding: 26px; }

/* KPI's: groot cijfer, subkopje in brandgrijs */
#mnb-beheer .mn-stat { padding: 18px 20px; gap: 5px; }
#mnb-beheer .mn-stat-num { font-size: 28px; letter-spacing: -0.02em; }
#mnb-beheer .mn-stat-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	color: #C9D2DC;
}

/* Zijbalk: navy met lime accent blijft, iets zachter */
#mnb-beheer .mn-side { background: linear-gradient(185deg, #00365f, #005899); }
#mnb-beheer .mn-nav button.is-active { background: #ff5722; box-shadow: 0 8px 20px rgba(255, 87, 34, .35); }
#mnb-beheer .mn-logo small { color: #ceff00; }

/* Chips: pills; actieve chip = donkere 'vandaag'-pill zoals in het ontwerp */
#mnb-beheer .mn-chip { border-radius: 999px; padding: 7px 15px; border-color: #e9eef5; }
#mnb-beheer .mn-chip.is-active { background: #14233a; border-color: #14233a; color: #fff; }

/* Knoppen: CTA-oranje, vollere ronding */
#mnb-beheer .mn-btn { border-radius: 12px; }
#mnb-beheer .mn-btn.orange, #mnb-beheer .mn-btn:not(.ghost):not(.small):not([disabled]):hover { background: #ff5722; }

/* Tabellen: rustiger, meer padding, rijen als zachte vlakken */
#mnb-beheer .mn-table th { color: #C9D2DC; letter-spacing: .08em; border-bottom: 1px solid #eef2f7; padding: 10px 12px; }
#mnb-beheer .mn-table td { padding: 13px 12px; border-bottom: 1px solid #f2f5f9; }
#mnb-beheer .mn-table tr.is-click:hover td { background: #f6f8fd; }

/* Agenda: pastel-afspraakblokken met accentrand, zoals de render */
#mnb-beheer .ag-col-body { background: #fbfcfe; }
#mnb-beheer .ag-line { border-top-color: #f0f3f8; }
#mnb-beheer .ag-off, #mnb-beheer .ag-closed { background: repeating-linear-gradient(45deg, #f4f7fb, #f4f7fb 7px, #edf1f7 7px, #edf1f7 14px); }
#mnb-beheer .ag-ev { border-radius: 12px; border-left-width: 4px; padding: 6px 10px 8px; box-shadow: 0 4px 12px rgba(10, 40, 70, .06); }
#mnb-beheer .ag-ev.st-pending   { background: #ffece4; color: #7c3413; }
#mnb-beheer .ag-ev.st-confirmed { background: #e6efff; color: #0b3c62; }
#mnb-beheer .ag-ev.st-completed { background: #e4f6ea; color: #1d4d20; }
#mnb-beheer .ag-col-head { color: #8fa0b3; font-size: 12.5px; }
#mnb-beheer .ag-col.is-today .ag-col-head { color: #fff; }
#mnb-beheer .ag-col.is-today .ag-col-head::before { content: ''; }
#mnb-beheer .ag-col.is-today .ag-col-head {
	background: #14233a;
	border-radius: 999px;
	margin: 4px 8px;
	height: 26px;
}

/* Statuspills: pastel met stevige tekstkleur */
#mnb-beheer .mn-pill { padding: 4px 12px; font-size: 11px; }

/* QR/omkadering in brandgrijs */
#mnb-beheer img[alt="QR"] { border-color: #E6ECF2 !important; background: #E6ECF2; padding: 4px; }

/* Meldingen: subtiele toast-look */
#mnb-beheer .mn-msg.ok, #mnb-beheer .mn-msg.err {
	background: #fff;
	border: 1px solid #e9eef5;
	border-radius: 999px;
	padding: 5px 13px;
	box-shadow: 0 6px 18px rgba(10, 40, 70, .08);
}
#mnb-beheer .mn-msg.ok { color: #1d7a3a; }

/* Topbalk */
#mnb-beheer .mn-top { border-bottom-color: #edf1f7; height: 64px; flex-basis: 64px; }
#mnb-beheer .mn-search input { border-radius: 999px; background: #f4f7fb; border-color: #edf1f7; }

/* Slimme laag: risicobolletje op een afspraak in de agenda. */
.ag-ev .ag-risk{position:absolute;top:5px;right:6px;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 2px rgba(255,255,255,.9);pointer-events:none}
.ag-ev .ag-risk.r-midden{background:#F2A03D}
.ag-ev .ag-risk.r-hoog{background:#E2452B}

/* Afrondpaneel aan het eind van de dag. */
#mnb-beheer .mn-mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12.5px;color:#8a93a3}
#mnb-beheer .mn-open .mn-chip{padding:5px 11px;font-size:12.5px}
#mnb-beheer .mn-open .mn-chip[data-kz="no_show"].is-active{background:#e2452b;border-color:#e2452b;color:#fff}

/* ---- Mobiel: zijbalk als uitschuifmenu, compacte topbalk ---- */
#mnb-beheer .mn-burger { display: none; }
#mnb-beheer .mn-scrim { display: none; }
@media (max-width: 900px) {
	#mnb-beheer .mn-side {
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		width: min(300px, 84vw);
		z-index: 6;
		transform: translateX(-106%);
		transition: transform .22s ease;
		box-shadow: 0 0 60px rgba(3, 18, 35, .45);
	}
	#mnb-beheer.mn-menu-open .mn-side { transform: none; }
	#mnb-beheer .mn-scrim {
		display: block;
		position: fixed;
		inset: 0;
		z-index: 5;
		background: rgba(8, 20, 36, .5);
		opacity: 0;
		pointer-events: none;
		transition: opacity .22s ease;
	}
	#mnb-beheer.mn-menu-open .mn-scrim { opacity: 1; pointer-events: auto; }
	#mnb-beheer .mn-burger {
		display: inline-flex;
		flex-direction: column;
		justify-content: center;
		gap: 4px;
		width: 42px;
		height: 40px;
		flex: none;
		border: 1.5px solid #e4eaf1;
		border-radius: 10px;
		background: #fff;
		cursor: pointer;
		padding: 0 10px;
	}
	#mnb-beheer .mn-burger span { display: block; height: 2px; border-radius: 2px; background: #14233a; }
	#mnb-beheer .mn-top {
		height: auto;
		flex: 0 0 auto;
		min-height: 56px;
		padding: 8px 12px;
		gap: 10px;
		flex-wrap: wrap;
	}
	#mnb-beheer .mn-top h1 { font-size: 16px; }
	#mnb-beheer .mn-search { order: 3; flex: 1 1 100%; max-width: none; }
	#mnb-beheer .mn-search input { height: 42px; font-size: 16px; }
	#mnb-beheer .mn-top-user { display: none; }
	#mnb-beheer .mn-body { padding: 14px 12px 30px; }
	#mnb-beheer .mn-stats { grid-template-columns: repeat(auto-fit, minmax(136px, 1fr)); gap: 10px; }
	#mnb-beheer .mn-frow { grid-template-columns: 1fr; }
	#mnb-beheer .mn-detailgrid { grid-template-columns: 1fr 1fr; }
	/* Brede inhoud (tabellen, agenda) scrollt binnen de kaart in plaats van de pagina te breken */
	#mnb-beheer .mn-card { overflow-x: auto; }
	#mnb-beheer table.mn-table { min-width: 620px; }
	#mnb-beheer .ag-grid { min-width: 560px; }
}

/* ---- Installeerbare beheerapp (3.5.0) ---- */
#mnb-beheer .mn-install {
	display: block;
	width: 100%;
	margin-top: 12px;
	border: 1px solid rgba(255,255,255,.28);
	border-radius: 11px;
	background: rgba(255,255,255,.10);
	color: #fff;
	padding: 10px 12px;
	font: inherit;
	font-weight: 700;
	cursor: pointer;
}
#mnb-beheer .mn-install:hover { background: rgba(255,255,255,.17); }
#mnb-beheer .mn-install[hidden], #mnb-beheer .mn-install-modal[hidden] { display: none !important; }
#mnb-beheer .mn-install-modal {
	position: fixed;
	inset: 0;
	z-index: 30;
	display: grid;
	place-items: center;
	padding: 20px;
	background: rgba(8,20,36,.58);
	backdrop-filter: blur(7px);
}
#mnb-beheer .mn-install-dialog {
	position: relative;
	width: min(440px, 100%);
	background: #fff;
	border: 1px solid #e3e9f0;
	border-radius: 22px;
	padding: 30px;
	box-shadow: 0 30px 90px rgba(8,20,36,.28);
}
#mnb-beheer .mn-install-close {
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	border: 0;
	border-radius: 50%;
	background: #f2f5f9;
	color: #51607a;
	font-size: 25px;
	line-height: 1;
	cursor: pointer;
}
#mnb-beheer .mn-install-mark {
	width: 60px;
	height: 60px;
	display: grid;
	place-items: center;
	border-radius: 17px;
	background: #005899;
	color: #ceff00;
	font-size: 30px;
	font-weight: 800;
	box-shadow: 0 12px 30px rgba(0,88,153,.25);
}
#mnb-beheer .mn-install-dialog h2 { margin: 18px 0 12px; font-size: 22px; }
#mnb-beheer .mn-install-dialog ol { margin: 0; padding-left: 22px; color: #34445d; }
#mnb-beheer .mn-install-dialog li { padding: 5px 0; line-height: 1.5; }
#mnb-beheer .mn-install-dialog p { margin: 16px 0 0; color: #6b7689; line-height: 1.55; font-size: 13px; }
#mnb-beheer .mn-onboarding {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	border-left: 4px solid #ceff00;
}
#mnb-beheer .mn-onboarding p { margin: 5px 0 0; color: #6b7689; font-size: 13px; line-height: 1.5; }
#mnb-beheer .mn-onboarding .mn-btn { flex: none; text-decoration: none; }

/* Standalone iOS/Android: houd bediening buiten de veilige schermranden. */
@supports (padding: max(0px)) {
	body.mnb-frontend-app #mnb-beheer {
		padding-top: env(safe-area-inset-top);
		padding-right: env(safe-area-inset-right);
		padding-bottom: env(safe-area-inset-bottom);
		padding-left: env(safe-area-inset-left);
	}
}
@media (max-width: 700px) {
	#mnb-beheer .mn-install-dialog { padding: 26px 22px; border-radius: 18px; }
	#mnb-beheer .mn-onboarding { align-items: flex-start; flex-direction: column; }
	#mnb-beheer .mn-onboarding .mn-btn { width: 100%; text-align: center; }
}


#mnb-beheer .mn-install-top {
	display: none;
	border: 0;
	border-radius: 10px;
	background: #005899;
	color: #fff;
	padding: 9px 12px;
	font: inherit;
	font-size: 12.5px;
	font-weight: 700;
	white-space: nowrap;
	cursor: pointer;
}
#mnb-beheer .mn-install-top[hidden] { display: none !important; }
@media (max-width: 900px) {
	#mnb-beheer .mn-install-top:not([hidden]) { display: inline-flex; align-items: center; justify-content: center; margin-left: auto; }
}
/* ================= AUTOMATISCHE SALONHUISSTIJL ================= */
#mnb-beheer .mn-brand-card { overflow: hidden; }
#mnb-beheer .mn-brand-title { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:4px; }
#mnb-beheer .mn-brand-title h2 { margin:0; }
#mnb-beheer .mn-brand-title > span { display:inline-flex; align-items:center; border-radius:999px; padding:5px 9px; font-size:10.5px; font-weight:800; letter-spacing:.04em; text-transform:uppercase; background:#f1f8e2; color:#355900; border:1px solid #dcecba; white-space:nowrap; }
#mnb-beheer .mn-brand-url { display:flex; gap:8px; align-items:stretch; }
#mnb-beheer .mn-brand-url input { min-width:0; flex:1; }
#mnb-beheer .mn-brand-url .mn-btn { flex:0 0 auto; white-space:nowrap; }
#mnb-beheer .mn-brand-help { font-size:12px; line-height:1.55; margin:-4px 0 5px; }
#mnb-beheer .mn-brand-analysis { margin:14px 0 18px; padding:16px; border:1px solid #dfe7f0; background:#f8fafc; border-radius:16px; }
#mnb-beheer .mn-brand-analysis[hidden] { display:none; }
#mnb-beheer .mn-brand-result-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
#mnb-beheer .mn-brand-result-head strong { display:block; color:#172741; font-size:15px; }
#mnb-beheer .mn-brand-result-head small { display:block; color:#7b8797; font-size:11.5px; margin-top:3px; overflow-wrap:anywhere; }
#mnb-beheer .mn-brand-confidence { border-radius:999px; padding:5px 9px; font-size:10.5px; font-weight:750; white-space:nowrap; background:#fff5d9; color:#7a5700; }
#mnb-beheer .mn-brand-confidence.is-high { background:#e8f7ec; color:#1d6c35; }
#mnb-beheer .mn-brand-confidence.is-medium { background:#e8f1fb; color:#245984; }
#mnb-beheer .mn-brand-analysis h3 { margin:15px 0 8px; font-size:12px; color:#51607a; text-transform:uppercase; letter-spacing:.07em; }
#mnb-beheer .mn-brand-colors { display:flex; flex-wrap:wrap; gap:8px; }
#mnb-beheer .mn-brand-color { appearance:none; border:1px solid #dbe3ec; background:#fff; border-radius:12px; padding:6px 9px 6px 6px; display:flex; align-items:center; gap:7px; cursor:pointer; color:#35445b; font-size:11.5px; font-weight:650; }
#mnb-beheer .mn-brand-color i { display:block; width:26px; height:26px; border-radius:8px; box-shadow:inset 0 0 0 1px rgba(0,0,0,.08); }
#mnb-beheer .mn-brand-color.is-selected { border-color:#005899; box-shadow:0 0 0 2px rgba(0,88,153,.12); }
#mnb-beheer .mn-brand-images { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:9px; }
#mnb-beheer .mn-brand-image { appearance:none; background:#fff; border:1px solid #dbe3ec; border-radius:13px; padding:6px; cursor:pointer; min-width:0; text-align:left; }
#mnb-beheer .mn-brand-image span { height:72px; border-radius:9px; background:#eef2f6; display:grid; place-items:center; overflow:hidden; }
#mnb-beheer .mn-brand-image img { width:100%; height:100%; object-fit:contain; display:block; }
#mnb-beheer .mn-brand-image small { display:block; margin:6px 2px 1px; color:#5f6c80; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mnb-beheer .mn-brand-image.is-selected { border-color:#005899; box-shadow:0 0 0 2px rgba(0,88,153,.12); }
#mnb-beheer .mn-brand-meta { display:flex; flex-wrap:wrap; gap:12px; margin:15px 0 12px; color:#51607a; font-size:12px; }
#mnb-beheer .mn-brand-meta label { display:flex; align-items:center; gap:6px; }
#mnb-beheer .mn-brand-warnings { border-left:3px solid #f2a13a; padding-left:10px; margin:12px 0; color:#76521e; font-size:11.5px; }
#mnb-beheer .mn-brand-warnings p { margin:3px 0; }
#mnb-beheer .mn-file-row { display:flex; gap:7px; align-items:center; }
#mnb-beheer .mn-file-row input { min-width:0; flex:1; }
#mnb-beheer .mn-file-row .mn-btn { flex:0 0 auto; }
#mnb-beheer .mn-color-field { display:flex; align-items:center; gap:8px; }
#mnb-beheer .mn-color-field input[type=color] { width:54px; height:42px; padding:3px; flex:0 0 54px; }
#mnb-beheer .mn-color-field input:last-child { max-width:118px; text-transform:uppercase; font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
#mnb-beheer .mn-brand-color-preview { align-items:end; }
#mnb-beheer .mn-brand-preview { min-height:118px; border:1px solid #e0e6ee; border-radius:15px; overflow:hidden; background:#fff; position:relative; }
#mnb-beheer .mn-brand-preview-cover { height:62px; background-size:cover; background-position:center; }
#mnb-beheer .mn-brand-preview-info { display:flex; align-items:center; gap:9px; padding:9px 10px 10px; }
#mnb-beheer .mn-brand-preview-logo { width:44px; height:44px; flex:0 0 44px; display:grid; place-items:center; border-radius:12px; border:2px solid #fff; box-shadow:0 3px 12px rgba(23,39,65,.14); margin-top:-27px; overflow:hidden; }
#mnb-beheer .mn-brand-preview-logo img { width:100%; height:100%; object-fit:contain; }
#mnb-beheer .mn-brand-preview-logo b { font-size:17px; }
#mnb-beheer .mn-brand-preview-info > div { min-width:0; flex:1; }
#mnb-beheer .mn-brand-preview-info strong { display:block; color:#172741; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#mnb-beheer .mn-brand-preview-info small { display:block; color:#8a93a3; font-size:9.5px; margin-top:2px; }
#mnb-beheer .mn-brand-preview-info button { border:0; border-radius:8px; padding:7px 9px; background:#ff5722; color:#fff; font-size:9.5px; font-weight:750; }

@media(max-width:960px){
	#mnb-beheer .mn-brand-images { grid-template-columns:repeat(2,minmax(0,1fr)); }
	#mnb-beheer .mn-brand-color-preview { grid-template-columns:1fr; }
}
@media(max-width:620px){
	#mnb-beheer .mn-brand-title { align-items:flex-start; flex-direction:column; }
	#mnb-beheer .mn-brand-url, #mnb-beheer .mn-file-row { flex-wrap:wrap; }
	#mnb-beheer .mn-brand-url input, #mnb-beheer .mn-file-row input { flex-basis:100%; }
	#mnb-beheer .mn-brand-url .mn-btn { width:100%; }
	#mnb-beheer .mn-brand-result-head { flex-direction:column; }
	#mnb-beheer .mn-brand-images { grid-template-columns:repeat(2,minmax(0,1fr)); }
	#mnb-beheer .mn-brand-files { grid-template-columns:1fr; }
}

/* ======================================================================
   DOOLIOO PREMIUM UI 3.6.0
   Eén visueel systeem voor desktop, tablet en geïnstalleerde beheerapp.
   ====================================================================== */
#mnb-beheer {
	--doo-navy-950: #081a30;
	--doo-navy-900: #10233d;
	--doo-navy-800: #162f50;
	--doo-blue-700: #005899;
	--doo-blue-600: #176da8;
	--doo-orange-500: #ff5722;
	--doo-orange-600: #e94816;
	--doo-lime-400: #ceff00;
	--doo-ink: #13243b;
	--doo-muted: #64748b;
	--doo-subtle: #8a9aaf;
	--doo-line: #dfe7f0;
	--doo-line-soft: #edf2f7;
	--doo-canvas: #f3f7fb;
	--doo-card: rgba(255,255,255,.96);
	--doo-shadow-sm: 0 2px 8px rgba(15,35,61,.05), 0 1px 2px rgba(15,35,61,.04);
	--doo-shadow-md: 0 18px 48px -28px rgba(15,35,61,.34), 0 8px 20px -18px rgba(15,35,61,.20);
	--doo-shadow-lg: 0 36px 90px -42px rgba(8,26,48,.42);
	background:
		radial-gradient(circle at 92% 0%, rgba(199,90,236,.10), transparent 28%),
		radial-gradient(circle at 44% -10%, rgba(49,95,165,.12), transparent 34%),
		linear-gradient(180deg, #f8fafd 0%, var(--doo-canvas) 100%);
	font-family: "DM Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--doo-ink);
}
#mnb-beheer h1,
#mnb-beheer h2,
#mnb-beheer h3,
#mnb-beheer .mn-logo,
#mnb-beheer .mn-btn,
#mnb-beheer .mn-stat-num { font-family: Sora, "DM Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
#mnb-beheer :focus-visible { outline: 3px solid rgba(0,88,153,.32); outline-offset: 2px; }

/* Navigatie: donkere premium shell met rustige glans. */
#mnb-beheer .mn-side {
	width: 252px;
	flex-basis: 252px;
	padding: 22px 15px 18px;
	border-right: 1px solid rgba(255,255,255,.08);
	background:
		radial-gradient(circle at 30% 0%, rgba(49,95,165,.42), transparent 35%),
		radial-gradient(circle at 100% 78%, rgba(199,90,236,.17), transparent 32%),
		linear-gradient(180deg, var(--doo-navy-950), var(--doo-navy-900) 48%, #0c2947 100%);
	box-shadow: 20px 0 60px -48px rgba(8,26,48,.9);
}
#mnb-beheer .mn-logo {
	position: relative;
	margin: 2px 9px 25px;
	font-size: 23px;
	font-weight: 800;
	letter-spacing: -.045em;
	color: #fff;
}
#mnb-beheer .mn-logo::after {
	content: "";
	display: block;
	width: 42px;
	height: 3px;
	margin-top: 11px;
	border-radius: 999px;
	background: linear-gradient(90deg, var(--doo-lime-400), #fff38b);
	box-shadow: 0 0 18px rgba(206,255,0,.35);
}
#mnb-beheer .mn-logo small {
	margin-top: 5px;
	color: #a9c4df;
	font-size: 10px;
	letter-spacing: .16em;
}
#mnb-beheer .mn-nav { gap: 4px; }
#mnb-beheer .mn-nav button,
#mnb-beheer .mn-nav a {
	position: relative;
	min-height: 43px;
	padding: 10px 13px;
	border: 1px solid transparent;
	border-radius: 13px;
	font-size: 13.5px;
	font-weight: 650;
	color: #b8cce0;
	transition: background .18s ease, color .18s ease, border-color .18s ease, transform .18s ease;
}
#mnb-beheer .mn-nav button:hover,
#mnb-beheer .mn-nav a:hover {
	background: rgba(255,255,255,.075);
	border-color: rgba(255,255,255,.08);
	color: #fff;
	transform: translateX(2px);
}
#mnb-beheer .mn-nav button.is-active {
	background: linear-gradient(135deg, rgba(255,255,255,.98), rgba(244,249,254,.94));
	border-color: rgba(255,255,255,.8);
	color: var(--doo-navy-900);
	box-shadow: 0 15px 35px -18px rgba(0,0,0,.72), inset 0 1px 0 rgba(255,255,255,.8);
}
#mnb-beheer .mn-nav button.is-active::before {
	content: "";
	position: absolute;
	left: -7px;
	top: 10px;
	bottom: 10px;
	width: 3px;
	border-radius: 999px;
	background: var(--doo-orange-500);
	box-shadow: 0 0 12px rgba(255,87,34,.48);
}
#mnb-beheer .mn-navsep { margin-top: 16px; color: #6f91b3; font-size: 9.5px; letter-spacing: .17em; }
#mnb-beheer .mn-badge { background: var(--doo-orange-500); box-shadow: 0 5px 14px rgba(255,87,34,.28); }
#mnb-beheer .mn-nav button.is-active .mn-badge { background: var(--doo-navy-900); color: #fff; }
#mnb-beheer .mn-side-foot { color: #86a4c1; border-top: 1px solid rgba(255,255,255,.09); margin-top: 20px; }
#mnb-beheer .mn-side-foot a { color: #d4e3f0; text-decoration: none; }
#mnb-beheer .mn-side-foot a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* Topbar en werkvlak. */
#mnb-beheer .mn-top {
	min-height: 72px;
	height: 72px;
	flex-basis: 72px;
	padding: 0 28px;
	background: rgba(255,255,255,.84);
	border-bottom: 1px solid rgba(213,224,236,.88);
	box-shadow: 0 10px 30px -28px rgba(15,35,61,.45);
	backdrop-filter: blur(18px) saturate(140%);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
}
#mnb-beheer .mn-top h1 { font-size: 19px; font-weight: 750; letter-spacing: -.03em; }
#mnb-beheer .mn-search { max-width: 500px; }
#mnb-beheer .mn-search input {
	height: 44px;
	padding: 0 18px;
	border: 1px solid #dce5ef;
	border-radius: 999px;
	background: rgba(244,247,251,.88);
	box-shadow: inset 0 1px 2px rgba(15,35,61,.025);
	transition: background .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#mnb-beheer .mn-search input:focus {
	background: #fff;
	border-color: rgba(0,88,153,.55);
	box-shadow: 0 0 0 4px rgba(0,88,153,.09), 0 10px 22px -18px rgba(0,88,153,.5);
}
#mnb-beheer .mn-top-user { color: var(--doo-muted); font-weight: 600; }
#mnb-beheer .mn-body { padding: 30px clamp(22px, 3vw, 42px) 54px; }

/* Kaarten en cijfers: duidelijke hiërarchie zonder dashboard-drukte. */
#mnb-beheer .mn-stats { gap: 16px; margin-bottom: 22px; }
#mnb-beheer .mn-stat,
#mnb-beheer .mn-card {
	position: relative;
	border: 1px solid rgba(218,228,238,.95);
	background: var(--doo-card);
	box-shadow: var(--doo-shadow-md);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}
#mnb-beheer .mn-stat {
	min-height: 112px;
	justify-content: center;
	padding: 21px 22px;
	border-radius: 21px;
	overflow: hidden;
}
#mnb-beheer .mn-stat::after {
	content: "";
	position: absolute;
	right: -25px;
	top: -32px;
	width: 92px;
	height: 92px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(49,95,165,.13), rgba(49,95,165,0) 68%);
	pointer-events: none;
}
#mnb-beheer .mn-stat-num { font-size: 31px; font-weight: 760; color: var(--doo-blue-700); letter-spacing: -.045em; }
#mnb-beheer .mn-stat-num.orange { color: var(--doo-orange-500); }
#mnb-beheer .mn-stat-label { color: #738297; font-size: 10.5px; letter-spacing: .11em; }
#mnb-beheer .mn-stat-sub { font-size: 12.5px; font-weight: 700; color: #2f7d4f; margin-top: 5px; }
#mnb-beheer .mn-stat-wa { border-color: rgba(47,125,79,.42); cursor: pointer; }
#mnb-beheer .mn-stat-wa .mn-stat-num { color: #2f7d4f; }
#mnb-beheer .mn-stat-wa::after { background: radial-gradient(circle, rgba(47,125,79,.16), rgba(47,125,79,0) 68%); }
#mnb-beheer .mn-stat-wa:hover { border-color: rgba(47,125,79,.75); box-shadow: 0 16px 30px -20px rgba(47,125,79,.75); }
#mnb-beheer .mn-card { padding: 25px 27px; border-radius: 22px; }
#mnb-beheer .mn-card h2 { margin-bottom: 16px; font-size: 16.5px; font-weight: 750; letter-spacing: -.025em; }
#mnb-beheer .mn-grid2 { gap: 22px; }

/* Tabellen en lijsten. */
#mnb-beheer table.mn-table { font-size: 13.5px; }
#mnb-beheer .mn-table th {
	padding: 11px 13px;
	color: #8290a3;
	font-size: 10.5px;
	letter-spacing: .11em;
	background: #f7f9fc;
	border-bottom-color: #e7edf4;
}
#mnb-beheer .mn-table th:first-child { border-radius: 10px 0 0 10px; }
#mnb-beheer .mn-table th:last-child { border-radius: 0 10px 10px 0; }
#mnb-beheer .mn-table td { padding: 14px 13px; border-bottom-color: #edf2f7; }
#mnb-beheer .mn-table tr.is-click { transition: transform .14s ease; }
#mnb-beheer .mn-table tr.is-click:hover td { background: #f7faff; }
#mnb-beheer .mn-table tr.is-click:hover td:first-child { box-shadow: inset 3px 0 0 var(--doo-blue-700); }

/* Knoppen en velden. */
#mnb-beheer .mn-btn {
	min-height: 39px;
	padding: 8px 16px;
	border: 1px solid transparent;
	border-radius: 12px;
	background: linear-gradient(135deg, var(--doo-blue-700), #0d6ea8);
	font-size: 12.8px;
	font-weight: 720;
	box-shadow: 0 11px 22px -16px rgba(0,88,153,.8);
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
}
#mnb-beheer .mn-btn:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 16px 30px -17px rgba(0,88,153,.85); }
#mnb-beheer .mn-btn.orange { background: linear-gradient(135deg, var(--doo-orange-500), var(--doo-orange-600)); box-shadow: 0 13px 28px -17px rgba(255,87,34,.9); }
#mnb-beheer .mn-btn.ghost {
	background: #fff;
	color: var(--doo-blue-700);
	border-color: #d7e2ed;
	box-shadow: var(--doo-shadow-sm);
}
#mnb-beheer .mn-btn.ghost:hover { border-color: rgba(0,88,153,.42); background: #f8fbfe; }
#mnb-beheer .mn-btn.small { min-height: 34px; padding: 6px 12px; }
#mnb-beheer .mn-field { gap: 7px; margin-bottom: 14px; }
#mnb-beheer .mn-field span { color: #56667c; font-size: 12px; font-weight: 700; }
#mnb-beheer .mn-field input,
#mnb-beheer .mn-field select,
#mnb-beheer .mn-field textarea,
#mnb-beheer .mn-inline-edit,
#mnb-beheer .mn-hours-row input[type=time] {
	min-height: 43px;
	border: 1px solid #dbe4ee;
	border-radius: 12px;
	background: #fff;
	box-shadow: inset 0 1px 2px rgba(15,35,61,.025);
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
#mnb-beheer .mn-field input:focus,
#mnb-beheer .mn-field select:focus,
#mnb-beheer .mn-field textarea:focus,
#mnb-beheer .mn-inline-edit:focus {
	outline: none;
	border-color: rgba(0,88,153,.6);
	box-shadow: 0 0 0 4px rgba(0,88,153,.09);
}
#mnb-beheer .mn-chip { padding: 7px 14px; background: rgba(255,255,255,.9); border: 1px solid #dce5ef; box-shadow: var(--doo-shadow-sm); }
#mnb-beheer .mn-chip:hover { border-color: rgba(0,88,153,.35); color: var(--doo-blue-700); }
#mnb-beheer .mn-chip.is-active { background: var(--doo-navy-900); border-color: var(--doo-navy-900); color: #fff; box-shadow: 0 9px 20px -13px rgba(16,35,61,.85); }
/* De hover-regel hierboven zet een donkerblauwe letterkleur. Op een actieve
   chip staat die tekst op een donkere achtergrond en is hij vrijwel
   onleesbaar. Een actieve chip houdt daarom altijd witte letters. */
#mnb-beheer .mn-chip.is-active:hover,
#mnb-beheer .mn-chip.is-active:focus { color: #fff; border-color: var(--doo-navy-900); }

/* Status, meldingen en onboarding. */
#mnb-beheer .mn-pill { gap: 5px; padding: 5px 10px; border: 1px solid transparent; }
#mnb-beheer .mn-pill.p-pending,
#mnb-beheer .mn-pill.p-open { background: #fff1eb; color: #c84518; border-color: #ffd8c9; }
#mnb-beheer .mn-pill.p-confirmed { background: #edf6fc; color: #00558f; border-color: #d5eaf7; }
#mnb-beheer .mn-pill.p-completed,
#mnb-beheer .mn-pill.p-paid,
#mnb-beheer .mn-pill.p-on { background: #eaf8ef; color: #1d7140; border-color: #d1eedc; }
#mnb-beheer .mn-pill.p-cancelled,
#mnb-beheer .mn-pill.p-off { background: #f2f5f8; color: #66758a; border-color: #e5eaf0; }
#mnb-beheer .mn-onboarding {
	border: 1px solid #dce7c0;
	border-left: 0;
	background: linear-gradient(135deg, #fbfff0 0%, #fff 52%, #f6faff 100%);
	overflow: hidden;
}
#mnb-beheer .mn-onboarding::before {
	content: "";
	position: absolute;
	inset: 0 auto 0 0;
	width: 5px;
	background: linear-gradient(180deg, var(--doo-lime-400), #97c900);
}

/* Agenda. */
#mnb-beheer .ag-grid { border-radius: 17px; border-color: #e1e8f0; box-shadow: inset 0 1px 0 #fff; }
#mnb-beheer .ag-time-head,
#mnb-beheer .ag-col-head { background: #f8fafd; border-bottom-color: #e7edf4; }
#mnb-beheer .ag-col-body { background: rgba(255,255,255,.78); }
#mnb-beheer .ag-ev { border-radius: 11px; box-shadow: 0 8px 20px -14px rgba(15,35,61,.35); }
#mnb-beheer .ag-col.is-today .ag-col-head { background: var(--doo-navy-900); box-shadow: 0 8px 18px -13px rgba(16,35,61,.9); }

/* Installatievenster. */
#mnb-beheer .mn-install-modal { background: rgba(8,26,48,.66); backdrop-filter: blur(12px) saturate(120%); }
#mnb-beheer .mn-install-dialog { border-radius: 26px; border-color: rgba(255,255,255,.75); box-shadow: var(--doo-shadow-lg); }
#mnb-beheer .mn-install-mark { border-radius: 19px; background: linear-gradient(145deg, var(--doo-blue-700), var(--doo-navy-900)); }

@media (max-width: 900px) {
	#mnb-beheer .mn-side { width: min(310px, 88vw); }
	#mnb-beheer .mn-top { min-height: 64px; padding: 9px 13px; }
	#mnb-beheer .mn-body { padding: 16px 13px 36px; }
	#mnb-beheer .mn-card { padding: 19px 17px; border-radius: 18px; }
	#mnb-beheer .mn-stat { min-height: 102px; padding: 18px; border-radius: 17px; }
	#mnb-beheer .mn-stat-num { font-size: 27px; }
	#mnb-beheer .mn-burger { border-color: #dce5ef; border-radius: 12px; box-shadow: var(--doo-shadow-sm); }
}
@media (max-width: 560px) {
	#mnb-beheer .mn-stats { grid-template-columns: 1fr 1fr; }
	#mnb-beheer .mn-card { margin-bottom: 13px; }
	#mnb-beheer .mn-detailgrid { grid-template-columns: 1fr; }
	#mnb-beheer .mn-actions .mn-btn { flex: 1 1 auto; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
	#mnb-beheer *, #mnb-beheer *::before, #mnb-beheer *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

/* Wensknop: mis je een functie */
#mnb-beheer .mn-wens {
	display: block;
	margin-top: 14px;
	padding: 12px 14px;
	border-radius: 14px;
	background: linear-gradient(135deg, rgba(206,255,0,.16), rgba(206,255,0,.06));
	border: 1px solid rgba(206,255,0,.35);
	color: #fff;
	text-decoration: none;
	line-height: 1.4;
}
#mnb-beheer .mn-wens strong { display: block; font-size: 13.5px; }
#mnb-beheer .mn-wens span { display: block; font-size: 12.5px; opacity: .85; }
#mnb-beheer .mn-wens::after { content: ' \2197'; font-size: 12px; opacity: .7; }
#mnb-beheer .mn-wens:hover { background: linear-gradient(135deg, rgba(206,255,0,.24), rgba(206,255,0,.1)); color: #fff; }

/* WhatsApp-assistent: gesprekken */
#mnb-beheer .mn-agent-kop { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
#mnb-beheer .mn-agent-acties { display: flex; gap: 8px; flex-wrap: wrap; }
#mnb-beheer .mn-convlijst { display: flex; flex-direction: column; }
#mnb-beheer .mn-convrow {
	display: grid; grid-template-columns: 1fr auto; grid-template-areas: 'wie tijd' 'laatste tijd';
	gap: 2px 10px; width: 100%; text-align: left; padding: 11px 10px;
	background: none; border: 0; border-bottom: 1px solid #EDF1F6; cursor: pointer; border-radius: 10px;
}
#mnb-beheer .mn-convrow:hover { background: #F5F8FC; }
#mnb-beheer .mn-convwie { grid-area: wie; font-weight: 600; font-size: 14px; color: #172741; }
#mnb-beheer .mn-convstil { font-weight: 600; font-size: 11px; color: #B45309; background: #FEF3C7; border-radius: 99px; padding: 2px 8px; margin-left: 4px; }
#mnb-beheer .mn-convlaatste { grid-area: laatste; font-size: 13px; color: #677489; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; }
#mnb-beheer .mn-convtijd { grid-area: tijd; align-self: start; font-size: 12px; color: #98A2B3; white-space: nowrap; }
#mnb-beheer .mn-chat { display: flex; flex-direction: column; gap: 8px; max-height: 62vh; overflow: auto; padding: 6px 2px; }
#mnb-beheer .mn-bubble { max-width: 76%; padding: 9px 12px 6px; border-radius: 14px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
#mnb-beheer .mn-bubble small { display: block; margin-top: 3px; font-size: 10.5px; opacity: .6; }
#mnb-beheer .mn-bubble.in { align-self: flex-start; background: #EEF2F7; color: #172741; border-bottom-left-radius: 4px; }
#mnb-beheer .mn-bubble.uit { align-self: flex-end; background: #315FA5; color: #fff; border-bottom-right-radius: 4px; }
#mnb-beheer .mn-agent-stilmelding { background: #FEF3C7; color: #92400E; border-radius: 10px; padding: 9px 12px; font-size: 13px; }
#mnb-beheer .mn-agent-promo h2 { margin-top: 0; }
@media (max-width: 700px) {
	#mnb-beheer .mn-bubble { max-width: 90%; }
	#mnb-beheer .mn-convlaatste { max-width: 100%; }
}

/* Assistent 3.12: mensbubbels, pauzemenu, antwoordveld */
#mnb-beheer .mn-bubble.uit.mens { background: #1F7A4D; }
#mnb-beheer .mn-pauzemenu { display: inline-flex; gap: 6px; flex-wrap: wrap; }
#mnb-beheer .mn-pauzemenu button { border: 1px solid #D6DEE8; background: #fff; border-radius: 99px; padding: 5px 11px; font-size: 12.5px; cursor: pointer; }
#mnb-beheer .mn-pauzemenu button:hover { background: #F5F8FC; }
#mnb-beheer .mn-chat-antwoord { display: flex; gap: 8px; margin-top: 10px; align-items: flex-end; }
#mnb-beheer .mn-chat-antwoord textarea { flex: 1; border: 1px solid #D6DEE8; border-radius: 12px; padding: 9px 12px; font: inherit; resize: vertical; min-height: 44px; }

/* Afleverstatus in de bubbels */
#mnb-beheer .mn-aflever { opacity: .85; }
#mnb-beheer .mn-aflever.mn-gelezen { color: #8FD3FF; opacity: 1; }
#mnb-beheer .mn-aflever.mn-mislukt { color: #FFD5A8; opacity: 1; }

/* Omzet: tabbladen en het WhatsApp-tabblad */
#mnb-beheer .mn-omzettabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
#mnb-beheer .mn-omzettabs button {
	border: 1px solid #D6DEE8; background: #fff; color: #45526B; border-radius: 99px;
	padding: 8px 16px; font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
#mnb-beheer .mn-omzettabs button:hover { background: #F5F8FC; }
#mnb-beheer .mn-omzettabs button.is-active { background: #172741; border-color: #172741; color: #fff; }
#mnb-beheer .mn-omzettabs button[data-tab="whatsapp"] { border-color: #25D366; color: #14663A; }
#mnb-beheer .mn-omzettabs button[data-tab="whatsapp"].is-active { background: #1F7A4D; border-color: #1F7A4D; color: #fff; }
#mnb-beheer .mn-wa-card { border-top: 3px solid #25D366; }
#mnb-beheer .mn-wa-uit { background: #FEF3C7; color: #92400E; border-radius: 10px; padding: 9px 12px; font-size: 13px; }
#mnb-beheer .mn-wa-regels { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 2px 18px; margin-top: 16px; }
#mnb-beheer .mn-wa-regels > div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 2px; border-bottom: 1px solid #EDF1F6; font-size: 14px; }
#mnb-beheer .mn-wa-regels span { color: #677489; }
#mnb-beheer .mn-wa-regels strong { color: #172741; white-space: nowrap; }
#mnb-beheer .mn-wa-fout { color: #b32d2e; font-style: normal; font-weight: 600; font-size: 12px; }
#mnb-beheer .mn-wa-chart .mn-bar i { background: linear-gradient(180deg, #34D07A, #1F7A4D); }
#mnb-beheer .mn-wa-bundel { margin-top: 16px; font-size: 13px; color: #45526B; }
#mnb-beheer .mn-wa-bundelbalk { height: 8px; border-radius: 99px; background: #EDF1F6; overflow: hidden; margin-bottom: 6px; }
#mnb-beheer .mn-wa-bundelbalk i { display: block; height: 100%; background: #1F7A4D; }

/* WhatsApp valt op in de menubalk */
#mnb-beheer .mn-nav button.mn-nav-wa { box-shadow: inset 0 0 0 1.5px rgba(37, 211, 102, .9); }
#mnb-beheer .mn-nav button.mn-nav-wa::after { content: ''; width: 7px; height: 7px; border-radius: 50%; background: #25D366; margin-left: 8px; display: inline-block; vertical-align: middle; }
#mnb-beheer .mn-nav button.mn-nav-wa:hover { background: rgba(37, 211, 102, .14); }
#mnb-beheer .mn-nav button.mn-nav-wa.is-active { background: #1F7A4D; box-shadow: inset 0 0 0 1.5px #25D366, 0 8px 20px rgba(31, 122, 77, .35); }
#mnb-beheer .mn-nav button.mn-nav-wa.is-active .mn-badge { background: #fff; color: #1F7A4D; }


/* Dashboard polish 3.16.3: KPI's exact uitlijnen + heldere boekingslink. */
#mnb-beheer .mn-dashboard-stats {
	align-items: stretch;
}
#mnb-beheer .mn-dashboard-stats .mn-stat {
	min-width: 0;
	min-height: 132px;
	justify-content: flex-start;
	padding: 22px 22px 20px;
}
#mnb-beheer .mn-dashboard-stats .mn-stat-num {
	display: block;
	min-height: 38px;
	line-height: 1.02;
	white-space: nowrap;
	font-variant-numeric: tabular-nums;
}
#mnb-beheer .mn-dashboard-stats .mn-stat-money .mn-stat-num {
	font-size: 28px;
}
#mnb-beheer .mn-dashboard-stats .mn-stat-label {
	min-height: 30px;
	margin-top: 10px;
	line-height: 1.45;
}
#mnb-beheer .mn-dashboard-stats .mn-stat-sub {
	margin-top: auto;
	padding-top: 12px;
	line-height: 1.35;
}

#mnb-beheer .mn-booking-link-card {
	padding: 27px 28px;
}
#mnb-beheer .mn-booking-link-card h2 {
	margin-bottom: 11px;
	font-size: 17px;
}
#mnb-beheer .mn-booking-link-copy {
	max-width: 920px;
}
#mnb-beheer .mn-booking-link-intro {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.55;
}
#mnb-beheer .mn-booking-link-row {
	display: flex;
	align-items: stretch;
	gap: 10px;
	max-width: 720px;
}
#mnb-beheer .mn-booking-link-code {
	display: flex;
	align-items: center;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 48px;
	padding: 0 16px;
	border: 1px solid #dfe7f0;
	border-radius: 13px;
	background: #f5f8fb;
	color: #34445c;
	font-size: 14px;
	line-height: 1.35;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#mnb-beheer .mn-booking-link-action {
	flex: 0 0 auto;
	min-height: 48px;
	padding-inline: 18px;
	white-space: nowrap;
	text-decoration: none;
}
#mnb-beheer .mn-booking-link-note {
	margin: 10px 0 0;
	font-size: 12.5px;
	line-height: 1.5;
	color: #7b8798;
}
@media (max-width: 1180px) {
	#mnb-beheer .mn-dashboard-stats .mn-stat-money .mn-stat-num { font-size: 25px; }
}
@media (max-width: 700px) {
	#mnb-beheer .mn-dashboard-stats .mn-stat { min-height: 118px; padding: 18px; }
	#mnb-beheer .mn-dashboard-stats .mn-stat-num { min-height: 33px; }
	#mnb-beheer .mn-dashboard-stats .mn-stat-label { min-height: 0; }
	#mnb-beheer .mn-booking-link-card { padding: 22px 20px; }
	#mnb-beheer .mn-booking-link-row { flex-direction: column; }
	#mnb-beheer .mn-booking-link-action { width: 100%; justify-content: center; }
}

/* ======================================================================
   MOBIEL 3.16.4
   1. Topbalk groeit weer mee op mobiel. De premium-laag (3.6.0) zette
      height terug op een vaste 72px, waardoor het zoekveld op telefoons
      buiten de balk stak en over de filterrij eronder viel. Dit blok
      staat bewust als laatste in het bestand en wint daardoor van alle
      eerdere lagen met dezelfde specificiteit.
   2. Kassa-KPI's als 2x2 raster op telefoons in plaats van vier platgedrukte
      kolommen naast elkaar.
   3. Lijsttabellen (Boekingen, Klanten, Kassa) worden op telefoons een
      kaartlijst in plaats van een zijwaarts scrollende tabel.
   ====================================================================== */

/* 1. Topbalk en filterrij. */
@media (max-width: 900px) {
	#mnb-beheer .mn-top {
		height: auto;
		min-height: 56px;
		flex: 0 0 auto;
		flex-wrap: wrap;
		padding: 8px 12px;
		gap: 8px 10px;
	}
	#mnb-beheer .mn-top h1 { font-size: 16px; }
	#mnb-beheer .mn-search { order: 3; flex: 1 1 100%; max-width: none; }
	#mnb-beheer .mn-search input { height: 42px; font-size: 16px; }
	#mnb-beheer .mn-filters { row-gap: 10px; }
	#mnb-beheer .mn-filterzoek { flex: 1 1 100%; width: auto; min-width: 0; font-size: 16px; }
}
@media (min-width: 901px) {
	#mnb-beheer .mn-filterzoek { width: 230px; }
}

/* 2. Kassa-KPI's. */
#mnb-beheer .mn-kassa-stats { grid-template-columns: repeat(4, 1fr); }
#mnb-beheer .mn-kassa-stats .mn-stat-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
	#mnb-beheer .mn-kassa-stats { grid-template-columns: 1fr 1fr; gap: 10px; }
	#mnb-beheer .mn-kassa-stats .mn-stat { min-height: 0; padding: 15px 16px; }
	#mnb-beheer .mn-kassa-stats .mn-stat-num { font-size: 22px; min-height: 0; }
	#mnb-beheer .mn-kassa-stats .mn-stat-label { min-height: 0; letter-spacing: .07em; }
}

/* 3. Kaartlijsten op telefoons. De kopregel (tr.mn-kop) verdwijnt, elke rij
   wordt een compact kaartje: eerste cel als kopregel over de volle breedte,
   de rest vloeit er in leesvolgorde onder. Acties (mn-td-acties) krijgen een
   eigen regel zodat de knoppen goed raakbaar blijven. */
@media (max-width: 700px) {
	#mnb-beheer table.mn-table.mn-cards-mobiel { display: block; width: 100%; min-width: 0; border-collapse: separate; }
	#mnb-beheer .mn-cards-mobiel tbody { display: block; width: 100%; }
	#mnb-beheer .mn-cards-mobiel tr.mn-kop { display: none; }
	#mnb-beheer .mn-cards-mobiel tr {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 4px 12px;
		padding: 13px 2px;
		border-bottom: 1px solid #edf2f7;
	}
	#mnb-beheer .mn-cards-mobiel tr:last-child { border-bottom: 0; }
	#mnb-beheer .mn-cards-mobiel td {
		display: inline-flex;
		align-items: center;
		padding: 0;
		border: 0;
		min-width: 0;
		overflow-wrap: anywhere;
	}
	#mnb-beheer .mn-cards-mobiel td:first-child { flex: 1 1 100%; font-weight: 700; }
	#mnb-beheer .mn-cards-mobiel td.mn-td-acties { flex: 1 1 100%; margin-top: 6px; }
	#mnb-beheer .mn-cards-mobiel td.mn-td-acties .mn-actions { width: 100%; }
	#mnb-beheer .mn-cards-mobiel td.mn-td-acties .mn-btn { flex: 1 1 auto; justify-content: center; }
	#mnb-beheer .mn-cards-mobiel tr.is-click:hover td { background: none; }
	#mnb-beheer .mn-cards-mobiel tr.is-click:hover td:first-child { box-shadow: none; }
	#mnb-beheer .mn-cards-mobiel td:empty { display: none; }
}

/* ================= MOBIEL 3.16.5 ================= */
/* Geldbedragen en andere KPI-waarden breken nooit meer over twee regels;
   money() gebruikt nu bovendien een vaste spatie na het euroteken, net als
   euroFijn() al deed. Op telefoons gaan de KPI-cijfers iets kleiner zodat
   ook grotere bedragen als 9.469,00 in een halve-breedtekaart passen. */
#mnb-beheer .mn-stat-num { white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) {
	#mnb-beheer .mn-stat-num { font-size: 24px; }
	#mnb-beheer .mn-stat { min-height: 0; }
}
@media (max-width: 700px) {
	#mnb-beheer .mn-dashboard-stats .mn-stat-money .mn-stat-num { font-size: 22px; }
	#mnb-beheer .mn-kassa-stats .mn-stat-num { font-size: 22px; }
}

/* ================= OVERSTAPPEN 3.17.0 ================= */
#mnb-beheer .mn-ov-kolom { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid #edf2f7; flex-wrap: wrap; }
#mnb-beheer .mn-ov-kolom:last-of-type { border-bottom: 0; }
#mnb-beheer .mn-ov-kolominfo { flex: 1 1 200px; min-width: 0; display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; }
#mnb-beheer .mn-ov-kolominfo .mn-muted { font-size: 12px; overflow-wrap: anywhere; }
#mnb-beheer .mn-ov-kolom select { flex: 0 1 240px; min-height: 40px; border: 1px solid #dbe3ee; border-radius: 11px; padding: 6px 10px; font-size: 13.5px; background: #fff; }
#mnb-beheer .mn-ov-balk { height: 10px; border-radius: 999px; background: #edf2f7; overflow: hidden; }
#mnb-beheer .mn-ov-balk span { display: block; height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #f26332, #e95626); transition: width .3s ease; }
@media (max-width: 700px) {
	#mnb-beheer .mn-ov-kolom select { flex: 1 1 100%; font-size: 16px; }
}

/* ===== QR-BETALEN IN DE KASSA 3.19.0 ===== */
.mn-qr-overlay{position:fixed;inset:0;z-index:100000;background:rgba(15,26,44,.55);display:grid;place-items:center;padding:18px}
.mn-qr-kaart{width:min(420px,100%);background:#fff;border-radius:20px;padding:24px 24px 20px;box-shadow:0 30px 80px -35px rgba(15,26,44,.65);text-align:center}
.mn-qr-kop{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;text-align:left;margin-bottom:14px}
.mn-qr-titel{font-weight:800;font-size:18px;color:#172741}
.mn-qr-bedrag{font-weight:800;font-size:22px;color:#ff5722;white-space:nowrap}
.mn-qr-code{display:grid;place-items:center;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:14px}
.mn-qr-code svg{width:min(240px,64vw);height:auto;display:block}
.mn-qr-uitleg{margin:12px 0 0;font-size:13.5px;color:#677489;line-height:1.5}
.mn-qr-status{margin-top:12px;font-size:14px;color:#172741;display:flex;align-items:center;justify-content:center;gap:8px;min-height:22px}
.mn-qr-spin{width:14px;height:14px;border-radius:50%;border:2px solid #dbe3ee;border-top-color:#ff5722;animation:mnqr-spin .9s linear infinite;display:inline-block}
@keyframes mnqr-spin{to{transform:rotate(360deg)}}
.mn-qr-klaar{padding:26px 6px}
.mn-qr-vinkje{width:56px;height:56px;border-radius:50%;background:#e9f8ef;color:#1d7a45;font-size:30px;font-weight:800;display:grid;place-items:center;margin:0 auto 12px}
.mn-qr-loopt{white-space:nowrap}
@media (max-width:560px){.mn-qr-kaart{padding:18px 16px 16px}.mn-qr-bedrag{font-size:19px}}

/* 3.25.9: huisstijlkaart even uitlichten na de dashboardtip of #huisstijl */
.mn-brand-uitgelicht{animation:mnBrandGlow 2.4s ease}
@keyframes mnBrandGlow{0%{box-shadow:0 0 0 0 rgba(0,88,153,0)}25%{box-shadow:0 0 0 5px rgba(0,88,153,.25)}100%{box-shadow:0 0 0 0 rgba(0,88,153,0)}}
@media (prefers-reduced-motion: reduce){.mn-brand-uitgelicht{animation:none}}

/* 3.26.0: ChatGPT-headerhulp en titelknop */
.mn-brand-ai{margin:6px 0 14px}
.mn-brand-ai .mn-muted{margin:6px 0 0;font-size:12.5px;line-height:1.55;max-width:520px}
.mn-brand-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* ---------- Mollie-scherm ---------- */
#mnb-beheer .mn-mollie-voordelen { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0 18px; }
#mnb-beheer .mn-mollie-voordeel { display: flex; gap: 12px; align-items: flex-start; background: #f7fafc; border: 1px solid #eef0f4; border-radius: 14px; padding: 13px 15px; }
#mnb-beheer .mn-mollie-voordeel strong { display: block; font-size: 13.5px; margin: 0 0 3px; color: #172741; }
#mnb-beheer .mn-mollie-voordeel span:last-child { font-size: 13px; color: #677489; line-height: 1.45; }
#mnb-beheer .mn-mollie-vink { flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; background: rgba(46,125,50,.14); color: #2e7d32; display: grid; place-items: center; font-size: 13px; font-weight: 700; margin-top: 1px; }
#mnb-beheer .mn-mollie-stappen { margin: 14px 0 2px; display: grid; gap: 12px; }
#mnb-beheer .mn-mollie-stap { display: flex; gap: 12px; align-items: flex-start; }
#mnb-beheer .mn-mollie-stap p { margin: 2px 0 0; line-height: 1.5; }
#mnb-beheer .mn-mollie-nr { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,87,34,.13); color: #ff5722; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
#mnb-beheer .mn-mollie-rijen { border-top: 1px solid #eef0f4; margin: 4px 0 12px; }
#mnb-beheer .mn-mollie-rij { display: flex; justify-content: space-between; gap: 14px; padding: 10px 0; border-bottom: 1px solid #eef0f4; }
#mnb-beheer .mn-mollie-rij span { color: #677489; }
#mnb-beheer .mn-mollie-rij strong { text-align: right; }
#mnb-beheer .mn-mollie-fout { color: #c62828; font-weight: 600; }
#mnb-beheer .mn-mollie-acties { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
#mnb-beheer .mn-mollie-melding { border-radius: 13px; padding: 12px 16px; margin: 0 0 14px; font-weight: 600; }
#mnb-beheer .mn-mollie-melding.ok { background: rgba(46,125,50,.12); color: #2e7d32; }
#mnb-beheer .mn-mollie-melding.err { background: rgba(198,40,40,.1); color: #c62828; }
@media (max-width: 760px) {
	#mnb-beheer .mn-mollie-voordelen { grid-template-columns: 1fr; }
	#mnb-beheer .mn-mollie-rij { flex-direction: column; gap: 2px; }
	#mnb-beheer .mn-mollie-rij strong { text-align: left; }
}
#mnb-beheer .mn-schakel { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border: 1px solid #eef0f4; border-radius: 14px; background: #fbfcfe; margin: 0 0 10px; cursor: pointer; transition: border-color .15s, background .15s; }
#mnb-beheer .mn-schakel:hover { border-color: #dbe3ee; }
#mnb-beheer .mn-schakel input { position: absolute; opacity: 0; pointer-events: none; }
#mnb-beheer .mn-schakel-knop { flex: 0 0 auto; width: 42px; height: 24px; border-radius: 999px; background: #dbe3ee; position: relative; transition: background .18s; margin-top: 1px; }
#mnb-beheer .mn-schakel-knop::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(23,39,65,.25); transition: transform .18s; }
#mnb-beheer .mn-schakel input:checked ~ .mn-schakel-knop { background: #ff5722; }
#mnb-beheer .mn-schakel input:checked ~ .mn-schakel-knop::after { transform: translateX(18px); }
#mnb-beheer .mn-schakel input:focus-visible ~ .mn-schakel-knop { outline: 2px solid #005899; outline-offset: 2px; }
#mnb-beheer .mn-schakel-tekst { display: flex; flex-direction: column; gap: 2px; }
#mnb-beheer .mn-schakel-tekst strong { font-size: 13.5px; color: #172741; }
#mnb-beheer .mn-schakel-tekst em { font-style: normal; font-size: 12.5px; color: #677489; line-height: 1.45; }
#mnb-beheer .mn-mollie-inzoom { margin: 2px 0 12px 21px; padding: 4px 0 2px 20px; border-left: 2px solid #eef0f4; }
#mnb-beheer .mn-mollie-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 4px 0 6px; }
#mnb-beheer .mn-mollie-subkop { font-size: 12px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase; color: #8a93a3; margin: 16px 0 10px; }
@media (max-width: 760px) {
	#mnb-beheer .mn-mollie-grid3 { grid-template-columns: 1fr; }
}

/* ================================================================
   GROEI 3.34.0
   Huisstijltokens van doolioo, zodat kleuren niet los in de code
   belanden. Lime is bewust een signaalkleur en geen vulkleur.
   ================================================================ */
#mnb-beheer {
	--doo-navy: #162842;
	--doo-navy-2: #244C7F;
	--doo-blauw: #315FA5;
	--doo-lime: #CEFF00;
	--doo-oranje: #F26332;
	--doo-oranje-donker: #E95626;
	--doo-roze: #EF78CB;
	--doo-paars: #C75AEC;
	--doo-ink: #172741;
	--doo-slate: #677489;
	--doo-lijn: #E2E8F0;
	--doo-soft: #F5F8FC;
}
#mnb-beheer .mn-scorekaart { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
#mnb-beheer .mn-score-ring { flex: 0 0 auto; width: 130px; }
#mnb-beheer .mn-score-tekst { flex: 1 1 240px; min-width: 0; }
#mnb-beheer .mn-score-tekst h2 { margin: 0 0 6px; }
#mnb-beheer .mn-score-tekst p { margin: 0 0 8px; color: var(--doo-slate); font-size: 13.5px; line-height: 1.55; }
#mnb-beheer .mn-ring { width: 130px; height: 130px; display: block; }
#mnb-beheer .mn-ring-num { font: 700 34px/1 'Sora', system-ui, sans-serif; fill: var(--doo-navy); }
#mnb-beheer .mn-ring-sub { font: 400 11px/1 system-ui, sans-serif; fill: var(--doo-slate); }
#mnb-beheer .mn-beweging { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
#mnb-beheer .mn-beweging.omhoog { background: rgba(206, 255, 0, .35); color: #3f5200; }
#mnb-beheer .mn-beweging.omlaag { background: rgba(242, 99, 50, .12); color: var(--doo-oranje-donker); }
#mnb-beheer .mn-beweging.gelijk { background: var(--doo-soft); color: var(--doo-slate); }

#mnb-beheer .mn-pijlers { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
#mnb-beheer .mn-pijler { margin: 0; }
#mnb-beheer .mn-pijler-kop { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
#mnb-beheer .mn-pijler-kop strong { font-size: 14.5px; color: var(--doo-ink); }
#mnb-beheer .mn-pijler-punten { font-size: 12.5px; font-weight: 700; color: var(--doo-slate); white-space: nowrap; font-variant-numeric: tabular-nums; }
#mnb-beheer .mn-pijler-punten[data-leeg] { font-weight: 400; font-style: italic; }
#mnb-beheer .mn-pijler-cijfer { font: 700 30px/1.1 'Sora', system-ui, sans-serif; margin: 10px 0 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
#mnb-beheer .mn-pijler-onder { margin: 0 0 10px; font-size: 12.5px; color: var(--doo-slate); line-height: 1.5; }
#mnb-beheer .mn-pijler-reden { margin: 8px 0 0; font-size: 12.5px; }
#mnb-beheer .mn-pijler-uitleg { margin: 10px 0 0; font-size: 12px; line-height: 1.5; }
#mnb-beheer .mn-balk { height: 8px; border-radius: 999px; background: var(--doo-lijn); overflow: hidden; }
#mnb-beheer .mn-balk.groot { height: 12px; margin: 10px 0; }
#mnb-beheer .mn-balk i { display: block; height: 100%; border-radius: 999px; background: var(--doo-blauw); transition: width .3s; }
#mnb-beheer .mn-lijn-wrap { margin: 14px 0 2px; }
#mnb-beheer .mn-lijn { width: 100%; height: 96px; display: block; overflow: visible; }
#mnb-beheer .mn-lijn-as { display: flex; justify-content: space-between; font-size: 11px; color: #8a93a3; }

#mnb-beheer .mn-tip { border: 1px solid var(--doo-lijn); border-radius: 18px; padding: 16px 18px; margin: 0 0 12px; background: #fbfcfe; }
#mnb-beheer .mn-tip:last-child { margin-bottom: 0; }
#mnb-beheer .mn-tip strong { display: block; font-size: 14.5px; color: var(--doo-ink); margin: 0 0 6px; }
#mnb-beheer .mn-tip p { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: var(--doo-slate); }
#mnb-beheer .mn-tip-waarde { color: #3f5200; font-weight: 600; }
#mnb-beheer .mn-tips h2 { margin-top: 0; }

#mnb-beheer .mn-doelkaart h2, #mnb-beheer .mn-gewoonte h2, #mnb-beheer .mn-groei-start h2 { margin-top: 0; }
#mnb-beheer .mn-doel-regel { margin: 0 0 4px; font-size: 14px; }
#mnb-beheer .mn-doel-velden { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; margin: 12px 0 0; }
#mnb-beheer .mn-gewoonte-cijfer { font: 700 40px/1 'Sora', system-ui, sans-serif; color: var(--doo-navy-2); margin: 0 0 2px; }
#mnb-beheer .mn-gewoonte p { margin: 0 0 8px; font-size: 13.5px; }

#mnb-beheer .mn-doelen { list-style: none; margin: 14px 0 0; padding: 0; }
#mnb-beheer .mn-doelen li { display: flex; gap: 14px; padding: 14px 0; border-top: 1px solid #eef0f4; }
#mnb-beheer .mn-doelen li p { margin: 4px 0 8px; font-size: 13px; color: var(--doo-slate); line-height: 1.55; }
#mnb-beheer .mn-doelen .mn-vink { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--doo-lijn); display: flex; align-items: center; justify-content: center; font-weight: 700; color: #fff; }
#mnb-beheer .mn-doelen li.klaar .mn-vink { background: #37B26C; border-color: #37B26C; }
#mnb-beheer .mn-groei-voet { font-size: 12px; line-height: 1.6; margin: 4px 2px 0; }

@media (max-width: 760px) {
	#mnb-beheer .mn-scorekaart { gap: 16px; }
	#mnb-beheer .mn-score-ring, #mnb-beheer .mn-ring { width: 104px; height: 104px; }
	#mnb-beheer .mn-pijlers { grid-template-columns: 1fr; }
	#mnb-beheer .mn-pijler-cijfer { font-size: 26px; }
	#mnb-beheer .mn-doel-velden { flex-direction: column; align-items: stretch; }
}

/* ================================================================
   ROOSTER 3.36.0
   ================================================================ */
#mnb-beheer .mn-rooster-dag { margin: 18px 0 6px; font-size: 13px; font-weight: 700; color: var(--doo-slate); text-transform: capitalize; }
#mnb-beheer .mn-lesrij { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--doo-lijn); border-radius: 14px; margin: 0 0 8px; cursor: pointer; background: #fff; transition: border-color .15s, transform .15s; }
#mnb-beheer .mn-lesrij:hover { border-color: #c9d6e6; transform: translateY(-1px); }
#mnb-beheer .mn-lesrij.vol { background: #fbfcfe; }
#mnb-beheer .mn-lesrij.af { opacity: .55; }
#mnb-beheer .mn-les-tijd { flex: 0 0 52px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--doo-navy); }
#mnb-beheer .mn-les-naam { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#mnb-beheer .mn-les-plek { flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--doo-slate); white-space: nowrap; }
#mnb-beheer .mn-lesrij.vol .mn-les-plek { color: var(--doo-oranje-donker); }
#mnb-beheer .mn-serie-form { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eef0f4; }
#mnb-beheer .mn-serie-form h3 { margin: 0 0 10px; font-size: 14.5px; }
#mnb-beheer .mn-serie-velden { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
#mnb-beheer .mn-serie-velden .mn-field { margin: 0; min-width: 150px; }
#mnb-beheer .mn-les-af { color: var(--doo-oranje-donker); font-weight: 600; }
#mnb-beheer .mn-lijst { margin: 0; padding-left: 18px; font-size: 13.5px; color: var(--doo-slate); }
#mnb-beheer .mn-rooster-start p { font-size: 14px; line-height: 1.6; }
@media (max-width: 760px) {
	#mnb-beheer .mn-serie-velden { flex-direction: column; align-items: stretch; }
	#mnb-beheer .mn-serie-velden .mn-field { min-width: 0; }
	#mnb-beheer .mn-les-naam { white-space: normal; }
}

/* ---- Rittenkaarten 3.37.0 ---- */
#mnb-beheer .mn-k-saldo { font-weight: 700; font-variant-numeric: tabular-nums; }
#mnb-beheer #mn-k-detail .mn-card { border: 1px solid var(--doo-lijn); }

/* ---- Benchmark en Google-kaart 3.43.0 ---- */
#mnb-beheer .mn-google .mn-linkbox input, #mnb-beheer .mn-sitelink .mn-linkbox input { flex: 1; font-size: 13px; padding: 9px 12px; border: 1px solid var(--doo-lijn); border-radius: 10px; background: #F7FAFD; color: #162842; min-width: 0; }
#mnb-beheer .mn-sitelink .mn-kopieerlabel { display: block; font-size: 12px; font-weight: 600; letter-spacing: .02em; color: #677489; margin: 12px 0 4px; }
#mnb-beheer .mn-sitelink .mn-linkbox { margin: 0 0 4px; }
#mnb-beheer .mn-sitelink .mn-snippetveld { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }
#mnb-beheer .mn-google ol li { font-size: 14px; line-height: 1.55; }

/* ---- Sleepvak overstappen 3.44.0 ---- */
#mnb-beheer .mn-sleepvak { border: 2px dashed var(--doo-lijn); border-radius: 16px; padding: 26px 20px; text-align: center; cursor: pointer; transition: border-color .2s ease, background .2s ease; background: #FBFDFF; }
#mnb-beheer .mn-sleepvak:hover { border-color: #A9C2E0; }
#mnb-beheer .mn-sleepvak.is-over { border-color: #E8833A; background: #FFF6EF; }
#mnb-beheer .mn-sleepvak.is-bezig { opacity: .6; pointer-events: none; }
#mnb-beheer .mn-sleep-icoon { font-size: 26px; line-height: 1; color: #7A8DA6; }
#mnb-beheer .mn-sleep-kop { margin: 8px 0 0; font-weight: 700; font-size: 15px; }

/* ================================================================
   DASHBOARD 3.47.0
   Trendkaarten met groen/rood badges en twee grafieken in
   huisstijl. Alles eigen SVG, geen bibliotheken.
   ================================================================ */
#mnb-beheer .mn-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; }
#mnb-beheer .mn-kpi {
	background: #fff; border: 1px solid var(--doo-lijn); border-radius: 18px;
	padding: 16px 18px 15px; display: flex; flex-direction: column; gap: 7px;
	box-shadow: var(--doo-shadow-sm);
}
#mnb-beheer .mn-kpi-label { font-size: 13px; font-weight: 600; color: var(--doo-slate); }
#mnb-beheer .mn-kpi-rij { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#mnb-beheer .mn-kpi-num {
	font-family: Sora, "DM Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 27px; font-weight: 760; color: var(--doo-navy); letter-spacing: -.035em;
	font-variant-numeric: tabular-nums; white-space: nowrap;
}
#mnb-beheer .mn-delta {
	display: inline-flex; align-items: center; font-size: 12px; font-weight: 700;
	padding: 3px 8px; border-radius: 999px; white-space: nowrap; line-height: 1.25;
}
#mnb-beheer .mn-delta.goed { background: #E8F7EE; color: #217A46; }
#mnb-beheer .mn-delta.slecht { background: #FDECEA; color: #C0392B; }
#mnb-beheer .mn-delta.neutraal { background: #F1F4F9; color: var(--doo-slate); }
#mnb-beheer .mn-kpi-uitleg { margin: 8px 2px 16px; font-size: 12.5px; color: var(--doo-slate); }

#mnb-beheer .mn-dash-grafieken { display: grid; grid-template-columns: 3fr 2fr; gap: 16px; margin-bottom: 20px; }
#mnb-beheer .mn-grafiekkaart { margin-bottom: 0; min-width: 0; }
#mnb-beheer .mn-grafiekkop { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
#mnb-beheer .mn-grafiekkop h2 { margin: 0; }
#mnb-beheer .mn-grafieksub { font-size: 12.5px; }
#mnb-beheer .mn-minis { display: flex; gap: 26px; flex-wrap: wrap; margin: 8px 0 12px; }
#mnb-beheer .mn-mini { display: flex; flex-direction: column; gap: 2px; }
#mnb-beheer .mn-mini-num {
	font-family: Sora, "DM Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	font-size: 19px; font-weight: 760; color: var(--doo-navy); letter-spacing: -.02em;
	display: inline-flex; align-items: center; gap: 8px; font-variant-numeric: tabular-nums;
}
#mnb-beheer .mn-mini-label { font-size: 12px; font-weight: 600; color: var(--doo-slate); }
#mnb-beheer .mn-legenda { display: flex; gap: 16px; flex-wrap: wrap; margin: 8px 0 12px; }
#mnb-beheer .mn-legenda-item { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--doo-slate); }
#mnb-beheer .mn-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
#mnb-beheer .mn-dash-svg { width: 100%; height: auto; display: block; }
#mnb-beheer .mn-as-label { font-size: 10.5px; fill: #8a9aaf; font-family: "DM Sans", Inter, -apple-system, sans-serif; }

@media (max-width: 980px) {
	#mnb-beheer .mn-dash-grafieken { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
	#mnb-beheer .mn-kpis { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	#mnb-beheer .mn-kpi { padding: 13px 14px 12px; }
	#mnb-beheer .mn-kpi-num { font-size: 22px; }
	#mnb-beheer .mn-minis { gap: 18px; }
}

/* ---- Klantenkaart en klantenlijst met statistieken 3.48.0 ---- */
#mnb-beheer .mn-klantenkaart .mn-alle-link { font-size: 13px; font-weight: 700; color: var(--doo-blauw); text-decoration: none; white-space: nowrap; }
#mnb-beheer .mn-klantenkaart .mn-alle-link:hover { text-decoration: underline; }
#mnb-beheer .mn-noshow { color: #C0392B; font-weight: 700; font-variant-numeric: tabular-nums; }
#mnb-beheer .mn-klantnaam { display: block; }
#mnb-beheer .mn-klantmail { display: block; font-weight: 400; font-size: 12px; }
#mnb-beheer .mn-klantentabel td, #mnb-beheer .mn-klantenkaart td { font-variant-numeric: tabular-nums; }
#mnb-beheer .mn-table th.is-sort { color: var(--doo-blauw); }
#mnb-beheer .mn-table th.is-sort::after { content: " \2193"; }
#mnb-beheer .mn-filters .mn-sorteer { flex: 0 0 auto; width: auto; min-width: 210px; max-width: none; }
@media (max-width: 700px) {
	#mnb-beheer .mn-cards-mobiel td[data-label]::before {
		content: attr(data-label) ": ";
		color: var(--doo-slate);
		font-weight: 500;
		margin-right: 2px;
	}
	#mnb-beheer .mn-filters .mn-sorteer { max-width: none; flex: 1 1 100%; font-size: 16px; }
	#mnb-beheer .mn-klantmail { overflow-wrap: anywhere; }
}

/* ---- Tijd om terug te komen 3.49.0 ---- */
#mnb-beheer .mn-retourlijst { display: flex; flex-direction: column; }
#mnb-beheer .mn-retourrij {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 12px 2px; border-bottom: 1px solid #edf2f7; flex-wrap: wrap;
}
#mnb-beheer .mn-retourrij:last-child { border-bottom: 0; }
#mnb-beheer .mn-retourinfo { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 260px; }
#mnb-beheer .mn-retournaam { cursor: pointer; }
#mnb-beheer .mn-retournaam:hover { color: var(--doo-blauw); }
#mnb-beheer .mn-retouruitleg { font-size: 12.5px; }
#mnb-beheer .mn-retourrij .mn-btn { flex: 0 0 auto; white-space: nowrap; }
#mnb-beheer .mn-retourfout { flex: 1 1 100%; font-size: 12.5px; color: #C0392B; font-weight: 600; }
#mnb-beheer .mn-retourvoet { margin: 10px 0 0; font-size: 12px; }
@media (max-width: 700px) {
	#mnb-beheer .mn-retourrij { align-items: flex-start; }
	#mnb-beheer .mn-retourrij .mn-btn { flex: 1 1 100%; justify-content: center; }
}

/* ---- Uitgelichte groeitip vanuit de maandagmail 3.50.0 ---- */
#mnb-beheer .mn-tip-uitgelicht { animation: mnBrandGlow 2.4s ease; }

/* ---- Dalurenkaart 3.51.0 ---- */
#mnb-beheer .mn-dalkaart .mn-dal-lijst { margin: 6px 0 10px; padding-left: 20px; }
#mnb-beheer .mn-dalkaart .mn-dal-lijst li { font-size: 14px; line-height: 1.7; }
#mnb-beheer .mn-dalkaart p { font-size: 14px; line-height: 1.6; }

/* ---- Deelicoon in de installatiestappen 3.52.1 ---- */
#mn-install-steps .mn-share-ico { vertical-align: -3px; margin: 0 3px; color: #315FA5; }

/* ---- Introzin terugkeerkaart 3.53.1 ---- */
#mnb-beheer .mn-retourkaart .mn-retourintro { margin: 2px 0 12px; font-size: 13.5px; line-height: 1.55; color: #677489; max-width: 640px; }

/* ---------- proefbalk (route naar betaald abonnement) ---------- */
.mn-trial{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:0 22px 4px;padding:11px 16px;border-radius:14px;background:#F3FBEF;border:1px solid #CBE9C0;color:#2A5B1F;font-size:13.5px;line-height:1.45}
.mn-trial[hidden]{display:none}
.mn-trial-txt{font-weight:600;min-width:0}
.mn-trial-btn{flex:0 0 auto;border:0;border-radius:999px;padding:9px 18px;background:linear-gradient(125deg,#ff5722,#E95626);color:#fff;font-weight:700;font-size:13.5px;cursor:pointer;box-shadow:0 6px 16px rgba(255,87,34,.25)}
.mn-trial-btn:hover{filter:brightness(1.05)}
.mn-trial-btn:disabled{opacity:.7;cursor:default}
.mn-trial-urgent{background:#FDF6E7;border-color:#F0DDAE;color:#7A5A0E}
.mn-trial-over{background:#FDF1EE;border-color:#F4CFC4;color:#A83A1C}
@media (max-width:780px){.mn-trial{flex-direction:column;align-items:stretch;text-align:center;margin:0 12px 4px}.mn-trial-btn{width:100%}}

/* ------------------------------------------------ PIEKTARIEVEN (3.59.0) */
#mnb-beheer .mn-piekkaart .mn-piek-opties { margin: 4px 0 12px; }
#mnb-beheer .mn-piek-pct-veld { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
#mnb-beheer .mn-piek-pct-veld input { width: 90px; }
#mnb-beheer .mn-piek-lijst button.mn-piek-weg { margin-left: 10px; vertical-align: middle; }
#mnb-beheer .mn-piek-zelf { margin: 10px 0 4px; }
#mnb-beheer .mn-piek-zelf summary { cursor: pointer; font-weight: 600; color: #005899; }
#mnb-beheer .mn-piek-toevoeg { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
#mnb-beheer .mn-piek-toevoeg select, #mnb-beheer .mn-piek-toevoeg input[type="time"] { padding: 8px 10px; border: 1px solid #dbe3ee; border-radius: 10px; background: #fff; font-size: 16px; }
#mnb-beheer .mn-tip-uitgelicht.mn-piekkaart, #mnb-beheer #mn-piekkaart.mn-tip-uitgelicht { outline: 2px solid #ff5722; outline-offset: 3px; }

/* ------------------------------------------------ PRODUCTRONDLEIDING (3.61.0) */
#mn-tour-scrim { position: fixed; inset: 0; z-index: 2147483000; background: rgba(10, 20, 35, .58); }
#mn-tour-scrim.is-doorzichtig { background: transparent; }
#mn-tour-spot { position: fixed; z-index: 2147483001; border-radius: 14px; box-shadow: 0 0 0 9999px rgba(10, 20, 35, .58), 0 0 0 2px rgba(206, 255, 0, .9); pointer-events: none; transition: top .25s ease, left .25s ease, width .25s ease, height .25s ease; }
#mn-tour-tip { position: fixed; z-index: 2147483002; width: min(360px, calc(100vw - 24px)); background: linear-gradient(180deg, #ffffff, #f9fbfe); border: 1px solid rgba(208, 220, 235, .95); border-radius: 18px; box-shadow: 0 30px 64px -28px rgba(10, 20, 35, .72), 0 12px 26px -20px rgba(20, 35, 58, .42); padding: 15px 16px 14px; color: #14233a; }
#mn-tour-tip.is-midden { top: 50%; left: 50%; transform: translate(-50%, -50%); }
#mn-tour-tip .mn-tour-teller { display: inline-flex; align-items: center; gap: 7px; font-size: 10.5px; font-weight: 850; letter-spacing: .075em; text-transform: uppercase; color: #315fa5; }
#mn-tour-tip .mn-tour-teller::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: linear-gradient(135deg, var(--doo-orange-500, #ff5722), #ff8e64); box-shadow: 0 0 0 5px rgba(255,87,34,.11); }
#mn-tour-tip .mn-tour-context { display: inline-flex; align-items: center; margin-left: 8px; padding: 5px 9px; border-radius: 999px; font-size: 11px; font-weight: 750; color: #224266; background: #eef5fb; border: 1px solid #d7e5f1; vertical-align: middle; }
#mn-tour-tip h3 { margin: 9px 0 0; font-size: 19px; line-height: 1.2; letter-spacing: -.02em; }
#mn-tour-tip p { margin: 8px 0 0; font-size: 13.25px; line-height: 1.55; color: #566983; }
#mn-tour-tip .mn-tour-knoppen { margin-top: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#mn-tour-tip .mn-btn { appearance: none; border-radius: 11px; min-height: 38px; padding: 0 14px; font-size: 12.5px; font-weight: 780; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease, border-color .16s ease; }
#mn-tour-tip .mn-btn:hover { transform: translateY(-1px); }
#mn-tour-tip .mn-btn.ghost { background: rgba(255,255,255,.9); color: #315178; border: 1px solid #d8e3ee; box-shadow: 0 8px 18px -18px rgba(20,35,58,.32); }
#mn-tour-tip .mn-btn.ghost:hover { border-color: #b8cce0; background: #f7fbff; }
#mn-tour-tip .mn-btn.orange { background: linear-gradient(135deg, #ff6a35, #f04a16) !important; color: #fff !important; border: 1px solid rgba(190,58,17,.24) !important; min-width: 104px; box-shadow: 0 12px 24px -12px rgba(240,74,22,.72) !important; }
#mn-tour-tip .mn-btn.orange:hover { background: linear-gradient(135deg, #ff7546, #e84310) !important; box-shadow: 0 15px 28px -12px rgba(240,74,22,.82) !important; }
#mn-tour-next::after { content: '→'; margin-left: 8px; font-size: 14px; line-height: 1; opacity: .92; }

/* De actieve navregel zelf krijgt al een sterke fallback. De beacon hieronder
   ligt boven de donkere tourlaag, zodat de regel ook echt helder blijft. */
#mnb-beheer .mn-nav button.mn-tour-navfocus { background: linear-gradient(135deg, #ff6a35, #f04a16); border-color: rgba(255,255,255,.38); color: #fff; box-shadow: 0 0 0 3px rgba(206,255,0,.72), 0 0 24px rgba(206,255,0,.26), 0 18px 38px -20px rgba(0,0,0,.9); }
#mnb-beheer .mn-nav button.mn-tour-navfocus::before { content: ''; position: absolute; left: -7px; top: 7px; bottom: 7px; width: 4px; border-radius: 999px; background: var(--doo-lime-400, #ceff00); box-shadow: 0 0 18px rgba(206,255,0,.75); }
#mn-tour-nav-beacon { position: fixed; z-index: 2147483003; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 13px; box-sizing: border-box; border: 1px solid rgba(255,255,255,.42); border-radius: 13px; background: linear-gradient(135deg, #ff6a35, #f04a16); color: #fff; font-family: Sora, "DM Sans", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 13.5px; font-weight: 800; letter-spacing: -.01em; box-shadow: 0 0 0 3px rgba(206,255,0,.95), 0 0 0 8px rgba(206,255,0,.10), 0 0 30px rgba(206,255,0,.30), 0 18px 38px -16px rgba(0,0,0,.88); pointer-events: none; }
#mn-tour-nav-beacon .mn-tour-nav-now { flex: 0 0 auto; padding: 3px 7px; border-radius: 999px; background: #ceff00; color: #18314f; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; box-shadow: 0 4px 10px rgba(72,92,0,.18); }