/*
 * DD-01 Table / DD-03 List row (mobile) — "one partial, two renderings"
 * (spec §3.3 DD-01, standing rule). Ui::TableComponent always renders both
 * `.ui-table__table-wrap` (the real <table>) and `.ui-table__cards` (the
 * DD-03 card stack) from the same rows/columns; this file is the only
 * thing deciding which one is visible, via a single --bp-md media query.
 * No JS branching, no second template.
 *
 * Row affordance (standing rule 3, spec §22): the desktop <tr> can't be an
 * anchor itself, so `.ui-table__row-link` is a real <a> inside the first
 * cell and the row_link Stimulus controller forwards other clicks in the
 * row to it. The mobile card IS the anchor (`.ui-list-row` renders as an
 * `<a>` when clickable) — see Ui::TableComponent's template.
 *
 * Token vars only — enforced by test/lint/css_token_lint_test.rb.
 */

/* ---------------------------------------------------------------------- */
/* Table — desktop (>= --bp-md)                                           */
/* ---------------------------------------------------------------------- */

/* A container query, not a viewport media query: the table/card switch
   responds to the width of .ui-table itself. A table can legitimately sit
   in a narrow column on a wide viewport (and the styleguide deliberately
   drops the same instance into a 375px box to show both renderings side
   by side on one desktop screen), so keying off the element's own width
   is the correct "one partial, two renderings" mechanism here — a
   viewport query would show the desktop table even inside a narrow box. */
.ui-table {
  container-type: inline-size;
  container-name: ui-table;
}

.ui-table__table-wrap {
  display: none;
  overflow-x: auto;
}

.ui-table__cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

@container ui-table (min-width: 768px) {
  .ui-table__table-wrap {
    display: block;
  }

  .ui-table__cards {
    display: none;
  }
}

.ui-table__table {
  width: 100%;
  border-collapse: collapse;
}

.ui-table__th {
  padding-block: var(--space-3);
  padding-inline: var(--space-4);
  text-align: left;
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  font-weight: 500;
  color: var(--color-ink-muted);
  background: transparent;
}

.ui-table__th--right,
.ui-table__td--right {
  text-align: right;
}

.ui-table__th--select,
.ui-table__th--chevron {
  width: var(--space-4);
}

.ui-table__sort-button {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  border: none;
  background: transparent;
  padding: 0;
  font: inherit;
  font-weight: 500;
  color: inherit;
  cursor: pointer;
}

.ui-table__sort-button:hover {
  color: var(--color-ink);
}

.ui-table__sort-button svg {
  display: block;
  color: var(--color-ink-soft);
}

.ui-table__row {
  position: relative;
  border-bottom: var(--border-hairline);
}

.ui-table__row:first-child {
  border-top: none;
}

.ui-table__row:last-child {
  border-bottom: none;
}

/* Row-height maths (spec DD-01 default 58px / DD-01 compact 44px). No
   explicit height is set on the <tr> — the browser sizes the row from its
   cells, so the row height is entirely the sum of the cell content below.
   Cell text is --text-sm (14px) at --text-sm--line-height (1.4), which is
   a 19.6px content line-height in both variants (border-collapse means
   the row's own border doesn't add to the box, so it's excluded here):
     default: 19.6px content + 19.2px padding-top + 19.2px padding-bottom = 58px
     compact: 19.6px content + 12.2px padding-top + 12.2px padding-bottom = 44px */
.ui-table__td {
  padding-block: 19.2px;
  padding-inline: var(--space-4);
  font-size: var(--text-sm);
  line-height: var(--text-sm--line-height);
  color: var(--color-ink);
  vertical-align: middle;
  position: relative;
}

.ui-table--compact .ui-table__td {
  padding-block: 12.2px;
}

.ui-table__td--right {
  font-variant-numeric: var(--numeric-tabular);
}

.ui-table__td--select {
  width: var(--space-4);
}

.ui-table__td--chevron {
  width: var(--space-4);
  padding-inline: var(--space-4);
}

.ui-table__row-link {
  color: inherit;
  text-decoration: none;
}

.ui-table__row-link:hover {
  text-decoration: none;
}

.ui-table__chevron {
  display: block;
  color: var(--color-ink-soft);
  transition: color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

/* Row hover — --color-surface-hover wash with a --radius-sm inset (spec
   §3.3 DD-01). A <tr> can't take border-radius directly, so the wash is
   painted on the cells instead — background on every <td> in the hovered
   row, with the radius only on the leading/trailing edge cells so the
   whole row still reads as one rounded surface. */
.ui-table__row--clickable {
  cursor: pointer;
}

/* .is-hover is the forced-state class (shared convention, see forms.css)
   so the styleguide can show this state without simulating a real
   pointer hover. */
.ui-table__row--clickable:hover .ui-table__td,
.ui-table__row--clickable.is-hover .ui-table__td {
  background: var(--color-surface-hover);
}

.ui-table__row--clickable:hover .ui-table__td:first-child,
.ui-table__row--clickable.is-hover .ui-table__td:first-child {
  border-start-start-radius: var(--radius-sm);
  border-end-start-radius: var(--radius-sm);
}

.ui-table__row--clickable:hover .ui-table__td:last-child,
.ui-table__row--clickable.is-hover .ui-table__td:last-child {
  border-start-end-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
}

.ui-table__row--clickable:hover .ui-table__chevron,
.ui-table__row--clickable.is-hover .ui-table__chevron {
  color: var(--color-ink);
  transform: translateX(2px);
}

/* ---------------------------------------------------------------------- */
/* Skeleton rows (DD-14 placeholder — TODO: replace with the real DD-14   */
/* skeleton component once it lands)                                     */
/* ---------------------------------------------------------------------- */

.ui-table__skeleton-bar {
  display: block;
  height: var(--space-4);
  width: 70%;
  border-radius: var(--radius-xs);
  background: var(--color-surface-sunken);
}

.ui-table__skeleton-bar--primary {
  width: 60%;
}

.ui-table__skeleton-bar--secondary {
  margin-block-start: var(--space-2);
  width: 40%;
  height: var(--space-3);
}

/* ---------------------------------------------------------------------- */
/* States — empty / filtered-to-zero / error                             */
/* ---------------------------------------------------------------------- */

.ui-table__state {
  padding-block: var(--space-10);
}

/* ---------------------------------------------------------------------- */
/* DD-03 List row (mobile card)                                          */
/* ---------------------------------------------------------------------- */

.ui-list-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  border: var(--border-glass);
  backdrop-filter: blur(var(--glass-blur-sm));
  padding: var(--space-4);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--duration-fast) var(--ease-out),
              transform var(--duration-fast) var(--ease-out);
}

.ui-list-row--clickable {
  cursor: pointer;
}

.ui-list-row--clickable:hover,
.ui-list-row.is-pressed {
  background: var(--color-surface-hover);
  transform: scale(0.995);
}

.ui-list-row__leading {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: var(--space-12);
  height: var(--space-12);
  border-radius: var(--radius-md);
  background: var(--color-surface-inset);
}

.ui-list-row__leading--skeleton {
  background: var(--color-surface-sunken);
}

.ui-list-row__body {
  /* min-width in px, not 0: with `flex: 1 1 auto`, a flex-shrink:0
     trailing badge/meta stack that doesn't fit otherwise eats this
     column down to nothing, ellipsizing the prospect name to one or two
     characters (spec DD-03's designated primary content). This floor
     keeps the name legible; `.ui-list-row__trailing` below gives back
     the space by capping its own width and shrinking instead. */
  flex: 1 1 auto;
  min-width: 96px;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.ui-list-row__primary {
  font-size: var(--text-base);
  line-height: var(--text-base--line-height);
  font-weight: 500;
  color: var(--color-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ui-list-row__secondary {
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Optional third card line (`mobile_meta:`, item 11) — same size as the
   secondary line but in ink rather than ink-muted, so a reward figure
   reads as a step up in importance from the business-name line above it. */
/* Rows carrying a meta line become a two-row grid rather than a wrapping
   flex row. `flex-wrap: wrap` was the obvious first attempt and it was
   wrong: it let the trailing badge/reference stack wrap onto its own line
   too, so the card grew by half again and only three referrals fitted the
   375px viewport. Explicit grid areas pin the first line to exactly the
   original three columns — leading | body | trailing, with the body still
   ellipsizing — and give the meta line the full card width beneath.
   Rows without a meta line keep the plain flex layout above, untouched. */
.ui-list-row--has-meta {
  display: grid;
  grid-template-columns: auto minmax(96px, 1fr) auto;
  grid-template-areas:
    "leading body trailing"
    "meta    meta meta";
  align-items: center;
  column-gap: var(--space-3);
}

.ui-list-row--has-meta > .ui-list-row__leading {
  grid-area: leading;
}

/* min-width: 0 here, not the flex layout's 96px floor — the grid column
   already carries that floor via `minmax(96px, 1fr)`, and leaving the px
   floor on the item as well would let it overflow its own column. */
.ui-list-row--has-meta > .ui-list-row__body {
  grid-area: body;
  min-width: 0;
}

.ui-list-row--has-meta > .ui-list-row__trailing {
  grid-area: trailing;
}

/* Full-width line of its own. No ellipsis: this line carries a money
   figure and its qualifier, and a truncated money figure is worse than no
   figure at all — which is literally what shipped until it was driven live
   at 375px and the label itself was cut off mid-word. */
.ui-list-row__meta {
  grid-area: meta;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: var(--border-hairline);
  font-size: var(--text-xs);
  line-height: var(--text-xs--line-height);
  color: var(--color-ink-muted);
}

.ui-list-row__meta-label {
  flex-shrink: 0;
}

/* The figure is the point of the line, so it takes the ink and the weight
   while the qualifier beside it stays muted. Right-aligned so a column of
   cards lines its figures up. */
.ui-list-row__meta-value {
  font-weight: 600;
  color: var(--color-ink);
  text-align: right;
}

.ui-list-row__trailing {
  /* Was flex-shrink: 0 — a long badge label (e.g. referral_status
     "Awaiting validation") then never shrank, forcing the card to
     overflow past its right edge instead of giving up width. Shrinkable
     plus a percentage cap lets it negotiate with `.ui-list-row__body`
     instead of winning by default. */
  flex-shrink: 1;
  min-width: 0;
  max-width: 55%;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  font-size: var(--text-2xs);
  line-height: var(--text-2xs--line-height);
  color: var(--color-ink-muted);
}

.ui-list-row--unread {
  box-shadow: inset 2px 0 0 0 var(--color-accent-strong);
}

/*
 * Archived rows stay readable — no opacity fade on text. The muted look
 * comes from explicitly downgrading the primary label to ink-muted (the
 * secondary line, trailing timestamp and avatar initials already render
 * in ink-muted) plus the "— archived" copy itself and the loss of the
 * clickable/hover affordance.
 */
.ui-list-row--disabled .ui-list-row__primary {
  color: var(--color-ink-muted);
}

.ui-list-row--skeleton {
  pointer-events: none;
}