/* ============================================================
   RECEIPT PRINT STYLES
   Hides everything except #receipt and renders it cleanly.
   ============================================================ */
@media print {

  /* 1. Hide the entire page */
  body * {
    visibility: hidden !important;
  }

  /* 2. Show only the receipt and all its children */
  #receipt,
  #receipt * {
    visibility: visible !important;
  }

  /* 3. Position receipt at top-left, full width */
  #receipt {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    border: none !important;
    border-radius: 0 !important;
    background: #fff !important;
  }

  /* 4. Dark header → print-friendly (dark bg with white text looks fine on paper) */
  .receipt-header {
    background: #1a2234 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 5. Page setup */
  @page {
    size: A4 portrait;
    margin: 10mm;
  }

  /* 6. Receipt total — keep green color on print */
  .receipt-total {
    color: #059669 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* 7. Table borders */
  .receipt-body table {
    width: 100% !important;
    border-collapse: collapse !important;
  }

  .receipt-body th,
  .receipt-body td {
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 8px 4px !important;
  }
}