/* ============================================================
   INVOICE TEMPLATE  —  invoice-template.css
   Millenium Options Invoice & Income Tracker
   ============================================================ */


/* ── PREVIEW SCROLL WRAPPER ───────────────────────────────────── */
/* Portrait A4 proportions on screen; scrollable on narrow phones */
.inv-preview-wrap {
  overflow-x:  auto;
  overflow-y:  visible;
  -webkit-overflow-scrolling: touch;
  background:  #e0e0e0;             /* grey surround like a print preview */
  padding:     10px;
  border-radius: 4px;
}


/* ── 1. OUTER WRAPPER ─────────────────────────────────────────── */
.inv-preview {
  background:  #ffffff;
  border:      1px solid #bbb;
  box-shadow:  0 2px 8px rgba(0,0,0,0.18);
  padding:     20px 22px;
  font-family: Arial, Helvetica, sans-serif;
  font-size:   10px;
  color:       #000;
  line-height: 1.35;
  width:       560px;               /* portrait A4 width on screen */
  min-height:  792px;               /* portrait A4 height (560 * 1.414) */
  box-sizing:  border-box;
  display:     flex;
  flex-direction: column;
}


/* ── 2. HEADER ────────────────────────────────────────────────── */
.inv-header-grid {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  margin-bottom:   14px;
  border-bottom:   none;
  padding-bottom:  0;
}

.inv-header-left {
  flex:      0 0 auto;
  max-width: 45%;
}

.inv-header-left img {
  max-height: 46px;
  max-width:  140px;
  object-fit: contain;
}

.inv-header-right {
  text-align: right;
}

/* Company name box — Impact font, bordered, date inside */
.inv-company-impact {
  display:    inline-block;
  border:     1.5px solid #000;
  padding:    6px 14px;
  line-height:1.3;
  text-align: center;
}

.inv-company-name {
  font-family:    Impact, 'Arial Narrow', Arial, sans-serif;
  font-size:      17px;
  font-weight:    400;
  color:          #000;
  letter-spacing: 0.3px;
  display:        block;
}

.inv-company-date {
  font-family: Arial, Helvetica, sans-serif;
  font-size:   9px;
  font-weight: 400;
  color:       #333;
  display:     block;
  margin-top:  2px;
}

#previewAddress {
  font-size:  9px;
  color:      #444;
  margin-top: 3px;
}


/* ── 3. INVOICE TITLE & NUMBER ───────────────────────────────── */
.inv-center-block {
  text-align:  center;
  margin:      0 0 10px;
  font-family: Arial, Helvetica, sans-serif;
}

.inv-title-big {
  font-family:    Arial, Helvetica, sans-serif;
  font-size:      11px;
  font-weight:    bold;
  letter-spacing: 0;
  color:          #000;
  text-transform: uppercase;
  margin-bottom:  4px;
}

.inv-num-center {
  display:     block;
  font-family: Arial, Helvetica, sans-serif;
  font-size:   11px;
  font-weight: bold;
  color:       #000;
  background:  transparent;
  border:      none;
  padding:     0;
  margin-top:  0;
}


/* ── 4. BILL-TO / CUSTOMER BLOCK ────────────────────────────── */
.inv-bill-to {
  margin-bottom: 10px;
  font-size:     10px;
  line-height:   1.6;
  display:       block;             /* visible — no "Bill To:" label */
}

.inv-bill-to .cust-name {
  font-weight: 700;
  font-size:   10px;
  display:     block;
}

.inv-bill-to .cust-branch {
  color:      #333;
  font-style: italic;
  display:    block;
}

.inv-bill-to .cust-addr    { display: block; color: #444; }
.inv-bill-to .cust-contact { display: block; color: #444; }


/* ── 5. LINE-ITEMS TABLE ─────────────────────────────────────── */
.prev-table {
  width:           100%;
  border-collapse: collapse;
  font-family:     Arial, Helvetica, sans-serif;
  font-size:       9.5px;
  margin-top:      0;
  table-layout:    fixed;           /* ← respect column widths strictly */
}

/* Header row */
.prev-table thead th {
  font-family:  Arial, Helvetica, sans-serif;
  background:   #A6A6A6;
  color:        #000;
  font-weight:  400;
  padding:      5px 4px;
  text-align:   center;
  border:       1px solid #000;
  font-size:    9.5px;
  word-break:   break-word;
  line-height:  1.25;
}

/* Column widths — fixed, summing to 100% */
.prev-table thead th:nth-child(1) { width: 16%; } /* Date of Supply      */
.prev-table thead th:nth-child(2) { width: 26%; } /* Item Name           */
.prev-table thead th:nth-child(3) { width:  9%; } /* UOM                 */
.prev-table thead th:nth-child(4) { width:  8%; } /* Qty                 */
.prev-table thead th:nth-child(5) { width: 17%; } /* Unit Price / (BWP)  */
.prev-table thead th:nth-child(6) { width: 24%; } /* Amount in BWP       */

/* Body cells */
.prev-table tbody td {
  font-family:  Arial, Helvetica, sans-serif;
  padding:      3px 4px;
  border:       1px solid #000;
  vertical-align: middle;
  background:   #fff;
  height:       18px;
  overflow:     hidden;
  text-overflow:ellipsis;
  white-space:  nowrap;
}

.prev-table tbody tr:nth-child(even) td { background: #fff; }


/* ── 6. TOTALS ROWS ──────────────────────────────────────────── */
.prev-table tfoot td {
  font-family: Arial, Helvetica, sans-serif;
  padding:     3px 4px;
  background:  #fff;
  border:      none;
  font-size:   9.5px;
  white-space: nowrap;
}

.prev-table tfoot td:nth-child(1) { border: none; background: #fff; }

/* Label cells */
.prev-table tfoot td:nth-child(2) {
  text-align:  left;
  font-weight: bold;
  font-size:   9.5px;
  color:       #000;
  background:  #d9d9d9;
  border:      1px solid #000;
  padding:     3px 6px;
  white-space: nowrap;
}

/* Amount cells */
.prev-table tfoot td:nth-child(3) {
  font-weight: bold;
  font-size:   9.5px;
  color:       #000;
  background:  #fff;
  border:      1px solid #000;
  text-align:  right;
  padding:     3px 4px;
  white-space: nowrap;
}

.prev-table tfoot tr:last-child td:nth-child(2),
.prev-table tfoot tr:last-child td:nth-child(3) {
  font-weight: bold;
  font-size:   9.5px;
}


/* ── 7. FOOTER / BANKING DETAILS ────────────────────────────── */
.inv-footer {
  font-family: 'Times New Roman', Times, serif;
  border-top:  none;
  margin-top:  auto;               /* pins footer to bottom of portrait page */
  padding-top: 14px;
  font-size:   9px;
  color:       #000;
}

/* Two-column banking grid */
.inv-footer-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0 6px;
  line-height:           1.75;
}

.inv-footer-grid .footer-col {
  font-family: 'Times New Roman', Times, serif;  /* 1: Times New Roman */
  font-size:   9px;
  min-width:   0;
}

/* Each row: label | colon | value */
.inv-footer-grid .footer-col > div {
  display:    flex;
  align-items:baseline;
}

/* Label — fixed width so all colons align */
.inv-footer-grid .footer-col span.flabel {
  font-family: 'Times New Roman', Times, serif;
  font-weight: bold;
  display:     inline-block;
  width:       78px;
  flex-shrink: 0;
}

/* Colon */
.inv-footer-grid .footer-col span.fcolon {
  font-family: 'Times New Roman', Times, serif;
  display:     inline-block;
  width:       10px;
  text-align:  center;
  flex-shrink: 0;
  font-weight: bold;
}

/* Value */
.inv-footer-grid .footer-col span.fval {
  font-family:   'Times New Roman', Times, serif;
  font-weight:   bold;
  min-width:     0;
  word-break:    break-all;
  overflow-wrap: break-word;
}

.inv-thank-you { display: none; }


/* ── 8. BOTTOM LOGO ──────────────────────────────────────────── */
.inv-bottom-logo {
  text-align:  left;
  margin-top:  14px;
  padding-top: 0;
}

.inv-bottom-logo img {
  max-height: 46px;
  max-width:  140px;
  object-fit: contain;
  opacity:    1;
}

.inv-bottom-logo .inv-bottom-logo-text {
  font-family: Arial, Helvetica, sans-serif;
  font-size:   11px;
  font-weight: bold;
  color:       #555;
  font-style:  italic;
}


/* ── 9. PRINT OVERRIDES ──────────────────────────────────────── */
@media print {

  @page {
    size:   A4 portrait;            /* 2: enforce portrait */
    margin: 12mm 14mm 12mm 14mm;
  }

  /* Hide app chrome */
  .nav-bar, .nav-item, .app-header,
  .btn, .del-btn, .form-group, .form-row,
  .section-header, .card-title,
  #page-invoice > *:not(.inv-preview-wrap),
  .inv-preview-wrap > *:not(.inv-preview) {
    display: none !important;
  }

  /* Reset wrapper — no grey surround, no scroll */
  .inv-preview-wrap {
    overflow:    visible !important;
    background:  none    !important;
    padding:     0       !important;
  }

  /* Full A4 width, no decorative border */
  .inv-preview {
    width:         100%    !important;
    min-height:    0       !important;
    border:        none    !important;
    border-radius: 0       !important;
    box-shadow:    none    !important;
    padding:       0       !important;
    margin:        0       !important;
    font-size:     10px    !important;
  }

  .prev-table thead { display: table-header-group; }

  .prev-table tfoot,
  .inv-footer,
  .inv-bottom-logo { page-break-inside: avoid; }

  .prev-table thead th,
  .prev-table tfoot td:nth-child(2) {
    -webkit-print-color-adjust: exact;
    print-color-adjust:         exact;
  }
}