/* Two-column A5-landscape repair receipt: 30% detachable device label (sticks
   to the device) + 70% customer receipt, split into the five stacked blocks of
   the shop's design spec. Always Persian/RTL — see print.js's FA_* constants
   and DEFAULT_FA_TERMS. #print-area is hidden on screen (see styles.css) and
   only shown here. */
@media print {
  body * { visibility: hidden; }
  #print-area, #print-area * { visibility: visible; }
  #print-area { display: block !important; position: absolute; inset: 0; }

  /* Hard clamp to exactly one page: A5 landscape (148mm) minus the 4mm @page
     margins set in print.js, less 1mm so a printer rounding the page box down
     can't push a sliver onto a blank second sheet. print.js zooms
     .receipt-sheet down if the content would exceed this, so nothing is
     actually clipped. */
  .receipt-page { width: 100%; height: 139mm; overflow: hidden; }

  /* `direction: ltr` on the flex containers keeps the physical left/right
     placement from the design spec; text inside each box stays RTL. */
  .receipt-sheet {
    width: 100%; height: 100%; font-family: 'Vazirmatn', Tahoma, sans-serif; color: #000;
    display: flex; flex-direction: row; direction: ltr;
    font-size: 11.5px; line-height: 1.35;
  }
  .receipt-col { box-sizing: border-box; direction: rtl; text-align: right; height: 100%; display: flex; flex-direction: column; min-width: 0; }
  .receipt-label-col { flex: 0 0 30%; padding: 4px 5px; }
  /* Absorbs the divider's width so the two columns plus the divider fit the
     page exactly — .receipt-page clips overflow, which would otherwise eat the
     start of the right-aligned shop name. */
  .receipt-customer-col { flex: 1 1 auto; padding: 4px 6px; }
  .receipt-cut-line { flex: 0 0 0; align-self: stretch; border-left: 1.5px dashed #666; position: relative; margin: 0 2px; }
  .receipt-cut-line::after { content: '✂'; position: absolute; bottom: 4px; left: -7px; font-size: 12px; color: #555; background: #fff; transform: rotate(90deg); }

  .bc { width: 100%; height: auto; max-height: 11mm; }
  .bc-sm { max-height: 8mm; }
  /* `margin-inline: auto` (not text-align) is what actually centres the QR
     block under its caption — otherwise it sits on the start edge, which puts
     it beside the caption in RTL. */
  .qr-box { width: 16mm; height: 16mm; margin-inline: auto; }
  .qr-box img { width: 100%; height: 100%; display: block; }

  /* ---- Left column: device label (30%) ---------------------------------- */
  /* Exact flex bases (not min-height) so the bands total exactly 100% of the
     fixed page height and can never spill onto a second sheet. */
  .lbl-band { box-sizing: border-box; overflow: hidden; }
  .lbl-band b { font-weight: 700; }
  .lbl-track { flex: 0 0 15%; display: flex; direction: ltr; align-items: center; gap: 4px; border-bottom: 1px solid #000; }
  .lbl-track-code { flex: 1 1 auto; min-width: 0; text-align: center; }
  .lbl-no { font-size: 11.5px; font-weight: 700; letter-spacing: .5px; }
  .lbl-track-date { flex: 0 0 auto; direction: rtl; text-align: center; font-size: 10px; }
  .lbl-track-date b { display: block; }

  .lbl-customer { flex: 0 0 10%; padding-top: 2px; border-bottom: 1px solid #000; }
  .lbl-device { flex: 0 0 20%; padding-top: 2px; border-bottom: 1px solid #000; }
  .lbl-specs { font-size: 9.5px; color: #222; }

  .lbl-service { flex: 0 0 25%; padding-top: 2px; border-bottom: 1px solid #000; }
  .lbl-sub { margin-bottom: 2px; }
  .lbl-sub b { display: block; font-size: 10.5px; }
  .lbl-sub p { margin: 0; font-size: 10px; white-space: pre-line; }

  .lbl-foot { flex: 0 0 30%; padding-top: 2px; display: flex; flex-direction: column; }
  .lbl-foot-row { display: flex; justify-content: space-between; gap: 4px; font-size: 10.5px; }
  .lbl-notes { flex: 1 1 auto; overflow: hidden; }
  .lbl-sign { margin-top: auto; font-size: 10.5px; display: flex; align-items: baseline; gap: 4px; padding-inline-start: 2px; }
  /* Edge clipped the caption when the dotted rule was allowed to squeeze it. */
  .lbl-sign-label { flex: 0 0 auto; white-space: nowrap; }
  .lbl-sign .dots { flex: 1 1 auto; min-width: 8mm; border-bottom: 1px dotted #000; }

  /* ---- Right column: customer receipt (70%) ----------------------------- */
  .rc-block { box-sizing: border-box; overflow: hidden; }
  .rc-block b { font-weight: 700; }
  .rc-box { box-sizing: border-box; direction: rtl; border: 1px solid #000; padding: 2px 5px; overflow: hidden; }

  .rc-header { flex: 0 0 15%; display: flex; direction: ltr; align-items: center; gap: 6px; border-bottom: 2px solid #000; }
  .rc-qr { flex: 0 0 20%; text-align: center; }
  .rc-qr-hint { font-size: 8.5px; margin-top: 2px; }
  .rc-track { flex: 0 0 30%; text-align: center; padding: 0 4px; }
  .rc-track-no { font-size: 12.5px; font-weight: 700; letter-spacing: .5px; }
  .rc-shop { flex: 1 1 auto; min-width: 0; direction: rtl; text-align: right; }
  .rc-shop-name { font-size: 18px; font-weight: 700; line-height: 1.2; }
  .rc-shop-sub { font-size: 10.5px; color: #333; }

  .rc-info { flex: 0 0 20%; display: flex; direction: ltr; gap: 4px; padding-top: 3px; }
  .rc-info-left { flex: 0 0 35%; }
  .rc-info-right { flex: 1 1 auto; min-width: 0; }
  .rc-specs { font-size: 10px; color: #222; }
  .rc-dim { color: #444; }

  /* The bottom padding is the gap before the terms box — kept inside this
     block so the five blocks still total 100% of the fixed page height. */
  .rc-service { flex: 0 0 27%; display: flex; flex-direction: column; gap: 2px; padding: 3px 0 6px; }
  .rc-row { border: 1px solid #000; padding: 2px 5px; font-size: 11px; overflow: hidden; }
  .rc-service-split { flex: 1 1 auto; display: flex; direction: ltr; gap: 4px; min-height: 0; }
  .rc-cost { flex: 0 0 40%; }
  .rc-notes { flex: 1 1 auto; min-width: 0; }
  .rc-notes p { margin: 0; font-size: 10.5px; white-space: pre-line; }

  .rc-terms { flex: 0 0 28%; border: 1px solid #000; padding: 2px 5px; }
  .rc-terms h5 { font-size: 11px; font-weight: 700; margin: 0 0 2px; text-align: center; border-bottom: 1px solid #999; padding-bottom: 1px; }
  .rc-terms ol { margin: 0; padding-inline-start: 13px; font-size: 9.5px; line-height: 1.4; column-count: 2; column-gap: 10px; }
  .rc-terms ol.self-numbered { list-style: none; padding-inline-start: 0; }
  .rc-terms li { margin: 0 0 1px; break-inside: avoid; }

  .rc-footer { flex: 0 0 10%; display: flex; direction: ltr; align-items: center; justify-content: space-between; gap: 8px; border-top: 2px solid #000; font-size: 10.5px; }
  .rc-footer-shop { direction: rtl; text-align: left; }
  .rc-footer-sign { direction: rtl; font-weight: 700; text-align: right; }

  .invoice-sheet { width: 100%; font-family: 'Vazirmatn', Tahoma, sans-serif; color: #000; font-size: 12.5px; line-height: 1.6; }
  .invoice-header { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid #000; padding-bottom: 8px; margin-bottom: 10px; }
  .invoice-header .shop-name { font-weight: 700; font-size: 18px; }
  .invoice-header .invoice-meta div { margin: 2px 0; }
  .invoice-customer { margin-bottom: 12px; }
  .invoice-items-table { width: 100%; border-collapse: collapse; margin-bottom: 14px; }
  .invoice-items-table th, .invoice-items-table td { border: 1px solid #999; padding: 6px 8px; text-align: start; font-size: 12px; }
  .invoice-items-table th { background: #eee; }
  .invoice-totals { width: 260px; margin-inline-start: auto; }
  .invoice-totals .row { display: flex; justify-content: space-between; padding: 3px 0; }
  .invoice-totals .row.total { font-weight: 700; border-top: 1px solid #000; margin-top: 4px; padding-top: 6px; }
  .invoice-payments { margin-top: 14px; font-size: 11.5px; }
  .invoice-payments ul { margin: 4px 0 0; padding-inline-start: 18px; }
  .invoice-terms { font-size: 9.5px; color: #333; white-space: pre-line; margin-top: 18px; border-top: 1px solid #ccc; padding-top: 6px; }
  .invoice-signatures { display: flex; justify-content: space-between; margin-top: 30px; font-size: 11px; }
}

.invoice-sheet { display: none; }
@media print { .invoice-sheet { display: block; } }

/* Hidden on screen; only relevant inside @media print above. */
.receipt-page { display: none; }
@media print { .receipt-page { display: block; } }