/* ============================================================
   INVOICE GENERATOR — editor panel, live preview, themes, print
   Uses the site's existing --heading / --gold tokens as the
   DEFAULT theme only. All invoice colors are driven by
   --inv-ink / --inv-dark / --inv-light / --inv-border custom
   properties set inline on #igInvoice by the theme engine in
   invoice-generator.js, so Print/PDF always matches the screen.
   ============================================================ */

#igInvoice {
  --inv-ink: var(--heading, #141c2e);
  --inv-dark: #0d1420;
  --inv-light: #f3f2ea;
  --inv-border: #e3ddc9;
  --inv-accent: var(--gold-deep, #a87f1b);
}

/* ---------- Toolbar ---------- */
.ig-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: #fff;
  border: 1px solid var(--border-soft, #e7eaf1);
  border-radius: var(--radius, 16px);
  padding: 1rem 1.25rem;
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(10, 15, 28, 0.08));
}
.ig-toolbar-left { display: flex; align-items: center; gap: 0.9rem; }
.ig-toolbar-left i { font-size: 1.5rem; color: var(--gold, #c9a227); }
.ig-toolbar-left strong { display: block; font-family: "Sora", sans-serif; color: var(--heading, #141c2e); }
.ig-toolbar-left span { display: block; font-size: 0.85rem; color: var(--text, #556070); }
.ig-toolbar-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-left: auto; justify-content: flex-end; }
@media (max-width: 575.98px) {
  .ig-toolbar-actions { width: 100%; justify-content: flex-end; margin-left: 0; }
}
.ig-toolbar-actions .btn { white-space: nowrap; }

.btn-outline-navy {
  border: 1.5px solid var(--heading, #141c2e);
  color: var(--heading, #141c2e);
  background: transparent;
  font-weight: 600;
  border-radius: 10px;
  padding: 0.5rem 1.1rem;
  transition: background .2s ease, color .2s ease;
}
.btn-outline-navy:hover { background: var(--heading, #141c2e); color: #fff; }
.btn-outline-navy.active { background: var(--heading, #141c2e); color: #fff; }

/* Preview-mode toggle only matters on small screens; hidden button on desktop */
#igPreviewBtn { display: none; }
@media (max-width: 991.98px) {
  #igPreviewBtn { display: inline-flex; align-items: center; }
}

/* ---------- Editor panel ---------- */
.ig-panel {
  background: #fff;
  border: 1px solid var(--border-soft, #e7eaf1);
  border-radius: var(--radius, 16px);
  box-shadow: var(--shadow-soft, 0 10px 30px rgba(10,15,28,.08));
  max-height: calc(100vh - 160px);
  overflow-y: auto;
  position: sticky;
  top: 90px;
}
.ig-panel .accordion-button { font-family: "Sora", sans-serif; font-weight: 700; font-size: 0.95rem; color: var(--heading, #141c2e); }
.ig-panel .accordion-button:not(.collapsed) { background: #fdf9ee; color: var(--gold-deep, #a87f1b); box-shadow: none; }
.ig-panel .accordion-button:focus { box-shadow: none; border-color: var(--border-soft, #e7eaf1); }
.ig-panel .form-label { font-size: 0.82rem; font-weight: 600; color: var(--heading, #141c2e); margin-bottom: 0.3rem; }
.ig-subhead { font-family: "Sora", sans-serif; font-weight: 700; font-size: 0.85rem; color: var(--gold-deep, #a87f1b); text-transform: none; margin-bottom: 0.6rem; }
.ig-hint { font-size: 0.78rem; color: var(--text, #556070); margin: 0.4rem 0 0; }

.ig-logo-row { display: flex; align-items: center; gap: 1rem; }
.ig-logo-preview {
  width: 64px; height: 64px; border-radius: 10px;
  background: var(--bg-light, #f7f8fb);
  border: 1px dashed var(--border-soft, #e7eaf1);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex-shrink: 0;
}
.ig-logo-preview img { width: 100%; height: 100%; object-fit: contain; }
.ig-logo-preview i { color: #b7bfcc; font-size: 1.4rem; }

/* ---------- Theme picker ---------- */
.ig-theme-grid { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 0.9rem; }
.ig-theme-swatch {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  position: relative;
  box-shadow: 0 2px 6px rgba(10,15,28,.15);
  transition: transform .15s ease, border-color .15s ease;
}
.ig-theme-swatch:hover { transform: scale(1.08); }
.ig-theme-swatch.active { border-color: var(--heading, #141c2e); }
.ig-theme-swatch.active::after {
  content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #fff; font-size: 0.8rem; text-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.ig-theme-custom-row { display: flex; align-items: center; gap: 0.7rem; }
.ig-theme-custom-row input[type="color"] {
  width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--border-soft, #e7eaf1);
  padding: 0; cursor: pointer; overflow: hidden;
}
.ig-theme-custom-row input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.ig-theme-custom-row input[type="color"]::-webkit-color-swatch { border: none; border-radius: 50%; }
.ig-theme-reset-link { font-size: 0.8rem; color: var(--text, #556070); background: none; border: none; text-decoration: underline; padding: 0; cursor: pointer; }

/* Line item editor rows (inside the accordion, not the invoice itself) */
.ig-item-row {
  border: 1px solid var(--border-soft, #e7eaf1);
  border-radius: 10px;
  padding: 0.75rem;
  margin-bottom: 0.6rem;
  background: var(--bg-light, #f7f8fb);
}
.ig-item-row .row { row-gap: 0.5rem; }
.ig-item-row-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.4rem; }
.ig-item-row-top span { font-size: 0.78rem; font-weight: 700; color: var(--text, #556070); }
.ig-item-remove { background: none; border: none; color: #c0392b; font-size: 0.9rem; cursor: pointer; padding: 0 0.25rem; }
.ig-item-remove:hover { color: #922b21; }
.ig-item-vat-toggle { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text, #556070); margin-top: 0.3rem; }

/* ---------- Live preview wrapper (screen only) ---------- */
.ig-preview-wrap {
  background: #dfe3ea;
  border-radius: var(--radius, 16px);
  padding: 1.5rem;
  display: flex;
  justify-content: center;
}

/* ============================================================
   THE INVOICE ITSELF — same markup used on screen and in print
   ============================================================ */
.ig-invoice {
  background: #fff;
  width: 100%;
  max-width: 800px;
  padding: 2.5rem 2.75rem;
  box-shadow: 0 20px 45px rgba(10,15,28,.18);
  font-family: "Inter", sans-serif;
  color: var(--inv-ink);
  font-size: 0.92rem;
  line-height: 1.5;
}
.ig-invoice h1, .ig-invoice h2, .ig-invoice h3, .ig-invoice h4 { font-family: "Sora", sans-serif; }

.ig-inv-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; padding-bottom: 1.25rem; border-bottom: 2px solid var(--inv-ink); }
.ig-inv-brand { display: flex; align-items: center; gap: 0.9rem; }
.ig-inv-logo { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; flex-shrink: 0; }
.ig-inv-logo-fallback {
  width: 56px; height: 56px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--inv-ink), var(--inv-dark));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-family: "Sora", sans-serif; font-weight: 800; font-size: 1.4rem;
}
.ig-inv-company-name { font-size: 1.35rem; font-weight: 800; margin: 0; letter-spacing: -0.01em; color: var(--inv-ink); }
.ig-inv-company-tagline { font-size: 0.8rem; color: var(--text, #556070); margin: 0.1rem 0 0; }
.ig-inv-contact { text-align: right; font-size: 0.82rem; color: var(--text, #556070); }
.ig-inv-contact div { margin-bottom: 0.15rem; white-space: nowrap; }
.ig-inv-contact i { width: 16px; color: var(--inv-accent); margin-right: 0.4rem; }

.ig-inv-titlebar { padding: 1.25rem 0 1.5rem; }
.ig-inv-title { font-size: 1.85rem; font-weight: 800; margin: 0; letter-spacing: -0.02em; color: var(--inv-ink); }
.ig-inv-title-sub { font-size: 0.85rem; color: var(--text, #556070); margin: 0.2rem 0 0; }
.ig-inv-meta { text-align: left; margin-top: 0.9rem; }
.ig-inv-meta-row { display: flex; justify-content: flex-start; gap: 0.6rem; font-size: 0.85rem; margin-bottom: 0.2rem; }
.ig-inv-meta-row .lbl { font-weight: 700; color: var(--text, #556070); min-width: 90px; text-align: left; }
.ig-status-pill {
  display: inline-block; margin-top: 0.4rem; padding: 0.3rem 0.9rem; border-radius: 50px;
  font-size: 0.78rem; font-weight: 700;
}
.ig-status-Unpaid { background: #fde3e3; color: #b23b3b; }
.ig-status-Paid { background: #dff3e6; color: #237a44; }
.ig-status-PartiallyPaid { background: #fdf1d8; color: #9a6b0c; }
.ig-status-Overdue { background: #2a0e0e; color: #ffb4b4; }

.ig-inv-parties { display: flex; gap: 2.5rem; padding: 1.25rem 0; border-top: 1px solid var(--inv-border); border-bottom: 1px solid var(--inv-border); }
.ig-inv-party { flex: 1; min-width: 0; }
.ig-inv-party h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: .04em; color: var(--inv-accent); margin: 0 0 0.5rem; }
.ig-inv-party .name { font-weight: 700; margin-bottom: 0.2rem; color: var(--inv-ink); }
.ig-inv-party .line { color: var(--text, #556070); font-size: 0.85rem; }
.ig-inv-party .line strong { color: var(--inv-ink); }

.ig-inv-table { width: 100%; border-collapse: collapse; margin-top: 1.5rem; font-size: 0.85rem; }
.ig-inv-table thead th {
  background: var(--inv-ink); color: #fff; text-align: left;
  padding: 0.65rem 0.75rem; font-weight: 600; font-size: 0.78rem;
}
.ig-inv-table thead th.num, .ig-inv-table tbody td.num { text-align: right; }
.ig-inv-table thead th.center, .ig-inv-table tbody td.center { text-align: center; }
.ig-inv-table tbody td { padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--inv-border); vertical-align: top; }
.ig-inv-table tbody tr:nth-child(even) { background: var(--inv-light); }
.ig-item-desc { font-weight: 600; color: var(--inv-ink); }
.ig-item-subdesc { display: block; color: var(--text, #556070); font-size: 0.78rem; margin-top: 0.1rem; }
.ig-tax-exempt-tag { font-size: 0.7rem; color: var(--inv-accent); }

.ig-inv-bottom { display: flex; justify-content: flex-end; margin-top: 1.25rem; }
.ig-totals { width: 280px; }
.ig-totals-row { display: flex; justify-content: space-between; padding: 0.45rem 0.1rem; font-size: 0.88rem; }
.ig-totals-row.discount { color: var(--inv-accent); }
.ig-totals-row.grand {
  background: var(--inv-ink); color: #fff; border-radius: 10px;
  padding: 0.75rem 0.9rem; margin-top: 0.4rem; font-weight: 800; font-size: 1rem;
}

.ig-inv-lower { display: flex; gap: 2.5rem; margin-top: 1.75rem; }
.ig-inv-lower > div { flex: 1; min-width: 0; }
.ig-inv-lower h4 { font-size: 0.85rem; margin: 0 0 0.6rem; display: flex; align-items: center; gap: 0.5rem; color: var(--inv-ink); }
.ig-inv-lower h4 i { color: var(--inv-accent); }
.ig-payment-row { display: flex; font-size: 0.83rem; margin-bottom: 0.25rem; }
.ig-payment-row .k { width: 110px; color: var(--text, #556070); }
.ig-inv-lower ol { margin: 0; padding-left: 1.1rem; font-size: 0.8rem; color: var(--text, #556070); }
.ig-inv-lower ol li { margin-bottom: 0.3rem; }

.ig-inv-notes { margin-top: 1.5rem; font-size: 0.83rem; color: var(--text, #556070); background: var(--inv-light); border-radius: 10px; padding: 0.9rem 1rem; }
.ig-inv-notes strong { color: var(--inv-ink); }

.ig-inv-thankyou { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.75rem; }
.ig-inv-thankyou i { font-size: 1.4rem; color: var(--inv-accent); }
.ig-inv-thankyou .msg { font-family: "Sora", sans-serif; font-weight: 700; font-size: 1.05rem; color: var(--inv-ink); }
.ig-inv-thankyou .sub { font-size: 0.8rem; color: var(--text, #556070); }

.ig-inv-footer { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid var(--inv-border); text-align: center; font-size: 0.78rem; color: var(--text, #556070); }

/* ---------- Mobile preview/edit modes ---------- */
@media (max-width: 991.98px) {
  .ig-panel { position: static; max-height: none; }
  .ig-inv-header, .ig-inv-parties, .ig-inv-lower { flex-direction: column; gap: 1rem; }
  .ig-inv-contact { text-align: left; }

  /* Default to Edit mode on mobile; JS toggles .ig-mode-preview on <body> */
  .col-lg-7.ig-preview-col { display: none; }
  body.ig-mode-preview .col-lg-5.ig-editor-col { display: none; }
  body.ig-mode-preview .col-lg-7.ig-preview-col { display: block; }
}

/* ============================================================
   PRINT — clean A4 output, invoice only, proper multi-page flow
   ------------------------------------------------------------
   IMPORTANT: this deliberately does NOT use the common
   "visibility:hidden + position:absolute" trick. That approach
   pulls the invoice out of normal document flow, and browsers
   do not reliably paginate absolutely-positioned content across
   multiple physical pages — that was the root cause of cut-off
   and blank-page bugs. Instead, everything except the invoice
   is display:none'd (removed from flow entirely) and the
   invoice's own ancestors are forced back to normal block flow
   (overriding Bootstrap's flexbox grid, which has the same
   pagination problem as absolute positioning).
   ============================================================ */
/* ============================================================
   PRINT MODE (JS-toggled class) — redundant, non-media-query
   ------------------------------------------------------------
   Mirrors the @media print rules below almost exactly, but is
   applied via a plain "ig-print-mode" class added to <body> by
   invoice-generator.js right before window.print() is called.
   This exists because some mobile browsers' "Save as PDF" /
   share-sheet print paths do not fully honor @media print for
   complex flex/grid layouts — a normal class-based rule goes
   through the ordinary CSS cascade instead, which every browser
   applies consistently regardless of how it handles the print
   pipeline itself. Both layers stay in sync; if you change one,
   change the other.
   ============================================================ */
body.ig-print-mode {
  background: #fff !important;
}
body.ig-print-mode #mainNav,
body.ig-print-mode .service-jumpnav,
body.ig-print-mode .breadcrumb-bar,
body.ig-print-mode .page-hero,
body.ig-print-mode .whatsapp-float,
body.ig-print-mode footer.site-footer,
body.ig-print-mode .cf-result-modal,
body.ig-print-mode .ig-toolbar {
  display: none !important;
}
body.ig-print-mode main > section:not(#igToolSection) { display: none !important; }
body.ig-print-mode #igToolSection { padding: 0 !important; margin: 0 !important; }
body.ig-print-mode #igToolSection .container-fluid,
body.ig-print-mode #igToolSection .row {
  display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important;
}
body.ig-print-mode .col-lg-5.ig-editor-col { display: none !important; }
body.ig-print-mode .col-lg-7.ig-preview-col {
  display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 !important;
}
body.ig-print-mode .ig-preview-wrap { background: none !important; padding: 0 !important; display: block !important; }
body.ig-print-mode .ig-invoice {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  /* No padding here — @page's 12mm margin (in the @media print block
     below) already provides the page inset during an actual print.
     Adding padding here too was stacking on top of it (24mm instead
     of 12mm), which was exactly enough extra height to push a short
     invoice onto an unwanted second page. */
  padding: 0 !important;
  box-shadow: none !important;
  font-size: 9.5pt;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
body.ig-print-mode .ig-inv-table thead { display: table-header-group; }
body.ig-print-mode .ig-inv-table tbody { display: table-row-group; }
body.ig-print-mode .ig-inv-table tr { break-inside: avoid; page-break-inside: avoid; }
body.ig-print-mode .ig-inv-header,
body.ig-print-mode .ig-inv-titlebar,
body.ig-print-mode .ig-inv-parties,
body.ig-print-mode .ig-inv-bottom,
body.ig-print-mode .ig-inv-lower,
body.ig-print-mode .ig-inv-thankyou,
body.ig-print-mode .ig-inv-notes {
  break-inside: avoid; page-break-inside: avoid;
}
body.ig-print-mode .ig-inv-titlebar { break-after: avoid; page-break-after: avoid; }
body.ig-print-mode .ig-invoice { line-height: 1.35; }
body.ig-print-mode .ig-inv-header { padding-bottom: 0.85rem; }
body.ig-print-mode .ig-inv-titlebar { padding: 0.85rem 0 1rem; }
body.ig-print-mode .ig-inv-parties { padding: 0.85rem 0; }
body.ig-print-mode .ig-inv-table { margin-top: 1rem; }
body.ig-print-mode .ig-inv-table thead th,
body.ig-print-mode .ig-inv-table tbody td { padding: 0.4rem 0.6rem; }
body.ig-print-mode .ig-inv-bottom { margin-top: 0.75rem; }
body.ig-print-mode .ig-inv-lower { margin-top: 1rem; gap: 1.75rem; }
body.ig-print-mode .ig-inv-notes { margin-top: 0.9rem; padding: 0.6rem 0.8rem; }
body.ig-print-mode .ig-inv-thankyou { margin-top: 1rem; }
body.ig-print-mode .ig-inv-footer { margin-top: 1.25rem; padding-top: 0.6rem; }

@media print {
  @page { size: A4 portrait; margin: 12mm; }

  html, body { background: #fff !important; }

  /* Hide all site chrome */
  #mainNav, .service-jumpnav, .breadcrumb-bar, .page-hero,
  .whatsapp-float, footer.site-footer, .cf-result-modal,
  .ig-toolbar { display: none !important; }

  /* Hide every other section on this page except the tool itself */
  main > section:not(#igToolSection) { display: none !important; }

  /* Inside the tool section: hide the editor column, unwrap the grid */
  #igToolSection { padding: 0 !important; margin: 0 !important; }
  #igToolSection .container-fluid,
  #igToolSection .row { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; }
  .col-lg-5.ig-editor-col { display: none !important; }
  .col-lg-7.ig-preview-col { display: block !important; width: 100% !important; max-width: 100% !important; padding: 0 !important; }
  .ig-preview-wrap { background: none !important; padding: 0 !important; display: block !important; }

  .ig-invoice {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    box-shadow: none !important;
    font-size: 9.5pt;
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* Repeat the table header on every printed page, and never split a row */
  .ig-inv-table thead { display: table-header-group; }
  .ig-inv-table tbody { display: table-row-group; }
  .ig-inv-table tr { break-inside: avoid; page-break-inside: avoid; }

  /* Keep these blocks intact rather than splitting mid-block */
  .ig-inv-header, .ig-inv-titlebar, .ig-inv-parties,
  .ig-inv-bottom, .ig-inv-lower, .ig-inv-thankyou, .ig-inv-notes {
    break-inside: avoid; page-break-inside: avoid;
  }
  .ig-inv-titlebar { break-after: avoid; page-break-after: avoid; }

  .ig-status-pill, .ig-totals-row.grand, .ig-inv-table thead th {
    -webkit-print-color-adjust: exact; print-color-adjust: exact;
  }

  /* Tighter vertical spacing than the on-screen preview — the browser's
     own optional print header/footer (date/URL/page number, enabled by
     default in most browsers' print dialogs) eats extra page height
     that this stylesheet has no way to detect or reclaim, so printed
     content is kept more compact than the screen preview as a safety
     margin against that eating into a genuinely one-page invoice. */
  .ig-invoice { line-height: 1.35; }
  .ig-inv-header { padding-bottom: 0.85rem; }
  .ig-inv-titlebar { padding: 0.85rem 0 1rem; }
  .ig-inv-parties { padding: 0.85rem 0; }
  .ig-inv-table { margin-top: 1rem; }
  .ig-inv-table thead th, .ig-inv-table tbody td { padding: 0.4rem 0.6rem; }
  .ig-inv-bottom { margin-top: 0.75rem; }
  .ig-inv-lower { margin-top: 1rem; gap: 1.75rem; }
  .ig-inv-notes { margin-top: 0.9rem; padding: 0.6rem 0.8rem; }
  .ig-inv-thankyou { margin-top: 1rem; }
  .ig-inv-footer { margin-top: 1.25rem; padding-top: 0.6rem; }
}