/**
 * GTPlay - Data Tables
 *
 * Styles for custom responsive data tables, including sortable headers
 * and integration with the dynamic content loader.
 *
 * @package GTPlay Astra Child
 */

/* --- Table Container --- */
.gtplay-table-container {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-bottom: 2rem;
    box-shadow: var(--gtplay-shadow-card);
    border-radius: var(--gtplay-border-radius);
    background-color: var(--gtplay-bg-surface);
    border: 1px solid var(--gtplay-border-subtle);
}

/* --- Base Table Style --- */
.gtplay-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95em;
    text-align: left;
    min-width: 100%;
}

/* Headers */
.gtplay-table thead {
    background-color: var(--gtplay-bg-element);
    border-bottom: 2px solid var(--gtplay-primary);
}

.gtplay-table th {
    color: var(--gtplay-text-primary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.75rem;
    letter-spacing: 0.05em;
    padding: 1rem;
    white-space: nowrap;
}

/* Body Cells */
.gtplay-table td {
    padding: 0.8rem 1rem;
    color: var(--gtplay-text-secondary);
    border-bottom: 1px solid var(--gtplay-border-subtle);
}

/* Row Effects */
.gtplay-table tbody tr:hover {
    background-color: var(--gtplay-hover-bg);
}

/* --- Utility Classes --- */
.gtplay-table td.numeric {
    font-variant-numeric: tabular-nums;
}

.gtplay-table .text-center {
    text-align: center;
}

/* --- Sortable Headers --- */
.gtplay-table th[data-sort-type],
.gtplay-table th[data-sortable] {
    cursor: pointer;
    position: relative;
    padding-right: 1.5rem;
    user-select: none;
    transition: background-color 0.2s ease;
}

.gtplay-table th[data-sort-type]:hover,
.gtplay-table th[data-sortable]:hover {
    background-color: var(--gtplay-bg-element-hover);
}

.gtplay-table th[data-sort-type]::after,
.gtplay-table th[data-sortable]::after {
    content: '↕';
    position: absolute;
    right: 0.5rem;
    opacity: 0.3;
    font-size: 0.8em;
}

.gtplay-table th.sort-asc::after {
    content: '↑';
    opacity: 1;
    color: var(--gtplay-primary);
}

.gtplay-table th.sort-desc::after {
    content: '↓';
    opacity: 1;
    color: var(--gtplay-primary);
}

/* --- Responsive Adaptations --- */
@media (max-width: 640px) {
    .gtplay-table th, 
    .gtplay-table td {
        padding: 0.75rem 1rem;
    }
}