/**
 * GCE SCROLL CONTRACT — load LAST (after viewport-shell + responsive-ui).
 *
 * One vertical scroller per page: [data-gce-scroll] (or the page-root / dash-ai-main below).
 * Nested page shells must grow with content (height:auto, overflow:visible).
 * Nested table wraps: overflow-x only — never flex:1 + overflow:auto fillers.
 */

/* ── Zoom height fill (fixes blank band under Dashboard / all pages) ── */
body.gce-viewport-shell .app {
  height: calc(100dvh / var(--gce-ui-scale, 1)) !important;
  max-height: calc(100dvh / var(--gce-ui-scale, 1)) !important;
  min-height: 0 !important;
}

body.gce-viewport-shell .sidebar,
body.gce-viewport-shell .sidebar.sidebar--field {
  height: 100% !important;
  max-height: 100% !important;
}

body.gce-viewport-shell #gce-main,
body.gce-viewport-shell main {
  height: 100% !important;
  max-height: 100% !important;
}

/* ── Canonical [data-gce-scroll] host ── */
body.gce-viewport-shell [data-gce-scroll] {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Nested table/list wraps: horizontal only */
body.gce-viewport-shell [data-gce-scroll] .stm-table-wrap,
body.gce-viewport-shell [data-gce-scroll] .fin-table-wrap,
body.gce-viewport-shell [data-gce-scroll] .tsk-table-wrap,
body.gce-viewport-shell [data-gce-scroll] .sfd-table-wrap,
body.gce-viewport-shell [data-gce-scroll] .cert-table-wrap,
body.gce-viewport-shell [data-gce-scroll] .dashboard-table-wrap {
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD — .dash-ai-main scrolls; .dash-page must NOT clip
   (height:100% + overflow:hidden on .dash-page was the bug)
   ═══════════════════════════════════════════════════════════ */
body.gce-viewport-shell .dash-ai-main,
body.gce-viewport-shell [data-gce-scroll].dash-ai-main {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.gce-viewport-shell .dash-ai-main .dash-page,
body.gce-viewport-shell .dash-ai-main .dash-page--field,
body.gce-viewport-shell .dash-ai-main .tenant-onboard {
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

/* ═══════════════════════════════════════════════════════════
   ALL LIST / MODULE PAGES — page-root is the vertical scroller
   Critic: do NOT set height:auto / max-height:none on the scroll
   host — that lets it grow with content and the parent clips
   with overflow:hidden (no scrollbar). Flex + min-height:0 only.
   ═══════════════════════════════════════════════════════════ */
body.gce-viewport-shell .main-page:not(.hidden) > #sites-page-root,
body.gce-viewport-shell .main-page:not(.hidden) > #crews-page-root,
body.gce-viewport-shell .main-page:not(.hidden) > #tasks-page-root,
body.gce-viewport-shell .main-page:not(.hidden) > #equipment-page-root,
body.gce-viewport-shell .main-page:not(.hidden) > #storage-page-root,
body.gce-viewport-shell .main-page:not(.hidden) > #settings-page-root,
body.gce-viewport-shell .main-page:not(.hidden) > #safety-page-root {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  /* flex-basis 0 = take remaining main height so overflow-y can scroll */
  flex: 1 1 0% !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Finance (legacy .fin-page shell): page-root scrolls */
body.gce-viewport-shell .main-page:not(.hidden) > #finance-page-root:not(.fin-mockup-page) {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  flex: 1 1 0% !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Inner shells grow with content — page-root scrolls over them */
body.gce-viewport-shell .main-page:not(.hidden) > #sites-page-root > .stm-page,
body.gce-viewport-shell .main-page:not(.hidden) > #crews-page-root > .crw-page,
body.gce-viewport-shell .main-page:not(.hidden) > #crews-page-root > .crw-hub-v2,
body.gce-viewport-shell .main-page:not(.hidden) > #tasks-page-root > .tsk-page,
body.gce-viewport-shell .main-page:not(.hidden) > #finance-page-root > .fin-page,
body.gce-viewport-shell .main-page:not(.hidden) > #finance-page-root > .fin-mockup-page,
body.gce-viewport-shell .main-page:not(.hidden) > #equipment-page-root > .eq-page,
body.gce-viewport-shell .main-page:not(.hidden) > #storage-page-root > .sto-page,
body.gce-viewport-shell .main-page:not(.hidden) > #settings-page-root > .stg-page,
body.gce-viewport-shell .main-page:not(.hidden) > #safety-page-root > .sfty-page,
body.gce-viewport-shell .main-page:not(.hidden) > #safety-page-root > .cert-dash,
body.gce-viewport-shell .main-page:not(.hidden) > #safety-page-root > .sfty-review-page,
body.gce-viewport-shell .main-page:not(.hidden) > #safety-page-root > .sfty-checkin-review {
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
}

/* Sites — nested panels grow with rows; no nested vertical scroller.
 * Tall overflow:auto + flex:1 fillers on .stm-table-wrap eat wheel events.
 */
body.gce-viewport-shell.gce-sites-mockup .stm-list-panel,
body.gce-viewport-shell.gce-sites-mockup .stm-list-panel[data-gce-scroll] {
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

body.gce-viewport-shell.gce-sites-mockup .stm-body.stm-body--full,
body.gce-viewport-shell.gce-sites-mockup .stm-main.stm-main--full {
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

body.gce-viewport-shell.gce-sites-mockup #stm-sites-list-view.stm-table-card-full {
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
}

body.gce-viewport-shell.gce-sites-mockup .stm-table-wrap {
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  width: 100% !important;
}

/* Finance mockup — sticky header/tabs; .fin-mock-content is the scroller.
 * Do NOT set height:auto on #finance-page-root or overflow-y:visible on
 * .fin-mock-content (that was killing scroll).
 */
body.gce-viewport-shell .main-page:not(.hidden) > #finance-page-root.fin-mockup-page {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  min-height: 0 !important;
  flex: 1 1 0% !important;
}

body.gce-viewport-shell #finance-page-root.fin-mockup-page > .fin-mockup-shell {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow: hidden !important;
}

body.gce-viewport-shell #finance-page-root.fin-mockup-page .fin-mock-header,
body.gce-viewport-shell #finance-page-root.fin-mockup-page .fin-mock-tabs {
  flex: 0 0 auto !important;
}

body.gce-viewport-shell #finance-page-root.fin-mockup-page .fin-mock-content {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.gce-viewport-shell #finance-page-root.fin-mockup-page .fin-tab-panel:not(.hidden) {
  overflow: visible !important;
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
}

body.gce-viewport-shell #finance-page-root.fin-mockup-page .fin-table-wrap {
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
}

/* Crews — page-root scrolls; kill nested flex scroll fillers */
body.gce-viewport-shell #crews-page-root .crw-page-layout,
body.gce-viewport-shell #crews-page-root .crw-hub-layout,
body.gce-viewport-shell #crews-page-root .crw-hub-v2 {
  overflow: visible !important;
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
}

body.gce-viewport-shell #crews-page-root .crw-table-wrap,
body.gce-viewport-shell #crews-page-root .crw-hub-list-scroll,
body.gce-viewport-shell #crews-page-root .crw-hub-detail-body {
  overflow-x: auto !important;
  overflow-y: visible !important;
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
}

/* Tasks / Fleet — same pattern */
body.gce-viewport-shell #tasks-page-root .tsk-body,
body.gce-viewport-shell #tasks-page-root .tsk-table-wrap,
body.gce-viewport-shell #equipment-page-root .eq-fleet-page,
body.gce-viewport-shell #equipment-page-root .eq-table-wrap {
  overflow-x: auto !important;
  overflow-y: visible !important;
  flex: 0 0 auto !important;
  min-height: auto !important;
  height: auto !important;
  max-height: none !important;
}

/* Settings mockup already scrolled on .stg-page — prefer page-root */
body.gce-viewport-shell .main-page:not(.hidden) > #settings-page-root .stg-page--mockup {
  overflow: visible !important;
  height: auto !important;
  max-height: none !important;
  flex: 0 0 auto !important;
}

/* Safety review / check-in: page-root scrolls; avoid double clip */
body.gce-viewport-shell .main-page:not(.hidden) > #safety-page-root .sfty-review-page,
body.gce-viewport-shell .main-page:not(.hidden) > #safety-page-root .sfty-page--simple,
body.gce-viewport-shell .main-page:not(.hidden) > #safety-page-root .eq-fleet-page {
  overflow: visible !important;
  height: auto !important;
}

/* Certificates studio — page-root is the scroller (sidebar already scrolls).
   Do not lock .cert-dash to 100% + overflow:hidden or wheel never reaches the page. */
body.gce-viewport-shell.gce-certs-mockup .main-page:not(.hidden) > #safety-page-root {
  overflow-x: hidden !important;
  overflow-y: auto !important;
  min-height: 0 !important;
  flex: 1 1 0% !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.gce-viewport-shell.gce-certs-mockup .main-page:not(.hidden) > #safety-page-root > .cert-dash,
body.gce-viewport-shell.gce-certs-mockup .main-page:not(.hidden) > #safety-page-root > .cert-dash.cert-dash--studio,
body.gce-viewport-shell.gce-certs-mockup .main-page:not(.hidden) > #safety-page-root > .cert-dash.cert-dash--onepage {
  height: auto !important;
  max-height: none !important;
  min-height: auto !important;
  flex: 0 0 auto !important;
  overflow: visible !important;
}

body.gce-viewport-shell.gce-certs-mockup .cert-dash--studio .cert-dash-body {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.gce-viewport-shell.gce-certs-mockup .cert-dash--studio .cert-dash-workflow {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 280px !important;
  max-height: min(52vh, 560px) !important;
  overflow: hidden !important;
}

body.gce-viewport-shell.gce-certs-mockup .cert-dash--studio #cert-dash-preview-host,
body.gce-viewport-shell.gce-certs-mockup .cert-dash--studio .cert-dash-preview-panel {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
}

body.gce-viewport-shell.gce-certs-mockup main,
body.gce-viewport-shell.gce-certs-mockup #gce-main {
  overflow: hidden !important;
}

/* Calendar keeps internal board scroll (week/day panes) — do not force page-root grow */
body.gce-viewport-shell.gce-calendar-mockup #calendar-page-root,
body.gce-viewport-shell.gce-calendar-mockup .cal-page {
  /* leave viewport-shell calendar rules; ensure at least one axis scrolls */
  min-height: 0;
}

/* Site / Crew detail — content hosts already scroll in viewport-shell */
body.gce-viewport-shell #site-detail-content,
body.gce-viewport-shell #crew-detail-content {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

/* Modal open — keep background locked (JS clears stuck class) */
body.sfo-modal-open [data-gce-scroll],
body.sfo-modal-open .dash-ai-main,
body.sfo-modal-open .main-page:not(.hidden) > [id$="-page-root"] {
  overflow: hidden !important;
}