/* Automyra POS — css/print.css: A4 report printing + A4/80mm thermal invoice printing. */
@media print {
  @page { margin: 10mm; }
  body { background: #fff !important; }

  /* Chrome/Firefox: everything hidden by default, then selectively revealed below. */
  #sidebar, #topbar, #update-bar, #toast, #modal-root { display: none !important; }
  .page-toolbar { display: none !important; }

  /* Invoice printing: #print-area is only non-empty right after a sale is saved (js/app.js fills it,
     then clears it again on the 'afterprint' event) — so when it has content, show only that. */
  body[data-print-mode] #print-area:empty { display: none; }
  body[data-print-mode] #print-area:not(:empty) ~ #main,
  body[data-print-mode] #print-area:not(:empty) ~ * { display: none !important; }
  body[data-print-mode] #print-area { display: block !important; }

  .invoice { font-family: system-ui, sans-serif; color: #000; }
  .invoice-head { text-align: center; margin-bottom: 10px; }
  .invoice-logo { max-width: 120px; max-height: 60px; }
  .invoice-table { width: 100%; border-collapse: collapse; margin: 10px 0; }
  .invoice-table th, .invoice-table td { border-bottom: 1px solid #000; padding: 4px 6px; text-align: left; font-size: 13px; }
  .invoice-totals { width: 100%; margin-top: 8px; }
  .invoice-totals td { padding: 2px 6px; font-size: 13px; }
  .invoice-terms, .invoice-footer { font-size: 11px; color: #333; margin-top: 10px; text-align: center; }

  body[data-print-mode="thermal"] .invoice { width: 72mm; margin: 0 auto; font-size: 11px; }
  body[data-print-mode="thermal"] .invoice-table th, body[data-print-mode="thermal"] .invoice-table td { font-size: 11px; padding: 2px 3px; }
  body[data-print-mode="thermal"] .invoice-logo { max-width: 60mm; max-height: 30mm; }

  body[data-print-mode="a4"] .invoice { width: 100%; font-size: 14px; }

  /* Report printing: #print-area stays empty, so #main/#app-content is shown instead. */
  #app-content { padding: 0 !important; }
}