/* input(186,1): run-time error CSS1019: Unexpected token, found '}' */
/*
 * Theme-sensitive CSS rules for Fluent theme
 * Loaded conditionally when _useFluentTheme = true
 *
 * The following rules from Bootstrap-external mode are intentionally OMITTED
 * so that the Fluent theme's native styling applies:
 *
 *   - a, .btn-link colour        -> Fluent accent colour applies
 *   - .btn-primary colours       -> Fluent accent colour applies
 *   - .btn:focus box-shadow      -> Fluent focus ring applies
 *   - --dxbl-wait-indicator-color -> Fluent handles natively
 *   - --dxbl-btn-line-height     -> Fluent handles natively
 *   - .dxbs-fl.myFL (legacy)     -> dead code, removed
 *
 * Add any Fluent-specific overrides below as needed during testing.
 */

/* ===== Sidebar navigation menu =====
   The Fluent theme sets its own text/icon colours on DxMenu items,
   overriding the inherited white from .side-menu.  Force white for
   the dark sidebar background. */
.side-menu .dxbl-menu-item {
	color: rgba(255,255,255,0.45) !important;
	opacity: 1 !important;
	transition: color 0.3s;
}

.side-menu .dxbl-menu-item:hover {
	color: #00d9c5 !important;
}

.side-menu .dxbl-menu-item-text-container,
.side-menu .dxbl-menu-item-text {
	color: rgba(255,255,255,0.45) !important;
	transition: color 0.3s;
}

.side-menu .dxbl-menu-item:hover .dxbl-menu-item-text-container,
.side-menu .dxbl-menu-item:hover .dxbl-menu-item-text {
	color: #00d9c5 !important;
}

.side-menu .dxbl-image {
	color: rgba(255,255,255,0.45) !important;
	opacity: 1 !important;
	transition: color 0.3s;
}

.side-menu .dxbl-menu-item:hover .dxbl-image {
	color: #00d9c5 !important;
}

/* Remove Fluent theme's gray hover/focus background on sidebar items.
   Target the item and button directly + pseudo-elements, but NOT child
   elements (*) — that would kill mask-image icons which rely on
   background-color: currentColor. */
.side-menu .dxbl-menu-item,
.side-menu .dxbl-menu-item:hover,
.side-menu .dxbl-menu-item:focus,
.side-menu .dxbl-menu-item:active,
.side-menu .dxbl-menu-item.dxbl-active,
.side-menu .dxbl-menu-item.dxbl-focused,
.side-menu .dxbl-btn,
.side-menu .dxbl-btn:hover,
.side-menu .dxbl-btn:focus,
.side-menu .dxbl-btn:active {
	background-color: transparent !important;
	background: transparent !important;
}

.side-menu .dxbl-menu-item::before,
.side-menu .dxbl-menu-item::after,
.side-menu .dxbl-menu-item:hover::before,
.side-menu .dxbl-menu-item:hover::after,
.side-menu .dxbl-btn::before,
.side-menu .dxbl-btn::after,
.side-menu .dxbl-btn:hover::before,
.side-menu .dxbl-btn:hover::after {
	background-color: transparent !important;
	background: transparent !important;
}

/* Inner wrappers that Fluent may paint — exclude elements with mask-image (icons) */
.side-menu .dxbl-menu-item-content,
.side-menu .dxbl-menu-item-content:hover,
.side-menu .dxbl-menu-item-container,
.side-menu .dxbl-menu-item-container:hover,
.side-menu .dxbl-menu-item-text-container,
.side-menu .dxbl-menu-item-text-container:hover {
	background-color: transparent !important;
	background: transparent !important;
}

/* Submenu dropdown styling */
.sub-side-menu .dxbl-dropdown-body {
	border-radius: 10px;
	overflow: hidden;
	background-color: #1a1d2e !important;
}

/* Submenu header title (parent item name shown at top of flyout).
   CssClass may land on .dxbl-menu-item OR on a .dxbl-menu-dropdown-item
   wrapper, so target both with .submenu-header. */
.submenu-header,
.submenu-header:hover,
.submenu-header:focus,
.submenu-header:active,
.submenu-header.dxbl-active,
.submenu-header.dxbl-focused,
.submenu-header .dxbl-menu-item,
.submenu-header .dxbl-menu-item:hover,
.submenu-header .dxbl-menu-item:focus,
.submenu-header .dxbl-menu-item:active {
	padding: 4px 16px 2px !important;
	font-size: 0.65rem !important;
	font-weight: 600 !important;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: rgba(255,255,255,0.45) !important;
	background-color: transparent !important;
	background: transparent !important;
	cursor: default !important;
	border-bottom: 1px solid rgba(255,255,255,0.1);
	margin-bottom: 4px;
	pointer-events: none;
}

.submenu-header::before,
.submenu-header::after,
.submenu-header .dxbl-menu-item::before,
.submenu-header .dxbl-menu-item::after {
	background-color: transparent !important;
	background: transparent !important;
}

/* Override Fluent theme backgrounds on flyout sub-menu items */
.sub-side-menu .dxbl-menu-item,
.sub-side-menu .dxbl-menu-item:focus,
.sub-side-menu .dxbl-menu-item:active,
.sub-side-menu .dxbl-menu-item.dxbl-active,
.sub-side-menu .dxbl-menu-item.dxbl-focused {
	background-color: transparent !important;
	background: transparent !important;
	color: rgba(255,255,255,0.85) !important;
}

.sub-side-menu .dxbl-menu-item:hover {
	background-color: #00d9c5 !important;
	background: #00d9c5 !important;
	color: #1a1d2e !important;
}

.sub-side-menu .dxbl-menu-item::before,
.sub-side-menu .dxbl-menu-item::after,
.sub-side-menu .dxbl-menu-item:hover::before,
.sub-side-menu .dxbl-menu-item:hover::after {
	background-color: transparent !important;
	background: transparent !important;
}

.sub-side-menu .dxbl-menu-item-text-container,
.sub-side-menu .dxbl-menu-item-text {
	color: inherit !important;
}

/* Sidebar DxMenu flyout dropdowns — dark theme.
   In DevExpress 25.2, flyout popups use .dxbl-menu-dropdown.dxbl-dropdown-dialog
   with .dxbl-menu-dropdown-item children. Portaled to <body>. */
.dxbl-menu-dropdown.dxbl-dropdown-dialog {
	background-color: #1a1d2e !important;
	background: #1a1d2e !important;
	border: 1px solid rgba(255,255,255,0.3) !important;
	border-radius: 10px !important;
	box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
}

@media (prefers-reduced-motion: no-preference) {
	.dxbl-menu-dropdown.dxbl-dropdown-dialog {
		animation: menu-dropdown-appear 160ms ease-out;
	}

	@keyframes menu-dropdown-appear {
		from { opacity: 0; transform: translateX(-6px); }
		to   { opacity: 1; transform: translateX(0); }
	}
}

/* Suppression class — applied by addSideMenuHoverDelay's MutationObserver when a flyout
   appears before the required dwell time. The flyout stays in the DOM (DX's state machine
   stays consistent) but is invisible and non-interactive until the dwell timer fires.
   animation:none prevents the appear animation from consuming the opacity:0 start frame. */
.dxbl-dropdown-dialog.menu-flyout--suppressed {
	opacity: 0 !important;
	pointer-events: none !important;
	animation: none !important;
	transition: none !important;
}

/* Transitioning class — applied to the OLD flyout when DX removes it while the new flyout
   is still in the suppression window (Bug 5). Re-appended to body as a non-interactive
   overlay so the sidebar stays populated during the switch gap. Removed by
   cleanupTransitioning() once the new flyout is released. */
.dxbl-dropdown-dialog.menu-flyout--transitioning {
	pointer-events: none !important;
	animation: none !important;
	transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
	.sub-side-menu .dxbl-menu-dropdown-item,
	.sub-side-menu .dxbl-menu-item {
		transition: none;
	}
}

/* White text only on sidebar flyouts (dark background via sub-side-menu).
   Top header user dropdown keeps DevExpress default dark text. */
.sub-side-menu .dxbl-menu-dropdown-item,
.sub-side-menu .dxbl-menu-item,
.sub-side-menu .dxbl-menu-item:focus,
.sub-side-menu .dxbl-menu-item:active,
.sub-side-menu .dxbl-menu-item.dxbl-active,
.sub-side-menu .dxbl-menu-item.dxbl-focused {
	background-color: transparent !important;
	background: transparent !important;
	color: rgba(255,255,255,0.85) !important;
}

.sub-side-menu .dxbl-menu-dropdown-item,
.sub-side-menu .dxbl-menu-item {
	transition: background-color 0.12s ease, color 0.12s ease;
}

.sub-side-menu .dxbl-menu-dropdown-item:hover,
.sub-side-menu .dxbl-menu-item:hover {
	background-color: #00d9c5 !important;
	background: #00d9c5 !important;
	color: #1a1d2e !important;
}

.sub-side-menu .dxbl-menu-item::before,
.sub-side-menu .dxbl-menu-item::after,
.sub-side-menu .dxbl-menu-item:hover::before,
.sub-side-menu .dxbl-menu-item:hover::after {
	background-color: transparent !important;
	background: transparent !important;
}

.sub-side-menu .dxbl-menu-item-text-container,
.sub-side-menu .dxbl-menu-item-text,
.sub-side-menu .dxbl-menu-dropdown-item * {
	color: inherit !important;
}

/* Context menus (grid column header, row right-click, standalone) — light theme.
   The dark .dxbl-dropdown-dialog rules above set white text on all dropdown menu items,
   but context menus need dark text on a light background.
   .dxbl-context-menu-dropdown is the DevExpress class for all context menu popups. */
.dxbl-context-menu-dropdown.dxbl-dropdown-dialog .dxbl-dropdown-body {
	background-color: #f8f9fb !important;
	border-radius: 10px;
	overflow: hidden;
}

.dxbl-context-menu-dropdown .dxbl-context-menu-item,
.dxbl-context-menu-dropdown .dxbl-context-menu-item *,
.dxbl-context-menu-dropdown .dxbl-menu-item,
.dxbl-context-menu-dropdown .dxbl-menu-item:focus,
.dxbl-context-menu-dropdown .dxbl-menu-item:active,
.dxbl-context-menu-dropdown .dxbl-menu-item.dxbl-active,
.dxbl-context-menu-dropdown .dxbl-menu-item.dxbl-focused {
	background-color: transparent !important;
	background: transparent !important;
	color: #1a1d2e !important;
}

.dxbl-context-menu-dropdown .dxbl-context-menu-item:hover,
.dxbl-context-menu-dropdown .dxbl-context-menu-item:hover *,
.dxbl-context-menu-dropdown .dxbl-menu-item:hover {
	background-color: #00d9c5 !important;
	background: #00d9c5 !important;
	color: #1a1d2e !important;
}

.dxbl-context-menu-dropdown .dxbl-menu-item::before,
.dxbl-context-menu-dropdown .dxbl-menu-item::after,
.dxbl-context-menu-dropdown .dxbl-menu-item:hover::before,
.dxbl-context-menu-dropdown .dxbl-menu-item:hover::after {
	background-color: transparent !important;
	background: transparent !important;
}

.dxbl-context-menu-dropdown .dxbl-menu-item-text-container,
.dxbl-context-menu-dropdown .dxbl-menu-item-text,
.dxbl-context-menu-dropdown .dxbl-context-menu-item-text {
	color: #1a1d2e !important;
}

/* ===== Top header navigation menu =====
   1. Force white on everything in the nav menu (dark background)
   2. Remove Fluent hover flash + lock sizing to prevent layout shift
   3. THEN restore dark colours inside .search (white background)
   Order matters — search restores MUST come after the white rules. */

/* — Step 1: White text/icons across the whole nav menu — */
.dx-nav-menu .dxbl-menu-item {
	color: white !important;
	opacity: 1 !important;
}

.dx-nav-menu .dxbl-menu-item-text-container,
.dx-nav-menu .dxbl-menu-item-text {
	color: white !important;
}

.dx-nav-menu .dxbl-image {
	color: white !important;
	opacity: 1 !important;
}

/* — Step 2: Remove hover flash + prevent layout shift — */
.dx-nav-menu .dxbl-menu-item,
.dx-nav-menu .dxbl-menu-item:hover,
.dx-nav-menu .dxbl-menu-item:focus,
.dx-nav-menu .dxbl-menu-item:active,
.dx-nav-menu .dxbl-menu-item.dxbl-active,
.dx-nav-menu .dxbl-menu-item.dxbl-focused {
	background-color: transparent !important;
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	transition: none !important;
}

.dx-nav-menu .dxbl-menu-item::before,
.dx-nav-menu .dxbl-menu-item::after,
.dx-nav-menu .dxbl-menu-item:hover::before,
.dx-nav-menu .dxbl-menu-item:hover::after {
	background-color: transparent !important;
	background: transparent !important;
}

.dx-nav-menu .dxbl-btn,
.dx-nav-menu .dxbl-btn:hover,
.dx-nav-menu .dxbl-btn:focus,
.dx-nav-menu .dxbl-btn:active {
	background-color: transparent !important;
	background: transparent !important;
	border-color: transparent !important;
	box-shadow: none !important;
	transition: none !important;
}

.dx-nav-menu .dxbl-btn::before,
.dx-nav-menu .dxbl-btn::after,
.dx-nav-menu .dxbl-btn:hover::before,
.dx-nav-menu .dxbl-btn:hover::after {
	background-color: transparent !important;
	background: transparent !important;
}

.dx-nav-menu .dxbl-menu-item-content,
.dx-nav-menu .dxbl-menu-item-content:hover,
.dx-nav-menu .dxbl-menu-item-container,
.dx-nav-menu .dxbl-menu-item-container:hover {
	background-color: transparent !important;
	background: transparent !important;
}

/* Fix top-menu height to prevent shift when download button appears */
.top-menu {
	height: 50px !important;
	overflow: hidden !important;
}

.top-menu .dx-nav-menu {
	height: 50px !important;
}

/* — Step 3: Restore dark colours inside .search (white bg) —
   These rules MUST appear AFTER the white rules above.
   .dx-nav-menu .search has 3-class specificity, beating the
   2-class .dx-nav-menu .dxbl-image rule from step 1. */
.dx-nav-menu .search,
.dx-nav-menu .search .dxbl-image,
.dx-nav-menu .search .dxbl-edit-btn,
.dx-nav-menu .search button {
	color: #333 !important;
}

.search {
	display: flex !important;
	align-items: center !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

/* ===== Form controls =====
   The Fluent theme adds a darker bottom-border underline on edit controls
   and draws a thick ::after pseudo-element underline on focus.
   Replace with a consistent full-border approach: uniform #e2e8f0 at rest,
   full #0a3d62 (navy) border on focus. Kill the underline entirely. */

/* 1. Make all four borders match at rest — no darker bottom */
.dxbl-text-edit {
	--dxbl-text-edit-underline-color: var(--dxbl-text-edit-border-color);
	--dxbl-text-edit-underline-focused-color: transparent;
}

/* 2. On focus: full teal border on all four sides, no underline */
.dxbl-text-edit.dxbl-focused,
.dxbl-text-edit:focus-within {
	--dxbl-text-edit-underline-color: transparent;
	--dxbl-text-edit-underline-focused-color: transparent;
	--dxbl-text-edit-border-color: #00d9c5;
	border-color: #00d9c5 !important;
	border-width: 2px !important;
}

/* 3. Kill the ::after underline pseudo-element entirely */
.dxbl-text-edit::after,
.dxbl-text-edit.dxbl-focused::after,
.dxbl-text-edit:focus-within::after {
	display: none !important;
	content: none !important;
	height: 0 !important;
	border: none !important;
}

/* 3. Toolbar search — the hover border comes from the DevExpress
   toolbar button styling chain. Match their specificity exactly
   and override with transparent. */
.dxbl-btn-toolbar>.dxbl-adaptive-container-content>.dxbl-btn-group>.dxbl-btn-group>.dxbl-toolbar-item>.dxbl-btn.grid-search-toolbar-item,
.dxbl-btn-toolbar>.dxbl-adaptive-container-content>.dxbl-btn-group>.dxbl-toolbar-item>.dxbl-btn.grid-search-toolbar-item,
.dxbl-btn-toolbar>.dxbl-adaptive-container-content>.dxbl-toolbar-item>.dxbl-btn.grid-search-toolbar-item,
.dxbl-btn-toolbar>.dxbl-btn-group>.dxbl-toolbar-item>.dxbl-btn.grid-search-toolbar-item,
.dxbl-btn-toolbar>.dxbl-toolbar-item>.dxbl-btn.grid-search-toolbar-item,
.dxbl-toolbar>.dxbl-btn-toolbar .dxbl-toolbar-btn.dxbl-btn.grid-search-toolbar-item {
	--dxbl-btn-hover-border-color: transparent;
	--dxbl-btn-active-border-color: transparent;
	--dxbl-btn-border-color: transparent;
	--dxbl-btn-text-border-color: transparent;
	--dxbl-btn-text-hover-border-color: transparent;
	--dxbl-btn-text-active-border-color: transparent;
	--dxbl-btn-text-hover-bg: transparent;
	--dxbl-btn-text-active-bg: transparent;
	--dxbl-btn-hover-bg: transparent;
	--dxbl-btn-active-bg: transparent;
	--dxbl-btn-bg: transparent;
	--dxbl-btn-text-bg: transparent;
	--dxbl-btn-secondary-hover-bg: transparent;
	--dxbl-btn-text-secondary-hover-bg: transparent;
	--dxbl-btn-secondary-active-bg: transparent;
	--dxbl-btn-text-secondary-active-bg: transparent;
	border-color: transparent !important;
	background: transparent !important;
	outline: none !important;
	box-shadow: none !important;
}

/* ===== Grid: override Fluent Mint accent with navy palette =====
   The Fluent theme sets green/teal focus & selection colours via CSS
   custom properties. Override them globally so all grids use the
   POC navy palette: rgba(10,61,98,.10) tint + dark text. */

.dxbl-grid {
	--dxbl-grid-focused-row-bg: rgba(10, 61, 98, 0.10) !important;
	--dxbl-grid-focused-row-color: #1a1d2e !important;
	--dxbl-grid-selection-bg: rgba(10, 61, 98, 0.10) !important;
	--dxbl-grid-selection-color: #1a1d2e !important;
	--dxbl-grid-focused-cell-border-color: #0a3d62 !important;
	--dxbl-grid-hover-bg: rgba(10, 61, 98, 0.07) !important;
	--dxbl-grid-hover-color: #1a1d2e !important;
}

/* Belt-and-braces: force background/color on the actual row elements
   in case the theme applies inline styles or higher-specificity rules. */
.dxbl-grid .dxbl-grid-focused-row,
.dxbl-grid .dxbl-grid-focused-row > td,
.dxbl-grid tr.dxbl-grid-focused-row > td {
	background: rgba(10, 61, 98, 0.10) !important;
	background-color: rgba(10, 61, 98, 0.10) !important;
	color: #1a1d2e !important;
}

.dxbl-grid .dxbl-grid-selected-row,
.dxbl-grid .dxbl-grid-selected-row > td,
.dxbl-grid tr.dxbl-grid-selected-row > td {
	background: rgba(10, 61, 98, 0.10) !important;
	background-color: rgba(10, 61, 98, 0.10) !important;
	color: #1a1d2e !important;
}

/* Hover */
.dxbl-grid .dxbl-grid-data-row:hover > td,
.dxbl-grid tr:hover > td {
	background: rgba(10, 61, 98, 0.07) !important;
	background-color: rgba(10, 61, 98, 0.07) !important;
}

/* ===== Grid checkbox visibility =====
   Rows are now light-background, so darken the tick for contrast.
   No invert needed on focused/selected rows (they're also light). */

/* Darker tick + stronger border on all rows */
.dxbl-grid .dxbl-checkbox .dxbl-checkbox-check-element {
	filter: saturate(2) brightness(0.7) !important;
}

/* ===== Splitter — slim modern separator =====
   Replace the chunky default DevExpress splitter bar with a thin,
   subtle divider that matches the POC border palette. */

/* The separator bar */
.dxbl-splitter-separator {
	background: #f0f4f8 !important;
	flex-basis: 6px !important;
	min-width: 6px !important;
	min-height: 6px !important;
	border: none !important;
	margin: 0 !important;
	padding: 0 !important;
	transition: background 0.15s !important;
	position: relative;
}

.dxbl-splitter-separator:hover {
	background: rgba(10, 61, 98, 0.08) !important;
}

/* The visible line inside the separator */
.dxbl-splitter-separator::before {
	content: "" !important;
	position: absolute !important;
	background: #e2e8f0 !important;
	border-radius: 1px !important;
	transition: background 0.15s !important;
}

.dxbl-splitter-separator:hover::before {
	background: #0a3d62 !important;
}

/* Vertical splitter (panes stacked top/bottom) — horizontal line */
.dxbl-splitter[style*="flex-direction: column"] > .dxbl-splitter-separator::before,
.dxbl-splitter-separator-horizontal::before,
.dxbl-splitter .dxbl-splitter-separator[style*="cursor: row-resize"]::before {
	left: 50% !important;
	transform: translateX(-50%) !important;
	width: 40px !important;
	height: 3px !important;
	top: 50% !important;
	margin-top: -1.5px !important;
}

/* Horizontal splitter (panes side by side) — vertical line */
.dxbl-splitter[style*="flex-direction: row"] > .dxbl-splitter-separator::before,
.dxbl-splitter-separator-vertical::before,
.dxbl-splitter .dxbl-splitter-separator[style*="cursor: col-resize"]::before {
	top: 50% !important;
	transform: translateY(-50%) !important;
	height: 40px !important;
	width: 3px !important;
	left: 50% !important;
	margin-left: -1.5px !important;
}

/* Hide the default collapse/expand arrow buttons */
.dxbl-splitter-separator .dxbl-splitter-btn,
.dxbl-splitter-separator .dxbl-splitter-collapse-prev-btn,
.dxbl-splitter-separator .dxbl-splitter-collapse-next-btn,
.dxbl-splitter-separator button {
	display: none !important;
}

/* Splitter pane content should scroll within the pane, not overflow it */
.dxbl-splitter-pane-content {
	overflow: auto;
}

/* Inside splitter panes: equalise the gap above and below the separator.
   The toolbar's top border + padding + border-radius curves add space
   below the separator that doesn't exist above it. */
.dxbl-splitter-pane .toolbar-container {
	border-top: none !important;
	padding-top: 0 !important;
	border-radius: 0 !important;
}