/* === Tables ===
 * Common table styles extracted from course.css, event.css.
 */

/* ── Base table container ───────────────────── */
.table-wrapper {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ── Table ──────────────────────────────────── */
.table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-primary);
    font-size: var(--text-sm);
    line-height: var(--leading-normal);
    color: var(--color-text);
}

/* ── Header ─────────────────────────────────── */
.table thead th {
    padding: 12px var(--spacing-md);
    background: var(--color-primary);
    color: var(--color-white);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

/* ── Body ───────────────────────────────────── */
.table tbody td {
    padding: 10px var(--spacing-md);
    border-bottom: 1px solid var(--color-border);
}

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

/* ── Striped variant ────────────────────────── */
.table--striped tbody tr:nth-child(even) {
    background: var(--color-bg-secondary);
}

/* ── Compact variant ────────────────────────── */
.table--compact thead th,
.table--compact tbody td {
    padding: 6px var(--spacing-sm);
}

/* ── Sortable header ────────────────────────── */
.table th.sortable {
    cursor: pointer;
    user-select: none;
}
.table th.sortable::after {
    content: " ⇅";
    opacity: 0.3;
}
.table th.sortable.sorted-asc::after {
    content: " ↑";
    opacity: 1;
}
.table th.sortable.sorted-desc::after {
    content: " ↓";
    opacity: 1;
}

/* ── Empty state ────────────────────────────── */
.table-empty {
    padding: var(--spacing-2xl) var(--spacing-md);
    text-align: center;
    color: var(--color-text-muted);
    font-style: italic;
}