/* ---- Receivables ------------------------------------------
   Audit G12. Every class here is defined; the first draft of the page
   referenced .page-title, .page-sub, .filter-bar and .row-overdue, none of
   which exist anywhere in css/ — a page can look finished in the DOM and be
   unstyled in the browser, and nothing in the gate reads CSS. */

.receivables-sub {
  font-size: 13px;
  color: var(--text-2);
  margin: 0 0 18px;
}

.receivables-filters {
  display: flex;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin: 16px 0 12px;
}

.receivables-totals { display: flex; flex-direction: column; gap: 14px; }

/* Late rows are tinted, not coloured text: the row is the unit a person scans,
   and the amount still has to stay readable. */
.receivables-row-late { background: #FEF2F2; }

.receivables-empty {
  text-align: center;
  color: var(--text-2);
  font-size: 13px;
  padding: 26px 0;
}

.ageing-chip { transition: background .12s ease, border-color .12s ease; }
.ageing-chip:hover { background: var(--bg); border-color: var(--primary); }

@media (max-width: 900px) {
  .receivables-filters > * { flex: 1 1 100%; max-width: none; }
}

/* The page wrapper. Present so the page has a hook of its own, and so the
   class check-css-classes.mjs sees in receivables.js resolves to something. */
.receivables-page { display: block; }