/* GCE Viewport Shell — app fits one screen; scroll only inside panels */

body.gce-viewport-shell {
  height: 100dvh;
  max-height: 100dvh;
  overflow: hidden;
}

body.gce-viewport-shell .app {
  /* Layout height compensates for CSS zoom so the shell fills the viewport */
  height: calc(100dvh / var(--gce-ui-scale, 1)) !important;
  max-height: calc(100dvh / var(--gce-ui-scale, 1)) !important;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: var(--gce-sidebar-w, 285px) minmax(0, 1fr);
}

body.gce-viewport-shell .sidebar {
  height: 100%;
  max-height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  position: sticky;
  top: 0;
}

body.gce-viewport-shell #gce-main,
body.gce-viewport-shell main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
  padding: clamp(4px, 0.7vw, 10px) clamp(4px, 0.9vw, 12px) clamp(4px, 0.6vw, 8px);
  box-sizing: border-box;
}

body.gce-viewport-shell .main-page:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
}

body.gce-viewport-shell .main-page:not(.hidden) > [id$="-page-root"],
body.gce-viewport-shell .main-page:not(.hidden) > #dashboard-content,
body.gce-viewport-shell #dashboard-main:not(.hidden) {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  width: 100%;
}

/* Sites / list pages: page-root scrolls (content shells grow below) */
body.gce-viewport-shell.gce-sites-mockup .main-page:not(.hidden) > #sites-page-root {
  overflow-x: hidden;
  overflow-y: auto;
  min-height: 0;
  flex: 1 1 0%;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.gce-viewport-shell.gce-sites-mockup .main-page:not(.hidden) > #sites-page-root > .stm-page {
  flex: 0 0 auto;
  height: auto;
  min-height: auto;
  max-height: none;
  overflow: visible;
}

/* Page shells — fill viewport, compact gaps on small screens */
body.gce-viewport-shell .dash-page,
body.gce-viewport-shell .stm-page,
body.gce-viewport-shell .fin-page,
body.gce-viewport-shell .crw-page,
body.gce-viewport-shell .crw-hub-v2,
body.gce-viewport-shell .tsk-page,
body.gce-viewport-shell .cal-page,
body.gce-viewport-shell .eq-page,
body.gce-viewport-shell .stg-page,
body.gce-viewport-shell .sfty-page,
body.gce-viewport-shell .cert-dash {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  gap: clamp(6px, 0.9vh, 10px);
}

body.gce-viewport-shell #dashboard-main {
  min-height: 0 !important;
  padding: 0 !important;
}

body.gce-viewport-shell #sites-main,
body.gce-viewport-shell #finance-main,
body.gce-viewport-shell #crews-main,
body.gce-viewport-shell #tasks-main,
body.gce-viewport-shell #equipment-main,
body.gce-viewport-shell #settings-main,
body.gce-viewport-shell #safety-main {
  min-height: 0 !important;
  padding: 0 !important;
}

body.gce-viewport-shell .fin-page {
  min-height: 0 !important;
}

body.gce-viewport-shell .dash-ai-layout {
  flex: 1 1 auto;
  min-height: 0 !important;
  height: 100%;
  overflow: hidden;
}

body.gce-viewport-shell .dash-ai-main {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sites — table scrolls inside card */
body.gce-viewport-shell .stm-list-panel {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* Tab panels: .hidden must beat display:flex above (Add Site / Upload CDS). */
body.gce-viewport-shell .stm-list-panel.hidden,
body.gce-viewport-shell .stm-upload-panel.hidden,
body.gce-viewport-shell .stm-add-panel.hidden,
body.gce-viewport-shell.gce-sites-mockup .stm-list-panel.hidden,
body.gce-viewport-shell.gce-sites-mockup .stm-upload-panel.hidden,
body.gce-viewport-shell.gce-sites-mockup .stm-add-panel.hidden {
  display: none !important;
  flex: 0 0 0 !important;
  min-height: 0 !important;
  max-height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

/* Sites mockup: page-root scrolls; list panel grows with content */
body.gce-viewport-shell.gce-sites-mockup .stm-list-panel {
  overflow: visible;
  flex: 0 0 auto;
  min-height: auto;
}

body.gce-viewport-shell .stm-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
  gap: clamp(8px, 1vw, 14px);
  align-items: stretch;
}

body.gce-viewport-shell.gce-sites-mockup .stm-body.stm-body--full {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

/* Full-width sites list (no vendor aside) — do not reserve a side column */
body.gce-viewport-shell .stm-body.stm-body--full {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

body.gce-viewport-shell .stm-main {
  min-height: 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.gce-viewport-shell.gce-sites-mockup .stm-main.stm-main--full {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

body.gce-viewport-shell .stm-main.stm-main--full {
  width: 100%;
  max-width: 100%;
}

body.gce-viewport-shell .stm-table-card,
body.gce-viewport-shell .stm-table-card-full {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.gce-viewport-shell.gce-sites-mockup #stm-sites-list-view.stm-table-card-full {
  flex: 0 0 auto;
  min-height: auto;
  overflow: visible;
}

body.gce-viewport-shell #stm-sites-list-view.stm-table-card-full {
  overflow: hidden !important;
}

body.gce-viewport-shell.gce-sites-mockup #stm-sites-list-view.stm-table-card-full {
  overflow: visible !important;
}

body.gce-viewport-shell .stm-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
}

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

body.gce-viewport-shell .stm-aside-col {
  min-height: 0;
  overflow: auto;
}

/* Finance — tab panels scroll internally */
body.gce-viewport-shell .fin-tabs {
  flex-shrink: 0;
}

body.gce-viewport-shell .fin-tab-panel:not(.hidden) {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
}

body.gce-viewport-shell .fin-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

body.gce-viewport-shell .fin-card--labor-sites {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.gce-viewport-shell .fin-card--labor-sites .fin-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

/* Finance mockup — scroll the content pane under sticky header/tabs */
body.gce-viewport-shell #finance-page-root.fin-mockup-page {
  display: flex !important;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0 !important;
  height: auto;
  overflow: hidden !important;
  padding: clamp(8px, 1vw, 14px) !important;
  box-sizing: border-box;
}

body.gce-viewport-shell .fin-mockup-shell {
  display: flex;
  flex-direction: column;
  flex: 1 1 0%;
  min-height: 0;
  height: auto;
  overflow: hidden;
  gap: clamp(8px, 1.2vh, 14px);
}

body.gce-viewport-shell .fin-mock-header,
body.gce-viewport-shell .fin-mock-tabs {
  flex-shrink: 0;
}

body.gce-viewport-shell .fin-mock-content {
  flex: 1 1 0%;
  min-height: 0;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.gce-viewport-shell .fin-mock-table thead th,
body.gce-viewport-shell .fin-ov-table thead th {
  position: sticky;
  top: 0;
  z-index: 12;
  background: #fff !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 1px 0 #d8e0ea;
}

/* Crews list layout */
body.gce-viewport-shell .crw-page-layout {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

body.gce-viewport-shell .crw-table-wrap,
body.gce-viewport-shell .crw-hub-list-scroll,
body.gce-viewport-shell .crw-hub-detail-body {
  min-height: 0;
  overflow: auto;
}

body.gce-viewport-shell .crw-hub-layout {
  flex: 1 1 auto;
  min-height: 0;
}

/* Dashboard grids shrink on short viewports */
@media (max-height: 820px) {
  body.gce-viewport-shell .dash-kpi-grid,
  body.gce-viewport-shell .dash-kpi-grid--5 {
    gap: clamp(6px, 0.8vh, 10px);
  }

  body.gce-viewport-shell .dash-kpi-card {
    min-height: 0;
    padding: clamp(10px, 1.2vh, 14px);
  }

  body.gce-viewport-shell .stm-page-head h2,
  body.gce-viewport-shell .fin-page-head h2,
  body.gce-viewport-shell .crw-page-head h2 {
    font-size: clamp(20px, 2.8vh, 26px);
  }

  body.gce-viewport-shell .topbar {
    margin-bottom: clamp(8px, 1vh, 16px);
  }
}

@media (max-width: 1200px) {
  body.gce-viewport-shell .app {
    grid-template-columns: 1fr;
  }

  body.gce-viewport-shell #gce-main,
  body.gce-viewport-shell main {
    padding-top: clamp(52px, 8vh, 64px);
  }

  body.gce-viewport-shell .stm-body {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  body.gce-viewport-shell #gce-main,
  body.gce-viewport-shell main {
    padding: clamp(52px, 8vh, 58px) clamp(8px, 2vw, 12px) clamp(8px, 1vh, 10px);
  }
}

/* ═══════════════════════════════════════════════════════════════
   FAZA 2 — Site detail, Crew detail, Safety, Tasks, Equipment, Settings
   ═══════════════════════════════════════════════════════════════ */

body.gce-viewport-shell #site-detail,
body.gce-viewport-shell #crew-detail,
body.gce-viewport-shell #platform-main,
body.gce-viewport-shell #platform-ops-main {
  min-height: 0 !important;
  padding: 0 !important;
}

body.gce-viewport-shell #site-detail-content,
body.gce-viewport-shell.gce-site-detail-mockup #site-detail-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  width: 100%;
  padding-bottom: 96px;
  scroll-padding-bottom: 72px;
}

body.gce-viewport-shell #crew-detail-content {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  width: 100%;
  padding-bottom: 64px;
  scroll-padding-bottom: 48px;
}

body.gce-viewport-shell.gce-site-detail-mockup #site-detail:not(.hidden) {
  overflow: hidden;
}

body.gce-viewport-shell #site-detail-main .sdt-doc-workspace,
body.gce-viewport-shell #site-detail-main .sdt-doc-workspace[data-sdt-workspace-tab="notes"],
body.gce-viewport-shell #site-detail-main .sdt-dw-notes-panel,
body.gce-viewport-shell #site-detail-main .sdt-notes-card {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}

body.gce-viewport-shell #site-detail-main .sdt-doc-workspace,
body.gce-viewport-shell #site-detail-main .sdt-bottom-grid {
  margin-bottom: 28px;
}

body.gce-viewport-shell #site-detail-main .sdt-dw-notes-panel {
  padding-bottom: 48px !important;
}

body.gce-viewport-shell #site-detail-main .sdt-sn-feed {
  padding-bottom: 32px !important;
}

body.gce-viewport-shell .sfty-review-page,
body.gce-viewport-shell .sfty-page--simple,
body.gce-viewport-shell .eq-fleet-page {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  gap: clamp(8px, 1.2vh, 14px);
}

/* ── Site detail — page scrolls; do not clip workflow under docs tabs ── */
body.gce-viewport-shell #site-detail-main.sdt-page--mockup,
body.gce-viewport-shell #site-detail-main.sdt-page--fit {
  flex: 0 0 auto;
  min-height: min-content;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  gap: clamp(8px, 1vh, 14px);
}

body.gce-viewport-shell #site-detail-main .sdt-hero-shell,
body.gce-viewport-shell #site-detail-main .sdt-page-header {
  flex-shrink: 0;
}

body.gce-viewport-shell #site-detail-main .sdt-body {
  flex: 0 0 auto;
  min-height: 0;
  height: auto !important;
  overflow: visible !important;
  align-items: start;
  gap: clamp(10px, 1.2vw, 16px);
}

body.gce-viewport-shell #site-detail-main .sdt-main {
  flex: 0 0 auto;
  min-height: 0;
  height: auto !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  grid-template-rows: none !important;
  gap: clamp(8px, 0.8vh, 12px);
}

body.gce-viewport-shell #site-detail-main.sdt-page--fit .sdt-main {
  overflow: visible !important;
}

body.gce-viewport-shell #site-detail-main .sdt-aside {
  max-height: none !important;
  min-height: 0;
  overflow: visible !important;
  position: sticky;
  top: 0;
  align-self: start;
}

body.gce-viewport-shell #site-detail-main .sdt-workflow-wrap {
  flex: 0 0 auto;
  min-height: 0;
  max-height: none !important;
  overflow: visible !important;
}

body.gce-viewport-shell #site-detail-main .sdt-kpi-strip {
  flex-shrink: 0;
}

body.gce-viewport-shell #site-detail-main .sdt-bottom-grid {
  flex-shrink: 0;
  max-height: none !important;
  overflow: visible !important;
}

/* ── Crew detail ── */
body.gce-viewport-shell #crew-detail-main.crd-page--mockup,
body.gce-viewport-shell .crd-page {
  flex: 0 0 auto;
  min-height: min-content;
  height: auto !important;
  overflow: visible !important;
}

body.gce-viewport-shell #crew-detail-main .crd-head,
body.gce-viewport-shell #crew-detail-main .crd-kpi-grid {
  flex-shrink: 0;
}

body.gce-viewport-shell #crew-detail-main .crd-body-grid {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible !important;
  align-items: start;
  gap: clamp(10px, 1.2vw, 16px);
}

body.gce-viewport-shell #crew-detail-main .crd-col-main,
body.gce-viewport-shell #crew-detail-main .crd-col-aside {
  min-height: 0;
  overflow: visible !important;
}

/* ── Tasks ── */
body.gce-viewport-shell .tsk-page-head,
body.gce-viewport-shell .tsk-kpi-grid {
  flex-shrink: 0;
}

body.gce-viewport-shell .tsk-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

body.gce-viewport-shell .tsk-main-col {
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.gce-viewport-shell .tsk-table-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.gce-viewport-shell .tsk-table-wrap {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

body.gce-viewport-shell .tsk-aside {
  max-height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Equipment / Fleet ── */
body.gce-viewport-shell .eq-page-head,
body.gce-viewport-shell .eq-kpi-grid {
  flex-shrink: 0;
}

body.gce-viewport-shell .eq-body-grid,
body.gce-viewport-shell .eq-fleet-split {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

body.gce-viewport-shell .eq-fleet-page .eq-list-panel,
body.gce-viewport-shell .eq-fleet-page .eq-detail-panel {
  min-height: 0 !important;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

body.gce-viewport-shell .eq-vehicle-list,
body.gce-viewport-shell .eq-detail-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

body.gce-viewport-shell .eq-fleet-page .eq-detail-empty {
  min-height: 0 !important;
  flex: 1 1 auto;
}

/* ── Safety — Check-ins list ── */
body.gce-viewport-shell .sfty-page-head,
body.gce-viewport-shell .sfty-filters,
body.gce-viewport-shell .sfty-kpi-grid {
  flex-shrink: 0;
}

body.gce-viewport-shell .sfty-body-grid {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  align-items: stretch;
}

body.gce-viewport-shell .sfty-col,
body.gce-viewport-shell .sfty-col-full {
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.gce-viewport-shell .sfty-col > .sfty-card,
body.gce-viewport-shell .sfty-col-full > .sfty-card {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

body.gce-viewport-shell .sfty-site-list {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none !important;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Safety — Check-in review ──
   Page scrolls as one unit (like Site Detail). The old “fit one screen”
   layout used overflow:hidden on the 3-col body and clipped forms/activity
   on short or narrow laptops with no way to scroll. */
body.gce-viewport-shell .sfty-review-page,
body.gce-viewport-shell .sfty-review-page--mockup {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

body.gce-viewport-shell .sfty-review-page .sfty-page-head,
body.gce-viewport-shell .sfty-review-summary {
  flex-shrink: 0;
}

body.gce-viewport-shell .sfty-review-body,
body.gce-viewport-shell .sfty-review-body--mockup {
  flex: 0 0 auto;
  min-height: min-content;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  align-items: start;
}

body.gce-viewport-shell .sfty-review-sidebar,
body.gce-viewport-shell .sfty-review-center,
body.gce-viewport-shell .sfty-review-activity-rail {
  min-height: 0;
  max-height: none !important;
  overflow: visible !important;
}

body.gce-viewport-shell .sfty-review-center {
  display: flex;
  flex-direction: column;
  gap: clamp(10px, 1.2vh, 14px);
}

body.gce-viewport-shell .sfty-review-main {
  flex: 0 0 auto;
  min-height: 0;
  height: auto !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
}

body.gce-viewport-shell .sfty-review-tabs {
  flex-shrink: 0;
}

body.gce-viewport-shell .sfty-review-tab-panel:not(.hidden) {
  flex: 0 0 auto;
  min-height: 0;
  height: auto !important;
  overflow: visible !important;
  display: flex;
  flex-direction: column;
}

body.gce-viewport-shell .sfty-review-photo-grid,
body.gce-viewport-shell .sfty-review-map-wrap {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

body.gce-viewport-shell .sfty-review-activity-card {
  position: sticky;
  top: 8px;
  min-height: 0 !important;
  max-height: none;
}

/* ── Safety — Certificates (page scrolls; columns keep inner scroll) ── */
body.gce-viewport-shell.gce-certs-mockup main,
body.gce-viewport-shell.gce-certs-mockup #gce-main {
  overflow: hidden !important;
  padding: clamp(8px, 1.1vw, 14px) clamp(10px, 1.4vw, 18px) clamp(8px, 1vw, 10px) !important;
}

body.gce-viewport-shell .cert-dash--onepage {
  height: auto;
}

body.gce-viewport-shell .cert-dash-body {
  flex: 0 0 auto;
  min-height: 0;
  overflow: visible;
}

body.gce-viewport-shell.gce-certs-mockup .main-page:not(.hidden),
body.gce-viewport-shell.gce-certs-mockup .main-page:not(.hidden) > [id$="-page-root"] {
  height: auto !important;
  min-height: 0;
  overflow: hidden !important;
  flex: 1 1 0%;
}

body.gce-viewport-shell.gce-certs-mockup .main-page:not(.hidden) > #safety-page-root {
  overflow-x: hidden !important;
  overflow-y: auto !important;
}

body.gce-viewport-shell.gce-certs-mockup .cert-dash--onepage.cert-dash--studio,
body.gce-viewport-shell.gce-certs-mockup .cert-dash--studio {
  height: auto !important;
  min-height: 0;
  max-height: none !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;
  display: flex;
  flex-direction: column;
  overflow: visible !important;
}

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

/* Certificate preview sits below workflow; page-root scrolls to it */
body.gce-viewport-shell.gce-certs-mockup .cert-dash--studio #cert-dash-preview-host {
  flex: 0 0 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
}

body.gce-viewport-shell.gce-certs-mockup .cert-dash--studio .cert-dash-preview-panel,
body.gce-viewport-shell.gce-certs-mockup .cert-dash--studio .cert-dash-preview-panel.cert-dash-studio-panel,
body.gce-viewport-shell.gce-certs-mockup .cert-dash--studio .cert-dash-studio-panel--grid-only {
  flex: 0 0 auto !important;
  width: 100%;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

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

body.gce-viewport-shell.gce-certs-mockup .cert-dash--studio .cert-dash-cert-grid-wrap--scroll {
  height: auto;
  overflow-x: auto;
  overflow-y: visible;
}

body.gce-viewport-shell .cert-dash-list-panel {
  min-height: 0;
  overflow: hidden;
}

body.gce-viewport-shell .cert-dash-table-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}

body.gce-viewport-shell .cert-dash-detail {
  max-height: 100%;
  position: static;
  overflow: auto;
}

/* ── Settings ── */
body.gce-viewport-shell .stg-page--mockup {
  flex: 1 1 auto;
  min-height: 0;
  max-width: none;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  gap: clamp(12px, 1.5vh, 20px);
}

body.gce-viewport-shell .stg-mock-header {
  flex-shrink: 0;
}

body.gce-viewport-shell .stg-mock-footer {
  flex-shrink: 0;
}

/* ── Calendar (reinforce) ── */
body.gce-viewport-shell.gce-calendar-mockup .cal-page,
body.gce-viewport-shell.gce-calendar-mockup #calendar-page-root {
  height: 100%;
  min-height: 0;
}

/* Short viewport — tighter detail heroes */
@media (max-height: 820px) {
  body.gce-viewport-shell #site-detail-main .sdt-hero-card:not(.sdt-hero-card--mockup) {
    padding: clamp(12px, 1.5vh, 18px) clamp(14px, 2vw, 22px);
    gap: clamp(12px, 1.5vh, 20px);
  }

  body.gce-viewport-shell #site-detail-main .sdt-site-title,
  body.gce-viewport-shell #crew-detail-main .crd-title-row h1,
  body.gce-viewport-shell .sfty-page-head h2,
  body.gce-viewport-shell .eq-page-head h2,
  body.gce-viewport-shell .tsk-page-head h2 {
    font-size: clamp(18px, 2.6vh, 24px);
  }

  /* Do not clip Site Detail workflow on short screens — page scrolls instead */
  body.gce-viewport-shell #site-detail-main .sdt-workflow-wrap {
    max-height: none !important;
  }
}

@media (max-width: 1100px) {
  body.gce-viewport-shell #site-detail-main .sdt-body,
  body.gce-viewport-shell #crew-detail-main .crd-body-grid,
  body.gce-viewport-shell .sfty-review-body,
  body.gce-viewport-shell .sfty-body-grid,
  body.gce-viewport-shell .eq-body-grid,
  body.gce-viewport-shell .eq-fleet-split {
    grid-template-columns: 1fr;
  }

  body.gce-viewport-shell #site-detail-main .sdt-aside {
    position: static;
    max-height: none !important;
  }

  body.gce-viewport-shell #crew-detail-main .crd-col-aside,
  body.gce-viewport-shell .tsk-aside {
    max-height: none !important;
  }
}