h1:focus {
    outline: none;
}

/* MudBlazor reserves a 36px start-margin on an icon-less MudMenuItem's text whenever the same
   menu also has an item with an icon (to align with it) - the account menu's disabled username
   row has no such sibling requirement, so center its text and let it use the full row instead.
   This can't be a component-scoped .razor.css rule: MudMenu portals its popover content into
   MudPopoverProvider (rendered elsewhere under <body>), so it's never a DOM descendant of
   whatever scoped element MainLayout itself renders. !important is needed to outrank MudBlazor's
   own more specific ":has()"-based selector. */
.username-menu-item .mud-menu-item-text {
    margin-inline-start: 0 !important;
    text-align: center;
    width: 100%;
}
/* Version link pinned to the bottom of the navigation drawer (MainLayout.razor). Global, not
   scoped: the elements are rendered by MudNavMenu/MudNavLink, not by MainLayout itself. */
.drawer-footer {
    margin-top: auto;
    border-top: 1px solid var(--mud-palette-divider);
}

.drawer-footer .version-link {
    position: relative;
}

.drawer-footer .version-link .mud-nav-link-text,
.drawer-footer .version-link .mud-nav-link-icon {
    color: var(--mud-palette-text-secondary);
}

.drawer-footer .version-link .mud-nav-link-text {
    font-size: 0.8125rem;
}

.drawer-footer .version-link.has-unseen .mud-nav-link-icon {
    color: var(--mud-palette-primary);
}

/* Unseen-releases dot on the icon - stays visible in the collapsed mini drawer too. */
.drawer-footer .version-link.has-unseen::after {
    content: "";
    position: absolute;
    left: 30px;
    top: 8px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--mud-palette-error);
    box-shadow: 0 0 0 2px var(--mud-palette-drawer-background);
    pointer-events: none;
}

/* WhatsNewDialog body - global, since MudDialog renders the content element itself (CSS isolation
   would not reach it). */
.whats-new-content {
    max-height: 60vh;
    overflow-y: auto;
}