.topbar-pickers {
    display: flex;
    align-items: center;
    gap: .5rem;
}

.topbar-picker-button.mud-button-root {
    min-width: 0;
    min-height: 2.5rem;
    padding: .5rem;
    border: 0;
    border-radius: .375rem;
    background: transparent;
    color: var(--md-sys-color-on-primary);
    box-shadow: none;
    text-transform: none;
    letter-spacing: normal;
    font-size: .875rem;
    font-weight: 600;
    line-height: 1.5;
}

.topbar-picker-button.mud-button-root:hover,
.topbar-picker-button.mud-button-root[aria-expanded="true"] {
    background: color-mix(in srgb, var(--md-sys-color-on-primary) 12%, transparent);
    box-shadow: none;
}

.topbar-picker-button.mud-button-root:focus-visible {
    outline: 2px solid var(--md-sys-color-on-primary);
    outline-offset: 2px;
}

.topbar-picker-button .mud-button-label {
    display: flex;
    align-items: center;
    gap: .4rem;
}

.picker-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    font-size: 1.5rem;
}

.picker-caret {
    font-size: .65rem;
}

.picker-avatar {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.topbar-picker-menu {
    min-width: 16rem;
    max-width: calc(100vw - 1rem);
    max-height: min(36rem, calc(100dvh - 5rem));
    overflow-y: auto;
    background: var(--md-sys-color-surface-container);
    color: var(--md-sys-color-on-surface);
}

.topbar-picker-menu .picker-heading {
    padding: .5rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--md-sys-color-on-surface-variant);
}

.topbar-picker-menu .picker-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    white-space: normal;
}

.topbar-picker-menu .picker-option[aria-current="true"],
.topbar-picker-menu .picker-check {
    color: var(--md-sys-color-primary);
}

.topbar-picker-menu .picker-option-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .125rem;
}

.topbar-picker-menu .picker-option-text small {
    color: var(--md-sys-color-on-surface-variant);
}

.topbar-picker-menu .picker-font-preview {
    display: grid;
    place-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--md-sys-color-outline-variant);
    border-radius: .375rem;
    background: var(--md-sys-color-surface-container-high);
    font-size: 1.25rem;
}

.topbar-picker-menu .picker-theme-preview {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
    border-radius: 50%;
}

@media (max-width: 576px) {
    .topbar-pickers {
        gap: 0;
    }

    .topbar-picker-button.mud-button-root {
        padding: .25rem;
    }
}

/* Platform themes own the palette via _mudblazor-theme.scss. Only bridge
   typography here, with higher specificity than MudThemeProvider's :root. */
:root[data-theme] {
    --mud-typography-default-family: var(--font-family-base);
    --mud-typography-h1-family: var(--font-family-base);
    --mud-typography-h2-family: var(--font-family-base);
    --mud-typography-h3-family: var(--font-family-base);
    --mud-typography-h4-family: var(--font-family-base);
    --mud-typography-h5-family: var(--font-family-base);
    --mud-typography-h6-family: var(--font-family-base);
    --mud-typography-subtitle1-family: var(--font-family-base);
    --mud-typography-subtitle2-family: var(--font-family-base);
    --mud-typography-body1-family: var(--font-family-base);
    --mud-typography-body2-family: var(--font-family-base);
    --mud-typography-button-family: var(--font-family-base);
    --mud-typography-caption-family: var(--font-family-base);
    --mud-typography-overline-family: var(--font-family-base);
}

/* Shared by the Blazor and transitional Razor layouts. */
.blazor-shell .blazor-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
    color: var(--md-sys-color-on-primary);
    font-weight: 600;
}

.blazor-shell .blazor-brand img {
    width: 2rem;
}

.blazor-shell {
    --shell-gap: .75rem;
    --shell-radius: var(--sidebar-radius);
    background: var(--md-sys-color-surface-container-low);
}

.blazor-shell .app-container {
    min-height: 100dvh;
    padding-top: calc(var(--topbar-height) + 2 * var(--shell-gap));
}

/* One spacing scale aligns the topbar, navigation, page and footer. */
.blazor-shell .topbar {
    top: var(--shell-gap);
    left: var(--shell-gap);
    right: var(--shell-gap);
    padding-inline: var(--shell-gap);
    border: 0;
    border-radius: var(--shell-radius);
    box-shadow: none;
}

.blazor-shell .sidebar {
    top: calc(var(--topbar-height) + 2 * var(--shell-gap));
    left: var(--shell-gap);
    bottom: var(--shell-gap);
    border: 0;
    border-radius: var(--shell-radius);
    box-shadow: none;
}

.blazor-shell .sidebar-overlay {
    top: calc(var(--topbar-height) + 2 * var(--shell-gap));
}

.blazor-main {
    height: calc(100dvh - var(--topbar-height) - 2 * var(--shell-gap));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--shell-gap);
    padding: 0 var(--shell-gap) var(--shell-gap);
    transition: margin-left var(--sidebar-transition);
    scrollbar-width: thin;
}

.app-container:has(.sidebar) .blazor-main {
    margin-left: calc(var(--sidebar-width) + var(--shell-gap));
}

.app-container:has(.sidebar.collapsed) .blazor-main {
    margin-left: calc(var(--sidebar-collapsed-width) + var(--shell-gap));
}

.blazor-page-content {
    flex: 1 0 auto;
    padding: var(--shell-gap);
    min-width: 0;
    border-radius: var(--shell-radius);
    background: var(--mud-palette-background);
}

/* Internal pages share a recessed canvas; cards retain the theme's surface color.
   Scope this to the content so navigation, overlays and public account pages keep
   their existing palette. Feature page backgrounds inherit the same canvas. */
.blazor-shell:has(.sidebar) .blazor-page-content {
    --mud-palette-background: var(--md-sys-color-surface-container);
    padding: .5rem;
}

@media (max-width: 991.98px) {
    .blazor-shell .blazor-brand span {
        display: none;
    }
}

@media (min-width: 769px) {
    .blazor-shell {
        --sidebar-width: 15.5rem;
    }

    .blazor-shell .sidebar:not(.collapsed) a.menu-item,
    .blazor-shell .sidebar:not(.collapsed) .menu-item-inner {
        gap: .5rem;
    }

    .blazor-shell .sidebar:not(.collapsed) .menu-label {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Reduce desktop density without shrinking touch targets or collapsed flyouts. */
@media (min-width: 769px) and (pointer: fine) {
    .blazor-shell .sidebar:not(.collapsed) {
        --sidebar-gap: .2rem;
    }

    .blazor-shell .sidebar:not(.collapsed) a.menu-item,
    .blazor-shell .sidebar:not(.collapsed) .menu-item-inner {
        min-height: 2.5rem;
        padding-block: .25rem;
    }

    .blazor-shell .sidebar:not(.collapsed) .menu-item-title {
        min-height: 0;
        padding-block: .5rem .25rem;
    }

    .blazor-shell .sidebar:not(.collapsed) .menu-item.has-submenu {
        min-height: 0;
    }
}

@media (max-width: 768px) {
    .blazor-shell {
        --shell-gap: .5rem;
    }

    .app-container:has(.sidebar) .blazor-main,
    .app-container:has(.sidebar.collapsed) .blazor-main {
        margin-left: 0;
    }
}