/*
 * tables.css
 * .table owns its own structure. Tones come from tones.css applied to <tr>.
 */

.table {
  --table-bg:      var(--surface);
  --table-border:  var(--rule);
  --table-head-bg: var(--surface-sunken);
  width:           100%;
  background:      var(--table-bg);
  /*
   * A divider between rows and the frame around the table are the same
   * weight, and both are their own decision — a heavy theme's card edge
   * is not automatically a heavy line between every row of a dense grid.
   *
   * Read at the use site rather than declared beside --table-bg above: a
   * declaration here would win over the same token set on an ancestor, so
   * a THEME could never set it. The three tokens above are for a caller
   * styling one table; this one has to be reachable from a theme.
   */
  border:          var(--table-border-width, var(--border-width)) solid var(--table-border);
  border-radius:   var(--card-radius);
  border-collapse: separate;
  border-spacing:  0;
  overflow:        hidden;
  font-family:     var(--font-primary);
  font-size:       var(--text-md);
  color:           var(--ink);
}

.table th {
  background:     var(--table-head-bg);
  color:          var(--ink-mute);
  font-size:      var(--text-2xs);
  font-weight:    var(--label-font-weight);
  text-transform: var(--label-text-transform);
  letter-spacing: var(--label-letter-spacing);
  text-align:     left;
  padding:        var(--space-md) var(--space-xl);
}

.table td {
  padding:    var(--space-md) var(--space-xl);
  text-align: left;
}

.table tbody tr + tr td {
  border-top: var(--table-border-width, var(--border-width)) solid var(--table-border);
}

/*
 * ── Row background — one declaration, three inputs ──────────────
 *
 * Stripe, hover and tone all want a say in what a row looks like, and
 * only one of them can own `background`. Before v0.7 each wrote it
 * directly and the winner was decided by specificity:
 *
 *   .table.striped tbody tr:nth-child(odd) td   (0,3,3)
 *   .table tbody td                             (0,1,2)   ← the tone
 *
 * Same layer, so the stripe won, and a striped table lost its row tones
 * on every odd row — the failed row of a striped list rendered exactly
 * like a successful one. A tone is a Treatment class; nothing else in the
 * system gets to silently cancel it.
 *
 * So they are layered instead of ranked. --row-base is what the row would
 * be with no tone (plain, striped, or hovered) and --row-tint mixes the
 * tone into that. The cell paints the result. Stripe and hover now
 * compose with a tone rather than competing with it, and the specificity
 * ordering between them becomes the right question rather than an
 * accident: hover is declared after stripe so it wins the base at equal
 * specificity, which is what a hover is supposed to do.
 */
.table tbody tr {
  --row-base: var(--table-bg);
}

.table.striped tbody tr:nth-child(odd) {
  --row-base: var(--surface-sunken);
}

.table.hover tbody tr:hover {
  --row-base: color-mix(in srgb, var(--ring, var(--color-primary)) 5%, var(--table-bg));
}

.table.compact th,
.table.compact td {
  padding:   var(--space-xs) var(--space-md);
  font-size: var(--text-sm);
}

/*
 * ── Row tones — any tone class on a <tr> tints its cells ───────
 *
 * The tint is derived on the <tr>, where the tone class lives, and
 * inherited down to the cells. The <td> can't read --bg-mix itself
 * (tones are element-scoped — see tones.css), and the background has to
 * land on the cells rather than the row so it paints above the table's
 * own background.
 *
 * No tone names here: on an untoned row --bg-mix is guaranteed-invalid,
 * so --row-tint is too and the cells fall back to the row's base. All
 * seven tones work, not the four that used to be listed.
 *
 * The tint mixes into --row-base rather than --table-bg, which is what
 * lets a stripe show through beneath a tone instead of being replaced by
 * it. See the row-background note above.
 */
.table tbody tr {
  --row-tint: color-mix(in srgb, var(--bg-mix) 8%, var(--row-base));
}
.table tbody td {
  background: var(--row-tint, var(--row-base));
}

/*
 * ── Scroll wrapper ────────────────────────────────────────────
 * A table cannot scroll itself — `overflow` on a <table> does nothing,
 * and forcing display:block to make it work destroys the table layout
 * algorithm. So the scroll lives on a wrapper, which is why this is an
 * Anatomy class and not a modifier on .table.
 *
 *   <div class="table-wrap">
 *     <table class="table"> … </table>
 *   </div>
 *
 * Without it, a wide table overflows the page on narrow viewports and
 * takes the whole layout with it.
 */
.table-wrap {
  overflow-x:            auto;
  -webkit-overflow-scrolling: touch;
  /* Let the scroll container be a scroll target for keyboard users. */
  scrollbar-gutter:      stable;
}
.table-wrap > .table {
  /* Stop the table collapsing below its natural width inside the wrapper. */
  min-width: max-content;
}

/* ── Actions column helper ────────────────────────────────────── */
.table-actions {
  display:         flex;
  gap:             var(--space-xs);
  justify-content: flex-end;
}