/* Kpopownia design system — the print layer.
 *
 * A sheet of A4 the panel prints: the slip that goes into the parcel, the
 * packing sheet the shop keeps, and a goods receipt (PZ) for the archive; and
 * the one the storefront hands out, the return form a customer fills in by
 * hand. Linked by the print pages (framework/printsheet, after tokens, base
 * and components) and by the styleguide, never by either frontend's layout.
 *
 * Every rule sits under a .print-* class. The styleguide loads this file next
 * to everything else, so a bare element selector here would restyle the whole
 * catalogue. The one exception is @page, which only a printout reads.
 *
 * Paper is always the light theme: the print page puts data-theme="light" on
 * <html>, so every token below already resolves to the light values, and a
 * sheet drawn in the styleguide sits in a light-themed frame for the same
 * reason. print-color-adjust keeps the pink rule and the total's colour, which
 * browsers otherwise drop to save ink.
 */

@page {
  size: A4;
  margin: 10mm;
}

/* The page around the sheet on screen: a grey desk with the paper on it. */
.print-body {
  margin: 0;
  background: var(--stage);
  color: var(--ink);
  font-family: var(--font-body);
}

/* Screen only: back to the order, and print again. */
.print-toolbar {
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  padding: var(--space-4);
}

.print-sheet {
  box-sizing: border-box;
  max-width: 190mm;
  margin: 0 auto var(--space-8);
  padding: 12mm;
  background: #ffffff;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 9pt;
  line-height: 1.3;
  box-shadow: var(--shadow-2);
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.print-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8mm;
  padding-bottom: 2mm;
  margin-bottom: 3mm;
  border-bottom: 2px solid var(--primary);
  break-after: avoid;
}

.print-head__logo {
  display: block;
  max-height: 11mm;
  max-width: 60mm;
  width: auto;
  height: auto;
}

/* The shop's name where the logo would stand, for a shop that uploaded none. */
.print-head__brand {
  font-size: 14pt;
  line-height: 1.2;
}

.print-head__shop {
  text-align: right;
  font-size: 8pt;
  color: var(--ink-soft);
}

.print-head__name {
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 9.5pt;
  color: var(--ink);
}

.print-title {
  margin: 0 0 1mm;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 13pt;
  line-height: 1.2;
  color: var(--ink);
  break-after: avoid;
}

.print-title__sub {
  margin: 0 0 3mm;
  font-size: 8pt;
  color: var(--ink-muted);
}

.print-meta {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(45mm, 1fr));
  gap: 2mm 6mm;
  margin-bottom: 3mm;
}

.print-meta__label {
  margin-bottom: 0.5mm;
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
}

.print-meta__value {
  white-space: pre-line;
}

.print-table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 4mm;
}

/* The head repeats on every page a long table runs to; browsers mostly do
   it already, and saying so costs nothing. */
.print-table thead {
  display: table-header-group;
}

.print-table th {
  padding: 1mm 1.5mm;
  border-bottom: 1.5px solid var(--ink);
  text-align: left;
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

.print-table td {
  padding: 0.8mm 1.5mm;
  border-bottom: 1px solid var(--line-solid);
  vertical-align: top;
}

.print-table tr {
  break-inside: avoid;
}

.print-table__num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.print-table th.print-table__num {
  text-align: right;
}

.print-table__check {
  width: 6mm;
}

.print-table__sub {
  display: block;
  font-size: 7.5pt;
  color: var(--ink-muted);
}

/* A receipt under its line on the packing sheet: smaller, indented, and no
   rule between it and the line it belongs to. */
.print-table tr.print-table__source td {
  padding-top: 0.3mm;
  padding-bottom: 0.3mm;
  border-bottom: 0;
  font-size: 8pt;
  color: var(--ink-soft);
}

.print-table tr.print-table__source td:first-child + td {
  padding-left: 6mm;
}

.print-table tr.print-table__note td {
  padding-top: 0.3mm;
  border-bottom: 0;
  font-size: 8pt;
  font-style: italic;
  color: var(--ink-muted);
}

.print-check {
  display: inline-block;
  width: 4mm;
  height: 4mm;
  border: 1.5px solid var(--ink);
  border-radius: 1mm;
  vertical-align: middle;
}

.print-totals {
  margin-left: auto;
  width: 65mm;
  margin-bottom: 4mm;
}

.print-totals__row {
  display: flex;
  justify-content: space-between;
  gap: 4mm;
  padding: 0.5mm 0;
  font-variant-numeric: tabular-nums;
}

.print-totals__grand {
  margin-top: 1mm;
  padding-top: 1.5mm;
  border-top: 2px solid var(--primary);
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 11pt;
  color: var(--primary);
}

.print-foot {
  padding-top: 3mm;
  border-top: 1px solid var(--line-solid);
  text-align: center;
  font-size: 8pt;
  color: var(--ink-muted);
}

.print-foot__thanks {
  margin: 0 0 1mm;
  font-family: var(--font-brand);
  font-weight: 700;
  font-size: 10pt;
  color: var(--ink);
}

/* The bottom of a document that goes to the archive: a line to sign on above
   each label, side by side. Kept on the page with the table's end rather than
   left alone at the top of the next sheet. */
.print-signatures {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(50mm, 1fr));
  gap: 12mm;
  margin-top: 12mm;
  break-inside: avoid;
}

.print-signature {
  padding-top: 1.5mm;
  border-top: 1px solid var(--ink);
  text-align: center;
  font-size: 8pt;
  color: var(--ink-muted);
}

@media print {
  .print-body {
    background: #ffffff;
  }

  .print-toolbar {
    display: none;
  }

  .print-sheet {
    max-width: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
  }
}

/* A group row: a product's name across the whole table, its deliveries
   under it as source rows. */
.print-table__group td {
  padding-top: 1.5mm;
  border-top: 1px solid var(--line-strong);
  font-weight: 700;
}

.print-table__group .print-table__sub {
  font-weight: 400;
}

/* A figure in a tone: a margin's level on the margins printout. Text only —
   the paper carries no tinted rows. */
.print-tone { font-weight: 600; }
.print-tone--loss { color: var(--danger); }
.print-tone--low { color: var(--caution); }
.print-tone--warn { color: var(--warning); }
.print-tone--ok { color: var(--success); }
.print-tone--muted { color: var(--ink-muted); font-weight: 400; }

/* A plain sheet keeps colour for its figures alone: the head's rule is ink,
   not the brand's pink, so a coloured margin is the only colour on the page. */
.print-sheet[data-tone="plain"] .print-head { border-bottom-color: var(--ink); }
.print-sheet[data-tone="plain"] .print-table thead th { color: var(--ink); }

/* A sheet is its own page: the till codes' second list starts on a fresh
   one instead of running on from the first one's table. */
.print-sheet + .print-sheet {
  break-before: page;
}

/* A sheet filled in by hand — the stock count — keeps a row tall enough to
   write a number in, however tight the rest of the paper is. */
.print-sheet[data-handwritten] .print-table tbody td {
  height: 7mm;
  vertical-align: bottom;
}

/* A sheet filled in by hand — the return form: small-capital labels over
   groups, blank lines to write on with what goes there under each, a box to
   tick per option, and the small print. */
.print-label {
  margin-bottom: 1mm;
  font-size: 7pt;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--secondary);
}

.print-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2.5mm 6mm;
  margin-bottom: 4mm;
}

.print-field--wide {
  grid-column: 1 / -1;
}

.print-field__line {
  height: 7mm;
  border-bottom: 1px solid var(--ink-soft);
}

.print-field__hint {
  margin-top: 0.6mm;
  font-size: 7pt;
  color: var(--ink-muted);
}

.print-statement {
  margin: 0 0 2mm;
  font-weight: 700;
  font-size: 9.5pt;
}

.print-options {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2mm 7mm;
  margin-bottom: 4mm;
}

.print-option {
  display: inline-flex;
  align-items: center;
  gap: 1.5mm;
}

.print-option__line {
  display: inline-block;
  width: 45mm;
  border-bottom: 1px solid var(--ink-soft);
  height: 4mm;
}

.print-notes {
  margin: 0 0 2mm;
  padding-left: 4mm;
  font-size: 7.5pt;
  color: var(--ink-soft);
}

.print-notes li + li {
  margin-top: 0.6mm;
}

.print-table__ordinal {
  width: 7mm;
  color: var(--ink-muted);
}

/* A phone shows the sheet before it is printed; one line to a row there. */
@media (max-width: 480px) {
  .print-fields { grid-template-columns: minmax(0, 1fr); }
}