/**
 * Tables - Style Notion
 */

.table-container {
    overflow-x: auto;
    border: 1px solid var(--color-border-default);
    border-radius: var(--radius-lg);
}

.table {
    width: 100%;
    border-collapse: collapse;
}

.table th,
.table td {
    padding: var(--spacing-3) var(--spacing-4);
    text-align: left;
    border-bottom: 1px solid var(--color-border-default);
}

.table th {
    background: var(--color-bg-secondary);
    font-weight: var(--font-weight-medium);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    white-space: nowrap;
}

.table th:first-child {
    border-radius: var(--radius-lg) 0 0 0;
}

.table th:last-child {
    border-radius: 0 var(--radius-lg) 0 0;
}

.table tbody tr {
    transition: background var(--transition-fast);
}

.table tbody tr:hover {
    background: var(--color-bg-hover);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:last-child td:first-child {
    border-radius: 0 0 0 var(--radius-lg);
}

.table tbody tr:last-child td:last-child {
    border-radius: 0 0 var(--radius-lg) 0;
}

/* Table cell alignments */
.table .text-center { text-align: center; }
.table .text-right { text-align: right; }

/* Table cell widths */
.table .w-auto { width: auto; }
.table .w-full { width: 100%; }
.table .w-min { width: 1%; white-space: nowrap; }

/* Sortable columns */
.table th.sortable {
    cursor: pointer;
    user-select: none;
}

.table th.sortable:hover {
    background: var(--color-bg-tertiary);
}

.table th.sortable::after {
    content: '';
    display: inline-block;
    width: 16px;
    height: 16px;
    margin-left: var(--spacing-1);
    vertical-align: middle;
    opacity: 0.3;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M8 10l4-4 4 4M16 14l-4 4-4-4'/%3E%3C/svg%3E");
    background-size: contain;
}

.table th.sortable.asc::after,
.table th.sortable.desc::after {
    opacity: 1;
}

.table th.sortable.asc::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M8 14l4-4 4 4'/%3E%3C/svg%3E");
}

.table th.sortable.desc::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2'%3E%3Cpath d='M8 10l4 4 4-4'/%3E%3C/svg%3E");
}

/* Performance table specific */
.perf-table .perf-value {
    font-family: var(--font-family-mono);
    font-weight: var(--font-weight-medium);
}

.perf-table .perf-points {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    padding: var(--spacing-1) var(--spacing-2);
    background: var(--color-accent-light);
    color: var(--color-accent-primary);
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
}

.perf-table .perf-ecart.positive {
    color: var(--color-success);
}

.perf-table .perf-ecart.negative {
    color: var(--color-error);
}

/* Empty state */
.table-empty {
    padding: var(--spacing-12) var(--spacing-4);
    text-align: center;
    color: var(--color-text-secondary);
}

.table-empty-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--spacing-4);
    color: var(--color-text-tertiary);
}

/* Responsive table */
@media (max-width: 640px) {
    .table-responsive thead {
        display: none;
    }

    .table-responsive tbody tr {
        display: block;
        margin-bottom: var(--spacing-3);
        border: 1px solid var(--color-border-default);
        border-radius: var(--radius-lg);
        overflow: hidden;
    }

    .table-responsive tbody td {
        display: flex;
        justify-content: space-between;
        padding: var(--spacing-2) var(--spacing-3);
        border-bottom: 1px solid var(--color-border-default);
    }

    .table-responsive tbody td::before {
        content: attr(data-label);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-secondary);
    }

    .table-responsive tbody td:last-child {
        border-bottom: none;
    }
}