/*
Table

Builds on @elements/style's bare <table> (full width, collapsed borders,
soft row rules) and adds shadcn's chrome: a scroll container, header
cells on the control height, row hover and selected states, a tinted
footer and a muted caption. State is background only, so selecting or
hovering a row never moves a cell.

  .table-container       horizontal scroll on narrow screens
  .table-container > table, table.table     the table
  .table-container > [role="table"]         APG's div table: rowgroup, row,
                                            columnheader, rowheader, cell
  tr[data-state="selected"]
  .table :is(th, td)[data-align="end" | "center"]
  .table-caption[data-side="top" | "bottom"]
*/

@layer components {

.table-container {
  position:   relative;
  width:      100%;
  min-width:  0;
  overflow-x: auto;
  border-radius: var(--radius-surface);
}

/* The ring is a box-shadow. Forced colors (Windows High Contrast) drops
   box-shadow, so a transparent outline stays underneath: invisible
   normally, painted in the system color there. An outline takes no layout
   space, so focus never moves anything (Button does the same). */
.table-container:focus-visible {
  outline:        var(--focus-ring-width) solid transparent;
  outline-offset: var(--focus-ring-offset);
  box-shadow:     var(--focus-ring);
}

.table-container > table,
table.table,
.table-container > [role="table"],
[role="table"].table {
  width:           100%;
  margin:          0;
  border-collapse: collapse;
  caption-side:    bottom;
  color:           var(--ink);
  font-family:     var(--font-ui);
  font-size:       var(--text-ui);
  line-height:     var(--leading-snug);
}

:is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) > :is(thead, [role="rowgroup"]:has(> [role="row"] > [role="columnheader"])) {
  border-bottom: var(--surface-border-width) solid var(--rule);
}

:is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) > :is(thead, [role="rowgroup"]:has(> [role="row"] > [role="columnheader"])) > :is(tr, [role="row"]) {
  border: 0;
}

:is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) > :is(tbody, [role="rowgroup"]:not(:has(> [role="row"] > [role="columnheader"]))) > :is(tr, [role="row"]) {
  border-top:    0;
  border-bottom: var(--surface-border-width) solid var(--rule-soft, var(--rule));
}

:is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) > :is(tbody, [role="rowgroup"]:not(:has(> [role="row"] > [role="columnheader"]))) > :is(tr, [role="row"]):last-child {
  border-bottom: 0;
}

/* Hover only where a pointer can hover: a tap on a touch screen leaves no fill. */
@media (hover: hover) {
  :is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) > :is(tbody, [role="rowgroup"]:not(:has(> [role="row"] > [role="columnheader"]))) > :is(tr, [role="row"]):hover {
    background: var(--item-highlight);
    color:      var(--item-highlight-ink);
  }
}

:is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) > :is(tbody, [role="rowgroup"]:not(:has(> [role="row"] > [role="columnheader"]))) > :is(tr, [role="row"])[data-state="selected"] {
  background: var(--item-selected);
  color:      var(--item-selected-ink);
}

:is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) > tfoot {
  border-top:  var(--surface-border-width) solid var(--rule);
  background:  var(--bg-soft);
  font-weight: var(--weight-medium);
}

:is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) :is(th, [role="columnheader"], [role="rowheader"]) {
  height:         var(--control-height);
  padding:        0 var(--item-padding-x);
  color:          var(--ink-soft);
  font-weight:    var(--weight-medium);
  letter-spacing: var(--tracking-ui);
  text-align:     start;
  vertical-align: middle;
  white-space:    nowrap;
}

:is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) :is(td, [role="cell"]) {
  padding:        var(--table-row-padding-y) var(--item-padding-x);
  vertical-align: middle;
  /* One line, like the header (shadcn): a narrow container scrolls
     sideways instead of squeezing rows taller. */
  white-space:    nowrap;
}

:is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) :is(tbody, [role="rowgroup"]:not(:has(> [role="row"] > [role="columnheader"]))) :is(th, [role="columnheader"], [role="rowheader"]) {
  height:      auto;
  padding:     var(--table-row-padding-y) var(--item-padding-x);
  color:       inherit;
}

:is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) :is(th, td, [role="columnheader"], [role="rowheader"], [role="cell"])[data-align="end"] {
  text-align:           end;
  font-variant-numeric: tabular-nums;
}

:is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) :is(th, td, [role="columnheader"], [role="rowheader"], [role="cell"])[data-align="center"] {
  text-align: center;
}

/* A checkbox column hugs its control. */
:is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) :is(th, td, [role="columnheader"], [role="rowheader"], [role="cell"]):has(> input[type="checkbox"], > [role="checkbox"]) {
  width:             1%;
  padding-inline-end: 0;
}

:is(.table-container > table, table.table, .table-container > [role="table"], [role="table"].table) :is(th, td, [role="columnheader"], [role="rowheader"], [role="cell"]) > input[type="checkbox"] {
  display:        block;
  margin:         0;
}

.table-caption {
  margin-top: var(--space-4);
  color:      var(--ink-soft);
  font-size:  var(--text-caption);
  text-align: center;
}

/* APG's table built from ARIA roles on divs (for a layout the native
   element cannot take): the same look, laid out as a table. A rowgroup
   holding column headers is the header. */
:is(.table-container > [role="table"], [role="table"].table) {
  display: table;
}

:is(.table-container > [role="table"], [role="table"].table) > [role="rowgroup"] {
  display: table-row-group;
}

:is(.table-container > [role="table"], [role="table"].table) > [role="rowgroup"]:has(> [role="row"] > [role="columnheader"]) {
  display: table-header-group;
}

:is(.table-container > [role="table"], [role="table"].table) [role="row"] {
  display: table-row;
}

:is(.table-container > [role="table"], [role="table"].table) :is([role="columnheader"], [role="rowheader"], [role="cell"]) {
  display: table-cell;
}

:is(.table-container > [role="table"], [role="table"].table) > .table-caption {
  display: table-caption;
}

/* The caption spans the table's full width; in a container that scrolls
   sideways its text is held inside the visible part, so it reads without
   scrolling: it is a block exactly the region's visible width (written by
   table.ts), pinned to the visible inline start, with the text centered and
   wrapping inside it. */
.table-caption-text {
  position:           sticky;
  inset-inline-start: 0;
  display:            block;
  width:              min(100%, var(--table-visible-width, 100%));
  text-align:         inherit;
}

.table-caption[data-side="top"] {
  caption-side:  top;
  margin-top:    0;
  margin-bottom: var(--space-4);
}

}