/* Purchases & payables.
 *
 * Geometry is the export's own, not an approximation of it. The open-bills grid
 * below is `rowStyle.gridTemplateColumns` from the `subledger()` method in
 * "05 Purchases and payables.html", copied rather than eyeballed:
 *
 *   1.5fr 96px 84px 84px 108px 108px 96px   gap 12px   padding 11px 16px
 *
 * Header and body share one custom property so a column can never be widened in
 * one and not the other — the failure that puts a heading over the wrong figures.
 *
 * The export's outer frame is `grid-template-columns: 1fr 330px`. The 330px rail
 * held three panels this deployment cannot fill, so there is one column here.
 * See the feature file's header for which three and why.
 */

/* ---- the vertical rhythm ----
 *
 * `.card` carries no margin and neither did these sections, so the hero, the
 * aging card and the open-bills card sat at a MEASURED 0px from each other —
 * touching, with only their two 1px borders between them, which reads as one
 * tall card divided by hairlines rather than three separate statements.
 *
 * The export gets its spacing from `gap` on a flex column it never had to
 * express as margins; rebuilt as sibling sections, the gap had to be stated and
 * was not. 16px throughout — the same value as the notes below, so the whole
 * column has one rhythm rather than three different ones.
 */
.pay__hero,
.pay__aging,
.pay__table-card { margin-top: 16px; }

/* ---- header ---- */

.pay__head {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 0;
}

.pay__head-text { flex: 1; min-width: 0; }

.pay__title {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.02em;
  margin: 0;
}

.pay__sub {
  font-size: 12.5px;
  color: var(--p-ink-2);
  margin: 3px 0 0;
}

.pay__actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* A disabled control still has to be readable: it is explaining itself, and an
   explanation nobody can read is the same as no explanation. Contrast is held
   above the 4.5:1 the gate checks rather than dimmed to the usual 0.5. */
.pay__action {
  display: flex;
  align-items: center;
  gap: 7px;
  background: var(--p-surface-2);
  border: 1px solid var(--p-line);
  border-radius: 999px;
  padding: 9px 13px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--p-ink-2);
  cursor: not-allowed;
}

/* ---- hero ---- */

.pay__hero { display: flex; align-items: center; gap: 14px; padding: 15px 16px; }

.pay__hero-total { flex: 1; min-width: 0; }

.pay__hero-label {
  display: block;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--p-ink-3);
}

/* NO `font-family` HERE — the figure inherits JetBrains Mono from `.num`.
   The export sets `font-family: var(--font-display)` on this span while ALSO
   marking it `.num`, which is self-contradictory: it asks for the numeral face
   and then overrides it. Copying that verbatim put the headline total in
   Poppins above a table of JetBrains Mono figures, so the same money was set in
   two faces on one screen. Every number on this screen is now one font. */
.pay__hero-value {
  display: inline-block;
  font-size: 30px;
  font-weight: 500;
  letter-spacing: -0.02em;
  margin-top: 5px;
}

.pay__hero-note { font-size: 12px; color: var(--p-ink-2); margin-inline-start: 9px; }

.pay__hero-stats {
  display: flex;
  gap: 22px;
  padding-inline-start: 20px;
  border-inline-start: 1px solid var(--p-line);
  flex: none;
}

.pay__stat { min-width: 0; }
.pay__stat-label { display: block; font-size: 10.5px; color: var(--p-ink-3); }
.pay__stat-value { display: block; font-size: 16px; font-weight: 600; margin-top: 3px; }

/* ---- shared card head ---- */

.pay__card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.pay__card-title { font-size: 13.5px; font-weight: 600; margin: 0; }
.pay__card-note { font-size: 11px; color: var(--p-ink-3); margin-inline-start: auto; }

/* ---- aging ---- */

.pay__aging { padding: 15px 16px; }

.pay__bands { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }

.pay__band {
  text-align: start;
  padding: 11px 12px;
  border-radius: 14px;
  border: 1px solid var(--p-line);
  background: transparent;
  color: var(--p-ink);
}

.pay__band--btn { cursor: pointer; }

.pay__band--btn:hover { border-color: var(--p-line-2); }

.pay__band.is-selected {
  background: var(--p-surface-2);
  border-color: var(--p-line-2);
}

.pay__band-label { display: block; font-size: 10.5px; color: var(--p-ink-3); }
.pay__band-amount { display: block; font-size: 14.5px; font-weight: 600; margin-top: 5px; }
.pay__band-count { display: block; font-size: 10.5px; color: var(--p-ink-3); margin-top: 3px; }

.pay__band-bar { display: block; height: 3px; border-radius: 3px; margin-top: 8px; }

.pay__band-bar--ok { background: var(--p-ok); }
.pay__band-bar--neutral { background: var(--p-ink-3); }
.pay__band-bar--warn { background: var(--p-warn); }
.pay__band-bar--risk { background: var(--p-risk); }

/* ---- filters ---- */

.pay__filters { display: flex; align-items: center; gap: 6px; margin-inline-start: auto; }

.pay__filter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid var(--p-line);
  border-radius: 999px;
  padding: 4px 11px;
  font-size: 11px;
  font-weight: 600;
  color: var(--p-ink-2);
  cursor: pointer;
}

.pay__filter.is-selected {
  background: var(--p-brand-soft);
  border-color: var(--p-line-2);
  color: var(--p-brand);
}

.pay__filter-count { font-size: 10.5px; color: var(--p-ink-3); }
.pay__filter.is-selected .pay__filter-count { color: var(--p-brand); }

/* ---- the table ---- */

.pay__table-card {
  padding: 12px 0 0;
  overflow: hidden;
  /* Declared once here and inherited by .pay__thead and .pay__row below, so a
     column cannot be widened in the heading and not in the body.
     WIDER THAN THE EXPORT'S `1.5fr 96px 84px 84px 108px 108px 96px`, and the
     reason is content rather than taste: the export's Due cell reads
     "01 Jul 26 · +5d", this one reads "22 Jul 26 · 21 days late" because the
     lateness is worded and pluralised. At 84px that wrapped to three lines.
     Due gets 168px; Supplier drops from 1.5fr to a capped 1.1fr so Document
     and Issued move left into the space it was hoarding rather than the row
     growing wider. */
  --pay-cols: minmax(180px, 1.1fr) 104px 96px 184px 108px 116px 92px;
}

.pay__table-card .pay__card-head { padding: 0 16px; }

/* The role="table" wrapper. It scrolls rather than squeezing: seven fixed
   columns cannot be compressed without the amounts colliding, and a figure that
   overlaps its neighbour is worse than one a reader has to scroll to. */
.pay__table { overflow-x: auto; }

.pay__thead,
.pay__row {
  display: grid;
  grid-template-columns: var(--pay-cols, 1.5fr 96px 84px 84px 108px 108px 96px);
  gap: 12px;
  align-items: center;
  border-bottom: 1px solid var(--p-line);
}

.pay__thead {
  padding: 9px 16px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--p-ink-3);
}

.pay__row { padding: 11px 16px; }

.pay__cell { min-width: 0; }

.pay__supplier {
  font-size: 12.5px;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* An absence, said out loud. Italic so it cannot be mistaken for a name, and
   not dimmed below the contrast floor — this is the cell's actual content. */
.pay__missing { font-style: italic; color: var(--p-ink-2); font-weight: 400; }

.pay__cell.num { font-size: 11.5px; }
.pay__muted { color: var(--p-ink-2); }
.pay__strong { font-size: 12.5px; font-weight: 600; }
.pay__cell.pay__strong { font-size: 12.5px; }
.pay__right { text-align: end; justify-self: end; }

.pay__status {
  display: inline-block;
  border-radius: 999px;
  background: var(--p-surface-2);
  color: var(--p-ink-2);
  padding: 2px 7px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
}

.pay__empty { padding: 18px 16px; font-size: 12px; color: var(--p-ink-2); margin: 0; }

.pay__foot { padding: 10px 16px; font-size: 11px; color: var(--p-ink-3); margin: 0; }

.pay__clear {
  margin: 0 16px 12px;
  background: var(--p-surface-2);
  border: 1px solid var(--p-line-2);
  border-radius: 999px;
  padding: 6px 12px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--p-ink);
  cursor: pointer;
}

/* ---- the notes under the table ---- */

/* 16px, not 12. At 12 the notes sat closer to each other and to the table than
   the cards above them do, and since each note carries a 1px border — one of
   them amber — two bordered blocks that near read as a single split box rather
   than two statements. 16px is the export's own spacing between stacked
   sections, so this borrows a value the design already uses. */
.pay__note {
  margin: 16px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid var(--p-line);
  background: var(--p-surface);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--p-ink-2);
}

.pay__note--warn { border-color: var(--p-warn); }
.pay__note--risk { border-color: var(--p-risk); }

.pay__tone--ok { color: var(--p-ok); }
.pay__tone--warn { color: var(--p-warn); }
.pay__tone--risk { color: var(--p-risk); }

/* ---- narrow ----
 * The export is desktop-only for this screen. Below 900px the seven-column grid
 * cannot hold its widths, so the row becomes two columns with the amounts kept
 * together on the right; the headings go, because a heading strip over a
 * reflowed row labels the wrong cells. */

@media (max-width: 900px) {
  .pay__head { flex-direction: column; align-items: stretch; }
  .pay__actions { flex-wrap: wrap; }

  .pay__hero { flex-direction: column; align-items: stretch; }
  .pay__hero-stats {
    padding-inline-start: 0;
    border-inline-start: none;
    border-top: 1px solid var(--p-line);
    padding-top: 12px;
    margin-top: 12px;
  }

  .pay__bands { grid-template-columns: repeat(2, 1fr); }

  .pay__thead { display: none; }

  .pay__row {
    grid-template-columns: 1fr auto;
    row-gap: 4px;
  }

  .pay__row .pay__right { justify-self: end; }
}