/* Tables
 * Data table styling with alternating rows, sticky header,
 * and responsive horizontal scroll.
 */

@layer components {
  .table-wrap {
    overflow-x: auto;
  }

  table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
  }

  th, td {
    padding: var(--block-space-s) var(--inline-space);
    text-align: start;
    vertical-align: top;
  }

  th {
    font-weight: 600;
    color: var(--color-ink-muted);
    border-block-end: 2px solid var(--color-border);
    white-space: nowrap;
    position: sticky;
    top: 0;
    background: var(--color-canvas);
    z-index: 1;
  }

  td {
    border-block-end: 1px solid var(--color-border);
  }

  /* Alternating rows */
  tbody tr:nth-child(even) {
    background: color-mix(in oklch, var(--color-surface) 50%, transparent);
  }

  /* Hover row */
  tbody tr:hover {
    background: color-mix(in oklch, var(--color-link) 6%, transparent);
  }

  /* Numeric columns */
  td.numeric,
  th.numeric {
    text-align: end;
    font-variant-numeric: tabular-nums;
  }

  /* Compact variant */
  .table--compact th,
  .table--compact td {
    padding: 0.25rem var(--inline-space-s);
    font-size: 0.875rem;
  }

  /* Empty state */
  .table__empty {
    text-align: center;
    color: var(--color-ink-muted);
    padding: var(--block-space-l);
  }
}