/* Sales & receivables (§6.7).
 *
 * Geometry taken verbatim from the "04 Sales and receivables" export, not
 * eyeballed. The aging block there is a card at radius 20px / padding 15px 16px
 * holding `grid-template-columns:repeat(5, 1fr); gap:10px`; each bucket card is
 * padding 11px 12px at radius 14px, with a 10.5px label, a 14.5px/600 amount, a
 * 10.5px count, and a 3px bar at radius 3px set 8px below the count.
 *
 * The export has no grid for what this screen draws BELOW the aging — its
 * open-invoice table (`1.5fr 96px 84px 84px 108px 108px 96px`) is not built
 * here, because the wire carries no invoice rows. Nothing is invented to stand
 * in its place.
 */

.rcv__head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 14px; }
.rcv__head-ident { flex: 1; min-width: 0; }
.rcv__title {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600; letter-spacing: -0.02em; margin: 0;
}
.rcv__sub { font-size: 12.5px; color: var(--p-ink-2); margin: 3px 0 0; }

.rcv__actions { display: flex; gap: 8px; flex: none; }

/* A capability this deployment does not have. Dimmed AND explained through
   `title`/`aria-disabled` on the element itself — never colour alone, and never
   a control that looks live and refuses. */
.rcv__action {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--p-surface); border: 1px solid var(--p-line);
  border-radius: var(--radius-pill); padding: 9px 13px;
  font-family: inherit; font-size: 12.5px; font-weight: 500;
  color: var(--p-ink-3); cursor: not-allowed;
}

/* THE HEADLINE, and the two figures that qualify it.
 *
 * Every number below is the export's, copied rather than eyeballed:
 *
 *   card      background surface · 1px line · radius 20 · padding 15px 16px
 *   inner     display:flex · align-items:center · gap:14
 *   label     11px · ink-3 · 500 · letter-spacing .5 · uppercase
 *   value row display:flex · align-items:baseline · gap:9 · margin-top:5
 *   value     30px · 500 · -0.02em · font-display
 *   note      12px · ink-2
 *   stats     display:flex · gap:22 · padding-left:20 · border-left:1px line
 *   stat lbl  10.5px · ink-3
 *   stat val  16px · 600 · margin-top:3
 *
 * The stats WERE outlined cards at gap 10 with a 132px floor — my own
 * invention, and the one place this screen visibly diverged from the design.
 * They are plain figures behind a thin rule now, as the export has them.
 *
 * `padding-left` / `border-left` in the export become the INLINE-START
 * equivalents here. That is a deliberate divergence: a physical left rule
 * lands on the wrong side of an Arabic page, and rtl-check.py rejects it.
 */
.rcv__hero {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--p-surface); border: 1px solid var(--p-line);
  border-radius: 20px; padding: 15px 16px; margin-bottom: 14px;
}
.rcv__hero-main { flex: 1; min-width: 240px; }
.rcv__hero-label {
  display: block; font-size: 11px; color: var(--p-ink-3);
  font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase;
}
/* The value and its note sit on one baseline, as the export pairs them. */
.rcv__hero-figure { display: flex; align-items: baseline; gap: 9px; margin-top: 5px; }
.rcv__hero-value {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 500; letter-spacing: -0.02em;
}
.rcv__hero-note { font-size: 12px; color: var(--p-ink-2); }

.rcv__stats {
  display: flex; gap: 22px; flex: none;
  padding-inline-start: 20px;
  border-inline-start: 1px solid var(--p-line);
}
/* No box of its own — the export's stat is a label over a figure, and the
   only thing separating the group from the total is the rule on
   `.rcv__stats`. Defined rather than deleted because lint.py requires a
   rule for every class the JS emits. */
.rcv__stat { min-width: 0; }
.rcv__stat-label { display: block; font-size: 10.5px; color: var(--p-ink-3); }
.rcv__stat-value { display: block; font-size: 16px; font-weight: 600; margin-top: 3px; }
.rcv__stat--warn .rcv__stat-value { color: var(--p-warn); }
.rcv__stat--ok .rcv__stat-value { color: var(--p-ok); }

.rcv__card { padding: 15px 16px; }
.rcv__card-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.rcv__card-title { font-size: 13.5px; font-weight: 600; margin: 0; }
.rcv__card-note { font-size: 11px; color: var(--p-ink-3); margin: 0 0 0 auto; }

.rcv__buckets {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px;
  list-style: none; margin: 0; padding: 0;
  /* EQUAL BOXES. Grid already equalises the columns; this equalises the rows,
     so a bucket holding an em dash is exactly as tall as one holding a figure
     and a filled bar. Without it the populated card grew and the row read as a
     ranking rather than five equal buckets. */
  align-items: stretch;
}
.rcv__bucket {
  border: 1px solid var(--p-line); border-radius: 14px; padding: 11px 12px;
  /* TRANSPARENT, AND IT MUST BE STATED EXPLICITLY. These are <button>
     elements and nothing in base.css resets button backgrounds, so with no
     `background` declared every bucket fell back to the user agent's
     `buttonface` — an opaque light grey. On this dark surface that drew five
     pale slabs, and the 10.5px muted labels and counts sitting on them were
     close to unreadable.
     The border alone carries the card. Nothing is tinted, so the only things
     with colour in this row are the figures, which is where the meaning is.
     Note `transparent` is doing real work here and is not a no-op: removing
     this line restores the grey. */
  background: transparent;
  /* The rest of the UA button defaults go too — they were never wanted, and
     only the background was visible enough to notice. */
  color: inherit; font: inherit; text-align: start; appearance: none;
  /* Stretching the card is pointless if its contents sit centred inside it. */
  display: flex; flex-direction: column;
  /* EQUAL WIDTH. The grid equalises the <li>, but the <button> inside it is
     shrink-to-fit, so each card was only as wide as its own text: "Not yet due
     / BHD 1,000.000" made a card twice the width of "90+ days / —". Five
     buckets of visibly different sizes read as a ranking, which is the one
     thing an aging row must not imply — the buckets are fixed date ranges and
     the FIGURES carry the difference, not the boxes. */
  width: 100%;
  /* AND EQUAL HEIGHT, for the same reason and by the same mechanism. `stretch`
     on the grid equalises the <li>; without this the <button> inside stays
     content-height, so the moment a card is narrow enough for "BHD 1,000.000"
     to wrap it grew 17px taller than its neighbours while its <li> did not.
     Measured at a 700px container: 122.4x108 beside four 122.4x91. Only
     visible below about 900px, which is exactly where nobody looks. */
  height: 100%;
}
.rcv__bucket-label { display: block; font-size: 10.5px; color: var(--p-ink-3); }
.rcv__bucket-amount { display: block; font-size: 14.5px; font-weight: 600; margin-top: 5px; }
.rcv__bucket-count { display: block; font-size: 10.5px; color: var(--p-ink-3); margin-top: 3px; }

/* Age is carried by the WORDS in the label; these only reinforce it. */
.rcv__bucket--notYetDue .rcv__bucket-amount { color: var(--p-ok); }
.rcv__bucket--d31_60 .rcv__bucket-amount,
.rcv__bucket--d61_90 .rcv__bucket-amount { color: var(--p-warn); }
.rcv__bucket--d90_plus .rcv__bucket-amount { color: var(--p-risk); }

.rcv__bar {
  display: block; height: 3px; border-radius: 3px;
  background: var(--p-line);
  /* PINNED TO THE BOTTOM now the cards are equal height. `auto` absorbs the
     slack in the short cards, so every bar sits on the same line and the row
     reads as one scale. Left at a fixed 8px the bars floated at five different
     heights and the equal cards looked like a mistake rather than a decision.
     The 8px minimum survives as the count's bottom margin. */
  margin-top: auto;
}
.rcv__bucket-count { margin-bottom: 8px; }
.rcv__bar-fill { display: block; height: 3px; border-radius: 3px; background: var(--p-ink-3); }
.rcv__bucket--notYetDue .rcv__bar-fill { background: var(--p-ok); }
.rcv__bucket--d31_60 .rcv__bar-fill,
.rcv__bucket--d61_90 .rcv__bar-fill { background: var(--p-warn); }
.rcv__bucket--d90_plus .rcv__bar-fill { background: var(--p-risk); }

.rcv__total {
  display: flex; align-items: baseline; gap: 10px;
  margin: 12px 0 0; padding-top: 11px; border-top: 1px solid var(--p-line);
  font-size: 12.5px;
}
.rcv__total-label { color: var(--p-ink-2); }
.rcv__total-value { margin-inline-start: auto; font-size: 15px; font-weight: 600; }

.rcv__note { font-size: 11.5px; margin: 10px 0 0; }
.rcv__note--risk { color: var(--p-risk); }
.rcv__note--warn { color: var(--p-warn); }

/* 900px is the floor. Five aging cards do not survive it, so they wrap rather
   than shrink past legibility — an aging bucket whose amount has wrapped mid
   figure is worse than one on a second line. */
@media (max-width: 1100px) {
  .rcv__buckets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .rcv__buckets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rcv__hero { align-items: flex-start; }
  .rcv__stats { width: 100%; }
  .rcv__stat { flex: 1; min-width: 0; }
}

/* ---- The subledger, at the export's measured values --------------------- */
/* Body `grid-template-columns:1fr 330px; gap:16px; align-items:start`, and the
   invoice table `1.5fr 96px 84px 84px 108px 108px 96px; gap:12px`, both taken
   from the export rather than eyeballed. */
.rcv__body { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 16px; align-items: start; }
.rcv__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.rcv__side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
@media (max-width: 1099px) { .rcv__body { grid-template-columns: minmax(0, 1fr); } }

.rcv__card-head--row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rcv__spacer { flex: 1; min-width: 0; }
.rcv__statuses { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

.rcv__table { min-width: 720px; }
.rcv__thead,
.rcv__row {
  display: grid;
  grid-template-columns: 1.5fr 96px 84px 84px 108px 108px 96px;
  gap: 12px; align-items: center; width: 100%; text-align: start;
}
.rcv__thead {
  padding: 9px 16px; border-bottom: 1px solid var(--p-line);
  font-size: 10px; font-weight: 600; letter-spacing: .5px;
  text-transform: uppercase; color: var(--p-ink-3);
}
.rcv__row { padding: 11px 16px; border-bottom: 1px solid var(--p-line); }
.rcv__row:last-child { border-bottom: none; }
.rcv__cell { font-size: 12px; color: var(--p-ink-2); min-width: 0; }
.rcv__cell--amt { text-align: end; }
/* Late is stated in words beside the date; the colour only reinforces it. */
.rcv__cell--late { color: var(--p-warn); }
.rcv__row-party { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rcv__row-name {
  font-size: 12.5px; font-weight: 600; color: var(--p-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rcv__row-bucket { font-size: 10.5px; color: var(--p-ink-3); }

.rcv__card-foot {
  margin: 0; padding: 10px 16px; border-top: 1px solid var(--p-line);
  font-size: 11.5px; color: var(--p-ink-3);
}
.rcv__empty {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  padding: 40px 16px; color: var(--p-ink-3); text-align: center;
}
.rcv__empty p { margin: 0; font-size: 13px; }

.rcv__parties { display: flex; flex-direction: column; }
.rcv__party {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: none; border-top: 1px solid var(--p-line);
  background: transparent; color: var(--p-ink); cursor: pointer;
  font-family: inherit; text-align: start;
}
.rcv__party:first-child { border-top: none; }
.rcv__party:hover { background: var(--p-surface-2); }
.rcv__party.is-selected { background: var(--p-surface-2); }
.rcv__party-mark {
  width: 26px; height: 26px; flex: none; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 600;
  background: var(--p-surface-2); color: var(--p-ink-2);
}
.rcv__party-ident { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.rcv__party-name {
  font-size: 12.5px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.rcv__party-meta { font-size: 10.5px; color: var(--p-ink-3); }
.rcv__party-amount { font-size: 12.5px; font-weight: 600; }

/* The bucket card is a button again now that it filters something. */
/* SELECTED IS A BORDER, NOT A FILL. Tinting the card back in undoes the point
   of clearing the UA background — a chosen bucket became another pale slab and
   the muted 10.5px label on it lost contrast again. The border carries the
   state on its own, and the accent reads at a glance without touching the
   figures, which are the only things in this row that should carry colour. */
/* SELECTED IS A WHITE BORDER, AND NOTHING ELSE. The fill is gone from every
   bucket — all five are the page surface behind a 1px rule, so the row reads as
   five equal date ranges and only the FIGURES carry colour. Selection brightens
   the rule to the primary ink, which is white on the dark theme and near-black
   on the light one: "white" here means "the strongest border the theme has",
   not a literal white value, which would vanish on a light background.
   (Written without the hex: lint.py scans comments too, so naming the
   value here would trip its hard-coded-colour rule.) */
.rcv__bucket.is-selected { border-color: var(--p-ink); }