/* MudBlazor opens every dialog with `animation: mud-open-dialog-center .1s ... both`, whose last
   keyframe is `transform: scale(1)`. Fill-mode `both` keeps that transform on .mud-dialog for
   the life of the dialog, and a transformed element is the containing block for every
   position:fixed descendant - so a fixed pop-up or full-screen overlay rendered INSIDE a dialog
   (VisitorPhoto's hover preview and click-to-zoom in the banned entry dialog, 2026-09-01) is
   positioned against the dialog and clipped by its overflow-y:auto instead of covering the
   viewport. Ending the animation without a retained fill restores the natural state, which is
   visually identical to the last keyframe and carries no transform.

   Why a plain stylesheet: the dialogs are rendered by MudDialogProvider, a top-level sibling in
   AdminShell (and two pages), so no component's scoped CSS has them as descendants. */
.mud-dialog {
    animation-fill-mode: none;
}

/* Kiosk dialog bodies. MudDialog.ContentStyle is obsolete in MudBlazor 9, and its replacement
   ContentClass needs a real class - which cannot be scoped CSS, for the same reason as above:
   MudDialogProvider renders the dialog outside the declaring component's subtree. */
.kiosk-dialog-content {
    display: flex;
    flex-direction: column;
}

/* The language list scrolls; the destination picker manages its own inner scroller instead. */
.kiosk-dialog-content-scroll {
    gap: 20px;
    padding: 20px 24px;
    overflow-y: auto;
}

.kiosk-dialog-content-tight {
    gap: 10px;
    padding: 12px 16px;
    overflow: hidden;
}

/* Add-to-queue dialog (QueueManualAddDialog). The body is a flex column as tall as the screen
   allows (FacilityPickerDialog's calc). MudBlazor gives every input control flex: 1 1 auto,
   which let the Line dropdown grow and push the tabs to the bottom of a fixed-height body, so
   every child keeps its natural height except the tabs, which take the rest. MudTabs renders
   the active panel as display:contents, so a qadd-fill child of a panel is a flex item of
   .mud-tabs-panels and takes the rest of the tab; the results grid is one more flex column
   inside that, so its rows area grows and the pager stays put. */
.qadd-body {
    display: flex;
    flex-direction: column;
    gap: 12px;
    height: calc(100vh - 280px);
    min-height: 24rem;
}

.qadd-body > :not(.mud-tabs) {
    flex: 0 0 auto;
}

.qadd-body > .mud-tabs {
    flex: 1 1 0;
    min-height: 0;
}

.qadd-body .mud-tabs-panels {
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.qadd-fill {
    flex: 1 1 0;
    min-height: 0;
}

.qadd-fill.mud-table {
    display: flex;
    flex-direction: column;
}

.qadd-fill .mud-table-container {
    flex: 1 1 0;
    min-height: 0;
}

/* The picked visitor: the next click enqueues them, so the row has to be unmistakable, and the
   table's own hover paint (a six-class selector) must not wash it out. */
.mud-table-row.qadd-visitor-selected {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.14) !important;
}