/*
  Stage 105.3E CLEAN — Page Shell / Sidebar Offset Alignment Recovery
  Built cleanly from confirmed Stage 105.3D CLEAN.

  Scope:
  - Main app shell positioning only.
  - Keep normal page content, page headers, tables, and footers from sitting
    underneath the fixed left sidebar on non-Customer-360 pages.
  - Reuses the same safe content offset direction that Customer 360 already follows.

  Safety:
  - No backend, API, route, popup, app.js, customer save, billing, RADIUS,
    product, Asset Register, Job Card, Calendar, Android, worker, or protected
    module logic changes.
  - No button restyling and no menu contrast/alignment changes.
*/

:root{
  --ui1053e-page-gutter: clamp(18px, 1.6vw, 30px);
  --ui1053e-page-bottom: calc(var(--footer-height, 40px) + 34px);
}

/* Desktop/tablet-width app shell: content must start after the fixed sidebar.
   These selectors intentionally outrank older page-group CSS that used
   margin-left:auto on #page/.page and caused pages to slide behind the menu. */
@media (min-width: 760px){
  html body #app-screen > main#page.page,
  html body.ispforge-ui-v2-customer-directory-active #app-screen > main#page.page,
  html body.ispforge-ui-v2-customer-directory-professional-active #app-screen > main#page.page,
  html body.ispforge-ui-v2-billing-reports-active #app-screen > main#page.page,
  html body.ispforge-ui-v2-billing-professional-active #app-screen > main#page.page,
  html body.ispforge-ui-v2-setup-tools-active #app-screen > main#page.page,
  html body.ispforge-ui-v2-setup-tools-professional-active #app-screen > main#page.page,
  html body.ispforge-ui-v2-devices-assets-professional-active #app-screen > main#page.page,
  html body.ispforge-ui-v2-rpp-professional-active #app-screen > main#page.page,
  html body.ispforge-ui-v2-ops-professional-active #app-screen > main#page.page,
  html body.ispforge-ui-v2-reports-professional-active #app-screen > main#page.page{
    margin-left: var(--sidebar-width, 141px) !important;
    margin-right: 0 !important;
    width: calc(100vw - var(--sidebar-width, 141px)) !important;
    max-width: none !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    padding-left: var(--ui1053e-page-gutter) !important;
    padding-right: var(--ui1053e-page-gutter) !important;
    padding-bottom: var(--ui1053e-page-bottom) !important;
    overflow-x: clip;
  }

  html body #app-screen > main#page.page > .page-title-row,
  html body #app-screen > main#page.page > .page-header,
  html body #app-screen > main#page.page > .stage822-page,
  html body #app-screen > main#page.page > .stage833-edit-customer-page,
  html body #app-screen > main#page.page > .s842-wrap,
  html body #app-screen > main#page.page > .shell-grid,
  html body #app-screen > main#page.page > .panel,
  html body #app-screen > main#page.page > .table-wrap,
  html body #app-screen > main#page.page > [class*="page"],
  html body #app-screen > main#page.page > [class*="wrap"]{
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  html body #app-screen > .submenu-bar{
    margin-left: var(--sidebar-width, 141px) !important;
    width: calc(100vw - var(--sidebar-width, 141px)) !important;
    max-width: none !important;
    box-sizing: border-box !important;
  }

  html body #app-screen > .footer{
    left: var(--sidebar-width, 141px) !important;
    width: calc(100vw - var(--sidebar-width, 141px)) !important;
    right: auto !important;
    box-sizing: border-box !important;
  }
}

/* On true narrow/mobile layouts the sidebar becomes horizontal/relative in the
   existing shell CSS, so content must not keep a left desktop offset. */
@media (max-width: 759px){
  html body #app-screen > main#page.page{
    margin-left: 0 !important;
    width: 100% !important;
    max-width: none !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    overflow-x: hidden;
  }

  html body #app-screen > .submenu-bar,
  html body #app-screen > .footer{
    margin-left: 0 !important;
    left: 0 !important;
    width: 100% !important;
  }
}