/* Reusable "fill the viewport, scroll inside the grid" layout (COG-908).
   Applied via class names only — no per-page CSS. Behavioral, page-agnostic.
   Extracted from Submissions.razor.css so every grid page can share one rule set.
   Loaded after BlazorApp.styles.css in App.razor to preserve the shipped cascade. */

:root {
    --viewport-fill-offset: 110px; /* nav (~97px) + content padding */
}

/* Constrain page to viewport so the page itself never scrolls */
.viewport-fill-page {
    height: calc(100vh - var(--viewport-fill-offset));
    height: calc(100dvh - var(--viewport-fill-offset)); /* survive mobile browser chrome */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Let every flex ancestor shrink below content size (the mechanism that makes overflow work) */
.viewport-fill-page .row,
.viewport-fill-page .col-12,
.viewport-fill-page .modern-dashboard-container,
.viewport-fill-page .modern-card,
.viewport-fill-page .card-body-modern {
    min-height: 0;
}

.viewport-fill-page .modern-card,
.viewport-fill-page .card-body-modern {
    overflow: hidden;
}

/* Grid area fills remaining space and clips; scroll happens inside the grid */
.viewport-fill-page .viewport-fill-grid-area {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.viewport-fill-page .viewport-fill-loading-panel {
    flex: 1 1 auto;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* DxGrid must fill its container; DevExpress ignores flex, so force height */
.viewport-fill-page .viewport-fill-grid {
    height: 100% !important;
    width: 100%;
}

/* Re-enable internal scroll that the global DevExpress.Blazor.grid.css suppresses */
.viewport-fill-page .viewport-fill-grid .dxbl-scroll-viewer {
    overflow-y: auto !important;
}