/* =============================================================================
   OrganicSystem — Enterprise Responsive Layout Framework
   Shared by every page (via _UiAutoScaleHead). Layout only — no redesign.
   Breakpoints:
     Mobile Portrait   < 576px
     Mobile Landscape  >= 576px
     Tablet Portrait   >= 768px
     Tablet Landscape  >= 992px
     Laptop            >= 1200px
     Desktop           >= 1400px
     Desktop XL        >= 1600px
   ============================================================================= */

:root {
  --os-bp-xs: 0;
  --os-bp-sm: 576px;
  --os-bp-md: 768px;
  --os-bp-lg: 992px;
  --os-bp-xl: 1200px;
  --os-bp-xxl: 1400px;
  --os-bp-xxxl: 1600px;

  --os-bp-mobile-portrait-max: 575.98px;
  --os-bp-mobile-landscape: 576px;
  --os-bp-tablet-portrait: 768px;
  --os-bp-tablet-landscape: 992px;
  --os-bp-laptop: 1200px;
  --os-bp-desktop: 1400px;
  --os-bp-desktop-xl: 1600px;

  --os-page-gutter: clamp(0.5rem, 1.2vw, 1.25rem);
  --os-content-max: 100%;
  --os-toolbar-gap: 0.5rem;
}

/* ---------- Viewport containment (no document horizontal overflow) ---------- */
html {
  max-width: 100%;
  overflow-x: clip;
}

body.os-app-shell,
body.os-module-shell,
body.login-shell,
body.os-report-layout,
body.mk-page {
  max-width: 100vw;
  overflow-x: clip;
}

body.os-app-shell > .container-fluid,
body.os-report-layout > .container-fluid,
.app-main,
.os-app-main,
.app-content,
.os-page-scroll,
.os-page-sticky-chrome,
.os-module-toolbar,
.os-page-toolbar {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* Fluid media / embeds — never force canvas height:auto inside DevExpress report hosts
   (Web Document Viewer sizes page canvases explicitly; height:auto blanks the preview). */
img,
svg,
video,
iframe {
  max-width: 100%;
  height: auto;
}

canvas:not(#DocumentViewer canvas):not(.dxrd-preview canvas):not(.dx-report-viewer canvas) {
  max-width: 100%;
  height: auto;
}

/* Prefer fluid boxes everywhere in app chrome */
.os-app-shell *,
.os-module-shell *,
.login-shell * {
  box-sizing: border-box;
}

/* ---------- Shared layout primitives ---------- */
.os-layout,
.os-layout-row,
.os-layout-stack {
  display: flex;
  min-width: 0;
  max-width: 100%;
}

.os-layout,
.os-layout-row {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--os-toolbar-gap);
  align-items: stretch;
}

.os-layout-stack {
  flex-direction: column;
  gap: var(--os-toolbar-gap);
}

.os-layout-grid {
  display: grid;
  gap: var(--os-toolbar-gap);
  min-width: 0;
  max-width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
}

.os-layout-fill {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 100%;
}

.os-layout-scroll-x {
  max-width: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  -webkit-overflow-scrolling: touch;
}

.os-layout-scroll-y {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
}

/* Tables / grids: contain width; horizontal scroll is grid-internal only (os-grid.css) */
.table-responsive,
.os-erp-data-table-host,
.os-native-table-scroll,
.os-table-host,
.os-page-grid-view,
.os-dx-grid,
.os-page-table-view,
.dx-datagrid,
.dx-datagrid-headers,
.dx-datagrid-rowsview,
.plan-grids-row,
.module-main-layout,
.prs-main-layout {
  max-width: 100%;
  min-width: 0;
}

/* Form controls fill available track */
.os-app-main .form-control,
.os-app-main .form-select,
.os-app-main .dx-texteditor,
.app-content .form-control,
.app-content .form-select {
  max-width: 100%;
}

/* ---------- Desktop XL (>=1600) ---------- */
@media (min-width: 1600px) {
  html[data-os-bp="desktop-xl"] body,
  body {
    --os-page-gutter: clamp(0.75rem, 1vw, 1.5rem);
  }
}

/* ---------- Desktop (>=1400) ---------- */
@media (min-width: 1400px) and (max-width: 1599.98px) {
  body {
    --os-page-gutter: clamp(0.65rem, 1vw, 1.35rem);
  }
}

/* ---------- Laptop (>=1200) ---------- */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  body {
    --os-page-gutter: 0.85rem;
  }
}

/* ---------- Tablet Landscape (>=992) ---------- */
@media (min-width: 992px) {
  .os-page-gutter,
  .os-module-toolbar .container-fluid,
  .os-app-header .os-app-navbar-inner,
  .os-app-footer .container-fluid {
    padding-left: max(var(--os-page-gutter), env(safe-area-inset-left, 0px));
    padding-right: max(var(--os-page-gutter), env(safe-area-inset-right, 0px));
  }
}

/* ---------- Below Tablet Landscape (<992): stack / wrap / contain ---------- */
@media (max-width: 991.98px) {
  /* Module hub / station layouts: always fit viewport width */
  .module-main-layout,
  .prs-main-layout {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap;
  }

  .module-main-sidebar,
  .prs-sidebar {
    width: 100% !important;
    max-width: 100% !important;
    flex: 1 1 100%;
    border-right: none;
    border-bottom: 1px solid var(--os-color-border, #ced4da);
  }

  .module-main-group-panel,
  .prs-group-panel,
  .module-main-content,
  .prs-main-content {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100%;
  }

  .prs-group-nav,
  .prs-ribbon-section {
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Toolbars: wrap so actions never clip off-screen */
  .os-module-toolbar,
  .os-page-toolbar,
  .os-page-header-chrome,
  .module-main-toolbar,
  .prs-ribbon,
  .rotation-toolbar,
  .os-app-page-chrome-host {
    max-width: 100%;
    min-width: 0;
  }

  .os-module-toolbar .d-flex,
  .os-page-toolbar .d-flex,
  .os-module-toolbar .btn-toolbar,
  .os-page-toolbar .btn-toolbar,
  .rotation-toolbar,
  .prs-ribbon,
  .os-page-toolbar,
  .plan-toolbar,
  .os-app-page-toolbar-slot {
    flex-wrap: wrap !important;
    gap: 0.35rem 0.5rem;
    max-width: 100%;
    overflow-x: visible !important;
  }

  /* Search / filter hosts: fluid instead of fixed rem tracks */
  .os-page-grid-search,
  .admin-subscribers-search {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 10rem !important;
  }

  .os-module-toolbar .module-main-filter-select,
  .os-module-toolbar .prs-station-select {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Plan dual panel: stack vertically (framework mode wins when present) */
  .plan-grids-row:not(.os-split-view),
  .plan-grids-row.os-split-view[data-os-split-mode="stack"] {
    flex-direction: column !important;
    min-height: 0 !important;
    width: 100% !important;
  }

  .plan-grids-row.os-split-view[data-os-split-mode="side"] {
    flex-direction: row !important;
  }

  .plan-grid-panel,
  .plan-grid-panel-prev,
  .plan-grid-panel-current {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 14rem;
    border-right: none !important;
    border-bottom: 1px solid var(--os-color-border, #bdbdbd);
  }

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

  /* Edit form column policy owned by os-forms.css (3 / 2 / 1).
     Keep only containment here so page width never overflows. */
  .os-desktop-form-table,
  .aps-site-table,
  .prs-ro-header-table,
  .prs-li-header-table {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}

/* ---------- Tablet Portrait (>=768 and <992) ---------- */
@media (min-width: 768px) and (max-width: 991.98px) {
  .os-layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  }
}

/* ---------- Mobile Landscape (>=576 and <768) ---------- */
@media (min-width: 576px) and (max-width: 767.98px) {
  .os-module-toolbar .btn,
  .os-page-toolbar .btn {
    min-height: 2.5rem;
  }

  .os-layout-grid {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr));
  }
}

/* ---------- Mobile Portrait (<576) ---------- */
@media (max-width: 575.98px) {
  body {
    --os-page-gutter: 0.5rem;
    --os-toolbar-gap: 0.4rem;
  }

  .os-page-gutter,
  .os-module-toolbar .container-fluid,
  .os-app-header .os-app-navbar-inner,
  .os-app-footer .container-fluid {
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px));
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px));
  }

  .os-module-toolbar .btn,
  .os-page-toolbar .btn,
  .rotation-toolbar .btn {
    flex: 1 1 auto;
    min-width: min(100%, 7.5rem);
  }

  .module-form-group,
  .ags-find-replace-tables {
    width: 100% !important;
    max-width: 100% !important;
  }

  .os-layout-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  /* Dropdown menus stay within viewport */
  .dropdown-menu {
    max-width: min(100vw - 1rem, 22rem);
  }
}

/* ---------- Landscape phones / short viewports ---------- */
@media (orientation: landscape) and (max-height: 500px) {
  .os-module-toolbar,
  .os-page-toolbar {
    flex-wrap: wrap;
  }
}

/* ---------- Breakpoint attribute hooks (set by os-responsive.js) ---------- */
html[data-os-bp="mobile-portrait"] .os-bp-hide-xs,
html[data-os-bp="mobile-landscape"] .os-bp-hide-sm,
html[data-os-bp="tablet-portrait"] .os-bp-hide-md,
html[data-os-bp="tablet-landscape"] .os-bp-hide-lg,
html[data-os-bp="laptop"] .os-bp-hide-xl,
html[data-os-bp="desktop"] .os-bp-hide-xxl,
html[data-os-bp="desktop-xl"] .os-bp-hide-xxxl {
  display: none !important;
}

/* Utility: force a region to never widen the page */
.os-no-x-overflow {
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
}

/* DX overlays: never force document wider than viewport */
.dx-overlay-wrapper,
.dx-overlay-content {
  max-width: 100vw;
}