/* Default: sidebar visible */
#sidebar {
    width: 250px;
    transition: all 0.3s ease;
}

    /* Sidebar hidden (mobile collapsed state) */
    #sidebar.collapsed {
        margin-left: -250px;
    }

/* Content shifts when sidebar is visible */
#content {
    margin-left: 250px;
    transition: all 0.3s ease;
}

    /* Content full width when sidebar collapsed */
    #content.expanded {
        margin-left: 0;
    }

/* Small screen behavior */
@media (max-width: 768px) {
    #sidebar {
        position: fixed;
        top: 0;
        bottom: 0;
        z-index: 2000;
        background: #ffffff;
        border-right: 1px solid #ddd;
    }

    #content {
        margin-left: 0 !important;
    }
}