/* =============================================================================
   OrganicSystem — ERP Orientation Engine
   Automatic layout switches from html[data-os-layout|data-os-device|data-os-orient]
   Pages need NO manual orientation CSS.
   ============================================================================= */

:root {
  --os-orient-gap: 0.5rem;
}

/* ---------- WIDE (desktop / laptop / tablet landscape) ---------- */
html[data-os-layout="wide"] .os-orient-cols,
html[data-os-layout="wide"] .os-split-view[data-os-split-mode="side"] {
  /* side-by-side owned by split-view / bootstrap */
}

/* ---------- STACK (portrait / mobile / tablet portrait) ---------- */

/* 1) Two-column / multi-column → one column */
html[data-os-layout="stack"] .os-orient-cols,
html[data-os-layout="stack"] .os-app-main .row.os-orient-cols,
html[data-os-layout="stack"] body .os-app-main .row.g-2.os-orient-cols,
html[data-os-layout="stack"] body .os-app-main .row.g-3.os-orient-cols {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  width: 100% !important;
  max-width: 100% !important;
}

html[data-os-layout="stack"] .os-orient-cols > [class*="col-"],
html[data-os-layout="stack"] .os-orient-cols > .os-split-pane,
html[data-os-layout="stack"] .os-app-main .row.os-orient-cols > [class*="col-"] {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

/* Generic dual Bootstrap columns inside forms / pages (auto, no page CSS) */
html[data-os-layout="stack"] .os-app-main form:not(.os-report-filter-form) > .row:not(.os-orient-keep):not(.os-split-view) > [class*="col-"]:not(.col-12),
html[data-os-layout="stack"] .os-app-main .os-desktop-form > .row:not(.os-orient-keep):not(.os-split-view) > [class*="col-"]:not(.col-12),
html[data-os-layout="stack"] .os-app-main > .row:not(.os-orient-keep):not(.os-split-view):not(.g-0) > [class*="col-lg-"]:not(.col-12),
html[data-os-layout="stack"] .os-app-main > .row:not(.os-orient-keep):not(.os-split-view):not(.g-0) > [class*="col-xl-"]:not(.col-12),
html[data-os-layout="stack"] .os-app-main [class*="-edit-page"] > .row:not(.os-orient-keep):not(.os-split-view) > [class*="col-"]:not(.col-12),
html[data-os-layout="stack"] .os-app-main [class*="-edit-page"] form > .row:not(.os-orient-keep):not(.os-split-view) > [class*="col-"]:not(.col-12) {
  flex: 0 0 100% !important;
  max-width: 100% !important;
  width: 100% !important;
  min-width: 0 !important;
}

/* CSS-grid dual layouts auto-tagged .os-orient-cols */
html[data-os-layout="stack"] .os-orient-cols[style*="grid"],
html[data-os-layout="stack"] .ags-farms-layout.os-orient-cols,
html[data-os-layout="stack"] .os-orient-cols:not(.row) {
  grid-template-columns: 1fr !important;
}

/* 2) Split Grid → Stacked Grid (engine reinforces Split View) */
html[data-os-layout="stack"] .os-split-view,
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"],
html[data-os-layout="wide"] .plan-grids-row.os-split-view[data-os-split-mode="side"] {
  flex-direction: row !important;
}

/* 3) Toolbar → Wrapped Toolbar (page chrome may wrap; module filter column must not) */
html[data-os-layout="stack"] .os-page-toolbar,
html[data-os-layout="stack"] .os-module-toolbar,
html[data-os-layout="stack"] .plan-toolbar,
html[data-os-layout="stack"] .plan-toolbar-primary,
html[data-os-layout="stack"] .os-desktop-page-header,
html[data-os-layout="stack"] .os-app-merged-toolbar,
html[data-os-device="mobile"] .os-page-toolbar {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: stretch !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
  gap: 0.35rem;
}

/* Phase 8.6 C1: column+wrap parks #os-app-page-toolbar-slot beside filters. */
html[data-os-layout="stack"] .os-module-toolbar-inner,
html[data-os-device="mobile"] .os-module-toolbar-inner {
  display: flex !important;
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch !important;
  max-width: 100% !important;
  min-width: 0 !important;
  overflow-x: clip !important;
  overflow-y: visible !important;
  max-height: none !important;
  height: auto !important;
  gap: 0.35rem;
}

html[data-os-layout="stack"] .os-page-toolbar-btn,
html[data-os-layout="stack"] .os-module-toolbar .btn,
html[data-os-device="mobile"] .os-page-toolbar-btn {
  flex: 0 1 auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
}

/* 4) Filters → Stacked Filters (module toolbar form grid owned by os-filter-bar.css) */
html[data-os-layout="stack"] .os-filter-bar,
html[data-os-layout="stack"] .os-report-filter-form,
html[data-os-layout="stack"] .os-filter-bar-row,
html[data-os-device="mobile"] .os-filter-bar,
html[data-os-device="mobile"] .os-report-filter-form {
  display: flex !important;
  flex-wrap: wrap !important;
  flex-direction: row !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: var(--os-orient-gap);
}

html[data-os-layout="stack"] .os-module-toolbar .module-main-filter-form,
html[data-os-layout="stack"] .os-module-toolbar .prs-station-form,
html[data-os-device="mobile"] .os-module-toolbar .module-main-filter-form,
html[data-os-device="mobile"] .os-module-toolbar .prs-station-form {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
  max-width: 100% !important;
  gap: var(--os-orient-gap);
}

html[data-os-layout="stack"] .os-filter-bar > *,
html[data-os-layout="stack"] .os-report-filter-form > *,
html[data-os-layout="stack"] .os-filter-bar .form-select,
html[data-os-layout="stack"] .os-filter-bar .form-control,
html[data-os-layout="stack"] .os-module-toolbar .form-select,
html[data-os-layout="stack"] .os-module-toolbar .form-control,
html[data-os-device="mobile"] .os-filter-bar .form-select,
html[data-os-device="mobile"] .os-filter-bar .form-control {
  flex: 1 1 8rem !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}

html[data-os-layout="stack"] .os-module-toolbar .module-main-filter-field,
html[data-os-device="mobile"] .os-module-toolbar .module-main-filter-field {
  min-width: 0 !important;
  max-width: 100% !important;
  width: auto !important;
  flex: unset !important;
}

/* Mobile: stack filter fields fully */
html[data-os-device="mobile"] .os-filter-bar > *,
html[data-os-device="mobile"] .os-report-filter-form .form-select,
html[data-os-device="mobile"] .os-report-filter-form .form-control,
html[data-os-bp="mobile-portrait"] .os-filter-bar > * {
  flex: 1 1 100% !important;
}

/* Form column policy reinforcement via layout (works with os-forms.css) */
html[data-os-layout="stack"] .os-desktop-form-table[class*="--cols-"],
html[data-os-layout="stack"] table[class*="-table--cols-"] {
  /* stacked field rows — os-forms owns detail; ensure containment */
  width: 100% !important;
  max-width: 100% !important;
}

/* Opt-out */
.os-orient-keep,
[data-os-orient="keep"] {
  /* engine CSS does not force stack on these */
}