/* Mobile Sidebar Fix - Ensure sidebar starts collapsed */

/* Force sidebar to be hidden by default on all screens */
.sidebar {
    transform: translateX(-100%) !important;
    will-change: transform;
}

/* Only show when explicitly active */
.sidebar.active {
    transform: translateX(0) !important;
}

/* Ensure content takes full width by default */
#content {
    margin-left: 0 !important;
    width: 100% !important;
}

/* Content shifts right when sidebar is active on desktop */
@media (min-width: 769px) {
    #content.active {
        margin-left: 250px !important;
        width: calc(100% - 250px) !important;
    }
}

/* Mobile specific adjustments */
@media (max-width: 768px) {
    #content.active {
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Add overlay when sidebar is open on mobile */
    .sidebar.active::after {
        content: '';
        position: fixed;
        top: 0;
        left: 250px;
        width: calc(100vw - 250px);
        height: 100vh;
        background: rgba(0, 0, 0, 0.5);
        z-index: -1;
    }
}

/* Smooth transitions for better UX */
.sidebar,
#content {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}