/* Shared table primitives — loaded by both the main app and the admin
   DB browser.  Pages provide their own --line-strong / --fg-3 tokens. */

/* ─── Scrollbars — thin ghost-style ─────────────────────────────── */
* {
  scrollbar-width: thin;
  scrollbar-color: var(--line-strong) transparent;
}
::-webkit-scrollbar {
  width: 4px;
  height: 4px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--fg-3);
}
::-webkit-scrollbar-corner {
  background: transparent;
}

/* ─── Numeric cell alignment ────────────────────────────────────── */
/* Right-aligned numeric column.  Selectors include the element name so
   specificity (0,1,1) ties with `.results-table td` rules that scope a
   left-aligned default; load /common/table.css AFTER those sheets so the
   shared rule wins on equal specificity. */
th.th-num,
td.td-num {
  text-align: right;
}
td.td-num {
  white-space: nowrap;
  text-overflow: ellipsis;
  font-variant-numeric: tabular-nums;
}

/* Fixed-width inline block so the decimal point lands at the same pixel in
   every row regardless of integer-digit count or sort order. A static px
   width (not ch) is deliberate: column widths (query.tsx) are px, and a
   ch-based box scales with font-size independently of them -- a bumped
   effective font-size (browser text zoom, OS font scaling) can then widen
   this box past a column that never changes, clipping short values like
   "20mg". Fixed px keeps both figures in the same, non-diverging unit. */
.num-fixed {
  display: inline-block;
  width: 64px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ─── Sort glyph (shared) ──────────────────────────────────────────── */
/* Rendered by WBTable.ResultsTableHead inside .th-label.  Inactive glyphs
   are dim (fg-3) — only the active sort column lights up with the accent
   colour.  The admin browser only renders the glyph when active, so the
   .is-active rule is what's visible there; the main app additionally
   pre-renders inactive glyphs in their first-click direction so the user
   can see at a glance which way each sort would go. */
.sort-glyph {
  color: var(--fg-3);
  /* Glyph leads the label (see ResultsTableHead); the gap belongs on its
     right, between glyph and text.  A left margin here would be dead space
     at the header's leading edge — and, being a margin, escapes the
     Range-based breathing-room measurement, so it silently clips the label. */
  margin-right: 4px;
}
.sort-glyph.is-active {
  color: var(--accent);
}