/* Instagram-style Desktop Sidebar Override */
@media (min-width: 1024px) {
    .main-content.with-nav { 
        margin-left: 72px !important;
        width: calc(100% - 72px) !important;
        transition: margin-left 0.3s ease, width 0.3s ease !important;
    }
    .top-nav {
        width: 72px !important;
        transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease !important;
        overflow-x: hidden !important;
    }
    .top-nav:hover {
        width: 244px !important;
        box-shadow: var(--shadow-lg) !important;
    }
    .nav-container { 
        width: 220px !important; 
    }
    .nav-logo { display: flex !important; align-items: center !important; }
    .nav-logo-img { min-width: 28px !important; transition: transform 0.3s !important; }
    .nav-logo-text { 
        opacity: 0 !important; 
        visibility: hidden !important; 
        transform: translateX(-10px) !important;
        transition: opacity 0.3s, visibility 0.3s, transform 0.3s !important; 
        white-space: nowrap !important;
    }
    .top-nav:hover .nav-logo-text {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }
    .nav-actions { width: 220px !important; }
    .nav-action-btn { 
        display: flex !important; align-items: center !important;
        transition: background 0.2s, color 0.2s !important;
    }
    .nav-action-btn svg { margin-right: 16px !important; transition: transform 0.2s !important; }
    
    /* Special fix for nav-profile button */
    .nav-profile { display: flex !important; align-items: center !important; }
    .nav-profile .avatar-sm { margin-right: 14px !important; min-width: 28px !important; transition: transform 0.2s !important; }
    
    .nav-action-btn:hover svg, .nav-action-btn:hover .avatar-sm { transform: scale(1.1) !important; }
    
    .nav-label { 
        display: inline-block !important; 
        opacity: 0 !important; 
        visibility: hidden !important; 
        transform: translateX(-10px) !important;
        transition: opacity 0.3s, visibility 0.3s, transform 0.3s !important; 
        white-space: nowrap !important;
    }
    .top-nav:hover .nav-label {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
    }
    .nav-badge { 
        position: absolute !important; 
        top: 8px !important; 
        left: 26px !important; 
        margin-left: 0 !important; 
    }
}