/* ==========================================================================
   OrganicSystem — Enterprise Split View Framework
   Side-by-side (desktop / tablet landscape) · stacked (portrait / mobile)
   Splitter: vertical in side mode · horizontal in stack mode
   Scroll: content area owns vertical scroll; grids own horizontal only
   ========================================================================== */

:root {
  --os-split-gap: 0;
  --os-split-gutter: 6px;
  --os-split-primary: 25%;
  --os-split-secondary: 75%;
  --os-split-stack-primary: 42%;
  --os-split-stack-secondary: 58%;
  --os-split-pane-min: 12rem;
  --os-split-stack-pane-min: 16rem;
}

/* ---------- Host / row ---------- */
.os-split-view,
.plan-grids-row.os-split-view,
.ags-farms-layout.os-split-view,
.prs-export-order-layout.os-split-view,
.prs-li-layout.os-split-view {
  --os-split-mode: side;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  gap: var(--os-split-gap);
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

.os-split-view-host,
.plan-page-grids-host.os-split-view-host {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.os-split-view-host > .os-split-view,
.plan-page-grids-host.os-split-view-host > .plan-grids-row.os-split-view {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100%;
}

/* ---------- Panes ---------- */
.os-split-view > .os-split-pane,
.os-split-view > .plan-grid-panel,
.os-split-view > .ags-farms-section,
.os-split-view > [class*="col-"] {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  box-sizing: border-box;
}

/* Default side ratios (overridable via CSS vars / JS) */
.os-split-view[data-os-split-mode="side"] > .os-split-pane--primary,
.os-split-view[data-os-split-mode="side"] > .plan-grid-panel-prev,
.os-split-view[data-os-split-mode="side"] > .ags-farms-section-sites,
.os-split-view[data-os-split-mode="side"] > .os-split-pane:first-of-type {
  flex: 0 0 var(--os-split-primary) !important;
  width: var(--os-split-primary) !important;
  max-width: none !important;
}

.os-split-view[data-os-split-mode="side"] > .os-split-pane--secondary,
.os-split-view[data-os-split-mode="side"] > .plan-grid-panel-current,
.os-split-view[data-os-split-mode="side"] > .ags-farms-section-plots,
.os-split-view[data-os-split-mode="side"] > .os-split-pane:last-of-type {
  flex: 1 1 var(--os-split-secondary) !important;
  width: auto !important;
  min-width: 0 !important;
}

/* Bootstrap dual columns — neutralize float/width in side mode */
.os-split-view.row[data-os-split-mode="side"] > [class*="col-"] {
  flex: 1 1 0 !important;
  width: auto !important;
  max-width: none !important;
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

.os-split-view.row[data-os-split-mode="side"] > [class*="col-"]:first-child {
  flex: 0 0 var(--os-split-primary) !important;
  width: var(--os-split-primary) !important;
}

/* ---------- Gutter / splitter ---------- */
.os-split-gutter {
  flex: 0 0 var(--os-split-gutter) !important;
  width: var(--os-split-gutter);
  min-width: var(--os-split-gutter);
  max-width: var(--os-split-gutter);
  align-self: stretch;
  position: relative;
  z-index: 2;
  background: var(--os-color-border, #bdbdbd);
  touch-action: none;
  user-select: none;
  cursor: col-resize;
}

.os-split-gutter::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
}

.os-split-view[data-os-split-mode="side"] > .os-split-gutter {
  cursor: col-resize;
}

.os-split-view[data-os-split-mode="side"] > .os-split-gutter::after {
  width: 2px;
  height: 2.5rem;
  background: var(--os-color-muted, #9e9e9e);
  border-radius: 1px;
}

.os-split-view[data-os-split-mode="stack"] > .os-split-gutter {
  flex: 0 0 var(--os-split-gutter) !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  height: var(--os-split-gutter);
  min-height: var(--os-split-gutter);
  max-height: var(--os-split-gutter);
  cursor: row-resize;
}

.os-split-view[data-os-split-mode="stack"] > .os-split-gutter::after {
  width: 2.5rem;
  height: 2px;
  background: var(--os-color-muted, #9e9e9e);
  border-radius: 1px;
}

.os-split-gutter:hover,
.os-split-gutter:focus-visible,
.os-split-gutter.is-dragging {
  background: color-mix(in srgb, var(--os-color-accent, #0d6efd) 35%, var(--os-color-border, #bdbdbd));
  outline: none;
}

/* ---------- Pane chrome / grid hosts ---------- */
.os-split-view .os-split-pane-title,
.os-split-view .plan-grid-panel-title,
.os-split-view .ags-farms-section-title,
.os-split-view .os-desktop-section-title {
  flex: 0 0 auto !important;
}

.os-split-view .os-split-pane-body,
.os-split-view .plan-grid-panel > [id$="-grid"],
.os-split-view .ags-farms-section .os-dx-grid {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

/* Invoice list (if split class is leftover): do not stretch over products. */
.os-split-view .ags-export-invoice-list-panel {
  flex: 0 0 auto !important;
  min-width: 0 !important;
  min-height: 200px !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.os-split-view .dx-datagrid,
.os-split-view .dx-datagrid-rowsview,
.os-split-view .dx-scrollable-container {
  max-width: 100% !important;
}

/* Scroll Engine: page owns Y — even side split grids are X-only */
.os-split-view[data-os-split-mode="side"] .dx-datagrid-rowsview {
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Invoice list keeps its own vertical scroll inside the left pane. */
.os-split-view[data-os-split-mode="side"] .ags-export-invoice-list-panel .dx-datagrid-rowsview,
.os-split-view[data-os-split-mode="stack"] .ags-export-invoice-list-panel .dx-datagrid-rowsview {
  overflow-x: auto !important;
  overflow-y: auto !important;
}

/* Stack mode: content area scrolls; grids keep X only */
.os-split-view[data-os-split-mode="stack"] .dx-datagrid-rowsview,
html[data-os-scroll="content"] .os-split-view[data-os-split-mode="stack"] .dx-datagrid-rowsview {
  overflow-y: visible !important;
}

/* ---------- STACK MODE — driven by data-os-split-mode (JS) ---------- */
.os-split-view[data-os-split-mode="stack"],
.plan-grids-row.os-split-view[data-os-split-mode="stack"],
.ags-farms-layout.os-split-view[data-os-split-mode="stack"],
.prs-export-order-layout.os-split-view[data-os-split-mode="stack"],
.prs-li-layout.os-split-view[data-os-split-mode="stack"] {
  flex-direction: column !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
}

.os-split-view[data-os-split-mode="stack"] ~ .os-split-view-host,
.os-split-view-host:has(> .os-split-view[data-os-split-mode="stack"]),
.plan-page-grids-host.os-split-view-host:has(> .os-split-view[data-os-split-mode="stack"]) {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  flex: 1 1 auto !important;
}

/* Stack: content-sized panes — never reserve empty viewport placeholders.
   Forced min-height on empty Previous Season was the large vertical gap. */
.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;
  min-width: 0 !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  border-right: none !important;
  border-bottom: 1px solid var(--os-color-border, #bdbdbd);
  overflow: visible !important;
}

.os-split-view[data-os-split-mode="stack"] > .os-split-pane:last-child,
.os-split-view[data-os-split-mode="stack"] > .plan-grid-panel:last-child {
  border-bottom: none !important;
}

.os-split-view[data-os-split-mode="stack"] > .plan-grid-panel > [id$="-grid"],
.os-split-view[data-os-split-mode="stack"] .os-dx-grid {
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Portrait plan page: allow content-area scroll (toolbar height respected by flex chrome) */
@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 991.98px) {
  html:has(body.os-app-body .ags-plan-page) {
    height: auto;
    overflow-x: clip;
    overflow-y: auto;
  }

  body.os-app-body:has(.ags-plan-page) {
    height: auto !important;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: visible !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.os-app-body:has(.ags-plan-page) > .container-fluid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    overflow: visible !important;
  }

  body.os-app-body:has(.ags-plan-page) > .container-fluid > .os-app-main,
  body.os-module-shell:has(.ags-plan-page) main.os-app-main {
    overflow-x: clip !important;
    overflow-y: auto !important;
    height: auto !important;
    max-height: none !important;
  }

  .ags-plan-page {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ags-plan-page .plan-page-chrome {
    flex: 0 0 auto !important;
    position: sticky;
    top: 0;
    z-index: 5;
    background: var(--os-color-surface, #fff);
  }
}

/* Kill legacy portrait display:block on split hosts — keep flex; direction from mode */
body.os-app-shell:not(.login-shell) .plan-grids-row.os-split-view,
body.os-app-shell:not(.login-shell) .os-split-view,
body.os-portrait-layout .plan-grids-row.os-split-view,
body.os-portrait-layout .os-split-view,
body.os-app-shell:not(.login-shell) .ags-plan-page.os-split-page,
body.os-portrait-layout .ags-plan-page {
  display: flex !important;
}

/* Side mode must stay row even inside app shell */
body.os-app-shell:not(.login-shell) .os-split-view[data-os-split-mode="side"],
body.os-app-shell:not(.login-shell) .plan-grids-row.os-split-view[data-os-split-mode="side"] {
  flex-direction: row !important;
  overflow: hidden !important;
  height: 100%;
}

body.os-app-shell:not(.login-shell) .os-split-view[data-os-split-mode="stack"],
body.os-app-shell:not(.login-shell) .plan-grids-row.os-split-view[data-os-split-mode="stack"] {
  flex-direction: column !important;
}

/* Farms: override CSS-grid when framework attached */
.ags-farms-layout.os-split-view {
  display: flex !important;
  grid-template-columns: none !important;
}

@media (max-width: 991.98px) {
  .ags-farms-layout.os-split-view {
    grid-template-columns: none !important;
    flex-direction: column !important;
    overflow: visible !important;
    height: auto !important;
  }
}

/* Tablet landscape: keep side-by-side, slightly tighter primary */
html[data-os-bp="tablet-landscape"] .os-split-view[data-os-split-mode="side"],
html[data-os-bp="laptop"] .os-split-view[data-os-split-mode="side"] {
  --os-split-primary: min(var(--os-split-primary, 28%), 32%);
}

/* Plan legacy width props neutralized under framework */
.os-split-view .plan-grid-panel-prev,
.os-split-view .plan-grid-panel-current {
  /* ratios owned by --os-split-* / mode */
}

.plan-grids-row.os-split-view {
  border: 1px solid var(--os-color-border, #bdbdbd);
  min-height: 0;
}

.os-split-view[data-os-split-mode="side"] .plan-grid-panel {
  border-right: none;
}

.os-split-view[data-os-split-mode="side"] .plan-grid-panel-prev {
  border-right: none;
}