/* Keep the original theme surfaces; give navigation icons their own strong accent. */
:is(.theme-light, .theme-dark) .office-drawer {
    --nav-icon: #087b50;
    --nav-icon-bg: #dcf4e7;
    --nav-selected: #175cd3;
    --nav-selected-bg: #e7efff;
    background: linear-gradient(145deg, var(--office-nav), var(--office-bg)) !important;
    color: var(--office-text);
    border-right: 1px solid var(--office-line);
    box-shadow: none;
}
.theme-dark .office-drawer {
    --nav-icon: #75efb7;
    --nav-icon-bg: #20483c;
    --nav-selected: #a9cdff;
    --nav-selected-bg: #203f65;
}
:is(.theme-light, .theme-dark) .office-drawer .navigation-heading {
    color: var(--office-muted);
    letter-spacing: .18em;
}
:is(.theme-light, .theme-dark) .office-drawer .navigation-toggle {
    color: var(--office-text);
    border: 1px solid transparent;
    background: transparent;
    border-radius: 11px;
    transition: background-color .2s ease, border-color .2s ease, transform .2s ease;
}
:is(.theme-light, .theme-dark) .office-drawer .navigation-toggle .navigation-icon,
:is(.theme-light, .theme-dark) .office-drawer .mud-nav-link .mud-nav-link-icon {
    color: var(--nav-icon) !important;
    background: var(--nav-icon-bg);
    border: 1px solid color-mix(in srgb, var(--nav-icon) 22%, transparent);
    border-radius: 9px;
    padding: 5px;
    width: 32px;
    height: 32px;
    min-width: 32px;
    flex-shrink: 0;
    filter: drop-shadow(0 2px 2px #087b5012);
    transition: transform .2s ease, background-color .2s ease, box-shadow .2s ease;
}
.office-drawer .navigation-chevron { transition: transform .22s ease; }
:is(.theme-light, .theme-dark) .office-drawer .navigation-group[open] > .navigation-toggle {
    background: var(--office-active);
    border-color: var(--office-line);
}
:is(.theme-light, .theme-dark) .office-drawer .navigation-links {
    border-left-color: var(--office-line);
}
.office-drawer .navigation-group[open] > .navigation-links {
    animation: navigation-reveal .24s ease-out;
}
.office-drawer .navigation-group[open] > .navigation-toggle .navigation-icon {
    animation: navigation-icon-pop .38s ease-out;
}
:is(.theme-light, .theme-dark) .office-drawer .mud-nav-link {
    text-decoration: none;
    border-radius: 9px;
    border: 1px solid transparent;
    align-items: center;
    transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.office-drawer .mud-nav-link-text { text-decoration: none; }
:is(.theme-light, .theme-dark) .office-drawer .mud-nav-link.active {
    background: var(--nav-selected-bg) !important;
    border: 1px solid var(--office-line);
    border-left: 4px solid var(--nav-selected);
    font-weight: 700;
}
:is(.theme-light, .theme-dark) .office-drawer .mud-nav-link.active .mud-nav-link-icon {
    color: var(--nav-selected) !important;
    background: var(--nav-selected-bg);
    border-color: var(--nav-selected);
    animation: navigation-icon-pop .38s ease-out;
}
.office-drawer .drawer-footer { border-top: 1px solid var(--office-line); }
.office-drawer :is(.navigation-toggle, .mud-nav-link):focus-visible {
    outline: 2px solid var(--nav-selected);
    outline-offset: -2px;
}
.office-drawer :is(.navigation-toggle, .mud-nav-link):focus-visible :is(.navigation-icon, .mud-nav-link-icon) {
    transform: translateY(-2px) scale(1.08);
}
@media (hover: hover) and (pointer: fine) {
    :is(.theme-light, .theme-dark) .office-drawer .navigation-toggle:hover,
    :is(.theme-light, .theme-dark) .office-drawer .mud-nav-link:not(.active):hover {
        background: var(--office-active);
        transform: translateX(3px);
    }
    .office-drawer :is(.navigation-toggle, .mud-nav-link):hover :is(.navigation-icon, .mud-nav-link-icon) {
        transform: translateY(-2px) rotate(-6deg) scale(1.08);
        box-shadow: 0 3px 8px #087b5020;
    }
}
@keyframes navigation-reveal {
    from { transform: translateY(-5px); }
    to { transform: translateY(0); }
}
@keyframes navigation-icon-pop {
    0% { transform: scale(.86); }
    60% { transform: scale(1.12); }
    100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .office-drawer *, .office-drawer { animation: none !important; transition: none !important; }
    .office-drawer :is(.navigation-toggle, .mud-nav-link),
    .office-drawer :is(.navigation-icon, .mud-nav-link-icon) { transform: none !important; }
}