/* ==========================================================================
   INVOICES — the platform's invoices to its offices, and the paper they are printed on
   --------------------------------------------------------------------------
   Rules for this file: design TOKENS only (no hex, no px colours), LOGICAL
   properties only (inline-start/end, block-start/end — never left/right), and
   nothing that cannot survive dir="rtl" and dir="ltr" alike. Loaded after
   app.css and apple.css, so it may rely on every token they define.

   Every class is prefixed .inv-.

   The invoice paper is the one place that deliberately looks the same in light
   and dark: an invoice is a piece of paper, and is printed on one. It keeps its
   own ink-on-paper colours, set from the neutral scale, in every theme (as the
   receipt's paper does).

   Contents
     1  Summary tiles and small parts
     2  The page: paper and what sits beside it
     3  The paper
     4  The lines editor
     5  Lists (an office's last invoices)
     6  Print
   ========================================================================== */


/* ==========================================================================
   1 · SUMMARY TILES AND SMALL PARTS
   ========================================================================== */

/* Four figures above the list. A figure can be several currencies side by side, so the value wraps instead of pushing the
   tile wider than the screen. */
.inv-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-3);
}

.inv-tiles .stat-tile__value {
  font-size: var(--font-size-xl);
  overflow-wrap: anywhere;
  /* Each currency has its own line. */
  white-space: pre-line;
}

/* The list's first column holds a number with the office under it: it needs less than the 12rem the shared table gives a first
   column, and the table has to fit beside the sidebar without scrolling sideways. */
.adm-table.inv-table td:first-child {
  min-inline-size: 9rem;
}

/* A link in a table or a card is at least as tall as a line of small print needs to be touched: 24 CSS pixels. */
.inv-link {
  display: inline-flex;
  align-items: center;
  min-block-size: 1.5rem;
}

/* Numbers, dates and amounts are read whole: they never break across lines. */
.inv-money,
.inv-nowrap {
  white-space: nowrap;
}

.inv-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

.inv-strong {
  font-weight: var(--font-weight-semibold);
}

.inv-muted {
  color: var(--color-text-muted);
}

/* What a payment would do to the subscription, said before it is made. */
.inv-effect {
  margin: 0;
}

.inv-fields {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.inv-fields--wide {
  grid-template-columns: minmax(0, 1fr);
}

/* A reason or a note is a sentence, not a number: it takes the row. */
.inv-fields__full {
  grid-column: 1 / -1;
}

.inv-newbox {
  display: grid;
  gap: var(--space-3);
}

.inv-proposal {
  margin: 0;
  padding: var(--space-3);
  background: var(--color-surface-sunken);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius-md);
}

.inv-proposal dl {
  display: grid;
  gap: var(--space-2);
  margin: 0;
}

.inv-proposal dl > div {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
}

.inv-proposal dt {
  flex: 0 0 7rem;
  color: var(--color-text-muted);
}

.inv-proposal dd {
  margin: 0;
}


/* ==========================================================================
   2 · THE PAGE
   The paper, and beside it what the platform knows about the invoice that is not printed on it.
   ========================================================================== */

.inv-page {
  display: grid;
  gap: var(--space-4);
  align-items: start;
}

@media (min-width: 70rem) {
  .inv-page {
    grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr);
  }
}

.inv-page__side {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-inline-size: 0;
}

.inv-page__paper {
  min-inline-size: 0;
}

.inv-facts {
  display: grid;
  gap: var(--space-3);
  margin: 0;
}

.inv-facts > div {
  display: grid;
  gap: var(--space-1);
}

.inv-facts dt {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-medium);
  color: var(--color-text-muted);
}

.inv-facts dd {
  margin: 0;
  min-inline-size: 0;
  overflow-wrap: anywhere;
}

.inv-payments {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.inv-payments__item {
  display: grid;
  gap: var(--space-1);
  padding-block-end: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.inv-payments__item:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

.inv-payments__line {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.inv-note {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
}


/* ==========================================================================
   3 · THE PAPER
   ========================================================================== */

.inv-paper {
  --inv-bg: var(--neutral-0);
  --inv-ink: var(--neutral-900);
  --inv-soft: var(--neutral-600);
  --inv-rule: var(--neutral-300);
  --inv-stamp: var(--red-600);
  --inv-paid: var(--green-700);

  /* Whatever sits on the paper and borrows a theme text token borrows the paper's ink instead: the theme's muted greys are
     light greys in dark mode, and light grey on white paper is unreadable. */
  --color-text: var(--inv-ink);
  --color-text-muted: var(--inv-soft);
  --color-text-subtle: var(--inv-soft);

  position: relative;
  padding: var(--space-6);
  color: var(--inv-ink);
  background: var(--inv-bg);
  border: 1px solid var(--inv-rule);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.inv-paper__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block-end: var(--space-4);
  border-block-end: 2px solid var(--inv-ink);
}

.inv-paper__issuer {
  flex: 1 1 12rem;
  min-inline-size: 0;
}

.inv-paper__name {
  margin: 0;
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-snug);
}

.inv-paper__meta {
  margin: var(--space-1) 0 0;
  font-size: var(--font-size-xs);
  color: var(--inv-soft);
  overflow-wrap: anywhere;
}

.inv-paper__title {
  text-align: end;
}

.inv-paper__kind {
  margin: 0;
  font-size: var(--font-size-xs);
  color: var(--inv-soft);
}

.inv-paper__number {
  margin: 0;
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  white-space: nowrap;
}

.inv-paper__number--draft {
  color: var(--inv-soft);
}

/* Who it is for, and the dates. */
.inv-paper__parties {
  display: grid;
  gap: var(--space-4);
  margin-block: var(--space-4);
}

@media (min-width: 40rem) {
  .inv-paper__parties {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}

.inv-paper__label {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--inv-soft);
}

.inv-paper__office {
  margin: 0;
  font-weight: var(--font-weight-semibold);
}

.inv-dates {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  font-size: var(--font-size-sm);
}

.inv-dates > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.inv-dates dt {
  color: var(--inv-soft);
}

.inv-dates dd {
  margin: 0;
  text-align: end;
}

.inv-late {
  color: var(--inv-stamp);
  font-weight: var(--font-weight-semibold);
}

.inv-lines {
  inline-size: 100%;
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.inv-lines th,
.inv-lines td {
  padding: var(--space-2) var(--space-1);
  text-align: start;
  vertical-align: top;
  border-block-end: 1px solid var(--inv-rule);
}

.inv-lines thead th {
  font-size: var(--font-size-xs);
  font-weight: var(--font-weight-semibold);
  color: var(--inv-soft);
  border-block-end: 1px solid var(--inv-ink);
}

.inv-lines .inv-lines__qty,
.inv-lines .inv-lines__unit,
.inv-lines .inv-lines__amount {
  text-align: end;
  white-space: nowrap;
}

/* The same three figures as one line under the description, for a phone, where four columns would squeeze the words. */
.inv-lines__calc {
  display: none;
  margin-block-start: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--inv-soft);
}

@media (max-width: 40rem) {
  .inv-lines .inv-lines__qty,
  .inv-lines .inv-lines__unit {
    display: none;
  }

  .inv-lines__calc {
    display: block;
  }
}

.inv-totals {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  margin-inline-start: auto;
  max-inline-size: 22rem;
  font-size: var(--font-size-sm);
}

.inv-totals > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.inv-totals dt {
  color: var(--inv-soft);
}

.inv-totals dd {
  margin: 0;
  white-space: nowrap;
}

.inv-totals__total {
  padding-block-start: var(--space-2);
  border-block-start: 2px solid var(--inv-ink);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
}

.inv-totals__total dt {
  color: var(--inv-ink);
}

.inv-section {
  margin-block-start: var(--space-5);
  padding-block-start: var(--space-4);
  border-block-start: 1px solid var(--inv-rule);
}

.inv-section__title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
}

.inv-received {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--font-size-sm);
}

.inv-received li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-1) var(--space-3);
}

.inv-received__what {
  display: grid;
  gap: 0;
  min-inline-size: 0;
}

.inv-balance {
  display: grid;
  gap: var(--space-1);
  margin: var(--space-3) 0 0;
  margin-inline-start: auto;
  max-inline-size: 22rem;
  font-size: var(--font-size-sm);
}

.inv-balance > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.inv-balance dt {
  color: var(--inv-soft);
}

.inv-balance dd {
  margin: 0;
  white-space: nowrap;
}

.inv-balance__due {
  font-weight: var(--font-weight-bold);
}

/* The bank details an office pays to: line breaks are the platform's own. */
.inv-howto {
  margin: 0;
  white-space: pre-line;
  overflow-wrap: anywhere;
  font-size: var(--font-size-sm);
}

/* A paid, void or draft invoice says so across the paper, in words — so it cannot be taken for another in a photograph. */
.inv-stamp {
  position: absolute;
  inset-block-start: 55%;
  /* Inside the paper's edges, so turned a few degrees it does not reach past them. */
  inset-inline: var(--space-4);
  z-index: 1;
  margin: 0;
  text-align: center;
  font-size: 3.5rem;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.25rem;
  color: var(--inv-stamp);
  opacity: 0.16;
  transform: translateY(-50%) rotate(-14deg);
  pointer-events: none;
}

[dir='rtl'] .inv-stamp {
  letter-spacing: 0;
  transform: translateY(-50%) rotate(14deg);
}

.inv-stamp--paid {
  color: var(--inv-paid);
}

.inv-paper.is-void .inv-lines,
.inv-paper.is-void .inv-totals {
  opacity: 0.55;
}

.inv-paper__foot {
  margin-block-start: var(--space-5);
  font-size: var(--font-size-xs);
  color: var(--inv-soft);
}


/* ==========================================================================
   4 · THE LINES EDITOR
   One card per line: its two labels, how many, at what price; the figures it comes to are the service's.
   ========================================================================== */

.inv-editor {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.inv-editor__row {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.inv-editor__fields {
  display: grid;
  gap: var(--space-3);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.inv-editor__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
}

.inv-editor__amount {
  margin: 0;
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
}

.inv-preview {
  display: grid;
  gap: var(--space-1);
  margin: 0;
  max-inline-size: 22rem;
  margin-inline-start: auto;
  font-size: var(--font-size-sm);
}

.inv-preview > div {
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
}

.inv-preview dt {
  color: var(--color-text-muted);
}

.inv-preview dd {
  margin: 0;
  white-space: nowrap;
}

.inv-preview__total {
  padding-block-start: var(--space-2);
  border-block-start: 1px solid var(--color-border-strong);
  font-weight: var(--font-weight-bold);
}


/* ==========================================================================
   5 · LISTS
   An office's last invoices on its page (and its own on Plan & usage): a few rows, each a link.
   ========================================================================== */

.inv-list {
  display: grid;
  margin: 0;
  padding: 0;
  list-style: none;
}

.inv-list__item {
  display: grid;
  gap: var(--space-1) var(--space-3);
  padding-block: var(--space-3);
  border-block-end: 1px solid var(--color-border);
}

.inv-list__item:first-child {
  padding-block-start: 0;
}

.inv-list__item:last-child {
  padding-block-end: 0;
  border-block-end: 0;
}

/* Fixed columns, so the number, the term, the amount and the state line up from one row to the next however many badges a row has. */
@media (min-width: 48rem) {
  .inv-list__item {
    grid-template-columns: 9.5rem minmax(0, 1fr) 7.5rem 12rem;
    align-items: center;
  }

  .inv-list__item .inv-money {
    text-align: end;
  }

  .inv-list__item .inv-badges {
    justify-content: flex-end;
  }
}

.inv-list__what {
  display: grid;
  gap: 0;
  min-inline-size: 0;
}

.inv-list__link {
  font-weight: var(--font-weight-semibold);
  min-block-size: var(--tap-target-min);
  display: inline-flex;
  align-items: center;
}


/* ==========================================================================
   6 · PRINT
   app.css already drops the shell, the buttons and .no-print; what is added is the paper on its own, without its frame.
   ========================================================================== */

@media print {
  @page { margin: 14mm; }

  .inv-page {
    display: block;
  }

  .inv-paper {
    padding: 0;
    border: 0;
    box-shadow: none;
    border-radius: 0;
  }

  .inv-stamp {
    opacity: 0.35;
  }
}

/* ==========================================================================
   Forced colours: the stamp and the rules must survive being repainted.
   ========================================================================== */

@media (forced-colors: active) {
  .inv-paper {
    border: 1px solid CanvasText;
  }

  .inv-stamp {
    color: CanvasText;
    opacity: 1;
  }
}