/* The document.
 *
 * Everything here paints on --doc-* tokens rather than the application's, because the document is
 * paper: it stays white in dark mode and it prints as itself. See the note in tokens.css.
 *
 * The four layouts share one body. Only the masthead rules below are per-layout, which is the whole
 * reason there is one set of totals styling rather than four.
 */

.inv-doc {
  /* The full-bleed mastheads reach the card edge by cancelling this padding with negative
   * margins. Held in variables rather than repeated as literals, because the padding changes on
   * narrow screens and on till rolls — and a hardcoded bleed then overshoots, clipping real text
   * behind the card edge. That bug shipped: banded and letterhead overshot by 20px on any screen
   * under 700px wide, quietly, for as long as the responsive rule existed. */
  --bleed-x: 44px;
  --bleed-y: 40px;
  background: var(--doc-paper);
  color: var(--doc-ink);
  font-family: var(--font-doc);
  padding: 40px 44px 48px;
  display: flex; flex-direction: column; gap: 26px;
}
.inv-empty { padding: 48px; text-align: center; color: var(--doc-muted); }

/* ---- masthead: shared pieces ---------------------------------------------------------------- */
.inv-brand { display: flex; align-items: center; gap: 14px; }
.inv-brand__logo { max-height: 46px; max-width: 180px; object-fit: contain; }
.inv-brand__name { font-size: 21px; font-weight: 600; letter-spacing: -.015em; line-height: 1.2; }
.inv-brand__web { font-size: 13px; color: var(--doc-muted); margin-top: 2px; }

.inv-title { text-align: right; }
.inv-title.is-left { text-align: left; }
.inv-title__word {
  font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: .18em; text-transform: uppercase; color: var(--doc-accent);
}
.inv-title__number {
  font-family: var(--font-mono); font-size: 19px; font-variant-numeric: tabular-nums;
  margin-top: 2px; display: flex; align-items: center; gap: 6px; justify-content: flex-end;
}
.inv-title.is-left .inv-title__number { justify-content: flex-start; }
.inv-title__warn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: #f8efdc; color: #8a5a08;
  font-family: var(--font); font-size: 11px; font-weight: 700;
  text-decoration: none; cursor: help;
}

.inv-status {
  display: inline-block; margin-top: 6px;
  font-family: var(--font); font-size: 10.5px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 3px;
  background: #eef1f5; color: #5f7285;
}
.inv-status[data-status="paid"] { background: #e2f2eb; color: #16704a; }
.inv-status[data-status="sent"] { background: #e6eefa; color: #14509b; }
.inv-status[data-status="overdue"] { background: #f8e8e6; color: #a33830; }
.inv-status[data-status="part-paid"] { background: #f8efdc; color: #8a5a08; }
.inv-status[data-status="cancelled"] { background: #eef1f5; color: #8a94a0; }
.inv-statusrow { display: flex; align-items: center; gap: 8px; margin-top: 14px; }

/* ---- masthead: classic ---------------------------------------------------------------------- */
.inv-head.is-classic {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding-bottom: 20px;
  border-bottom: 2px solid var(--doc-accent);
}

/* ---- masthead: minimal — the same structure, no colour, hairline rules ----------------------- */
.inv-head.is-minimal {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--doc-ink);
}
.inv-head.is-minimal .inv-title__word { color: var(--doc-muted); letter-spacing: .22em; }
.inv-head.is-minimal .inv-brand__name { font-weight: 500; }

/* ---- masthead: banded ----------------------------------------------------------------------- */
.inv-head.is-banded { display: block; }
.inv-band {
  background: var(--doc-accent); color: #fff;
  margin: calc(-1 * var(--bleed-y)) calc(-1 * var(--bleed-x)) 0; padding: 26px var(--bleed-x) 22px;
  display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
}
/* On the coloured band a transparent PNG may vanish and a flattened JPEG is a white box; a
 * deliberate white plate behind either reads as a design choice instead of an accident. */
.inv-band__logo { max-height: 44px; max-width: 200px; object-fit: contain; background: #fff; padding: 4px 8px; border-radius: 4px; }
.inv-band__name { font-size: 22px; font-weight: 600; letter-spacing: -.01em; }
.inv-band__meta {
  font-family: var(--font); font-size: 11px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
  display: flex; gap: 8px; align-items: center; opacity: .92;
}
.inv-band__dot { opacity: .6; }
.inv-head.is-banded .inv-statusrow { justify-content: center; margin-top: 18px; }

/* ---- masthead: letterhead ------------------------------------------------------------------- */
.inv-head.is-letterhead { display: block; }
.inv-strip {
  background: var(--doc-accent-soft, #eef3fb);
  border-left: 3px solid var(--doc-accent);
  margin: calc(-1 * var(--bleed-y)) calc(-1 * var(--bleed-x)) 0; padding: 22px var(--bleed-x);
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
}
.inv-strip__left { min-width: 0; }
.inv-strip__tag {
  font-family: var(--font-mono); font-size: 13px; color: var(--doc-muted);
  margin-top: 3px; display: flex; align-items: center; gap: 6px;
}
.inv-strip__logo { max-height: 48px; max-width: 190px; object-fit: contain; background: #fff; padding: 4px 8px; border-radius: 4px; }
.inv-strip__initials {
  width: 48px; height: 48px; flex: none; border-radius: 4px;
  background: var(--doc-accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font); font-size: 19px; font-weight: 700; letter-spacing: .02em;
}

/* ---- parties -------------------------------------------------------------------------------- */
.inv-parties { display: grid; gap: 28px; grid-template-columns: 1fr 1fr auto; }
.inv-parties.has-shipto { grid-template-columns: 1fr 1fr 1fr auto; gap: 20px; }
.inv-party__label {
  font-family: var(--font); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--doc-muted);
  margin-bottom: 6px;
}
.inv-party__name { font-weight: 600; font-size: 15px; }
.inv-party__line { font-size: 13.5px; }
.inv-party__line--meta { color: var(--doc-muted); font-size: 13px; }

.inv-metas { display: flex; flex-direction: column; gap: 10px; text-align: right; min-width: 150px; }
.inv-meta__label {
  font-family: var(--font); font-size: 10px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--doc-muted);
}
.inv-meta__value { font-size: 14px; font-variant-numeric: tabular-nums; }
.inv-meta.is-total .inv-meta__value {
  font-size: 20px; font-weight: 600; color: var(--doc-accent); line-height: 1.2;
}

/* ---- lines ---------------------------------------------------------------------------------- */
.inv-linesbox { overflow-x: auto; }
.inv-lines { width: 100%; border-collapse: collapse; font-size: 14px; }
.inv-lines th {
  text-align: left; padding: 8px 12px;
  font-family: var(--font); font-size: 10px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--doc-muted);
  border-bottom: 1px solid var(--doc-rule);
  white-space: nowrap;
}
.inv-lines td { padding: 10px 12px; border-bottom: 1px solid var(--doc-rule); vertical-align: top; }
.inv-lines th:first-child, .inv-lines td:first-child { padding-left: 0; }
.inv-lines th:last-child, .inv-lines td:last-child { padding-right: 0; }
.inv-lines .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---- totals --------------------------------------------------------------------------------- */
.inv-totals { display: flex; flex-direction: column; gap: 6px; margin-left: auto; min-width: 260px; }
.inv-total { display: flex; justify-content: space-between; gap: 24px; font-size: 14px; }
.inv-total__label { color: var(--doc-muted); }
.inv-total__value { font-variant-numeric: tabular-nums; }
.inv-total.is-grand {
  border-top: 1px solid var(--doc-rule); margin-top: 4px; padding-top: 8px;
  font-size: 17px; font-weight: 600;
}
.inv-total.is-grand .inv-total__label { color: var(--doc-ink); }

/* An exemption is a statement on the document, not a missing line — it reads as prose. */
.inv-total--note {
  display: block; font-size: 12.5px; line-height: 1.4;
  color: var(--doc-muted); font-style: italic;
  padding: 4px 0 2px; max-width: 34ch; margin-left: auto; text-align: right;
}

/* ---- foot ----------------------------------------------------------------------------------- */
.inv-foot {
  border-top: 1px solid var(--doc-rule); padding-top: 18px;
  display: flex; flex-direction: column; gap: 16px;
}
.inv-foot__item { max-width: 62ch; }
.inv-foot__item p { margin: 0; font-size: 13.5px; white-space: pre-line; }

/* What this document IS. It has to be readable at a glance, because a quote mistaken for an
 * invoice gets paid and a proforma mistaken for a tax invoice gets reclaimed against. */
.inv-legend {
  margin: 0; padding: 10px 14px;
  background: var(--doc-rule); color: var(--doc-ink);
  border-radius: 3px; font-size: 13px; max-width: 62ch;
}

.inv-sign { margin-top: 10px; max-width: 280px; }
.inv-sign__rule { border-bottom: 1px solid var(--doc-ink); height: 36px; margin-bottom: 6px; }

.inv-closing {
  margin: 0; text-align: center; font-size: 13px; color: var(--doc-muted);
  border-top: 1px solid var(--doc-rule); padding-top: 16px;
}

/* ---- small screens -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .inv-doc { padding: 24px 20px 32px; --bleed-x: 20px; --bleed-y: 24px; }
  .inv-parties, .inv-parties.has-shipto { grid-template-columns: 1fr; gap: 18px; }
  .inv-metas { text-align: left; }
  .inv-head.is-classic, .inv-head.is-minimal { flex-direction: column; }
  .inv-title { text-align: left; }
  .inv-title__number { justify-content: flex-start; }
  /* No literals here any more: the bleed variables already carry the narrow padding, and a
   * literal repeated in a media query is exactly how the till-roll case broke — the variable is
   * right on the element while a stale copy of it wins the cascade. */
  .inv-totals { min-width: 0; }
}


/* ---- masthead: slate — a full-width dark block, the corporate letterhead --------------------- */
.inv-head.is-slate { display: block; }
.inv-slate {
  background: var(--doc-ink); color: #fff;
  margin: calc(-1 * var(--bleed-y)) calc(-1 * var(--bleed-x)) 0; padding: 26px var(--bleed-x) 24px;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 24px;
}
.inv-slate .inv-brand__name { color: #fff; }
.inv-slate .inv-brand__web { color: rgba(255, 255, 255, .65); }
.inv-slate .inv-brand__logo { background: #fff; padding: 4px 8px; border-radius: 4px; }
.inv-slate .inv-title__word { color: rgba(255, 255, 255, .72); }
.inv-slate .inv-title__number { color: #fff; }

/* ---- masthead: headline — the word writ large ------------------------------------------------ */
.inv-head.is-headline { display: block; padding-bottom: 18px; border-bottom: 1px solid var(--doc-rule); }
.inv-hl__word {
  font-family: var(--font);
  font-size: 46px; font-weight: 300; letter-spacing: .14em; line-height: 1;
  color: var(--doc-ink);
  border-bottom: 1px solid var(--doc-ink);
  padding-bottom: 14px; margin-bottom: 16px;
  overflow-wrap: anywhere;
}
.inv-hl__row { display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.inv-hl__meta { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.inv-hl__meta .inv-title__number { font-size: 16px; }

/* ---- masthead: rail — a thick accent edge, everything ranged left ---------------------------- */
.inv-head.is-rail { display: block; }
.inv-rail {
  border-left: 4px solid var(--doc-accent);
  padding: 4px 0 4px 22px;
  display: flex; flex-direction: column; gap: 14px;
}

/* ---- masthead: centred — stacked on the centre line, like an engraved card ------------------- */
.inv-head.is-centred {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 5px;
  padding-bottom: 20px; border-bottom: 1px solid var(--doc-rule);
}
.inv-head.is-centred .inv-title__number { justify-content: center; }
.inv-cent__rule { width: 56px; border-top: 2px solid var(--doc-accent); margin: 10px 0 6px; }

@media print {
  /* The card edge is gone in print, so there is nothing to bleed past: zero the bleed and give
     the blocks their own modest inset instead. */
  .inv-doc { padding: 0; --bleed-x: 0px; --bleed-y: 0px; }
  .inv-band, .inv-strip, .inv-slate { padding-left: 20px; padding-right: 20px; }
  /* The accent band, the status pill and the rules are the design; a printer that drops
     backgrounds to save ink would print a different document. */
  .inv-doc, .inv-doc * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* What a page break may not run through: a line, the totals, an address block, a footer
     item. The column headings repeat when the lines run onto a second page. */
  .inv-lines thead { display: table-header-group; }
  .inv-lines tr, .inv-head, .inv-parties, .inv-totals, .inv-foot__item, .inv-pay, .inv-legend {
    break-inside: avoid; page-break-inside: avoid;
  }
}

/* ---- narrow paper -------------------------------------------------------------------------------
 * A till roll is a different shape, not a smaller sheet: one column, no side-by-side addresses, and
 * type set down to suit 72mm of width. The PDF does the same thing in its own layout — see
 * export/pdf/invoice.js — so what is printed from the browser and what is generated as a file agree.
 */
[data-paper^="receipt"] .studio-page { max-width: 302px; }
[data-paper^="receipt"] .inv-doc { padding: 14px 12px 18px; gap: 12px; font-size: 12px; --bleed-x: 12px; --bleed-y: 14px; }
[data-paper^="receipt"] .inv-head { flex-direction: column; align-items: center; text-align: center; gap: 4px; border-bottom-width: 1px; padding-bottom: 10px; }
[data-paper^="receipt"] .inv-brand { flex-direction: column; gap: 4px; }
[data-paper^="receipt"] .inv-brand__name { font-size: 15px; }
[data-paper^="receipt"] .inv-title { text-align: center; }
[data-paper^="receipt"] .inv-title__number { justify-content: center; font-size: 14px; }
[data-paper^="receipt"] .inv-band, [data-paper^="receipt"] .inv-strip, [data-paper^="receipt"] .inv-slate {
  padding-top: 12px; padding-bottom: 12px;
}
[data-paper^="receipt"] .inv-slate { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
[data-paper^="receipt"] .inv-strip { flex-direction: column; align-items: flex-start; gap: 8px; }
[data-paper^="receipt"] .inv-hl__word { font-size: 20px; letter-spacing: .1em; padding-bottom: 8px; margin-bottom: 8px; text-align: center; }
[data-paper^="receipt"] .inv-hl__row { flex-direction: column; align-items: center; text-align: center; gap: 6px; }
[data-paper^="receipt"] .inv-hl__meta { align-items: center; }
[data-paper^="receipt"] .inv-rail { border-left-width: 3px; padding: 2px 0 2px 10px; gap: 8px; }
[data-paper^="receipt"] .inv-parties { grid-template-columns: 1fr; gap: 8px; }
[data-paper^="receipt"] .inv-metas { text-align: left; min-width: 0; gap: 4px; }
[data-paper^="receipt"] .inv-meta.is-total .inv-meta__value { font-size: 16px; }
[data-paper^="receipt"] .inv-lines { font-size: 11.5px; }
[data-paper^="receipt"] .inv-lines th, [data-paper^="receipt"] .inv-lines td { padding: 4px 4px; }
[data-paper^="receipt"] .inv-totals { min-width: 0; }
[data-paper^="receipt"] .inv-foot { padding-top: 10px; gap: 8px; }
[data-paper^="receipt"] .inv-foot__item p, [data-paper^="receipt"] .inv-legend { font-size: 11px; }

/* ---- density ------------------------------------------------------------------------------------- */
[data-density="compact"] .inv-doc { padding: 28px 32px 32px; gap: 16px; font-size: 13.5px; }
[data-density="compact"] .inv-lines td { padding: 6px 12px; }
[data-density="roomy"] .inv-doc { padding: 52px 56px 60px; gap: 34px; font-size: 16px; }
[data-density="roomy"] .inv-lines td { padding: 14px 12px; }

/* ---- the payment code ------------------------------------------------------------------------------
 * A SEPA, UPI or payment-link QR beside the account lines. Only drawn when a way to pay is set up
 * and something is owed, so a document without one is exactly the document it was. */
.inv-pay { display: flex; align-items: flex-start; gap: 14px; }
.inv-pay svg { width: 96px; height: 96px; flex: none; border: 1px solid var(--doc-rule); border-radius: 4px; background: #fff; }
.inv-pay__text { min-width: 0; }
.inv-pay__line { font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
[data-paper^="receipt"] .inv-pay svg { width: 72px; height: 72px; }
[data-paper^="receipt"] .inv-pay__line { font-size: 11px; }

/* ---- the legal line ---------------------------------------------------------------------------------- */
.inv-legal { margin: 0; text-align: center; font-size: 11px; line-height: 1.45; color: var(--doc-muted); }

/* ---- line thumbnails --------------------------------------------------------------------------
 * The column exists only when at least one line has a picture, so a document without pictures is
 * exactly the document it was before pictures existed. */
.inv-lines th.is-img, .inv-lines td.is-img { width: 44px; padding-right: 8px; }
.inv-lines__img {
  width: 36px; height: 36px; object-fit: cover; display: block;
  border: 1px solid var(--doc-rule); border-radius: 4px;
  background: #fff;
}
[data-paper^="receipt"] .inv-lines th.is-img, [data-paper^="receipt"] .inv-lines td.is-img { width: 30px; padding-right: 4px; }
[data-paper^="receipt"] .inv-lines__img { width: 24px; height: 24px; }