/* =====================================================================
   AESTHETIC INTEL — PERSISTENT DESKTOP SIDEBAR V5
   Loaded AFTER shell-v4.css.

   Desktop intent:
   - 76px permanent dark icon rail.
   - Expanded information panel sits BESIDE the rail.
   - Expanded sidebar is part of the page layout; it does NOT overlay content.
   - No desktop scrim / dimmed dashboard.
   - Main content shifts smoothly when the user explicitly collapses/expands.
   - Mobile keeps the existing off-canvas drawer behavior.
   ===================================================================== */

:root {
    --ai-sidebar-rail: 76px;
    --ai-sidebar-expanded: 356px;
    --ai-sidebar-panel: #eef3f6;
    --ai-sidebar-panel-hover: #e8eff3;
    --ai-sidebar-panel-active: #e3edf2;
    --ai-sidebar-panel-border: #d8e2e7;
    --ai-sidebar-rail-bg: #151a1f;
    --ai-sidebar-rail-hover: #1d262c;
    --ai-sidebar-rail-active: #253640;
    --ai-sidebar-text: #34444e;
    --ai-sidebar-muted: #89969e;
    --ai-sidebar-accent: #8fb8c9;
    --ai-sidebar-layout-ease: 250ms cubic-bezier(.22, 1, .36, 1);
}

@media (min-width: 1041px) {

    /*
     * The sidebar owns a real grid column.
     * This is the key difference from the old overlay/drawer treatment.
     */
    body.app-body .app-shell,
    body.app-body:not(.sidebar-expanded) .app-shell {
        display: grid !important;
        grid-template-columns:
            var(--ai-sidebar-rail) minmax(0, 1fr) !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: none !important;
        min-height: 100vh !important;
        margin: 0 !important;
        overflow: visible !important;
        transition:
            grid-template-columns var(--ai-sidebar-layout-ease) !important;
    }

    body.app-body.sidebar-expanded .app-shell {
        grid-template-columns:
            var(--ai-sidebar-expanded) minmax(0, 1fr) !important;
    }

    /*
     * Sidebar is a normal sticky grid item, not an overlay.
     */
    body.app-body #sidebar.sidebar,
    body.app-body.sidebar-expanded #sidebar.sidebar,
    body.app-body:not(.sidebar-expanded) #sidebar.sidebar {
        position: sticky !important;
        top: 0 !important;
        left: auto !important;
        z-index: 40 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        height: 100vh !important;
        min-height: 100vh !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        border: 0 !important;
        border-right: 1px solid rgba(15, 29, 38, .10) !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        transform: none !important;
        backdrop-filter: none !important;
        isolation: isolate !important;
        transition:
            width var(--ai-sidebar-layout-ease),
            background-color var(--ai-sidebar-layout-ease) !important;
    }

    body.app-body:not(.sidebar-expanded) #sidebar.sidebar {
        background: var(--ai-sidebar-rail-bg) !important;
    }

    body.app-body.sidebar-expanded #sidebar.sidebar {
        background:
            linear-gradient(90deg,
                var(--ai-sidebar-rail-bg) 0,
                var(--ai-sidebar-rail-bg) var(--ai-sidebar-rail),
                var(--ai-sidebar-panel) var(--ai-sidebar-rail),
                var(--ai-sidebar-panel) 100%) !important;
        box-shadow: none !important;
    }

    /*
     * The overlay scrim must NEVER be visible on desktop.
     * It is only appropriate for the mobile drawer.
     */
    body.app-body .sidebar-scrim,
    body.app-body.sidebar-expanded .sidebar-scrim,
    body.app-body:not(.sidebar-expanded) .sidebar-scrim {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        backdrop-filter: none !important;
    }

    /*
     * Main content lives in the second grid column.
     * There is no dimming, absolute positioning or overlay offset.
     */
    body.app-body .app-shell>main,
    body.app-body .app-shell>.app-content,
    body.app-body .main-content,
    body.app-body .app-content {
        position: relative !important;
        z-index: 1 !important;
        min-width: 0 !important;
        width: 100% !important;
        opacity: 1 !important;
        filter: none !important;
        transform: none !important;
        pointer-events: auto !important;
    }

    /*
     * Brand panel
     */
    body.sidebar-expanded #sidebar .sidebar-brand,
    body.sidebar-expanded #sidebar .brand {
        grid-template-columns:
            var(--ai-sidebar-rail) minmax(0, 1fr) !important;
        min-height: 86px !important;
        border-bottom: 1px solid transparent !important;
    }

    body.sidebar-expanded #sidebar .brand-copy {
        padding: 0 26px 0 20px !important;
    }

    body.sidebar-expanded #sidebar .brand-copy strong {
        color: #182128 !important;
        font-size: 16px !important;
        font-weight: 760 !important;
        letter-spacing: -.025em !important;
    }

    body.sidebar-expanded #sidebar .brand-copy small {
        margin-top: 4px !important;
        color: #7f8c94 !important;
        font-size: 10.5px !important;
        font-weight: 580 !important;
    }

    /*
     * Keep the explicit collapse control inside the dark rail.
     */
    body.app-body #sidebar .sidebar-desktop-toggle,
    body.app-body.sidebar-expanded #sidebar .sidebar-desktop-toggle,
    body.app-body:not(.sidebar-expanded) #sidebar .sidebar-desktop-toggle {
        top: 83px !important;
        left: 21px !important;
        right: auto !important;
        z-index: 8 !important;
        width: 34px !important;
        height: 34px !important;
        min-width: 34px !important;
        min-height: 34px !important;
        color: #adbbc2 !important;
        background: rgba(255, 255, 255, .015) !important;
        border: 1px solid rgba(255, 255, 255, .12) !important;
        border-radius: 10px !important;
        box-shadow: none !important;
    }

    body.app-body #sidebar .sidebar-desktop-toggle:hover,
    body.app-body #sidebar .sidebar-desktop-toggle:focus-visible {
        color: #ffffff !important;
        background: var(--ai-sidebar-rail-hover) !important;
        border-color: rgba(255, 255, 255, .23) !important;
    }

    /*
     * Navigation gets a quieter, product-style information panel.
     */
    body.sidebar-expanded #sidebar .nav-list {
        margin-top: 42px !important;
        padding-bottom: 14px !important;
        scrollbar-color: #b9c7ce transparent !important;
    }

    body.sidebar-expanded #sidebar .nav-section-label {
        margin:
            18px 22px 7px calc(var(--ai-sidebar-rail) + 20px) !important;
        color: #929fa6 !important;
        font-size: 9px !important;
        font-weight: 800 !important;
        letter-spacing: .15em !important;
    }

    body.sidebar-expanded #sidebar .nav-link,
    body.sidebar-expanded #sidebar .nav-group-title {
        grid-template-columns:
            var(--ai-sidebar-rail) minmax(0, 1fr) 30px !important;
        min-height: 46px !important;
        color: var(--ai-sidebar-text) !important;
        font-size: 13px !important;
        font-weight: 650 !important;
    }

    /*
     * Hover/active treatment:
     * - icon state stays in the dark rail
     * - text state is a clean tint in the adjacent panel
     */
    body.sidebar-expanded #sidebar .nav-link:hover,
    body.sidebar-expanded #sidebar .nav-group-title:hover {
        background:
            linear-gradient(90deg,
                transparent 0,
                transparent var(--ai-sidebar-rail),
                var(--ai-sidebar-panel-hover) var(--ai-sidebar-rail),
                var(--ai-sidebar-panel-hover) 100%) !important;
    }

    body.sidebar-expanded #sidebar .nav-link.active,
    body.sidebar-expanded #sidebar .nav-group.open>.nav-group-title {
        background:
            linear-gradient(90deg,
                transparent 0,
                transparent var(--ai-sidebar-rail),
                var(--ai-sidebar-panel-active) var(--ai-sidebar-rail),
                var(--ai-sidebar-panel-active) 100%) !important;
    }

    body.app-body #sidebar .nav-link::before,
    body.app-body #sidebar .nav-group-title::before {
        left: 18px !important;
        width: 40px !important;
        height: 38px !important;
        border-radius: 10px !important;
    }

    body.app-body #sidebar .nav-link:hover::before,
    body.app-body #sidebar .nav-group-title:hover::before {
        background: var(--ai-sidebar-rail-hover) !important;
    }

    body.app-body #sidebar .nav-link.active::before,
    body.app-body #sidebar .nav-group.open>.nav-group-title::before {
        background: var(--ai-sidebar-rail-active) !important;
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, .06) !important;
    }

    body.app-body #sidebar .nav-link::after,
    body.app-body #sidebar .nav-group-title::after {
        width: 4px !important;
        height: 24px !important;
        background: var(--ai-sidebar-accent) !important;
    }

    body.sidebar-expanded #sidebar .nav-text {
        max-width: 220px !important;
        color: var(--ai-sidebar-text) !important;
    }

    body.sidebar-expanded #sidebar .nav-group-title>.nav-icon:last-child {
        margin-right: 17px !important;
        color: #819099 !important;
    }

    body.sidebar-expanded #sidebar .nav-group.open>.nav-submenu {
        margin:
            4px 18px 9px calc(var(--ai-sidebar-rail) + 20px) !important;
        padding-left: 12px !important;
        border-left-color: #cbd8de !important;
    }

    body.sidebar-expanded #sidebar .nav-sublink {
        min-height: 36px !important;
        padding: 7px 10px !important;
        color: #65747d !important;
        border-radius: 8px !important;
    }

    body.sidebar-expanded #sidebar .nav-sublink:hover,
    body.sidebar-expanded #sidebar .nav-sublink.active {
        color: #213039 !important;
        background: rgba(255, 255, 255, .68) !important;
    }

    /*
     * User area mirrors the rest of the two-column navigation.
     */
    body.sidebar-expanded #sidebar .sidebar-user {
        min-height: 88px !important;
        grid-template-columns:
            var(--ai-sidebar-rail) minmax(0, 1fr) 46px !important;
        border-top: 1px solid var(--ai-sidebar-panel-border) !important;
        background:
            linear-gradient(90deg,
                transparent 0,
                transparent var(--ai-sidebar-rail),
                rgba(255, 255, 255, .46) var(--ai-sidebar-rail),
                rgba(255, 255, 255, .46) 100%) !important;
    }

    body.sidebar-expanded #sidebar .sidebar-user-copy {
        padding: 0 10px 0 20px !important;
        max-width: none !important;
    }

    body.sidebar-expanded #sidebar .sidebar-user-copy strong {
        color: #1d2930 !important;
        font-size: 12.5px !important;
        font-weight: 750 !important;
    }

    body.sidebar-expanded #sidebar .sidebar-user-copy small {
        margin-top: 3px !important;
        color: #7e8b93 !important;
        font-size: 9.5px !important;
    }

    body.sidebar-expanded #sidebar .sidebar-profile-progress {
        margin-top: 7px !important;
    }

    body.sidebar-expanded #sidebar .sidebar-logout {
        margin-right: 10px !important;
        color: #6f7f88 !important;
        background: rgba(255, 255, 255, .58) !important;
        border-color: #ccd8de !important;
    }

    /*
     * Collapse state remains a clean icon rail.
     */
    body:not(.sidebar-expanded) #sidebar .brand-copy,
    body:not(.sidebar-expanded) #sidebar .nav-text,
    body:not(.sidebar-expanded) #sidebar .nav-section-label,
    body:not(.sidebar-expanded) #sidebar .sidebar-user-copy,
    body:not(.sidebar-expanded) #sidebar .sidebar-logout {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    body:not(.sidebar-expanded) #sidebar .nav-submenu {
        display: none !important;
    }
}

/*
 * Mobile/tablet intentionally stays with the existing off-canvas drawer.
 * The persistent split layout is desktop-only.
 */