/* ============================================================
   Table — Component
   Yaz Design System v1.0
   ============================================================ */

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

/* ── Header ── */
.table thead {
  border-bottom: var(--border-width-md) solid var(--color-border-primary);
}

.table th {
  padding: var(--space-3) var(--space-4);
  text-align: start;
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wider);
  white-space: nowrap;
  user-select: none;
}

/* ── Body ── */
.table td {
  padding: var(--space-3) var(--space-4);
  color: var(--color-text-primary);
  border-bottom: var(--border-width-thin) solid var(--color-border-primary);
  vertical-align: middle;
}

/* ── Row Hover ── */
.table-hover tbody tr:hover {
  background: var(--color-bg-tertiary);
}

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

.table-striped tbody tr:nth-child(even):hover {
  background: var(--color-bg-secondary);
}

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

/* ── Bordered ── */
.table-bordered {
  border: var(--border-width-thin) solid var(--color-border-primary);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.table-bordered th,
.table-bordered td {
  border: var(--border-width-thin) solid var(--color-border-primary);
}

/* ── Table Container (scroll wrapper) ── */
.table-container {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

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

.table th.sortable:hover {
  color: var(--color-text-primary);
}

.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 td {
  text-align: center;
  padding: var(--space-12);
  color: var(--color-text-tertiary);
}