/* ─────────────────────────────────────────────────────────────────────
   .dv-table — list/index table TYPOGRAPHY component (maturity ladder ①②③).

   Promotes the cell typography that every account/* list table was
   re-inventing with bespoke utilities (text-[13.5px], text-[12px] mt-0.5,
   font-mono, mixed medium/semibold, 13/13.5/14.5px sizes). This sheet owns
   the *cell content* vocabulary; the surrounding chrome (outer border,
   radius, canvas header band, hairline rows, hover, py-3 rhythm,
   first/last-child padding) STILL lives in header_band.css under
   `.dv-table-wrap` / `.box-table` and is NOT moved or duplicated here.
   The two COEXIST: a table renders inside `.dv-table-wrap` for chrome and
   uses `.dv-table__*` classes on its cells for typography.

   Canonical type scale (anchored on bookings/divers — the closest pair):
     .dv-table__primary  13.5px / 500 / --ink   (link → hover accent, no underline)
     .dv-table__sub      12px   / --muted        (+2px top INSIDE the stack)
     .dv-table__stack    flex column owning the 2px primary→sub gap
     .dv-table__meta     13px   / --muted        (--mono → mono tabular-nums)
     .dv-table__th       11px uppercase tracking / --muted header cell

   Token-only (var(--token)); no raw hex, no raw Tailwind palette.
   Loaded after header_band.css (see application.css).
   ───────────────────────────────────────────────────────────────────── */

/* ── Optional element hook ────────────────────────────────────────────
   `.dv-table` may be added to a <table> for scoping, but the cell classes
   work standalone so existing `.dv-table-wrap table` markup adopts them
   incrementally with zero structural change. */
.dv-table { width: 100%; border-collapse: collapse; }

/* ── Primary cell text (the row's headline: name, ID, title) ──────────── */
.dv-table__primary {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
}
/* A link inside the primary slot: inherits the headline type, lifts to the
   accent on hover, never underlines (the row-hover tint is the affordance). */
.dv-table__primary a,
a.dv-table__primary {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast) ease;
}
.dv-table__primary a:hover,
a.dv-table__primary:hover {
  color: var(--accent);
  text-decoration: none;
}

/* ── Sub text (secondary line under the primary: email, brand, serial) ─── */
.dv-table__sub {
  font-size: var(--text-xs);
  line-height: 1.3;
  color: var(--muted);
}

/* ── Stack (primary + sub) — owns the 2px gap so cells stop using mt-0.5 ── */
.dv-table__stack {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.dv-table__stack .dv-table__sub { margin-top: 2px; }

/* ── Meta cell (neutral data: dates, counts, specialties, condition) ───── */
.dv-table__meta {
  font-size: var(--text-sm);
  color: var(--muted);
}
.dv-table__meta--mono {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Figure cell (prominent commercial numeric: price, total, commission) ──
   Like __meta--mono but INK, not muted — a price is primary data, not neutral
   meta. Mono + tabular so a column of figures aligns. */
.dv-table__figure {
  font-size: var(--text-sm);
  color: var(--ink);
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}

/* ── Header cell — matches the existing .dv-table-wrap thead th treatment
   so promoting a header to this class doesn't shift pixels. ─────────────── */
.dv-table__th {
  /* Component owns the header band height — mirrors how `.dv-table-wrap td`
     owns body-row rhythm (header_band.css), so a surface never has to remember
     a py-* utility on every <th>. ~14px ≈ divers/index's py-3.5, one step
     tighter than the 16px body row. */
  padding-top: 14px;
  padding-bottom: 14px;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
}

/* ── Row interaction states (consistent with header_band.css's
   `.dv-table-wrap tbody tr:hover { background: var(--surface-alt) }`). ──── */
.dv-table tbody tr.is-interactive { cursor: pointer; }
.dv-table tbody tr.is-interactive:hover,
.dv-table tbody tr.is-interactive:focus-within { background: var(--hover-warm); }
.dv-table tbody tr.is-selected {
  background: var(--accent-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}
.dv-table tbody tr.is-selected:hover { background: var(--accent-soft); }

/* ════════════════════════════ Variants ════════════════════════════════ */

/* --avatar — first cell pairs an avatar with the primary/sub stack. The
   avatar partial owns its own size; this just sets the flex pairing + gap. */
.dv-table--avatar td:first-child .dv-table__cell,
.dv-table__avatar-cell {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

/* --compact — tighter vertical rhythm for dense lists (overrides the gated
   py-3 baseline on cells that don't set their own padding). */
.dv-table--compact td:not([class*="py-"]) {
  padding-top: var(--space-2, 8px);
  padding-bottom: var(--space-2, 8px);
}
.dv-table--compact .dv-table__primary { font-size: var(--text-sm); }

/* --numeric — right-align numeric columns and tabularise their figures so
   digits line up column-wise (amounts, pax, counts). */
.dv-table--numeric td.dv-table__num,
.dv-table--numeric th.dv-table__num,
.dv-table__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.dv-table--numeric td.dv-table__num { font-family: var(--font-mono); }