/**
 * Table Components
 *
 * Basic table styles with striped, hover, and bordered variants.
 */

/* ==========================================================================
   Base Table
   ========================================================================== */

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

.table th,
.table td {
  padding: var(--space-3) var(--space-4);
  text-align: left;
  vertical-align: middle;
}

.table th {
  font-weight: var(--font-semibold);
  color: var(--color-text-secondary);
  background-color: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
}

.table td {
  border-bottom: 1px solid var(--color-border);
}

/* ==========================================================================
   Striped Table
   ========================================================================== */

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

/* ==========================================================================
   Hover Table
   ========================================================================== */

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

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

/* ==========================================================================
   Bordered Table
   ========================================================================== */

.table-bordered {
  border: 1px solid var(--color-border);
}

.table-bordered th,
.table-bordered td {
  border: 1px solid var(--color-border);
}

/* ==========================================================================
   Compact Table
   ========================================================================== */

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

/* ==========================================================================
   Numeric Cells
   ========================================================================== */

.table .cell-numeric {
  font-family: var(--font-mono);
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   Status Cells
   ========================================================================== */

.table .cell-status {
  width: 1%;
  white-space: nowrap;
}

/* ==========================================================================
   Responsive Table
   ========================================================================== */

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}