/* =========================================================
   ALFAA ERP - PREMIUM SAAS INVOICE PDF TEMPLATE
   File: assets/css/print.css

   Applied only to the printable Sale / Purchase invoice templates.
   - Emerald green ALFAA theme.
   - Public Note displays the public note already saved in the invoice.
   - Tax row is intentionally excluded.
   - Internal/private notes, COGS, profit and landed-cost internals are not printed.
   ========================================================= */

.print-only { display: none !important; }

/* =========================================================
   A4 INVOICE CANVAS
   ========================================================= */
.invoice-pdf-page {
  --pdf-green: #10b981;
  --pdf-green-dark: #047857;
  --pdf-green-mid: #059669;
  --pdf-green-soft: #ecfdf5;
  --pdf-ink: #0f172a;
  --pdf-text: #334155;
  --pdf-muted: #64748b;
  --pdf-border: #e2e8f0;
  --pdf-panel: #ffffff;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 210mm;
  min-height: 297mm;
  margin: 0 auto;
  padding: 12mm 11mm 9mm;
  color: var(--pdf-text);
  background: #ffffff;
  font-family: "Inter", Arial, sans-serif;
  font-size: 9pt;
}

/* =========================================================
   BRAND / TITLE HEADER
   ========================================================= */
.invoice-pdf-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12mm;
  margin-bottom: 6mm;
}

.invoice-pdf-brand {
  display: flex;
  align-items: flex-start;
  gap: 4mm;
}

.invoice-pdf-logo {
  display: block;
  width: 19mm;
  height: 19mm;
  object-fit: contain;
  object-position: left top;
}

.invoice-pdf-brand-copy {
  padding-top: 1.2mm;
}

.invoice-pdf-company {
  margin: 0;
  color: var(--pdf-ink);
  font-size: 13.5pt;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: 0.01em;
}

.invoice-pdf-tagline {
  margin: 1.3mm 0 0;
  color: var(--pdf-muted);
  font-size: 7.8pt;
  font-weight: 500;
}

.invoice-pdf-title-block {
  text-align: right;
}

.invoice-pdf-title-block h1 {
  margin: 0;
  color: var(--pdf-green-mid);
  font-size: 28pt;
  line-height: 1;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.purchase-pdf-template .invoice-pdf-title-block h1 {
  font-size: 21pt;
}

.invoice-pdf-title-block p {
  margin: 2mm 0 0;
  color: var(--pdf-muted);
  font-size: 11pt;
  font-weight: 500;
}

/* =========================================================
   CLIENT / SUPPLIER AND INVOICE METADATA
   ========================================================= */
.invoice-pdf-info-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 82mm;
  gap: 13mm;
  padding: 2mm 0 6mm;
  margin-bottom: 6mm;
  border-bottom: 0.25mm solid var(--pdf-border);
}

.invoice-pdf-billto {
  min-height: 55mm;
  padding-top: 5mm;
  border-right: 0.25mm solid var(--pdf-border);
}

.invoice-pdf-section-label {
  display: block;
  margin-bottom: 4.3mm;
  color: var(--pdf-green-mid);
  font-size: 8pt;
  line-height: 1;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.invoice-pdf-section-label::after {
  content: "";
  display: block;
  width: 9mm;
  height: 0.55mm;
  margin-top: 2.1mm;
  border-radius: 99px;
  background: var(--pdf-green);
}

.invoice-pdf-billto strong {
  display: block;
  margin: 0 0 2.2mm;
  color: var(--pdf-ink);
  font-size: 11.5pt;
  font-weight: 750;
  line-height: 1.3;
}

.invoice-pdf-billto small {
  display: block;
  max-width: 75mm;
  margin-top: 1.3mm;
  color: var(--pdf-muted);
  font-size: 8.5pt;
  line-height: 1.45;
}

.invoice-pdf-meta {
  display: grid;
  gap: 2.3mm;
  align-content: start;
}

.invoice-pdf-meta-row {
  display: grid;
  grid-template-columns: 30mm minmax(0, 1fr);
  align-items: center;
  gap: 4mm;
  min-height: 7mm;
}

.invoice-pdf-meta-row span {
  color: var(--pdf-muted);
  font-size: 8.5pt;
  font-weight: 500;
}

.invoice-pdf-meta-row strong {
  color: var(--pdf-ink);
  font-size: 8.8pt;
  font-weight: 600;
  text-align: right;
}

.invoice-pdf-status {
  display: inline-flex;
  justify-self: end;
  align-items: center;
  min-height: 6mm;
  padding: 1.2mm 3.5mm;
  border-radius: 99px;
  font-size: 8pt;
  font-weight: 700;
}

.invoice-pdf-status.is-paid {
  color: var(--pdf-green-dark);
  background: #dcfce7;
}

.invoice-pdf-status.is-due {
  color: #b45309;
  background: #fef3c7;
}

.invoice-pdf-status.is-neutral {
  color: var(--pdf-muted);
  background: #f1f5f9;
}

.invoice-pdf-balance-row {
  display: grid;
  grid-template-columns: 14mm minmax(0, 1fr);
  align-items: center;
  gap: 4mm;
  margin-top: 3mm;
  padding: 4mm 4.2mm;
  border: 0.3mm solid rgba(16, 185, 129, 0.42);
  border-radius: 3mm;
  background: linear-gradient(120deg, #ffffff 0%, #ecfdf5 100%);
}

.invoice-pdf-balance-icon {
  width: 12mm;
  height: 12mm;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #ffffff;
  background: linear-gradient(145deg, var(--pdf-green), var(--pdf-green-dark));
  font-size: 10pt;
  font-weight: 700;
}

.invoice-pdf-balance-row span {
  display: block;
  margin-bottom: 1mm;
  color: var(--pdf-green-mid);
  font-size: 7.8pt;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.invoice-pdf-balance-row strong {
  display: block;
  color: var(--pdf-green-dark);
  font-size: 16pt;
  line-height: 1.15;
  font-weight: 800;
  white-space: nowrap;
}

.invoice-pdf-balance-row small {
  display: block;
  margin-top: 1mm;
  color: var(--pdf-muted);
  font-size: 7pt;
}

/* =========================================================
   ITEMS TABLE
   ========================================================= */
.invoice-pdf-table {
  /*
   * Keep the full table frame on the exact same printable A4 content line
   * as the divider above it. The parent .invoice-pdf-page already controls
   * the left/right page margin with padding: 12mm 11mm 9mm.
   */
  box-sizing: border-box;
  display: table;
  width: 100%;
  max-width: 100%;
  margin: 0 0 7mm;
  border: 0.25mm solid var(--pdf-border);
  border-collapse: separate;
  border-spacing: 0;
  border-radius: 2.7mm;
  overflow: hidden;
  table-layout: fixed;
}

.invoice-pdf-table tr {
  break-inside: avoid;
  page-break-inside: avoid;
}

.invoice-pdf-table th {
  padding: 3.3mm 3.5mm;
  color: #ffffff;
  background: linear-gradient(100deg, var(--pdf-green-dark), var(--pdf-green));
  font-size: 7.8pt;
  font-weight: 700;
  letter-spacing: 0.035em;
  text-align: left;
  text-transform: uppercase;
}

.invoice-pdf-table td {
  padding: 3.6mm 3.5mm;
  color: var(--pdf-text);
  border-bottom: 0.25mm solid var(--pdf-border);
  background: #ffffff;
  font-size: 8.3pt;
  line-height: 1.42;
  vertical-align: top;
  overflow-wrap: anywhere;
}

.invoice-pdf-table tbody tr:last-child td {
  border-bottom: 0;
}

.invoice-pdf-table td strong {
  color: var(--pdf-ink);
  font-weight: 700;
}

.sale-pdf-template .invoice-pdf-table th:nth-child(1),
.sale-pdf-template .invoice-pdf-table td:nth-child(1) { width: 28%; }

.sale-pdf-template .invoice-pdf-table th:nth-child(2),
.sale-pdf-template .invoice-pdf-table td:nth-child(2) { width: 29%; }

.invoice-pdf-table-purchase th,
.invoice-pdf-table-purchase td {
  padding-left: 2.1mm;
  padding-right: 2.1mm;
  font-size: 7.1pt;
}

.invoice-pdf-table-purchase th:nth-child(1),
.invoice-pdf-table-purchase td:nth-child(1) { width: 18%; }

.invoice-pdf-table-purchase th:nth-child(2),
.invoice-pdf-table-purchase td:nth-child(2) { width: 19%; }

/* =========================================================
   PUBLIC NOTE + TOTALS
   ========================================================= */
.invoice-pdf-lower-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 86mm;
  align-items: start;
  gap: 9mm;
  margin-top: 0;
  margin-bottom: 7mm;
}

.invoice-pdf-lower-grid.no-public-note {
  grid-template-columns: minmax(0, 1fr) 86mm;
}

.invoice-pdf-lower-grid.no-public-note .invoice-pdf-summary-card {
  grid-column: 2;
}

.invoice-pdf-public-note,
.invoice-pdf-summary-card {
  border: 0.25mm solid var(--pdf-border);
  border-radius: 2.7mm;
  background: #ffffff;
}

.invoice-pdf-public-note {
  min-height: 49mm;
  padding: 5mm 5mm;
  border-color: rgba(16, 185, 129, 0.26);
  background: linear-gradient(130deg, #ffffff, #f2fdf8);
}

.invoice-pdf-public-note-head {
  display: flex;
  align-items: center;
  gap: 3mm;
  margin-bottom: 4mm;
}

.invoice-pdf-public-note-icon {
  width: 9mm;
  height: 9mm;
  display: grid;
  place-items: center;
  border-radius: 2mm;
  color: var(--pdf-green-mid);
  background: #dcfce7;
  font-size: 10pt;
}

.invoice-pdf-public-note h2 {
  margin: 0;
  color: var(--pdf-green-dark);
  font-size: 10pt;
  font-weight: 700;
}

.invoice-pdf-public-note h2::after {
  content: "";
  display: block;
  width: 9mm;
  height: 0.5mm;
  margin-top: 2mm;
  background: var(--pdf-green);
}

.invoice-pdf-public-note p {
  margin: 0;
  color: var(--pdf-text);
  font-size: 8.3pt;
  line-height: 1.68;
  white-space: pre-wrap;
}

.invoice-pdf-summary-card {
  padding: 3.2mm 4mm 3.5mm;
}

.invoice-pdf-summary-row {
  display: flex;
  justify-content: space-between;
  gap: 5mm;
  padding: 2.5mm 0;
  border-bottom: 0.2mm dashed #dce3ea;
  color: var(--pdf-muted);
  font-size: 8pt;
  font-weight: 650;
  text-transform: uppercase;
}

.invoice-pdf-summary-row:last-child {
  border-bottom: 0;
}

.invoice-pdf-summary-row strong {
  color: var(--pdf-ink);
  font-weight: 650;
  text-align: right;
  text-transform: none;
  white-space: nowrap;
}

.invoice-pdf-summary-row.is-total {
  margin-top: 1.2mm;
  padding-top: 3mm;
  border-top: 0.25mm solid #cbd5e1;
}

.invoice-pdf-summary-row.is-due {
  align-items: center;
  margin: 2.5mm -1mm 0;
  padding: 3mm 2.2mm;
  border: 0;
  border-radius: 2mm;
  color: var(--pdf-green-dark);
  background: #ecfdf5;
}

.invoice-pdf-summary-row.is-due strong {
  color: var(--pdf-green-dark);
  font-size: 11pt;
  font-weight: 800;
}

/* =========================================================
   MINIMAL PROFESSIONAL FOOTER
   ========================================================= */
.invoice-pdf-footer {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 0;
  width: 100%;
  margin-top: auto;
  padding-top: 6.5mm;
  border-top: 0.25mm solid var(--pdf-border);
}

.invoice-pdf-footer-card {
  display: grid;
  grid-template-columns: 11mm minmax(0, 1fr);
  align-items: start;
  gap: 4mm;
  min-height: 29mm;
  padding: 0 7mm 0 2.5mm;
}

.invoice-pdf-footer-card + .invoice-pdf-footer-card {
  padding: 0 2.5mm 0 9mm;
  border-left: 0.25mm solid var(--pdf-border);
}

.invoice-pdf-footer-icon {
  width: 10mm;
  height: 10mm;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--pdf-green-mid);
  background: var(--pdf-green-soft);
  font-size: 10pt;
}

.invoice-pdf-footer-card h3 {
  margin: 0 0 2.3mm;
  color: var(--pdf-ink);
  font-size: 9pt;
  font-weight: 700;
}

.invoice-pdf-footer-card h3::after {
  content: "";
  display: block;
  width: 8mm;
  height: 0.45mm;
  margin-top: 1.6mm;
  background: var(--pdf-green);
}

.invoice-pdf-footer-card p {
  margin: 0;
  color: var(--pdf-muted);
  font-size: 7.7pt;
  line-height: 1.55;
}

.invoice-pdf-system-footer {
  margin: 4.5mm 0 0;
  padding-top: 0;
  color: var(--pdf-muted);
  font-size: 7pt;
  text-align: center;
}

/* =========================================================
   UTILITIES
   ========================================================= */
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }

/* =========================================================
   A4 PDF ONLY - TABLE FRAME EDGE LOCK
   Mirrors the exact full-width edge used by .invoice-pdf-info-grid border line.
   This controls the table frame, not the inner column text padding.
   ========================================================= */
@media print {
  .invoice-pdf-page .invoice-pdf-table {
    box-sizing: border-box !important;
    display: table !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .invoice-pdf-page .invoice-pdf-table thead,
  .invoice-pdf-page .invoice-pdf-table tbody,
  .invoice-pdf-page .invoice-pdf-table tr {
    width: 100% !important;
  }
}

/* =========================================================
   PRINT OUTPUT
   ========================================================= */
@media print {
  @page {
    size: A4 portrait;
    margin: 0;
  }

  html,
  body {
    width: 210mm;
    min-height: 297mm;
    margin: 0 !important;
    padding: 0 !important;
    background: #ffffff !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  body * {
    visibility: hidden !important;
  }

  .invoice-pdf-page,
  .invoice-pdf-page * {
    visibility: visible !important;
  }

  .print-only.invoice-pdf-page {
    display: flex !important;
    flex-direction: column !important;
  }

  .invoice-pdf-page {
    position: absolute;
    inset: 0 auto auto 0;
    width: 210mm !important;
    min-height: 297mm !important;
    margin: 0 !important;
    padding: 12mm 11mm 9mm !important;
    box-shadow: none !important;
    overflow: visible !important;
    page-break-after: auto;
  }

  .sidebar,
  .navbar,
  .top-navbar,
  .no-print,
  .app-sidebar,
  .app-navbar,
  .purchase-invoice-hero.no-print,
  .sale-invoice-hero.no-print {
    display: none !important;
  }

  .app-shell,
  .app-main,
  .main-content,
  .page-section {
    display: block !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }
}


/* =========================================================
   SERIAL / IMEI ATTACHMENT MARKER IN MAIN INVOICE TABLE
   ========================================================= */
.invoice-pdf-serial-attachment {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.2mm;
  min-height: 6.6mm;
  padding: 1.1mm 2mm;
  border-radius: 99px;
  color: var(--pdf-green-dark);
  background: var(--pdf-green-soft);
  font-size: 7.6pt;
  line-height: 1;
  font-weight: 700;
  white-space: nowrap;
}

.invoice-pdf-serial-attachment small {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5mm;
  height: 5.5mm;
  padding: 0 1mm;
  border-radius: 99px;
  color: #ffffff;
  background: var(--pdf-green-mid);
  font-size: 6.8pt;
  line-height: 1;
  font-weight: 750;
}

/* =========================================================
   SERIAL / IMEI PDF APPENDIX PAGE
   Auto-generated only when an item contains more than 8 saved values.
   ========================================================= */
.invoice-pdf-serial-appendix {
  page-break-before: always;
  break-before: page;
}

.invoice-pdf-serial-appendix .invoice-pdf-title-block h1 {
  font-size: 19pt;
}

.invoice-pdf-appendix-heading {
  margin: 1mm 0 7mm;
  padding-bottom: 5mm;
  border-bottom: 0.25mm solid var(--pdf-border);
}

.invoice-pdf-appendix-heading h2 {
  margin: 0 0 1.6mm;
  color: var(--pdf-ink);
  font-size: 15pt;
  line-height: 1.18;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.invoice-pdf-appendix-heading p {
  margin: 0;
  color: var(--pdf-muted);
  font-size: 8.4pt;
  line-height: 1.5;
}

.invoice-pdf-serial-products {
  display: grid;
  gap: 5mm;
  align-content: start;
}

.invoice-pdf-serial-product {
  padding: 4.5mm;
  border: 0.25mm solid var(--pdf-border);
  border-radius: 2.8mm;
  background: #ffffff;
}

.invoice-pdf-serial-product-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 6mm;
  margin-bottom: 4mm;
  padding-bottom: 3.4mm;
  border-bottom: 0.25mm solid var(--pdf-border);
}

.invoice-pdf-serial-product-head h3 {
  margin: 0;
  color: var(--pdf-ink);
  font-size: 10pt;
  font-weight: 750;
  line-height: 1.3;
}

.invoice-pdf-serial-product-head p {
  margin: 1mm 0 0;
  color: var(--pdf-muted);
  font-size: 7.5pt;
}

.invoice-pdf-serial-product-head > span {
  flex: 0 0 auto;
  padding: 1.7mm 3mm;
  border-radius: 99px;
  color: var(--pdf-green-dark);
  background: #dcfce7;
  font-size: 7.5pt;
  font-weight: 700;
}

.invoice-pdf-serial-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2.2mm;
}

.invoice-pdf-serial-chip {
  display: inline-grid;
  grid-template-columns: 7mm auto;
  align-items: center;
  gap: 1.8mm;
  min-height: 8mm;
  padding: 1.1mm 2.4mm 1.1mm 1.2mm;
  border: 0.25mm solid #dbe8e4;
  border-radius: 2mm;
  background: #f8fffc;
  line-height: 1.25;
}

.invoice-pdf-serial-chip small {
  display: inline-grid;
  place-items: center;
  min-width: 6mm;
  min-height: 5.5mm;
  padding: 0 1mm;
  border-radius: 99px;
  color: var(--pdf-green-dark);
  background: #dcfce7;
  font-size: 6.8pt;
  font-weight: 700;
}

.invoice-pdf-serial-chip strong {
  color: var(--pdf-ink);
  font-size: 7.8pt;
  font-weight: 600;
  white-space: nowrap;
}

.invoice-pdf-appendix-footer {
  display: flex;
  justify-content: space-between;
  gap: 8mm;
  margin-top: auto;
  padding-top: 5mm;
  border-top: 0.25mm solid var(--pdf-border);
  color: var(--pdf-muted);
  font-size: 7.2pt;
}

@media print {
  .invoice-pdf-serial-appendix {
    position: relative !important;
    inset: auto !important;
    page-break-before: always !important;
    break-before: page !important;
  }

  .invoice-pdf-serial-product {
    break-inside: auto;
    page-break-inside: auto;
  }

  .invoice-pdf-serial-chip {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* =========================================================
   V6 - FINAL VISIBLE PDF CONTENT + SERIAL APPENDIX PAGE FLOW
   Verified DOM hierarchy:
     .sales-detail-page > #saleDetailContainer > .sale-invoice-shell > .invoice-pdf-page
     .purchase-detail-page > #purchaseDetailContainer > .purchase-invoice-shell > .invoice-pdf-page

   Do NOT hide #saleDetailContainer or #purchaseDetailContainer:
   they contain the real printable invoice pages.
   ========================================================= */
@media print {
  /* Keep the full printable container path present and visible. */
  #app,
  .app-content,
  .main-section,
  .sales-detail-page,
  .purchase-detail-page,
  #saleDetailContainer,
  #purchaseDetailContainer,
  .sale-invoice-shell,
  .purchase-invoice-shell {
    display: block !important;
    visibility: visible !important;
    position: static !important;
    width: 210mm !important;
    max-width: 210mm !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  /*
   * Only remove the normal on-screen invoice UI inside the shell.
   * The two .invoice-pdf-page blocks must remain visible:
   *   1. main invoice
   *   2. Serial / IMEI appendix
   */
  .sale-invoice-shell > :not(.invoice-pdf-page),
  .purchase-invoice-shell > :not(.invoice-pdf-page) {
    display: none !important;
  }

  /*
   * Override the old single-page absolute positioning.
   * Both PDF pages now render in normal sequence with real content.
   */
  .sale-invoice-shell > .invoice-pdf-page,
  .purchase-invoice-shell > .invoice-pdf-page {
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    position: relative !important;
    inset: auto !important;
    box-sizing: border-box !important;
    width: 210mm !important;
    max-width: 210mm !important;
    min-height: 286mm !important;
    height: auto !important;
    margin: 0 !important;
    padding: 12mm 11mm 8mm !important;
    overflow: visible !important;
    background: #ffffff !important;
  }

  /* Page 1 is the normal invoice and advances exactly once. */
  .sale-invoice-shell > .invoice-pdf-premium,
  .purchase-invoice-shell > .invoice-pdf-premium {
    break-before: auto !important;
    page-break-before: auto !important;
    break-after: page !important;
    page-break-after: always !important;
  }

  /* Page 2 is the appendix; never force an extra blank page after it. */
  .sale-invoice-shell > .invoice-pdf-serial-appendix,
  .purchase-invoice-shell > .invoice-pdf-serial-appendix {
    break-before: auto !important;
    page-break-before: auto !important;
    break-after: auto !important;
    page-break-after: auto !important;
  }

  .sale-invoice-shell > .invoice-pdf-page:last-child,
  .purchase-invoice-shell > .invoice-pdf-page:last-child {
    break-after: auto !important;
    page-break-after: auto !important;
  }
}