/* List row
 *
 * One record in a list: events, guests, transactions, tasks, inventory, venues.
 * Every list screen in the product uses this, so it earns being a component
 * rather than being re-invented per screen.
 *
 *   <li class="row">
 *     <div class="row__main">
 *       <span class="row__title">Spring supper club</span>
 *       <span class="row__meta">The Old Bakery · 19:30 CET</span>
 *     </div>
 *     <span class="badge badge--positive">Confirmed</span>
 *   </li>
 *
 * A row is NOT a link or a button. Put the control inside it — a clickable
 * container has no accessible name, cannot be reached by keyboard, and cannot
 * hold a second action. Where the whole row should navigate, the title is the
 * link and `.row--linked` extends the hit area to the row via a stretched
 * pseudo-element, which keeps the accessible name on the anchor.
 */

.row-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Denser variant for long lists, where gaps waste more than they clarify. */
.row-list--tight { gap: var(--space-2); }

.row {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-3) var(--space-4);
  flex-wrap: wrap;

  padding: var(--space-4);
  background-color: var(--color-surface-raised);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

/* The text block. min-inline-size:0 lets long content wrap instead of forcing
 * the row wider than its container — the usual cause of horizontal scroll. */
.row__main {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  min-inline-size: 0;
  flex: 1 1 12rem;
}

.row__title {
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  overflow-wrap: anywhere;
}

.row__meta {
  font-size: var(--text-sm);
  line-height: var(--leading-snug);
  color: var(--color-text-muted);
  overflow-wrap: anywhere;
}

/* Trailing controls. Sits at the inline end, wraps below on a narrow screen
 * rather than squeezing the title. */
.row__actions {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-inline-start: auto;
}

/* A number the row is really about — Pax on a guest, an amount on a
 * transaction. Tabular figures so columns of them line up. */
.row__figure {
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-semibold);
  white-space: nowrap;
}

/* ---- whole-row link ------------------------------------------------------ */

/* The anchor keeps the accessible name; the pseudo-element gives it the row's
 * hit area. Other controls in the row need position:relative to stay clickable
 * above it — .row__actions already qualifies via its own stacking. */
.row--linked .row__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}
.row--linked .row__title a {
  color: inherit;
  text-decoration: none;
}
.row--linked:hover { background-color: var(--color-surface-sunken); }
.row--linked:focus-within {
  outline: var(--focus-ring-width) solid var(--color-focus-ring);
  outline-offset: var(--focus-ring-offset);
}
.row--linked .row__actions { position: relative; }

/* ---- states -------------------------------------------------------------- */

/* Muted: present but not currently relevant — an archived venue, a completed
 * event in a "show all" view. Dimmed AND labelled, never dimmed alone: opacity
 * survives neither greyscale nor a screen reader. */
.row--muted .row__title,
.row--muted .row__meta { opacity: 0.6; }

/* Selected, for multi-select lists such as taking inventory to an event. */
.row--selected {
  border-color: var(--color-accent);
  box-shadow: inset var(--border-width-accent) 0 0 var(--color-accent);
}

/* Loading skeleton, so a list has a shape before its data arrives.
 * aria-hidden on the bars; the list carries aria-busy. */
.row--skeleton { pointer-events: none; }
.row__skeleton-bar {
  block-size: var(--space-4);
  border-radius: var(--radius-sm);
  background-color: var(--color-surface-sunken);
  animation: row-pulse 1.4s ease-in-out infinite;
}
.row__skeleton-bar:nth-child(2) { inline-size: 60%; }

@keyframes row-pulse { 50% { opacity: 0.45; } }

@media (prefers-reduced-motion: reduce) {
  .row__skeleton-bar { animation: none; opacity: 0.6; }
}