/* AiB Platform — data tables. Every table.data lives inside a .table-scroll:
   wide tables scroll in their own box and never push the page sideways. */

.table-card { overflow: hidden; }
.table-scroll { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  padding: 13px 18px;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--grey);
  background: var(--paper);
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
table.data td {
  padding: 14px 18px;
  border-bottom: 1px solid var(--hairline);
  font-size: 14px;
  vertical-align: middle;
}
table.data tr:last-child td { border-bottom: 0; }
table.data tr:hover td { background: color-mix(in srgb, var(--paper) 55%, transparent); }
table.data .primary { font-weight: 500; }
table.data .mono-cell {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--grey);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
table.data .num { text-align: right; font-variant-numeric: tabular-nums; }
table.data .with-avatar { display: flex; align-items: center; gap: 10px; }
.cell-sub { display: block; color: var(--grey); font-size: 12.5px; margin-top: 2px; }
.cell-sub--warn { color: var(--warn); }

/* table.data--stack — a long list that must read on a phone without
   sideways scrolling. Under 719 px each row becomes a block: the lead cell
   and the cell marked data-stack="end" (the figure) share the first line,
   every other cell follows at full width. The header row leaves the screen
   but stays for screen readers, so the table keeps its semantics. Wide
   screens see the ordinary table.data. */
@media (max-width: 719px) {
  table.data--stack,
  table.data--stack tbody { display: block; }
  table.data--stack thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  table.data--stack tr {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px var(--space-3);
    padding: 14px var(--space-4);
    border-bottom: 1px solid var(--hairline);
  }
  table.data--stack tr:last-child { border-bottom: 0; }
  table.data--stack td { display: block; min-width: 0; padding: 0; border: 0; }
  table.data--stack td + td { grid-column: 1 / -1; }
  table.data--stack td[data-stack="end"] { grid-column: 2; grid-row: 1; text-align: right; }
}