/* ============================================================
   invoice.css — Invoice Appearance
   Replaces ALL Tailwind utility classes from preview.html
   with local CSS. No external dependencies.
   ============================================================ */

/* --- Page & Base --- */
@page {
  size: A4 portrait;
  margin: 8mm;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f3f4f6;
  color: #000;
  padding-bottom: 40px; /* Space at the bottom */
}

/* --- Invoice Container --- */
.invoice {
  width: 100%;
  max-width: 780px; /* ~210mm */
  margin: 20px auto;
  background: #fff;
  border: 1px solid #d1d5db;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  min-height: 260mm;
  box-sizing: border-box;
}

/* --- Tables (global) --- */
table {
  border-collapse: collapse;
  width: 100%;
}

th, td {
  border: 1px solid #333;
}

/* --- Font Size Classes (matching preview) --- */
.tiny  { font-size: 8px; }
.small { font-size: 9px; }
.xs    { font-size: 10px; }

/* --- Company Header --- */
.header {
  border-bottom: 1px solid #374151;
  text-align: center;
}

.company-name {
  padding: 4px 0;
  font-size: 25px;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: #2563eb;
}

.company-address {
  font-size: 11px;
  font-weight: 700;
}

.company-email {
  font-size: 10px;
  font-weight: 700;
}

.company-gstin {
  padding: 4px 0;
  font-size: 9px;
  font-weight: 700;
}

/* --- Invoice Title --- */
.invoice-title {
  font-size: 15px;
  font-weight: 700;
}

/* --- Blue Header Bar --- */
.blue {
  background: #4a86e8;
  color: white;
}

/* --- Text Alignment --- */
.text-center  { text-align: center; }
.text-left    { text-align: left; }
.text-right   { text-align: right; }

/* --- Vertical Alignment --- */
.align-top    { vertical-align: top; }
.align-middle { vertical-align: middle; }
.align-bottom { vertical-align: bottom; }

/* --- Font Weight --- */
.bold      { font-weight: 700; }
.extrabold { font-weight: 800; }

/* --- Font Style --- */
.italic    { font-style: italic; }
.font-serif { font-family: Georgia, 'Times New Roman', Times, serif; }

/* --- Text Decoration --- */
.underline  { text-decoration: underline; }
.uppercase  { text-transform: uppercase; }

/* --- Letter / Line Spacing --- */
.tracking-wide { letter-spacing: 0.05em; }
.leading-5     { line-height: 20px; }

/* --- Spacing (Padding) --- */
.p-0  { padding: 0; }
.p-1  { padding: 4px; }
.px-2 { padding-left: 8px; padding-right: 8px; }
.py-1 { padding-top: 4px; padding-bottom: 4px; }

/* --- Spacing (Margin) --- */
.mt-2 { margin-top: 8px; }
.mt-3 { margin-top: 12px; }

/* --- Widths --- */
.w-half { width: 50%; }
.w-65   { width: 65%; }

/* --- Borders (individual sides) --- */
.border-t { border-top: 1px solid #333; }
.border-r { border-right: 1px solid #333; }
.border-b { border-bottom: 1px solid #374151; }

/* --- Flexbox Utilities --- */
.flex-col {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.flex-between {
  display: flex;
  justify-content: space-between;
}

/* --- Bank Details Grid --- */
.bank-grid {
  display: grid;
  grid-template-columns: 80px 1fr;
}

/* --- Item Table Column Widths --- */
.col-sno      { width: 3%; }
.col-name     { width: 14%; }
.col-hsn      { width: 7%; }
.col-pcs      { width: 6%; }
.col-qty      { width: 9%; }
.col-rate     { width: 7%; }
.col-amount   { width: 10%; }
.col-discount { width: 7%; }
.col-taxable  { width: 9%; }
.col-total    { width: 9%; }
.col-actions  { width: 30px; }

/* --- Signature Section --- */
.sig-section {
  height: 120px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.sig-company-name {
  font-size: 17px;
  font-weight: 700;
  color: #4338ca;
}

.sig-mark {
  font-size: 20px;
  font-family: Georgia, 'Times New Roman', Times, serif;
  font-style: italic;
  color: #4338ca;
}

.sig-label {
  font-size: 10px;
}

#sigStampImage {
  max-width: 300px;
  max-height: 100px;
  object-fit: contain;
  margin: -15px auto 0 auto;
}