/* ============================================================
   BIDII CLEANERS — payment & follow-up tracker
   Loaded on top of bidii.css and office.css.

   The screen is built around one job: get the owner from "who
   owes me money?" to a message sent, without typing anything.
   ============================================================ */

.pm-split { display: grid; gap: 1.2rem; align-items: start; }
/* The invoice table carries seven columns. Below 1360px the chase panel
   squeezed it until invoice numbers wrapped onto three lines and the status
   pill fell off the edge, so below that the panel drops underneath instead. */
@media (min-width: 1360px) { .pm-split { grid-template-columns: minmax(0,1fr) 340px; gap: 1.4rem; } }

/* ---------- Chase list ---------- */
.pm-chase { list-style: none; margin: 0; padding: 0; }
.pm-chase li { padding: .9rem 1.1rem; border-bottom: 1px solid var(--b-line); }
.pm-chase li:last-child { border-bottom: 0; }
.pm-chase .top { display: flex; justify-content: space-between; gap: .8rem; align-items: baseline; }
.pm-chase .who { font-weight: 700; font-size: .93rem; }
.pm-chase .amt { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.pm-chase .meta { font-size: .8rem; color: var(--b-slate); margin-top: .1rem; }
.pm-chase .go { margin-top: .6rem; display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---------- Ageing bars ---------- */
.pm-age { display: grid; gap: .8rem; }
.pm-age-row .top { display: flex; justify-content: space-between; gap: 1rem; font-size: .85rem; margin-bottom: .3rem; }
.pm-age-row .top .n { font-weight: 800; font-variant-numeric: tabular-nums; }
.pm-track { height: 8px; border-radius: 4px; background: var(--b-line); overflow: hidden; }
.pm-track span { display: block; height: 100%; border-radius: 4px; }

/* ---------- Balance column emphasis ---------- */
.of-table td.bal { font-weight: 800; }
/* An invoice number and a date are each one token - wrapping them mid-way
   makes the table unreadable. If space still runs out the wrapper scrolls. */
.of-table td.pm-no, .of-table td.pm-date { white-space: nowrap; }
.of-table tbody tr.pm-row { cursor: pointer; }
.of-table tbody tr.pm-row:focus-visible { outline: 3px solid var(--b-blue); outline-offset: -3px; }
.pm-late { color: #B3261E; font-weight: 700; }

/* ---------- The ready-written follow-up ---------- */
.pm-msg {
  width: 100%; min-height: 168px;
  border: 1.5px solid var(--b-line); border-radius: var(--b-r-sm);
  padding: .8rem .9rem; font-size: .88rem; line-height: 1.6;
  background: var(--b-wash); resize: vertical;
}
.pm-msg:focus-visible { outline: 3px solid var(--b-blue); outline-offset: 1px; }

.pm-tone { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .7rem; }

.pm-paid-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.pm-paid-list li { display: flex; justify-content: space-between; gap: 1rem; font-size: .86rem; }
.pm-paid-list .k { color: var(--b-slate); }
.pm-paid-list .v { font-weight: 700; font-variant-numeric: tabular-nums; }

.pm-sub-h {
  font-size: .72rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--b-slate);
  margin: 1.4rem 0 .6rem;
}
.pm-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; }
.pm-actions .of-btn { flex: 1 1 auto; }