@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');

/* =========================================================================
   DAR design tokens
   ========================================================================= */
:root {
	/* DVDar brand (De Viske ICT brochure) */
	--dar-accent: #D61F45;
	--dar-accent-strong: #B01539;
	--dar-accent-soft: #fce8ec;
	--dar-accent-ink: #9a1232;
	--dar-accent-glow: rgba(214, 31, 69, .35);
	--dar-orange: #E8452C;
	--dar-orange-2: #F7941D;
	--dar-orange-soft: #fff1e2;

	--dar-ink: #2E3A12;
	--dar-ink-2: #3B4A1C;
	--dar-ink-3: #4a5a24;
	--dar-olive: #7D8F2C;
	--dar-olive-light: #9aab45;
	--dar-ink-text: #d9dec6;
	--dar-ink-muted: #a9b38a;

	--dar-bg: #f6f6f2;
	--dar-surface: #ffffff;
	--dar-surface-2: #f4f5ee;
	--dar-border: #e2e4d8;
	--dar-border-strong: #cfd3c0;

	--dar-text: #2a2d22;
	--dar-text-2: #5b6145;
	--dar-text-3: #8a8f7a;

	--dar-success: #4f9a2a;
	--dar-success-soft: #ecf5e3;
	--dar-success-ink: #35681a;
	--dar-warning-soft: #fff1e2;
	--dar-warning-ink: #9a4f00;
	--dar-danger: #D61F45;
	--dar-danger-soft: #fce8ec;

	--dar-radius: 12px;
	--dar-radius-md: 10px;
	--dar-radius-sm: 8px;

	--dar-shadow-sm: 0 1px 2px rgba(46, 58, 18, .05), 0 1px 3px rgba(46, 58, 18, .06);
	--dar-shadow-md: 0 2px 4px rgba(46, 58, 18, .05), 0 8px 24px rgba(46, 58, 18, .09);
	--dar-shadow-lg: 0 12px 40px rgba(30, 38, 10, .22);

	--dar-stripes: repeating-linear-gradient(-55deg, var(--dar-olive) 0 9px, #ffffff 9px 15px);

	--dar-sidebar-width: 248px;
	--dar-font: 'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--dar-font-display: 'Barlow Semi Condensed', 'Barlow', system-ui, sans-serif;
	--dar-ease: cubic-bezier(.2, .8, .2, 1);

	--bs-body-font-family: var(--dar-font);
	--bs-primary: var(--dar-accent);
	--bs-primary-rgb: 214, 31, 69;
	--bs-link-color: var(--dar-accent);
	--bs-link-color-rgb: 214, 31, 69;
	--bs-link-hover-color: var(--dar-accent-strong);
}

/* =========================================================================
   Base
   ========================================================================= */
html, body {
	font-family: var(--dar-font);
	background: var(--dar-bg);
	color: var(--dar-text);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body, .dxbl-text, .dxbl-btn, .dxbl-grid, .dxbl-popup, .dxbl-toast, .dxbl-fl, .dxbl-text-edit, .dxbl-tabs {
	font-family: var(--dar-font) !important;
}

a, .btn-link {
	color: var(--dar-accent);
}

h1, h2, h3, h4, h5,
.dar-title, .dar-stat-value, .dar-brand-name, .dar-detail-name, .dar-card-title,
.dxbl-popup .dxbl-popup-header, .dxbl-grid .dxbl-grid-table > thead > tr > th {
	font-family: var(--dar-font-display) !important;
	letter-spacing: 0;
	font-weight: 600;
}

h1:focus {
	outline: none;
}

::selection {
	background: var(--dar-accent-soft);
	color: var(--dar-accent-ink);
}

.btn-primary {
	color: #fff;
	background-color: var(--dar-accent);
	border-color: var(--dar-accent);
	border-radius: var(--dar-radius-sm);
}

	.btn-primary:hover {
		background-color: var(--dar-accent-strong);
		border-color: var(--dar-accent-strong);
	}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
	box-shadow: 0 0 0 .2rem var(--dar-accent-soft), 0 0 0 .3rem var(--dar-accent-glow);
}

.form-control {
	border-radius: var(--dar-radius-sm);
	border-color: var(--dar-border-strong);
}

.valid.modified:not([type=checkbox]) {
	outline: 1px solid var(--dar-success);
}

.invalid {
	outline: 1px solid var(--dar-danger);
}

.validation-message {
	color: var(--dar-danger);
	font-size: .85rem;
	margin-top: .25rem;
}

.darker-border-checkbox.form-check-input {
	border-color: #929292;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
	color: var(--bs-secondary-color);
	text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
	text-align: start;
}

/* =========================================================================
   App shell
   ========================================================================= */
.dar-shell {
	display: flex;
	min-height: 100vh;
}

.dar-sidebar {
	position: sticky;
	top: 0;
	height: 100vh;
	width: var(--dar-sidebar-width);
	flex: 0 0 var(--dar-sidebar-width);
	background: linear-gradient(180deg, var(--dar-ink-2) 0%, var(--dar-ink) 55%, #232d0c 100%);
	color: #fff;
	z-index: 100;
	transition: transform .3s var(--dar-ease);
}

.dar-main {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
}

.dar-content {
	flex: 1;
	padding: 2rem 2.25rem 3rem;
}

.dar-mobilebar {
	display: none;
}

.dar-backdrop {
	display: none;
}

@media (max-width: 991.98px) {
	.dar-sidebar {
		position: fixed;
		left: 0;
		transform: translateX(-100%);
		box-shadow: var(--dar-shadow-lg);
	}

	.dar-shell.nav-open .dar-sidebar {
		transform: translateX(0);
	}

	.dar-shell.nav-open .dar-backdrop {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(18, 20, 26, .45);
		backdrop-filter: blur(2px);
		z-index: 99;
		animation: dar-fade .2s ease-out;
	}

	.dar-mobilebar {
		display: flex;
		align-items: center;
		gap: .75rem;
		position: sticky;
		top: 0;
		z-index: 50;
		height: 56px;
		padding: 0 1rem;
		background: rgba(244, 245, 248, .85);
		backdrop-filter: saturate(180%) blur(12px);
		border-bottom: 1px solid var(--dar-border);
	}

	.dar-content {
		padding: 1.25rem 1rem 2rem;
	}
}

.dar-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border-radius: var(--dar-radius-sm);
	border: 1px solid var(--dar-border);
	background: var(--dar-surface);
	color: var(--dar-text);
	font-size: 1.15rem;
	cursor: pointer;
	transition: background .15s, transform .15s;
}

	.dar-icon-btn:hover {
		background: var(--dar-surface-2);
	}

	.dar-icon-btn:active {
		transform: scale(.96);
	}

/* ---- Sidebar navigation ---- */
.dar-nav {
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 2.25rem .85rem 1rem;
	overflow-y: auto;
}

	/* Brochure stripe band */
	.dar-nav::before,
	.dar-stripes {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 14px;
		background: var(--dar-stripes);
		opacity: .9;
	}

.dar-tagline {
	color: var(--dar-ink-muted);
	font-size: .72rem;
	padding: .75rem .4rem 0;
	letter-spacing: .02em;
}

.dar-brand {
	display: flex;
	align-items: center;
	gap: .7rem;
	padding: 0 .4rem 1.5rem;
}

.dar-brand-mark {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 38px;
	height: 38px;
	border-radius: 10px;
	background: linear-gradient(135deg, var(--dar-orange-2) 0%, var(--dar-orange) 45%, var(--dar-accent) 100%);
	color: #fff;
	font-family: var(--dar-font-display);
	font-weight: 700;
	font-size: 1rem;
	box-shadow: 0 6px 18px rgba(232, 69, 44, .35), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.dar-brand-logo {
	max-height: 38px;
	max-width: 120px;
	border-radius: 8px;
	background: #fff;
	padding: 3px;
}

.dar-brand-name {
	font-weight: 700 !important;
	font-size: 1.45rem;
	line-height: 1;
}

	.dar-brand-name span {
		color: #ff6b86;
	}

.dar-brand-sub {
	color: var(--dar-ink-text);
	font-size: .72rem;
	line-height: 1.2;
}

.dar-nav-section {
	color: var(--dar-orange-2);
	font-family: var(--dar-font-display);
	font-size: .78rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .08em;
	padding: 1rem .75rem .45rem;
}

.dar-nav-link {
	position: relative;
	display: flex;
	align-items: center;
	gap: .75rem;
	padding: .62rem .8rem;
	margin-bottom: 2px;
	border-radius: var(--dar-radius-sm);
	color: var(--dar-ink-text);
	font-size: .9rem;
	font-weight: 500;
	text-decoration: none;
	transition: background .18s, color .18s, transform .18s var(--dar-ease);
}

	.dar-nav-link i {
		font-size: 1.05rem;
		width: 1.2rem;
		text-align: center;
		transition: transform .25s var(--dar-ease);
	}

	.dar-nav-link:hover {
		background: rgba(255, 255, 255, .08);
		color: #fff;
	}

		.dar-nav-link:hover i {
			transform: scale(1.12);
		}

	.dar-nav-link.active {
		background: var(--dar-accent);
		color: #fff;
		clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 50%, calc(100% - 12px) 100%, 0 100%);
		border-radius: var(--dar-radius-sm) 0 0 var(--dar-radius-sm);
		box-shadow: none;
	}

.dar-nav-footer {
	margin-top: auto;
	display: flex;
	align-items: center;
	gap: .65rem;
	padding: 1rem .4rem 0;
	border-top: 1px solid rgba(255, 255, 255, .1);
}

.dar-nav-user {
	flex: 1;
	min-width: 0;
	color: #e3e6ee;
	font-size: .85rem;
	font-weight: 500;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dar-nav-logout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 9px;
	border: 0;
	background: rgba(255, 255, 255, .06);
	color: var(--dar-ink-text);
	transition: background .15s, color .15s;
}

	.dar-nav-logout:hover {
		background: var(--dar-orange);
		color: #fff;
	}

/* =========================================================================
   Page building blocks
   ========================================================================= */
.dar-page {
	max-width: 1320px;
	margin: 0 auto;
	animation: dar-rise .45s var(--dar-ease) both;
}

.dar-page-header {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 1.5rem;
}

.dar-eyebrow {
	color: var(--dar-text-3);
	font-size: .8rem;
	font-weight: 500;
	margin-bottom: .2rem;
}

	.dar-eyebrow::first-letter,
	.dar-kiosk-clock span::first-letter {
		text-transform: uppercase;
	}

.dar-title {
	font-size: 2.1rem;
	font-weight: 600;
	margin: 0;
	line-height: 1.05;
	color: var(--dar-text);
}

.dar-title-accent {
	color: var(--dar-accent);
}

.dar-subtitle {
	color: var(--dar-text-2);
	font-size: .9rem;
	margin: .3rem 0 0;
}

.dar-actions {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
}

.dar-card {
	position: relative;
	background: var(--dar-surface);
	border: 1px solid var(--dar-border);
	border-radius: var(--dar-radius);
	box-shadow: var(--dar-shadow-sm);
	padding: .5rem;
	margin-bottom: 1.25rem;
	min-height: 120px;
}

.dar-card--padded {
	padding: 1.5rem;
}

.dar-card-title {
	font-size: 1rem;
	font-weight: 600;
	margin: 0 0 1rem;
}

/* ---- Stat tiles ---- */
.dar-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem;
	margin-bottom: 1.25rem;
}

.dar-stat {
	position: relative;
	overflow: hidden;
	background: var(--dar-surface);
	border: 1px solid var(--dar-border);
	border-radius: var(--dar-radius);
	box-shadow: var(--dar-shadow-sm);
	padding: 1.1rem 1.25rem;
	transition: transform .25s var(--dar-ease), box-shadow .25s var(--dar-ease);
	animation: dar-rise .5s var(--dar-ease) both;
}

	.dar-stat:nth-child(2) {
		animation-delay: .06s;
	}

	.dar-stat:nth-child(3) {
		animation-delay: .12s;
	}

	.dar-stat:hover {
		transform: translateY(-3px);
		box-shadow: var(--dar-shadow-md);
	}

.dar-stat-icon {
	position: absolute;
	top: 1rem;
	right: 1rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 10px;
	font-size: 1.1rem;
	background: var(--dar-surface-2);
	color: var(--dar-text-2);
}

.dar-stat-label {
	color: var(--dar-text-2);
	font-size: .8rem;
	font-weight: 500;
}

.dar-stat-value {
	font-size: 2rem;
	font-weight: 700;
	letter-spacing: -.03em;
	line-height: 1.15;
	margin-top: .15rem;
	font-variant-numeric: tabular-nums;
}

.dar-stat-hint {
	color: var(--dar-text-3);
	font-size: .76rem;
	margin-top: .35rem;
}

.dar-meter {
	height: 6px;
	border-radius: 6px;
	background: var(--dar-surface-2);
	margin-top: .7rem;
	overflow: hidden;
}

	.dar-meter > span {
		display: block;
		height: 100%;
		border-radius: inherit;
		transition: width .8s var(--dar-ease);
	}

.dar-stat { box-shadow: inset 0 4px 0 var(--dar-stat-color, var(--dar-olive)), var(--dar-shadow-sm); }
.dar-stat:hover { box-shadow: inset 0 4px 0 var(--dar-stat-color, var(--dar-olive)), var(--dar-shadow-md); }
.dar-stat--success { --dar-stat-color: var(--dar-success); }
.dar-stat--accent { --dar-stat-color: var(--dar-accent); }
.dar-stat--warning { --dar-stat-color: var(--dar-orange-2); }
.dar-stat--olive { --dar-stat-color: var(--dar-olive); }
.dar-stat--success .dar-stat-value { color: var(--dar-success-ink); }
.dar-stat--success .dar-stat-icon { background: var(--dar-success-soft); color: var(--dar-success); }
.dar-stat--success .dar-meter { background: var(--dar-success-soft); }
.dar-stat--success .dar-meter > span { background: linear-gradient(90deg, var(--dar-olive-light), var(--dar-success)); }

.dar-stat--accent .dar-stat-value { color: var(--dar-accent-ink); }
.dar-stat--accent .dar-stat-icon { background: var(--dar-accent-soft); color: var(--dar-accent); }
.dar-stat--accent .dar-meter { background: var(--dar-accent-soft); }
.dar-stat--accent .dar-meter > span { background: linear-gradient(90deg, var(--dar-orange), var(--dar-accent)); }

.dar-stat--warning .dar-stat-icon { background: var(--dar-orange-soft); color: var(--dar-orange); }
.dar-stat--olive .dar-stat-icon { background: #eef2dc; color: var(--dar-ink-3); }

@media (max-width: 575.98px) {
	.dar-stats {
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: .5rem;
	}

	.dar-stat {
		padding: .7rem .75rem;
	}

	.dar-stat-icon, .dar-stat-hint {
		display: none;
	}

	.dar-stat-label {
		font-size: .72rem;
	}

	.dar-stat-value {
		font-size: 1.5rem;
	}

	.dar-meter {
		margin-top: .4rem;
		height: 4px;
	}
}

/* ---- Dashboard ---- */
.dar-stats--5 {
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dar-stat-label {
	padding-right: 2.6rem;
}

@media (max-width: 1099.98px) {
	.dar-stats--5 {
		grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	}
}

.dar-dash-strip {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 1px;
	margin-bottom: 1.25rem;
	border-radius: var(--dar-radius);
	overflow: hidden;
	background: var(--dar-border);
	border: 1px solid var(--dar-border);
}

	.dar-dash-strip > div {
		display: flex;
		align-items: baseline;
		gap: .5rem;
		padding: .75rem 1.1rem;
		background: linear-gradient(180deg, #fff, var(--dar-surface-2));
	}

	.dar-dash-strip strong {
		font-family: var(--dar-font-display);
		font-size: 1.5rem;
		font-weight: 600;
		color: var(--dar-ink-2);
	}

	.dar-dash-strip span {
		color: var(--dar-text-2);
		font-size: .85rem;
	}

.dar-dash-grid {
	display: grid;
	gap: 1.25rem;
}

	.dar-dash-grid > .dar-card {
		margin-bottom: 1.25rem;
		min-width: 0;
	}

.dar-dash-grid--2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.dar-dash-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dar-dash-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 1199.98px) {
	.dar-dash-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 991.98px) {
	.dar-dash-grid--2-1, .dar-dash-grid--3, .dar-dash-grid--2 { grid-template-columns: minmax(0, 1fr); }
	.dar-dash-grid { gap: 0; }
}

.dar-card-title {
	font-size: 1.15rem;
}

.dar-empty {
	color: var(--dar-text-3);
	font-size: .9rem;
	margin: 1rem 0;
}

.dar-chart-tip {
	font-family: var(--dar-font);
	font-size: .85rem;
}

.dar-period .dxbl-btn {
	font-size: .82rem !important;
}

.dar-heatmap {
	display: grid;
	gap: 3px;
	align-items: center;
}

.dar-heatmap-hour, .dar-heatmap-day {
	font-size: .68rem;
	color: var(--dar-text-3);
	text-align: center;
}

.dar-heatmap-day {
	text-align: left;
	font-weight: 600;
}

.dar-heatmap-cell {
	height: 22px;
	border-radius: 4px;
	background: color-mix(in srgb, var(--dar-ink-2) calc(var(--i) * 100%), #eef2dc);
	transition: transform .15s;
}

	.dar-heatmap-cell:hover {
		transform: scale(1.25);
		outline: 2px solid var(--dar-accent);
		position: relative;
		z-index: 1;
	}

.dar-heatmap-legend {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: .5rem;
	margin-top: .75rem;
	font-size: .72rem;
	color: var(--dar-text-3);
}

	.dar-heatmap-legend i {
		width: 90px;
		height: 8px;
		border-radius: 4px;
		background: linear-gradient(90deg, #eef2dc, var(--dar-ink-2));
	}

.dar-rank {
	list-style: none;
	padding: 0;
	margin: 0;
	counter-reset: rank;
}

	.dar-rank li {
		display: grid;
		grid-template-columns: 1.6rem minmax(0, 1fr) auto;
		grid-template-rows: auto auto;
		column-gap: .5rem;
		padding: .45rem 0;
		border-bottom: 1px solid var(--dar-border);
		counter-increment: rank;
	}

		.dar-rank li::before {
			content: counter(rank);
			grid-row: span 2;
			align-self: center;
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 1.4rem;
			height: 1.4rem;
			border-radius: 50%;
			background: var(--dar-surface-2);
			font-size: .72rem;
			font-weight: 700;
			color: var(--dar-text-2);
		}

		.dar-rank li:first-child::before {
			background: var(--dar-orange-2);
			color: #fff;
		}

.dar-rank-name {
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dar-rank-value {
	font-family: var(--dar-font-display);
	font-weight: 600;
	color: var(--dar-accent);
}

.dar-rank-bar {
	grid-column: 2 / span 2;
	height: 4px;
	border-radius: 4px;
	background: var(--dar-surface-2);
	margin-top: .3rem;
	overflow: hidden;
}

	.dar-rank-bar > span {
		display: block;
		height: 100%;
		background: linear-gradient(90deg, var(--dar-orange-2), var(--dar-accent));
	}

.dar-feed, .dar-attention {
	list-style: none;
	padding: 0;
	margin: 0;
}

	.dar-feed li, .dar-attention li {
		display: flex;
		align-items: center;
		gap: .65rem;
		padding: .45rem 0;
		border-bottom: 1px solid var(--dar-border);
		font-size: .9rem;
	}

		.dar-feed li:last-child, .dar-attention li:last-child {
			border-bottom: 0;
		}

.dar-feed-dot {
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	border-radius: 50%;
}

	.dar-feed-dot.in {
		background: var(--dar-success);
		box-shadow: 0 0 0 3px var(--dar-success-soft);
	}

	.dar-feed-dot.out {
		background: var(--dar-accent);
		box-shadow: 0 0 0 3px var(--dar-accent-soft);
	}

.dar-feed-text {
	flex: 1;
	min-width: 0;
}

.dar-feed-time {
	color: var(--dar-text-3);
	font-size: .8rem;
	white-space: nowrap;
}

.dar-attention li span {
	flex: 1;
}

.dar-attention li strong {
	font-family: var(--dar-font-display);
	font-size: 1.1rem;
}

.dar-attention li.warn i,
.dar-attention li.warn strong {
	color: var(--dar-orange);
}

.dar-attention li.ok i,
.dar-attention li.ok strong {
	color: var(--dar-success);
}

/* ---- Pills, avatars, switch ---- */
.dar-pill {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .22rem .7rem;
	border-radius: 999px;
	font-size: .78rem;
	font-weight: 600;
	white-space: nowrap;
	background: var(--dar-surface-2);
	color: var(--dar-text-2);
}

	.dar-pill::before {
		content: "";
		width: 7px;
		height: 7px;
		border-radius: 50%;
		background: currentColor;
		opacity: .7;
	}

.dar-pill--success {
	background: var(--dar-success-soft);
	color: var(--dar-success-ink);
}

	.dar-pill--success::before {
		background: var(--dar-success);
		opacity: 1;
		box-shadow: 0 0 0 0 rgba(20, 164, 99, .5);
		animation: dar-pulse 2s infinite;
	}

.dar-pill--muted {
	background: #f1f2f5;
	color: var(--dar-text-2);
}

.dar-pill--danger {
	background: var(--dar-danger-soft);
	color: var(--dar-accent-ink);
}

.dar-tag {
	display: inline-flex;
	align-items: center;
	gap: .25rem;
	padding: .08rem .45rem;
	border-radius: 6px;
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .03em;
	background: var(--dar-warning-soft);
	color: var(--dar-warning-ink);
}

.dar-person {
	display: inline-flex;
	align-items: center;
	gap: .65rem;
	font-weight: 500;
}

.dar-avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .02em;
	background: #eceef3;
	color: #4a5160;
}

.dar-avatar--on {
	background: var(--dar-accent-soft);
	color: var(--dar-accent-ink);
}

.dar-avatar--lg {
	width: 56px;
	height: 56px;
	font-size: 1.1rem;
}

.dar-switch {
	position: relative;
	display: inline-block;
	flex: 0 0 auto;
	width: 44px;
	height: 26px;
	padding: 0;
	border: 0;
	border-radius: 999px;
	background: var(--dar-border-strong);
	cursor: pointer;
	transition: background .25s var(--dar-ease), box-shadow .25s;
}

	.dar-switch::after {
		content: "";
		position: absolute;
		top: 3px;
		left: 3px;
		width: 20px;
		height: 20px;
		border-radius: 50%;
		background: #fff;
		box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
		transition: transform .3s var(--dar-ease);
	}

	.dar-switch.on {
		background: var(--dar-success);
	}

		.dar-switch.on::after {
			transform: translateX(18px);
		}

	.dar-switch:hover {
		box-shadow: 0 0 0 4px rgba(18, 20, 26, .06);
	}

	.dar-switch.on:hover {
		box-shadow: 0 0 0 4px rgba(20, 164, 99, .15);
	}

	.dar-switch:focus-visible {
		outline: none;
		box-shadow: 0 0 0 3px var(--dar-accent-glow);
	}

.dar-status {
	display: flex;
	align-items: center;
	gap: .75rem;
}

/* ---- Detail popup content ---- */
.dar-detail-head {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding-bottom: 1.1rem;
	margin-bottom: 1rem;
	border-bottom: 1px solid var(--dar-border);
}

.dar-detail-name {
	font-size: 1.15rem;
	font-weight: 700;
	letter-spacing: -.02em;
}

.dar-detail-list {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .55rem 1.25rem;
	margin: 0 0 1.25rem;
	font-size: .9rem;
}

	.dar-detail-list dt {
		color: var(--dar-text-3);
		font-weight: 500;
	}

	.dar-detail-list dd {
		margin: 0;
		font-weight: 500;
	}

.dar-section-title {
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .08em;
	color: var(--dar-text-3);
	margin: .5rem 0 .75rem;
}

/* =========================================================================
   DevExpress refinements (Fluent theme)
   ========================================================================= */
.dxbl-btn {
	border-radius: var(--dar-radius-sm) !important;
	font-weight: 600 !important;
	transition: transform .15s var(--dar-ease), box-shadow .2s, background-color .2s !important;
}

	.dxbl-btn:active:not(:disabled) {
		transform: scale(.97);
	}

.dxbl-btn-primary:not(.dxbl-btn-outline):not(.dxbl-btn-text):not(:disabled):hover {
	box-shadow: 0 6px 16px -4px var(--dar-accent-glow);
}

.dxbl-btn-group {
	border-radius: var(--dar-radius-sm) !important;
	overflow: hidden;
}

	.dxbl-btn-group > .dxbl-btn {
		border-radius: 0 !important;
	}

/* Grid */
.dar-card .dxbl-grid {
	border: 0 !important;
	border-radius: calc(var(--dar-radius) - 6px);
	overflow: hidden;
}

.dxbl-grid .dxbl-grid-table > thead > tr > th,
.dxbl-grid .dxbl-grid-header-row > th {
	background: var(--dar-surface-2) !important;
	color: var(--dar-text-2) !important;
	font-size: .76rem !important;
	font-weight: 700 !important;
	text-transform: uppercase;
	letter-spacing: .06em;
	border-color: var(--dar-border) !important;
}

.dxbl-grid .dxbl-grid-filter-row > td,
.dxbl-grid .dxbl-grid-filter-row > th {
	background: var(--dar-surface) !important;
	border-color: var(--dar-border) !important;
}

.dxbl-grid .dxbl-grid-table > tbody > tr > td {
	border-color: #eef0f4 !important;
	vertical-align: middle;
	padding-top: .15rem !important;
	padding-bottom: .15rem !important;
	line-height: 1.35;
}

/* Compact controls inside grid rows */
.dxbl-grid .dar-avatar {
	width: 22px;
	height: 22px;
	font-size: .6rem;
}

.dxbl-grid .dar-person {
	gap: .5rem;
}

.dxbl-grid .dar-tag {
	padding: 0 .4rem;
	font-size: .66rem;
}

.dxbl-grid .dar-switch {
	width: 32px;
	height: 18px;
}

	.dxbl-grid .dar-switch::after {
		top: 2px;
		left: 2px;
		width: 14px;
		height: 14px;
	}

	.dxbl-grid .dar-switch.on::after {
		transform: translateX(14px);
	}

.dxbl-grid .dar-pill {
	padding: .05rem .55rem;
	font-size: .72rem;
}

.dxbl-grid .dar-row-actions.dxbl-btn-group > .dxbl-btn,
.dxbl-grid .dxbl-btn.dxbl-btn-text {
	width: 24px;
	height: 24px;
	min-height: 0;
	font-size: .85rem;
}

.dxbl-grid .dxbl-grid-table > tbody > tr {
	transition: background-color .15s;
}

.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-row-hover > td,
.dxbl-grid .dxbl-grid-table > tbody > tr:hover > td {
	background-color: #fbf6f7;
}

.dxbl-grid .dxbl-grid-pager-container,
.dxbl-grid .dxbl-grid-bottom-panel {
	border-color: var(--dar-border) !important;
	background: var(--dar-surface) !important;
}

.dxbl-text-edit, .dxbl-combobox, .dxbl-tagbox, .dxbl-spin-edit, .dxbl-date-edit {
	border-radius: var(--dar-radius-sm) !important;
}

/* Popups & message boxes */
.dxbl-popup, .dxbl-modal > .dxbl-modal-content, .dxbl-popup-content {
	border-radius: var(--dar-radius) !important;
}

.dxbl-popup {
	border: 0 !important;
	box-shadow: var(--dar-shadow-lg) !important;
	overflow: hidden;
	animation: dar-pop .28s var(--dar-ease) both;
}

	.dxbl-popup .dxbl-popup-header {
		border-bottom-color: var(--dar-border) !important;
		font-weight: 700;
		letter-spacing: -.01em;
	}

.dxbl-modal-back {
	background-color: rgba(18, 20, 26, .45) !important;
	backdrop-filter: blur(3px);
}

/* Grid toolbar (row actions above the grid, Gamp style) */
.dxbl-grid .dxbl-grid-toolbar-container {
	padding: .35rem .4rem !important;
	background: var(--dar-surface-2);
	border-bottom: 1px solid var(--dar-border) !important;
}

.dar-grid-toolbar.dxbl-toolbar {
	width: 100%;
	background: transparent !important;
}

	.dar-grid-toolbar .dxbl-btn {
		width: 34px;
		height: 32px;
		padding: 0 !important;
		justify-content: center;
		color: var(--dar-text-2) !important;
		font-size: 1.05rem;
	}

		.dar-grid-toolbar .dxbl-btn:hover:not(:disabled) {
			background: #fff !important;
			color: var(--dar-accent) !important;
			box-shadow: var(--dar-shadow-sm);
		}

		.dar-grid-toolbar .dxbl-btn:disabled {
			opacity: .35;
		}

/* Boolean cells shown as Ja/Nee */
.dar-bool {
	display: inline-block;
	min-width: 2.4rem;
	padding: 0 .45rem;
	border-radius: 6px;
	font-size: .76rem;
	font-weight: 600;
	text-align: center;
	background: #f1f2ec;
	color: var(--dar-text-3);
}

.dar-bool--yes {
	background: var(--dar-success-soft);
	color: var(--dar-success-ink);
}

/* No spin arrows in numeric filter-row editors */
.dxbl-grid .dxbl-grid-filter-row .dxbl-spin-btns {
	display: none !important;
}

/* Selected row */
.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td {
	background-color: var(--dar-accent-soft) !important;
	color: var(--dar-accent-ink);
}

	.dxbl-grid .dxbl-grid-table > tbody > tr.dxbl-grid-selected-row > td:first-child {
		box-shadow: inset 3px 0 0 var(--dar-accent);
	}

/* Row actions (ghost icon buttons in grids) */
.dar-row-actions.dxbl-btn-group {
	gap: 2px;
	overflow: visible;
}

	.dar-row-actions.dxbl-btn-group > .dxbl-btn {
		border-radius: 8px !important;
		width: 34px;
		height: 34px;
		padding: 0 !important;
		justify-content: center;
	}

/* Account card (users page) */
.dar-account {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.1rem;
	min-height: 0;
}

.dar-account-info {
	flex: 1;
	min-width: 180px;
}

	.dar-account-info .dar-pill {
		margin-top: .35rem;
	}

/* Settings */
.dar-settings {
	max-width: 1320px;
	margin: 0 auto;
}

.dar-card img {
	max-width: 100%;
	height: auto;
}

	.dar-card img[src*="DownloadLinkQRCode"] {
		width: 200px;
		padding: 10px;
		border: 1px solid var(--dar-border);
		border-radius: var(--dar-radius-md);
		background: #fff;
	}

.dar-card ul {
	padding-left: 0;
}

/* Tabs */
.dar-tabs {
	display: flex;
	margin-bottom: 1.5rem;
}

	.dar-tabs .dxbl-tabs {
		background: var(--dar-surface);
		border: 1px solid var(--dar-border);
		border-radius: 999px;
		padding: 4px;
		box-shadow: var(--dar-shadow-sm);
	}

/* Toasts */
.dxbl-toast {
	border-radius: var(--dar-radius-md) !important;
	box-shadow: var(--dar-shadow-lg) !important;
}

/* Form layout spacing inside cards */
.dar-card .dxbl-fl {
	padding: .25rem;
}

/* =========================================================================
   Login (DVDar brochure look)
   ========================================================================= */
.dar-login {
	position: fixed;
	inset: 0;
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	background: var(--dar-surface);
	overflow: auto;
	z-index: 10;
}

.dar-login-brand {
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	gap: 2rem;
	padding: 3.5rem 0 2.5rem;
	color: #fff;
	background: radial-gradient(90% 70% at 15% 85%, rgba(154, 171, 69, .45) 0%, rgba(154, 171, 69, 0) 60%), linear-gradient(160deg, #6b7d26 0%, var(--dar-ink-2) 45%, #1f280a 100%);
	isolation: isolate;
}

	.dar-login-brand > .dar-stripes {
		height: 22px;
		top: 0;
	}

.dar-blob {
	position: absolute;
	border-radius: 50%;
	filter: blur(80px);
	z-index: -1;
	animation: dar-float 18s ease-in-out infinite alternate;
}

.dar-blob--1 {
	width: 420px;
	height: 420px;
	background: var(--dar-olive-light);
	opacity: .35;
	bottom: -160px;
	left: -120px;
}

.dar-blob--2 {
	width: 360px;
	height: 360px;
	background: var(--dar-orange);
	opacity: .22;
	top: 25%;
	right: -140px;
	animation-duration: 22s;
	animation-delay: -8s;
}

.dar-login-top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1.5rem;
	padding: 0 0 0 3rem;
}

.dar-login-callout {
	max-width: 230px;
	padding: 1.1rem 1.25rem;
	margin-top: -1.4rem;
	background: linear-gradient(180deg, var(--dar-orange) 0%, var(--dar-accent) 100%);
	font-family: var(--dar-font-display);
	font-weight: 600;
	font-size: 1.05rem;
	line-height: 1.25;
	box-shadow: var(--dar-shadow-lg);
	animation: dar-rise .6s var(--dar-ease) .15s both;
}

.dar-login-chevron {
	position: relative;
	margin-right: 3rem;
	padding: 1.75rem 4.5rem 1.75rem 3rem;
	background: var(--dar-accent);
	clip-path: polygon(0 0, calc(100% - 3rem) 0, 100% 50%, calc(100% - 3rem) 100%, 0 100%);
	box-shadow: var(--dar-shadow-lg);
	animation: dar-slide .7s var(--dar-ease) both;
}

.dar-login-headline {
	font-family: var(--dar-font-display);
	font-size: clamp(1.9rem, 3.3vw, 3rem);
	font-weight: 600;
	line-height: 1.02;
	margin: 0 0 .75rem;
}

	.dar-login-headline span {
		display: block;
		color: #fff;
		font-weight: 500;
	}

	.dar-login-headline strong {
		color: #ffe1e7;
	}

.dar-login-lead {
	color: rgba(255, 255, 255, .92);
	max-width: 44ch;
	font-size: 1.02rem;
	margin: 0;
}

.dar-login-features {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.25rem 2rem;
	padding: 0 3rem;
}

.dar-login-feature {
	display: flex;
	gap: .85rem;
	animation: dar-rise .6s var(--dar-ease) both;
}

	.dar-login-feature:nth-child(2) { animation-delay: .08s; }
	.dar-login-feature:nth-child(3) { animation-delay: .16s; }
	.dar-login-feature:nth-child(4) { animation-delay: .24s; }

	.dar-login-feature i {
		flex: 0 0 auto;
		font-size: 1.9rem;
		line-height: 1;
		color: #fff;
		opacity: .9;
	}

	.dar-login-feature h3 {
		color: var(--dar-orange-2);
		font-size: 1.1rem;
		margin: 0 0 .15rem;
	}

	.dar-login-feature p {
		margin: 0;
		font-size: .85rem;
		color: rgba(255, 255, 255, .78);
		line-height: 1.35;
	}

.dar-login-panel {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 2.5rem 1.5rem;
}

.dar-login-form {
	width: 100%;
	max-width: 380px;
	animation: dar-rise .5s var(--dar-ease) both;
}

	.dar-login-form h1 {
		font-size: 2.2rem;
		margin: 0 0 .25rem;
	}

		.dar-login-form h1 span {
			color: var(--dar-accent);
		}

	.dar-login-form .dar-subtitle {
		margin-bottom: 1.75rem;
	}

.dar-login-submit.dxbl-btn {
	width: 100%;
	height: 46px;
	background: var(--dar-accent) !important;
	border-color: var(--dar-accent) !important;
	color: #fff !important;
	font-family: var(--dar-font-display);
	font-size: 1.1rem;
}

	.dar-login-submit.dxbl-btn:hover {
		background: var(--dar-accent-strong) !important;
		border-color: var(--dar-accent-strong) !important;
		box-shadow: 0 10px 24px -6px var(--dar-accent-glow);
	}

.dar-login-kiosk {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: .45rem;
	width: 100%;
	margin-top: .75rem;
	padding: .65rem;
	border: 1px dashed var(--dar-border-strong);
	border-radius: var(--dar-radius-sm);
	background: transparent;
	color: var(--dar-text-2);
	font-weight: 600;
	font-size: .9rem;
	transition: border-color .15s, color .15s, background .15s;
}

	.dar-login-kiosk:hover {
		border-color: var(--dar-olive);
		color: var(--dar-ink-2);
		background: #f2f5e4;
	}

.dar-login-footer {
	margin-top: 2.5rem;
	text-align: center;
	color: var(--dar-text-3);
	font-size: .8rem;
}

	.dar-login-footer strong {
		font-family: var(--dar-font-display);
		color: var(--dar-accent);
		letter-spacing: .18em;
		font-weight: 500;
	}

.dar-alert {
	display: flex;
	gap: .6rem;
	align-items: flex-start;
	padding: .75rem .9rem;
	border-radius: var(--dar-radius-sm);
	background: var(--dar-danger-soft);
	color: var(--dar-accent-ink);
	font-size: .9rem;
	margin-bottom: 1rem;
	animation: dar-shake .4s;
}

@keyframes dar-slide {
	from { opacity: 0; transform: translateX(-40px); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 991.98px) {
	.dar-login {
		grid-template-columns: 1fr;
		grid-template-rows: auto 1fr;
	}

	.dar-login-brand {
		padding: 2.5rem 0 1.5rem;
	}

	.dar-login-callout, .dar-login-features {
		display: none;
	}

	.dar-login-top {
		padding-left: 1.5rem;
	}

	.dar-login-chevron {
		padding: 1.25rem 3.5rem 1.25rem 1.5rem;
		margin-right: 1.5rem;
	}
}

/* =========================================================================
   Kiosk (tile colours come from the customer's settings)
   ========================================================================= */
.dar-kiosk {
	--kiosk-header: 72px;
	--kiosk-gap: 8px;
	min-height: 100vh;
	background: #eef0e8;
	color: var(--dar-text);
	font-family: var(--dar-font-display);
}

.dar-kiosk-header {
	position: relative;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	height: var(--kiosk-header);
	padding: 0 1.5rem;
	background: #fff;
	border-bottom: 4px solid var(--kiosk-primary, var(--dar-accent));
	box-shadow: 0 2px 12px rgba(30, 38, 10, .08);
}

.dar-kiosk-clock {
	display: flex;
	align-items: baseline;
	gap: .9rem;
}

	.dar-kiosk-clock strong {
		font-size: 2.4rem;
		font-weight: 700;
		line-height: 1;
		color: var(--dar-text);
		font-variant-numeric: tabular-nums;
	}

	.dar-kiosk-clock span {
		display: inline-block;
		font-size: 1.05rem;
		font-weight: 500;
		color: var(--dar-text-2);
	}

.dar-kiosk-summary {
	display: flex;
	gap: .6rem;
	margin-left: auto;
}

.dar-kiosk-count {
	display: inline-flex;
	align-items: center;
	gap: .4rem;
	padding: .35rem .8rem;
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 600;
}

	.dar-kiosk-count.in {
		background: var(--dar-success-soft);
		color: var(--dar-success-ink);
	}

	.dar-kiosk-count.out {
		background: #f1f2ec;
		color: var(--dar-text-2);
	}

.dar-kiosk-tools {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.dar-kiosk-refresh {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	font-size: .9rem;
	color: var(--dar-text-3);
	white-space: nowrap;
}

	.dar-kiosk-refresh::before {
		content: "";
		width: 8px;
		height: 8px;
		border-radius: 50%;
		background: var(--dar-success);
		box-shadow: 0 0 0 0 rgba(79, 154, 42, .6);
		animation: dar-pulse 2s infinite;
	}

.dar-kiosk-settings.btn {
	border: 1px solid var(--dar-border-strong);
	border-radius: var(--dar-radius-sm);
	color: var(--dar-text-2);
	background: #fff;
	font-family: var(--dar-font);
}

	.dar-kiosk-settings.btn:hover {
		border-color: var(--dar-text-3);
		color: var(--dar-text);
	}

.dar-kiosk .dropdown-menu {
	border: 0;
	border-radius: var(--dar-radius);
	box-shadow: var(--dar-shadow-lg);
	min-width: 260px;
	font-family: var(--dar-font);
}

.dar-kiosk-grid {
	display: grid;
	grid-auto-flow: column;
	gap: var(--kiosk-gap);
	padding: var(--kiosk-gap);
	height: calc(100vh - var(--kiosk-header));
	overflow: auto;
}

.dar-kiosk-tile {
	display: flex;
	align-items: center;
	gap: .45em;
	min-width: 0;
	min-height: 0;
	padding: 0 .7em;
	border-radius: 10px;
	box-shadow: 0 1px 2px rgba(30, 38, 10, .12);
	transition: background-color .6s var(--dar-ease), color .6s var(--dar-ease);
}

.dar-kiosk-name {
	flex: 1;
	min-width: 0;
	font-weight: 600;
	line-height: 1.18;
	padding: .1em 0;
	/* Long names wrap to a second line instead of being cut off */
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	overflow: hidden;
	overflow-wrap: anywhere;
}

.dar-kiosk-status {
	flex: 0 0 auto;
	font-size: .75em;
	opacity: .75;
}

.dar-kiosk-tile--out .dar-kiosk-name {
	font-weight: 500;
}

.dar-kiosk-tile--function {
	box-shadow: none;
	border-radius: 10px 10px 2px 2px;
}

	.dar-kiosk-tile--function .dar-kiosk-name {
		font-weight: 700;
		font-size: .8em;
		text-transform: uppercase;
		letter-spacing: .08em;
	}

.dar-kiosk-bhv {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: .2em;
	padding: .12em .45em;
	border-radius: 6px;
	background: #00915a;
	color: #fff;
	font-size: .55em;
	font-weight: 700;
	letter-spacing: .04em;
	box-shadow: 0 0 0 2px rgba(255, 255, 255, .85);
}

	.dar-kiosk-bhv i {
		font-size: 1.1em;
		-webkit-text-stroke: 1px currentColor;
	}

@media (max-width: 767.98px) {
	.dar-kiosk-summary, .dar-kiosk-refresh {
		display: none;
	}
}

/* =========================================================================
   Loading / errors
   ========================================================================= */
.dar-boot {
	position: fixed;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	background: var(--dar-ink);
	color: var(--dar-ink-text);
	font-size: .85rem;
	letter-spacing: .04em;
}

	.dar-boot .dar-brand-mark {
		width: 56px;
		height: 56px;
		font-size: 1.5rem;
		border-radius: 16px;
		animation: dar-breathe 1.6s ease-in-out infinite;
	}

.dar-error-alert {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	margin: 1rem;
	padding: 1rem 1.25rem;
	border-radius: var(--dar-radius-md);
	background: var(--dar-warning-soft);
	color: var(--dar-warning-ink);
	border: 1px solid #f6dfb5;
}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
	border-radius: var(--dar-radius-md);
}

	.blazor-error-boundary::after {
		content: "Er is een fout opgetreden."
	}

#blazor-error-ui {
	display: none;
	position: fixed;
	left: 50%;
	bottom: 1.25rem;
	transform: translateX(-50%);
	z-index: 1000;
	align-items: center;
	gap: 1rem;
	padding: .8rem 1rem .8rem 1.25rem;
	border-radius: 999px;
	background: var(--dar-ink);
	color: #fff;
	font-size: .9rem;
	box-shadow: var(--dar-shadow-lg);
}

	#blazor-error-ui .reload {
		color: #ffb3c4;
		font-weight: 600;
	}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		opacity: .7;
	}

/* =========================================================================
   Motion
   ========================================================================= */
@keyframes dar-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes dar-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes dar-pop {
	from { opacity: 0; transform: scale(.96) translateY(6px); }
	to { opacity: 1; transform: none; }
}

@keyframes dar-pulse {
	0% { box-shadow: 0 0 0 0 rgba(20, 164, 99, .45); }
	70% { box-shadow: 0 0 0 7px rgba(20, 164, 99, 0); }
	100% { box-shadow: 0 0 0 0 rgba(20, 164, 99, 0); }
}

@keyframes dar-float {
	0% { transform: translate(0, 0) scale(1); }
	50% { transform: translate(60px, 40px) scale(1.1); }
	100% { transform: translate(-30px, 80px) scale(.95); }
}

@keyframes dar-breathe {
	0%, 100% { transform: scale(1); box-shadow: 0 6px 18px var(--dar-accent-glow); }
	50% { transform: scale(1.08); box-shadow: 0 10px 34px var(--dar-accent-glow); }
}

@keyframes dar-shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-4px); }
	75% { transform: translateX(4px); }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
}

/* portal.dvdar.nl: melding op een volledige pagina (bijv. kiosk niet gekoppeld) */
.dar-notice-page {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
	background: var(--dar-bg);
}

.dar-notice {
	position: relative;
	width: 100%;
	max-width: 30rem;
	padding: 2.5rem 2rem 2rem;
	background: var(--dar-surface);
	border: 1px solid var(--dar-border);
	border-radius: var(--dar-radius);
	box-shadow: var(--dar-shadow-md);
	text-align: center;
	color: var(--dar-text-2);
	overflow: hidden;
}

.dar-notice::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 6px;
	background: var(--dar-stripes);
}

.dar-notice-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 1rem;
	border-radius: 50%;
	background: var(--dar-accent-soft);
	color: var(--dar-accent);
	font-size: 1.6rem;
}

.dar-notice h1 {
	font-family: var(--dar-font-display);
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--dar-text);
	margin-bottom: .75rem;
}

/* portal.dvdar.nl: kiosk-link in Instellingen > Kiosk */
.dar-kiosk-links {
	margin: 1.25rem 0 1.5rem;
	padding: 1rem 1.25rem;
	background: var(--dar-surface-2);
	border: 1px solid var(--dar-border);
	border-radius: var(--dar-radius-md);
}

.dar-kiosk-links h3 {
	display: flex;
	align-items: center;
	gap: .4rem;
	font-family: var(--dar-font-display);
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--dar-text);
	margin: 0 0 .35rem;
}

.dar-kiosk-links p {
	color: var(--dar-text-2);
	margin-bottom: .75rem;
}

.dar-kiosk-links-empty {
	font-style: italic;
	margin-bottom: 0 !important;
}

.dar-kiosk-link {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .5rem;
	margin-top: .5rem;
}

.dar-kiosk-link-name {
	flex-basis: 100%;
	font-weight: 600;
	color: var(--dar-text);
}

.dar-kiosk-link .form-control {
	flex: 1 1 18rem;
	min-width: 0;
	font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
	font-size: .85rem;
	background: var(--dar-surface);
}