/* ==========================================================================
   Side Navigation — Desktop sidebar + Mobile hamburger overlay
   Phase B of v0.8.0 Sage redesign
   ========================================================================== */

/* --------------------------------------------------------------------------
   Hotwire Native shell — hide all web nav chrome when running inside the
   shells that draw their own chrome. `base.html` stamps `data-native-chrome`
   on <html> from `native_chrome` (core/platforms.py "the shell's form
   factor"): a phone, an iPad, Android. NOT Hotwire's own
   `[data-bridge-components]` — that says only that a bridge exists, and a Mac
   has the bridge while drawing no chrome, so keying on it hid the side nav on
   exactly the screen that needs it (2026-09-27). Defense-in-depth alongside
   the `{% if not native_chrome %}` guard in templates/base.html.
   -------------------------------------------------------------------------- */
[data-native-chrome] .web-only,
[data-native-chrome] header.web-only,
[data-native-chrome] footer.web-only,
[data-native-chrome] nav.web-only,
[data-native-chrome] aside.web-only {
    display: none !important;
}

/* --------------------------------------------------------------------------
   CSS custom properties — :root scope for cross-element use
   -------------------------------------------------------------------------- */
:root {
    --side-nav-width: 240px;
    --side-nav-collapsed-width: 64px;
    --side-nav-transition: 0.2s ease;
}

.side-nav {
    --side-nav-bg: var(--card-background);
    --side-nav-border: var(--border-color);
}

/* --------------------------------------------------------------------------
   Side nav — base layout
   -------------------------------------------------------------------------- */
.side-nav {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--side-nav-width);
    background: var(--side-nav-bg);
    border-right: 1px solid var(--side-nav-border);
    display: flex;
    flex-direction: column;
    z-index: 100;
    transition: width var(--side-nav-transition);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Header (logo + toggle)
   -------------------------------------------------------------------------- */
.side-nav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem;
    min-height: 64px;
    flex-shrink: 0;
}

.side-nav-logo {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    font-family: var(--font-heading);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--primary);
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
}

.side-nav-logo:hover {
    color: var(--primary-dark);
}

.side-nav-logo-text {
    transition: opacity var(--side-nav-transition);
}

/* Toggle button (chevron / pin) */
.side-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.side-nav-toggle:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.side-nav-toggle:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Pin icon hidden by default, chevron visible */
.side-nav-toggle .toggle-pin {
    display: none;
}

.side-nav-toggle .toggle-chevron {
    display: block;
    transition: transform var(--side-nav-transition);
}

/* --------------------------------------------------------------------------
   Scrollable nav area — everything below the header, the footer included
   --------------------------------------------------------------------------
   ⛔ **THE FOOTER IS NOT PINNED.** It was, and on a window 715px tall it took
   260px and left Library a 14px sliver against its border, with no sign the
   list went on. It is the last child of this column instead: `margin-top:
   auto` on `.side-nav-footer` keeps it on the window's bottom edge whenever
   everything fits, and resolves to nothing when it does not, so the rows and
   the footer scroll as one list and the only edge that cuts a row is the
   window's own — under a fade.

   ⭐ **THE FADE IS THE SCROLL HINT.** The scrollbar stays hidden (below), so
   an edge with more beyond it is masked out over most of a row:
   `data-more-below` / `data-more-above` are kept by static/js/side-nav.js from
   the real scroll position, never assumed. A cut row reads as *continues*,
   not as *broken*.
   📐 tests/browser/test_a_short_window_says_the_rail_scrolls.py
   -------------------------------------------------------------------------- */
.side-nav-scroll {
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    min-height: 0;
    --side-nav-fade: 40px;
}

.side-nav-scroll > * {
    flex-shrink: 0;
}

.side-nav-scroll[data-more-below] {
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - var(--side-nav-fade)), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - var(--side-nav-fade)), transparent);
}

.side-nav-scroll[data-more-above] {
    -webkit-mask-image: linear-gradient(to top, #000 calc(100% - var(--side-nav-fade)), transparent);
    mask-image: linear-gradient(to top, #000 calc(100% - var(--side-nav-fade)), transparent);
}

.side-nav-scroll[data-more-above][data-more-below] {
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 var(--side-nav-fade), #000 calc(100% - var(--side-nav-fade)), transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 var(--side-nav-fade), #000 calc(100% - var(--side-nav-fade)), transparent);
}

/* Hide scrollbar but keep functional (WebKit + Firefox) */
.side-nav-scroll::-webkit-scrollbar {
    width: 0;
}

.side-nav-scroll {
    scrollbar-width: none;
}

/* --------------------------------------------------------------------------
   Nav groups
   -------------------------------------------------------------------------- */
.side-nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0.5rem 0.5rem;
}

.side-nav-group+.side-nav-group {
    border-top: 1px solid var(--border-light);
    margin-top: 0.25rem;
    padding-top: 0.75rem;
}

.side-nav-group-label {
    font-family: var(--font-heading);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ink-mid);
    padding: 0.25rem 0.75rem 0.375rem;
    white-space: nowrap;
    overflow: hidden;
    transition: opacity var(--side-nav-transition);
}

/* --------------------------------------------------------------------------
   Nav links
   -------------------------------------------------------------------------- */
.side-nav-link {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    color: var(--text-secondary);
    font-size: 0.875rem;
    font-weight: 500;
    border-radius: var(--border-radius-sm);
    min-height: 44px;
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    position: relative;
}

.side-nav-link:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.side-nav-link:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.side-nav-link.active {
    background: var(--primary-light);
    color: var(--primary-dark);
    font-weight: 600;
}

/* Active indicator bar */
.side-nav-link.active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--primary);
}

/* Icons */
.side-nav-icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.125rem;
    line-height: 1;
}

.side-nav-icon svg {
    width: 20px;
    height: 20px;
}

/* Labels */
.side-nav-label {
    transition: opacity var(--side-nav-transition);
    overflow: hidden;
}

/* Notification badge — absolute on icon, doesn't affect layout */
.side-nav-link {
    position: relative;
}

/*
 * ⛔ **AN UNREAD COUNT IS NOT AN ERROR.** This was `var(--error)` — `#ef4444`,
 * the same red the notices pass already replaced everywhere else with the one
 * warm brick the palette allows. On a surface whose whole argument is that
 * silence is normal, red is the wrong word for *something arrived*. Design 2.0,
 * Batch 12, canvas 20.
 *
 * ⚠️ **AND 9px WAS TOO SMALL TO READ**, in a 16px badge that had the room for
 * 11px. The geometry is unchanged; only the colour and the size are.
 */
.side-nav-badge {
    position: absolute;
    top: 4px;
    left: 28px;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 0.6875rem;
    font-weight: 600;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    border-radius: 100px;
    padding: 0 4px;
    flex-shrink: 0;
    transition: opacity var(--side-nav-transition);
    pointer-events: none;
    z-index: 1;
}

/* --------------------------------------------------------------------------
   Footer area (Settings, Help, User)
   -------------------------------------------------------------------------- */
/* `margin-top: auto` is what sits it on the window's bottom edge when the
   rail fits; in `.side-nav-scroll` it collapses to 0 when the rail does not. */
.side-nav-footer {
    margin-top: auto;
    flex-shrink: 0;
    border-top: 1px solid var(--border-light);
}

/* User row */
.side-nav-user {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border-light);
    overflow: hidden;
    white-space: nowrap;
}

.side-nav-user-avatar {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    color: var(--primary-dark);
    font-family: var(--font-heading);
    font-weight: 600;
    font-size: 0.8125rem;
    border-radius: 50%;
}

.side-nav-user>.side-nav-label {
    font-size: 0.8125rem;
    color: var(--text-secondary);
    font-weight: 500;
}

/* ⛔ A <button>, so it starts with the browser's own face: `buttonface` grey
   and an outset border. Nothing reset them, so the sign-out mark sat on
   #6B6B6B in dark (2.48:1) — the one fixed half of the pair. */
.side-nav-logout {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    margin-left: auto;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    flex-shrink: 0;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* `--danger`, an action's red: `--error` is a status. As a mark it needs 3:1
   and `--error` held 3.08 on its own chip — passing by 0.08; `--danger` is 5.3. */
.side-nav-logout:hover {
    background: var(--error-bg);
    color: var(--danger);
}

.side-nav-logout:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Collapsed state (desktop)
   -------------------------------------------------------------------------- */
.side-nav.collapsed {
    width: var(--side-nav-collapsed-width);
}

.side-nav.collapsed .side-nav-logo-text,
.side-nav.collapsed .side-nav-group-label,
.side-nav.collapsed .side-nav-label {
    opacity: 0;
    pointer-events: none;
}

/* Badge stays visible on icon when collapsed (small dot indicator) */
.side-nav.collapsed .side-nav-badge {
    top: 2px;
    left: 22px;
    min-width: 8px;
    height: 8px;
    font-size: 0;
    padding: 0;
    line-height: 0;
}

.side-nav.collapsed .side-nav-toggle .toggle-chevron {
    transform: rotate(180deg);
}

/* Pin icon not needed when fully collapsed (no peek) */
.side-nav.collapsed .toggle-pin {
    display: none;
}

.side-nav.collapsed .toggle-chevron {
    display: block;
}

.side-nav.collapsed .side-nav-header {
    justify-content: center;
    padding: 1rem 0.5rem;
}

.side-nav.collapsed .side-nav-logo {
    justify-content: center;
}

.side-nav.collapsed .side-nav-link {
    justify-content: center;
    padding: 0.5rem;
}

.side-nav.collapsed .side-nav-user {
    justify-content: center;
    padding: 0.75rem 0.5rem;
}

.side-nav.collapsed .side-nav-logout {
    display: none;
}

/* Tooltip on hover when collapsed */
.side-nav.collapsed .side-nav-link[aria-label]:hover::after,
.side-nav.collapsed .side-nav-link:hover::after {
    content: attr(data-tooltip);
    position: absolute;
    left: calc(var(--side-nav-collapsed-width) + 4px);
    top: 50%;
    transform: translateY(-50%);
    background: var(--text-color);
    color: var(--text-inverse);
    font-size: 0.75rem;
    font-weight: 500;
    padding: 0.375rem 0.75rem;
    border-radius: var(--border-radius-sm);
    white-space: nowrap;
    z-index: 200;
    pointer-events: none;
    box-shadow: var(--shadow-md);
}

/* Hover-to-expand (peek) — temporarily show full width on hover */
.side-nav.collapsed:hover {
    width: var(--side-nav-width);
    box-shadow: var(--shadow-lg);
    transition-delay: 0.2s;
}

.side-nav.collapsed:hover .side-nav-logo-text,
.side-nav.collapsed:hover .side-nav-group-label,
.side-nav.collapsed:hover .side-nav-label {
    opacity: 1;
    pointer-events: auto;
    transition-delay: 0.2s;
}

/* Keep badge hidden during peek — icon dot is enough */
.side-nav.collapsed:hover .side-nav-badge {
    opacity: 0;
}

/* During peek: show pin icon, hide chevron */
.side-nav.collapsed:hover .side-nav-toggle {
    /* no transform on button */
}

.side-nav.collapsed:hover .toggle-chevron {
    display: none;
}

.side-nav.collapsed:hover .toggle-pin {
    display: block;
}

.side-nav.collapsed:hover .side-nav-header {
    justify-content: space-between;
    padding: 1rem;
}

.side-nav.collapsed:hover .side-nav-logo {
    justify-content: flex-start;
}

.side-nav.collapsed:hover .side-nav-link {
    justify-content: flex-start;
    padding: 0.5rem 0.75rem;
}

.side-nav.collapsed:hover .side-nav-user {
    justify-content: flex-start;
    padding: 0.75rem 1rem;
}

.side-nav.collapsed:hover .side-nav-logout {
    display: flex;
}

/* Hide tooltips during peek (full labels are visible) */
.side-nav.collapsed:hover .side-nav-link:hover::after {
    display: none;
}

/* --------------------------------------------------------------------------
   Main content offset
   -------------------------------------------------------------------------- */
.app-layout {
    display: flex;
    flex-direction: column;
    margin-left: var(--side-nav-width);
    transition: margin-left var(--side-nav-transition);
    min-height: 100vh;
    min-height: 100dvh;
}

.app-layout.nav-collapsed {
    margin-left: var(--side-nav-collapsed-width);
}

/* Native shells: no side nav is rendered, so the side-nav offset must
   be zeroed at every breakpoint. Without this, iPad portrait at
   1620px (> the mobile 1023px breakpoint) keeps the desktop margin
   even though no side nav exists, pushing card content (auth, pricing,
   delete-account, etc.) to the right of where the user expects it.
   Keyed off [data-native-chrome], which base.html stamps for the shells
   that draw their own chrome — a Mac keeps the side nav and its offset. */
[data-native-chrome] .app-layout,
[data-native-chrome] .app-layout.nav-collapsed {
    margin-left: 0;
}

/* Native pages: no Django chrome at top. Add a small breathing-room
   padding so page content (page heading, content cards) doesn't sit
   flush against the device status bar or the Hotwire modal nav bar.
   1rem ≈ 16px which matches iOS spacing conventions (Apple's HIG
   minimum content padding). See v0.26.0 architectural plan. */
[data-native-chrome] body {
    padding-top: 1rem;
}

/* --------------------------------------------------------------------------
   Mobile top bar — visible < 1024px when side nav is hidden
   -------------------------------------------------------------------------- */
.mobile-top-bar {
    display: none;
    /* hidden on desktop, shown via media query */
    position: sticky;
    top: 0;
    z-index: 90;
    background: var(--card-background);
    border-bottom: 1px solid var(--border-color);
    padding: calc(0.75rem + env(safe-area-inset-top, 0px)) 1rem 0.75rem 1rem;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: var(--bottom-bar);
}

.mobile-top-bar .side-nav-logo {
    font-size: 1.125rem;
}

/* --------------------------------------------------------------------------
   Back arrow — only rendered on deep pages (non-tab-roots) by templates/base.html.
   Sits to the left of the Pensio wordmark; on iOS / Android the native shell
   has no nav bar of its own so this is the only back affordance other than
   swipe-from-left-edge.
   -------------------------------------------------------------------------- */
.mobile-top-bar-back {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin-right: 0.25rem;
    padding: 0;
    color: var(--text-color);
    background: transparent;
    border: none;
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    flex-shrink: 0;
}

.mobile-top-bar-back:hover {
    background: var(--primary-light);
}

.mobile-top-bar-back:active {
    background: var(--primary-light);
    transform: scale(0.95);
}

.mobile-top-bar-back:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

.mobile-top-bar-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* Notification bell in mobile top bar */
.mobile-notification-link {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--text-color);
    border-radius: var(--border-radius-sm);
}

.mobile-notification-link:hover {
    background: var(--primary-light);
}

/* ⚠️ **THE SAME BADGE, ON THE PHONE.** Changing only the desktop one would
   have left the two disagreeing about what an unread count means — which is how
   the app ends up with a red dot on one surface and a sage one on the other. */
.mobile-notification-badge {
    position: absolute;
    top: 4px;
    right: 4px;
    background: var(--primary);
    color: var(--text-inverse);
    font-size: 0.6rem;
    font-weight: 600;
    min-width: 14px;
    height: 14px;
    line-height: 14px;
    text-align: center;
    border-radius: 50%;
    padding: 0 3px;
}

/* --------------------------------------------------------------------------
   Mobile bottom nav bar — visible < 1024px
   -------------------------------------------------------------------------- */
.mobile-bottom-nav {
    display: none;
    /* shown via media query */
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: var(--card-background);
    border-top: 1px solid var(--border-color);
    padding-bottom: env(safe-area-inset-bottom, 0);
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.06);
    align-items: stretch;
    justify-content: space-around;
}

.mobile-bottom-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 2px;
    min-height: var(--bottom-bar);
    padding: 6px 4px 4px;
    background: none;
    border: none;
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 0.6875rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: color 0.15s ease, background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}

.mobile-bottom-nav-item:hover {
    color: var(--primary);
    background: var(--primary-light);
}

.mobile-bottom-nav-item:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
    border-radius: var(--border-radius-sm);
}

.mobile-bottom-nav-item.active {
    color: var(--primary);
    font-weight: 600;
}

.mobile-bottom-nav-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
}

.mobile-bottom-nav-icon svg {
    width: 20px;
    height: 20px;
}

.mobile-bottom-nav-label {
    line-height: 1;
}

/* --------------------------------------------------------------------------
   Mobile overlay nav
   -------------------------------------------------------------------------- */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 200;
    background: rgba(35, 40, 32, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    opacity: 0;
    transition: opacity 0.25s ease;
}

.mobile-nav-overlay.open {
    display: block;
    opacity: 1;
}

.mobile-nav-drawer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(300px, 85vw);
    background: var(--card-background);
    z-index: 201;
    display: flex;
    flex-direction: column;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: var(--shadow-lg);
    overflow-y: auto;
}

.mobile-nav-overlay.open+.mobile-nav-drawer,
.mobile-nav-drawer.open {
    transform: translateX(0);
}

.mobile-nav-drawer .side-nav-header {
    border-bottom: 1px solid var(--border-light);
}

.mobile-nav-drawer .side-nav-toggle {
    display: none;
}

/* Close button in drawer */
.mobile-nav-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    border-radius: var(--border-radius-sm);
    cursor: pointer;
    margin-left: auto;
}

.mobile-nav-close:hover {
    background: var(--primary-light);
    color: var(--primary-dark);
}

.mobile-nav-close:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   Responsive breakpoints
   -------------------------------------------------------------------------- */

/* Mobile: hide side nav, show mobile top bar + bottom nav */
@media (max-width: 1023px) {
    .side-nav {
        display: none;
    }

    .app-layout {
        margin-left: 0;
        padding-bottom: calc(var(--bottom-bar) + env(safe-area-inset-bottom, 0px));
    }

    .app-layout.nav-collapsed {
        margin-left: 0;
    }

    .mobile-top-bar {
        display: flex;
    }

    .mobile-bottom-nav {
        display: flex;
    }
}

/* Medium screens: auto-collapse sidebar to icon-only */
@media (min-width: 1024px) and (max-width: 1279px) {
    .side-nav {
        width: var(--side-nav-collapsed-width);
    }

    .side-nav .side-nav-logo-text,
    .side-nav .side-nav-group-label,
    .side-nav .side-nav-label {
        opacity: 0;
        pointer-events: none;
    }

    .side-nav .side-nav-toggle .toggle-chevron {
        transform: rotate(180deg);
    }

    .side-nav .side-nav-header {
        justify-content: center;
        padding: 1rem 0.5rem;
    }

    .side-nav .side-nav-logo {
        justify-content: center;
    }

    .side-nav .side-nav-link {
        justify-content: center;
        padding: 0.5rem;
    }

    .side-nav .side-nav-user {
        justify-content: center;
        padding: 0.75rem 0.5rem;
    }

    .side-nav .side-nav-logout {
        display: none;
    }

    .side-nav .side-nav-badge {
        top: 2px;
        left: 22px;
        min-width: 8px;
        height: 8px;
        font-size: 0;
        padding: 0;
        line-height: 0;
    }

    .app-layout,
    .app-layout.nav-collapsed {
        margin-left: var(--side-nav-collapsed-width);
    }

    /* Hover-to-expand at medium screens too */
    .side-nav:hover {
        width: var(--side-nav-width);
        box-shadow: var(--shadow-lg);
        transition-delay: 0.2s;
    }

    .side-nav:hover .side-nav-logo-text,
    .side-nav:hover .side-nav-group-label,
    .side-nav:hover .side-nav-label {
        opacity: 1;
        pointer-events: auto;
        transition-delay: 0.2s;
    }

    .side-nav:hover .side-nav-badge {
        opacity: 0;
    }

    .side-nav:hover .side-nav-toggle {
        /* no transform on button */
    }

    .side-nav:hover .toggle-chevron {
        display: none;
    }

    .side-nav:hover .toggle-pin {
        display: block;
    }

    .side-nav:hover .side-nav-header {
        justify-content: space-between;
        padding: 1rem;
    }

    .side-nav:hover .side-nav-logo {
        justify-content: flex-start;
    }

    .side-nav:hover .side-nav-link {
        justify-content: flex-start;
        padding: 0.5rem 0.75rem;
    }

    .side-nav:hover .side-nav-user {
        justify-content: flex-start;
        padding: 0.75rem 1rem;
    }

    .side-nav:hover .side-nav-logout {
        display: flex;
    }

    /* Hide tooltips during hover-expand */
    .side-nav:hover .side-nav-link:hover::after {
        display: none;
    }
}

/* Desktop: hide mobile elements */
@media (min-width: 1024px) {
    .mobile-top-bar {
        display: none;
    }

    .mobile-bottom-nav {
        display: none;
    }

    .mobile-nav-overlay,
    .mobile-nav-drawer {
        display: none !important;
    }
}