/* =============================================================================
   OrganicSystem — ERP Grid Container
   Width  = available content width (never 100vw)
   Height = flex-allocated / ResizeObserver (never height:100% or fixed px in CSS)
   Grid always fits inside the container — no overflow, no disappearance.
   ============================================================================= */

:root {
  --os-gc-min-size: 0px;
}

/* ---------- Flex chain: content area → container → grid ---------- */
body.os-module-shell.os-table-fill-page main.os-app-main,
body.os-module-shell.os-table-fill-page .app-content.os-app-main,
body.os-app-shell.os-table-fill-page > .container-fluid > .os-app-main,
html[data-os-gc="active"] main.os-app-main,
html[data-os-gc="active"] .os-app-main {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  overflow-x: clip !important;
}

/* Page roots that host a primary grid */
html[data-os-gc="active"] .os-app-main > [class*="-index-page"],
html[data-os-gc="active"] .os-app-main > [class*="-page"]:has(.os-grid-container),
html[data-os-gc="active"] .os-app-main > .os-page-scroll:has(.os-grid-container),
body.os-table-fill-page .os-app-main > [class*="-page"],
body.os-table-fill-page .os-app-main > .os-page-scroll {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  overflow: hidden !important;
}

/* ---------- Grid Container (authoritative host) ---------- */
.os-grid-container,
.os-dx-grid.os-grid-container,
.os-page-grid-view.os-grid-container,
.os-page-table-view.os-grid-container,
[data-os-grid-container="true"] {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  box-sizing: border-box !important;

  /* Width = content width, never viewport width */
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;

  /* Height from flex / --os-gc-height; grid owns vertical scroll */
  height: var(--os-gc-height, auto) !important;
  max-height: var(--os-gc-height, 100%) !important;
  min-height: 0 !important;

  overflow: hidden !important;
  position: relative;
}

/* Soft fill hint from Dynamic Height / viewport math (optional CSS var only) */
.os-grid-container[data-os-gc-fill="1"] {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* When a measured size is published via CSS variables (from ResizeObserver) */
.os-grid-container[data-os-gc-sized="1"] {
  /* Prefer flex; vars used by children / JS sync only */
  max-width: min(100%, var(--os-gc-width, 100%)) !important;
}

/* Content-sized hosts must never take GridContainer fill height. */
.os-grid-container.os-dx-grid--content[data-os-grid-height="auto"],
.os-dx-grid.os-dx-grid--content[data-os-grid-height="auto"],
.os-dx-grid[data-os-grid-size="content"][data-os-grid-height="auto"],
[data-os-grid-container="off"].os-dx-grid--content[data-os-grid-height="auto"] {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

.os-grid-container.os-dx-grid--content[data-os-grid-height="auto"] > .dx-datagrid,
.os-grid-container.os-dx-grid--content[data-os-grid-height="auto"].dx-datagrid,
.os-dx-grid.os-dx-grid--content[data-os-grid-height="auto"] > .dx-datagrid,
.os-dx-grid.os-dx-grid--content[data-os-grid-height="auto"].dx-datagrid {
  flex: 0 0 auto !important;
  height: auto !important;
  max-height: none !important;
}

/* Inner DevExtreme widget — flex child, not height:100% */
.os-grid-container > .dx-datagrid,
.os-grid-container.dx-datagrid {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  align-self: stretch !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

.os-grid-container .dx-datagrid-rowsview,
.os-grid-container .dx-scrollable-container {
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* rowsview clips; native scrollable-container owns X+Y (no double bars) */
.os-grid-container .dx-datagrid-rowsview {
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  overscroll-behavior: contain;
  height: 100% !important;
  max-height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.os-grid-container .dx-datagrid-rowsview.dx-scrollable-native .dx-scrollable-container,
.os-grid-container .dx-scrollable-native > .dx-scrollable-wrapper > .dx-scrollable-container {
  overflow-x: auto !important;
  overflow-y: auto !important;
  overscroll-behavior: contain;
  height: 100% !important;
  max-height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

.os-grid-container .dx-datagrid-rowsview.dx-scrollable-simulated .dx-scrollable-container,
.os-grid-container .dx-scrollable-simulated > .dx-scrollable-wrapper > .dx-scrollable-container {
  overflow: hidden !important;
  height: 100% !important;
  max-height: 100% !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}

/* Split / plan pane grid hosts */
.os-split-view .os-grid-container,
.plan-grid-panel > .os-grid-container,
.plan-grid-panel > [id$="-grid"].os-grid-container,
.ags-farms-section .os-grid-container {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: auto !important;
  max-width: 100% !important;
}

/* Stacked split: allow natural growth so panes never disappear */
.os-split-view[data-os-split-mode="stack"] .os-grid-container {
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

/* Kill banned patterns on grid containers */
.os-grid-container,
.os-dx-grid.os-grid-container,
.os-page-grid-view.os-grid-container {
  width: auto !important; /* overrides any 100vw */
  max-width: 100% !important;
}

/* Inner DX widget fills the sized host (rows scroll inside) */
.os-grid-container > .dx-datagrid,
.os-dx-grid.os-grid-container > .dx-datagrid,
.os-page-grid-view.os-grid-container > .dx-datagrid {
  height: 100% !important;
  max-height: 100% !important;
}