/*
 * Site-wide tabular data component.
 *
 * Zebra-free, hover-reactive rows. Used wherever structured rows
 * and columns beat a card grid — pricing tables on /gastvisser,
 * reservation listings in /admin, comparison tables on /lid-worden.
 * First real production consumer is the /gastvisser tarieven
 * section; the /design-system reference page demos it as well.
 *
 * Previously named .ds-table. Renamed to .data-table so the name
 * reflects the pattern (tabular data) rather than the first demo
 * location. See docs/solutions/best-practices/shared-css-classes-
 * live-outside-pages-dir-2026-04-11.md for the rationale.
 */

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

.data-table th {
  text-align: left;
  font-size: var(--fs-xs);
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--muted);
  font-weight: 600;
  padding: .625rem .875rem;
  border-bottom: 2px solid var(--sand);
}

.data-table td {
  padding: .7rem .875rem;
  border-bottom: 1px solid var(--stone);
  vertical-align: middle;
}

.data-table tr:hover td { background: var(--stone); }

.data-table td:first-child { font-weight: 600; }