.table-responsive {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin: clamp(0.5rem, 2vw, 1.25rem) 0;
    background: var(--card);
    border-radius: var(--radius);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    overflow: hidden;
    border: none;
    font-size: clamp(0.75rem, 1.5vw, 1rem);
}

th, td {
    padding: clamp(0.375rem, 1.5vw, 0.75rem) clamp(0.5rem, 2vw, 1rem);
    text-align: left;
    border: none;
}

th {
    background: var(--bg);
    color: var(--muted);
    font-weight: 600;
    font-size: clamp(0.5625rem, 1.25vw, 0.875rem);
}

tbody tr:nth-child(even) {
    background: rgba(107, 33, 168, 0.02);
}

tbody tr:nth-child(odd) {
    background: var(--card);
}

tbody tr:hover {
    background: rgba(107, 33, 168, 0.08);
    transform: translateY(-1px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

caption {
    caption-side: top;
    font-weight: 600;
    margin-bottom: clamp(0.25rem, 1vw, 0.625rem);
    color: var(--muted);
    text-align: center;
    font-size: clamp(0.75rem, 1.75vw, 1.125rem);
}

/* Responsive adjustments for very small screens */
@media (max-width: 480px) {
    .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    table {
        font-size: clamp(0.6875rem, 2vw, 0.85rem);
    }
    
    th, td {
        padding: clamp(0.3125rem, 1.25vw, 0.5rem) clamp(0.4375rem, 1.75vw, 0.75rem);
    }
    
    th {
        font-size: clamp(0.5rem, 1.5vw, 0.625rem);
    }
    
    caption {
        font-size: clamp(0.625rem, 2vw, 0.875rem);
    }
}

@media (max-width: 375px) {
    table {
        font-size: clamp(0.625rem, 2.25vw, 0.8rem);
    }
    
    th, td {
        padding: clamp(0.25rem, 1vw, 0.4375rem) clamp(0.375rem, 1.5vw, 0.6875rem);
    }
    
    th {
        font-size: clamp(0.4375rem, 1.75vw, 0.5625rem);
    }
    
    caption {
        font-size: clamp(0.5625rem, 2.25vw, 0.8125rem);
    }
}