html {
    /* Reserve the scrollbar gutter so content that changes page height (filtering, paging)
       doesn't shift the whole layout when the scrollbar appears or disappears. */
    scrollbar-gutter: stable;
}

/* MudTextField renders its Style attribute on an inner element, so a width cap must land on
   the flexible .mud-input-control root via a class or the field absorbs freed toolbar space
   and shoves its neighbors sideways. */
.cp-toolbar-search {
    max-width: 300px;
}

.cp-toolbar-filter {
    max-width: 250px;
}

h1:focus {
    outline: none;
}

#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }

.loading-progress {
    position: relative;
    display: block;
    width: 128px;
    height: 128px;
    margin: 20vh auto 16px auto;
}

    .loading-progress circle {
        fill: none;
        stroke: #e0e0e0;
        stroke-width: 10px;
        transform-origin: 50% 50%;
        transform: rotate(-90deg);
    }

        .loading-progress circle:last-child {
            stroke: var(--mud-palette-primary, #1b6ec2);
            stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%;
            transition: stroke-dasharray 0.05s ease-in-out;
        }

.loading-progress-text {
    position: absolute;
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    inset: calc(20vh + 52px) 0 auto 0;
}

    .loading-progress-text:after {
        content: var(--blazor-load-percentage-text, "Loading");
    }

/* Indeterminate variant of the startup spinner for screens that wait on something other than
   the framework download (sign-in redirects), where there is no percentage to show. */
.loading-progress-indeterminate circle:last-child {
    stroke-dasharray: calc(3.141 * 60% * 0.8), 500%;
    animation: loading-progress-spin 1.2s linear infinite;
}

@keyframes loading-progress-spin {
    from {
        transform: rotate(-90deg);
    }

    to {
        transform: rotate(270deg);
    }
}

/* BlazorMonaco: make editor fill its wrapper div */
.monaco-editor-container {
    height: 100%;
    display: block;
}

/* Form wrapper used to disable all fields during save (prevents double-submit).
   Strips the default <fieldset> chrome so layout is unaffected. */
.cp-fieldset {
    border: none;
    padding: 0;
    margin: 0;
    min-width: 0;
}

/* Neutral monospace for inline code (IDs, PINs, SIDs). Overrides MudBlazor's
   default pink <code> styling with an on-theme, mode-adaptive treatment. */
code {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.85em;
    color: inherit;
    background-color: rgba(127, 127, 127, 0.14);
    padding: 0.08em 0.36em;
    border-radius: 4px;
}

/* ── Sidebar navigation ──────────────────────────────────────────────────
   All nav styling lives here rather than in a NavMenu.razor.css: most of these
   selectors target MudBlazor-rendered elements or class names passed to MudBlazor
   as Class parameters, which Blazor scoped CSS cannot reach. Keeping the rest
   here too means one stylesheet governs the drawer. */

/* Drill-in and back entries. Global for the same reason: these class names are
   passed to MudNavLink as parameters, and the elements they style are rendered
   by MudBlazor rather than authored in NavMenu.razor. */

/* The label/chevron row. Laying this out on MudBlazor's own text element keeps the
   chevron in the same centred flex line as the label instead of on its baseline. */
.nav-area-link .mud-nav-link-text {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-width: 0;
}

.nav-area-link .nav-area-chevron {
    display: block;
    flex: 0 0 auto;
    align-self: center;
    font-size: 1.125rem;
    line-height: 1;
    color: var(--mud-palette-text-secondary);
    opacity: 0.65;
}

.nav-back-link {
    border-bottom: 1px solid var(--mud-palette-divider);
}

/* MudBlazor top-aligns nav link contents (align-items: flex-start). The icon box and
   the label box are different heights, so top-aligning them leaves the icon riding
   high in the row; centring puts both on the row's centre line. Applied only to these two
   row types, which sit against a divider where the offset shows. */
.nav-back-link .mud-nav-link,
.nav-area-link .mud-nav-link {
    align-items: center;
}