/* ============================================================
   COMPONENT: data-table
   BEM Block: .data-table
   ============================================================ */

/* ---- Scroll wrapper (mobile horizontal scroll) ---- */
.table-wrapper {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--radius-md);
}

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

/* ---- Element: head ---- */
.data-table thead {
  background-color: var(--color-neutral-50);
}

/* ---- Element: th ---- */
.data-table th {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--font-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-subtle);
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}

/* ---- Element: td ---- */
.data-table td {
  padding: var(--space-3);
  border-bottom: 1px solid var(--color-neutral-100);
  color: var(--color-text);
  vertical-align: middle;
}

/* ---- No border on last row ---- */
.data-table tbody tr:last-child td {
  border-bottom: none;
}

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

.data-table tbody tr:hover {
  background-color: var(--color-neutral-50);
}

/* ---- Element: actions cell ---- */
.data-table__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-content: flex-end;
  white-space: nowrap;
}

/* ---- Element: numeric cell (right-aligned) ---- */
.data-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-medium);
}

/* ---- Modifier: compact ---- */
.data-table--compact th,
.data-table--compact td {
  padding: var(--space-1) var(--space-2);
}

@media (min-width: 768px) {
  .data-table th,
  .data-table td {
    padding-inline: var(--space-4);
  }
}