/* The printable invoice, shared by the admin console and the partner portal.

   Two rules govern this file. Paper has one theme, so the sheet is ink on white
   in both light and dark, exactly as the portal's location poster is. And every
   size on the sheet is a container query unit against the sheet's own width, so
   the preview on screen and the sheet on A4 are the same drawing at two scales:
   tune it once, and it fits everywhere.

   Depends on tokens.css for colour and type, and on site.css for .btn. */

/* ---------- Workbench overlay ---------- */

body.tud-inv-open { overflow: hidden; }

/* Opaque, not a scrim: the same workbench the portal's poster opens on. What is
   underneath is irrelevant while a document is being read, and a translucent
   layer would only let the app bar show through the top of the paper. */
.tud-inv {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: var(--tud-color-bg-canvas);
}

.tud-inv-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--tud-space-4);
  padding: var(--tud-space-3) var(--tud-space-5);
  border-bottom: var(--tud-border-hairline) solid var(--tud-color-border-default);
  background: var(--tud-color-bg-surface);
  flex-wrap: wrap;
}

.tud-inv-note {
  margin: 0;
  color: var(--tud-color-text-muted);
  font-family: var(--tud-font-secondary);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.tud-inv-stage {
  display: grid;
  place-items: start center;
  overflow: auto;
  padding: var(--tud-space-8) var(--tud-space-4);
}

/* ---------- The sheet ----------
   A4 portrait. The aspect ratio is held on screen so the founder is looking at
   the paper, not at a web page that happens to print. */
.tud-sheet {
  container-type: inline-size;
  width: min(96vw, 660px);
  aspect-ratio: 210 / 297;
  background: var(--tud-color-ramp-neutral-0);
  color: var(--tud-color-ramp-neutral-950);
  box-shadow: var(--tud-elevation-e3);
  /* Named so the portal's A5 poster keeps its own default page size. */
  page: tud-invoice;
}

.inv-inner {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 8cqw 8cqw 6cqw;
  font-family: var(--tud-font-primary);
  font-size: 1.75cqw;
  line-height: 1.5;
}

/* ---------- Masthead ---------- */

.inv-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: start;
  gap: 4cqw;
  padding-bottom: 3.4cqw;
  border-bottom: 0.5cqw solid var(--tud-color-ramp-neutral-950);
}

.inv-issuer { min-width: 0; }

.inv-issuer-name {
  margin: 0;
  font-size: 3.2cqw;
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.inv-issuer-line {
  margin: 0.5cqw 0 0;
  color: var(--tud-color-ramp-neutral-600);
  font-size: 1.7cqw;
  line-height: 1.45;
}

.inv-issuer-trading {
  color: var(--tud-color-ramp-neutral-950);
  font-family: var(--tud-font-secondary);
  font-size: 1.6cqw;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.inv-ident { text-align: right; min-width: 0; }

.inv-kind {
  margin: 0;
  color: var(--tud-color-ramp-neutral-600);
  font-family: var(--tud-font-secondary);
  font-size: 1.7cqw;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.inv-number {
  margin: 0.6cqw 0 0;
  font-family: var(--tud-font-secondary);
  font-size: 4.4cqw;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  white-space: nowrap;
}

/* The one loud mark, and it carries information rather than decorating: a
   settled or cancelled invoice says so from across a desk. */
.inv-stamp {
  display: inline-block;
  margin: 2.4cqw 0 0;
  padding: 0.8cqw 2cqw;
  transform: rotate(-5deg);
  border: 0.55cqw solid currentColor;
  border-radius: 1cqw;
  font-family: var(--tud-font-secondary);
  font-size: 2.6cqw;
  line-height: 1.1;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}

.inv-stamp[data-stamp="paid"] { color: var(--tud-color-scanner-valid-bg); }
.inv-stamp[data-stamp="void"] { color: var(--tud-color-ramp-neutral-450); }
.inv-stamp[data-stamp="overdue"] { color: var(--tud-color-scanner-invalid-bg); }

.inv-stamp-sub {
  display: block;
  margin-top: 0.4cqw;
  font-size: 1.4cqw;
  font-weight: 500;
  letter-spacing: 0.08em;
}

/* ---------- Facts ---------- */

/* Uneven on purpose: a brand name and a date range both need room, and an
   issued date never does. */
.inv-facts {
  display: grid;
  grid-template-columns: 1.35fr 0.9fr 0.9fr 1.5fr;
  gap: 3cqw;
  padding: 3.4cqw 0;
  border-bottom: 0.15cqw solid var(--tud-color-ramp-neutral-300);
}

.inv-fact { min-width: 0; }

.inv-flabel {
  margin: 0;
  color: var(--tud-color-ramp-neutral-500);
  font-family: var(--tud-font-secondary);
  font-size: 1.4cqw;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.inv-fval {
  margin: 0.7cqw 0 0;
  font-size: 2cqw;
  line-height: 1.3;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.inv-fsub {
  margin: 0.3cqw 0 0;
  color: var(--tud-color-ramp-neutral-500);
  font-family: var(--tud-font-secondary);
  font-size: 1.5cqw;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* ---------- Line items ---------- */

.inv-items {
  width: 100%;
  margin-top: 4cqw;
  border-collapse: collapse;
}

.inv-items th {
  padding: 0 0 1.2cqw;
  border-bottom: 0.15cqw solid var(--tud-color-ramp-neutral-950);
  color: var(--tud-color-ramp-neutral-600);
  font-family: var(--tud-font-secondary);
  font-size: 1.4cqw;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-align: left;
  text-transform: uppercase;
}

.inv-items td {
  padding: 2.2cqw 0;
  border-bottom: 0.15cqw solid var(--tud-color-ramp-neutral-300);
  vertical-align: top;
}

.inv-items th.inv-amt, .inv-items td.inv-amt {
  text-align: right;
  font-family: var(--tud-font-secondary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.inv-items td.inv-amt { font-size: 2.2cqw; font-weight: 700; }

.inv-item-name { display: block; font-size: 2.1cqw; font-weight: 700; }

.inv-item-sub {
  display: block;
  margin-top: 0.4cqw;
  color: var(--tud-color-ramp-neutral-500);
  font-size: 1.6cqw;
}

/* ---------- Total ---------- */

.inv-total {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 3cqw;
  margin-top: 2.4cqw;
  padding-top: 2cqw;
  border-top: 0.5cqw solid var(--tud-color-ramp-neutral-950);
}

.inv-total-label {
  margin: 0;
  font-family: var(--tud-font-secondary);
  font-size: 1.7cqw;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.inv-total-num {
  margin: 0;
  font-family: var(--tud-font-secondary);
  font-size: 6cqw;
  line-height: 1;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.inv-tax {
  margin: 1.4cqw 0 0;
  color: var(--tud-color-ramp-neutral-600);
  font-size: 1.6cqw;
  text-align: right;
}

.inv-notes {
  margin: 3cqw 0 0;
  padding: 2cqw 2.4cqw;
  background: var(--tud-color-ramp-neutral-50);
  font-size: 1.7cqw;
  overflow-wrap: anywhere;
}

/* ---------- How to pay ---------- */

.inv-bank {
  margin-top: 4cqw;
  padding: 3cqw 3.4cqw;
  border: 0.3cqw solid var(--tud-color-ramp-neutral-950);
  border-radius: 1.2cqw;
}

.inv-bank-head {
  margin: 0 0 1.8cqw;
  font-family: var(--tud-font-secondary);
  font-size: 1.7cqw;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.inv-bank-rows {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 1cqw 3cqw;
  margin: 0;
}

.inv-bank-rows dt {
  color: var(--tud-color-ramp-neutral-600);
  font-size: 1.6cqw;
}

.inv-bank-rows dd {
  margin: 0;
  font-family: var(--tud-font-secondary);
  font-size: 1.7cqw;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.inv-bank-note {
  margin: 1.8cqw 0 0;
  color: var(--tud-color-ramp-neutral-600);
  font-size: 1.5cqw;
}

/* ---------- Foot ---------- */

.inv-foot {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 3cqw;
  margin-top: auto;
  padding-top: 3cqw;
  flex-wrap: wrap;
}

.inv-foot-site {
  margin: 0;
  color: var(--tud-color-accent-text-on-light);
  font-family: var(--tud-font-secondary);
  font-size: 1.8cqw;
  font-weight: 700;
}

.inv-foot-say {
  margin: 0;
  color: var(--tud-color-ramp-neutral-500);
  font-size: 1.5cqw;
}

/* ---------- Narrow screens ----------
   The overlay keeps its gutters; the sheet takes the rest and every size on it
   follows, because they are all measured against the sheet. */
@media (max-width: 620px) {
  /* The bar is a toolbar, not a caption: both controls stay on one line at
     thumb size and the sheet label steps out of their way. */
  .tud-inv-bar { gap: var(--tud-space-3); }
  .tud-inv-note { order: -1; width: 100%; }
  .tud-inv-stage { padding: var(--tud-space-5) var(--tud-space-3); }
}

/* ---------- Paper ----------
   The sheet is the only thing on the page. Ink the merchant needs to read the
   document (the stamp, the rules, the accent line) must survive a printer with
   background graphics switched off. */
@page tud-invoice { size: A4 portrait; margin: 0; }

@media print {
  body.tud-inv-open { background: var(--tud-color-ramp-neutral-0); }
  body.tud-inv-open > *:not(.tud-inv) { display: none !important; }

  body.tud-inv-open .tud-inv {
    position: static;
    display: block;
    background: none;
    overflow: visible;
  }

  body.tud-inv-open .tud-inv-bar { display: none; }

  body.tud-inv-open .tud-inv-stage { display: block; padding: 0; overflow: visible; }

  body.tud-inv-open .tud-sheet {
    width: 210mm;
    height: 297mm;
    aspect-ratio: auto;
    box-shadow: none;
    break-inside: avoid;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  body.tud-inv-open .tud-sheet * {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}