/*
 * Pixel-perfect invoice (replicates reference Tailwind class output).
 *
 * Reference page is `w-[210mm] bg-white p-[12.7mm] h-[297mm]`.
 * All values below mirror the reference Tailwind utilities so the
 * compiled output is the same regardless of Tailwind CDN being loaded.
 */

.a4 {
  position: relative;
  width: 210mm;
  height: 297mm;
  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);
}

/* 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; }

/* ============================================================== */
/* 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; /* Tailwind leading-3 = 12px */
  color: #000;
}
.a4 .author-address {
  font-size: 10pt;
  margin: 0; padding: 0;
  color: #000;
  line-height: 1.4;
}
.a4 .pills {
  display: flex;
  gap: 8px; /* Tailwind gap-2 */
  padding-top: 7mm;
  align-items: center;
}
.a4 .pill-outline {
  padding: 1.5mm 4mm 1mm; /* matches px-[4mm] pt-[1.5mm] pb-[1mm] */
  border: 1px 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: 1pt solid #35C2DA;
  padding-top: 2.5mm;
  padding-bottom: 2mm;
  margin-top: 64px; /* Tailwind mt-16 = 4rem = 64px */
}
.a4-items-header p {
  text-transform: uppercase;
  color: #35C2DA;
  font-weight: 500;
  font-size: 10pt;
  margin: 0; padding: 0;
  line-height: 1.4;
}

/* ============================================================== */
/* Item rows                                                       */
/* ============================================================== */
.a4-line {
  width: 100%;
  height: 0.25pt;
  background: #000;
  display: block;
  margin: 0;
}
.a4-item-row {
  width: 100%;
  padding-top: 2.5mm;
  padding-bottom: 2mm;
}
.a4-item-row p {
  margin: 0; padding: 0;
  font-size: 10pt;
  color: #000;
  word-break: break-word;
  line-height: 1.4;
  font-weight: 400;
}
.a4-item-row .col-span-1,
.a4-item-row .col-span-2 { text-transform: uppercase; }
.a4-item-row .desc { padding-right: 8px; }

/* ============================================================== */
/* Totals                                                          */
/* ============================================================== */
.a4-totals { width: 100%; }
.a4-totals .label-col {
  border-top: 1pt solid #35C2DA;
  padding-top: 16px;
  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: 1.25pt solid #35C2DA;
  padding-top: 16px;
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 0;
}
.a4-totals p {
  font-size: 10pt;
  margin: 0; padding: 0;
  text-transform: uppercase;
  font-weight: 500;
  line-height: 1.5;
}
.a4-totals .brand-text { color: #35C2DA; }

/* ============================================================== */
/* Bottom (bank + footer)                                          */
/* ============================================================== */
.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; /* Tailwind my-10 */
}
.a4 .bank-card .badge {
  border: 1.25pt solid #35C2DA;
  color: #35C2DA;
  border-radius: 999px;
  font-size: 10pt;
  font-weight: 500;
  text-transform: uppercase;
  padding: 2.5mm 4mm 2mm;
  margin: 16px 0; /* Tailwind my-4 */
  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; /* Tailwind gap-8 */
  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: 600; 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; } /* Tailwind ps-3 */
.a4-footer .right {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px; /* Tailwind gap-2 */
}
.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 0.5mm;
  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-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 {
  body * { visibility: hidden; }
  .print-area, .print-area * { visibility: visible; }
  .print-area { position: absolute; left: 0; top: 0; width: 100%; }
  .a4 {
    box-shadow: none !important;
    margin: 0 !important;
    transform: none !important;
    page-break-after: always;
  }
  .a4:last-child { page-break-after: auto; }
  @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(-297mm * (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; } }