/* =============================================================================
   OrganicSystem — ERP Mobile / Portrait Optimization
   Authoritative for portrait + narrow viewports. Layout only.

   Scope: Toolbar · Sidebar · Header · Footer · Cards · Forms · Tables ·
          Dialogs · Grid · Buttons · Dropdowns · Select2 · TomSelect ·
          DatePickers · File Upload · Image Preview

   Guarantees: usable · no overlap · no page overflow · content resizes
   ============================================================================= */

:root {
  --os-mobile-gutter: max(0.65rem, env(safe-area-inset-left, 0px));
  --os-mobile-gutter-end: max(0.65rem, env(safe-area-inset-right, 0px));
  --os-mobile-touch: 2.75rem;
  --os-mobile-tap: 44px;
  --os-mobile-radius: 0.35rem;
  --os-mobile-z-overlay: 1200;
  --os-mobile-z-dropdown: 1300;
  --os-mobile-z-modal: 1400;
}

/* ---------- Portrait media (single source of truth) ---------- */
@media (orientation: portrait), (max-aspect-ratio: 1/1), (max-width: 767.98px) {

  /* ===== Viewport containment ===== */
  html.os-portrait-root,
  html:has(body.os-portrait-layout),
  body.os-portrait-layout,
  body.os-module-shell,
  body.os-app-shell,
  body.login-shell {
    max-width: 100vw !important;
    overflow-x: clip !important;
  }

  body.os-module-shell,
  body.os-app-shell,
  body.login-shell {
    width: 100% !important;
    box-sizing: border-box !important;
  }

  .app-main,
  .os-app-main,
  .app-content,
  .container-fluid,
  .os-page-gutter,
  .os-module-toolbar,
  .os-module-toolbar-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .os-app-main,
  .app-content,
  main.os-app-main {
    padding-left: var(--os-mobile-gutter) !important;
    padding-right: var(--os-mobile-gutter-end) !important;
    padding-bottom: max(0.75rem, env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ===== HEADER / TOPBAR ===== */
  body.os-module-shell .app-topbar,
  header.os-app-header,
  .os-app-header .os-app-navbar-inner {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: var(--os-app-header-height, 56px);
    flex-wrap: wrap !important;
    gap: 0.35rem 0.5rem !important;
    padding-left: max(0.5rem, env(safe-area-inset-left, 0px)) !important;
    padding-right: max(0.5rem, env(safe-area-inset-right, 0px)) !important;
    padding-top: max(0.25rem, env(safe-area-inset-top, 0px)) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body.os-module-shell .app-topbar__title {
    flex: 1 1 auto !important;
  }

  body.os-module-shell .app-topbar__title,
  body.os-module-shell .app-topbar__company,
  .os-app-header .navbar-brand {
    min-width: 0 !important;
    max-width: 100% !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  body.os-module-shell .app-topbar__actions,
  body.os-module-shell .app-topbar__meta,
  .os-app-header .navbar-nav {
    flex-wrap: wrap !important;
    min-width: 0 !important;
    max-width: 100% !important;
    gap: 0.35rem;
  }

  body.os-module-shell .app-topbar__menu {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: var(--os-mobile-tap);
    min-height: var(--os-mobile-tap);
  }

  /* ===== SIDEBAR (overlay — reinforce; no content push) ===== */
  body.os-module-shell.has-sidebar,
  body.os-module-shell.has-sidebar.is-sidebar-collapsed {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.os-module-shell .app-sidebar {
    position: fixed !important;
    z-index: var(--os-mobile-z-overlay) !important;
    max-width: min(18rem, 88vw) !important;
    width: min(18rem, 88vw) !important;
    height: 100dvh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    /* Avoid invalid --sb-bg (empty custom props block fallbacks). */
    background-color: var(--os-color-sidebar, var(--os-color-surface, #ffffff)) !important;
    background-image: none !important;
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.28) !important;
    color: var(--os-color-text, #222222) !important;
  }

  body.os-module-shell .app-sidebar__brand,
  body.os-module-shell .app-sidebar__search,
  body.os-module-shell .app-sidebar__scroll,
  body.os-module-shell .sb-nav {
    background: transparent;
    max-width: 100%;
    min-width: 0;
  }

  body.os-module-shell .sb-link,
  body.os-module-shell .app-sidebar__title {
    display: block !important;
    max-width: 100%;
    white-space: normal;
  }

  body.os-module-shell .app-sidebar-backdrop {
    z-index: calc(var(--os-mobile-z-overlay) - 1) !important;
    background: rgba(10, 20, 14, 0.45) !important;
  }

  body.os-module-shell .app-main {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }

  /* ===== FOOTER ===== */
  footer.os-app-footer,
  footer.footer.os-app-footer,
  body.os-module-shell .os-app-footer,
  body.os-app-shell > footer.os-app-footer {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    min-width: 0 !important;
    height: var(--os-app-footer-height, 1.5rem) !important;
    min-height: var(--os-app-footer-height, 1.5rem) !important;
    max-height: var(--os-app-footer-height, 1.5rem) !important;
    padding: 0 0.75rem !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 45;
  }

  footer.os-app-footer .container-fluid,
  footer.os-app-footer .row,
  footer.os-app-footer .d-flex {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    min-width: 0 !important;
    gap: 0.35rem;
  }

  /* ===== TOOLBAR ===== */
  .os-page-toolbar,
  .os-app-merged-toolbar,
  .plan-toolbar,
  .rotation-toolbar,
  .os-page-header-chrome,
  .os-desktop-page-header:has(.os-page-toolbar),
  #os-app-page-chrome-host,
  .os-app-page-chrome-host {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    max-height: none !important;
    flex-wrap: wrap !important;
    overflow: visible !important;
    gap: 0.4rem !important;
  }

  .os-page-toolbar .btn:not(.dropdown-item),
  .os-app-merged-toolbar .btn:not(.dropdown-item),
  .os-module-toolbar .os-app-page-toolbar-slot .btn:not(.dropdown-item),
  .plan-toolbar .btn:not(.dropdown-item),
  .rotation-toolbar .btn:not(.dropdown-item),
  #os-app-page-chrome-host .os-page-toolbar .btn:not(.dropdown-item) {
    flex: 1 1 calc(50% - 0.5rem) !important;
    min-width: min(100%, 7.5rem) !important;
    height: var(--os-erp-toolbar-btn-height, 40px) !important;
    min-height: var(--os-erp-toolbar-btn-height, 40px) !important;
    max-height: var(--os-erp-toolbar-btn-height, 40px) !important;
    max-width: 100% !important;
    white-space: nowrap !important;
    justify-content: center;
  }

  .os-desktop-page-header .os-page-toolbar,
  .os-page-header-chrome-right .os-page-toolbar {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
  }

  .os-desktop-page-header,
  .os-page-header-chrome-host {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .os-desktop-page-header > h1,
  .os-desktop-page-header > .h3,
  .os-page-header-chrome-left,
  .os-page-header-chrome-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ===== FILTER BAR (grid owned by os-filter-bar.css) ===== */
  .os-module-toolbar-inner {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
  }

  .os-module-toolbar .module-main-filter-form,
  .os-module-toolbar .prs-station-form {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .os-filter-field,
  .module-main-filter-form .os-filter-field,
  .os-module-toolbar .module-main-filter-field {
    flex: unset !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .os-module-toolbar .form-select,
  .os-module-toolbar .form-control,
  .module-main-filter-form .form-select,
  .module-main-filter-form .form-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: var(--os-mobile-touch) !important;
  }

  /* ===== CARDS ===== */
  .card,
  .module-section-panel,
  .os-form-card,
  .login-card,
  .mk-card {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow: hidden;
  }

  .card-body,
  .card-header,
  .card-footer {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .card-body .row,
  .card-body .d-flex {
    max-width: 100%;
    min-width: 0;
  }

  /* ===== FORMS ===== */
  form,
  .os-desktop-form,
  [class*="-edit-page"] form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm,
  textarea.form-control,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="search"],
  input[type="tel"],
  input[type="file"] {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .form-control,
  .form-select,
  .form-control-sm,
  .form-select-sm,
  input[type="date"],
  input[type="file"] {
    min-height: var(--os-mobile-touch) !important;
    font-size: 16px !important; /* prevent iOS zoom */
  }

  .form-label,
  label.form-label {
    display: block !important;
    visibility: visible !important;
    max-width: 100%;
    white-space: normal !important;
    margin-bottom: 0.25rem;
  }

  /* ERP desktop-form cells: label above control on portrait */
  .os-desktop-form > .row.g-3 > [class*="col-"],
  .os-desktop-form > .row.g-2 > [class*="col-"] {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .os-desktop-form .form-label {
    height: auto !important;
    min-height: 0 !important;
    border-right: none !important;
    border-bottom: 1px solid var(--os-color-form-border, #c8c8c8);
    width: 100% !important;
  }

  .input-group {
    width: 100% !important;
    max-width: 100% !important;
    flex-wrap: wrap !important;
  }

  .input-group > .form-control,
  .input-group > .form-select {
    min-width: 0 !important;
    flex: 1 1 auto !important;
  }

  /* Login form: stack label above field, fill width, wrap actions */
  body.login-shell,
  body.login-shell.login-shell-branded {
    width: 100% !important;
    max-width: 100vw !important;
    padding-inline: 0 !important;
    box-sizing: border-box !important;
    align-items: stretch !important;
  }

  body.login-shell > .login-branded-layout {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    padding-inline: max(0.65rem, env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px)) !important;
    box-sizing: border-box !important;
  }

  body.login-shell .login-window,
  body.login-shell .login-card,
  body.login-shell .login-form,
  body.login-shell form,
  body.login-shell .login-group {
    width: 100% !important;
    max-width: 100% !important;
    margin-inline: auto !important;
    box-sizing: border-box !important;
  }

  body.login-shell .login-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0.25rem !important;
    width: 100% !important;
    max-width: 100% !important;
    align-items: stretch !important;
  }

  body.login-shell .login-row > label,
  body.login-shell .login-row > .login-input,
  body.login-shell .login-row > select,
  body.login-shell .login-row > input {
    width: 100% !important;
    max-width: 100% !important;
  }

  body.login-shell .login-row-remember {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  body.login-shell .login-actions,
  body.login-shell .login-actions-centered,
  body.login-shell .login-links,
  body.login-shell .login-buttons,
  body.login-shell nav[aria-label="Login options"] {
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.login-shell .login-actions .btn,
  body.login-shell .login-actions .login-btn,
  body.login-shell .login-btn,
  body.login-shell .login-links a,
  body.login-shell nav[aria-label="Login options"] a,
  body.login-shell nav[aria-label="Login options"] .btn {
    flex: 1 1 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: var(--os-mobile-tap) !important;
    justify-content: center;
  }

  /* ===== TABLES ===== */
  .table-responsive,
  .os-page-table-view,
  .qa-mock-grid,
  [class*="-edit-page"] .table-responsive {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Constrained table hosts (grid-scroll internal) keep a real Y scrollbar */
  html[data-os-grid-scroll="internal"] .os-page-table-view,
  html[data-os-scroll-engine="on"] .os-page-table-view.os-grid-container {
    overflow-y: auto !important;
    max-height: var(--os-gc-height, 100%) !important;
  }

  table.table {
    max-width: none; /* allow internal scroll width */
  }

  /* Page itself never scrolls horizontally because of clip above */

  /* ===== GRID (DevExtreme) ===== */
  .os-dx-grid,
  .dx-datagrid,
  .dx-treelist,
  .dx-scrollable,
  .dx-scrollable-wrapper,
  .dx-scrollable-container,
  .dx-datagrid-headers,
  .dx-datagrid-rowsview {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .os-dx-grid,
  .dx-datagrid {
    width: 100% !important;
  }

  /* Grid may scroll X internally; page must not */
  .dx-datagrid .dx-datagrid-rowsview,
  .dx-datagrid .dx-scrollable-container {
    overflow-x: auto !important;
  }

  .dx-datagrid-headers .dx-header-row > td,
  .dx-datagrid-rowsview .dx-data-row > td {
    white-space: nowrap;
  }

  /* ===== DIALOGS / POPUPS ===== */
  .modal-dialog:not(.modal-sm):not(.os-erp-dialog--sm),
  .modal-dialog.modal-lg,
  .modal-dialog.modal-xl,
  .modal-dialog.modal-fullscreen-lg-down {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
    margin: 0.5rem auto !important;
  }

  .modal-content {
    max-width: 100% !important;
    max-height: calc(100dvh - 1rem);
    overflow: auto;
  }

  .dx-overlay-wrapper .dx-overlay-content,
  .dx-popup-wrapper > .dx-overlay-content,
  .dx-dialog-root .dx-overlay-content,
  .dx-toast-wrapper .dx-overlay-content {
    max-width: min(100vw - 0.75rem, 100%) !important;
    max-height: min(90dvh, 100%) !important;
    box-sizing: border-box !important;
  }

  .dx-popup-title,
  .dx-popup-content,
  .dx-toolbar {
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

  .dx-popup-bottom.dx-toolbar .dx-toolbar-items-container,
  .dx-popup-title .dx-toolbar-items-container {
    flex-wrap: wrap !important;
    height: auto !important;
  }

  /* ===== BUTTONS ===== */
  .btn,
  .btn-sm,
  .btn-group > .btn {
    max-width: 100% !important;
    min-height: var(--os-mobile-tap);
    white-space: normal !important;
  }

  .btn-group,
  .btn-toolbar,
  form .mt-3.d-flex,
  form .mt-4.d-flex,
  .d-flex.gap-2:has(> .btn) {
    flex-wrap: wrap !important;
    max-width: 100% !important;
    gap: 0.45rem !important;
  }

  /* ===== DROPDOWNS ===== */
  .dropdown-menu {
    max-width: min(100vw - 1rem, 22rem) !important;
    z-index: var(--os-mobile-z-dropdown) !important;
  }

  .dropdown-menu .dropdown-item {
    min-height: var(--os-mobile-tap);
    display: flex;
    align-items: center;
    white-space: normal;
  }

  .dropend .dropdown-menu,
  .dropstart .dropdown-menu {
    position: static !important;
    float: none !important;
    max-width: 100% !important;
  }

  /* ===== SELECT2 ===== */
  .select2-container {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .select2-container .select2-selection--single,
  .select2-container .select2-selection--multiple {
    min-height: var(--os-mobile-touch) !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: calc(var(--os-mobile-touch) - 2px) !important;
    padding-inline: 0.5rem !important;
  }

  .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
  }

  .select2-dropdown {
    max-width: min(100vw - 1rem, 100%) !important;
    box-sizing: border-box !important;
    z-index: var(--os-mobile-z-dropdown) !important;
  }

  .select2-results__option {
    min-height: var(--os-mobile-tap);
    padding: 0.55rem 0.75rem !important;
  }

  /* ===== TOM SELECT ===== */
  .ts-wrapper,
  .tom-select,
  .ts-control {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .ts-control {
    min-height: var(--os-mobile-touch) !important;
    flex-wrap: wrap !important;
  }

  .ts-dropdown {
    width: 100% !important;
    max-width: 100% !important;
    z-index: var(--os-mobile-z-dropdown) !important;
    box-sizing: border-box !important;
  }

  .ts-dropdown .option {
    min-height: var(--os-mobile-tap);
    padding: 0.55rem 0.75rem;
  }

  /* ===== DATE PICKERS (native + DX) ===== */
  input[type="date"],
  input[type="datetime-local"],
  input[type="time"],
  input[type="month"],
  .dx-datebox,
  .dx-calendar,
  .dx-datebox.dx-texteditor {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .dx-datebox .dx-texteditor-input,
  .dx-datebox .dx-texteditor-container {
    min-height: var(--os-mobile-touch) !important;
    font-size: 16px !important;
  }

  .dx-datebox-wrapper,
  .dx-calendar-navigator,
  .dx-overlay-content .dx-calendar {
    max-width: min(100vw - 0.75rem, 22rem) !important;
  }

  .dx-calendar {
    width: 100% !important;
  }

  /* ===== FILE UPLOAD ===== */
  input[type="file"],
  .form-control[type="file"],
  .custom-file,
  .os-file-upload,
  [class*="file-upload"],
  [class*="file-row"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  .input-group:has(input[type="file"]),
  .qa-file-row,
  [class*="cert-file-row"],
  [class*="file-actions"] {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.45rem !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .input-group:has(input[type="file"]) > *,
  .qa-file-row > *,
  [class*="cert-file-row"] > * {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* ===== IMAGE PREVIEW ===== */
  .os-desktop-images-row,
  .aps-site-images-row {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.65rem !important;
  }

  .os-desktop-image-panel,
  .aps-site-image-panel,
  .aps-site-image-frame,
  .os-desktop-image-placeholder,
  .aps-site-image-placeholder,
  .qa-image-preview,
  [class*="image-preview"],
  [class*="img-preview"] {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: hidden !important;
  }

  img,
  .aps-site-image-preview,
  .qa-image-preview img,
  [class*="image-preview"] img,
  [class*="-edit-page"] img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain;
  }

  /* ===== HUB / CARDS GRID ===== */
  .module-main-layout,
  .prs-main-layout,
  .os-module-hub,
  .module-hub-cards,
  .module-cards-grid {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex-wrap: wrap !important;
  }

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

  /* ===== MARKETING / PUBLIC ===== */
  .mk-page,
  .mk-hero,
  .mk-section,
  .mk-footer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip;
  }

  .mk-page .row > [class*="col-"] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
    width: 100% !important;
  }
}

/* Reinforce when JS marks portrait regardless of media query edge cases.
   Page toolbars may wrap; module filter column must NOT wrap — column+wrap
   places #os-app-page-toolbar-slot beside the filter form and overflow-x:clip
   hides Refresh (Phase 8.6 C1). */
body.os-portrait-layout .os-page-toolbar,
html.os-portrait-root .os-page-toolbar {
  flex-wrap: wrap !important;
  overflow: visible !important;
}

body.os-portrait-layout .os-module-toolbar-inner,
html.os-portrait-root .os-module-toolbar-inner {
  flex-direction: column !important;
  flex-wrap: nowrap !important;
}

body.os-portrait-layout .select2-container,
body.os-portrait-layout .ts-wrapper,
html.os-portrait-root .select2-container,
html.os-portrait-root .ts-wrapper {
  width: 100% !important;
  max-width: 100% !important;
}

body.os-portrait-layout .modal-dialog:not(.modal-sm):not(.os-erp-dialog--sm),
html.os-portrait-root .modal-dialog:not(.modal-sm):not(.os-erp-dialog--sm) {
  max-width: calc(100vw - 1rem) !important;
}