/* ==========================================================================
   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;
  /* ONE CARD SIZE on every rail (Peter, 10 Sep: "standardise the size of all the cards"): 200 x 105, the
     Bank and Tax card; Invoices and Projects were 78px tall and read narrower */
  min-height: 105px;
  box-sizing: border-box;
  padding: 16px 18px;
  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. */
/* SECTION COLOURS (Peter, 10 Sep, the swatch page): the picked thing wears its section's colour. Home yellow
   #FFE000 (the AI), Bank navy #0b1d3a, Invoices and Proposals STEEL #2c4f6b, Projects light #e1f0f4 with
   ink type, Payroll warm #e07a2a, Tax deep teal #0f766e. */
body.sec-invoice .stat-card__icon { background: #e1f0f4; color: #2c4f6b; }
body.sec-invoice .stat-card.is-sel { background: #2c4f6b; border-color: #2c4f6b; }
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: #2c4f6b; }

/* FIX 2, ROLLED OUT (Peter, 16 Sep 2026: "roll it out to all the sections"). While ONE row's drawer
   or peek pane is open over a list you stay in, you are working that one row, so every other row in
   the list steps back. The open row keeps its yellow selection ring at full strength. HOVER ANY ROW
   AND IT COMES STRAIGHT BACK to 100%, so the queue is still readable without clicking, which is what
   makes a mute safe over grey-on-white text. Section headings, date heads, the filter summary and any
   "what needs you" card are never touched: they are the map, and none of them is a .row-card.
   NEVER while a guide is running, the guide has its own focus language and its grey takeover was
   killed for being disorientating (26 Jun).

   THE MARKER IS .row-card--open, added ALONGSIDE whatever class the screen already puts on its open
   row (both screens use their own .is-peek, which is left exactly as it was so their CSS and JS keep
   working). Bank has its own copy of this rule on .tx-row / .data-grid__row and never sets this
   marker, so the two can never stack.

   ONE KNOB, --row-mute: .5, the same number as Bank's card list, because both lists are near-black
   text (measured rgb(44,44,44) on the client name and the amount) and .5 lands that around 150 grey.
   A list whose text is ALREADY muted grey needs .75 instead, the way Bank's grid does: same
   perceived step, different starting point. Do not tidy two such numbers into one. */
:root { --row-mute: .5; }
body:has(.row-card--open):not(:has(.guide-ring)) .rows .row-card:not(.row-card--open):not(:hover) {
  opacity: var(--row-mute);
}