/* =============================================================================
   OrganicSystem — ERP Responsive Audit Repair (final kill-switch)
   Loads LAST. Layout only — no business logic / workflow changes.

   Contract:
   - No page-level horizontal scrolling
   - Form pages: one vertical scrollbar = content area (main.os-app-main)
   - Grid pages: vertical scrollbar inside the grid host (not the page)
   - Toolbars wrap (never nowrap + X-scroll)
   - Grids/tables scroll X+Y inside their host
   - Dialogs / popups / sidebar / header / footer stay usable
   ============================================================================= */

:root {
  --os-audit-gutter: max(0.5rem, env(safe-area-inset-left, 0px));
  --os-audit-gutter-end: max(0.5rem, env(safe-area-inset-right, 0px));
}

/* ---------- C1: Kill page-level horizontal scroll ---------- */
html,
html:has(body.os-app-body),
html:has(body.os-app-shell),
html:has(body.os-module-shell),
html:has(body.os-portrait-layout),
html.os-portrait-root,
body.os-app-shell,
body.os-module-shell,
body.os-app-body,
body.os-portrait-layout,
body.login-shell {
  overflow-x: clip !important;
  max-width: 100vw !important;
}

body.os-app-shell > .container-fluid,
body.os-app-body > .container-fluid,
body.os-module-shell .app-main,
body.os-module-shell .app-main > main.os-app-main,
body.os-app-shell .os-app-main,
body.os-app-body .os-app-main,
.os-app-main,
.app-content,
[class*="-edit-page"],
[class*="-index-page"],
.module-main-page,
.prs-page,
.os-page-scroll {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  overflow-x: clip !important;
}

/* Nested page scroll hosts must not create a second X scrollbar */
body.os-app-shell:not(.login-shell) .os-page-scroll,
body.os-module-shell .os-page-scroll,
body.os-app-shell:not(.login-shell) .os-app-main > :only-child[class*="-edit-page"],
body.os-app-shell:not(.login-shell) .os-app-main > :only-child[class*="-index-page"],
body.os-module-shell .os-app-main > :only-child[class*="-edit-page"],
body.os-module-shell .os-app-main > :only-child[class*="-index-page"] {
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ---------- C2: Single vertical scroll owner = main.os-app-main ---------- */
body.os-module-shell .app-main,
body.os-portrait-layout.os-module-shell .app-main,
body.os-module-shell.has-sidebar .app-main,
html.os-portrait-root body.os-module-shell .app-main {
  overflow-x: hidden !important;
  overflow-y: hidden !important; /* not a scroll container */
}

body.os-module-shell .app-main > main.os-app-main,
body.os-module-shell .app-main > main.os-app-main.app-content,
body.os-module-shell:not(.os-table-fill-page) .app-main > main.os-app-main.app-content,
body.os-module-shell:not(.os-table-fill-page) .app-main > main.os-app-main,
body.os-portrait-layout.os-module-shell main.os-app-main.app-content,
body.os-portrait-layout.os-module-shell .app-content.os-app-main,
body.os-module-shell main.os-app-main.app-content,
body.os-module-shell .app-content.os-app-main,
html.os-portrait-root body.os-module-shell main.os-app-main {
  overflow-x: clip !important;
  overflow-y: auto !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-width: 100% !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.os-app-shell:not(.login-shell):not(.os-module-shell) > .container-fluid > .os-app-main {
  overflow-x: clip !important;
  overflow-y: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* ---------- H2: Toolbar — wrap, never page/tool X-scroll ---------- */
.os-page-toolbar,
.os-app-merged-toolbar,
.os-page-header-chrome-right .os-page-toolbar,
[data-os-dedicated-page-chrome="true"] .os-page-toolbar,
.prs-chrome .os-page-toolbar,
.plan-toolbar,
.rotation-toolbar,
#os-app-page-chrome-host .os-page-toolbar,
main .os-page-toolbar {
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
  white-space: normal !important;
}

/* Module filter column: never wrap beside #os-app-page-toolbar-slot (Phase 8.6 C1 / UI-1.16). */
.os-module-toolbar-inner {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  max-height: none !important;
}

.os-desktop-page-header,
.os-page-header-chrome-host,
.os-page-header-chrome,
.os-page-sticky-chrome:has(.os-page-toolbar),
#os-app-page-chrome-host:not([hidden]),
.os-app-page-chrome-host {
  height: auto !important;
  max-height: none !important;
  min-height: var(--os-page-title-bar-height, 2.5rem) !important;
  overflow: visible !important;
  max-width: 100% !important;
}

/* ---------- H3: Hub — never widen past viewport ---------- */
.module-main-page > .module-main-layout,
.module-main-layout,
.prs-main-layout {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
}

.module-main-sidebar,
.prs-sidebar,
.module-main-group-nav,
.prs-group-nav,
.module-main-content,
.prs-main-content {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* ---------- H4: Header / Footer containment ---------- */
body.os-module-shell .app-topbar,
header.os-app-header,
.os-app-header .os-app-navbar-inner {
  max-width: 100% !important;
  min-width: 0 !important;
  overflow: visible !important;
  height: auto !important;
  flex-wrap: wrap !important;
}

footer.os-app-footer,
footer.footer.os-app-footer,
body.os-module-shell .os-app-footer {
  position: relative !important;
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: var(--os-app-footer-height, 1.5rem) !important;
  min-height: var(--os-app-footer-height, 1.5rem) !important;
  max-height: var(--os-app-footer-height, 1.5rem) !important;
  overflow: hidden !important;
}

body.login-shell.login-shell-branded > footer.os-app-footer,
body.login-shell.login-shell-branded > footer.footer.os-app-footer {
  margin-top: auto !important;
  align-self: stretch !important;
  width: 100% !important;
}

/* ---------- Grid / Table: internal X (+ Y when grid owns scroll) ---------- */
.os-dx-grid,
.dx-datagrid,
.dx-treelist,
.table-responsive,
.os-erp-data-table-host,
.os-native-table-scroll,
.os-page-table-view,
.os-layout-scroll-x,
.qa-mock-grid {
  max-width: 100% !important;
  min-width: 0 !important;
}

/* X-scroll hosts. Do NOT set overflow-x alone on rowsview — CSS then computes
   overflow-y:auto and creates a second vertical bar beside scrollable-container. */
.dx-datagrid .dx-scrollable-container,
.table-responsive,
.os-erp-data-table-host,
.os-native-table-scroll,
.os-page-table-view,
.qa-mock-grid {
  overflow-x: auto !important;
  overscroll-behavior-x: contain;
}

.dx-datagrid-rowsview {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior-x: contain;
}

/* Grid-upgraded Bootstrap wrappers: keep X, never own Y */
html[data-os-grid-scroll="internal"] .table-responsive:has(.os-dx-grid, .dx-datagrid),
html[data-os-grid-scroll="internal"] .os-erp-data-table-host:has(.os-dx-grid, .dx-datagrid) {
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/*
  ROOT CAUSE FIX:
  data-os-scroll="content" is always set (form default), but grid pages also set
  data-os-grid-scroll="internal". The old rule forced overflow-y:visible on EVERY
  DataGrid scrollport whenever content mode was marked — which hid the grid's
  vertical scrollbar while main was locked to overflow-y:hidden (no scroll owner).

  Only disable nested grid Y when the PAGE owns Y and grids are document-flow.
*/
html[data-os-scroll="content"]:not([data-os-grid-scroll="internal"]) .dx-datagrid-rowsview,
html[data-os-scroll="content"]:not([data-os-grid-scroll="internal"]) .dx-datagrid .dx-scrollable-container {
  overflow-y: visible !important;
}

/* ---------- Dialogs / Popups ---------- */
/* Full-bleed dialogs only on narrow viewports; keep desktop modals sized by Bootstrap/ERP tokens. */
@media (max-width: 767.98px) {
  .modal-dialog,
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl {
    width: min(100vw - 1rem, 100%) !important;
    max-width: min(100vw - 1rem, 100%) !important;
    margin: 0.5rem auto !important;
  }
}

/* Compact dialogs (Transportation Dates, confirms, etc.) */
.modal-dialog.modal-sm,
.modal-dialog.os-erp-dialog--sm,
#export-invoice-transport-dates-modal .modal-dialog {
  width: min(28rem, calc(100vw - 1.5rem)) !important;
  max-width: min(28rem, calc(100vw - 1.5rem)) !important;
}

.modal-content {
  max-width: 100% !important;
  max-height: calc(100dvh - 1rem);
  overflow: auto;
}

/* Avoid modal shell + inner grid both scrolling */
.modal-content:has(.dx-datagrid) {
  overflow: hidden !important;
}

.dx-overlay-wrapper .dx-overlay-content,
.dx-popup-wrapper > .dx-overlay-content,
.dx-dialog-root .dx-overlay-content {
  max-width: min(100vw - 0.75rem, 100%) !important;
  max-height: min(90dvh, 100%) !important;
  box-sizing: border-box !important;
}

.dx-dropdowneditor-overlay .dx-overlay-content,
.dx-overlay-wrapper.dx-dropdowneditor-overlay .dx-overlay-content {
  max-width: min(100vw - 0.75rem, 28rem) !important;
  /* Override generic overlay max-height: 100% which can collapse in-grid dropdowns. */
  max-height: min(60vh, 360px) !important;
}

/* ---------- Sidebar (reinforce docked vs overlay) ---------- */
/* Keep .app-main in the flexible track on every module-shell page. */
body.os-module-shell.has-sidebar {
  grid-template-columns: auto minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) var(--os-app-footer-height, 1.5rem) !important;
  grid-template-areas:
    "sidebar main"
    "footer footer";
}

body.os-module-shell.has-sidebar > .app-sidebar {
  grid-area: sidebar;
  grid-column: 1;
  grid-row: 1;
}

body.os-module-shell.has-sidebar > .app-main {
  grid-area: main;
  grid-column: 2;
  grid-row: 1;
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
}

body.os-module-shell.has-sidebar > footer.os-app-footer,
body.os-module-shell.has-sidebar > footer.footer.os-app-footer {
  grid-area: footer;
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  width: 100% !important;
  max-width: none !important;
  height: var(--os-app-footer-height, 1.5rem) !important;
  min-height: var(--os-app-footer-height, 1.5rem) !important;
  max-height: var(--os-app-footer-height, 1.5rem) !important;
}

@media (min-width: 1200px) and (orientation: landscape) {
  body.os-module-shell.has-sidebar:not(.is-sidebar-collapsed),
  body.os-module-shell.has-sidebar.is-sidebar-collapsed {
    grid-template-columns: auto minmax(0, 1fr) !important;
  }

  body.os-module-shell .app-sidebar {
    position: sticky !important;
    transform: none !important;
    height: 100% !important;
    max-height: 100% !important;
  }

  body.os-module-shell .app-sidebar-backdrop {
    display: none !important;
  }
}

@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 767.98px) {
  body.os-module-shell.has-sidebar,
  body.os-module-shell.has-sidebar.is-sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.os-module-shell .app-sidebar {
    position: fixed !important;
    background-color: var(--os-color-sidebar, var(--os-color-surface, #ffffff)) !important;
    background-image: none !important;
    max-width: min(18rem, 88vw) !important;
    z-index: 1200 !important;
  }

  body.os-module-shell .app-main,
  body.os-module-shell.has-sidebar > .app-main {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    grid-area: auto !important;
    height: 100% !important;
    max-height: 100% !important;
  }
}

/* ---------- Forms / controls: no clip ---------- */
.form-control,
.form-select,
.btn,
.input-group,
.select2-container,
.ts-wrapper,
.dx-texteditor,
.dx-datebox {
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

.os-module-toolbar .form-select,
.os-module-toolbar .form-control,
.rotation-toolbar-select,
.admin-subscribers-search {
  min-width: 0 !important;
  max-width: 100% !important;
  width: 100% !important;
  flex: 1 1 8rem !important;
}

/* ---------- Soften hub max-content leftovers ---------- */
.module-main-group-nav,
.prs-group-nav,
.module-main-sidebar,
.prs-sidebar {
  width: auto !important;
  max-width: 100% !important;
}

@media (max-width: 991.98px) {
  .module-main-layout,
  .prs-main-layout {
    flex-wrap: wrap !important;
  }

  .module-main-sidebar,
  .prs-sidebar,
  .module-main-content,
  .prs-main-content,
  .module-main-group-panel,
  .prs-group-panel {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ---------- Split View: never hide a pane; stack under portrait ---------- */
.os-split-view,
.plan-grids-row.os-split-view {
  display: flex !important;
  visibility: visible !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

.os-split-view > .os-split-pane,
.os-split-view > .plan-grid-panel,
.os-split-view > .ags-farms-section,
.os-split-view > [class*="col-"] {
  visibility: visible !important;
  opacity: 1 !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

.os-split-view[data-os-split-mode="stack"] {
  flex-direction: column !important;
  height: auto !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
}

.os-split-view[data-os-split-mode="side"],
.plan-grids-row.os-split-view[data-os-split-mode="side"] {
  flex-direction: row !important;
}

.os-split-view[data-os-split-mode="stack"] > .os-split-pane,
.os-split-view[data-os-split-mode="stack"] > .plan-grid-panel,
.os-split-view[data-os-split-mode="stack"] > .ags-farms-section,
.os-split-view[data-os-split-mode="stack"] > [class*="col-"] {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
}

/* Dynamic Height fill hosts — never collapse to empty leftovers */
html[data-os-dh="fill"] .os-dh-fill,
html[data-os-dh="fill"] [data-os-dh-fill="1"] {
  min-height: var(--os-dh-min, 180px) !important;
  max-width: 100% !important;
}

/* Orientation Engine — stack layout kill-switch reinforcement.
   Page toolbars may wrap. Module filter column must NOT wrap (Phase 8.6 C1 /
   UI-1.16): column+wrap parks #os-app-page-toolbar-slot beside filters and
   overflow-x:clip hides Refresh. */
html[data-os-layout="stack"] .os-page-toolbar {
  flex-wrap: wrap !important;
  max-height: none !important;
  overflow-x: clip !important;
}

html[data-os-layout="stack"] .os-module-toolbar-inner {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  max-height: none !important;
  overflow-x: clip !important;
}

/* Grid Container — never 100vw; grid owns vertical scroll (not the page) */
.os-grid-container,
[data-os-grid-container="true"],
.os-dx-grid,
.os-page-grid-view {
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: var(--os-gc-height, 100%) !important;
  max-height: var(--os-gc-height, 100%) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.os-grid-container > .dx-datagrid,
.os-grid-container.dx-datagrid,
.os-dx-grid > .dx-datagrid,
.os-page-grid-view > .dx-datagrid {
  width: auto !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* Kill-switch: form pages keep main Y; grid pages keep grid Y (see os-scroll-engine.css) */
html[data-os-scroll-engine="on"] main.os-app-main:not(:has(.os-dx-grid)):not(:has(.os-page-grid-view)):not(:has(.os-grid-container)) {
  overflow-x: clip !important;
  overflow-y: auto !important;
}

html[data-os-scroll-engine="on"] main.os-app-main:has(.os-dx-grid):not(:has(.prs-local-invoice-edit)),
html[data-os-scroll-engine="on"] main.os-app-main:has(.os-page-grid-view),
html[data-os-scroll-engine="on"] main.os-app-main:has(.os-grid-container),
html[data-os-scroll-engine="on"] body.os-table-fill-page main.os-app-main {
  overflow-x: clip !important;
  overflow-y: hidden !important;
}

/* Sole Y owner = scrollable-container (prevents double vertical bars). */
html[data-os-scroll-engine="on"] .os-dx-grid .dx-datagrid-rowsview,
html[data-os-scroll-engine="on"] .os-page-grid-view .dx-datagrid-rowsview,
html[data-os-scroll-engine="on"] .os-grid-container .dx-datagrid-rowsview,
html[data-os-grid-scroll="internal"] .os-dx-grid .dx-datagrid-rowsview,
html[data-os-grid-scroll="internal"] .os-page-grid-view .dx-datagrid-rowsview,
html[data-os-grid-scroll="internal"] .os-grid-container .dx-datagrid-rowsview,
html[data-os-scroll-engine="on"] .os-dx-grid--fill .dx-datagrid-rowsview,
html[data-os-scroll-engine="on"] [data-os-grid-internal-scroll="1"] .dx-datagrid-rowsview {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* Native DX scroll: container is the vertical scrollbar owner. */
html[data-os-scroll-engine="on"] .os-dx-grid .dx-datagrid-rowsview.dx-scrollable-native .dx-scrollable-container,
html[data-os-scroll-engine="on"] .os-page-grid-view .dx-datagrid-rowsview.dx-scrollable-native .dx-scrollable-container,
html[data-os-scroll-engine="on"] .os-grid-container .dx-datagrid-rowsview.dx-scrollable-native .dx-scrollable-container,
html[data-os-grid-scroll="internal"] .os-dx-grid .dx-datagrid-rowsview.dx-scrollable-native .dx-scrollable-container,
html[data-os-grid-scroll="internal"] .os-page-grid-view .dx-datagrid-rowsview.dx-scrollable-native .dx-scrollable-container,
html[data-os-grid-scroll="internal"] .os-grid-container .dx-datagrid-rowsview.dx-scrollable-native .dx-scrollable-container,
html[data-os-scroll-engine="on"] .os-dx-grid--fill .dx-datagrid-rowsview.dx-scrollable-native .dx-scrollable-container,
html[data-os-scroll-engine="on"] [data-os-grid-internal-scroll="1"] .dx-datagrid-rowsview.dx-scrollable-native .dx-scrollable-container,
html[data-os-scroll-engine="on"] .os-dx-grid .dx-scrollable-native > .dx-scrollable-wrapper > .dx-scrollable-container,
html[data-os-scroll-engine="on"] .os-page-grid-view .dx-scrollable-native > .dx-scrollable-wrapper > .dx-scrollable-container,
html[data-os-scroll-engine="on"] .os-grid-container .dx-scrollable-native > .dx-scrollable-wrapper > .dx-scrollable-container,
html[data-os-grid-scroll="internal"] .dx-datagrid-rowsview.dx-scrollable-native .dx-scrollable-container {
  overflow-x: auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* Simulated DX scroll: keep container clipped — DX thumb owns scrolling. */
html[data-os-scroll-engine="on"] .os-dx-grid .dx-datagrid-rowsview.dx-scrollable-simulated .dx-scrollable-container,
html[data-os-scroll-engine="on"] .os-page-grid-view .dx-datagrid-rowsview.dx-scrollable-simulated .dx-scrollable-container,
html[data-os-scroll-engine="on"] .os-grid-container .dx-datagrid-rowsview.dx-scrollable-simulated .dx-scrollable-container,
html[data-os-grid-scroll="internal"] .os-dx-grid .dx-datagrid-rowsview.dx-scrollable-simulated .dx-scrollable-container,
html[data-os-grid-scroll="internal"] .os-page-grid-view .dx-datagrid-rowsview.dx-scrollable-simulated .dx-scrollable-container,
html[data-os-grid-scroll="internal"] .os-grid-container .dx-datagrid-rowsview.dx-scrollable-simulated .dx-scrollable-container,
html[data-os-scroll-engine="on"] .os-dx-grid--fill .dx-datagrid-rowsview.dx-scrollable-simulated .dx-scrollable-container,
html[data-os-scroll-engine="on"] [data-os-grid-internal-scroll="1"] .dx-datagrid-rowsview.dx-scrollable-simulated .dx-scrollable-container {
  overflow: hidden !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
}

/* HTML / Bootstrap table views: constrained host + vertical scrollbar */
html[data-os-scroll-engine="on"] .os-page-table-view.os-grid-container,
html[data-os-grid-scroll="internal"] .os-page-table-view.os-grid-container,
html[data-os-scroll-engine="on"] .os-page-table-view[data-os-grid-internal-scroll="1"],
html[data-os-grid-scroll="internal"] .os-page-table-view[data-os-grid-internal-scroll="1"] {
  overflow-x: auto !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  height: var(--os-gc-height, 100%) !important;
  max-height: var(--os-gc-height, 100%) !important;
}

html[data-os-scroll-engine="on"] .dx-popup-content:has(.dx-datagrid),
html[data-os-scroll-engine="on"] .modal-body:has(.dx-datagrid) {
  overflow: hidden !important;
}

html[data-os-layout="stack"] .os-split-view[data-os-split-mode="stack"],
html[data-os-layout="stack"] .plan-grids-row.os-split-view {
  flex-direction: column !important;
}

html[data-os-layout="wide"] .os-split-view[data-os-split-mode="side"] {
  flex-direction: row !important;
}

/* =============================================================================
   Module shell — pin title + filters/actions at top (no mid-page floating toolbar)
   Empty gap was caused by sticky/fixed top offsets on chrome/toolbars after promote.
   Dock: topbar → page chrome (title) → module toolbar (filters + actions) → scroll main
   ============================================================================= */
body.os-module-shell .app-main {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.os-module-shell .app-main > .app-topbar,
body.os-module-shell:not(.os-table-fill-page) .app-main > .app-topbar,
body.os-module-shell .app-main > .os-erp-breadcrumb,
body.os-module-shell:not(.os-table-fill-page) .app-main > .os-erp-breadcrumb,
body.os-module-shell .app-main > #os-app-page-chrome-host,
body.os-module-shell:not(.os-table-fill-page) .app-main > #os-app-page-chrome-host:not([hidden]),
body.os-module-shell .app-main > .os-module-toolbar,
body.os-module-shell:not(.os-table-fill-page) .app-main > .os-module-toolbar,
body.os-module-shell .app-main > .os-subscription-warning,
body.os-module-shell .app-main > .os-global-report-links {
  position: relative !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  transform: none !important;
}

body.os-module-shell .app-main > #os-app-page-chrome-host:not([hidden]),
body.os-module-shell .app-main > #os-app-page-chrome-host:not([hidden]) .os-desktop-page-header,
body.os-module-shell .app-main > #os-app-page-chrome-host:not([hidden]) .os-page-header-chrome-host,
body.os-module-shell .app-main > #os-app-page-chrome-host:not([hidden]) .os-page-header-chrome,
body.os-module-shell .app-main > #os-app-page-chrome-host:not([hidden]) .plan-toolbar,
body.os-module-shell .app-main > #os-app-page-chrome-host:not([hidden]) .rotation-toolbar {
  position: relative !important;
  top: auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

/* Title chrome: compact — never reserve a hollow band above filters */
body.os-module-shell #os-app-page-chrome-host:not([hidden]) {
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  padding-top: 0.25rem !important;
  padding-bottom: 0.25rem !important;
}

body.os-module-shell #os-app-page-chrome-host .os-page-toolbar-source-empty,
body.os-module-shell #os-app-page-chrome-host .os-page-header-chrome-right:empty,
body.os-module-shell #os-app-page-chrome-host .os-page-header-chrome-center:empty {
  display: none !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Filters + action buttons stay docked under title (the red-rectangle band) */
body.os-module-shell .app-main > .os-module-toolbar {
  z-index: 30 !important;
  background: var(--shell-surface, var(--os-color-surface, #fff)) !important;
}

/* Never leave a fixed/sticky toolbar floating inside scrolling main on module pages */
body.os-module-shell main .os-page-sticky-chrome:not(.site-cert-sticky-header):not([data-os-dedicated-page-chrome="true"]),
body.os-module-shell main .os-desktop-page-header,
body.os-module-shell main .os-page-header-chrome-host,
body.os-module-shell main .plan-toolbar,
body.os-module-shell main .rotation-toolbar,
body.os-module-shell [data-os-force-edit-toolbar="true"] .os-desktop-page-header,
body.os-module-shell [class*="-edit-page"] .os-desktop-page-header {
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
}

/* Module main fills remaining shell height. Form pages keep page Y;
   grid-fill pages must NOT reopen page Y (kill-switch above + scroll-engine). */
body.os-module-shell .app-main > main.os-app-main,
body.os-module-shell .app-main > main.os-app-main.app-content {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
}

/* Must beat main.os-app-main.app-content { overflow-y:auto } (higher specificity). */
body.os-module-shell .app-main > main.os-app-main:has(.os-dx-grid--fill),
body.os-module-shell .app-main > main.os-app-main.app-content:has(.os-dx-grid--fill),
body.os-module-shell .app-main > main.os-app-main:has([data-os-grid-internal-scroll="1"]),
body.os-module-shell .app-main > main.os-app-main.app-content:has([data-os-grid-internal-scroll="1"]),
body.os-module-shell .app-main > main.os-app-main:has(.os-grid-container),
body.os-module-shell .app-main > main.os-app-main.app-content:has(.os-grid-container),
body.os-module-shell .app-main > main.os-app-main:has(.os-page-grid-view),
body.os-module-shell .app-main > main.os-app-main.app-content:has(.os-page-grid-view),
body.os-module-shell.os-table-fill-page .app-main > main.os-app-main,
body.os-module-shell.os-table-fill-page .app-main > main.os-app-main.app-content,
html[data-os-grid-scroll="internal"] body.os-module-shell .app-main > main.os-app-main:not(:has(.prs-local-invoice-edit)),
html[data-os-grid-scroll="internal"] body.os-module-shell .app-main > main.os-app-main.app-content:not(:has(.prs-local-invoice-edit)) {
  overflow-y: hidden !important;
}

/* Portrait / narrow: page scrollbar wins over the landscape grid-internal lock above */
@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 991.98px) {
  body.os-module-shell .app-main > main.os-app-main:has(.os-dx-grid--fill),
  body.os-module-shell .app-main > main.os-app-main.app-content:has(.os-dx-grid--fill),
  body.os-module-shell .app-main > main.os-app-main:has([data-os-grid-internal-scroll="1"]),
  body.os-module-shell .app-main > main.os-app-main.app-content:has([data-os-grid-internal-scroll="1"]),
  body.os-module-shell .app-main > main.os-app-main:has(.os-grid-container),
  body.os-module-shell .app-main > main.os-app-main.app-content:has(.os-grid-container),
  body.os-module-shell .app-main > main.os-app-main:has(.os-page-grid-view),
  body.os-module-shell .app-main > main.os-app-main.app-content:has(.os-page-grid-view),
  body.os-module-shell.os-table-fill-page .app-main > main.os-app-main,
  body.os-module-shell.os-table-fill-page .app-main > main.os-app-main.app-content,
  html[data-os-grid-scroll="internal"] body.os-module-shell .app-main > main.os-app-main,
  html[data-os-grid-scroll="internal"] body.os-module-shell .app-main > main.os-app-main.app-content,
  html[data-os-portrait-scroll="page"] body.os-module-shell .app-main > main.os-app-main,
  html[data-os-portrait-scroll="page"] body.os-module-shell .app-main > main.os-app-main.app-content {
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
  }
}

/* Fill grids own the viewport; Bootstrap mb-3 on upgraded hosts creates a 16px page scroll gap. */
body.os-table-fill-page main.os-app-main > .os-dx-grid.os-dx-grid--fill,
body.os-table-fill-page main.os-app-main > .os-dx-grid[data-os-grid-internal-scroll="1"],
html[data-os-grid-scroll="internal"] main.os-app-main > .os-dx-grid.os-dx-grid--fill,
html[data-os-grid-scroll="internal"] main.os-app-main > .os-dx-grid[data-os-grid-internal-scroll="1"] {
  margin-bottom: 0 !important;
}

/* =============================================================================
   GLOBAL: dropdown / select / filter heights locked to toolbar token
   Final kill-switch — beats site.css / touch-responsive compact heights.
   ONE height standard with os-toolbar.css (--os-erp-toolbar-btn-height).
   ============================================================================= */
:root {
  --os-dropdown-control-height: var(--os-erp-toolbar-btn-height, 36px);
  --os-filter-control-height: var(--os-erp-toolbar-btn-height, 36px);
}

@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 767.98px) {
  :root {
    --os-dropdown-control-height: var(--os-erp-toolbar-btn-height, 40px);
    --os-filter-control-height: var(--os-erp-toolbar-btn-height, 40px);
  }
}

select.form-select:not([multiple]),
select.form-select-sm:not([multiple]),
.form-select:not([multiple]),
.form-select-sm:not([multiple]),
.module-main-filter-select:not([multiple]),
.prs-station-select,
.rotation-toolbar-select,
.os-module-toolbar .module-main-filter-select:not([multiple]),
.os-module-toolbar .prs-station-select,
.os-module-toolbar .form-select:not([multiple]),
.os-page-toolbar .form-select:not([multiple]),
.os-page-sticky-chrome .form-select:not([multiple]),
.os-desktop-page-header .form-select:not([multiple]),
.os-app-page-chrome-host .form-select:not([multiple]),
body.os-touch-layout .os-module-toolbar .form-select:not([multiple]),
body.os-touch-layout .os-module-toolbar .module-main-filter-select:not([multiple]),
body.os-touch-layout .os-module-toolbar .prs-station-select,
body.os-touch-layout:not(.os-portrait-layout) .os-module-toolbar .form-select:not([multiple]),
body.os-touch-layout:not(.os-portrait-layout) .os-module-toolbar .module-main-filter-select:not([multiple]),
body.os-touch-layout:not(.os-portrait-layout) .os-module-toolbar .prs-station-select,
body.os-touch-layout:not(.os-portrait-layout) .os-page-toolbar .form-select:not([multiple]),
body.os-touch-layout:not(.os-portrait-layout) .os-page-sticky-chrome .form-select:not([multiple]),
body.os-touch-layout:not(.os-portrait-layout) .os-desktop-page-header .form-select:not([multiple]) {
  height: var(--os-dropdown-control-height) !important;
  min-height: var(--os-dropdown-control-height) !important;
  max-height: var(--os-dropdown-control-height) !important;
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  box-sizing: border-box !important;
}

/* DevExtreme SelectBox / Lookup / TagBox (filters, forms, and in-grid editors) */
.dx-selectbox.dx-texteditor,
.dx-lookup.dx-texteditor,
.dx-tagbox.dx-texteditor,
.dx-dropdowneditor.dx-texteditor:not(.dx-datebox):not(.dx-numberbox),
.dx-datagrid .dx-editor-cell .dx-selectbox,
.dx-datagrid .dx-editor-cell .dx-lookup,
.dx-datagrid .dx-editor-cell .dx-dropdowneditor:not(.dx-datebox):not(.dx-numberbox),
.dx-datagrid-rowsview .dx-selectbox,
.dx-datagrid-rowsview .dx-lookup,
.dx-datagrid-filter-row .dx-selectbox,
.dx-datagrid-filter-row .dx-lookup {
  min-height: var(--os-dropdown-control-height) !important;
  height: auto !important;
  box-sizing: border-box !important;
}

.dx-selectbox .dx-texteditor-input,
.dx-lookup .dx-texteditor-input,
.dx-tagbox .dx-texteditor-input,
.dx-dropdowneditor:not(.dx-datebox):not(.dx-numberbox) .dx-texteditor-input,
.dx-datagrid .dx-editor-cell .dx-dropdowneditor:not(.dx-datebox):not(.dx-numberbox) .dx-texteditor-input,
.dx-datagrid-rowsview .dx-selectbox .dx-texteditor-input,
.dx-datagrid-rowsview .dx-lookup .dx-texteditor-input {
  min-height: calc(var(--os-dropdown-control-height) - 2px) !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
  font-size: 0.875rem !important;
  line-height: 1.25 !important;
  box-sizing: border-box !important;
}

/* Plan Product/Plot SelectBox lists — opaque themed popup (dark + light). */
.ags-plan-select-dropdown.dx-overlay-wrapper {
  z-index: 10050 !important;
}

.ags-plan-select-dropdown.dx-overlay-wrapper .dx-overlay-content,
.ags-plan-select-dropdown .dx-popup-content,
.ags-plan-select-dropdown .dx-scrollable,
.ags-plan-select-dropdown .dx-scrollable-wrapper,
.ags-plan-select-dropdown .dx-scrollable-container,
.ags-plan-select-dropdown .dx-scrollable-content,
.ags-plan-select-dropdown .dx-list {
  background-color: var(--os-color-dropdown, var(--popup-bg, var(--os-color-popup, var(--os-color-surface)))) !important;
  color: var(--popup-text, var(--os-color-text)) !important;
  border-color: var(--border, var(--os-color-border)) !important;
  opacity: 1 !important;
  visibility: visible !important;
}

.ags-plan-select-dropdown.dx-overlay-wrapper .dx-overlay-content {
  height: 320px !important;
  max-height: 320px !important;
  min-height: 320px !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: var(--os-shadow-md, 0 8px 24px rgba(0, 0, 0, 0.35)) !important;
}

.ags-plan-select-dropdown .dx-popup-content {
  flex: 1 1 auto !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
}

.ags-plan-select-dropdown .dx-scrollable,
.ags-plan-select-dropdown .dx-scrollable-wrapper,
.ags-plan-select-dropdown .dx-scrollable-container,
.ags-plan-select-dropdown .dx-list {
  flex: 1 1 auto !important;
  height: 100% !important;
  max-height: none !important;
  min-height: 0 !important;
}

.ags-plan-select-dropdown .dx-list .dx-list-item {
  min-height: 2rem !important;
  background-color: transparent !important;
  color: var(--popup-text, var(--os-color-text)) !important;
}

.ags-plan-select-dropdown .dx-list .dx-list-item.dx-state-hover,
.ags-plan-select-dropdown .dx-list .dx-list-item.dx-state-focused,
.ags-plan-select-dropdown .dx-list .dx-list-item.dx-list-item-selected {
  background-color: var(--os-popup-selection-hover-bg, var(--os-color-hover)) !important;
  color: var(--popup-text, var(--os-color-text)) !important;
}

/* Invalid site-product cell is danger-red — do not paint the in-cell SelectBox. */
.plan-page td.os-invalid-site-product .dx-selectbox,
.plan-page td.os-invalid-site-product .dx-texteditor,
.plan-page td.os-invalid-site-product .dx-texteditor-input,
.plan-page td.os-invalid-site-product .dx-placeholder {
  background-color: var(--os-color-input, var(--os-color-surface)) !important;
  color: var(--os-color-input-text, var(--os-color-text)) !important;
}

/* =============================================================================
   TOOLBAR FINAL PASS — reassert equal height after general dropdown rules.
   Ensures Print / Refresh / Export / TagBox / filters share one control height.
   ============================================================================= */
.os-page-toolbar .btn:not(.dropdown-item),
.os-page-toolbar-btn,
.os-page-toolbar-icon-btn,
.os-page-toolbar-labeled-btn,
.os-app-page-toolbar-slot .btn:not(.dropdown-item),
.os-app-page-toolbar-slot .os-page-toolbar-btn,
.os-app-page-toolbar-slot .os-page-toolbar-icon-btn,
.os-app-page-toolbar-slot .os-page-toolbar-labeled-btn,
.os-module-toolbar .os-app-page-toolbar-slot .btn:not(.dropdown-item),
.os-module-toolbar .os-app-page-toolbar-slot .dropdown > .btn,
.os-module-toolbar .os-app-page-toolbar-slot .dropdown > .dropdown-toggle,
.plan-toolbar .btn:not(.dropdown-item),
.rotation-toolbar .btn:not(.dropdown-item) {
  height: var(--os-erp-toolbar-btn-height, 36px) !important;
  min-height: var(--os-erp-toolbar-btn-height, 36px) !important;
  max-height: var(--os-erp-toolbar-btn-height, 36px) !important;
  box-sizing: border-box !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  white-space: nowrap !important;
}

.os-module-toolbar .module-main-filter-select:not([multiple]),
.os-module-toolbar .prs-station-select,
.os-app-page-toolbar-slot .os-app-header-filter-control .dx-tagbox,
.os-app-page-toolbar-slot .os-app-header-filter-control .dx-texteditor,
.os-module-toolbar .os-app-page-toolbar-slot .os-app-header-filter-control .dx-tagbox,
.os-module-toolbar .os-app-page-toolbar-slot .os-app-header-filter-control .dx-texteditor,
.os-app-page-toolbar-slot .os-balance-include-toggle,
.os-page-toolbar .os-balance-include-toggle {
  height: var(--os-erp-toolbar-btn-height, 36px) !important;
  min-height: var(--os-erp-toolbar-btn-height, 36px) !important;
  max-height: var(--os-erp-toolbar-btn-height, 36px) !important;
  box-sizing: border-box !important;
}

/* Local Invoice Edit: main owns page Y even when side DX grids are present. */
html[data-os-scroll-engine="on"] main.os-app-main:has(.prs-local-invoice-edit),
html[data-os-grid-scroll="internal"] main.os-app-main:has(.prs-local-invoice-edit),
html[data-os-scroll-engine="on"][data-os-grid-scroll="internal"] body.os-module-shell:has(.prs-local-invoice-edit) .app-main > main.os-app-main,
html[data-os-scroll-engine="on"][data-os-grid-scroll="internal"] body.os-module-shell:has(.prs-local-invoice-edit) .app-main > main.os-app-main.app-content,
html[data-os-grid-scroll="internal"] body.os-module-shell:has(.prs-local-invoice-edit) .app-main > main.os-app-main,
html[data-os-grid-scroll="internal"] body.os-module-shell:has(.prs-local-invoice-edit) .app-main > main.os-app-main.app-content {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

html[data-os-grid-scroll="internal"] .os-app-main > .prs-local-invoice-edit,
html[data-os-scroll-engine="on"] .prs-local-invoice-edit {
  display: flex !important;
  flex-direction: column !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

html[data-os-grid-scroll="internal"] .prs-local-invoice-edit .prs-content-panel,
html[data-os-grid-scroll="internal"] .prs-local-invoice-edit .prs-content-panel:has(.os-dx-grid, .dx-datagrid),
html[data-os-scroll-engine="on"] .prs-local-invoice-edit .prs-content-panel {
  display: block !important;
  flex: 0 0 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}