/* ── The party registry and the two party pages ──────────────────────────────
   Ported from the Tally explorer (app/views/parties/_party_styles.html.erb),
   restyled onto the plant's paper palette (the variables at the end of
   layout.css). Management-first, the way the explorer set it: the party, the
   position, the activity — registry plumbing (dedup basis, matched keys,
   ledger names) sits behind disclosures and in the small print.

   Everything is scoped under .pwrap so the generic names the explorer uses
   (.tag, .amt, .stat, .chip, .meter, .none, .legend) cannot leak onto anyone
   else's page. No colour is spelled out that is not one of the palette
   variables; the rgba() tints are those same variables at low alpha, as in
   tally_browse.css. */

.pwrap { --party-mono: var(--bs-font-monospace); }

/* ── role marks ── */
.pwrap .tag {
  font-family: var(--party-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 0.14rem 0.5rem; border-radius: 4px; margin-left: 0.45rem; vertical-align: 2px;
}
.pwrap .tag.customer { background: rgba(47, 107, 63, 0.14); color: var(--green-ink); }
.pwrap .tag.supplier { background: rgba(146, 117, 36, 0.16); color: var(--gold-ink); }

/* ── amounts: tabular, small-cap suffix, rust = Dr, green = Cr ── */
.pwrap .amt { font-family: var(--party-mono); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pwrap .amt .suf { font-size: 0.62em; letter-spacing: 0.04em; margin-left: 0.25em; opacity: 0.85; }
.pwrap .amt.dr { color: var(--rust-ink); }
.pwrap .amt.cr { color: var(--green-ink); }
.pwrap .amt.plain { color: var(--ink-2); }
.pwrap .meter { height: 3px; background: var(--edge); border-radius: 2px; overflow: hidden; margin-top: 0.3rem; }
.pwrap .meter span { display: block; height: 100%; }
.pwrap .meter.dr span { background: var(--rust); }
.pwrap .meter.cr span { background: var(--green); }

/* ── the tools row above the registry ── */
.pwrap .ptools { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin: 0.2rem 0 0.4rem; }
/* The form (and the name box inside it) stretches to fill the bar. */
.pwrap .ptools form { display: flex; gap: 0.5rem; align-items: center; margin: 0; flex: 1 1 auto; min-width: 0; }
.pwrap .ptools input[type="search"] {
  font-size: 0.9rem; padding: 0.45rem 0.7rem; flex: 1 1 auto; min-width: 8rem;
  border: 1px solid var(--edge-2); border-radius: 8px; background: var(--well); color: var(--ink);
}
.pwrap .ptools select {
  font-family: var(--party-mono); font-size: 0.76rem; padding: 0.45rem 2rem 0.45rem 0.7rem;
  /* background-COLOR: the shorthand would erase .form-select's caret image.
     width auto: .form-select's 100% would swallow the bar and crush the
     name box, which is the element meant to stretch. */
  border: 1px solid var(--edge-2); border-radius: 999px; background-color: var(--well); color: var(--ink);
  width: auto; flex: 0 0 auto;
}
.pwrap .ptools input[type="search"]:focus, .pwrap .ptools select:focus,
.pwrap .flowbar select:focus {
  outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(47, 107, 63, 0.15);
}
.pwrap .chip {
  font-family: var(--party-mono); font-size: 0.72rem; padding: 0.4rem 0.8rem; border: 1px solid var(--edge-2);
  border-radius: 999px; color: var(--ink-3); text-decoration: none; background: none; cursor: pointer;
}
.pwrap .chip:hover { color: var(--ink); border-color: var(--green); }
.pwrap .chip[hidden] { display: none; }
.pwrap .ptools .rescan-form { margin-left: auto; }
.pwrap .rescan {
  font-family: var(--party-mono); font-size: 0.78rem; font-weight: 600; padding: 0.5rem 1rem;
  border: 0; border-radius: 8px; background: var(--green); color: var(--deck); cursor: pointer;
}
.pwrap .rescan:hover { background: var(--green-ink); }
.pwrap .scanmeta { font-family: var(--party-mono); font-size: 0.68rem; color: var(--ink-4); margin: 0.1rem 0 0.9rem; }

/* ── the registry table ── */
.pwrap table.plist, .pwrap table.books { border-collapse: collapse; width: 100%; }
.pwrap .plist th, .pwrap .books th {
  background: var(--ink); color: var(--deck); font-family: var(--party-mono); font-size: 0.6rem;
  text-transform: uppercase; letter-spacing: 0.08em; padding: 0.5rem 0.8rem; text-align: left;
}
.pwrap .plist th.num, .pwrap .plist td.num,
.pwrap .books th.num, .pwrap .books td.num { text-align: right; }
.pwrap .plist td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--edge); vertical-align: middle; }
.pwrap .books td { padding: 0.55rem 0.8rem; border-bottom: 1px solid var(--edge); }
.pwrap .plist tbody tr:hover td, .pwrap .books tbody tr:hover td { background: var(--rail); }
/* The name is a plain table link, same dress as every other register. */
.pwrap .pwhen { font-family: var(--party-mono); font-size: 0.74rem; color: var(--ink-3); white-space: nowrap; }
.pwrap .pamt-cell { min-width: 190px; }
.pwrap .none {
  padding: 1.6rem; text-align: center; font-family: var(--party-mono); font-size: 0.76rem; color: var(--ink-4);
}

/* ── party header: tabs left, tax numbers right ── */
.pwrap .pheadrow {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; align-items: center;
  justify-content: space-between; margin: 0 0 0.2rem;
}
.pwrap .pheadleft { display: flex; gap: 0.4rem; align-items: center; }
.pwrap .vtab {
  font-family: var(--party-mono); font-size: 0.7rem; padding: 0.35rem 0.9rem; border: 1px solid var(--edge-2);
  border-radius: 999px; color: var(--ink-3); text-decoration: none;
}
.pwrap .vtab:hover { border-color: var(--green); color: var(--ink); }
.pwrap .vtab.on { background: var(--ink); color: var(--deck); border-color: var(--ink); }
.pwrap .pid-strip {
  display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; align-items: baseline;
  font-family: var(--party-mono); font-size: 0.74rem; color: var(--ink-3); margin: 0;
}
.pwrap .pid-strip b { color: var(--ink); font-weight: 600; }
.pwrap .pid-strip .tag { margin-left: 0; vertical-align: baseline; }

/* ── the three figures that frame the page ── */
.pwrap .masthead {
  display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--edge-2); border-radius: 12px;
  background: var(--panel); margin: 1.2rem 0 1.6rem; overflow: hidden;
}
.pwrap .mast { padding: 1rem 1.4rem; border-right: 1px solid var(--edge); }
.pwrap .mast:last-child { border-right: 0; }
.pwrap .mast .k {
  font-family: var(--party-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-4); display: block; margin-bottom: 0.35rem;
}
.pwrap .mast .v { font-weight: 700; font-size: 1.7rem; line-height: 1; }
.pwrap .mast .v .amt { font-size: 1.7rem; }
.pwrap .mast .v.plain { font-family: var(--party-mono); font-weight: 500; font-size: 1.15rem; }
.pwrap .mast .note {
  display: block; font-family: var(--party-mono); font-size: 0.64rem; color: var(--ink-3); margin-top: 0.35rem;
}

/* ── section headings ── */
.pwrap h2.sect {
  font-weight: 600; font-size: 1.25rem; margin: 1.6rem 0 0.6rem; color: var(--ink);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.7rem;
}
.pwrap .sect-note { font-family: var(--party-mono); font-size: 0.68rem; color: var(--ink-4); font-weight: 400; }

/* ── exposure by book, with the accounts behind each ── */
.pwrap .bookname { font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.pwrap .books details { display: inline; }
.pwrap .books summary {
  font-family: var(--party-mono); font-size: 0.66rem; color: var(--green-ink); cursor: pointer;
  list-style: none; margin-top: 0.15rem;
}
.pwrap .books summary::-webkit-details-marker { display: none; }
.pwrap .books summary:hover { text-decoration: underline; }
.pwrap .acct-rows { margin: 0.4rem 0 0.2rem; padding-left: 0.2rem; border-left: 2px solid var(--edge); }
.pwrap .acct {
  display: flex; gap: 0.9rem; align-items: baseline; font-size: 0.8rem; padding: 0.15rem 0 0.15rem 0.6rem;
}
.pwrap .acct .nm { display: flex; flex-direction: column; gap: 0.1rem; }
.pwrap .acct a { color: var(--ink-2); }
.pwrap .acct .sub { font-family: var(--party-mono); font-size: 0.62rem; color: var(--ink-4); }
.pwrap .acct .amt { margin-left: auto; font-size: 0.76rem; }
.pwrap .nobal { margin-left: auto; font-family: var(--party-mono); font-size: 0.66rem; color: var(--ink-4); }

/* ── profile: one card per side the party trades on ── */
.pwrap .role-card {
  background: var(--panel); border: 1px solid var(--edge-2); border-radius: 12px;
  padding: 1.1rem 1.3rem 1.2rem; margin: 0 0 1.2rem;
}
.pwrap .role-card > h2 { font-weight: 600; font-size: 1.15rem; margin: 0 0 0.8rem; color: var(--ink); }
.pwrap .stats {
  display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--edge); border-radius: 10px;
  overflow: hidden; margin-bottom: 1rem; background: var(--well);
}
.pwrap .stat { padding: 0.7rem 1.1rem; border-right: 1px solid var(--edge); min-width: 130px; }
.pwrap .stat:last-child { border-right: 0; }
.pwrap .stat .k {
  font-family: var(--party-mono); font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--ink-4); display: block; margin-bottom: 0.25rem;
}
.pwrap .stat .v { font-weight: 700; font-size: 1.25rem; color: var(--ink); }
.pwrap .stat .v.plain { font-family: var(--party-mono); font-weight: 500; font-size: 0.95rem; }
.pwrap .stat .u { font-family: var(--party-mono); font-size: 0.62rem; color: var(--ink-3); margin-left: 0.25rem; }
.pwrap .duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.pwrap .blockk {
  font-family: var(--party-mono); font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--ink-4); margin: 0 0 0.5rem;
}

/* ── seasonality: CSS-only ₹/MT tabs over per-fiscal-year lines ── */
.pwrap .metric-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pwrap .season-tabs { display: flex; gap: 0.4rem; margin: 0 0 0.55rem; }
.pwrap .season-tabs label {
  font-family: var(--party-mono); font-size: 0.66rem; padding: 0.32rem 0.85rem; border: 1px solid var(--edge-2);
  border-radius: 999px; color: var(--ink-3); cursor: pointer; user-select: none;
}
.pwrap .seasonality input.metric-amount:checked ~ .season-tabs .tab-amount,
.pwrap .seasonality input.metric-qty:checked ~ .season-tabs .tab-qty {
  background: var(--ink); color: var(--deck); border-color: var(--ink);
}
.pwrap .seasonality input.metric-amount:focus-visible ~ .season-tabs .tab-amount,
.pwrap .seasonality input.metric-qty:focus-visible ~ .season-tabs .tab-qty {
  outline: 2px solid var(--green); outline-offset: 2px;
}
.pwrap .seasonality .legend { display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem; margin: 0 0 0.45rem; }
.pwrap .seasonality .legend .chip {
  display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--party-mono);
  font-size: 0.62rem; color: var(--ink-3); padding: 0; border: 0; background: none; border-radius: 0;
}
.pwrap .seasonality .legend .sw { display: inline-block; width: 14px; height: 3px; border-radius: 2px; }
.pwrap .charts .chart { display: none; }
.pwrap .seasonality input.metric-amount:checked ~ .charts .chart-amount { display: block; }
.pwrap .seasonality input.metric-qty:checked ~ .charts .chart-qty { display: block; }
.pwrap .chartwrap svg { width: 100%; height: auto; display: block; }
.pwrap .season-svg .mlab, .pwrap .season-svg .unit {
  font-family: var(--party-mono); font-size: 10px; fill: var(--ink-4);
}
.pwrap .season-svg .unit { letter-spacing: 0.08em; }
.pwrap .season-svg .axisline { stroke: var(--edge); stroke-width: 1; }

/* ── product mix ── */
.pwrap .mix { display: flex; flex-direction: column; gap: 0.45rem; }
.pwrap .mixrow { font-size: 0.82rem; }
.pwrap .mixrow .nm { display: flex; justify-content: space-between; gap: 1rem; }
.pwrap .mixrow .nm .amt { font-size: 0.76rem; color: var(--ink-3); }
.pwrap .mixbar { height: 5px; background: var(--edge); border-radius: 3px; overflow: hidden; margin-top: 0.2rem; }
.pwrap .mixbar span { display: block; height: 100%; background: var(--gold); }

/* ── bill-wise / invoice-wise position tabs ──────────────────────────────────
   CSS-only radio tabs, the same pattern as the seasonality ₹/MT switch:
   Transactions is the default pane, plus one per direction the party trades in
   (bp0 receivable, bp1 payable — an inter-unit party carries both). */
.pwrap .txn-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.pwrap .txn-tabs { display: inline-flex; flex-wrap: wrap; gap: 0.4rem; }
.pwrap .txn-tabs label {
  font-family: var(--party-mono); font-size: 0.7rem; padding: 0.35rem 0.95rem;
  border: 1px solid var(--edge-2); border-radius: 999px; color: var(--ink-3);
  cursor: pointer; user-select: none; font-weight: 400;
}
.pwrap .txn-tabs-wrap input.txn-r-vd:checked ~ h2 .tab-vd,
.pwrap .txn-tabs-wrap input.txn-r-bp0:checked ~ h2 .tab-bp0,
.pwrap .txn-tabs-wrap input.txn-r-bp1:checked ~ h2 .tab-bp1 {
  background: var(--ink); color: var(--deck); border-color: var(--ink);
}
.pwrap .txn-tabs-wrap input.txn-r-vd:focus-visible ~ h2 .tab-vd,
.pwrap .txn-tabs-wrap input.txn-r-bp0:focus-visible ~ h2 .tab-bp0,
.pwrap .txn-tabs-wrap input.txn-r-bp1:focus-visible ~ h2 .tab-bp1 {
  outline: 2px solid var(--green); outline-offset: 2px;
}
.pwrap .txn-pane { display: none; }
.pwrap .txn-tabs-wrap input.txn-r-vd:checked ~ .pane-vd { display: block; }
.pwrap .txn-tabs-wrap input.txn-r-bp0:checked ~ .pane-bp0 { display: block; }
.pwrap .txn-tabs-wrap input.txn-r-bp1:checked ~ .pane-bp1 { display: block; }
.pwrap .billmeta { font-family: var(--party-mono); font-size: 0.66rem; color: var(--ink-4); }

/* ── ageing buckets ──
   Five steps of one gradient — green (fresh) through gold to rust (old) —
   because the buckets are ordered and the colour has to be readable as an
   order. Only palette variables: the tints are those same colours at low
   alpha, as everywhere else in this file. */
.pwrap .bkt {
  font-family: var(--party-mono); font-size: 0.58rem; text-transform: uppercase;
  letter-spacing: 0.05em; padding: 0.12rem 0.5rem; border-radius: 999px; white-space: nowrap;
}
.pwrap .bkt.b0 { background: rgba(47, 107, 63, 0.14); color: var(--green-ink); }
.pwrap .bkt.b1 { background: rgba(146, 117, 36, 0.16); color: var(--gold-ink); }
.pwrap .bkt.b2 { background: rgba(146, 117, 36, 0.3); color: var(--gold-ink); }
.pwrap .bkt.b3 { background: rgba(168, 67, 29, 0.16); color: var(--rust-ink); }
.pwrap .bkt.b4 { background: rgba(168, 67, 29, 0.26); color: var(--rust-ink); font-weight: 600; }
.pwrap .bucketbars { display: flex; flex-direction: column; gap: 0.4rem; max-width: 640px; margin-bottom: 0.4rem; }
.pwrap .bucketrow { display: grid; grid-template-columns: 96px 1fr 130px; gap: 0.8rem; align-items: center; }
.pwrap .bucketbar { height: 8px; background: var(--edge); border-radius: 4px; overflow: hidden; }
.pwrap .bucketbar span { display: block; height: 100%; border-radius: 4px; }
.pwrap .bucketbar span.b0 { background: var(--green); }
.pwrap .bucketbar span.b1 { background: var(--gold); }
.pwrap .bucketbar span.b2 { background: var(--gold-ink); }
.pwrap .bucketbar span.b3 { background: var(--rust); }
.pwrap .bucketbar span.b4 { background: var(--rust-ink); }
.pwrap .bucketrow .bval { font-size: 0.76rem; text-align: right; color: var(--ink-3); }

/* ── the trend arrow and the recently-settled strip ── */
.pwrap .trend { font-family: var(--party-mono); font-weight: 700; }
.pwrap .trend.up { color: var(--green-ink); }   /* improving = paying faster */
.pwrap .trend.down { color: var(--rust-ink); }
.pwrap .trend.flat { color: var(--ink-3); }
  font-family: var(--party-mono); font-size: 0.68rem; color: var(--ink-3); padding: 0.3rem 0.7rem;
  border: 1px solid var(--edge-2); border-radius: 999px; background: var(--panel);
}

/* Collections against pre-import openings: money that moved, in no bucket.
   Set apart rather than folded in, so it cannot read as a receivable. */
.pwrap .openings-line {
  display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: baseline;
  border: 1px dashed var(--edge-2); border-radius: 10px; padding: 0.6rem 0.9rem; margin-top: 1.1rem;
}
.pwrap .openings-line .why { font-family: var(--party-mono); font-size: 0.68rem; color: var(--ink-4); }

/* ── the monthly Dr-vs-Cr flow frame ── */
.pwrap .flowcard {
  background: var(--panel); border: 1px solid var(--edge-2); border-radius: 14px;
  padding: 1rem 1.3rem 1.1rem; margin: 1.1rem 0;
}
.pwrap .flowbar { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; align-items: center; margin-bottom: 0.6rem; }
.pwrap .flow-kicker {
  font-family: var(--party-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-4);
}
.pwrap .flowbar select {
  font-family: var(--party-mono); font-size: 0.72rem; padding: 0.3rem 1.8rem 0.3rem 0.5rem;
  border: 1px solid var(--edge-2); border-radius: 7px; background-color: var(--well); color: var(--ink);
}
.pwrap .flow-booksel { max-width: 280px; height: 1.9rem; overflow-y: auto; }
.pwrap .flow-legend {
  margin-left: auto; font-family: var(--party-mono); font-size: 0.66rem; color: var(--ink-3);
  display: inline-flex; align-items: center; gap: 0.35rem;
}
.pwrap .flow-legend .sw { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.pwrap .sw.dr, .pwrap .flowsvg .bar.dr { fill: var(--rust); background: var(--rust); }
.pwrap .sw.cr, .pwrap .flowsvg .bar.cr { fill: var(--green); background: var(--green); }
.pwrap .flowsvg { width: 100%; height: auto; display: block; }
.pwrap .flowsvg .bar { opacity: 0.9; }
.pwrap .flowsvg .bar:hover { opacity: 1; }
.pwrap .flowsvg .mlab { font-family: var(--party-mono); font-size: 11px; fill: var(--ink-4); }
.pwrap .flowsvg .ymax { font-family: var(--party-mono); font-size: 10px; fill: var(--ink-4); }
.pwrap .flowsvg .axis { stroke: var(--edge-2); stroke-width: 1; }
.pwrap .flow-note { font-family: var(--party-mono); font-size: 0.68rem; color: var(--ink-3); margin: 0 0 0.5rem; }
.pwrap .flow-note b { color: var(--ink); }
.pwrap .flow-empty { font-family: var(--party-mono); font-size: 0.76rem; color: var(--ink-4); padding: 1.2rem 0; margin: 0; }

@media (max-width: 900px) {
  .pwrap .duo { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .pwrap .ptools input[type="search"] { min-width: 0; flex: 1; }
  .pwrap .ptools .rescan-form { margin-left: 0; }
}

/* ── The transactions bar: what the list adds up to, and what narrows it ──
   A summary that changes with the filters, so the reader always knows what the
   figures are over. Dr and Cr stay apart — a netted total says nothing about
   either side of a year's trading. */
.txn-bar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  margin: 0.2rem 0 0.6rem;
}
.txn-sum { display: flex; align-items: baseline; gap: 0.55rem; flex-wrap: wrap; }
.txn-sum__n { font-size: 1.05rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.txn-sum__k { font-size: 0.78rem; color: var(--ink-3); }
.txn-sum__span {
  font-family: var(--bs-font-monospace); font-size: 0.68rem; color: var(--ink-4);
}
.txn-sum .amt { font-size: 0.8rem; }

.txn-picks { display: flex; align-items: center; gap: 0.4rem; margin-left: auto; flex-wrap: wrap; }
.txn-picks .form-select { width: auto; max-width: 14rem; font-size: 0.78rem; }

/* ── Bills and invoices wear the register's shell ──
   Uncapping the list made it long — 117 open bills on a real dealer — and a
   long table pushed the settled strip off the bottom of the page. Its own
   scroll, and a heading that stays put while the bills move under it. */
.vd--bills .vd-scroll { max-height: 58vh; }
.vd--bills .vd-row { align-items: baseline; }
.vd--bills .bookname { font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vd--bills .billmeta { color: var(--ink-4); }