/* Invoice PDF. One layout; each template changes fonts, color and shape. The
   colors and fonts match the quote templates in quoteDoc.css. */
.invoice-doc {
  --q-a: #5b5bd6; --q-b: #a915e8; --q-c: #2b2a66;
  --q-ink: #17163a; --q-text: #55526f; --q-muted: #8583a0; --q-line: #e3e2ee; --q-soft: color-mix(in srgb, var(--q-a) 6%, #fff);
  --q-head: 'Poppins', sans-serif; --q-body: 'Inter', sans-serif;
  --q-radius: 14px; --q-pad-x: 16mm; --q-pad-y: 16mm;
  --q-gradient: linear-gradient(115deg, var(--q-c) 0%, var(--q-a) 60%, var(--q-b) 100%);
  position: relative; box-sizing: border-box; width: 210mm; padding: var(--q-pad-y) var(--q-pad-x) 0; background: #fff;
  color: var(--q-ink); font-family: var(--q-body); font-size: 11.5px; line-height: 1.5;
  -webkit-print-color-adjust: exact; print-color-adjust: exact;
}
/* On paper the bottom and later top margins come from @page in documentHtml. */
@media screen { .invoice-doc { min-height: 297mm; padding-bottom: 14mm; } }
.invoice-doc *, .invoice-doc *::before, .invoice-doc *::after { box-sizing: border-box; }
.invoice-doc h1, .invoice-doc dl, .invoice-doc dd { margin: 0; padding: 0; }
.invoice-doc .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ── Head ── */
.i-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12mm; }
.i-logo { display: block; width: auto; height: 12mm; margin-bottom: 4mm; }
.i-logo-text { margin-bottom: 3mm; font-family: var(--q-head); font-size: 18px; font-weight: 700; }
.i-issuer { color: var(--q-text); font-size: 10.5px; line-height: 1.6; }
.i-title { flex: none; text-align: right; }
.i-title h1 { font-family: var(--q-head); font-size: 34px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.05; }
.i-number { margin-top: 4px; color: var(--q-a); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Buyer and dates ── */
.i-info { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 10mm; margin-top: 11mm; }
.i-buyer { max-width: 96mm; padding: 13px 18px 14px; border-left: 3px solid var(--q-b); border-radius: var(--q-radius); background: var(--q-soft); color: var(--q-text); font-size: 11px; }
.i-label, .i-dates dt { color: var(--q-muted); font-size: 9px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.i-label { margin-bottom: 4px; }
.i-name { margin-bottom: 3px; color: var(--q-ink); font-family: var(--q-head); font-size: 15px; font-weight: 700; line-height: 1.3; }
.i-dates { display: flex; flex-direction: column; gap: 8px; text-align: right; }
.i-dates dd { margin-top: 1px; font-size: 12px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ── Items ── */
.i-items { width: 100%; margin-top: 10mm; border-collapse: collapse; }
.i-items th { padding: 0 10px 8px; border-bottom: 2px solid var(--q-c); color: var(--q-text); font-size: 9px; font-weight: 700; letter-spacing: 0.12em; text-align: left; text-transform: uppercase; }
.i-items td { padding: 10px; border-bottom: 1px solid var(--q-line); vertical-align: top; }
.i-items th.num { text-align: right; }
.i-items th:first-child, .i-items td:first-child { padding-left: 0; }
.i-items th:last-child, .i-items td:last-child { padding-right: 0; }
.i-items tr { break-inside: avoid; }
.i-items td.num:last-child { font-weight: 600; }

/* ── Totals ── */
.i-totals { display: flex; justify-content: flex-end; margin-top: 7mm; break-inside: avoid; }
.i-totals-box { width: 82mm; }
.i-total { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; color: var(--q-text); }
.i-total .num { color: var(--q-ink); font-weight: 600; }
.i-total.is-grand { align-items: center; margin-top: 6px; padding: 12px 16px; border-radius: var(--q-radius); background: var(--q-gradient); color: #fff; font-weight: 600; }
.i-total.is-grand .num { color: #fff; font-family: var(--q-head); font-size: 18px; font-weight: 700; }

/* ── Foot ── */
.i-foot { display: flex; gap: 8mm; margin-top: 13mm; padding-top: 6mm; border-top: 1px solid var(--q-line); color: var(--q-text); font-size: 10px; line-height: 1.6; break-inside: avoid; }
.i-col { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.i-col b { display: block; margin-bottom: 4px; color: var(--q-ink); font-size: 10.5px; }
.i-qr { flex: 0 0 31mm; text-align: center; }
.i-qr svg { display: block; width: 31mm; height: 31mm; }
.i-qr div { color: var(--q-ink); font-size: 8.5px; font-weight: 600; letter-spacing: 0.04em; }
.i-vat { margin-top: 5mm; color: var(--q-muted); font-size: 9.5px; }

/* ── Premium: color strip on top, gradient total ── */
.invoice-doc.tpl-premium::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4mm; background: var(--q-gradient); }

/* ── Moderna: full color header, filled surfaces, one strong color ── */
.invoice-doc.tpl-moderna { --q-head: 'Manrope', sans-serif; --q-body: 'Manrope', sans-serif; --q-radius: 16px; --q-soft: color-mix(in srgb, var(--q-a) 8%, #fff); --q-gradient: var(--q-a); }
.tpl-moderna .i-head { margin: calc(var(--q-pad-y) * -1) calc(var(--q-pad-x) * -1) 0; padding: 13mm var(--q-pad-x) 12mm; background: linear-gradient(150deg, var(--q-a) 0%, color-mix(in srgb, var(--q-a) 74%, #000) 100%); color: #fff; }
.tpl-moderna .i-logo { box-sizing: content-box; height: 9mm; padding: 2.5mm 4mm; border-radius: 10px; background: #fff; }
.tpl-moderna .i-issuer { color: rgb(255 255 255 / 0.82); }
.tpl-moderna .i-title h1 { font-size: 42px; font-weight: 800; letter-spacing: -0.02em; }
.tpl-moderna .i-number { color: color-mix(in srgb, var(--q-a) 25%, #fff); font-size: 15px; }
.tpl-moderna .i-buyer { border-left: 0; }
.tpl-moderna .i-name { font-weight: 800; }
.tpl-moderna .i-items th { padding-top: 9px; padding-bottom: 9px; border-bottom: 0; background: var(--q-soft); color: var(--q-a); }
.tpl-moderna .i-items th:first-child { padding-left: 12px; border-radius: 10px 0 0 10px; }
.tpl-moderna .i-items th:last-child { padding-right: 12px; border-radius: 0 10px 10px 0; }
.tpl-moderna .i-items td:first-child { padding-left: 12px; }
.tpl-moderna .i-items td:last-child { padding-right: 12px; }
.tpl-moderna .i-total { padding-left: 4px; padding-right: 4px; }
.tpl-moderna .i-total.is-grand { padding: 13px 16px; }
.tpl-moderna .i-total.is-grand .num { font-size: 20px; font-weight: 800; }
.tpl-moderna .i-foot { padding: 6mm; border-top: 0; border-radius: var(--q-radius); background: var(--q-soft); }

/* ── Minimalna: serif title, thin lines instead of boxes, almost no color ── */
.invoice-doc.tpl-minimalna { --q-head: 'Newsreader', Georgia, serif; --q-ink: #161616; --q-text: #555; --q-muted: #999; --q-line: #dcdcdc; --q-pad-x: 20mm; --q-pad-y: 20mm; }
.tpl-minimalna .i-head { padding-bottom: 8mm; border-bottom: 1px solid var(--q-a); }
.tpl-minimalna .i-logo-text { font-weight: 500; }
.tpl-minimalna .i-title h1 { font-size: 46px; font-weight: 400; letter-spacing: -0.02em; }
.tpl-minimalna .i-number { color: var(--q-muted); font-family: var(--q-head); font-size: 17px; font-style: italic; font-weight: 400; }
.tpl-minimalna .i-buyer { padding: 0; border: 0; border-radius: 0; background: none; }
.tpl-minimalna .i-label, .tpl-minimalna .i-dates dt { font-weight: 600; letter-spacing: 0.2em; }
.tpl-minimalna .i-name { font-size: 19px; font-weight: 500; }
.tpl-minimalna .i-dates dd { font-weight: 500; }
.tpl-minimalna .i-items th { border-bottom: 1px solid var(--q-a); font-weight: 600; letter-spacing: 0.16em; }
.tpl-minimalna .i-items td.num:last-child { font-weight: 500; }
.tpl-minimalna .i-total .num { font-weight: 500; }
.tpl-minimalna .i-total.is-grand { margin-top: 8px; padding: 10px 0 0; border-top: 1px solid var(--q-a); border-radius: 0; background: none; color: var(--q-ink); font-weight: 500; }
.tpl-minimalna .i-total.is-grand .num { color: var(--q-ink); font-size: 24px; font-weight: 500; }
.tpl-minimalna .i-foot { border-top-color: var(--q-line); }
.tpl-minimalna .i-col b { font-weight: 600; }

/* ── Klasična: navy, serif headings, filled table head and straight edges ── */
.invoice-doc.tpl-klasicna { --q-head: 'Source Serif 4', Georgia, serif; --q-body: 'Source Sans 3', sans-serif; --q-ink: #1a2433; --q-text: #4e5a6b; --q-muted: #8592a3; --q-line: #d5dbe3; --q-radius: 2px; --q-gradient: var(--q-a); font-size: 12px; }
.tpl-klasicna .i-head { padding-bottom: 7mm; border-bottom: 3px double var(--q-a); }
.tpl-klasicna .i-title h1 { color: var(--q-a); font-size: 30px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.tpl-klasicna .i-number { color: var(--q-ink); font-family: var(--q-body); font-size: 14px; }
.tpl-klasicna .i-buyer { border: 1px solid var(--q-line); border-left: 3px solid var(--q-a); background: #fff; }
.tpl-klasicna .i-name { font-weight: 600; }
.tpl-klasicna .i-dates { gap: 0; border: 1px solid var(--q-line); text-align: left; }
.tpl-klasicna .i-dates div { display: flex; justify-content: space-between; gap: 18px; padding: 7px 12px; }
.tpl-klasicna .i-dates div + div { border-top: 1px solid var(--q-line); }
.tpl-klasicna .i-dates dd { margin: 0; }
.tpl-klasicna .i-items th { padding: 9px 10px; border-bottom: 0; background: var(--q-a); color: #fff; }
.tpl-klasicna .i-items th:first-child, .tpl-klasicna .i-items td:first-child { padding-left: 10px; }
.tpl-klasicna .i-items th:last-child, .tpl-klasicna .i-items td:last-child { padding-right: 10px; }
.tpl-klasicna .i-items tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--q-a) 5%, #fff); }
.tpl-klasicna .i-total { padding-left: 10px; padding-right: 10px; border-bottom: 1px solid var(--q-line); }
.tpl-klasicna .i-total.is-grand { margin-top: 0; padding: 10px; border-bottom: 0; }
.tpl-klasicna .i-total.is-grand .num { font-size: 17px; font-weight: 600; }
.tpl-klasicna .i-foot { border-top: 2px solid var(--q-a); }