.mud-dialog-content {
    min-height: 0;
    overflow-y: scroll;
}

div {
    min-height: 0;
}

.mud-dialog-fullscreen .outline-none > .mud-focus-trap-child-container {
    height: 100%;
    display: flex;
    flex-flow: column;
}


.mud-dialog-fullscreen .outline-none {
    height: 100%;
}

/* Typography: families live in AppTheme, since MudBlazor's rules read its variables;
   only what a theme cannot express is here. */

/* Elements MudBlazor does not own: the bare document, and native form controls. */
html, body,
button, input, select, textarea {
    font-family: "IBM Plex Sans Arabic", system-ui, sans-serif;
}

/* Counts in the coverage and batch tables are read down a column, not across a
   line. Proportional digits make 11 narrower than 88 and the column stops
   lining up. */
.mud-table-cell .score,
.mud-table-cell .mud-chip-content,
td[data-label] {
    font-variant-numeric: tabular-nums;
}

/* MudDataGrid pins its toolbar at a fixed height, so a toolbar allowed to wrap lays its second
   line on top of the header row. Let it grow: the alternative is a toolbar whose right-hand end
   is simply invisible whenever the grid is narrow — which it often is. */
.mud-table-toolbar {
    height: auto;
    min-height: 64px;
}

/* DataType.Trimmable: two lines, then an ellipsis, with the whole value in a tooltip.
   Long text must not set a row's height. */
.datatable-trim {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-width: 32rem;
}

/* The voucher card is the only thing here that gets printed. حبر, never the bead:
   kahraman is 1.99:1 on white before CMYK gets hold of it. */
.voucher__title {
    color: #23302C;
    line-height: 2;
    text-align: center;
}

/* Boot splash in index.html, shown until Blazor renders into #app. */
.boot-splash {
    position: fixed;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    background: #1E1733;
}

.boot-progress {
    inline-size: 160px;
    block-size: 3px;
    border-radius: 3px;
    background: rgba(245, 192, 78, 0.2);
    overflow: hidden;
}

.boot-progress span {
    display: block;
    block-size: 100%;
    inline-size: var(--blazor-load-percentage, 0%);
    background: #F5C04E;
    transition: inline-size 0.2s ease-out;
}