/* ============================================================
   Theme: modern-uzh — layer 30, tables.
   Owns the library/list views:
     app.css       .data-table, .data-table--scroll, .filter-bar,
                   .filter-bar--default, .user-table, .list, .plain-list,
                   .rail, .mentions-list, .evidence-checkpoint
     samples.css   .storage-tree, .storage-loc, .storage-rack,
                   .storage-box-row, .tree-add, .tree-edit, .box-grid,
                   .item-seq-result
     references.css  .ref-list, .ref-search, .ref-add, .ref-empty, .refcard
     cellines.css  .cl-tree, .cl-history-row
     tasks.css     .task-list, .task-detail, .task-link-row
   (each of the above stands for that class and its modifiers; the glob
   star is spelled out rather than written, because a "*" immediately
   before a "/" closes this comment early and spills the rest of it into
   the stylesheet as a selector — which silently ate .data-table th once.)

   Loaded after app.css and any per-page CSS.

   This layer takes its table from redesign/functional/, per
   redesign/modern-uzh/README.md — zebra rows, a tight row rhythm, an
   uppercase header band, a hover highlight, and a filter row that reads
   as a toolbar. 00-tokens.css already repoints every colour these
   components use (--ground, --radius, --surface-3, etc.), so nothing
   here restates a colour; every rule below changes structure — padding,
   height, background-as-a-box, display — because that's the only thing
   worth a rule in a layer that loads after a token repoint.
   ============================================================ */

/* ---- data-table: header band + row rhythm -----------------------
   Baseline (app.css) draws a header with no fill and body rows with no
   striping or hover state — a plain grid. functional's table gives the
   header its own surface, tightens the row to --row/--row-pad, and adds
   zebra + hover so a long list can be scanned instead of just read. */
.data-table th {
  background: var(--surface-2);
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
}
.data-table td {
  padding: var(--row-pad) 0.6rem;
  height: var(--row);
  vertical-align: middle;
  border-bottom-color: var(--rule-soft);
}
.data-table {
  font-variant-numeric: tabular-nums;
}
/* :not(.cl-history-row--parental) — cellines.css already tints a
   parent line's own history rows with --surface-2 to mark them as
   "context, not this line's record" (fixes2.md). Zebra striping every
   other row would silently paint over that distinction on whichever
   parental rows happen to land on an even position, so parental rows
   opt out of the stripe rather than fight it for the same background. */
.data-table tbody tr:nth-child(even):not(.cl-history-row--parental) {
  background: var(--zebra);
}
.data-table tbody tr:hover {
  background: var(--accent-wash);
}

/* ---- data-table--scroll: make the horizontal scroll real ---------
   `overflow-x` has no effect on a `display: table` box in any browser
   — verified against a live render, not assumed: setting it (even with
   `!important`, even directly on the <table>) leaves the computed value
   `visible`, and a wide table just overflows its container instead of
   scrolling. That means app.css's `.data-table--scroll { overflow-x:
   auto }` has never actually scrolled anything; it has only ever
   worked by accident, because baseline `.sheet` has no `overflow`
   property of its own and a table that overflows an unclipped ancestor
   is merely ugly, not invisible.

   This theme's `.sheet` (10-shell.css) clips to get the rounded card
   corners the direction wants, which turns that latent bug into
   silently hidden columns — worse than the baseline ever was. So this
   is fixed here, in the only layer that owns `.data-table--scroll`,
   using the one construction that actually makes a <table> scroll
   without a wrapper element (which the real templates don't have —
   redesign/modern-uzh's `.table-wrap` is markup this app doesn't
   carry): convert the table to a block box and give thead/tbody/tr
   their own table display, so the browser treats overflow normally.

   The cost: thead and tbody become two independent anonymous tables,
   so an auto column-width algorithm would size them independently and
   the header would drift out of alignment with the body (measured:
   several px off per column). `table-layout: fixed` forces both to the
   same even division instead, which keeps every column aligned but
   gives up content-aware column widths — a real trade, not a free
   fix. Ellipsis truncation is the other half of that trade: with fixed
   equal columns a long value doesn't get its own extra width the way
   it would under auto layout, so cells clip with "…" instead of
   wrapping or bleeding into the next column. Nothing here is lost
   permanently — every one of these tables' Label/Name cells is a link
   through to the full record. */
.data-table--scroll {
  display: block;
  overflow-x: auto;
}
.data-table--scroll thead,
.data-table--scroll tbody,
.data-table--scroll tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
.data-table--scroll th,
.data-table--scroll td {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* A sticky thead was tried and dropped. `position: sticky` inside an
   ancestor with `overflow: hidden` (this theme's `.sheet`) computes
   relative to that ancestor's scrollport, not the viewport — and
   since `.sheet` has no height limit of its own, its scrollport never
   actually moves as the page scrolls, so the sticky header just scrolls
   away with everything else instead of pinning (verified against a
   live render: with `.sheet { overflow: hidden }` in the ancestor
   chain, a `position: sticky; top: 56px` thead ends up hundreds of
   pixels off-screen at the same scroll position where, without that
   ancestor, it sits correctly at 56px). Getting a sticky header right
   needs its own scrolling box with a real height limit — exactly what
   redesign/modern-uzh's `.table-wrap` div provides and this app's
   markup does not. Shipping `position: sticky` here would be a rule
   that quietly does nothing on every real page, which is worse than
   not shipping it. */

/* ---- filter-bar: read as a toolbar, not a bare form ---------------
   Baseline .filter-bar is an unstyled flex row — no box, no chrome.
   redesign/modern-uzh's .toolbar wraps the same search+selects+buttons
   row in a filled, bordered, rounded band so it reads as an instrument
   panel above the table rather than a form floating in the page. */
.filter-bar {
  padding: 0.8rem 0.85rem;
  background: var(--surface-3);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius);
}
/* .filter-bar--default pulled itself up under .filter-bar with a
   negative margin because the plain baseline .filter-bar had no
   padding of its own to sit against. Now that .filter-bar is a padded,
   bordered box, that negative margin drags the "my Team" row up into
   the toolbar's own border instead of sitting quietly beneath it. It
   stays deliberately unboxed — app.css's own comment on it is "a
   small, quiet second control, never competing visually" — just no
   longer pulled backwards. */
.filter-bar--default {
  margin-top: 0.5rem;
}

/* ---- user-table: same header/row language as data-table -----------
   The admin account list is a library table in every sense app.css's
   comment on .data-table gives for that pattern; it just predates the
   shared class. Carrying the same header fill, zebra and hover here
   keeps every page inside libraries consistent. */
.user-table th {
  background: var(--surface-2);
  font-weight: 650;
}
.user-table td {
  vertical-align: middle;
}
.user-table tbody tr:nth-child(even) {
  background: var(--zebra);
}
.user-table tbody tr:hover {
  background: var(--accent-wash);
}