/* CSS Custom Properties */
:root {
	--curr-sys-def-primary-color: #0f559d;
	--curr-sys-def-secondary-color: #2d5a2d;
	/* Custom Color Palette - Professional Blue Theme with #0f559d Primary */
	--md-sys-color-primary: var(--curr-sys-def-primary-color);
	--md-sys-color-primary-container: #E3F0FF;
	--md-sys-color-on-primary: #ffffff;
	--md-sys-color-on-primary-container: #083d73;
	/* Clean minimal sidebar colors */
	--sidebar-bg: #fafafa;
	--sidebar-brand-bg: #0f559d;
	--sidebar-nav-item-color: #455A64;
	--sidebar-nav-item-hover-bg: rgba(15, 85, 157, 0.08);
	--sidebar-nav-item-active-bg: rgba(15, 85, 157, 0.12);
	--sidebar-nav-section-color: #78909C;
	--md-sys-color-secondary: var(--curr-sys-def-secondary-color);
	--md-sys-color-secondary-container: #E8F5E8;
	--md-sys-color-on-secondary: #ffffff;
	--md-sys-color-on-secondary-container: #1a3d1a;
	--md-sys-color-tertiary: #B8540D;
	--md-sys-color-tertiary-container: #FDF1E6;
	--md-sys-color-on-tertiary: #ffffff;
	--md-sys-color-on-tertiary-container: #7A3608;
	--md-sys-color-error: #D32F2F;
	--md-sys-color-error-container: #FFEBEE;
	--md-sys-color-on-error: #ffffff;
	--md-sys-color-on-error-container: #C62828;
	--md-sys-color-surface: #ffffff;
	--md-sys-color-surface-variant: #F8F9FA;
	--md-sys-color-on-surface: #1C1B1F;
	--md-sys-color-on-surface-variant: #49454F;
	--md-sys-color-outline: #E5E7EB;
	--md-sys-color-outline-variant: #F3F4F6;
	/* Modern Typography Scale with Inter */
	--md-sys-typescale-display-large-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--md-sys-typescale-display-large-size: 3.5rem;
	--md-sys-typescale-display-large-weight: 700;
	--md-sys-typescale-display-large-line-height: 1.2;
	--md-sys-typescale-headline-large-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--md-sys-typescale-headline-large-size: 2rem;
	--md-sys-typescale-headline-large-weight: 600;
	--md-sys-typescale-headline-large-line-height: 1.3;
	--md-sys-typescale-title-large-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--md-sys-typescale-title-large-size: 1.375rem;
	--md-sys-typescale-title-large-weight: 600;
	--md-sys-typescale-title-large-line-height: 1.4;
	--md-sys-typescale-body-large-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
	--md-sys-typescale-body-large-size: 0.875rem;
	--md-sys-typescale-body-large-weight: 400;
	--md-sys-typescale-body-large-line-height: 1.6;
	/* Spacing Scale */
	--md-sys-size-spacing-xs: 0.25rem;
	--md-sys-size-spacing-sm: 0.5rem;
	--md-sys-size-spacing-md: 1rem;
	--md-sys-size-spacing-lg: 1.5rem;
	--md-sys-size-spacing-xl: 2rem;
	--md-sys-size-spacing-xxl: 3rem;
	/* Elevation */
	--md-sys-elevation-level1: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
	--md-sys-elevation-level2: 0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
	--md-sys-elevation-level3: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15);
	/* Border Radius */
	--md-sys-shape-corner-none: 0;
	--md-sys-shape-corner-xs: 0.25rem;
	--md-sys-shape-corner-sm: 0.5rem;
	--md-sys-shape-corner-md: 0.75rem;
	--md-sys-shape-corner-lg: 1rem;
	--md-sys-shape-corner-xl: 1.75rem;
	--md-sys-shape-corner-full: 9999px;
}

/* Base Styles */
html, body {
	font-family: var(--md-sys-typescale-body-large-font);
	font-size: var(--md-sys-typescale-body-large-size);
	font-weight: var(--md-sys-typescale-body-large-weight);
	line-height: var(--md-sys-typescale-body-large-line-height);
	color: var(--md-sys-color-on-surface);
	background-color: var(--md-sys-color-surface);
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	overflow-x: hidden;
}

/* Reset default margins and padding */
* {
	box-sizing: border-box;
}

#app {
	width: 100%;
	height: 100vh;
	margin: 0;
	padding: 0;
}

/* Typography Classes */
.display-large {
	font-family: var(--md-sys-typescale-display-large-font);
	font-size: var(--md-sys-typescale-display-large-size);
	font-weight: var(--md-sys-typescale-display-large-weight);
	line-height: var(--md-sys-typescale-display-large-line-height);
}

.headline-large {
	font-family: var(--md-sys-typescale-headline-large-font);
	font-size: var(--md-sys-typescale-headline-large-size);
	font-weight: var(--md-sys-typescale-headline-large-weight);
	line-height: var(--md-sys-typescale-headline-large-line-height);
}

.title-large {
	font-family: var(--md-sys-typescale-title-large-font);
	font-size: var(--md-sys-typescale-title-large-size);
	font-weight: var(--md-sys-typescale-title-large-weight);
	line-height: var(--md-sys-typescale-title-large-line-height);
}

/* Focus Management */
/* Headings should not show focus outlines as they are not interactive elements */
h1, h2, h3, h4, h5, h6 {
	outline: none !important;
}

	h1:focus, h2:focus, h3:focus, h4:focus, h5:focus, h6:focus {
		outline: none !important;
	}

/* Links and Navigation */
a:focus {
	outline: 2px solid var(--md-sys-color-primary);
	outline-offset: 2px;
	border-radius: var(--md-sys-shape-corner-xs);
}

/* Content Layout */
.content {
	padding: var(--md-sys-size-spacing-lg);
	max-width: 1200px;
	margin: 0 auto;
}

.content-wide {
	padding: var(--md-sys-size-spacing-lg);
	width: 100%;
}

/* Form Validation */
.valid.modified:not([type=checkbox]) {
	outline: 2px solid var(--md-sys-color-tertiary);
	outline-offset: 1px;
}

.invalid {
	outline: 2px solid var(--md-sys-color-error);
	outline-offset: 1px;
}

.validation-message {
	color: var(--md-sys-color-error);
	font-size: 0.875rem;
	margin-top: var(--md-sys-size-spacing-xs);
}

/* Layout Components */
/* Bottom breathing room inside the scrollable main body (all pages) */
.rz-layout .rz-body.app-main-body,
.rz-layout .rz-body {
	padding-bottom: 2.5rem !important;
	box-sizing: border-box;
}

.app-page-content {
	width: 100%;
}

/* Explicit spacer so gap remains visible even if padding is overridden by theme */
.app-page-footer-spacer {
	height: 2.5rem;
	width: 100%;
	flex-shrink: 0;
	pointer-events: none;
}

.page {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 100vh;
	background-color: var(--md-sys-color-surface);
}

.sidebar {
	background-color: var(--sidebar-bg);
	width: 260px;
	min-height: 100vh;
	position: fixed;
	top: 0;
	left: 0;
	z-index: 1000;
	transform: translateX(-100%);
	transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
	border-right: 1px solid var(--md-sys-color-outline-variant);
}

	.sidebar.show {
		transform: translateX(0);
	}

main {
	flex: 1;
	margin-left: 0;
	display: flex;
	flex-direction: column;
	transition: margin-left 300ms ease-in-out;
}

.top-row {
	background: var(--md-sys-color-surface);
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
	padding: 0.75rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 64px;
	position: sticky;
	top: 0;
	z-index: 100;
	backdrop-filter: blur(8px);
}

.sidebar-toggle {
	padding: var(--md-sys-size-spacing-sm);
	border-radius: var(--md-sys-shape-corner-full);
}

.top-row-actions {
	display: flex;
	align-items: center;
	gap: var(--md-sys-size-spacing-md);
}

.user-info {
	font-size: 0.875rem;
	color: var(--md-sys-color-primary);
	font-weight: 600;
	padding: var(--md-sys-size-spacing-sm) var(--md-sys-size-spacing-md);
	background: var(--md-sys-color-primary-container);
	border-radius: var(--md-sys-shape-corner-full);
}

/* Navigation Styles */
.navbar {
	background-color: var(--sidebar-bg);
	padding: 1rem 1.5rem;
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1px solid var(--md-sys-color-outline-variant);
}

.navbar-brand {
	color: var(--md-sys-color-primary) !important;
	font-size: var(--md-sys-typescale-title-large-size);
	font-weight: 700;
	text-decoration: none;
	letter-spacing: -0.02em;
}

.navbar-toggler {
	border: 1px solid var(--md-sys-color-on-primary);
	background: transparent;
	padding: var(--md-sys-size-spacing-sm);
	border-radius: var(--md-sys-shape-corner-sm);
	cursor: pointer;
	transition: background-color 200ms ease-in-out;
}

	.navbar-toggler:hover {
		background-color: rgba(255, 255, 255, 0.1);
	}

.navbar-toggler-icon {
	background-image: none;
	width: 24px;
	height: 24px;
	display: block;
}

	.navbar-toggler-icon::before {
		content: '?';
		color: var(--md-sys-color-on-primary);
		font-size: 20px;
		line-height: 24px;
	}

/* Sidebar Navigation */
.nav-scrollable {
	height: calc(100vh - 64px);
	overflow-y: auto;
	padding: var(--md-sys-size-spacing-md);
}

.closup-nav {
	display: flex;
	flex-direction: column;
	gap: var(--md-sys-size-spacing-md);
}

.nav-section {
	display: flex;
	flex-direction: column;
	gap: var(--md-sys-size-spacing-xs);
}

.nav-section-header {
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--sidebar-nav-section-color);
	text-transform: uppercase;
	letter-spacing: 0.5px;
	padding: var(--md-sys-size-spacing-sm) var(--md-sys-size-spacing-md);
	margin-bottom: var(--md-sys-size-spacing-xs);
}

.closup-nav-item {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.625rem 1rem;
	color: var(--sidebar-nav-item-color);
	text-decoration: none;
	border-radius: 0.5rem;
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1);
	border: none;
	background: none;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	cursor: pointer;
	width: 100%;
	text-align: left;
	min-height: 40px;
	position: relative;
}

	.closup-nav-item:hover {
		background: var(--sidebar-nav-item-hover-bg);
		color: var(--md-sys-color-primary);
	}

	.closup-nav-item.active {
		background: var(--sidebar-nav-item-active-bg);
		color: var(--md-sys-color-primary);
		font-weight: 600;
	}

		.closup-nav-item.active::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			bottom: 0;
			width: 3px;
			background: var(--md-sys-color-primary);
			border-radius: 0 2px 2px 0;
		}

	.closup-nav-item:focus {
		outline: 2px solid var(--md-sys-color-primary);
		outline-offset: 2px;
	}

.closup-nav-icon {
	width: 20px;
	height: 20px;
	flex-shrink: 0;
	font-size: 20px;
}

.logout-btn {
	color: var(--md-sys-color-error) !important;
}

	.logout-btn:hover {
		background-color: var(--md-sys-color-error-container);
		color: var(--md-sys-color-on-error-container) !important;
	}

/* Collapse functionality */
.collapse {
	display: none;
}

/* Error UI */
#blazor-error-ui {
	color-scheme: light only;
	background: var(--md-sys-color-error);
	color: var(--md-sys-color-on-error);
	bottom: 0;
	box-shadow: var(--md-sys-elevation-level3);
	box-sizing: border-box;
	display: none;
	left: 0;
	padding: var(--md-sys-size-spacing-md) var(--md-sys-size-spacing-lg);
	position: fixed;
	width: 100%;
	z-index: 2000;
	border-radius: var(--md-sys-shape-corner-lg) var(--md-sys-shape-corner-lg) 0 0;
	font-size: 0.875rem;
	font-weight: 500;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: var(--md-sys-size-spacing-lg);
		top: 50%;
		transform: translateY(-50%);
		font-size: 1.25rem;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: var(--md-sys-shape-corner-full);
		transition: background-color 200ms ease-in-out;
	}

		#blazor-error-ui .dismiss:hover {
			background-color: rgba(255, 255, 255, 0.2);
		}

.blazor-error-boundary {
	background: var(--md-sys-color-error-container);
	color: var(--md-sys-color-on-error-container);
	padding: var(--md-sys-size-spacing-lg);
	border-radius: var(--md-sys-shape-corner-md);
	margin: var(--md-sys-size-spacing-md) 0;
	border-left: 4px solid var(--md-sys-color-error);
}

	.blazor-error-boundary::after {
		content: "An error has occurred. Please try again or contact support if the problem persists.";
	}

/* Loading States */
.loading-progress {
	position: relative;
	display: block;
	width: 8rem;
	height: 8rem;
	margin: 20vh auto 1rem auto;
}

	.loading-progress circle {
		fill: none;
		stroke: var(--md-sys-color-outline);
		stroke-width: 0.6rem;
		transform-origin: 50% 50%;
		transform: rotate(-90deg);
	}

		.loading-progress circle:last-child {
			stroke: var(--md-sys-color-primary);
			stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
			transition: stroke-dasharray 0.05s ease-in-out;
		}

.loading-progress-text {
	position: absolute;
	top: calc(20vh + 4rem);
	left: calc(50% - 0.2rem);
	transform: translate(-50%, -50%);
	text-align: center;
	font-weight: 500;
	color: var(--md-sys-color-on-surface);
	width: 8rem;
	pointer-events: none;
}

	.loading-progress-text:after {
		content: var(--blazor-load-percentage-text, "Loading Closup...");
	}

/* Code Styling */
code {
	color: var(--md-sys-color-on-tertiary-container);
	background-color: var(--md-sys-color-tertiary-container);
	padding: 0.125rem 0.25rem;
	border-radius: var(--md-sys-shape-corner-xs);
	font-family: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;
	font-size: 0.875em;
}

/* Form Enhancements */
.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
	color: var(--md-sys-color-on-surface-variant);
	text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder {
	text-align: start;
}

/* Desktop Layout */
@media (min-width: 769px) {
	.sidebar {
		position: fixed;
		transform: translateX(0);
	}

	main {
		margin-left: 260px;
	}

	.navbar-toggler {
		display: none;
	}

	.collapse {
		display: block !important;
	}
}

/* Mobile Improvements */
@media (max-width: 768px) {
	.sidebar {
		width: 100%;
		max-width: 320px;
		box-shadow: 4px 0 12px rgba(33, 150, 243, 0.15);
	}

	.content {
		padding: var(--md-sys-size-spacing-md);
	}

	.top-row {
		padding: var(--md-sys-size-spacing-md);
	}

	.user-info {
		font-size: 0.75rem;
		padding: var(--md-sys-size-spacing-xs) var(--md-sys-size-spacing-sm);
	}
}

/* Button Styling - Global Application of Color Palette */
.rz-button, .rz-button-primary {
	background-color: var(--md-sys-color-primary) !important;
	border-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
	transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

	.rz-button:hover, .rz-button-primary:hover {
		background-color: #083d73 !important;
		border-color: #083d73 !important;
		transform: translateY(-1px);
		box-shadow: 0 4px 12px rgba(15, 85, 157, 0.3) !important;
	}

.rz-button-secondary {
	background-color: var(--md-sys-color-secondary) !important;
	border-color: var(--md-sys-color-secondary) !important;
	color: var(--md-sys-color-on-secondary) !important;
}

	.rz-button-secondary:hover {
		background-color: var(--md-sys-color-on-secondary-container) !important;
		border-color: var(--md-sys-color-on-secondary-container) !important;
		box-shadow: 0 4px 12px rgba(74, 103, 65, 0.3) !important;
	}

.rz-button-light, .rz-button-outline {
	background-color: transparent !important;
	border-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-primary) !important;
}

	.rz-button-light:hover, .rz-button-outline:hover {
		background-color: var(--md-sys-color-primary-container) !important;
		border-color: var(--md-sys-color-primary) !important;
		color: var(--md-sys-color-on-primary-container) !important;
	}

.rz-button-success {
	background-color: var(--md-sys-color-secondary) !important;
	border-color: var(--md-sys-color-secondary) !important;
	color: var(--md-sys-color-on-secondary) !important;
}

	.rz-button-success:hover {
		background-color: var(--md-sys-color-on-secondary-container) !important;
		border-color: var(--md-sys-color-on-secondary-container) !important;
		box-shadow: 0 4px 12px rgba(74, 103, 65, 0.3) !important;
	}

.rz-button-warning {
	background-color: var(--md-sys-color-tertiary) !important;
	border-color: var(--md-sys-color-tertiary) !important;
	color: var(--md-sys-color-on-tertiary) !important;
}

	.rz-button-warning:hover {
		background-color: var(--md-sys-color-on-tertiary-container) !important;
		border-color: var(--md-sys-color-on-tertiary-container) !important;
		box-shadow: 0 4px 12px rgba(184, 92, 0, 0.3) !important;
	}

.rz-button-danger {
	background-color: var(--md-sys-color-error) !important;
	border-color: var(--md-sys-color-error) !important;
	color: var(--md-sys-color-on-error) !important;
}

	.rz-button-danger:hover {
		background-color: var(--md-sys-color-on-error-container) !important;
		border-color: var(--md-sys-color-on-error-container) !important;
		box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3) !important;
	}

/* Radzen Dropdown Styling */
.rz-dropdown {
	border-color: var(--md-sys-color-outline-variant) !important;
	min-height: var(--rz-input-height, 2.5rem);
	position: relative;
	width: 100%;
}

	.rz-dropdown:focus {
		border-color: var(--md-sys-color-primary) !important;
		box-shadow: 0 0 0 3px rgba(15, 85, 157, 0.1) !important;
	}

.rz-dropdown-panel .rz-dropdown-item:hover {
	background-color: var(--md-sys-color-primary-container) !important;
	color: var(--md-sys-color-on-primary-container) !important;
}

/* Dropdown clear (X) and trigger (chevron) icons: keep in one row, right-aligned */
.rz-dropdown-trigger {
	position: absolute !important;
	inset-inline-end: 0 !important;
	inset-block-start: 0 !important;
	inset-block-end: 0 !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: center;
	min-width: 2.5rem;
}

	.rz-dropdown-trigger .rzi {
		flex-shrink: 0 !important;
	}

.rz-dropdown-clear-icon {
	position: absolute !important;
	inset-block-start: 0 !important;
	inset-block-end: 0 !important;
	height: 100% !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center;
	flex-shrink: 0;
}

/* Multiselect: same icon row layout */
.rz-multiselect-trigger {
	position: absolute !important;
	inset-inline-end: 0 !important;
	inset-block-start: 0 !important;
	inset-block-end: 0 !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
}

/* Form field: dropdown fills width so trigger/clear have room */
.rz-form-field-content > .rz-dropdown,
.rz-form-field-content > .rz-multiselect {
	width: 100% !important;
	min-width: 0;
}

/* Dropdown/multiselect label area: leave space for icons on the right */
.rz-form-field-content .rz-dropdown .rz-dropdown-label,
.rz-form-field-content .rz-clear .rz-dropdown-label,
.rz-form-field-content .rz-multiselect .rz-multiselect-label-container {
	padding-inline-end: 3.5rem !important;
}

/* Dropdown panel filter: full width and aligned */
.rz-dropdown-filter-container,
.rz-multiselect-filter-container {
	display: flex !important;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

	.rz-dropdown-filter-container .rz-inputtext,
	.rz-multiselect-filter-container .rz-inputtext {
		width: 100% !important;
		flex: 1;
		min-width: 0;
	}

/* DataGrid: title and filter button on one line; button right-aligned.
   Flex row keeps title + button on same line; button is absolute so it stays right. */
.rz-grid-table thead th > div:not(.rz-cell-filter),
.rz-datatable thead th > div:not(.rz-cell-filter),
.rz-datatable table thead th > div:not(.rz-cell-filter),
table.rz-grid-table thead th > div:not(.rz-cell-filter) {
	position: relative !important;
	display: flex !important;
	flex-direction: row !important;
	align-items: center !important;
	flex-wrap: nowrap !important;
	width: 100% !important;
	min-height: 2.25rem !important;
	box-sizing: border-box !important;
}

	.rz-grid-table thead th > div:not(.rz-cell-filter) > .rz-column-title,
	.rz-datatable thead th > div:not(.rz-cell-filter) > .rz-column-title,
	.rz-datatable table thead th > div:not(.rz-cell-filter) > .rz-column-title,
	table.rz-grid-table thead th > div:not(.rz-cell-filter) > .rz-column-title {
		flex: 1 1 auto !important;
		min-width: 0 !important;
		padding-inline-end: 1.25rem !important;
		display: inline-flex !important;
		align-items: center !important;
	}

	/* Filter button: same line, close to title (minimal gap to save width) */
	.rz-grid-table thead th > div:not(.rz-cell-filter) > button.rz-grid-filter-icon,
	.rz-datatable thead th > div:not(.rz-cell-filter) > button.rz-grid-filter-icon,
	.rz-datatable table thead th > div:not(.rz-cell-filter) > button.rz-grid-filter-icon,
	table.rz-grid-table thead th > div:not(.rz-cell-filter) > button.rz-grid-filter-icon {
		position: absolute !important;
		top: 50% !important;
		transform: translateY(-50%) !important;
		inset-inline-end: 0.125rem !important;
		right: 0.125rem !important;
		left: auto !important;
		margin: 0 !important;
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
		flex-shrink: 0 !important;
	}

	.rz-grid-table thead th > div:not(.rz-cell-filter) > .rz-overlaypanel,
	.rz-datatable thead th > div:not(.rz-cell-filter) > .rz-overlaypanel,
	.rz-datatable table thead th > div:not(.rz-cell-filter) > .rz-overlaypanel,
	table.rz-grid-table thead th > div:not(.rz-cell-filter) > .rz-overlaypanel {
		position: absolute !important;
	}

/* Form Controls */
.rz-textbox, .rz-password, .rz-textarea {
	border-color: var(--md-sys-color-outline-variant) !important;
	transition: all 200ms ease-in-out;
}

	.rz-textbox:focus, .rz-password:focus, .rz-textarea:focus {
		border-color: var(--md-sys-color-primary) !important;
		box-shadow: 0 0 0 3px rgba(15, 85, 157, 0.1) !important;
	}

	.rz-textbox:hover, .rz-password:hover, .rz-textarea:hover {
		border-color: var(--md-sys-color-outline) !important;
	}

/* Links */
a {
	color: var(--md-sys-color-primary);
	text-decoration: none;
	transition: color 150ms ease-in-out;
}

	a:hover {
		color: var(--md-sys-color-on-primary-container);
		text-decoration: underline;
	}

/* Radzen Chart Components */
.rz-chart-series {
	--rz-series-0: var(--md-sys-color-primary);
	--rz-series-1: var(--md-sys-color-secondary);
	--rz-series-2: var(--md-sys-color-tertiary);
	--rz-series-3: var(--md-sys-color-primary-container);
	--rz-series-4: var(--md-sys-color-secondary-container);
}

/* Radzen Chart Color Override */
.rz-chart .rz-series-item-0 {
	fill: var(--md-sys-color-primary) !important;
	stroke: var(--md-sys-color-primary) !important;
}

.rz-chart .rz-series-item-1 {
	fill: var(--md-sys-color-secondary) !important;
	stroke: var(--md-sys-color-secondary) !important;
}

.rz-chart .rz-series-item-2 {
	fill: var(--md-sys-color-tertiary) !important;
	stroke: var(--md-sys-color-tertiary) !important;
}

/* Force Radzen Series Colors */
[fill="#5048e5"], [fill="#6366f1"], [fill="#8b5cf6"], [fill="#a855f7"] {
	fill: var(--md-sys-color-primary) !important;
}

[stroke="#5048e5"], [stroke="#6366f1"], [stroke="#8b5cf6"], [stroke="#a855f7"] {
	stroke: var(--md-sys-color-primary) !important;
}

/* Radzen DataGrid */
.rz-datatable-header {
	background-color: var(--md-sys-color-surface-variant) !important;
	border-bottom: 1px solid var(--md-sys-color-outline-variant) !important;
}

.rz-datatable-row:hover {
	background-color: var(--md-sys-color-primary-container) !important;
}

.rz-paginator .rz-paginator-page.rz-state-active {
	background-color: var(--md-sys-color-primary) !important;
	border-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
}

/* Radzen Badge Overrides */
.rz-badge-primary {
	background-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
}

.rz-badge-secondary {
	background-color: var(--md-sys-color-secondary) !important;
	color: var(--md-sys-color-on-secondary) !important;
}

.rz-badge-success {
	background-color: var(--md-sys-color-secondary) !important;
	color: var(--md-sys-color-on-secondary) !important;
}

.rz-badge-warning {
	background-color: var(--md-sys-color-tertiary) !important;
	color: var(--md-sys-color-on-tertiary) !important;
}

.rz-badge-danger {
	background-color: var(--md-sys-color-error) !important;
	color: var(--md-sys-color-on-error) !important;
}

.rz-badge-info {
	background-color: var(--md-sys-color-primary-container) !important;
	color: var(--md-sys-color-on-primary-container) !important;
}

/* Radzen Panel Menu */
.rz-panel-menu .rz-panel-menu-item .rz-panel-menu-item-icon {
	color: var(--md-sys-color-primary) !important;
}

.rz-panel-menu .rz-panel-menu-item:hover {
	background-color: var(--md-sys-color-primary-container) !important;
}

.rz-panel-menu .rz-panel-menu-item.rz-state-active {
	background-color: var(--md-sys-color-primary-container) !important;
	color: var(--md-sys-color-on-primary-container) !important;
}

/* Radzen Progress Bar */
.rz-progressbar .rz-progressbar-value {
	background-color: var(--md-sys-color-primary) !important;
}

/* Radzen Slider */
.rz-slider .rz-slider-handle {
	background-color: var(--md-sys-color-primary) !important;
	border-color: var(--md-sys-color-primary) !important;
}

.rz-slider .rz-slider-range {
	background-color: var(--md-sys-color-primary) !important;
}

/* Radzen Rating */
.rz-rating .rz-rating-item.rz-state-active {
	color: var(--md-sys-color-tertiary) !important;
}

/* Radzen Tabs */
.rz-tabview .rz-tabview-nav .rz-tabview-selected {
	border-bottom-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-primary) !important;
}

/* Inline mutation shell (1847) � global template for in-page create/edit flows */
.inline-mutation-panel {
	position: relative;
	margin-bottom: 1.25rem;
	padding: 1.25rem 1.25rem 1rem;
	background: var(--rz-base-50);
	border: 1px solid var(--rz-base-200);
	border-radius: var(--rz-border-radius, 8px);
}

.inline-mutation-panel--busy .inline-mutation-panel__body {
	pointer-events: none;
	opacity: 0.55;
}

.inline-mutation-panel__busy-overlay {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: inherit;
	background: color-mix(in srgb, var(--rz-body-background, #fff) 65%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.inline-mutation-panel__busy-overlay {
		background: rgba(255, 255, 255, 0.72);
	}
}

.inline-mutation-panel__title-slot,
.inline-mutation-panel__title-text-wrap {
	flex: 1 1 auto;
	min-width: 0;
}

.inline-mutation-panel__title {
	flex: 1 1 auto;
	min-width: 0;
}

.inline-mutation-panel__footer {
	padding-top: 0.75rem;
	margin-top: 0.75rem;
	border-top: 1px solid var(--rz-base-200);
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: flex-end;
	align-items: center;
}

.inline-mutation-panel--confirm {
	background: var(--rz-base-50);
	border-style: solid;
	border-color: var(--rz-base-300);
}

/* Detail page layout (1867 pilot) � full-width shell, no inset chrome */
.inline-mutation-panel--layout-detail-page {
	margin-bottom: 0;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.inline-mutation-panel__body--detail-page {
	width: 100%;
}

.inline-mutation-panel__detail-page-title,
.inline-mutation-panel__detail-page-title-slot {
	flex: 1 1 auto;
	min-width: 0;
}

/* Detail header: vertically center row contents (avoid rigid min-height that skews optical balance) */
.inline-mutation-panel__detail-page-header--tone-default {
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom: 0.25rem;
}

	.inline-mutation-panel__detail-page-header--tone-default .inline-mutation-panel__detail-page-title-row {
		align-items: center;
	}

/* Primary bar: slightly taller strip; title uses title-large scale (smaller than page headline-large) */
.inline-mutation-panel__detail-page-header--tone-primary {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: stretch;
	margin-bottom: 0.5rem;
	margin-left: calc(-1 * var(--md-sys-size-spacing-lg, 1.5rem));
	margin-right: calc(-1 * var(--md-sys-size-spacing-lg, 1.5rem));
	padding: 0.5625rem var(--md-sys-size-spacing-lg, 1.5rem);
	background: var(--rz-primary);
	color: #fff;
	border-radius: var(--rz-border-radius, 8px);
	box-sizing: border-box;
}

	.inline-mutation-panel__detail-page-header--tone-primary .inline-mutation-panel__detail-page-title-row {
		display: flex;
		align-items: center;
		margin-bottom: 0 !important;
		min-height: 0;
	}

	/* Remove default h1 vertical margins so text sits centered in the bar */
	.inline-mutation-panel__detail-page-header--tone-primary .inline-mutation-panel__detail-page-title {
		margin: 0 !important;
		padding: 0;
		line-height: var(--md-sys-typescale-title-large-line-height);
		align-items: center;
	}

		/* Same line: both segments use title-large size (smaller than default headline-large on h1) */
		.inline-mutation-panel__detail-page-header--tone-primary .inline-mutation-panel__detail-page-title .headline-large,
		.inline-mutation-panel__detail-page-header--tone-primary .inline-mutation-panel__detail-page-title-suffix {
			color: #fff !important;
			font-family: var(--md-sys-typescale-title-large-font);
			font-size: var(--md-sys-typescale-title-large-size);
			font-weight: var(--md-sys-typescale-title-large-weight);
			line-height: var(--md-sys-typescale-title-large-line-height);
			padding-top: 0;
			padding-bottom: 0;
		}

	.inline-mutation-panel__detail-page-header--tone-primary .inline-mutation-panel__detail-page-title-suffix {
		opacity: 0.92;
		font-weight: 500;
	}

.inline-mutation-panel__subtitle--on-primary {
	color: rgba(255, 255, 255, 0.88) !important;
}

/* Square icon button, icon centered (slightly smaller in primary bar = thinner strip) */
.inline-mutation-panel__detail-page-title-row .inline-mutation-panel__back-btn.rz-button {
	align-self: center;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	width: 2.75rem;
	height: 2.75rem;
	min-height: 0 !important;
	padding: 0 !important;
	line-height: 1;
}

.inline-mutation-panel__detail-page-header--tone-primary .inline-mutation-panel__back-btn.rz-button {
	width: 2.125rem;
	height: 2.125rem;
}

.inline-mutation-panel__detail-page-title-row .inline-mutation-panel__back-btn.rz-button .rzi {
	line-height: 1;
	display: flex;
	align-items: center;
	justify-content: center;
}

.inline-mutation-panel__back-btn--on-primary.rz-button,
.inline-mutation-panel__back-btn--on-primary.rz-button .rzi {
	color: #fff !important;
}

	.inline-mutation-panel__back-btn--on-primary.rz-button:hover:not(:disabled) {
		background: rgba(255, 255, 255, 0.14) !important;
	}

/* Default (light) detail header: suffix slightly softer than title */
.inline-mutation-panel__detail-page-header--tone-default .inline-mutation-panel__detail-page-title-suffix {
	color: var(--md-sys-color-on-surface-variant);
	font-weight: 500;
}

.inline-mutation-panel__detail-page-header-actions {
	flex-shrink: 0;
}

/* Supplier configuration page (/suppliers/{id}/configuration) */
.supplier-config-page.content-wide {
	padding-top: var(--md-sys-size-spacing-sm);
}

/* Tab bar + card */
.supplier-config-page .supplier-config-card.rz-card {
	overflow: hidden;
	box-shadow: var(--rz-card-shadow, 0 1px 3px rgba(0, 0, 0, 0.08));
	border-radius: var(--rz-border-radius, 8px);
}

.supplier-config-page .supplier-config-tab-bar {
	padding: 1rem 1.25rem;
	background: var(--rz-base-100);
	border-bottom: 2px solid var(--rz-base-300);
	gap: 0.75rem !important;
}

.supplier-config-page .supplier-config-tab-btn.rz-button {
	min-height: 2.75rem;
	transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

	/* Space between Material icon and tab label (matches visual gap on long labels) */
	.supplier-config-page .supplier-config-tab-btn.rz-button .rzi {
		margin-inline-end: 0.5rem;
	}

.supplier-config-page .supplier-config-tab--inactive.rz-button {
	background: var(--rz-base-200) !important;
	background-image: linear-gradient(to bottom, var(--rz-base-100), var(--rz-base-200)) !important;
	color: var(--rz-text-secondary-color, #5f6368) !important;
	border: 2px solid var(--rz-base-400, #bdc3c7) !important;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.07) !important;
	font-weight: 600 !important;
	transform: scale(0.98);
	opacity: 1;
}

	.supplier-config-page .supplier-config-tab--inactive.rz-button .rzi {
		color: var(--rz-text-secondary-color, #5f6368) !important;
		opacity: 0.9;
	}

	.supplier-config-page .supplier-config-tab--inactive.rz-button:hover {
		background: var(--rz-base-300) !important;
		background-image: none !important;
		border-color: var(--rz-base-500, #95a5a6) !important;
		color: var(--rz-text-color, #212529) !important;
		box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.06) !important;
		transform: scale(1);
	}

		.supplier-config-page .supplier-config-tab--inactive.rz-button:hover .rzi {
			color: var(--rz-text-color, #212529) !important;
		}

.supplier-config-page .supplier-config-tab--active.rz-button {
	font-weight: 700 !important;
	letter-spacing: 0.02em;
	border: 2px solid color-mix(in srgb, var(--rz-primary) 70%, #000) !important;
	box-shadow: 0 4px 18px color-mix(in srgb, var(--rz-primary) 45%, transparent), 0 0 0 3px color-mix(in srgb, var(--rz-primary) 22%, transparent), 0 2px 4px rgba(0, 0, 0, 0.12) !important;
	transform: scale(1.04);
	z-index: 2;
	position: relative;
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.supplier-config-page .supplier-config-tab--active.rz-button {
		border: 2px solid #1565c0 !important;
		box-shadow: 0 4px 18px rgba(25, 118, 210, 0.45), 0 0 0 3px rgba(25, 118, 210, 0.2), 0 2px 4px rgba(0, 0, 0, 0.12) !important;
	}
}

.supplier-config-page .supplier-config-panel {
	background: var(--rz-body-background);
}

/* Tab panel H5: icon + title (Working days, Deviating dates, Support hours) */
.supplier-config-page .supplier-config-heading-icon {
	margin-inline-end: 0.5rem;
	flex-shrink: 0;
}

.supplier-config-page .form-validation-tab-required-star {
	color: var(--rz-danger, #d32f2f);
	font-weight: 800;
	margin-inline-start: 0.15rem;
}

.supplier-config-page .form-validation-tab-required-badge {
	font-size: 0.75rem;
	font-weight: 700;
	color: var(--rz-danger, #c62828);
	margin-inline-start: 0.2rem;
}

.supplier-config-page .form-validation-tab-error-icon {
	color: var(--rz-danger, #d32f2f);
	font-size: 1.1rem !important;
	margin-inline-start: 0.15rem;
}

.supplier-config-page .supplier-config-tab-btn.form-validation-tab--has-issues.rz-button {
	border-color: var(--rz-danger, #d32f2f) !important;
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--rz-danger, #d32f2f) 28%, transparent);
}

.supplier-config-page .supplier-config-support-day-row {
	min-height: 3.25rem;
	align-items: center;
}

.supplier-config-page .supplier-config-support-day-checkbox-wrap {
	margin-left: 0.5rem;
	display: inline-flex;
	align-items: center;
}

/* Supplier deviating date dialog � description counter inside field */
.supplier-deviating-desc-input-wrap {
	position: relative;
	width: 100%;
	min-width: 0;
}

	.supplier-deviating-desc-input-wrap textarea,
	.supplier-deviating-desc-input-wrap .rz-textarea textarea {
		padding-bottom: 2.35rem !important;
		box-sizing: border-box;
	}

.supplier-deviating-desc-counter {
	position: absolute;
	right: 0.65rem;
	bottom: 0.45rem;
	font-size: 0.75rem;
	line-height: 1.25;
	color: var(--rz-text-secondary-color, #5f6368);
	pointer-events: none;
	white-space: nowrap;
	max-width: calc(100% - 1.25rem);
	overflow: hidden;
	text-overflow: ellipsis;
	text-align: right;
	background: color-mix(in srgb, var(--rz-body-background, #fff) 94%, transparent);
	padding: 0.2rem 0.45rem;
	border-radius: 4px;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--rz-base-300) 50%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.supplier-deviating-desc-counter {
		background: rgba(255, 255, 255, 0.94);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
	}
}

/* Detached help row below description field (not inside form field chrome) */
.supplier-deviating-desc-help-detached {
	margin-top: 1.25rem;
	margin-bottom: 0;
	padding-top: 1.1rem;
	border-top: 1px solid var(--rz-base-300, #dadce0);
}

.supplier-deviating-desc-help-detached-text {
	color: var(--rz-text-secondary-color, #5f6368) !important;
	line-height: 1.5 !important;
	font-size: 0.8125rem !important;
	font-weight: 400 !important;
}

/* Translation editor dialog � counter inside textarea, clear action below */
.translation-editor-lang-field {
	width: 100%;
}

.translation-editor-textarea-wrap {
	position: relative;
	width: 100%;
}

	.translation-editor-textarea-wrap textarea,
	.translation-editor-textarea-wrap .rz-textarea textarea {
		padding-bottom: 2rem !important;
		box-sizing: border-box;
		width: 100% !important;
	}

.translation-editor-char-counter {
	position: absolute;
	right: 0.55rem;
	bottom: 0.4rem;
	font-size: 0.75rem;
	line-height: 1.2;
	color: var(--rz-text-secondary-color, #5f6368);
	pointer-events: none;
	background: color-mix(in srgb, var(--rz-body-background, #fff) 94%, transparent);
	padding: 0.15rem 0.4rem;
	border-radius: 4px;
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--rz-base-300) 45%, transparent);
}

@supports not (color: color-mix(in srgb, red, blue)) {
	.translation-editor-char-counter {
		background: rgba(255, 255, 255, 0.94);
		box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08);
	}
}

.translation-editor-clear-row {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	margin-top: 0.4rem;
}

.translation-editor-clear-btn.rz-button {
	min-height: auto !important;
	height: auto !important;
	padding: 0.2rem 0.5rem !important;
	font-size: 0.8125rem !important;
	line-height: 1.3 !important;
}

/* Radzen Calendar */
.rz-calendar .rz-calendar-cell.rz-state-active {
	background-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
}

.rz-calendar .rz-calendar-cell:hover {
	background-color: var(--md-sys-color-primary-container) !important;
}

/* Radzen Checkbox and Radio */
.rz-chkbox .rz-chkbox-box.rz-state-active {
	background-color: var(--md-sys-color-primary) !important;
	border-color: var(--md-sys-color-primary) !important;
}

.rz-radiobutton .rz-radiobutton-box.rz-state-active {
	border-color: var(--md-sys-color-primary) !important;
}

	.rz-radiobutton .rz-radiobutton-box.rz-state-active .rz-radiobutton-icon {
		background-color: var(--md-sys-color-primary) !important;
	}

/* Radzen datepicker icon button */
.rz-datepicker-trigger:hover {
	transform: translateY(-50%) !important;
}

/* SVG Elements in Charts - Force Color Override */
svg .rz-series-0, svg [data-series="0"] {
	fill: var(--md-sys-color-primary) !important;
	stroke: var(--md-sys-color-primary) !important;
}

svg .rz-series-1, svg [data-series="1"] {
	fill: var(--md-sys-color-secondary) !important;
	stroke: var(--md-sys-color-secondary) !important;
}

svg .rz-series-2, svg [data-series="2"] {
	fill: var(--md-sys-color-tertiary) !important;
	stroke: var(--md-sys-color-tertiary) !important;
}

/* Generic SVG color override for charts */
svg rect[fill*="#"], svg path[fill*="#"], svg circle[fill*="#"] {
	fill: var(--md-sys-color-primary) !important;
}

/* Radzen Chart Legend */
.rz-chart-legend .rz-chart-legend-item .rz-chart-legend-marker {
	background-color: var(--md-sys-color-primary) !important;
}

/* Aggressive Chart Color Overrides */
/* Target any purple/violet colors commonly used by Radzen */
rect[fill="#5048E5"], rect[fill="#6366F1"], rect[fill="#8B5CF6"],
path[fill="#5048E5"], path[fill="#6366F1"], path[fill="#8B5CF6"],
circle[fill="#5048E5"], circle[fill="#6366F1"], circle[fill="#8B5CF6"],
polygon[fill="#5048E5"], polygon[fill="#6366F1"], polygon[fill="#8B5CF6"] {
	fill: var(--md-sys-color-primary) !important;
}

rect[stroke="#5048E5"], rect[stroke="#6366F1"], rect[stroke="#8B5CF6"],
path[stroke="#5048E5"], path[stroke="#6366F1"], path[stroke="#8B5CF6"],
circle[stroke="#5048E5"], circle[stroke="#6366F1"], circle[stroke="#8B5CF6"],
polygon[stroke="#5048E5"], polygon[stroke="#6366F1"], polygon[stroke="#8B5CF6"] {
	stroke: var(--md-sys-color-primary) !important;
}

/* Target any default chart colors */
.rz-chart-color-0, .rz-chart-series-0 {
	fill: var(--md-sys-color-primary) !important;
	stroke: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-primary) !important;
}

.rz-chart-color-1, .rz-chart-series-1 {
	fill: var(--md-sys-color-secondary) !important;
	stroke: var(--md-sys-color-secondary) !important;
	color: var(--md-sys-color-secondary) !important;
}

/* Most aggressive override - any SVG element with purple-ish colors */
svg [fill^="#5"], svg [fill^="#6"], svg [fill^="#7"], svg [fill^="#8"] {
	fill: var(--md-sys-color-primary) !important;
}

/* RadzenChart specific overrides */
.rz-column-series, .rz-bar-series, .rz-area-series, .rz-line-series {
	--rz-primary: var(--md-sys-color-primary) !important;
	--rz-secondary: var(--md-sys-color-secondary) !important;
}

/* Chart containers */
.rz-chart {
	--rz-chart-color-0: var(--md-sys-color-primary) !important;
	--rz-chart-color-1: var(--md-sys-color-secondary) !important;
	--rz-chart-color-2: var(--md-sys-color-tertiary) !important;
}

/* Final fallback - any element with purple hex values */
[style*="#5048e5"], [style*="#6366f1"], [style*="#8b5cf6"], [style*="#a855f7"] {
	color: var(--md-sys-color-primary) !important;
	background-color: var(--md-sys-color-primary) !important;
	border-color: var(--md-sys-color-primary) !important;
}

/* Chart runtime color overrides */
@keyframes chartColorFix {
	0% {
		fill: var(--md-sys-color-primary);
	}

	100% {
		fill: var(--md-sys-color-primary);
	}
}

.rz-chart svg * {
	animation: chartColorFix 0.1s forwards !important;
}

/* Apply to all chart elements after load */
.rz-chart svg rect,
.rz-chart svg path,
.rz-chart svg circle,
.rz-chart svg polygon {
	fill: var(--md-sys-color-primary) !important;
	stroke: var(--md-sys-color-primary) !important;
}

	/* Secondary series */
	.rz-chart svg rect:nth-child(2n),
	.rz-chart svg path:nth-child(2n) {
		fill: var(--md-sys-color-secondary) !important;
		stroke: var(--md-sys-color-secondary) !important;
	}

	/* Tertiary series */
	.rz-chart svg rect:nth-child(3n),
	.rz-chart svg path:nth-child(3n) {
		fill: var(--md-sys-color-tertiary) !important;
		stroke: var(--md-sys-color-tertiary) !important;
	}

/* Force color overrides for all possible chart variations */
.rz-chart g[class*="series"] > * {
	fill: var(--md-sys-color-primary) !important;
	stroke: var(--md-sys-color-primary) !important;
}

/* RadzenLayout Component Overrides */
.rz-layout .rz-header {
	background-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
	border-bottom: 1px solid var(--md-sys-color-on-primary-container) !important;
}

.rz-header {
	background-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
	border-bottom: 1px solid var(--md-sys-color-on-primary-container) !important;
}

/* RadzenHeader specific override */
radzen-header, .rz-layout-header {
	background-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
}

/* Profile Menu in Header */
.rz-profile-menu {
	color: var(--md-sys-color-on-primary) !important;
}

	.rz-profile-menu .rz-profile-menu-toggle {
		color: var(--md-sys-color-on-primary) !important;
	}

		.rz-profile-menu .rz-profile-menu-toggle:hover {
			background-color: rgba(255, 255, 255, 0.1) !important;
		}

/* Notification bell in header � match profile menu vertical padding */
.notification-bell-host {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.notification-bell {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-right: 0.5rem;
	padding-block: var(--rz-profile-menu-padding-block, 0.5rem);
	box-sizing: border-box;
}

	.notification-bell .rz-icon {
		font-size: 26px;
		line-height: 1;
		cursor: pointer;
	}

/* Toast notifications � close (X) top-right, aligned with title row */
.rz-notification-item {
	align-items: flex-start !important;
}

.rz-notification-message-wrapper {
	align-items: flex-start !important;
}

.rz-notification-icon.rzi {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	margin: 0.125rem 0 0 0 !important;
	line-height: 1 !important;
	width: 1.25rem !important;
	height: 1.25rem !important;
}

.rz-notification-item .rz-notification-close.rzi {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	flex-shrink: 0 !important;
	align-self: flex-start !important;
	width: 1.25rem !important;
	height: 1.25rem !important;
	min-width: 1.25rem !important;
	min-height: 1.25rem !important;
	margin: 0.125rem 0 0 0 !important;
	padding: 0 !important;
	line-height: 1 !important;
	font-size: 1.125rem !important;
	border: none !important;
	box-shadow: none !important;
	vertical-align: top !important;
	position: relative !important;
	overflow: visible !important;
}

	.rz-notification-item .rz-notification-close.rzi::before {
		display: block !important;
		line-height: 1 !important;
		width: 1em !important;
		height: 1em !important;
		margin: 0 !important;
		position: absolute !important;
		top: 50% !important;
		left: 50% !important;
		transform: translate(-50%, -50%) !important;
	}

	.rz-notification-item .rz-notification-close.rzi:focus,
	.rz-notification-item .rz-notification-close.rzi:focus-visible {
		outline: none !important;
		box-shadow: none !important;
	}

/* Sidebar Toggle Button in Header */
.rz-sidebar-toggle {
	color: var(--md-sys-color-on-primary) !important;
}

	.rz-sidebar-toggle:hover {
		background-color: rgba(255, 255, 255, 0.1) !important;
		color: var(--md-sys-color-on-primary) !important;
	}

/* RadzenSidebar brand colors */
.rz-sidebar .rz-stack .rz-icon {
	color: var(--md-sys-color-primary) !important;
}

/* Force header background for any variant */
[class*="rz-header"], [class*="header"], header {
	background-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
}

/* RadzenLayout grid area header */
.rz-layout > [style*="rz-header"] {
	background-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
}

/* Super aggressive header override - target any purple/blue backgrounds */
[style*="background"][style*="#5048e5"],
[style*="background"][style*="#6366f1"],
[style*="background"][style*="#8b5cf6"],
[style*="background"][style*="rgb(80, 72, 229)"],
[style*="background"][style*="rgb(99, 102, 241)"],
[style*="background"][style*="rgb(139, 92, 246)"] {
	background-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
}

/* Target specific Radzen default theme colors */
[class*="rz-primary"], .rz-primary {
	background-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
	border-color: var(--md-sys-color-primary) !important;
}

/* Radzen theme override */
:root {
	--rz-primary: var(--md-sys-color-primary) !important;
	--rz-primary-light: var(--md-sys-color-primary-container) !important;
	--rz-primary-lighter: var(--md-sys-color-primary-container) !important;
	--rz-primary-dark: var(--md-sys-color-on-primary-container) !important;
	--rz-primary-darker: var(--md-sys-color-on-primary-container) !important;
	--rz-secondary: var(--md-sys-color-secondary) !important;
	--rz-success: var(--md-sys-color-secondary) !important;
	--rz-warning: var(--md-sys-color-tertiary) !important;
	--rz-danger: var(--md-sys-color-error) !important;
}

/* Layout component backgrounds */
.rz-layout [style*="grid-area: rz-header"],
.rz-layout [style*="grid-area:rz-header"] {
	background-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
}

/* Any div with grid-area header */
div[style*="grid-area"][style*="header"] {
	background-color: var(--md-sys-color-primary) !important;
	color: var(--md-sys-color-on-primary) !important;
}

/* Navigation Menu Items */
.rz-panelmenu-item, .rz-panelmenu-item a {
	color: var(--md-sys-color-on-surface) !important;
}

	.rz-panelmenu-item:hover, .rz-panelmenu-item a:hover {
		background-color: var(--md-sys-color-primary-container) !important;
		color: var(--md-sys-color-on-primary-container) !important;
	}

	.rz-panelmenu-item.rz-state-active,
	.rz-panelmenu-item.rz-state-active a {
		background-color: var(--md-sys-color-secondary-container) !important;
		color: var(--md-sys-color-on-secondary-container) !important;
	}

/* Override any purple/blue nav item colors */
.rz-navigation .rz-navigation-item,
.rz-navigation .rz-navigation-item a,
.rz-panelmenu .rz-panelmenu-item,
.rz-panelmenu .rz-panelmenu-item a {
	color: var(--md-sys-color-on-surface) !important;
}

	.rz-navigation .rz-navigation-item:hover,
	.rz-navigation .rz-navigation-item a:hover,
	.rz-panelmenu .rz-panelmenu-item:hover,
	.rz-panelmenu .rz-panelmenu-item a:hover {
		background-color: var(--md-sys-color-primary-container) !important;
		color: var(--md-sys-color-on-primary-container) !important;
	}

	.rz-navigation .rz-navigation-item.rz-state-active,
	.rz-navigation .rz-navigation-item.rz-state-active a,
	.rz-panelmenu .rz-panelmenu-item.rz-state-active,
	.rz-panelmenu .rz-panelmenu-item.rz-state-active a {
		background-color: var(--md-sys-color-secondary-container) !important;
		color: var(--md-sys-color-on-secondary-container) !important;
	}

/* Target menu items with specific purple/blue backgrounds */
[style*="background-color: rgb(99, 102, 241)"],
[style*="background-color: #6366f1"],
[style*="background-color: rgb(139, 92, 246)"],
[style*="background-color: #8b5cf6"],
[style*="background-color: rgb(80, 72, 229)"],
[style*="background-color: #5048e5"] {
	background-color: var(--md-sys-color-secondary-container) !important;
	color: var(--md-sys-color-on-secondary-container) !important;
}

/* RadzenNavMenu specific overrides */
.rz-navigation-item-wrapper {
	color: var(--md-sys-color-on-surface) !important;
}

	.rz-navigation-item-wrapper:hover {
		background-color: var(--md-sys-color-primary-container) !important;
		color: var(--md-sys-color-on-primary-container) !important;
	}

	.rz-navigation-item-wrapper.rz-navigation-item-active {
		background-color: var(--md-sys-color-secondary-container) !important;
		color: var(--md-sys-color-on-secondary-container) !important;
	}

/* RadzenSidebar and RadzenPanelMenu */
.rz-sidebar .rz-panelmenu-item {
	color: var(--md-sys-color-on-surface) !important;
}

	.rz-sidebar .rz-panelmenu-item:hover {
		background-color: var(--md-sys-color-primary-container) !important;
		color: var(--md-sys-color-on-primary-container) !important;
	}

	.rz-sidebar .rz-panelmenu-item.rz-state-active {
		background-color: var(--md-sys-color-secondary-container) !important;
		color: var(--md-sys-color-on-secondary-container) !important;
	}

/* Navigation Menu Icons */
.rz-panelmenu-item i,
.rz-panelmenu-item .rz-icon,
.rz-navigation-item i,
.rz-navigation-item .rz-icon,
.rz-navigation-item-wrapper i,
.rz-navigation-item-wrapper .rz-icon {
	color: var(--md-sys-color-on-surface) !important;
}

.rz-panelmenu-item:hover i,
.rz-panelmenu-item:hover .rz-icon,
.rz-navigation-item:hover i,
.rz-navigation-item:hover .rz-icon,
.rz-navigation-item-wrapper:hover i,
.rz-navigation-item-wrapper:hover .rz-icon {
	color: var(--md-sys-color-on-primary-container) !important;
}

.rz-panelmenu-item.rz-state-active i,
.rz-panelmenu-item.rz-state-active .rz-icon,
.rz-navigation-item.rz-state-active i,
.rz-navigation-item.rz-state-active .rz-icon,
.rz-navigation-item-wrapper.rz-navigation-item-active i,
.rz-navigation-item-wrapper.rz-navigation-item-active .rz-icon {
	color: var(--md-sys-color-on-secondary-container) !important;
}

/* Sidebar specific icon overrides */
.rz-sidebar .rz-panelmenu-item i,
.rz-sidebar .rz-panelmenu-item .rz-icon {
	color: var(--md-sys-color-on-surface) !important;
}

.rz-sidebar .rz-panelmenu-item:hover i,
.rz-sidebar .rz-panelmenu-item:hover .rz-icon {
	color: var(--md-sys-color-on-primary-container) !important;
}

.rz-sidebar .rz-panelmenu-item.rz-state-active i,
.rz-sidebar .rz-panelmenu-item.rz-state-active .rz-icon {
	color: var(--md-sys-color-on-secondary-container) !important;
}

/* Override any purple/blue icon colors specifically */
[style*="color: rgb(99, 102, 241)"] i,
[style*="color: #6366f1"] i,
[style*="color: rgb(139, 92, 246)"] i,
[style*="color: #8b5cf6"] i,
[style*="color: rgb(80, 72, 229)"] i,
[style*="color: #5048e5"] i,
i[style*="color: rgb(99, 102, 241)"],
i[style*="color: #6366f1"],
i[style*="color: rgb(139, 92, 246)"],
i[style*="color: #8b5cf6"],
i[style*="color: rgb(80, 72, 229)"],
i[style*="color: #5048e5"] {
	color: var(--md-sys-color-on-surface) !important;
}

/* Radzen icon classes */
.rzi,
.rz-icon,
.fas,
.fa,
.material-icons {
	color: inherit !important;
}

/* Force inheritance for nested icon elements */
.rz-panelmenu-item * i,
.rz-panelmenu-item * .rz-icon,
.rz-navigation-item * i,
.rz-navigation-item * .rz-icon {
	color: inherit !important;
}

/* Header User Profile Dropdown */
.rz-header .rz-dropdown,
.rz-header .rz-splitbutton {
	background-color: transparent !important;
	border: none !important;
}

.rz-header .rz-dropdown-label,
.rz-header .rz-splitbutton-label,
.rz-header .rz-button-text {
	color: var(--md-sys-color-on-primary) !important;
}

.rz-header .rz-dropdown:hover,
.rz-header .rz-splitbutton:hover {
	background-color: rgba(255, 255, 255, 0.1) !important;
}

	.rz-header .rz-dropdown:hover .rz-dropdown-label,
	.rz-header .rz-splitbutton:hover .rz-splitbutton-label,
	.rz-header .rz-button:hover .rz-button-text {
		color: var(--md-sys-color-on-primary) !important;
	}

/* Profile menu button in header */
.rz-header .rz-button,
.rz-header .rz-menubutton {
	background-color: transparent !important;
	border: none !important;
	color: var(--md-sys-color-on-primary) !important;
}

	.rz-header .rz-button:hover,
	.rz-header .rz-menubutton:hover {
		background-color: rgba(255, 255, 255, 0.1) !important;
		color: var(--md-sys-color-on-primary) !important;
	}

/* User email/name text specifically */
.rz-header .rz-dropdown-label,
.rz-header .rz-button-text,
.rz-header span {
	color: var(--md-sys-color-on-primary) !important;
}

/* Override any specific user profile elements */
[style*="grid-area: rz-header"] .rz-dropdown,
[style*="grid-area: rz-header"] .rz-button,
[style*="grid-area: rz-header"] .rz-menubutton {
	color: var(--md-sys-color-on-primary) !important;
	background-color: transparent !important;
}

	[style*="grid-area: rz-header"] .rz-dropdown:hover,
	[style*="grid-area: rz-header"] .rz-button:hover,
	[style*="grid-area: rz-header"] .rz-menubutton:hover {
		background-color: rgba(255, 255, 255, 0.15) !important;
		color: var(--md-sys-color-on-primary) !important;
	}

/* Super aggressive white text overrides for header */
.rz-header *,
.rz-header * *,
.rz-header * * *,
[style*="grid-area: rz-header"] *,
[style*="grid-area: rz-header"] * *,
[style*="grid-area: rz-header"] * * * {
	color: white !important;
}

/* Target specific text elements in header */
.rz-header .rz-dropdown-label,
.rz-header .rz-button-text,
.rz-header .rz-splitbutton-label,
.rz-header span,
.rz-header p,
.rz-header div,
.rz-header a {
	color: white !important;
}

/* Override any inline styles with specific colors */
[style*="color: rgb"][style*="grid-area"],
[style*="color: #"][style*="grid-area"] {
	color: white !important;
}

/* Force white for any text in header regardless of specificity */
.rz-layout > [style*="rz-header"] *,
.rz-layout > [style*="rz-header"] * * {
	color: white !important;
}

/* Target the actual user email text */
.rz-header .rz-dropdown .rz-dropdown-label,
.rz-header .rz-menubutton .rz-button-text,
.rz-header .rz-button .rz-button-text {
	color: white !important;
	font-weight: 400 !important;
}

/* Hover states should also be white */
.rz-header *:hover,
.rz-header *:focus,
.rz-header *:active {
	color: white !important;
}

/* Utility Classes */
.text-center {
	text-align: center;
}

.text-left {
	text-align: left;
}

.text-right {
	text-align: right;
}

/* Margins */
.m-0 {
	margin: 0;
}

.mt-0 {
	margin-top: 0;
}

.mt-1 {
	margin-top: var(--md-sys-size-spacing-xs);
}

.mt-2 {
	margin-top: var(--md-sys-size-spacing-sm);
}

.mt-3 {
	margin-top: var(--md-sys-size-spacing-md);
}

.mt-4 {
	margin-top: var(--md-sys-size-spacing-lg);
}

.mt-5 {
	margin-top: var(--md-sys-size-spacing-xl);
}

.mb-0 {
	margin-bottom: 0;
}

.mb-1 {
	margin-bottom: var(--md-sys-size-spacing-xs);
}

.mb-2 {
	margin-bottom: var(--md-sys-size-spacing-sm);
}

.mb-3 {
	margin-bottom: var(--md-sys-size-spacing-md);
}

.mb-4 {
	margin-bottom: var(--md-sys-size-spacing-lg);
}

.mb-5 {
	margin-bottom: var(--md-sys-size-spacing-xl);
}

.ml-0 {
	margin-left: 0;
}

.ml-1 {
	margin-left: var(--md-sys-size-spacing-xs);
}

.ml-2 {
	margin-left: var(--md-sys-size-spacing-sm);
}

.ml-3 {
	margin-left: var(--md-sys-size-spacing-md);
}

.mr-0 {
	margin-right: 0;
}

.mr-1 {
	margin-right: var(--md-sys-size-spacing-xs);
}

.mr-2 {
	margin-right: var(--md-sys-size-spacing-sm);
}

.mr-3 {
	margin-right: var(--md-sys-size-spacing-md);
}

/* Padding */
.p-0 {
	padding: 0;
}

.p-1 {
	padding: var(--md-sys-size-spacing-xs);
}

.p-2 {
	padding: var(--md-sys-size-spacing-sm);
}

.p-3 {
	padding: var(--md-sys-size-spacing-md);
}

.p-4 {
	padding: var(--md-sys-size-spacing-lg);
}

.pt-0 {
	padding-top: 0;
}

.pt-1 {
	padding-top: var(--md-sys-size-spacing-xs);
}

.pt-2 {
	padding-top: var(--md-sys-size-spacing-sm);
}

.pt-3 {
	padding-top: var(--md-sys-size-spacing-md);
}

.pt-4 {
	padding-top: var(--md-sys-size-spacing-lg);
}

.pb-0 {
	padding-bottom: 0;
}

.pb-1 {
	padding-bottom: var(--md-sys-size-spacing-xs);
}

.pb-2 {
	padding-bottom: var(--md-sys-size-spacing-sm);
}

.pb-3 {
	padding-bottom: var(--md-sys-size-spacing-md);
}

.pb-4 {
	padding-bottom: var(--md-sys-size-spacing-lg);
}

/* Display */
.d-none {
	display: none;
}

.d-block {
	display: block;
}

.d-inline {
	display: inline;
}

.d-inline-block {
	display: inline-block;
}

.d-flex {
	display: flex;
}

.d-inline-flex {
	display: inline-flex;
}

.d-grid {
	display: grid;
}

/* Flexbox */
.flex-row {
	flex-direction: row;
}

.flex-column {
	flex-direction: column;
}

.flex-wrap {
	flex-wrap: wrap;
}

.flex-nowrap {
	flex-wrap: nowrap;
}

.flex-grow-0 {
	flex-grow: 0;
}

.flex-grow-1 {
	flex-grow: 1;
}

.flex-shrink-0 {
	flex-shrink: 0;
}

.flex-shrink-1 {
	flex-shrink: 1;
}

.justify-content-start {
	justify-content: flex-start;
}

.justify-content-end {
	justify-content: flex-end;
}

.justify-content-center {
	justify-content: center;
}

.justify-content-between {
	justify-content: space-between;
}

.justify-content-around {
	justify-content: space-around;
}

.justify-content-evenly {
	justify-content: space-evenly;
}

.align-items-start {
	align-items: flex-start;
}

.align-items-end {
	align-items: flex-end;
}

.align-items-center {
	align-items: center;
}

.align-items-baseline {
	align-items: baseline;
}

.align-items-stretch {
	align-items: stretch;
}

.align-content-start {
	align-content: flex-start;
}

.align-content-end {
	align-content: flex-end;
}

.align-content-center {
	align-content: center;
}

.align-content-between {
	align-content: space-between;
}

.align-content-around {
	align-content: space-around;
}

.align-content-stretch {
	align-content: stretch;
}

/* Grid */
.grid-cols-1 {
	grid-template-columns: repeat(1, 1fr);
}

.grid-cols-2 {
	grid-template-columns: repeat(2, 1fr);
}

.grid-cols-3 {
	grid-template-columns: repeat(3, 1fr);
}

.grid-cols-4 {
	grid-template-columns: repeat(4, 1fr);
}

.grid-cols-6 {
	grid-template-columns: repeat(6, 1fr);
}

.grid-cols-12 {
	grid-template-columns: repeat(12, 1fr);
}

.col-span-1 {
	grid-column: span 1;
}

.col-span-2 {
	grid-column: span 2;
}

.col-span-3 {
	grid-column: span 3;
}

.col-span-4 {
	grid-column: span 4;
}

.col-span-6 {
	grid-column: span 6;
}

.col-span-full {
	grid-column: 1 / -1;
}

.gap-0 {
	gap: 0;
}

.gap-1 {
	gap: var(--md-sys-size-spacing-xs);
}

.gap-2 {
	gap: var(--md-sys-size-spacing-sm);
}

.gap-3 {
	gap: var(--md-sys-size-spacing-md);
}

.gap-4 {
	gap: var(--md-sys-size-spacing-lg);
}

.gap-5 {
	gap: var(--md-sys-size-spacing-xl);
}

/* Width & Height */
.w-auto {
	width: auto;
}

.w-full {
	width: 100%;
}

.w-screen {
	width: 100vw;
}

.w-fit {
	width: fit-content;
}

.w-0 {
	width: 0;
}

.w-25 {
	width: 25%;
}

.w-50 {
	width: 50%;
}

.w-75 {
	width: 75%;
}

.w-100 {
	width: 100%;
}

.h-auto {
	height: auto;
}

.h-full {
	height: 100%;
}

.h-screen {
	height: 100vh;
}

.h-fit {
	height: fit-content;
}

.h-0 {
	height: 0;
}

.min-w-0 {
	min-width: 0;
}

.min-w-full {
	min-width: 100%;
}

.min-h-0 {
	min-height: 0;
}

.min-h-full {
	min-height: 100%;
}

.min-h-screen {
	min-height: 100vh;
}

.max-w-none {
	max-width: none;
}

.max-w-xs {
	max-width: 320px;
}

.max-w-sm {
	max-width: 384px;
}

.max-w-md {
	max-width: 448px;
}

.max-w-lg {
	max-width: 512px;
}

.max-w-xl {
	max-width: 576px;
}

.max-w-2xl {
	max-width: 672px;
}

.max-w-3xl {
	max-width: 768px;
}

.max-w-4xl {
	max-width: 896px;
}

.max-w-5xl {
	max-width: 1024px;
}

.max-w-6xl {
	max-width: 1152px;
}

.max-w-7xl {
	max-width: 1280px;
}

.max-w-full {
	max-width: 100%;
}

/* Position */
.relative {
	position: relative;
}

.absolute {
	position: absolute;
}

.fixed {
	position: fixed;
}

.sticky {
	position: sticky;
}

.static {
	position: static;
}

/* Z-Index */
.z-0 {
	z-index: 0;
}

.z-10 {
	z-index: 10;
}

.z-20 {
	z-index: 20;
}

.z-30 {
	z-index: 30;
}

.z-40 {
	z-index: 40;
}

.z-50 {
	z-index: 50;
}

.z-auto {
	z-index: auto;
}

/* Overflow */
.overflow-auto {
	overflow: auto;
}

.overflow-hidden {
	overflow: hidden;
}

.overflow-visible {
	overflow: visible;
}

.overflow-scroll {
	overflow: scroll;
}

.overflow-x-auto {
	overflow-x: auto;
}

.overflow-x-hidden {
	overflow-x: hidden;
}

.overflow-y-auto {
	overflow-y: auto;
}

.overflow-y-hidden {
	overflow-y: hidden;
}

/* Font Weights */
.font-thin {
	font-weight: 100;
}

.font-extralight {
	font-weight: 200;
}

.font-light {
	font-weight: 300;
}

.font-normal {
	font-weight: 400;
}

.font-medium {
	font-weight: 500;
}

.font-semibold {
	font-weight: 600;
}

.font-bold {
	font-weight: 700;
}

.font-extrabold {
	font-weight: 800;
}

.font-black {
	font-weight: 900;
}

/* Text Colors */
.text-primary {
	color: var(--md-sys-color-primary);
}

.text-secondary {
	color: var(--md-sys-color-secondary);
}

.text-surface {
	color: var(--md-sys-color-on-surface);
}

.text-surface-variant {
	color: var(--md-sys-color-on-surface-variant);
}

.text-error {
	color: var(--md-sys-color-error);
}

/* Background Colors */
.bg-primary {
	background-color: var(--md-sys-color-primary);
}

.bg-primary-container {
	background-color: var(--md-sys-color-primary-container);
}

.bg-secondary {
	background-color: var(--md-sys-color-secondary);
}

.bg-secondary-container {
	background-color: var(--md-sys-color-secondary-container);
}

.bg-surface {
	background-color: var(--md-sys-color-surface);
}

.bg-surface-variant {
	background-color: var(--md-sys-color-surface-variant);
}

.bg-error {
	background-color: var(--md-sys-color-error);
}

.bg-error-container {
	background-color: var(--md-sys-color-error-container);
}

/* Border Radius */
.rounded-none {
	border-radius: 0;
}

.rounded-xs {
	border-radius: var(--md-sys-shape-corner-xs);
}

.rounded-sm {
	border-radius: var(--md-sys-shape-corner-sm);
}

.rounded {
	border-radius: var(--md-sys-shape-corner-md);
}

.rounded-lg {
	border-radius: var(--md-sys-shape-corner-lg);
}

.rounded-xl {
	border-radius: var(--md-sys-shape-corner-xl);
}

.rounded-full {
	border-radius: var(--md-sys-shape-corner-full);
}

/* Shadows */
.shadow-none {
	box-shadow: none;
}

.shadow-sm {
	box-shadow: var(--md-sys-elevation-level1);
}

.shadow {
	box-shadow: var(--md-sys-elevation-level2);
}

.shadow-lg {
	box-shadow: var(--md-sys-elevation-level3);
}

/* Responsive Design Utilities */
@media (min-width: 640px) {
	.sm\:d-none {
		display: none;
	}

	.sm\:d-block {
		display: block;
	}

	.sm\:d-flex {
		display: flex;
	}

	.sm\:grid-cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.sm\:grid-cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}
}

@media (min-width: 768px) {
	.md\:d-none {
		display: none;
	}

	.md\:d-block {
		display: block;
	}

	.md\:d-flex {
		display: flex;
	}

	.md\:grid-cols-2 {
		grid-template-columns: repeat(2, 1fr);
	}

	.md\:grid-cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.md\:grid-cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.md\:p-4 {
		padding: var(--md-sys-size-spacing-lg);
	}
}

@media (min-width: 1024px) {
	.lg\:d-none {
		display: none;
	}

	.lg\:d-block {
		display: block;
	}

	.lg\:d-flex {
		display: flex;
	}

	.lg\:grid-cols-3 {
		grid-template-columns: repeat(3, 1fr);
	}

	.lg\:grid-cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.lg\:grid-cols-6 {
		grid-template-columns: repeat(6, 1fr);
	}
}

@media (min-width: 1280px) {
	.xl\:grid-cols-4 {
		grid-template-columns: repeat(4, 1fr);
	}

	.xl\:grid-cols-6 {
		grid-template-columns: repeat(6, 1fr);
	}

	.xl\:grid-cols-8 {
		grid-template-columns: repeat(8, 1fr);
	}
}

#blazor-error-ui {
	color-scheme: light only;
	background: lightyellow;
	bottom: 0;
	box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
	box-sizing: border-box;
	display: none;
	left: 0;
	padding: 0.6rem 1.25rem 0.7rem 1.25rem;
	position: fixed;
	width: 100%;
	z-index: 1000;
}

	#blazor-error-ui .dismiss {
		cursor: pointer;
		position: absolute;
		right: 0.75rem;
		top: 0.5rem;
	}

.blazor-error-boundary {
	background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
	padding: 1rem 1rem 1rem 3.7rem;
	color: white;
}

	.blazor-error-boundary::after {
		content: "An error has occurred."
	}

.loading-progress {
	position: relative;
	display: block;
	width: 8rem;
	height: 8rem;
	margin: 20vh auto 1rem auto;
}

	.loading-progress circle {
		fill: none;
		stroke: #e0e0e0;
		stroke-width: 0.6rem;
		transform-origin: 50% 50%;
		transform: rotate(-90deg);
	}

		.loading-progress circle:last-child {
			stroke: #1b6ec2;
			stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
			transition: stroke-dasharray 0.05s ease-in-out;
		}

.loading-progress-text {
	position: absolute;
	top: calc(20vh + 4rem);
	left: calc(50% - 0.2rem);
	transform: translate(-50%, -50%);
	text-align: center;
	font-weight: bold;
	width: 8rem;
	pointer-events: none;
}

	.loading-progress-text:after {
		content: var(--blazor-load-percentage-text, "Loading");
	}

code {
	color: #c02d76;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
	color: var(--bs-secondary-color);
	text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
	text-align: start;
}

/* RadzenProfileMenu Styling - Match Sidebar Appearance */
.rz-profile-menu .rz-navigation-menu {
	background-color: #fafafa !important;
	border: 1px solid var(--md-sys-color-outline-variant) !important;
	border-radius: 0 !important;
	box-shadow: var(--md-sys-elevation-level3) !important;
	padding: var(--md-sys-size-spacing-sm) 0 !important;
	margin-top: var(--md-sys-size-spacing-xs) !important;
}

/* Make chevron white in header */
.rz-profile-menu .rz-navigation-item-icon-children {
	color: white !important;
}

/* Profile Menu Navigation Items */
.rz-profile-menu .rz-navigation-item {
	margin: 0 !important;
}

.rz-profile-menu .rz-navigation-item-wrapper {
	background-color: transparent !important;
	border-radius: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

	.rz-profile-menu .rz-navigation-item-wrapper:hover {
		background-color: rgba(15, 85, 157, 0.08) !important;
	}

.rz-profile-menu .rz-navigation-item-link {
	display: flex !important;
	align-items: center !important;
	gap: var(--md-sys-size-spacing-xs) !important;
	padding: 0.3rem !important;
	color: #455A64 !important;
	text-decoration: none !important;
	font-weight: 500 !important;
	transition: all 150ms cubic-bezier(0.4, 0, 0.2, 1) !important;
	min-height: 40px !important;
}

.rz-profile-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-link {
	color: var(--md-sys-color-primary) !important;
}

/* Profile Menu Icons */
.rz-profile-menu .rz-navigation-item-icon {
	color: #455A64 !important;
	font-size: 20px !important;
	width: 20px !important;
	height: 20px !important;
	margin-right: 0 !important;
}

.rz-profile-menu .rz-navigation-item-wrapper:hover .rz-navigation-item-icon {
	color: var(--md-sys-color-primary) !important;
}

/* Profile Menu Text */
.rz-profile-menu .rz-navigation-item-text {
	color: inherit !important;
	font-size: inherit !important;
}

/* Ultra-specific profile menu styling - catch all edge cases */
ul.rz-profile-menu ul.rz-navigation-menu {
	background-color: #fafafa !important;
	border: 1px solid var(--md-sys-color-outline-variant) !important;
	border-radius: 0 !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

	ul.rz-profile-menu ul.rz-navigation-menu li {
		background-color: transparent !important;
	}

		ul.rz-profile-menu ul.rz-navigation-menu li:hover {
			background-color: rgba(15, 85, 157, 0.08) !important;
		}

		ul.rz-profile-menu ul.rz-navigation-menu li a,
		ul.rz-profile-menu ul.rz-navigation-menu li div.rz-navigation-item-link {
			color: #455A64 !important;
			font-weight: 500 !important;
			padding: 0.625rem 1rem !important;
			min-height: 40px !important;
		}

		ul.rz-profile-menu ul.rz-navigation-menu li:hover a,
		ul.rz-profile-menu ul.rz-navigation-menu li:hover div.rz-navigation-item-link {
			color: var(--md-sys-color-primary) !important;
		}

/* Force any absolutely positioned dropdown to use correct styling */
[style*="position: absolute"][style*="z-index"].rz-navigation-menu {
	background-color: #fafafa !important;
	border: 1px solid var(--md-sys-color-outline-variant) !important;
	border-radius: 0 !important;
	box-shadow: var(--md-sys-elevation-level3) !important;
	color: #455A64 !important;
}

/* WearStack Badge Styles */
/* Radzen/datagrid header CSS (above) forces thead th > div to flex row with !important but no
   justify-content, so defaults to flex-start and the total badge sits left. Center explicitly. */
table.wearstack-table.rz-grid-table thead th > div.wearstack-total-count-container,
.rz-grid-table.wearstack-table thead th > div.wearstack-total-count-container {
	justify-content: center !important;
	width: 100% !important;
}

.wearstack-total-count-container {
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
	width: 100%;
}

.wearstack-counter-split {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.25rem;
}

.wearstack-count-badge {
	color: white !important;
	font-weight: 700 !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
}

.wearstack-total-count-badge {
	color: white !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	padding: 0.5rem !important;
	width: 2rem !important;
	height: 2rem !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
}

.wearstack-counter-container {
	display: flex;
	justify-content: center;
	width: 100%;
	margin-bottom: 0.25rem;
	z-index: 5;
}

.wearstack-counter-badge {
	color: white !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	padding: 0.2rem !important;
	width: 1.5rem !important;
	height: 1.5rem !important;
	border-radius: 50% !important;
	display: flex !important;
	align-items: center;
	justify-content: center;
	line-height: 1 !important;
}

	/* Single-badge mode (toggle off) */
	.wearstack-total-count-badge:not(.wearstack-count-badge--package):not(.wearstack-count-badge--non-package),
	.wearstack-counter-badge:not(.wearstack-count-badge--package):not(.wearstack-count-badge--non-package) {
		background-color: #23b14e !important;
		border: 1px solid #23b14e !important;
	}

.wearstack-counter-badge--zero {
	background-color: var(--rz-base-200) !important;
	border: 1px solid var(--rz-base-400) !important;
	color: var(--rz-text-secondary) !important;
}

/* Split-badge mode (toggle on) */
.wearstack-total-count-badge.wearstack-count-badge--package,
.wearstack-counter-badge.wearstack-count-badge--package {
	background-color: #23b14e !important;
	border: 1px solid #23b14e !important;
}

.wearstack-total-count-badge.wearstack-count-badge--non-package,
.wearstack-counter-badge.wearstack-count-badge--non-package {
	background-color: #8B4513 !important;
	border: 1px solid #8B4513 !important;
}

/* API Connection Status Icons */
.status-icon {
	transition: all 0.3s ease-in-out;
}

	.status-icon.reconnecting {
		animation: flicker 1s ease-in-out infinite;
	}

@keyframes flicker {
	0%, 100% {
		opacity: 1;
	}

	50% {
		opacity: 0.3;
	}
}

/* Generic product presentation component */
.product-presentation-clickable:hover {
	opacity: 0.9;
}

.product-presentation-clickable:active {
	opacity: 0.95;
}

/* Generic order presentation component */
.order-presentation-clickable:hover {
	opacity: 0.9;
}

.order-presentation-clickable:active {
	opacity: 0.95;
}

/* Population dialog: no gap between Package and Department filters */
.population-dialog-filters.rz-row {
	gap: 0 !important;
	column-gap: 0 !important;
}

/* Hide Radzen's built-in legend (keep only custom legend below chart) */
.population-chart-lines-only .rz-chart-legend,
.population-chart-lines-only .rz-chart .rz-legend {
	display: none !important;
}

/* Population chart: define series colors */
#population-chart-container .rz-chart {
	--rz-series-1: #000000;
	--rz-series-2: #1976D2;
	--rz-series-3: #1976D2;
	--rz-series-4: #B71C1C;
	--rz-series-5: #B71C1C;
	--rz-series-6: #1B5E20;
}

	#population-chart-container .rz-chart .rz-series-0,
	#population-chart-container .rz-chart .rz-series-item-0 {
		fill: var(--rz-series-1) !important;
		stroke: var(--rz-series-1) !important;
	}

	#population-chart-container .rz-chart .rz-series-1,
	#population-chart-container .rz-chart .rz-series-item-1 {
		fill: var(--rz-series-2) !important;
		stroke: var(--rz-series-2) !important;
	}

	#population-chart-container .rz-chart .rz-series-2,
	#population-chart-container .rz-chart .rz-series-item-2 {
		fill: var(--rz-series-3) !important;
		stroke: var(--rz-series-3) !important;
	}

	#population-chart-container .rz-chart .rz-series-3,
	#population-chart-container .rz-chart .rz-series-item-3 {
		fill: var(--rz-series-4) !important;
		stroke: var(--rz-series-4) !important;
	}

	#population-chart-container .rz-chart .rz-series-4,
	#population-chart-container .rz-chart .rz-series-item-4 {
		fill: var(--rz-series-5) !important;
		stroke: var(--rz-series-5) !important;
	}

	#population-chart-container .rz-chart .rz-series-5,
	#population-chart-container .rz-chart .rz-series-item-5 {
		fill: var(--rz-series-6) !important;
		stroke: var(--rz-series-6) !important;
	}

		#population-chart-container .rz-chart .rz-series-0 path,
		#population-chart-container .rz-chart .rz-series-0 line,
		#population-chart-container .rz-chart .rz-series-1 path,
		#population-chart-container .rz-chart .rz-series-1 line,
		#population-chart-container .rz-chart .rz-series-2 path,
		#population-chart-container .rz-chart .rz-series-2 line,
		#population-chart-container .rz-chart .rz-series-3 path,
		#population-chart-container .rz-chart .rz-series-3 line,
		#population-chart-container .rz-chart .rz-series-4 path,
		#population-chart-container .rz-chart .rz-series-4 line,
		#population-chart-container .rz-chart .rz-series-5 path,
		#population-chart-container .rz-chart .rz-series-5 line,
		#population-chart-container .rz-chart .rz-series-item-0 path,
		#population-chart-container .rz-chart .rz-series-item-0 line,
		#population-chart-container .rz-chart .rz-series-item-1 path,
		#population-chart-container .rz-chart .rz-series-item-1 line,
		#population-chart-container .rz-chart .rz-series-item-2 path,
		#population-chart-container .rz-chart .rz-series-item-2 line,
		#population-chart-container .rz-chart .rz-series-item-3 path,
		#population-chart-container .rz-chart .rz-series-item-3 line,
		#population-chart-container .rz-chart .rz-series-item-4 path,
		#population-chart-container .rz-chart .rz-series-item-4 line,
		#population-chart-container .rz-chart .rz-series-item-5 path,
		#population-chart-container .rz-chart .rz-series-item-5 line {
			fill: none !important;
			stroke: inherit !important;
		}

.population-chart-lines-only .rz-chart svg path,
.population-chart-lines-only .rz-chart svg line {
	animation: none !important;
	fill: none !important;
}

.population-chart-lines-only .rz-chart svg circle,
.population-chart-lines-only .rz-chart g[class*="series"] > * {
	animation: none !important;
}

.population-chart-section .population-chart-banner-wrapper,
.population-chart-section .population-chart-lines-only {
	padding-left: 2.5rem;
	padding-right: 2.5rem;
	box-sizing: border-box;
}

.population-chart-section .population-chart-banner-wrapper {
	padding-bottom: 0;
}

.population-chart-section .population-chart-lines-only {
	padding-top: 0;
	width: 100%;
	min-width: 0;
	overflow: visible;
	display: block;
}

	.population-chart-section .population-chart-lines-only > * {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		box-sizing: border-box;
	}

	.population-chart-section .population-chart-lines-only .rz-chart {
		width: 100% !important;
		max-width: 100% !important;
		min-width: 0;
		display: block !important;
	}

		.population-chart-section .population-chart-lines-only .rz-chart svg {
			width: 100% !important;
			max-width: 100% !important;
		}

.population-chart-banners {
	display: flex;
	width: 100%;
	gap: 0;
}

.population-chart-banner {
	text-align: center;
	padding: 0.25rem;
	font-size: 0.875rem;
	font-weight: 500;
	box-sizing: border-box;
}

	.population-chart-banner.prediction {
		background: rgba(25, 118, 210, 0.08);
		border: 1px solid rgba(25, 118, 210, 0.3);
		color: #1976D2;
	}

	.population-chart-banner.current {
		background: rgba(211, 47, 47, 0.08);
		border: 1px solid rgba(211, 47, 47, 0.3);
		color: #D32F2F;
	}

.population-chart-custom-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	justify-content: flex-end;
	margin-top: 0.5rem;
	font-size: 0.875rem;
}

.population-legend-marker {
	display: inline-block;
	width: 0.75rem;
	height: 0.75rem;
	border-radius: 50%;
	margin-right: 0.25rem;
	vertical-align: middle;
}

	.population-legend-marker.active {
		background: #1976D2;
	}

	.population-legend-marker.exit {
		background: #B71C1C;
	}

	.population-legend-marker.new {
		background: #1B5E20;
	}

.population-legend-item {
	display: inline-flex;
	align-items: center;
}

.population-chart-section:has(#expected-order-rate-chart-container) .population-chart-banner-wrapper {
	width: 80%;
	max-width: 80%;
	margin-inline-end: auto;
	box-sizing: border-box;
}

#expected-order-rate-chart-container .rz-chart {
	--rz-series-1: #B71C1C !important;
	--rz-series-2: #B71C1C !important;
	--rz-series-3: #000000 !important;
	--rz-series-4: #000000 !important;
	--rz-series-5: #5D4037 !important;
	--rz-series-6: #5D4037 !important;
	--rz-series-7: #5D4037 !important;
}

	#expected-order-rate-chart-container .rz-chart > svg {
		width: 100% !important;
		max-width: 100% !important;
	}

	#expected-order-rate-chart-container .rz-chart .rz-series-item-0 path,
	#expected-order-rate-chart-container .rz-chart .rz-series-item-0 line {
		stroke: #000000 !important;
		fill: none !important;
	}

	#expected-order-rate-chart-container .rz-chart .rz-series-1 path,
	#expected-order-rate-chart-container .rz-chart .rz-series-1 line,
	#expected-order-rate-chart-container .rz-chart .rz-series-2 path,
	#expected-order-rate-chart-container .rz-chart .rz-series-2 line {
		stroke: #B71C1C !important;
		fill: none !important;
	}

	#expected-order-rate-chart-container .rz-chart .rz-series-1 circle,
	#expected-order-rate-chart-container .rz-chart .rz-series-2 circle {
		stroke: #B71C1C !important;
		fill: #B71C1C !important;
	}

	#expected-order-rate-chart-container .rz-chart .rz-series-3 path,
	#expected-order-rate-chart-container .rz-chart .rz-series-3 line,
	#expected-order-rate-chart-container .rz-chart .rz-series-4 path,
	#expected-order-rate-chart-container .rz-chart .rz-series-4 line {
		stroke: #000000 !important;
		fill: none !important;
	}

	#expected-order-rate-chart-container .rz-chart .rz-series-3 circle,
	#expected-order-rate-chart-container .rz-chart .rz-series-4 circle {
		stroke: #000000 !important;
		fill: #000000 !important;
	}

	#expected-order-rate-chart-container .rz-chart .rz-series-5 path,
	#expected-order-rate-chart-container .rz-chart .rz-series-5 line,
	#expected-order-rate-chart-container .rz-chart .rz-series-6 path,
	#expected-order-rate-chart-container .rz-chart .rz-series-6 line {
		stroke: #5D4037 !important;
		fill: none !important;
	}

	#expected-order-rate-chart-container .rz-chart .rz-series-5 circle,
	#expected-order-rate-chart-container .rz-chart .rz-series-6 circle {
		stroke: #5D4037 !important;
		fill: #5D4037 !important;
	}

	#expected-order-rate-chart-container .rz-chart .rz-series-item-1 path,
	#expected-order-rate-chart-container .rz-chart .rz-series-item-1 line,
	#expected-order-rate-chart-container .rz-chart .rz-series-item-2 path,
	#expected-order-rate-chart-container .rz-chart .rz-series-item-2 line {
		stroke: #B71C1C !important;
		fill: none !important;
	}

	#expected-order-rate-chart-container .rz-chart .rz-series-item-1 circle,
	#expected-order-rate-chart-container .rz-chart .rz-series-item-2 circle {
		stroke: #B71C1C !important;
		fill: #B71C1C !important;
	}

	#expected-order-rate-chart-container .rz-chart .rz-series-item-3 path,
	#expected-order-rate-chart-container .rz-chart .rz-series-item-3 line,
	#expected-order-rate-chart-container .rz-chart .rz-series-item-4 path,
	#expected-order-rate-chart-container .rz-chart .rz-series-item-4 line {
		stroke: #000000 !important;
		fill: none !important;
	}

	#expected-order-rate-chart-container .rz-chart .rz-series-item-3 circle,
	#expected-order-rate-chart-container .rz-chart .rz-series-item-4 circle {
		stroke: #000000 !important;
		fill: #000000 !important;
	}

	#expected-order-rate-chart-container .rz-chart .rz-series-item-5 path,
	#expected-order-rate-chart-container .rz-chart .rz-series-item-5 line,
	#expected-order-rate-chart-container .rz-chart .rz-series-item-6 path,
	#expected-order-rate-chart-container .rz-chart .rz-series-item-6 line {
		stroke: #5D4037 !important;
		fill: none !important;
	}

	#expected-order-rate-chart-container .rz-chart .rz-series-item-5 circle,
	#expected-order-rate-chart-container .rz-chart .rz-series-item-6 circle {
		stroke: #5D4037 !important;
		fill: #5D4037 !important;
	}

/* -------------------------------------------------------------------------- */
/* Dashboard: Customer support availability widget (CustomerSupportAvailabilityWidget) */
/* -------------------------------------------------------------------------- */

.support-widget-availability-heading {
	font-weight: 400;
}

	.support-widget-availability-heading strong {
		font-weight: 600;
	}

.support-widget-schedule {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	align-items: start;
}

@media (min-width: 768px) {
	.support-widget-schedule {
		grid-template-columns: 1fr 1fr;
	}
}

.support-widget-week {
	border-radius: var(--rz-border-radius, 8px);
	border: 1px solid var(--rz-base-300);
	overflow: hidden;
	background: var(--rz-base-50, var(--rz-body-background));
}

.support-widget-week__header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.6rem 0.85rem;
	margin: 0;
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--rz-on-primary, #fff);
	background: linear-gradient(135deg, var(--rz-primary) 0%, color-mix(in srgb, var(--rz-primary) 75%, #1a1a2e) 100%);
}

	.support-widget-week__header .rz-icon {
		font-size: 1.1rem;
		opacity: 0.95;
	}

.support-widget-week__days {
	padding: 0.35rem 0;
}

.support-widget-day {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	padding: 0.55rem 0.85rem;
	border-bottom: 1px solid var(--rz-base-200);
	transition: background-color 0.15s ease;
}

	.support-widget-day:last-child {
		border-bottom: none;
	}

.support-widget-day--open:hover {
	background: color-mix(in srgb, var(--rz-primary) 6%, transparent);
}

.support-widget-day--closure:hover {
	background: color-mix(in srgb, var(--rz-danger) 8%, transparent);
}

.support-widget-day--closed:hover {
	background: color-mix(in srgb, var(--rz-base-600, #666) 6%, transparent);
}

.support-widget-day__icon {
	flex-shrink: 0;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-size: 1.1rem;
}

.support-widget-day--open .support-widget-day__icon {
	background: color-mix(in srgb, var(--rz-success) 18%, transparent);
	color: var(--rz-success);
}

.support-widget-day--closure .support-widget-day__icon {
	background: color-mix(in srgb, var(--rz-danger) 16%, transparent);
	color: var(--rz-danger);
}

.support-widget-day--closed .support-widget-day__icon {
	background: var(--rz-base-200);
	color: var(--rz-text-secondary-color);
}

.support-widget-day__body {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
}

.support-widget-day__date {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--rz-text-color);
	line-height: 1.35;
}

.support-widget-day__detail {
	font-size: 0.88rem;
	color: var(--rz-text-secondary-color);
	line-height: 1.4;
}

.support-widget-day--closure .support-widget-day__date {
	color: var(--rz-danger);
}

.support-widget-day--closure .support-widget-day__detail {
	color: var(--rz-danger);
	font-weight: 400;
}

.support-widget-day--closure .support-widget-day__closure-prefix {
	font-weight: 400;
}

.support-widget-day--closure .support-widget-day__closure-reason {
	font-weight: 700;
}

.support-widget-day--closed .support-widget-day__detail {
	font-style: italic;
}

/* Partial deviating date (API IsDeviatingPartialDay): underline + trailing ! (black) */
.support-widget-day__detail .support-widget-day__partial-time {
	color: #000;
	text-decoration: underline !important;
	text-decoration-color: #000 !important;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
}

.support-widget-day__detail .support-widget-day__partial-mark {
	color: #000;
	font-weight: 700;
	margin-left: 0.15em;
}

.support-widget-contact {
	margin-top: 0.5rem;
	padding: 1rem 1.1rem;
	border-radius: var(--rz-border-radius, 8px);
	background: linear-gradient(160deg, color-mix(in srgb, var(--rz-primary) 8%, var(--rz-base-100)) 0%, var(--rz-base-100) 100%);
	border: 1px solid color-mix(in srgb, var(--rz-primary) 20%, var(--rz-base-300));
}

.support-widget-contact__row {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	font-size: 0.92rem;
	line-height: 1.45;
}

	.support-widget-contact__row + .support-widget-contact__row {
		margin-top: 0.5rem;
	}

	.support-widget-contact__row .rz-icon {
		margin-top: 0.1rem;
		color: var(--rz-primary);
		font-size: 1.15rem;
		flex-shrink: 0;
	}

.support-widget-contact__text {
	color: var(--rz-text-color);
}

.support-widget-contact__link {
	color: var(--rz-primary);
	font-weight: 500;
	text-decoration: none;
	word-break: break-all;
}

	.support-widget-contact__link:hover {
		text-decoration: underline;
	}

/* Published document upload: match native file input to Radzen field height */
.closup-pdf-upload input[type="file"] {
	box-sizing: border-box;
	width: 100%;
	min-height: var(--rz-input-height, 2.5rem);
	margin: 0;
	padding: 0.25rem 0.5rem;
	line-height: var(--rz-input-line-height, 1.5);
	font-size: inherit;
	font-family: inherit;
	color: var(--rz-text-primary-color, inherit);
	background-color: var(--rz-body-background-color, transparent);
	border: 1px solid var(--rz-border-normal, var(--rz-base-300));
	border-radius: var(--rz-border-radius);
}

	.closup-pdf-upload input[type="file"]:focus {
		outline: none;
		border-color: var(--rz-primary, var(--rz-base-700));
		box-shadow: var(--rz-focus-outline-style, 0 0 0 1px) var(--rz-primary, var(--rz-base-700));
	}

	.closup-pdf-upload input[type="file"]::file-selector-button {
		margin-right: 0.75rem;
		min-height: calc(var(--rz-input-height, 2.5rem) - 0.5rem);
		padding: 0.25rem 0.75rem;
		font: inherit;
		cursor: pointer;
		color: var(--rz-on-primary, #fff);
		background-color: var(--rz-primary);
		border: none;
		border-radius: calc(var(--rz-border-radius) * 0.75);
	}

		.closup-pdf-upload input[type="file"]::file-selector-button:hover {
			filter: brightness(0.95);
		}

/* Home page: single horizontal inset + vertical rhythm; panels fill columns (no per-card margins) */
.closup-home-container {
	box-sizing: border-box;
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
	padding: 0.75rem 1rem 1.25rem;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

@media (min-width: 960px) {
	.closup-home-container {
		padding-inline: 1.25rem;
	}
}

.closup-home-container > .rz-row {
	width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.closup-home-container .closup-home-panel {
	margin: 0;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
}

/* Home dashboard: KPI row � equal card height (documents: header + 3 visible rows, scroll, up to 10 items) */
.closup-dashboard-kpi-row {
	--closup-home-docs-row-height: 2.35rem;
	--closup-home-docs-visible-rows: 3;
	/* Card chrome + title row + (3 � row) + inner padding � matches documents card footprint */
	--closup-dashboard-kpi-unified-min-height: calc(3.1rem + (var(--closup-home-docs-visible-rows) * var(--closup-home-docs-row-height)) + 1.25rem);
}

	.closup-dashboard-kpi-row.rz-row {
		align-items: stretch;
		align-content: stretch;
	}

	/* Radzen column wrappers: flex so inner card can fill full column height/width */
	.closup-dashboard-kpi-row > .rz-col,
	.closup-dashboard-kpi-row > [class*="rz-col"] {
		display: flex;
		flex-direction: column;
		align-items: stretch;
		align-self: stretch;
		min-width: 0;
	}

	.closup-dashboard-kpi-row .closup-kpi-stat-card,
	.closup-dashboard-kpi-row .closup-home-docs-card {
		box-sizing: border-box;
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
		min-height: var(--closup-dashboard-kpi-unified-min-height);
		height: 100%;
		display: flex;
		flex-direction: column;
	}

	.closup-dashboard-kpi-row .closup-kpi-stat-card {
		justify-content: center;
	}

	.closup-dashboard-kpi-row .closup-home-docs-card {
		justify-content: flex-start;
	}

/* Documents list: show ~3 rows, scroll for 4�10 */
.closup-home-docs-grid-scroll {
	flex: 1 1 auto;
	min-height: 0;
	max-height: calc(var(--closup-home-docs-visible-rows) * var(--closup-home-docs-row-height));
	overflow-y: auto;
	overflow-x: hidden;
	-webkit-overflow-scrolling: touch;
}

/* Documents mini-grid: no column header row */
.closup-home-docs-grid .rz-grid-table thead {
	display: none;
}

.closup-home-docs-grid .rz-grid-table tbody td {
	padding-block: 0.3rem;
	font-size: 0.875rem;
}

/* PDF preview: icon-only � global .rz-button rules force primary blue; exempt this control */
.closup-home-docs-grid .closup-home-doc-pdf-btn.rz-button,
.closup-home-docs-grid .closup-home-doc-pdf-btn.rz-button:focus-visible {
	padding: 0.15rem 0.25rem;
	min-width: auto;
	line-height: 1;
	background-color: transparent !important;
	background-image: none !important;
	border-color: transparent !important;
	box-shadow: none !important;
	color: #c62828 !important;
	transform: none !important;
}

	.closup-home-docs-grid .closup-home-doc-pdf-btn.rz-button:hover {
		background-color: rgba(198, 40, 40, 0.1) !important;
		border-color: transparent !important;
		box-shadow: none !important;
		color: #b71c1c !important;
		transform: none !important;
	}

	.closup-home-docs-grid .closup-home-doc-pdf-btn.rz-button:active {
		background-color: rgba(198, 40, 40, 0.16) !important;
		color: #b71c1c !important;
	}

	.closup-home-docs-grid .closup-home-doc-pdf-btn.rz-button .rzi {
		font-size: var(--rz-icon-size, 1.5rem);
		line-height: 1;
		width: 1em;
		height: 1em;
		color: inherit;
	}

/* ContractMeasurementSettingsEditor � validity radios + months, alteration level inline */
.measurement-validity-radios .rz-radio-button-list-vertical {
	gap: 0.5rem;
}

/* Match Radzen disabled radio row (see curr-default-base.css: .rz-radiobutton-template.rz-state-disabled { opacity: 0.5 }) */
.measurement-validity-radios--validity-disabled .measurement-validity-limited-row {
	opacity: 0.5;
	cursor: initial;
}

.measurement-validity-limited-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 0.75rem;
}

.measurement-validity-limited-row__label {
	font-weight: 500;
}

.measurement-months-field {
	width: 5.5rem;
	min-width: 5.5rem;
	flex-shrink: 0;
	margin-bottom: 0 !important;
}

	.measurement-months-field .rz-form-field {
		margin-bottom: 0;
	}

	.measurement-months-field input {
		text-align: right;
	}

.measurement-level-inline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem 1rem;
}

.measurement-level-inline__text {
	flex: 1 1 14rem;
	margin: 0 !important;
	color: var(--rz-text-secondary);
}

.measurement-level-inline__dropdown {
	flex: 1 1 12rem;
	max-width: 24rem;
	min-width: 12rem;
}

/* HR connection settings � checkbox rows align with full-width form fields */
.hr-connection-checkbox-row {
	min-height: 2.5rem;
	padding: 0.25rem 0;
}

	.hr-connection-checkbox-row .rz-chkbox {
		flex-shrink: 0;
	}

.hr-connection-nested-field {
	padding-left: 1.75rem;
}

/* Order details dialog � product line fulfillment */
.order-line-fulfillment {
	border: 1px solid var(--rz-border-color);
	border-radius: 4px;
	overflow: hidden;
	max-height: 420px;
	overflow-y: auto;
}

.order-line-fulfillment-header,
.order-line-fulfillment-main,
.order-line-fulfillment-part {
	display: grid;
	grid-template-columns: minmax(200px, 2fr) minmax(70px, 0.7fr) 72px 72px 110px 120px minmax(100px, 1fr);
	gap: 0.75rem;
	align-items: center;
	padding: 0.65rem 0.75rem;
}

.order-line-fulfillment-header {
	position: sticky;
	top: 0;
	z-index: 1;
	background: var(--rz-base-100);
	border-bottom: 1px solid var(--rz-border-color);
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--rz-text-secondary);
	text-transform: none;
}

.order-line-fulfillment-row {
	border-bottom: 1px solid var(--rz-border-color);
}

	.order-line-fulfillment-row:last-child {
		border-bottom: none;
	}

.order-line-fulfillment-part {
	background: var(--rz-base-50);
	padding-left: 2.5rem;
	border-top: 1px dashed var(--rz-border-color);
}

.order-line-col-qty,
.order-line-col-date,
.order-line-col-status,
.order-line-col-track,
.order-line-col-size {
	font-size: 0.875rem;
}

.order-line-col-qty {
	text-align: center;
}

.order-line-col-size {
	text-align: left;
	word-break: break-word;
}

.order-line-muted {
	color: var(--rz-text-secondary);
}

.order-line-part-label {
	color: var(--rz-text-secondary);
	font-size: 0.875rem;
	padding-left: 0.25rem;
}

/* Return details dialog - match the blue order-lines header. */
.return-lines-grid .rz-grid-table thead th {
	background: var(--rz-primary);
	color: var(--rz-on-primary, #fff);
}

.return-lines-grid .rz-grid-table thead th .rz-column-title {
	color: inherit;
}

.order-form-bottom-row,
.return-form-bottom-row {
	align-items: stretch !important;
}

.order-form-bottom-left,
.order-form-bottom-right,
.return-form-bottom-left,
.return-form-bottom-right {
	display: flex !important;
}

.order-form-status-history-card,
.order-form-bottom-right-stack,
.return-form-status-history-card,
.return-form-bottom-right-stack {
	width: 100%;
	height: 100%;
}

.order-form-bottom-right-stack,
.return-form-bottom-right-stack {
	display: flex;
	flex-direction: column;
}

.order-form-track-trace-wrap,
.return-form-track-trace-wrap {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 0;
}

	.order-form-track-trace-wrap > .rz-card,
	.return-form-track-trace-wrap > .rz-card {
		flex: 1 1 auto;
		display: flex;
		flex-direction: column;
		margin-bottom: 0;
	}

/* WCAG 2.2 (1.4.3) � Radzen renders form/chart labels in the disabled color
   (#bdbdbd, ~1.9:1 on white). These labels are not disabled, so they must meet
   4.5:1. Point them at the secondary text color (#616161, ~5.9:1). */
.rz-form-field-label {
	color: var(--rz-text-secondary-color) !important;
}

/* Notification dropdown (#2266). The panel is a DOM descendant of .rz-header, so the
   blanket header rules above ("color: white !important" on every descendant, and
   transparent .rz-button) render its text invisible on the white panel. Inline styles
   cannot beat !important, so the panel opts out here with higher-specificity rules. */
.notification-dropdown {
	position: fixed;
	top: 60px;
	right: 10px;
	width: 360px;
	max-height: 460px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: var(--rz-base-background-color);
	border: 1px solid var(--rz-border-disabled-color);
	border-radius: var(--rz-border-radius);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
	z-index: 9999;
}

/* Sticky top row keeps "Mark all read" visible while the list scrolls. Deliberately
   named "-bar" and not "-header": the [class*="header"] rule above matches any class
   containing that substring and would paint this row primary blue. */
.notification-dropdown-bar {
	flex: 0 0 auto;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	background: var(--rz-base-background-color);
	border-bottom: 1px solid var(--rz-border-disabled-color);
}

.notification-dropdown-body {
	flex: 1 1 auto;
	overflow-y: auto;
}

.notification-dropdown-footer {
	flex: 0 0 auto;
	padding: 0.5rem;
	text-align: center;
	background: var(--rz-base-background-color);
	border-top: 1px solid var(--rz-border-disabled-color);
}

.notification-dropdown-empty {
	padding: 1.5rem;
	text-align: center;
}

/* Unread rows: light tint + left accent instead of a solid primary fill, so the
   title/message/date keep 4.5:1 against the background. */
.notification-dropdown-item {
	padding: 0.75rem 1rem;
	border-bottom: 1px solid var(--rz-border-disabled-color);
	border-left: 3px solid var(--md-sys-color-primary);
	background: #eaf1fa;
	cursor: pointer;
}

	.notification-dropdown-item:hover,
	.notification-dropdown-item:focus-visible {
		background: #dbe7f6;
	}

.notification-dropdown-item-title {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 13px;
}

.notification-dropdown-item-message {
	font-size: 12px;
	margin-top: 2px;
}

.notification-dropdown-item-date {
	font-size: 11px;
	margin-top: 3px;
}

.notification-dropdown .notification-severity-alert,
.notification-dropdown .notification-severity-warning,
.notification-dropdown .notification-severity-info {
	font-size: 16px;
}

/* Colour overrides: these must out-specify ".rz-header *" and ".rz-header .rz-button"
   above, which force white text and a transparent button on every header descendant. */
.rz-header .notification-dropdown,
.rz-header .notification-dropdown *,
.rz-header .notification-dropdown *:hover,
.rz-header .notification-dropdown *:focus,
[style*="grid-area: rz-header"] .notification-dropdown,
[style*="grid-area: rz-header"] .notification-dropdown * {
	color: var(--rz-text-color) !important;
}

.rz-header .notification-dropdown,
.rz-header .notification-dropdown .notification-dropdown-bar,
.rz-header .notification-dropdown .notification-dropdown-footer,
[style*="grid-area: rz-header"] .notification-dropdown .notification-dropdown-bar {
	background-color: var(--rz-base-background-color) !important;
}

.rz-header .notification-dropdown .notification-dropdown-empty,
.rz-header .notification-dropdown .notification-dropdown-item-message,
.rz-header .notification-dropdown .notification-dropdown-item-date {
	color: var(--rz-text-secondary-color) !important;
}

.rz-header .notification-dropdown .notification-severity-alert {
	color: var(--rz-danger) !important;
}

.rz-header .notification-dropdown .notification-severity-warning {
	color: var(--rz-warning-dark, #8a5300) !important;
}

.rz-header .notification-dropdown .notification-severity-info {
	color: var(--md-sys-color-primary) !important;
}

.rz-header .notification-dropdown .notification-dropdown-markall,
[style*="grid-area: rz-header"] .notification-dropdown .notification-dropdown-markall {
	background-color: var(--md-sys-color-primary) !important;
	border: none !important;
}

	.rz-header .notification-dropdown .notification-dropdown-markall:hover,
	.rz-header .notification-dropdown .notification-dropdown-markall:focus {
		background-color: var(--md-sys-color-on-primary-container, #003064) !important;
	}

	.rz-header .notification-dropdown .notification-dropdown-markall,
	.rz-header .notification-dropdown .notification-dropdown-markall *,
	.rz-header .notification-dropdown .notification-dropdown-markall:hover *,
	.rz-header .notification-dropdown .notification-dropdown-markall .rz-button-text,
	.rz-header .notification-dropdown .notification-dropdown-markall .rzi {
		color: #fff !important;
	}

.rz-header .notification-dropdown .notification-dropdown-viewall,
.rz-header .notification-dropdown .notification-dropdown-viewall:hover,
[style*="grid-area: rz-header"] .notification-dropdown .notification-dropdown-viewall {
	color: var(--md-sys-color-primary) !important;
	text-decoration: underline;
}

.closup-admin-scope-list {
	max-height: 8rem;
	overflow-y: auto;
	border: 1px solid var(--rz-input-border-color, rgba(0, 0, 0, 0.24));
	border-radius: var(--rz-border-radius, 4px);
	padding: 0.5rem;
}

	.closup-admin-scope-list .rz-checkbox-list-item {
		padding: 0.25rem 0;
	}

/* Role/user tree rendered with grid-like aligned columns. Nesting indents the row's
   start edge only, so the fixed-width trailing columns line up at every depth. */
.closup-tree-grid-header {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.5rem;
	border-bottom: 1px solid var(--rz-base-300, rgba(0, 0, 0, 0.12));
	color: var(--rz-text-secondary-color);
	font-weight: 600;
}

.closup-tree-grid .rz-tree {
	display: block;
	width: 100%;
	overflow: visible;
	border: none;
	padding: 0;
}

	.closup-tree-grid .rz-treenode-content {
		width: 100%;
		margin-inline: 0;
		border-bottom: 1px solid var(--rz-base-200, rgba(0, 0, 0, 0.06));
	}

	.closup-tree-grid .rz-treenode-content > .rz-treenode-label {
		flex: 1 1 auto;
		min-width: 0;
		padding: 0.5rem;
	}

.closup-tree-grid-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	width: 100%;
}

.closup-tree-grid-col-main {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.closup-tree-grid-col-count {
	flex: 0 0 5rem;
	display: flex;
	justify-content: center;
}

.closup-tree-grid-col-status {
	flex: 0 0 11rem;
	display: flex;
	justify-content: center;
}

.closup-tree-grid-col-actions {
	flex: 0 0 8rem;
	display: flex;
	justify-content: flex-end;
	gap: 0.5rem;
}