/* =========================================
     Design System
========================================= */
:root {
	--bg: #f4f7fb;
	--sidebar: #0c1531;
	--sidebar-accent: #0f1a3f;
	--sidebar-text: #c9d4ff;
	--primary: #246bff;
	--primary-600: #1e57d8;
	--primary-50: #ecf1ff;
	--success: #2db96e;
	--warning: #f5a524;
	--danger: #ff5c5c;
	--muted: #7180a3;
	/* darker shades that carry white text at 4.5:1 */
	--success-700: #1b7a47;
	--warning-700: #b45309;
	--danger-700: #c0392b;
	--muted-700: #475569;
	--info-700: #0e7490;
	/* ink (text) scale */
	--ink-900: #0f172a;
	--ink-800: #1e293b;
	--ink-700: #334155;
	--ink-600: #475569;
	--ink-500: #64748b;
	--card: #fff;
	--surface-2: #f8fafc;
	--surface-3: #f1f5f9;
	--stroke: #e7ecf5;
	--line-strong: #cbd5e1;
	--radius: 14px;
	--radius-sm: 10px;
	--shadow: 0 8px 24px rgba(15,23,42,.08);
	--shadow-primary: 0 6px 16px rgba(36, 107, 255, .25);
	--font: ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Apple Color Emoji","Segoe UI Emoji";
	--font-mono: ui-monospace,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
	--input-h: 28px;
	--control-h: 34px;
	--control-radius: 6px;
	--control-font-size: 13px;
	--control-font-size-sm: 12px;
	--control-border: #cbd5e1;
	--control-focus-shadow: 0 0 0 3px rgba(36, 107, 255, .18);
	--line: #e2e8f0;
	/* text-on-tint shades (lighten in dark; the *-700 solids stay fixed so white text keeps contrast) */
	--primary-text: #1e57d8;
	--success-text: #1b7a47;
	--warning-text: #b45309;
	--danger-text: #c0392b;
	--muted-text: #475569;
	--info-text: #0e7490;
	--info: #35b8e0;
	/* soft tints */
	--success-50: #e6f4ec;
	--warning-50: #fff4e5;
	--danger-50: #fdecea;
	--muted-50: #f1f5f9;
	/* sidebar (dark in both themes) */
	--sidebar-hover: rgba(255, 255, 255, .08);
	--sidebar-text-dim: rgba(201, 212, 255, .6);
	/* controls */
	--control-bg: #fff;
	--control-text: #1e293b;
	--control-disabled-bg: #edf1f7;
	--control-disabled-text: #64748b;
	--switch-track: #cbd5e1;
	--tooltip-bg: #0f172a;
	--tooltip-text: #fff;
	/* categorical chart palette + chart chrome */
	--chart-1: #246bff;
	--chart-2: #14b8a6;
	--chart-3: #f5a524;
	--chart-4: #ff5c5c;
	--chart-5: #8b5cf6;
	--chart-6: #7180a3;
	--chart-7: #2db96e;
	--chart-8: #0ea5e9;
	--chart-grid: #e7ecf5;
	--chart-text: #64748b;
	color-scheme: light;
	/* widths */
	--sidebar-w: 240px;
	--sidebar-collapsed-w: 64px;
}

/* Dark theme. Three states: no attribute follows the OS, data-theme="light"/"dark" on <html> wins either way.
   Set by the pre-paint guard in _Layout.cshtml / _LoginLayout.cshtml from localStorage "tms-theme". */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		color-scheme: dark;
		--bg: #0b1220;
		--card: #111a2c;
		--surface-2: #172136;
		--surface-3: #1b2537;
		--ink-900: #eef2f8;
		--ink-800: #dbe3ee;
		--ink-700: #c7d0de;
		--ink-600: #a6b1c3;
		--ink-500: #8290a6;
		--line: #243043;
		--stroke: #243043;
		--line-strong: #334259;
		--sidebar: #060b18;
		--sidebar-accent: #0f1a33;
		--primary-50: #17284a;
		--success-50: #12301f;
		--warning-50: #3a2609;
		--danger-50: #3a1714;
		--muted-50: #1b2537;
		--primary-text: #7ea4ff;
		--success-text: #5dc48a;
		--warning-text: #f0a24a;
		--danger-text: #f07a6c;
		--muted-text: #a6b1c3;
		--info-text: #5cc8ea;
		--muted-700: #4b5a75;
		--shadow: 0 8px 24px rgba(0, 0, 0, .35);
		--shadow-primary: 0 6px 16px rgba(36, 107, 255, .35);
		--control-bg: #0c1424;
		--control-text: #e2e8f0;
		--control-border: #334259;
		--control-disabled-bg: #172136;
		--control-disabled-text: #8290a6;
		--control-focus-shadow: 0 0 0 3px rgba(126, 164, 255, .28);
		--switch-track: #334259;
		--tooltip-bg: #eef2f8;
		--tooltip-text: #0b1220;
		--chart-1: #5b8dff;
		--chart-2: #2dd4bf;
		--chart-3: #fbbf5e;
		--chart-4: #ff7b7b;
		--chart-5: #a78bfa;
		--chart-6: #8290a6;
		--chart-7: #4ade80;
		--chart-8: #38bdf8;
		--chart-grid: #243043;
		--chart-text: #8290a6;
		/* FullCalendar (its own :root defaults lose to these attribute-qualified selectors) */
		--fc-page-bg-color: #111a2c;
		--fc-neutral-bg-color: #172136;
		--fc-neutral-text-color: #8290a6;
		--fc-border-color: #243043;
		--fc-today-bg-color: rgba(36, 107, 255, .14);
		--fc-highlight-color: rgba(36, 107, 255, .2);
		--fc-non-business-color: rgba(255, 255, 255, .03);
		--fc-button-bg-color: #1b2537;
		--fc-button-border-color: #334259;
		--fc-button-text-color: #c7d0de;
		--fc-button-hover-bg-color: #243043;
		--fc-button-hover-border-color: #334259;
		--fc-button-active-bg-color: #246bff;
		--fc-button-active-border-color: #246bff;
		--fc-list-event-hover-bg-color: #1b2537;
		--fc-more-link-bg-color: #1b2537;
		--fc-more-link-text-color: #c7d0de;
		--fc-now-indicator-color: #ff7b7b;
	}
}

:root[data-theme="dark"] {
	color-scheme: dark;
	--bg: #0b1220;
	--card: #111a2c;
	--surface-2: #172136;
	--surface-3: #1b2537;
	--ink-900: #eef2f8;
	--ink-800: #dbe3ee;
	--ink-700: #c7d0de;
	--ink-600: #a6b1c3;
	--ink-500: #8290a6;
	--line: #243043;
	--stroke: #243043;
	--line-strong: #334259;
	--sidebar: #060b18;
	--sidebar-accent: #0f1a33;
	--primary-50: #17284a;
	--success-50: #12301f;
	--warning-50: #3a2609;
	--danger-50: #3a1714;
	--muted-50: #1b2537;
	--primary-text: #7ea4ff;
	--success-text: #5dc48a;
	--warning-text: #f0a24a;
	--danger-text: #f07a6c;
	--muted-text: #a6b1c3;
	--info-text: #5cc8ea;
	--muted-700: #4b5a75;
	--shadow: 0 8px 24px rgba(0, 0, 0, .35);
	--shadow-primary: 0 6px 16px rgba(36, 107, 255, .35);
	--control-bg: #0c1424;
	--control-text: #e2e8f0;
	--control-border: #334259;
	--control-disabled-bg: #172136;
	--control-disabled-text: #8290a6;
	--control-focus-shadow: 0 0 0 3px rgba(126, 164, 255, .28);
	--switch-track: #334259;
	--tooltip-bg: #eef2f8;
	--tooltip-text: #0b1220;
	--chart-1: #5b8dff;
	--chart-2: #2dd4bf;
	--chart-3: #fbbf5e;
	--chart-4: #ff7b7b;
	--chart-5: #a78bfa;
	--chart-6: #8290a6;
	--chart-7: #4ade80;
	--chart-8: #38bdf8;
	--chart-grid: #243043;
	--chart-text: #8290a6;
	/* FullCalendar (its own :root defaults lose to these attribute-qualified selectors) */
	--fc-page-bg-color: #111a2c;
	--fc-neutral-bg-color: #172136;
	--fc-neutral-text-color: #8290a6;
	--fc-border-color: #243043;
	--fc-today-bg-color: rgba(36, 107, 255, .14);
	--fc-highlight-color: rgba(36, 107, 255, .2);
	--fc-non-business-color: rgba(255, 255, 255, .03);
	--fc-button-bg-color: #1b2537;
	--fc-button-border-color: #334259;
	--fc-button-text-color: #c7d0de;
	--fc-button-hover-bg-color: #243043;
	--fc-button-hover-border-color: #334259;
	--fc-button-active-bg-color: #246bff;
	--fc-button-active-border-color: #246bff;
	--fc-list-event-hover-bg-color: #1b2537;
	--fc-more-link-bg-color: #1b2537;
	--fc-more-link-text-color: #c7d0de;
	--fc-now-indicator-color: #ff7b7b;
}

/* =========================================
     Base
========================================= */
html, body {
	height: 100%;
}

body {
	font-family: var(--font);
	background: var(--bg);
	color: var(--ink-900);
	line-height: 1.45;
	border-top: 0;
}

/* Greeva hard-codes a{color:#188ae2} / a:hover{color:#11609d}; neither is a token, so links
   kept the light-theme blue on the dark card. Route them through the theme's link colour. */
a {
	color: var(--primary-text);
}

a:hover,
a:focus {
	color: var(--primary-text);
}

.page-title-alt-bg {
	display: none !important;
}

.material-icons.md-12,
.material-symbols-outlined.md-12 {
	display: inline-block;
	font-size: 12px;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

.material-icons.md-24,
.material-symbols-outlined.md-24 {
	display: inline-block;
	font-size: 24px;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* =========================================
     Layout: Sidebar + Wrapper
========================================= */
#topnav {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: 240px;
	background: var(--sidebar);
	box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
	z-index: 1000;
}

.navbar-custom {
	height: 100%;
	background: transparent !important;
	padding: 20px 14px 16px;
}

#topnav .container-fluid {
	padding: 0;
	height: 100%;
}

#topnav-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.wrapper {
	margin-left: 240px;
	padding: 0.75rem;
}

	.wrapper > .container-fluid {
		padding-left: 0;
		padding-right: 0;
	}

.footer {
	border-top: 0;
	background: transparent;
	color: var(--muted-text);
	position: static;
	margin-left: 240px;
}

/* =========================================
     Branding / Logo
========================================= */
#topnav .logo {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	color: #fff;
	text-decoration: none;
	width: 100%;
}

	#topnav .logo img {
		height: 28px;
	}

#topnav .list-inline.menu-left {
	display: flex;
	justify-content: center;
	width: 100%;
}

	#topnav .list-inline.menu-left .float-start {
		float: none;
		display: flex;
		justify-content: center;
		width: 100%;
	}

#topnav .logo .logo-lg {
	display: flex;
}
/* first nav item icon alignment tweak */
#topnav .navigation-menu > li:first-of-type > a {
	padding-left: 10px;
}

/* =========================================
     Navigation
========================================= */
#topnav .navigation-menu > li.last-elements .submenu {
	left: 200px;
	right: 0;
}

#navigation {
	margin-top: 22px;
	flex: 1;
	overflow: auto;
}

	#navigation .navigation-menu {
		display: flex;
		flex-direction: column;
		gap: 6px;
		padding: 0;
		margin: 0;
	}

		#navigation .navigation-menu > li {
			list-style: none;
			position: relative;
			padding-right: 4px;
		}

			/* larger hover hit-area */
			#navigation .navigation-menu > li > a {
				justify-content: flex-start;
				display: flex;
				align-items: center;
				gap: 10px;
				padding: 10px 12px;
				border-radius: 10px;
				color: var(--sidebar-text);
				text-decoration: none;
				font-weight: 600;
				transition: all .2s ease;
			}

		#navigation .navigation-menu .material-icons {
			font-size: 20px;
			opacity: .9;
		}

		#navigation .navigation-menu > li:hover > a {
			background: var(--sidebar-accent);
			color: #fff;
		}

		#navigation .navigation-menu > li.active > a {
			background: linear-gradient(180deg,var(--primary),var(--primary-600));
			color: #fff;
			box-shadow: 0 6px 16px rgba(36,107,255,.35);
		}

		/* Fly-out submenu (desktop, left) */
		#navigation .navigation-menu > li > .submenu {
			position: absolute;
			top: 4px;
			left: 200px;
			min-width: 220px;
			background: var(--sidebar-accent);
			border-radius: 10px;
			padding: 8px;
			box-shadow: 0 12px 28px rgba(15,23,42,.45);
			opacity: 0;
			visibility: hidden;
			transform: translateY(4px);
			transition: opacity .15s ease,transform .15s ease,visibility 0s linear .15s;
			z-index: 4000;
			display: block !important;
			pointer-events: auto;
			max-height: calc(100vh - 32px);
			overflow: auto;
		}

		#navigation .navigation-menu > li:hover > .submenu,
		#navigation .navigation-menu > li:focus-within > .submenu {
			opacity: 1;
			visibility: visible;
			transform: translateY(0);
			transition-delay: 0s;
		}

	#navigation .submenu {
		list-style: none;
		margin: 0;
		padding: 0;
	}

		#navigation .submenu li {
			list-style: none;
		}

		#navigation .submenu a {
			display: block;
			padding: 8px 12px;
			color: var(--sidebar-text);
			text-decoration: none;
			border-radius: 6px;
			white-space: nowrap;
		}

			#navigation .submenu a:hover {
				background: rgba(255,255,255,.06);
				color: #fff;
			}

#topnav, #topnav-inner, #navigation, .navbar-custom {
	overflow: visible !important;
}

	#topnav .navigation-menu > li .submenu:before {
		display: none;
	}

	#topnav .navigation-menu > li .submenu li a {
		color: #ffffff;
	}

	#navigation .navigation-menu > li:focus-within:not(:hover) > .submenu {
		opacity: 0;
		visibility: hidden;
		transform: translateY(4px);
		transition-delay: .15s;
		pointer-events: none;
	}

/* Bottom utilities inside sidebar */
.topbar-right-menu {
	position: absolute;
	bottom: 16px;
	left: 14px;
	right: 14px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	color: #c7d2fe;
}

	.topbar-right-menu .nav-user, .topbar-right-menu .dropdown-toggle {
		color: #dbe3ff;
	}

	.topbar-right-menu .btn {
		border-radius: 999px;
	}

/* =========================================
     Page Heading
========================================= */
.page-title {
	font-size: 22px;
	font-weight: 700;
	color: var(--ink-900);
}

/* =========================================
     Cards / Surfaces
========================================= */
.card-box {
	background: var(--card);
	border-radius: var(--radius);
	border: 1px solid var(--stroke);
	box-shadow: var(--shadow);
	padding: 18px;
}

.section-title {
	margin: 0 0 12px;
	color: var(--ink-900);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

/* Section headings (h4) are 18px; the Greeva base shrinks them to 1.00625rem inside cards. */
.card-box .header-title {
	font-size: 18px;
}

/* =========================================
     Filters / Inputs
========================================= */
/* Native Bootstrap 4 controls and newer Bootstrap 5 form-select callers share
   the same theme. The bundled legacy base does not define form-select. */
.form-control,
.form-select,
.custom-select {
	border: 1px solid var(--control-border);
	border-radius: var(--control-radius);
	background-color: var(--control-bg);
	color: var(--control-text);
	font-size: var(--control-font-size);
	line-height: 1.5;
	padding: 6px 10px;
}

input.form-control,
select.form-control,
select.form-control:not([size]):not([multiple]),
.form-select,
.custom-select {
	height: var(--control-h);
}

.form-select,
select.form-control:not([multiple]):not([size]),
.custom-select {
	display: block;
	width: 100%;
	padding-right: 30px;
	appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23475569' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
	background-position: right 8px center;
	background-repeat: no-repeat;
	background-size: 16px 16px;
}

select[multiple].form-control,
select[multiple].form-select,
select[size].form-control,
select[size].form-select {
	height: auto;
	background-image: none;
}

.form-control-sm,
select.form-control-sm:not([size]):not([multiple]),
.form-select-sm,
.custom-select-sm,
.input-group-sm > .form-control,
.input-group-sm > .input-group-append > .input-group-text,
.input-group-sm > .input-group-prepend > .input-group-text {
	min-height: var(--input-h);
	padding-top: 3px;
	padding-bottom: 3px;
	font-size: var(--control-font-size-sm);
	border-radius: var(--control-radius);
}

input.form-control-sm,
select.form-control-sm,
select.form-control-sm:not([size]):not([multiple]),
.form-select-sm,
.custom-select-sm,
.input-group-sm > input.form-control,
.input-group-sm > select.form-control,
.input-group-sm > select.form-control:not([size]):not([multiple]) {
	height: var(--input-h);
}

.form-control-lg,
select.form-control-lg:not([size]):not([multiple]),
.form-select-lg {
	height: 42px;
	padding-top: 8px;
	padding-bottom: 8px;
	font-size: 16px;
}

.form-control:focus,
.form-select:focus,
.custom-select:focus {
	color: var(--control-text);
	background-color: var(--control-bg);
	border-color: var(--primary);
	outline: 0;
	box-shadow: var(--control-focus-shadow);
}

.form-control:disabled,
.form-control[readonly],
.form-select:disabled,
.custom-select:disabled {
	background-color: var(--control-disabled-bg);
	color: var(--control-disabled-text);
	opacity: 1;
}

.form-control.is-invalid,
.form-select.is-invalid,
.custom-select.is-invalid {
	border-color: var(--danger-text);
}

.form-control.is-invalid:focus,
.form-select.is-invalid:focus,
.custom-select.is-invalid:focus {
	box-shadow: 0 0 0 3px rgba(255, 92, 92, .25);
}

/* Bootstrap's fixed #dc3545 is too dim on the dark surface; match the invalid border. */
.invalid-feedback {
	color: var(--danger-text);
}

.input-group-text {
	border-color: var(--control-border);
	border-radius: var(--control-radius);
	font-size: var(--control-font-size);
}

/* ReactSelect uses the compact size shared by filter inputs and date pickers.
   Compound selectors beat the vendor defaults without suppressing control states. */
.react-select {
	display: block;
	min-width: 0;
	width: 100%;
	vertical-align: middle;
}

.react-select .react-select__control {
	min-height: var(--input-h);
	border: 1px solid var(--control-border);
	border-radius: var(--control-radius);
	background-color: var(--control-bg);
	box-shadow: none;
}

.react-select .react-select__control:hover {
	border-color: var(--muted);
}

.react-select .react-select__value-container {
	padding: 2px 6px;
	font-size: var(--control-font-size-sm);
}

.react-select .react-select__input-container {
	margin: 0;
	padding: 0;
}

.react-select .react-select__indicator {
	padding: 4px;
	color: var(--ink-600);
}

.react-select .react-select__indicator svg {
	width: 16px;
	height: 16px;
}

.react-select .react-select__clear-indicator {
	cursor: pointer;
}

.react-select .react-select__control--is-focused,
.react-select .react-select__control--is-focused:hover {
	border-color: var(--primary);
	box-shadow: var(--control-focus-shadow);
}

.react-select .react-select__control--is-disabled {
	background-color: var(--control-disabled-bg);
	border-color: var(--control-border);
}

.react-select .react-select__control--is-disabled .react-select__single-value {
	color: var(--control-disabled-text);
}

.react-select.is-invalid .react-select__control {
	border-color: var(--danger-text);
}

.react-select.is-invalid .react-select__control--is-focused {
	box-shadow: 0 0 0 3px rgba(255, 92, 92, .25);
}

.react-select .react-select__option {
	text-align: left;
}

.form-group {
	margin-bottom: 1rem;
	display: flex;
	flex-direction: column;
}

/* Only explicit switches hide the native checkbox. Ordinary checkboxes retain
   their browser appearance and keyboard focus. */
.form-check.form-switch {
	padding-left: 2.5rem;
	position: relative;
}

.form-switch .form-check-input {
	position: absolute;
	left: 0;
	z-index: 1;
	width: 2rem;
	height: 1.25rem;
	opacity: 0;
	margin-left: 0;
}

.form-switch .form-check-label {
	position: relative;
	margin-bottom: 0;
	cursor: pointer;
	padding-left: 0.5rem;
}

	.form-switch .form-check-label::before {
		position: absolute;
		left: -2.5rem;
		top: 0.125rem;
		width: 2rem;
		height: 1.125rem;
		content: "";
		background-color: var(--switch-track);
		border-radius: 999px;
		transition: background-color 0.15s ease-in-out;
	}

	.form-switch .form-check-label::after {
		position: absolute;
		left: -2.5rem;
		top: 0.25rem;
		width: 0.875rem;
		height: 0.875rem;
		content: "";
		background-color: white;
		border-radius: 50%;
		transition: transform 0.15s ease-in-out;
		transform: translateX(0.125rem);
	}

.form-switch .form-check-input:checked ~ .form-check-label::before {
	background-color: var(--primary);
}

.form-switch .form-check-input:checked ~ .form-check-label::after {
	transform: translateX(1rem);
}

.form-switch .form-check-input:focus-visible ~ .form-check-label::before {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.form-switch .form-check-input:disabled ~ .form-check-label {
	opacity: .6;
	cursor: default;
}

/* =========================================
     Tables / Data
========================================= */
.table {
	background: var(--card);
	border: 1px solid var(--stroke) !important;
	border-radius: var(--radius-sm);
	overflow: hidden;
	width: 100% !important;
}

	.table thead {
		width: 100% !important;
	}

		.table thead tr {
			background: var(--surface-2);
		}

		.table thead th,
		.table-sm thead th {
			background: var(--surface-2);
			border-bottom: 1px solid var(--stroke);
			color: var(--ink-700);
			font-size: 11px;
			text-transform: uppercase;
			letter-spacing: .03em;
			font-weight: 600;
			padding: .25rem .5rem;
			line-height: 1.3;
		}

		.table thead input.form-control,
		.table thead input.form-control-sm,
		.table thead select.form-control,
		.table thead select.form-control-sm {
			height: var(--input-h);
			padding: 3px 6px;
			font-size: var(--control-font-size-sm);
			border-radius: var(--control-radius);
		}

		/* column filters: ghost inputs that only assert themselves on focus.
		   `#master-page *` zeroes min-width with id specificity, so the width floor needs the same prefix. */
		.table thead input.grid-filter-input,
		.table thead select.grid-filter-input,
		#master-page .table thead .grid-filter-input {
			background: var(--card);
			border-color: var(--stroke);
			box-shadow: none;
			min-width: 6em;
		}

		#master-page .table thead select.grid-filter-select {
			min-width: 7.5em;
			padding-right: 22px;
			color: var(--ink-700);
		}

			.table thead input.grid-filter-input::placeholder {
				color: var(--ink-500);
			}

			.table thead input.grid-filter-input:focus,
			.table thead select.grid-filter-input:focus {
				border-color: var(--primary);
				box-shadow: var(--control-focus-shadow);
			}

		.table thead .checkbox label {
			top: 2px;
		}

	.table td, .table th,
	.table-sm td, .table-sm th {
		padding: 10px 8px;
		border-top: 1px solid var(--stroke);
		vertical-align: middle !important;
	}

	/* 40px data rows: one hairline per row, alternating stripes, then hover and selection tints. */
	.table tbody tr {
		background-color: var(--card);
	}

	.table tbody tr:nth-child(odd) {
		background-color: var(--bg);
	}

	.table.dataTable tbody > tr > td {
		height: 40px;
	}

	.table.dataTable tbody > tr.grid-empty-row > td {
		height: auto;
		padding: 28px 16px;
		color: var(--ink-500);
		text-align: left;
	}

	.table.dataTable tbody > tr.grid-empty-row:hover,
	.table.dataTable tbody > tr.grid-empty-row:hover > td {
		background-color: transparent;
	}

	.grid-empty-state {
		position: sticky;
		left: 16px;
		display: inline-flex;
		align-items: center;
		flex-wrap: wrap;
		gap: 12px;
	}

	/* numbers line up on the right in tabular figures */
	.table td.text-right,
	.table th.text-right {
		font-variant-numeric: tabular-nums;
	}

	.table tbody td.text-right {
		font-family: var(--font-mono);
		font-size: 12px;
	}

	/* pinned columns keep their row background while the rest scrolls
	   (the thead selectors outrank DataTables' `table.dataTable thead .sorting { position: relative }`) */
	.table .grid-col-sticky-start,
	.table .grid-col-sticky-end,
	.table thead > tr > th.grid-col-sticky-start,
	.table thead > tr > th.grid-col-sticky-end {
		position: sticky;
		z-index: 1;
		background: inherit;
	}

	.table .grid-col-sticky-start {
		left: 0;
	}

	.table .grid-col-sticky-end {
		right: 0;
	}

	/* collapsed-border tables drop cell box-shadows, so the overlay edge is a pseudo-element;
	   the thead selectors reclaim ::after from DataTables' descending sort arrow.
	   The edge stays invisible until Grid marks the scroll container (.is-scrolled-start / -end),
	   so a table that fits its container shows no phantom shadow. */
	.table .grid-col-sticky-start::after,
	.table .grid-col-sticky-end::after,
	.table.dataTable thead > tr > th.grid-col-sticky-start::after,
	.table.dataTable thead > tr > th.grid-col-sticky-end::after {
		content: "";
		display: block;
		position: absolute;
		top: 0;
		bottom: 0;
		width: 10px;
		opacity: 0;
		pointer-events: none;
		transition: opacity .15s ease;
	}

	.grid-scroll.is-scrolled-start .table .grid-col-sticky-start::after,
	.grid-scroll.is-scrolled-start .table.dataTable thead > tr > th.grid-col-sticky-start::after,
	.grid-scroll.is-scrolled-end .table .grid-col-sticky-end::after,
	.grid-scroll.is-scrolled-end .table.dataTable thead > tr > th.grid-col-sticky-end::after {
		opacity: 1;
	}

	/* the select column pins first; the next pinned column sits to its right and owns the edge
	   (#master-page prefix: DashboardStyles.css resets min-width on every descendant with id specificity) */
	#master-page .table .grid-select-cell,
	.table .grid-select-cell {
		width: 36px;
		min-width: 36px;
		max-width: 36px;
		padding-left: 8px;
		padding-right: 8px;
	}

	.table .grid-select-cell + .grid-col-sticky-start {
		left: 36px;
	}

	.table .grid-select-cell:has(+ .grid-col-sticky-start)::after {
		display: none;
	}

	.table .grid-col-sticky-start::after,
	.table.dataTable thead > tr > th.grid-col-sticky-start::after {
		left: auto;
		right: -10px;
		background: linear-gradient(to right, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0));
	}

	.table .grid-col-sticky-end::after,
	.table.dataTable thead > tr > th.grid-col-sticky-end::after {
		right: auto;
		left: -10px;
		background: linear-gradient(to left, rgba(0, 0, 0, .15), rgba(0, 0, 0, 0));
	}

	/* sticky sortable headers show the descending arrow on ::before instead */
	.table.dataTable thead > tr > th.grid-col-sticky-start.sorting_desc::before,
	.table.dataTable thead > tr > th.grid-col-sticky-end.sorting_desc::before {
		content: "\2193";
		opacity: 1;
		color: var(--primary-text);
	}

	.table thead > tr > .grid-col-sticky-start,
	.table thead > tr > .grid-col-sticky-end {
		z-index: 2;
	}

	.table-bordered,
	.table-bordered td,
	.table-bordered th {
		border-color: var(--stroke);
	}

/* Greeva paints .table-hover rows with white at 7.5% alpha, which is invisible on a white card;
   the compound selector outranks it so the tint actually shows */
.table.table-hover tbody > tr:hover {
	background-color: var(--primary-50);
}

.table tbody tr.table-primary,
.table.table-hover tbody tr.table-primary:hover,
.table tbody tr.table-primary > td {
	background-color: var(--primary-50);
}
/* ── Bootstrap 5 text-bg-* badge utilities (missing from BS4 app.min.css) ── */
.text-bg-primary {
	background-color: var(--primary) !important;
	color: #fff !important
}

.text-bg-secondary {
	background-color: var(--muted-700) !important;
	color: #fff !important
}

.text-bg-success {
	background-color: var(--success-700) !important;
	color: #fff !important
}

.text-bg-danger {
	background-color: var(--danger-700) !important;
	color: #fff !important
}

.text-bg-warning {
	background-color: var(--warning-700) !important;
	color: #fff !important
}

.text-bg-info {
	background-color: var(--info-700) !important;
	color: #fff !important
}

.text-bg-light {
	background-color: var(--surface-3) !important;
	color: var(--ink-900) !important
}

/* --ink-* flips to light shades in dark mode, so the label takes the card colour instead of white. */
.text-bg-dark {
	background-color: var(--ink-800) !important;
	color: var(--card) !important
}

/* Bootstrap 4 .bg-* fills are the old Greeva hues and leave the badge text inherited, which is
   light in dark mode. Prefer Tag; these cover the raw badges that remain. */
.badge.bg-success {
	background-color: var(--success-700) !important;
	color: #fff;
}

.badge.bg-danger {
	background-color: var(--danger-700) !important;
	color: #fff;
}

.badge.bg-secondary {
	background-color: var(--muted-700) !important;
	color: #fff;
}

/* DataTables: ensure sort icons from legacy-helpers.css remain visible */
.table.dataTable thead .sorting,
.table.dataTable thead .sorting_asc,
.table.dataTable thead .sorting_desc {
	/* both arrows sit at right: 0.5em and 1em (legacy-helpers.css), ~1.85em wide in total */
	padding-right: 2.25em;
}

	.table.dataTable thead .sorting_asc:before,
	.table.dataTable thead .sorting_desc:after {
		color: var(--primary-text);
	}
/* DataTables: natural column widths + horizontal scroll on last table */
.table.dataTable:last-of-type {
	display: table;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	table-layout: auto !important;
	width: max-content;
	min-width: 100%;
	border-collapse: separate;
}

	.table.dataTable:last-of-type th,
	.table.dataTable:last-of-type td {
		white-space: nowrap;
	}

	.table.dataTable:last-of-type colgroup col {
		width: auto !important;
	}
/* utility col width for medium screens */
@media (min-width: 768px) {
	.col-md-6 {
		-webkit-box-flex: 0;
		-ms-flex: 0 0 50%;
		flex: 0 0 50%;
		max-width: 100%;
	}
}

/* The override above loads after app.min.css, so it also beats .col-lg on "col-md-6 col-lg"
   columns: three filters took half the row each and squeezed the fourth to a few pixels. */
@media (min-width: 992px) {
	.col-md-6.col-lg {
		flex: 1 0 0%;
	}
}

/* =========================================
     Buttons
========================================= */
.btn {
	min-height: var(--control-h);
	border-radius: var(--control-radius);
	margin-left: 2px;
	margin-right: 2px;
	font-size: var(--control-font-size);
	font-weight: 600;
	text-transform: none;
}

.btn-group-sm > .btn, .btn-sm,
.input-group-sm > .btn,
.input-group-sm > .input-group-append > .btn,
.input-group-sm > .input-group-prepend > .btn {
	min-height: var(--input-h);
	padding: 3px 10px;
	font-size: var(--control-font-size-sm);
	line-height: 1.5;
}

.input-group > .btn {
	margin: 0;
}

.input-group > .btn:not(:first-child) {
	border-top-left-radius: 0;
	border-bottom-left-radius: 0;
}

.input-group > .react-select:not(:last-child) .react-select__control {
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.feedback-filters .mb-3 {
	margin-bottom: 0 !important;
}

.btn-sm .material-icons,
.btn-group-sm > .btn .material-icons {
	font-size: 16px;
}

.btn:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
}

.btn-primary {
	background: linear-gradient(180deg,var(--primary),var(--primary-600));
	border-color: transparent;
	box-shadow: var(--shadow-primary);
}

/* Filter rows: Bootstrap columns are a share of the content width, so on wide monitors a single
   date or select stretches to several hundred pixels. Cap each control at the width its content
   needs; phones and tablets keep the plain grid. The wide/date modifiers come after the generic
   rule because all three selectors share the same specificity. */
@media (min-width: 1200px) {
	.filters-row > [class*="col-"] {
		max-width: 360px;
	}

	.filters-row > .filters-row__date {
		max-width: 220px;
	}

	.filters-row > .filters-row__wide {
		max-width: 560px;
	}

	.filters-row > .col-md-auto {
		max-width: none;
	}
}

/* Bootstrap 5 spacing utilities that the app already writes but app.min.css (Bootstrap 4.1.1)
   never defined, so the elements they were meant to separate render touching.

   .row.g-* : the gutter classes on filter/form rows. Only the vertical part is restored, as
   row-gap, which flexbox applies between wrapped lines and never above the first or below the
   last line. Single-line rows on wide screens are therefore unchanged; stacked columns below the
   md breakpoint get the same separation as two consecutive rows. The values follow this theme's
   spacer (mb-3 = 24px), so a wrapped column reads like the next row.

   .gap-* : flex gaps on toolbars, button groups and inline badge rows. These keep Bootstrap 5's
   own scale, which is what the call sites were written against and what the design sheet already
   uses (.grid-toolbar gap: 8px, .grid-toolbar__count gap: 4px). */
.row.g-1 {
	row-gap: 6px;
}

.row.g-2 {
	row-gap: 12px;
}

.row.g-3 {
	row-gap: 24px;
}

.gap-1 {
	gap: 4px;
}

.gap-2 {
	gap: 8px;
}

.gap-3 {
	gap: 16px;
}

/* The rest of the Bootstrap 5 utilities the markup uses. Commit 7927fa75 renamed the Bootstrap 4
   classes (mr-*, pl-*, text-right, float-right, font-weight-bold …) to their Bootstrap 5 names, but
   app.min.css stayed on Bootstrap 4.1.1, so the renamed classes matched nothing. Only classes in
   current use are listed; values follow Bootstrap 5, as the gap-* rules above and .me-2 do. Prefer
   the Bootstrap 4 names (mr-*, text-right …) in new markup. */
.me-1 { margin-right: .25rem !important; }
.me-2 { margin-right: .5rem !important; }
.me-3 { margin-right: 1rem !important; }
.me-4 { margin-right: 1.5rem !important; }
.me-5 { margin-right: 3rem !important; }
.ms-0 { margin-left: 0 !important; }
.ms-1 { margin-left: .25rem !important; }
.ms-2 { margin-left: .5rem !important; }
.ms-3 { margin-left: 1rem !important; }
.ms-auto { margin-left: auto !important; }
.ps-1 { padding-left: .25rem !important; }
.ps-2 { padding-left: .5rem !important; }
.ps-3 { padding-left: 1rem !important; }
.pe-0 { padding-right: 0 !important; }
.pe-2 { padding-right: .5rem !important; }
.text-start { text-align: left !important; }
.text-end { text-align: right !important; }
.text-break { word-wrap: break-word !important; word-break: break-word !important; }
.text-decoration-none { text-decoration: none !important; }
.fw-bold { font-weight: 700 !important; }
.float-end { float: right !important; }
.d-grid { display: grid !important; }
.rounded-pill { border-radius: 999px !important; }
.overflow-auto { overflow: auto !important; }
.overflow-visible { overflow: visible !important; }
.top-50 { top: 50% !important; }
.bottom-0 { bottom: 0 !important; }
.start-0 { left: 0 !important; }
.end-0 { right: 0 !important; }
.translate-middle-y { transform: translateY(-50%) !important; }

/* Bootstrap 5 close button: the markup is an empty <button class="btn-close">, which Bootstrap 4
   never styled, so shared modals showed a blank control. Draw the × as text so it follows the
   theme ink, and keep it at the trailing end of flex headers whatever its DOM position. */
.btn-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-left: auto;
	padding: 0;
	order: 1;
	flex: 0 0 auto;
	font-size: 1.5rem;
	line-height: 1;
	color: var(--ink-600);
	background: transparent;
	border: 0;
	border-radius: var(--control-radius);
	cursor: pointer;
}

	.btn-close::before {
		content: "\00d7";
	}

	.btn-close:hover {
		color: var(--ink-900);
		background: var(--surface-3);
	}

	.btn-close:focus-visible {
		outline: 2px solid var(--primary);
		outline-offset: 2px;
	}

/* Secondary is one neutral outline (solid and outline classes look the same); success/danger sit on the 700 shades so white labels reach 4.5:1 */
.btn-secondary,
.btn-secondary:focus,
.btn-secondary.focus,
.btn-secondary.disabled,
.btn-secondary:disabled,
.btn-outline-secondary,
.btn-outline-secondary:focus,
.btn-outline-secondary.focus,
.btn-outline-secondary.disabled,
.btn-outline-secondary:disabled {
	background-color: var(--control-bg);
	border-color: var(--control-border);
	color: var(--ink-700);
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
	background-color: var(--surface-2);
	border-color: var(--control-border);
	color: var(--ink-700);
}

.btn-secondary:focus,
.btn-secondary.focus,
.btn-outline-secondary:focus,
.btn-outline-secondary.focus,
.btn-secondary:not(:disabled):not(.disabled):active:focus,
.btn-secondary:not(:disabled):not(.disabled).active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled):active:focus,
.btn-outline-secondary:not(:disabled):not(.disabled).active:focus {
	box-shadow: var(--control-focus-shadow);
}

/* pressed / selected: primary tint so toggle groups keep a visible state */
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-secondary:not(:disabled):not(.disabled).active,
.show > .btn-secondary.dropdown-toggle,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active,
.show > .btn-outline-secondary.dropdown-toggle {
	background-color: var(--primary-50);
	border-color: var(--primary);
	color: var(--primary-text);
}

.btn-success,
.btn-success:hover,
.btn-success:focus,
.btn-success.focus,
.btn-success.disabled,
.btn-success:disabled,
.btn-success:not(:disabled):not(.disabled):active,
.btn-success:not(:disabled):not(.disabled).active,
.show > .btn-success.dropdown-toggle {
	background-color: var(--success-700);
	border-color: var(--success);
	color: #fff;
}

.btn-danger,
.btn-danger:hover,
.btn-danger:focus,
.btn-danger.focus,
.btn-danger.disabled,
.btn-danger:disabled,
.btn-danger:not(:disabled):not(.disabled):active,
.btn-danger:not(:disabled):not(.disabled).active,
.show > .btn-danger.dropdown-toggle {
	background-color: var(--danger-700);
	border-color: var(--danger);
	color: #fff;
}

.btn-warning,
.btn-warning:hover,
.btn-warning:focus,
.btn-warning.focus,
.btn-warning.disabled,
.btn-warning:disabled,
.btn-warning:not(:disabled):not(.disabled):active,
.btn-warning:not(:disabled):not(.disabled).active,
.show > .btn-warning.dropdown-toggle {
	background-color: var(--warning-700);
	border-color: var(--warning);
	color: #fff;
}

.col-1 {
	max-width: 25%;
	padding: 8px;
}

/* Outline labels use the *-text shades: the base hues read under 3:1 on tinted alerts and on the
   dark surface. Hover fills use the primary and the 700 shades, like the solid buttons above
   (app.min.css would otherwise fill them with the old Greeva hues). */
.btn-outline-primary {
	border-color: var(--primary);
	color: var(--primary-text);
}

.btn-outline-success {
	border-color: var(--success-text);
	color: var(--success-text);
}

.btn-outline-danger {
	border-color: var(--danger-text);
	color: var(--danger-text);
}

.btn-outline-warning {
	border-color: var(--warning-text);
	color: var(--warning-text);
}

.btn-outline-primary:not(:disabled):not(.disabled):hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
	background-color: var(--primary);
	border-color: var(--primary);
	color: #fff;
}

.btn-outline-success:not(:disabled):not(.disabled):hover,
.btn-outline-success:not(:disabled):not(.disabled):active,
.btn-outline-success:not(:disabled):not(.disabled).active {
	background-color: var(--success-700);
	border-color: var(--success-700);
	color: #fff;
}

.btn-outline-danger:not(:disabled):not(.disabled):hover,
.btn-outline-danger:not(:disabled):not(.disabled):active,
.btn-outline-danger:not(:disabled):not(.disabled).active {
	background-color: var(--danger-700);
	border-color: var(--danger-700);
	color: #fff;
}

.btn-outline-warning:not(:disabled):not(.disabled):hover,
.btn-outline-warning:not(:disabled):not(.disabled):active,
.btn-outline-warning:not(:disabled):not(.disabled).active {
	background-color: var(--warning-700);
	border-color: var(--warning-700);
	color: #fff;
}

.thead-light th {
	background: var(--surface-2) !important;
}

/* =========================================
     Pagination
========================================= */
/* One pager for every list: compact square buttons, the active page in primary */
.pagination {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
}

.pagination .page-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 28px;
	height: 28px;
	padding: 0 8px;
	margin: 0;
	border-radius: var(--control-radius) !important;
	border: 1px solid var(--stroke);
	background: var(--card);
	color: var(--ink-700);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
}

.pagination .page-item.active .page-link {
	background: var(--primary);
	color: #fff;
	border-color: var(--primary);
}

.pagination .page-item:not(.disabled):not(.active) .page-link:hover {
	background: var(--surface-2);
	border-color: var(--line-strong);
	color: var(--ink-900);
}

.pagination .page-item.disabled .page-link {
	background: var(--surface-2);
	color: var(--ink-500);
}

.grid-page-range {
	font-size: 12px;
	color: var(--muted-text);
	white-space: nowrap;
}

/* One filter label: small caps-style eyebrow, no trailing colon */
.filter-label {
	display: block;
	margin-bottom: 4px;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--muted-text);
}

/* =========================================
     Queries
========================================= */

/* ——— XXL Desktops ——— */
@media (min-width:1950px) {
	.table.dataTable:last-of-type {
		width: 100% !important;
		display: table !important;
	}
}

/* ——— Tablets and down (≤1280px) ——— */
@media (max-width:1280px) {
	.wrapper {
		padding: 0.75rem;
	}
}

/* ========================================
     Mobile / Small Tablets (≤1024px)
======================================== */
@media (max-width:1024px) {

	/* --- Top bar --- */
	#topnav {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: 56px;
		width: 100%;
		background: #0C1531 !important;
		box-shadow: 0 1px 0 rgba(255,255,255,.06);
		z-index: 1000;
	}

	#topnav-inner {
		flex-direction: row;
		align-items: flex-start;
		justify-content: space-between;
		height: 56px;
		padding: 0 16px;
	}

	#topnav .logo .logo-sm {
		display: none !important;
	}

	#topnav .logo .logo-lg {
		display: flex;
	}

	#topnav .logo img {
		height: 28px;
	}

	/* Burger icon */
	.navbar-toggle,
	.menu-toggle,
	.button-menu-mobile {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: transparent;
		border: 0;
		padding: 0;
		margin: 0;
		position: relative;
		z-index: 1100;
	}

		.navbar-toggle .lines span {
			background: #fff !important;
		}
	/* white burger lines */

	/* Right side utilities */
	.topbar-right-menu {
		position: absolute;
		top: 0px;
		right: 12px;
		left: auto;
		bottom: auto;
		display: flex;
		align-items: center;
		gap: 8px;
		margin: 0;
		flex-direction: row;
	}

		.topbar-right-menu .nav-user,
		.topbar-right-menu .material-icons,
		.topbar-right-menu .btn:not(.dropdown-toggle) {
			display: none !important;
		}

	/* Content offset */
	.wrapper {
		margin-left: 0 !important;
		padding-top: 72px;
	}

	.footer {
		margin-left: 0 !important;
	}

	/* --- Fullscreen menu panel --- */
	#navigation {
		position: fixed;
		top: 55px;
		left: 0;
		right: 0;
		bottom: 0;
		background: #0C1531 !important;
		z-index: 1200;
		margin-top: 0px;
		overflow: auto;
		padding: 24px 0 40px;
		border: none;
	}

		#navigation .navigation-menu {
			width: 100%;
			max-width: 640px;
			margin: 0 auto;
			padding: 0 20px;
			display: flex;
			flex-direction: column;
			gap: 2px;
		}

			/* Top-level items */
			#navigation .navigation-menu > li {
				padding: 0 !important;
			}

				#navigation .navigation-menu > li > a {
					background: transparent !important;
					box-shadow: none !important;
					border-radius: 0 !important;
					padding: 12px 20px;
					gap: 12px;
					font-size: 16px;
					font-weight: 700;
					color: #fff !important;
					text-decoration: none;
				}

					#navigation .navigation-menu > li > a:hover {
						background: rgba(255,255,255,.1) !important;
						color: #fff !important;
					}

				#navigation .navigation-menu > li.active > a {
					background: rgba(255,255,255,.2) !important;
					color: #fff !important;
				}

				/* Submenus inline under parent */
				#navigation .navigation-menu > li > .submenu {
					position: static !important;
					display: block !important;
					opacity: 1 !important;
					visibility: visible !important;
					transform: none !important;
					background: transparent !important;
					box-shadow: none !important;
					padding: 0 0 0 45px !important;
					margin: 6px 0 0 !important;
					border-radius: 0 !important;
					min-width: 100% !important;
					max-height: none !important;
					pointer-events: auto;
				}

		#navigation .submenu {
			list-style: none;
			margin: 0;
			padding: 0;
		}

			#navigation .submenu li {
				text-align: left;
			}

			#navigation .submenu a {
				display: block;
				padding: 10px 20px;
				white-space: normal;
				background: transparent !important;
				color: #fff !important;
				border-radius: 0 !important;
				text-decoration: none;
				font-size: 16px;
			}

				#navigation .submenu a:hover {
					background: rgba(255,255,255,.1) !important;
					color: #fff !important;
				}

	#topnav .navigation-menu > li:first-of-type > a {
		padding-left: 20px;
	}

	.col-1 {
		max-width: 100%;
	}
}


/* ——— Phones (≤640px) ——— */
@media (max-width:640px) {
	.page-title {
		font-size: 20px;
	}

	.card-box {
		padding: 14px;
	}
}

.location-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	margin-left: 6px;
}


.dot-green {
	background-color: var(--success);
}

.dot-yellow {
	background-color: var(--warning);
}

/*-----------------------------------------------------------------------------------------------------------------------------*/
/* =========================================
   Navigation Panel Fixes
   ========================================= */

/* -----------------------------------------
   0. Logo swap when sidebar is collapsed
   ----------------------------------------- */

/* Hide the full logo when collapsed */
body.nav-collapsed #topnav .logo .logo-lg {
	display: none !important;
}

/* Show the small/icon logo when collapsed */
body.nav-collapsed #topnav .logo .logo-sm {
	display: flex !important;
}

/* Ensure full logo shows when expanded */
body:not(.nav-collapsed) #topnav .logo .logo-lg {
	display: flex !important;
}

body:not(.nav-collapsed) #topnav .logo .logo-sm {
	display: none !important;
}

/* Adjust icon logo size when collapsed */
body.nav-collapsed #topnav .logo .logo-sm img {
	height: 24px !important;
	width: auto !important;
}

/* -----------------------------------------
   1. Hide nav-user when sidebar is collapsed
   ----------------------------------------- */
body.nav-collapsed .topbar-right-menu .nav-user {
	display: none !important;
}

body.nav-collapsed .topbar-right-menu .dropdown.notification-list {
	display: none !important;
}

/* -----------------------------------------
   2. Language selector: show only flag when collapsed (no arrow, no text)
   ----------------------------------------- */

/* Ensure the language form and its containers are visible when collapsed */
body.nav-collapsed #lang-form,
body.nav-collapsed #lang-form .btn-group,
body.nav-collapsed #theme-switch,
body.nav-collapsed #theme-switch .btn-group,
body.nav-collapsed .topbar-right-menu > li:last-child {
	display: block !important;
	visibility: visible !important;
	opacity: 1 !important;
}

	/* Style the button when collapsed */
	body.nav-collapsed #lang-form .btn-group .btn,
	body.nav-collapsed #lang-form .btn-group .btn.dropdown-toggle {
		padding: 6px 8px !important;
		min-width: auto !important;
		width: auto !important;
		font-size: 0 !important; /* Hide text */
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		visibility: visible !important;
		opacity: 1 !important;
		color: transparent !important;
		background-color: var(--primary) !important;
	}

		/* Keep the flag visible and properly sized */
		body.nav-collapsed #lang-form .btn-group .btn img,
		body.nav-collapsed #lang-form .btn-group .btn.dropdown-toggle img {
			max-height: 16px !important;
			min-height: 13px !important;
			min-width: 16px !important;
			display: inline-block !important;
			visibility: visible !important;
			opacity: 1 !important;
		}

		/* Hide the arrow icon when collapsed */
		body.nav-collapsed #lang-form .btn-group .btn .material-icons,
		body.nav-collapsed #lang-form .btn-group .btn i.material-icons {
			display: none !important;
		}

	/* Theme switch when collapsed: icon-only button, no caret */
	body.nav-collapsed #theme-switch .btn-group .btn {
		padding: 6px 8px !important;
		min-width: auto !important;
		width: auto !important;
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
	}

	body.nav-collapsed #theme-switch .theme-switch__caret {
		display: none !important;
	}

	/* Language dropdown menu should still show full text */
	body.nav-collapsed #lang-form .dropdown-menu .dropdown-item,
	body.nav-collapsed #theme-switch .dropdown-menu .dropdown-item {
		font-size: 14px !important;
		display: flex !important;
		align-items: center;
		gap: 8px;
		color: inherit !important;
	}

/* Ensure topbar-right-menu is visible and properly positioned when collapsed */
body.nav-collapsed .topbar-right-menu {
	display: flex !important;
	visibility: visible !important;
	opacity: 1 !important;
}

/* -----------------------------------------
   3. EXPANDED STATE: Accordion-style submenus
   ----------------------------------------- */

/* Only when NOT collapsed: make submenus inline (not flyout) */
body:not(.nav-collapsed) #navigation .navigation-menu > li > .submenu {
	position: static !important;
	left: auto !important;
	top: auto !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
	background: transparent !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
	border-radius: 0 !important;
	min-width: 100% !important;
	max-height: none !important;
	z-index: auto !important;
	overflow: visible !important;
	transition: none !important;
	pointer-events: auto !important;
	/* Hidden by default */
	display: none !important;
}

/* Disable hover-based flyout when expanded */
body:not(.nav-collapsed) #navigation .navigation-menu > li:hover > .submenu,
body:not(.nav-collapsed) #navigation .navigation-menu > li:focus-within > .submenu {
	display: none !important;
}

/* Show submenu only when parent has .open class (clicked) - expanded state only */
body:not(.nav-collapsed) #navigation li.has-submenu.open > .submenu {
	display: block !important;
	padding: 4px 0 4px 0 !important;
}
	/* Indent submenu links (not the container) to avoid width overflow */
	body:not(.nav-collapsed) #navigation li.has-submenu.open > .submenu a {
		padding-left: 20px;
	}

/* Add chevron indicator to parent items - expanded state only */
body:not(.nav-collapsed) #navigation li.has-submenu > a::after {
	content: 'expand_more';
	font-family: 'Material Symbols Outlined';
	font-size: 18px;
	margin-left: auto;
	transition: transform 0.2s ease;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24;
}

/* Rotate chevron when submenu is open */
body:not(.nav-collapsed) #navigation li.has-submenu.open > a::after {
	transform: rotate(180deg);
}

/* Subtle background for open parent */
body:not(.nav-collapsed) #navigation li.has-submenu.open > a {
	background: rgba(255, 255, 255, 0.05);
}

/* -----------------------------------------
   4. COLLAPSED STATE: Flyout submenus on hover
   ----------------------------------------- */

/* When collapsed, restore flyout behavior */
body.nav-collapsed #navigation .navigation-menu > li > .submenu {
	position: absolute !important;
	top: 0 !important;
	left: 64px !important;
	min-width: 220px !important;
	background: var(--sidebar-accent, #0f1a3f) !important;
	border-radius: 10px !important;
	padding: 8px !important;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.45) !important;
	z-index: 9999 !important;
	/* Hidden by default */
	display: none !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

/* Show flyout on hover when collapsed */
body.nav-collapsed #navigation li.has-submenu:hover > .submenu {
	display: block !important;
}

/* No chevron when collapsed */
body.nav-collapsed #navigation li.has-submenu > a::after {
	display: none !important;
}

/* CRITICAL: Show .nav-text INSIDE flyout submenus when collapsed */
body.nav-collapsed #navigation .submenu .nav-text,
body.nav-collapsed #navigation li.has-submenu:hover > .submenu .nav-text,
body.nav-collapsed #navigation .navigation-menu > li > .submenu .nav-text {
	display: inline !important;
	color: #ffffff !important;
}

/* Ensure submenu links are fully visible when collapsed */
body.nav-collapsed #navigation li.has-submenu:hover > .submenu a,
body.nav-collapsed #navigation li.has-submenu:hover > .submenu li a,
body.nav-collapsed #navigation .submenu.megamenu li ul li a {
	color: #ffffff !important;
	display: block !important;
	padding: 8px 12px !important;
}

/* -----------------------------------------
   5. Submenu item styling (both states)
   ----------------------------------------- */

/* Submenu container styling */
#navigation .submenu.megamenu,
#navigation .submenu.megamenu > li,
#navigation .submenu.megamenu > li > ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

	/* Submenu item links - WHITE TEXT */
	#navigation .submenu a,
	#navigation .submenu li a,
	#navigation .submenu.megamenu li ul li a,
	#topnav .navigation-menu > li .submenu li a {
		display: block;
		padding: 8px 12px;
		color: #ffffff !important;
		text-decoration: none;
		border-radius: 6px;
		white-space: nowrap;
		font-weight: 500;
		font-size: 14px;
	}

		/* Submenu item hover state */
		#navigation .submenu a:hover,
		#navigation .submenu li a:hover {
			background: rgba(255, 255, 255, 0.1) !important;
			color: #ffffff !important;
		}

/* Ensure nav-text inside submenus is always visible */
#navigation .submenu .nav-text {
	display: inline !important;
	color: #ffffff !important;
}

/* -----------------------------------------
   6. Active/Selected state fixes
   ----------------------------------------- */

/* Reset - clear any conflicting active styles */
#navigation .navigation-menu > li > a {
	background: transparent;
}

	/* Primary active state for top-level menu items */
	#navigation .navigation-menu > li.active > a,
	#navigation .navigation-menu > li > a.active {
		background: linear-gradient(180deg, var(--primary, #246bff), var(--primary-600, #1e57d8)) !important;
		color: #ffffff !important;
		box-shadow: 0 6px 16px rgba(36, 107, 255, 0.35) !important;
	}

/* Hover should not override active state */
#navigation .navigation-menu > li.active:hover > a,
#navigation .navigation-menu > li:hover > a.active {
	background: linear-gradient(180deg, var(--primary, #246bff), var(--primary-600, #1e57d8)) !important;
	color: #ffffff !important;
}

/* Active submenu item */
#navigation .submenu a.active,
#navigation .submenu li.active > a,
#navigation .submenu li > a.active {
	background: rgba(255, 255, 255, 0.2) !important;
	color: #ffffff !important;
}

/* Parent of active submenu — blue highlight so user sees which section is active */
#navigation li.has-submenu.active:not(.active-direct) > a {
	background: linear-gradient(180deg, var(--primary, #246bff), var(--primary-600, #1e57d8)) !important;
	color: #ffffff !important;
	box-shadow: 0 6px 16px rgba(36, 107, 255, 0.25) !important;
}

/* When parent itself is the active route (not just containing active child) */
#navigation li.has-submenu.active-direct > a {
	background: linear-gradient(180deg, var(--primary, #246bff), var(--primary-600, #1e57d8)) !important;
	color: #ffffff !important;
	box-shadow: 0 6px 16px rgba(36, 107, 255, 0.35) !important;
}

/* -----------------------------------------
   7. Additional improvements
   ----------------------------------------- */

/* Smooth transition for sidebar */
#topnav {
	transition: width 0.2s ease, min-width 0.2s ease;
}

/* Parent menu item with submenu - cursor */
#navigation li.has-submenu > a {
	cursor: pointer;
}

/* Ensure topbar utilities adjust when collapsed */
body.nav-collapsed .topbar-right-menu {
	flex-direction: column;
	align-items: center;
	gap: 4px;
}

/*-------------------------------------------------------------------------------------------------------------------------------------------------------------------------*/
/* =========================================
   Navigation Fixes - All Screen Sizes
   ========================================= */

/* -----------------------------------------
   DESKTOP: Sidebar layout fixes
   ----------------------------------------- */

/* Make navigation scrollable and leave room for bottom utilities */
#navigation {
	margin-top: 22px;
	flex: 1 1 auto;
	overflow-y: auto !important;
	overflow-x: hidden !important;
	-webkit-overflow-scrolling: touch;
	/* Leave space for the bottom utilities (user + logout, theme, language rows + 16px offset) */
	padding-bottom: 170px !important;
	margin-bottom: 0 !important;
}

	/* Scrollbar styling for navigation */
	#navigation::-webkit-scrollbar {
		width: 6px;
	}

	#navigation::-webkit-scrollbar-track {
		background: transparent;
	}

	#navigation::-webkit-scrollbar-thumb {
		background: rgba(255, 255, 255, 0.2);
		border-radius: 3px;
	}

		#navigation::-webkit-scrollbar-thumb:hover {
			background: rgba(255, 255, 255, 0.3);
		}

/* Ensure bottom utilities don't overlap navigation */
.topbar-right-menu {
	position: absolute;
	bottom: 16px;
	left: 14px;
	right: 14px;
	z-index: 10;
	background: var(--sidebar, #0c1531);
	padding-top: 10px;
}

/* -----------------------------------------
   DESKTOP COLLAPSED: Logo centering
   ----------------------------------------- */

body.nav-collapsed #topnav .logo {
	display: flex !important;
	justify-content: center !important;
	align-items: center !important;
	width: 100% !important;
	padding: 0 !important;
}

body.nav-collapsed #topnav .list-inline.menu-left {
	width: 100% !important;
	display: flex !important;
	justify-content: center !important;
}

	body.nav-collapsed #topnav .list-inline.menu-left .float-start,
	body.nav-collapsed #topnav .list-inline.menu-left .float-left {
		float: none !important;
		display: flex !important;
		justify-content: center !important;
		width: 100% !important;
	}

body.nav-collapsed #topnav .logo .logo-sm {
	display: flex !important;
	justify-content: center !important;
	padding-left: 0 !important;
}

	body.nav-collapsed #topnav .logo .logo-sm img {
		height: 28px !important;
	}

/* -----------------------------------------
   DESKTOP COLLAPSED: Flyout submenus
   Higher specificity to override _Layout.cshtml
   ----------------------------------------- */

/* Override the display:none from _Layout.cshtml */
body.nav-collapsed #topnav #navigation li.has-submenu:hover > .submenu,
body.nav-collapsed #topnav #navigation .navigation-menu > li.has-submenu:hover > .submenu,
body.nav-collapsed #navigation .navigation-menu > li.has-submenu:hover > ul.submenu,
body.nav-collapsed #navigation li.has-submenu:hover > .submenu.megamenu {
	display: block !important;
	position: absolute !important;
	top: 0 !important;
	left: 64px !important;
	min-width: 220px !important;
	background: var(--sidebar-accent, #0f1a3f) !important;
	border-radius: 10px !important;
	padding: 8px !important;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.45) !important;
	z-index: 9999 !important;
	opacity: 1 !important;
	visibility: visible !important;
	transform: none !important;
}

	/* Ensure nested ul inside megamenu is visible */
	body.nav-collapsed #navigation li.has-submenu:hover > .submenu.megamenu > li,
	body.nav-collapsed #navigation li.has-submenu:hover > .submenu.megamenu > li > ul {
		display: block !important;
	}

/* Submenu text visible in flyout */
body.nav-collapsed #navigation li.has-submenu:hover > .submenu .nav-text,
body.nav-collapsed #navigation .submenu .nav-text {
	display: inline !important;
	color: #ffffff !important;
}

body.nav-collapsed #navigation li.has-submenu:hover > .submenu a,
body.nav-collapsed #navigation li.has-submenu:hover > .submenu li a {
	color: #ffffff !important;
	display: block !important;
	padding: 8px 12px !important;
	white-space: nowrap !important;
}

	body.nav-collapsed #navigation li.has-submenu:hover > .submenu a:hover {
		background: rgba(255, 255, 255, 0.1) !important;
	}

/* =========================================
   Mobile Navigation Fixes (≤1024px)
   ========================================= */

@media (max-width: 1024px) {

	/* -----------------------------------------
       1. Header bar layout - centered items
       ----------------------------------------- */

	#topnav {
		position: fixed !important;
		top: 0 !important;
		left: 0 !important;
		right: 0 !important;
		bottom: auto !important;
		height: 56px !important;
		width: 100% !important;
		background: #0C1531 !important;
		z-index: 1000 !important;
	}

		#topnav .navbar-custom {
			height: 56px !important;
			padding: 0 16px !important;
		}

		#topnav .container-fluid {
			height: 56px !important;
		}

	#topnav-inner {
		flex-direction: row !important;
		align-items: center !important;
		justify-content: space-between !important;
		height: 56px !important;
		padding: 0 !important;
		width: 100% !important;
	}

	/* Logo centered vertically */
	#topnav .list-inline.menu-left {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		height: 56px !important;
		margin: 0 !important;
		width: auto !important;
	}

		#topnav .list-inline.menu-left .float-left {
			display: flex !important;
			align-items: center !important;
			height: 100% !important;
			float: none !important;
			width: auto !important;
		}

	#topnav .logo {
		display: flex !important;
		align-items: center !important;
		justify-content: flex-start !important;
		height: 56px !important;
		width: auto !important;
	}

		#topnav .logo .logo-lg {
			display: flex !important;
			align-items: center !important;
		}

		#topnav .logo .logo-sm {
			display: none !important;
		}

	/* Right side utilities - centered vertically */
	.topbar-right-menu {
		position: static !important;
		display: flex !important;
		flex-direction: row !important;
		align-items: center !important;
		justify-content: flex-end !important;
		gap: 12px !important;
		margin: 0 !important;
		padding: 0 !important;
		height: 56px !important;
		background: transparent !important;
		top: auto !important;
		right: auto !important;
		bottom: auto !important;
		left: auto !important;
		width: auto !important;
	}

		/* Hide nav-user on mobile */
		.topbar-right-menu .nav-user {
			display: none !important;
		}

		/* Language selector centered */
		.topbar-right-menu > li {
			display: flex !important;
			align-items: center !important;
			height: 56px !important;
		}

			.topbar-right-menu > li:last-child {
				display: flex !important;
				align-items: center !important;
			}

	#lang-form,
	#theme-switch {
		display: flex !important;
		align-items: center !important;
		height: auto !important;
		margin: 0 !important;
	}

		#lang-form .btn-group,
		#theme-switch .btn-group {
			display: flex !important;
			align-items: center !important;
		}

			#lang-form .btn-group .btn,
			#theme-switch .btn-group .btn {
				display: flex !important;
				align-items: center !important;
				font-size: inherit !important;
				color: #fff !important;
				padding: 6px 12px !important;
			}

				#lang-form .btn-group .btn .material-icons,
				#theme-switch .btn-group .btn .material-icons {
					display: inline-flex !important;
					font-size: 18px !important;
				}

	/* Phone topbar: the icon carries the theme (aria-label keeps the name); the text label would not fit next to the language switch. */
	#theme-switch .theme-switch__label {
		display: none !important;
	}

	/* The block above hides every .material-icons in the topbar; the theme menu items still need theirs. */
	#theme-switch .dropdown-menu .material-icons {
		display: inline-flex !important;
	}

	/* Phone topbar: the switch sits at the top of the screen, so the menu opens downward (the sidebar rule opens it upward). */
	body:not(.nav-collapsed) #topnav #theme-switch .dropdown-menu {
		top: 100% !important;
		bottom: auto !important;
		right: 0 !important;
		left: auto !important;
		margin: 4px 0 0 !important;
	}

	/* -----------------------------------------
       2. Hamburger menu button
       ----------------------------------------- */

	.topbar-right-menu .dropdown.notification-list {
		display: flex !important;
		align-items: center !important;
		height: 56px !important;
	}

	.navbar-toggle {
		display: flex !important;
		align-items: center !important;
		justify-content: center !important;
		cursor: pointer !important;
	}

		.navbar-toggle .lines {
			width: 18px;
			height: 14px;
		}

			.navbar-toggle .lines span {
				height: 2px;
				background: #fff !important;
				display: block;
				margin-bottom: 4px;
				transition: all 0.3s ease;
			}

				.navbar-toggle .lines span:last-child {
					margin-bottom: 0;
				}

	/* When menu is OPEN: show X */
	body.menu-open .navbar-toggle .lines span:nth-child(1) {
		transform: translateY(6px) rotate(45deg);
	}

	body.menu-open .navbar-toggle .lines span:nth-child(2) {
		opacity: 0;
	}

	body.menu-open .navbar-toggle .lines span:nth-child(3) {
		transform: translateY(-6px) rotate(-45deg);
	}

	/* -----------------------------------------
       3. Navigation panel - full width, scrollable
       ----------------------------------------- */

	#navigation {
		position: fixed !important;
		top: 56px !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100% !important;
		max-width: 100% !important;
		height: calc(100vh - 56px) !important;
		height: calc(100dvh - 56px) !important;
		background: #0C1531 !important;
		z-index: 1200 !important;
		margin: 0 !important;
		padding: 24px 0 100px !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch !important;
		overscroll-behavior: contain !important;
		/* Hidden by default */
		display: none !important;
	}

	/* Show navigation when menu is open */
	body.menu-open #navigation {
		display: block !important;
	}

	/* Prevent body scroll when menu is open */
	body.menu-open {
		overflow: hidden !important;
		position: fixed !important;
		width: 100% !important;
		height: 100% !important;
	}

	/* Navigation menu should be full width */
	#navigation .navigation-menu {
		width: 100% !important;
		max-width: 100% !important;
		margin: 0 !important;
		padding: 0 20px !important;
		display: flex !important;
		flex-direction: column !important;
		gap: 2px !important;
	}

		/* Menu items full width */
		#navigation .navigation-menu > li {
			width: 100% !important;
			padding: 0 !important;
		}

			#navigation .navigation-menu > li > a {
				width: 100% !important;
				display: flex !important;
				align-items: center !important;
				padding: 14px 20px !important;
				background: transparent !important;
				box-shadow: none !important;
				border-radius: 10px !important;
				color: #fff !important;
				font-size: 16px !important;
				font-weight: 600 !important;
				gap: 12px !important;
			}

				#navigation .navigation-menu > li > a:hover,
				#navigation .navigation-menu > li > a:active {
					background: rgba(255, 255, 255, 0.1) !important;
				}

			#navigation .navigation-menu > li.active > a {
				background: rgba(255, 255, 255, 0.15) !important;
			}

			/* -----------------------------------------
       4. Submenus - ALWAYS VISIBLE on mobile
       Higher specificity to override everything
       ----------------------------------------- */

			/* Override ALL submenu hiding for mobile - very high specificity */
			body.menu-open #topnav #navigation .navigation-menu > li > .submenu,
			body.menu-open #topnav #navigation .navigation-menu > li.has-submenu > .submenu,
			body.menu-open #topnav #navigation li.has-submenu > .submenu,
			body.menu-open #navigation .submenu,
			body.menu-open #navigation .navigation-menu > li > .submenu,
			body.menu-open #navigation .submenu.megamenu,
			#navigation .navigation-menu > li > .submenu,
			#navigation .navigation-menu > li.has-submenu > .submenu {
				position: static !important;
				left: auto !important;
				top: auto !important;
				opacity: 1 !important;
				visibility: visible !important;
				transform: none !important;
				background: transparent !important;
				box-shadow: none !important;
				padding: 4px 0 8px 20px !important;
				margin: 0 !important;
				border-radius: 0 !important;
				min-width: 100% !important;
				max-height: none !important;
				width: 100% !important;
				z-index: auto !important;
				display: block !important;
				pointer-events: auto !important;
			}

				/* Ensure megamenu nested structure is visible */
				body.menu-open #navigation .submenu.megamenu > li,
				body.menu-open #navigation .submenu.megamenu > li > ul,
				#navigation .submenu.megamenu > li,
				#navigation .submenu.megamenu > li > ul {
					display: block !important;
					list-style: none !important;
					margin: 0 !important;
					padding: 0 !important;
				}

			/* Override hover states that might hide submenu */
			#navigation .navigation-menu > li:hover > .submenu,
			#navigation .navigation-menu > li:focus-within > .submenu,
			body.menu-open #navigation .navigation-menu > li:hover > .submenu {
				display: block !important;
				opacity: 1 !important;
				visibility: visible !important;
				position: static !important;
			}

	/* Remove chevron on mobile since submenus are always open */
	#navigation li.has-submenu > a::after {
		display: none !important;
		content: none !important;
	}

	/* Submenu container */
	#navigation .submenu li {
		list-style: none !important;
		display: block !important;
	}

		/* Submenu links */
		body.menu-open #navigation .submenu a,
		body.menu-open #navigation .submenu li a,
		#navigation .submenu a,
		#navigation .submenu li a {
			display: block !important;
			padding: 12px 20px 12px 52px !important;
			color: rgba(255, 255, 255, 0.85) !important;
			background: transparent !important;
			font-size: 15px !important;
			font-weight: 500 !important;
			white-space: normal !important;
			border-radius: 10px !important;
			text-decoration: none !important;
		}

			#navigation .submenu a:hover,
			#navigation .submenu a:active {
				background: rgba(255, 255, 255, 0.08) !important;
				color: #fff !important;
			}

			#navigation .submenu a.active,
			#navigation .submenu li.active > a {
				background: rgba(255, 255, 255, 0.12) !important;
				color: #fff !important;
			}

	/* Ensure nav-text is visible */
	body.menu-open #navigation .submenu .nav-text,
	#navigation .submenu .nav-text {
		display: inline !important;
		color: inherit !important;
	}

	/* -----------------------------------------
       5. Hide collapse toggle on mobile
       ----------------------------------------- */

	#navigation .navigation-menu-bottom,
	#navigation .menu-collapse {
		display: none !important;
	}

	/* -----------------------------------------
       6. Override nav-collapsed state on mobile
       ----------------------------------------- */

	body.nav-collapsed #topnav,
	body:not(.nav-collapsed) #topnav {
		width: 100% !important;
		min-width: 100% !important;
		height: 56px !important;
	}

	body.nav-collapsed .wrapper,
	body:not(.nav-collapsed) .wrapper {
		margin-left: 0 !important;
		padding-top: 72px !important;
	}

	body.nav-collapsed .footer,
	body:not(.nav-collapsed) .footer {
		margin-left: 0 !important;
	}

	/* Language selector should not change on mobile */
	body.nav-collapsed #lang-form .btn-group .btn,
	body.nav-collapsed #lang-form .btn-group .btn.dropdown-toggle {
		font-size: inherit !important;
		color: #fff !important;
		padding: 6px 12px !important;
		min-width: auto !important;
		width: auto !important;
	}

		body.nav-collapsed #lang-form .btn-group .btn .material-icons {
			display: inline-flex !important;
			font-size: 18px !important;
		}

		body.nav-collapsed #lang-form .btn-group .btn img {
			display: inline-block !important;
		}

	/* Logo should always be full on mobile */
	body.nav-collapsed #topnav .logo .logo-lg {
		display: flex !important;
	}

	body.nav-collapsed #topnav .logo .logo-sm {
		display: none !important;
		padding-left: 0 !important;
	}

	/* Logo positioning reset on mobile */
	body.nav-collapsed #topnav .logo,
	body.nav-collapsed #topnav .list-inline.menu-left,
	body.nav-collapsed #topnav .list-inline.menu-left .float-left {
		width: auto !important;
		justify-content: flex-start !important;
	}

	/* Override collapsed submenu behavior on mobile */
	body.nav-collapsed #navigation .submenu,
	body.nav-collapsed #navigation .navigation-menu > li > .submenu,
	body.nav-collapsed #navigation li.has-submenu > .submenu,
	body.nav-collapsed #navigation li.has-submenu:hover > .submenu,
	body.nav-collapsed.menu-open #navigation .submenu {
		position: static !important;
		left: auto !important;
		top: auto !important;
		min-width: 100% !important;
		background: transparent !important;
		box-shadow: none !important;
		padding: 4px 0 8px 20px !important;
		display: block !important;
	}
}
/* =========================================
   FIX: Collapsed Navigation Submenu Not Showing
   
   ROOT CAUSE: In _Layout.cshtml line 32:
   body.nav-collapsed #topnav { overflow-x: hidden; }
   
   This clips the flyout submenu because it's positioned at left: 64px,
   which is outside the 64px-wide collapsed sidebar.
   
   SOLUTION: Remove overflow-x: hidden and ensure overflow: visible
   on all parent containers.
   ========================================= */

/* -----------------------------------------
   1. Override the overflow-x: hidden
   ----------------------------------------- */
body.nav-collapsed #topnav {
	overflow: visible !important;
	overflow-x: visible !important;
	overflow-y: visible !important;
}

body.nav-collapsed #topnav-inner {
	overflow: visible !important;
}

body.nav-collapsed #navigation {
	overflow: visible !important;
}

body.nav-collapsed .navbar-custom {
	overflow: visible !important;
}

body.nav-collapsed .container-fluid {
	overflow: visible !important;
}

/* -----------------------------------------
   2. Ensure submenu is properly positioned and visible
   ----------------------------------------- */
body.nav-collapsed #navigation .submenu {
	display: none;
	position: absolute;
	left: 64px;
	top: 0;
	z-index: 9999;
	min-width: 220px;
	background: var(--sidebar-accent, #0f1a3f);
	border-radius: 10px;
	padding: 8px;
	box-shadow: 0 12px 28px rgba(15, 23, 42, 0.45);
}

/* Show on parent hover */
body.nav-collapsed #navigation li.has-submenu:hover > .submenu {
	display: block !important;
}

/* Keep visible when hovering submenu itself */
body.nav-collapsed #navigation .submenu:hover {
	display: block !important;
}

/* Invisible bridge to help with hover gap */
body.nav-collapsed #navigation li.has-submenu > .submenu::before {
	content: '';
	position: absolute;
	left: -20px;
	top: 0;
	width: 24px;
	height: 100%;
	background: transparent;
}

/* -----------------------------------------
   3. Ensure submenu content is visible
   ----------------------------------------- */
body.nav-collapsed #navigation .submenu .nav-text {
	display: inline !important;
	color: #ffffff !important;
}

body.nav-collapsed #navigation .submenu a {
	display: block !important;
	padding: 8px 12px !important;
	color: #ffffff !important;
	white-space: nowrap !important;
}

	body.nav-collapsed #navigation .submenu a:hover {
		background: rgba(255, 255, 255, 0.1) !important;
	}

/* Ensure megamenu nested structure is visible */
body.nav-collapsed #navigation .submenu.megamenu > li,
body.nav-collapsed #navigation .submenu.megamenu > li > ul {
	display: block !important;
	list-style: none;
	margin: 0;
	padding: 0;
}

body.nav-collapsed #topnav #navigation .navigation-menu > li.has-submenu > .submenu,
body.nav-collapsed #topnav #navigation .navigation-menu > li.has-submenu:hover > .submenu,
body.nav-collapsed #topnav #navigation .navigation-menu > li.has-submenu > ul.submenu.megamenu {
	top: 50% !important;
	transform: translateY(-50%) !important;
	bottom: auto !important;
	position: absolute !important;
	left: 64px !important;
}

.minw-auto {
	min-width: auto !important;
}
/*-----------------------------------------------------------------------------------------------*/ /**/
.dashboard-route-visualizer .leaflet-tile-pane {
	filter: grayscale(42%) brightness(1.05);
}

.routing-run-timeout {
	background: var(--surface-2);
}

.routing-run-timeout__progress {
	height: 0.75rem;
}

.routing-log-button-attention {
	animation: routing-log-button-pulse 1.4s ease-in-out infinite;
	box-shadow: 0 0 0 0 rgba(255, 92, 92, 0.45);
}

.routing-log-button-attention:hover,
.routing-log-button-attention:focus {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.routing-log-button-attention,
	.routing-log-button-attention:hover,
	.routing-log-button-attention:focus {
		animation: none;
		box-shadow: none;
		transform: none;
	}
}

@keyframes routing-log-button-pulse {
	0% {
		box-shadow: 0 0 0 0 rgba(255, 92, 92, 0.45);
		transform: scale(1);
	}

	50% {
		box-shadow: 0 0 0 0.4rem rgba(255, 92, 92, 0.12);
		transform: scale(1.02);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(255, 92, 92, 0);
		transform: scale(1);
	}
}

body.nav-collapsed .orderDetailsGrids {
	padding-left: 15px !important;
	padding-right: 15px !important;
}

.orderDetailsGrids {
	padding-left: 15px !important;
	padding-right: 15px !important;
}

/* =========================================
     Utilities
========================================= */
.cursor-help {
	cursor: help
}

.cursor-pointer {
	cursor: pointer
}

.material-icons-inline,
.material-symbols-outlined {
	font-family: "Material Symbols Outlined";
	font-weight: normal;
	font-style: normal;
	line-height: 1;
	letter-spacing: normal;
	text-transform: none;
	display: inline-block;
	white-space: nowrap;
	word-wrap: normal;
	direction: ltr;
	vertical-align: middle;
	font-feature-settings: "liga";
	-webkit-font-smoothing: antialiased;
	font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 24
}

.md-14 {
	font-size: 14px
}

.md-16 {
	font-size: 16px
}

.md-18 {
	font-size: 18px
}

.md-48 {
	font-size: 48px
}

.text-truncate-200 {
	max-width: 200px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap
}

.border-end-separator {
	border-right: 1px solid var(--stroke)
}

.logo-preview {
	display: block;
	margin: 15px;
	max-height: 100px
}

.color-indicator {
	width: 16px;
	height: 16px;
	border-radius: 3px;
	margin-right: 8px;
	flex-shrink: 0
}

.color-indicator-lg {
	width: 18px;
	height: 18px;
	border-radius: 4px;
	margin-right: 8px;
	flex-shrink: 0
}

.max-w-600 {
	max-width: 600px
}


body.nav-collapsed #master-page .row .col-sm-12 {
	padding: 0px;
}

#master-page .row .col-sm-12 .card {
	padding: 10px !important;
}

body.nav-collapsed #master-page .row .col-sm-12 .card {
	padding: 10px !important;
}

#master-page .row .col-sm-12 {
	padding: 0px;
}

body.nav-collapsed .orderDetailsGrids {
	padding-left: 15px !important;
	padding-right: 15px !important;
}

.orderDetailsGrids {
	padding-left: 15px !important;
	padding-right: 15px !important;
}

#master-page {
	margin: 0 !important;
	min-width: 100%;
	padding-left: 1rem;
	padding-right: 1rem;
}

#lang-form .btn {
	width: 4rem;
}

/* Sidebar language and theme switches: a text label in front of the button (hidden when the nav is collapsed).
   Greeva's .navbar-custom .nav-link sets line-height: 69px, which would make each row 69px tall. */
#topnav #lang-form,
#topnav #theme-switch {
	display: flex;
	align-items: center;
	gap: 8px;
	height: auto;
	line-height: normal;
	padding: 6px 0;
}

/* Expanded sidebar: the theme menu opens upward, right-aligned to its button, so it stays inside the sidebar.
   The toggle uses data-bs-display="static", so Popper does not add an inline transform on top of these anchors.
   When collapsed the shared flyout rule (bottom: 10%; left: 50px) applies, like the language menu.
   Scoped to the sidebar breakpoint; the phone topbar (max-width: 1024px block) opens the menu downward. */
@media (min-width: 1025px) {
	body:not(.nav-collapsed) #topnav #theme-switch .dropdown-menu {
		bottom: 100% !important;
		top: auto !important;
		right: 0 !important;
		left: auto !important;
		margin: 0 0 4px !important;
	}
}

#theme-switch .dropdown-menu {
	min-width: 128px;
}

/* 16px line box keeps the button the same 28px height as the language button (17x13 flag). */
#theme-switch .btn .material-icons {
	font-size: 16px;
	line-height: 16px;
}

#theme-switch .dropdown-item .material-icons {
	font-size: 16px;
}

#lang-form .lang-form__label,
#theme-switch .theme-switch__label {
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sidebar-text);
	white-space: nowrap;
}

body.nav-collapsed #lang-form .lang-form__label,
body.nav-collapsed #theme-switch .theme-switch__label {
	display: none;
}

#topnav .nav-user {
	height: auto !important;
	line-height: normal !important;
	padding-top: 8px !important;
	padding-bottom: 8px !important;
}

/* Restore positioning context for Bootstrap dropdowns */
#topnav .topbar-right-menu > li.dropdown {
	position: relative !important;
}

/* Open dropdowns UPWARD — menu is pinned to bottom of sidebar */
#topnav .topbar-right-menu .dropdown-menu {
	position: absolute !important;
	bottom: 100% !important;
	top: auto !important;
	right: 0 !important;
	left: auto !important;
	z-index: 9999 !important;
	margin-bottom: 4px;
	margin-top: 0;
}

.topbar-right-menu .topbar-user {
	width: 100%;
}

#topnav .topbar-right-menu .topbar-user-summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	width: 100%;
	padding: 8px 10px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: #dbe3ff;
}

#topnav .topbar-right-menu .topbar-user-name {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#topnav .topbar-right-menu .topbar-user-logout {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 32px;
	height: 32px;
	border-radius: 999px;
	color: #dbe3ff;
	background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.2s ease, color 0.2s ease;
}

	#topnav .topbar-right-menu .topbar-user-logout:hover {
		color: #fff;
		background: rgba(255, 255, 255, 0.16);
	}

.topbar-right-menu .topbar-logout {
	display: none;
}

#topnav .topbar-right-menu .topbar-logout-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 40px;
	min-height: 40px;
	padding: 8px 12px;
	border-radius: 999px;
	color: #dbe3ff;
	background: rgba(255, 255, 255, 0.08);
	transition: background-color 0.2s ease, color 0.2s ease;
}

	#topnav .topbar-right-menu .topbar-logout-link:hover {
		color: #fff;
		background: rgba(255, 255, 255, 0.16);
	}

	#topnav .topbar-right-menu .topbar-logout-link .material-icons {
		display: inline-flex;
		font-size: 20px;
	}

body.nav-collapsed .topbar-right-menu .topbar-logout {
	display: block !important;
}

body.nav-collapsed .topbar-right-menu .topbar-user {
	display: none !important;
}

body.nav-collapsed .topbar-right-menu .topbar-logout-link {
	padding: 8px;
}

body.nav-collapsed .topbar-right-menu .topbar-logout-text {
	display: none;
}

@media (max-width: 991.98px) {
	.topbar-right-menu .topbar-user {
		display: none !important;
	}

	.topbar-right-menu .topbar-logout {
		display: flex !important;
		align-items: center !important;
	}

	.topbar-right-menu .topbar-logout-link {
		padding: 8px;
	}

	.topbar-right-menu .topbar-logout-text {
		display: none;
	}
}


.wizard > .steps .current a {
	background: #0C1531;
}

	.wizard > .steps .current a:hover {
		background: #0C1531;
	}

#topnav {
	position: fixed;
	top: 0;
	left: 0;
	bottom: 0;
	width: var(--sidebar-w);
	background: var(--sidebar);
	box-shadow: inset -1px 0 0 rgba(255,255,255,.06);
	z-index: 1000;
	transition: width .2s ease, min-width .2s ease;
}

.navbar-custom {
	height: 100%;
	background: transparent !important;
	padding: 20px 14px 16px;
}

#topnav .navigation-menu > li .submenu li span {
	padding: 8px 2px;
}

.container-fluid {
	width: 100% !important;
}

#topnav .container-fluid {
	padding: 0;
	height: 100%;
	max-width: 100%;
}

#topnav-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

/* The :focus / a:hover selectors match app.min.css, whose (0,2,0) !important state colours would otherwise win. */
.text-primary,
.text-primary:focus,
a.text-primary:hover {
	color: var(--primary-text) !important;
}

.dropdown-item {
	font-weight: 600;
	font-size: var(--control-font-size);
}

.btn-primary {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.btn-info {
	background: linear-gradient(180deg, var(--primary), var(--primary-600));
	border-color: transparent;
	box-shadow: var(--shadow-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

	.btn-info:active,
	.btn-info.active {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		background: linear-gradient(180deg, var(--primary), var(--primary-600)) !important;
		border-color: transparent !important;
		box-shadow: var(--shadow-primary) !important;
		color: #fff !important;
	}


.react-select .react-select__menu,
.react-select .react-select__option,
.react-select .react-select__single-value,
.react-select .react-select__placeholder,
.react-select .react-select__input-container {
	font-size: var(--control-font-size-sm);
	line-height: 1.5;
}


.react-select .react-select__option,
.react-select .react-select__single-value,
.react-select .react-select__placeholder {
	text-transform: none;
}
/* Utility */
.location-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	display: inline-block;
	margin-left: 6px;
}

.dot-green {
	background-color: var(--success);
}

.dot-yellow {
	background-color: var(--warning);
}

.topbar-right-menu {
	background: var(--sidebar, #0c1531);
	bottom: 16px;
	left: 14px;
	padding-top: 10px;
	position: absolute;
	right: 14px;
	z-index: 10;
	/* Sized by its rows (user, logout, theme, language); a fixed height pushed the last row off-screen. */
	height: auto;
	gap: 1px;
}

.material-icons {
	cursor: pointer !important;
}

@media (min-width: 992px) and (max-width: 1024px) {
	#topnav #navigation {
		display: none !important;
		visibility: hidden !important;
		opacity: 0 !important;
	}
}
#topnav .topbar-right-menu .dropdown-menu {
	bottom: 10% !important;
	left: 50px !important;
}

@media (max-width: 430px) {
	#topnav .list-inline.menu-left {
		display: none !important;
	}

	#quick-lookup {
		flex: 1 1 auto;
		min-width: 0;
		padding: 8px 4px;
	}

	.quick-lookup-expanded,
	.quick-lookup-input-wrap {
		min-width: 0;
		width: 100%;
	}

	.topbar-right-menu {
		flex: 0 0 auto !important;
		gap: 4px !important;
	}
}

.grid-column-menu {
	position: relative;
	display: inline-block;
	vertical-align: middle;
}

.grid-column-menu__icon {
	font-size: 16px !important;
	vertical-align: middle;
	margin-right: 4px;
}

.grid-column-menu__panel {
	position: absolute;
	left: 0;
	top: calc(100% + 4px);
	z-index: 1050;
	min-width: 220px;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	padding: 0.5rem 0;
}

.grid-column-menu__item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0.35rem 0.75rem;
	cursor: pointer;
	margin: 0;
	font-weight: normal;
	user-select: none;
}

.grid-column-menu__item:hover {
	background: var(--primary-50);
}

.grid-column-menu__item input[type="checkbox"] {
	margin: 0;
}

/* =========================================
     Design system primitives: Tag, links, tabs, toolbar, header band
========================================= */
.num {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
}

.tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 3px 8px;
	border-radius: 6px;
	font-family: var(--font);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 0;
	text-transform: none;
	white-space: nowrap;
	vertical-align: middle;
}

#master-page .cod-cash-queue .tag {
	min-width: 9rem;
	white-space: normal;
	overflow-wrap: normal;
	word-break: normal;
}

.tag--spaced {
	margin: 3px;
}

.order-status-tag {
	display: inline-flex;
	max-width: 180px;
	vertical-align: middle;
}

.order-status-tag > .tag {
	min-width: 0;
	max-width: 180px;
}

.order-status-tag__label {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
}

.order-status-tag:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 6px;
}

/* Full status description shown on hover/focus of the compact tag. The outer element only positions
   (StatusTag measures it and clamps it to the viewport); the gap to the tag is its padding so the
   pointer can move onto the box. The body carries the visible surface. */
.order-status-tooltip {
	position: fixed;
	z-index: 1080;
	width: max-content;
	max-width: min(320px, calc(100vw - 16px));
}

.order-status-tooltip__body {
	padding: 8px 10px;
	border-radius: 6px;
	background: var(--tooltip-bg);
	color: var(--tooltip-text);
	box-shadow: var(--shadow);
	font-family: var(--font);
	font-size: 12px;
	line-height: 1.45;
	white-space: normal;
	overflow-wrap: anywhere;
	text-wrap: balance;
	overflow: auto;
	animation: order-status-tooltip-in .12s ease-out;
}

@keyframes order-status-tooltip-in {
	from { opacity: 0; transform: translateY(-2px); }
	to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
	.order-status-tooltip__body { animation: none; }
}

.tag--soft.tag--primary { background: var(--primary-50); color: var(--primary-text); --tag-dot-color: var(--primary); }
.tag--soft.tag--success { background: var(--success-50); color: var(--success-text); --tag-dot-color: var(--success); }
.tag--soft.tag--warning { background: var(--warning-50); color: var(--warning-text); --tag-dot-color: var(--warning); }
.tag--soft.tag--danger { background: var(--danger-50); color: var(--danger-text); --tag-dot-color: var(--danger); }
.tag--soft.tag--muted { background: var(--muted-50); color: var(--muted-text); --tag-dot-color: var(--muted); }

.tag--solid.tag--primary { background: var(--primary); color: #fff; }
.tag--solid.tag--success { background: var(--success-700); color: #fff; }
.tag--solid.tag--warning { background: var(--warning-700); color: #fff; }
.tag--solid.tag--danger { background: var(--danger-700); color: #fff; }
.tag--solid.tag--muted { background: var(--muted-700); color: #fff; }

.tag__dot {
	width: 6px;
	height: 6px;
	flex-shrink: 0;
	border-radius: 50%;
	background: var(--tag-dot-color, currentColor);
}

.tag__dot--pulse {
	animation: tag-pulse 1.4s ease-in-out infinite;
}

@keyframes tag-pulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: .35; transform: scale(.7); }
}

@media (prefers-reduced-motion: reduce) {
	.tag__dot--pulse { animation: none; }
}

/* One link style for in-grid navigation and row actions. */
.link-action {
	appearance: none;
	background: transparent;
	border: 0;
	padding: 0;
	color: var(--primary-text);
	font: inherit;
	font-weight: 600;
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.link-action:hover,
.link-action:focus-visible {
	color: var(--primary-text);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.link-action:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 3px;
}

.btn-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--control-h);
	height: var(--control-h);
	min-height: var(--control-h);
	padding: 0;
	border: 1px solid var(--control-border);
	border-radius: var(--control-radius);
	background: var(--card);
	color: var(--ink-700);
}

.btn-icon:hover:not(:disabled) {
	background: var(--surface-2);
	color: var(--primary-text);
	border-color: var(--line-strong);
}

.btn-icon .material-icons {
	font-size: 18px;
}

/* Underline tabs: scope switchers for one list. */
.tabs-underline {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	gap: 4px;
	border-bottom: 1px solid var(--stroke);
}

.tabs-underline__tab {
	appearance: none;
	background: transparent;
	border: 0;
	border-bottom: 2px solid transparent;
	margin-bottom: -1px;
	padding: 8px 12px;
	font-size: var(--control-font-size);
	font-weight: 600;
	color: var(--ink-600);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	white-space: nowrap;
}

.tabs-underline__tab:hover:not(:disabled) {
	color: var(--ink-800);
}

.tabs-underline__tab:disabled {
	opacity: .45;
	cursor: default;
}

.tabs-underline__tab.active {
	color: var(--primary-text);
	border-bottom-color: var(--primary);
}

.tabs-underline__tab:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: -2px;
	border-radius: 4px;
}

.tabs-underline__count {
	font-family: var(--font-mono);
	font-variant-numeric: tabular-nums;
	font-size: 11px;
	line-height: 18px;
	min-width: 18px;
	padding: 0 6px;
	border-radius: 999px;
	background: var(--primary-50);
	color: var(--primary-text);
	text-align: center;
}

.list-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 8px 16px;
	margin-bottom: 4px;
}

.list-toolbar__side {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-bottom: 6px;
	flex-wrap: wrap;
}

.list-toolbar__sync {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	color: var(--ink-500);
	white-space: nowrap;
}

.list-toolbar__sync-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--success);
	box-shadow: 0 0 0 3px rgba(45, 185, 110, .18);
}

.list-toolbar__sync-dot--busy {
	background: var(--warning);
	box-shadow: 0 0 0 3px rgba(245, 165, 36, .2);
	animation: tag-pulse 1s ease-in-out infinite;
}

/* Grid toolbar: batch count, scope heading, column menu and bulk actions above the scroll container */
.grid-toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	min-height: 36px;
	margin: 8px 0;
}

.grid-toolbar__lead,
.grid-toolbar__side {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	min-width: 0;
}

/* Toolbar buttons keep their full label: they wrap to the next line rather than shrink and truncate
   (DashboardStyles.css zeroes min-width on every #master-page descendant, so flex would otherwise squeeze them). */
.grid-toolbar .btn {
	flex-shrink: 0;
	white-space: nowrap;
}

/* Action groups rendered into the toolbar wrap instead of overflowing the page on narrow viewports. */
.grid-toolbar .btn-group {
	display: flex;
	flex-wrap: wrap;
	row-gap: 4px;
}

.grid-toolbar__count {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 2px 8px;
	border-radius: 999px;
	background: var(--primary-50);
	color: var(--primary-text);
	font-size: 12px;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
	line-height: 20px;
	white-space: nowrap;
}

/* Header band: day-at-a-glance counts and derived insight tabs. */
.header-band {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-bottom: 16px;
}

.header-band__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
}

.header-band__stat {
	display: flex;
	align-items: baseline;
	gap: 8px;
	padding: 6px 12px;
	border: 1px solid var(--stroke);
	border-radius: var(--radius-sm);
	background: var(--card);
}

.header-band__stat dt {
	margin: 0;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .03em;
	text-transform: uppercase;
	color: var(--ink-500);
}

.header-band__stat dd {
	margin: 0;
	font-size: 16px;
	font-weight: 600;
	color: var(--ink-900);
}

.header-band__stat--attention {
	border-color: rgba(245, 165, 36, .5);
	background: rgba(245, 165, 36, .08);
}

.header-band__stat--attention dd {
	color: var(--warning-text);
}

/* Grid: column group header row, route cell, fixed row-action slots, overflow menu. */
.table thead tr.grid-group-row th {
	border-bottom: 0;
	padding-bottom: 0;
	background: var(--surface-2);
}

.table thead tr.grid-group-row th.grid-group-header {
	text-align: center;
	color: var(--ink-500);
	border-bottom: 1px solid var(--line-strong);
}

.table thead tr.grid-group-row + tr th {
	border-top: 0;
}

.route-cell {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
}

.route-cell__arrow {
	color: var(--ink-500);
}

/* vehicle column: "plate · contractor" on one line; `#master-page *` sets overflow-wrap:anywhere, so pin nowrap. */
#master-page .vehicle-cell {
	white-space: nowrap;
}

.vehicle-cell__sep {
	color: var(--ink-500);
}

.grid-check {
	font-size: 18px;
	color: var(--success-text);
	vertical-align: middle;
}

/* #master-page prefix: DashboardStyles.css resets min-width on every #master-page descendant with id specificity */
#master-page .transports-grid th.grid-col-sticky-end,
#master-page .transports-grid td.grid-col-sticky-end {
	min-width: 260px;
}

/* On narrow screens, long translated actions must scroll instead of covering row selection. */
@media (max-width: 1024px) {
	#master-page .transports-grid .grid-col-sticky-end {
		position: static;
	}

	#master-page .transports-grid .grid-col-sticky-end::after {
		display: none;
	}
}

#master-page .transports-grid th.grid-col-sticky-start:not(.grid-select-cell) {
	width: 76px;
	min-width: 76px;
}

.row-actions {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 2px;
	/* 28px controls inside a 10px-padded, 1px-bordered 44px cell leave 23px of content box; pull the slot back into it. */
	margin: -3px 0;
}

.row-actions__slots {
	display: flex;
	align-items: center;
	gap: 12px;
	white-space: nowrap;
}

.row-actions__primary:empty {
	display: none;
}

.row-actions .btn-sm {
	min-height: 28px;
	padding: 2px 10px;
	line-height: 22px;
}

.overflow-menu {
	position: relative;
	display: inline-block;
}

.overflow-menu__toggle {
	width: 28px;
	height: 28px;
	min-height: 28px;
	border-color: transparent;
	background: transparent;
}

.overflow-menu__toggle:hover:not(:disabled),
.overflow-menu__toggle[aria-expanded="true"] {
	border-color: var(--stroke);
	background: var(--surface-2);
}

.overflow-menu__panel {
	position: absolute;
	right: 0;
	top: calc(100% + 4px);
	z-index: 1050;
	min-width: 200px;
	background: var(--card);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	padding: 0.35rem 0;
}

.overflow-menu__item {
	appearance: none;
	display: block;
	width: 100%;
	padding: 0.4rem 0.75rem;
	border: 0;
	background: transparent;
	text-align: left;
	color: var(--ink-800);
	font-size: var(--control-font-size);
	text-decoration: none;
	cursor: pointer;
	white-space: nowrap;
}

.overflow-menu__item:hover,
.overflow-menu__item:focus-visible {
	background: var(--primary-50);
	color: var(--primary-text);
	text-decoration: none;
}

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

/* Transport details: label/value list (B9). Id prefix beats Bootstrap's reboot dt/dd rules. */
#master-page .details-list {
	display: grid;
	/* 180px floor; a longer label widens the column instead of running into the value */
	grid-template-columns: minmax(180px, max-content) minmax(0, 1fr);
	gap: 6px 12px;
	margin: 0 0 12px;
	align-items: baseline;
}

#master-page .details-list dt {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: var(--ink-600);
	white-space: nowrap;
}

#master-page .details-list dd {
	margin: 0;
	min-width: 0;
	font-size: 13px;
	color: var(--ink-900);
}

#master-page .details-list--estimate {
	grid-template-columns: minmax(240px, max-content) minmax(0, 1fr);
	margin-bottom: 0;
}

#master-page .details-list--estimate dd {
	font-variant-numeric: tabular-nums;
}

.estimate-card__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

.estimate-card__text {
	min-width: 0;
}

.estimate-card__title {
	margin: 0 0 2px;
	font-size: 14px;
	font-weight: 600;
	color: var(--ink-900);
}

.estimate-card__hint {
	margin: 0;
	font-size: 12px;
}

/* =========================================
     Theme surfaces for vendor CSS
     Greeva (Bootstrap 4.1.1) paints these with light literals; re-point them at tokens
     so they follow the dark theme. Light values are unchanged in intent.
========================================= */
.modal-content {
	background-color: var(--card);
	color: var(--ink-900);
	border: 1px solid var(--stroke);
}

.modal-header {
	border-bottom: 1px solid var(--stroke);
}

.modal-footer {
	border-top: 1px solid var(--stroke);
}

.modal-header .close {
	color: var(--ink-900);
	text-shadow: none;
}

.dropdown-menu {
	color: var(--ink-800);
	background-color: var(--card);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-sm);
	padding: 6px;
	box-shadow: var(--shadow);
}

.dropdown-item {
	color: var(--ink-800);
	border-radius: var(--control-radius);
}

.dropdown-item:hover,
.dropdown-item:focus {
	color: var(--ink-900);
	background-color: var(--surface-3);
}

.dropdown-item.active,
.dropdown-item:active {
	color: #fff;
	background-color: var(--primary);
}

.dropdown-divider {
	border-top: 1px solid var(--stroke);
}

.dropdown-header {
	color: var(--ink-500);
}

.popover {
	background-color: var(--card);
	border: 1px solid var(--stroke);
	box-shadow: var(--shadow);
}

.popover-header {
	color: var(--ink-900);
	background-color: var(--surface-2);
	border-bottom: 1px solid var(--stroke);
}

.popover-body {
	color: var(--ink-800);
}

.tooltip-inner {
	color: var(--tooltip-text);
	background-color: var(--tooltip-bg);
}

.bs-tooltip-top .arrow::before,
.bs-tooltip-auto[x-placement^="top"] .arrow::before { border-top-color: var(--tooltip-bg); }
.bs-tooltip-right .arrow::before,
.bs-tooltip-auto[x-placement^="right"] .arrow::before { border-right-color: var(--tooltip-bg); }
.bs-tooltip-bottom .arrow::before,
.bs-tooltip-auto[x-placement^="bottom"] .arrow::before { border-bottom-color: var(--tooltip-bg); }
.bs-tooltip-left .arrow::before,
.bs-tooltip-auto[x-placement^="left"] .arrow::before { border-left-color: var(--tooltip-bg); }

.list-group-item {
	color: var(--ink-800);
	background-color: var(--card);
	border-color: var(--stroke);
}

.list-group-item-action:hover,
.list-group-item-action:focus {
	color: var(--ink-900);
	background-color: var(--surface-2);
}

.nav-tabs {
	border-bottom-color: var(--stroke);
}

.nav-tabs .nav-link:hover,
.nav-tabs .nav-link:focus {
	border-color: var(--surface-3) var(--surface-3) var(--stroke);
}

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
	color: var(--ink-900);
	background-color: var(--card);
	border-color: var(--stroke) var(--stroke) var(--card);
}

/* The border tone has to differ from the tint, or the declared border is invisible. */
.alert-success {
	color: var(--success-text);
	background-color: var(--success-50);
	border-color: color-mix(in srgb, var(--success) 35%, transparent);
}

.alert-warning {
	color: var(--warning-text);
	background-color: var(--warning-50);
	border-color: color-mix(in srgb, var(--warning) 35%, transparent);
}

.alert-danger {
	color: var(--danger-text);
	background-color: var(--danger-50);
	border-color: color-mix(in srgb, var(--danger) 35%, transparent);
}

.alert-info {
	color: var(--primary-text);
	background-color: var(--primary-50);
	border-color: color-mix(in srgb, var(--primary) 35%, transparent);
}

.card {
	background-color: var(--card);
	border-color: var(--stroke);
}

.card-header,
.card-footer {
	background-color: var(--surface-2);
	border-color: var(--stroke);
}

.input-group-text {
	color: var(--ink-600);
	background-color: var(--surface-3);
	border-color: var(--control-border);
}

.form-control::placeholder,
.custom-select::placeholder {
	color: var(--ink-500);
	opacity: 1;
}

.custom-select {
	color: var(--control-text);
	background-color: var(--control-bg);
	border-color: var(--control-border);
}

.custom-control-label::before {
	background-color: var(--control-bg);
	border-color: var(--control-border);
}

/* Greeva paints the checkbox box white with a 2px #98a6ad border and fills it #188ae2
   when checked, so it stayed light in the dark theme and used the old brand blue. */
.checkbox label::before {
	background-color: var(--control-bg);
	border: 1px solid var(--control-border);
	border-radius: 4px;
}

.checkbox input[type=checkbox]:checked + label::before {
	background-color: var(--primary);
	border-color: var(--primary);
}

.checkbox input[type=checkbox]:disabled + label::before {
	background-color: var(--control-disabled-bg);
}

.table {
	color: var(--ink-800);
}

.table td,
.table th {
	border-top-color: var(--stroke);
}

.table thead th {
	border-bottom-color: var(--stroke);
}

.table-bordered,
.table-bordered td,
.table-bordered th {
	border-color: var(--stroke);
}

.table-striped tbody tr:nth-of-type(odd) {
	background-color: var(--surface-2);
}

.text-muted {
	color: var(--ink-500) !important;
}

.text-body {
	color: var(--ink-700) !important;
}

.text-danger,
.text-danger:focus,
a.text-danger:hover {
	color: var(--danger-text) !important;
}

.text-success,
.text-success:focus,
a.text-success:hover {
	color: var(--success-text) !important;
}

.text-warning,
.text-warning:focus,
a.text-warning:hover {
	color: var(--warning-text) !important;
}

.text-info,
.text-info:focus,
a.text-info:hover {
	color: var(--info-text) !important;
}

.btn-link,
.btn-link:hover,
.btn-link:focus {
	color: var(--primary-text);
}

/* opacity: 1 because app.min.css dims .btn:disabled to .65, which drops the token below 4.5:1.
   !important so a disabled "btn-link text-info" still reads as disabled once the dimming is gone. */
.btn-link.disabled,
.btn-link:disabled {
	color: var(--control-disabled-text) !important;
	opacity: 1;
}

.alert-secondary,
.alert-light {
	color: var(--muted-text);
	background-color: var(--muted-50);
	border-color: var(--muted-50);
}

.text-dark,
.text-dark:focus,
a.text-dark:hover {
	color: var(--ink-900) !important;
}

.bg-light {
	background-color: var(--surface-3) !important;
}

.bg-white {
	background-color: var(--card) !important;
}

/* Greeva's semantic fills are hardcoded (#188ae2, #31ce77, #fbcc5c, #f34943). Most consumers
   are progress bars, so keep the base tones and their lightness rather than the 700 shades. */
.bg-primary {
	background-color: var(--primary) !important;
}

.bg-secondary {
	background-color: var(--muted) !important;
}

.bg-success {
	background-color: var(--success) !important;
}

.bg-warning {
	background-color: var(--warning) !important;
}

.bg-danger {
	background-color: var(--danger) !important;
}

.bg-info {
	background-color: var(--info) !important;
}

.border,
.border-top,
.border-right,
.border-bottom,
.border-left {
	border-color: var(--stroke) !important;
}

.badge-light {
	color: var(--ink-800);
	background-color: var(--surface-3);
}

/* Solid status badges sit on the 700 shades so white label text clears 4.5:1. */
.badge-primary {
	color: #fff;
	background-color: var(--primary);
}

.badge-secondary {
	color: #fff;
	background-color: var(--muted-700);
}

.badge-success {
	color: #fff;
	background-color: var(--success-700);
}

.badge-warning {
	color: #fff;
	background-color: var(--warning-700);
}

.badge-danger {
	color: #fff;
	background-color: var(--danger-700);
}

.btn-light,
.btn-light:hover,
.btn-light:focus {
	color: var(--ink-900);
	background-color: var(--surface-3);
	border-color: var(--line-strong);
}

.close {
	color: var(--ink-900);
	text-shadow: none;
}

hr {
	border-top-color: var(--stroke);
}

caption {
	color: var(--muted-text);
}

/* Greeva's error code is an off-palette blue with a drop-shadow glow. */
.text-error {
	color: var(--primary);
	text-shadow: none;
}

/* app.min.css paints every progress track #e9ecef, which stays light in the dark theme. */
.progress {
	background-color: var(--surface-3);
}

/* Status fills keep their saturated hue in both themes, so a .text-dark label on them keeps dark
   ink instead of following --ink-900 to the light dark-theme value. */
.progress-bar.text-dark {
	color: #0f172a !important;
}

/* Keeps short bars wide enough to hold their label on the fill instead of spilling it onto the track
   (#master-page prefix: DashboardStyles.css resets min-width on every descendant with id specificity). */
#master-page .progress-bar.text-dark {
	min-width: 2.5em;
}

/* FullCalendar: app.min.css paints every .fc-day white, which the dark theme cannot reach through
   the --fc-* variables; past days keep their site.css tint. The active view button gets a white
   label on the primary fill. */
.fc-day:not(.fc-day-past) {
	background: var(--card);
}

.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active {
	color: #fff;
}

.schedule-calendar .fc .schedule-assignment-event {
	margin: 2px 4px;
	padding: 0;
	border: 1px solid var(--stroke);
	border-radius: 5px;
	background: var(--card) !important;
	color: var(--ink-900);
	text-align: left;
	cursor: pointer;
}

.schedule-calendar .schedule-assignment {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	padding: 2px 6px;
	border-left: 3px solid;
	border-radius: 4px;
}

.schedule-calendar .schedule-assignment__plate {
	flex: 0 0 auto;
	color: var(--ink-900);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.25;
}

.schedule-calendar .schedule-assignment__driver {
	display: flex;
	align-items: center;
	gap: 4px;
	min-width: 0;
	color: var(--ink-700);
	font-size: 12px;
	font-weight: 400;
	line-height: 1.25;
}

.schedule-calendar .schedule-assignment__driver .material-icons-inline {
	flex: 0 0 auto;
	font-size: 14px;
}

.schedule-calendar .schedule-assignment__name {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.schedule-calendar .schedule-assignment-event:hover .schedule-assignment,
.schedule-calendar .schedule-assignment-event:focus-visible .schedule-assignment {
	background: var(--surface-2);
}

/* Day popover: replaces FullCalendar's "+N more" panel so one day's assignments group per truck.
   Positioned by ScheduleGrid relative to .schedule-calendar; the width is mirrored there. */
.schedule-calendar {
	position: relative;
}

.schedule-day-popover {
	position: absolute;
	z-index: 1000;
	width: 300px;
	max-width: 100%;
	border: 1px solid var(--stroke);
	border-radius: var(--radius-sm);
	background: var(--card);
	color: var(--ink-900);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.schedule-day-popover__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	padding: 6px 6px 6px 12px;
	border-bottom: 1px solid var(--stroke);
	background: var(--surface-2);
}

.schedule-day-popover__title {
	color: var(--ink-900);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.3;
}

.schedule-day-popover__close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	padding: 0;
	border: 0;
	border-radius: var(--control-radius);
	background: transparent;
	color: var(--ink-500);
}

.schedule-day-popover__close:hover,
.schedule-day-popover__close:focus-visible {
	background: var(--surface-3);
	color: var(--ink-900);
}

.schedule-day-popover__close .material-icons-inline {
	font-size: 18px;
}

.schedule-day-popover__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	max-height: 60vh;
	padding: 8px;
	overflow-y: auto;
}

.schedule-vehicle-group {
	border: 1px solid var(--stroke);
	border-radius: var(--control-radius);
	background: var(--card);
	overflow: hidden;
}

.schedule-vehicle-group__header {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 6px 10px;
	border-bottom: 1px solid var(--stroke);
	background: var(--surface-2);
	color: var(--ink-500);
}

.schedule-vehicle-group__header .material-icons-inline {
	font-size: 16px;
}

.schedule-vehicle-group__plate {
	color: var(--ink-900);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 1.25;
}

.schedule-vehicle-group__list {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0;
	padding: 4px;
	list-style: none;
}

.schedule-vehicle-group__driver {
	display: flex;
	align-items: center;
	gap: 6px;
	width: 100%;
	padding: 5px 8px;
	border: 0;
	border-left: 3px solid transparent;
	border-radius: 4px;
	background: transparent;
	color: var(--ink-900);
	font-size: 12px;
	line-height: 1.25;
	text-align: left;
	cursor: pointer;
}

.schedule-vehicle-group__driver:hover,
.schedule-vehicle-group__driver:focus-visible {
	background: var(--surface-2);
}

.schedule-vehicle-group__driver .material-icons-inline {
	flex: 0 0 auto;
	color: var(--ink-700);
	font-size: 14px;
}

.schedule-vehicle-group__name {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: anywhere;
}

.schedule-vehicle-group__role {
	flex: 0 0 auto;
	color: var(--ink-500);
	font-size: 11px;
}

/* Leaflet controls and popups (tiles stay light; the map surface is a photo, not chrome) */
.leaflet-control-zoom a,
.leaflet-bar a,
.leaflet-control-layers,
.leaflet-control-attribution {
	color: var(--ink-800);
	background-color: var(--card);
	border-bottom-color: var(--stroke);
}

.leaflet-bar a:hover,
.leaflet-bar a:focus {
	background-color: var(--surface-3);
}

.leaflet-control-attribution a {
	color: var(--primary-text);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip {
	color: var(--ink-900);
	background: var(--card);
	box-shadow: var(--shadow);
}

.leaflet-container a.leaflet-popup-close-button {
	color: var(--ink-500);
}

/* react-datepicker */
.react-datepicker,
.react-datepicker__month-container,
.react-datepicker__time-container,
.react-datepicker__time,
.react-datepicker__time-list {
	color: var(--ink-900);
	background-color: var(--card);
}

.react-datepicker {
	border-color: var(--stroke);
	box-shadow: var(--shadow);
}

.react-datepicker--time-only .react-datepicker__time-container {
	width: 16rem;
}

.react-datepicker--time-only .react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box {
	width: 100%;
}

.react-datepicker__header {
	background-color: var(--surface-2);
	border-bottom-color: var(--stroke);
}

.react-datepicker__current-month,
.react-datepicker-time__header,
.react-datepicker-year-header,
.react-datepicker__day-name,
.react-datepicker__day,
.react-datepicker__time-name,
.react-datepicker__time-list-item {
	color: var(--ink-900);
}

.react-datepicker__day:hover,
.react-datepicker__month-text:hover,
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
	background-color: var(--surface-3);
}

.react-datepicker__day--selected,
.react-datepicker__day--keyboard-selected,
.react-datepicker__day--in-range,
.react-datepicker__time-container .react-datepicker__time .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected {
	color: #fff;
	background-color: var(--primary);
}

.react-datepicker__day--outside-month,
.react-datepicker__day--disabled {
	color: var(--ink-500);
}

.react-datepicker__triangle::before {
	border-bottom-color: var(--stroke);
}

.react-datepicker__triangle::after {
	border-bottom-color: var(--surface-2);
}

.react-datepicker-popper .react-datepicker__navigation-icon::before {
	border-color: var(--ink-500);
}

/* notyf: Alert.ts sets info/warning backgrounds; success/error use notyf defaults, which read on both grounds */
.notyf__toast {
	box-shadow: var(--shadow);
}

/* react-select menu surfaces (CSS-only integration; no `styles`/`theme` props in code).
   Same overlay recipe as .dropdown-menu / .dropdown-item above: 10px surface radius, 6px inset, 6px item
   radius and the --surface-3 hover; the selected row is a soft primary tint instead of a solid block. */
/* z-index: react-select's default of 1 loses to the grids' pinned cells (1-2), which follow the filters in the DOM */
.react-select .react-select__menu {
	z-index: 10;
	margin: 4px 0;
	padding: 6px;
	color: var(--ink-900);
	background-color: var(--card);
	border: 1px solid var(--stroke);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow);
	overflow: hidden;
}

.react-select .react-select__menu-list {
	padding: 0;
}

.react-select .react-select__option {
	padding: 8px 10px;
	border-radius: var(--control-radius);
	color: var(--ink-800);
	background-color: transparent;
}

/* :active is listed so this (0,3,0) rule beats react-select's own (0,2,0) emotion rule, which flashes its blues on click */
.react-select .react-select__option--is-focused,
.react-select .react-select__option:active {
	color: var(--ink-900);
	background-color: var(--surface-3);
}

/* Selected rows stay listed so they can be unselected from the menu, so they must read as selected at a glance:
   soft primary tint plus a check mark drawn in currentColor (a mask, so it follows the theme). */
.react-select .react-select__option--is-selected {
	position: relative;
	padding-right: 32px;
	color: var(--primary-text);
	background-color: var(--primary-50);
}

.react-select .react-select__option--is-selected::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 10px;
	width: 16px;
	height: 16px;
	transform: translateY(-50%);
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m3.5 8.5 3 3 6-7'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}

.react-select .react-select__option--is-selected.react-select__option--is-focused,
.react-select .react-select__option--is-selected:active {
	background-color: color-mix(in srgb, var(--primary) 14%, var(--card));
}

.react-select .react-select__option--is-disabled {
	color: var(--control-disabled-text);
}

.react-select .react-select__group-heading {
	padding: 6px 10px 4px;
	color: var(--ink-500);
}

.react-select .react-select__menu-notice {
	color: var(--ink-500);
}

.react-select .react-select__single-value,
.react-select .react-select__input-container {
	color: var(--control-text);
}

.react-select .react-select__placeholder {
	color: var(--ink-500);
}

/* Selects stay one line high at every width: chips and placeholders that do not fit are clipped
   instead of wrapping the control onto extra lines (react-select's default is flex-wrap: wrap). */
.react-select .react-select__value-container--is-multi {
	min-width: 0;
	flex-wrap: nowrap;
	overflow: clip; /* not hidden: focusing the input would scroll the clipped chips into view */
}

/* the search input goes first so a searchable multi-select shows what is typed when its chips overflow */
.react-select .react-select__value-container--is-multi .react-select__input-container {
	order: -1;
}

.react-select .react-select__placeholder {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.react-select .react-select__multi-value {
	flex-shrink: 0;
	background-color: var(--surface-3);
}

.react-select .react-select__multi-value__label {
	color: var(--ink-900);
}

.react-select .react-select__indicator-separator {
	background-color: var(--control-border);
}