/*
 * Pixel-perfect invoice (replicates reference Tailwind class output).
 *
 * Reference page is `w-[210mm] bg-white p-[12.7mm] h-[297mm]`.
 */

.a4 {
  position: relative;
  width: 210mm;
  height: calc(297mm - 1px);
  background: #fff;
  padding: 12.7mm;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  color: #000;
  box-sizing: border-box;
  overflow: hidden;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
}

/* Main column: fills page minus reserved footer height (--a4-footer-h set in JS) */
.a4-layout {
  height: calc(100% - var(--a4-footer-h, 85mm));
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.a4-items-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}

/* Last page: items + totals stack at top (totals under last row, not at page bottom) */
.a4-last .a4-items-body {
  flex: 0 0 auto;
  overflow: visible;
}

/* 7-column grid utility (matches Tailwind grid-cols-7 gap-0) */
.a4 .grid7 {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  align-items: start;
}
.a4 .col-span-1 { grid-column: span 1 / span 1; }
.a4 .col-span-2 { grid-column: span 2 / span 2; }
.a4 .col-span-3 { grid-column: span 3 / span 3; }
.a4 .col-span-4 { grid-column: span 4 / span 4; }
.a4 .col-span-5 { grid-column: span 5 / span 5; }

/* Items table: # width grows with digit count (--line-num-ch set in JS) */
.a4 .grid-items {
  display: grid;
  grid-template-columns: calc(var(--line-num-ch, 1) * 1ch + 8px) 3fr 1fr 2fr 1fr;
  column-gap: 0;
  align-items: start;
  width: 100%;
}
.a4 .grid-items .col-num {
  white-space: nowrap;
  box-sizing: border-box;
}

/* ============================================================== */
/* Header                                                          */
/* ============================================================== */
.a4-logo { width: 8.692mm; height: auto; display: block; }
.a4 .invoice-to {
  text-transform: uppercase;
  font-weight: 500;
  font-size: 12pt;
  color: #35C2DA;
  margin: 0 0 4px 0;
  padding: 0;
  line-height: 1;
}
.a4 .author-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0;
}
.a4 .author-name {
  font-size: 10pt;
  font-weight: 500;
  margin: 0; padding: 0;
  line-height: 0.75rem;
  color: #000;
}
.a4 .author-address {
  font-size: 10pt;
  margin: 0; padding: 0;
  color: #000;
  line-height: 1.4;
}
.a4 .pills {
  display: flex;
  gap: 8px;
  padding-top: 7mm;
  align-items: center;
}
.a4 .pill-outline {
  padding: 2mm 4mm 2mm;
  border: 2px solid #35C2DA;
  color: #35C2DA;
  border-radius: 999px;
  font-weight: 500;
  font-size: 10pt;
  white-space: nowrap;
  line-height: 1;
  display: inline-block;
}

/* ============================================================== */
/* Items header                                                    */
/* ============================================================== */
.a4-items-header {
  width: 100%;
  border-top: 1.5pt solid #35C2DA;
  padding-top: 2.5mm;
  padding-bottom: 2mm;
  margin-top: 64px;
  flex-shrink: 0;
}
.a4-items-header p:not(.col-num) {
  text-transform: uppercase;
  color: #35C2DA;
  font-weight: 500;
  font-size: 10pt;
  margin: 0;
  padding: 0;
  line-height: 1.4;
}

/* ============================================================== */
/* Item rows                                                       */
/* ============================================================== */
.a4-line {
  display: block;
  width: 100%;
  height: 0;
  margin: 0;
  padding: 0;
  border: none;
  border-top: 1pt solid #35C2DA;
  background: transparent;
  flex-shrink: 0;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.a4-item-row {
  width: 100%;
  padding-top: 2.5mm;
  padding-bottom: 2mm;
}
.a4-item-row p:not(.col-num) {
  margin: 0;
  padding: 0;
  font-size: 10pt;
  color: #000;
  word-break: break-word;
  overflow-wrap: anywhere;
  line-height: 1.4;
  font-weight: 400;
}
.a4-items-header .col-num,
.a4-item-row .col-num {
  margin: 0;
  text-align: center;
  text-transform: none;
  padding-left: 4px;
  padding-right: 4px;
  font-size: 10pt;
  line-height: 1.4;
  font-weight: 400;
  color: #000;
}
.a4-items-header .col-num {
  color: #35C2DA;
  font-weight: 500;
}
.a4-item-row.grid-items > p:nth-child(n+3) { text-transform: uppercase; }
.a4-item-row .desc { padding-right: 8px; }

/* ============================================================== */
/* Totals                                                          */
/* ============================================================== */
.a4-totals { width: 100%; flex-shrink: 0; }
.a4-totals .label-col {
  border-top: 2pt solid #35C2DA;
  color: #35C2DA;
  margin-top: 16px;
  padding-top: 8px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 10pt;
}
.a4-totals .value-col {
  border-top: 2pt solid #35C2DA;
  color: #35C2DA;
  margin-top: 16px;
  padding-top: 8px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0;
}
.a4-totals p {
  font-size: 10pt;
  margin: 0 0 4px 0;
  padding: 0;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.5;
}
.a4-totals .label-col p:last-child,
.a4-totals .value-col p:last-child {
  margin-bottom: 0;
}
.a4-totals .brand-text { color: #35C2DA; }

/* ============================================================== */
/* Bottom (bank + footer) — fixed at page bottom, every page       */
/* ============================================================== */
.a4-bottom {
  position: absolute;
  bottom: 12.7mm;
  left: 50%;
  transform: translateX(-50%);
  width: 89%;
}

.a4 .bank-card {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  align-items: start;
  border: 1px solid #000;
  border-radius: 38px;
  padding: 6.5mm;
  margin: 40px 0;
}
.a4 .bank-card .badge {
  border: 1.25pt solid #35C2DA;
  color: #35C2DA;
  border-radius: 999px;
  font-size: 10pt;
  font-weight: 500;
  text-transform: uppercase;
  padding: 2mm 4mm 2mm;
  display: inline-block;
  line-height: 1;
  width: fit-content;
}
.a4 .bank-rows {
  display: flex; flex-direction: column;
  align-items: flex-start;
  width: 100%;
}
.a4 .bank-row {
  display: flex;
  gap: 32px;
  align-items: center;
  width: 100%;
}
.a4 .bank-row p {
  margin: 0; padding: 0;
  font-size: 8pt;
  color: #000;
  line-height: 1.55;
}
.a4 .bank-row .lbl { width: 33.333333%; }
.a4 .bank-row .val { flex: 1; font-weight: 700; text-transform: uppercase; }

/* Footer */
.a4-footer {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  align-items: start;
  justify-items: start;
  width: 100%;
}
.a4-footer > div { display: flex; min-width: 0; width: 100%; justify-content: flex-start; }
.a4-footer p {
  margin: 0; padding: 0;
  font-size: 8pt;
  color: #000;
  line-height: 1.45;
  width: fit-content;
}
.a4-footer .logo-text { width: 36.35mm; height: auto; max-width: 100%; }
.a4-footer .web-email { padding-left: 12px; }
.a4-footer .right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
}
.a4-footer .right .phone { text-align: right; width: 100%; }
.a4-footer .page-pill {
  display: block;
  box-sizing: border-box;
  text-align: center;
  border: 1.25pt solid #35C2DA;
  color: #35C2DA;
  border-radius: 999px;
  font-weight: 500;
  font-size: 8pt;
  padding: 1mm 2.5mm 1mm;
  width: 16mm;
  margin: 0 0 0 auto;
  line-height: 1.4;
}

/* ============================================================== */
/* Grayscale variant                                               */
/* ============================================================== */
.a4.grayscale .invoice-to,
.a4.grayscale .a4-items-header p,
.a4.grayscale .a4-totals .brand-text { color: #000; }
.a4.grayscale .pill-outline { border-color: #000; color: #000; }
.a4.grayscale .a4-items-header { border-top-color: #000; }
.a4.grayscale .a4-line { border-top-color: #000; }
.a4.grayscale .a4-totals .label-col,
.a4.grayscale .a4-totals .value-col { border-top-color: #000; }
.a4.grayscale .bank-card .badge { border-color: #000; color: #000; }
.a4.grayscale .a4-footer .page-pill { border-color: #000; color: #000; }
.a4.grayscale .a4-logo { filter: brightness(0); }

/* ============================================================== */
/* Print                                                           */
/* ============================================================== */
@media print {
  html, body {
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
  }

  /* Hide admin chrome (visibility:hidden still left blank pages above the invoice) */
  .gi-sidebar,
  header,
  #toast,
  #app > .fixed {
    display: none !important;
  }

  #app,
  #app .min-h-screen,
  #app .flex-1,
  main {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    min-height: 0 !important;
  }

  main .space-y-4 > *:not(.print-area) {
    display: none !important;
  }

  .print-area {
    display: block !important;
    position: static !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .invoice-stack {
    display: block !important;
    gap: 0 !important;
  }

  .invoice-stack > .a4 {
    display: block !important;
    box-shadow: none !important;
    margin: 0 auto !important;
    transform: none !important;
    page-break-after: auto;
    break-after: auto;
    page-break-inside: avoid;
    break-inside: avoid;
  }

  .invoice-stack > .a4 + .a4 {
    page-break-before: always;
    break-before: page;
  }

  @page { size: A4; margin: 0; }
}

/* ============================================================== */
/* Responsive preview scaling                                      */
/* ============================================================== */
.invoice-stack { display: flex; flex-direction: column; align-items: center; gap: 24px; }

@media (max-width: 1100px) {
  .a4 {
    transform: scale(var(--invoice-scale, 0.65));
    transform-origin: top center;
    margin-bottom: calc(-1 * (297mm - 1px) * (1 - var(--invoice-scale, 0.65)) - 16px);
  }
}
@media (max-width: 900px) { .a4 { --invoice-scale: 0.5; } }
@media (max-width: 700px) { .a4 { --invoice-scale: 0.4; } }
@media (max-width: 500px) { .a4 { --invoice-scale: 0.3; } }

/* ============================================================== */
/* Payment voucher (A4 794×559px, half-page, matches legacy)       */
/* ============================================================== */
.voucher-a4 {
  box-shadow: 0 1px 2px rgba(15, 23, 41, 0.04), 0 8px 24px rgba(15, 23, 41, 0.06);
  box-sizing: border-box;
}

/* Arabic / Kurdish (Sorani) text on the voucher uses IBM Plex Sans Arabic. */
.voucher-a4 .ku {
  font-family: 'IBM Plex Sans Arabic', 'Inter', sans-serif;
}

/* Responsive preview scaling for the voucher */
@media (max-width: 860px) {
  .voucher-a4 {
    transform: scale(var(--voucher-scale, 0.85));
    transform-origin: top center;
  }
}
@media (max-width: 700px) { .voucher-a4 { --voucher-scale: 0.6; } }
@media (max-width: 500px) { .voucher-a4 { --voucher-scale: 0.42; } }

@media print {
  .print-area .voucher-a4 {
    box-shadow: none !important;
    transform: none !important;
    margin: 0 auto !important;
    page-break-inside: avoid;
    break-inside: avoid;
  }
}