/* SOURCE_HASH: <Version: L1.1.21> */
/* Version: L1.1.21 */
/* Last updated: 2026-03-31 */
/* File: dashboard/public/css/dashboard-public.css */
/* Shortcode: [dashboard] */
/* Dashboard pages should never show theme sidebars. */
body.vbd-dashboard-page #secondary,
body.vbd-dashboard-page .widget-area,
body.vbd-dashboard-page .sidebar,
body.vbd-dashboard-page .site-sidebar,
body.vbd-dashboard-page .right-sidebar,
body.vbd-dashboard-page .left-sidebar {
	display: none !important;
}

body.vbd-dashboard-page .content-area,
body.vbd-dashboard-page .site-content .content-area {
	width: 100% !important;
	max-width: 100% !important;
}

body.vbd-dashboard-page .site-main {
	margin: 0 !important;
}

/*
 * Theme container overrides (dashboard pages)
 *
 * Veel themes (o.a. GeneratePress) beperken de content-breedte via containers zoals
 * .grid-container / .inside-article / .entry-content.
 * Voor dashboardpagina's willen we het dashboard zo veel mogelijk de beschikbare
 * breedte laten gebruiken.
 */
body.vbd-dashboard-page .site,
body.vbd-dashboard-page .site.grid-container,
body.vbd-dashboard-page .site .grid-container,
body.vbd-dashboard-page .site .container,
body.vbd-dashboard-page .site .container.grid-container,
body.vbd-dashboard-page .site-content,
body.vbd-dashboard-page .site-content .grid-container,
body.vbd-dashboard-page .site-content .container,
body.vbd-dashboard-page .site-content .container.grid-container,
body.vbd-dashboard-page .site-content .inside-article,
body.vbd-dashboard-page .site-content .entry-content,
body.vbd-dashboard-page .site-content .entry-content > * {
	max-width: 100% !important;
	width: 100% !important;
}

/* Verwijder theme-side paddings zodat het dashboard niet "ingesnoerd" wordt. */
body.vbd-dashboard-page .site,
body.vbd-dashboard-page .site .grid-container,
body.vbd-dashboard-page .site .container,
body.vbd-dashboard-page .site-content,
body.vbd-dashboard-page .site-content .inside-article,
body.vbd-dashboard-page .site-content .entry-content {
	padding-left: 0 !important;
	padding-right: 0 !important;
}

/*
 * Full width for dashboard pages (disable theme sidebars if present)
 *
 * Sommige themes renderen een (lege) sidebar of houden een vaste content-area breedte aan.
 * Op dashboardpagina's willen we altijd 1 kolom over de volle breedte.
 */
body.vbd-dashboard-page .content-area,
body.vbd-dashboard-page .site-content .content-area,
body.vbd-dashboard-page #primary,
body.vbd-dashboard-page .site-content #primary,
body.vbd-dashboard-page .site-main,
body.vbd-dashboard-page .site-content .site-main {
	width: 100% !important;
	max-width: 100% !important;
	flex: 0 0 100% !important;
	float: none !important;
}

body.vbd-dashboard-page .widget-area,
body.vbd-dashboard-page .sidebar,
body.vbd-dashboard-page #right-sidebar,
body.vbd-dashboard-page #left-sidebar {
	display: none !important;
}
/*
 * Dashboard container
 *
 * RF3.1: breder maken zodat formulieren/tabellen (Klantbeheer etc.) minder “smal” ogen
 * op desktop. Embed/iframe variant blijft ongewijzigd (max-width: none).
 */
/*
 * Dashboard page width
 *
 * GeneratePress (en vergelijkbare themes) zetten vaak een vaste content-breedte
 * (bijv. max-width: 700px) op de page/container. In Safari leek dat soms "goed"
 * door cache/minify verschillen, maar in Chrome bleef het dashboard smal.
 *
 * Oplossing:
 * - Maak op dashboardpagina's de content-container breder: 80vw (max 1400px).
 * - Laat .dashboard-app zelf 100% breed zijn binnen die container.
 */

body.vbd-dashboard-page .site-content #primary,
body.vbd-dashboard-page .site-content .content-area,
body.vbd-dashboard-page .site-content .site-main {
	width: 100% !important;
	max-width: none !important;
}

/*
 * Dashboard page width (theme container overrides)
 *
 * Sommige themes (o.a. GeneratePress) kunnen een max-width op body of content wrappers zetten
 * (bijv. 700px), waardoor het dashboard in Chrome smal blijft. We forceren dit alleen op
 * dashboardpagina's, zonder de site-header aan te passen.
 */
body.vbd-dashboard-page {
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;
	background: #fff !important;
}

/* Hoofd content wrapper (#page) breder maken. Header blijft ongemoeid. */
body.vbd-dashboard-page #page {
	width: 80vw !important;
	max-width: 1400px !important;
	margin-left: auto !important;
	margin-right: auto !important;
	background: #fff !important;
}

/* Binnencontainers mogen niet opnieuw limiteren. */
body.vbd-dashboard-page .site-content .inside-article {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
	background: #fff !important;
}

body.vbd-dashboard-page .site,
body.vbd-dashboard-page .site-content,
body.vbd-dashboard-page .site-content .entry-content,
body.vbd-dashboard-page .site-content .content-area,
body.vbd-dashboard-page .site-main,
body.vbd-dashboard-page #primary,
body.vbd-dashboard-page #content {
	background: #fff !important;
}

@media (max-width: 900px) {
	body.vbd-dashboard-page #page {
		width: 100% !important;
		max-width: none !important;
	}
}


/*
 * Dashboard container
 */
.dashboard-app {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 30px;
	font-family: inherit;
	box-sizing: border-box;
	background: #fff;
}

/*
 * Sommige themes zetten op .entry-content > * width/max-width met !important.
 * Forceer hier expliciet de gewenste breedte voor de dashboard wrapper.
 */
body.vbd-dashboard-page .site-content .entry-content > .dashboard-app {
	width: 100% !important;
	max-width: none !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}


/* Minimal layout when the dashboard is rendered inside an iframe modal (Archief overlay). */
.dashboard-app.dashboard-app-embed {
	width: 100%;
	max-width: none;
	margin: 0;
	padding: 12px 14px 18px;

	left: 0;
	transform: none;
}

.dashboard-app .dashboard-title {
	margin: 0 0 12px;
}

.dashboard-app .dashboard-topbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.dashboard-app .dashboard-topbar-title {
	font-weight: 900;
	font-size: 16px;
}

.dashboard-app .dashboard-topbar-actions {
	display: flex;
	gap: 30px;
	align-items: center;
	flex-wrap: wrap;
}

.dashboard-app .dashboard-tile {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 14px;
	padding: 14px 16px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.dashboard-app .dashboard-tile.dashboard-tile-clickable {
	cursor: pointer;
}

.dashboard-app .dashboard-tile.dashboard-tile-clickable:hover {
	border-color: rgba(0,0,0,0.14);
	box-shadow: 0 4px 14px rgba(0,0,0,0.07);
}

.dashboard-app .dashboard-tile h3 {
	margin: 0 0 8px;
}

.dashboard-app .dashboard-tile p {
	margin: 0 0 10px;
	color: rgba(0,0,0,0.72);
	font-weight: 600;
}

.dashboard-app .dashboard-tile-link {
	font-weight: 800;
	text-decoration: none;
	color: #1b5cff;
}

.dashboard-app .dashboard-tile-link:hover {
	text-decoration: underline;
}

/* Hoofddashboard: verberg alleen de zichtbare "Openen"-tekst in de tegelgrids,
   maar behoud een volledige klikbare linklaag voor muis en toetsenbord. */
.dashboard-app .dashboard-tiles-admin .dashboard-tile,
.dashboard-app .dashboard-tiles-manager .dashboard-tile {
	position: relative;
}

.dashboard-app .dashboard-tiles-admin .dashboard-tile .dashboard-tile-link,
.dashboard-app .dashboard-tiles-manager .dashboard-tile .dashboard-tile-link {
	position: absolute;
	inset: 0;
	display: block;
	z-index: 2;
	overflow: hidden;
	white-space: nowrap;
	text-indent: 200%;
	color: transparent;
	background: transparent;
	border-radius: inherit;
}

.dashboard-app .dashboard-tiles-admin .dashboard-tile .dashboard-tile-link:hover,
.dashboard-app .dashboard-tiles-admin .dashboard-tile .dashboard-tile-link:focus,
.dashboard-app .dashboard-tiles-manager .dashboard-tile .dashboard-tile-link:hover,
.dashboard-app .dashboard-tiles-manager .dashboard-tile .dashboard-tile-link:focus {
	text-decoration: none;
}

.dashboard-app .dashboard-tiles-admin .dashboard-tile .dashboard-tile-link:focus-visible,
.dashboard-app .dashboard-tiles-manager .dashboard-tile .dashboard-tile-link:focus-visible {
	outline: 2px solid rgba(37, 99, 235, 0.24);
	outline-offset: -2px;
}

.dashboard-app .dashboard-tiles-admin .dashboard-tile p,
.dashboard-app .dashboard-tiles-manager .dashboard-tile p {
	margin-bottom: 0;
}

.dashboard-app .dashboard-back-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 8px 12px;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.12);
	background: #fff;
	font-weight: 800;
	text-decoration: none;
	color: rgba(0,0,0,0.82);
	margin: 6px 0 14px;
}

.dashboard-app .dashboard-back-link:hover {
	background: rgba(0,0,0,0.04);
}


.dashboard-app .dashboard-statusline{
  margin-top:8px;
  font-size:12px;
  font-weight:700;
  line-height:1.2;
  color:rgba(0,0,0,0.72);
}

.dashboard-app .dashboard-statusline.success{
  color:rgba(0,120,40,0.95);
}
.dashboard-notice {
	margin: 10px 0;
	padding: 12px 14px;
	border-radius: 10px;
	font-weight: 600;
	background: #f6f6f6;
	border: 1px solid rgba(0,0,0,0.08);
}

.dashboard-app .dashboard-notice-success {
	background: #f1fff4;
	border-color: rgba(0,140,30,0.2);
}

.dashboard-app .dashboard-notice-error {
	background: #fff2f2;
	border-color: rgba(180,20,20,0.20);
}

.dashboard-app .dashboard-notice-warning {
	background: #fffbe8;
	border-color: rgba(180,140,20,0.30);
}

.dashboard-app .dashboard-postsave-feedback {
	width: 100%;
	margin-top: 10px;
}

.dashboard-app .dashboard-postsave-feedback .dashboard-notice {
	margin: 0;
}

.dashboard-app .dashboard-postsave-feedback .dashboard-notice + .dashboard-notice {
	margin-top: 8px;
}

.dashboard-app .dashboard-tiles {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 14px;
}

@media (max-width: 950px) {
	.dashboard-app .dashboard-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 620px) {
	.dashboard-app .dashboard-tiles {
		grid-template-columns: 1fr;
	}
}

.dashboard-app .dashboard-actions-row {
	display: flex;
	gap: 10px;
	align-items: center;
	margin: 12px 0 14px;
	flex-wrap: wrap;
}

.dashboard-app .dashboard-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,0.12);
	background: #1b5cff;
	color: #fff;
	font-weight: 900;
	text-decoration: none;
	cursor: pointer;
}

.dashboard-app .dashboard-button:hover {
	filter: brightness(0.98);
}

.dashboard-app .dashboard-button-secondary {
	background: #fff;
	color: rgba(0,0,0,0.85);
}

.dashboard-app .dashboard-button-secondary:hover {
	background: rgba(0,0,0,0.04);
	color: #808080;
}

.dashboard-app .dashboard-form-section {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 12px;
	padding: 14px 16px;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
	margin: 12px 0;
}

.dashboard-app .dashboard-form-section h3 {
	margin: 0 0 10px;
}

.dashboard-app .dashboard-field {
	margin-bottom: 12px;
}

.dashboard-app .dashboard-field > label {
	display: block;
	font-weight: 800;
	margin-bottom: 6px;
}

.dashboard-app .dashboard-field input[type="text"],
.dashboard-app .dashboard-field input[type="email"],
.dashboard-app .dashboard-field input[type="number"],
.dashboard-app .dashboard-field input[type="date"],
.dashboard-app .dashboard-field input[type="password"],
.dashboard-app .dashboard-field textarea,
.dashboard-app .dashboard-field select {
	width: 100%;
	padding: 10px 12px;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.12);
	background: #fff;
	font-weight: 600;
}

.dashboard-app .dashboard-grid-1 {
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: 12px;
}

.dashboard-app .dashboard-grid-2 {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.dashboard-app .dashboard-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
}

.dashboard-app .dashboard-grid-3-461 {
	display: grid;
	grid-template-columns: 4fr 1fr 1fr;
	gap: 12px;
}

/* 3 kolommen: smal / breed / breed (postcode, plaats, land) */
.dashboard-app .dashboard-grid-3-122 {
	display: grid;
	grid-template-columns: 1fr 2fr 2fr;
	gap: 12px;
}

/* Verhuurder bedrijfsgegevens: 80/20 grid (velden links, logo rechts) */
.dashboard-app .dashboard-company-topgrid {
	display: grid;
	grid-template-columns: 4fr 1fr;
	gap: 12px;
	align-items: start;
}

.dashboard-app .dashboard-company-logo-preview {
	margin-top: 10px;
	display: flex;
	justify-content: center;
}

.dashboard-app .dashboard-company-logo-preview img {
	max-width: 100%;
	height: auto;
	max-height: 90px;
	border: 1px solid rgba(0,0,0,0.10);
	border-radius: 10px;
	background: #fff;
	padding: 6px;
}

/* Textareas in dit formulier standaard compacter (2 regels), wel resizable */
.dashboard-app .dashboard-company-form textarea {
	min-height: 46px;
	resize: vertical;
}

.dashboard-app .dashboard-company-form .dashboard-form-section {
	padding: 10px 12px;
	margin: 8px 0;
}

.dashboard-app .dashboard-company-form .dashboard-form-section h3,
.dashboard-app .dashboard-company-form .dashboard-form-section h4,
.dashboard-app .dashboard-company-form .dashboard-form-section h5 {
	margin: 0 0 6px;
	line-height: 1.2;
}

.dashboard-app .dashboard-company-form .dashboard-help {
	margin: 2px 0 0;
	font-size: 12px;
	line-height: 1.35;
}

.dashboard-app .dashboard-company-form .dashboard-field {
	margin-bottom: 8px;
}

.dashboard-app .dashboard-company-form .dashboard-grid-1,
.dashboard-app .dashboard-company-form .dashboard-grid-2,
.dashboard-app .dashboard-company-form .dashboard-grid-3,
.dashboard-app .dashboard-company-form .dashboard-grid-3-461,
.dashboard-app .dashboard-company-form .dashboard-grid-3-122,
.dashboard-app .dashboard-company-form .dashboard-company-topgrid {
	gap: 10px;
}

.dashboard-app .dashboard-company-form .dashboard-field > label {
	margin-bottom: 3px;
	font-size: 12px;
}

.dashboard-app .dashboard-company-form .dashboard-field input[type="text"],
.dashboard-app .dashboard-company-form .dashboard-field input[type="email"],
.dashboard-app .dashboard-company-form .dashboard-field input[type="number"],
.dashboard-app .dashboard-company-form .dashboard-field input[type="date"],
.dashboard-app .dashboard-company-form .dashboard-field input[type="password"],
.dashboard-app .dashboard-company-form .dashboard-field textarea,
.dashboard-app .dashboard-company-form .dashboard-field select {
	padding: 8px 10px;
}

.dashboard-app .dashboard-company-settings-section .dashboard-company-settings-grid {
	align-items: start;
}

.dashboard-app .dashboard-company-settings-card {
	height: 100%;
}

.dashboard-app .dashboard-company-settings-card .dashboard-card-header {
	padding: 10px 12px;
}

.dashboard-app .dashboard-company-settings-card .dashboard-card-body {
	padding: 10px 12px;
}

.dashboard-app .dashboard-company-settings-card .dashboard-checkbox {
	margin-top: 4px;
}

.dashboard-app .dashboard-company-finance-summary-grid {
	margin-top: 8px;
}

.dashboard-app .dashboard-company-finance-summary-grid .dashboard-static-field + .dashboard-static-field {
	margin-top: 6px;
}

.dashboard-app .dashboard-company-finance-summary-grid .dashboard-actions-row {
	margin-top: 8px;
}

.dashboard-app .dashboard-static-field {
	/* Lijkt op form field, maar zonder input-border */
	align-self: end;
}

.dashboard-app .dashboard-static-label {
	font-size: 12px;
	font-weight: 600;
	color: rgba(0,0,0,0.58);
	margin: 0 0 4px;
}

.dashboard-app .dashboard-static-value {
	font-size: 13px;
	font-weight: 800;
	color: rgba(0,0,0,0.85);
	padding: 6px 8px;
	line-height: 1.3;
}

@media (max-width: 820px) {
	.dashboard-app .dashboard-grid-2,
	.dashboard-app .dashboard-grid-3,
	.dashboard-app .dashboard-grid-3-461,
	.dashboard-app .dashboard-grid-3-122,
	.dashboard-app .dashboard-company-topgrid {
		grid-template-columns: 1fr;
	}
}

.dashboard-app .dashboard-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 700;
}

.dashboard-app .dashboard-password-field,
.dashboard-password-field {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dashboard-app .dashboard-password-field input,
.dashboard-password-field input {
	flex: 1 1 auto;
	min-width: 0;
}

.dashboard-app .dashboard-permissions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px 18px;
	font-size: 14px;
}

@media (max-width: 900px) {
	.dashboard-app .dashboard-permissions {
		grid-template-columns: 1fr;
	}
}

.dashboard-app .dashboard-permission-row {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	line-height: 1.25;
}

.dashboard-app .dashboard-permission-row input[type="checkbox"] {
	margin: 2px 0 0 0;
}
.dashboard-app .dashboard-user-photo-preview,
.dashboard-user-photo-preview {
	width: 250px;
	height: 250px;
	max-width: 250px;
	max-height: 250px;
	border-radius: 14px;
	border: 1px solid rgba(0,0,0,0.14);
	overflow: hidden;
	background: rgba(0,0,0,0.03);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 6px 6px 0 rgba(0,0,0,0.08);
	flex: 0 0 auto;
}

.dashboard-app .dashboard-user-photo-preview img,
.dashboard-user-photo-preview img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.dashboard-app .dashboard-avatar {
	width: 38px;
	height: 38px;
	border-radius: 10px;
	border: 1px solid rgba(0,0,0,0.10);
	background: rgba(0,0,0,0.04);
	overflow: hidden;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.dashboard-app .dashboard-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* ===== Admin module header & tabs ===== */
.dashboard-app .dashboard-module-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 10px 0 12px;
}

.dashboard-app .dashboard-module-title {
	margin: 0;
	font-size: 22px;
	line-height: 1.2;
}

.dashboard-app .dashboard-module-subtitle {
	margin: 6px 0 0;
	font-weight: 700;
	color: rgba(0,0,0,0.60);
}

.dashboard-app .dashboard-tabs {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
	margin: 8px 0 14px;
}

.dashboard-app .dashboard-tab {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 8px 12px;
	border-radius: 999px;
	border: 1px solid rgba(0,0,0,0.12);
	background: #fff;
	text-decoration: none;
	font-weight: 800;
	color: rgba(0,0,0,0.78);
}

.dashboard-app .dashboard-tab:hover {
	background: rgba(0,0,0,0.04);
}

.dashboard-app .dashboard-tab.is-active {
	background: #1b5cff;
	border-color: #1b5cff;
	color: #fff;
}

/* ===== Settings / placeholders ===== */
.dashboard-app .dashboard-placeholder-box {
	background: #fff;
	border: 1px dashed rgba(0,0,0,0.20);
	border-radius: 12px;
	padding: 14px 16px;
	margin: 12px 0;
}

.dashboard-app .dashboard-placeholder-box h3 {
	margin: 0 0 8px;
}

.dashboard-app .dashboard-placeholder-box p {
	margin: 0;
	font-weight: 600;
	color: rgba(0,0,0,0.70);
}

/* ===== Maintenance ===== */
.dashboard-app .dashboard-maintenance-box {
	background: #fff;
	border: 1px solid rgba(0,0,0,0.10);
	border-radius: 12px;
	padding: 16px 16px;
	margin: 16px 0;
	box-shadow: 0 2px 10px rgba(0,0,0,0.05);
}

.dashboard-app .dashboard-maintenance-box h2 {
	margin: 0 0 8px;
}

.dashboard-app .dashboard-maintenance-box p {
	margin: 0;
	font-weight: 700;
	color: rgba(0,0,0,0.70);
}

/* ===== Nummering / sequences ===== */
.dashboard-app .dashboard-sequence-block {
	border: 1px solid rgba(0,0,0,0.08);
	border-radius: 12px;
	padding: 12px 12px 10px;
	margin: 12px 0;
	background: #ffffff;
}

.dashboard-app .dashboard-sequence-block h4 {
	margin: 0 0 10px;
	font-weight: 900;
}

.dashboard-app .dashboard-sequence-preview {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 8px;
	padding: 10px 12px;
	border-radius: 12px;
	background: #fbfbfb;
	border: 1px dashed rgba(0,0,0,0.18);
	font-weight: 700;
	flex-wrap: wrap;
}

.dashboard-app .dashboard-sequence-preview .label {
	color: rgba(0,0,0,0.65);
}

.dashboard-app .dashboard-sequence-preview code {
	padding: 4px 8px;
	border-radius: 10px;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.10);
	font-weight: 900;
}


/* ===== Tables / badges / email UI ===== */
.dashboard-app .dashboard-muted {
	color: rgba(0,0,0,0.60);
	font-weight: 600;
	font-size: 13px;
	margin-top: 4px;
}

.dashboard-app .dashboard-table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	border: 1px solid rgba(0,0,0,0.10);
	border-radius: 12px;
	overflow: hidden;
}

.dashboard-app .dashboard-table th,
.dashboard-app .dashboard-table td {
	padding: 10px 12px;
	border-bottom: 1px solid rgba(0,0,0,0.08);
	vertical-align: top;
}

.dashboard-app .dashboard-table th {
	text-align: left;
	font-weight: 900;
	background: #fbfbfb;
}

.dashboard-app .dashboard-table tbody tr:hover td {
	background: rgba(0,0,0,0.02);
}

.dashboard-app .dashboard-actions-inline {
	display: inline-flex;
	gap: 30px;
	align-items: center;
	flex-wrap: wrap;
}

.dashboard-app .dashboard-link {
	font-weight: 800;
	color: #1b5cff;
	text-decoration: none;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.dashboard-app .dashboard-link:hover {
	text-decoration: underline;
}

.dashboard-app .dashboard-link.danger {
	color: #b00020;
}

.dashboard-app .dashboard-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 5px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 900;
	border: 1px solid #d7dee7;
	background: #f8fafc;
	color: #475569;
	margin-right: 6px;
}

.dashboard-app .dashboard-badge.is-green {
	background: #eefaf1;
	border-color: #b7e2c1;
	color: #1f7a3f;
}

.dashboard-app .dashboard-badge.is-blue {
	background: #edf4ff;
	border-color: #9fc1ff;
	color: #1d4ed8;
}



.dashboard-app .dashboard-badge.is-red {
	background: #fff1f2;
	border-color: #f2a7b1;
	color: #b42318;
}

.dashboard-app .dashboard-badge.is-gray {
	background: #eef2f6;
	border-color: #c9d3df;
	color: #475569;
}

.dashboard-app .dashboard-badge.is-amber {
	background: #fff6df;
	border-color: #f0c36a;
	color: #9a6700;
}



/* Governance / contract readiness indicator (stoplicht) */
.dashboard-app .dashboard-traffic {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	padding: 10px 12px;
	border: 1px solid rgba(0,0,0,0.10);
	border-radius: 12px;
	background: #fff;
}

.dashboard-app .dashboard-traffic-dot {
	display: inline-block;
	vertical-align: middle;
	width: 12px;
	height: 12px;
	border-radius: 999px;
	margin-top: 3px;
	flex: 0 0 auto;
}

.dashboard-app .dashboard-traffic-dot.is-red {
	background: rgba(190,0,20,1);
	box-shadow: 0 0 0 3px rgba(190,0,20,0.16);
}

.dashboard-app .dashboard-traffic-dot.is-amber {
	background: rgba(190,120,0,1);
	box-shadow: 0 0 0 3px rgba(190,120,0,0.18);
}

.dashboard-app .dashboard-traffic-dot.is-green {
	background: rgba(0,140,30,1);
	box-shadow: 0 0 0 3px rgba(0,140,30,0.18);
}

.dashboard-app .dashboard-traffic-title {
	font-weight: 900;
	margin: 0;
	line-height: 1.2;
}

.dashboard-app .dashboard-traffic-text {
	margin: 2px 0 0 0;
	color: rgba(0,0,0,0.68);
	font-size: 13px;
	line-height: 1.35;
}

.dashboard-app .dashboard-textarea-large {
	min-height: 160px;
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 13px;
	line-height: 1.4;
}

.dashboard-app .dashboard-email-vars {
	display: flex;
	gap: 30px;
	flex-wrap: wrap;
}

.dashboard-app .dashboard-email-vars code {
	padding: 4px 8px;
	border-radius: 10px;
	background: #ffffff;
	border: 1px solid rgba(0,0,0,0.10);
	font-weight: 900;
}

.dashboard-app .dashboard-email-templates-grid {
	align-items: start;
}

/* =========================================================
   Compact UX overrides (v1.1.20)
   - kleinere typografie
   - minder whitespace
   - consistente action bars
   - modal styling
   ========================================================= */

	.dashboard-app{
	  max-width: 1600px;
  padding: 14px 12px 34px;
  font-size: 14px;
  line-height: 1.35;
}

.dashboard-app h2{ font-size: 20px; margin: 0; }
.dashboard-app h3{ font-size: 16px; margin: 0 0 8px; }
.dashboard-app h4{ font-size: 14px; margin: 0 0 6px; }

.dashboard-actions-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin: 8px 0 10px;
}

/* Variants */
.dashboard-actions-row--left{ justify-content: flex-start !important; }
.dashboard-actions-row--right{ justify-content: flex-end !important; }

.dashboard-actions-right{
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 30px;
}

.dashboard-actions-row-footer{
  margin-top: 12px;
}

.dashboard-form-section{
  padding: 10px 12px;
  margin: 10px 0;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

.dashboard-card{
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
  box-shadow: 0 1px 6px rgba(0,0,0,0.04);
}

.dashboard-field{
  margin-bottom: 8px;
}

.dashboard-field label{
  font-weight: 700;
  font-size: 13px;
  margin-bottom: 4px;
}

.dashboard-field input[type="text"],
.dashboard-field input[type="email"],
.dashboard-field input[type="number"],
.dashboard-field input[type="date"],
.dashboard-field input[type="password"],
.dashboard-field select,
.dashboard-field textarea{
  padding: 7px 9px;
  border-radius: 999px;
}

/* Mijn profiel layout */
.dashboard-profile-grid{
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
	gap: 14px;
	align-items: start;
}

.dashboard-profile-full-card{
	margin-top: 14px;
}

.dashboard-profile-details-grid{
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 12px;
}

.dashboard-profile-details-grid--compact{
	gap: 10px;
}

.dashboard-profile-row{
	grid-column: 1 / -1;
	display: grid;
	gap: 10px;
	align-items: start;
}

.dashboard-profile-contact-row{
	grid-template-columns: minmax(160px, .8fr) minmax(220px, 1fr) minmax(220px, 1fr) minmax(140px, .7fr);
}

.dashboard-profile-address-row{
	grid-template-columns: minmax(260px, 2fr) minmax(110px, .65fr) minmax(110px, .65fr) minmax(150px, .85fr) minmax(220px, 1.25fr);
}

.dashboard-profile-region-row{
	grid-template-columns: minmax(220px, 1fr) minmax(220px, 1fr) minmax(220px, 1fr);
}

.dashboard-profile-details-grid--compact .dashboard-field{
	margin-bottom: 0;
}

.dashboard-profile-span-2{ grid-column: span 2; }
.dashboard-profile-span-3{ grid-column: span 3; }
.dashboard-profile-span-4{ grid-column: span 4; }
.dashboard-profile-span-5{ grid-column: span 5; }
.dashboard-profile-span-6{ grid-column: span 6; }

@media (max-width: 900px){
	.dashboard-profile-grid{ grid-template-columns: 1fr; }
	.dashboard-profile-details-grid{ grid-template-columns: 1fr; }
	.dashboard-profile-row,
	.dashboard-profile-contact-row,
	.dashboard-profile-address-row,
	.dashboard-profile-region-row{ grid-template-columns: 1fr; }
	.dashboard-profile-span-2,
	.dashboard-profile-span-3,
	.dashboard-profile-span-4,
	.dashboard-profile-span-5,
	.dashboard-profile-span-6{ grid-column: auto; }
}

/* Maak wachtwoordvelden compacter op Mijn profiel */
.dashboard-profile-grid .dashboard-password-field input[type="password"]{
	max-width: 360px;
}

.dashboard-grid-2,
.dashboard-grid-3{
  gap: 6px;
}

.dashboard-button{
  padding: 8px 12px;
  border-radius: 8px;
  font-weight: 700;
  font-size: 13px;
}

.dashboard-table th,
.dashboard-table td{
  padding: 8px 10px;
  font-size: 13px;
  vertical-align: top;
}

.dashboard-row-archived td{
  opacity: 0.75;
}

.dashboard-radio-row{
  display: flex;
  align-items: center;
  gap: 12px;
}

.dashboard-radio-row label{
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px;
  margin: 0;
  font-weight: 400 !important;
}

.dashboard-radio-row--wrap{
  flex-wrap: wrap;
  gap: 10px 30px;
}

.dashboard-radio-row--stacked{
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

.dashboard-deposit-basis-row label{
  font-weight: 500 !important;
}

.gb-form-details .dashboard-card,
.gb-form-details .dashboard-form-section{
  margin: 10px 0;
}

.gb-card{
  margin: 10px 0;
}

.gb-manage-scope-grid{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  align-items:stretch;
}

.gb-manage-scope-grid > .gb-card{
  margin:0;
}

.gb-manage-scope-grid .dashboard-muted{
  max-width: 24ch;
  line-height: 1.35;
}

@media (max-width: 1500px){
  .gb-manage-scope-grid{
    grid-template-columns:repeat(3,minmax(0,1fr));
  }
}

@media (max-width: 1100px){
  .gb-manage-scope-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

@media (max-width: 760px){
  .gb-manage-scope-grid{
    grid-template-columns:minmax(0,1fr);
  }
}

.dashboard-muted{
  font-size: 12px;
}

.dashboard-doc-upload-status{
  font-size: 12px;
}

.dashboard-details{
  margin-top: 10px;
  padding-top: 8px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.dashboard-details > summary{
  cursor: pointer;
  font-weight: 800;
  list-style: none;
}

.dashboard-details > summary::marker{
  font-size: 22px;
}

.dashboard-details > summary::-webkit-details-marker{
  display:none;
}

.dashboard-row-primary td{
  background: rgba(0,0,0,0.03);
}

.dashboard-table:not(.dashboard-contracts-overview-table) .dashboard-actions-cell{
  white-space: nowrap;
}

.dashboard-table:not(.dashboard-contracts-overview-table) .dashboard-actions-cell .dashboard-button{
  margin-right: 6px;
}

/* Modal */
.dashboard-modal-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.30);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 99999;
  padding: 16px;
}

.dashboard-modal-overlay.is-open{
  display: flex;
  align-items: center;
  justify-content: center;
}

.dashboard-modal-overlay .dashboard-modal{
  width: 60vw;
  max-width: 980px;
  min-width: 600px;
  max-height: 90vh;
  overflow: auto;
  border-radius: 12px;
  border: 1px solid rgba(0,0,0,0.10);
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  padding: 12px 14px;
  font-size: 13px;
}

.dashboard-modal-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}

.dashboard-modal-close{
  white-space: nowrap;
}
/* ========================================================================== */
/* UX compact tweaks (Sprint C UX) - v1.1.21 */
/* ========================================================================== */

.dashboard-app {
	font-size: 14px;
}

.dashboard-app .dashboard-module-title {
	font-size: 20px;
	margin: 12px 0 12px;
}

.dashboard-app .dashboard-form-section {
	padding: 12px 14px;
	margin: 12px 0;
}

.dashboard-app .dashboard-form-section h3 {
	font-size: 15px;
	margin: 0 0 10px;
}

.dashboard-app .dashboard-grid-2,
.dashboard-app .dashboard-grid-3 {
	gap: 10px;
}

.dashboard-app .dashboard-field {
	margin-bottom: 10px;
}

.dashboard-app .dashboard-field > label {
	font-size: 12px;
	margin-bottom: 4px;
}

.dashboard-app .dashboard-field input[type="text"],
.dashboard-app .dashboard-field input[type="email"],
.dashboard-app .dashboard-field input[type="number"],
.dashboard-app .dashboard-field input[type="date"],
.dashboard-app .dashboard-field input[type="password"],
.dashboard-app .dashboard-field select,
.dashboard-app .dashboard-field textarea {
	padding: 7px 10px;
	border-radius: 10px;
	font-size: 13px;
}

.dashboard-app .dashboard-field textarea {
	min-height: 90px;
}

.dashboard-app .dashboard-button {
	padding: 7px 12px;
	border-radius: 999px;
	font-size: 13px;
}

.dashboard-app .dashboard-button-small {
	padding: 5px 10px;
	font-size: 12px;
}

.dashboard-app .dashboard-mergefield-item {
	width: 100%;
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	text-align: left;
	white-space: normal;
	border-radius: 12px;
	padding: 8px 10px;
}

.dashboard-app .dashboard-mergefield-key {
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size: 12px;
	line-height: 1.2;
}

.dashboard-app .dashboard-mergefield-label {
	font-size: 11px;
	line-height: 1.2;
	opacity: 0.8;
}

.dashboard-app .dashboard-muted {
	font-size: 12px;
}

/* Page header actions (titel + knoppen rechts) */
.dashboard-page-header {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin: 6px 0 14px;
}

.dashboard-page-header h2 {
	margin: 0;
	font-size: 18px;
	line-height: 1.2;
}

.dashboard-page-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 30px;
	flex-wrap: wrap;
}

.dashboard-page-footer-actions {
	margin-top: 14px;
}

/* Section header with actions (zoals contactpersonen) */
.dashboard-section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
	margin-bottom: 10px;
}

/* Compact tables */
.dashboard-card--table {
	padding: 0;
	overflow-x: auto;
	border-radius: 12px;
}

.dashboard-table--compact th,
.dashboard-table--compact td {
	padding: 4px 8px;
	font-size: 14px;
	vertical-align: middle;
}

/* C3b – Plan catalogus compact (Producten & prijzen) */
.dashboard-placeholder-box--compact {
	padding: 14px;
}

.dashboard-button-add {
	background: #1b5cff;
	border-color: #1b5cff;
	color: #fff;
}

.dashboard-button-add:hover {
	filter: brightness(0.9);
}

.dashboard-plan-table .dashboard-col-price {
	width: 220px;
}

.dashboard-price-input-wrap {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

.dashboard-input--price {
	width: 160px;
	max-width: 100%;
	font-size: 14px;
	padding: 7px 10px;
	height: 36px;
	border-radius: 10px;
}

.dashboard-plan-tier h2 {
	font-size: 18px;
}

/* Archive details */
.dashboard-documents-archive {
	margin-top: 12px;
}

.dashboard-documents-archive summary {
	cursor: pointer;
	font-weight: 600;
}

.dashboard-documents-archive summary.dashboard-doc-archive-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.dashboard-documents-archive summary.dashboard-doc-archive-summary .dashboard-doc-archive-summary-title {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.dashboard-documents-archive summary.dashboard-doc-archive-summary .dashboard-doc-bulk-actions {
	display: inline-flex;
	gap: 6px;
	align-items: center;
}

.dashboard-documents-archive .dashboard-doc-check-col {
	width: 38px;
}

.dashboard-documents-archive .dashboard-doc-check-col input[type="checkbox"] {
	margin: 0;
}

/* Modal */
.dashboard-modal[id] {
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 99999;
	background: rgba(0,0,0,0.35);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 16px;
}

.dashboard-modal[id][aria-hidden="true"] {
	display: none;
}

.dashboard-modal-dialog {
	background: #fff;
	border-radius: 14px;
	width: min(760px, 100%);
	max-height: calc(100vh - 32px);
	overflow: auto;
	box-shadow: 0 18px 50px rgba(0,0,0,0.25);
}

/* Wide modal (used for Archief overlay) */
.dashboard-modal-dialog--wide {
	width: 90vw !important;
	max-width: 90vw !important;
	height: 90vh !important;
	max-height: 90vh !important;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

/* Archief modal sizing fallback (forces 90% viewport even if --wide class is missing) */
#dashboard-archive-modal .dashboard-modal-dialog {
	width: 90vw !important;
	max-width: 90vw !important;
	height: 90vh !important;
	max-height: 90vh !important;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#dashboard-archive-modal .dashboard-modal-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

#dashboard-archive-modal .dashboard-modal-body iframe {
	flex: 1;
	min-height: 0;
	width: 100%;
	border: 0;
}

/* Archief modal sizing fallback (legacy overlay structure: dashboard-modal-overlay + dashboard-modal) */
#dashboard-archive-modal.dashboard-modal-overlay .dashboard-modal {
	width: 90vw !important;
	max-width: 90vw !important;
	height: 90vh !important;
	max-height: 90vh !important;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#dashboard-archive-modal.dashboard-modal-overlay .dashboard-modal-body {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

#dashboard-archive-modal.dashboard-modal-overlay .dashboard-modal-body iframe {
	flex: 1;
	min-height: 0;
	width: 100%;
	border: 0;
	height: 100% !important;
}

/* Force iframe to scale inside 90vh dialog even if inline height is present */
#dashboard-archive-modal .dashboard-modal-body iframe {
	height: 100% !important;
}


.dashboard-modal-dialog--wide .dashboard-modal-body {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.dashboard-modal-body--archive {
	gap: 12px;
}

.dashboard-archive-iframe {
	flex: 1;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 12px;
	background: #fff;
}

.dashboard-modal-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-bottom: 1px solid #eee;
}

.dashboard-modal-body {
	padding: 12px 14px 14px;
}

.dashboard-app .dashboard-renter-email-modal-overlay {
	padding: 24px;
	background: rgba(15, 23, 42, 0.34);
}

.dashboard-app .dashboard-renter-email-modal {
	--dashboard-premium-grey-strong: rgba(243, 243, 243, 0.96);
	--dashboard-premium-grey-soft: rgba(243, 243, 243, 0.82);
	--dashboard-premium-grey-faint: rgba(247, 247, 247, 0.98);
	--dashboard-premium-border-soft: rgba(15, 23, 42, 0.05);
	--dashboard-premium-shadow-soft: rgba(15, 23, 42, 0.07);
	width: min(1180px, 96vw);
	max-width: 1180px;
	min-width: min(760px, 92vw);
	padding: 0;
	border-radius: 20px;
	border: 1px solid rgba(15, 23, 42, 0.08);
	box-shadow: 0 30px 80px rgba(15, 23, 42, 0.24);
	overflow: hidden;
}

.dashboard-app .dashboard-renter-email-modal__header {
	padding: 22px 24px 18px;
	border-bottom: 1px solid rgba(15, 23, 42, 0.08);
	background:
		linear-gradient(180deg, rgba(248, 250, 252, 0.96), rgba(255, 255, 255, 0.98)),
		linear-gradient(135deg, rgba(31, 95, 191, 0.06), rgba(15, 118, 110, 0.05));
}

.dashboard-app .dashboard-renter-email-modal__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 10px;
	border-radius: 999px;
	background: rgba(31, 95, 191, 0.08);
	color: #1f5fbf;
	font-size: 11px;
	font-weight: 800;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.dashboard-app .dashboard-renter-email-modal__title {
	margin: 10px 0 0;
	font-size: 24px;
	line-height: 1.15;
}

.dashboard-app .dashboard-renter-email-modal__subtitle {
	margin-top: 6px;
	font-size: 14px;
	line-height: 1.5;
	color: rgba(32, 38, 46, 0.72);
}

.dashboard-app .dashboard-renter-email-modal__body {
	padding: 0;
	background: linear-gradient(180deg, rgba(243, 243, 243, 0.92) 0%, rgba(243, 243, 243, 0.72) 100%);
}

.dashboard-app .dashboard-renter-email-compose {
	display: grid;
	grid-template-columns: minmax(0, 1.7fr) minmax(280px, 0.9fr);
	gap: 0;
	align-items: stretch;
}

.dashboard-app .dashboard-renter-email-compose__main {
	padding: 24px;
}

.dashboard-app .dashboard-renter-email-compose__side {
	padding: 24px 24px 24px 0;
}

.dashboard-app .dashboard-premium-compose-panel,
.dashboard-app .dashboard-renter-email-sheet {
	padding: 24px 24px 22px;
	border-radius: 22px;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(250, 250, 250, 0.98) 100%);
	border: 1px solid rgba(15, 23, 42, 0.05);
	box-shadow: 0 18px 42px rgba(15, 23, 42, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.dashboard-app .dashboard-premium-meta,
.dashboard-app .dashboard-renter-email-meta {
	display: grid;
	gap: 10px;
	margin-bottom: 22px;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: hidden;
}

.dashboard-app .dashboard-premium-meta__row,
.dashboard-app .dashboard-renter-email-meta__row {
	display: grid;
	grid-template-columns: 66px minmax(0, 1fr);
	align-items: start;
	gap: 10px;
}

.dashboard-app .dashboard-premium-meta__label,
.dashboard-app .dashboard-renter-email-meta__label {
	padding: 8px 0 0 4px;
	font-size: 10px;
	font-weight: 700;
	color: rgba(32, 38, 46, 0.48);
	text-transform: uppercase;
	letter-spacing: 0.09em;
}

.dashboard-app .dashboard-premium-meta__value,
.dashboard-app .dashboard-renter-email-meta__value {
	padding: 0;
}

.dashboard-app .dashboard-premium-meta__surface {
	display: flex;
	align-items: center;
	min-height: 34px;
	padding: 0 4px 6px;
	border-radius: 0;
	border: 0;
	border-bottom: 1px solid rgba(15, 23, 42, 0.16);
	background: linear-gradient(180deg, rgba(243, 243, 243, 0.38) 0%, rgba(243, 243, 243, 0.14) 100%);
	box-shadow: none;
}

.dashboard-app .dashboard-renter-email-meta__surface {
	padding-left: 6px;
	padding-right: 2px;
}

.dashboard-app .dashboard-renter-email-meta__text,
.dashboard-app .dashboard-premium-meta__surface .dashboard-renter-email-meta__text {
	display: block;
	width: 100%;
	font-size: 13.5px;
	font-weight: 500;
	line-height: 1.35;
	color: #20262e;
	letter-spacing: -0.01em;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.dashboard-app .dashboard-renter-email-form-grid {
	display: grid;
	gap: 18px;
}

.dashboard-app .dashboard-renter-email-field {
	margin: 0;
}

.dashboard-app .dashboard-renter-email-template-field {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(15, 23, 42, 0.045);
}

.dashboard-app .dashboard-premium-field {
	display: grid;
	gap: 7px;
}

.dashboard-app .dashboard-premium-field__label,
.dashboard-app .dashboard-renter-email-message-field > label,
.dashboard-app .dashboard-renter-email-form-grid .dashboard-renter-email-field > label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: rgba(32, 38, 46, 0.5);
	padding-left: 3px;
}

.dashboard-app .dashboard-premium-field__control {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0 12px;
	border-radius: 14px;
	border: 1px solid rgba(15, 23, 42, 0.045);
	background: linear-gradient(180deg, rgba(247, 247, 247, 0.94) 0%, rgba(243, 243, 243, 0.82) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.92), 0 2px 8px rgba(15, 23, 42, 0.025);
}

.dashboard-app .dashboard-premium-field__control--select {
	position: relative;
}

.dashboard-app .dashboard-premium-field__control--select::after {
	content: "";
	position: absolute;
	right: 16px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 1.5px solid rgba(32, 38, 46, 0.44);
	border-bottom: 1.5px solid rgba(32, 38, 46, 0.44);
	transform: translateY(-65%) rotate(45deg);
	pointer-events: none;
}

.dashboard-app .dashboard-premium-field__control input[type="text"],
.dashboard-app .dashboard-premium-field__control select,
.dashboard-app .dashboard-renter-email-form-grid .dashboard-renter-email-field input[type="text"],
.dashboard-app .dashboard-renter-email-form-grid .dashboard-renter-email-field select {
	width: 100%;
	min-height: 0;
	padding: 0;
	border-radius: 0;
	border: 0;
	background: transparent;
	box-shadow: none;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.3;
	color: #18202a;
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	box-sizing: border-box;
}

.dashboard-app .dashboard-premium-field__control select {
	padding-right: 28px;
	cursor: pointer;
}

.dashboard-app .dashboard-renter-email-subject-field__control {
	min-height: 40px;
	padding: 0 10px;
	border-radius: 12px;
}

.dashboard-app .dashboard-renter-email-subject-field__control input[type="text"] {
	font-size: 12.5px;
	line-height: 1.25;
}

.dashboard-app .dashboard-renter-email-modal .dashboard-renter-email-field .dashboard-premium-field__control input[type="text"],
.dashboard-app .dashboard-renter-email-modal .dashboard-renter-email-field .dashboard-premium-field__control select {
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

.dashboard-app .dashboard-premium-field__control input[type="text"]::placeholder {
	color: rgba(32, 38, 46, 0.38);
}

.dashboard-app .dashboard-premium-field__control:focus-within,
.dashboard-app .dashboard-premium-meta__surface:focus-within,
.dashboard-app .dashboard-renter-email-editor-frame:focus-within {
	border-color: rgba(31, 95, 191, 0.18);
	box-shadow: 0 0 0 4px rgba(31, 95, 191, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.92);
}

.dashboard-app .dashboard-premium-field__hint,
.dashboard-app .dashboard-renter-email-help {
	margin: 2px 0 0;
	padding-left: 3px;
	color: rgba(32, 38, 46, 0.58);
	font-size: 11.5px;
	line-height: 1.5;
}

.dashboard-app .dashboard-renter-email-editor-frame {
	border: 1px solid rgba(15, 23, 42, 0.05);
	border-radius: 20px;
	background: linear-gradient(180deg, rgba(247, 247, 247, 0.92) 0%, rgba(243, 243, 243, 0.8) 100%);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.88), 0 10px 24px rgba(15, 23, 42, 0.035);
	overflow: hidden;
}

.dashboard-app .dashboard-renter-email-editor-frame .wp-editor-wrap {
	border: 0;
}

.dashboard-app .dashboard-renter-email-editor-frame .wp-editor-tools {
	padding: 12px 14px 2px;
	background: linear-gradient(180deg, rgba(247, 247, 247, 0.98) 0%, rgba(243, 243, 243, 0.86) 100%);
}

.dashboard-app .dashboard-renter-email-editor-frame .wp-editor-container {
	border: 0;
}

.dashboard-app .dashboard-renter-email-editor-frame .quicktags-toolbar,
.dashboard-app .dashboard-renter-email-editor-frame .mce-toolbar-grp {
	border: 0;
	background: transparent;
}

.dashboard-app .dashboard-renter-email-editor-frame .mce-statusbar {
	border-top: 1px solid rgba(15, 23, 42, 0.05);
	background: rgba(245, 245, 245, 0.92);
}

.dashboard-app .dashboard-renter-email-editor-frame textarea,
.dashboard-app .dashboard-renter-email-editor-frame iframe {
	min-height: 320px;
}

.dashboard-app .dashboard-renter-email-editor-fallback {
	width: 100%;
	min-height: 320px;
	padding: 18px 20px;
	border: 0;
	border-radius: 0;
	font-size: 15px;
	line-height: 1.65;
	font-family: "Segoe UI", Calibri, Arial, sans-serif;
	resize: vertical;
	background: rgba(255, 255, 255, 0.98);
}

.dashboard-app .dashboard-renter-email-activity {
	height: 100%;
	padding: 20px;
	border-radius: 22px;
	border: 1px solid rgba(15, 23, 42, 0.04);
	background: linear-gradient(180deg, rgba(246, 246, 246, 0.82) 0%, rgba(243, 243, 243, 0.7) 100%);
	backdrop-filter: blur(10px);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.72), 0 10px 24px rgba(15, 23, 42, 0.025);
}

.dashboard-app .dashboard-renter-email-activity__title {
	margin: 0;
	font-size: 15px;
	line-height: 1.35;
}

.dashboard-app .dashboard-renter-email-activity__intro {
	margin: 6px 0 0;
	font-size: 12px;
}

.dashboard-app .dashboard-renter-email-activity__empty {
	margin: 16px 0 0;
	line-height: 1.55;
}

.dashboard-app .dashboard-renter-email-activity__list {
	display: grid;
	gap: 12px;
	margin-top: 16px;
}

.dashboard-app .dashboard-renter-email-activity__item {
	padding: 13px 15px;
	border-radius: 16px;
	border: 1px solid rgba(15, 23, 42, 0.045);
	background: rgba(255, 255, 255, 0.94);
	box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.dashboard-app .dashboard-renter-email-activity__item-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.dashboard-app .dashboard-renter-email-activity__item-headline {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.dashboard-app .dashboard-renter-email-activity__time,
.dashboard-app .dashboard-renter-email-activity__error {
	font-size: 12px;
}

.dashboard-app .dashboard-renter-email-activity__item-body {
	margin-top: 8px;
	font-size: 13px;
	line-height: 1.5;
	color: #20262e;
}

.dashboard-app .dashboard-renter-email-modal__footer {
	padding: 16px 24px 22px;
	border-top: 1px solid rgba(15, 23, 42, 0.045);
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.96) 0%, rgba(250, 250, 250, 0.96) 100%);
}

.dashboard-modal-close {
	appearance: none;
	border: 0;
	background: transparent;
	font-size: 22px;
	line-height: 1;
	padding: 4px 8px;
	cursor: pointer;
}

.dashboard-actions-row--modal {
	display: flex;
	justify-content: flex-end !important;
	gap: 18px !important;
	margin-top: 12px;
}

/* Ensure radio rows stay horizontal */
.dashboard-app .dashboard-radio-row {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
}

.dashboard-app .dashboard-radio-row label {
	margin: 0;
}

/* Responsive */
@media (max-width: 980px) {
	.dashboard-app .dashboard-grid-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.dashboard-app .dashboard-grid-2,
	.dashboard-app .dashboard-grid-3 {
		grid-template-columns: 1fr;
	}
	.dashboard-page-header {
		align-items: flex-start;
	}
	.dashboard-page-actions {
		justify-content: flex-start;
	}
	.dashboard-app .dashboard-renter-email-modal-overlay {
		padding: 12px;
	}
	.dashboard-app .dashboard-renter-email-modal {
		min-width: 0;
		width: 100%;
	}
	.dashboard-app .dashboard-renter-email-compose {
		grid-template-columns: 1fr;
	}
	.dashboard-app .dashboard-renter-email-compose__main {
		padding: 16px;
	}
	.dashboard-app .dashboard-renter-email-compose__side {
		padding: 0 16px 16px;
	}
	.dashboard-app .dashboard-premium-meta__row,
	.dashboard-app .dashboard-renter-email-meta__row {
		grid-template-columns: 1fr;
		gap: 4px;
	}
	.dashboard-app .dashboard-premium-meta__label,
	.dashboard-app .dashboard-renter-email-meta__label {
		padding: 0 2px;
	}
	.dashboard-app .dashboard-renter-email-meta__value {
		padding: 0;
	}
	.dashboard-app .dashboard-renter-email-modal__header {
		padding: 18px 18px 16px;
	}
	.dashboard-app .dashboard-renter-email-modal__footer {
		padding: 14px 18px 18px;
	}
}

/* =========================================================
   v1.1.22 - UX baseline (knoppen + compacte formulieren)
   ========================================================= */

/* Titelafstand (o.a. "Klant bewerken") */
.dashboard-page-header{
  margin: 40px 0 20px;
}

/* Actieknoppen: meer ruimte tussen knoppen */
.dashboard-page-actions{
  gap: 32px;
}
.dashboard-actions-row{
  gap: 32px;
}

/* Compactere velden (norm voor SAAS frontend) */
.dashboard-app .dashboard-form-section h3{
  font-size: 15px;
  margin: 0 0 10px;
}
.dashboard-app .dashboard-field > label{
  font-size: 12px;
  margin: 0 0 6px;
}
.dashboard-app .dashboard-field input,
.dashboard-app .dashboard-field select,
.dashboard-app .dashboard-field textarea{
  font-size: 13px;
  padding: 4px 8px;
  min-height: 36px;
}
.dashboard-app .dashboard-field textarea{
  min-height: 90px;
}

/* Knoppen: standaard donkergrijs (#808080) met wit font */
.dashboard-app .dashboard-button,
.dashboard-button{
  background: #808080;
  border-color: #6f6f6f;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 36px;
  font-size: 13px;
  font-weight: 800;
  transition: transform .12s ease, filter .12s ease, background-color .12s ease, border-color .12s ease;
}

.dashboard-app .dashboard-button:hover,
.dashboard-button:hover{
  transform: scale(1.1);
  filter: brightness(1.05);
}

.dashboard-app .dashboard-button:active,
.dashboard-button:active{
  transform: scale(1.08);
  filter: brightness(0.9);
}

/* Variants */
.dashboard-app .dashboard-button-primary,
.dashboard-button-primary{
  background: #808080;
  border-color: #6f6f6f;
}

.dashboard-app .dashboard-button-secondary,
.dashboard-button-secondary{
  background: #808080;
  border-color: #6f6f6f;
  color: #fff;
}

/* Zoeken: blauw (consistent met links/tiles) */
.dashboard-app .dashboard-button-search,
.dashboard-button-search{
  background: #1b5cff;
  border-color: #1547c9;
  color: #fff;
}

.dashboard-app .dashboard-button-danger,
.dashboard-button-danger{
  background: #c62828;
  border-color: #a61f1f;
  color: #fff;
}

.dashboard-app .dashboard-button-view,
.dashboard-button-view{
  background: #2e7d32;
  border-color: #256628;
  color: #fff;
}


.dashboard-app .dashboard-button-archive,
.dashboard-button-archive{
  background: #c96a00;
  border-color: #a85600;
  color: #fff;
}

/* Kleine buttons behouden hoogte */
.dashboard-app .dashboard-button-small,
.dashboard-button-small{
  min-height: 36px;
}

/* Abonnement-terms */
.dashboard-subscription-terms{
  margin-top: 8px;
  color: #555;
  font-size: 12px;
}


/* Document type/categorie dropdown in documenten-tabel */
.dashboard-doc-category-cell {
	white-space: nowrap;
}

.dashboard-doc-category-select {
	max-width: 240px;
}

.dashboard-doc-category-status {
	margin-left: 6px;
	font-size: 12px;
}


/* Sprint 1.1.32.S - UX tweaks */
.dashboard-app .dashboard-button-secondary:hover,
.dashboard-button-secondary:hover{
	color: #808080;
}

/* Kleine hulptekst achter label (max 10px) */
.dashboard-app .dashboard-label-help{
	font-size: 10px;
	font-weight: 400;
	color: rgba(0,0,0,0.55);
	margin-left: 6px;
}

/* Archief filterbar: gelijke breedte/hoogte voor selects en input */
.dashboard-app .dashboard-archive-filters select,
.dashboard-app .dashboard-archive-filters input[type="text"]{
	width: 100%;
	box-sizing: border-box;
	height: 38px;
	min-height: 38px;
}


/* Password visibility toggles */
.dashboard-app .dashboard-input-row {
	display: flex;
	align-items: center;
	gap: 10px;
}

.dashboard-app .dashboard-input-row input {
	flex: 1;
	min-width: 0;
}

.dashboard-app .dashboard-pass-toggle {
	white-space: nowrap;
	padding: 10px 12px;
	border-radius: 12px;
	border: 1px solid rgba(0,0,0,0.16);
	background: rgba(255,255,255,0.96);
	cursor: pointer;
	font-weight: 700;
}

/* =========================================================
   Sprint 1.2.01.B2e – Gebruikersbeheer UI/UX refinements
   ========================================================= */

/* 4-koloms grid (o.a. Contact & pasfoto) */
.dashboard-app .dashboard-grid-4,
.dashboard-grid-4 {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}


/* 4-koloms grid met 30/30/20/20 verdeling (Particulier: Woning) */
.dashboard-app .dashboard-grid-4-302020,
.dashboard-grid-4-302020 {
	display: grid;
	grid-template-columns: 3fr 3fr 2fr 2fr;
	gap: 16px;
	align-items: start;
}

.dashboard-app .dashboard-reservation-pricing-grid,
.dashboard-reservation-pricing-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.dashboard-app .dashboard-reservation-services-grid,
.dashboard-reservation-services-grid {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 16px;
	align-items: start;
}

.dashboard-app .dashboard-reservation-form .dashboard-reservation-services-grid,
.dashboard-reservation-form .dashboard-reservation-services-grid {
	display: grid !important;
	grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
	gap: 16px;
	align-items: start;
}

.dashboard-app .dashboard-reservation-other-costs {
	display: grid;
	gap: 8px;
	margin-bottom: 10px;
}

@media (max-width: 980px) {
	.dashboard-app .dashboard-grid-4-302020,
	.dashboard-grid-4-302020,
	.dashboard-app .dashboard-reservation-pricing-grid,
	.dashboard-reservation-pricing-grid,
	.dashboard-app .dashboard-reservation-services-grid,
	.dashboard-reservation-services-grid,
	.dashboard-app .dashboard-reservation-form .dashboard-reservation-services-grid,
	.dashboard-reservation-form .dashboard-reservation-services-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}
}

@media (max-width: 720px) {
	.dashboard-app .dashboard-grid-4-302020,
	.dashboard-grid-4-302020,
	.dashboard-app .dashboard-reservation-pricing-grid,
	.dashboard-reservation-pricing-grid,
	.dashboard-app .dashboard-reservation-services-grid,
	.dashboard-reservation-services-grid,
	.dashboard-app .dashboard-reservation-form .dashboard-reservation-services-grid,
	.dashboard-reservation-form .dashboard-reservation-services-grid {
		grid-template-columns: 1fr !important;
	}
}

/* Larger gap grid (used e.g. in Units / ruimtes form) */
.dashboard-grid-2-lg {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 40px;
	row-gap: 12px;
}

@media (max-width: 768px) {
	.dashboard-grid-2-lg {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 980px) {
	.dashboard-app .dashboard-grid-4,
	.dashboard-grid-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.dashboard-app .dashboard-grid-4,
	.dashboard-grid-4 {
		grid-template-columns: 1fr;
	}
}

/* Pasfoto veld rechts uitlijnen */
.dashboard-app .dashboard-field-photo,
.dashboard-field-photo {
	align-self: start;
}

.dashboard-app .dashboard-field-photo input[type="file"],
.dashboard-field-photo input[type="file"] {
	width: 100%;
}

/* Portrait preview (180x220) */
.dashboard-app .dashboard-user-photo-preview--portrait,
.dashboard-user-photo-preview--portrait {
	width: 180px;
	height: 220px;
	border-radius: 14px;
	background: #f7f7f7;
	border: 1px solid #e6e6e6;
	box-shadow: 6px 6px 0 rgba(0,0,0,0.06);
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 10px;
}

.dashboard-app .dashboard-user-photo-preview--portrait img,
.dashboard-user-photo-preview--portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

/* Rechten: 2 kolommen, elke permissie op eigen regel */
.dashboard-app .dashboard-permissions,
.dashboard-permissions {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px 24px;
	font-size: 13px;
}

@media (max-width: 720px) {
	.dashboard-app .dashboard-permissions,
	.dashboard-permissions {
		grid-template-columns: 1fr;
	}
}

.dashboard-app .dashboard-permission-row,
.dashboard-permission-row {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	font-weight: 600;
	line-height: 1.35;
}

.dashboard-app .dashboard-permission-row input[type="checkbox"],
.dashboard-permission-row input[type="checkbox"] {
	margin-top: 2px;
}


/* Support-impersonatie banner */
.dashboard-support-banner{
	border: 1px solid rgba(0,0,0,0.10);
	background: rgba(255, 245, 220, 0.9);
	padding: 10px 14px;
	border-radius: 14px;
	margin: 0 0 12px 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.dashboard-support-banner .dashboard-support-banner-text{
	font-size: 14px;
	font-weight: 700;
}

.dashboard-support-banner .dashboard-support-banner-actions{
	display: flex;
	gap: 10px;
	align-items: center;
}



/* =========================================================
   UX consistency (Sprint 1.2.01.B3b)
   - Topbar: standaard "Terug naar uw dashboard"
   - Form actions: Annuleren + Opslaan rechts onder (30px)
   - Buttons: Annuleren rood, Opslaan donkergroen, hover 10% groter
   ========================================================= */

.dashboard-app .dashboard-topbar-actions{
	gap: 30px;
}

.dashboard-actions-row.dashboard-actions-row--form,
.dashboard-actions-row.dashboard-actions-row--modal{
	justify-content: flex-end;
	align-items: center;
	gap: 30px;
	flex-wrap: wrap;
}

.dashboard-button.dashboard-button-save{
	background: #0b6b2f;
	border: 1px solid rgba(0,0,0,0.10);
	color: #fff;
	transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.dashboard-button.dashboard-button-cancel{
	background: #b00000;
	border: 1px solid rgba(0,0,0,0.10);
	color: #fff;
	transition: transform 0.12s ease, background-color 0.12s ease, border-color 0.12s ease;
}

.dashboard-button.dashboard-button-save:hover{
	background: #075622;
	transform: scale(1.10);
}

.dashboard-button.dashboard-button-cancel:hover{
	background: #8f0000;
	transform: scale(1.10);
}

.dashboard-button.dashboard-button-save:focus,
.dashboard-button.dashboard-button-cancel:focus{
	outline: none;
	box-shadow: 0 0 0 3px rgba(0,0,0,0.10);
}

/* Mijn profiel: wachtwoordvelden compacter (ongeveer 1/3 breedte) */
.dashboard-profile-grid .dashboard-password-field input[type="password"]{
	flex: 0 0 33%;
	max-width: 33%;
	min-width: 260px;
	border-radius: 10px;
}

@media (max-width: 900px){
	.dashboard-profile-grid .dashboard-password-field input[type="password"]{
		flex: 1 1 auto;
		max-width: none;
		min-width: 0;
	}
}

/* ==========================================================
   Sprint 1.2.01.C2f – Abonnementen UX polish
   ========================================================== */

/* Consistente input styling (ook voor zoek & datumvelden) */
.dashboard-app .dashboard-input,
.dashboard-app input.dashboard-input,
.dashboard-app select.dashboard-input{
	border: 1px solid rgba(0,0,0,0.10);
	border-radius: 10px;
	padding: 10px 12px;
	background: #fff;
	font-weight: 600;
	font-size: 14px;
	box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

.dashboard-app .dashboard-field input[type="date"],
.dashboard-app .dashboard-field input[type="date"]:focus{
	appearance: auto;
}

/* Maak ook date inputs gelijk aan text inputs */
.dashboard-app .dashboard-field input[type="date"]{
	border: 1px solid rgba(0,0,0,0.10);
	border-radius: 10px;
	padding: 10px 12px;
	background: #fff;
	font-weight: 600;
	font-size: 14px;
	box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}

/* Iets compacter voor select dropdowns (minder “schreeuwerig”) */
.dashboard-app .dashboard-field select{
	font-size: 13px;
}

/* 4-koloms grid voor formulieren */
.dashboard-grid-4{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 14px;
}

@media (max-width: 980px){
	.dashboard-grid-4{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 560px){
	.dashboard-grid-4{
		grid-template-columns: 1fr;
	}
}

/* Abonnement samenvatting (2 kolommen) */
.dashboard-subscription-summary{
	margin: 8px 0 14px 0;
}

.dashboard-subscription-summary .dashboard-summary-row{
	margin: 2px 0;
	line-height: 1.45;
}

.dashboard-subscription-summary .dashboard-subscription-col{
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 12px;
	padding: 12px 14px;
	background: #fff;
}

.dashboard-subscription-summary .dashboard-subscription-col--financial{
	background: rgba(0,0,0,0.015);
}

/* Inline bar (bij single klant view) */
.dashboard-inline-bar{
	display:flex;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
}

/* Login popup: acties naast elkaar */
.dashboard-login-box .dashboard-actions{
	display:flex;
	gap: 12px;
	justify-content: flex-end;
	flex-wrap: wrap;
}

/* ===============================
 * Sprint C3b – SAAS-brede UI/UX uniformering (admin + beheer)
 * =============================== */

/* Uniforme input/select styling binnen dashboard forms (theme-overschrijvend) */
.dashboard-form input[type="text"],
.dashboard-form input[type="email"],
.dashboard-form input[type="password"],
.dashboard-form input[type="number"],
.dashboard-form input[type="tel"],
.dashboard-form input[type="date"],
.dashboard-form textarea,
.dashboard-form select,
.dashboard-admin-customer-form input[type="text"],
.dashboard-admin-customer-form input[type="email"],
.dashboard-admin-customer-form input[type="password"],
.dashboard-admin-customer-form input[type="number"],
.dashboard-admin-customer-form input[type="tel"],
.dashboard-admin-customer-form input[type="date"],
.dashboard-admin-customer-form textarea,
.dashboard-admin-customer-form select,
.dashboard-admin-customers input[type="text"],
.dashboard-admin-customers input[type="email"],
.dashboard-admin-customers input[type="password"],
.dashboard-admin-customers input[type="number"],
.dashboard-admin-customers input[type="tel"],
.dashboard-admin-customers input[type="date"],
.dashboard-admin-customers textarea,
.dashboard-admin-customers select,
.dashboard-search-form input[type="text"],
.dashboard-search-form input[type="search"],
.dashboard-search-form select
{
	font-size: 13px !important;
	line-height: 1.2 !important;
	padding: 8px 10px !important;
	border-radius: 12px !important;
	border: 1px solid rgba(0,0,0,0.18) !important;
	background: #fff !important;
	box-shadow: none !important;
}

.dashboard-form input[type="date"],
.dashboard-admin-customer-form input[type="date"],
.dashboard-admin-customers input[type="date"],
.dashboard-search-form input[type="date"]{
	min-height: 38px !important;
}

.dashboard-form select,
.dashboard-admin-customer-form select,
.dashboard-admin-customers select,
.dashboard-search-form select{
	min-height: 38px !important;
}

.dashboard-form input:focus,
.dashboard-form select:focus,
.dashboard-form textarea:focus,
.dashboard-search-form input:focus,
.dashboard-search-form select:focus{
	outline: none !important;
	border-color: rgba(0,0,0,0.45) !important;
	box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important;
}

/* Overal 30px ruimte tussen buttons + rechts uitlijnen waar relevant */
.dashboard-actions-inline,
.dashboard-actions-row,
.dashboard-page-actions,
.dashboard-actions-row--modal,
.dashboard-login-box .dashboard-actions{
	gap: 18px !important;
}

.dashboard-actions-inline{
	display:flex;
	justify-content:flex-end;
	align-items:center;
	flex-wrap: wrap;
}

/* Actie-cellen in tabellen: rechts, knoppen naast elkaar */
.dashboard-table:not(.dashboard-contracts-overview-table) td.dashboard-actions-cell,
.dashboard-table:not(.dashboard-contracts-overview-table) th.dashboard-actions-cell{
	text-align: right;
	white-space: nowrap;
}

.dashboard-table:not(.dashboard-contracts-overview-table) td.dashboard-actions-cell .dashboard-actions-inline{
	justify-content: flex-end;
	flex-wrap: nowrap;
	overflow: visible;
}

.dashboard-table:not(.dashboard-contracts-overview-table) td.dashboard-actions-cell{
	/* Zorg dat actie-knoppen (Bewerken/Archiveren) naast elkaar blijven staan */
	min-width: 340px;
	overflow: visible;
}

/* Sub-head rows (e.g. grouping Units per verdieping) */
.dashboard-table tr.dashboard-subhead td{
	background: #f7f7f7;
	font-weight: 600;
	padding-top: 8px;
	padding-bottom: 8px;
}

/* Modals: extra binnenmarge zodat velden niet tegen de rand plakken */
.dashboard-modal-dialog .dashboard-form{
	padding: 16px 18px 18px 18px !important;
}

.dashboard-modal-dialog .dashboard-actions-row--modal{
	margin-top: 18px;
}

/* Modals: compacte velden en duidelijke date input */
.dashboard-modal{
	font-size: 13px;
}

.dashboard-modal .dashboard-field label{
	font-size: 12px;
}

.dashboard-modal .dashboard-field input[type="text"],
.dashboard-modal .dashboard-field input[type="email"],
.dashboard-modal .dashboard-field input[type="tel"],
.dashboard-modal .dashboard-field input[type="number"],
.dashboard-modal .dashboard-field input[type="date"],
.dashboard-modal .dashboard-field select,
.dashboard-modal .dashboard-field textarea{
	padding: 5px 9px !important;
	font-size: 13px !important;
}

/* Datumveld: geen pilvorm en iets onderscheidend */
.dashboard-modal .dashboard-field input[type="date"]{
	border-radius: 10px !important;
	background: #f9fafb !important;
}

.dashboard-modal .dashboard-field input[type="date"]::-webkit-calendar-picker-indicator{
	transform: scale(1.25);
	cursor: pointer;
}

/* Plan catalogus: compactere tabellen/inputs */
.dashboard-plan-table td,
.dashboard-plan-table th{
	padding: 8px 10px !important;
}

.dashboard-plan-table .dashboard-price-input-wrap{
	min-width: 140px;
}

.dashboard-plan-table .dashboard-input--price{
	min-height: 34px !important;
	height: 34px !important;
	padding: 6px 10px !important;
	font-size: 13px !important;
}

/* Selects in catalogus iets compacter */
.dashboard-plan-table select,
.dashboard-customer-subscription-form select{
	font-size: 13px !important;
}

/* Collapsible panels (Klant bewerken) */
.dashboard-collapsible-panel{
	border: 1px solid rgba(0,0,0,0.06);
	border-radius: 14px;
	background: #fff;
	margin: 0 0 18px 0;
	box-shadow: 0 4px 14px rgba(0,0,0,0.04);
}

.dashboard-collapsible-panel > summary{
	cursor: pointer;
	padding: 14px 18px;
	font-weight: 600;
	list-style: none;
	user-select: none;
}

.dashboard-collapsible-panel > summary::marker{
	font-size: 22px;
}

.dashboard-collapsible-panel > summary::-webkit-details-marker{
	display:none;
}

.dashboard-collapsible-panel[open] > summary{
	border-bottom: 1px solid rgba(0,0,0,0.06);
	border-radius: 14px 14px 0 0;
}

.dashboard-collapsible-body{
	padding: 16px 18px 18px 18px;
}

/* ========== Sprint 1.2.01.D1: Gebouwen/Locaties – foto grid + checkboxes ========== */
.vbd-photo-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 12px;
}

.vbd-photo-item {
	height: 350px;
	border-radius: 14px;
	overflow: hidden;
	background: #f3f4f6;
	box-shadow: 0 4px 14px rgba(0,0,0,0.06);
}

.vbd-photo-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.dashboard-field-checkbox {
	padding-top: 28px;
}

.dashboard-field-checkbox label {
	display: flex;
	gap: 10px;
	align-items: center;
	font-weight: 600;
}

.dashboard-field-checkbox input[type="checkbox"] {
	width: auto;
	height: auto;
}

/* =============================
   Gebouwbeheer (D1g): compacter & uniform
   ============================= */

.gb-features-box {
	border: 1px solid #eee;
	border-radius: 10px;
	padding: 18px;
	margin-top: 8px;
	background: #fafafa;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px 28px;
	align-items: start;
}

.gb-feature-group,
.gb-features-group {
	margin: 0 0 10px;
	min-width: 0;
}

.gb-feature-group:last-child,
.gb-features-group:last-child {
	margin-bottom: 0;
}

.gb-feature-group-title,
.gb-features-title {
	font-size: 13px;
	font-weight: 600;
	margin: 0 0 10px;
	color: #333;
	letter-spacing: 0;
}

.gb-features-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 10px;
	align-items: start;
}

.gb-features-box--extras {
	grid-template-columns: minmax(0, 1fr);
	padding: 14px 16px;
	gap: 12px;
}

.gb-feature {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	align-items: start;
	column-gap: 10px;
	font-weight: 400;
	font-size: 14px;
	line-height: 1.35;
	margin: 0;
	min-width: 0;
}

.gb-feature-checks {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding-top: 2px;
}

.gb-feature input[type="checkbox"] {
	margin: 0;
	flex: 0 0 auto;
}

.gb-feature-label {
	min-width: 0;
}

.gb-feature-detail-toggle:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}

.gb-feature-floor-option input:disabled + span {
	opacity: 0.45;
	cursor: not-allowed;
}

.gb-feature-library-panel,
.gb-feature-details-block {
	grid-column: 1 / -1;
}

.gb-feature-details-block {
	margin-top: 10px;
	padding-top: 14px;
	border-top: 1px solid #dbe4ef;
}

.gb-feature-details-heading {
	margin: 0 0 10px;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.3;
	color: #243041;
}

.gb-feature-details-grid {
	display: grid;
	grid-template-columns: minmax(150px, 17%) minmax(120px, 16%) minmax(0, 57%) minmax(110px, 10%);
	gap: 10px 14px;
	align-items: center;
}

.gb-feature-details-grid--head {
	margin-bottom: 8px;
	font-size: 13px;
	font-weight: 600;
	color: #617392;
}

.gb-feature-detail-row {
	padding: 10px 0;
	border-top: 1px solid #e8eef7;
}

.gb-feature-detail-row:first-child {
	border-top: 0;
}

.gb-feature-detail-name {
	font-size: 14px;
	font-weight: 500;
	color: #243041;
}

.gb-feature-detail-row .dashboard-input,
.gb-feature-detail-row input[type="text"] {
	width: 100%;
}

.gb-feature-detail-actions {
	display: flex;
	justify-content: flex-end;
}

.gb-feature-floor-picker {
    position: relative;
}

.gb-feature-floor-trigger {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 44px;
    padding: 10px 42px 10px 14px;
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    background: #fff;
    color: #243247;
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.gb-feature-floor-trigger:hover,
.gb-feature-floor-picker.is-open .gb-feature-floor-trigger {
    border-color: #c2d3e8;
}

.gb-feature-floor-picker.is-open .gb-feature-floor-trigger {
    box-shadow: 0 0 0 3px rgba(38, 132, 255, 0.08);
}

.gb-feature-floor-trigger::after {
    content: "";
    position: absolute;
    right: 16px;
    top: 50%;
    width: 9px;
    height: 9px;
    border-right: 2px solid #6c7f99;
    border-bottom: 2px solid #6c7f99;
    transform: translateY(-65%) rotate(45deg);
    transition: transform 0.15s ease;
}

.gb-feature-floor-picker.is-open .gb-feature-floor-trigger::after {
    transform: translateY(-35%) rotate(-135deg);
}

.gb-feature-floor-summary {
    display: block;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.gb-feature-floor-panel {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    z-index: 30;
    display: none;
    max-height: 228px;
    overflow-y: auto;
    padding: 8px 10px;
    border: 1px solid #dbe4ef;
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 18px 36px rgba(25, 42, 70, 0.16);
}

.gb-feature-floor-picker.is-open .gb-feature-floor-panel {
    display: block;
}

.gb-feature-floor-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    font-size: 0.98rem;
    color: #243247;
}

.gb-feature-floor-option input {
    margin: 0;
    flex: 0 0 auto;
}

.gb-feature-floor-option span {
    min-width: 0;
}

.gb-unit-area-preview {
    margin-top: 12px;
    padding: 12px 14px;
    border: 1px solid #dbe4ef;
    border-radius: 16px;
    background: #f8fbff;
}

.gb-unit-area-preview__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
}

.gb-unit-area-preview__label {
    display: block;
    margin-bottom: 2px;
    font-size: 0.84rem;
    font-weight: 700;
    color: #6c7f99;
}

.gb-unit-area-preview__notice {
    margin-top: 12px;
}

@media (max-width: 900px) {
    .gb-unit-area-preview__grid {
        grid-template-columns: 1fr;
    }
}

#gb-feature-details-empty {
	margin: 6px 0 0;
}

@media (max-width: 1280px) {
	.gb-features-box {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 720px) {
	.gb-features-box {
		grid-template-columns: minmax(0, 1fr);
		padding: 14px;
	}

	.gb-feature-details-grid {
		grid-template-columns: 1fr;
	}

	.gb-feature-details-grid--head {
		display: none;
	}

	.gb-feature-detail-row {
		padding: 12px 0;
	}
}

.gb-custom-features {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed #ddd;
}

.gb-custom-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 8px;
}

.gb-custom-row {
	display: grid;
	grid-template-columns: 90px 170px 1fr 44px;
	gap: 10px;
	align-items: center;
	margin-bottom: 8px;
}

.gb-custom-cat {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ddd;
	border-radius: 10px;
	font-size: 13px;
	background: #fff;
}

.gb-custom-enabled {
	display: flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	font-size: 13px;
	margin: 0;
}

.gb-custom-feature-category-picker,
.gb-custom-feature-category-picker option,
.gb-custom-feature-category {
	font-family: inherit;
	font-size: 16px;
}

.gb-custom-label {
	width: 100%;
	padding: 8px 10px;
	border: 1px solid #ddd;
	border-radius: 10px;
	font-size: 13px;
}

.gb-custom-row .dashboard-button {
	padding: 7px 10px;
	border-radius: 10px;
}

/* Collapsible panels (Gebouwen / Klantbewerken etc.) */
.dashboard-collapsible .dashboard-collapsible-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: transparent !important;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: rgba(0,0,0,0.88) !important;
	font-family: inherit;
	text-transform: none;
	letter-spacing: normal;
}

.dashboard-collapsible .dashboard-collapsible-title {
	font-size: 16px;
	font-weight: 600;

	color: inherit;
}

.dashboard-collapsible .dashboard-collapsible-chevron::before {
	content: "▾";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	line-height: 1;
	transition: transform 0.15s ease;
	font-size: 22px;
	font-weight: 700;
}

.dashboard-collapsible.is-collapsed .dashboard-collapsible-chevron::before {
	transform: rotate(-90deg);
}

.dashboard-collapsible.is-collapsed .dashboard-collapsible-body {
	display: none;
}



/* Gebouwbeheer - kenmerken bibliotheek */
.gb-help{
	font-size: 13px;
	color: #666;
	margin: 8px 0 14px;
}
.gb-library-grid{
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: 18px;
}
@media (max-width: 900px){
	.gb-library-grid{ grid-template-columns: 1fr; }
}
.gb-library-col h4{
	margin: 0 0 10px;
}
.gb-inline-form{
	display:flex;
	gap:10px;
	align-items:center;
	flex-wrap:wrap;
	margin: 10px 0 12px;
}
.gb-row-form{
	display:flex;
	gap:10px;
	align-items:center;
	flex-wrap:wrap;
}
.gb-mini-form{
	display:inline-block;
	margin-right:6px;
}
.gb-actions{
	white-space: nowrap;
}
.gb-pill{
	display:inline-block;
	padding:2px 8px;
	border-radius:999px;
	font-size:12px;
	background:#f0f0f0;
}
.gb-empty{
	padding: 6px 0;
	color: #666;
}
.gb-archived{
	margin-top: 18px;
}

/* Units / ruimtes */
.dashboard-units-form-grid {
  column-gap: 40px;
  row-gap: 14px;
}

.dashboard-units-form-grid .dashboard-field {
  margin-bottom: 0;
}

.dashboard-units-form-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 8px;
}


/* Units table: action buttons on one line */
.dashboard-actions-inline{
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: nowrap;
  white-space: nowrap;
  overflow: visible;
}

.dashboard-actions-inline form{
  margin: 0 !important;
}

.dashboard-actions-inline .dashboard-button{
  margin: 0 !important;
  padding: 6px 10px;
  font-size: 13px;
}


.dashboard-field-sub{
  margin-top: 10px;
}

/* Unit modal: follows the regular dashboard card/form layout. */
#dashboard-unit-add-modal .dashboard-modal-dialog,
#dashboard-unit-edit-modal .dashboard-modal-dialog{
  width: min(860px, calc(100vw - 32px));
  border: 1px solid #dbe5f2;
  border-radius: 18px;
  box-shadow: 0 24px 70px rgba(15, 23, 42, 0.20);
}

#dashboard-unit-add-modal .dashboard-modal-header,
#dashboard-unit-edit-modal .dashboard-modal-header{
  align-items: flex-start;
  padding: 18px 22px;
  border-bottom: 1px solid #e7edf5;
  background: #fff;
}

#dashboard-unit-add-modal .dashboard-modal-title,
#dashboard-unit-edit-modal .dashboard-modal-title{
  margin: 0;
  color: #1f2937;
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
}

#dashboard-unit-add-modal .dashboard-modal-close,
#dashboard-unit-edit-modal .dashboard-modal-close{
  width: 34px;
  height: 34px;
  border: 1px solid #dbe5f2;
  border-radius: 999px;
  background: #fff;
  color: #64748b;
  line-height: 1;
}

#dashboard-unit-add-modal .dashboard-units-form,
#dashboard-unit-edit-modal .dashboard-units-form{
  padding: 22px 24px 24px !important;
}

#dashboard-unit-add-modal .dashboard-modal-cols,
#dashboard-unit-edit-modal .dashboard-modal-cols{
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 22px;
  align-items: start;
}

#dashboard-unit-add-modal .dashboard-modal-col,
#dashboard-unit-edit-modal .dashboard-modal-col{
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 14px;
  min-width: 0;
}

#dashboard-unit-add-modal .dashboard-field,
#dashboard-unit-edit-modal .dashboard-field{
  margin: 0;
}

#dashboard-unit-add-modal .dashboard-label,
#dashboard-unit-add-modal .dashboard-field > label.dashboard-label,
#dashboard-unit-edit-modal .dashboard-label,
#dashboard-unit-edit-modal .dashboard-field > label.dashboard-label{
  display: block;
  margin: 0 0 7px;
  color: #6b778c;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.2;
  text-transform: uppercase;
}

#dashboard-unit-add-modal .dashboard-field input[type="text"],
#dashboard-unit-add-modal .dashboard-field select,
#dashboard-unit-add-modal .dashboard-field textarea,
#dashboard-unit-edit-modal .dashboard-field input[type="text"],
#dashboard-unit-edit-modal .dashboard-field select,
#dashboard-unit-edit-modal .dashboard-field textarea{
  width: 100%;
  min-height: 42px;
  padding: 9px 12px !important;
  border: 1px solid #d7e0ec !important;
  border-radius: 10px !important;
  background: #fff !important;
  color: #202938;
  font-size: 14px !important;
  line-height: 1.35 !important;
  box-shadow: none;
}

#dashboard-unit-add-modal .dashboard-field textarea,
#dashboard-unit-edit-modal .dashboard-field textarea{
  min-height: 174px;
}

#dashboard-unit-add-modal .dashboard-muted,
#dashboard-unit-edit-modal .dashboard-muted{
  margin-top: 6px;
  color: #6b778c;
  font-size: 12px;
  line-height: 1.45;
}

#dashboard-unit-add-modal .dashboard-actions-row,
#dashboard-unit-edit-modal .dashboard-actions-row{
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid #e7edf5;
  gap: 10px;
}

#dashboard-unit-add-modal .dashboard-button,
#dashboard-unit-edit-modal .dashboard-button{
  min-height: 42px;
  padding: 9px 18px;
}

@media (max-width: 760px){
  #dashboard-unit-add-modal .dashboard-modal-dialog,
  #dashboard-unit-edit-modal .dashboard-modal-dialog{
    width: calc(100vw - 20px);
  }

  #dashboard-unit-add-modal .dashboard-units-form,
  #dashboard-unit-edit-modal .dashboard-units-form{
    padding: 18px 18px 20px !important;
  }

  #dashboard-unit-add-modal .dashboard-modal-cols,
  #dashboard-unit-edit-modal .dashboard-modal-cols{
    grid-template-columns: 1fr;
  }

  #dashboard-unit-add-modal .dashboard-actions-row,
  #dashboard-unit-edit-modal .dashboard-actions-row{
    justify-content: stretch;
  }

  #dashboard-unit-add-modal .dashboard-actions-row .dashboard-button,
  #dashboard-unit-edit-modal .dashboard-actions-row .dashboard-button{
    flex: 1 1 auto;
  }
}

/* Units table: ensure action buttons stay on one line across themes */
.dashboard-units-table td.dashboard-actions-cell{
  white-space: nowrap;
}

.gb-scope-parking-row.is-over-capacity td {
  background: #fff5f5;
}

.gb-scope-parking-row.is-over-capacity [data-parking-suggestion] {
  color: #b42318;
  font-weight: 700;
}

.gb-scope-parking-choice{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin: 10px 0 14px;
  padding: 12px 14px;
  border: 1px solid #dbe5f2;
  border-radius: 10px;
  background: #f8fbff;
}

.gb-scope-parking-choice label{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.gb-scope-parking-choice .dashboard-muted{
  flex: 1 1 260px;
  margin: 0;
}

.gb-unit-wizard-guide{
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid #e7edf5;
  background: #f8fbff;
}

.gb-unit-wizard-guide div{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 2px 8px;
  align-items: start;
}

.gb-unit-wizard-guide span{
  grid-row: 1 / span 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: #2563eb;
  color: #fff;
  font-size: 12px;
  font-weight: 800;
}

.gb-unit-wizard-guide strong{
  color: #1f2937;
  line-height: 1.2;
}

.gb-unit-wizard-guide small{
  color: #64748b;
  line-height: 1.35;
}

.dashboard-actions-inline a.dashboard-button,
.dashboard-actions-inline button.dashboard-button{
  display: inline-flex;
  align-items: center;
  justify-content: center;
}


/* === Gebouwbeheer (Gebouwen) – UI/UX polish === */

/* Compactere spacing tussen frames */
.gb-form-details .dashboard-card,
.gb-form-details .dashboard-form-section {
	margin: 8px 0;
}

/* Vloer-selectie (BG, 1e.., K1..) */
.gb-floor-grid {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	margin-top: 6px;
}
.gb-floor-opt {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-weight: 400;
	white-space: nowrap;
}
.gb-floor-opt input[type="checkbox"]{
	margin: 0;
}

/* Gecombineerd (mixed): per-verdieping verhuurmodus */
.gb-floor-modes-grid{
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
}
.gb-floor-mode-row{
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	gap: 10px;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 6px;
	min-height: 110px;
}
.gb-floor-mode-label{
	font-weight: 600;
	min-width: 0;
	line-height: 1.35;
}
.gb-floor-mode-options{
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}
.gb-floor-mode-row.is-disabled{
	opacity: 0.55;
}

.gb-wizard-scope-tiles{
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin-top: 12px;
}

.gb-wizard-scope-tile{
	display: grid;
	gap: 8px;
	align-content: start;
	padding: 14px;
	border: 1px solid #dbe5f2;
	border-radius: 8px;
	background: #fff;
}

.gb-wizard-scope-tile strong{
	color: #1f2937;
	font-size: 15px;
	line-height: 1.25;
}

.gb-wizard-scope-tile span{
	color: #64748b;
	font-size: 13px;
	line-height: 1.45;
}

.gb-wizard-scope-tile.is-disabled{
	opacity: 0.62;
}

.gb-wizard-scope-tile .dashboard-button{
	justify-self: start;
}

@media (max-width: 760px){
	.gb-unit-wizard-guide,
	.gb-wizard-scope-tiles{
		grid-template-columns: 1fr;
	}
}
@media (max-width: 1280px){
	.gb-floor-modes-grid{
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}
@media (max-width: 960px){
	.gb-floor-modes-grid{
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 640px){
	.gb-floor-modes-grid{
		grid-template-columns: 1fr;
	}
	.gb-floor-mode-row{
		min-height: 0;
	}
	.gb-floor-mode-label{
		min-width: auto;
	}
}

/* Foto's: 3 kolommen, vaste hoogte met crop */
.gb-photo-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 14px;
	margin-top: 10px;
}
@media (max-width: 900px){
	.gb-photo-grid{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 520px){
	.gb-photo-grid{ grid-template-columns: 1fr; }
}
.gb-photo-item {
	position: relative;
	height: 350px;
	border-radius: 14px;
	overflow: hidden;
	background: #f1f3f5;
	border: 1px solid rgba(0,0,0,0.06);
}
.gb-photo-item img{
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
.gb-photo-remove{
	position: absolute;
	top: 10px;
	right: 10px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 8px;
	border-radius: 999px;
	background: rgba(0,0,0,0.55);
	color: #fff;
	font-size: 12px;
}
.gb-photo-remove input{
	margin: 0;
}

.dashboard-button, .dashboard-button-save, .dashboard-button-cancel { text-decoration: none; }


/* Forceer consistente button-kleuren (overrides legacy grijs styling) */
.dashboard-app .dashboard-button,
.dashboard-button{
	background: #1b5cff;
	border-color: rgba(0,0,0,0.12);
	color: #fff;
}
.dashboard-app .dashboard-button:hover,
.dashboard-button:hover{
	filter: brightness(1.02);
}
.dashboard-app .dashboard-button-secondary,
.dashboard-button-secondary{
	background: #fff;
	color: rgba(0,0,0,0.85);
	border-color: rgba(0,0,0,0.12);
}
.dashboard-app .dashboard-button-secondary:hover,
.dashboard-button-secondary:hover{
	background: rgba(0,0,0,0.04);
	filter: none;
}


@media (max-width: 680px){
  .dashboard-modal-overlay .dashboard-modal{
    width: 100%;
    min-width: 0;
  }
}
/* ==========================================================
 * Toast (micro UX)
 * - gebruikt door dashboard-public.js (ESC sluit modal → waarschuwing)
 * ========================================================== */
.dashboard-toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 1000000;
  display: none;
  opacity: 0;
  transition: opacity 200ms ease;
  background: rgba(15, 23, 42, 0.95);
  color: #fff;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 800;
  box-shadow: 0 12px 30px rgba(0,0,0,0.25);
  max-width: 92vw;
  text-align: center;
}
.dashboard-toast.is-warning{
  background: rgba(120, 53, 15, 0.95);
}
.dashboard-toast.is-success{
  background: rgba(20, 83, 45, 0.95);
}

/* ==========================================================
 * Tenant renters: Board/Signing UX improvements (RF1.2.2)
 * ========================================================== */

/* View=org overlay should sit below nested add/edit modals. */
.dashboard-modal-overlay.dashboard-org-view-overlay {
  z-index: 99990;
}

/* Compact summary row for organization info */
.dashboard-org-meta {
  margin: 0 0 16px 0;
}

.dashboard-meta {
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(0,0,0,0.02);
  min-height: 56px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.dashboard-meta-label {
  font-size: 11px;
  line-height: 14px;
  color: #6b7280;
  margin-bottom: 2px;
}

.dashboard-meta-value {
  font-size: 14px;
  line-height: 18px;
  color: #111827;
  font-weight: 600;
  word-break: break-word;
}

.dashboard-meta-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Inline actions under an org row (ultimate persons list) */
.dashboard-board-person-line {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}

.dashboard-board-person-line:last-child {
  border-bottom: 0;
}

.dashboard-link-small {
  font-size: 11px;
  line-height: 14px;
}

button.dashboard-link-button,
a.dashboard-link-button {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: inherit;
  text-decoration: none;
}

button.dashboard-unit-number-edit,
a.dashboard-unit-number-edit {
  font: inherit;
  text-align: left;
}

.dashboard-inline-form {
  display: inline;
  margin: 0;
}

/* ------------------------------------------------------------
   Contract templates: merge field picker (chips)
-------------------------------------------------------------*/


/* Template editor layout */
.dashboard-template-editor {
  margin-top: 10px;
}

.dashboard-template-editor-layout {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(0, 3fr);
  gap: 20px;
  align-items: start;
}

@media (max-width: 980px) {
  .dashboard-template-editor-layout {
    grid-template-columns: 1fr;
  }
}

.dashboard-template-editor-section {
  margin-bottom: 16px;
}

.dashboard-template-editor-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,0,0,0.08);
}

.dashboard-template-editor-main .dashboard-template-editor-textarea {
  min-height: 520px;
  resize: vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 12px;
  line-height: 1.45;
}

.dashboard-template-editor .dashboard-mergefield-group summary {
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0 8px;
  list-style: none;
}

.dashboard-template-editor .dashboard-mergefield-group summary::-webkit-details-marker {
  display: none;
}

.dashboard-template-editor .dashboard-mergefield-group summary .dashboard-mergefield-group-title{
  margin: 0;
  padding: 0;
}

.dashboard-template-editor .dashboard-mergefield-group summary::before {
  content: '▸';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 17px;
  height: 17px;
  font-size: 17px;
  line-height: 1;
  color: rgba(0,0,0,0.55);
  margin-right: 6px;
  flex: 0 0 auto;
}

.dashboard-template-editor .dashboard-mergefield-group summary::marker {
  font-size: 17px;
}

.dashboard-template-editor .dashboard-mergefield-group[open] summary::before {
  content: '▾';
}

.dashboard-template-editor .dashboard-mergefield-group-title {
  margin: 0;
  flex: 1 1 auto;
}

.dashboard-template-editor .dashboard-mergefield-group-count {
  flex: 0 0 auto;
  font-size: 11px;
  line-height: 1;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0,0,0,0.06);
  color: rgba(0,0,0,0.65);
}

.dashboard-template-editor .dashboard-mergefield-picker {
  max-height: min(780px, calc(100vh - 290px));
  overflow: auto;
  border: 1px solid rgba(0,0,0,0.10);
  border-radius: 12px;
  padding: 12px;
  background: rgba(0,0,0,0.02);
}

.dashboard-template-editor .dashboard-mergefield-group {
  margin-bottom: 14px;
}

.dashboard-template-editor .dashboard-mergefield-group:last-child {
  margin-bottom: 0;
}

.dashboard-template-editor .dashboard-mergefield-group-title {
  display: block;
  font-weight: 600;
  font-size: 11px;
  line-height: 14px;
  margin: 2px 0 8px;
  color: rgba(0,0,0,0.70);
}

.dashboard-template-editor .dashboard-mergefield-list{
	display:flex;
	flex-direction:column;
	gap:6px;
}

.dashboard-template-editor .dashboard-mergefield-chip{
	display:flex;
	width:100%;
	align-items:center;
	gap:10px;
	padding:7px 10px;
	border:1px solid #e5e7eb;
	border-radius:999px;
	background:#fff;
	font-size:11px;
	cursor:pointer;
	text-align:left;
	justify-content:flex-start;
}

.dashboard-mergefield-chip:hover{
	background:#f9fafb;
}

.dashboard-mergefield-chip:focus{
	outline:none;
	box-shadow:0 0 0 2px rgba(59, 130, 246, .25);
	border-color:#93c5fd;
}

.dashboard-template-editor .dashboard-mergefield-chip:hover {
  border-color: rgba(0,0,0,0.22);
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}

.dashboard-template-editor .dashboard-mergefield-chip:active {
  transform: translateY(1px);
}

.dashboard-template-editor .dashboard-mergefield-chip:focus {
  outline: none;
}

.dashboard-template-editor .dashboard-mergefield-chip:focus-visible {
  outline: 2px solid rgba(0,0,0,0.35);
  outline-offset: 2px;
}

.dashboard-template-editor .dashboard-mergefield-chip-token{
	font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
	font-size:11px;
	padding:3px 6px;
  flex: 0 1 160px;
  min-width: 0;
  max-width: 160px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
	background:#f2f4f7;
	border-radius:8px;
	color:#111827;
}

.dashboard-mergefield-chip-label{
	flex:1 1 auto;
	min-width:0;
	color:#111827;
	line-height:1.2;
	white-space:nowrap;
	overflow:hidden;
	text-overflow:ellipsis;
}

.dashboard-template-editor .dashboard-mergefield-chip-label {
  color: rgba(0,0,0,0.72);
  font-size: 11px;
  line-height: 14px;
}

.dashboard-template-editor .dashboard-mergefield-chip-hidden {
  display: none !important;
}


/* Template editor: HTML / Tekst toggle + rich text */
.dashboard-template-editor-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.dashboard-template-editor-toggle{
  display:flex;
  gap:8px;
}

.dashboard-template-editor-toggle .dashboard-button{
  border-radius:999px;
}

.dashboard-template-editor-toggle .dashboard-button.is-active{
  background:#1b5cff;
  border-color:#1b5cff;
  color:#fff;
}

.dashboard-template-rich-toolbar{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
  position:relative;
  padding:10px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#f9fafb;
  margin-bottom:10px;
}

.dashboard-template-rich-toolbar-row{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:8px;
}

.dashboard-template-rich-toolbar-actions{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  margin-left:auto;
}

.dashboard-template-rich-toolbar select{
  height:32px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid #e5e7eb;
  background:#fff;
  font-size:12px;
}

.dashboard-template-rich-toolbar .dashboard-button{
  height:32px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  line-height:30px;
}

.dashboard-template-rich-editor{
  min-height:520px;
  max-height:65vh;
  overflow:auto;
  padding:14px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  /* Contract-templates zijn standaard Calibri 11px; editor sluit daarop aan. */
  font-size:11px;
  line-height:1.45;
}

.dashboard-template-rich-editor img{
  max-width:100%;
  height:auto;
}

/* Multi-level numbering (Word-like): 1) / a) / i) */
.dashboard-template-rich-editor ol{
  list-style:none;
  margin:6px 0 10px 0;
  padding-left:18px;
  counter-reset:dash_ol_lvl1;
}

.dashboard-template-rich-editor ol > li{
  position:relative;
  padding-left:22px;
  margin:2px 0;
  counter-increment:dash_ol_lvl1;
}

.dashboard-template-rich-editor ol > li::before{
  content: counter(dash_ol_lvl1) ") ";
  position:absolute;
  left:0;
  top:0;
  width:20px;
}

.dashboard-template-rich-editor ol ol{
  counter-reset:dash_ol_lvl2;
  margin:4px 0 6px 0;
  padding-left:18px;
}

.dashboard-template-rich-editor ol ol > li{
  counter-increment:dash_ol_lvl2;
}

.dashboard-template-rich-editor ol ol > li::before{
  content: counter(dash_ol_lvl2, lower-alpha) ") ";
}

.dashboard-template-rich-editor ol ol ol{
  counter-reset:dash_ol_lvl3;
}

.dashboard-template-rich-editor ol ol ol > li{
  counter-increment:dash_ol_lvl3;
}

.dashboard-template-rich-editor ol ol ol > li::before{
  content: counter(dash_ol_lvl3, lower-roman) ") ";
}


/* Word-like wrapper for uploaded images (selectable + resize handles) */
.dashboard-template-rich-editor .dash-rich-image-wrap{
  display:inline-block;
  max-width:100%;
  vertical-align:top;
  position:relative;
  border:1px solid #e5e5e5;
  background:#f7f7f7;
  border-radius:6px;
  padding:4px;
}

.dashboard-template-rich-editor .dash-rich-image-wrap.is-selected{
  outline:2px solid rgba(37,99,235,0.55);
  outline-offset:2px;
}

.dashboard-template-rich-editor .dash-rich-image-wrap img{
  display:block;
  width:100%;
  height:auto;
  max-width:100%;
  border-radius:4px;
}

.dashboard-template-rich-editor .dash-rich-image-handles{
  position:absolute;
  inset:0;
  pointer-events:none;
  display:none;
}

.dashboard-template-rich-editor .dash-rich-image-wrap.is-selected .dash-rich-image-handles{
  display:block;
}

.dashboard-template-rich-editor .dash-rich-image-handle{
  position:absolute;
  width:10px;
  height:10px;
  background:#fff;
  border:1px solid rgba(37,99,235,0.85);
  border-radius:2px;
  box-shadow:0 1px 2px rgba(0,0,0,0.18);
  pointer-events:auto;
}

.dashboard-template-rich-editor .dash-rich-image-handle.h-nw{ top:-6px; left:-6px; cursor:nwse-resize; }
.dashboard-template-rich-editor .dash-rich-image-handle.h-ne{ top:-6px; right:-6px; cursor:nesw-resize; }
.dashboard-template-rich-editor .dash-rich-image-handle.h-sw{ bottom:-6px; left:-6px; cursor:nesw-resize; }
.dashboard-template-rich-editor .dash-rich-image-handle.h-se{ bottom:-6px; right:-6px; cursor:nwse-resize; }


.dashboard-template-rich-image-popover{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  width:min(560px, 92vw);
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
  box-shadow:0 16px 40px rgba(0,0,0,0.12);
  z-index:40;
}

.dashboard-template-rich-image-popover label{
  display:block;
  font-size:12px;
  color:#444;
  margin:0 0 4px;
}

.dashboard-template-rich-image-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}

.dashboard-template-rich-image-actions{
  display:flex;
  justify-content:flex-end;
  gap:8px;
  margin-top:10px;
}

@media (max-width: 900px){
  .dashboard-template-rich-image-grid{ grid-template-columns: 1fr; }
  .dashboard-template-rich-toolbar-actions{ width:100%; margin-left:0; }
}

.dashboard-template-rich-editor:focus{
  outline:none;
  box-shadow:0 0 0 2px rgba(59, 130, 246, .20);
  border-color:#93c5fd;
}

.dashboard-template-html-label{
  margin-top:2px;
}

/* =====================================================================
 * Dossier overlay – Timeline (contract events + bedragen-historie + PDFs)
 * ===================================================================== */

.dashboard-timeline{
  list-style:none;
  padding:0;
  margin:0;
}

.dashboard-timeline-item{
  display:flex;
  gap:12px;
  padding:10px 0;
  border-bottom:1px solid rgba(0,0,0,0.08);
}

.dashboard-timeline-date{
  min-width:90px;
  font-size:12px;
  color:#6b7280;
  flex:0 0 auto;
}

.dashboard-timeline-content{
  flex:1 1 auto;
  min-width:0;
}

.dashboard-timeline-title{
  font-weight:600;
  font-size:13px;
}

.dashboard-timeline-desc{
  font-size:12px;
  color:#4b5563;
  margin-top:2px;
}

.dashboard-badge{
  display:inline-block;
  font-size:11px;
  line-height:1;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(0,0,0,0.18);
  background:#fff;
}

.dashboard-muted{
  color:#6b7280;
}

/* Dossier huurder: bedragenoverzicht gelijk aan contract-samenvatting. */
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table {
	width: 100%;
	table-layout: fixed;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table col:nth-child(1),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table col:nth-child(1) {
	width: 60%;
}

#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table col:nth-child(2),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table col:nth-child(3),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table col:nth-child(2),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table col:nth-child(3) {
	width: 20%;
}

#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table th,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table td,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table th,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table td {
	padding: 7px 10px;
	border-color: #e5e7eb;
	background-clip: padding-box;
}

#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table thead th,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table thead th {
	font-size: 13px;
	font-weight: 700;
	color: #1f2937;
	background: #f8fafc;
}

#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table th:nth-child(2),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table th:nth-child(3),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table td:nth-child(2),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table td:nth-child(3),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table th:nth-child(2),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table th:nth-child(3),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table td:nth-child(2),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table td:nth-child(3) {
	text-align: right;
	white-space: nowrap;
}

#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table tr.is-group-before-total td:nth-child(2),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table tr.is-group-before-total td:nth-child(3),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table tr.is-group-before-total td:nth-child(2),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table tr.is-group-before-total td:nth-child(3) {
	border-bottom: 0;
}

#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table tr.is-group-total td,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table tr.is-subtotal td,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table tr.is-total td,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table tr.is-group-total td,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table tr.is-subtotal td,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table tr.is-total td {
	background: #d9d9d9;
}

#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table tr.is-group-total td:nth-child(2),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table tr.is-group-total td:nth-child(3),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table tr.is-subtotal td,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table tr.is-total td,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table tr.is-group-total td:nth-child(2),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table tr.is-group-total td:nth-child(3),
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table tr.is-subtotal td,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table tr.is-total td {
	font-weight: 700;
}

#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table tr.is-group-total .dashboard-contract-summary-money-value,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table tr.is-subtotal .dashboard-contract-summary-money-value,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table tr.is-total .dashboard-contract-summary-money-value,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table tr.is-group-total .dashboard-contract-summary-money-value,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table tr.is-subtotal .dashboard-contract-summary-money-value,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table tr.is-total .dashboard-contract-summary-money-value {
	display: inline-block;
	border-bottom: 2px solid #1f2937;
	line-height: 1.05;
}

#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-contract-summary-table tr.is-total .dashboard-contract-summary-money-value,
#dashboard-contract-dossier-modal .dashboard-dossier-summary-amounts .dashboard-amounts-table tr.is-total .dashboard-contract-summary-money-value {
	border-bottom: 3px double #1f2937;
}

/* === Dossier modal header actions: align buttons right with 30px gap === */
#dashboard-contract-dossier-modal .dashboard-modal-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 30px;
}
#dashboard-contract-dossier-modal .dashboard-modal-actions .button {
	margin: 0;
}

/* Danger button (used for deleting history items) */
#dashboard-contract-dossier-modal .dashboard-button-danger {
	background: #d63638;
	border-color: #d63638;
	color: #fff;
}
#dashboard-contract-dossier-modal .dashboard-button-danger:hover,
#dashboard-contract-dossier-modal .dashboard-button-danger:focus {
	background: #b32d2e;
	border-color: #b32d2e;
	color: #fff;
}

/* === Dossier modal header actions: align buttons right with 30px gap === */
#dashboard-contract-dossier-modal .dashboard-modal-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 30px;
}
#dashboard-contract-dossier-modal .dashboard-modal-actions .button {
	margin: 0;
}

/* Generic “danger” button (used for destructive actions) */
.dashboard-button-danger {
	background: #b00020;
	border-color: #b00020;
	color: #ffffff;
}
.dashboard-button-danger:hover,
.dashboard-button-danger:focus {
	background: #8a0018;
	border-color: #8a0018;
	color: #ffffff;
}

/* =========================================================
   SAAS administrator (platform) - gebruikers statusindicator
   ========================================================= */
.dashboard-user-status-stack {
	line-height: 1.25;
}

.dashboard-user-status-main {
	font-weight: 600;
}

/* =========================================================
   Huurdersmodule - compacte gebruikersgerichte layout
   ========================================================= */
.dashboard-app .dashboard-renter-choice,
.dashboard-app .dashboard-renter-card,
.dashboard-app .dashboard-renter-header-card {
	box-shadow: 0 1px 10px rgba(15, 23, 42, 0.04);
}

.dashboard-app .dashboard-renter-choice-grid {
	align-items: stretch;
}

.dashboard-app .dashboard-renter-choice-card {
	border-color: rgba(148, 163, 184, 0.18);
	background: #fbfcfe;
}

.dashboard-app .dashboard-renter-offer-start {
	margin-top: 16px;
	padding: 14px;
	border: 1px solid #dbe6f3;
	border-radius: 14px;
	background: #f3f6fa;
}

.dashboard-app .dashboard-renter-offer-start__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 12px;
}

.dashboard-app .dashboard-renter-offer-start__header h4 {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 800;
	color: #1f2937;
}

.dashboard-app .dashboard-renter-offer-start__header .dashboard-help {
	margin: 0;
	max-width: 920px;
}

.dashboard-app .dashboard-renter-offer-empty {
	padding: 12px 14px;
	border: 1px dashed #cbd5e1;
	border-radius: 10px;
	background: #fff;
	color: #64748b;
	font-weight: 650;
}

.dashboard-app .dashboard-renter-offer-picker-modal .dashboard-modal__dialog {
	max-width: 1100px;
}

.dashboard-app .dashboard-renter-offer-picker-toolbar {
	margin-bottom: 12px;
}

.dashboard-app .dashboard-renter-offer-picker-toolbar .dashboard-input {
	width: min(100%, 520px);
}

.dashboard-app .dashboard-renter-offer-picker-table {
	width: 100%;
	border-collapse: collapse;
}

.dashboard-app .dashboard-renter-offer-picker-table th,
.dashboard-app .dashboard-renter-offer-picker-table td {
	padding: 10px 12px;
	border-bottom: 1px solid #e2e8f0;
	text-align: left;
	vertical-align: top;
}

.dashboard-app .dashboard-renter-offer-picker-table th {
	color: #334155;
	font-size: 13px;
	font-weight: 800;
	background: #f8fafc;
}

.dashboard-app .dashboard-renter-offer-list {
	display: grid;
	gap: 8px;
}

.dashboard-app .dashboard-renter-offer-row {
	display: grid;
	grid-template-columns: minmax(220px, 1.2fr) minmax(220px, 1fr) auto;
	align-items: center;
	gap: 12px;
	padding: 10px 12px;
	border: 1px solid #d9e3ee;
	border-radius: 10px;
	background: #fff;
}

.dashboard-app .dashboard-renter-offer-row__main,
.dashboard-app .dashboard-renter-offer-row__meta {
	display: grid;
	gap: 3px;
	min-width: 0;
}

.dashboard-app .dashboard-renter-offer-row__main strong {
	color: #1f2937;
	font-size: 15px;
	font-weight: 800;
}

.dashboard-app .dashboard-renter-offer-row__main span,
.dashboard-app .dashboard-renter-offer-row__meta span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #64748b;
	font-size: 13px;
	font-weight: 650;
}

@media (max-width: 900px) {
	.dashboard-app .dashboard-renter-offer-start__header,
	.dashboard-app .dashboard-renter-offer-row {
		grid-template-columns: 1fr;
		display: grid;
	}

	.dashboard-app .dashboard-renter-offer-start__header .dashboard-button,
	.dashboard-app .dashboard-renter-offer-row .dashboard-button {
		width: 100%;
		justify-content: center;
	}
}

.dashboard-app .dashboard-renter-kind-switch__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	flex-wrap: wrap;
}

.dashboard-app .dashboard-renter-kind-switch__title {
	font-size: 15px;
	font-weight: 800;
	color: #1f2937;
}

.dashboard-app .dashboard-renter-kind-switch__help {
	font-size: 12px;
	color: #64748b;
	margin-top: 4px;
}

.dashboard-app .dashboard-renter-kind-switch__controls {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.dashboard-app .dashboard-renter-kind-switch__search {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.dashboard-app .dashboard-renter-kind-switch__search input[type="search"] {
	min-width: 260px;
}

.dashboard-app .dashboard-renter-edit-screen {
	display: grid;
	gap: 14px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-form-section,
.dashboard-app .dashboard-renter-edit-screen .dashboard-card {
	margin: 0;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-form-section {
	padding: 12px 14px;
	border-radius: 18px;
	border-color: rgba(200, 211, 226, 0.86);
	box-shadow: 0 8px 18px rgba(15, 23, 42, 0.035);
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-help,
.dashboard-app .dashboard-renter-edit-screen .dashboard-muted {
	line-height: 1.45;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-help {
	font-size: 12px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-field {
	margin-bottom: 10px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-field > label {
	font-size: 12px;
	margin-bottom: 4px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="text"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="email"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="number"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="date"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="password"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="search"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="tel"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field select,
.dashboard-app .dashboard-renter-edit-screen .dashboard-field textarea {
	min-height: 38px;
	padding: 0 10px;
	font-size: 13px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-reservation-main-grid .dashboard-field select,
.dashboard-app .dashboard-renter-edit-screen .dashboard-reservation-main-grid .dashboard-field input[type="date"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-reservation-main-grid .dashboard-field [data-reservation-scope-display="1"] {
	box-sizing: border-box;
	min-height: 38px;
	height: 38px;
	padding: 0 10px;
	display: flex;
	align-items: center;
	line-height: 1.2;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-reservation-main-grid .dashboard-field [data-reservation-scope-display="1"] {
	background: #f8fafc;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-button {
	min-height: 38px;
	padding: 8px 12px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-button-small {
	min-height: 34px;
	padding: 6px 10px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-actions-inline {
	gap: 10px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-table--compact th,
.dashboard-app .dashboard-renter-edit-screen .dashboard-table--compact td {
	padding: 8px 10px;
	font-size: 13px;
}

.dashboard-app .dashboard-renter-header-card__inner {
	display: block;
}

.dashboard-app .dashboard-renter-header-stack {
	display: grid;
	gap: 10px;
	justify-items: start;
	align-content: start;
}

.dashboard-app .dashboard-renter-header-line {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 10px;
	flex-wrap: wrap;
	text-align: left;
}

.dashboard-app .dashboard-renter-header-line--title {
	margin-bottom: 3px;
}

.dashboard-app .dashboard-renter-header-line--company {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.28;
	color: #0f172a;
}

.dashboard-app .dashboard-renter-header-label {
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
}

.dashboard-app .dashboard-renter-top-grid {
	display: grid;
	grid-template-columns: minmax(320px, 0.7fr) minmax(460px, 1.3fr);
	gap: 18px;
	align-items: start;
}

.dashboard-app .dashboard-renter-top-grid > .dashboard-form-section,
.dashboard-app .dashboard-renter-top-grid > .dashboard-card {
	margin: 0 !important;
}

.dashboard-app .dashboard-renter-summary-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
	gap: 14px;
}

.dashboard-app .dashboard-renter-summary-grid > .dashboard-card {
	margin-bottom: 0 !important;
}

.dashboard-app .dashboard-renter-form-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(328px, 392px);
	gap: 16px;
	align-items: start;
}

.dashboard-app .dashboard-renter-form-grid > .dashboard-form-section {
	margin: 0 !important;
}

.dashboard-app .dashboard-renter-company-contact-grid {
	display: grid;
	grid-template-columns: minmax(0, 1.08fr) minmax(210px, 0.88fr) minmax(240px, 0.96fr);
	gap: 12px;
	align-items: start;
}

.dashboard-app .dashboard-renter-company-contact-grid > .dashboard-field--phone-wide {
	grid-column: auto;
	max-width: none;
	min-width: 0;
}

.dashboard-app .dashboard-renter-side-column {
	display: flex;
	flex-direction: column;
	gap: 10px;
	min-width: 0;
	align-self: start;
	width: 100%;
	max-width: 392px;
	justify-self: end;
}

.dashboard-app .dashboard-renter-side-column > .dashboard-form-section {
	margin: 0 !important;
}

.dashboard-app .dashboard-renter-form-actions {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 2px;
	padding: 0 !important;
	border: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
}

.dashboard-app .dashboard-renter-form-actions--inside {
	margin-top: 10px;
	padding-top: 10px !important;
	border-top: 1px solid rgba(203, 213, 225, 0.62) !important;
}

.dashboard-app .dashboard-renter-form-actions--side {
	margin-top: 4px;
	padding-top: 0 !important;
	justify-content: flex-end;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-collapsible .dashboard-collapsible-header {
	min-height: 34px;
	padding: 0;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-collapsible .dashboard-collapsible-title {
	font-size: 15px;
	font-weight: 700;
}

.dashboard-app .dashboard-renter-utility-card {
	background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
	border-color: rgba(196, 208, 224, 0.78);
}

.dashboard-app .dashboard-renter-address-summary-stack {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

.dashboard-app .dashboard-renter-address-item {
	padding: 12px 13px;
	border: 1px solid rgba(210, 220, 233, 0.84);
	border-radius: 14px;
	background: linear-gradient(180deg, #ffffff 0%, #f9fbfe 100%);
}

.dashboard-app .dashboard-renter-address-label {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: #6b7a90;
}

.dashboard-app .dashboard-renter-address-value {
	margin-top: 5px;
	font-size: 14px;
	line-height: 1.45;
	color: #223047;
}

.dashboard-app .dashboard-renter-utility-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 10px;
	margin-top: 10px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-field--phone-wide {
	grid-column: span 2;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-field--phone-canvas .dashboard-phone-field {
	max-width: none;
	width: 100%;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-field--phone-canvas {
	min-width: 0;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-renter-company-contact-grid > .dashboard-field--phone-wide {
	grid-column: auto;
}

.dashboard-app .dashboard-renter-board-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.dashboard-app .dashboard-renter-support-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) !important;
	gap: 18px;
	align-items: start;
	margin-top: 18px;
}

.dashboard-app .dashboard-renter-support-grid > .dashboard-card {
	margin-top: 0 !important;
}

.dashboard-app .dashboard-collapsible-title-row {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	flex: 1 1 auto;
	overflow: hidden;
}

.dashboard-app .dashboard-collapsible-summary {
	display: none;
	max-width: min(54vw, 620px);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	color: #5b6b83;
}

.dashboard-app .dashboard-collapsible.is-collapsed .dashboard-collapsible-summary {
	display: inline-block;
}

.dashboard-app .dashboard-renter-portfolio-card .dashboard-grid-3 {
	gap: 14px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-form-section,
.dashboard-app .dashboard-renter-edit-screen .dashboard-card {
	border-radius: 18px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="text"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="email"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="url"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="number"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="tel"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="date"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field input[type="password"],
.dashboard-app .dashboard-renter-edit-screen .dashboard-field select,
.dashboard-app .dashboard-renter-edit-screen .dashboard-field textarea {
	min-height: 36px;
	padding: 0 10px;
	font-size: 13px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-button {
	min-height: 36px;
	padding: 7px 12px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-button-small {
	min-height: 32px;
	padding: 5px 10px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-field label {
	margin-bottom: 4px;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-help {
	font-size: 12px;
	line-height: 1.42;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-phone-field__help {
	margin-top: 5px;
	font-size: 12px;
	line-height: 1.35;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-field--phone-canvas .dashboard-phone-field__controls {
	max-width: none;
	border-radius: 12px !important;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-field--phone-canvas .dashboard-phone-field__country {
	max-width: 126px !important;
	padding-left: 10px !important;
	padding-right: 10px !important;
	font-size: 14px;
	text-indent: 0 !important;
	background-position: right 8px center !important;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-field--phone-canvas .dashboard-phone-field__local {
	padding-left: 12px !important;
	font-variant-numeric: tabular-nums;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-button-primary,
.dashboard-app .dashboard-renter-card .dashboard-button-primary,
.dashboard-app .dashboard-renter-choice-card .dashboard-button-primary {
	background: #eefaf1;
	border-color: #b7e2c1;
	color: #1f7a3f;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-button-primary:hover,
.dashboard-app .dashboard-renter-edit-screen .dashboard-button-primary:focus,
.dashboard-app .dashboard-renter-card .dashboard-button-primary:hover,
.dashboard-app .dashboard-renter-card .dashboard-button-primary:focus,
.dashboard-app .dashboard-renter-choice-card .dashboard-button-primary:hover,
.dashboard-app .dashboard-renter-choice-card .dashboard-button-primary:focus {
	background: #dbf5e5;
	border-color: #84c79f;
	color: #14532d;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-button-secondary,
.dashboard-app .dashboard-renter-card .dashboard-button-secondary,
.dashboard-app .dashboard-renter-choice-card .dashboard-button-secondary {
	background: #fff;
	border-color: #d6dde8;
	color: #243041;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-button-secondary:hover,
.dashboard-app .dashboard-renter-card .dashboard-button-secondary:hover,
.dashboard-app .dashboard-renter-choice-card .dashboard-button-secondary:hover {
	background: #f7f9fc;
	color: #1f2937;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-button-archive,
.dashboard-app .dashboard-renter-card .dashboard-button-archive {
	background: #eef2f6;
	border-color: #c9d3df;
	color: #334155;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-button-archive:hover,
.dashboard-app .dashboard-renter-card .dashboard-button-archive:hover {
	background: #e3e9f0;
	color: #1f2937;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-kvk-upload-indicator.is-complete,
.dashboard-app .dashboard-renter-card .dashboard-kvk-upload-indicator.is-complete {
	background: #eefaf1;
	border-color: #b7e2c1;
	color: #1f7a3f;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-kvk-upload-indicator.is-missing,
.dashboard-app .dashboard-renter-card .dashboard-kvk-upload-indicator.is-missing {
	background: #fff6df;
	border-color: #f0c36a;
	color: #9a6700;
}

.dashboard-app .dashboard-renter-edit-screen .dashboard-link-small,
.dashboard-app .dashboard-renter-card .dashboard-link-small {
	color: #1d4ed8;
}

.dashboard-app .dashboard-renter-edit-screen button.dashboard-link-button,
.dashboard-app .dashboard-renter-card button.dashboard-link-button {
	color: #1d4ed8;
}

.dashboard-app .dashboard-renter-edit-screen button.dashboard-link-button[disabled],
.dashboard-app .dashboard-renter-card button.dashboard-link-button[disabled] {
	color: #94a3b8;
	cursor: not-allowed;
}

.dashboard-app .vbd-renter-list-badge--concept,
.dashboard-app .vbd-renter-list-badge--default {
	background: #eef2f6;
	border-color: #c9d3df;
	color: #475569;
}

.dashboard-app .vbd-renter-list-badge--progress,
.dashboard-app .vbd-renter-list-badge--invited,
.dashboard-app .vbd-renter-list-badge--onboarding {
	background: #edf4ff;
	border-color: #9fc1ff;
	color: #1d4ed8;
}

.dashboard-app .vbd-renter-list-badge--active-contract {
	background: #eefaf1;
	border-color: #b7e2c1;
	color: #1f7a3f;
}

.dashboard-app .vbd-renter-list-badge--ready {
	background: #eefaf1;
	border-color: #b7e2c1;
	color: #1f7a3f;
}

.dashboard-app .vbd-renter-list-badge--archived {
	background: #eef2f6;
	border-color: #c9d3df;
	color: #475569;
}

@media (max-width: 1100px) {
	.dashboard-app .dashboard-renter-top-grid,
	.dashboard-app .dashboard-renter-summary-grid,
	.dashboard-app .dashboard-renter-form-grid,
	.dashboard-app .dashboard-renter-support-grid {
		grid-template-columns: 1fr;
	}

	.dashboard-app .dashboard-renter-side-column {
		max-width: none;
		justify-self: stretch;
	}

	.dashboard-app .dashboard-renter-edit-screen .dashboard-field--phone-wide {
		grid-column: span 1;
	}

	.dashboard-app .dashboard-renter-company-contact-grid {
		grid-template-columns: 1fr;
	}

	.dashboard-app .dashboard-renter-company-contact-grid > .dashboard-field--phone-wide {
		max-width: none;
		grid-column: auto;
	}
}

@media (max-width: 860px) {
	.dashboard-app .dashboard-renter-kind-switch__controls,
	.dashboard-app .dashboard-renter-header-actions {
		justify-content: flex-start;
	}

	.dashboard-app .dashboard-renter-kind-switch__search input[type="search"] {
		min-width: 0;
		width: 100%;
	}
}

.dashboard-user-status-line {
	font-size: 12px;
	margin-top: 2px;
}

.dashboard-meta-text {
	font-size: 11px;
	opacity: 0.8;
	margin-left: 6px;
}

.dashboard-online-dot {
	display: inline-block;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	margin-right: 6px;
	vertical-align: -1px;
	background: #d00;
}

.dashboard-online-dot.is-online {
	background: #1bb84a;
}

.dashboard-online-dot.is-offline {
	background: #d00;
}

.dashboard-button.is-disabled,
.dashboard-button[disabled] {
	opacity: 0.55;
	cursor: not-allowed;
	pointer-events: none;
}

/* Dashboard top navigation (Phase 2: role/module aware). */
.dashboard-nav {
	margin: 8px 0 18px;
}

.dashboard-nav__inner {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.dashboard-nav__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 7px 12px;
	border: 1px solid #d6dbe3;
	border-radius: 999px;
	text-decoration: none;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.15;
	color: #334155;
	background: #f7f8fa;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.dashboard-nav__link:hover {
	border-color: #c3cbd6;
	background: #eef2f6;
	color: #0f172a;
}

.dashboard-nav__link:focus-visible {
	outline: none;
	border-color: #98a2b3;
	box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.16);
}

.dashboard-nav__link.is-active {
	border-color: #0f172a;
	background: #111827;
	color: #ffffff;
	box-shadow: 0 0 0 1px rgba(15, 23, 42, 0.08);
}

@media (max-width: 767px) {
	.dashboard-app {
		padding: 14px 14px 20px;
	}

	.dashboard-app h1 {
		font-size: 32px;
		line-height: 1.04;
		letter-spacing: -0.03em;
	}

	.dashboard-app .dashboard-topbar {
		display: grid;
		grid-template-columns: 1fr;
		gap: 12px;
		padding: 14px;
		border-radius: 16px;
	}

	.dashboard-app .dashboard-topbar-title {
		font-size: 15px;
		line-height: 1.2;
	}

	.dashboard-app .dashboard-topbar-actions {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px;
		width: 100%;
	}

	.dashboard-app .dashboard-topbar-actions > .dashboard-topbar-profile-meta {
		order: 1;
		grid-column: 1 / -1;
		min-height: auto;
		padding: 0;
		font-size: 12px;
		line-height: 1.35;
		white-space: normal;
	}

	.dashboard-app .dashboard-topbar-actions > a:nth-of-type(1) {
		order: 2;
		grid-column: 1 / -1;
	}

	.dashboard-app .dashboard-topbar-actions > a:nth-of-type(2) {
		order: 3;
	}

	.dashboard-app .dashboard-topbar-actions > a:nth-of-type(3) {
		order: 4;
	}

	.dashboard-app .dashboard-topbar-actions > .dashboard-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		min-height: 42px;
		padding: 0 12px;
		font-size: 13px;
		text-align: center;
	}

	.dashboard-nav {
		margin: 10px 0 14px;
	}

	.dashboard-nav__inner {
		flex-wrap: nowrap;
		gap: 8px;
		overflow-x: auto;
		padding: 0 2px 4px;
		scrollbar-width: none;
		-webkit-overflow-scrolling: touch;
	}

	.dashboard-nav__inner::-webkit-scrollbar {
		display: none;
	}

	.dashboard-nav__link {
		flex: 0 0 auto;
		min-height: 38px;
		padding: 0 12px;
		font-size: 13px;
		white-space: nowrap;
	}

	.dashboard-app .dashboard-card,
	.dashboard-app .dashboard-form-section {
		padding: 12px;
		margin: 10px 0;
		border-radius: 14px;
	}

	.dashboard-app .dashboard-module-title {
		font-size: 18px;
		margin: 10px 0 10px;
	}
}


	/* Photo lightbox (Gebouwfoto's) */
	.gb-photo-modal-overlay{
		position:fixed;
		top:0;left:0;right:0;bottom:0;
		z-index:99999;
		background:rgba(0,0,0,0.75);
		display:none;
		align-items:center;
		justify-content:center;
		padding:20px;
	}
	.gb-photo-modal-overlay.is-open{ display:flex; }
	.gb-photo-modal-content{
		position:relative;
		display:flex;
		align-items:center;
		justify-content:center;
		max-width:1020px;
		max-height:1020px;
	}
	.gb-photo-modal-content img{
		display:block;
		max-width:100%;
		max-height:100%;
		border-radius:8px;
		background:#fff;
		box-shadow:0 10px 40px rgba(0,0,0,0.4);
	}
	.gb-photo-modal-close{
		position:absolute;
		top:-12px;
		right:-12px;
		width:34px;
		height:34px;
		border-radius:17px;
		border:1px solid rgba(0,0,0,0.25);
		background:#fff;
		cursor:pointer;
		font-size:22px;
		line-height:30px;
		text-align:center;
		padding:0;
		box-shadow:0 6px 16px rgba(0,0,0,0.25);
	}
	.gb-photo-modal-close:hover{ filter:brightness(0.98); }

.gb-photo-thumb { cursor: zoom-in; }
body.gb-modal-open { overflow: hidden; }



/* K1.3.1 - Private renter intake blocks */
.vbd-private-renter-block{
	/* Deze blocks krijgen ook de class .dashboard-card. Houd deze rule licht zodat de styling gelijk blijft aan zakelijk. */
	margin: 16px 0;
}
.vbd-private-renter-block h3{
	margin: 0 0 12px 0;
}
.vbd-private-renter-block .form-table th{
	width: 220px;
}
.vbd-private-renter-block input[readonly]{
	opacity: 0.85;
}


/* Right-align actions columns (tables) */
.dashboard-col-actions {
	text-align: right;
	white-space: nowrap;
}


/* K2.4.82 — compacte witte datepicker-overlay voor alle dashboardkalenders */
body.vbd-dashboard-page .ui-datepicker,
body.vbd-dashboard-page #ui-datepicker-div{
	width:240px;
	padding:8px;
	background:#ffffff !important;
	border:1px solid #dbe2ea !important;
	border-radius:12px;
	box-shadow:0 18px 40px rgba(15,23,42,0.16);
	color:#0f172a;
	z-index:100050 !important;
}
body.vbd-dashboard-page .ui-datepicker *,
body.vbd-dashboard-page #ui-datepicker-div *{
	box-sizing:border-box;
}
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-header,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-header{
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	min-height:32px;
	margin:0 0 6px;
	padding:0 30px;
	background:#ffffff;
	border:0;
}
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-title,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-title{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:6px;
	margin:0;
	font-size:12px;
	font-weight:600;
	color:#0f172a;
}
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-title select,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-title select{
	height:28px;
	min-width:72px;
	margin:0;
	padding:4px 8px;
	border:1px solid #dbe2ea;
	border-radius:8px;
	background:#ffffff;
	color:#0f172a;
	font-size:12px;
	line-height:1.2;
}
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-prev,
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-next,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-prev,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-next{
	position:absolute;
	top:2px;
	width:28px;
	height:28px;
	border:1px solid #dbe2ea;
	border-radius:8px;
	background:#ffffff;
	text-decoration:none;
	cursor:pointer;
}
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-prev,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-prev{
	left:0;
}
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-next,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-next{
	right:0;
}
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-prev:hover,
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-next:hover,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-prev:hover,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-next:hover{
	background:#f8fafc;
	border-color:#cbd5e1;
}
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-prev span,
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-next span,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-prev span,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-next span{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:0;
	line-height:0;
	color:transparent;
}
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-prev span::before,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-prev span::before{
	content:'‹';
	font-size:18px;
	line-height:1;
	color:#334155;
}
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-next span::before,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-next span::before{
	content:'›';
	font-size:18px;
	line-height:1;
	color:#334155;
}
body.vbd-dashboard-page .ui-datepicker table,
body.vbd-dashboard-page #ui-datepicker-div table{
	width:100%;
	margin:0;
	border-collapse:separate;
	border-spacing:0;
	background:#ffffff;
}
body.vbd-dashboard-page .ui-datepicker th,
body.vbd-dashboard-page #ui-datepicker-div th{
	padding:4px 0;
	border:0;
	background:transparent;
	font-size:11px;
	font-weight:700;
	text-align:center;
	color:#64748b;
}
body.vbd-dashboard-page .ui-datepicker td,
body.vbd-dashboard-page #ui-datepicker-div td{
	padding:1px;
	border:0;
	background:#ffffff;
}
body.vbd-dashboard-page .ui-datepicker td span,
body.vbd-dashboard-page .ui-datepicker td a,
body.vbd-dashboard-page #ui-datepicker-div td span,
body.vbd-dashboard-page #ui-datepicker-div td a{
	display:flex;
	align-items:center;
	justify-content:center;
	width:28px;
	height:28px;
	margin:0 auto;
	border:1px solid transparent;
	border-radius:8px;
	background:#ffffff;
	color:#0f172a;
	font-size:12px;
	text-decoration:none;
}
body.vbd-dashboard-page .ui-datepicker td a:hover,
body.vbd-dashboard-page #ui-datepicker-div td a:hover{
	background:#eff6ff;
	border-color:#bfdbfe;
	color:#1d4ed8;
}
body.vbd-dashboard-page .ui-datepicker td.ui-datepicker-today a,
body.vbd-dashboard-page .ui-datepicker td.ui-datepicker-today span,
body.vbd-dashboard-page #ui-datepicker-div td.ui-datepicker-today a,
body.vbd-dashboard-page #ui-datepicker-div td.ui-datepicker-today span{
	background:#f8fafc;
	border-color:#cbd5e1;
	font-weight:700;
}
body.vbd-dashboard-page .ui-datepicker td.ui-datepicker-current-day a,
body.vbd-dashboard-page #ui-datepicker-div td.ui-datepicker-current-day a{
	background:#2563eb;
	border-color:#2563eb;
	color:#ffffff;
	font-weight:700;
}
body.vbd-dashboard-page .ui-datepicker td.ui-state-disabled span,
body.vbd-dashboard-page #ui-datepicker-div td.ui-state-disabled span{
	color:#cbd5e1;
}
body.vbd-dashboard-page .ui-datepicker td.ui-datepicker-other-month span,
body.vbd-dashboard-page #ui-datepicker-div td.ui-datepicker-other-month span{
	color:#cbd5e1;
}
body.vbd-dashboard-page .ui-datepicker .ui-datepicker-buttonpane,
body.vbd-dashboard-page #ui-datepicker-div .ui-datepicker-buttonpane{
	display:none;
}
@media (max-width: 640px){
	body.vbd-dashboard-page .ui-datepicker,
	body.vbd-dashboard-page #ui-datepicker-div{
		width:228px;
		padding:7px;
	}
}


/* Sprint K2.7.2 – Medewerker extensielaag */
.dashboard-app .dashboard-grid-3,
.dashboard-grid-3 {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
}

.dashboard-app .dashboard-user-layout,
.dashboard-user-layout {
	display: grid;
	grid-template-columns: minmax(0, 4fr) minmax(220px, 1fr);
	gap: 18px;
	align-items: start;
}

.dashboard-app .dashboard-user-layout--permissions,
.dashboard-user-layout--permissions {
	grid-template-columns: minmax(240px, 2fr) minmax(0, 3fr);
}

.dashboard-app .dashboard-user-layout-side,
.dashboard-user-layout-side {
	min-width: 0;
}

.dashboard-app .dashboard-user-layout-main,
.dashboard-user-layout-main {
	min-width: 0;
}

.dashboard-app .dashboard-user-permission-groups,
.dashboard-user-permission-groups {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.dashboard-app .dashboard-user-permission-group,
.dashboard-user-permission-group {
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 14px;
	background: #fff;
}

.dashboard-app .dashboard-user-permission-group h4,
.dashboard-user-permission-group h4 {
	margin: 0 0 10px;
	font-size: 15px;
}

.dashboard-app .dashboard-js-buildings-wrap.is-all-selected,
.dashboard-js-buildings-wrap.is-all-selected {
	opacity: 0.75;
}

.dashboard-app .dashboard-field-spacer,
.dashboard-field-spacer {
	visibility: hidden;
}

@media (max-width: 980px) {
	.dashboard-app .dashboard-user-layout,
	.dashboard-user-layout,
	.dashboard-app .dashboard-user-layout--permissions,
	.dashboard-user-layout--permissions,
	.dashboard-app .dashboard-grid-3,
	.dashboard-grid-3,
	.dashboard-app .dashboard-user-permission-groups,
	.dashboard-user-permission-groups {
		grid-template-columns: 1fr;
	}
}

/* Sprint M1.1.9 — compacte shell voor contracten en gebouwen */
.dashboard-app .dashboard-contract-form--compact-flow,
.dashboard-app .gb-page .gb-edit-form {
	display: grid;
	gap: 12px;
}

.dashboard-app .dashboard-contract-form--compact-flow > .dashboard-card,
.dashboard-app .dashboard-contract-form--compact-flow > .dashboard-contract-section,
.dashboard-app .gb-page .gb-form-details > .dashboard-card,
.dashboard-app .gb-page .gb-form-details > .dashboard-form-section {
	margin: 0 !important;
	padding: 14px 16px;
	border: 1px solid #dbe5f2;
	border-radius: 16px;
	background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}

.dashboard-app .dashboard-contract-form--compact-flow > .dashboard-card > .dashboard-card-body,
.dashboard-app .gb-page .gb-form-details > .dashboard-card > .dashboard-collapsible-body,
.dashboard-app .gb-page .gb-form-details > .dashboard-form-section > .dashboard-collapsible-body {
	padding: 0;
}

.dashboard-app .dashboard-contract-form--compact-flow h3,
.dashboard-app .gb-page .gb-form-details .dashboard-collapsible-title {
	margin: 0;
	font-size: 15px;
	line-height: 1.25;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-card-header,
.dashboard-app .gb-page .gb-form-details .dashboard-collapsible-header {
	min-height: 34px;
	padding: 0;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-divider,
.dashboard-app .gb-page .gb-form-details .dashboard-divider {
	margin: 12px 0;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-grid-2,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-grid-4,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-terms-grid,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-vat-grid,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-billing-grid,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-grid-4,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-grid-5,
.dashboard-app .gb-page .gb-edit-form .dashboard-grid-2,
.dashboard-app .gb-page .gb-edit-form .dashboard-grid-3,
.dashboard-app .gb-page .gb-edit-form .dashboard-grid-4,
.dashboard-app .gb-page .gb-edit-form .dashboard-grid-4-302020 {
	gap: 12px 14px;
	align-items: start;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-field,
.dashboard-app .gb-page .gb-edit-form .dashboard-field {
	margin-bottom: 0;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-field > label,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-label,
.dashboard-app .gb-page .gb-edit-form .dashboard-field > label,
.dashboard-app .gb-page .gb-edit-form .dashboard-label {
	display: block;
	margin: 0 0 3px;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.25;
	color: #6b778c;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-field input[type="text"],
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-field input[type="email"],
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-field input[type="number"],
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-field input[type="date"],
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-field input[type="password"],
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-field select,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-field textarea,
.dashboard-app .gb-page .gb-edit-form .dashboard-field input[type="text"],
.dashboard-app .gb-page .gb-edit-form .dashboard-field input[type="email"],
.dashboard-app .gb-page .gb-edit-form .dashboard-field input[type="number"],
.dashboard-app .gb-page .gb-edit-form .dashboard-field input[type="date"],
.dashboard-app .gb-page .gb-edit-form .dashboard-field input[type="password"],
.dashboard-app .gb-page .gb-edit-form .dashboard-field select,
.dashboard-app .gb-page .gb-edit-form .dashboard-field textarea,
.dashboard-app .gb-page .gb-edit-form input[type="file"] {
	min-height: 36px;
	padding: 6px 10px;
	border-radius: 12px;
	font-size: 14px;
	line-height: 1.35;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-field textarea,
.dashboard-app .gb-page .gb-edit-form .dashboard-field textarea {
	min-height: 110px;
	border-radius: 14px;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-button,
.dashboard-app .gb-page .gb-edit-form .dashboard-button {
	min-height: 38px;
	padding: 8px 12px;
	font-size: 13px;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-hint,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-help,
.dashboard-app .gb-page .gb-edit-form .dashboard-hint,
.dashboard-app .gb-page .gb-edit-form .dashboard-help,
.dashboard-app .gb-page .gb-edit-form .dashboard-muted {
	margin-top: 3px;
	font-size: 12px;
	line-height: 1.4;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-radio-row,
.dashboard-app .gb-page .gb-edit-form .dashboard-radio-row {
	gap: 6px 14px;
	flex-wrap: wrap;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-money-input {
	min-height: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	overflow: hidden;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-money-prefix {
	display: none;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-money-input .dashboard-input--money {
	min-height: 34px;
	border: 1px solid #d1d5db !important;
	border-radius: 8px !important;
	background: #ffffff;
	padding: 6px 10px !important;
	box-shadow: none !important;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-scope-picker {
	padding: 12px 14px;
	border: 1px solid #dbe5f2;
	border-radius: 16px;
	background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.04);
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-area-summary {
	margin: 0 0 4px;
	font-size: 14px;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-area-breakdown {
	margin: 0 0 8px;
	font-size: 12px;
	line-height: 1.4;
	color: #64748b;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-scope-panels,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-scope-panel {
	display: grid;
	gap: 8px;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-scope-section-title {
	margin: 6px 0 2px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #475569;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-scope-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 8px 16px;
	align-items: center;
	padding: 10px 12px;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	background: #fff;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-scope-row > label {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	min-width: 0;
	font-weight: 600;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-scope-row input[type="checkbox"] {
	margin-top: 2px;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-scope-label {
	font-size: 14px;
	line-height: 1.35;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-scope-meta {
	font-size: 13px;
	line-height: 1.35;
	color: #64748b;
	text-align: right;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-units-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 10px;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-floor-block {
	padding: 10px;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	background: #fff;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-floor-title {
	margin: 0 0 8px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	color: #334155;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-units-table {
	display: grid;
	gap: 6px;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-unit-row {
	display: grid;
	grid-template-columns: minmax(0, 1.2fr) minmax(64px, auto) minmax(90px, auto) 18px;
	gap: 6px 10px;
	align-items: center;
	min-height: 40px;
	padding: 6px 10px;
	border: 1px solid #edf2f7;
	border-radius: 12px;
	background: #fbfdff;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-unit-col {
	min-width: 0;
	font-size: 12px;
	line-height: 1.3;
	color: #475569;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-unit-col.is-code {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-width: 0;
	font-size: 14px;
	font-weight: 700;
	color: #1e293b;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-unit-col.is-code input[type="checkbox"] {
	margin: 0;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-unit-code {
	display: inline-block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-unit-col.is-area,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-unit-col.is-end {
	white-space: nowrap;
	text-align: right;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-unit-col.is-signal {
	display: inline-flex;
	align-items: center;
	justify-content: flex-end;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-pricing-segments {
	display: grid;
	grid-template-columns: 1fr;
	gap: 6px;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-pricing-segment-card {
	padding: 8px 10px;
	border: 1px solid #dbe5f2;
	border-radius: 8px;
	background: #ffffff;
	box-shadow: 0 4px 14px rgba(15, 23, 42, 0.03);
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-pricing-segment-card.is-alt-row {
	background: #eef2f7;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-pricing-segment-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 8px 14px;
	margin-bottom: 4px;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-pricing-segment-header h4 {
	margin: 0;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.25;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-pricing-segment-sources {
	color: #64748b;
	font-size: 0.88em;
	font-weight: 700;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-pricing-segment-card .dashboard-grid-4 {
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 5px 8px;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-pricing-segment-card .dashboard-field,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-pricing-segment-card .dashboard-money-input {
	max-width: none;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-pricing-segment-card .dashboard-field {
	margin-bottom: 2px;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-section--pricing .dashboard-contract-pricing-area-breakdown {
	width: 100%;
	max-width: none;
	overflow-wrap: normal;
	word-break: normal;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-pricing-segment-card .dashboard-label {
	margin-bottom: 2px;
	font-size: 13px;
	line-height: 1.2;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-parking-warning {
	position: relative;
	margin: 0 0 8px;
	padding: 10px 12px;
	border: 1px solid #f59e0b;
	border-radius: 10px;
	background: #fffbeb;
	color: #92400e;
	font-size: 13px;
	font-weight: 700;
	line-height: 1.35;
	box-shadow: 0 8px 18px rgba(146, 64, 14, 0.12);
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-parking-warning[hidden] {
	display: none;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-parking-warning::after {
	position: absolute;
	left: 22px;
	bottom: -7px;
	width: 12px;
	height: 12px;
	border-right: 1px solid #f59e0b;
	border-bottom: 1px solid #f59e0b;
	background: #fffbeb;
	content: "";
	transform: rotate(45deg);
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-unit-row--floor {
	background: rgba(248, 250, 252, 0.92);
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-unit-row--floor .dashboard-contract-unit-code {
	font-weight: 700;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-unit-row--public-space,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-scope-row--public-space {
	cursor: default;
	color: #64748b;
	background: rgba(241, 245, 249, 0.78);
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-dot.is-muted {
	background: #cbd5e1;
	box-shadow: none;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-subtotal td {
	font-weight: 700;
	background: #e5e7eb;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-subtotal td:nth-child(2),
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-subtotal td:nth-child(3) {
	border-top: 0;
	border-bottom: 0;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-total td {
	font-weight: 800;
	background: #e5e7eb;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-total td:nth-child(2),
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-total td:nth-child(3) {
	border-top: 0;
	border-bottom: 0;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-group-before-total td:nth-child(2),
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-group-before-total td:nth-child(3) {
	border-bottom: 0;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-group-total td {
	background: #e5e7eb;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-group-total td:nth-child(2),
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-group-total td:nth-child(3) {
	border-bottom: 0;
	font-weight: 700;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-group-total .dashboard-contract-summary-money-value,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-subtotal .dashboard-contract-summary-money-value,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-total .dashboard-contract-summary-money-value {
	display: inline-block;
	border-bottom: 2px solid #1f2937;
	line-height: 1.05;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-summary-table tr.is-total .dashboard-contract-summary-money-value {
	border-bottom: 3px double #1f2937;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-other-cost-row {
	display: grid;
	grid-template-columns: minmax(180px, 1.3fr) minmax(130px, 0.55fr) minmax(160px, 0.75fr) auto;
	gap: 10px;
	align-items: center;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-grid-5 {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-cost-actions,
.dashboard-app .gb-page .gb-edit-form .dashboard-actions-row--form {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	flex-wrap: wrap;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-billing-grid {
	gap: 14px;
}

.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-billing-row,
.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-billing-amount-layout {
	gap: 12px;
}

.dashboard-app .gb-page .gb-form-details {
	display: grid;
	gap: 12px;
}

.dashboard-app .gb-page .gb-edit-form .dashboard-table--compact th,
.dashboard-app .gb-page .gb-edit-form .dashboard-table--compact td {
	padding: 8px 10px;
	font-size: 13px;
}

	.dashboard-app .gb-page .gb-edit-form .gb-floor-grid {
		gap: 8px 18px;
	}

	.dashboard-app .gb-page .gb-edit-form .gb-outdoor-breakdown-wrap {
		margin-top: 14px;
	}

	.dashboard-app .gb-page .gb-edit-form .gb-outdoor-breakdown-table th,
	.dashboard-app .gb-page .gb-edit-form .gb-outdoor-breakdown-table td {
		vertical-align: top;
	}

	.dashboard-app .gb-page .gb-edit-form .gb-outdoor-breakdown-table input {
		min-width: 120px;
	}

	.dashboard-app .gb-page .gb-edit-form .gb-floor-mode-row {
	padding: 10px 12px;
	border-radius: 12px;
	border-color: #dbe5f2;
	background: #fff;
}

.dashboard-app .gb-page .gb-edit-form .dashboard-actions-row--form {
	padding-top: 2px;
}

.dashboard-app .gb-page .gb-edit-form .dashboard-actions-row--section {
	margin-top: 14px;
	padding-top: 12px;
	display: block !important;
	text-align: right !important;
	border-top: 1px solid #e8eef7;
}

.dashboard-app .gb-page .gb-edit-form .dashboard-actions-row--section .dashboard-button {
	min-width: 110px;
}

.dashboard-app .gb-page .gb-edit-form .gb-section-actions-inline {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	gap: 30px !important;
	flex-wrap: nowrap !important;
	margin-left: 0 !important;
	vertical-align: top;
}

.dashboard-app .gb-page .gb-edit-form .gb-section-actions-inline .dashboard-button-save,
.dashboard-app .gb-page .gb-edit-form .gb-section-actions-inline .dashboard-button-cancel {
	margin-left: 0 !important;
	margin-right: 0 !important;
	flex: 0 0 auto !important;
}

	@media (max-width: 1400px) {
		.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-pricing-segment-card .dashboard-grid-4 {
			grid-template-columns: repeat(4, minmax(0, 1fr));
		}

	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-grid-4,
	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-grid-5,
	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-grid-4,
	.dashboard-app .gb-page .gb-edit-form .dashboard-grid-3,
	.dashboard-app .gb-page .gb-edit-form .dashboard-grid-4,
	.dashboard-app .gb-page .gb-edit-form .dashboard-grid-4-302020 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-units-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 1200px) {
	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-units-grid {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 760px) {
	.dashboard-app .dashboard-contract-form--compact-flow > .dashboard-card,
	.dashboard-app .dashboard-contract-form--compact-flow > .dashboard-contract-section,
	.dashboard-app .gb-page .gb-form-details > .dashboard-card,
	.dashboard-app .gb-page .gb-form-details > .dashboard-form-section,
	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-scope-picker {
		padding: 12px;
		border-radius: 14px;
	}

	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-grid-2,
	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-grid-4,
	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-terms-grid,
	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-vat-grid,
	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-billing-grid,
	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-grid-4,
	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-grid-5,
	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-pricing-segment-card .dashboard-grid-4,
	.dashboard-app .gb-page .gb-edit-form .dashboard-grid-2,
	.dashboard-app .gb-page .gb-edit-form .dashboard-grid-3,
	.dashboard-app .gb-page .gb-edit-form .dashboard-grid-4,
	.dashboard-app .gb-page .gb-edit-form .dashboard-grid-4-302020,
	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-unit-row,
	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-other-cost-row {
		grid-template-columns: 1fr;
	}

	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-scope-row {
		grid-template-columns: 1fr;
	}

	.dashboard-app .dashboard-contract-form--compact-flow .dashboard-contract-scope-meta {
		text-align: left;
	}
}


/* Sprint K2.7.3 – medewerker validatie + read-only profiel */
.dashboard-app .dashboard-form-error-summary,
.dashboard-form-error-summary {
	margin-bottom: 16px;
}

.dashboard-app .dashboard-form-error-summary ul,
.dashboard-form-error-summary ul {
	margin: 8px 0 0 18px;
}

.dashboard-app .dashboard-field--invalid input,
.dashboard-app .dashboard-field--invalid select,
.dashboard-app .dashboard-field--invalid textarea,
.dashboard-field--invalid input,
.dashboard-field--invalid select,
.dashboard-field--invalid textarea {
	border-color: #b42318 !important;
	box-shadow: 0 0 0 1px rgba(180, 35, 24, 0.12);
	background: #fff7f7;
}

.dashboard-app .dashboard-field-error,
.dashboard-field-error {
	margin: 6px 0 0;
	font-size: 13px;
	color: #b42318;
}

.dashboard-app .dashboard-readonly-panel,
.dashboard-readonly-panel {
	border: 1px solid #d0d7de;
	border-radius: 12px;
	padding: 14px 16px;
	background: #f8fafc;
}

.dashboard-app .dashboard-readonly-muted,
.dashboard-readonly-muted {
	opacity: 0.72;
	pointer-events: none;
}

.dashboard-app .dashboard-readonly-muted .dashboard-permission-row,
.dashboard-readonly-muted .dashboard-permission-row {
	color: #6b7280;
}

.dashboard-app .dashboard-profile-summary,
.dashboard-profile-summary {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-bottom: 16px;
}

.dashboard-app .dashboard-profile-summary-item,
.dashboard-profile-summary-item {
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	padding: 12px 14px;
	background: #fff;
}

.dashboard-app .dashboard-employee-portal,
.dashboard-employee-portal {
	display: grid;
	gap: 18px;
}

.dashboard-app .dashboard-employee-top,
.dashboard-employee-top {
	display: grid;
	grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
	gap: 18px;
}

.dashboard-app .dashboard-employee-shell,
.dashboard-employee-shell {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
}

.dashboard-app .dashboard-employee-card,
.dashboard-employee-card {
	border: 1px solid #d9e2ec;
	border-radius: 14px;
	padding: 18px;
	background: #fff;
	min-height: 138px;
}

.dashboard-app .dashboard-employee-card h3,
.dashboard-employee-card h3 {
	margin: 0 0 8px;
}

.dashboard-app .dashboard-pill,
.dashboard-pill {
	display: inline-flex;
	align-items: center;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	background: #eef2ff;
	color: #374151;
}

@media (max-width: 980px) {
	.dashboard-app .dashboard-profile-summary,
	.dashboard-profile-summary,
	.dashboard-app .dashboard-employee-top,
	.dashboard-employee-top,
	.dashboard-app .dashboard-employee-shell,
	.dashboard-employee-shell {
		grid-template-columns: 1fr;
	}
}

.dashboard-app .dashboard-medewerker-onboarding-form,
.dashboard-medewerker-onboarding-form {
	display: grid;
	gap: 14px;
}

.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-grid-2,
.dashboard-medewerker-onboarding-form .dashboard-grid-2 {
	grid-template-columns: 1fr;
	gap: 10px;
}

.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field,
.dashboard-medewerker-onboarding-form .dashboard-field {
	margin-bottom: 0;
}

.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked),
.dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) {
	display: grid;
	grid-template-columns: minmax(96px, 1fr) minmax(0, 2fr);
	gap: 10px 18px;
	align-items: center;
}

.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > label,
.dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > label {
	grid-column: 1;
	margin: 0;
	align-self: center;
}

.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > input,
.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > select,
.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > textarea,
.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > .dashboard-password-field,
.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > .dashboard-user-photo-preview,
.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > .dashboard-field-error,
.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > .dashboard-muted,
.dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > input,
.dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > select,
.dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > textarea,
.dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > .dashboard-password-field,
.dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > .dashboard-user-photo-preview,
.dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > .dashboard-field-error,
.dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > .dashboard-muted {
	grid-column: 2;
}

.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > input,
.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > select,
.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > textarea,
.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > .dashboard-password-field,
.dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > input,
.dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > select,
.dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > textarea,
.dashboard-medewerker-onboarding-form .dashboard-field:not(.dashboard-field--stacked) > .dashboard-password-field {
	width: 100%;
}

.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field--stacked,
.dashboard-medewerker-onboarding-form .dashboard-field--stacked {
	display: grid;
	gap: 8px;
}

.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-field--stacked > label,
.dashboard-medewerker-onboarding-form .dashboard-field--stacked > label {
	margin-bottom: 0;
}

.dashboard-app .dashboard-medewerker-onboarding-form .dashboard-password-field input[type="password"],
.dashboard-medewerker-onboarding-form .dashboard-password-field input[type="password"] {
	max-width: none;
}


.dashboard-app .dashboard-readonly-checkboxes label,
.dashboard-readonly-checkboxes label {
	display: block;
	opacity: 0.72;
	cursor: default;
}

.dashboard-app .dashboard-readonly-checkboxes input,
.dashboard-readonly-checkboxes input {
	pointer-events: none;
}

.dashboard-app .gb-derived-function-summary,
.gb-derived-function-summary {
	display: grid;
	gap: 10px;
}

.dashboard-app .gb-derived-function-labels,
.gb-derived-function-labels {
	font-weight: 600;
	color: #1f2937;
}

.dashboard-app .gb-derived-function-note,
.gb-derived-function-note {
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #64748b;
}

.dashboard-app .gb-derived-function-descriptions,
.gb-derived-function-descriptions {
	margin: 0;
	padding-left: 18px;
	display: grid;
	gap: 6px;
}

.dashboard-app .dashboard-empty-state,
.dashboard-empty-state {
	padding: 18px 20px;
	text-align: center;
	background: #f8fafc;
	color: #64748b;
	font-weight: 600;
}

.dashboard-app .dashboard-input--readonly,
.dashboard-input--readonly {
	background: #eef2f7;
	color: #475569;
	cursor: not-allowed;
}

.dashboard-app .dashboard-rp-wizard-card .dashboard-card__header > .dashboard-help,
.dashboard-app .dashboard-rp-full-copy,
.dashboard-app .dashboard-rp-copy-block,
.dashboard-app .dashboard-rp-doc-copy,
.dashboard-app .dashboard-rp-doc-copy p,
.dashboard-app .dashboard-rp-doc-copy ul,
.dashboard-rp-wizard-card .dashboard-card__header > .dashboard-help,
.dashboard-rp-full-copy,
.dashboard-rp-copy-block,
.dashboard-rp-doc-copy,
.dashboard-rp-doc-copy p,
.dashboard-rp-doc-copy ul {
	width: 100%;
	max-width: none;
	grid-column: 1 / -1;
}

.dashboard-app .dashboard-rp-wizard-card .dashboard-card__header,
.dashboard-rp-wizard-card .dashboard-card__header {
	display: block;
}

.dashboard-app .dashboard-card__header > .dashboard-help.dashboard-shell-copy-sm,
.dashboard-card__header > .dashboard-help.dashboard-shell-copy-sm {
	width: 100%;
	max-width: none;
	grid-column: 1 / -1;
}

.dashboard-app .gb-building-wizard-dialog,
.gb-building-wizard-dialog {
	width: min(1220px, calc(100vw - 32px));
	height: min(900px, calc(100vh - 32px));
	max-width: calc(100vw - 32px);
	max-height: calc(100vh - 32px);
	overflow: hidden;
	border-radius: 28px;
}

.dashboard-app .gb-building-wizard-form,
.gb-building-wizard-form {
	display: flex;
	flex-direction: column;
	height: 100%;
	max-height: 100%;
	min-height: 0;
}

.dashboard-app .gb-building-wizard-dialog .dashboard-modal-header,
.gb-building-wizard-dialog .dashboard-modal-header {
	flex: 0 0 auto;
	padding: 22px 28px;
}

.dashboard-app .gb-building-wizard-dialog .dashboard-modal-title,
.gb-building-wizard-dialog .dashboard-modal-title {
	font-size: 24px;
	line-height: 1.25;
	font-weight: 500;
}

.dashboard-app .gb-building-wizard-body,
.gb-building-wizard-body {
	flex: 1 1 auto;
	min-height: 0;
	overflow: auto;
	padding: 24px 28px;
	background: #f4f7fb;
}

.dashboard-app .gb-building-wizard-subtitle,
.gb-building-wizard-subtitle {
	margin: 4px 0 0;
	font-size: 13px;
}

.dashboard-app .gb-building-wizard-progress,
.gb-building-wizard-progress {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 8px;
	margin-bottom: 18px;
}

.dashboard-app .gb-building-wizard-progress span,
.gb-building-wizard-progress span {
	display: block;
	height: 6px;
	border-radius: 999px;
	background: #e2e8f0;
}

.dashboard-app .gb-building-wizard-progress span.is-active,
.gb-building-wizard-progress span.is-active {
	background: #2563eb;
}

.dashboard-app .gb-building-wizard-step,
.gb-building-wizard-step {
	display: none;
}

.dashboard-app .gb-building-wizard-step.is-active,
.gb-building-wizard-step.is-active {
	display: block;
}

.dashboard-app .gb-building-wizard-step h4,
.gb-building-wizard-step h4 {
	margin: 0 0 8px;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	color: #1f2937;
}

.dashboard-app .gb-building-wizard-choice-grid,
.gb-building-wizard-choice-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 14px;
	margin-top: 16px;
}

.dashboard-app .gb-building-wizard-choice,
.gb-building-wizard-choice {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 8px 12px;
	align-items: start;
	padding: 16px;
	border: 1px solid #dbe4ef;
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
}

.dashboard-app .gb-building-wizard-choice:has(input:checked),
.gb-building-wizard-choice:has(input:checked) {
	border-color: #2563eb;
	box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.dashboard-app .gb-building-wizard-choice input,
.gb-building-wizard-choice input {
	grid-row: 1 / span 2;
	margin-top: 3px;
}

.dashboard-app .gb-building-wizard-choice strong,
.gb-building-wizard-choice strong {
	color: #1f2937;
}

.dashboard-app .gb-building-wizard-choice span,
.gb-building-wizard-choice span {
	color: #64748b;
	font-weight: 600;
	line-height: 1.45;
}

.dashboard-app .gb-building-wizard-radio-list,
.gb-building-wizard-radio-list {
	display: grid;
	gap: 10px;
	margin-top: 8px;
}

.dashboard-app .gb-building-wizard-radio-list label,
.gb-building-wizard-radio-list label {
	display: flex;
	gap: 8px;
	align-items: center;
	font-weight: 700;
	color: #334155;
}

.dashboard-app .gb-building-wizard-area-table,
.gb-building-wizard-area-table {
	margin: 14px 0;
}

.dashboard-app .gb-building-wizard-summary,
.gb-building-wizard-summary {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 10px;
	margin: 16px 0;
}

.dashboard-app .gb-building-wizard-summary > div,
.gb-building-wizard-summary > div {
	padding: 12px 14px;
	border: 1px solid #e2e8f0;
	border-radius: 10px;
	background: #f8fafc;
}

.dashboard-app .gb-building-wizard-summary dt,
.gb-building-wizard-summary dt {
	margin: 0 0 4px;
	color: #64748b;
	font-size: 12px;
	font-weight: 800;
	text-transform: uppercase;
}

.dashboard-app .gb-building-wizard-summary dd,
.gb-building-wizard-summary dd {
	margin: 0;
	color: #1f2937;
	font-weight: 800;
	line-height: 1.35;
}

.dashboard-app .gb-building-wizard-actions,
.gb-building-wizard-actions {
	flex: 0 0 auto;
	padding: 20px 28px;
	border-top: 1px solid #e5e7eb;
	background: #fff;
}

.dashboard-app .gb-wizard-inline-parking,
.gb-wizard-inline-parking {
	grid-template-columns: 1fr;
}

.dashboard-app .gb-wizard-inline-parking .gb-wizard-scope-tile,
.gb-wizard-inline-parking .gb-wizard-scope-tile {
	gap: 12px;
	padding: 18px;
	overflow: hidden;
}

.dashboard-app .gb-wizard-inline-parking .dashboard-table-wrap,
.gb-wizard-inline-parking .dashboard-table-wrap {
	overflow-x: auto;
}

.dashboard-app .gb-finish-wizard-body .dashboard-actions-row--section,
.gb-finish-wizard-body .dashboard-actions-row--section,
.dashboard-app .gb-finish-wizard-body > .dashboard-actions-row--form,
.gb-finish-wizard-body > .dashboard-actions-row--form {
	display: none !important;
}

@media (max-width: 760px) {
	.dashboard-app .gb-building-wizard-choice-grid,
	.gb-building-wizard-choice-grid,
	.dashboard-app .gb-building-wizard-summary,
	.gb-building-wizard-summary {
		grid-template-columns: 1fr;
	}
}