/**
 * AmicusPlus shell — Sneat layout polish, DevExtreme-adjacent tokens, menu scrollbar chrome.
 * Loaded after layout-responsive-overrides.css; do not edit vendor core.css for these rules.
 */

/* --- Design tokens --- */
:root {
  --amicus-radius-shell: 0.75rem;
  --amicus-radius-card: 0.625rem;
  --amicus-shadow-navbar: 0 0.125rem 0.375rem rgba(38, 43, 67, 0.08), 0 0.25rem 1rem rgba(38, 43, 67, 0.06);
  --amicus-shadow-card: 0 0.25rem 1rem rgba(38, 43, 67, 0.06);
  --amicus-accent: var(--bs-primary);
  /** Space from viewport edge to fixed chrome; keep small to tighten navbar ↔ main gap. */
  --amicus-shell-edge-inset: 0.2rem;
  /** Navbar strip height token (also used in drag-target / legacy padding calcs). */
  /** Page title in `#layout-navbar` (disabled dxButton `#amicusNavbarTitleHost`) — font metrics only; row height is `--amicus-navbar-strip-height`. */
  --amicus-navbar-title-font-size: 1.0625rem;
  --amicus-navbar-title-font-weight: 600;
  --amicus-navbar-title-line-height: 1.25;
  /** Shell `.card-body` inset: same value on all sides at EVERY breakpoint — pinned to the
      app-wide 10px toolbar/gutter rhythm (2026-07-26 standard; was 0.55/0.65/0.75rem responsive). */
  --amicus-card-body-padding: 0.625rem;
  /* Gutters + vertical rhythm: padding-top on main `.content-wrapper` (no padding-bottom on that rule). */
  --amicus-main-padding-x: 0.75rem;
  /* Inner horizontal padding for shell chrome (navbar / main container-xxl / footer bar) — matches Bootstrap container gutters */
  --amicus-shell-inner-pad-x: 1rem;
  /** Vertical gap between fixed navbar strip and scrollable `#amicus-shell-main` (content-wrapper padding-top). */
  --amicus-zone-gap-y: 0.1rem;
  /* Navbar strip + layout padding (`--amicus-navbar-strip-height` aliases `--amicus-app-footer-bar-h`) */
  --amicus-app-footer-bar-h: 30px;
  --amicus-navbar-strip-height: var(--amicus-app-footer-bar-h);
  /* Mobile drawer scrim (see overlay block below) */
  --amicus-menu-overlay-blur: 12px;
  --amicus-menu-overlay-saturate: 1.18;
  /* Same red as .bg-menu-theme .menu-item.active > .menu-link (app.blade.php) */
  --amicus-brand-red: #e30016;
  --amicus-brand-red-rgb: 227, 0, 22;
  --amicus-brand-red-hover: #c40014;

  /*
   * Stacking (z-index) ladder — app-owned tokens; Sneat menu/nav values live in vendor core.css.
   * Edge audit: compare computed z-index on #layout-menu, #layout-navbar, .dx-overlay-wrapper, .modal.
   *
   * | Layer (role)              | Selector / source                    | Token or ref     |
   * |---------------------------|--------------------------------------|------------------|
   * | In-page / scroll          | cards, grids                         | auto / low       |
   * | Navbar menu toggle (hamburger) | .layout-navbar .layout-menu-toggle | --amicus-z-menu-toggle |
   * | Mobile drawer scrim       | .layout-overlay (Sneat + amicus)     | --amicus-z-layout-overlay-scrim |
   * | Sneat .layout-overlay     | core.css (mobile)                    | 1099             |
   * | Sneat .layout-menu        | core.css                             | 1100 / 1080–1085 |
   * | DevExtreme overlays       | dx.light.css → layout overrides      | --amicus-z-dx-overlay |
   * | Bootstrap modal           | --bs-modal-zindex                    | ~1055            |
   */
  --amicus-z-layout-overlay-scrim: 1099;
  --amicus-z-menu-toggle: 1086;
  --amicus-z-dx-overlay: 1200;
}

@media (min-width: 576px) {
  :root {
    --amicus-main-padding-x: 0.85rem;
    --amicus-zone-gap-y: 0.1rem;
  }
}

@media (min-width: 768px) {
  :root {
    --amicus-zone-gap-y: 0.12rem;
  }
}

@media (min-width: 992px) {
  :root {
    --amicus-zone-gap-y: 0.12rem;
    --amicus-shell-inner-pad-x: 1.5rem;
  }
}

@media (min-width: 1200px) {
  :root {
    --amicus-main-padding-x: 1rem;
    --amicus-zone-gap-y: 0.14rem;
  }
}

@media (min-width: 1400px) {
  :root {
    --amicus-zone-gap-y: 0.14rem;
  }
}

.layout-page {
  min-width: 0;
}

.layout-content-navbar .layout-page {
  min-height: 0;
}

/* Sidebar | .amicus-shell-content-column: top (nav) | middle (.layout-page) */
.layout-content-navbar .layout-container > .amicus-shell-content-column {
  flex: 1 1 auto;
  flex-basis: 100%;
  width: 0;
  min-width: 0;
  max-width: 100%;
  /*
   * Cap the main column to the viewport so `#amicus-main-container` (`dxScrollView`) + flex chain
   * become the vertical scroll surface instead of growing `body`. Do not set min-height: 0 here —
   * that interacted badly with flex + grids (blank main area). `overflow: hidden` lets flex
   * children with min-height: 0 (.layout-page) shrink correctly inside the cap.
   */
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

.layout-content-navbar .amicus-shell-zone--top {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
}

/*
 * Sneat sets `.layout-container { min-height: 100vh }` without a max — the menu + main row can grow
 * past the viewport and scroll `body`. Cap the shell so vertical scroll stays inside main / menu-inner.
 *
 * Without a bounded `html`/`body`, `max-height` on `.layout-wrapper` may not prevent document scroll.
 */
html.layout-navbar-fixed {
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}

html.layout-navbar-fixed body {
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}

html.layout-navbar-fixed .layout-content-navbar.layout-wrapper {
  height: 100%;
  max-height: 100vh;
  max-height: 100dvh;
  overflow: hidden;
}

.layout-content-navbar.layout-wrapper > .layout-container {
  max-height: 100vh;
  max-height: 100dvh;
  min-height: 0;
  overflow: hidden;
}

/* Vendor sets width:0 on .layout-content-navbar .layout-page for row flex; nested under column — restore width */
.layout-content-navbar .amicus-shell-content-column > .layout-page {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  max-width: 100%;
}

.layout-page .content-wrapper {
  min-width: 0;
  overflow-x: hidden;
}

.layout-page .content-wrapper > .container-xxl {
  min-width: 0;
}

.layout-page .content-wrapper .amicus-page-main-inner {
  min-width: 0;
}

/* --- Navbar --- */
.layout-navbar-fixed .layout-content-navbar #layout-navbar.amicus-shell-navbar {
  top: max(var(--amicus-shell-edge-inset), env(safe-area-inset-top, 0px));
}

/* Override Sneat `.layout-navbar { height: 4rem }` so strip matches `--amicus-navbar-strip-height` */
#layout-navbar.amicus-shell-navbar.layout-navbar {
  box-sizing: border-box;
  min-height: var(--amicus-navbar-strip-height) !important;
  height: var(--amicus-navbar-strip-height) !important;
  max-height: var(--amicus-navbar-strip-height) !important;
  border-radius: var(--amicus-radius-shell);
  box-shadow: var(--amicus-shadow-navbar);
  border: 1px solid rgba(var(--bs-border-color-rgb, 229, 229, 233), 0.85);
}

/*
 * Shell strip: inner padding + tokens. Flow main (#amicus-main-container): horizontal margins OK.
 * Fixed navbar (#layout-navbar): NEVER width:100% — Sneat uses position:fixed + left (sidebar); 100% is viewport width
 * and overflows past the right edge; use left/right insets (same margin model as `#amicus-main-container`).
 */
.layout-content-navbar #layout-navbar.amicus-shell-strip,
.layout-content-navbar #amicus-main-container.amicus-shell-strip {
  padding-left: var(--amicus-shell-inner-pad-x) !important;
  padding-right: var(--amicus-shell-inner-pad-x) !important;
  box-sizing: border-box;
}

.layout-content-navbar #amicus-main-container.amicus-shell-strip {
  margin-left: max(var(--amicus-main-padding-x), env(safe-area-inset-left, 0px)) !important;
  margin-right: max(var(--amicus-main-padding-x), env(safe-area-inset-right, 0px)) !important;
  max-width: none !important;
  min-width: 0;
  width: auto;
}

/* Fixed navbar: strip gutters via left/right (not margin + width:100%) */
.layout-navbar-fixed .layout-content-navbar #layout-navbar.amicus-shell-strip {
  margin-left: 0 !important;
  margin-right: 0 !important;
  max-width: none !important;
  width: auto !important;
}

.layout-content-navbar #layout-navbar.amicus-shell-navbar.layout-navbar.navbar-detached.amicus-shell-strip {
  padding-top: 0;
  padding-bottom: 0;
}

@media (max-width: 1199.98px) {
  .layout-navbar-fixed .layout-content-navbar #layout-navbar.amicus-shell-strip {
    left: max(var(--amicus-main-padding-x), env(safe-area-inset-left, 0px)) !important;
    right: max(var(--amicus-main-padding-x), env(safe-area-inset-right, 0px)) !important;
  }
}

@media (min-width: 1200px) {
  .layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) #layout-navbar.amicus-shell-strip,
  .layout-menu-fixed.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) #layout-navbar.amicus-shell-strip,
  .layout-menu-fixed-offcanvas.layout-navbar-fixed:not(.layout-menu-collapsed)
    .layout-content-navbar:not(.layout-without-menu)
    #layout-navbar.amicus-shell-strip {
    left: calc(16.25rem + var(--amicus-main-padding-x, 1rem)) !important;
    right: var(--amicus-main-padding-x, 1rem) !important;
  }

  .layout-navbar-fixed:not(.layout-menu-collapsed).layout-menu-flipped .layout-content-navbar:not(.layout-without-menu) #layout-navbar.amicus-shell-strip,
  .layout-menu-fixed.layout-navbar-fixed:not(.layout-menu-collapsed).layout-menu-flipped
    .layout-content-navbar:not(.layout-without-menu)
    #layout-navbar.amicus-shell-strip,
  .layout-menu-fixed-offcanvas.layout-navbar-fixed:not(.layout-menu-collapsed).layout-menu-flipped
    .layout-content-navbar:not(.layout-without-menu)
    #layout-navbar.amicus-shell-strip {
    left: var(--amicus-main-padding-x, 1rem) !important;
    right: calc(16.25rem + var(--amicus-main-padding-x, 1rem)) !important;
  }

  .layout-navbar-fixed.layout-menu-collapsed:not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-content-navbar #layout-navbar.amicus-shell-strip,
  .layout-menu-fixed.layout-navbar-fixed.layout-menu-collapsed .layout-content-navbar #layout-navbar.amicus-shell-strip {
    left: calc(4.375rem + var(--amicus-main-padding-x, 1rem)) !important;
    right: var(--amicus-main-padding-x, 1rem) !important;
  }

  .layout-navbar-fixed.layout-menu-collapsed:not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas).layout-menu-flipped
    .layout-content-navbar
    #layout-navbar.amicus-shell-strip,
  .layout-menu-fixed.layout-navbar-fixed.layout-menu-collapsed.layout-menu-flipped .layout-content-navbar #layout-navbar.amicus-shell-strip {
    left: var(--amicus-main-padding-x, 1rem) !important;
    right: calc(4.375rem + var(--amicus-main-padding-x, 1rem)) !important;
  }

  [dir='rtl'].layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) #layout-navbar.amicus-shell-strip,
  [dir='rtl'].layout-menu-fixed.layout-navbar-fixed:not(.layout-menu-collapsed) .layout-content-navbar:not(.layout-without-menu) #layout-navbar.amicus-shell-strip,
  [dir='rtl'].layout-menu-fixed-offcanvas.layout-navbar-fixed:not(.layout-menu-collapsed)
    .layout-content-navbar:not(.layout-without-menu)
    #layout-navbar.amicus-shell-strip {
    right: calc(16.25rem + var(--amicus-main-padding-x, 1rem)) !important;
    left: var(--amicus-main-padding-x, 1rem) !important;
  }

  [dir='rtl'].layout-navbar-fixed:not(.layout-menu-collapsed).layout-menu-flipped .layout-content-navbar:not(.layout-without-menu) #layout-navbar.amicus-shell-strip,
  [dir='rtl'].layout-menu-fixed.layout-navbar-fixed:not(.layout-menu-collapsed).layout-menu-flipped
    .layout-content-navbar:not(.layout-without-menu)
    #layout-navbar.amicus-shell-strip,
  [dir='rtl'].layout-menu-fixed-offcanvas.layout-navbar-fixed:not(.layout-menu-collapsed).layout-menu-flipped
    .layout-content-navbar:not(.layout-without-menu)
    #layout-navbar.amicus-shell-strip {
    left: calc(16.25rem + var(--amicus-main-padding-x, 1rem)) !important;
    right: var(--amicus-main-padding-x, 1rem) !important;
  }

  [dir='rtl'].layout-navbar-fixed.layout-menu-collapsed:not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas) .layout-content-navbar #layout-navbar.amicus-shell-strip,
  [dir='rtl'].layout-menu-fixed.layout-navbar-fixed.layout-menu-collapsed .layout-content-navbar #layout-navbar.amicus-shell-strip {
    right: calc(4.375rem + var(--amicus-main-padding-x, 1rem)) !important;
    left: var(--amicus-main-padding-x, 1rem) !important;
  }

  [dir='rtl'].layout-navbar-fixed.layout-menu-collapsed:not(.layout-menu-offcanvas):not(.layout-menu-fixed-offcanvas).layout-menu-flipped
    .layout-content-navbar
    #layout-navbar.amicus-shell-strip,
  [dir='rtl'].layout-menu-fixed.layout-navbar-fixed.layout-menu-collapsed.layout-menu-flipped .layout-content-navbar #layout-navbar.amicus-shell-strip {
    left: calc(4.375rem + var(--amicus-main-padding-x, 1rem)) !important;
    right: var(--amicus-main-padding-x, 1rem) !important;
  }
}

/* `<nav id="layout-navbar">` carries `.navbar` on the same node (no inner `.navbar` wrapper) — target self + any legacy inner .navbar */
#layout-navbar.amicus-shell-navbar.layout-navbar,
#layout-navbar.amicus-shell-navbar .navbar {
  box-sizing: border-box;
  height: 100%;
  min-height: 0 !important;
  align-items: center;
}

@media (max-width: 1199.98px) {
  #layout-navbar.amicus-shell-navbar {
    border-radius: var(--amicus-radius-shell);
  }
}

/*
 * Media query: 1024x768 / 1366x768 — compact shell chrome (navbar strip).
 * Step A: width ≤1366 (small / low-res laptop widths incl. WXGA + 1366×768 panels). Step B: same width + short viewport (≤800px height).
 * `--amicus-app-footer-bar-h` / `--amicus-navbar-strip-height` tune navbar strip height at this breakpoint.
 */

/* 1024x768 / 1366x768 — breakpoint A: constrained width (e.g. 1024–1366px-wide displays). */
@media (max-width: 1366px) {
  :root {
    --amicus-shell-edge-inset: 0.14rem;
    --amicus-app-footer-bar-h: 30px;
    --amicus-navbar-strip-height: var(--amicus-app-footer-bar-h);
    --amicus-zone-gap-y: 0.06rem;
  }

}

/* 1024x768 / 1366x768 — breakpoint B: constrained width + height (XGA / 1366×768 / short laptop panels). */
@media (max-width: 1366px) and (max-height: 800px) {
  :root {
    --amicus-shell-edge-inset: 0.12rem;
    --amicus-app-footer-bar-h: 30px;
    --amicus-navbar-strip-height: var(--amicus-app-footer-bar-h);
    --amicus-zone-gap-y: 0.06rem;
  }

}

/* --- Main / card --- */
.layout-page .content-wrapper .card:not(.amicus-content--flush) {
  border-radius: var(--amicus-radius-card);
  border: 1px solid rgba(var(--bs-border-color-rgb, 229, 229, 233), 0.95);
  box-shadow: var(--amicus-shadow-card);
  min-height: 0;
}

/* Main shell card (layouts.app, noauth, streamlined inner): symmetric padding on every page using this DOM chain. */
.layout-page .content-wrapper .card:not(.amicus-content--flush) > .card-body,
.layout-wrapper.layout-content-navbar #amicus-main-container .amicus-page-main-inner > .card:not(.amicus-content--flush) > .card-body {
  padding: var(--amicus-card-body-padding) !important;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  min-height: 0;
  flex: 1 1 auto;
  box-sizing: border-box;
}

.layout-page .content-wrapper .card:not(.amicus-content--flush) > .card-body > *,
.layout-wrapper.layout-content-navbar #amicus-main-container .amicus-page-main-inner > .card:not(.amicus-content--flush) > .card-body > * {
  min-width: 0;
}

/* Sneat card: `.card-body > .dx-viewport` wraps dashboard `#tabPanel` — it must be a flex column so the tab panel stretches (tabPanel is NOT a direct child of `.card-body`). */
.layout-page .content-wrapper .card:not(.amicus-content--flush) > .card-body .dx-viewport,
.layout-wrapper.layout-content-navbar #amicus-main-container .amicus-page-main-inner > .card:not(.amicus-content--flush) > .card-body .dx-viewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}

.layout-page .content-wrapper .card:not(.amicus-content--flush) > .card-body .dx-viewport #tabPanel.dashboard-root-tabpanel,
.layout-wrapper.layout-content-navbar #amicus-main-container .amicus-page-main-inner > .card:not(.amicus-content--flush) > .card-body .dx-viewport #tabPanel.dashboard-root-tabpanel {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
}

/*
 * Shell DataGrids: many pages set `height: '100%'` / elementAttr `height:100%`, which stretches the grid
 * in a flex column and leaves empty space below short tables (not extra `.card-body` padding from Blade).
 * Auto height sizes to rows + pager + summary. Excluded: pivot report card, support ticket main shell
 * (full-height grid + virtual scrolling).
 */
.layout-page .content-wrapper .card:not(.amicus-content--flush):not(.amicus-pivot-report):not(.amicus-support-ticket-shell) > .card-body .dx-datagrid.dx-widget,
.layout-wrapper.layout-content-navbar #amicus-main-container .amicus-page-main-inner > .card:not(.amicus-content--flush):not(.amicus-pivot-report):not(.amicus-support-ticket-shell) > .card-body .dx-datagrid.dx-widget {
  height: auto !important;
  max-height: 100%;
  flex: 0 1 auto;
  min-height: 0;
  align-self: stretch;
}

/*
 * Pivot report: keep the viewport in the card-body flex chain so short fixed-height grids do not leave a
 * collapsed strip above the card padding (Support Ticket shell fills the same way). PivotGrid height stays
 * set in JS; this only stretches the wrapper, not the dxPivotGrid widget.
 */
.layout-page .content-wrapper .card.amicus-pivot-report > .card-body .dx-viewport,
.layout-wrapper.layout-content-navbar #amicus-main-container .amicus-page-main-inner > .card.amicus-pivot-report > .card-body .dx-viewport {
  flex: 1 1 auto;
  min-height: 0;
}

.layout-page .content-wrapper .card.amicus-content--flush {
  border: none;
  box-shadow: none;
  background: transparent;
}

.layout-page .content-wrapper .card.amicus-content--flush .card-body {
  padding-left: 0;
  padding-right: 0;
}

@media (min-width: 1200px) {
  .layout-page .content-wrapper .card.amicus-content--flush .card-body {
    padding-top: 0;
  }
}

/* --- Sidebar brand: trimmed PNG + restrained wordmark (no oversized 68px height) --- */
#layout-menu.menu-vertical .app-brand {
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

#layout-menu .app-brand-link {
  min-width: 0;
  flex: 1 1 auto;
}

#layout-menu .app-brand-logo {
  min-width: 0;
  max-width: 100%;
}

#layout-menu .amicus-menu-brand-mark {
  display: flex;
  align-items: center;
  min-width: 0;
  flex: 1 1 auto;
}

#layout-menu .amicus-menu-brand#lgomain {
  display: block;
  max-height: 2.35rem;
  width: auto;
  max-width: min(100%, 11.75rem);
  height: auto;
  object-fit: contain;
  object-position: left center;
}

#layout-menu .amicus-menu-brand--collapsed#lgofav {
  display: block;
  max-height: 2rem;
  width: auto;
  height: auto !important;
  object-fit: contain;
}

/* ========== LOGO_CLIP_FIX begin — delete this whole section to revert sidebar wordmark tweak ==========
   Sneat core.css sets .app-brand / .app-brand-logo { overflow: hidden }, which clips amicusplus_logo_trim.png
   on the left in narrow flex layouts. Scoped to #layout-menu only. */
#layout-menu .app-brand,
#layout-menu .app-brand-logo,
#layout-menu .amicus-menu-brand-mark {
  overflow: visible;
}

#layout-menu.menu-vertical .app-brand {
  padding-left: 1.5rem;
  padding-right: 1rem;
}
/* ========== LOGO_CLIP_FIX end ========== */

/*
 * Sidebar nav — Figma-style UI scale: 8px grid, 14px primary / 13px nested, 36px row floor.
 * (Overrides Sneat defaults: 15px type, 4px item gap, 7px link padding.)
 */
#layout-menu.menu-vertical .menu-inner > .menu-item {
  margin-top: 0.125rem;
}

#layout-menu.menu-vertical .menu-inner > .menu-item:first-child {
  margin-top: 0;
}

/* Top-level links only — do not use .menu-item .menu-link (matches nested sub-menus and overrides Sneat bullet padding). */
#layout-menu.menu-vertical .menu-inner > .menu-item > .menu-link,
#layout-menu.menu-vertical .menu-header,
#layout-menu.menu-vertical .menu-block {
  padding: 0.5rem 0.75rem;
  margin-inline: 0.625rem;
  border-radius: 0.375rem;
}

#layout-menu.menu-vertical .menu-inner > .menu-item > .menu-link {
  font-size: 0.875rem;
  letter-spacing: 0.01em;
  font-weight: 400;
  min-height: 2.25rem;
}

#layout-menu.menu-vertical .menu-inner > .menu-item > .menu-link > div:not(.badge) {
  line-height: 1.43;
}

#layout-menu.menu-vertical .menu-icon {
  margin-right: 0.625rem;
}

#layout-menu.menu-vertical .menu-icon::before {
  font-size: 1.25rem;
}

html[dir='rtl'] #layout-menu.menu-vertical .menu-icon {
  margin-right: 0;
  margin-left: 0.625rem;
}

#layout-menu.menu-vertical .menu-item .menu-toggle {
  padding-right: calc(0.75rem + 1.5em);
}

html[dir='rtl'] #layout-menu.menu-vertical .menu-item .menu-toggle {
  padding-right: 0.75rem;
  padding-left: calc(0.75rem + 1.5em);
}

#layout-menu.menu-vertical .menu-sub .menu-link {
  padding-top: 0.4375rem;
  padding-bottom: 0.4375rem;
  font-size: 0.8125rem;
  min-height: 2rem;
  letter-spacing: 0.01em;
}

#layout-menu.menu-vertical .menu-sub .menu-link > div:not(.badge) {
  line-height: 1.46;
}

#layout-menu.menu-vertical .menu-divider {
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

#layout-menu.menu-vertical .menu-inner > .menu-header .menu-header-text {
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
}

/* --- Sidebar: Perfect Scrollbar (vertical only — no horizontal bar at bottom) --- */
#layout-menu.layout-menu.menu-vertical {
  overflow-x: hidden;
  max-width: 100%;
}

#layout-menu .menu-inner {
  overflow-x: hidden !important;
  max-width: 100%;
  box-sizing: border-box;
}

#layout-menu .menu-inner.ps {
  overflow-x: hidden !important;
}

#layout-menu .menu-inner .menu-item,
#layout-menu .menu-inner .menu-link {
  max-width: 100%;
  box-sizing: border-box;
}

#layout-menu .menu-inner.ps .ps__rail-y {
  background-color: transparent !important;
  opacity: 0;
  transition: opacity 0.2s ease;
}

#layout-menu .menu-inner.ps:hover .ps__rail-y,
#layout-menu .menu-inner.ps.ps--scrolling-y .ps__rail-y,
#layout-menu .menu-inner.ps:focus-within .ps__rail-y {
  opacity: 1;
}

#layout-menu .menu-inner.ps .ps__thumb-y {
  background-color: rgba(var(--bs-primary-rgb, 102, 108, 255), 0.35) !important;
  border-radius: 10px;
  width: 5px;
  right: 2px;
}

#layout-menu .menu-inner.ps:hover .ps__thumb-y,
#layout-menu .menu-inner.ps.ps--scrolling-y .ps__thumb-y {
  background-color: rgba(var(--bs-primary-rgb, 102, 108, 255), 0.55) !important;
}

#layout-menu .menu-inner.ps .ps__rail-x,
#layout-menu .menu-inner.ps .ps__thumb-x,
#layout-menu .ps__rail-x {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

#layout-menu .menu-inner.overflow-auto {
  overflow-x: hidden !important;
}
@supports (scrollbar-width: thin) {
  #layout-menu .menu-inner.overflow-auto {
    scrollbar-width: thin;
    scrollbar-color: rgba(var(--bs-primary-rgb, 102, 108, 255), 0.35) transparent;
  }
}

/*
 * WebKit: only set *width* on ::-webkit-scrollbar (vertical bar thickness).
 * Do not set height here — a non-zero height styles the horizontal bar thickness (bottom strip).
 */
#layout-menu .menu-inner.overflow-auto::-webkit-scrollbar {
  width: 6px;
}

#layout-menu .menu-inner.overflow-auto::-webkit-scrollbar:horizontal {
  height: 0 !important;
}

#layout-menu .menu-inner.overflow-auto::-webkit-scrollbar-thumb {
  background-color: rgba(var(--bs-primary-rgb, 102, 108, 255), 0.35);
  border-radius: 10px;
}

#layout-menu .menu-inner.overflow-auto::-webkit-scrollbar-track {
  background: transparent;
}

@media (max-width: 1199.98px) {
  /* Kill stray horizontal overflow while the drawer + scrim are open (avoids body/window h-scroll). */
  html.layout-menu-expanded {
    overflow-x: hidden;
    overscroll-behavior-x: none;
    width: 100%;
    max-width: 100%;
  }

  html.layout-menu-expanded body {
    overflow-x: hidden !important;
  }

  html.layout-menu-expanded .layout-wrapper {
    overflow-x: hidden;
    max-width: 100%;
  }

  html.layout-menu-expanded .layout-container {
    max-width: 100%;
  }

  html.layout-menu-expanded .layout-menu {
    box-shadow:
      0 0.25rem 0 rgba(0, 0, 0, 0.04),
      0 0.75rem 2.5rem rgba(38, 43, 67, 0.16);
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /*
   * Drawer scrim: glassy gradient + blur (replaces flat Sneat #9395a1 @ 50% opacity).
   * Dual class .layout-overlay.layout-menu-toggle matches app.blade overlay markup.
   */
  .layout-overlay.layout-menu-toggle {
    position: fixed;
    inset: 0;
    left: 0 !important;
    right: 0 !important;
    top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 100vh;
    min-height: 100dvh;
    height: auto !important;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: none;
    opacity: 1 !important;
    background: linear-gradient(
      118deg,
      rgba(17, 24, 39, 0.54) 0%,
      rgba(17, 24, 39, 0.38) 45%,
      rgba(55, 48, 163, 0.2) 100%
    ) !important;
    -webkit-backdrop-filter: blur(var(--amicus-menu-overlay-blur)) saturate(var(--amicus-menu-overlay-saturate));
    backdrop-filter: blur(var(--amicus-menu-overlay-blur)) saturate(var(--amicus-menu-overlay-saturate));
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.06);
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    z-index: var(--amicus-z-layout-overlay-scrim, 1099);
  }

  .dark-style .layout-overlay.layout-menu-toggle {
    background: linear-gradient(118deg, rgba(0, 0, 0, 0.72) 0%, rgba(15, 23, 42, 0.58) 100%) !important;
    -webkit-backdrop-filter: blur(calc(var(--amicus-menu-overlay-blur) + 2px)) saturate(1.05);
    backdrop-filter: blur(calc(var(--amicus-menu-overlay-blur) + 2px)) saturate(1.05);
    box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.035);
  }

  .layout-transitioning .layout-overlay.layout-menu-toggle {
    animation: amicusOverlayMenuIn 0.32s cubic-bezier(0.22, 1, 0.36, 1) forwards !important;
  }

  @keyframes amicusOverlayMenuIn {
    from {
      opacity: 0 !important;
    }

    to {
      opacity: 1 !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .layout-overlay.layout-menu-toggle {
      -webkit-backdrop-filter: none;
      backdrop-filter: none;
    }

    .layout-transitioning .layout-overlay.layout-menu-toggle {
      animation-duration: 0.01ms !important;
    }
  }

  /*
   * Mobile drawer: hide scrollbars (auto-hide / overlay behavior). Scrolling still works via touch.
   * Desktop (≥1200px) keeps thin styled scrollbars + Perfect Scrollbar rails on hover.
   */
  #layout-menu .menu-inner.overflow-auto {
    -ms-overflow-style: none;
  }
  @supports (scrollbar-width: none) {
    #layout-menu .menu-inner.overflow-auto {
      scrollbar-width: none;
    }
  }

  #layout-menu .menu-inner.overflow-auto::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    background: transparent;
  }

  #layout-menu .menu-inner.ps .ps__rail-y,
  #layout-menu .menu-inner.ps .ps__thumb-y {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  #layout-menu .menu-inner.ps:hover .ps__rail-y,
  #layout-menu .menu-inner.ps.ps--scrolling-y .ps__rail-y,
  #layout-menu .menu-inner.ps:focus-within .ps__rail-y,
  #layout-menu .menu-inner.ps:hover .ps__thumb-y,
  #layout-menu .menu-inner.ps.ps--scrolling-y .ps__thumb-y {
    opacity: 0 !important;
    visibility: hidden !important;
  }

  .drag-target {
    background: transparent;
    max-width: 36px;
    box-sizing: border-box;
  }
}

/*
 * Edge swipe strip (Hammer.js / main.js): Sneat core.css uses top:0 + height:100%, so the 32px hit-area
 * spanned the full viewport and overlapped the fixed navbar and footer. Lock it to the main column only.
 */
html.layout-navbar-fixed .layout-wrapper.layout-content-navbar > .drag-target {
  top: calc(
    env(safe-area-inset-top, 0px) + var(--amicus-shell-edge-inset) + var(--amicus-navbar-strip-height)
  ) !important;
  /* Between fixed navbar strip and bottom safe-area; layout stays flexible while this hit-area is fixed */
  height: calc(
    100vh - env(safe-area-inset-top, 0px) - var(--amicus-shell-edge-inset) - var(--amicus-navbar-strip-height) -
      env(safe-area-inset-bottom, 0px) - var(--amicus-shell-edge-inset)
  ) !important;
  height: calc(
    100dvh - env(safe-area-inset-top, 0px) - var(--amicus-shell-edge-inset) - var(--amicus-navbar-strip-height) -
      env(safe-area-inset-bottom, 0px) - var(--amicus-shell-edge-inset)
  ) !important;
  bottom: auto !important;
}

/* #amicus-shell-main uses .content-wrapper; vertical scroll is `dxScrollView` on `#amicus-main-container`. */
/* Horizontal inset lives on .container-xxl.flex-grow-1 (same margin model as #layout-navbar) — avoids double gutter vs top bar */
.layout-content-navbar .layout-page > .content-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  /* Sneat core.css sets justify-content: space-between on .content-wrapper — breaks single-column stretch */
  justify-content: flex-start;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: hidden;
  padding-left: 0;
  padding-right: 0;
  padding-top: var(--amicus-zone-gap-y);
}

/* Strip metrics come from .amicus-shell-strip on #amicus-main-container */
.layout-content-navbar .layout-page > .content-wrapper > .container-xxl.flex-grow-1 {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  align-self: stretch;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  height: 100%;
  max-height: 100%;
}

.layout-content-navbar .layout-page > .content-wrapper > .container-xxl.flex-grow-1 > .amicus-page-main-inner {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

/*
 * dxScrollView wraps `#amicus-main-container`; `.amicus-page-main-inner` + scroll content use `min-height: 100%`
 * so the shell `.amicus-shell-main-card` column fills the main viewport (see `.dx-scrollview-content` block below).
 */
.layout-content-navbar #amicus-main-container .amicus-page-main-inner {
  flex: 1 1 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  /* Horizontal inset comes from `#amicus-main-container.amicus-shell-strip` (symmetric pad-x). Extra padding-right here made main content wider on the left than the right (e.g. Support Ticket Register). */
}

.layout-content-navbar .layout-page > .content-wrapper .card:not(.amicus-content--flush),
.layout-content-navbar #amicus-main-container .amicus-page-main-inner > .card:not(.amicus-content--flush) {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

.layout-content-navbar .layout-page > .content-wrapper .amicus-shell-main-card,
.layout-content-navbar #amicus-main-container .amicus-page-main-inner > .amicus-shell-main-card {
  margin-bottom: 0 !important;
}

/* DevExtreme scroll view host: `#amicus-main-container` — flex column fills strip; inner wrappers pass height. */
.layout-content-navbar #amicus-main-container.dx-scrollview {
  min-height: 0;
  flex: 1 1 auto;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  padding-left:0px !important;
}

/*
 * Only the root dxScrollView chain (`#amicus-main-container` → direct `.dx-scrollable-*` children).
 * Descendant `.dx-scrollable-*` (column header menus, popups under the same subtree) must not inherit
 * these flex/height rules — they stretch menu rows to the viewport.
 */
.layout-content-navbar #amicus-main-container.dx-scrollview > .dx-scrollable-wrapper {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.layout-content-navbar #amicus-main-container.dx-scrollview > .dx-scrollable-wrapper > .dx-scrollable-container {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/*
 * Stretch scroll surface to the main column viewport so the white `.amicus-shell-main-card` reaches the bottom
 * (no gray band under short pages). `min-height: 100%` fills the dxScrollView client; inner tab/grids
 * keep `min-height: 0` on deeper nodes (see `.card-body` / `#tabPanel` rules) so nested scroll works.
 */
.layout-content-navbar #amicus-main-container.dx-scrollview > .dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-content,
.layout-content-navbar #amicus-main-container.dx-scrollview > .dx-scrollable-wrapper > .dx-scrollable-container > .dx-scrollable-content > .dx-scrollview-content {
  flex: 1 1 auto;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/*
 * Navbar page title — disabled text dxButton (`#amicusNavbarTitleHost` from amicusInitNavbarToolbarDx).
 * Fills the strip vertically; typography matches a small form/page heading.
 */
#layout-navbar.amicus-shell-navbar.dx-toolbar .dx-toolbar-items-container {
  height: 100%;
  align-items: center;
}

#layout-navbar.amicus-shell-navbar .dx-toolbar-before .amicus-navbar-title-item.dx-toolbar-item {
  display: flex;
  align-items: stretch;
  min-height: 0;
}

#layout-navbar.amicus-shell-navbar #amicusNavbarTitleHost.dx-button {
  box-sizing: border-box;
  align-self: stretch;
  height: 100%;
  min-height: 0;
}

#layout-navbar.amicus-shell-navbar #amicusNavbarTitleHost .dx-button-content {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  height: 100%;
  padding-top: 0;
  padding-bottom: 0;
  line-height: var(--amicus-navbar-title-line-height);
  font-size: var(--amicus-navbar-title-font-size);
  font-weight: var(--amicus-navbar-title-font-weight);
  letter-spacing: 0.01em;
  color: var(--bs-heading-color, var(--bs-body-color, inherit));
}

@media (max-width: 575.98px) {
  /* Long page names: legacy h4 host + dx title label */
  #layout-navbar.amicus-shell-navbar #amicusNavbarToolbarHost h4 {
    max-width: min(70vw, 20rem);
  }

  #layout-navbar.amicus-shell-navbar #amicusNavbarTitleHost .dx-button-content {
    max-width: min(70vw, 20rem);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

/* Amicus AI launcher (navbar): robot glyph + "Amicus AI" label, so a first-time user can tell both
   WHAT it is (a bot, not a chat with a colleague) and what it is called. The dxButton `hint` alone is
   not enough — it only fires on hover, which touch users never get. */
#layout-navbar.amicus-shell-navbar .amicus-navbar-ai .amicus-navbar-ai-inner {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

#layout-navbar.amicus-shell-navbar .amicus-navbar-ai .amicus-navbar-ai-label {
  text-transform: none; /* DevExtreme upper-cases button text; "AMICUS AI" reads as shouting */
  white-space: nowrap;
  line-height: 1;
  /* AmicusPlus logo red — ties the label to the brand mark in the sidebar rather than reading as
     just another grey navbar control. Semibold so it holds its own against the red at small size. */
  color: var(--amicus-brand-red, #e30016);
  font-weight: 600;
}

/* Below 1200px the navbar is already tight (title + dialer + extension + user menu). Drop back to
   icon-only there rather than squeezing the page title — the robot icon plus hint still identify it. */
@media (max-width: 1199.98px) {
  #layout-navbar.amicus-shell-navbar .amicus-navbar-ai .amicus-navbar-ai-label {
    display: none;
  }
}

/* Dial row layout; SVGs in `#amicusDialer` follow dxButton font-size */
#layout-navbar.amicus-shell-navbar .amicus-navbar-dial-tools {
  display: inline-flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  margin: 0;
  list-style: none;
}

#layout-navbar.amicus-shell-navbar #amicusDialer .amicus-nav-icon {
  width: 1.25em;
  height: 1.25em;
  flex-shrink: 0;
  display: block;
  pointer-events: none;
}

/* Mobile dial mode: hide extension number (matches dxButton.visible; guards against repaint drift) */
#layout-navbar.amicus-shell-navbar #amicusDialer[data-phone-type-extension="0"] > #amicusNavbarExtensionNumber {
  display: none !important;
}

#layout-navbar.amicus-shell-navbar .amicus-navbar-dial-tools a.amicus-nav-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/*
 * Navbar account: horizontal {@link DevExpress.ui.dxMenu} root only (`>`).
 * Do not style submenu `.dx-menu` the same way — DevExtreme applies `cssClass` to submenus too; a shared
 * horizontal-looking rule was forcing submenu items into one row so only the first row (e.g. vendor) showed.
 */
#layout-navbar.amicus-shell-navbar .amicus-navbar-user-dd-host > .dx-menu {
  /* Wide support: rgba first; color-mix enhances on modern browsers */
  border: 1px solid rgba(105, 122, 141, 0.22);
  border-radius: var(--amicus-radius-shell, 0.375rem);
  background: transparent;
  padding: 0 0.15rem;
  min-height: 2rem;
}

#layout-navbar.amicus-shell-navbar .amicus-navbar-user-dd-host > .dx-menu > .dx-menu-wrapper > .dx-menu-items-container .dx-menu-item {
  border-radius: calc(var(--amicus-radius-shell, 0.375rem) - 2px);
}

#layout-navbar.amicus-shell-navbar .amicus-navbar-user-dd-host > .dx-menu > .dx-menu-wrapper > .dx-menu-items-container .dx-menu-item-content {
  padding-left: 0.45rem;
  padding-right: 0.45rem;
}

/* Account dropdown: force vertical stack (submenu can inherit horizontal flex from the bar menu) */
.amicus-navbar-user-menu-context .dx-overlay-content .dx-menu-items-container {
  flex-direction: column !important;
  align-items: stretch !important;
}

.amicus-navbar-user-menu-context .dx-overlay-content .dx-menu-item-wrapper {
  max-width: none !important;
}

/* User account context menu — company SelectBox (not under #layout-navbar; overlay is on body) */
.amicus-navbar-user-menu-context .dx-selectbox,
.amicus-navbar-user-menu-context .dx-dropdowneditor {
  width: 100%;
  min-height: 36px;
}

.amicus-navbar-user-menu-context .dx-texteditor-input {
  min-height: 34px;
}

/* Extension picker popup (anchored to `#amicusNavbarExtensionNumber`) */
#layout-navbar.amicus-shell-navbar .amicus-navbar-ext-popup-inner .amicus-navbar-ext-sel-host .dx-selectbox,
#layout-navbar.amicus-shell-navbar .amicus-navbar-ext-popup-inner .amicus-navbar-ext-sel-host .dx-dropdowneditor {
  width: 100%;
  min-height: 36px;
}

#layout-navbar.amicus-shell-navbar .amicus-navbar-ext-popup-inner .dx-texteditor-input {
  min-height: 34px;
}

.amicus-navbar-ext-popup.dx-popup-wrapper {
  z-index: var(--amicus-z-dx-overlay, 1200);
}

/* Account menu overlays (tagged in {@link amicusInitNavbarUserMenuPopup} on submenu show) */
.amicus-navbar-user-menu-context.dx-context-menu,
.amicus-navbar-user-menu-context.dx-overlay-wrapper {
  z-index: var(--amicus-z-dx-overlay, 1200);
}

.amicus-navbar-user-menu-context.dx-context-menu .dx-overlay-content,
.amicus-navbar-user-menu-context.dx-overlay-wrapper .dx-overlay-content {
  box-shadow: 0 0.35rem 1.25rem rgba(38, 43, 67, 0.14);
}

.amicus-navbar-user-menu-context .dx-submenu {
  border-radius: var(--amicus-radius-shell, 0.75rem);
  box-sizing: border-box;
  box-shadow: 0 0.35rem 1.25rem rgba(38, 43, 67, 0.12);
}

/*
 * Account dropdown is opened from a horizontal dxMenu root; DevExtreme can keep a row flex on the
 * submenu container so only the first row (e.g. vendor label) fits in the panel — force a column stack.
 */
.amicus-navbar-user-menu-context .dx-menu-items-container {
  flex-direction: column !important;
  align-items: stretch !important;
}

.amicus-navbar-user-menu-context .dx-menu-item-wrapper {
  width: 100%;
  max-width: 100%;
}

.amicus-navbar-user-menu-context .dx-overlay-content {
  height: auto !important;
  min-height: 0;
}

.amicus-navbar-user-menu-context .dx-menu-item {
  text-align: left;
}

.amicus-navbar-user-menu-context .dx-menu-item-content {
  justify-content: flex-start;
  padding-left: 0.4rem !important;
  padding-right: 0.4rem !important;
  box-sizing: border-box;
}

.amicus-navbar-user-menu-context .dx-menu-item .dx-icon {
  margin-inline-end: 0.35rem;
  margin-inline-start: 0;
  flex-shrink: 0;
}

/* “Default page” root row — built-in `icon: 'home'`; keep glyph crisp in nested submenu (DevExtreme icon font note). */
.amicus-navbar-user-menu-context .amicus-navbar-user-menu-defpage-root .dx-icon {
  -webkit-font-smoothing: antialiased;
  color: inherit;
}

/* First row: vendor label from {@link window.__AMICUS_SHELL_META__} — disabled item, keep readable */
.amicus-navbar-user-menu-context .amicus-navbar-user-menu-vendor-row.dx-state-disabled {
  opacity: 1 !important;
}

.amicus-navbar-user-menu-context .amicus-navbar-user-menu-vendor-row .dx-menu-item-content {
  font-weight: 600;
  font-size: 0.8125rem;
  color: var(--bs-secondary-color, #6c757d);
  cursor: default;
}

/* Section heading (e.g. “Default page”) — flat list under main account menu, no nested flyout */
.amicus-navbar-user-menu-context .amicus-navbar-user-menu-section-label.dx-state-disabled {
  opacity: 1 !important;
}

.amicus-navbar-user-menu-context .amicus-navbar-user-menu-section-label .dx-menu-item-content {
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--bs-secondary-color, #6c757d);
  cursor: default;
}

.amicus-navbar-user-menu-context .amicus-navbar-user-menu-company-tpl .dx-selectbox {
  width: 100%;
}

/* Tight chrome around extension SelectBox only */
.amicus-navbar-ext-popup .dx-popup-content,
.amicus-navbar-ext-popup .dx-popup-content-scrollable {
  padding: 0.2rem 0.35rem !important;
}

#layout-navbar.amicus-shell-navbar .amicus-navbar-ext-popup-inner {
  padding: 0;
  margin: 0;
}

/* --- In-page host: place empty div above grid/pivot; use FormLoadingBar.show($host) (not fixed to viewport top) --- */
.amicus-form-loading-host {
  width: 100%;
  flex-shrink: 0;
  box-sizing: border-box;
  min-height: 0;
}

/* --- `.form-loading-bar` markup (common.js FormLoadingBar) — global `#loader` host --- */
.form-loading-bar {
  width: 100%;
  flex-shrink: 0;
  height: 3px;
  overflow: hidden;
  border-radius: 2px;
  background: rgba(var(--bs-primary-rgb, 105, 108, 255), 0.12);
  margin-bottom: 0.35rem;
  box-sizing: border-box;
}

.form-loading-bar__track {
  height: 100%;
  width: 100%;
  position: relative;
  overflow: hidden;
}

.form-loading-bar__bar {
  height: 100%;
  width: 38%;
  border-radius: 2px;
  background: var(--bs-primary, #696cff);
  animation: form-loading-bar-slide 1.05s ease-in-out infinite;
}

@keyframes form-loading-bar-slide {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(320%);
  }
}

/* --- Global `#loader`: fixed top host for FormLoadingBar (replaces fullscreen scrim + spinner) --- */
#loader {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  height: auto;
  min-height: 0;
  z-index: 10050;
  pointer-events: none;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-sizing: border-box;
  box-shadow: none;
}

#loader .spinner-border {
  display: none !important;
}