@media (max-width: 768px) {
    .main-content {
        width: 100vw;
        overflow-x: hidden;
    }

    .sidebar.open ~ .main-content {
        transform: translateX(250px);
        width: calc(100vw - 250px);
    }

    .sidebar {
        position: fixed;
        left: 0;
        top: 0;
        height: 100vh;
        width: 250px;
        background: linear-gradient(to bottom, var(--primary-color), var(--primary-dark));
        z-index: 1000;
        transform: translateX(-100%);
    }

        .sidebar.open {
            transform: translateX(0);
        }

        .sidebar.closed {
            transform: translateX(-100%);
        }

    .sidebar-toggle {
        display: inline-block;
    }

    .main-content {
        padding-left: 0 !important;
    }

    .table-responsive {
        border-radius: 0;
    }

    .card-body {
        padding: 1rem 0;
    }
}

@media (max-width: 480px) {
    .custom-modal {
        margin: 0 12px;
    }

    .user-modal {
        max-width: 90%;
        margin: 0 16px;
        border-radius: 14px;
    }

    .user-modal-body {
        padding: 1rem;
    }

    .user-modal-footer {
        padding: 0.75rem 1rem;
    }

    .form-group.floating .form-control {
        padding-left: 40px;
    }

    .form-group.floating label {
        font-size: 0.8rem;
        left: 40px;
    }
}

@media (min-width: 768px) {
    .sidebar-overlay {
        display: none;
    }
}