/* ─── Purchases: the vendor register and one vendor's page ──────────────────
   Both pages are drawn in `.pwrap` — the party registry's own shell
   (tally_parties.css), reused rather than restated, because they are the same
   idea one level along: a searchable roll of entities, a sortable money column,
   and one entity's page behind it. What is here is only what that shell does
   not already carry.

   The section's hue is the tile's (#4d3772, ApplicationHelper::SECTION_LABELS)
   and it is used for exactly one thing: the own-group badge. A vendor that is
   really us is the one fact on a row that changes what the number means, so it
   is the one thing wearing the section's colour. */
.pwrap {
  --ours: #4d3772;
  --ours-ink: #3a2957;
}

/* OUR OWN GROUP. Not a warning and not an error — those rows are legitimate
   vendors and the office reads them — so it sits in the section's own hue
   rather than borrowing rust from the danger palette. */
.pwrap .tag.ours {
  background: rgba(77, 55, 114, 0.15);
  color: var(--ours-ink);
}

/* The two-sided party. Green, the same hue `.tag.customer` already wears on the
   party registry, because it is the same statement: this entity buys from us.
   A link, here, because there is a customer page to open. */
.pwrap a.tag.customer { text-decoration: none; }
.pwrap a.tag.customer:hover { text-decoration: underline; }

/* The row's second line: the tax number people quote, and the books this
   vendor bills from. Quiet — the name above it is what the eye lands on. */
.pwrap .vsub {
  display: block;
  margin-top: 0.2rem;
  font-family: var(--party-mono);
  font-size: 0.68rem;
  color: var(--ink-4);
}

/* A ledger or a book, as a chip. The ledger names are Tally's own and are long
   ("GROWEL PROCESSORS PVT LTD (PURCHASE RM)"), so they wrap as a set rather
   than forcing the column wide. */
.pwrap .vchip {
  display: inline-block;
  padding: 0.05rem 0.4rem;
  margin: 0.1rem 0.15rem 0.1rem 0;
  border: 1px solid var(--edge-2);
  border-radius: 999px;
  background: var(--rail);
  font-size: 0.68rem;
  line-height: 1.5;
  color: var(--ink-3);
  max-width: 22rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  vertical-align: middle;
}

/* The honest end of a list too long to print. Borderless so it reads as a
   count rather than as one more ledger. */
.pwrap .vchip--rest {
  border-color: transparent;
  background: transparent;
  color: var(--ink-4);
  font-style: italic;
}

.pwrap .vchip--book {
  border-color: transparent;
  background: transparent;
  padding-left: 0;
  color: var(--ink-4);
}
.pwrap .vchip--book::before { content: "· "; }

/* The money column's bar. `.meter` is the party registry's, and its two
   colours mean Dr and Cr there; a year's buying is a magnitude with no
   orientation, so this one wears the section's hue and says nothing it cannot
   back up. See Purchases::VendorsHelper#vendor_meter. */
.pwrap .meter.meter--spend span { background: var(--ours); }

/* The vendor page's two lists, side by side where there is room for them and
   stacked where there is not. Not Bootstrap's grid: these break on the
   CONTENT's width — two four-column tables — and not on the viewport's. */
.pwrap .vdocs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(28rem, 1fr));
  gap: 0 2rem;
  align-items: start;
}

.pwrap .vdoclist td { padding: 0.45rem 0.7rem; }
.pwrap .vdoclist .bookcell { color: var(--ink-3); font-size: 0.8rem; }