/* ----------------------------------------------------------------------- */
/* Tables                                                                   */
/* ----------------------------------------------------------------------- */

.table-wrap {
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  background: var(--surface);
  /* overflow: visible so positioned children (e.g. the row-action
     kebab dropdown) can escape the wrapper rather than getting
     clipped at its right edge. Long tables that need horizontal
     scroll are an edge case; the kebab is hit on every row. */
  overflow: visible;
  margin-bottom: var(--gap-5);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--sans);
  font-size: 0.92rem;
}
thead th {
  text-align: left;
  font-weight: 600;
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-muted);
  background: var(--bg);
  padding: 0.6rem 0.95rem;
  border-bottom: 1px solid var(--rule-strong);
  white-space: nowrap;
}
tbody td {
  padding: 0.7rem 0.95rem;
  border-bottom: 1px solid var(--rule-soft);
  /* `middle` so rows with mixed-height content (badges, multi-line
     form names, em-dash placeholders) line up cleanly. `top` was the
     older default; `middle` reads better for compliance listings
     where each row is a record snapshot rather than prose. */
  vertical-align: middle;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td      { background: var(--bg); }

td.num, th.num,
td.right, th.right { text-align: right; }
td.mono           { font-family: var(--mono); font-size: 0.85rem; }
td.shrink, th.shrink { white-space: nowrap; width: 1%; }