:root {
    --dx-radius-md: 12px;
    --dx-radius-lg: 18px;
    --dx-radius-xl: 24px;
    --dx-radius-pill: 999px;
    --dx-shadow-soft: 0 6px 20px rgba(var(--mud-palette-primary-rgb), 0.08);
    --dx-shadow-hover: 0 14px 32px rgba(var(--mud-palette-primary-rgb), 0.18);
    --dx-glass-bg: color-mix(in srgb, var(--mud-palette-surface) 72%, transparent);
    --dx-glass-border: rgba(var(--mud-palette-primary-rgb), 0.14);
    --dx-glass-blur: blur(14px) saturate(140%);
    --dx-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
    --dx-touch: 44px;
}

/* MudLayout is not a flex container by default, so a short page leaves the footer
   right below the content instead of at the bottom of the viewport. */
html,
body {
    height: 100%;
}

.mud-layout {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-height: 100dvh;
}

.mud-layout > .mud-main-content {
    display: flex;
    flex-direction: column;
    flex: 1 0 auto;
    min-height: 0;
}

/* AppBar brand: logo on a white disc so it stays readable on the primary background. */
.dx-brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.dx-brand__logo {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    object-fit: contain;
    border-radius: 50%;
    background: #fff;
}

.dx-brand__name {
    font-weight: 700;
    letter-spacing: -0.02em;
}

@media (max-width: 600px) {
    .dx-brand__name {
        display: none;
    }
}

/* Persistent left drawer: same wash and hairline language as the site footer. */
.dx-nav-drawer.mud-drawer {
    background:
        radial-gradient(80% 42% at 0% 0%, rgba(var(--mud-palette-primary-rgb), 0.14) 0%, rgba(var(--mud-palette-primary-rgb), 0) 70%),
        radial-gradient(70% 40% at 100% 100%, rgba(var(--mud-palette-secondary-rgb), 0.10) 0%, rgba(var(--mud-palette-secondary-rgb), 0) 70%),
        var(--mud-palette-drawer-background, var(--mud-palette-surface)) !important;
    border-inline-end: 1px solid var(--dx-glass-border);
    box-shadow: none !important;
}

.dx-nav-drawer .mud-drawer-content {
    background: transparent;
    box-sizing: border-box;
    padding: 12px 8px 16px;
}

.dx-nav-drawer .mud-nav-link {
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: calc(100% - 8px);
    max-width: none;
    height: 40px;
    margin: 2px 4px;
    padding: 0 14px !important;
    border-radius: var(--dx-radius-pill);
    border: 1px solid transparent;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    transition: background-color 0.2s var(--dx-ease), color 0.2s var(--dx-ease), border-color 0.2s var(--dx-ease), transform 0.2s var(--dx-ease);
}

.dx-nav-drawer .mud-nav-group .mud-navmenu .mud-nav-item .mud-nav-link,
.dx-nav-drawer .mud-nav-group .mud-navmenu .mud-nav-group .mud-nav-link {
    padding: 0 14px !important;
}

.dx-nav-drawer .mud-nav-link .mud-nav-link-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    line-height: 0;
    color: inherit;
    transition: transform 0.2s var(--dx-ease);
}

.dx-nav-drawer .mud-nav-link .mud-nav-link-text {
    width: auto;
    line-height: 1.2;
    margin-inline: 10px 0;
}

.dx-nav-drawer .mud-nav-link:hover:not(.nav-menu-section-header) {
    color: var(--mud-palette-primary);
    background: rgba(var(--mud-palette-primary-rgb), 0.08);
}

.dx-nav-drawer .mud-nav-link:hover:not(.nav-menu-section-header) .mud-nav-link-icon {
    transform: scale(1.08);
}

.dx-nav-drawer .mud-nav-link:active:not(.nav-menu-section-header) {
    transform: scale(0.98);
}

.dx-nav-drawer .mud-nav-link:focus-visible {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}

.dx-nav-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) {
    color: var(--mud-palette-primary) !important;
    background: rgba(var(--mud-palette-primary-rgb), 0.12) !important;
    border-color: var(--dx-glass-border) !important;
    border-inline-end-width: 1px !important;
    font-weight: 600;
}

.dx-nav-drawer .mud-navmenu .mud-nav-link.active:not(.mud-nav-link-disabled) .mud-nav-link-icon {
    color: var(--mud-palette-primary) !important;
}

@media (prefers-reduced-motion: reduce) {
    .dx-nav-drawer .mud-nav-link,
    .dx-nav-drawer .mud-nav-link .mud-nav-link-icon {
        transition: none !important;
    }
}