/* data-table.css — frontend-data-views (SP8) — the desktop table
   presentation: `.enr-tablewrap`, `.enr-table*`, `.enr-sort*`, and the
   ROW-SELECTION CONTROL (`.enr-rowcb`) shared verbatim by the table, card
   and feed presentations (data-cards.css / data-feed.css reuse this same
   class — the checkbox is styled once, here, since `_data_table.html` is
   the first presentation to render it; AC3's own "one row context, two
   partials" mirrors a single checkbox rule).

   Slot in base.html: after data-view.css, before data-cards.css (the
   `@media` switch in that sheet toggles this sheet's `.enr-tablewrap`, so
   this sheet's own box rules must already be in the cascade).

   Tokens only. Mirrors the existing `.ol-table-wrap`/`.ol-table` paper-card
   pattern (`pages/orders-list.css`) — CHEATSHEET §2 already asks new wide
   tables to mirror it. */

/* ---------------------------------------------------------------------
   .enr-tablewrap — the scroll-shadow paper card
   --------------------------------------------------------------------- */
.enr-tablewrap {
  background: var(--bg-paper);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card), inset 0 0 0 1px var(--border-1);
  overflow-x: auto;
  overflow-y: hidden;
}

.enr-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

/* ---------------------------------------------------------------------
   Header — .enr-table__head*
   --------------------------------------------------------------------- */
.enr-table__head {
  background: var(--bg-sunken);
}
.enr-table__hcell {
  padding: var(--space-3) var(--table-cell-inset);
  text-align: left;
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--fg-3);
  white-space: nowrap;
  border-bottom: 1px solid var(--border-2);
}
.enr-table__hcell--check {
  width: var(--space-8);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}
/* The header select-all. It reuses `.enr-rowcb` for the control itself — same
   floor-size hit area, same visible mark — so this modifier only has to place
   it in the header cell. It lives OUTSIDE `.enr-selbar` on purpose: the bar is
   hidden until something is selected, so a select-all that only worked inside
   it could never make the first selection. */
.enr-table__checkall {
  vertical-align: middle;
}

/* ---------------------------------------------------------------------
   Body — .enr-table__body / __row / __cell
   --------------------------------------------------------------------- */
.enr-table__body {
  background: var(--bg-paper);
}
.enr-table__row {
  border-bottom: 1px solid var(--border-1);
  transition: background var(--dur-fast) var(--ease-standard);
}
.enr-table__row:last-child {
  border-bottom: 0;
}
.enr-table__row:hover {
  background: var(--bg-sunken);
}
/* `data-enr-row-href` rows are whole-row navigation targets (row_url,
   architecture D5) — the pointer says so even before JS wires the click. */
.enr-table__row[data-enr-row-href] {
  cursor: pointer;
}
/* JS toggles this on the checked row (selection-dom.js, "--selected
   classes" — architecture §3.3 module table). */
.enr-table__row--selected {
  background: var(--brand-soft);
}
.enr-table__row--selected:hover {
  background: var(--brand-soft);
}

.enr-table__cell {
  padding: var(--space-3) var(--table-cell-inset);
  vertical-align: middle;
  color: var(--fg-1);
}

/* Contract §2 requires `row_template` to emit BARE `<td>` elements — the
   component prepends its own `.enr-table__cell` selection cell and the
   consumer's cells arrive with no class at all. Styling only `.enr-table__cell`
   therefore left every consumer cell on the browser's 1px default while the
   header cells the component DOES emit kept their full inset. Measured on the
   order list (JJ, 2026-09-25, "there is no padding on the left, so text is
   stuck to the left hand side"): the first column sat 1px from the table's edge
   and all EIGHT columns' values sat 11px left of their own heading. The 44px
   selection cell used to stand in front of the first column and hide the first
   symptom; collapsing that column for the selection mode revealed it, it did
   not cause it.

   `:where()` holds this at ELEMENT specificity (0,0,1) on purpose, so the
   single-class modifiers below still outrank it — `--check`'s deliberately
   tighter inset above all. Written as a plain descendant selector it would be
   (0,2,1), beat every modifier, and silently widen the checkbox column. */
:where(.enr-table__body .enr-table__row) > td {
  padding: var(--space-3) var(--table-cell-inset);
  vertical-align: middle;
  color: var(--fg-1);
}
.enr-table__cell--check {
  width: var(--space-8);
  padding-left: var(--space-2);
  padding-right: var(--space-2);
}
.enr-table__cell--num,
.enr-table__hcell.enr-table__cell--num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  font-family: var(--font-mono);
}
.enr-table__cell--actions,
.enr-table__hcell.enr-table__cell--actions {
  text-align: right;
}

/* ---------------------------------------------------------------------
   Row-selection control — .enr-rowcb (table, cards, feed)
   A real `<input type=checkbox>` with no wrapper markup, so the FLOOR-SIZE
   hit area (ADR 0005) has to be the input's own box — `appearance: none`
   turns it into a fully custom 44x44 control with an 18px visible mark.
   --------------------------------------------------------------------- */
.enr-rowcb {
  appearance: none;
  -webkit-appearance: none;
  width: var(--space-8);
  height: var(--space-8);
  margin: 0;
  padding: 0;
  border: 0;
  flex: none;
  background: transparent;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.enr-rowcb::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: var(--radius-xs);
  background: var(--bg-paper);
  box-shadow: inset 0 0 0 1.5px var(--border-3);
  transition: background var(--dur-fast) var(--ease-standard),
    box-shadow var(--dur-fast) var(--ease-standard);
}
.enr-rowcb:checked::before {
  background: var(--brand);
  box-shadow: inset 0 0 0 1.5px var(--brand);
}
.enr-rowcb:checked::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 9px;
  border: solid var(--fg-on-ink);
  border-width: 0 2px 2px 0;
  transform: translate(0, -1px) rotate(45deg);
}
.enr-rowcb:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.enr-rowcb:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------
   Sortable headers — .enr-sort*
   --------------------------------------------------------------------- */
.enr-sort {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  color: inherit;
  text-decoration: none;
}
.enr-sort:hover {
  color: var(--fg-1);
}
.enr-sort:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-radius: var(--radius-xs);
}
.enr-sort__caret {
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  flex: none;
}
.enr-sort--desc .enr-sort__caret {
  transform: rotate(0deg);
}
/* ADR 0005's 44px tap-target floor, which that ADR scopes to "any interactive
   element ON MOBILE". Declared unconditionally it applied to a mouse too, and
   since the sort link is the tallest thing in the header cell it set the whole
   band: 44 + 12 + 12 + 1 = 69px, against ~38px on the `.ol-table` production is
   still serving (fc076696, 2026-09-21 — it predates F4's rebuild). The padding
   difference everyone reaches for first is worth 4px of that; the floor is
   worth the rest.

   `(hover: none) and (pointer: coarse)` is this codebase's gate for exactly
   this — mobile.css records why, having measured the same trap: "the width is
   not the property that decides this; the input device is". A `max-width` rule
   would put the floor back on a narrow desktop window and take it off a tablet
   held wide, which is backwards on both counts.

   AFTER the base rule on purpose: a media query adds no specificity, so this
   has to win on source order. */
@media (hover: none) and (pointer: coarse) {
  .enr-sort {
    min-height: var(--space-8);
  }
}

.enr-sort--asc .enr-sort__caret {
  transform: rotate(180deg);
}

/* Selection is a MODE (JJ, 2026-09-25): the check column is COLLAPSED until a
   consumer reveals it — on the order list, the row context menu's "Select
   order" item. JJ chose collapse over reserve-the-space, so the table shifts
   right when the mode turns on and gets the full width the rest of the time.
   The flag lives on the `.enr-dataview` root because an htmx swap replaces the
   results region's innerHTML and never the root, so the mode survives a filter
   click with nothing to re-apply. See `js/framework/data-views/selection-reveal.js`. */
.enr-dataview--pickable:not(.enr-dataview--picking) .enr-table__hcell--check,
.enr-dataview--pickable:not(.enr-dataview--picking) .enr-table__cell--check {
  display: none;
}