/* =============================================================================
   OrganicSystem — Unified vertical scrolling (CSS only)
   One scroll pane per shell: content scrolls; chrome stays put.
   Loads AFTER os-sticky-footer.css so these rules win conflicts.
   Does NOT use JS height math or fixed pixel page heights.
   ============================================================================= */

/* ---------- Shared scrollbar look (theme tokens) ---------- */
.os-scroll-pane,
body.os-module-shell:not(.os-table-fill-page) .app-main,
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout):not(.os-table-fill-page) > .container-fluid > .os-app-main,
body.os-report-layout:not(.os-table-fill-page) > .container-fluid > .os-app-main,
body.mk-page,
html:has(body.mk-page),
body.login-shell.login-shell-scrollable,
html:has(body.login-shell.login-shell-scrollable),
.modal-dialog-scrollable .modal-body,
.modal-body,
.app-sidebar__scroll,
.dropdown-menu,
.offcanvas-body {
  scrollbar-width: thin;
  scrollbar-color: var(--os-scroll-thumb) var(--os-scroll-track);
}

.os-scroll-pane::-webkit-scrollbar,
body.os-module-shell:not(.os-table-fill-page) .app-main::-webkit-scrollbar,
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout):not(.os-table-fill-page) > .container-fluid > .os-app-main::-webkit-scrollbar,
body.os-report-layout:not(.os-table-fill-page) > .container-fluid > .os-app-main::-webkit-scrollbar,
body.mk-page::-webkit-scrollbar,
html:has(body.mk-page)::-webkit-scrollbar,
body.login-shell.login-shell-scrollable::-webkit-scrollbar,
.modal-body::-webkit-scrollbar,
.app-sidebar__scroll::-webkit-scrollbar,
.dropdown-menu::-webkit-scrollbar,
.offcanvas-body::-webkit-scrollbar {
  width: var(--os-scroll-size);
  height: var(--os-scroll-size);
}

.os-scroll-pane::-webkit-scrollbar-track,
body.os-module-shell:not(.os-table-fill-page) .app-main::-webkit-scrollbar-track,
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout):not(.os-table-fill-page) > .container-fluid > .os-app-main::-webkit-scrollbar-track,
body.os-report-layout:not(.os-table-fill-page) > .container-fluid > .os-app-main::-webkit-scrollbar-track,
body.mk-page::-webkit-scrollbar-track,
html:has(body.mk-page)::-webkit-scrollbar-track,
body.login-shell.login-shell-scrollable::-webkit-scrollbar-track,
.modal-body::-webkit-scrollbar-track,
.app-sidebar__scroll::-webkit-scrollbar-track,
.dropdown-menu::-webkit-scrollbar-track,
.offcanvas-body::-webkit-scrollbar-track {
  background: var(--os-scroll-track);
}

.os-scroll-pane::-webkit-scrollbar-thumb,
body.os-module-shell:not(.os-table-fill-page) .app-main::-webkit-scrollbar-thumb,
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout):not(.os-table-fill-page) > .container-fluid > .os-app-main::-webkit-scrollbar-thumb,
body.os-report-layout:not(.os-table-fill-page) > .container-fluid > .os-app-main::-webkit-scrollbar-thumb,
body.mk-page::-webkit-scrollbar-thumb,
html:has(body.mk-page)::-webkit-scrollbar-thumb,
body.login-shell.login-shell-scrollable::-webkit-scrollbar-thumb,
.modal-body::-webkit-scrollbar-thumb,
.app-sidebar__scroll::-webkit-scrollbar-thumb,
.dropdown-menu::-webkit-scrollbar-thumb,
.offcanvas-body::-webkit-scrollbar-thumb {
  background: var(--os-scroll-thumb);
  border-radius: var(--os-scroll-radius);
  border: 2px solid transparent;
  background-clip: padding-box;
}

.os-scroll-pane::-webkit-scrollbar-thumb:hover,
body.os-module-shell:not(.os-table-fill-page) .app-main::-webkit-scrollbar-thumb:hover,
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout):not(.os-table-fill-page) > .container-fluid > .os-app-main::-webkit-scrollbar-thumb:hover,
body.os-report-layout:not(.os-table-fill-page) > .container-fluid > .os-app-main::-webkit-scrollbar-thumb:hover,
body.mk-page::-webkit-scrollbar-thumb:hover,
html:has(body.mk-page)::-webkit-scrollbar-thumb:hover,
body.login-shell.login-shell-scrollable::-webkit-scrollbar-thumb:hover,
.modal-body::-webkit-scrollbar-thumb:hover,
.app-sidebar__scroll::-webkit-scrollbar-thumb:hover,
.dropdown-menu::-webkit-scrollbar-thumb:hover,
.offcanvas-body::-webkit-scrollbar-thumb:hover {
  background: var(--os-scroll-thumb-hover);
  background-clip: padding-box;
}

.os-scroll-pane::-webkit-scrollbar-thumb:active,
body.os-module-shell:not(.os-table-fill-page) .app-main::-webkit-scrollbar-thumb:active,
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout):not(.os-table-fill-page) > .container-fluid > .os-app-main::-webkit-scrollbar-thumb:active,
body.os-report-layout:not(.os-table-fill-page) > .container-fluid > .os-app-main::-webkit-scrollbar-thumb:active,
.modal-body::-webkit-scrollbar-thumb:active,
.app-sidebar__scroll::-webkit-scrollbar-thumb:active {
  background: var(--os-scroll-thumb-active);
  background-clip: padding-box;
}

/* Prefer smooth scrolling where the OS allows it */
@media (prefers-reduced-motion: no-preference) {
  .os-scroll-pane,
  body.os-module-shell:not(.os-table-fill-page) .app-main,
  body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout):not(.os-table-fill-page) > .container-fluid > .os-app-main,
  body.os-report-layout:not(.os-table-fill-page) > .container-fluid > .os-app-main,
  body.mk-page,
  html:has(body.mk-page),
  body.login-shell.login-shell-scrollable,
  .modal-body,
  .app-sidebar__scroll {
    scroll-behavior: smooth;
  }
}

/* ---------- Module shell (Farm / Facility / Settings) ----------
   Keep the established model used by touch-responsive / os-shell-sidebar:
   .app-main scrolls; topbar/toolbar stay sticky; main overflow is visible.
   Do NOT force main-only scroll — that fights chrome observers and makes
   hubs (and Export Invoice) look like continuous reloads.
*/
html:has(body.os-module-shell) {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.os-module-shell,
body.os-module-shell.os-app-shell {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

body.os-module-shell:not(.os-table-fill-page) .app-main {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  /* Scroll ownership: main.os-app-main (os-scroll / os-responsive-fix). */
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: contain;
}

body.os-module-shell:not(.os-table-fill-page) .app-main::-webkit-scrollbar {
  width: var(--os-scroll-size);
  height: var(--os-scroll-size);
}

body.os-module-shell:not(.os-table-fill-page) .app-main::-webkit-scrollbar-track {
  background: var(--os-scroll-track);
}

body.os-module-shell:not(.os-table-fill-page) .app-main::-webkit-scrollbar-thumb {
  background: var(--os-scroll-thumb);
  border-radius: var(--os-scroll-radius);
  border: 2px solid transparent;
  background-clip: padding-box;
}

body.os-module-shell:not(.os-table-fill-page) .app-main::-webkit-scrollbar-thumb:hover {
  background: var(--os-scroll-thumb-hover);
  background-clip: padding-box;
}

/*
  Module shell chrome stays in normal document flow (Topbar → Page Title → Toolbar → Main).
  Do NOT sticky/fixed these with hardcoded tops — that skipped .os-erp-breadcrumb and
  caused the title bar to sit under the topbar or be covered by filters.
*/
body.os-module-shell:not(.os-table-fill-page) .app-main > .app-topbar,
body.os-module-shell:not(.os-table-fill-page) .app-main > .os-erp-breadcrumb,
body.os-module-shell:not(.os-table-fill-page) .app-main > #os-app-page-chrome-host:not([hidden]),
body.os-module-shell:not(.os-table-fill-page) .app-main > .os-module-toolbar {
  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:not(.os-table-fill-page) .app-main > .app-topbar {
  z-index: 30 !important;
}

body.os-module-shell:not(.os-table-fill-page) .app-main > .os-erp-breadcrumb {
  z-index: auto !important;
}

body.os-module-shell:not(.os-table-fill-page) .app-main > #os-app-page-chrome-host:not([hidden]) {
  z-index: 29 !important;
}

body.os-module-shell:not(.os-table-fill-page) .app-main > .os-module-toolbar {
  z-index: 28 !important;
  /* Persistent group filters: docked flex sibling under the topbar; never scrolls with page content. */
  flex-shrink: 0 !important;
}

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 {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
}

body.os-module-shell:not(.os-table-fill-page) .app-main > .os-app-footer,
body.os-module-shell:not(.os-table-fill-page) .app-main > footer.os-app-footer {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}

/*
  Dedicated Export Invoice / Products (and similar): MUST override the scroll-app-main
  rules above. os-app-scroll loads after touch-responsive; without this, overflow:auto
  on .app-main fights overflow:hidden + flex-fill main and the grid height fitters
  thrash forever (page flash / scroll reset).
*/
body.os-module-shell.os-dedicated-export-page:not(.os-table-fill-page) .app-main,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoice-index-page) .app-main,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoices-products-page) .app-main,
body.os-module-shell:not(.os-table-fill-page):has([data-os-dedicated-page-chrome="true"]) .app-main {
  overflow: hidden !important;
}

body.os-module-shell.os-dedicated-export-page:not(.os-table-fill-page) .app-main > main.os-app-main.app-content,
body.os-module-shell.os-dedicated-export-page:not(.os-table-fill-page) .app-main > main.os-app-main,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoice-index-page) .app-main > main.os-app-main.app-content,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoice-index-page) .app-main > main.os-app-main,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoices-products-page) .app-main > main.os-app-main.app-content,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoices-products-page) .app-main > main.os-app-main,
body.os-module-shell:not(.os-table-fill-page):has([data-os-dedicated-page-chrome="true"]) .app-main > main.os-app-main.app-content,
body.os-module-shell:not(.os-table-fill-page):has([data-os-dedicated-page-chrome="true"]) .app-main > main.os-app-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}

body.os-module-shell.os-dedicated-export-page:not(.os-table-fill-page) .app-main > .app-topbar,
body.os-module-shell.os-dedicated-export-page:not(.os-table-fill-page) .app-main > .os-module-toolbar,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoice-index-page) .app-main > .app-topbar,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoice-index-page) .app-main > .os-module-toolbar,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoices-products-page) .app-main > .app-topbar,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoices-products-page) .app-main > .os-module-toolbar {
  position: relative !important;
  top: auto !important;
}

body.os-module-shell.os-dedicated-export-page:not(.os-table-fill-page) .app-main > .os-app-footer,
body.os-module-shell.os-dedicated-export-page:not(.os-table-fill-page) .app-main > footer.os-app-footer,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoice-index-page) .app-main > .os-app-footer,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoice-index-page) .app-main > footer.os-app-footer,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoices-products-page) .app-main > .os-app-footer,
body.os-module-shell:not(.os-table-fill-page):has(.ags-export-invoices-products-page) .app-main > footer.os-app-footer {
  margin-top: 0 !important;
}

/* Hub: fill remaining column above the footer without nested scrollbars */
body.os-module-shell:not(.os-table-fill-page):has(.module-main-page) .app-main > main.os-app-main {
  display: flex !important;
  flex-direction: column !important;
}

body.os-module-shell:not(.os-table-fill-page):has(.module-main-page) .module-main-page {
  flex: 1 0 auto;
  min-height: 0;
}

/* Table-fill index pages: lock app-main; grid rows scroll inside DevExtreme */
body.os-module-shell.os-table-fill-page .app-main {
  overflow: hidden !important;
}

body.os-module-shell.os-table-fill-page .app-main > main.os-app-main.app-content,
body.os-module-shell.os-table-fill-page .app-main > main.os-app-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

/* ---------- Classic shell (Admin / non-module) ----------
   Fixed header; main scrolls; footer pinned under the flex column.
*/
html:has(body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout)) {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  /* Header is in-flow in this flex column. Body padding-top for a fixed header
     creates the empty white band above the blue navbar on / and Login chrome. */
  padding-top: 0 !important;
}

body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > header.os-app-header,
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > .os-subscription-warning,
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > .alert.os-subscription-warning {
  flex: 0 0 auto !important;
}

body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > header.os-app-header {
  height: auto !important;
  max-height: none;
}

body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > header.os-app-header > .os-app-navbar {
  min-height: 2.75rem;
  height: auto;
  flex: 0 0 auto;
}

body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > .container-fluid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100%;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout):not(.os-table-fill-page) > .container-fluid > .os-app-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100%;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > footer.os-app-footer,
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout) > footer.footer {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  width: 100%;
}

/* Classic shell + grid fill: lock main, let grid rows scroll */
body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout).os-table-fill-page > .container-fluid > .os-app-main {
  overflow: hidden !important;
}

/* ---------- Report layout ---------- */
body.os-report-layout {
  height: 100dvh !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  padding-top: 0 !important;
}

body.os-report-layout > header.os-app-header {
  position: relative !important;
  top: auto !important;
  flex: 0 0 auto !important;
}

body.os-report-layout > .container-fluid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.os-report-layout > .container-fluid > .os-app-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.os-report-layout > footer.os-app-footer {
  flex: 0 0 auto !important;
}

/* ---------- Marketing landing (document scroll; auto bar only when needed) ---------- */
html:has(body.mk-page) {
  height: auto !important;
  max-height: none !important;
  overflow-x: clip;
  overflow-y: auto !important;
}

body.mk-page {
  min-height: 100dvh;
  overflow-x: clip;
  overflow-y: visible;
}

/* ---------- Login ----------
   Default branded login stays viewport-locked (no stray document bar).
   Scrollable variants (Subscribe, long forms) scroll the document.
*/
html:has(body.login-shell:not(.login-shell-scrollable)) {
  overflow: hidden !important;
}

body.login-shell:not(.login-shell-scrollable) {
  overflow: hidden !important;
}

body.login-shell.login-shell-scrollable,
html:has(body.login-shell.login-shell-scrollable) {
  overflow-x: clip !important;
  overflow-y: auto !important;
}

/* ---------- Dialogs / overlays ---------- */
.modal-dialog-scrollable .modal-body,
.modal-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.offcanvas-body {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* Nested scroll only where required (grids / sidebar / popups) */
.app-sidebar__scroll {
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/*
  Table-fill pages: grid owns Y. Do NOT force overflow-y:visible on rowsview —
  that removed the DataGrid vertical scrollbar while main stayed overflow:hidden.
  Scroll ownership is enforced by os-scroll.css / os-scroll-engine.css /
  os-responsive-fix.css (native container = overflow-y:auto).
*/
body.os-table-fill-page .dx-datagrid-rowsview,
body.os-module-shell.os-table-fill-page .dx-datagrid-rowsview {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

body.os-table-fill-page .dx-datagrid-rowsview.dx-scrollable-native .dx-scrollable-container,
body.os-module-shell.os-table-fill-page .dx-datagrid-rowsview.dx-scrollable-native .dx-scrollable-container {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* Avoid double document + pane scrollbars on non-excluded shells */
html:has(body.os-module-shell),
html:has(body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-report-layout)),
html:has(body.os-report-layout) {
  overscroll-behavior: none;
}