/* SPDX-License-Identifier: MIT
 *
 * data-table.css - SL_05C Part A, ported from hire4real's data-table.css.
 *
 * Kept: the sticky header, the header as the sort control, tabular figures, the hairline rows.
 * Changed: every colour is a token (their rgba hover tints and green focus ring are not here),
 * and the rows are zebra-free - ink on sand, no stripes. Their `.data-table__row--blurred`,
 * `.data-gate`, the watchlist star and the pager's brand green belong to surfaces this site does
 * not have. Their "#" column is refused in the partial, not hidden here.
 *
 * The header sticks inside the table's own scroll box (data-table-scrollbar.css), which is also
 * what keeps a wide table from widening the page: one box scrolls both ways, the page neither.
 */
.data-surface { margin: 1rem 0 1.5rem; position: relative; }
.data-table__tools { display: flex; justify-content: flex-end; gap: 0.5rem; margin: 0 0 0.5rem; }

.data-table-wrap {
  overflow: auto;
  max-height: min(80vh, 64rem);
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.data-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}

.data-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: var(--surface-2);
  color: var(--ink-2);
  font-size: 0.78rem;
  font-weight: 600;
  text-align: left;
  vertical-align: bottom;
  padding: 0.6rem 0.6rem;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
}

.data-table td {
  padding: 0.5rem 0.6rem;
  border-bottom: 1px solid var(--line);
  color: var(--ink);
  vertical-align: middle;
  background: var(--surface-2);
}
.data-table tbody th { font-weight: 400; text-align: left; border-bottom: 1px solid var(--line); }

/* Figures right-aligned, so a column of numbers reads by magnitude down the page. */
.data-table [data-numeric] { text-align: right; }
.data-table thead th[data-numeric] .data-table__sortlink { justify-content: flex-end; }

.data-table__sortlink {
  display: inline-flex; align-items: baseline; gap: 0.3rem;
  color: inherit; text-decoration: none; padding: 2px 0;
}
.data-table__sortlink:hover, .data-table__sortlink.is-active { color: var(--ink); }
.data-table__sortind { font-size: 0.85em; opacity: 0.45; }
.data-table__sortlink:hover .data-table__sortind { opacity: 0.75; }
.data-table__sortlink.is-active .data-table__sortind { opacity: 1; }

/* A header's second line: its period and its population. Wraps; never ellipsised. */
.data-table__sub {
  display: block; margin-top: 0.15rem;
  font-weight: 400; font-size: 0.72rem; color: var(--ink-2);
  white-space: normal; min-width: 7rem; max-width: 12rem;
}
.data-table thead th[data-numeric] .data-table__sub { margin-left: auto; }

/* Words in place of a figure stay on one line: a figure column is narrow, and an absence wrapped a
   word to a line made every empty row four lines tall (seen in T7's first captures). */
.data-table td .absent { white-space: nowrap; }
.data-table td[data-col-key="sector"] { min-width: 10rem; }
.data-table td[data-col-key="spark"] { min-width: 8.5rem; }
.data-table td[data-col-key="spark"] .absent { white-space: normal; }
/* The headcount's year and source sit under the figure, not beside it. */
.data-table td[data-col-key="headcount"] .note { display: block; font-size: 0.75rem; color: var(--ink-2); white-space: nowrap; }