/* Touch + laptop/tablet/phone layout adjustments site-wide. */

:root {
  --os-touch-target-min: 44px;
  --os-touch-control-height: 2.75rem;
  --os-touch-grid-row-height: 32px;
  --os-touch-grid-header-height: 30px;
  --os-ui-scale: 1;
  --os-page-gutter-inline: max(0.75rem, env(safe-area-inset-left, 0px));
  --os-page-gutter-inline-end: max(0.75rem, env(safe-area-inset-right, 0px));
}

/* Safe-area padding for notched phones and tablets. */
.os-app-header .os-app-navbar-inner,
.os-module-toolbar .container-fluid,
.os-module-toolbar .os-page-gutter,
.os-page-gutter,
.os-app-footer .container-fluid {
  padding-left: var(--os-page-gutter-inline);
  padding-right: var(--os-page-gutter-inline-end);
}

body.os-app-shell {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* Firefox / browsers without zoom: scale the root rem size and grid tokens. */
html.os-ui-zoom-fallback {
  font-size: calc(14px * var(--os-ui-scale));
}

@media (min-width: 768px) {
  html.os-ui-zoom-fallback {
    font-size: calc(16px * var(--os-ui-scale));
  }
}

html.os-ui-zoom-fallback {
  --os-grid-cell-font-size: calc(11px * var(--os-ui-scale));
  --os-grid-header-font-size: calc(10px * var(--os-ui-scale));
  --os-table-cell-font-size: calc(0.74rem * var(--os-ui-scale));
  --os-app-header-height: calc(56px * var(--os-ui-scale));
  --os-app-footer-height: calc(2rem * var(--os-ui-scale));
}

/* App pages keep document scrolling; login pages lock to one screen (landscape app shell). */
@media (orientation: landscape) {
  html.os-ui-scaled:has(body.os-app-shell:not(.login-shell)) {
    height: 100%;
    overflow: hidden;
  }
}

html:has(body.login-shell) {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

body.login-shell {
  overflow-x: clip;
  overflow-y: hidden;
  height: 100dvh;
  max-height: 100dvh;
}

body.login-shell.login-shell-scrollable,
body.login-shell:has(.login-marketing-shell) {
  overflow: hidden;
  height: 100dvh;
  max-height: 100dvh;
  min-height: 100dvh;
}

html:has(body.login-shell.login-shell-scrollable),
html:has(body.login-shell:has(.login-marketing-shell)) {
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}

body.login-shell > .login-branded-layout {
  flex: 0 1 auto;
  min-height: 0;
  overflow-x: clip;
  overflow-y: visible;
  padding-bottom: 0;
  justify-content: center;
}

body.login-shell:has(.login-cert-footer) {
  justify-content: flex-start;
}

body.login-shell:has(.login-cert-footer) > .login-branded-layout {
  flex: 1 1 auto;
  min-height: 0;
  justify-content: center;
  align-self: center;
}

body.login-shell:not(:has(.login-cert-footer)) {
  justify-content: center;
}

/* Compact branded login: never show a layout scrollbar (slide-in must not flash one). */
body.login-shell:not(:has(.login-cert-footer)):not(.login-shell-scrollable):not(:has(.login-marketing-shell)) > .login-branded-layout {
  flex: 0 1 auto;
  max-height: calc(100dvh - 24px);
  overflow: clip;
}

body.login-shell.login-shell-scrollable:not(:has(.login-cert-footer)) > .login-branded-layout,
body.login-shell:has(.login-marketing-shell):not(:has(.login-cert-footer)) > .login-branded-layout {
  flex: 0 1 auto;
  max-height: calc(100dvh - 24px);
  overflow-y: auto;
}

body.login-shell.login-shell-scrollable > .login-branded-layout,
body.login-shell:has(.login-marketing-shell) > .login-branded-layout {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  justify-content: flex-start;
  padding-top: clamp(0.25rem, 2vh, 1.25rem);
  padding-bottom: 1rem;
}

.login-branded-layout:has(.login-marketing-shell) .login-page-center {
  overflow: visible;
  min-height: min-content;
  flex: 0 0 auto;
}

body.login-shell > .login-cert-footer {
  flex: 0 0 auto;
  width: 100%;
}

body.os-ui-scaled.login-shell {
  width: 100%;
}

/* App pages scroll vertically and horizontally when content overflows. */
body.os-app-shell:not(.login-shell) > .container-fluid > .os-app-main {
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

@media (orientation: landscape) {
  body.os-app-body:has(.module-main-page) {
    height: 100dvh;
    max-height: 100dvh;
  }
}

body.os-app-body:has(.module-main-page) > .container-fluid > .os-app-main,
body.os-app-body:has(.module-main-page) .module-main-page > .module-main-layout {
  overflow: auto;
  overflow-x: auto;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  max-height: 100%;
}

.module-main-group-nav,
.module-main-group-panels,
.prs-group-nav,
.prs-group-panels,
.os-page-scroll,
.os-page-table-view {
  -webkit-overflow-scrolling: touch;
}

/* Coarse pointer / touch layout class set by touch-responsive.js.
   Toolbar height stays on --os-erp-toolbar-btn-height (os-toolbar.css).
   Do not remap --os-toolbar-control-height here — that broke equal-height strips. */
body.os-touch-layout {
  touch-action: manipulation;
  -webkit-tap-highlight-color: rgba(31, 75, 153, 0.12);
}

body.os-touch-layout .form-control,
body.os-touch-layout .form-select,
body.os-touch-layout .btn:not(.btn-link):not(.nav-link),
body.os-touch-layout .dropdown-toggle,
body.os-touch-layout .dx-texteditor-input {
  min-height: var(--os-touch-target-min);
}

/* Compact chrome controls — match the global ERP toolbar height token. */
body.os-touch-layout:not(.os-portrait-layout) .os-page-toolbar .form-control,
body.os-touch-layout:not(.os-portrait-layout) .os-page-toolbar .btn:not(.btn-link):not(.dropdown-item),
body.os-touch-layout:not(.os-portrait-layout) .os-page-toolbar .dropdown-toggle,
body.os-touch-layout:not(.os-portrait-layout) .os-page-sticky-chrome .form-control,
body.os-touch-layout:not(.os-portrait-layout) .os-page-sticky-chrome .btn:not(.btn-link):not(.dropdown-item),
body.os-touch-layout:not(.os-portrait-layout) .os-desktop-page-header .form-control,
body.os-touch-layout:not(.os-portrait-layout) .os-desktop-page-header .btn:not(.btn-link):not(.dropdown-item),
body.os-touch-layout:not(.os-portrait-layout) .plan-toolbar .btn:not(.btn-link):not(.dropdown-item),
body.os-touch-layout:not(.os-portrait-layout) .rotation-toolbar .btn:not(.btn-link):not(.dropdown-item),
body.os-touch-layout:not(.os-portrait-layout) .os-app-page-toolbar-slot .btn:not(.btn-link):not(.dropdown-item) {
  min-height: var(--os-erp-toolbar-btn-height, 36px);
  height: var(--os-erp-toolbar-btn-height, 36px);
  max-height: var(--os-erp-toolbar-btn-height, 36px);
  padding-top: 0;
  padding-bottom: 0;
}

/* Dropdowns stay taller than compact toolbar buttons (all pages / orientations). */
body.os-touch-layout:not(.os-portrait-layout) .os-module-toolbar .form-select,
body.os-touch-layout:not(.os-portrait-layout) .os-module-toolbar .module-main-filter-select,
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,
body.os-touch-layout:not(.os-portrait-layout) .os-page-sticky-chrome .form-select,
body.os-touch-layout:not(.os-portrait-layout) .os-desktop-page-header .form-select,
body.os-touch-layout .os-module-toolbar .form-select,
body.os-touch-layout .os-module-toolbar .module-main-filter-select,
body.os-touch-layout .os-module-toolbar .prs-station-select {
  height: var(--os-filter-control-height, 2.5rem);
  min-height: var(--os-filter-control-height, 2.5rem);
  max-height: var(--os-filter-control-height, 2.5rem);
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}

body.os-touch-layout .navbar .nav-link,
body.os-touch-layout .navbar .btn-link.nav-link {
  min-height: var(--os-touch-target-min);
  display: inline-flex;
  align-items: center;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Touchscreens (phones, tablets, touch laptops): larger tap targets in content areas. */
body.os-coarse-pointer .module-main-group-toggle,
body.os-coarse-pointer .module-main-section-trigger,
body.os-coarse-pointer .module-main-btn,
body.os-coarse-pointer .prs-ribbon-btn,
body.os-coarse-pointer .module-main-filter-toggle,
body.os-coarse-pointer .module-main-plot-chip {
  min-height: var(--os-touch-target-min);
}

body.os-coarse-pointer .module-main-group-toggle,
body.os-coarse-pointer .module-main-section-trigger {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

body.os-coarse-pointer .module-main-btn,
body.os-coarse-pointer .prs-ribbon-btn {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* Fine pointer desktop/laptop: keep compact controls. */
@media (pointer: fine) and (min-width: 992px) {
  body:not(.os-coarse-pointer) .module-main-group-toggle,
  body:not(.os-coarse-pointer) .module-main-section-trigger,
  body:not(.os-coarse-pointer) .module-main-btn,
  body:not(.os-coarse-pointer) .prs-ribbon-btn {
    min-height: 0;
  }
}

/* Narrow screens — keep chrome horizontal + scrollable project-wide */
@media (max-width: 991.98px) {
  .os-page-gutter {
    padding-left: 0.75rem;
    padding-right: 0.75rem;
  }

  /* App top nav: single row with sideways scroll instead of wrapping tall. */
  .os-app-header .os-app-navbar-inner,
  .os-app-header .navbar-collapse.collapse.show,
  .os-app-header .navbar-nav {
    flex-wrap: nowrap;
  }

  .os-app-header .navbar-collapse {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  .os-app-header .navbar-nav .nav-link {
    white-space: nowrap;
  }

  /* Farm/Station/Settings module filter bar */
  .os-module-toolbar .module-main-filter-form,
  .os-module-toolbar .prs-station-form {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: flex-start;
    row-gap: 0.45rem;
    column-gap: 0.75rem;
    width: 100%;
    max-width: 100%;
    overflow-x: visible;
    overflow-y: visible;
  }

  .os-module-toolbar .module-main-filter-field {
    flex: 0 0 auto;
    min-width: 0;
    max-width: none;
    position: relative;
    z-index: 1;
  }

  .os-module-toolbar .module-main-filter-field + .module-main-filter-field {
    border-left: 1px solid var(--os-module-header-border, rgba(255, 255, 255, 0.35));
    padding-left: 0.75rem;
  }

  .os-module-toolbar .module-main-filter-field--plots {
    flex: unset;
    flex-basis: auto;
    width: auto;
    min-width: 0;
    max-width: 100%;
    border-left: none !important;
    padding-left: 0 !important;
    margin-top: 0;
    z-index: 0;
  }

  .os-module-aps .os-module-toolbar .module-main-filter-field--plots {
    border-top: none;
  }

  /* Page toolbars: wrap (ERP toolbar policy — no horizontal scroll) */
  .os-page-toolbar,
  .os-page-toolbar.os-page-toolbar-layout,
  .plan-toolbar-primary.os-page-toolbar,
  .plan-toolbar-secondary,
  .rotation-toolbar .os-page-toolbar {
    flex-wrap: wrap !important;
    row-gap: 0.4rem;
    overflow-x: visible;
    overflow-y: visible;
  }

  /* Page header chrome stays one row (tools | title | search) */
  .os-page-header-chrome {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    grid-template-rows: auto;
    grid-template-areas: none;
    gap: 0.45rem;
    align-items: center;
  }

  .os-page-header-chrome-left {
    grid-column: 1;
    grid-row: 1;
    overflow-x: visible;
    overflow-y: visible;
    flex-wrap: wrap;
  }

  .os-page-header-chrome-center {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    max-width: min(16rem, 36vw);
  }

  .os-page-header-chrome-center > h1,
  .os-page-header-chrome-center > .h3 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
    font-size: 1.05rem;
  }

  .os-page-header-chrome-right {
    grid-column: 3;
    grid-row: 1;
    justify-content: flex-end;
    min-width: 0;
  }

  .os-page-header-chrome-right .os-page-grid-search {
    flex: 0 1 9rem;
    max-width: 9rem;
    min-width: 5.5rem;
  }

  /* Title + toolbar hosts: wrap instead of sideways scroll */
  .os-desktop-page-header,
  .os-page-sticky-chrome,
  main .d-flex.justify-content-between.align-items-center.mb-3:has(.os-page-toolbar),
  main .d-flex.justify-content-between.align-items-center.mb-4:has(.os-page-toolbar),
  .plan-toolbar.os-desktop-page-header,
  .rotation-toolbar {
    flex-wrap: wrap !important;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    overflow-x: visible;
  }

  .plan-toolbar-primary,
  .plan-toolbar-secondary {
    width: auto;
    max-width: 100%;
  }

  /* Bootstrap filter rows (balance / diary / invoices / etc.): keep horizontal */
  .os-page-sticky-chrome form.row,
  .os-desktop-page-header form.row,
  .os-app-main form.row.g-2.align-items-end,
  .os-app-main form.row.g-2.align-items-center,
  .ags-balance-page form.row,
  .prs-balance-page form.row,
  .prs-page form.row.g-2 {
    flex-wrap: nowrap !important;
    align-items: flex-end;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    row-gap: 0;
    margin-left: 0;
    margin-right: 0;
  }

  .os-page-sticky-chrome form.row > [class*="col-"],
  .os-desktop-page-header form.row > [class*="col-"],
  .os-app-main form.row.g-2.align-items-end > [class*="col-"],
  .os-app-main form.row.g-2.align-items-center > [class*="col-"],
  .ags-balance-page form.row > [class*="col-"],
  .prs-balance-page form.row > [class*="col-"],
  .prs-page form.row.g-2 > [class*="col-"] {
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    padding-left: 0.35rem;
    padding-right: 0.35rem;
  }

  .os-page-sticky-chrome form.row .form-select,
  .os-page-sticky-chrome form.row .form-control,
  .os-desktop-page-header form.row .form-select,
  .os-desktop-page-header form.row .form-control,
  .os-app-main form.row.g-2 .form-select,
  .os-app-main form.row.g-2 .form-control {
    min-width: 6.5rem;
    width: auto;
    max-width: 12rem;
  }

  /* Report filter forms (Comm, etc.): wrap fields instead of sideways scroll. */
  .os-report-filter-form,
  .os-page-sticky-chrome .os-report-filter-form,
  .os-app-main .os-report-filter-form {
    flex-wrap: wrap !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    row-gap: 0.65rem;
  }

  .os-report-filter-form > [class*="col-"],
  .os-page-sticky-chrome .os-report-filter-form > [class*="col-"],
  .os-app-main .os-report-filter-form > [class*="col-"] {
    flex: 1 1 100%;
    width: 100%;
    max-width: 100%;
  }

  .os-report-filter-form > .col-md-2,
  .os-report-filter-form > .col-md-1,
  .os-report-filter-form > .col-auto {
    flex: 1 1 calc(50% - 0.35rem);
    width: calc(50% - 0.35rem);
    max-width: calc(50% - 0.35rem);
  }

  .os-report-filter-form .form-control,
  .os-report-filter-form .form-select {
    min-width: 0;
    width: 100%;
    max-width: 100%;
  }

  /* Plan panels: stack under tablet-landscape; avoid forced 12rem+18rem mins */
  .plan-grids-row {
    flex-direction: column;
    flex-wrap: nowrap;
    min-height: 0;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .plan-grid-panel,
  .plan-grid-panel-prev,
  .plan-grid-panel-current {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 14rem;
  }

  .plan-grid-panel {
    border-right: none;
    border-bottom: 1px solid #bdbdbd;
  }

  .plan-grid-panel:last-child {
    border-bottom: none;
  }
}

/* Very narrow viewports: allow header title on its own line (portrait and landscape). */
@media (max-width: 575.98px) {
  .os-page-header-chrome {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "left right"
      "center center";
    row-gap: 0.35rem;
  }

  .os-page-header-chrome-left {
    grid-area: left;
  }

  .os-page-header-chrome-center {
    grid-area: center;
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
  }

  .os-page-header-chrome-right {
    grid-area: right;
    grid-column: auto;
  }

  .os-page-header-chrome-center > h1,
  .os-page-header-chrome-center > .h3 {
    white-space: normal;
  }
}

@media (max-width: 767.98px) {
  .module-main-sidebar,
  .prs-sidebar {
    max-height: none;
    flex: 0 0 auto;
  }

  .module-main-group-nav,
  .prs-group-nav {
    flex-wrap: nowrap;
    flex-direction: column;
    align-items: stretch;
    overflow-x: hidden;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    max-height: none;
  }

  .module-main-group-toggle,
  .module-main-section-trigger,
  .module-main-group-trigger,
  .prs-group-trigger {
    min-height: var(--os-touch-target-min);
    padding-top: 0.55rem;
    padding-bottom: 0.55rem;
    flex: 1 1 auto;
    width: 100%;
  }

  .module-main-group-panels,
  .prs-group-panels {
    overflow-x: auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .module-main-section-row,
  .prs-section-row {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
  }

  .module-main-btn,
  .prs-ribbon-btn {
    min-height: var(--os-touch-target-min);
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .module-main-section,
  .prs-ribbon-section {
    flex: 0 0 13.5rem;
    width: 13.5rem;
    min-width: 13.5rem;
    max-width: 13.5rem;
  }

  .module-main-plot-chip {
    min-height: 2rem;
    padding: 0.35rem 0.65rem;
  }

  .os-desktop-page-header,
  main .d-flex.justify-content-between.align-items-center.mb-3,
  main .d-flex.justify-content-between.align-items-center.mb-4 {
    padding: 0.5rem 0.65rem;
  }

  .os-page-toolbar .os-page-toolbar-btn,
  .os-page-toolbar a.os-page-toolbar-btn,
  .os-page-toolbar a.btn,
  .os-page-toolbar button.btn {
    min-width: var(--os-touch-target-min);
  }

  .os-page-grid-search .dx-texteditor {
    width: 100% !important;
    max-width: 100%;
  }

  .os-page-header-chrome-right .os-page-grid-search {
    width: auto;
    max-width: 9rem;
    flex: 0 1 9rem;
  }

  .dx-datagrid .dx-datagrid-rowsview .dx-row > td,
  .dx-datagrid .dx-datagrid-filter-row .dx-editor-cell .dx-texteditor,
  .dx-datagrid .dx-datagrid-headers .dx-header-row > td {
    touch-action: manipulation;
  }

  body.os-touch-layout .dx-datagrid-rowsview .dx-row > td {
    padding-top: 0.45rem;
    padding-bottom: 0.45rem;
  }

  body.os-touch-layout .dx-datagrid .dx-datagrid-pager .dx-page,
  body.os-touch-layout .dx-datagrid .dx-datagrid-pager .dx-navigate-button,
  body.os-touch-layout .dx-datagrid .dx-datagrid-pager .dx-page-size {
    min-width: var(--os-touch-target-min);
    min-height: var(--os-touch-target-min);
    line-height: var(--os-touch-target-min);
  }

  .dropdown-menu .dropdown-item {
    min-height: var(--os-touch-target-min);
    display: flex;
    align-items: center;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }

  .os-report-viewer-header .os-page-header-chrome-center > h1,
  .os-report-viewer-header .os-page-header-chrome-center > .h3 {
    font-size: 1rem;
  }
}

/* Phones: stack module hub sidebar above content for easier touch use. */
@media (max-width: 575.98px) {
  .module-main-layout,
  .prs-main-layout {
    flex-direction: column;
    width: 100%;
    overflow-x: auto;
    overflow-y: auto;
  }

  .module-main-sidebar,
  .prs-sidebar {
    flex: 0 0 auto;
    width: 100%;
    max-width: none;
    border-right: none;
    border-bottom: 1px solid #ced4da;
  }

  .module-main-group-nav,
  .prs-group-nav {
    max-height: min(42vh, 22rem);
  }

  .module-main-group-panels,
  .prs-group-panels {
    flex: 1 1 auto;
    min-height: 0;
    overflow-x: auto;
    overflow-y: auto;
  }
}

/* Touch devices: larger report viewer toolbar controls */
@media (pointer: coarse), (max-width: 767.98px) {
  #DocumentViewer {
    --os-dxrd-toolbar-height: 48px;
    --os-dxrd-toolbar-icon-box: 28px;
    --os-dxrd-toolbar-icon-glyph: 18px;
    --os-dxrd-toolbar-control-height: 32px;
  }

  #DocumentViewer .dxrd-preview.dxrd-designer-wrapper .dxrd-right-tabs {
    width: 44px;
  }

  #DocumentViewer .dxrd-preview.dxrd-designer-wrapper .dxrd-right-panel.dxrd-tab-panel-right {
    right: 44px;
  }

  #DocumentViewer .dxrd-preview.dxrd-designer-wrapper .dxrd-right-tabs .dxrd-image-padding {
    width: 44px;
    height: 44px;
    background-size: 20px 20px;
  }

  #DocumentViewer .dxrd-preview.dxrd-designer-wrapper .dxrd-right-tabs .dxrd-image-padding svg {
    width: 20px;
    height: 20px;
  }
}

/* Portrait / narrow: unlock vertical and horizontal scroll on every page when content overflows. */
@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 991.98px) {
  html:not(:has(body.os-module-shell)),
  html.os-ui-scaled:not(:has(body.os-module-shell)),
  html:has(body.login-shell),
  html:has(body.os-app-shell:not(.login-shell):not(.os-module-shell)),
  html:has(body.os-app-body:not(.os-module-shell) .module-main-page) {
    height: auto;
    min-height: 100%;
    max-height: none;
    overflow-x: clip;
    overflow-y: auto;
  }

  /* Compact branded login keeps a fixed viewport — no document scrollbar during card slide-in. */
  html:has(body.login-shell.login-shell-branded:not(.login-shell-scrollable):not(:has(.login-marketing-shell))) {
    height: 100% !important;
    max-height: 100% !important;
    overflow: hidden !important;
  }

  body:not(.os-module-shell),
  body.login-shell,
  body.os-app-shell:not(.login-shell):not(.os-module-shell),
  body.os-app-body:not(.os-module-shell):has(.module-main-page) {
    height: auto;
    min-height: 100dvh;
    max-height: none;
    overflow-x: clip;
    overflow-y: auto;
  }

  body.login-shell.login-shell-branded:not(.login-shell-scrollable):not(:has(.login-marketing-shell)) {
    height: 100dvh !important;
    max-height: 100dvh !important;
    min-height: 100dvh !important;
    overflow: hidden !important;
  }

  body.login-shell > .login-branded-layout,
  body.login-shell.login-shell-scrollable > .login-branded-layout,
  body.login-shell:has(.login-marketing-shell) > .login-branded-layout {
    overflow-x: auto;
    overflow-y: visible;
    min-height: min-content;
  }

  body.login-shell.login-shell-branded:not(.login-shell-scrollable):not(:has(.login-marketing-shell)) > .login-branded-layout {
    overflow: clip !important;
    min-height: 0 !important;
    max-height: calc(100dvh - 24px) !important;
  }

  body.os-app-shell:not(.login-shell) > .container-fluid,
  body.os-app-body:has(.module-main-page) > .container-fluid {
    overflow-x: clip;
    overflow-y: auto;
    flex: 1 0 auto;
    max-height: none;
  }

  body.os-app-shell:not(.login-shell) > .container-fluid > .os-app-main,
  body.os-app-body:has(.module-main-page) > .container-fluid > .os-app-main {
    overflow-x: clip;
    overflow-y: auto;
    flex: 1 0 auto;
    min-height: auto;
    max-height: none;
  }

  body.os-app-shell:not(.login-shell) > .container-fluid > .os-app-main:has(.os-page-scroll .os-page-grid-view),
  body.os-app-shell:not(.login-shell) > .container-fluid > .os-app-main:has(.os-page-scroll .os-page-table-view) {
    overflow-x: clip;
    overflow-y: auto;
  }

  body.os-app-shell:not(.login-shell) .os-app-main > :only-child:not(.os-page-sticky-chrome):not(.os-page-scroll):has(> .os-page-scroll),
  body.os-app-shell:not(.login-shell) .os-app-main > [class*="-index-page"]:not(.module-main-page):has(> .os-page-scroll),
  body.os-app-shell:not(.login-shell) .os-app-main > .rotation-page:has(> .os-page-scroll),
  body.os-app-shell:not(.login-shell) .os-app-main > *:not(.os-page-sticky-chrome):not(.os-page-scroll):has(> .os-page-scroll),
  body.os-app-shell:not(.login-shell) .os-app-main > :only-child[class*="-edit-page"]:has(> .os-page-scroll) {
    overflow-x: clip;
    overflow-y: auto;
    min-height: auto;
    max-width: 100%;
    min-width: 0;
  }

  body.os-app-shell:not(.login-shell) .os-page-scroll,
  body.os-app-shell:not(.login-shell) .os-page-scroll:has(.os-page-grid-view),
  body.os-app-shell:not(.login-shell) .os-page-scroll:has(.os-page-table-view),
  body.os-app-shell:not(.login-shell) [class*="-edit-page"] > .os-page-scroll {
    display: flex;
    flex-direction: column;
    overflow-x: clip;
    overflow-y: auto;
    min-height: auto;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
  }

  body.os-app-shell:not(.login-shell):not(.os-module-shell) .os-page-grid-view {
    min-height: 320px;
    height: min(58vh, 720px);
    overflow: hidden;
    max-width: 100%;
  }

  body.os-app-shell:not(.login-shell):not(.os-module-shell) .os-page-grid-view .dx-datagrid {
    height: min(58vh, 720px) !important;
    min-height: 320px;
  }

  body.os-module-shell .os-page-grid-view,
  body.os-module-shell.os-table-fill-page .os-page-grid-view,
  body.os-module-shell .os-page-grid-view .dx-datagrid,
  body.os-module-shell.os-table-fill-page .os-page-grid-view .dx-datagrid {
    min-height: 240px;
    max-height: none !important;
  }

  body.os-module-shell.os-table-fill-page .os-page-grid-view,
  body.os-module-shell.os-table-fill-page .os-dx-grid {
    overflow: hidden !important;
  }

  .module-main-page {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
    overflow-y: auto;
    min-height: auto;
  }

  .module-main-page > .module-main-layout,
  .module-main-layout,
  .prs-main-layout {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    min-height: auto;
    height: auto;
  }

  .module-main-sidebar,
  .prs-sidebar {
    flex: 0 0 auto;
    width: max-content;
    max-width: none;
    border-right: 1px solid #ced4da;
    border-bottom: none;
  }

  .module-main-group-nav,
  .prs-group-nav {
    max-height: none;
    overflow-x: hidden;
    overflow-y: auto;
  }

  .module-main-group-panels,
  .prs-group-panels {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    min-height: auto;
    align-self: flex-start;
    overflow-x: auto;
    overflow-y: visible;
  }

  .module-main-section-row,
  .prs-section-row {
    flex-wrap: wrap;
    overflow-x: auto;
    overflow-y: auto;
    gap: 0.65rem;
  }

  .module-main-section,
  .prs-ribbon-section {
    flex: 1 1 calc(50% - 0.35rem);
    width: auto;
    min-width: 11rem;
    max-width: none;
  }

  /* Module filter column: column + nowrap (Phase 8.6 C1 / UI-1.16). */
  .os-module-toolbar-inner {
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    row-gap: 0.35rem;
    overflow-x: auto;
    overflow-y: visible;
    height: auto;
    max-height: none;
  }

  .os-module-toolbar-inner > .module-main-filter-form,
  .os-module-toolbar-inner > .prs-station-form {
    flex: 1 1 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .os-module-toolbar,
  .os-app-header {
    overflow: visible;
    height: auto;
    max-height: none;
  }

  .os-module-toolbar .os-app-page-toolbar-slot {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    justify-content: flex-start !important;
  }

  .os-module-toolbar .os-app-page-toolbar-slot .os-app-merged-toolbar,
  .os-module-toolbar .os-app-page-toolbar-slot .os-page-toolbar {
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.os-app-shell:not(.login-shell) main .os-page-sticky-chrome:not(.site-cert-sticky-header) {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    flex-wrap: wrap !important;
  }

  body.os-app-shell:not(.login-shell) > .container-fluid > .os-app-main:has(.os-page-sticky-chrome) {
    padding-top: 0 !important;
  }

  /* Override page-specific viewport locks so portrait can scroll (Y only). */
  html:has(body.os-app-body [class*="-page"]),
  html:has(body.os-app-body .module-main-page) {
    height: auto !important;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  body.os-app-body:has([class*="-page"]),
  body.os-app-body:has(.module-main-page) {
    height: auto !important;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  body.os-app-body > .container-fluid,
  body.os-app-body > .container-fluid > .os-app-main,
  body.os-app-shell:not(.login-shell) > .container-fluid > .os-app-main > *,
  body.os-app-shell:not(.login-shell) .os-app-main > :only-child.ags-export-invoice-edit-page,
  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"],
  .ags-export-invoice-edit-page,
  .ags-fertigation-edit-page,
  .ags-harvest-edit-page,
  .ags-protection-edit-page,
  .prs-export-order-edit-page,
  .aps-qcap-protocol-page,
  .aps-qcap-protocol-edit-page,
  .ags-balance-page,
  .prs-balance-page,
  .prs-page,
  .ags-plan-page,
  .rotation-page {
    overflow-x: auto !important;
    overflow-y: auto !important;
    max-height: none !important;
    min-height: auto;
  }

  .os-app-page-toolbar-slot {
    flex: 1 1 100%;
    max-width: 100%;
    width: 100%;
    margin-left: 0;
    overflow-x: auto;
    overflow-y: visible;
  }

  .os-page-toolbar,
  .os-page-toolbar.os-page-toolbar-layout,
  .plan-toolbar-primary.os-page-toolbar,
  .plan-toolbar-secondary,
  .rotation-toolbar .os-page-toolbar,
  .os-desktop-page-header,
  .os-page-sticky-chrome,
  .plan-toolbar.os-desktop-page-header,
  .rotation-toolbar {
    flex-wrap: wrap !important;
    row-gap: 0.35rem;
    overflow-x: auto;
    overflow-y: visible;
  }

  .os-page-sticky-chrome form.row,
  .os-desktop-page-header form.row,
  .os-app-main form.row.g-2.align-items-end,
  .os-app-main form.row.g-2.align-items-center,
  .ags-balance-page form.row,
  .prs-balance-page form.row,
  .prs-page form.row.g-2 {
    flex-wrap: wrap !important;
    overflow-x: visible;
    overflow-y: visible;
    row-gap: 0.35rem;
  }

  .os-report-filter-form,
  .os-page-sticky-chrome .os-report-filter-form,
  .os-app-main .os-report-filter-form {
    overflow-x: visible !important;
  }

  .plan-grids-row {
    flex-direction: column;
    min-height: auto;
    overflow-x: hidden;
    overflow-y: visible;
  }

  .plan-grid-panel,
  .plan-grid-panel-prev,
  .plan-grid-panel-current {
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
  }

  .plan-grid-panel {
    border-right: none;
    border-bottom: 1px solid #bdbdbd;
  }

  .plan-grid-panel:last-child {
    border-bottom: none;
  }

  .plan-grid-panel > [id$="-grid"] {
    min-height: 0;
    height: auto;
  }

  .os-page-header-chrome {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "left right"
      "center center";
    row-gap: 0.35rem;
  }

  .os-page-header-chrome-left {
    grid-area: left;
    overflow-x: auto;
    overflow-y: visible;
  }

  .os-page-header-chrome-center {
    grid-area: center;
    grid-column: auto;
    justify-self: stretch;
    max-width: none;
  }

  .os-page-header-chrome-right {
    grid-area: right;
    grid-column: auto;
  }

  .os-page-header-chrome-center > h1,
  .os-page-header-chrome-center > .h3 {
    white-space: normal;
    max-width: none;
  }

  .rotation-page,
  .ags-plan-page,
  .plan-page,
  .os-page-table-view,
  [class*="-edit-page"],
  [class*="-index-page"] {
    overflow-x: auto;
    overflow-y: auto;
    min-height: auto;
  }

  .ags-export-invoice-edit-page .os-page-toolbar,
  .ags-export-invoice-edit-page .os-desktop-page-header:has(.os-page-toolbar) {
    flex-wrap: wrap !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .ags-export-invoice-edit-page .os-desktop-page-header > h1,
  .ags-export-invoice-edit-page .os-desktop-page-header > .h3 {
    max-width: none;
    white-space: normal;
  }

  /* Export Invoice Edit: stack all panels vertically and allow page scroll. */
  body.os-app-body:has(.ags-export-invoice-edit-page) > .container-fluid > .os-app-main,
  body.os-app-shell:not(.login-shell) .os-app-main > :only-child.ags-export-invoice-edit-page {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .ags-export-invoice-edit-page,
  .ags-export-invoice-edit-page .ags-export-invoice-form {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-layout {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    height: auto !important;
    overflow: visible !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-layout > [class*="col-"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-products-section {
    display: block !important;
    flex: none !important;
    height: auto !important;
    min-height: auto !important;
    overflow: visible !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-details-panel {
    flex: none !important;
    min-height: 280px !important;
    height: auto !important;
    max-height: none !important;
    overflow: auto !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-details-panel,
  .ags-export-invoice-edit-page .ags-export-invoice-details-panel .dx-datagrid,
  .ags-export-invoice-edit-page .ags-export-invoice-balance-panel .dx-datagrid,
  .ags-export-invoice-edit-page .ags-export-invoice-balance-panel .dx-datagrid-rowsview,
  .ags-export-invoice-edit-page .ags-export-invoice-balance-panel .dx-datagrid-headers {
    overflow-x: auto !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-details-panel .dx-datagrid-rowsview,
  .ags-export-invoice-edit-page .ags-export-invoice-details-panel .dx-datagrid-headers {
    overflow-x: auto !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-details-panel .dx-scrollable-scrollbar-horizontal,
  .ags-export-invoice-edit-page .ags-export-invoice-balance-panel .dx-scrollable-scrollbar-horizontal {
    display: block !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-footer-fields {
    grid-template-columns: 1fr !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-header-grid .field-row-split {
    grid-template-columns: 1fr !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-header-grid .field-row-split .field {
    border-right: none !important;
    border-bottom: 1px solid #c8c8c8;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-header-grid .field-row-split .field:last-child {
    border-bottom: none;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-header-grid .field-firm-cb-combined {
    grid-template-columns: var(--ags-export-invoice-label-width, 100px) minmax(0, 1fr) !important;
  }

  /* Other viewport-locked edit pages: use document scroll in portrait. */
  body.os-app-shell:not(.login-shell) .os-app-main > :only-child[class*="-edit-page"] {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  body.os-app-body:has(.rotation-page) > .container-fluid > .os-app-main,
  body.os-app-body:has(.ags-plan-page) > .container-fluid > .os-app-main {
    overflow-x: auto;
    overflow-y: auto;
  }

  body.os-app-shell:has(.os-report-viewer-page) > .container-fluid > .os-app-main,
  .os-report-viewer-page {
    overflow-x: auto;
    overflow-y: auto;
    min-height: auto;
  }

  .os-report-viewer-page #DocumentViewer {
    min-height: 320px;
    height: min(70vh, 900px) !important;
  }
}

/* Mirror portrait scroll rules when JS sets body.os-portrait-layout. */
body.os-portrait-layout:not(.login-shell):not(.os-module-shell) {
  overflow-x: auto;
  overflow-y: visible;
  height: auto;
  min-height: 100dvh;
  max-height: none;
}

html:has(body.os-portrait-layout:not(.login-shell):not(.os-module-shell)) {
  height: auto;
  min-height: 100%;
  max-height: none;
  overflow-x: clip;
  overflow-y: auto;
}

body.os-portrait-layout.login-shell:not(.login-shell-scrollable):not(:has(.login-marketing-shell)):not(:has(.login-cert-footer)) > .login-branded-layout {
  overflow: clip;
  min-height: 0;
  max-height: calc(100dvh - 24px);
}

/* Welcome page: cert footer pinned to viewport bottom, card centered above it. */
body.os-portrait-layout.login-shell:has(.login-cert-footer),
body.login-shell:has(.login-cert-footer) {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  overflow-x: clip !important;
  overflow-y: hidden !important;
}

html:has(body.login-shell:has(.login-cert-footer)),
html:has(body.os-portrait-layout.login-shell:has(.login-cert-footer)) {
  height: 100% !important;
  max-height: 100% !important;
  overflow: hidden !important;
}

body.os-portrait-layout.login-shell:has(.login-cert-footer) > .login-branded-layout,
body.login-shell:has(.login-cert-footer) > .login-branded-layout {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  justify-content: center;
  overflow-x: clip;
  overflow-y: auto;
}

body.os-portrait-layout.login-shell:has(.login-cert-footer) > .login-cert-footer,
body.login-shell:has(.login-cert-footer) > .login-cert-footer {
  flex: 0 0 auto;
  align-self: stretch;
  width: auto;
  margin-top: auto;
  margin-bottom: 0;
  z-index: 20;
}

body.login-shell.login-shell-scrollable:has(.login-cert-footer) > .login-branded-layout,
body.login-shell:has(.login-marketing-shell):has(.login-cert-footer) > .login-branded-layout,
body.os-portrait-layout.login-shell.login-shell-scrollable:has(.login-cert-footer) > .login-branded-layout,
body.os-portrait-layout.login-shell:has(.login-marketing-shell):has(.login-cert-footer) > .login-branded-layout {
  overflow-x: clip !important;
  overflow-y: auto !important;
  justify-content: flex-start;
  min-height: 0;
}

body.os-portrait-layout.login-shell.login-shell-scrollable > .login-branded-layout,
body.os-portrait-layout.login-shell:has(.login-marketing-shell) > .login-branded-layout {
  overflow-x: clip;
  overflow-y: auto;
  min-height: 0;
}

body.os-portrait-layout.os-app-shell:not(.login-shell) > .container-fluid,
body.os-portrait-layout.os-app-body:has(.module-main-page) > .container-fluid {
  overflow-x: auto;
  overflow-y: auto;
  max-height: none;
}

body.os-portrait-layout.os-app-shell:not(.login-shell) > .container-fluid > .os-app-main,
body.os-portrait-layout.os-app-body:has(.module-main-page) > .container-fluid > .os-app-main {
  overflow-x: auto;
  overflow-y: auto;
  max-height: none;
  min-height: auto;
}

body.os-portrait-layout.os-app-shell:not(.login-shell) .os-page-scroll,
body.os-portrait-layout.os-app-shell:not(.login-shell) .os-page-scroll:has(.os-page-grid-view),
body.os-portrait-layout.os-app-shell:not(.login-shell) .os-page-scroll:has(.os-page-table-view) {
  overflow-x: auto;
  overflow-y: auto;
  min-height: auto;
}

body.os-portrait-layout .module-main-page,
body.os-portrait-layout .module-main-layout,
body.os-portrait-layout .prs-main-layout,
body.os-portrait-layout .module-main-group-panels,
body.os-portrait-layout .prs-group-panels {
  overflow-x: auto;
  overflow-y: auto;
  min-height: auto;
}

body.os-portrait-layout.os-app-shell:has(.os-report-viewer-page) > .container-fluid > .os-app-main,
body.os-portrait-layout .os-report-viewer-page {
  overflow-x: auto;
  overflow-y: auto;
  min-height: auto;
}

/* Portrait / os-portrait-layout: keep header toolbars and page controls visible. */
body.os-portrait-layout .os-app-header,
body.os-portrait-layout .os-module-toolbar,
body.os-portrait-layout .os-module-toolbar-inner {
  overflow: visible;
  height: auto;
  max-height: none;
}

/* Column + wrap creates a second horizontal column and clips the actions
   slot under overflow-x:clip (Phase 8.6 C1). Keep column stack, no wrap. */
body.os-portrait-layout .os-module-toolbar-inner {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
  align-items: stretch;
  row-gap: 0.35rem;
  overflow-x: auto;
  overflow-y: visible;
}

body.os-portrait-layout .os-module-toolbar-inner > .module-main-filter-form,
body.os-portrait-layout .os-module-toolbar-inner > .prs-station-form {
  flex: 1 1 100% !important;
  max-width: 100% !important;
  flex-wrap: wrap !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  align-content: flex-start !important;
  row-gap: 0.45rem !important;
}

body.os-portrait-layout .os-module-toolbar .os-app-page-toolbar-slot {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  flex-wrap: wrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  justify-content: flex-start !important;
}

body.os-portrait-layout .os-module-toolbar .os-app-page-toolbar-slot .os-app-merged-toolbar,
body.os-portrait-layout .os-module-toolbar .os-app-page-toolbar-slot .os-page-toolbar,
body.os-portrait-layout .os-page-toolbar,
body.os-portrait-layout .os-page-sticky-chrome,
body.os-portrait-layout .os-desktop-page-header {
  flex-wrap: wrap !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

body.os-portrait-layout.os-app-shell:not(.login-shell) main .os-page-sticky-chrome:not(.site-cert-sticky-header) {
  position: static !important;
  top: auto !important;
}

body.os-portrait-layout.os-app-body > .container-fluid,
body.os-portrait-layout.os-app-body > .container-fluid > .os-app-main,
body.os-portrait-layout.os-app-shell:not(.login-shell) > .container-fluid > .os-app-main > *,
body.os-portrait-layout .ags-export-invoice-edit-page,
body.os-portrait-layout [class*="-edit-page"],
body.os-portrait-layout [class*="-index-page"],
body.os-portrait-layout .ags-balance-page,
body.os-portrait-layout .prs-balance-page,
body.os-portrait-layout .prs-page,
body.os-portrait-layout .ags-plan-page,
body.os-portrait-layout .rotation-page,
body.os-portrait-layout .module-main-page {
  overflow-x: auto !important;
  overflow-y: auto !important;
  max-height: none !important;
  min-height: auto;
}

body.os-portrait-layout.os-app-body:not(.os-module-shell),
body.os-portrait-layout.os-app-shell:not(.login-shell):not(.os-module-shell) {
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

html:has(body.os-portrait-layout:not(.login-shell):not(.os-module-shell)) {
  height: auto !important;
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
}

body.os-portrait-layout .ags-export-invoice-edit-page,
body.os-portrait-layout .ags-export-invoice-edit-page .ags-export-invoice-form {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

body.os-portrait-layout .ags-export-invoice-edit-page .ags-export-invoice-layout {
  display: flex !important;
  flex-direction: column !important;
  height: auto !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

body.os-portrait-layout .ags-export-invoice-edit-page .ags-export-invoice-layout > [class*="col-"] {
  flex: 0 0 auto !important;
  width: 100% !important;
  max-width: 100% !important;
}

body.os-portrait-layout .ags-export-invoice-edit-page .ags-export-invoice-products-section {
  display: block !important;
  flex: none !important;
  height: auto !important;
  min-height: auto !important;
  overflow: visible !important;
}

body.os-portrait-layout .ags-export-invoice-edit-page .ags-export-invoice-details-panel {
  min-height: 280px !important;
  height: auto !important;
  max-height: none !important;
  overflow: auto !important;
}

body.os-portrait-layout.os-app-shell:not(.login-shell) .os-app-main > :only-child[class*="-edit-page"] {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Login page: identical stacked layout in portrait and landscape. */
body.login-shell.login-shell-branded .login-side-toolbar {
  position: static;
  transform: none;
  flex-direction: row;
  flex-wrap: wrap;
}

body.login-shell.login-shell-branded .login-page-center,
body.login-shell.login-shell-branded .login-branded-layout {
  overflow-x: clip;
  overflow-y: visible;
}

body.login-shell.login-shell-branded:not(.login-shell-scrollable):not(:has(.login-marketing-shell)):not(:has(.login-cert-footer)) > .login-branded-layout {
  overflow-y: auto;
  max-height: calc(100dvh - 24px);
}

body.login-shell.login-shell-branded:not(.login-shell-scrollable):not(:has(.login-marketing-shell)):has(.login-cert-footer) > .login-branded-layout {
  overflow-y: auto;
  min-height: 0;
}

body.login-shell.login-shell-scrollable.login-shell-branded .login-page-center,
body.login-shell.login-shell-branded:has(.login-marketing-shell) .login-page-center {
  overflow: visible !important;
  max-height: none !important;
  justify-content: flex-start !important;
}

body.login-shell.login-shell-scrollable.login-shell-branded .login-branded-layout,
body.login-shell.login-shell-branded:has(.login-marketing-shell) .login-branded-layout {
  overflow-x: clip;
  overflow-y: auto;
  justify-content: flex-start;
}

@media (orientation: portrait) {
  body.login-shell.login-shell-branded:not(.login-shell-scrollable):not(:has(.login-marketing-shell)):not(:has(.login-cert-footer)) .login-page-center,
  body.login-shell.login-shell-branded:not(.login-shell-scrollable):not(:has(.login-marketing-shell)):not(:has(.login-cert-footer)) .login-branded-layout {
    overflow-x: clip;
    overflow-y: auto;
  }

  body.login-shell.login-shell-scrollable.login-shell-branded .login-page-center,
  body.login-shell.login-shell-branded:has(.login-marketing-shell) .login-page-center {
    overflow: visible !important;
    max-height: none !important;
    justify-content: flex-start !important;
  }

  body.login-shell.login-shell-scrollable.login-shell-branded .login-branded-layout,
  body.login-shell.login-shell-branded:has(.login-marketing-shell) .login-branded-layout {
    overflow-x: clip;
    overflow-y: auto;
    justify-content: flex-start;
  }
}

/* Portrait: document scroll for the full app shell and all locked edit/index pages. */
html:has(body.os-portrait-layout:not(.login-shell):not(.os-module-shell):not(.os-export-invoice-portrait-scroll)),
html.os-ui-scaled:has(body.os-portrait-layout:not(.login-shell):not(.os-module-shell):not(.os-export-invoice-portrait-scroll)),
html.os-portrait-root:not(:has(body.login-shell)):not(:has(body.os-module-shell)):not(:has(body.os-export-invoice-portrait-scroll)) {
  height: auto !important;
  max-height: none !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
}

body.os-portrait-layout.os-app-body:not(.os-module-shell),
body.os-portrait-layout.os-app-shell:not(.login-shell):not(.os-module-shell) {
  display: flex !important;
  flex-direction: column !important;
  min-height: 100dvh !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

body.os-portrait-layout.os-app-shell:not(.login-shell):not(.os-export-invoice-portrait-scroll) > .container-fluid,
body.os-portrait-layout.os-app-body:not(.os-export-invoice-portrait-scroll) > .container-fluid {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

body.os-portrait-layout.os-app-shell:not(.login-shell):not(.os-export-invoice-portrait-scroll) > .container-fluid > .os-app-main,
body.os-portrait-layout.os-app-body:not(.os-export-invoice-portrait-scroll) > .container-fluid > .os-app-main {
  display: flex !important;
  flex: 1 1 auto !important;
  flex-direction: column !important;
  height: auto !important;
  max-height: none !important;
  min-height: 0 !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

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

body.os-portrait-layout .ags-export-invoice-edit-page .ags-export-invoice-details-panel {
  min-height: 280px !important;
  height: auto !important;
  max-height: none !important;
  overflow: auto !important;
}

/* Portrait / narrow: force document-level vertical and horizontal scroll on every app page. */
@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 991.98px) {
  html:not(:has(body.login-shell)):not(:has(body.os-module-shell)):not(:has(body.os-export-invoice-portrait-scroll)),
  html.os-portrait-root:not(:has(body.login-shell)):not(:has(body.os-module-shell)):not(:has(body.os-export-invoice-portrait-scroll)) {
    height: auto !important;
    max-height: none !important;
    overflow-x: clip !important;
    overflow-y: auto !important;
  }

  body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-export-invoice-portrait-scroll),
  body.os-app-body:not(.login-shell):not(.os-module-shell):not(.os-export-invoice-portrait-scroll),
  body.os-portrait-layout.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-export-invoice-portrait-scroll),
  body.os-portrait-layout.os-app-body:not(.os-module-shell):not(.os-export-invoice-portrait-scroll) {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    min-height: 100dvh !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  body.os-app-shell:not(.login-shell):not(.os-module-shell):not(.os-export-invoice-portrait-scroll) > .container-fluid,
  body.os-app-body:not(.os-module-shell):not(.os-export-invoice-portrait-scroll) > .container-fluid {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  body.os-app-shell:not(.login-shell):not(.os-export-invoice-portrait-scroll) > .container-fluid > .os-app-main,
  body.os-app-body:not(.os-export-invoice-portrait-scroll) > .container-fluid > .os-app-main {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

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

  body.os-app-shell:not(.login-shell) .os-app-main > *,
  body.os-app-shell:not(.login-shell) .os-app-main > :only-child,
  body.os-app-shell:not(.login-shell) [class*="-edit-page"],
  body.os-app-shell:not(.login-shell) [class*="-index-page"],
  body.os-app-shell:not(.login-shell) .ags-plan-page:not(.os-split-page),
  body.os-app-shell:not(.login-shell) .rotation-page,
  body.os-app-shell:not(.login-shell) .ags-balance-page,
  body.os-app-shell:not(.login-shell) .prs-balance-page,
  body.os-app-shell:not(.login-shell) .prs-page,
  body.os-app-shell:not(.login-shell) .os-page-scroll,
  body.os-app-shell:not(.login-shell) .os-page-grid-view,
  body.os-app-shell:not(.login-shell) .os-page-table-view {
    display: block !important;
    flex: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Split View hosts: keep flex (side↔stack owned by os-split-view.css) */
  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-app-shell:not(.login-shell) .ags-plan-page.os-split-page,
  body.os-app-shell:not(.login-shell) .plan-page-grids-host.os-split-view-host {
    display: flex !important;
    flex-wrap: nowrap !important;
    min-height: 0 !important;
    overflow-x: clip !important;
  }

  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;
    height: auto !important;
    max-height: none !important;
    overflow-y: visible !important;
  }

  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;
  }

  /* Hub pages: fill the shell for footer placement, but keep sidebar | cards side-by-side. */
  body.os-app-shell:not(.login-shell) .module-main-page,
  body.os-portrait-layout .module-main-page {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-direction: column !important;
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: visible !important;
  }

  body.os-app-shell:not(.login-shell) .module-main-layout,
  body.os-app-shell:not(.login-shell) .prs-main-layout,
  body.os-portrait-layout .module-main-layout,
  body.os-portrait-layout .prs-main-layout,
  body.os-app-shell:not(.login-shell) .module-main-page > .module-main-layout,
  body.os-portrait-layout .module-main-page > .module-main-layout {
    display: flex !important;
    flex-direction: row !important;
    flex: 0 1 auto !important;
    align-items: flex-start !important;
    align-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: visible !important;
  }

  body.os-app-shell:not(.login-shell) .module-main-sidebar,
  body.os-app-shell:not(.login-shell) .prs-sidebar,
  body.os-portrait-layout .module-main-sidebar,
  body.os-portrait-layout .prs-sidebar {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: max-content !important;
    max-width: none !important;
    border-right: 1px solid #ced4da !important;
    border-bottom: none !important;
  }

  body.os-app-shell:not(.login-shell) .module-main-group-nav,
  body.os-app-shell:not(.login-shell) .prs-group-nav,
  body.os-portrait-layout .module-main-group-nav,
  body.os-portrait-layout .prs-group-nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    width: max-content !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body.os-app-shell:not(.login-shell) .module-main-group-panels,
  body.os-app-shell:not(.login-shell) .prs-group-panels,
  body.os-portrait-layout .module-main-group-panels,
  body.os-portrait-layout .prs-group-panels {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0 !important;
    min-height: 0 !important;
    margin-top: 0 !important;
    align-self: flex-start !important;
  }

  .ags-export-invoice-edit-page,
  .ags-export-invoice-edit-page .ags-export-invoice-form,
  .ags-export-invoice-edit-page .ags-export-invoice-products-section,
  .ags-export-invoice-edit-page .ags-export-invoice-layout,
  .ags-export-invoice-edit-page .ags-export-invoice-layout.row {
    display: block !important;
    flex: none !important;
    height: auto !important;
    max-height: none !important;
    min-height: auto !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-layout,
  .ags-export-invoice-edit-page .ags-export-invoice-layout.row {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-layout > [class*="col-"] {
    flex: 0 0 auto !important;
    width: 100% !important;
    max-width: none !important;
    min-width: min-content !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-list-panel,
  .ags-export-invoice-edit-page .ags-export-invoice-balance-panel,
  .ags-export-invoice-edit-page .ags-export-invoice-header-grid,
  .ags-export-invoice-edit-page .ags-export-invoice-details-panel,
  .ags-export-invoice-edit-page .ags-export-invoice-footer-fields,
  .ags-export-invoice-edit-page .dx-datagrid,
  .ags-export-invoice-edit-page .dx-datagrid-rowsview,
  .ags-export-invoice-edit-page .dx-datagrid-headers,
  .ags-export-invoice-edit-page .dx-scrollable-content {
    overflow-x: auto !important;
    max-width: none !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-details-panel {
    min-height: 280px !important;
    height: auto !important;
    max-height: none !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
  }

  /* Unlock clipped horizontal overflow from desktop layout rules. */
  body.os-app-shell:not(.login-shell) .dx-datagrid,
  body.os-app-shell:not(.login-shell) .dx-treelist,
  body.os-app-shell:not(.login-shell) .dx-datagrid-rowsview,
  body.os-app-shell:not(.login-shell) .dx-datagrid-headers,
  body.os-app-shell:not(.login-shell) .dx-scrollable-content,
  body.os-app-shell:not(.login-shell) .os-page-toolbar,
  body.os-app-shell:not(.login-shell) .os-page-sticky-chrome,
  body.os-app-shell:not(.login-shell) .os-desktop-page-header,
  body.os-app-shell:not(.login-shell) .os-page-header-chrome,
  body.os-app-shell:not(.login-shell) table.table {
    overflow-x: auto !important;
    max-width: none !important;
  }

  body.os-app-shell:not(.login-shell) .dx-scrollable-scrollbar-horizontal {
    display: block !important;
  }
}

/* Export Invoice Edit: dedicated vertical scroll region in portrait / narrow view. */
@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 991.98px) {
  body.os-app-shell:not(.login-shell) > .container-fluid > .os-app-main:has(.ags-export-invoice-edit-page),
  body.os-app-body:has(.ags-export-invoice-edit-page) > .container-fluid > .os-app-main,
  body.os-module-shell .app-main > main.os-app-main:has(.ags-export-invoice-edit-page),
  body.os-module-shell main.os-app-main:has(.ags-export-invoice-edit-page),
  .os-app-main.os-export-invoice-portrait-scroll-main {
    display: block !important;
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: calc(100dvh - var(--os-app-header-height, 56px) - var(--os-app-footer-height, 32px) - 0.35rem) !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  body.os-app-shell:not(.login-shell) .os-app-main > .ags-export-invoice-edit-page,
  body.os-app-shell:not(.login-shell) .os-app-main > :only-child.ags-export-invoice-edit-page,
  body.os-module-shell .os-app-main > .ags-export-invoice-edit-page,
  body.os-module-shell .os-app-main > :only-child.ags-export-invoice-edit-page,
  .ags-export-invoice-edit-page.os-export-invoice-portrait-scroll-page {
    display: block !important;
    flex: none !important;
    height: auto !important;
    min-height: min-content !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-form,
  .ags-export-invoice-edit-page .ags-export-invoice-layout,
  .ags-export-invoice-edit-page .ags-export-invoice-layout.row,
  .ags-export-invoice-edit-page .ags-export-invoice-products-section {
    display: block !important;
    flex: none !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
  }

  .ags-export-invoice-edit-page .ags-export-invoice-layout,
  .ags-export-invoice-edit-page .ags-export-invoice-layout.row {
    display: flex !important;
    flex-direction: column !important;
  }
}

body.os-export-invoice-portrait-scroll.os-app-shell:not(.login-shell) > .container-fluid,
body.os-export-invoice-portrait-scroll.os-app-body > .container-fluid {
  display: block !important;
  flex: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.os-export-invoice-portrait-scroll.os-app-shell:not(.login-shell) > .container-fluid > .os-app-main,
body.os-export-invoice-portrait-scroll.os-app-body > .container-fluid > .os-app-main,
body.os-portrait-layout.os-export-invoice-portrait-scroll > .container-fluid > .os-app-main,
body.os-export-invoice-portrait-scroll.os-module-shell .app-main > main.os-app-main,
body.os-export-invoice-portrait-scroll.os-module-shell main.os-app-main.app-content {
  max-height: calc(100dvh - var(--os-app-header-height, 56px) - var(--os-app-footer-height, 32px) - 0.35rem) !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch;
}

html:has(body.os-export-invoice-portrait-scroll),
html.os-portrait-root:has(body.os-export-invoice-portrait-scroll) {
  height: 100% !important;
  max-height: 100dvh !important;
  overflow: hidden !important;
}

body.os-export-invoice-portrait-scroll,
body.os-export-invoice-portrait-scroll.os-app-body,
body.os-export-invoice-portrait-scroll.os-app-shell:not(.login-shell) {
  height: 100% !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

body.os-export-invoice-portrait-scroll > .container-fluid {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.os-export-invoice-portrait-scroll .ags-export-invoice-edit-page,
body.os-export-invoice-portrait-scroll .ags-export-invoice-edit-page.os-export-invoice-portrait-scroll-page {
  overflow: visible !important;
}

/* ===== Force vertically centered column headers (beats DX Material padding/align) ===== */
.dx-datagrid .dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row > td,
.dx-datagrid .dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-band-row > td,
.dx-datagrid .dx-datagrid-headers .dx-datagrid-table .dx-row.dx-header-row > td,
.dx-datagrid .dx-datagrid-headers .dx-datagrid-table .dx-row.dx-band-row > td,
.dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row > td,
.dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-band-row > td,
.dx-datagrid-headers .dx-datagrid-table .dx-row.dx-header-row > td,
.dx-datagrid-headers .dx-datagrid-table .dx-row.dx-band-row > td,
.dx-datagrid-headers .dx-header-row > td,
.dx-datagrid-headers .dx-band-row > td,
.dx-datagrid-headers.dx-header-multi-row .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row > td {
  vertical-align: middle !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  padding-left: 0.35rem !important;
  padding-right: 0.35rem !important;
  height: var(--os-grid-header-row-height, 28px) !important;
  min-height: var(--os-grid-header-row-height, 28px) !important;
  max-height: var(--os-grid-header-row-height, 28px) !important;
  line-height: var(--os-grid-header-row-height, 28px) !important;
  font-size: var(--os-grid-header-font-size, 11px) !important;
  box-sizing: border-box !important;
}

.dx-datagrid .dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row > td .dx-datagrid-text-content,
.dx-datagrid .dx-datagrid-headers .dx-datagrid-table .dx-row.dx-header-row > td .dx-datagrid-text-content,
.dx-datagrid-headers .dx-datagrid-content .dx-datagrid-table .dx-row.dx-header-row > td .dx-datagrid-text-content,
.dx-datagrid-headers .dx-datagrid-table .dx-row.dx-header-row > td .dx-datagrid-text-content,
.dx-datagrid-headers .dx-header-row > td .dx-datagrid-text-content,
.dx-datagrid-headers .dx-band-row > td .dx-datagrid-text-content {
  display: inline-block !important;
  vertical-align: middle !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  line-height: var(--os-grid-header-row-height, 28px) !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: inherit !important;
}

.dx-datagrid-headers .dx-header-row > td .dx-column-indicators:not(.dx-visibility-hidden),
.dx-datagrid-headers .dx-datagrid-table .dx-row.dx-header-row > td .dx-column-indicators:not(.dx-visibility-hidden) {
  position: absolute !important;
  inset-inline-end: 2px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  margin: 0 !important;
  float: none !important;
}

.dx-datagrid-headers .dx-header-row > td:not(.dx-command-select):not(.dx-command-expand):not(.dx-command-adaptive):not(.dx-command-edit):has(.dx-column-indicators:not(.dx-visibility-hidden)),
.dx-datagrid-headers .dx-datagrid-table .dx-row.dx-header-row > td:not(.dx-command-select):not(.dx-command-expand):not(.dx-command-adaptive):not(.dx-command-edit):has(.dx-column-indicators:not(.dx-visibility-hidden)) {
  padding-inline-end: 1.7rem !important;
  padding-right: 1.7rem !important;
}

.dx-datagrid-headers .dx-header-row > td:not(.dx-command-select):not(.dx-command-expand):not(.dx-command-adaptive):not(.dx-command-edit):has(.dx-column-indicators:not(.dx-visibility-hidden) .dx-sort):has(.dx-column-indicators:not(.dx-visibility-hidden) .dx-header-filter),
.dx-datagrid-headers .dx-datagrid-table .dx-row.dx-header-row > td:not(.dx-command-select):not(.dx-command-expand):not(.dx-command-adaptive):not(.dx-command-edit):has(.dx-column-indicators:not(.dx-visibility-hidden) .dx-sort):has(.dx-column-indicators:not(.dx-visibility-hidden) .dx-header-filter) {
  padding-inline-end: 2.45rem !important;
  padding-right: 2.45rem !important;
}

/* ==========================================================================
   Portrait / narrow module hub: usable filter bar + plot strip + stacked hub
   ========================================================================== */
@media (orientation: portrait), (max-aspect-ratio: 1/1) {
  body.os-portrait-layout .os-module-toolbar .module-main-filter-form,
  body.os-portrait-layout .os-module-toolbar .prs-station-form,
  .os-module-toolbar .module-main-filter-form,
  .os-module-toolbar .prs-station-form {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    align-items: end;
    gap: 0.45rem 0.55rem !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: visible !important;
    overflow-y: visible !important;
    padding: 0.4rem 0;
  }

  body.os-portrait-layout .os-module-toolbar .module-main-filter-field:not(.module-main-filter-field--plots),
  .os-module-toolbar .module-main-filter-field:not(.module-main-filter-field--plots) {
    flex: 1 1 calc(50% - 0.35rem);
    min-width: 0;
    max-width: calc(50% - 0.28rem);
    border-left: none !important;
    padding-left: 0 !important;
    position: relative;
    z-index: 2;
  }

  body.os-portrait-layout .os-module-toolbar .module-main-filter-field .module-main-filter-panel,
  .os-module-toolbar .module-main-filter-field .module-main-filter-panel {
    width: 100%;
  }

  body.os-portrait-layout .os-module-toolbar .module-main-filter-select:not([multiple]),
  body.os-portrait-layout .os-module-toolbar .prs-station-select,
  .os-module-toolbar .module-main-filter-select:not([multiple]),
  .os-module-toolbar .prs-station-select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    flex: 1 1 auto;
  }

  /* Plot stays in the shared filter grid; os-filter-bar.css owns desktop/tablet columns. */
  body.os-portrait-layout .os-module-toolbar .module-main-filter-field--plots,
  .os-module-toolbar .module-main-filter-field--plots {
    display: inline-flex !important;
    flex: unset !important;
    flex-basis: auto !important;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.45rem;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    order: unset;
    margin-top: 0 !important;
    padding-top: 0;
    border-top: none;
    position: relative;
    z-index: 0;
  }

  body.os-portrait-layout .os-module-toolbar .module-main-filter-field--plots .module-main-filter-panel,
  .os-module-toolbar .module-main-filter-field--plots .module-main-filter-panel {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 0.45rem;
  }

  body.os-portrait-layout .os-module-toolbar .module-main-plot-strip,
  .os-module-toolbar .module-main-plot-strip {
    flex: 1 1 auto;
    width: 100%;
    min-width: 0;
    min-height: 2.35rem;
    height: auto;
    padding: 0.3rem 0.45rem;
    gap: 0.4rem;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: auto;
    scrollbar-color: rgba(255, 255, 255, 0.65) rgba(0, 0, 0, 0.18);
  }

  body.os-portrait-layout .os-module-toolbar .module-main-plot-strip::-webkit-scrollbar,
  .os-module-toolbar .module-main-plot-strip::-webkit-scrollbar {
    height: 8px;
  }

  body.os-portrait-layout .os-module-toolbar .module-main-plot-strip::-webkit-scrollbar-thumb,
  .os-module-toolbar .module-main-plot-strip::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.35);
    border-radius: 999px;
  }

  body.os-portrait-layout .os-module-toolbar .module-main-plot-chip,
  .os-module-toolbar .module-main-plot-chip {
    height: 1.85rem;
    min-height: 1.85rem;
    padding: 0 0.7rem;
    font-size: 0.8125rem;
    line-height: 1.7rem;
  }

  /* Hub content: keep sidebar | cards side-by-side (stack only on very narrow phones). */
  body.os-portrait-layout .module-main-page > .module-main-layout,
  body.os-portrait-layout .module-main-layout,
  body.os-portrait-layout .prs-main-layout,
  .module-main-page > .module-main-layout,
  .module-main-layout,
  .prs-main-layout {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0;
    height: auto !important;
    overflow: visible !important;
  }

  body.os-portrait-layout .module-main-sidebar,
  body.os-portrait-layout .prs-sidebar,
  .module-main-sidebar,
  .prs-sidebar {
    display: flex !important;
    flex: 0 0 auto !important;
    flex-direction: column !important;
    width: max-content !important;
    max-width: none !important;
    border-right: 1px solid #ced4da !important;
    border-bottom: none !important;
  }

  body.os-portrait-layout .module-main-group-nav,
  body.os-portrait-layout .prs-group-nav,
  .module-main-group-nav,
  .prs-group-nav {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch;
    gap: 0.35rem;
    width: max-content !important;
    max-width: none;
    max-height: none !important;
    padding: 0.45rem;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
  }

  body.os-portrait-layout .module-main-sidebar-group,
  .module-main-sidebar-group {
    flex: 0 0 auto;
    width: auto;
  }

  body.os-portrait-layout .module-main-group-toggle,
  body.os-portrait-layout .module-main-section-trigger,
  body.os-portrait-layout .module-main-group-trigger,
  body.os-portrait-layout .prs-group-trigger,
  .module-main-group-toggle,
  .module-main-section-trigger,
  .module-main-group-trigger,
  .prs-group-trigger {
    width: auto !important;
    min-width: max-content;
    white-space: nowrap;
  }

  body.os-portrait-layout .module-main-group-panels,
  body.os-portrait-layout .prs-group-panels,
  .module-main-group-panels,
  .prs-group-panels {
    display: block !important;
    flex: 1 1 auto !important;
    width: auto !important;
    min-width: 0;
    min-height: 0 !important;
    margin-top: 0 !important;
    align-self: flex-start !important;
  }

  body.os-portrait-layout .module-main-header,
  .module-main-header {
    padding-inline: 0.35rem;
  }

  body.os-portrait-layout .module-main-header-title-row,
  .module-main-header-title-row {
    gap: 0.35rem 0.65rem;
  }
}

/* Phones only: stack hub sidebar above cards. */
@media (max-width: 575.98px) {
  body.os-portrait-layout .module-main-layout,
  body.os-portrait-layout .prs-main-layout,
  .module-main-layout,
  .prs-main-layout {
    flex-direction: column !important;
  }

  body.os-portrait-layout .module-main-sidebar,
  body.os-portrait-layout .prs-sidebar,
  .module-main-sidebar,
  .prs-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    border-right: none !important;
    border-bottom: 1px solid #ced4da !important;
  }

  body.os-portrait-layout .module-main-group-nav,
  body.os-portrait-layout .prs-group-nav,
  .module-main-group-nav,
  .prs-group-nav {
    flex-direction: row !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
  }

  body.os-portrait-layout .module-main-group-panels,
  body.os-portrait-layout .prs-group-panels,
  .module-main-group-panels,
  .prs-group-panels {
    width: 100% !important;
  }
}

/* Very narrow portrait: single-column filter fields. */
@media (orientation: portrait) and (max-width: 420px), (max-aspect-ratio: 1/1) and (max-width: 420px) {
  body.os-portrait-layout .os-module-toolbar .module-main-filter-field:not(.module-main-filter-field--plots),
  .os-module-toolbar .module-main-filter-field:not(.module-main-filter-field--plots) {
    flex: 1 1 100%;
    max-width: 100%;
  }
}

/* Keep footer at the bottom of the viewport on short hub pages (portrait / narrow). */
@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 991.98px) {
  body.os-app-shell:not(.login-shell):not(.os-module-shell),
  body.os-portrait-layout.os-app-shell:not(.login-shell):not(.os-module-shell),
  body.os-app-body:not(.os-module-shell):has(.module-main-page),
  body.os-portrait-layout.os-app-body:not(.os-module-shell):has(.module-main-page) {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100dvh !important;
  }

  body.os-app-shell:not(.login-shell):not(.os-module-shell) > .container-fluid,
  body.os-portrait-layout.os-app-shell:not(.login-shell):not(.os-module-shell) > .container-fluid,
  body.os-app-body:not(.os-module-shell):has(.module-main-page) > .container-fluid {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

  body.os-app-shell:not(.login-shell):not(.os-module-shell) > .container-fluid > .os-app-main,
  body.os-portrait-layout.os-app-shell:not(.login-shell):not(.os-module-shell) > .container-fluid > .os-app-main,
  body.os-app-body:not(.os-module-shell):has(.module-main-page) > .container-fluid > .os-app-main {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
  }

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

/* Module shell: pin topbar + title/actions + filters; scroll app-main through content + footer. */
html:has(body.os-module-shell),
html.os-portrait-root: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,
body.os-portrait-layout.os-module-shell {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 100dvh !important;
  overflow: hidden !important;
}

body.os-module-shell .app-main {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  overscroll-behavior: contain;
}

body.os-module-shell .app-topbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 30 !important;
  flex: 0 0 auto !important;
}

body.os-module-shell #os-app-page-chrome-host:not([hidden]) {
  position: sticky !important;
  top: var(--os-shell-chrome-top, var(--topbar-h)) !important;
  z-index: 29 !important;
  flex: 0 0 auto !important;
}

body.os-module-shell .os-module-toolbar {
  position: sticky !important;
  top: var(--os-shell-filter-top, calc(var(--topbar-h) + var(--os-page-chrome-height, 0px))) !important;
  z-index: 28 !important;
  flex: 0 0 auto !important;
}

body.os-module-shell .os-subscription-warning {
  flex: 0 0 auto !important;
}

body.os-module-shell main.os-app-main.app-content,
body.os-module-shell .app-content.os-app-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: clip !important;
  overflow-y: auto !important;
}

body.os-module-shell .os-app-footer {
  flex: 0 0 auto !important;
  position: relative !important;
  margin-top: 0 !important;
}

/* Dedicated export pages keep their own chrome + grid fill inside module shell. */
body.os-module-shell.os-dedicated-export-page .app-main {
  overflow: hidden !important;
}

body.os-module-shell.os-dedicated-export-page #os-app-page-chrome-host {
  display: none !important;
}

body.os-module-shell.os-dedicated-export-page main.os-app-main.app-content,
body.os-module-shell.os-dedicated-export-page .app-content.os-app-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}

body.os-module-shell.os-dedicated-export-page .ags-export-invoices-products-page,
body.os-module-shell.os-dedicated-export-page .ags-export-invoice-index-page,
body.os-module-shell.os-dedicated-export-page .ags-transportation-index-page,
body.os-module-shell.os-dedicated-export-page .aps-qcap-protocol-index-page,
body.os-module-shell.os-dedicated-export-page .aps-qcap-protocol-edit-page,
body.os-module-shell.os-dedicated-export-page .aps-laboratory-edit-page,
body.os-module-shell.os-dedicated-export-page main > :only-child:has([data-os-dedicated-page-chrome="true"]) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.os-module-shell.os-dedicated-export-page .ags-export-invoices-products-chrome,
body.os-module-shell.os-dedicated-export-page .ags-export-invoice-index-chrome,
body.os-module-shell.os-dedicated-export-page .ags-transportation-index-chrome,
body.os-module-shell.os-dedicated-export-page .aps-qcap-protocol-index-chrome,
body.os-module-shell.os-dedicated-export-page .aps-qcap-protocol-edit-chrome,
body.os-module-shell.os-dedicated-export-page .aps-laboratory-edit-chrome,
body.os-module-shell.os-dedicated-export-page [data-os-dedicated-page-chrome="true"] {
  display: block !important;
  visibility: visible !important;
  flex: 0 0 auto !important;
  position: relative !important;
  top: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.os-module-shell.os-dedicated-export-page .ags-export-invoices-products-grid-panel,
body.os-module-shell.os-dedicated-export-page .ags-export-invoice-index-grid-panel {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
}

body.os-module-shell.os-dedicated-export-page .os-export-invoices-products-grid,
body.os-module-shell.os-dedicated-export-page .os-export-invoice-index-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: 100% !important;
  max-height: none !important;
  overflow: hidden !important;
}

/* Table-only pages: pin footer and stretch the grid down to it. */
body.os-module-shell.os-table-fill-page .app-main {
  overflow: hidden !important;
}

body.os-module-shell.os-table-fill-page .app-topbar,
body.os-module-shell.os-table-fill-page #os-app-page-chrome-host:not([hidden]),
body.os-module-shell.os-table-fill-page .os-module-toolbar,
body.os-module-shell.os-table-fill-page .os-subscription-warning,
body.os-module-shell.os-table-fill-page .os-app-footer {
  position: relative !important;
  top: auto !important;
  flex: 0 0 auto !important;
}

body.os-module-shell.os-table-fill-page main.os-app-main.app-content,
body.os-module-shell.os-table-fill-page .app-content.os-app-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  padding-bottom: 0.5rem !important;
}

body.os-module-shell.os-table-fill-page main.os-app-main.app-content > .os-page-scroll,
body.os-module-shell.os-table-fill-page .app-content.os-app-main > .os-page-scroll,
body.os-module-shell.os-table-fill-page main.os-app-main.app-content > [class*="-index-page"],
body.os-module-shell.os-table-fill-page .app-content.os-app-main > [class*="-index-page"],
body.os-module-shell.os-table-fill-page main.os-app-main.app-content > :only-child,
body.os-module-shell.os-table-fill-page .app-content.os-app-main > :only-child {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.os-module-shell.os-table-fill-page .os-page-scroll,
body.os-module-shell.os-table-fill-page .os-page-grid-view,
body.os-module-shell.os-table-fill-page .os-page-table-view,
body.os-module-shell.os-table-fill-page .os-dx-grid {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  width: 100%;
}

body.os-module-shell.os-table-fill-page .os-page-grid-view .dx-datagrid,
body.os-module-shell.os-table-fill-page .os-dx-grid .dx-datagrid {
  height: 100% !important;
  max-height: none !important;
}

/* Keep column headers fixed: scroll rows inside the grid, not the whole grid host. */
body.os-table-fill-page .os-page-grid-view,
body.os-table-fill-page .os-dx-grid,
body.os-module-shell.os-table-fill-page .os-page-grid-view,
body.os-module-shell.os-table-fill-page .os-dx-grid {
  overflow: hidden !important;
}

body.os-table-fill-page .dx-datagrid,
body.os-module-shell.os-table-fill-page .dx-datagrid {
  overflow: hidden !important;
  max-height: 100% !important;
}

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

body.os-table-fill-page .os-page-table-view,
body.os-module-shell.os-table-fill-page .os-page-table-view {
  overflow: auto !important;
}

body.os-table-fill-page .os-page-table-view thead th,
body.os-module-shell.os-table-fill-page .os-page-table-view thead th,
body.os-table-fill-page .os-page-table-view thead td,
body.os-module-shell.os-table-fill-page .os-page-table-view thead td {
  position: sticky !important;
  top: 0 !important;
  z-index: 4 !important;
  background: var(--os-color-surface, #f3f6f9) !important;
  box-shadow: inset 0 -1px 0 var(--os-color-border, #dee2e6);
}

/* Drop redundant section banners (e.g. PRODUCTS) once the page title lives in chrome. */
body.os-module-shell.os-page-chrome-in-header.os-table-fill-page .os-desktop-section-title:has(+ .os-dx-grid),
body.os-module-shell.os-page-chrome-in-header.os-table-fill-page .os-desktop-section-title:has(+ .os-page-grid-view),
body.os-module-shell.os-page-chrome-in-header.os-table-fill-page .os-desktop-section-title:has(+ .os-page-scroll),
body.os-module-shell.os-page-chrome-in-header.os-table-fill-page .aps-site-section-title:has(+ .os-dx-grid),
body.os-module-shell.os-page-chrome-in-header.os-table-fill-page .aps-site-section-title:has(+ .os-page-grid-view),
body.os-module-shell.os-page-chrome-in-header.os-table-fill-page .aps-site-section-title:has(+ .os-page-scroll) {
  display: none !important;
}

body.os-module-shell.os-page-chrome-in-header.os-table-fill-page .os-desktop-section-title:has(+ .os-dx-grid) + .os-dx-grid,
body.os-module-shell.os-page-chrome-in-header.os-table-fill-page .os-desktop-section-title:has(+ .os-page-grid-view) + .os-page-grid-view,
body.os-module-shell.os-page-chrome-in-header.os-table-fill-page .aps-site-section-title:has(+ .os-dx-grid) + .os-dx-grid {
  border-top: 1px solid var(--os-color-form-border, #c8c8c8) !important;
}

body.os-module-shell.os-table-fill-page main.os-app-main.app-content,
body.os-module-shell.os-table-fill-page .app-content.os-app-main {
  padding-top: 0.35rem !important;
  padding-bottom: 0.35rem !important;
}

body.os-module-shell.os-table-fill-page .os-desktop-section-title,
body.os-module-shell.os-table-fill-page .aps-site-section-title,
body.os-module-shell.os-table-fill-page .alert,
body.os-module-shell.os-table-fill-page h1.visually-hidden {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
}

/* No leftover empty title row after chrome promote. */
body.os-module-shell.os-page-chrome-in-header main .d-flex.justify-content-between.align-items-center.mb-3:empty,
body.os-module-shell.os-page-chrome-in-header main .d-flex.justify-content-between.align-items-center.mb-4:empty,
body.os-module-shell.os-page-chrome-in-header main .os-desktop-page-header:empty,
body.os-module-shell.os-page-chrome-in-header main .os-page-header-chrome-host:empty {
  display: none !important;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  height: 0 !important;
}

/* ==========================================================================
   Universal orientation: all pages + all interactive elements
   Works with media queries AND body.os-portrait-layout / os-landscape-layout.
   ========================================================================== */

/* Portrait: stack Bootstrap columns and form grids so fields don't clip. */
@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 991.98px) {
  .row > [class*="col-"],
  .os-desktop-form .row > [class*="col-"],
  .os-app-main .row > [class*="col-md-"],
  .os-app-main .row > [class*="col-lg-"],
  .os-app-main .row > [class*="col-xl-"],
  body.os-module-shell .app-content .row > [class*="col-md-"],
  body.os-module-shell .app-content .row > [class*="col-lg-"] {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  /* Keep tight half-columns when explicitly marked for compact portrait. */
  .row > .col-6,
  .row > .col-sm-6,
  .os-keep-half-portrait {
    flex: 0 0 auto;
    width: 50%;
    max-width: 50%;
  }

  .table-responsive,
  .os-page-table-view,
  .os-desktop-form-table,
  table.table,
  .dx-datagrid,
  .dx-treelist {
    max-width: 100%;
  }

  .modal-dialog:not(.modal-sm):not(.os-erp-dialog--sm) {
    margin: 0.5rem auto;
    max-width: calc(100vw - 1rem);
  }

  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl,
  .modal-dialog.modal-fullscreen-lg-down {
    max-width: calc(100vw - 1rem);
  }

  .dropdown-menu {
    max-width: min(100vw - 1rem, 24rem);
  }

  .btn-toolbar,
  .btn-group {
    flex-wrap: wrap;
    max-width: 100%;
  }

  .os-app-main img,
  .os-app-main video,
  .os-app-main canvas,
  .os-app-main iframe,
  .app-content img,
  .app-content video,
  .app-content canvas,
  .app-content iframe,
  .login-branded-layout img,
  .login-marketing-shell img {
    max-width: 100%;
    height: auto;
  }

  .os-app-main iframe,
  .app-content iframe {
    min-height: 12rem;
  }

  /* Module shell: form cards and filter strips adapt */
  body.os-module-shell .card-body,
  body.os-module-shell .module-section-panel,
  body.os-module-shell .os-desktop-form,
  body.os-module-shell .os-page-gutter {
    min-width: 0;
    max-width: 100%;
  }

  body.os-module-shell .app-topbar {
    flex-wrap: wrap;
    gap: 0.35rem;
    height: auto;
    min-height: var(--os-app-header-height, 56px);
  }

  body.os-module-shell .app-topbar__actions,
  body.os-module-shell .app-topbar__meta {
    flex-wrap: wrap;
    min-width: 0;
  }

  body.os-module-shell #os-app-page-chrome-host .btn,
  body.os-module-shell .os-page-toolbar .btn,
  body.os-module-shell .os-app-merged-toolbar .btn {
    flex: 0 1 auto;
  }

  /* DX editors and popup lists stay inside viewport */
  .dx-overlay-content,
  .dx-popup-wrapper > .dx-overlay-content,
  .dx-dropdowneditor-overlay .dx-overlay-content {
    max-width: min(100vw - 0.75rem, 100%);
  }

  .dx-datagrid-headers,
  .dx-datagrid-rowsview,
  .dx-scrollable-wrapper,
  .dx-scrollable-container {
    max-width: 100%;
  }
}

/* Mirror the same stacking when JS marks portrait (covers edge cases). */
body.os-portrait-layout .row > [class*="col-md-"],
body.os-portrait-layout .row > [class*="col-lg-"],
body.os-portrait-layout .row > [class*="col-xl-"],
body.os-portrait-layout.os-module-shell .app-content .row > [class*="col-md-"],
body.os-portrait-layout.os-module-shell .app-content .row > [class*="col-lg-"] {
  flex: 0 0 auto;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

body.os-portrait-layout .os-page-toolbar,
body.os-portrait-layout .os-app-merged-toolbar,
body.os-portrait-layout .btn-toolbar,
body.os-portrait-layout.os-module-shell #os-app-page-chrome-host .os-page-header-chrome {
  flex-wrap: wrap;
  max-width: 100%;
}

/* Portrait class: unlock fixed title-bar height that clips toolbar buttons. */
body.os-portrait-layout #os-app-page-chrome-host:not([hidden]),
body.os-portrait-layout #os-app-page-chrome-host .os-page-header-chrome,
body.os-portrait-layout #os-app-page-chrome-host .os-desktop-page-header,
body.os-portrait-layout #os-app-page-chrome-host .os-page-header-chrome-host,
body.os-portrait-layout .os-page-header-chrome,
body.os-portrait-layout .os-desktop-page-header,
body.os-portrait-layout .os-page-header-chrome-host,
body.os-portrait-layout .os-module-toolbar,
body.os-portrait-layout .os-module-toolbar-inner {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.os-portrait-layout #os-app-page-chrome-host .os-page-toolbar,
body.os-portrait-layout #os-app-page-chrome-host .os-app-merged-toolbar,
body.os-portrait-layout #os-app-page-chrome-host .btn,
body.os-portrait-layout #os-app-page-chrome-host .os-page-toolbar-btn,
body.os-portrait-layout #os-app-page-chrome-host .os-page-toolbar-icon-btn,
body.os-portrait-layout #os-app-page-chrome-host .os-page-toolbar-labeled-btn {
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
}

body.os-portrait-layout .table-responsive,
body.os-portrait-layout .os-page-table-view,
body.os-portrait-layout .os-page-grid-view,
body.os-portrait-layout .dx-datagrid {
  max-width: 100%;
  overflow-x: auto;
}

body.os-portrait-layout.os-module-shell,
body.os-portrait-layout.os-module-shell .app-main {
  height: 100dvh !important;
  max-height: 100dvh !important;
  min-height: 0 !important;
}

body.os-portrait-layout.os-module-shell .app-main {
  /* Content area owns Y scroll (os-scroll / os-responsive-fix). */
  overflow-x: hidden !important;
  overflow-y: hidden !important;
}

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

/* Landscape desktop: restore multi-column forms and docked chrome. */
@media (orientation: landscape) and (min-width: 992px) {
  body.os-landscape-layout.os-module-shell:not(.os-portrait-layout) .app-main {
    /* Keep shell-owned scroll regions; do not force document scroll. */
    min-height: 0;
  }

  body.os-landscape-layout .modal-dialog.modal-lg {
    max-width: 800px;
  }

  body.os-landscape-layout .modal-dialog.modal-xl {
    max-width: 1140px;
  }
}