/*
 * Table
 * Features: sortable headers, striped rows, compact/dense
 */

.table-wrapper {
  width: 100%;
  overflow-x: auto;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

.table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.table th {
  text-align: left;
  padding: var(--space-3) var(--space-4);
  font-weight: 600;
  color: var(--color-text);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

.table td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
}

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

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

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

/* Compact */
.table-compact th,
.table-compact td {
  padding: var(--space-2) var(--space-3);
}

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

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

.table th.sortable::after {
  content: '↕';
  margin-left: var(--space-1);
  opacity: 0.3;
}

.table th.sort-asc::after {
  content: '↑';
  opacity: 1;
}

.table th.sort-desc::after {
  content: '↓';
  opacity: 1;
}

/* Empty state */
.table-empty {
  padding: var(--space-8) var(--space-4);
  text-align: center;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}