/* ===================== INVOICE / A4 PAPER ===================== */
.invoice, .print-only { color: #1a1a1a; }
.inv-paper {
  --pad: 18mm;
  width: 210mm; min-height: 297mm; background: #fff; color: #1a1a1a;
  padding: var(--pad); box-shadow: 0 10px 40px rgba(0,0,0,.25);
  font: 11pt/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  display: flex; flex-direction: column;
}
.font-serif { font-family: Georgia, "Times New Roman", "Iowan Old Style", serif; }
.font-mono  { font-family: "SFMono-Regular", "DejaVu Sans Mono", "Courier New", monospace; }

.inv-paper * { box-sizing: border-box; }
.inv-r { text-align: right; }
.inv-muted { color: #6b7280; }
.inv-strong { font-weight: 700; }
.inv-label { font-size: 8.5pt; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 4px; }

/* ---------- Header (base = classic) ---------- */
.inv-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.inv-brand { display: flex; align-items: center; gap: 14px; }
.inv-logo { max-height: 64px; max-width: 220px; object-fit: contain; }
.inv-co-name { font-size: 16pt; font-weight: 800; line-height: 1.1; }
.inv-co-tag { color: #6b7280; font-size: 9.5pt; }
.inv-title { text-align: right; }
.inv-title-word { font-size: 24pt; font-weight: 800; letter-spacing: .04em; color: var(--accent); line-height: 1; }
.inv-number { color: #6b7280; font-size: 10pt; margin-top: 4px; }

/* ---------- Parties ---------- */
.inv-parties { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.inv-parties > div { font-size: 9.5pt; }
.inv-parties .inv-strong { font-size: 10.5pt; margin-bottom: 2px; }
.inv-dates > div { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-bottom: 1px dotted #e5e7eb; }
.inv-dates span { color: #6b7280; }

/* ---------- Rows table ---------- */
.inv-rows { width: 100%; border-collapse: collapse; margin-bottom: 18px; font-size: 9.8pt; }
.inv-rows thead th { text-align: left; padding: 9px 10px; background: var(--accent); color: #fff; font-size: 8.5pt;
  letter-spacing: .04em; text-transform: uppercase; }
.inv-rows thead th.inv-r { text-align: right; }
.inv-rows tbody td { padding: 9px 10px; border-bottom: 1px solid #eceef1; vertical-align: top; }
.inv-desc { width: 46%; }

/* table variants */
.tbl-zebra   .inv-rows tbody tr:nth-child(even) td { background: var(--accent2); }
.tbl-bordered .inv-rows td, .tbl-bordered .inv-rows th { border: 1px solid #d8dce2; }
.tbl-minimal .inv-rows thead th { background: transparent; color: var(--accent); border-bottom: 2px solid var(--accent); }
.tbl-minimal .inv-rows tbody td { border-bottom: 1px solid #eef0f3; }

/* ---------- Bottom: payment + totals ---------- */
.inv-bottom { display: flex; justify-content: space-between; gap: 24px; margin-top: auto; padding-top: 6px; }
.inv-pay { font-size: 9.3pt; max-width: 55%; }
.inv-pay > div { display: flex; gap: 10px; padding: 2px 0; }
.inv-pay span { color: #6b7280; min-width: 78px; display: inline-block; }
.inv-totals { min-width: 240px; }
.inv-trow { display: flex; justify-content: space-between; padding: 5px 0; font-size: 10pt; border-bottom: 1px solid #eceef1; }
.inv-grand { border-top: 2px solid var(--accent); border-bottom: none; margin-top: 4px; padding-top: 9px;
  font-size: 13pt; font-weight: 800; color: var(--accent); }
.inv-due { text-align: right; color: #6b7280; font-size: 8.8pt; margin-top: 4px; }

.inv-swish { display: flex; gap: 12px; align-items: center; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid #eceef1; }
.inv-swish img { width: 96px; height: 96px; flex: none; }
.inv-swish-info { font-size: 8.8pt; }
.inv-swish-info .inv-label { color: var(--accent); }
.inv-swish-info b { display: inline-block; min-width: 0; }
.inv-swish-info > div { padding: 1px 0; }
.inv-swish-lock { color: #6b7280; font-size: 8pt; margin-top: 3px; }

.inv-notes { margin-top: 22px; padding: 12px 14px; background: var(--accent2); border-radius: 6px; font-size: 9.3pt; }
.inv-foot { margin-top: 16px; padding-top: 12px; border-top: 1px solid #e5e7eb; text-align: center;
  color: #8a93a2; font-size: 8.5pt; }

/* ===================== HEADER STYLE VARIANTS ===================== */
/* banner: full-width colored block */
.hd-banner .inv-header { background: var(--accent); color: #fff; margin: calc(var(--pad) * -1) calc(var(--pad) * -1) 24px;
  padding: 22px var(--pad); align-items: center; }
.hd-banner .inv-co-name, .hd-banner .inv-title-word { color: #fff; }
.hd-banner .inv-co-tag, .hd-banner .inv-number { color: rgba(255,255,255,.85); }
.hd-banner .inv-logo { background: #fff; padding: 4px; border-radius: 6px; }

/* centered */
.hd-centered .inv-header { flex-direction: column; align-items: center; text-align: center; gap: 10px; }
.hd-centered .inv-brand { flex-direction: column; gap: 8px; }
.hd-centered .inv-title { text-align: center; }
.hd-centered .inv-title-word { letter-spacing: .25em; }

/* minimal */
.hd-minimal .inv-title-word { font-size: 13pt; font-weight: 600; color: #1a1a1a; letter-spacing: .3em; }
.hd-minimal .inv-co-name { font-size: 14pt; font-weight: 600; }
.hd-minimal .inv-rows thead th { background: transparent; color: #6b7280; border-bottom: 1px solid #1a1a1a; }
.hd-minimal .inv-label { color: #6b7280; }

/* stripe: thick accent bar on top */
.hd-stripe { border-top: 7px solid var(--accent); }

/* split: two-tone diagonal-ish block behind title */
.hd-split .inv-header { align-items: stretch; }
.hd-split .inv-title { background: var(--accent); color: #fff; padding: 14px 20px; border-radius: 6px; }
.hd-split .inv-title-word, .hd-split .inv-number { color: #fff; }

/* sidebar: accent-tinted "from" block */
.hd-sidebar .inv-header { border-left: 6px solid var(--accent); padding-left: 14px; }
.hd-sidebar .inv-from { background: var(--accent2); padding: 12px; border-radius: 6px; }

/* ===================== SCREEN PREVIEW ===================== */
.preview .inv-paper { box-shadow: 0 10px 40px rgba(0,0,0,.25); }

/* ===================== PRINT ===================== */
@page { size: A4; margin: 0; }
@media print {
  .print-only .inv-paper { width: 210mm; min-height: 296mm; box-shadow: none; margin: 0; }
  .inv-paper { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .inv-rows { page-break-inside: auto; }
  .inv-rows tr { page-break-inside: avoid; }
  .inv-bottom, .inv-notes { page-break-inside: avoid; }
}