.blur-open-dialog-class {
	backdrop-filter: blur(6px);
}

/* Drag & drop stijlen voor MudTable */
.drag-handle {
	cursor: grab;
	color: var(--mud-palette-text-secondary);
	font-size: 14px;
	padding: 0 4px;
	user-select: none;
}
.drag-handle:active {
	cursor: grabbing;
}
tr[data-line-id].drag-source td {
	opacity: 0.4;
}
tr[data-line-id].drag-over-top td {
	border-top: 2px solid var(--mud-palette-primary) !important;
}
tr[data-line-id].drag-over-bottom td {
	border-bottom: 2px solid var(--mud-palette-primary) !important;
}
tr[data-line-id].drag-over-top.drag-copy-mode td {
	border-top: 2px dashed var(--mud-palette-success) !important;
}
tr[data-line-id].drag-over-bottom.drag-copy-mode td {
	border-bottom: 2px dashed var(--mud-palette-success) !important;
}
/*Scrollen in navigatiemenu */
.navmenu-root {
	display: flex;
	flex-direction: column;
	/* De lade hangt onder de appbalk (ClipMode.Always), dus is hij zelf al een balkhoogte korter dan het
	   scherm. Met een harde 100vh stak het menu daar precies die balkhoogte onderuit: het laatste item
	   ("Testdata") bleef half in beeld en verder scrollen hielp niet (bevinding 624). */
	height: 100%;
	min-height: 0;
}

.navmenu-header {
	flex: 0 0 auto;
	z-index: 1;
	background: var(--mud-palette-drawer-background);
}

.navmenu-search {
	margin-bottom: 8px;
}

/*Scrollen in navigatiemenu */
.navmenu-scroll {
	flex: 1 1 auto;
	overflow-y: auto;
	min-height: 0;
	/* Geen vaste max-height meer: die was een schatting van de kophoogte en liet onderin ruimte liggen.
	   De flexregel hierboven rekent dat exact uit. De marge onderin houdt het laatste menu-item vrij van
	   de rand van de lade. */
	padding-bottom: 8px;
}

/* MudNavGroup text alignment - alleen de hoofdknop zonder icoon, niet de sub-items en niet knoppen met een icoon */
.navmenu-navgroup-main > button:not(:has(svg)) > .mud-nav-link-text {
	margin-inline-start: 0px;
}

/* Verberg NavGroup automatisch als alle zichtbare child items verborgen zijn via zoeken */
.navmenu-navgroup-main:not(:has(.mud-nav-item:not(.d-none))) {
	display: none;
}

/* Vastpinnen van menu-items: de punaise ligt rechts over het item en verschijnt alleen bij hover (ook bij een
   gepind item — permanent zichtbaar oogde te druk). Op aanraakschermen (geen hover) is hij zwak zichtbaar,
   anders valt er niets te pinnen. */
.navmenu-pinnable {
	position: relative;
}

.navmenu-pinnable > .navmenu-pin {
	position: absolute;
	right: 4px;
	top: 50%;
	transform: translateY(-50%);
	opacity: 0;
	transition: opacity 0.15s;
}

.navmenu-pinnable:hover > .navmenu-pin,
.navmenu-pinnable.navmenu-pin-always > .navmenu-pin,
.navmenu-pinnable > .navmenu-pin:focus-visible {
	opacity: 1;
}

@media (hover: none) {
	.navmenu-pinnable > .navmenu-pin {
		opacity: 0.35;
	}
}

/*Acrering plankaartje */

.mud-paper-hatched {
	background-image: repeating-linear-gradient(135deg, rgba(0,0,0,0.07) 0px, rgba(0,0,0,0.07) 4px, transparent 2px, transparent 8px);
}
@media (max-width: 600px) {
	/* Stijlen voor schermen kleiner dan 600px */
	.screen-height {
		height: calc(100vh - 80px);
	}
	.screen-height-query {
		height: calc(100vh - 130px);
		overflow: auto;
	}
	.screen-height-tabs {
		height: calc(100vh - 178px);
		overflow: auto;
	}
	.screen-height-treeview {
		height: calc(100vh - 165px);
		overflow: auto;
	}
}


@media (min-width: 601px) and (max-width: 1200px) {
	/* Stijlen voor schermen tussen 601px en 1200px */
	.screen-height {
		height: calc(100vh - 90px);
		overflow: auto;
	}
	.screen-height-query {
		height: calc(100vh - 150px);
		overflow: auto;
	}
	.screen-height-tabs {
		height: calc(100vh - 198px);
		overflow: auto;
	}
	.screen-height-treeview {
		height: calc(100vh - 178px);
		overflow: auto;
	}
}

@media (min-width: 1201px) {
	/* Stijlen voor schermen groter dan 1200px */
	.screen-height {
		height: calc(100vh - 100px);
	}
	.screen-height-query {
		height: calc(100vh - 150px);
		overflow: auto;
	}
	.screen-height-tabs {
		height: calc(100vh - 200px);
		overflow: auto;
	}
	.screen-height-treeview {
		height: calc(100vh - 180px);
		overflow: auto;
	}
}

/* Mobile font scaling */
:root { font-size: 16px; }

/* Increase base font-size on mobile (coarse pointers and/or narrow viewports) */
@media (pointer: coarse) and (max-width: 768px), (max-width: 480px) {
  :root { font-size: 18px; }
}

/* Extra small screens */
@media (max-width: 360px) {
  :root { font-size: 19px; }
	/* dialoog randen extra klein */
	.mud-dialog-content
	{
		padding: 3px !important;
	}
}


/* Highlight edited row */
.edited-row td {
	font-weight : 600 !important;
}
/*Message box padding uvm klein scherm*/
.mud-message-box {
		margin-left: 15px;
		margin-right: 15px;
		padding-left: 15px;
		padding-right: 15px;
	}

/* Dialog actions horizontaal scrollbaar maken wanneer knoppen niet passen */
.mud-dialog .mud-dialog-actions {
	flex-wrap: nowrap !important;
	overflow-x: auto !important;
	overflow-y: hidden;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.mud-dialog .mud-dialog-actions > * {
	flex: 0 0 auto !important;
}

.mud-dialog .mud-dialog-actions > :first-child {
	margin-left: auto;
}

/* MudDialog stretch wanneer AI Assistant panel actief is */
.mud-dialog:has(.ai-assistant-panel-container) {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 80px);
	max-height: calc(100vh - 80px);
}

/* Tussenliggende elementen moeten meedoen in de flex-chain */
.mud-dialog:has(.ai-assistant-panel-container) > .mud-focus-trap {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.mud-dialog:has(.ai-assistant-panel-container) .mud-focus-trap-child-container {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.mud-dialog:has(.ai-assistant-panel-container) .mud-dialog-content {
	flex: 1;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	min-height: 0;
}

/* MudTabs binnen dialoog moeten meedoen in de flex-chain wanneer AI Assistant actief is */
.mud-dialog:has(.ai-assistant-panel-container) .mud-dialog-content > .mud-tabs {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.mud-dialog:has(.ai-assistant-panel-container) .mud-dialog-content > .mud-tabs > .mud-tabs-panels {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.mud-dialog:has(.ai-assistant-panel-container) .mud-tabs-panels > .mud-tab-panel {
	flex: 1;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* Split-pane layout voor AI Assistant */
.ai-assistant-panel-container {
	display: flex;
	flex: 1;
	overflow: hidden;
	min-height: 400px;
}

.ai-assistant-panel-left {
	flex: 1;
	overflow: auto;
	min-width: 0;
	/* Zorgt voor horizontale scrollbar wanneer content breder is dan container */
	overflow-x: auto;
	overflow-y: auto;
}

.ai-assistant-panel-right {
	width: 35%;
	min-width: 320px;
	max-width: 80%;
	margin-left: 8px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	resize: horizontal;
	direction: rtl; /* resize handle aan linkerzijde */
	height: 100%;
	padding-bottom: 6px;
}

.ai-assistant-panel-maximized {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 100% !important;
	resize: none;
}

.ai-assistant-panel-right-content {
	direction: ltr;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-bottom: 7px;
}

/* Container zonder AI Assistant */
.ai-assistant-panel-hidden {
	flex: 1;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

/* AI Assistant panel voor pagina-context (niet in dialoog) - geen vaste hoogte */
.ai-assistant-panel-container.ai-assistant-panel-page {
	height: auto;
	min-height: auto;
	max-height: none;
}

.ai-assistant-panel-page .ai-assistant-panel-right {
	height: calc(100vh - 180px);
	min-height: 400px;
}

/* AI Assistant panel in fullscreen dialoog - meer hoogte beschikbaar */
.mud-dialog-fullscreen:has(.ai-assistant-panel-container) {
	height: 100vh;
	max-height: 100vh;
}

/* AI Assistant panel fullscreen op mobiel */
@media (max-width: 960px) {
	.ai-assistant-panel-container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100vw;
		height: 100vh;
		z-index: 9999;
		background: white;
		flex-direction: column;
	}

	.ai-assistant-panel-left {
		display: none; /* Verberg linker content op mobiel wanneer AI actief is */
	}

	.ai-assistant-panel-right {
		width: 100%;
		max-width: 100%;
		min-width: 100%;
		height: 100%;
		margin-left: 0;
		resize: none;
		direction: ltr;
	}
}

/* ==========================================================================
   MainLayout — verplaatst uit de inline <style>-blokken van MainLayout.razor
   Layout-specifieke regels zijn gescoped onder .main-layout (class op MudLayout
   in MainLayout.razor) zodat ze niet lekken naar Login-/Anonymous-layouts, die
   site.css ook laden. Dialog-/autofill-/input-regels blijven bewust globaal.
   ========================================================================== */

/*https://github.com/MudBlazor/MudBlazor/pull/4132*/

.outline-none {
	/*This fixes Focus Trap and keeps the Header fixed at the top*/
	overflow-y: auto;
}

.mud-dialog-content {
	/*This fixes Focus Trap and keeps the Header fixed at the top Required
	if you set height of the MudContainer.

	Setting max height or height here gets most ideal fixed header and footer
	So do we suggest setting a max-height of the Mudcontainer??  */
	overflow-y: auto;
}

.mud-dialog-fullscreen {
	/*Geen scrolbalk bij fullschreen dialog ivm AI scherm dat zweeft*/
	overflow: hidden;
}

/*hierdoor kunnen we scrolbalk op de tabel zetten*/
html,
body {
	height: 100%;
}

.main-layout .mud-main-content {
	height: 100%;
}

/* flex-direction: column zou op de loginpagina de verticale centrering
   (d-flex align-center op een rij) breken — vandaar de .main-layout-scope */
.main-layout .mud-container {
	height: 100%;
	margin-top: 0 !important;
	display: flex;
	flex-direction: column;
	padding-top: 1rem;
}

.main-layout .mud-table-container {
	overflow: unset !important;
}

/*hierdoor kunnen we scrolbalk op de tabel zetten*/
.main-layout .mud-table-cell {
	user-select: none;
}

.mousepointer {
	cursor: pointer;
}

/*Scrollbalk uit, zit onder zoekvenster*/
.main-layout .mud-drawer {
	overflow-y: hidden;
}

/* Tekstselectie uit binnen de app (niet op login-/portaalpagina's) */
.main-layout {
	user-select: none !important;
}

/* Allow selection in MudBlazor input fields */
input, textarea, select,
.mud-input,
.mud-select,
.mud-autocomplete,
.mud-text-field,
.mud-input-root,
.mud-input-slot,
.mud-chat-bubble {
	user-select: text !important;
	-webkit-user-select: text !important;
	-moz-user-select: text !important;
	-ms-user-select: text !important;
}

@media screen and (max-width: 959px) {
	.main-layout .mud-button-label {
		font-size: smaller;
	}

	/*buttons minimale groote geven ivm terugschalen */
	.main-layout .mud-button {
		min-width: 120px;
	}

	.main-layout .mud-container--gutters {
		/*Query */
		padding-left: 6px;
		padding-right: 6px;
	}
}

/* Fix autofill agent override */
/* Change autocomplete styles in WebKit */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
	border: 1px solid #434346;
	-webkit-text-fill-color: #F1F1F1;
	-webkit-box-shadow: 0 0 0px 1000px #1B1B1C inset;
	transition: background-color 5000s ease-in-out 0s;
	background-color: transparent !important;
	color: currentColor !important;
	-webkit-box-shadow: 0 0 0 50px var(--mud-palette-autofill) inset;
	-webkit-text-fill-color: currentColor !important;
}

/* ── Dashboard ─────────────────────────────────────────────────────── */
/* De tegels van DashboardItem/DashboardVisual. De maten staan hier en niet inline, zodat ze op een
   telefoon kunnen krimpen: met de bureaubladmaat stond er één tegel per scherm en was het dashboard
   ruim vier schermen lang. */
.dashboard-tile {
	min-height: 100px;
	padding-top: 12px;
	padding-bottom: 16px;
}

/* Twee klassen diep, en dat is geen opsmuk: MudBlazor zet zelf .mud-icon-size-medium met dezelfde
   specificiteit, en die stylesheet komt later. Met alleen .dashboard-tile-icon wint MudBlazor en
   krimpen de pictogrammen naar 24 pixels. */
.dashboard-tile .dashboard-tile-icon {
	width: 54px;
	height: 54px;
	flex-shrink: 0;
	margin-left: 16px;
	margin-right: 16px;
}

.dashboard-tile-body {
	/* Meegroeien met de tegel; anders is het tekstblok net zo breed als de tekst zelf en staat de teller
	   op een telefoon tegen het label aangeplakt in plaats van rechts uitgelijnd. */
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
}

/* Kolommen en tegelmaat volgen de wérkelijke breedte van het raster (container query), niet het scherm.
   MudGrid kiest zijn kolommen op de schermbreedte: met een gedockt chat- of AI-paneel is de inhoud smal
   terwijl er nog vier kolommen staan en de tegeltekst per letter afbreekt (bevinding Sjaak 03-09). Een
   telefoon valt vanzelf onder dezelfde regels, dus de compacte tegel staat hier en niet meer in een
   media query. */
.dashboard-grid {
	container-type: inline-size;
}

@container (max-width: 1199px) {
	.dashboard-grid .mud-grid-item.mud-grid-item-lg-3 {
		flex-basis: 33.3333%;
		max-width: 33.3333%;
	}
}

@container (max-width: 849px) {
	.dashboard-grid .mud-grid-item.mud-grid-item-lg-3 {
		flex-basis: 50%;
		max-width: 50%;
	}
}

@container (max-width: 599px) {
	.dashboard-grid .mud-grid-item.mud-grid-item-lg-3 {
		flex-basis: 100%;
		max-width: 100%;
	}

	.dashboard-tile {
		min-height: 64px;
		height: auto;
		padding-top: 8px;
		padding-bottom: 8px;
		align-items: center;
	}

	.dashboard-tile .dashboard-tile-icon {
		width: 32px;
		height: 32px;
		margin-left: 12px;
		margin-right: 12px;
	}

	/* Teller naast de tekst in plaats van eronder: scheelt een regel per tegel, en het getal staat waar
	   je het bij een lijstje verwacht — rechts. Eventuele extra informatie loopt eronder over de volle
	   breedte door. */
	/* MudTooltip wikkelt zijn inhoud in een inline-block dat zich naar de tekst voegt. Zonder deze regel
	   is het raster hieronder net zo breed als het label en plakt de teller ertegenaan in plaats van
	   rechts uit te lijnen. */
	.dashboard-tile-body > * {
		display: block;
		width: 100%;
	}

	.dashboard-tile-lines {
		display: grid;
		grid-template-columns: 1fr auto;
		align-items: baseline;
		column-gap: 8px;
		padding-right: 12px;
	}

		.dashboard-tile-lines .dashboard-tile-title {
			grid-column: 1;
			grid-row: 1;
		}

		.dashboard-tile-lines .dashboard-tile-count {
			grid-column: 2;
			grid-row: 1;
			justify-self: end;
			white-space: nowrap;
		}

		.dashboard-tile-lines .dashboard-tile-extra {
			grid-column: 1 / -1;
		}
}

@media (max-width: 599px) {
	/* Tussenruimte van MudGrid (standaard 24px) halveren en de kopjes verkleinen. MudBlazor zet die
	   ruimte via de klasse mud-grid-spacing-xs-6; we blijven binnen .dashboard-grid zodat andere
	   schermen hier niets van merken. */
	.dashboard-grid.mud-grid-spacing-xs-6,
	.dashboard-grid .mud-grid-spacing-xs-6 {
		margin: -6px;
		width: calc(100% + 12px);
	}

		.dashboard-grid.mud-grid-spacing-xs-6 > .mud-grid-item,
		.dashboard-grid .mud-grid-spacing-xs-6 > .mud-grid-item {
			padding: 6px;
		}

	/* De kopjes boven elke groep: h5 met mb-4 kostte per groep bijna een tiende van het scherm. */
	.dashboard-grid .mud-typography-h5 {
		font-size: 1.15rem;
		line-height: 1.4;
		margin-bottom: 6px !important;
	}
}

.ai-main-container {
	min-height: 0;
}

.ai-layout-normal {
	min-height: 100%;
}

.ai-layout-normal .ai-layout-body {
	height: auto;
	overflow: visible;
}

.ai-layout-docked {
	display: flex;
	gap: 8px;
	height: calc(100vh - 76px);
	min-height: 420px;
	overflow: hidden;
}

/* De inhoud naast een gedockt paneel scrolt zelf: met overflow hidden was een gewone pagina (releasenotes,
   instellingen) onbereikbaar onder de vouw (bevinding Sjaak 03-09). Schermen met een eigen scroller
   (planbord, postvak) blijven op hoogte begrensd en krijgen hier geen tweede balk. */
.ai-layout-docked .ai-layout-body {
	height: 100%;
	overflow-y: auto;
	overflow-x: hidden;
}

.ai-layout-body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 0;
}

.ai-layout-docked-panel {
	position: fixed;
	top: 0;
	right: 0;
	width: 28%;
	min-width: 300px;
	max-width: 70%;
	height: 100vh;
	resize: horizontal;
	direction: rtl;
	overflow: hidden;
	z-index: 1150;
	box-shadow: -2px 0 8px rgba(0, 0, 0, 0.12);
	border-radius: 12px 0 0 12px;
	padding: 4px;
	box-sizing: border-box;
}

.ai-layout-docked-panel-content {
	direction: ltr;
	height: 100%;
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

@media (max-width: 960px) {
	.ai-layout-docked-panel {
		left: 0;
		width: 100vw;
		/* max-width stond op 70% en werd hier niet overschreven: op een telefoon van 390 breed bleef het
		   paneel 273 pixels, met een dode strook ernaast. Beide axen expliciet vrijgeven. */
		max-width: 100vw;
		/* dvh en niet vh: met de adresbalk van een mobiele browser erbij valt de invoerregel anders
		   onder de onderkant van het scherm. */
		height: 100dvh;
		max-height: 100dvh;
		min-width: 0;
		min-height: 0;
		border-radius: 0;
		resize: none;
		z-index: 1400;
	}

	.ai-layout-docked .ai-layout-body {
		display: none;
	}
}

/* Wanneer het AI-paneel zichtbaar is, beperken we AppBar, content en dialogen
   tot het werkgebied links van het paneel. Breedte via ResizeObserver → --ai-panel-width. */
@media (min-width: 961px) {
	body:has(.ai-layout-docked-panel) .mud-appbar {
		right: var(--ai-panel-width, 28vw) !important;
		width: auto !important;
		/* Afknippen is hier geen opmaakdetail maar een bugfix. De balk wordt wel smaller, maar zijn
		   iconen schoven gewoon door: ze staken ónder het paneel uit en bleven daar klikbaar, omdat de
		   balk (z-index 1300) boven het paneel (1150) ligt. Een onzichtbare knop ving dan de klik op de
		   terugpijl van het paneel — dat leek op "het scherm sluit met een refresh". Hoe breder je het
		   paneel sleept, hoe meer iconen eronder verdwenen. */
		overflow: hidden;
		transition: right 0.2s ease;
	}

	/* De inhoud van de balk moet mee kunnen krimpen; zonder dit blijft de rij op zijn natuurlijke
	   breedte staan en wordt hij door de regel hierboven alleen maar afgeknipt. Past hij écht niet
	   meer — bij een heel breed gesleept paneel — dan schuift de balk zijwaarts in plaats van dat de
	   laatste iconen (profielmenu!) onbereikbaar worden. De scrollbalk zelf blijft verborgen: hij
	   hoort niet in een app-balk thuis. */
	body:has(.ai-layout-docked-panel) .mud-appbar > .mud-toolbar {
		min-width: 0;
		overflow-x: auto;
		overflow-y: hidden;
		scrollbar-width: none;
	}

		body:has(.ai-layout-docked-panel) .mud-appbar > .mud-toolbar::-webkit-scrollbar {
			display: none;
		}

	body:has(.ai-layout-docked-panel) .mud-main-content {
		margin-right: calc(var(--ai-panel-width, 28vw) + 1px) !important;
		transition: margin-right 0.2s ease;
	}

	body:has(.ai-layout-docked-panel) .mud-dialog-container,
	body:has(.ai-layout-docked-panel) .mud-overlay {
		right: var(--ai-panel-width, 28vw) !important;
		width: auto !important;
		transition: right 0.2s ease;
	}

	body:has(.ai-layout-docked-panel) .mud-dialog-container .mud-dialog {
		max-width: 100% !important;
		box-sizing: border-box;
		margin-right: 8px;
	}

	body:has(.ai-layout-docked-panel) .mud-dialog .mud-focus-trap > div:not(.mud-focus-trap-child-container) {
		display: none !important;
	}
}

/* ── Kassascherm (POS) ─────────────────────────────────────────────── */
/* Compacte bonregels: minder celpadding en actieknoppen niet laten wrappen */
.pos-cart-table td {
	padding: 2px 6px !important;
	white-space: nowrap;
	vertical-align: middle;
}
.pos-cart-table td:nth-child(2) {
	white-space: normal; /* omschrijving mag wel wrappen */
	width: 100%;
}
.pos-cart-table .mud-typography {
	line-height: 1.25;
}

/* Geparkeerde bonnen: ruimer dan de bonregels, de referentie krijgt de vrije breedte */
.pos-parked-table th,
.pos-parked-table td {
	padding: 12px 12px !important;
	white-space: nowrap;
	vertical-align: middle;
	font-size: 1rem;
}
.pos-parked-table td:nth-child(3) {
	white-space: normal;
	width: 100%;
}
.pos-parked-table .mud-typography-caption {
	font-size: 0.875rem;
}

/* Compacte producttegels (snelkeuze en zoekresultaten) */
.pos-tile {
	padding: 8px 10px !important;
	line-height: 1.2;
}
.pos-tile .mud-typography {
	margin: 0;
	line-height: 1.25;
}
/* Lange productnamen afbreken in plaats van over de rand heen te lopen */
.pos-tile .mud-typography {
	overflow-wrap: anywhere;
}

/* MudDivider binnen de flex-kolommen van het kassascherm niet laten rekken of verspringen */
.pos-panel .mud-divider {
	flex: none;
	margin-left: 0;
	margin-right: 0;
}

/* Panelen vullen het scherm zonder paginascrollbalk; hoogte op één plek instelbaar */
.pos-panel {
	height: calc(100vh - 150px);
}
/* Het zoekveld mag niet meegroeien in de flex-kolom (geeft anders een groot gat boven de resultaten) */
.pos-panel > .mud-input-control {
	flex-grow: 0;
}
/* Interne scrollcontainers mogen krimpen; anders duwt de inhoud het paneel uit de pagina */
.pos-panel .pos-scroll {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

/* Inrichtingswizard: actieknoppen niet laten samendrukken in de flex-rijen (tekst kapte af) */
.pos-setup-wizard .mud-list-item .mud-button-root {
	flex-shrink: 0;
	white-space: nowrap;
}

/* AI-assistent: invoerknoppen (versturen, spraak, bijlage, sluiten) op een smal scherm in twee kolommen,
   zodat het tekstveld de ruimte houdt. Iconknop 48px + 4px tussenruimte + 4px rand → twee per rij binnen 110px. */
@media (max-width: 600px) {
	.ai-input-actions {
		max-width: 110px;
		justify-content: flex-end;
	}
}

/* Tabelcellen met een bedrag of datum: nooit afbreken (anders komt het euroteken op een eigen regel als de tabel krap wordt) */
.nowrap-cell {
	white-space: nowrap;
}

/* ── Bouwroutering: matrix bouwnummer × fase ───────────────────────── */
/* Eigen tabel met sticky kop en eerste kolom (zoals het planbord); hier en niet in de razor, zodat de browser
   het cachet in plaats van dat het bij elke render door de render-tree gaat (ProjectBuildingRoutingComponent). */
.br-matrix {
	border-collapse: separate;
	border-spacing: 0;
	font-size: 0.8rem;
	white-space: nowrap;
}
.br-matrix th,
.br-matrix td {
	border-bottom: 1px solid var(--mud-palette-lines-default);
	padding: 2px 6px;
	vertical-align: middle;
}
.br-matrix thead th {
	position: sticky;
	top: 0;
	z-index: 10;
	background: var(--mud-palette-surface);
	text-align: center;
}
.br-matrix thead th:first-child,
.br-matrix tbody th {
	position: sticky;
	left: 0;
	z-index: 11;
	background: var(--mud-palette-surface);
	text-align: left;
	font-weight: 500;
}
.br-matrix thead th:first-child {
	z-index: 12;
}
.br-matrix tr.br-group th {
	position: static;
	z-index: auto;
	background: var(--mud-palette-background-gray);
	font-weight: 600;
	text-align: left;
}
.br-matrix td.br-cell {
	text-align: center;
	min-width: 96px;
}
.br-matrix .br-status {
	display: inline-block;
	min-width: 72px;
	padding: 1px 8px;
	border-radius: 12px;
	font-size: 0.72rem;
	line-height: 1.5;
	user-select: none;
}
.br-matrix .br-status.br-none {
	color: var(--mud-palette-text-disabled);
	border: 1px dashed var(--mud-palette-lines-default);
}
.br-matrix .br-workorder {
	display: inline-block;
	margin: 1px 2px 0 2px;
	padding: 0 6px;
	border-radius: 10px;
	font-size: 0.68rem;
	border: 1px solid var(--mud-palette-lines-default);
	cursor: pointer;
}
.br-matrix .br-workorder.br-closed {
	border-color: var(--mud-palette-success);
}
.br-matrix tbody tr:hover td {
	background: var(--mud-palette-table-hover);
}

/* Installatiepagina (App installeren): stapkaarten met een afbeelding of icoon van gelijke hoogte */
.install-step-card {
	height: 100%;
}
.install-step-media {
	height: 200px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background: var(--mud-palette-background-gray);
	border-bottom: 1px solid var(--mud-palette-lines-default);
}
.install-step-media img {
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}