/* ============================================================================
   Liquid glass design language for the kiosk dashboard.
   Source of truth: __plan/liquid-glass-modal-mockup.html (approved 2026-07-11).
   Sync 2026-07-18 — generic additions received back from the Reserveringssysteem
   copy (sync agreement: whoever changes last, copies): floating shell (topbar +
   sidenav as detached rounded panels), ambience presets (data-glass-glow +
   .glass-glowswatch), nav-tabs/nav-pills skins, .glass-seg button support +
   small-viewport overflow guard, dropdown-item active state, @media print
   section. NOTE: the floating shell changes this dashboard's look too —
   visually check the kiosk after deploying this version.
   Tokens switch on UBold v8's resolved theme attribute: html[data-bs-theme].
   Performance rule: backdrop-filter only on large, few surfaces (modal, popup,
   toast); tiles/pills/chips get a translucent background only.
   ============================================================================
   REUSE IN OTHER PROJECTS
   This file is the complete skin; the UBold template itself is stock and
   untouched. To reuse the look in another UBold v8 meriad-client:
   1. Copy this file plus ../fonts/manrope/ (the @font-face path below is
      relative, so keep the css/ and fonts/ folders as siblings).
   2. Load it in the master template AFTER the UBold css (vendors.min.css and
      app.min.css), with a cachebuster querystring.
   3. Hard requirements: UBold v8 + Bootstrap 5 (html[data-bs-theme] theming,
      --theme-pagination-* variables). The sections for DataTables 2.x,
      Select2, SweetAlert2, iziToast, Tippy and Ladda only kick in when those
      libraries are present — without them they are inert.
   4. Optional companions (not required for the skin itself): custom.js in the
      same assets tree (compact DataTables info line + hide single-page
      pagination) and the glass-blur customizer chain (layout.js, Layout.php,
      Ajax\Layout, sidebar.right.tpl, templates-dataset default 'glass-blur').
   5. A few selectors serve this project's markup only (bin cards, provisioning
      QR) and are harmless elsewhere. Extend per project by loading an extra
      stylesheet AFTER this one and overriding tokens or components there, so
      this shared file never needs to fork.
   ========================================================================= */

/* Manrope (OFL, latin subset): visual stand-in for Avenir Next on systems
   without it, so Windows renders the same geometric look as macOS. */
@font-face {
	font-family: "Manrope";
	src: url("../fonts/manrope/manrope-variable.woff2") format("woff2");
	font-weight: 200 800;
	font-style: normal;
	font-display: swap;
}

/* ===== Tokens ===== */
:root {
	--glass-ground: #eef1f6;
	--glass-ground-2: #dfe5ee;
	--glass-ink: #16202c;
	--glass-ink-dim: rgba(22, 32, 44, 0.72);
	--glass-ink-faint: rgba(22, 32, 44, 0.56);
	--glass-bg: rgba(255, 255, 255, 0.52);
	--glass-bg-strong: rgba(255, 255, 255, 0.66);
	--glass-bg-solid: rgba(255, 255, 255, 0.94);
	--glass-tile: rgba(255, 255, 255, 0.44);
	--glass-tile-hover: rgba(255, 255, 255, 0.62);
	--glass-edge: rgba(255, 255, 255, 0.65);
	--glass-edge-soft: rgba(20, 30, 45, 0.10);
	--glass-specular: rgba(255, 255, 255, 0.9);
	--glass-accent: #0e9f6e;
	--glass-accent-soft: rgba(14, 159, 110, 0.14);
	--glass-warn: #b45309;
	--glass-warn-soft: rgba(217, 119, 6, 0.13);
	--glass-danger: #c03636;
	--glass-danger-soft: rgba(192, 54, 54, 0.11);
	--glass-live: #0e9f6e;
	--glass-status: #0e9f6e; /* "healthy" state color, deliberately separate from the brand accent */
	--glass-status-soft: rgba(14, 159, 110, 0.14);
	--glass-shadow: 0 30px 90px rgba(25, 40, 60, 0.35), 0 4px 18px rgba(25, 40, 60, 0.18);
	--glass-field: rgba(255, 255, 255, 0.55);
	--glass-card: rgba(255, 255, 255, 0.72);
	--glass-card-shadow: 0 14px 44px rgba(25, 40, 60, 0.12);
	--glass-dashrow: rgba(255, 255, 255, 0.5);
	--glass-info: #4f5ed6;
	--glass-info-soft: rgba(79, 94, 214, 0.12);
	--glass-accent-rgb: 14, 159, 110;
	--glass-on-accent: #ffffff;
	/* Manrope first: every OS renders the dashboard in exactly the same face
	   (Avenir Next stays as fallback should the webfont ever fail to load). */
	--glass-font: "Manrope", "Avenir Next", "Avenir", -apple-system, BlinkMacSystemFont, system-ui, "Segoe UI", sans-serif;
	--glass-mono: "SF Mono", ui-monospace, Menlo, monospace;
	--glass-h-md: 36px; /* one control height for card headers and the topbar */
	--glass-h-sm: 31px; /* one control height for toolbars and table rows */
	--glass-blur-lg: 30px; /* large glass surfaces: modal, popups, login card */
	--glass-blur-sm: 18px; /* shell surfaces: topbar, sidenav, toasts */
	/* Ambient glow blobs behind the glass (see the ambience presets below) */
	--glass-glow-1: rgba(45, 212, 191, 0.4);
	--glass-glow-2: rgba(100, 120, 240, 0.38);
	--glass-glow-3: rgba(233, 161, 59, 0.26);
}
html[data-bs-theme="dark"] {
	--glass-ground: #0a0f16;
	--glass-ground-2: #101826;
	--glass-ink: #eef3f9;
	--glass-ink-dim: rgba(238, 243, 249, 0.72);
	--glass-ink-faint: rgba(238, 243, 249, 0.52);
	--glass-bg: rgba(22, 32, 46, 0.42);
	--glass-bg-strong: rgba(24, 34, 50, 0.6);
	--glass-bg-solid: rgba(16, 24, 36, 0.96);
	--glass-tile: rgba(255, 255, 255, 0.055);
	--glass-tile-hover: rgba(255, 255, 255, 0.1);
	--glass-edge: rgba(255, 255, 255, 0.14);
	--glass-edge-soft: rgba(255, 255, 255, 0.07);
	--glass-specular: rgba(255, 255, 255, 0.28);
	--glass-accent: #3ddc97;
	--glass-accent-soft: rgba(61, 220, 151, 0.13);
	--glass-warn: #f5b84f;
	--glass-warn-soft: rgba(245, 184, 79, 0.12);
	--glass-danger: #ff7a7a;
	--glass-danger-soft: rgba(255, 122, 122, 0.1);
	--glass-live: #3ddc97;
	--glass-status: #3ddc97;
	--glass-status-soft: rgba(61, 220, 151, 0.13);
	--glass-shadow: 0 34px 100px rgba(0, 0, 0, 0.6), 0 4px 20px rgba(0, 0, 0, 0.4);
	--glass-field: rgba(10, 16, 24, 0.45);
	--glass-card: rgba(22, 32, 46, 0.66);
	--glass-card-shadow: 0 14px 44px rgba(0, 0, 0, 0.35);
	--glass-dashrow: rgba(255, 255, 255, 0.04);
	--glass-info: #9aa6f5;
	--glass-info-soft: rgba(154, 166, 245, 0.14);
	--glass-accent-rgb: 61, 220, 151;
	--glass-on-accent: #0a1a12;
}

/* Adjustable glass effect (customizer setting, persisted per user via the
   Layout component). "uit" also makes the surfaces near-opaque, otherwise
   they would be unreadably transparent without their blur. */
html[data-glass-blur="uit"] {
	--glass-blur-lg: 0px;
	--glass-blur-sm: 0px;
	--glass-bg: var(--glass-bg-solid);
	--glass-bg-strong: var(--glass-bg-solid);
}
html[data-glass-blur="subtiel"] {
	--glass-blur-lg: 14px;
	--glass-blur-sm: 8px;
}
html[data-glass-blur="sterk"] {
	--glass-blur-lg: 48px;
	--glass-blur-sm: 28px;
}

/* ===== Ambience presets (customizer setting "Sfeer") =====
   Curated glow-trio + matching ground tint per preset, tuned separately for
   light and dark. Persisted per user via the Layout chain, exactly like the
   glass blur. "smaragd" is the default: the :root tokens above. */
html[data-glass-glow="oceaan"] {
	--glass-glow-1: rgba(56, 189, 248, 0.42);
	--glass-glow-2: rgba(99, 102, 241, 0.34);
	--glass-glow-3: rgba(45, 212, 191, 0.24);
	--glass-ground: #ecf2f8;
	--glass-ground-2: #dbe6f2;
}
html[data-bs-theme="dark"][data-glass-glow="oceaan"] {
	--glass-glow-1: rgba(56, 189, 248, 0.36);
	--glass-glow-2: rgba(99, 102, 241, 0.34);
	--glass-glow-3: rgba(45, 212, 191, 0.2);
	--glass-ground: #08101c;
	--glass-ground-2: #0d1a2e;
}
html[data-glass-glow="zonsondergang"] {
	--glass-glow-1: rgba(251, 146, 60, 0.38);
	--glass-glow-2: rgba(244, 114, 182, 0.3);
	--glass-glow-3: rgba(250, 204, 21, 0.24);
	--glass-ground: #f6f0ea;
	--glass-ground-2: #efe2d6;
}
html[data-bs-theme="dark"][data-glass-glow="zonsondergang"] {
	--glass-glow-1: rgba(251, 146, 60, 0.32);
	--glass-glow-2: rgba(244, 114, 182, 0.26);
	--glass-glow-3: rgba(250, 204, 21, 0.18);
	--glass-ground: #150e08;
	--glass-ground-2: #231409;
}
html[data-glass-glow="lavendel"] {
	--glass-glow-1: rgba(167, 139, 250, 0.4);
	--glass-glow-2: rgba(96, 165, 250, 0.3);
	--glass-glow-3: rgba(236, 72, 153, 0.22);
	--glass-ground: #f1eff8;
	--glass-ground-2: #e4dff2;
}
html[data-bs-theme="dark"][data-glass-glow="lavendel"] {
	--glass-glow-1: rgba(167, 139, 250, 0.34);
	--glass-glow-2: rgba(96, 165, 250, 0.28);
	--glass-glow-3: rgba(236, 72, 153, 0.18);
	--glass-ground: #0e0a1a;
	--glass-ground-2: #170f2b;
}
html[data-glass-glow="bos"] {
	--glass-glow-1: rgba(52, 211, 153, 0.4);
	--glass-glow-2: rgba(163, 230, 53, 0.26);
	--glass-glow-3: rgba(20, 184, 166, 0.28);
	--glass-ground: #edf4ef;
	--glass-ground-2: #dceadf;
}
html[data-bs-theme="dark"][data-glass-glow="bos"] {
	--glass-glow-1: rgba(52, 211, 153, 0.32);
	--glass-glow-2: rgba(163, 230, 53, 0.2);
	--glass-glow-3: rgba(20, 184, 166, 0.24);
	--glass-ground: #08120d;
	--glass-ground-2: #0d1f16;
}
html[data-glass-glow="neutraal"] {
	--glass-glow-1: rgba(148, 163, 184, 0.28);
	--glass-glow-2: rgba(203, 213, 225, 0.3);
	--glass-glow-3: rgba(148, 163, 184, 0.18);
	--glass-ground: #eff1f4;
	--glass-ground-2: #e2e6ec;
}
html[data-bs-theme="dark"][data-glass-glow="neutraal"] {
	--glass-glow-1: rgba(148, 163, 184, 0.16);
	--glass-glow-2: rgba(100, 116, 139, 0.2);
	--glass-glow-3: rgba(148, 163, 184, 0.1);
	--glass-ground: #0b0e13;
	--glass-ground-2: #12161d;
}

/* Round swatches for the ambience radios in the layout customizer */
.glass-glowswatch {
	display: inline-block;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	border: 2px solid transparent;
	cursor: pointer;
	box-shadow: inset 0 1px 0 var(--glass-specular), 0 1px 4px rgba(0, 0, 0, 0.15);
}
.btn-check:checked + .glass-glowswatch { border-color: var(--glass-ink); }

/* ===== Foundation: page ground + colored glow behind the glass =====
   The glow lives on a fixed pseudo-element at z-index -1: the body background
   propagates to the canvas (html has none), so the blobs paint above it but
   below all content. Gradients fade out themselves, so no filter: blur() is
   needed (much cheaper than the mockup's three blurred divs). */
body {
	background: linear-gradient(160deg, var(--glass-ground) 0%, var(--glass-ground-2) 100%);
}
body::before {
	content: "";
	position: fixed;
	inset: -10%;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(circle 26vw at 13vw 8vh, var(--glass-glow-1), transparent 70%),
		radial-gradient(circle 24vw at 87vw 34vh, var(--glass-glow-2), transparent 70%),
		radial-gradient(circle 22vw at 44vw 96vh, var(--glass-glow-3), transparent 70%);
}
@media (prefers-reduced-motion: no-preference) {
	body::before {
		animation: glass-drift 32s ease-in-out infinite alternate;
	}
	@keyframes glass-drift {
		to { transform: translate3d(3vw, 2vh, 0) scale(1.06); }
	}
}

/* ===== Reusable surfaces ===== */
.glass-tile {
	border-radius: 16px;
	background: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
	color: var(--glass-ink);
	min-width: 0;
}

.glass-chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--glass-ink-dim);
	padding: 6px 12px;
	border-radius: 999px;
	background: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
	white-space: nowrap;
}
.glass-chip svg { width: 13px; height: 13px; flex: none; }
.glass-chip strong { color: var(--glass-ink); font-variant-numeric: tabular-nums; font-weight: 700; }
.glass-chip .glass-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--glass-accent);
	box-shadow: 0 0 10px var(--glass-accent);
	flex: none;
}
.glass-chip.ok { color: var(--glass-status); background: var(--glass-status-soft); }
.glass-chip.warn { color: var(--glass-warn); }
.glass-chip.bad { color: var(--glass-danger); }
.glass-chip.bad .glass-dot { background: var(--glass-danger); box-shadow: 0 0 10px var(--glass-danger); }
.glass-chip.ok .glass-dot { background: var(--glass-status); box-shadow: 0 0 8px var(--glass-status); }
@media (prefers-reduced-motion: no-preference) {
	.glass-chip.ok .glass-dot { animation: glass-chippulse 1.6s ease-in-out infinite; }
	@keyframes glass-chippulse { 50% { opacity: 0.35; } }
}
.glass-chip.sm { font-size: 11px; padding: 3px 10px; gap: 6px; }
.glass-chip.sm svg { width: 12px; height: 12px; }
.glass-chip.sm .glass-dot { width: 7px; height: 7px; }
.glass-chipstack { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 4px; }

/* Compact battery bar for table rows (the modal keeps the wide variant) */
.glass-batt.compact b { font-size: 12.5px; font-weight: 650; min-width: 38px; font-variant-numeric: tabular-nums; }
.glass-batt.compact b.low { color: var(--glass-danger); }
.glass-batt.compact .glass-batt-track { width: 44px; flex: none; }
.glass-batt.compact svg { width: 11px; height: 11px; color: var(--glass-status); flex: none; }

.glass-pill,
.glass-btn {
	font-family: var(--glass-font);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	color: var(--glass-ink);
	padding: 9px 15px;
	border-radius: 999px;
	background: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
	display: inline-flex;
	align-items: center;
	gap: 7px;
	white-space: nowrap;
	transition: transform 0.12s ease, background 0.12s ease;
}
.glass-pill:hover,
.glass-btn:hover { background: var(--glass-tile-hover); color: var(--glass-ink); transform: translateY(-1px); }
.glass-pill svg,
.glass-btn svg { width: 14px; height: 14px; flex: none; }
.glass-pill.warn { color: var(--glass-warn); background: var(--glass-warn-soft); }
.glass-pill.warn:hover { color: var(--glass-warn); background: var(--glass-warn-soft); }
.glass-pill.danger,
.glass-btn.stop { color: var(--glass-danger); background: var(--glass-danger-soft); }
.glass-pill.danger:hover,
.glass-btn.stop:hover { color: var(--glass-danger); background: var(--glass-danger-soft); }
.glass-btn.primary {
	color: var(--glass-accent);
	background: var(--glass-accent-soft);
	border-color: var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.glass-btn.primary:hover { color: var(--glass-accent); background: color-mix(in srgb, var(--glass-accent) 22%, transparent); }
.glass-pill.sm { font-size: 12px; padding: 6px 12px; }

.glass-pill:focus-visible,
.glass-btn:focus-visible,
.glass-keybtn:focus-visible,
.glass-field:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 2px; }

/* ===== Fields ===== */
.glass-field {
	width: 100%;
	font-family: var(--glass-font);
	font-size: 13px;
	color: var(--glass-ink);
	padding: 9px 12px;
	border-radius: 12px;
	background: var(--glass-field);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
	appearance: auto;
}
.glass-field::placeholder { color: var(--glass-ink-faint); }
.glass-field:focus { outline: 2px solid var(--glass-accent); outline-offset: 1px; border-color: transparent; }
.glass-field.is-invalid { border-color: var(--glass-danger); }
select.glass-field option { background: var(--glass-ground); color: var(--glass-ink); }

.glass-f { width: 100%; min-width: 0; }
.glass-f label {
	display: block;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.05em;
	color: var(--glass-ink-faint);
	margin-bottom: 5px;
}

/* Field/form error feedback (meriad form.js toggles these) */
.modal-content [data-meriad-entity="form-feedback"].invalid-feedback,
.modal-content [data-meriad-entity="form-field-feedback"].invalid-feedback {
	color: var(--glass-danger);
	padding-left: 0;
	margin-bottom: 0;
}

/* ===== Accordion sections (details/summary) ===== */
.glass-sections { display: flex; flex-direction: column; gap: 9px; }
.glass-details {
	border-radius: 16px;
	overflow: hidden;
	background: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.glass-details summary {
	list-style: none;
	cursor: pointer;
	padding: 13px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 13.5px;
	font-weight: 650;
	color: var(--glass-ink);
}
.glass-details summary::-webkit-details-marker { display: none; }
.glass-details summary .glass-sub { font-weight: 500; font-size: 12px; color: var(--glass-ink-faint); }
.glass-details summary .glass-chev {
	margin-left: auto;
	transition: transform 0.18s ease;
	color: var(--glass-ink-faint);
	font-size: 12px;
}
.glass-details[open] summary .glass-chev { transform: rotate(90deg); }
.glass-dbody { padding: 2px 16px 16px; display: grid; gap: 10px; justify-items: start; }
.glass-dbody form { display: grid; gap: 10px; justify-items: start; width: 100%; }
.glass-dgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; }
@media (max-width: 560px) { .glass-dgrid { grid-template-columns: 1fr; } }

/* ===== Labels and notes ===== */
.glass-grouplabel {
	margin: 0 0 9px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--glass-ink-faint);
}
.glass-note {
	border-radius: 14px;
	padding: 11px 14px;
	font-size: 12.5px;
	background: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
	color: var(--glass-ink-dim);
}
.glass-note.warn { background: var(--glass-warn-soft); color: var(--glass-warn); }
.glass-note.danger { background: var(--glass-danger-soft); color: var(--glass-danger); }
.glass-note code {
	font-family: var(--glass-mono);
	font-size: 11.5px;
	color: inherit;
	background: rgba(0, 0, 0, 0.06);
	padding: 1px 5px;
	border-radius: 6px;
}
.glass-hint { font-size: 12px; color: var(--glass-ink-faint); margin: 0; }
.glass-hint.center { text-align: center; }

/* Pending-command note: icon + text + cancel pill on one line */
.glass-pending { display: flex; align-items: center; gap: 9px; }
.glass-pending svg { width: 15px; height: 15px; flex: none; }
.glass-pending .glass-pill { margin-left: auto; flex: none; }

/* Control block inside the viewer (hidden until a watch session is active) */
.glass-controlbox { display: grid; gap: 8px; }

.glass-vitals-note { margin-top: 10px; }

/* ===== Tablet modal layout ===== */
.glass-mhead { display: flex; align-items: flex-start; gap: 18px; padding: 0 44px 16px 0; }
.glass-eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--glass-ink-faint);
	margin: 0 0 6px;
}
.glass-title {
	margin: 0 0 12px;
	font-size: 27px;
	font-weight: 700;
	letter-spacing: -0.02em;
	color: var(--glass-ink);
	text-wrap: balance;
}
.glass-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.glass-mbody { display: grid; grid-template-columns: 396px 1fr; gap: 22px; align-items: start; }
@media (max-width: 1199.98px) { .glass-mbody { grid-template-columns: 1fr; } }

/* Viewer (left column) */
.glass-viewer {
	border-radius: 22px;
	padding: 16px;
	background: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-width: 0;
}
.glass-vtop { display: none; align-items: center; gap: 10px; }
.glass-viewer.glass-live .glass-vtop { display: flex; }
.glass-livechip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	color: var(--glass-live);
	padding: 5px 12px;
	border-radius: 999px;
	background: var(--glass-status-soft);
	border: 1px solid var(--glass-edge-soft);
}
.glass-livechip .glass-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--glass-live);
	flex: none;
}
@media (prefers-reduced-motion: no-preference) {
	.glass-livechip .glass-dot { animation: glass-pulse 1.6s ease-in-out infinite; }
	@keyframes glass-pulse {
		50% { opacity: 0.35; box-shadow: 0 0 0 5px rgba(61, 220, 151, 0.12); }
	}
}

.glass-screenwrap {
	position: relative;
	border-radius: 16px;
	overflow: hidden;
	border: 1px solid var(--glass-edge-soft);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
	display: flex;
	justify-content: center;
	background: rgba(0, 0, 0, 0.18);
}
.glass-screenwrap img { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; }
.glass-viewer.glass-live .glass-screenwrap { cursor: crosshair; }
.glass-tapring {
	position: absolute;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	border: 2.5px solid var(--glass-live);
	transform: translate(-50%, -50%) scale(0.4);
	opacity: 0;
	pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
	.glass-tapring.show { animation: glass-tapring 0.55s ease-out forwards; }
	@keyframes glass-tapring {
		40% { opacity: 0.9; }
		100% { transform: translate(-50%, -50%) scale(1.25); opacity: 0; }
	}
}
/* Ghost placeholder, visible only while the frame itself is hidden (d-none) */
.glass-screenempty { display: none; }
.glass-screenwrap.d-none + .glass-screenempty {
	display: grid;
	place-items: center;
	gap: 8px;
	min-height: 200px;
	border-radius: 16px;
	border: 1px dashed var(--glass-edge-soft);
	color: var(--glass-ink-faint);
	font-size: 12.5px;
	text-align: center;
	padding: 18px;
}
.glass-screenempty svg { width: 26px; height: 26px; display: block; margin: 0 auto 4px; }

.glass-typebar { display: flex; gap: 7px; }
.glass-typebar input {
	flex: 1;
	min-width: 0;
	font-family: var(--glass-font);
	font-size: 13.5px;
	color: var(--glass-ink);
	padding: 10px 14px;
	border-radius: 999px;
	background: var(--glass-field);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}
.glass-typebar input::placeholder { color: var(--glass-ink-faint); }
.glass-typebar input:focus { outline: 2px solid var(--glass-accent); outline-offset: 1px; }
.glass-keybtn {
	flex: none;
	width: 38px;
	height: 38px;
	border-radius: 50%;
	cursor: pointer;
	font-size: 14px;
	color: var(--glass-ink-dim);
	display: grid;
	place-items: center;
	background: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
	padding: 0;
}
.glass-keybtn:hover { background: var(--glass-tile-hover); color: var(--glass-ink); }
.glass-keybtn svg { width: 15px; height: 15px; }

.glass-vactions { display: flex; gap: 9px; }
.glass-vactions .glass-btn { flex: 1; justify-content: center; }
.glass-sentline {
	margin: 0;
	font-size: 12px;
	color: var(--glass-ink-faint);
	text-align: center;
	font-variant-numeric: tabular-nums;
}
.glass-sentline.danger { color: var(--glass-danger); }

/* Right column */
.glass-mright { display: flex; flex-direction: column; gap: 18px; min-width: 0; }

.glass-vitals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
@media (max-width: 1399.98px) { .glass-vitals { grid-template-columns: repeat(2, 1fr); } }
.glass-vitals .glass-tile { padding: 13px 15px; min-height: 76px; }
.glass-k {
	margin: 0 0 5px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--glass-ink-faint);
}
.glass-v {
	margin: 0;
	font-size: 14.5px;
	font-weight: 650;
	font-variant-numeric: tabular-nums;
	color: var(--glass-ink);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.glass-v.mono { font-family: var(--glass-mono); font-size: 12.5px; font-weight: 500; }
.glass-v .ok { color: var(--glass-status); }
.glass-v.bad { color: var(--glass-danger); }
.glass-s {
	margin: 3px 0 0;
	font-size: 11.5px;
	color: var(--glass-ink-dim);
	font-variant-numeric: tabular-nums;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.glass-s.wrap { white-space: normal; overflow: visible; }
.glass-batt { display: flex; align-items: center; gap: 8px; }
.glass-batt-track {
	flex: 1;
	height: 6px;
	border-radius: 999px;
	background: var(--glass-edge-soft);
	overflow: hidden;
}
.glass-batt-fill {
	height: 100%;
	border-radius: 999px;
	background: linear-gradient(90deg, #14b880, #3ddc97);
}
.glass-batt-fill.low { background: linear-gradient(90deg, #e05252, #ff7a7a); }
.glass-s.glass-charging { display: flex; align-items: center; gap: 5px; }
.glass-s.glass-charging svg { width: 12px; height: 12px; color: var(--glass-status); flex: none; }

.glass-pillrow { display: flex; flex-wrap: wrap; gap: 8px; }

/* ===== Bootstrap/meriad modal container in glass =====
   Applies to every modal (user modals included); the tablet modal additionally
   hides the standard header title, which turns the header into a floating
   close button (see the :has() rule below). */
/* UBold animates the dialog with zoomInModal (fill: forwards) from a base of
   scale(0.85)/opacity 0; the lingering transform makes the dialog a backdrop
   root and blinds the backdrop-filter on .modal-content. Replace the zoom with
   a plain opacity fade so the glass keeps its blur. */
.modal .modal-dialog,
.modal.fade .modal-dialog,
.modal.show .modal-dialog {
	animation: none;
	transform: none;
	transition: opacity 0.15s ease;
	opacity: 0;
}
.modal.show .modal-dialog { opacity: 1; }
.modal-content {
	position: relative;
	overflow: hidden;
	font-family: var(--glass-font);
	color: var(--glass-ink);
	border-radius: 30px;
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.9);
	backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.9);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-specular), inset 0 -1px 0 var(--glass-edge-soft);
}
/* Soft light fall top-left: the "liquid" of the glass */
.modal-content::before {
	content: "";
	position: absolute;
	inset: -40% -20% auto -20%;
	height: 80%;
	background: radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.16), transparent 60%);
	pointer-events: none;
}
.modal-header {
	position: relative;
	background: transparent;
	border-bottom: 0;
	padding: 22px 28px 0;
}
.modal-header .modal-title { color: var(--glass-ink); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; }
.modal-header .btn-close {
	width: 38px;
	height: 38px;
	padding: 0;
	margin: -4px -6px -4px auto;
	border-radius: 50%;
	background-color: var(--glass-tile);
	background-size: 13px;
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
	opacity: 1;
}
.modal-header .btn-close:hover { background-color: var(--glass-tile-hover); }
/* No title (tablet modal): the header collapses to a floating close button */
.modal-header:has(.modal-title:empty) {
	position: absolute;
	top: 18px;
	right: 20px;
	z-index: 6;
	padding: 0;
	margin: 0;
}
.modal-header:has(.modal-title:empty) .btn-close { margin: 0; }
.modal-body { position: relative; padding: 24px 28px; }
.modal-header:not(:has(.modal-title:empty)) + .modal-body { padding-top: 16px; }
.modal-footer {
	background: transparent;
	border-top: 0;
	padding: 0 28px 24px;
	gap: 9px;
}
.modal-footer > * { margin: 0; }
.modal-footer .btn {
	font-family: var(--glass-font);
	font-size: 12.5px;
	font-weight: 650;
	min-height: var(--glass-h-sm);
	padding: 0 16px;
	border-radius: 999px;
	border: 1px solid var(--glass-edge-soft);
	display: inline-flex;
	align-items: center;
	gap: 7px;
}
.modal-footer .btn-success,
.modal-footer .btn-primary {
	color: var(--glass-accent);
	background: var(--glass-accent-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.modal-footer .btn-success:hover,
.modal-footer .btn-primary:hover { color: var(--glass-accent); background: color-mix(in srgb, var(--glass-accent) 22%, transparent); }
.modal-footer .btn-danger,
.modal-footer .btn-secondary {
	color: var(--glass-danger);
	background: var(--glass-danger-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.modal-backdrop { background-color: #0b1420; }
.modal-backdrop.show { opacity: 0.38; }
html[data-bs-theme="dark"] .modal-backdrop.show { opacity: 0.55; }

/* ===== SweetAlert2 (confirms/success) in glass ===== */
.swal2-popup {
	font-family: var(--glass-font);
	color: var(--glass-ink);
	border-radius: 30px;
	background: var(--glass-bg-strong);
	-webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.9);
	backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.9);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-specular);
}
.swal2-title { color: var(--glass-ink); font-size: 21px; font-weight: 700; letter-spacing: -0.01em; }
.swal2-html-container { color: var(--glass-ink-dim); font-size: 14px; }
.swal2-actions .btn {
	font-family: var(--glass-font);
	font-size: 12.5px;
	font-weight: 650;
	min-height: var(--glass-h-sm);
	padding: 0 18px;
	border-radius: 999px;
	border: 1px solid var(--glass-edge-soft);
	display: inline-flex;
	align-items: center;
}
.swal2-actions .btn-success,
.swal2-actions .btn-primary {
	color: var(--glass-accent);
	background: var(--glass-accent-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.swal2-actions .btn-success:hover,
.swal2-actions .btn-primary:hover { color: var(--glass-accent); background: color-mix(in srgb, var(--glass-accent) 22%, transparent); }
.swal2-actions .btn-danger {
	color: var(--glass-danger);
	background: var(--glass-danger-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.swal2-container.swal2-backdrop-show { background: rgba(11, 20, 32, 0.38); }

/* ===== iziToast in glass ===== */
.iziToast {
	font-family: var(--glass-font);
	border-radius: 999px;
	background: var(--glass-bg-strong) !important;
	-webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.7);
	backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.7);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-specular);
}
.iziToast::after { display: none; }
.iziToast > .iziToast-body .iziToast-title { color: var(--glass-ink); }
.iziToast > .iziToast-body .iziToast-message { color: var(--glass-ink-dim); }

/* ============================================================================
   Fase B — de rest van het dashboard in dezelfde ontwerptaal
   ========================================================================= */

/* ===== Base text, fonts and links via the Bootstrap variables ===== */
body {
	--bs-body-color: var(--glass-ink);
	--bs-secondary-color: var(--glass-ink-dim);
	--bs-tertiary-color: var(--glass-ink-faint);
	--bs-heading-color: var(--glass-ink);
	--bs-border-color: var(--glass-edge-soft);
	--bs-body-font-family: var(--glass-font);
	--bs-link-color: var(--glass-accent);
	--bs-link-hover-color: var(--glass-accent);
	--bs-link-color-rgb: var(--glass-accent-rgb);
	--bs-link-hover-color-rgb: var(--glass-accent-rgb);
	font-family: var(--glass-font);
	color: var(--glass-ink);
}
code { font-family: var(--glass-mono); font-size: 0.845em; color: var(--glass-info); }
hr { border-color: var(--glass-edge-soft); opacity: 1; }

/* ===== Shell: topbar =====
   The shell floats: topbar and sidenav are detached glass panels with the
   same radius as the cards, inset from the window edges so the ambient glow
   runs behind them. UBold positions the topbar with margin-inline-start per
   sidenav size; the overrides below add the 12px inset + 12px gap on top. */
.app-topbar {
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
	backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
	top: 12px;
	border-radius: 18px;
	margin: 12px 12px 0;
	margin-inline-start: calc(var(--theme-sidenav-width) + 24px);
}
html[data-sidenav-size="condensed"] .app-topbar,
html[data-sidenav-size="on-hover"] .app-topbar { margin-inline-start: calc(var(--theme-sidenav-width-sm) + 24px); }
html[data-sidenav-size="compact"] .app-topbar { margin-inline-start: calc(var(--theme-sidenav-width-md) + 24px); }
html[data-sidenav-size="offcanvas"] .app-topbar { margin-inline-start: 12px; }
/* Content keeps a 12px visual gap to the floating sidenav (its own
   0.75rem padding provides the rest) */
.content-page { margin-inline-start: calc(var(--theme-sidenav-width) + 12px); }
html[data-sidenav-size="condensed"] .content-page,
html[data-sidenav-size="on-hover"] .content-page { margin-inline-start: calc(var(--theme-sidenav-width-sm) + 12px); }
html[data-sidenav-size="compact"] .content-page { margin-inline-start: calc(var(--theme-sidenav-width-md) + 12px); }
html[data-sidenav-size="offcanvas"] .content-page { margin-inline-start: 0; }
/* Selector matches UBold's own (0,4,0) rule, which pins the links to the full
   topbar height with border: none — without this the circles become tall,
   clipped ovals. */
.app-topbar .topbar-menu .topbar-item .topbar-link {
	color: var(--glass-ink-dim);
	width: var(--glass-h-md);
	height: var(--glass-h-md);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background-color: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.app-topbar .topbar-menu .topbar-item .topbar-link:hover { color: var(--glass-ink); background-color: var(--glass-tile-hover); }
/* Items wrapped in a .dropdown need to center the now fixed-size link themselves */
.app-topbar .topbar-menu .topbar-item .dropdown { display: flex; align-items: center; height: 100%; }
/* The user block is a pill, not a circle */
.app-topbar .topbar-menu .topbar-item.nav-user .topbar-link {
	width: auto;
	border-radius: 999px;
	padding: 0 12px 0 5px;
	gap: 8px;
}
.app-topbar .nav-user h5 { color: var(--glass-ink); font-size: 13px; font-weight: 650; }

/* Initials avatar (replaces the grey no-user placeholder image) */
.glass-avatar {
	width: 28px;
	height: 28px;
	border-radius: 50%;
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	font-weight: 700;
	color: var(--glass-accent);
	background: var(--glass-accent-soft);
	border: 1px solid var(--glass-edge-soft);
}
.glass-avatar.lg { width: 44px; height: 44px; font-size: 17px; margin-bottom: 8px; }

/* Theme switch as a segmented pill (labels wrap the UBold theme radios).
   Plain buttons toggling an .active class work as segments too. */
.glass-seg {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	height: var(--glass-h-md);
	padding: 3px;
	border-radius: 999px;
	background: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.glass-seg label,
.glass-seg button {
	height: 100%;
	padding: 0 11px;
	border-radius: 999px;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	font-weight: 650;
	color: var(--glass-ink-faint);
	margin: 0;
}
.glass-seg button {
	border: none;
	background: transparent;
	font-family: inherit;
}
.glass-seg label svg,
.glass-seg button svg { width: 14px; height: 14px; }
.glass-seg label:hover,
.glass-seg button:hover { color: var(--glass-ink-dim); }
.glass-seg label:has(input:checked),
.glass-seg label.active,
.glass-seg button.active {
	color: var(--glass-ink);
	background: var(--glass-tile-hover);
	box-shadow: inset 0 1px 0 var(--glass-specular), 0 1px 4px rgba(0, 0, 0, 0.08);
}
.glass-seg input { display: none; }
/* Narrow viewports: a segment never wraps, so let it scroll inside its pill */
@media (max-width: 767.98px) {
	.glass-seg { max-width: 100%; overflow-x: auto; }
}
/* The labels carry .dropdown-item so UBold's theme-JS binds to them; undo the
   dropdown styling that class brings along. */
.glass-seg label.dropdown-item {
	width: auto;
	display: inline-flex;
	background-color: transparent;
	border-radius: 999px;
	white-space: nowrap;
}
.glass-seg label.dropdown-item:hover { background-color: transparent; }
.glass-seg label.dropdown-item:has(input:checked),
.glass-seg label.dropdown-item.active { background-color: var(--glass-tile-hover); color: var(--glass-ink); }
.sidenav-toggle-button.btn-default {
	color: var(--glass-ink-dim);
	background: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.sidenav-toggle-button.btn-default:hover { color: var(--glass-ink); background: var(--glass-tile-hover); }

/* ===== Tabs (Bootstrap nav-tabs, incl. UBold's .nav-bordered) ===== */
.nav-tabs { border-bottom: 1px solid var(--glass-edge-soft); }
.nav-tabs .nav-link {
	font-family: var(--glass-font);
	font-weight: 650;
	color: var(--glass-ink-faint);
	background: transparent;
}
.nav-tabs .nav-link:hover { color: var(--glass-ink-dim); border-color: transparent; }
.nav-tabs .nav-link.active {
	color: var(--glass-accent);
	background: transparent;
	border-color: transparent;
}
.nav-tabs.nav-bordered .nav-link.active { border-bottom: 2px solid var(--glass-accent); }
.nav-pills .nav-link {
	font-family: var(--glass-font);
	font-weight: 650;
	color: var(--glass-ink-dim);
	border-radius: 999px;
}
.nav-pills .nav-link:hover { color: var(--glass-ink); }
.nav-pills .nav-link.active { background: var(--glass-accent); color: var(--glass-on-accent); }

/* ===== Shell: sidenav ===== */
.sidenav-menu {
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
	backdrop-filter: blur(var(--glass-blur-sm)) saturate(1.6);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
	top: 12px;
	bottom: 12px;
	inset-inline-start: 12px;
	border-radius: 18px;
	overflow: hidden;
}
/* Mobile drawer stays a classic full-height offcanvas: with an inset the
   slide-out animation would leave an invisible click-blocking sliver */
html[data-sidenav-size="offcanvas"] .sidenav-menu {
	top: 0;
	bottom: 0;
	inset-inline-start: 0;
	border-radius: 0 18px 18px 0;
}
.sidenav-menu .side-nav-link {
	color: var(--glass-ink-dim);
	border-radius: 12px;
	margin: 2px 10px;
	transition: background 0.12s ease, color 0.12s ease;
}
.sidenav-menu .side-nav-link:hover,
.sidenav-menu .side-nav-link:focus { color: var(--glass-ink); background: var(--glass-tile-hover); }
/* !important: UBold themes the active state per data-menu-color with rules of
   varying specificity; the glass accent must win from all of them. */
.sidenav-menu .side-nav-item.active .side-nav-link,
.sidenav-menu .side-nav-link.active { color: var(--glass-accent) !important; background: var(--glass-accent-soft) !important; }
.sidenav-menu .sidenav-user {
	background: var(--glass-tile) !important; /* wins over the inline pattern background */
	border-bottom: 1px solid var(--glass-edge-soft);
}
.sidenav-menu .sidenav-user-name { color: var(--glass-ink); }
.sidenav-menu .sidenav-user .fs-12 { color: var(--glass-ink-dim); }
#sidenav-menu hr { border-top-color: var(--glass-edge-soft); opacity: 1; }
.sidenav-menu .side-nav-title {
	list-style: none;
	margin: 12px 22px 5px;
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--glass-ink-faint);
	padding: 0;
}

/* ===== Shell: page head, breadcrumb as chip, footer ===== */
.page-title-head h4 { font-weight: 700; letter-spacing: -0.02em; }
.breadcrumb {
	display: inline-flex;
	align-items: center;
	height: 28px;
	padding: 0 13px !important;
	border-radius: 999px;
	background: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
	font-size: 11.5px;
	font-weight: 600;
}
.breadcrumb-item, .breadcrumb-item a { color: var(--glass-ink-faint); }
.breadcrumb-item a:hover { color: var(--glass-ink-dim); }
.breadcrumb-item.active { color: var(--glass-ink-dim); font-weight: 650; }
.breadcrumb-item + .breadcrumb-item::before { color: var(--glass-ink-faint); }
.footer { background: transparent; border-top: 0; color: var(--glass-ink-faint); }
/* Cap the content width on very wide screens */
.content-page > .container-fluid { max-width: 1560px; margin-inline: auto; }

/* ===== Cards as glass tiles (no blur: translucency over the glow is enough) ===== */
.card {
	background: var(--glass-card);
	border: 1px solid var(--glass-edge-soft);
	border-radius: 20px;
	box-shadow: var(--glass-card-shadow), inset 0 1px 0 var(--glass-specular);
	color: var(--glass-ink);
}
.card-header {
	background: transparent;
	border-bottom: 1px solid var(--glass-edge-soft);
}
/* This UBold build ships without Bootstrap's .w-auto utility while the
   templates rely on it (e.g. the location filter in the card header); without
   it a wrapped .form-select falls back to width: 100%. Restore the utility. */
.w-auto { width: auto !important; }
/* Long muted hints in card headers may shrink and wrap instead of pushing
   the other header items to a new line. */
.card-header .ms-auto.text-muted { flex: 0 1 340px; min-width: 0; text-align: right; font-size: 12px; line-height: 1.4; }
/* Everything in a card header sits on the same 31px toolbar line, as pills
   (the same scale as the search pills and icon circles) */
.card-header { row-gap: 8px; }
.card-header .form-select, .card-header .form-control {
	height: var(--glass-h-sm);
	padding-top: 0;
	padding-bottom: 0;
	border-radius: 999px;
}
.card-header .btn { min-height: var(--glass-h-sm); }
/* Icon-only header buttons stay perfect circles: the min-height above would
   stretch them into ovals, and the flex row may not squish them either. */
.card-header .btn-icon { min-height: 0; flex: none; }
.card-header .btn-group { border-radius: 999px; }
.card-header .btn-group .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.card-header .btn-group .btn:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.card-title { font-weight: 700; letter-spacing: -0.01em; color: var(--glass-ink); }
.card .card {
	background: var(--glass-tile);
	border-radius: 16px;
	box-shadow: inset 0 1px 0 var(--glass-specular);
}

/* ===== Tables: rows as loose translucent stripes with rounded ends ===== */
.table {
	--bs-table-bg: transparent;
	--bs-table-color: var(--glass-ink);
	--bs-table-striped-bg: transparent; /* every row gets the same glass stripe */
	--bs-table-striped-color: var(--glass-ink);
	--bs-table-hover-bg: var(--glass-tile-hover);
	--bs-table-hover-color: var(--glass-ink);
	--bs-table-border-color: transparent;
	border-collapse: separate;
	border-spacing: 0 5px;
	font-variant-numeric: tabular-nums;
}
.table > :not(caption) > * > * { border-bottom-width: 0; }
.table > thead th {
	font-size: 10.5px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--glass-ink-faint);
	padding-bottom: 2px;
}
.table > tbody td { background-color: var(--glass-dashrow); }
.table > tbody td:first-child { border-radius: 12px 0 0 12px; }
.table > tbody td:last-child { border-radius: 0 12px 12px 0; }
.table .glass-rowname { display: block; font-weight: 650; }
.table .glass-rowsub { display: block; font-size: 11px; color: var(--glass-ink-faint); margin-top: 2px; }
/* height acts as a minimum on table cells: rows keep the same height whether
   their action circles are present or hidden (non-editable rows show nothing) */
.table td.datatable-action-cell { width: 2.5rem; padding-left: 0.25rem; padding-right: 0.25rem; height: var(--glass-h-sm); }

/* DataTables chrome: length select and search field as pills, with a loupe */
.dt-container .dt-info { color: var(--glass-ink-faint); font-size: 12px; }
.dt-container .dt-length label, .dt-container .dt-search label { color: var(--glass-ink-dim); font-size: 12.5px; }
.dt-container .dt-length .form-select {
	height: var(--glass-h-sm);
	padding-top: 0;
	padding-bottom: 0;
	border-radius: 999px;
	width: auto;
}
.dt-container .dt-search .form-control {
	height: var(--glass-h-sm);
	padding: 0 14px 0 32px;
	border-radius: 999px;
	background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='rgba(128,138,150,0.85)' stroke-width='1.8' stroke-linecap='round'%3e%3ccircle cx='11' cy='11' r='6.5'/%3e%3cpath d='m20 20-3.8-3.8'/%3e%3c/svg%3e");
	background-repeat: no-repeat;
	background-position: 11px center;
	background-size: 14px;
}

/* ===== Pagination as pills (UBold consumes --theme-pagination-*) ===== */
.pagination {
	--theme-pagination-bg: var(--glass-tile);
	--theme-pagination-color: var(--glass-ink-dim);
	--theme-pagination-border-color: var(--glass-edge-soft);
	--theme-pagination-hover-bg: var(--glass-tile-hover);
	--theme-pagination-hover-color: var(--glass-ink);
	--theme-pagination-hover-border-color: var(--glass-edge-soft);
	--theme-pagination-focus-bg: var(--glass-tile-hover);
	--theme-pagination-focus-color: var(--glass-ink);
	--theme-pagination-focus-box-shadow: 0 0 0 2px var(--glass-accent-soft);
	--theme-pagination-active-bg: var(--glass-accent);
	--theme-pagination-active-border-color: transparent;
	--theme-pagination-active-color: var(--glass-on-accent);
	--theme-pagination-disabled-bg: transparent;
	--theme-pagination-disabled-color: var(--glass-ink-faint);
	--theme-pagination-disabled-border-color: var(--glass-edge-soft);
	gap: 4px;
}
.pagination .page-link,
.dt-paging .pagination .page-link,
.pagination-boxed .page-link {
	border-radius: 999px;
	font-size: 12.5px;
	font-weight: 650;
	min-width: 30px;
	text-align: center;
}

/* ===== Badges as chips ===== */
.badge {
	border-radius: 999px;
	font-size: 11px;
	font-weight: 650;
	letter-spacing: 0.02em;
	padding: 4px 10px;
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.badge.bg-success-subtle { background: var(--glass-accent-soft) !important; color: var(--glass-accent) !important; }
.badge.bg-danger-subtle { background: var(--glass-danger-soft) !important; color: var(--glass-danger) !important; }
.badge.bg-warning-subtle { background: var(--glass-warn-soft) !important; color: var(--glass-warn) !important; }
.badge.bg-info-subtle,
.badge.bg-primary-subtle { background: var(--glass-info-soft) !important; color: var(--glass-info) !important; }
.badge.bg-light { background: var(--glass-tile) !important; color: var(--glass-ink-dim) !important; }

/* ===== Buttons as pills, dashboard-wide (one height scale: 36/31) ===== */
.btn {
	border-radius: 999px;
	font-weight: 650;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	min-height: var(--glass-h-md);
	padding-top: 0;
	padding-bottom: 0;
}
.btn-sm { min-height: var(--glass-h-sm); }
.btn-icon { border-radius: 50%; width: var(--glass-h-md); height: var(--glass-h-md); min-height: 0; padding: 0; }
.btn-icon.btn-sm { width: var(--glass-h-sm); height: var(--glass-h-sm); }
.btn:focus-visible { outline: 2px solid var(--glass-accent); outline-offset: 2px; box-shadow: none; }
/* Confirm/save buttons as calm accent-soft pills on the 31px line (Pieters
   keuze 2026-07-12, variant A uit liquid-glass-opslaan-mockup.html): the soft
   tint says "positive action" in the same language as the warn/danger pills,
   without the gradient spotlight. */
.btn-primary, .btn-success {
	color: var(--glass-accent);
	background: var(--glass-accent-soft);
	border-color: var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
	min-height: var(--glass-h-sm);
	font-size: 12.5px;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-success:hover, .btn-success:focus, .btn-success:active {
	color: var(--glass-accent);
	background: color-mix(in srgb, var(--glass-accent) 22%, transparent);
	border-color: var(--glass-edge-soft);
}
.btn-outline-primary, .btn-outline-success,
.btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active,
.btn-outline-success:hover, .btn-outline-success:focus, .btn-outline-success:active {
	color: var(--glass-accent);
	background: var(--glass-accent-soft);
	border-color: var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.btn-warning, .btn-outline-warning,
.btn-warning:hover, .btn-warning:focus, .btn-warning:active,
.btn-outline-warning:hover, .btn-outline-warning:focus, .btn-outline-warning:active {
	color: var(--glass-warn);
	background: var(--glass-warn-soft);
	border-color: var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.btn-danger, .btn-outline-danger,
.btn-danger:hover, .btn-danger:focus, .btn-danger:active,
.btn-outline-danger:hover, .btn-outline-danger:focus, .btn-outline-danger:active {
	color: var(--glass-danger);
	background: var(--glass-danger-soft);
	border-color: var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.btn-secondary, .btn-light, .btn-outline-secondary,
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active,
.btn-light:hover, .btn-light:focus, .btn-light:active,
.btn-outline-secondary:hover, .btn-outline-secondary:focus, .btn-outline-secondary:active {
	color: var(--glass-ink);
	background: var(--glass-tile);
	border-color: var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.btn-secondary:hover, .btn-light:hover, .btn-outline-secondary:hover { background: var(--glass-tile-hover); }
.btn:hover { transform: translateY(-1px); }
.btn:active, .btn.ladda-button[data-loading] { transform: none; }
.btn:disabled, .btn.disabled { transform: none; opacity: 0.55; }

/* Icon-only row actions stay neutral glass and only color on hover, so table
   rows read calm; the semantic color returns the moment you aim at them. */
.btn-icon.btn-warning, .btn-icon.btn-outline-warning,
.btn-icon.btn-danger, .btn-icon.btn-outline-danger,
.btn-icon.btn-secondary, .btn-icon.btn-outline-secondary,
.btn-icon.btn-info, .btn-icon.btn-outline-info,
.btn-icon.btn-primary, .btn-icon.btn-success, .btn-icon.btn-outline-primary {
	color: var(--glass-ink-faint);
	background: var(--glass-tile);
	border-color: var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
	filter: none;
}
.btn-icon.btn-warning:hover, .btn-icon.btn-outline-warning:hover { color: var(--glass-warn); background: var(--glass-warn-soft); }
.btn-icon.btn-danger:hover, .btn-icon.btn-outline-danger:hover { color: var(--glass-danger); background: var(--glass-danger-soft); }
.btn-icon.btn-secondary:hover, .btn-icon.btn-outline-secondary:hover { color: var(--glass-ink); background: var(--glass-tile-hover); }
.btn-icon.btn-info:hover, .btn-icon.btn-outline-info:hover { color: var(--glass-info); background: var(--glass-info-soft); }
.btn-icon.btn-primary:hover, .btn-icon.btn-success:hover, .btn-icon.btn-outline-primary:hover { color: var(--glass-accent); background: var(--glass-accent-soft); }
.btn-icon svg { width: 15px; height: 15px; }

/* ===== Form fields, dashboard-wide ===== */
.form-control, .form-select {
	font-family: var(--glass-font);
	color: var(--glass-ink);
	background-color: var(--glass-field);
	border: 1px solid var(--glass-edge-soft);
	border-radius: 12px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
}
.form-control:focus, .form-select:focus {
	color: var(--glass-ink);
	background-color: var(--glass-field);
	border-color: transparent;
	outline: 2px solid var(--glass-accent);
	outline-offset: 1px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
}
.form-control::placeholder { color: var(--glass-ink-faint); }
.form-control-sm, .form-select-sm { border-radius: 10px; }
.form-control::file-selector-button {
	border-radius: 999px;
	border: 0;
	background: var(--glass-tile);
	color: var(--glass-ink-dim);
	font-weight: 650;
	margin-right: 12px;
}
.form-group label, .form-label { font-size: 12px; font-weight: 650; color: var(--glass-ink-dim); }
.form-check-input { background-color: var(--glass-field); border-color: var(--glass-edge-soft); }
.form-check-input:checked { background-color: var(--glass-accent); border-color: var(--glass-accent); }
.form-check-input:focus { border-color: var(--glass-accent); box-shadow: 0 0 0 3px var(--glass-accent-soft); }

/* ===== Select2 ===== */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
	background: var(--glass-field);
	border: 1px solid var(--glass-edge-soft);
	border-radius: 12px;
	color: var(--glass-ink);
}
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--glass-ink); }
.select2-dropdown {
	background: var(--glass-bg-solid);
	border: 1px solid var(--glass-edge-soft);
	border-radius: 14px;
	box-shadow: var(--glass-card-shadow);
	color: var(--glass-ink);
	overflow: hidden;
}
.select2-container--default .select2-search--dropdown .select2-search__field {
	background: var(--glass-field);
	border: 1px solid var(--glass-edge-soft);
	border-radius: 10px;
	color: var(--glass-ink);
}
.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
	background-color: var(--glass-accent);
	color: var(--glass-on-accent);
}

/* ===== Dropdown menus ===== */
.dropdown-menu {
	background: var(--glass-bg-solid);
	border: 1px solid var(--glass-edge-soft);
	border-radius: 16px;
	box-shadow: var(--glass-card-shadow), inset 0 1px 0 var(--glass-specular);
	color: var(--glass-ink);
	padding: 6px;
}
.dropdown-menu .dropdown-item { border-radius: 10px; color: var(--glass-ink-dim); }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item:focus { color: var(--glass-ink); background: var(--glass-tile-hover); }
.dropdown-menu .dropdown-item.active,
.dropdown-menu .dropdown-item:active { color: var(--glass-accent); background: var(--glass-accent-soft); }
.dropdown-menu .dropdown-header { color: var(--glass-ink-faint); }
.dropdown-menu .dropdown-divider { border-color: var(--glass-edge-soft); opacity: 1; }

/* ===== Alerts as glass notes ===== */
.alert {
	border-radius: 16px;
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.alert .alert-heading { color: inherit; }
.alert code { color: inherit; background: rgba(0, 0, 0, 0.06); padding: 1px 5px; border-radius: 6px; }
.alert .text-muted { color: inherit !important; opacity: 0.8; }
.alert-warning { background: var(--glass-warn-soft); color: var(--glass-warn); }
.alert-danger { background: var(--glass-danger-soft); color: var(--glass-danger); }
.alert-success { background: var(--glass-accent-soft); color: var(--glass-accent); }
.alert-info { background: var(--glass-info-soft); color: var(--glass-info); }

/* ===== Login: one glass card above the glow ===== */
.auth-box { display: grid; place-items: center; min-height: 100vh; padding: 48px 18px; }
.auth-box > .row { width: min(440px, 96vw) !important; } /* beats the w-100 utility on the row */
.auth-box .row > .col { display: none; } /* the decorative side-image column */
.auth-box .col-md-auto { width: 100%; }
.auth-box .auth-box-form.card {
	width: 100%;
	position: relative;
	overflow: hidden;
	border-radius: 30px;
	background: var(--glass-bg);
	-webkit-backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.9);
	backdrop-filter: blur(var(--glass-blur-lg)) saturate(1.9);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: var(--glass-shadow), inset 0 1px 0 var(--glass-specular), inset 0 -1px 0 var(--glass-edge-soft);
}
.auth-box .auth-box-form.card::before {
	content: "";
	position: absolute;
	inset: -40% -20% auto -20%;
	height: 80%;
	background: radial-gradient(ellipse at 30% 0%, rgba(255, 255, 255, 0.16), transparent 60%);
	pointer-events: none;
}
.auth-box .auth-box-form .card-body.min-vh-100 { min-height: 0 !important; padding: 40px 36px; }
.auth-box .auth-brand img { height: 60px !important; }
.auth-box .auth-sub-text { font-size: 12.5px; }

/* ===== Provisioning: QR block ===== */
#provisioning-qr {
	border-radius: 16px;
	border: 1px solid var(--glass-edge-soft);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

/* ===== Finishing touches: scrollbars and selection in the glass language ===== */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: var(--glass-edge-soft); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: var(--glass-ink-faint); }
::-webkit-scrollbar-track { background: transparent; }
::selection { background: color-mix(in srgb, var(--glass-accent) 28%, transparent); }

/* ============================================================================
   Opgeruimde beheerpagina's (prullenbak-patroon + franje-dieet)
   Source of truth: __plan/liquid-glass-beheer-mockup.html (approved 2026-07-12).
   ========================================================================= */

/* ===== Card header chips: item count next to the title, bin state chip ===== */
.glass-countchip {
	font-size: 11px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	padding: 2px 8px;
	border-radius: 999px;
	color: var(--glass-ink-faint);
	background: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
}
.glass-countchip:empty { display: none; }
.glass-binchip {
	display: none;
	align-items: center;
	gap: 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 3px 10px;
	border-radius: 999px;
	color: var(--glass-danger);
	background: var(--glass-danger-soft);
	border: 1px solid var(--glass-edge-soft);
	white-space: nowrap;
}
.glass-binchip svg { width: 12px; height: 12px; flex: none; }
.glass-bincard.glass-bin .glass-binchip { display: inline-flex; }
/* The "Nieuw" button has no business inside the bin view */
.glass-bincard.glass-bin .glass-binhide { display: none !important; }

/* ===== Bin button with counter badge ===== */
.glass-binbtn { position: relative; }
.glass-bincard.glass-bin .glass-binbtn { color: var(--glass-danger); background: var(--glass-danger-soft); }
.glass-binbadge {
	position: absolute;
	top: -5px;
	right: -6px;
	min-width: 16px;
	height: 16px;
	padding: 0 4px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	font-size: 9.5px;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	color: var(--glass-on-accent);
	background: var(--glass-danger);
}

/* ===== Search pill in the card header (drives the visible table via JS) ===== */
.glass-cardsearch {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: var(--glass-h-sm);
	padding: 0 13px;
	border-radius: 999px;
	width: 170px;
	margin: 0;
	background: var(--glass-field);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.07);
}
.glass-cardsearch svg { width: 13px; height: 13px; color: var(--glass-ink-faint); flex: none; }
.glass-cardsearch input {
	border: 0;
	background: transparent;
	outline: none;
	font-family: var(--glass-font);
	font-size: 12.5px;
	color: var(--glass-ink);
	width: 100%;
	min-width: 0;
	padding: 0;
}
.glass-cardsearch input::placeholder { color: var(--glass-ink-faint); }
.glass-cardsearch:focus-within { outline: 2px solid var(--glass-accent); outline-offset: 1px; }
@media (max-width: 575.98px) { .glass-cardsearch { width: 120px; } }

/* ===== Friendly empty states ===== */
/* DataTables' empty-table cell as a ghost tile ("Nog geen …" / "De prullenbak is leeg") */
.table > tbody td.dt-empty {
	background: transparent;
	border: 1px dashed var(--glass-edge-soft);
	border-radius: 14px;
	padding: 26px 12px;
	color: var(--glass-ink-faint);
	font-size: 12.5px;
	text-align: center;
}
/* An empty bin needs no column headers around its ghost tile */
[data-meriad-custom-name="bin-deleted"] table:has(td.dt-empty) thead { display: none; }

/* Generic ghost block for empty lists/grids outside DataTables */
.glass-empty {
	display: grid;
	place-items: center;
	gap: 6px;
	min-height: 110px;
	border-radius: 14px;
	border: 1px dashed var(--glass-edge-soft);
	color: var(--glass-ink-faint);
	font-size: 12.5px;
	text-align: center;
	padding: 16px;
	margin: 0;
}
.glass-empty svg { width: 22px; height: 22px; margin: 0 auto 2px; }

/* ===== Order caret right next to the column label instead of at the far
   right edge of the column; only the actively sorted column shows one.
   DataTables 2.3 wraps the header in a flex div.dt-column-header whose title
   gets flex-grow: 1 — that is what banished the caret to the far edge. ===== */
.table.dataTable thead div.dt-column-header {
	display: inline-flex;
	align-items: center;
	gap: 5px;
}
.table.dataTable thead div.dt-column-header .dt-column-title { flex: 0 0 auto; }
.table.dataTable thead span.dt-column-order { display: none !important; }
.table.dataTable thead th.dt-ordering-asc span.dt-column-order,
.table.dataTable thead th.dt-ordering-desc span.dt-column-order { display: block !important; }
.table.dataTable thead th.dt-ordering-asc span.dt-column-order::after,
.table.dataTable thead th.dt-ordering-desc span.dt-column-order::before { display: none !important; }

/* ===== Rights switch list (user type modal) ===== */
.glass-switchlist {
	display: grid;
	gap: 4px;
	max-height: 260px;
	overflow-y: auto;
	padding: 10px 12px;
	border-radius: 12px;
	background: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
}
.glass-switchlist .form-check { margin-bottom: 0; }
.glass-switchlist .form-check-label { font-size: 13px; color: var(--glass-ink-dim); }

/* ===== ⓘ info dot: long explanations tucked into a tooltip ===== */
.glass-infodot {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	color: var(--glass-ink-dim);
	background: var(--glass-tile);
	border: 1px solid var(--glass-edge-soft);
	box-shadow: inset 0 1px 0 var(--glass-specular);
	cursor: help;
	vertical-align: -5px;
	margin-left: 5px;
	flex: none;
}
.glass-infodot svg { width: 12px; height: 12px; }
.glass-infodot:hover { color: var(--glass-ink); background: var(--glass-tile-hover); }
/* In card headers the info dot joins the toolbar scale of the action circles */
.card-header .glass-infodot {
	width: var(--glass-h-sm);
	height: var(--glass-h-sm);
	vertical-align: middle;
	margin-left: 7px;
}
.card-header .glass-infodot svg { width: 15px; height: 15px; }

/* ===== Tippy tooltips in glass ===== */
.tippy-box {
	font-family: var(--glass-font);
	font-size: 12.5px;
	line-height: 1.5;
	color: var(--glass-ink);
	background: var(--glass-bg-solid);
	border: 1px solid var(--glass-edge-soft);
	border-radius: 12px;
	box-shadow: var(--glass-card-shadow);
}
.tippy-box .tippy-arrow { color: var(--glass-bg-solid); }

/* ===== Screensaver library: 31px footer controls ===== */
.glass-orderpill {
	height: var(--glass-h-sm);
	border-radius: 999px;
	padding-top: 0;
	padding-bottom: 0;
}

/* ===== Fallback without backdrop-filter: near-opaque surfaces ===== */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
	.modal-content,
	.swal2-popup,
	.iziToast,
	.app-topbar,
	.sidenav-menu,
	.auth-box .auth-box-form.card { background: var(--glass-bg-solid) !important; }
}

/* ===== Print: no ambient glow, no translucency, no shell chrome ===== */
@media print {
	body { background: #ffffff !important; }
	body::before { display: none !important; }
	.app-topbar,
	.sidenav-menu,
	.footer { display: none !important; }
	.content-page { margin-left: 0 !important; padding-top: 0 !important; }
	.card,
	.glass-tile,
	.glass-chip,
	.glass-pill,
	.glass-seg {
		background: #ffffff !important;
		box-shadow: none !important;
		-webkit-backdrop-filter: none !important;
		backdrop-filter: none !important;
	}
}