/* input(204,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 — LW+CL:11.06.26 #39 BUG1+BUG2
   max-height + overflow-y:auto prevents the flyout from bleeding off the bottom of
   the viewport (BUG1) and lets DX fit the constrained height above the anchor when
   the module is near the bottom of the nav (BUG2). */
.sub-side-menu .dxbl-dropdown-body {
	border-radius: 10px;
	overflow-x: hidden;
	overflow-y: auto;
	max-height: calc(100vh - 80px);
	background-color: #1a1d2e !important;
	scrollbar-width: thin;
	scrollbar-color: rgba(255,255,255,0.25) transparent;
}

.sub-side-menu .dxbl-dropdown-body::-webkit-scrollbar {
	width: 4px;
}
.sub-side-menu .dxbl-dropdown-body::-webkit-scrollbar-track {
	background: transparent;
}
.sub-side-menu .dxbl-dropdown-body::-webkit-scrollbar-thumb {
	background: rgba(255,255,255,0.25);
	border-radius: 2px;
}

/* 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 on the COLD first
   open, while the flyout appears before the required dwell time. The flyout stays in the DOM
   (DX's state machine stays consistent) but is hidden until the dwell timer fires.
   animation:none prevents the appear animation from consuming the opacity:0 start frame.
   Hidden via opacity only — never pointer-events:none (that breaks DX's hover hit-test).
   Not applied during flyout switching: see the header note in enSynergy.js (#256). */
.dxbl-dropdown-dialog.menu-flyout--suppressed {
	opacity: 0 !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;
}