/* ============================================================
 * Global app chrome (canvas, appbar, drawer, content pane,
 * scrollbars). Lives in a global stylesheet (linked from App.razor)
 * so the rules reach MudBlazor components directly — no need for
 * CSS isolation `::deep`.
 *
 * Colours bind to `--mud-palette-*` CSS variables emitted by
 * MudThemeProvider, so palette/theme changes propagate without
 * editing this file.
 *
 * Desktop: roomy padding + visible card separation.
 * Mobile (<960px): flush edges, no wasted side padding.
 * ============================================================ */

/* Canvas: page background behind the surface cards. */
.mud-layout {
    background-color: var(--mud-palette-background);
}

/* App bar: bottom border + soft shadow to anchor it visually. */
.mud-appbar {
    border-bottom: 1px solid var(--mud-palette-divider);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Drawer / sidebar: distinct shade + right border. */
.mud-drawer {
    background-color: var(--mud-palette-drawer-background);
    border-right: 1px solid var(--mud-palette-divider);
}

/* Main content pane: roomy on desktop, flush on mobile. */
.mud-main-content {
    padding: 20px 24px 0 24px;
    background-color: var(--mud-palette-background);
}

@media (max-width: 959.98px) {
    .mud-main-content {
        padding: 8px 0 0 0;
    }
}

/* Thin custom scrollbar matching the palette. */
::-webkit-scrollbar {
    width: 7px;
    height: 7px;
}

::-webkit-scrollbar-track {
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: var(--mud-palette-divider);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mud-palette-lines-inputs);
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--mud-palette-divider) transparent;
}

/* EntryState menu (simple result input): the menu popover renders at the
   document root, outside the component's CSS isolation scope, so its width is
   set here. Compact — just wide enough for the status labels. */
.slot-entry-menu {
    min-width: 150px;
}

/* ============================================================
 * Dialog loading spinners — no "jumping scrollbar".
 *
 * An indeterminate MudProgressCircular rotates + animates its
 * stroke-dasharray; the rotating SVG can bleed a sub-pixel past
 * its box and toggle the dialog's vertical scrollbar on/off every
 * frame, which reflows the content (the reported jumping scrollbar).
 *
 * 1) The shared GenericLoadingDialog body: fixed height + centred +
 *    clipped, so the spinner's animation can never change the
 *    dialog height or overflow it.
 * 2) Belt-and-suspenders for ANY dialog that shows an indeterminate
 *    circular spinner: contain it so its painting/layout can't drive
 *    the dialog's scrollbar.
 * ============================================================ */
.generic-loading-dialog-body {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 96px;
    overflow: hidden;
}

.mud-dialog-content .mud-progress-circular {
    contain: layout paint;
}

/* Reserve the scrollbar gutter on dialog content (and any inner scroll area) so a transient
   scrollbar — e.g. a loading indicator briefly changing the content height — never appears,
   disappears and shifts the layout horizontally (the "jumping scrollbar"). Applies to PersonSelector
   and every other dialog that shows a loading bar/spinner. */
.mud-dialog-content,
.mud-dialog-content .pl-scroll {
    scrollbar-gutter: stable;
}

/* App bar title: on phones, drop the "| <page title>" suffix and shrink the font so a long
   competition name fits across the top without crowding the menu / search / user controls. */
@media (max-width: 600px) {
    .appbar-title {
        font-size: 0.95rem;
    }

    .appbar-title-suffix {
        display: none;
    }
}