@charset "UTF-8";
/*
   css-auth.css — styling for the login/registration pages.
   Loaded after css-id2.css, so it reuses that file's :root custom
   properties (colors) — but NOT its fonts: these pages deliberately match
   the dashboard app's Mantine look (Roboto Condensed, bordered/rounded
   cards and inputs, no heavy drop-shadows) rather than the rest of the
   site's Adobe Typekit marketing-page branding. See auth/includes/head.php
   for the Roboto Condensed import, and dashboard-app/theme.ts for the
   design tokens this file approximates in plain CSS (that app has no
   equivalent pre-auth page of its own, so there's nothing to share code
   with directly). Unlike css-id2.css there's no pixel-perfect-desktop
   constraint here.
*/

.auth-body {
	background-color: #f8f9fa;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	font-family: "Roboto Condensed", sans-serif;
	color: #1a1b1e;
}

.auth-topbar {
	background-color: var(--color-white);
	padding: 9.8px 40px;
	text-align: center;
	border-bottom: 1px solid #dee2e6;
}
.auth-topbar img {
	width: 220px;
}
/* A configured portrait (tall) brand logo is sized by height instead, so
   it doesn't blow up to 220px wide — see auth/includes/head.php. */
.auth-topbar img.auth-topbar-portrait {
	width: auto;
	height: 96px;
}

.auth-main {
	flex: 1 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 40px 20px;
}

.auth-card {
	background-color: var(--color-white);
	width: 100%;
	max-width: 440px;
	padding: 40px;
	border: 1px solid #dee2e6;
	border-top: 4px solid var(--color-orange);
	border-radius: 8px;
}
.auth-card h1 {
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 300;
	font-size: 2rem;
	text-align: center;
	color: #000;
	text-shadow: none;
	margin-bottom: 6px;
}
.auth-card .lead {
	text-align: center;
	font-size: 0.95rem;
	line-height: 1.5rem;
	color: var(--color-grey);
	margin-bottom: 24px;
}

.auth-form {
	width: 100%;
}
.auth-form .field {
	margin-bottom: 18px;
	width: 100%;
}
.auth-form label {
	display: block;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 0.875rem;
	font-weight: 500;
	color: #212529;
	margin-bottom: 4px;
	float: none;
	width: auto;
}
.auth-form input {
	display: block;
	width: 100%;
	float: none;
	margin-left: 0;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 0.95rem;
	padding: 0.6em 0.75em;
	border: 1px solid #ced4da;
	border-radius: 4px;
	background-color: var(--color-white);
	color: #1a1b1e;
}
.auth-form input:focus {
	outline: none;
	border-color: var(--color-teal);
	box-shadow: 0 0 0 2px rgba(0, 137, 166, 0.25);
}
.password-input {
	position: relative;
}

.password-input input {
	padding-right: 2.6em;
}

.password-toggle {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 2.6em;
	border: 0;
	background: none;
	cursor: pointer;
	color: var(--color-grey);
	font-size: 1rem;
}

.password-toggle:hover,
.password-toggle:focus {
	color: var(--color-teal);
}

.auth-form .field-hint {
	font-size: 0.8rem;
	color: var(--color-grey);
	margin-top: 4px;
}

.password-requirements-title {
	font-size: 0.85rem;
	color: var(--color-dark-grey);
	margin: 6px 0 4px 0;
}

.password-requirements {
	list-style: none;
	margin: 0;
	padding: 0;
}

.password-requirements li {
	position: relative;
	padding-left: 20px;
	font-size: 0.85rem;
	color: var(--color-grey);
	line-height: 1.6;
}

.password-requirements li::before {
	content: "";
	position: absolute;
	left: 4px;
	top: 0.6em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--color-grey);
}

.password-requirements li.met {
	color: var(--color-teal);
	font-weight: 700;
}

.password-requirements li.met::before {
	background-color: var(--color-teal);
}

.auth-form .button {
	display: block;
	width: 100%;
	margin: 8px 0 0 0;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 700;
	font-size: 1rem;
	padding: 0.65em 1em;
	text-transform: none;
}
.auth-form .button:hover {
	background-color: #00728a;
}

/* Logout page: two stacked full-width action buttons (return to login /
   return to the website). button-secondary is the quieter, outlined
   variant — it uses the (configurable) secondary colour as its outline. */
.auth-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 8px;
}
.auth-actions .button {
	display: block;
	width: 100%;
	border-radius: 4px;
	font-family: "Roboto Condensed", sans-serif;
	font-weight: 700;
	font-size: 1rem;
	padding: 0.65em 1em;
	text-transform: none;
}
.auth-actions .button-secondary {
	background-color: transparent;
	color: var(--color-teal);
	border: 1px solid var(--color-teal);
}
.auth-actions .button-secondary:hover {
	background-color: var(--color-teal);
	color: var(--color-white);
}

.auth-links {
	text-align: center;
	margin-top: 20px;
	font-size: 0.9rem;
}
.auth-links p {
	margin-bottom: 8px;
}

.auth-alert {
	padding: 14px 16px;
	margin-bottom: 20px;
	font-family: "Roboto Condensed", sans-serif;
	font-size: 0.9rem;
	line-height: 1.4;
	border-radius: 8px;
}
.auth-alert.error {
	background-color: #fdecea;
	color: #7a241c;
}
.auth-alert.success {
	background-color: #eafaf1;
	color: #145a32;
}
.auth-alert.info {
	background-color: #eaf5f8;
	color: #01475c;
}

/* 2FA code input: wide letter-spacing makes 6 digits easy to read/enter */
.auth-form input.otp-input {
	text-align: center;
	font-size: 1.6rem;
	letter-spacing: 0.5em;
	font-family: "Roboto Condensed", sans-serif;
}

.auth-totp-qr {
	display: flex;
	justify-content: center;
	margin-bottom: 20px;
}

/* Sized to match the QR svg exactly: this is the positioning context for
   the centered logo, kept separate from the outer flex/page-centering
   wrapper above (which stretches full-width and would otherwise center
   the logo on the wrong box, offsetting it from the QR and breaking scans). */
.auth-totp-qr-inner {
	position: relative;
	width: 200px;
	height: 200px;
}

.auth-totp-qr-inner svg {
	width: 200px;
	height: 200px;
}

.auth-totp-qr-logo {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 38px;
	height: 38px;
	padding: 5px;
	background-color: #fff;
	border-radius: 6px;
	object-fit: contain;
}

.auth-totp-secret {
	background-color: #f8f9fa;
	border: 1px solid #dee2e6;
	border-radius: 4px;
	padding: 12px 16px;
	text-align: center;
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	word-break: break-all;
	margin-bottom: 20px;
}

@media (max-width: 480px) {
	.auth-card {
		padding: 28px 20px;
	}
	.auth-topbar {
		padding: 7.7px 20px;
	}
	.auth-topbar img {
		width: 170px;
	}
}

/* ---------------------------------------------------------------------
   Dashboard (behind login): white topbar with a centered logo and an
   account menu on the right, plus a sidebar + content layout below it.
   Separate from .auth-* above, which is only the login/register/etc.
   centered-card shell.
--------------------------------------------------------------------- */

/* Fixed-viewport app shell: the body itself never scrolls, so the
   topbar and sidebar (and the Instellingen/Rechten group pinned to the
   sidebar's bottom) stay on screen no matter how long the page content
   is — only .dashboard-content scrolls internally. Relaxed back to a
   normal scrolling page in the tablet/mobile breakpoint below, where
   the sidebar collapses into a horizontal bar above the content. */
.dashboard-body {
	background-color: var(--color-light-grey);
	height: 100vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

.dashboard-topbar {
	background-color: var(--color-white);
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 32px;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
	flex: 0 0 auto;
	max-height: 150px;
	z-index: 20;
}
.dashboard-topbar-logo img {
	width: 176px;
	display: block;
}

.dashboard-account {
	position: absolute;
	right: 32px;
	top: 50%;
	transform: translateY(-50%);
}
.dashboard-account-toggle {
	display: block;
	border: 0;
	background: none;
	padding: 0;
	cursor: pointer;
}
.dashboard-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 35px;
	height: 35px;
	border-radius: 50%;
	background-color: var(--color-orange);
	color: var(--color-white);
	font-family: var(--font-nav);
	font-weight: 700;
	font-size: 0.8rem;
}
/* Same class doubles as an <img> when the account has an uploaded
   avatar (auth/api/avatar.php) instead of a <span> of initials — the
   sizing/circle rules above apply equally to both tags. */
img.dashboard-avatar {
	object-fit: cover;
}
.dashboard-account-toggle:hover .dashboard-avatar,
.dashboard-account-toggle[aria-expanded="true"] .dashboard-avatar {
	background-color: var(--color-teal);
}

.dashboard-account-menu {
	display: none;
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 11px;
	background-color: var(--color-white);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15);
	min-width: 152px;
	border-top: 2px solid var(--color-orange);
	z-index: 30;
}
.dashboard-account-menu.open {
	display: block;
}
.dashboard-account-menu a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	font-family: var(--font-nav);
	font-size: 0.8rem;
	font-weight: 700;
	color: var(--color-black);
	text-decoration: none;
	border-bottom: 1px solid var(--color-light-grey);
}
.dashboard-account-menu a:last-child {
	border-bottom: 0;
}
.dashboard-account-menu a i {
	color: var(--color-teal);
	width: 1em;
	text-align: center;
}
.dashboard-account-menu a:hover {
	background-color: var(--color-light-grey);
	color: var(--color-orange);
}
.dashboard-account-menu a:hover i {
	color: var(--color-orange);
}

/* Sidebar + content. Item styling mirrors the site's mobile hamburger
   nav (css-id2.css: .container-top.left nav ul li) — same white
   background, per-item bottom border and padding rhythm. */
.dashboard-layout {
	display: flex;
	align-items: stretch;
	flex: 1 1 auto;
	min-height: 0; /* let children scroll internally instead of growing past the shell */
}
.dashboard-sidebar {
	flex: 0 0 300px;
	background-color: var(--color-white);
	border-right: 3px solid var(--color-orange);
	display: flex;
	flex-direction: column;
	overflow-y: auto;
}
.dashboard-sidebar ul {
	list-style: none;
	margin: 0;
	padding: 13px 0;
}
/* Admin-only Instellingen/Rechten group, pinned to the sidebar's bottom
   behind a teal divider line — kept out of the regular per-role
   permission matrix entirely (see functions.php::DASHBOARD_PAGES), and
   out of the main <ul> above, since it's hardcoded admin-only rather
   than governed by role_permissions. The sidebar fills the full height
   of the non-scrolling shell (see .dashboard-body above), so this
   margin-top: auto pins the group to its bottom — it's always on
   screen, regardless of how far .dashboard-content scrolls. */
.dashboard-sidebar-admin {
	margin-top: auto;
	border-top: 2px solid var(--color-teal);
}
.dashboard-sidebar-admin ul {
	padding: 13px 0;
}
.dashboard-sidebar li {
	border-bottom: 1px solid var(--color-light-grey);
}
.dashboard-sidebar-link {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 300px;
	padding: 10px 20px;
	font-family: var(--font-nav);
	font-size: 1rem;
	font-weight: 700;
	color: var(--color-black);
	text-decoration: none;
}
.dashboard-sidebar-link i {
	color: var(--color-teal);
	width: 1.2em;
	text-align: center;
}
.dashboard-sidebar-link:hover {
	background-color: var(--color-light-grey);
}
.dashboard-sidebar-link.active {
	color: var(--color-orange);
	background-color: var(--color-light-grey);
}
.dashboard-sidebar-link.active i {
	color: var(--color-orange);
}

.dashboard-content {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
	overflow-y: auto;
	padding: 32px;
}

/* Content building blocks, shared by dashboard.php and the section stubs */
.dashboard-welcome {
	background-color: var(--color-white);
	border-top: 3px solid var(--color-orange);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	display: flex;
	align-items: stretch;
	margin-bottom: 24px;
	overflow: hidden;
}
.dashboard-welcome-text {
	padding: 29px 32px;
	flex: 1 1 auto;
}
.dashboard-welcome-text h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.76rem;
	color: #000;
	text-shadow: none;
	margin-bottom: 8px;
}
.dashboard-welcome-text p {
	font-size: 0.8rem;
	line-height: 1.28rem;
	color: var(--color-grey);
	max-width: 416px;
}
.dashboard-welcome-photo {
	flex: 0 0 256px;
	position: relative;
}
.dashboard-welcome-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.dashboard-photo-credit {
	position: absolute;
	bottom: 6px;
	left: 8px;
	color: var(--color-white);
	font-size: 0.52rem;
	text-shadow: none;
}
.dashboard-photo-credit a {
	color: var(--color-white);
}

.dashboard-info-card {
	background-color: var(--color-white);
	border-top: 3px solid var(--color-teal);
	padding: 24px;
	margin-bottom: 24px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.dashboard-info-card h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.2rem;
	margin-bottom: 13px;
}
.dashboard-info-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 13px;
}
.dashboard-info-list li {
	font-size: 0.76rem;
}
.dashboard-info-list strong {
	display: block;
	font-family: var(--font-nav);
	font-size: 0.64rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-grey);
	margin-bottom: 3px;
}
.dashboard-info-card-footer {
	margin-top: 16px;
}
.dashboard-info-card-footer a {
	color: var(--color-teal);
	font-family: var(--font-nav);
	font-weight: 700;
	text-decoration: none;
}
.dashboard-info-card-footer a:hover {
	color: var(--color-orange);
}

.dashboard-section-title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 2rem;
	text-align: left;
	color: var(--color-black);
	text-shadow: none;
	margin-bottom: 13px;
}
.dashboard-intro {
	color: var(--color-grey);
	font-size: 0.8rem;
	margin-bottom: 19px;
	max-width: 512px;
}
.dashboard-permission-note {
	margin-top: 13px;
	font-size: 0.68rem;
	color: var(--color-grey);
	font-style: italic;
}

/* Rechten: role overview table */
.dashboard-data-table-actions {
	margin-bottom: 16px;
}
.dashboard-data-table-actions .button {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 0.76rem;
	padding: 8px 16px;
}
.dashboard-data-table {
	width: 100%;
	border-collapse: collapse;
	background-color: var(--color-white);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.dashboard-data-table th,
.dashboard-data-table td {
	text-align: left;
	padding: 11px 13px;
	border-bottom: 1px solid var(--color-light-grey);
}
.dashboard-data-table th {
	font-family: var(--font-nav);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-grey);
	font-weight: 700;
	border-top: 3px solid var(--color-orange);
}
.dashboard-data-table td:first-child {
	font-family: var(--font-nav);
	font-weight: 700;
	font-size: 0.84rem;
}
.dashboard-data-table tbody tr:last-child td {
	border-bottom: 0;
}
/* Gebruikers table, the Log panel/page table, and the Klanten table:
   every column uses the same font/size as the first (bold) column, so
   the table reads as one consistent typeface — only the first column
   itself stays bold, via .dashboard-data-table td:first-child above
   (higher specificity than these rules, so it still wins there). */
.dashboard-users-table td,
.dashboard-log-table td,
.dashboard-klanten-table td {
	font-family: var(--font-nav);
	font-size: 0.84rem;
}
.dashboard-icon-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 27px;
	height: 27px;
	background-color: var(--color-light-grey);
	color: var(--color-teal);
	text-decoration: none;
	border: 0;
	cursor: pointer;
	font-size: 0.8rem;
}
.dashboard-icon-button:hover {
	background-color: var(--color-teal);
	color: var(--color-white);
}
.dashboard-icon-button-disabled {
	color: var(--color-grey);
	cursor: not-allowed;
}
.dashboard-icon-button-disabled:hover {
	background-color: var(--color-light-grey);
	color: var(--color-grey);
}
.dashboard-icon-button-danger:hover {
	background-color: #c0392b;
	color: var(--color-white);
}
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Rechten's create-role form, and gebruiker-bewerken.php's edit form —
   both are simple label+field stacks needing the same basic styling. */
.dashboard-create-role-form .field,
.dashboard-form .field {
	margin-bottom: 16px;
	max-width: 288px;
}
.dashboard-create-role-form label,
.dashboard-form label {
	display: block;
	font-family: var(--font-nav);
	font-weight: 700;
	font-size: 0.76rem;
	margin-bottom: 5px;
}
.dashboard-create-role-form input[type="text"],
.dashboard-form input[type="text"],
.dashboard-form input[type="email"],
.dashboard-form select {
	display: block;
	width: 100%;
	font-family: var(--font-body);
	font-size: 0.8rem;
	padding: 0.7em 0.8em;
	border: 1px solid var(--color-grey);
	background-color: var(--color-white);
}
.dashboard-create-role-form input[type="text"]:focus,
.dashboard-form input[type="text"]:focus,
.dashboard-form input[type="email"]:focus,
.dashboard-form select:focus {
	outline: 2px solid var(--color-teal);
	outline-offset: 1px;
}
.dashboard-form .field-hint {
	font-size: 0.64rem;
	color: var(--color-grey);
	margin-top: 3px;
}
.dashboard-form .field-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	max-width: 288px;
	margin-bottom: 16px;
}
.dashboard-form .field-checkbox input[type="checkbox"] {
	width: 14px;
	height: 14px;
	margin-top: 2px;
	accent-color: var(--color-orange);
	cursor: pointer;
}
.dashboard-form .field-checkbox label {
	margin-bottom: 0;
	font-weight: 700;
	cursor: pointer;
}
.dashboard-form .field-checkbox p {
	font-size: 0.68rem;
	color: var(--color-grey);
	margin-top: 2px;
}
.dashboard-form-section {
	background-color: var(--color-white);
	border-top: 3px solid var(--color-orange);
	padding: 24px;
	margin-bottom: 19px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.dashboard-form-section h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.04rem;
	margin-bottom: 13px;
}
.dashboard-form-section.dashboard-form-section-danger {
	border-top-color: var(--color-teal);
}
.dashboard-readonly-note {
	color: var(--color-grey);
	font-size: 0.72rem;
	margin-bottom: 13px;
}

/* Gebruikers: status badges */
.dashboard-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-family: var(--font-nav);
	font-weight: 700;
	font-size: 0.68rem;
}
.dashboard-status::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background-color: var(--color-grey);
	flex: 0 0 auto;
}
.dashboard-status-pending_email::before {
	background-color: var(--color-orange);
}
.dashboard-status-active::before {
	background-color: #1e8449;
}
.dashboard-status-blocked::before {
	background-color: #c0392b;
}
.dashboard-status-linked::before {
	background-color: #1e8449;
}
.dashboard-status-unlinked::before {
	background-color: var(--color-grey);
}

/* Gebruikers: 2FA column icon */
.dashboard-2fa-icon {
	font-size: 0.9rem;
}
.dashboard-2fa-icon-on {
	color: #1e8449;
}
.dashboard-2fa-icon-off {
	color: #c0392b;
}

/* Gebruikers: search bar + sortable column headers */
.dashboard-search-form {
	display: flex;
	gap: 8px;
	margin-bottom: 16px;
	max-width: 336px;
}
.dashboard-search-field {
	position: relative;
	flex: 1 1 auto;
}
.dashboard-search-form input[type="search"] {
	width: 100%;
	font-family: var(--font-body);
	font-size: 0.8rem;
	padding: 0.6em 2em 0.6em 0.8em;
	border: 1px solid var(--color-grey);
}
.dashboard-search-form input[type="search"]:focus {
	outline: 2px solid var(--color-teal);
	outline-offset: 1px;
}
.dashboard-search-form input[type="search"]::-webkit-search-cancel-button {
	display: none;
}
.dashboard-search-clear {
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	width: 2em;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	color: var(--color-grey);
	cursor: pointer;
	font-size: 0.8rem;
}
.dashboard-search-clear[hidden] {
	display: none;
}
.dashboard-search-clear:hover {
	color: var(--color-orange);
}
.dashboard-total-count {
	font-family: var(--font-nav);
	font-weight: 700;
	font-size: 0.76rem;
	margin-bottom: 13px;
}
.dashboard-sort-link {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	color: inherit;
	text-decoration: none;
}
.dashboard-sort-link:hover {
	color: var(--color-orange);
}
.dashboard-sort-link i {
	font-size: 0.75em;
	color: var(--color-grey);
}
.dashboard-sort-link.dashboard-sort-active i {
	color: var(--color-orange);
}

/* Gebruikers: pagination — centered below the table, with the
   showing-N-of-M row count directly below it (see .dashboard-row-count). */
.dashboard-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin-top: 19px;
	flex-wrap: wrap;
}
.dashboard-row-count {
	text-align: center;
}
.dashboard-pagination a,
.dashboard-pagination span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 27px;
	height: 27px;
	padding: 0 6px;
	font-family: var(--font-nav);
	font-weight: 700;
	font-size: 0.72rem;
	text-decoration: none;
	color: var(--color-black);
	background-color: var(--color-white);
}
.dashboard-pagination a:hover {
	background-color: var(--color-light-grey);
}
.dashboard-pagination .dashboard-pagination-current {
	background-color: var(--color-teal);
	color: var(--color-white);
}
.dashboard-pagination .dashboard-pagination-ellipsis {
	background-color: transparent;
}

/* Gebruikers: delete-confirmation modal */
.dashboard-modal-overlay {
	display: none;
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 100;
	align-items: center;
	justify-content: center;
}
.dashboard-modal-overlay.open {
	display: flex;
}
.dashboard-modal {
	background-color: var(--color-white);
	border-top: 3px solid var(--color-orange);
	padding: 24px;
	width: 100%;
	max-width: 336px;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.dashboard-modal h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.04rem;
	margin-bottom: 10px;
}
.dashboard-modal p {
	font-size: 0.76rem;
	line-height: 1.5;
	margin-bottom: 19px;
}
.dashboard-modal p strong {
	font-family: var(--font-nav);
}
.dashboard-modal-actions {
	display: flex;
	align-items: center;
	gap: 13px;
}
.dashboard-modal-actions .button {
	font-size: 0.8rem;
	padding: 10px 19px;
	background-color: #c0392b;
}
.dashboard-modal-actions .button:hover {
	background-color: var(--color-orange);
}
.dashboard-modal-cancel {
	color: var(--color-teal);
	font-family: var(--font-nav);
	font-weight: 700;
	text-decoration: none;
	background: none;
	border: 0;
	cursor: pointer;
	font-size: 0.8rem;
}
.dashboard-modal-cancel:hover {
	color: var(--color-orange);
}

/* Gebruikers: Log slide-in panel — unlike the delete modal above, this
   overlaps only part of the page (from the right) and stays scrollable,
   so viewing a log doesn't feel like leaving gebruikers.php. Uses
   opacity/visibility rather than display:none so the panel's transform
   actually transitions instead of jumping. */
.dashboard-slidein-overlay {
	position: fixed;
	inset: 0;
	background-color: rgba(0, 0, 0, 0.5);
	z-index: 110;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.25s ease, visibility 0.25s;
}
.dashboard-slidein-overlay.open {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.dashboard-slidein {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 560px;
	background-color: var(--color-light-grey);
	box-shadow: -8px 0 30px rgba(0, 0, 0, 0.2);
	overflow-y: auto;
	padding: 56px 32px 32px;
	visibility: visible;
	transform: translateX(100%);
	transition: transform 0.25s ease;
}
.dashboard-slidein-overlay.open .dashboard-slidein {
	transform: translateX(0);
}
.dashboard-slidein-close {
	position: absolute;
	top: 16px;
	right: 16px;
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--color-white);
	border: 0;
	color: var(--color-grey);
	cursor: pointer;
	font-size: 1rem;
}
.dashboard-slidein-close:hover {
	color: var(--color-orange);
}

/* Rechten: per-role permission matrix */
.dashboard-permission-form {
	background-color: var(--color-white);
	border-top: 3px solid var(--color-orange);
	padding: 24px;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.dashboard-permission-table {
	width: 100%;
	border-collapse: collapse;
}
.dashboard-permission-table th,
.dashboard-permission-table td {
	text-align: center;
	padding: 10px 8px;
	border-bottom: 1px solid var(--color-light-grey);
}
.dashboard-permission-table th {
	font-family: var(--font-nav);
	font-size: 0.68rem;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	color: var(--color-grey);
	font-weight: 700;
}
.dashboard-permission-table td:first-child,
.dashboard-permission-table th:first-child {
	text-align: left;
	font-family: var(--font-nav);
	font-weight: 700;
	font-size: 0.84rem;
}
.dashboard-permission-table input[type="radio"] {
	width: 14px;
	height: 14px;
	accent-color: var(--color-teal);
	cursor: pointer;
}
.dashboard-permission-form-actions {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: 19px;
}
.dashboard-permission-form-actions .button {
	display: inline-block;
	font-size: 0.8rem;
	padding: 10px 19px;
}
.dashboard-cancel-link {
	color: var(--color-teal);
	font-family: var(--font-nav);
	font-weight: 700;
	text-decoration: none;
}
.dashboard-cancel-link:hover {
	color: var(--color-orange);
}

/* Quick-link grid to the sidebar sections */
.dashboard-quicklinks {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 19px;
}
.dashboard-quicklink {
	display: block;
	background-color: var(--color-white);
	border-top: 3px solid var(--color-orange);
	padding: 19px;
	text-decoration: none;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.dashboard-quicklink:hover {
	transform: translateY(-3px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.dashboard-quicklink i {
	font-size: 1.44rem;
	color: var(--color-teal);
	margin-bottom: 11px;
	display: block;
}
.dashboard-quicklink h3 {
	font-family: var(--font-nav);
	font-size: 0.88rem;
	font-weight: 700;
	color: var(--color-black);
	text-shadow: none;
	margin-bottom: 5px;
}
.dashboard-quicklink p {
	font-size: 0.72rem;
	color: var(--color-grey);
	line-height: 1.4;
}

/* "Coming soon" placeholder used by the not-yet-built sidebar sections */
.dashboard-placeholder {
	background-color: var(--color-white);
	border-top: 3px solid var(--color-orange);
	padding: 48px 32px;
	text-align: center;
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}
.dashboard-placeholder i {
	font-size: 2rem;
	color: var(--color-teal);
	margin-bottom: 13px;
	display: block;
}
.dashboard-placeholder h1 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.44rem;
	text-shadow: none;
	margin-bottom: 8px;
}
.dashboard-placeholder p {
	color: var(--color-grey);
	font-size: 0.8rem;
}
.dashboard-placeholder p a {
	color: var(--color-teal);
	font-weight: 700;
	text-decoration: none;
}
.dashboard-placeholder p a:hover {
	color: var(--color-orange);
}

@media (max-width: 900px) {
	/* Below this width the sidebar collapses into a horizontal bar above
	   the content instead of a fixed side column, so the whole
	   fixed-viewport shell (see .dashboard-body above) is relaxed back
	   into a normal scrolling page. */
	.dashboard-body {
		height: auto;
		overflow: visible;
	}
	.dashboard-layout {
		flex-direction: column;
		min-height: 0;
	}
	.dashboard-sidebar {
		flex: 0 0 auto;
		border-right: 0;
		border-bottom: 3px solid var(--color-orange);
		overflow-y: visible;
	}
	.dashboard-sidebar ul {
		display: flex;
		flex-wrap: wrap;
		padding: 0;
	}
	.dashboard-sidebar li {
		border-bottom: 0;
	}
	.dashboard-sidebar-link {
		width: auto;
		padding: 10px 13px;
		font-size: 0.88rem;
	}
	.dashboard-sidebar-admin {
		margin-top: 0;
	}
	.dashboard-sidebar-admin ul {
		padding: 0;
	}
	.dashboard-content {
		overflow-y: visible;
		padding: 19px;
	}
	.dashboard-welcome {
		flex-direction: column;
	}
	.dashboard-welcome-photo {
		flex: 0 0 144px;
		width: 100%;
	}
	.dashboard-quicklinks {
		grid-template-columns: 1fr;
	}
	.dashboard-permission-form {
		padding: 16px;
		overflow-x: auto;
	}
	.dashboard-permission-table {
		min-width: 480px;
	}
	.dashboard-data-table-wrapper {
		overflow-x: auto;
	}
	.dashboard-data-table {
		min-width: 480px;
	}
	.dashboard-data-table.dashboard-users-table,
	.dashboard-data-table.dashboard-klanten-table {
		min-width: 820px;
	}
	.dashboard-search-form {
		max-width: none;
	}
}

@media (max-width: 480px) {
	.dashboard-topbar {
		padding: 6px 16px;
	}
	.dashboard-topbar-logo img {
		width: 136px;
	}
	.dashboard-account {
		right: 16px;
	}
}