/* ========================================================================== */
/* APP GLOBALLY                                                        */
/* ========================================================================== */

/* Dashboard and staff application shells */
.workspace-shell,
.staff-shell {
    --rg-surface-container: var(--rg-surface-workspace-panel);
    --rg-surface-container-nested: var(--rg-surface-workspace-canvas);
    --rg-surface-raised: var(--rg-surface-workspace-canvas);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--rg-surface-workspace-canvas);
}

.workspace-header.mud-appbar {
    height: var(--workspace-header-height);
    padding: 0;
    border: 0;
    background: var(--rg-surface-workspace-chrome);
    box-shadow: var(--rg-shadow-workspace-panel);
}

.workspace-header .mud-toolbar {
    padding-inline: 0;
}

.workspace-header-content {
    display: flex;
    align-items: center;
    gap: var(--rg-space-2);
    width: 100%;
    height: 100%;
    max-width: none;
    margin: 0;
    padding-inline: var(--rg-space-2) var(--rg-space-4);
}

.workspace-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.workspace-brand-home,
.workspace-area-link {
    display: flex;
    align-items: center;
    min-width: 0;
    color: var(--mud-palette-text-primary);
}

.workspace-brand-home {
    gap: 10px;
}

.workspace-brand-divider {
    width: 1px;
    height: 24px;
    margin-left: 2px;
    background: var(--mud-palette-lines-default);
}

.workspace-area-label {
    color: var(--mud-palette-text-secondary);
    font-weight: 700;
    white-space: nowrap;
}

.workspace-header-desktop {
    display: flex;
    align-items: center;
    gap: 4px;
}

.workspace-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workspace-sidebar-toggle .mud-icon-root {
    color: var(--mud-palette-text-secondary);
    transform: scaleX(-1);
}

.workspace-navigation-toggle-mobile-only {
    display: none;
}

@media (min-width: 960px) {
    .workspace-header-content:has(.workspace-navigation-toggle-mobile-only):not(:has(.workspace-navigation-toggle-desktop-only))::before {
        content: "";
        flex: 0 0 calc(var(--rg-control-height-lg) + var(--rg-space-1));
    }
}

/* Below Md the layout swaps the desktop rail for the temporary drawer. */
@media (max-width: 959.98px) {
    .workspace-navigation-toggle-desktop-only {
        display: none !important;
    }

    .workspace-navigation-toggle-mobile-only {
        display: inline-flex;
    }
}

.workspace-shell .workspace-main-content {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--workspace-header-height);
    background: var(--rg-surface-workspace-canvas);
}

.workspace-page-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--rg-space-5) var(--page-gutter) var(--rg-space-10);
}

.workspace-page-content > .mud-container,
.staff-page-content > .mud-container {
    padding-inline: 0;
}

.workspace-page-content .mud-typography-h2,
.staff-page-content .mud-typography-h2 {
    font-size: var(--rg-type-workspace-title-size);
    line-height: 1.1;
}

.workspace-shell .mud-paper,
.staff-shell .mud-paper {
    background-color: var(--rg-surface-workspace-panel);
}

.workspace-shell .mud-paper .mud-paper,
.staff-shell .mud-paper .mud-paper {
    background-color: var(--rg-surface-workspace-canvas);
}

.workspace-page-content .mud-paper,
.staff-page-content .mud-paper {
    box-shadow: var(--rg-shadow-workspace-panel);
}

.workspace-page-content .mud-paper .mud-paper,
.staff-page-content .mud-paper .mud-paper {
    box-shadow: none;
}

.admin-data-panel {
    overflow: hidden;
}

.admin-data-toolbar {
    display: flex;
    align-items: center;
    padding: var(--rg-space-4);
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--rg-surface-workspace-panel-muted);
}

.admin-data-toolbar > .mud-input-control {
    width: min(100%, 420px);
}

.workspace-shell .mud-table-head,
.staff-shell .mud-table-head {
    background: var(--rg-surface-workspace-panel-muted);
}

.workspace-shell .mud-table-head .mud-table-cell,
.staff-shell .mud-table-head .mud-table-cell {
    color: var(--mud-palette-text-secondary);
    font-size: var(--rg-type-label-small-size);
    font-weight: var(--rg-font-weight-strong);
    letter-spacing: 0.02em;
}

.workspace-shell .mud-table-cell.text-end,
.staff-shell .mud-table-cell.text-end {
    font-variant-numeric: tabular-nums;
}

.workspace-desktop-drawer.mud-drawer {
    position: fixed;
    top: var(--workspace-header-height);
    left: 0;
    height: calc(100vh - var(--workspace-header-height));
    height: calc(100dvh - var(--workspace-header-height));
    z-index: 1200;
    border: 0;
    border-right: 1px solid color-mix(in srgb, var(--mud-palette-text-primary) 8%, transparent);
    border-radius: 0 var(--rg-shape-card) var(--rg-shape-card) 0;
    background: var(--rg-surface-workspace-chrome);
    box-shadow: var(--rg-shadow-workspace-drawer);
}

.workspace-desktop-drawer .mud-drawer-content {
    overflow: hidden;
}

.workspace-side-nav-content,
.device-side-nav-content {
    height: 100%;
    min-height: 0;
    padding-top: var(--rg-space-2);
}

.device-side-nav-loading {
    display: grid;
    align-content: start;
    gap: var(--rg-space-1);
    padding-top: var(--rg-space-2) !important;
    overflow: hidden;
}

.device-side-nav-loading-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr);
    align-items: center;
    gap: var(--rg-space-3);
    min-height: var(--rg-control-height-lg);
    padding-inline: var(--rg-space-3);
}

.device-side-nav-loading-row .mud-skeleton {
    border-radius: var(--rg-shape-pill);
}

.admin-side-nav .mud-navmenu {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-1);
    margin-inline: calc(-1 * var(--rg-space-4));
}

.admin-side-nav .mud-nav-link {
    align-items: center;
    overflow: hidden;
    min-height: var(--rg-control-height-lg);
    margin-inline: var(--rg-space-2);
    padding-inline: var(--rg-space-3);
    border-radius: var(--rg-shape-pill);
    transition:
        background-color var(--m3-motion-duration-short) var(--m3-motion-easing-effects),
        color var(--m3-motion-duration-short) var(--m3-motion-easing-effects);
}

.admin-side-nav .mud-nav-link.active {
    background: var(--rg-state-selected);
}

.admin-side-nav .mud-nav-link .mud-nav-link-icon {
    color: var(--mud-palette-text-secondary) !important;
    font-size: 1.5rem;
}

.admin-side-nav .mud-nav-link .mud-nav-link-text {
    min-width: 0;
    overflow: hidden;
    color: var(--mud-palette-text-primary) !important;
    font-weight: var(--rg-font-weight-medium);
    text-overflow: clip;
    white-space: nowrap;
}

.admin-side-nav .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

.admin-side-nav .admin-side-nav-account-icon {
    font-size: 1.5rem;
}

.account-shell {
    --rg-surface-container: var(--rg-surface-workspace-panel);
    --rg-surface-container-nested: var(--rg-surface-workspace-canvas);
    --rg-surface-raised: var(--rg-surface-workspace-canvas);
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--rg-surface-workspace-canvas);
}

.account-main-content {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    background: var(--rg-surface-workspace-canvas);
}

.account-page-content .mud-paper:not(.account-danger-card) {
    background-color: var(--rg-surface-workspace-panel);
    box-shadow: var(--rg-shadow-workspace-panel);
}

.account-page-content .mud-paper .mud-paper {
    background-color: var(--rg-surface-workspace-canvas);
    box-shadow: none;
}

html:has(.staff-shell) {
    overflow-y: scroll;
}

body:has(.staff-shell) {
    overflow-y: clip;
}

.staff-main-content {
    min-width: 0;
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--workspace-header-height);
    background: var(--rg-surface-workspace-canvas);
}

.staff-page-content {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: var(--rg-space-5) var(--page-gutter) var(--rg-space-10);
}

.global-settings-menu {
    width: 220px;
    padding: 4px 0;
}

.global-menu-row {
    display: grid;
    grid-template-columns: 24px minmax(0, 1fr) 24px;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 42px;
    padding: 8px 12px;
    border: 0;
    background: transparent;
    color: var(--mud-palette-text-primary);
    font-family: var(--rg-font-family);
    font-size: var(--rg-type-label-large-size);
    font-weight: var(--rg-font-weight-regular);
    line-height: var(--rg-type-label-large-line-height);
    letter-spacing: var(--rg-type-label-letter-spacing);
    text-align: left;
    cursor: pointer;
    transition:
        background-color var(--m3-motion-duration-short) var(--m3-motion-easing-effects),
        color var(--m3-motion-duration-short) var(--m3-motion-easing-effects);
}

.global-menu-leading .mud-icon-root,
.global-menu-trailing .mud-icon-root {
    color: var(--mud-palette-text-secondary);
    transition: transform var(--m3-motion-duration-medium) var(--m3-motion-easing-spatial);
}

.global-menu-row:hover .global-menu-leading .mud-icon-root {
    transform: scale(1.08);
}

.global-menu-row:hover .global-menu-trailing .mud-icon-root {
    transform: translateX(2px);
}

.global-menu-submenu-row .global-menu-leading .mud-icon-root,
.global-menu-submenu-row .global-menu-trailing .mud-icon-root {
    color: var(--mud-palette-text-secondary);
}

.global-menu-submenu-row:hover .global-menu-leading .mud-icon-root {
    transform: translateX(2px) scale(1.05);
}

.global-menu-heading:hover .global-menu-leading .mud-icon-root {
    transform: translateX(-3px);
}

.global-menu-row:hover {
    background: var(--mud-palette-action-default-hover);
}

.global-menu-heading {
    font-weight: 700;
}

.global-menu-leading,
.global-menu-trailing {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    min-width: 24px;
    height: 24px;
    overflow: visible;
}

.global-menu-leading .mud-icon-root,
.global-menu-trailing .mud-icon-root {
    width: 24px;
    height: 24px;
    font-size: 24px;
}

.global-menu-leading {
    position: relative;
}

.global-menu-label {
    min-width: 0;
    text-align: left;
}

.global-settings-menu .flag {
    position: absolute;
    display: block;
    width: 52px;
    min-width: 52px;
    height: 39px;
    max-width: none;
    object-fit: contain;
    overflow: visible;
    transform: scale(0.5);
    transform-origin: center;
}

.profile-menu-trigger .mud-menu-activator {
    display: inline-grid !important;
    place-items: center;
    width: 40px;
    min-width: 40px;
    height: 40px;
    min-height: 40px;
    padding: 0;
    border: 0;
    color: inherit;
    background: transparent;
    cursor: pointer;
}

.profile-menu-trigger .mud-menu-activator:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.profile-menu-trigger-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.profile-menu-trigger-avatar {
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}

.profile-menu-avatar-content {
    display: grid;
    place-items: center;
}

.profile-menu-panel {
    width: 248px;
    padding: 4px 0;
}

.profile-menu-popover {
    margin-top: var(--rg-space-4);
}

.profile-menu-panel .flag {
    position: absolute;
    display: block;
    width: 52px;
    min-width: 52px;
    height: 39px;
    max-width: none;
    object-fit: contain;
    overflow: visible;
    transform: scale(0.5);
    transform-origin: center;
}

.profile-menu-identity {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    min-width: 0;
    padding: 12px 16px;
}

.profile-menu-identity-copy {
    flex: 1 1 auto;
    min-width: 0;
}

.profile-menu-identity-avatar {
    flex: 0 0 auto;
    font-size: 0.9375rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}

.account-profile-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.01em;
}

.profile-menu-identity .mud-typography {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.profile-menu-panel .mud-menu-item {
    min-height: 42px;
    font-size: var(--rg-type-label-large-size);
    font-weight: var(--rg-font-weight-regular);
    line-height: var(--rg-type-label-large-line-height);
    letter-spacing: var(--rg-type-label-letter-spacing);
}

.profile-menu-panel .mud-list-item-icon:not(.mud-text-error) {
    color: var(--mud-palette-text-secondary);
}

.profile-menu-panel .mud-menu-item .mud-icon-root {
    transition: transform var(--m3-motion-duration-medium) var(--m3-motion-easing-spatial);
}

.profile-menu-panel .mud-menu-item:hover .mud-icon-root {
    transform: translateX(2px) scale(1.05);
}

.public-header.mud-appbar {
    border: none;
    box-shadow: var(--rg-shadow-workspace-panel);
}

.public-header-overlay.mud-appbar {
    background-color: color-mix(
        in srgb,
        var(--mud-palette-appbar-background) var(--public-header-opacity, 0%),
        transparent);
    box-shadow: 0 6px 12px -10px color-mix(
        in srgb,
        var(--rg-shadow-workspace-panel-color) var(--public-header-opacity, 0%),
        transparent);
}

.public-header-content {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: var(--rg-space-2);
    width: 100%;
    max-width: var(--rg-layout-content-max-width);
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.app-header-logo {
    display: flex;
    align-items: center;
    gap: var(--rg-space-2);
}

.public-header-wordmark {
    display: block;
    width: auto;
}

.app-header-control-button.mud-button-root {
    white-space: nowrap;
}

:is(.public-header-content, .workspace-header-content) .mud-button-text:is(:hover, :active),
:is(.public-header-content, .workspace-header-content) .mud-icon-button:is(:hover, :active),
:is(.public-header-content, .workspace-header-content) .profile-menu-trigger .mud-menu-activator:is(:hover, :active) {
    background-color: transparent;
}

:is(.public-header-content, .workspace-header-content) .mud-button-filled-primary:is(:hover, :active) {
    background-color: var(--mud-palette-primary);
    box-shadow: none;
}

:is(.public-header-content, .workspace-header-content) .mud-button-root:is(:hover, :active) {
    transform: none;
}

:is(.public-header-content, .workspace-header-content) .mud-ripple-effect {
    display: none;
}

.app-header-utility-button.mud-icon-button,
.app-header-utility-menu .mud-menu-activator {
    width: var(--rg-control-height-sm);
    min-width: var(--rg-control-height-sm);
    height: var(--rg-control-height-sm);
    min-height: var(--rg-control-height-sm);
    padding: 3px;
}

.app-header-utility-menu .mud-menu-activator {
    display: grid;
    place-items: center;
}

.app-header-utility-slot {
    display: grid;
    place-items: center;
    width: var(--rg-control-height-lg);
    height: var(--rg-control-height-lg);
}

.app-header-utility-button .mud-icon-root,
.app-header-utility-menu .mud-menu-activator .mud-icon-root {
    font-size: 26px;
}

.app-header-desktop-only {
    display: none;
}

.app-header-mobile-only {
    display: flex;
}

.public-primary-navigation,
.public-header-actions {
    align-items: center;
    gap: var(--rg-space-2);
}

.public-primary-navigation {
    margin-left: var(--rg-space-4);
}

.public-mobile-menu-button,
.workspace-mobile-menu-button,
.mobile-nav-close {
    width: var(--rg-control-height-lg);
    height: var(--rg-control-height-lg);
    border-radius: var(--m3-shape-m);
}

.public-mobile-menu-button[aria-expanded="true"],
.workspace-mobile-menu-button[aria-expanded="true"] {
    background: transparent;
}

@media (min-width: 960px) {
    .app-header-desktop-only {
        display: flex;
    }

    .app-header-mobile-only {
        display: none;
    }
}

/* Shared mobile navigation */
.public-mobile-drawer.mud-drawer,
.workspace-mobile-drawer.mud-drawer {
    top: 0;
    width: min(100%, 420px);
    max-width: 100%;
    height: 100dvh;
    z-index: 2050;
    border: none;
    background: var(--mud-palette-background);
}

.mobile-nav-shell {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
    padding: env(safe-area-inset-top) var(--rg-space-4) env(safe-area-inset-bottom);
    background: var(--mud-palette-background);
}

.mobile-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rg-space-4);
    min-height: 72px;
    flex: 0 0 auto;
}

.mobile-nav-brand {
    display: flex;
    align-items: center;
    gap: var(--rg-space-3);
    min-width: 0;
    color: var(--mud-palette-text-primary);
}

.mobile-nav-brand .mud-typography-overline,
.mobile-nav-brand .mud-typography-subtitle1 {
    line-height: 1.15;
}

.mobile-nav-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: var(--rg-space-6) 0;
}

.mobile-nav-section-label {
    display: block;
    padding-inline: var(--rg-space-3);
    margin-bottom: var(--rg-space-2);
    letter-spacing: 0.08em;
}

.mobile-nav-shell .mud-navmenu {
    display: flex;
    flex-direction: column;
    gap: var(--rg-space-1);
}

.mobile-nav-shell .mud-nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--rg-space-3);
    min-height: 56px;
    padding: var(--rg-space-3) var(--rg-space-4);
    border-radius: var(--m3-shape-m);
    color: var(--mud-palette-text-primary);
    font-size: 1rem;
    font-weight: var(--rg-font-weight-medium);
    line-height: 1.35;
    transition:
        color var(--m3-motion-duration-short) var(--m3-motion-easing-effects),
        background-color var(--m3-motion-duration-short) var(--m3-motion-easing-effects);
}

/* The label is the only part allowed to give up space. Without min-width the label
   refuses to shrink and the chevron absorbs the shortfall instead. */
.mobile-nav-shell .mud-nav-link .mud-nav-link-text {
    flex: 1 1 auto;
    min-width: 0;
}

.mobile-nav-primary .mud-nav-link {
    min-height: 60px;
    font-size: 1.08rem;
    font-weight: var(--rg-font-weight-strong);
}

/* Chevron. flex: 0 0 auto is load-bearing: as a shrinkable flex item the box gets
   squeezed narrower than it is tall, and rotating a rectangle 45 degrees skews it. */
.mobile-nav-shell .mud-nav-link::after {
    content: "";
    flex: 0 0 auto;
    align-self: center;
    box-sizing: border-box;
    width: 8px;
    height: 8px;
    margin-inline-start: auto;
    border-top: 2px solid currentColor;
    border-right: 2px solid currentColor;
    opacity: 0.45;
    transform: rotate(45deg);
}

/* Selection reads on the icon, never the label - same rule as the desktop side nav. */
.mobile-nav-shell .mud-nav-link.active {
    background: var(--rg-state-selected);
}

.mobile-nav-shell .mud-nav-link:not(.active):hover {
    background: var(--rg-state-hover);
}

.mobile-nav-shell .mud-nav-link .mud-nav-link-text {
    color: var(--mud-palette-text-primary) !important;
}

.mobile-nav-shell .mud-nav-link .mud-nav-link-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    font-size: 1.5rem;
    color: var(--mud-palette-text-secondary) !important;
}

.mobile-nav-shell .mud-nav-link.active .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

.mobile-nav-divider {
    margin-block: var(--rg-space-6);
}

.mobile-nav-footer {
    flex: 0 0 auto;
    padding: var(--rg-space-4) 0 max(var(--rg-space-4), env(safe-area-inset-bottom));
    border-top: 1px solid var(--mud-palette-lines-default);
}

.mobile-nav-utility-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 56px;
}

/* The whole row is the menu activator here, not just the avatar or the gear, so both
   triggers have to stretch out of their fixed header sizing and carry the row padding. */
.mobile-nav-utility-row .profile-menu-trigger,
.mobile-nav-utility-row .app-header-utility-slot,
.mobile-nav-utility-row .app-header-utility-menu,
.mobile-nav-utility-row .profile-menu-trigger .mud-menu-activator,
.mobile-nav-utility-row .app-header-utility-menu .mud-menu-activator {
    display: flex !important;
    place-items: initial;
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 56px;
    padding: 0;
}

.mobile-nav-utility-row .profile-menu-avatar-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rg-space-4);
    width: 100%;
    padding: var(--rg-space-2) var(--rg-space-3);
    border-radius: var(--m3-shape-m);
    transition: background-color var(--m3-motion-duration-short) var(--m3-motion-easing-effects);
}

.mobile-nav-utility-row .profile-menu-avatar-content:hover {
    background: var(--rg-state-hover);
}

.mobile-nav-utility-row .profile-menu-leading {
    flex: 1 1 auto;
    min-width: 0;
    text-align: start;
}

/* The avatar and the gear are the fixed end of the row; only the copy may wrap. */
.mobile-nav-utility-row .profile-menu-trigger-avatar,
.mobile-nav-utility-row .profile-menu-avatar-content > .mud-icon-root {
    flex: 0 0 auto;
}

.mobile-nav-utility-row .profile-menu-avatar-content > .mud-icon-root {
    font-size: 26px;
    color: var(--mud-palette-text-secondary);
}

.mobile-nav-auth-actions {
    margin-top: var(--rg-space-4);
}


@media (max-width: 959.98px) {
    .workspace-header.mud-appbar {
        padding: 0;
    }

    .workspace-shell .workspace-main-content {
        padding-top: var(--workspace-header-height);
    }

    /* Same gutter as .public-header-content, so both headers sit off the edge equally. */
    .workspace-header-content {
        padding-inline: var(--rg-space-4);
    }

    .workspace-brand-text,
    .workspace-brand-divider,
    .workspace-header-desktop {
        display: none;
    }

    .workspace-brand {
        gap: var(--rg-space-2);
    }

    .workspace-area-label {
        display: block;
        max-width: 120px;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .workspace-header-actions {
        gap: var(--rg-space-1);
    }

    .workspace-header .profile-menu-trigger {
        min-width: var(--rg-control-height-lg);
        height: var(--rg-control-height-lg);
    }

    .workspace-page-content {
        padding: var(--rg-space-4) var(--rg-space-4) var(--rg-space-8);
    }

}

@media (max-width: 599.98px) {
    :root {
        --topnav-height: 64px;
        --page-gutter: 16px;
        --sidebar-width: 0px;
    }

    .workspace-header-actions > .profile-menu-trigger {
        display: none;
    }

    .mud-appbar {
        min-height: var(--topnav-height);
    }

    .public-header-content {
        padding-inline: var(--rg-space-4);
    }

    .public-header-wordmark {
        height: 20px;
    }

    .header-dropdown-menu {
        right: 8px;
        top: 50%;
        bottom: auto;
        transform: translateY(-50%);
    }
}

.site-footer .mud-link:not(.mud-link-underline-none) {
    color: var(--mud-palette-text-primary) !important;
}