/* ==========================================================================
   NexRx — shell skeleton

   Minimal app-shell rules: body baseline + splash-screen + scrollbar polish.
   Component-level shell rules (.topbar, .sidebar, .card, .actionbar) will be
   ported from the design bundle in a follow-up customization PR. This file
   is intentionally small in this initial PR; it only relocates the inline
   splash <style> block out of Pages/_Host.cshtml so brand colors do not live
   in the layout.

   Depends on tokens defined in nexrx.tokens.css (loaded first via
   ThemeSwitcher CustomUrls).
   ========================================================================== */

body {
  font-family: var(--font-ui);
  color: var(--ink-900);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
}

/* Bootstrap's `.list-group-item { color: var(--bs-list-group-color) = #212529 }`
   would otherwise out-specify body's ink-900 inside card lists (e.g. the custom
   ScanSession card component). Force NexRx ink colour back. */
body .list-group-item {
  color: var(--ink-900);
  background-color: transparent;
}

/* ---------- Display headings ---------- */
h1, h2, h3, h4, h5, h6,
.xaf-view-caption-sm,
.xaf-object-caption {
  font-family: var(--font-display);
}

/* ---------- App shell (ArexMainFormTemplateComponent) ---------- */
#main-window-template-component {
  background: var(--canvas);
}
#main-window-template-component .header {
  background: var(--navy-800);
}
#main-window-template-component .xaf-sidebar {
  background: var(--white);
  border-right: 1px solid var(--ink-200);
}

/* ---------- Left navigation (XAF DX accordion) ----------
   Default DX accordion uses bootstrap-grey (#212529) text at 10.5–12.25px
   weight 400 and a teal-100-ish active fill that doesn't match the NexRx
   palette. Anchor headers (group captions) to Lexend semibold navy-900
   and items to Inter medium ink-700; active item picks up teal-50 fill
   with a 3 px teal-500 left rail. */
.xaf-sidebar .dxbl-group-header.dxbl-accordion-group-header {
  font-family: var(--font-display) !important;
  font-size: 12.5px !important;
  font-weight: 600 !important;
  color: var(--navy-900) !important;
  letter-spacing: 0;
}
.xaf-sidebar .xaf-nav-item .dxbl-accordion-item-content,
.xaf-sidebar a.dxbl-accordion-item-content {
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  color: var(--ink-700) !important;
}
/* Hover — no background fill, just darken the label text to navy-900
   so the row reads as interactive without a chunky pill behind it. */
.xaf-sidebar .xaf-nav-item.dxbl-accordion-item:not(.dxbl-active):hover,
.xaf-sidebar .xaf-nav-item.clickable-xaf-nav-item:not(.dxbl-active):hover,
.xaf-sidebar div > div.xaf-nav-item.clickable-xaf-nav-item.dxbl-accordion-item:not(.dxbl-active):hover {
  background: transparent !important;
}
.xaf-sidebar .xaf-nav-item.dxbl-accordion-item:not(.dxbl-active):hover .dxbl-accordion-item-content,
.xaf-sidebar .xaf-nav-item.clickable-xaf-nav-item:not(.dxbl-active):hover .dxbl-accordion-item-content {
  color: var(--navy-900) !important;
}
/* arex.bs5.css ships
   `div > div.xaf-nav-item.clickable-xaf-nav-item.dxbl-accordion-item.dxbl-active
    { background: rgb(211,240,246) !important }` (legacy teal). Match
   its selector + add `.xaf-sidebar` ancestor to beat its specificity. */
.xaf-sidebar div > div.xaf-nav-item.clickable-xaf-nav-item.dxbl-accordion-item.dxbl-active,
.xaf-sidebar .xaf-nav-item.dxbl-accordion-item.dxbl-active,
.xaf-sidebar .xaf-nav-item.clickable-xaf-nav-item.dxbl-active {
  background: var(--teal-50) !important;
  box-shadow: inset 3px 0 0 var(--teal-500);
}
.xaf-sidebar .xaf-nav-item.dxbl-active .dxbl-accordion-item-content,
.xaf-sidebar a.dxbl-accordion-item-content.dxbl-active {
  color: var(--navy-900) !important;
  font-weight: 600 !important;
}

/* Sidebar filter search box — match NexRx text-edit style */
.xaf-sidebar .dxbl-search-box .dxbl-text-edit-input,
.xaf-sidebar .dxbl-search-box input {
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  color: var(--ink-700) !important;
}
#main-window-template-component .main-toolbar {
  background: var(--white);
  border-bottom: 1px solid var(--ink-200);
}
#main-window-template-component .about-info {
  color: var(--ink-500);
}
#main-window-template-component .about-info a {
  color: var(--teal-700);
}

/* ---------- Settings flyout (gear → Compact / Language) ----------
   `.theme-settings .settings-bar.card` is a white panel nested inside
   the navy `.header`. Without an explicit `color` it inherits the
   header's white text, so the labels ("Size Mode", "Select a language")
   render as white-on-white and are invisible until focused. Re-anchor
   the panel and its labels to ink-700 / navy-900. */
.theme-settings .settings-bar.card,
.theme-settings .settings-bar.card .nav-item,
.theme-settings .settings-bar.card .nav-item.theme-group {
  color: var(--ink-700);
}
.theme-settings .settings-bar.card .nav-item.theme-group {
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
}

/* arex.bs5.css ships `.header-right-side .dxbl-image { color: white;
   fill: white !important }` for the navy-header glyphs (user, gear).
   That rule wins inside the settings flyout too, painting the
   dropdown chevrons white on a white panel — invisible. Restore a
   dark stroke / fill within the flyout. */
.header-right-side .settings-bar.card .dxbl-image,
.header-right-side .settings-bar.card svg.dxbl-image {
  color: var(--ink-700) !important;
  fill: currentColor !important;
  stroke: currentColor !important;
}

/* ==========================================================================
   Main toolbar — page-level XAF action bar (.main-toolbar)

   Maps the design's `.actionbar` pattern onto the brand-owned `.main-toolbar`
   wrapper that the Razor templates emit (ArexMainFormTemplateComponent.razor,
   ArexApplicationWindowTemplateComponent.razor). XAF's DxToolbarAdapter keeps
   rendering whatever button / split-button / dropdown variants it likes; we
   only repaint them.

   Class-mapping (XAF/Bootstrap → design):
     .btn-outline-warning / .dxbl-btn-outline-warning  →  .btn--ghost
     .btn-primary         / .dxbl-btn-primary          →  .btn--primary
     .btn-success         / .dxbl-btn-success          →  .btn--accent
     .btn-secondary       / .dxbl-btn-secondary        →  .btn (text)

   Why the templates' Bootstrap utility classes (py-3 px-2 px-sm-3) are
   overridden here instead of edited in the Razor: the Razor wrappers are also
   used by tabbed-MDI / nested templates and changing them risks layout
   regressions in views we are not redesigning yet. A higher-specificity
   override is contained and reversible.
   ========================================================================== */

/* ---------- Surface — floating card ----------
   Design renders `.cmdbar` as a self-contained card: white bg, ink-200 border
   on all sides, 10px radius, soft drop shadow, ~46px tall, sitting above the
   content area with breathing room around it. We translate that to the
   templates' brand-owned `.main-toolbar` wrapper.

   Specificity note: the templates apply `.py-3 .px-2 .px-sm-3` Bootstrap
   utilities (combined specificity 0,3,0) on the same node. We win with an
   id-prefixed selector (`#main-window-template-component .main-toolbar` =
   1,1,0) instead of touching the Razor. */
/* `:not(:empty)` guard: XAF emits an empty `.main-toolbar` placeholder
   inside popup bodies (the action toolbar slot is left blank for some
   dialogs). Without the guard it paints a 2 px white strip with
   ink-200 border / 10 px radius that reads as a stray gray bar inside
   the popup. */
#main-window-template-component .main-toolbar:not(:empty),
.nested-frame .main-toolbar:not(:empty),
.main-toolbar:not(:empty) {
  background: var(--white);
  border: 1px solid var(--ink-200);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-card);
  margin: 12px 16px 14px;       /* 14px bottom matches design's cmdbar→card gap */
  display: flex;
  align-items: center;
  flex-wrap: wrap;
}

#main-window-template-component .main-toolbar,
.nested-frame .main-toolbar,
.main-toolbar.main-toolbar {
  padding: 6px !important;
  gap: 6px;
}
@media (max-width: 575.98px) {
  #main-window-template-component .main-toolbar,
  .nested-frame .main-toolbar,
  .main-toolbar.main-toolbar {
    padding: 6px !important;
    margin: 8px 8px 0;
  }
}

/* DxToolbarAdapter wraps each PredefinedCategory in `.dxbl-toolbar-group`.
   Draw a 1×24 ink-200 divider before every group after the first to match
   the design's `.cmdbar__divider`. The split-button group (`.dxbl-btn-split`
   internally — adjacent main + dropdown chevron) is intentionally not split
   by a divider since it represents a single logical action. */
.main-toolbar .dxbl-btn-toolbar > .dxbl-toolbar-group + .dxbl-toolbar-group::before,
.main-toolbar .dxbl-btn-toolbar > .dxbl-toolbar-group + .dxbl-toolbar-item + .dxbl-toolbar-group::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 24px;
  background: var(--ink-200);
  margin: 4px 2px;
  vertical-align: middle;
  align-self: center;
  flex-shrink: 0;
}
.main-toolbar .dxbl-btn-toolbar > .dxbl-toolbar-group {
  display: inline-flex;
  align-items: center;
}

.main-toolbar .actionbar__spacer {
  flex: 1;
}

/* ---------- Icons inherit from their button ----------
   Two icon delivery paths in XAF Blazor:
   (a) Vector SVG — `<svg class="dxbl-svg-icon">` or inline `<svg>`. We force
       `fill / stroke: currentColor` so they follow the button's text color.
   (b) Raster PNG/JPG — rendered as `<img class="dxbl-image">` (XAF default
       for actions registered via `ImageName` rather than `SvgImageName`).
       Color cannot be applied to bitmap pixels via `color` / `fill`, so
       we drain hue with a grayscale filter and dim to roughly ink-700 so
       the orange warning-style raster icons fall back to neutral. The
       cleaner long-term fix is to migrate those actions to `SvgImageName`
       in their view-controllers. */
.main-toolbar .dxbl-svg-icon,
.main-toolbar svg,
.nested-toolbar .dxbl-svg-icon,
.nested-toolbar svg {
  color: currentColor;
  fill: currentColor;
  stroke: currentColor;
}
.main-toolbar .dxbl-svg-icon path,
.main-toolbar svg path,
.nested-toolbar .dxbl-svg-icon path,
.nested-toolbar svg path {
  fill: currentColor;
}
.main-toolbar img.dxbl-image,
.main-toolbar img.xaf-toolbar-item-icon,
.nested-toolbar img.dxbl-image,
.nested-toolbar img.xaf-toolbar-item-icon,
.dxbl-toolbar-dropdown img.dxbl-image,
.dxbl-toolbar-dropdown img.xaf-toolbar-item-icon {
  filter: grayscale(100%) brightness(.45) contrast(1.4);
}
.main-toolbar .dxbl-btn:hover img.dxbl-image,
.main-toolbar .dxbl-btn:hover img.xaf-toolbar-item-icon,
.nested-toolbar .dxbl-btn:hover img.dxbl-image,
.nested-toolbar .dxbl-btn:hover img.xaf-toolbar-item-icon,
.dxbl-toolbar-dropdown .dxbl-btn:hover img.dxbl-image,
.dxbl-toolbar-dropdown .dxbl-btn:hover img.xaf-toolbar-item-icon {
  filter: grayscale(100%) brightness(.2) contrast(1.4);
}

/* Primary / success buttons (Save etc.) sit on a navy/teal dark
   background in both default and hover state. The shared icon filter
   would darken the icon to brightness 0.45 / 0.2, leaving a near-black
   glyph on a dark fill — invisible. Flip primary/success icons to
   pure white in all states. */
.main-toolbar .dxbl-btn.dxbl-btn-primary img.dxbl-image,
.main-toolbar .dxbl-btn.dxbl-btn-primary img.xaf-toolbar-item-icon,
.main-toolbar .dxbl-btn.dxbl-btn-success img.dxbl-image,
.main-toolbar .dxbl-btn.dxbl-btn-success img.xaf-toolbar-item-icon,
.main-toolbar .dxbl-btn.dxbl-btn-primary:hover img.dxbl-image,
.main-toolbar .dxbl-btn.dxbl-btn-primary:hover img.xaf-toolbar-item-icon,
.main-toolbar .dxbl-btn.dxbl-btn-success:hover img.dxbl-image,
.main-toolbar .dxbl-btn.dxbl-btn-success:hover img.xaf-toolbar-item-icon,
.nested-toolbar .dxbl-btn.dxbl-btn-primary img.dxbl-image,
.nested-toolbar .dxbl-btn.dxbl-btn-primary img.xaf-toolbar-item-icon,
.nested-toolbar .dxbl-btn.dxbl-btn-primary:hover img.dxbl-image,
.nested-toolbar .dxbl-btn.dxbl-btn-primary:hover img.xaf-toolbar-item-icon {
  filter: brightness(0) invert(1) !important;
}
.main-toolbar .dxbl-btn.dxbl-disabled img.dxbl-image,
.main-toolbar .dxbl-btn.dxbl-disabled img.xaf-toolbar-item-icon {
  filter: grayscale(100%) brightness(.7) opacity(.5);
}

/* ---------- Buttons (shared baseline) ----------
   Empirical: at runtime XAF emits these classes on toolbar buttons:
     .dxbl-btn.dxbl-btn-secondary.dxbl-sm                  → default ghost
     .dxbl-btn.dxbl-btn-secondary.dxbl-sm.dxbl-btn-split-dropdown
     .dxbl-btn.dxbl-btn-outline-secondary.dxbl-sm.dxbl-edit-btn-dropdown
     .dxbl-btn.dxbl-btn-secondary.dxbl-disabled.dxbl-sm    → disabled state

   Two override paths are needed:
   1) DX `.dxbl-btn` reads padding / border / font from `--dxbl-btn-*` CSS
      variables. Setting those on the toolbar wins cleanly without forcing.
   2) `arex.bs5.css` carries a legacy `* { font-size: 14px !important;
      color: rgb(0, 30, 75) !important }` rule that wins via `!important` on
      `*`. Anything color/font-size related must therefore also use
      `!important` until that legacy rule is retired. */
#main-window-template-component .main-toolbar .dxbl-btn,
.nested-frame .main-toolbar .dxbl-btn,
.main-toolbar.main-toolbar .dxbl-btn {
  /* DX CSS variables (read by .dxbl-btn rule) */
  --dxbl-btn-padding-x: 11px;
  --dxbl-btn-padding-y: 0;
  --dxbl-btn-font-size: 12.5px;
  --dxbl-btn-font-family: var(--font-ui);
  --dxbl-btn-font-weight: 500;
  --dxbl-btn-line-height: 1;
  --dxbl-btn-border-radius: 6px;
  --dxbl-btn-border-color: transparent;
  --dxbl-btn-color: var(--ink-700);
  --dxbl-btn-bg: transparent;
  --dxbl-btn-hover-color: var(--navy-900);
  --dxbl-btn-hover-bg: var(--ink-100);
  --dxbl-btn-hover-border-color: transparent;
  --dxbl-btn-image-spacing: 7px;

  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 32px !important;
  min-height: 32px;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease, box-shadow .12s ease;

  /* Direct overrides — needed because (a) DX `.dxbl-sm` rewrites the CSS
     vars after our scope, (b) bootstrap-external.bs5.min.css has multiple
     `!important` rules on padding/border/radius for split-button geometry,
     (c) `arex.bs5.css * { font-size, color !important }` blocks the
     inherited path, and (d) `arex.bs5.css .dxbl-btn-secondary
     { box-shadow: 0 2px 3px rgba(0,0,0,.1) !important }` puts a drop shadow
     on every toolbar button (visible especially around split-button seams).
     Design spec: 32px height, 6px radius, no border, no shadow, font
     weight 500 (ghost) bumped to 600 only on primary/accent. */
  padding: 0 11px !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  font-size: 12.5px !important;
  color: var(--ink-700) !important;
  font-weight: 500 !important;
  font-family: var(--font-ui) !important;
  box-shadow: none !important;
}

/* ---------- Ghost (default list-view actions: .dxbl-btn-secondary) ----------
   Design uses no border + transparent bg on ghost — buttons are pure text+icon
   with subtle hover bg. */
#main-window-template-component .main-toolbar .dxbl-btn.dxbl-btn-secondary,
#main-window-template-component .main-toolbar .dxbl-btn.dxbl-btn-outline-secondary,
.nested-frame .main-toolbar .dxbl-btn.dxbl-btn-secondary,
.nested-frame .main-toolbar .dxbl-btn.dxbl-btn-outline-secondary,
.main-toolbar.main-toolbar .dxbl-btn.dxbl-btn-secondary,
.main-toolbar.main-toolbar .dxbl-btn.dxbl-btn-outline-secondary {
  color: var(--ink-700) !important;
  background-color: transparent !important;
  border-color: transparent !important;
}
#main-window-template-component .main-toolbar .dxbl-btn.dxbl-btn-secondary:hover,
#main-window-template-component .main-toolbar .dxbl-btn.dxbl-btn-outline-secondary:hover,
.nested-frame .main-toolbar .dxbl-btn.dxbl-btn-secondary:hover,
.nested-frame .main-toolbar .dxbl-btn.dxbl-btn-outline-secondary:hover,
.main-toolbar.main-toolbar .dxbl-btn.dxbl-btn-secondary:not(.dxbl-disabled):hover,
.main-toolbar.main-toolbar .dxbl-btn.dxbl-btn-outline-secondary:not(.dxbl-disabled):hover {
  color: var(--navy-900) !important;
  background-color: var(--ink-100) !important;
  border-color: transparent !important;
}
#main-window-template-component .main-toolbar .dxbl-btn.dxbl-btn-secondary:focus-visible,
#main-window-template-component .main-toolbar .dxbl-btn.dxbl-btn-outline-secondary:focus-visible {
  outline: none;
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-100);
}

/* Legacy alias (keep for any pre-25.x emission in nested templates) */
.main-toolbar .btn-outline-warning,
.main-toolbar .dxbl-btn-outline-warning {
  color: var(--ink-700);
  background-color: var(--white);
  border-color: var(--ink-200);
}

/* ---------- Primary (Save, primary New) ---------- */
#main-window-template-component .main-toolbar .dxbl-btn.dxbl-btn-primary,
.nested-frame .main-toolbar .dxbl-btn.dxbl-btn-primary,
.main-toolbar.main-toolbar .dxbl-btn.dxbl-btn-primary,
.main-toolbar .btn-primary,
.btn.btn-primary {
  background-color: var(--navy-800) !important;
  border-color: var(--navy-800) !important;
  color: var(--white) !important;
  font-weight: 600 !important;
}
#main-window-template-component .main-toolbar .dxbl-btn.dxbl-btn-primary:hover,
.nested-frame .main-toolbar .dxbl-btn.dxbl-btn-primary:hover,
.main-toolbar.main-toolbar .dxbl-btn.dxbl-btn-primary:not(.dxbl-disabled):hover,
.main-toolbar .btn-primary:hover {
  background-color: var(--navy-700);
  border-color: var(--navy-700);
  color: var(--white);
}
#main-window-template-component .main-toolbar .dxbl-btn.dxbl-btn-primary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--teal-100);
}

/* ---------- Accent (affirmative finalize: FMD Verify-OK, Dispense) ---------- */
#main-window-template-component .main-toolbar .dxbl-btn.dxbl-btn-success,
.nested-frame .main-toolbar .dxbl-btn.dxbl-btn-success,
.main-toolbar.main-toolbar .dxbl-btn.dxbl-btn-success,
.main-toolbar .btn-success,
.btn.btn-success {
  background-color: var(--lime-500) !important;
  border-color: var(--lime-500) !important;
  color: var(--navy-900) !important;
  font-weight: 600 !important;
}
#main-window-template-component .main-toolbar .dxbl-btn.dxbl-btn-success:hover,
.nested-frame .main-toolbar .dxbl-btn.dxbl-btn-success:hover,
.main-toolbar.main-toolbar .dxbl-btn.dxbl-btn-success:not(.dxbl-disabled):hover,
.main-toolbar .btn-success:hover {
  background-color: var(--lime-600);
  border-color: var(--lime-600);
  color: var(--navy-900);
}
#main-window-template-component .main-toolbar .dxbl-btn.dxbl-btn-success:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--lime-200);
}

/* ---------- Disabled state (uniform across all variants) ---------- */
#main-window-template-component .main-toolbar .dxbl-btn.dxbl-disabled,
.nested-frame .main-toolbar .dxbl-btn.dxbl-disabled,
.main-toolbar.main-toolbar .dxbl-btn.dxbl-disabled,
.main-toolbar.main-toolbar .dxbl-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}

/* ---------- Split buttons (.dxbl-btn-split) ----------
   DX wraps a split action in `.dxbl-btn-split` with two adjacent `.dxbl-btn`
   children: the main action + a small chevron-only dropdown sibling. By
   default Bootstrap-external paints them as a beige rounded group with a
   1px gray border + drop shadow + white bg, which fights both our flat
   ghost look and our floating-card surface. Strip all of that and replace
   with a single 6px-rounded ghost zone with a 1px ink-200 divider between
   main and chev. */
#main-window-template-component .main-toolbar .dxbl-btn-split,
.main-toolbar.main-toolbar .dxbl-btn-split {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 6px !important;
  display: inline-flex;
  align-items: center;
}
#main-window-template-component .main-toolbar .dxbl-btn-split > .dxbl-btn,
.main-toolbar.main-toolbar .dxbl-btn-split > .dxbl-btn {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  margin: 0 !important;
}
/* Main half — left-rounded only, chev half — right-rounded only. */
#main-window-template-component .main-toolbar .dxbl-btn-split > .dxbl-btn:first-child,
.main-toolbar.main-toolbar .dxbl-btn-split > .dxbl-btn:first-child {
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-top-left-radius: 6px !important;
  border-bottom-left-radius: 6px !important;
  padding-right: 8px !important;
}
#main-window-template-component .main-toolbar .dxbl-btn-split > .dxbl-btn.dxbl-btn-split-dropdown,
#main-window-template-component .main-toolbar .dxbl-btn-split > .dxbl-btn:last-child,
.main-toolbar.main-toolbar .dxbl-btn-split > .dxbl-btn.dxbl-btn-split-dropdown,
.main-toolbar.main-toolbar .dxbl-btn-split > .dxbl-btn:last-child {
  border-top-left-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-top-right-radius: 6px !important;
  border-bottom-right-radius: 6px !important;
  padding: 0 8px !important;
  min-width: 28px;
  position: relative;
}
/* Inner 1px ink-200 divider between main and chev. */
#main-window-template-component .main-toolbar .dxbl-btn-split > .dxbl-btn.dxbl-btn-split-dropdown::before,
#main-window-template-component .main-toolbar .dxbl-btn-split > .dxbl-btn:last-child::before,
.main-toolbar.main-toolbar .dxbl-btn-split > .dxbl-btn.dxbl-btn-split-dropdown::before,
.main-toolbar.main-toolbar .dxbl-btn-split > .dxbl-btn:last-child::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--ink-200);
}
/* Hover should highlight only the hovered half, but DX paints both halves
   on hover of either. Defeat that — paint the half that's actually under the
   pointer. */
.main-toolbar.main-toolbar .dxbl-btn-split > .dxbl-btn:not(.dxbl-disabled):hover {
  background: var(--ink-100) !important;
  color: var(--navy-900) !important;
}

/* Dropdown chevron icon — neutral ink-500 by default, follow currentColor on
   the active button on hover. */
.main-toolbar.main-toolbar .dxbl-image.dxbl-toolbar-dropdown-toggle,
.main-toolbar.main-toolbar .dxbl-image.dxbl-edit-btn-dropdown-icon {
  color: var(--ink-500);
}
.main-toolbar.main-toolbar .dxbl-btn:hover .dxbl-image.dxbl-toolbar-dropdown-toggle,
.main-toolbar.main-toolbar .dxbl-btn:hover .dxbl-image.dxbl-edit-btn-dropdown-icon {
  color: var(--ink-900);
}

/* ---------- View-variant combobox (e.g. "Comprehensive view") ----------
   Rendered by XAF as `<DXBL-COMBO-BOX class="dxbl-text-edit dxbl-sm">`. The
   design treats this as a ghost dropdown action — no surrounding box, just
   text + chevron, on the toolbar's white card surface. We strip the default
   white-on-white box chrome so it reads as part of the button row. */
#main-window-template-component .main-toolbar dxbl-combo-box.dxbl-text-edit,
.main-toolbar.main-toolbar dxbl-combo-box.dxbl-text-edit,
#main-window-template-component .main-toolbar .dxbl-text-edit:not(.dxbl-search-box):not(.dxbl-search-edit),
.main-toolbar.main-toolbar .dxbl-text-edit:not(.dxbl-search-box):not(.dxbl-search-edit) {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-radius: 6px !important;
  color: var(--ink-700) !important;
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 0 11px !important;
  height: 32px !important;
  min-height: 32px !important;
  box-shadow: none !important;
}
/* Defeat the inner `.dxbl-text-edit-template` mini-radius leak (2.625px) */
.main-toolbar .dxbl-text-edit .dxbl-text-edit-template {
  border-radius: 0 !important;
  background: transparent !important;
}
/* Hover — match button hover */
#main-window-template-component .main-toolbar dxbl-combo-box.dxbl-text-edit:hover,
.main-toolbar.main-toolbar dxbl-combo-box.dxbl-text-edit:hover,
.main-toolbar .dxbl-text-edit:not(.dxbl-search-box):hover {
  background: var(--ink-100) !important;
  color: var(--navy-900) !important;
}

/* ---------- Inline full-text search box ----------
   XAF's filter / search action renders as `.dxbl-search-box` (or generic
   `.dxbl-text-edit.dxbl-search-edit`). This stays boxed white+border per
   the design's `.cmdbar__search` pattern. */
#main-window-template-component .main-toolbar .dxbl-search-box,
#main-window-template-component .main-toolbar .dxbl-search-edit,
.main-toolbar.main-toolbar .dxbl-search-box,
.main-toolbar.main-toolbar .dxbl-search-edit {
  background: var(--white) !important;
  border: 1px solid var(--ink-200) !important;
  border-radius: 6px !important;
  color: var(--ink-700) !important;
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 0 10px !important;
  height: 32px !important;
  min-height: 32px !important;
}
.main-toolbar .dxbl-search-box:focus-within,
.main-toolbar .dxbl-text-edit:focus-within {
  border-color: var(--teal-500);
  box-shadow: 0 0 0 3px var(--teal-100);
}
.main-toolbar .dxbl-search-box input,
.main-toolbar .dxbl-text-edit input {
  color: var(--ink-900);
  background: transparent;
  border: 0;
  outline: 0;
  font: inherit;
}
.main-toolbar .dxbl-search-box input::placeholder,
.main-toolbar .dxbl-text-edit input::placeholder {
  color: var(--ink-400);
}
/* The search/clear icon button inside the search edit — neutralize the
   orange warning hue so it follows the input's ink-500 baseline. */
.main-toolbar .dxbl-search-box .dxbl-btn,
.main-toolbar .dxbl-text-edit .dxbl-btn,
.main-toolbar .dxbl-search-edit-icon,
.main-toolbar .dxbl-clear-button {
  color: var(--ink-500);
  background: transparent;
  border: 0;
  padding: 0 4px;
}
.main-toolbar .dxbl-search-box .dxbl-btn:hover,
.main-toolbar .dxbl-text-edit .dxbl-btn:hover {
  color: var(--ink-900);
  background: transparent;
}
@media (min-width: 576px) {
  .main-toolbar .dxbl-search-box,
  .main-toolbar .dxbl-text-edit.dxbl-search-edit {
    width: 280px;
  }
}

/* ==========================================================================
   Nested toolbar — embedded list views inside Detail Views (.nested-toolbar)

   Same button vocabulary, but the surface is transparent and unbordered so
   the embedded toolbar visually integrates with its parent card. Reuses all
   button/group/search rules above by class inheritance — only the surface
   and outer padding differ.
   ========================================================================== */
.nested-toolbar {
  background: transparent;
  border-bottom: 0;
  padding: 6px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.nested-toolbar > .dxbl-toolbar-item-group + .dxbl-toolbar-item-group::before,
.nested-toolbar > .dxbl-toolbar-item-container + .dxbl-toolbar-item-container::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 22px;
  background: var(--ink-200);
  margin: 0 4px;
  vertical-align: middle;
}
.nested-toolbar .btn,
.nested-toolbar .dxbl-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border-radius: var(--r-md);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 600;
  line-height: 1.2;
  border: 1px solid transparent;
  white-space: nowrap;
}
.nested-toolbar .btn-outline-warning,
.nested-toolbar .dxbl-btn-outline-warning {
  color: var(--ink-700);
  background-color: var(--white);
  border-color: var(--ink-200);
}
.nested-toolbar .btn-outline-warning:hover,
.nested-toolbar .dxbl-btn-outline-warning:hover {
  color: var(--ink-900);
  background-color: var(--ink-50);
  border-color: var(--ink-300);
}
.nested-toolbar .btn-primary,
.nested-toolbar .dxbl-btn-primary {
  background-color: var(--navy-800);
  border-color: var(--navy-800);
  color: var(--white);
}
.nested-toolbar .btn-primary:hover,
.nested-toolbar .dxbl-btn-primary:hover {
  background-color: var(--navy-700);
  border-color: var(--navy-700);
}
.nested-toolbar .btn-success,
.nested-toolbar .dxbl-btn-success {
  background-color: var(--lime-500);
  border-color: var(--lime-500);
  color: var(--navy-900);
}
.nested-toolbar .btn-success:hover,
.nested-toolbar .dxbl-btn-success:hover {
  background-color: var(--lime-600);
  border-color: var(--lime-600);
}

/* ---------- Splash / loading screen ----------
   Mirror of the critical inline <style> in Pages/_Host.cshtml. The inline copy
   is required for FOUC prevention and XAF splash-dismissal timing (see comment
   in _Host.cshtml). This copy keeps the theme bundle self-contained for tooling
   that loads CSS without the host page. Design source:
   .claude/design-baseline/NexRx-Splash.html. */
#applicationLoadingPanel {
  position: relative;
  overflow: hidden;
  background: radial-gradient(1200px 700px at 50% 30%, #FFFFFF 0%, #F5F8FB 55%, #E9EFF5 100%);
  color: var(--navy-900);
  font-family: var(--font-ui);
}
#applicationLoadingPanel::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(15, 31, 75, 0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 80%);
  mask-image: radial-gradient(ellipse 70% 70% at 50% 50%, #000, transparent 80%);
  pointer-events: none;
}
#applicationLoadingPanel .loading-border,
#applicationLoadingPanel .loading-floated-circle {
  display: none !important;
}
#applicationLoadingPanel .loading {
  width: 180px !important;
  height: auto !important;
  position: relative !important;
  z-index: 1;
}
#applicationLoadingPanel .loading-image-wrapper,
#applicationLoadingPanel #loadingBackground.loading-image-wrapper {
  background: transparent !important;
  background-color: transparent !important;
  border-radius: 0 !important;
  padding: 0 !important;
  color: inherit !important;
}
#applicationLoadingPanel .loading-image {
  width: 180px !important;
  height: auto !important;
  filter: drop-shadow(0 12px 28px rgba(15, 31, 75, 0.12));
  animation: nexrxSplashFloat 3s ease-in-out infinite;
}
@keyframes nexrxSplashFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
#applicationLoadingPanel .loading-caption {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  position: relative;
  z-index: 1;
  margin-top: 32px !important;
  font-family: var(--font-ui);
  font-size: 11px !important;
  font-weight: 500 !important;
  color: var(--ink-500);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
#applicationLoadingPanel .loading-caption::before {
  content: "";
  width: 220px;
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(90deg,
      transparent 0%,
      transparent 38%,
      var(--teal-500) 48%,
      var(--lime-500) 56%,
      transparent 66%,
      transparent 100%) -150% 0 / 250% 100% no-repeat,
    rgba(15, 31, 75, 0.06);
  animation: nexrxSplashSlide 1.6s ease-in-out infinite;
}
@keyframes nexrxSplashSlide {
  0%   { background-position: -150% 0, 0 0; }
  100% { background-position: 100% 0, 0 0; }
}
#loadingBackground {
  background-color: transparent !important;
}

/* ==========================================================================
   DevExpress dropdown popups (combobox / view-variant selector) -----------

   When a `<DXBL-COMBO-BOX>` opens its list, DX appends a body-level container
   (`<DXBL-DROPDOWN-DIALOG class="dxbl-dropdown-dialog dxbl-edit-dropdown">`)
   with a list-box inside. The DX 25.x default selected-item style is a
   navy-filled bar with white text — it overrides via the public CSS vars
   `--dxbl-list-box-item-selected-bg` / `-color` plus a high-specificity
   selector. We map both: set the vars on the dialog (vars take effect
   without `!important`) AND backstop with a class-targeted rule for safety
   in case the vars are overridden further upstream.

   Empirical DOM (verified at runtime in DX 25.1.3):
     DXBL-DROPDOWN-DIALOG.dxbl-dropdown-dialog.dxbl-edit-dropdown
       DIV.dxbl-dropdown-body
         DIV.dxbl-list-box-render-container.dxbl-sm.dxbl-nowrap
           DXBL-SCROLL-VIEWER
             DIV.dxbl-scroll-viewer-content
               UL
                 LI.dxbl-list-box-item-selected[aria-selected="true"]
                   DIV.dxbl-list-box-item-display-template-container
                     DIV.xaf-combobox-item.xaf-combobox-action
                 LI.dxbl-list-box-item
                   …
   ========================================================================== */

/* Outer dialog — soft white card */
.dxbl-dropdown-dialog,
.dxbl-dropdown-dialog.dxbl-edit-dropdown {
  --dxbl-list-box-item-selected-bg: var(--teal-50);
  --dxbl-list-box-item-selected-color: var(--navy-900);
  --dxbl-list-box-item-hover-bg: var(--ink-50);
  --dxbl-list-box-item-hover-color: var(--navy-900);

  background-color: var(--white) !important;
  border: 1px solid var(--ink-200) !important;
  border-radius: 8px !important;
  box-shadow: var(--shadow-pop) !important;
  overflow: hidden;
  font-family: var(--font-ui) !important;
}

/* Inner render container — drop the legacy ink-50 fill */
.dxbl-dropdown-dialog .dxbl-list-box-render-container,
.dxbl-dropdown-dialog .dxbl-scroll-viewer,
.dxbl-dropdown-dialog .dxbl-scroll-viewer-content {
  background-color: var(--white) !important;
}
.dxbl-dropdown-dialog .dxbl-scroll-viewer-content > ul {
  margin: 0 !important;
  padding: 4px !important;
  list-style: none;
  background: var(--white) !important;
}

/* List item — base ghost row */
.dxbl-dropdown-dialog .dxbl-list-box-item,
.dxbl-dropdown-dialog li.dxbl-list-box-item,
.dxbl-dropdown-dialog .dxbl-list-box-item-selected,
.dxbl-dropdown-dialog li.dxbl-list-box-item-selected {
  background-color: transparent !important;
  color: var(--ink-700) !important;
  font-family: var(--font-ui) !important;
  font-size: 12.5px !important;
  font-weight: 500 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  min-height: 30px !important;
  line-height: 1.3 !important;
  border: 0 !important;
  margin: 1px 0 !important;
  letter-spacing: 0;
  position: relative;
}

/* Hover — subtle ink-50 wash */
.dxbl-dropdown-dialog .dxbl-list-box-item:hover,
.dxbl-dropdown-dialog li.dxbl-list-box-item:hover,
.dxbl-dropdown-dialog li.dxbl-list-box-item-selected:hover {
  background-color: var(--ink-50) !important;
  color: var(--navy-900) !important;
}

/* Selected — teal-50 wash + navy-900 600-weight, replaces the default navy
   filled bar with white text. */
.dxbl-dropdown-dialog .dxbl-list-box-item-selected,
.dxbl-dropdown-dialog li.dxbl-list-box-item-selected,
.dxbl-dropdown-dialog .dxbl-list-box-item[aria-selected="true"],
.dxbl-dropdown-dialog li[aria-selected="true"] {
  background-color: var(--teal-50) !important;
  color: var(--navy-900) !important;
  font-weight: 600 !important;
}
.dxbl-dropdown-dialog .dxbl-list-box-item-selected:hover,
.dxbl-dropdown-dialog li.dxbl-list-box-item-selected:hover {
  background-color: var(--teal-100) !important;
  color: var(--navy-900) !important;
}

/* DX 25.x paints a navy-900 `::before` band (inset: -1px, z-index: -1)
   behind the selected item — 1 px of dark navy peeks around all 4
   edges of the LI and reads as a hard black frame against the soft
   teal-50 row. Kill that pseudo so only the teal-50 wash remains. */
.dxbl-dropdown-dialog .dxbl-list-box-item-selected::before,
.dxbl-dropdown-dialog li.dxbl-list-box-item-selected::before,
.dxbl-dropdown-dialog .dxbl-list-box-item-focused::before,
.dxbl-dropdown-dialog li.dxbl-list-box-item-focused::before {
  background-color: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* The XAF-rendered inner item div carries its own font color sometimes;
   ensure it inherits from the LI. */
.dxbl-dropdown-dialog .xaf-combobox-item,
.dxbl-dropdown-dialog .dxbl-list-box-item-display-template-container {
  background: transparent !important;
  color: inherit !important;
  font-weight: inherit !important;
  font-family: inherit !important;
  font-size: inherit !important;
}

/* ---------- Text-edit inline clear (×) button ----------
   arex.bs5.css and the customized DX theme ship
     .dxbl-text-edit > .dxbl-btn.dxbl-edit-btn-clear { --dxbl-btn-color: white }
   which renders a white SVG on the white input/card (e.g. LoginPage) so the
   clear affordance is effectively invisible. Override with a neutral ink so
   the glyph reads on both light cards and dark surfaces. */
.dxbl-text-edit > .dxbl-btn.dxbl-edit-btn-clear {
  --dxbl-btn-color: var(--ink-500);
  --dxbl-btn-hover-color: var(--navy-900);
  --dxbl-btn-disabled-color: var(--ink-300, #c5cee0);
}