/* Make tables usable on small screens (scroll, not squish) */
.table-responsive {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-block: var(--space-4);
}

/* Base table styling (Drupal often outputs .responsive-enabled, .sticky-enabled etc.) */
table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

caption {
  text-align: left;
  font-weight: 700;
  margin-bottom: var(--space-3);
}

th,
td {
  padding: var(--table-cell-pad-y) var(--table-cell-pad-x);
  border: 1px solid var(--table-border);
  vertical-align: top;
}

/* Headings: don’t rely on colour only; make them clearly headings */
th {
  background: var(--table-head-bg);
  text-align: left;
  font-weight: 700;
}

/* Zebra striping improves scanability without harming semantics */
tbody tr:nth-child(even) td {
  background: var(--table-row-alt-bg);
}

/* Links remain obvious inside table cells */
td a,
th a {
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

/* Sort indicators / clickable headers in admin tables often appear as links */
th a {
  color: inherit;
}

/* Focus visibility inside tables */
table :focus-visible {
  outline-offset: 2px;
}

/* Improve readability for dense tables */
td,
th {
  line-height: 1.4;
}

/* Optional: align numeric columns (only if you add a class later) */
td.is-numeric,
th.is-numeric {
  text-align: right;
  font-variant-numeric: tabular-nums;
}