/* ============================================================
 * 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;
}