@media (max-width: 768px) {
    #sidebar {
        width: 280px !important;
        transform: translateX(-100%);
        transition: transform 0.3s ease-in-out;
        box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    #sidebar.mobile-open {
        transform: translateX(0);
        box-shadow: 2px 0 15px rgba(0, 0, 0, 0.2);
    }
    
    #sidebar.mobile-closed {
        transform: translateX(-100%);
    }
    
    #sidebar.open,
    #sidebar.closed {
        width: 280px !important;
        transform: translateX(-100%);
    }
    
    #main-content {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    #mobile-sidebar-overlay {
        display: block !important;
        z-index: 35 !important;
    }
    
    #sidebar {
        z-index: 40 !important;
    }
}

@media (min-width: 769px) {
    #mobile-sidebar-overlay {
        display: none !important;
    }
    
    #sidebar.mobile-open,
    #sidebar.mobile-closed {
        transform: translateX(0) !important;
        width: auto !important;
    }
    
    #sidebar.mobile-open {
        width: 14rem !important;
    }
    
    #sidebar.mobile-closed {
        width: 4rem !important;
    }

    #sidebar .menu-text:not(img) {    
        opacity: 0;
        visibility: hidden;
        display: none;
    }
    
    #sidebar.open .menu-text:not(img) {
        opacity: 1;
        visibility: visible;
        display: inline-block;
    }
}

#sidebar {
    transition: transform 0.15s ease-in-out, width 0.15s ease-in-out !important;
}

#sidebar.closed {
    width: 4rem;
}

#sidebar.open {
    width: 14rem;
}