/* ============================================================
   PASSAGE — Invoices screen.

   Deliberately small. The list itself is ListView + listview.css, the
   cards are employer.css's .emp-card-*, the tiles are styles.css's
   .kpi and the pills are styles.css's .pill — this file only carries
   the handful of rules that are about MONEY, and the one rule this
   screen exists to obey.

   THE RULE. The firm has said twice, about two different screens:
   "the information is getting cut off, especially on the cards."
   So on this screen nothing is ever shortened. A name wraps, a figure
   never breaks mid-number, and when a table is genuinely wider than
   the glass it SCROLLS — .tbl-wrap already does that. There is no
   text-overflow:ellipsis and no white-space:nowrap on anything that
   carries a name, anywhere in this file, and there must not be.
   ============================================================ */

/* ---------- the tiles ----------
   .kpis is repeat(auto-fit, minmax(190px, 1fr)) and .kpi is
   overflow:hidden — which is fine for "12 files" and wrong for
   "$1,234,567". A firm with a seven-figure receivable would have had
   the last digits clipped by the tile's own overflow. Wider tracks,
   and a figure that is allowed to wrap onto a second line rather than
   disappear off the end of the first. */
.inv-kpis { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.inv-kpis .k-num { overflow-wrap: anywhere; line-height: 1.15; }
.inv-kpis .k-sub { color: var(--ink-faint); overflow-wrap: anywhere; }
.inv-kpis .k-lbl { overflow-wrap: anywhere; }

/* The overdue tile earns the alarm colour only when there is something
   overdue — a red $0 reads as a problem when it is the absence of one. */
.inv-num-red { color: var(--red); }
.inv-sub-red { color: var(--red) !important; }
.k-orb.inv-orb-red {
  background: radial-gradient(circle at 32% 28%, #C97B5F, var(--red-soft) 58%, var(--red));
}
/* Draft money is not owed and not collected, so its tile does not
   compete with the three that are. */
.k-orb.inv-orb-quiet {
  background: radial-gradient(circle at 32% 28%, #BDB4A4, #9C9384 58%, #7E7666);
}

/* ---------- the estimates footnote ----------
   One line, and only when the firm actually has estimates on file. */
.inv-note {
  margin: -6px 0 16px;
  font-size: 12.5px;
  color: var(--ink-soft);
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex-wrap: wrap;
}
.inv-note-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--gold-deep);
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.inv-note-link:hover { color: var(--ink); }

/* ---------- money in a cell ----------
   An amount is a single token: "$1,942.50" must never be broken across
   two lines as "$1,942." / "50", which is a different number to anyone
   skimming the column. The cell may grow, the table may scroll — the
   figure stays whole. */
.inv-amt,
.inv-nowrap { white-space: nowrap; }
.inv-amt { font-variant-numeric: tabular-nums; }

/* The invoice number is an identifier — never wrapped, never abridged,
   and tabular so a column of them lines up. */
.inv-no {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: .01em;
}

/* Past the due date and still owed. The one colour on this screen that
   means "pick up the phone". */
.inv-late { color: var(--red); font-weight: 600; }

/* ---------- the party ----------
   The opposite rule to the number: a legal name can be
   "1000158805 Ontario Inc. o/a Harajuku Izakaya" and it is shown
   whole. It wraps, and a single unbroken token (a domain, a run-on
   name) breaks anywhere rather than pushing the column wider than the
   screen. .lv-link is a <button>, which does not inherit either. */
.inv-party {
  white-space: normal;
  overflow-wrap: anywhere;
  text-align: left;
}
/* The legal name is a SECOND line, not a continuation of the first.
   .lv-link is a <button> (inline-block), so without this the operating
   name and the legal name ran together as one string —
   "Z Consulting and Management ServicesZCMS Ltd." */
.lv-tbl .t-sub.inv-party { display: block; margin-top: 2px; }
/* ListView's row cells have no width of their own, so the two name
   columns are given a floor and a ceiling: enough width that a name
   does not wrap after every second word, not so much that the money
   columns get squeezed off the right. */
/* Scoped by column KEY, not position. `th:nth-child(2)` pinned the second
   column of EVERY ListView in the app to 190px — Country on the workers list,
   a Date column on Expiries — from 1 Sep until 28 Sep 2026. */
.lv-tbl td[data-l="Billed to"],
.lv-tbl th[data-lv-sort="party"] { min-width: 190px; }

/* ---------- the card ----------
   employer.css already makes .emp-card-name and .emp-card-sub wrap
   (see its own note, written for the same complaint). The only thing
   this screen adds is that the invoice number under the party name is
   the card's second identifier, so it reads as one. */
.inv-card-no {
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}
/* The three figures on the foot rail. `flex-wrap` is already on
   .emp-card-stats, so a long amount takes its own row rather than
   being squeezed — which is the whole point. */
.lv-card .emp-stat-chip { white-space: nowrap; }

/* .lv-grid stretches every card in a row to the tallest, and
   listview.css's own note says the foot rail is meant to sit on one
   baseline across the row for exactly that reason. .emp-card-stats has
   no margin-top:auto of its own, so a short card left its three
   amounts floating halfway up. Scoped to this screen's own class
   rather than to .emp-card-stats, which Employers, Foreign Workers and
   LMIA Applications also wear. */
.lv-card .inv-card-stats { margin-top: auto; }

/* ---- phone ----
   .tbl.cardable (mobile-lists.css) turns every table row into a card
   with the column label printed from data-l. Money lands on the right
   of that row, so it must not collide with its own label. */
@media (max-width: 640px) {
  /* Two tiles a row rather than four in a strip; everything else about
     the tile on a phone — the orb-left grid, the type sizes — is
     mobile-shell.css's and is left alone so this screen's tiles are the
     same object as the dashboard's. */
  .inv-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }

  /* THE ONE THING WE OVERRIDE. mobile-shell.css puts
     `white-space:nowrap; overflow:hidden; text-overflow:ellipsis` on
     every .kpi .k-sub on a phone, which turned "1 bill is past the due
     date" into "1 bill is past the due d…" — precisely the complaint
     the firm has now made twice. The sentence under an amount is the
     one that says what to DO about it, so here it wraps. */
  .inv-kpis .k-sub {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 10px;
    line-height: 1.3;
    overflow-wrap: anywhere;
  }

  /* The min-widths above are a desktop concern; on a phone the table is
     stacked and a floor of 190px would force a horizontal scroll on a
     screen that does not need one. */
  .lv-tbl td[data-l="Billed to"],
  .lv-tbl th[data-lv-sort="party"] { min-width: 0; }

  .tbl.cardable td[data-l] .inv-cell {
    margin-left: auto;
    text-align: right;
  }
}

/* RESEND, FROM THE LIST.
   Quiet by default and gold when the bill is actually late, so a glance down
   the column shows which ones are worth chasing without reading the status
   pill on every row. It is a real button inside a clickable row, so it needs
   to look pressable rather than like text that happens to sit there. */
.inv-resend{
  font:inherit; font-size:12px; font-weight:600; line-height:1;
  padding:6px 11px; border-radius:999px; cursor:pointer; white-space:nowrap;
  color:var(--ink-soft); background:transparent;
  border:1px solid var(--stroke);
  transition:background .2s, color .2s, border-color .2s;
}
.inv-resend:hover{ background:var(--bone); color:var(--ink); border-color:var(--ink-faint); }
.inv-resend:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
.inv-resend.is-late{
  color:var(--gold-deep); border-color:var(--gold);
  background:rgba(169,130,76,.08);
}
.inv-resend.is-late:hover{ background:rgba(169,130,76,.16); color:var(--gold-deep); }