/* The bill, on screen and on paper.
 *
 * On screen it is shown at roughly the size it prints, because a chemist
 * checking "did I charge for the second strip" should be reading the same
 * lines the customer is holding — not a summary of them.
 *
 * On paper everything else disappears. The print rules at the bottom are the
 * whole reason this file is separate: a printed bill with a sidebar and a
 * Save button on it is not a bill. */

.modal.receipt { width: 720px; }

.r-top {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.r-top h3 { margin: 0; }
.r-actions { margin-left: auto; display: flex; gap: 6px; }

/* The paper */
.paper {
  margin: 14px 0;
  padding: 16px 18px;
  color: #111;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 6px;
  font-size: 12px;
}

/* Thermal is not a small A4. A 80mm roll has no room for two columns, so the
 * header stacks, the type drops, and the ruled table becomes a plain list —
 * the same figures, laid out for the paper they are going onto. */
/* A 58mm roll is not a narrow 80mm one — two columns do not fit on it at all,
 * so it is the thermal layout with the paper taken in and the type dropped
 * again. Everything else it inherits from p-thermal. */
.paper.p-thermal58 { width: 54mm; font-size: 9.5px; padding: 6px 4px; }

.paper.p-thermal {
  width: 76mm;
  padding: 8px 6px;
  font-size: 10.5px;
  font-family: "Consolas", "Courier New", monospace;
}
.paper.p-thermal .p-head { flex-direction: column; gap: 6px; text-align: center; }
.paper.p-thermal .p-shop h2 { font-size: 14px; }
.paper.p-thermal .p-meta { width: 100%; }
.paper.p-thermal .p-sum { width: 100%; }
.paper.p-thermal .p-items th,
.paper.p-thermal .p-items td { padding: 2px 2px; border-bottom: 0; }
.paper.p-thermal .p-items thead tr { border-bottom: 1px dashed #999; }
.paper.p-thermal .p-tax { display: none; }

/* Rate-wise tax, for whoever checks the return against the bill. */
.p-tax { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 11px; }
.p-tax th, .p-tax td { padding: 3px 6px; border: 1px solid #ddd; }
.p-tax th { background: #f4f4f4; text-align: left; }
.p-tax .r { text-align: right; }

.p-head { display: flex; gap: 16px; align-items: flex-start; }
.p-shop h2 { margin: 0 0 2px; font-size: 17px; }
.p-shop div { font-size: 11px; color: #444; }
.p-meta { margin-left: auto; text-align: right; }
.p-meta div { display: flex; gap: 10px; justify-content: flex-end; font-size: 11.5px; }
.p-meta span { color: #666; }

.p-cust {
  display: flex;
  gap: 16px;
  margin: 10px 0 0;
  padding: 6px 0;
  font-size: 11.5px;
  border-top: 1px dashed #ccc;
  border-bottom: 1px dashed #ccc;
}

.p-items {
  width: 100%;
  max-width: 100%;
  margin-top: 10px;
  border-collapse: collapse;
  /* The columns size to what is actually in them.
   *
   * `table-layout: fixed` was here, and on a wide bill it was the thing that
   * cut the AMOUNT column off. Fixed shares the sheet out by the header row
   * alone: the name was pinned at 32%, and the nine figure columns a GST bill
   * can carry — batch, expiry, qty, free, MRP, rate, amount — were handed
   * about 7% each, whether or not a figure fits in 7%. QTY got the same slot
   * as AMOUNT.
   *
   * "38.00" just fits, which is why this survived so long. "-38.00" does not,
   * and a returned line billed alongside a sold one was the first amount ever
   * wide enough to show it. Figures carry `nowrap` (below), so the ones that
   * did not fit did not wrap — they painted straight out of the cell, and the
   * last column has nothing to its right to paint over. Hence AMOUN and 38.0.
   *
   * Content sizing gives each figure exactly the width of the figure. The
   * table still cannot outgrow the sheet, because `width: 100%` holds and a
   * long medicine name wraps (below) instead of pushing anything off the
   * edge — which is the overflow `fixed` was originally added to stop. */
  table-layout: auto;
}
/* A roll is 58 or 80mm wide and has three columns. Too little space to leave
 * to content, and the one paper where an even share is the right answer —
 * giving the name a third of 58mm leaves nothing for the money. */
.paper.p-thermal .p-items { table-layout: fixed; }
.paper.p-thermal .p-items th:first-child { width: 8%; }
.paper.p-thermal .p-items th:nth-child(2) { width: 46%; }
/* A long medicine name wraps rather than pushing the money off the paper. */
.p-items td { overflow-wrap: anywhere; }
/* …but a figure never splits across two lines. */
.p-items td.r, .p-items td.c { overflow-wrap: normal; white-space: nowrap; }
.p-items th {
  padding: 4px 6px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: .3px;
  color: #555;
  text-align: left;
  border-bottom: 1px solid #999;
}
.p-items td { padding: 4px 6px; border-bottom: 1px dotted #ddd; }
.p-items .c { text-align: center; }
.p-items .r { text-align: right; }

/* More columns than the width is comfortable with.
 *
 * The shop asked for each column separately and every one of them is
 * reasonable on its own; ten or eleven together are not. Given the choice
 * between dropping a column the shop deliberately switched on and printing
 * smaller, the table prints smaller — a chemist can read 9pt, and cannot read
 * a column that is not there. Set by receipt.js, which is the only place that
 * knows how many columns this particular bill ended up with. */
.p-tight .p-items { font-size: calc(10px * var(--inv-scale)); }
.p-tight .p-items th,
.p-tight .p-items td { padding: 2px 3px; }
.p-tight .p-items th { font-size: calc(8.8px * var(--inv-scale)); letter-spacing: 0; }
/* The medicine name is the one thing allowed to take a second line — it is
 * the only column whose content has no fixed length. */
.p-tight .p-items td { line-height: 1.25; }

/* The rate this line's GST was worked out at, tucked beside the money. A
 * column of its own for "12%" would cost more width than the figure is worth,
 * and the amount beside it is meaningless without it. */
.p-rt {
  margin-left: 3px;
  font-size: .78em;
  font-weight: 400;
  opacity: .6;
}
.p-items .loose { margin-left: 5px; font-size: 10px; color: #0f766e; }

.p-sum { margin-top: 10px; margin-left: auto; width: 260px; }
.p-sum div { display: flex; justify-content: space-between; padding: 2px 0; font-size: 11.5px; color: #444; }
.p-sum b { color: #111; }
.p-total {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px solid #999;
  font-size: 14px;
}
.p-total b { font-size: 16px; }

.p-foot {
  display: flex;
  align-items: flex-end;
  gap: 20px;
  margin-top: 18px;
  font-size: 10.5px;
  color: #555;
}
/* Wide enough to actually sign in, and the caption centred under it — which
 * is what the space above a signature line is for. It used to be only as wide
 * as the words "for <shop>", so a signature laid over it hung across the
 * pharmacist's line beside it. */
.p-sign {
  position: relative;
  min-width: 150px;
  margin-left: auto;
  padding-top: 22px;
  text-align: center;
  border-top: 1px solid #999;
}

/* The signature sits ABOVE the rule, the way a signed one does.
 *
 * Positioned out of the flow rather than placed before the text, so the
 * fourteen invoice templates keep sizing and bordering this block exactly as
 * they always have — a signature is being added to the bill, not the foot of
 * the bill being rebuilt underneath them. */
.p-signimg {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  max-width: 140px;
  max-height: 44px;
  margin-bottom: 2px;
  object-fit: contain;
}

/* On paper the bill goes through Printer.sheet(), like every other document
 * this app prints. It used to have a block of its own here, and that block
 * caused all three of the printing complaints at once:
 *
 *   * `body * { visibility: hidden }` HIDES BUT KEEPS LAYOUT. Every element
 *     of the app still occupied its space, so the sidebar and the tables
 *     behind the dialog still paginated — which is where the two and three
 *     blank pages came from.
 *   * That same rule matched everything inside a print sheet as well, because
 *     a print sheet is inside <body> too. So a purchase order or a credit
 *     note laid itself out correctly and then printed completely blank.
 *   * `#paper { position: absolute; width: 100% }` resolved against the 720px
 *     dialog rather than the page, which is wider than A4's printable width.
 *     That is what cut the AMOUNT column off, and why fixing the table alone
 *     never fixed it.
 *
 * `display: none` removes layout, which is the difference that matters. */