/* ============================================================================
   css/print.css — A4 proforma print layout (README section 8).
   #print-root is built fresh by js/proformas.js just before window.print()
   is called, and is otherwise empty/hidden. On screen, only #print-root is
   hidden; when printing, everything ELSE is hidden and only #print-root
   shows — see the two @media blocks at the bottom.
   ============================================================================ */

#print-root {
  display: none;
}

#print-root .print-header {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  border-bottom: 2px solid #1a1a1a;
  padding-bottom: 12px;
  margin-bottom: 16px;
}

#print-root .print-logo {
  width: 64px;
  height: 64px;
  object-fit: contain;
  flex: 0 0 auto;
}

#print-root .print-company {
  font-size: 11px;
  line-height: 1.5;
}

#print-root .print-company-name {
  font-size: 16px;
  font-weight: 700;
}

#print-root .print-company-slogan {
  font-style: italic;
  margin-bottom: 4px;
}

#print-root .print-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 16px;
}

#print-root .print-title h1 {
  font-size: 18px;
  letter-spacing: 1px;
  margin: 0;
}

#print-root .print-meta {
  text-align: right;
  font-size: 12px;
  line-height: 1.6;
}

#print-root .print-customer {
  border: 1px solid #999;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-size: 12px;
  line-height: 1.6;
}

#print-root .print-section-title {
  font-weight: 700;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}

#print-root .print-customer-name {
  font-weight: 700;
  font-size: 13px;
}

#print-root table.print-items {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 12px;
}

#print-root table.print-items th,
#print-root table.print-items td {
  border: 1px solid #999;
  padding: 6px 8px;
}

#print-root table.print-items th {
  background: #eee;
  text-align: left;
}

#print-root table.print-items td.num,
#print-root table.print-items th.num {
  text-align: right;
}

#print-root .print-totals {
  width: 280px;
  margin-left: auto;
  font-size: 12px;
  margin-bottom: 16px;
}

#print-root .print-totals > div {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}

#print-root .print-grand-total {
  border-top: 1px solid #1a1a1a;
  font-weight: 700;
  font-size: 14px;
  margin-top: 4px;
  padding-top: 6px !important;
}

#print-root .print-words {
  font-size: 10.5px;
  font-style: italic;
  text-align: right;
  margin-top: 4px;
}

#print-root .print-terms {
  font-size: 11px;
  line-height: 1.7;
  margin-bottom: 16px;
}

#print-root .print-payment-status {
  border: 1px solid #1a1a1a;
  display: inline-block;
  padding: 4px 10px;
  font-size: 12px;
  margin-bottom: 16px;
}

#print-root .print-bank {
  font-size: 11px;
  margin-bottom: 24px;
}

#print-root .print-signatures {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  margin-top: 40px;
}

#print-root .print-signature-block {
  flex: 1;
  font-size: 11px;
  text-align: center;
}

#print-root .print-signature-line {
  margin-top: 40px;
  border-top: 1px solid #1a1a1a;
}

@media screen {
  #print-root {
    display: none !important;
  }
}

/* ---- label sheet (js/labels.js) — screen-visible parts of the config
   form use ordinary app.css classes; only the actual printed sheet lives
   here. Scoped to the .print-labels-sheet WRAPPER, never to #print-root
   itself — renderAndPrint() only clears #print-root's children between
   print jobs, so a class placed directly on #print-root would silently
   persist into the next, unrelated print (an invoice). A class on a child
   that gets thrown away every time is the only safe place for this. */
#print-root .print-labels-sheet {
  display: flex;
  flex-wrap: wrap;
}

#print-root .print-label {
  box-sizing: border-box;
  border: 1px dashed #999;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2mm;
  overflow: hidden;
  break-inside: avoid;
}

/* Sizing (width/height) is set inline per-label by js/labels.js, as an
   explicit mm value computed from min(labelWidth, labelHeight) — not a CSS
   percentage here. A width-relative percentage + aspect-ratio computes
   against the label's width for BOTH axes, which is wrong the moment a
   label isn't square (e.g. the 50x30mm default): it produced a QR taller
   than the entire label, overflowing it and clipping the SKU/description
   text below to nothing. See js/labels.js's generateAndPrint() for the
   actual calculation. */
#print-root .print-label-qr svg {
  display: block;
  width: 100%;
  height: 100%;
}

#print-root .print-label-sku {
  font-family: "Courier New", monospace;
  font-size: 8px;
  margin-top: 1mm;
  text-align: center;
  white-space: nowrap;
}

#print-root .print-label-desc {
  font-size: 7px;
  line-height: 1.2;
  text-align: center;
  margin-top: 0.5mm;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

@media print {
  @page {
    size: A4;
    margin: 15mm;
  }

  /* Named page (CSS Paged Media) — a much smaller margin than the invoice
     page above, so more labels fit per A4 sheet. Scoped the same way as
     the layout rules: to the wrapper, never to #print-root. */
  @page labels {
    size: A4;
    margin: 5mm;
  }
  #print-root .print-labels-sheet {
    page: labels;
  }

  body * {
    visibility: hidden;
  }

  #print-root,
  #print-root * {
    visibility: visible;
  }

  #print-root {
    display: block !important;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    color: #000;
    background: #fff;
  }
}

/* Delivery Order: dashed cut line above the tear-off Gate Pass */
.print-tear {
  border-top: 2px dashed #94a3b8;
  margin: 18mm 0 6mm;
  padding-top: 1mm;
  text-align: center;
  font-size: 8pt;
  color: #64748b;
}

/* A serial returned since the sale, crossed out on the reprinted invoice. */
#print-root .print-serial-returned {
  text-decoration: line-through;
  color: #666;
}