.scroll-table-page {
    height: calc(100dvh - 96px);
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow: hidden;
}

.scroll-table-host {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

.scroll-table-host-30 {
    height: 30vh;
}

.scroll-table-dialog-50 {
    height: 50dvh;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.scroll-table-dialog-60 {
    height: 60dvh;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

.scroll-table-dialog-70 {
    height: 70dvh;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 0;
    overflow: hidden;
}

/* Tab panel inside a dialog — constrained so tables don't overflow the dialog */
.scroll-table-dialog-tab-panel {
    height: calc(100dvh - 320px);
    min-height: 200px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Applied to a component root MudStack so it flex-fills its parent and propagates height to inner scroll-table-host */
.scroll-table-fill {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* ── MudTable inside scroll-table-host ────────────────────────────────────────
   MudTable renders .mud-table-container (rows, with inline height:100%) followed
   by .mud-table-pagination OUTSIDE the scroll container. Without these rules,
   mud-table grows to full content height, its container's height:100% resolves to
   auto, rows never clip, and scroll-table-host shows a page-level scrollbar.
   These rules make mud-table a flex column that fills the host, mud-table-container
   flex-fills the rows area (rows scroll internally), and pagination pins at the bottom.
   ──────────────────────────────────────────────────────────────────────────── */
.scroll-table-host .mud-table {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.scroll-table-host .mud-table-container {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto !important;
    height: auto !important;
}

.scroll-table-host .mud-table-pagination {
    flex: 0 0 auto;
}

/* ── BlurDialog mobile sizing ─────────────────────────────────────────────────
   BlurDialog renders a .mud-dialog. On small screens the default MudBlazor dialog
   sizing leaves narrow gutters; these rules make dialogs fill the viewport width
   with a small margin and reduce the internal padding so content is usable.
   ──────────────────────────────────────────────────────────────────────────── */
@media (max-width: 600px) {
    .mud-dialog {
        width: calc(100vw - 8px);
        max-width: calc(100vw - 8px);
        margin: 4px;
    }

    .mud-dialog .mud-dialog-content {
        padding-left: 12px;
        padding-right: 12px;
    }

    .mud-dialog .mud-dialog-actions {
        padding-left: 12px;
        padding-right: 12px;
    }
}