/* ==========================================================================
   Row card
   Figma sources (JOHN REVIEW / Tax DS):
   - Table / Inputs 3462:17506 — status row: icon + title(+count) + chevron
   - Table / Cards  3462:17760 — meta row: ref/period/status/amount/button,
     warning tint variant
   List semantics (ul/li), not <table> — these are disclosure rows, not
   tabular data. Container: 1px border, radius 8, 20px padding (19 + border).
   Stacked rows sit 24px apart (measured from the Rows layout in Figma).
   ========================================================================== */

.rows {
  display: flex;
  flex-direction: column;
  gap: var(--space-6); /* measured from Figma "Rows" auto-layout */
  list-style: none;
  margin: 0;
  padding: 0;
}

.row-card {
  display: flex;
  align-items: center;
  flex-wrap: wrap; /* engages only when cells overflow (narrow screens) */
  gap: var(--space-1);
  row-gap: var(--space-2);
  padding: 19px; /* Figma 20px incl. inside stroke */
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-surface);
}

/* Clickable rows: whole card follows its primary link / expands (wired in ui.js).
   Inner controls keep their own behaviour. */
.row-card:has(a[href]:not([href="#"])),
.row-card:has(.row-card__toggle) {
  cursor: pointer;
}

/* Status tints — straight from the warning/important card tokens */
/* NO FILL (Peter, 20 Aug 2026: "this card is pink… it feels just a little out
   of place"). He was right, and it was only ever on the three tax dashboards —
   nowhere else in the app. The row already says "Payment not detected" in red
   and carries a Match button, so the tint was a THIRD signal for one fact, and
   content sits on white here. The border stays: it marks the row without
   painting it. */
.row-card--danger {
  border-color: var(--color-danger-border);
}

.row-card--important {
  background: var(--color-important-bg);
  border-color: var(--color-important-text);
}

/* Leading status icon, 24px, coloured by semantic modifier */
.row-card__icon {
  flex: none;
  display: inline-flex;
  width: 24px;
  height: 24px;
  margin-right: var(--space-4);
}

.row-card__icon > svg {
  width: 100%;
  height: 100%;
}

.row-card__icon--danger  { color: var(--color-danger); }
.row-card__icon--active  { color: var(--color-active); }
.row-card__icon--success { color: var(--color-success); }

/* Title cell: 16px regular; the count/annotation goes muted */
.row-card__title {
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  padding: 6px 10px; /* Figma cell padding */
}

.row-card__count {
  color: var(--color-border-strong); /* #abacae — Figma uses it for annotations too */
}

/* Prose variant — narrative card with wrapping paragraphs
   (What happened card, node 3462:17667) */
.row-card--prose {
  display: block;
}

.row-card--prose > p {
  padding: 6px 10px;
  white-space: normal;
}

.row-card--prose > p + p {
  padding-top: 0;
}

/* Generic cell for meta rows (ref / period / amount) */
.row-card__cell {
  padding: 6px 10px;
  white-space: nowrap;
}

.row-card__cell--muted { color: var(--color-border-strong); }
.row-card__cell--amount { font-variant-numeric: tabular-nums; }

/* Invoice list rows: anchor Paid / Left / Total in fixed-width columns so they line up straight
   down the list (sized for up to ~€99,999; larger amounts just run further left) — Peter, 1 Jul. */
#inv-list .row-card__cell--amount { text-align: right; flex: none; }
#inv-list .row-card__cell--muted.row-card__cell--amount { min-width: 112px; }      /* Paid / Left */
#inv-list .row-card__cell--amount:not(.row-card__cell--muted) { min-width: 92px; } /* Total */
/* Long client names run as far as the Paid column, THEN crop with … (grow factor dwarfs the
   spacer's so the name gets all the free space; basis 0 so it can never wrap the row) — Peter, 2 Jul. */
#inv-list .js-inv-client { flex: 999 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Status text inside meta rows, e.g. "Overdue 8 days" — bold + semantic colour */
.row-card__status {
  font-weight: var(--weight-bold);
}

.row-card__status--danger { color: var(--color-danger); }
.row-card__status--active { color: var(--color-active); }

/* Pushes trailing content (button / chevron) to the end */
.row-card__spacer {
  flex: 1;
  min-width: var(--space-1);
}

/* Stat cards — summary strip above list screens. Styled EXACTLY like the
   bank-transactions account cards (.acct-card) so cards are consistent across
   the app (Peter, 29 Jun): value big top-left, label below, icon to the right,
   14px radius, soft shadow, hover lift, selectable. */
/* Horizontal rail like the transactions account rail (scrolls when the cards
   overflow), so any number of cards (incl. an "All" card) sits consistently. */
/* IDENTICAL scroll behaviour to the transactions account rail (.acct-rail) — native
   horizontal slide, no custom JS (Peter: copy transactions, don't reinvent). */
.stat-cards {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  list-style: none;
  margin: 0;
  padding: 0 2px 4px;
}
.stat-cards::-webkit-scrollbar { display: none; }

/* --fit: for a page with just a few status cards, share the row width evenly
   instead of overflowing the rail and cropping the last card (e.g. Clients). */
.stat-cards--fit { overflow: visible; }
.stat-cards--fit .stat-card { flex: 1 1 0; width: auto; min-width: 0; }

.stat-card {
  flex: none;
  /* auto-size: at least 200px, but grow to the right so a longer label never wraps (Peter, 7 Jul). */
  width: auto;
  min-width: 200px;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 2px;
  padding: 16px;
  border: var(--border-width) solid var(--color-border);
  border-radius: 14px;
  background: var(--color-surface);
  /* same shadow as the bank account cards (Peter, 22 Aug — "make invoice and
     project cards have the same shadow as banking cards"; source: .acct-card
     in bank-transactions.html) */
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.032), 0 12px 32px -18px rgba(17, 17, 17, 0.11);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Stat cards can double as filter chips (like the account rail): as a <button>
   they're clickable and show a selected (black-border) state. */
button.stat-card {
  text-align: left;
  font: inherit;
  cursor: pointer;
}
button.stat-card:hover { box-shadow: 0 2px 4px rgba(17, 17, 17, 0.05), 0 16px 36px -18px rgba(17, 17, 17, 0.16); }
button.stat-card:focus-visible { outline: 2px solid var(--color-text); outline-offset: 2px; }
/* THE SELECTED CARD CARRIES THE COLOUR (Peter, 15 Aug — "keep it white and
   make the cards a strong colour?"). Painting every card was tried on 1 Aug and
   removed; this is the cheap version of the same instinct: the one card you are
   standing on wears the brand yellow, so the filter you have chosen is obvious
   from across the room and the rest of the row stays quiet. The icon chip goes
   white inside it so it does not disappear into the fill. */
.stat-card.is-sel {
  border-color: transparent;
  background: #ffe000;
}
.stat-card.is-sel .stat-card__icon { background: rgba(255, 255, 255, 0.55); }
.stat-card.is-sel .stat-card__label { color: rgba(17, 17, 17, 0.7); }
button.stat-card.is-sel:hover { box-shadow: none; }

.stat-card__value {
  grid-column: 1;
  grid-row: 1;
  font-size: 22px;
  font-weight: var(--weight-medium);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
  color: var(--color-text);
}

.stat-card__label {
  grid-column: 1;
  grid-row: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;   /* never wrap — the card auto-sizes to fit (Peter, 7 Jul) */
}

/* Status icon sits in the right column, centred against the two text rows
   (mirrors .acct-card__logo / __initial). */
.stat-card__icon {
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  width: 33px;
  height: 33px;
  border-radius: 8px;
  background: var(--color-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text);
}
.stat-card__icon > svg { width: 18px; height: 18px; }

@media (max-width: 720px) {
  .stat-cards { grid-template-columns: repeat(2, 1fr); }
}

/* Expanded children — indented rows under a disclosure row
   (Tax / Card Expanded, 3462:19275) */
.rows__children {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.rows__child {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.rows__child-arrow {
  flex: none;
  width: 24px;
  height: 24px;
  color: var(--color-border-strong);
}

.rows__child > .row-card {
  flex: 1;
  min-width: 0;
}

/* Trailing disclosure chevron — a real button, 32px hit area around a 20px icon */
.row-card__toggle {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: none;
  background: none;
  border-radius: var(--radius-md);
  color: var(--color-text);
  cursor: pointer;
}

.row-card__toggle > svg {
  width: 20px;
  height: 20px;
  transition: transform 120ms ease; /* provisional — no motion spec in Figma */
}

.row-card__toggle[aria-expanded="true"] > svg {
  transform: rotate(180deg);
}

/* provisional */
.row-card__toggle:hover {
  background: var(--color-bg-subtle);
}

@media (max-width: 480px) {
  .row-card { padding: 15px; }
  .row-card__cell { padding: 4px 6px; white-space: normal; }
  .rows__children { padding-left: 0; }
  .stat-cards { grid-template-columns: 1fr 1fr; }
}

/* THE INVOICE SECTION'S COLOURS (Peter, 7 Sep: "make the invoices dark navy, the navy we use in
   proposals, and the light blue for the buttons"): on a body.sec-invoice page the selected stat card
   is the proposals navy, not Home's yellow, and the icon discs are the projects' ice blue with the
   proposals light blue on the selected one. Home keeps yellow; other sections are untouched. */
body.sec-invoice .stat-card__icon { background: #e1f0f4; color: #0b1d3a; }
body.sec-invoice .stat-card.is-sel { background: #0b1d3a; border-color: #0b1d3a; }
body.sec-invoice .stat-card.is-sel .stat-card__value { color: #fff; }
body.sec-invoice .stat-card.is-sel .stat-card__label { color: rgba(255, 255, 255, 0.72); }
body.sec-invoice .stat-card.is-sel .stat-card__icon { background: #8fd3ee; color: #0b1d3a; }