.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;
	height: 100vh;
}

.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;
	max-height: calc(100vh - 180px);
}

/* 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;
}

/*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;
}

.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;
}

.ai-layout-docked .ai-layout-body {
	height: 100%;
	overflow: 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;
		height: 100vh;
		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;
		transition: right 0.2s ease;
	}

	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;
}

/* 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;
}

/* 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;
}