.table-responsive {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 1rem;
    border-radius: 8px;
    box-shadow: 0 0 0 1px rgba(0,0,0,0.05);
}

    .table-responsive table {
        min-width: 600px;
        width: 100%;
        margin-bottom: 0;
    }

.modern-table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

    .modern-table th, .modern-table td {
        white-space: nowrap;
        padding: 0.75rem 1rem;
        vertical-align: middle;
    }

    .modern-table thead th {
        position: sticky;
        top: 0;
        background-color: white;
        z-index: 10;
    }

    .modern-table thead {
        background-color: var(--white-transparent);
        font-weight: 600;
        border-bottom: 2px solid var(--primary-light);
    }