"\u003c!DOCTYPE html>\n\u003chtml lang=\"fi\">\n\u003chead>\n \u003cmeta charset=\"utf-8\">\n \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n \u003ctitle>EcoBooks — Invoice Generator\u003c/title>\n \u003cstyle>\n/* ── Paged media ─────────────────────────────────────────────────────────── */\n@page{margin:0;size:A4}\n\n/* ── Reset \u0026 base ─────────────────────────────────────────────────────────── */\n*{box-sizing:border-box;margin:0;padding:0}\nbody{font-family:-apple-system,BlinkMacSystemFont,\"Segoe UI\",Roboto,sans-serif;\n font-size:13px;background:#f5f7fa;color:#222;padding:0 0 40px}\n\n/* ── Page header ─────────────────────────────────────────────────────────── */\n.page-header{background:#1a3a5c;color:#fff;padding:12px 18px;display:flex;\n align-items:center;gap:10px;position:sticky;top:0;z-index:100}\n.page-header h1{font-size:1rem;font-weight:700}\n.page-header .back-btn{background:rgba(255,255,255,0.15);border:none;color:#fff;\n padding:6px 12px;border-radius:5px;cursor:pointer;font-size:0.85rem;margin-left:auto}\n.page-header .back-btn:hover{background:rgba(255,255,255,0.25)}\n\n/* ── Form wrapper ─────────────────────────────────────────────────────────── */\n#formPanel{max-width:860px;margin:16px auto;padding:0 14px}\n\n/* ── Section cards ───────────────────────────────────────────────────────── */\n.section{background:#fff;border-radius:9px;padding:14px 16px;margin-bottom:12px;\n box-shadow:0 1px 3px rgba(0,0,0,0.07)}\n.section-title{font-weight:700;font-size:0.85rem;text-transform:uppercase;\n letter-spacing:0.06em;color:#1a3a5c;margin-bottom:10px;padding-bottom:6px;\n border-bottom:1.5px solid #e8eef5}\n\n/* ── Grid helpers ────────────────────────────────────────────────────────── */\n.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}\n.row3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}\n.row4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:10px}\n\n/* ── Form fields ─────────────────────────────────────────────────────────── */\nlabel{display:block;font-size:11px;font-weight:600;color:#666;margin-bottom:3px;margin-top:8px}\nlabel:first-child{margin-top:0}\ninput[type=\"text\"],input[type=\"number\"],select{\n width:100%;padding:7px 9px;border:1.5px solid #dde3ea;border-radius:5px;\n font-size:12.5px;background:#fff;color:#222;font-family:inherit}\ninput:focus,select:focus{outline:none;border-color:#1a3a5c}\ninput[readonly]{background:#f8f8f8;color:#555}\n\n/* ── Buttons ─────────────────────────────────────────────────────────────── */\n.btn-primary{background:#1a3a5c;color:#fff;border:none;border-radius:6px;\n padding:9px 20px;font-size:0.9rem;font-weight:700;cursor:pointer}\n.btn-primary:hover{background:#14304f}\n.btn-secondary{background:#f0f4f8;color:#1a3a5c;border:1.5px solid #c5d3e0;\n border-radius:6px;padding:7px 14px;font-size:0.85rem;font-weight:600;cursor:pointer}\n.btn-secondary:hover{background:#e4edf5}\n.btn-remove{background:none;border:none;cursor:pointer;color:#c00;font-size:1rem;\n padding:2px 5px;line-height:1}\n\n/* ── Recipient profile row ───────────────────────────────────────────────── */\n.profile-row{display:flex;gap:8px;align-items:flex-end;margin-bottom:8px}\n.profile-row select{flex:1}\n.profile-row button{white-space:nowrap;padding:7px 10px;min-width:36px}\n\n/* ── Line items table ────────────────────────────────────────────────────── */\n#lineItemsTable{width:100%;border-collapse:collapse;font-size:12px}\n#lineItemsTable th{background:#f0f4f8;padding:5px 7px;text-align:left;\n font-weight:600;border-bottom:1.5px solid #dde3ea;font-size:11px}\n#lineItemsTable td{padding:3px 4px;border-bottom:1px solid #f3f3f3;vertical-align:middle}\n#lineItemsTable input,#lineItemsTable select{padding:5px 6px;font-size:12px}\n\n/* ── Action strip ────────────────────────────────────────────────────────── */\n.action-strip{display:flex;gap:10px;justify-content:flex-end;align-items:flex-end;padding-top:4px}\n.action-strip .lang-pick{margin-right:auto}\n.action-strip .lang-pick select{width:auto;min-width:190px}\n\n/* ── Print / preview panel ───────────────────────────────────────────────── */\n#previewPanel{display:none;margin:16px auto;padding:0 14px;overflow-x:auto}\n.preview-btns{display:flex;gap:10px;margin-bottom:12px;max-width:860px;\n margin-left:auto;margin-right:auto;align-items:center}\n.btn-back{background:#f0f4f8;color:#1a3a5c;border:1.5px solid #c5d3e0;border-radius:6px;\n padding:8px 16px;font-size:0.9rem;font-weight:600;cursor:pointer}\n.btn-print{background:#1a5c2a;color:#fff;border:none;border-radius:6px;\n padding:8px 18px;font-size:0.9rem;font-weight:700;cursor:pointer}\n.btn-back:hover{background:#e4edf5}\n.btn-print:hover{background:#154820}\n.preview-btns .spacer{flex:1}\n.preview-note{max-width:860px;margin:0 auto 12px;padding:8px 12px;border-radius:5px;\n background:#fff4d6;border:1px solid #e0b400;color:#5a4300;font-size:12px;font-weight:600}\n\n/* ═══════════════════════════════════════════════════════════════════════════\n INVOICE — the printed document.\n Ported from invoice_redesign/template.html (the layout Hassan approved\n against two real samples), with three deliberate departures, each noted at\n the point it occurs:\n · page 2 is NOT fixed-height (the template's height:297mm + overflow:hidden\n would silently CLIP a breakdown longer than one page — the same class of\n bug this redesign exists to remove);\n · the header grows with the key-value table instead of overlapping it;\n · the giro labels and the payment-transmission disclaimer stay the\n statutory FI/SV pairs in BOTH languages.\n ═══════════════════════════════════════════════════════════════════════════ */\n#invoiceOutput{font-family:Helvetica,Arial,\"Liberation Sans\",sans-serif;\n color:#000;font-size:9pt;-webkit-print-color-adjust:exact;print-color-adjust:exact}\n#invoiceOutput .iv-page{width:210mm;padding:0 10mm;position:relative;\n background:#fff;margin:0 auto 14px;box-shadow:0 1px 6px rgba(0,0,0,0.12)}\n/* ★ PAGE 1 ONLY is a fixed-height box. That is the whole mechanism: the footer\n is pinned to the bottom of a box whose height does not depend on row count,\n so the giro form and barcode CANNOT be pushed off the page. */\n#invoiceOutput .iv-p1{height:297mm;overflow:hidden}\n/* ★ PAGE 2+ deliberately flows. A long breakdown paginates onto further sheets\n rather than being clipped. */\n#invoiceOutput .iv-p2{min-height:297mm;padding:17mm 10mm 16mm}\n\n#invoiceOutput .iv-flow{transform-origin:top center}\n\n/* ── header ─────────────────────────────────────────────────────────────── */\n#invoiceOutput .head{position:relative;min-height:78mm}\n#invoiceOutput .from{position:absolute;left:11mm;top:17mm;line-height:1.5}\n#invoiceOutput .from .nm{font-weight:bold}\n#invoiceOutput .to{position:absolute;left:11mm;top:40mm;font-weight:bold;line-height:1.5}\n#invoiceOutput h1.inv-title{position:absolute;left:108mm;top:15mm;margin:0;\n font-size:19pt;letter-spacing:.2px;font-weight:bold}\n#invoiceOutput .pg{position:absolute;right:0;top:17mm;font-size:8.5pt;color:#555}\n/* ★ in FLOW, not absolute: the head then grows when optional rows (delivery\n date, delivery terms, …) are present, instead of the table silently\n overlapping the line items below it. */\n#invoiceOutput .kvwrap{margin-left:108mm;width:82mm;padding-top:26mm}\n#invoiceOutput table.kv{width:100%;border-collapse:collapse}\n#invoiceOutput table.kv th{text-align:left;font-weight:bold;padding:1.45mm 0;\n font-size:9pt;white-space:nowrap}\n#invoiceOutput table.kv td{text-align:left;padding:1.45mm 0;padding-left:8mm;\n font-size:9pt;white-space:nowrap}\n\n#invoiceOutput .period{margin:0 0 7mm 1mm;font-size:9pt}\n\n/* ── line table ─────────────────────────────────────────────────────────── */\n#invoiceOutput table.lines{width:100%;border-collapse:collapse;font-size:9pt}\n#invoiceOutput table.lines thead th{background:#e9e9e9;font-weight:bold;\n padding:2.4mm 2mm;text-align:left}\n#invoiceOutput table.lines thead th.r{text-align:right}\n#invoiceOutput table.lines thead th.c{text-align:center}\n#invoiceOutput table.lines td{padding:1.75mm 2mm}\n#invoiceOutput table.lines td.r{text-align:right}\n#invoiceOutput table.lines td.c{text-align:center}\n#invoiceOutput table.lines tr{page-break-inside:avoid;break-inside:avoid}\n/* repeat the breakdown's header on every printed sheet it spills onto */\n#invoiceOutput table.lines thead{display:table-header-group}\n\n/* ── totals block ───────────────────────────────────────────────────────── */\n#invoiceOutput .totwrap{display:flex;align-items:flex-start;margin-top:6mm}\n#invoiceOutput .totleft{flex:1;font-style:italic;font-size:9pt;padding-left:1mm}\n#invoiceOutput table.tot{width:62mm;border-collapse:collapse;font-size:8.5pt}\n#invoiceOutput table.tot td{border-bottom:.6pt solid #b8b8b8;padding:1.7mm 0 1.5mm}\n#invoiceOutput table.tot td.v{text-align:right}\n#invoiceOutput table.tot tr.due td{border-bottom:none;font-size:12pt;\n font-weight:bold;padding-top:3.2mm}\n\n/* ── footer block — pinned; its position does not depend on row count ───── */\n#invoiceOutput .foot{position:absolute;left:10mm;right:10mm;bottom:10mm}\n#invoiceOutput .rule{border-top:.8pt solid #000}\n#invoiceOutput .info{display:flex;padding:2.2mm 0 3.2mm;font-size:7pt}\n#invoiceOutput .info .col{width:97mm}\n#invoiceOutput .info .col.b{width:auto;flex:1;padding-left:10mm}\n#invoiceOutput .info .r{display:flex;padding:.55mm 0}\n#invoiceOutput .info .r .l{width:37mm;color:#333}\n#invoiceOutput .info .r .v{flex:1}\n#invoiceOutput .cut{border-top:1px dashed #000}\n\n/* ── Finnish bank giro (tilisiirto) ─────────────────────────────────────── */\n#invoiceOutput table.giro{width:100%;border-collapse:collapse;font-size:8.5pt;\n table-layout:fixed}\n#invoiceOutput table.giro td{border:1px solid #000;padding:1.5mm 2mm;vertical-align:top}\n#invoiceOutput table.giro td.lab{border:none;text-align:right;\n padding:1.5mm 1.8mm 0 0;font-size:6pt;width:24mm;line-height:1.3}\n#invoiceOutput .tag{font-size:6.5pt;display:block;margin-bottom:.6mm}\n#invoiceOutput .big{font-size:10pt}\n#invoiceOutput .cellh{height:17mm;line-height:1.55}\n#invoiceOutput .sig{border-bottom:1px solid #000;margin-top:7.5mm}\n\n#invoiceOutput .bcwrap{display:flex;align-items:flex-end;padding-top:2.5mm;gap:5mm}\n#invoiceOutput .bcwrap .bc{flex:0 0 112mm}\n#invoiceOutput .bcwrap .bc svg{display:block;margin:0}\n#invoiceOutput .bcdigits{font-size:7.5pt;text-align:center;letter-spacing:.15px;\n padding-bottom:1mm}\n#invoiceOutput .terms{flex:1;font-size:6.5pt;line-height:1.38;padding-bottom:1.5mm}\n\n/* ── page 2 ─────────────────────────────────────────────────────────────── */\n#invoiceOutput h2.bd{font-size:13pt;margin:0 0 1mm 1mm}\n#invoiceOutput .sub{margin:0 0 6mm 1mm;font-size:8.5pt;color:#333}\n#invoiceOutput table.p2tot{margin-top:6mm;width:62mm;margin-left:auto;\n border-collapse:collapse;font-size:8.5pt}\n#invoiceOutput table.p2tot td{border-bottom:.6pt solid #b8b8b8;padding:1.7mm 0 1.5mm}\n#invoiceOutput table.p2tot td.v{text-align:right}\n#invoiceOutput table.p2tot tr.due td{border-bottom:none;font-size:11pt;\n font-weight:bold;padding-top:3mm}\n\n/* ── Print ──────────────────────────────────────────────────────────────── */\n@media print{\n @page{margin:0;size:A4}\n html,body{height:auto}\n body{background:#fff;padding:0;margin:0}\n .page-header,#formPanel,.preview-btns,.preview-note,.no-print{display:none!important}\n #previewPanel{display:block!important;padding:0!important;margin:0!important;\n max-width:none!important;background:#fff!important}\n #invoiceOutput .iv-page{width:100%;margin:0;box-shadow:none;\n page-break-after:always;break-after:page}\n #invoiceOutput .iv-page:last-child{page-break-after:auto;break-after:auto}\n /* 0.2mm of slack so sub-pixel rounding on a 297.00mm box can never spill a\n blank trailing sheet. Invisible: it moves the pinned footer by 0.2mm. */\n #invoiceOutput .iv-p1{height:296.8mm}\n /* ★ min-height:297mm only exists to make page 2 LOOK like a sheet in the\n on-screen preview. In print it made a breakdown that happened to be\n exactly one sheet tall spill a blank third sheet. Caught by counting\n pages in the produced PDF, not by looking at the preview. */\n #invoiceOutput .iv-p2{min-height:0}\n}\n \u003c/style>\n\u003c/head>\n\u003cbody>\n\n\u003c!-- ═══════════════════════ PAGE HEADER ══════════════════════════════════════ -->\n\u003cdiv class=\"page-header\">\n \u003ch1>📄 EcoBooks — Create a new invoice\u003c/h1>\n \u003cbutton class=\"back-btn\" id=\"pageBackBtn\" onclick=\"window.history.back()\">← Back\u003c/button>\n \u003cscript>/* s377: inside Scribe 2.0 the page is embedded and has no history of its own -- the\n composer's menu is the way back, so the dead Back button is not shown there. */\n try { if (window.parent \u0026\u0026 window.parent !== window) document.getElementById(\"pageBackBtn\").style.display = \"none\"; } catch (e) {}\u003c/script>\n\u003c/div>\n\n\u003c!-- ═══════════════════════ FORM ══════════════════════════════════════════════ -->\n\u003cdiv id=\"formPanel\">\n\n \u003c!-- Sender -->\n \u003cdiv class=\"section\">\n \u003cdiv class=\"section-title\">Sender details \u003cspan style=\"font-weight:normal;color:#888;font-size:10px\">(saved automatically, for this client, on every computer)\u003c/span> \u003cspan id=\"senderSaved\" style=\"font-weight:normal;font-size:10px;color:#2e7d32\">\u003c/span>\u003c/div>\n \u003cdiv class=\"row2\">\n \u003cdiv>\u003clabel>Company name\u003c/label>\u003cinput type=\"text\" id=\"sCompanyName\" placeholder=\"Company Ltd\">\u003c/div>\n \u003cdiv>\u003clabel>Business ID\u003c/label>\u003cinput type=\"text\" id=\"sYtunnus\" placeholder=\"1234567-8\">\u003c/div>\n \u003c/div>\n \u003cdiv>\u003clabel>Street address\u003c/label>\u003cinput type=\"text\" id=\"sAddress\" placeholder=\"Example street 1\">\u003c/div>\n \u003cdiv class=\"row2\">\n \u003cdiv>\u003clabel>Postal code and city\u003c/label>\u003cinput type=\"text\" id=\"sPostalCity\" placeholder=\"00100 Helsinki\">\u003c/div>\n \u003cdiv>\u003clabel>Domicile\u003c/label>\u003cinput type=\"text\" id=\"sDomicile\" placeholder=\"Helsinki\">\u003c/div>\n \u003c/div>\n \u003cdiv class=\"row2\">\n \u003cdiv>\u003clabel>IBAN\u003c/label>\u003cinput type=\"text\" id=\"sIban\" placeholder=\"FI97 1564 2972 8532 89\">\u003c/div>\n \u003cdiv>\u003clabel>BIC\u003c/label>\u003cinput type=\"text\" id=\"sBic\" placeholder=\"NDEAFIHH\">\u003c/div>\n \u003c/div>\n \u003cdiv class=\"row2\">\n \u003cdiv>\u003clabel>Bank\u003c/label>\u003cinput type=\"text\" id=\"sBankName\" placeholder=\"Nordea\">\u003c/div>\n \u003cdiv>\u003clabel>Phone\u003c/label>\u003cinput type=\"text\" id=\"sPhone\" placeholder=\"+358 40 123 4567\">\u003c/div>\n \u003c/div>\n \u003cdiv class=\"row2\">\n \u003cdiv>\u003clabel>E-mail\u003c/label>\u003cinput type=\"text\" id=\"sEmail\" placeholder=\"email@example.com\">\u003c/div>\n \u003cdiv>\u003clabel>Website (optional)\u003c/label>\u003cinput type=\"text\" id=\"sWeb\" placeholder=\"www.example.com\">\u003c/div>\n \u003c/div>\n \u003c/div>\n\n \u003c!-- Invoice metadata -->\n \u003cdiv class=\"section\">\n \u003cdiv class=\"section-title\">Invoice details\u003c/div>\n \u003cdiv class=\"row3\">\n \u003cdiv>\u003clabel>Invoice number\u003c/label>\u003cinput type=\"number\" id=\"invoiceNumber\" min=\"1\" value=\"1\" readonly style=\"background:#f8f8f8;color:#555\" title=\"Scribe 2.0 gives the next number when the invoice is issued\">\u003c/div>\n \u003cdiv>\u003clabel>Date (DD.MM.YYYY)\u003c/label>\u003cinput type=\"text\" id=\"invoiceDate\" placeholder=\"31.3.2026\">\u003c/div>\n \u003cdiv>\n \u003clabel>Payment terms\u003c/label>\n \u003cselect id=\"paymentTerms\">\n \u003coption value=\"7\">7 days net\u003c/option>\n \u003coption value=\"14\" selected>14 days net\u003c/option>\n \u003coption value=\"30\">30 days net\u003c/option>\n \u003c/select>\n \u003c/div>\n \u003c/div>\n \u003cdiv class=\"row2\">\n \u003cdiv>\u003clabel>Due date (DD.MM.YYYY)\u003c/label>\u003cinput type=\"text\" id=\"dueDate\" placeholder=\"14.4.2026\">\u003c/div>\n \u003cdiv>\u003clabel>Reference number (auto)\u003c/label>\u003cinput type=\"text\" id=\"viitenumero\" readonly style=\"background:#f8f8f8;color:#555\">\u003c/div>\n \u003c/div>\n \u003cdiv class=\"row4\">\n \u003cdiv>\u003clabel>Late payment interest %\u003c/label>\u003cinput type=\"text\" id=\"lateInterest\" value=\"8\">\u003c/div>\n \u003cdiv>\u003clabel>Delivery date\u003c/label>\u003cinput type=\"text\" id=\"deliveryDate\" placeholder=\"8.4.2026\">\u003c/div>\n \u003cdiv>\u003clabel>Period for complaints (days)\u003c/label>\u003cinput type=\"text\" id=\"reminderDays\" placeholder=\"8 days\">\u003c/div>\n \u003cdiv>\u003clabel>Service period (optional)\u003c/label>\u003cinput type=\"text\" id=\"servicePeriod\" placeholder=\"01.03.2026-31.03.2026\">\u003c/div>\n \u003c/div>\n \u003cdiv class=\"row2\">\n \u003cdiv>\u003clabel>Delivery terms\u003c/label>\u003cinput type=\"text\" id=\"deliveryTerms\" placeholder=\"Ex works\">\u003c/div>\n \u003cdiv>\u003clabel>Delivery method\u003c/label>\u003cinput type=\"text\" id=\"deliveryMethod\" placeholder=\"Delivered\">\u003c/div>\n \u003c/div>\n \u003c/div>\n\n \u003c!-- Recipient -->\n \u003cdiv class=\"section\">\n \u003cdiv class=\"section-title\">Recipient\u003c/div>\n\n \u003c!-- Saved profiles dropdown (hidden until profiles exist) -->\n \u003cdiv id=\"recipient-profile-row\" class=\"profile-row\" style=\"display:none\">\n \u003cdiv style=\"flex:1\">\n \u003clabel>Saved recipients\u003c/label>\n \u003cselect id=\"recipientProfile\" onchange=\"loadRecipientProfile()\">\n \u003coption value=\"\">— Select a saved recipient —\u003c/option>\n \u003c/select>\n \u003c/div>\n \u003cbutton type=\"button\" class=\"btn-secondary\" onclick=\"deleteRecipientProfile()\" title=\"Delete selected\">✕\u003c/button>\n \u003c/div>\n\n \u003cdiv class=\"row2\">\n \u003cdiv>\u003clabel>Company name / Name\u003c/label>\u003cinput type=\"text\" id=\"recipientName\" placeholder=\"Indulge Oy\">\u003c/div>\n \u003cdiv>\u003clabel>Business ID\u003c/label>\u003cinput type=\"text\" id=\"recipientYtunnus\" placeholder=\"1234567-8\">\u003c/div>\n \u003c/div>\n \u003cdiv>\u003clabel>Street address\u003c/label>\u003cinput type=\"text\" id=\"recipientAddress\" placeholder=\"Example street 1\">\u003c/div>\n \u003cdiv class=\"row2\">\n \u003cdiv>\u003clabel>Postal code and city\u003c/label>\u003cinput type=\"text\" id=\"recipientPostal\" placeholder=\"00100 Helsinki\">\u003c/div>\n \u003cdiv>\u003clabel>Customer number (optional)\u003c/label>\u003cinput type=\"text\" id=\"recipientCustNum\">\u003c/div>\n \u003c/div>\n \u003cdiv style=\"margin-top:8px\">\n \u003clabel style=\"display:flex;align-items:center;gap:6px;cursor:pointer;font-weight:normal\">\n \u003cinput type=\"checkbox\" id=\"saveRecipient\" checked>\n Save recipient as a profile (auto-fill next time)\n \u003c/label>\n \u003c/div>\n \u003c/div>\n\n \u003c!-- Line items -->\n \u003cdiv class=\"section\">\n \u003cdiv class=\"section-title\">Line items\u003c/div>\n \u003ctable id=\"lineItemsTable\">\n \u003cthead>\n \u003ctr>\n \u003cth style=\"width:7%\">Code\u003c/th>\n \u003cth style=\"width:24%\">Description\u003c/th>\n \u003cth style=\"width:11%\" title=\"Leave blank for no grouping. Lines sharing a Type, VAT rate and Unit are summarised into one line on page 1 of the PDF, with the full breakdown on page 2.\">Type\u003c/th>\n \u003cth style=\"width:6%\">Qty\u003c/th>\n \u003cth style=\"width:6%\">Unit\u003c/th>\n \u003cth style=\"width:11%\">Unit price €\u003c/th>\n \u003cth style=\"width:9%\">VAT %\u003c/th>\n \u003cth style=\"width:11%\">Net €\u003c/th>\n \u003cth style=\"width:11%\">Gross €\u003c/th>\n \u003cth style=\"width:4%\">\u003c/th>\n \u003c/tr>\n \u003c/thead>\n \u003ctbody id=\"lineItemsBody\">\u003c/tbody>\n \u003c/table>\n \u003cbutton type=\"button\" class=\"btn-secondary\" onclick=\"addLineItem()\" style=\"margin-top:6px;font-size:11px\">+ Add row\u003c/button>\n \u003c/div>\n\n \u003c!-- Actions -->\n \u003cdiv class=\"action-strip\">\n \u003cdiv class=\"lang-pick\">\n \u003clabel for=\"pdfLang\">Language of the printed invoice\u003c/label>\n \u003cselect id=\"pdfLang\">\n \u003coption value=\"fi\" selected>Suomi (Finnish)\u003c/option>\n \u003coption value=\"en\">English\u003c/option>\n \u003c/select>\n \u003c/div>\n \u003cbutton type=\"button\" class=\"btn-secondary\" onclick=\"window.history.back()\">Cancel\u003c/button>\n \u003cbutton type=\"button\" class=\"btn-primary\" onclick=\"generateInvoice()\">Create invoice →\u003c/button>\n \u003c/div>\n\u003c/div>\n\n\u003c!-- ═══════════════════════ PREVIEW ═══════════════════════════════════════════ -->\n\u003cdiv id=\"previewPanel\">\n \u003cdiv class=\"preview-btns no-print\">\n \u003cbutton class=\"btn-back\" onclick=\"backToForm()\">← Edit\u003c/button>\n \u003cbutton class=\"btn-print\" onclick=\"window.print()\">🖨 Print / Save PDF\u003c/button>\n \u003cspan class=\"spacer\">\u003c/span>\n \u003cspan style=\"font-size:12px;color:#555;font-weight:600\">Language:\u003c/span>\n \u003cbutton class=\"btn-back\" id=\"langFi\" onclick=\"switchLang('fi')\">Suomi\u003c/button>\n \u003cbutton class=\"btn-back\" id=\"langEn\" onclick=\"switchLang('en')\">English\u003c/button>\n \u003c/div>\n \u003cdiv id=\"previewNotes\">\u003c/div>\n \u003cdiv id=\"invoiceOutput\">\u003c/div>\n\u003c/div>\n\n\u003cscript>\n// =============================================================================\n// SHEET ID — injected by Apps Script doGet template\n// =============================================================================\nvar PE_CLIENT_ID = \"__SCRIBE_INVOICE_CLIENT__\"; // Scribe client id; no sheet behind this tool\n\n// =============================================================================\n// ★ LAYOUT CONSTANTS — measured, not chosen\n// =============================================================================\n// ★★ THE CAPACITY OF PAGE 1 IS MEASURED AT RENDER TIME, NOT ASSUMED.\n//\n// invoice_redesign/calibrate.py measured the redesign's page 1 offline:\n// 3 rows -> 22.3mm clear 5 -> 7.9mm 6 -> 0.7mm ★ COLLIDES\n// and concluded MAX_P1_LINES = 5. Re-measured in a real browser against THIS\n// footer (which keeps the statutory FI/SV disclaimer the redesign dropped, so\n// the footer is ~12mm taller):\n// 1 -> 24.4mm 2 -> 17.2mm 3 -> 10.0mm 4 -> 2.8mm 5 -> ★ -4.4mm\n//\n// ★★★ AND THE REDESIGN'S CLOSURE ARGUMENT IS FALSE. build.py argues the lump\n// fallback \"can never itself overflow: Finland has four VAT rates against a\n// capacity of five.\" It counted the lump LINES and not the TOTALS ROWS,\n// which grow with the number of rates at the same time. Measured with four\n// VAT bands present:\n// 1 line -> 24.4mm 2 -> 10.5mm 3 -> ★ -3.3mm 4 -> ★ -17.1mm\n// A four-rate invoice's own four-line fallback misses by 17mm. Each extra\n// rate costs ~13.7mm (one lump line AND one totals row) against ~7.2mm for\n// an ordinary line. The guarantee cannot rest on counting lines.\n//\n// So the guarantee here is different, and it does not depend on any constant:\n// 1. render the per-line layout;\n// 2. MEASURE the clear air above the pinned footer;\n// 3. if it is short, fall back to one lump line per VAT rate and measure again;\n// 4. if it is STILL short, scale page 1's upper block only — the footer stays\n// pinned and full size — and say so on screen.\n// Page 1 therefore cannot be truncated regardless of row count, rate count or\n// how many optional header fields the bookkeeper filled in.\n//\n// MAX_P1_LINES is now only a render-cost cutoff: beyond it, go straight to the\n// lump layout rather than building a 500-row table just to discard it.\nvar MAX_P1_LINES = 12;\n// 2.5mm of clear air. calibrate.py's 0.7mm was already \"collides\"; anything\n// above ~2mm demonstrably does not overlap. An earlier 5mm threshold demoted\n// the approved 3-line Mahendra sample, which has 3.3mm of real clear air — a\n// guard that fires on a layout Hassan had already signed off is broken, not safe.\nvar MIN_CLEAR_MM = 2.5; // required clear air above the footer\nvar PX_PER_MM = 96 / 25.4; // CSS px per mm at 96dpi\nvar MIN_CLEAR_PX = MIN_CLEAR_MM * PX_PER_MM;\n\n// ★ VAT ROUNDING BASIS — [LAW AVL 209 e §]\n// vero.fi, \"VAT invoice requirements\", section 5.1.10:\n// \"The VAT payable must be expressed with two decimals. Usual arithmetical\n// rules apply for the rounding of uneven values... Rounding should only\n// concern the final amount of the invoice.\"\n// https://www.vero.fi/en/detailed-guidance/guidance/48090/vat-invoice-requirements/\n//\n// So VAT is computed on the NET SUBTOTAL PER RATE and rounded ONCE per rate —\n// never as the sum of per-line rounded VAT amounts. Every line's net is itself\n// rounded to the cent at source (a line on an invoice is a cent amount), so\n// line totals, per-rate subtotals and the grand total reconcile exactly at\n// all three levels with no residue.\n\n// =============================================================================\n// LANGUAGE\n// =============================================================================\n// ★ The giro (tilisiirto) labels and the payment-transmission disclaimer are\n// NOT translated. They are the statutory Finnish/Swedish pairs of the standard\n// Finnish bank transfer form and stay identical in both languages —\n// [STATED Hassan, 2 Sep 2026]. invoice_redesign/build.py's EN dictionary\n// translates them; that is wrong and this file deliberately departs from it.\nvar L_FI = {\n INVOICE:\"LASKU\", INVOICE_N:\"Lasku\", DESC:\"Nimike\", DATE:\"Päivämäärä\",\n QTY:\"Määrä\", UNIT:\"Yks.\", PRICE:\"À-hinta\", VATPC:\"ALV %\", TOTAL:\"Yhteensä\",\n NET:\"Veroton\", TYPE:\"Laji\", BREAKDOWN:\"Erittely\",\n EXVAT:\"Veroton yhteensä\", VATTOT:\"ALV yhteensä\", DUEAMT:\"Maksettava yhteensä\",\n COMPANY:\"Yritys\", ADDRESS:\"Osoite\", CONUM:\"Y-tunnus\", TEL:\"Puh.\",\n EMAIL:\"Sähköposti\", WWW:\"www\",\n LUMP:\"Laskutetut palvelut\",\n SEEP2:\"Täydellinen erittely ({n} riviä) sivulla 2.\",\n PAGE:\"Sivu {a}/{b}\",\n KV_NO:\"Laskun numero:\", KV_DATE:\"Laskun päiväys:\", KV_TERMS:\"Maksuehdot:\",\n KV_DUE:\"Eräpäivä:\", KV_INT:\"Viivästyskorko:\", KV_REF:\"Viitenumero:\",\n KV_CUST:\"Asiakasnumero:\", KV_CUSTYT:\"Asiakkaan Y-tunnus:\",\n KV_DELDATE:\"Toimituspäivä:\", KV_REMIND:\"Huomautusaika:\",\n KV_DELTERMS:\"Toimitusehto:\", KV_DELMETH:\"Toimitustapa:\",\n DAYS:\"{n} päivää netto\",\n NOITEMS:\"Lisää vähintään yksi tuoterivi (nimike tai hinta).\",\n ERR:\"Virhe laskun luonnissa: \"\n};\nvar L_EN = {\n INVOICE:\"INVOICE\", INVOICE_N:\"Invoice\", DESC:\"Description\", DATE:\"Date\",\n QTY:\"Qty\", UNIT:\"Unit\", PRICE:\"Unit price\", VATPC:\"VAT %\", TOTAL:\"Total\",\n NET:\"Net\", TYPE:\"Type\", BREAKDOWN:\"Breakdown\",\n EXVAT:\"Total excl. VAT\", VATTOT:\"VAT total\", DUEAMT:\"Total amount due\",\n COMPANY:\"Company\", ADDRESS:\"Address\", CONUM:\"Company number\", TEL:\"Tel.\",\n EMAIL:\"E-mail\", WWW:\"www\",\n LUMP:\"Invoiced services\",\n SEEP2:\"Full line-by-line breakdown ({n} rows) on page 2.\",\n PAGE:\"Page {a}/{b}\",\n KV_NO:\"Invoice number:\", KV_DATE:\"Invoice date:\", KV_TERMS:\"Payment terms:\",\n KV_DUE:\"Due date:\", KV_INT:\"Late payment interest:\",\n KV_REF:\"Viitenumero (Finland):\",\n KV_CUST:\"Customer number:\", KV_CUSTYT:\"Customer business ID:\",\n KV_DELDATE:\"Delivery date:\", KV_REMIND:\"Period for complaints:\",\n KV_DELTERMS:\"Delivery terms:\", KV_DELMETH:\"Delivery method:\",\n DAYS:\"{n} days net\",\n NOITEMS:\"Add at least one line item (description or price).\",\n ERR:\"Could not create the invoice: \"\n};\n// Statutory, identical in both languages.\nvar GIRO = {\n ACCT:\"Saajan\u003cbr>tilinumero\u003cbr>Mottagarens\u003cbr>kontonummer\",\n BIC:\"BIC\",\n RECIP:\"Saaja\u003cbr>Mottagare\",\n PAYER:\"Maksajan nimi\u003cbr>ja osoite\u003cbr>Betalarens namn\u003cbr>och adress\",\n SIG:\"Allekirjoitus\u003cbr>Underskrift\",\n FROM:\"Tililtä nro\u003cbr>Från konto nr\",\n REF:\"Viitenumero\u003cbr>Ref. nr\",\n DUE:\"Eräpäivä\u003cbr>Förf.dag\",\n TOT:\"Euro\",\n VERT:\"TILISIIRTO GIRERING\",\n TERMS:\"Maksu välitetään saajalle vain Suomessa Kotimaan maksujenvälityksen \" +\n \"yleisten ehtojen mukaisesti ja vain maksajan ilmoittaman tilinumeron \" +\n \"perusteella.\u003cbr>\u003cbr>\" +\n \"Betalningen förmedlas till mottagare endast i Finland enligt Allmänna \" +\n \"villkor för inrikes betalningsförmedling och endast till det \" +\n \"kontonummer betalaren angivit.\u003cbr>\u003cbr>\u003cstrong>PANKKI BANKEN\u003c/strong>\"\n};\nfunction dict(lang){ return lang === \"en\" ? L_EN : L_FI; }\nfunction fill(s, o){\n return String(s).replace(/\\{(\\w+)\\}/g, function(_, k){\n return (o \u0026\u0026 o[k] != null) ? o[k] : \"\";\n });\n}\n\n// =============================================================================\n// RECIPIENT PROFILES\n// =============================================================================\nvar recipientProfiles = []; // [{name, ytunnus, address, postal, custNum}, ...]\n\nfunction populateProfileDropdown() {\n var sel = document.getElementById(\"recipientProfile\");\n while (sel.options.length > 1) sel.remove(1);\n recipientProfiles.forEach(function(p, i) {\n var opt = document.createElement(\"option\");\n opt.value = i;\n opt.textContent = p.name || (\"Profile \" + (i+1));\n sel.appendChild(opt);\n });\n document.getElementById(\"recipient-profile-row\").style.display =\n recipientProfiles.length > 0 ? \"flex\" : \"none\";\n}\n\nfunction loadRecipientProfile() {\n var sel = document.getElementById(\"recipientProfile\");\n var idx = parseInt(sel.value);\n if (isNaN(idx)) return;\n var p = recipientProfiles[idx];\n if (!p) return;\n function set(id,v){ if(v!=null) document.getElementById(id).value=v; }\n set(\"recipientName\", p.name);\n set(\"recipientYtunnus\", p.ytunnus);\n set(\"recipientAddress\", p.address);\n set(\"recipientPostal\", p.postal);\n set(\"recipientCustNum\", p.custNum);\n}\n\nfunction deleteRecipientProfile() {\n var sel = document.getElementById(\"recipientProfile\");\n var idx = parseInt(sel.value);\n if (isNaN(idx)) return;\n var name = recipientProfiles[idx] \u0026\u0026 recipientProfiles[idx].name;\n if (!confirm(\"Delete the saved recipient \\\"\" + (name||\"?\") + \"\\\"?\")) return;\n recipientProfiles.splice(idx, 1);\n populateProfileDropdown();\n document.getElementById(\"recipientProfile\").value = \"\";\n saveRecipientProfiles();\n}\n\nfunction saveRecipientProfiles() {\n google.script.run\n .withSuccessHandler(function(){})\n .withFailureHandler(function(e){ console.warn(\"saveInvoiceRecipients:\", e.message); })\n .saveInvoiceRecipients(PE_CLIENT_ID, JSON.stringify(recipientProfiles));\n}\n\nfunction getRecipientFields() {\n return {\n name: document.getElementById(\"recipientName\").value.trim(),\n ytunnus: document.getElementById(\"recipientYtunnus\").value.trim(),\n address: document.getElementById(\"recipientAddress\").value.trim(),\n postal: document.getElementById(\"recipientPostal\").value.trim(),\n custNum: document.getElementById(\"recipientCustNum\").value.trim()\n };\n}\n\n// =============================================================================\n// VIITENUMERO — Finnish domestic reference, weights 7-3-1 from the right\n// =============================================================================\nfunction generateViitenumeroRaw(n) {\n var base = \"8\" + String(n).padStart(4,\"0\");\n var weights = [7,3,1];\n var sum = 0;\n base.split(\"\").reverse().forEach(function(d,i){ sum += parseInt(d)*weights[i%3]; });\n return base + ((10-(sum%10))%10);\n}\nfunction formatViitenumero(raw) {\n var out=[]; var s=raw;\n while(s.length>3){ out.unshift(s.slice(-3)); s=s.slice(0,-3); }\n if(s) out.unshift(s);\n return out.join(\" \");\n}\nfunction getViitenumero(n){ return formatViitenumero(generateViitenumeroRaw(n)); }\n\n// =============================================================================\n// PANKKIVIIVAKOODI — virtual barcode, version 4 (54 digits)\n// =============================================================================\n// version(1) + IBAN without \"FI\"(16) + euros(6) + cents(2) + reserve \"000\"(3)\n// + reference right-aligned in 20 + due date yymmdd(6) = 54\n//\n// ★ Returns \"\" — no barcode at all — rather than a plausible-looking wrong one.\n// A wrong barcode is worse than no barcode: the payer scans it and pays the\n// wrong account or the wrong amount, and nothing on the page contradicts it.\n// The giro form is valid without a barcode; it is an optional convenience.\n// Reasons for refusing are returned so the bookkeeper is told, on screen.\nfunction buildBarcodeString(iban, amountEur, viitenro, dueFin) {\n var reasons = [];\n var ib = String(iban||\"\").replace(/\\s+/g,\"\").toUpperCase();\n if (!/^FI\\d{16}$/.test(ib)) {\n reasons.push(\"the IBAN is not a valid Finnish IBAN (FI + 16 digits)\");\n }\n var cents = Math.round(parseFloat(amountEur) * 100);\n if (!isFinite(cents) || cents \u003c 0) {\n reasons.push(\"the invoice total is not a valid amount\");\n } else if (cents > 99999999) {\n // ★ the field is 8 digits. The old code did .slice(-8), which silently\n // dropped the leading digits and printed a barcode for a smaller sum.\n reasons.push(\"the total exceeds 999 999,99 € — it does not fit the barcode format\");\n }\n var ref = String(viitenro||\"\").replace(/\\s+/g,\"\");\n if (!/^\\d{4,20}$/.test(ref)) {\n reasons.push(\"the reference number is not 4-20 digits\");\n }\n var p = String(dueFin||\"\").split(\".\");\n if (p.length !== 3 || !/^\\d{1,2}$/.test(p[0]) || !/^\\d{1,2}$/.test(p[1]) || !/^\\d{4}$/.test(p[2])) {\n reasons.push(\"the due date is missing or not DD.MM.YYYY\");\n }\n if (reasons.length) return { str:\"\", reasons:reasons };\n var yymmdd = p[2].slice(2) + pad(p[1]) + pad(p[0]);\n var s = \"4\" + ib.slice(2) + String(cents).padStart(8,\"0\") + \"000\" +\n ref.padStart(20,\"0\") + yymmdd;\n if (s.length !== 54) {\n return { str:\"\", reasons:[\"the computed barcode was \" + s.length + \" digits, not 54\"] };\n }\n return { str:s, reasons:[] };\n}\n\n// =============================================================================\n// SELF-CONTAINED CODE128 BARCODE SVG GENERATOR\n// =============================================================================\nfunction generateCode128SVG(text, barHeight) {\n barHeight = barHeight || 55;\n var T=[\n \"212222\",\"222122\",\"222221\",\"121223\",\"121322\",\"131222\",\"122213\",\"122312\",\n \"132212\",\"221213\",\"221312\",\"231212\",\"112232\",\"122132\",\"122231\",\"113222\",\n \"123122\",\"123221\",\"223121\",\"221132\",\"221231\",\"213212\",\"223112\",\"312131\",\n \"311222\",\"321122\",\"321221\",\"312212\",\"322112\",\"322211\",\"212123\",\"212321\",\n \"232121\",\"111323\",\"131123\",\"131321\",\"112313\",\"132113\",\"132311\",\"211313\",\n \"231113\",\"231311\",\"112133\",\"112331\",\"132131\",\"113123\",\"113321\",\"133121\",\n \"313121\",\"211331\",\"231131\",\"213113\",\"213311\",\"213131\",\"311123\",\"311321\",\n \"331121\",\"312113\",\"312311\",\"332111\",\"314111\",\"221411\",\"431111\",\"111224\",\n \"111422\",\"121124\",\"121421\",\"141122\",\"141221\",\"112214\",\"112412\",\"122114\",\n \"122411\",\"142112\",\"142211\",\"241211\",\"221114\",\"413111\",\"241112\",\"134111\",\n \"111242\",\"121142\",\"121241\",\"114212\",\"124112\",\"124211\",\"411212\",\"421112\",\n \"421211\",\"212141\",\"214121\",\"412121\",\"111143\",\"111341\",\"131141\",\"114113\",\n \"114311\",\"411113\",\"411311\",\"113141\",\"114131\",\"311141\",\"411131\",\"211412\",\n \"211214\",\"211232\",\"2331112\"\n ];\n var syms=[], chk=0, pos=1, i;\n var allDigits = /^\\d+$/.test(text);\n if(allDigits \u0026\u0026 text.length%2===0){\n syms.push(105); chk=105;\n for(i=0;i\u003ctext.length;i+=2){\n var v=parseInt(text.substring(i,i+2));\n syms.push(v); chk+=pos*v; pos++;\n }\n } else if(allDigits \u0026\u0026 text.length%2===1){\n syms.push(104); chk=104;\n var v0=text.charCodeAt(0)-32;\n syms.push(v0); chk+=pos*v0; pos++;\n syms.push(99); chk+=pos*99; pos++;\n for(i=1;i\u003ctext.length;i+=2){\n var v2=parseInt(text.substring(i,i+2));\n syms.push(v2); chk+=pos*v2; pos++;\n }\n } else {\n syms.push(104); chk=104;\n for(i=0;i\u003ctext.length;i++){\n var v3=text.charCodeAt(i)-32;\n if(v3\u003c0||v3>95) v3=0;\n syms.push(v3); chk+=(i+1)*v3;\n }\n }\n syms.push(chk%103);\n syms.push(106);\n var x=10, rects='';\n for(var j=0;j\u003csyms.length;j++){\n var pat=T[syms[j]];\n for(var k=0;k\u003cpat.length;k++){\n var w=parseInt(pat[k]);\n if(k%2===0) rects+='\u003crect x=\"'+x+'\" y=\"0\" width=\"'+w+'\" height=\"'+barHeight+'\" fill=\"#000\"/>';\n x+=w;\n }\n }\n x+=10;\n // 112mm wide, matching build.py's module_width 0.33mm across ~332 modules.\n return '\u003csvg xmlns=\"http://www.w3.org/2000/svg\" viewBox=\"0 0 '+x+' '+barHeight+'\" '\n +'preserveAspectRatio=\"none\" shape-rendering=\"crispEdges\" '\n +'style=\"width:100%;height:'+barHeight+'px;display:block\">'+rects+'\u003c/svg>';\n}\n\n// =============================================================================\n// DATE HELPERS\n// =============================================================================\nfunction todayFin() {\n var d=new Date();\n return pad(d.getDate())+\".\"+pad(d.getMonth()+1)+\".\"+d.getFullYear();\n}\nfunction pad(n){ return String(n).padStart(2,\"0\"); }\nfunction toFin(s) {\n if (!s) return \"\";\n s = String(s).trim();\n if (/^\\d{1,2}\\.\\d{1,2}\\.\\d{4}$/.test(s)) {\n var a=s.split(\".\"); return pad(a[0])+\".\"+pad(a[1])+\".\"+a[2];\n }\n if (/^\\d{4}-\\d{2}-\\d{2}$/.test(s)) {\n var b=s.split(\"-\"); return b[2]+\".\"+b[1]+\".\"+b[0];\n }\n if (/^\\d{1,2}\\/\\d{1,2}\\/\\d{4}$/.test(s)) {\n var c=s.split(\"/\"); return pad(c[1])+\".\"+pad(c[0])+\".\"+c[2];\n }\n return s;\n}\nfunction addDaysFin(finDate, days) {\n var p=finDate.split(\".\");\n var d=new Date(parseInt(p[2]), parseInt(p[1])-1, parseInt(p[0]));\n d.setDate(d.getDate()+days);\n return pad(d.getDate())+\".\"+pad(d.getMonth()+1)+\".\"+d.getFullYear();\n}\n\n// =============================================================================\n// NUMBER FORMAT\n// =============================================================================\nfunction round2(x){ return Math.round((parseFloat(x)+Number.EPSILON)*100)/100; }\n\n// Form fields (always Finnish style — the form is the bookkeeper's, not the\n// client's).\nfunction finNum(n){ return (parseFloat(n)||0).toFixed(2).replace(\".\",\",\"); }\n\n// ★ The printed document. Finnish: space thousands, comma decimal.\n// English: comma thousands, dot decimal. On an invoice this is not cosmetic —\n// \"3,281.50\" read as Finnish is a different number.\nfunction money(v, lang, dp){\n if (dp == null) dp = 2;\n var n = parseFloat(v); if (!isFinite(n)) n = 0;\n var neg = n \u003c 0; if (neg) n = -n;\n var parts = n.toFixed(dp).split(\".\");\n // U+00A0 = non-breaking space, so a Finnish amount never wraps mid-number.\n var thou = (lang === \"en\") ? \",\" : \"\\u00A0\";\n var dec = (lang === \"en\") ? \".\" : \",\";\n parts[0] = parts[0].replace(/\\B(?=(\\d{3})+(?!\\d))/g, thou);\n return (neg ? \"-\" : \"\") + (parts.length > 1 ? parts[0] + dec + parts[1] : parts[0]);\n}\n// VAT rates print without trailing zeros: 25,5 / 13,5 / 10 / 0\nfunction pct(v, lang){\n // two decimals, as on the samples Hassan approved (25,50 % / 13,50 % / 0,00 %)\n return money(v, lang, 2);\n}\n\n// =============================================================================\n// LINE ITEMS\n// =============================================================================\nvar lineItemCount=0;\nfunction vatToCode(vat){\n if(vat===25.5||vat===\"25.5\") return \"3000\";\n if(vat===13.5||vat===\"13.5\") return \"3010\";\n if(vat===10 ||vat===\"10\") return \"3020\";\n return \"3030\";\n}\nfunction addLineItem(desc,qty,unit,price,vat,code,type) {\n lineItemCount++;\n var id=\"li_\"+lineItemCount;\n var tbody=document.getElementById(\"lineItemsBody\");\n var tr=document.createElement(\"tr\");\n tr.id=id;\n tr.innerHTML=\n '\u003ctd>\u003cinput type=\"text\" id=\"'+id+'_code\" value=\"'+(code||\"\")+'\">\u003c/td>'+\n '\u003ctd>\u003cinput type=\"text\" id=\"'+id+'_desc\" onchange=\"recalcRow(\\''+id+'\\')\" value=\"'+(desc||\"\")+'\">\u003c/td>'+\n '\u003ctd>\u003cinput type=\"text\" id=\"'+id+'_type\" value=\"'+(type||\"\")+'\" placeholder=\"(none)\" title=\"Blank = this row prints on its own\">\u003c/td>'+\n '\u003ctd>\u003cinput type=\"number\" id=\"'+id+'_qty\" min=\"0\" step=\"any\" onkeyup=\"recalcRow(\\''+id+'\\')\" onchange=\"recalcRow(\\''+id+'\\')\" value=\"'+(qty||1)+'\" style=\"text-align:right\">\u003c/td>'+\n '\u003ctd>\u003cinput type=\"text\" id=\"'+id+'_unit\" value=\"'+(unit||\"kpl\")+'\" style=\"text-align:center\">\u003c/td>'+\n '\u003ctd>\u003cinput type=\"number\" id=\"'+id+'_price\" min=\"0\" step=\"0.01\" onkeyup=\"recalcRow(\\''+id+'\\')\" onchange=\"recalcRow(\\''+id+'\\')\" value=\"'+(price||\"\")+'\">\u003c/td>'+\n '\u003ctd>\u003cselect id=\"'+id+'_vat\" onchange=\"recalcRow(\\''+id+'\\')\">'+vatOptions(vat)+'\u003c/select>\u003c/td>'+\n '\u003ctd>\u003cinput type=\"text\" id=\"'+id+'_net\" readonly style=\"text-align:right;background:#f8f8f8;color:#555\">\u003c/td>'+\n '\u003ctd>\u003cinput type=\"text\" id=\"'+id+'_gross\" readonly style=\"text-align:right;background:#f8f8f8;color:#555\">\u003c/td>'+\n '\u003ctd>\u003cbutton class=\"btn-remove\" onclick=\"removeRow(\\''+id+'\\')\">✕\u003c/button>\u003c/td>';\n tbody.appendChild(tr);\n recalcRow(id);\n}\nfunction vatOptions(sel){\n return [[\"25.5\",\"25,5 %\"],[\"13.5\",\"13,5 %\"],[\"10\",\"10 %\"],[\"0\",\"0 %\"]].map(function(o){\n return '\u003coption value=\"'+o[0]+'\"'+((!sel\u0026\u0026o[0]===\"25.5\")||sel==o[0]?\" selected\":\"\")+'>'+o[1]+'\u003c/option>';\n }).join(\"\");\n}\nfunction removeRow(id){ var r=document.getElementById(id); if(r) r.parentNode.removeChild(r); }\nfunction recalcRow(id){\n var row=document.getElementById(id); if(!row) return;\n // ★ Read by ID, never by position. The pre-2 Sep version indexed\n // querySelectorAll(\"input,select\") as inp[2]/inp[4]/inp[5]; inserting any\n // new column shifted every index and silently zeroed every line total.\n var f=function(sfx){ return document.getElementById(id+sfx); };\n var qty=parseFloat(f(\"_qty\").value)||0;\n var price=parseFloat(f(\"_price\").value)||0;\n var vat=parseFloat(f(\"_vat\").value)||0;\n // ★ a line on an invoice is a CENT amount. Rounding here, once, is what makes\n // line totals, per-rate subtotals and the grand total reconcile exactly.\n var net=round2(qty*price);\n var gross=round2(net*(1+vat/100));\n document.getElementById(id+\"_net\").value=finNum(net);\n document.getElementById(id+\"_gross\").value=finNum(gross);\n var codeEl=document.getElementById(id+\"_code\");\n if(!codeEl.value) codeEl.value=vatToCode(vat);\n}\nfunction getLineItems(){\n var rows=document.querySelectorAll(\"#lineItemsBody tr\"); var items=[];\n rows.forEach(function(tr){\n var f=function(sfx){ return document.getElementById(tr.id+sfx); };\n var vat=parseFloat(f(\"_vat\").value)||0;\n var qty=parseFloat(f(\"_qty\").value)||0;\n var price=parseFloat(f(\"_price\").value)||0;\n var net=round2(qty*price);\n items.push({\n code:f(\"_code\").value||vatToCode(vat), desc:f(\"_desc\").value,\n // ★ Type drives the page-1 grouping. Blank means the row prints as\n // itself. The grouping key is (type, vat, unit) — never type alone,\n // because one printed line carries one VAT rate and one unit.\n type:(f(\"_type\").value||\"\").trim(),\n qty:qty, unit:f(\"_unit\").value, price:price, vat:vat,\n net:net, gross:round2(net*(1+vat/100))\n });\n });\n return items;\n}\n\n// =============================================================================\n// ★ GROUPING — [STATED Hassan, 1 Sep 2026]: \"a separate 'Type' field.\n// If it's blank: no grouping.\"\n// =============================================================================\n// The key is (Type, VAT rate, Unit) — NOT Type alone. A printed line carries one\n// \"VAT %\" cell and one total, so merging 25,5 % with 0 % would state a rate that\n// is false for part of the amount. Unit is in the key for the same reason:\n// 4 008 kpl + 95 km is not a quantity.\n//\n// The Type is never parsed out of the description. An earlier draft split\n// \"Route 2570318 (Newspaper)\" on the bracket, which worked on exactly one\n// client's naming habit and would have mis-grouped silently on any other.\nfunction groupLines(items){\n var out={}, order=[];\n items.forEach(function(it){\n var label = it.type || it.desc;\n var k = label + \"\\u0000\" + it.vat.toFixed(2) + \"\\u0000\" + it.unit;\n if(!out[k]){\n out[k] = {label:label, qty:0, net:0, vat:it.vat, unit:it.unit,\n price:null, mixedPrice:false, n:0};\n order.push(k);\n }\n var g = out[k];\n g.qty = round2(g.qty + it.qty);\n g.net = round2(g.net + it.net);\n g.n++;\n if (g.price === null) g.price = it.price;\n else if (Math.abs(g.price - it.price) > 1e-9) g.mixedPrice = true;\n });\n var lines = order.map(function(k){ return out[k]; });\n // * The last column on page 1 shows the line amount INCLUDING VAT - what a\n // customer reads \"Yhteensa\" to mean, and what page 2 already prints.\n // A group is keyed on (label, VAT rate, unit), so every line inside it\n // carries ONE rate and this gross is exact for the group.\n // The totals block still computes VAT per RATE and rounds it once\n // (calcTotals, AVL 209 e sec. note above) - so this column can sit a cent away\n // from \"Maksettava yhteensa\". [STATED Hassan 22 Sep 2026] that is accepted:\n // it is what most invoicing software does, and the totals block is the\n // authority. Do NOT \"fix\" it by rounding the totals per line.\n lines.forEach(function(g){ g.gross = round2(g.net * (1 + g.vat / 100)); });\n return { lines: lines, collapsed: lines.some(function(g){ return g.n > 1; }) };\n}\n\n// =============================================================================\n// TOTALS — VAT per rate, rounded once. See the AVL 209 e § note above.\n// =============================================================================\nfunction calcTotals(items){\n var per={}, order=[];\n items.forEach(function(it){\n var k = it.vat.toFixed(2);\n if(!per[k]){ per[k] = {rate:it.vat, net:0}; order.push(k); }\n per[k].net = round2(per[k].net + it.net);\n });\n order.sort(function(a,b){ return parseFloat(a) - parseFloat(b); });\n var bands=[], net=0, vat=0;\n order.forEach(function(k){\n var b = per[k];\n var v = round2(b.net * b.rate / 100); // ★ rounded ONCE, per rate\n bands.push({rate:b.rate, net:b.net, vat:v});\n net = round2(net + b.net);\n vat = round2(vat + v);\n });\n return {bands:bands, net:net, vat:vat, gross:round2(net + vat)};\n}\n\n// =============================================================================\n// SENDER FIELDS\n// =============================================================================\nfunction getSenderFields(){\n return {\n companyName:document.getElementById(\"sCompanyName\").value,\n ytunnus: document.getElementById(\"sYtunnus\").value,\n address: document.getElementById(\"sAddress\").value,\n postalCity: document.getElementById(\"sPostalCity\").value,\n domicile: document.getElementById(\"sDomicile\").value,\n iban: document.getElementById(\"sIban\").value,\n bic: document.getElementById(\"sBic\").value,\n bankName: document.getElementById(\"sBankName\").value,\n phone: document.getElementById(\"sPhone\").value,\n email: document.getElementById(\"sEmail\").value,\n web: document.getElementById(\"sWeb\").value,\n pdfLang: document.getElementById(\"pdfLang\").value\n };\n}\nfunction setSenderFields(c){\n if(!c) return;\n function set(id,v){ if(v) document.getElementById(id).value=v; }\n set(\"sCompanyName\",c.companyName); set(\"sYtunnus\",c.ytunnus);\n set(\"sAddress\",c.address); set(\"sPostalCity\",c.postalCity);\n set(\"sDomicile\",c.domicile); set(\"sIban\",c.iban);\n set(\"sBic\",c.bic); set(\"sBankName\",c.bankName);\n set(\"sPhone\",c.phone); set(\"sEmail\",c.email);\n set(\"sWeb\",c.web);\n if (c.pdfLang === \"en\" || c.pdfLang === \"fi\") {\n document.getElementById(\"pdfLang\").value = c.pdfLang;\n }\n}\n// ALV-numero = \"FI\" + Y-tunnus without the hyphen.\nfunction vatNumberFromYtunnus(y){\n var d = String(y||\"\").replace(/[^0-9]/g,\"\");\n return d.length === 8 ? \"FI\" + d : \"\";\n}\n\n// =============================================================================\n// FORM INIT\n// =============================================================================\nvar invoiceNum = 1;\n\nwindow.onload = function() {\n document.getElementById(\"invoiceDate\").value = todayFin();\n updateDueDate();\n addLineItem();\n\n google.script.run\n .withSuccessHandler(function(setup) {\n if (setup \u0026\u0026 setup.error) {\n console.error(\"getInvoiceConfig error:\", setup.error);\n return;\n }\n invoiceNum = setup.invoiceNumber || 1;\n document.getElementById(\"invoiceNumber\").value = invoiceNum;\n updateViitenumero();\n setSenderFields(setup.config);\n setSenderFields(setup.saved);\n recipientProfiles = Array.isArray(setup.recipients) ? setup.recipients : [];\n populateProfileDropdown();\n })\n .withFailureHandler(function(e) { console.error(\"getInvoiceConfig failure:\", e.message); })\n .getInvoiceConfig(PE_CLIENT_ID);\n};\n\n// s356 [STATED Hassan 22 Oct 2026: \"The rest (e.g. IBAN) should be saved for next time on any computer.\"]\n// The sender block is saved in Scribe Core (client_invoice_settings, per client) as soon as a field\n// is changed -- not only when an invoice is made -- so an IBAN typed once is there next time, on\n// any computer. Saves are coalesced: one save 0.7 s after the last change.\nvar _senderSaveT = 0;\nfunction _senderSaveSoon(){\n clearTimeout(_senderSaveT);\n var tag = document.getElementById(\"senderSaved\"); if (tag) { tag.style.color = \"#888\"; tag.textContent = \"saving…\"; }\n _senderSaveT = setTimeout(function(){\n google.script.run\n .withSuccessHandler(function(r){\n var t = document.getElementById(\"senderSaved\"); if (!t) return;\n if (r \u0026\u0026 r.error) { t.style.color = \"#c0392b\"; t.textContent = \"not saved: \" + r.error; return; }\n t.style.color = \"#2e7d32\"; t.textContent = \"saved ✓\";\n })\n .withFailureHandler(function(e){\n var t = document.getElementById(\"senderSaved\"); if (t) { t.style.color = \"#c0392b\"; t.textContent = \"not saved: \" + (e \u0026\u0026 e.message ? e.message : e); }\n })\n .saveInvoiceSenderSettings(PE_CLIENT_ID, JSON.stringify(getSenderFields()));\n }, 700);\n}\n[\"sCompanyName\",\"sYtunnus\",\"sAddress\",\"sPostalCity\",\"sDomicile\",\"sIban\",\"sBic\",\"sBankName\",\"sPhone\",\"sEmail\",\"sWeb\",\"pdfLang\"].forEach(function(id){\n var el = document.getElementById(id); if (el) el.addEventListener(\"change\", _senderSaveSoon);\n});\n\ndocument.getElementById(\"invoiceDate\").addEventListener(\"input\", updateDueDate);\ndocument.getElementById(\"paymentTerms\").addEventListener(\"change\", updateDueDate);\ndocument.getElementById(\"invoiceNumber\").addEventListener(\"input\", updateViitenumero);\n\nfunction updateDueDate(){\n var d=document.getElementById(\"invoiceDate\").value;\n var days=parseInt(document.getElementById(\"paymentTerms\").value)||14;\n var fin=toFin(d);\n if(fin\u0026\u0026fin.indexOf(\".\")>0) document.getElementById(\"dueDate\").value=addDaysFin(fin,days);\n}\nfunction updateViitenumero(){\n var n=parseInt(document.getElementById(\"invoiceNumber\").value)||1;\n document.getElementById(\"viitenumero\").value=getViitenumero(n);\n}\nfunction backToForm(){\n document.getElementById(\"previewPanel\").style.display=\"none\";\n document.getElementById(\"formPanel\").style.display=\"block\";\n}\n\n// =============================================================================\n// HTML ESCAPE\n// =============================================================================\nfunction h(s){ return String(s==null?\"\":s).replace(/\u0026/g,\"\u0026amp;\").replace(/\u003c/g,\"\u0026lt;\").replace(/>/g,\"\u0026gt;\").replace(/\"/g,\"\u0026quot;\"); }\n\n// =============================================================================\n// ERRORS AND NOTES\n// =============================================================================\nfunction showFormError(msg){\n var el=document.getElementById(\"formError\");\n if(!el){ el=document.createElement(\"div\"); el.id=\"formError\";\n el.style.cssText=\"background:#ffd7d7;color:#900;border:1px solid #f00;border-radius:4px;padding:8px 12px;margin-bottom:10px;font-weight:bold\";\n document.getElementById(\"formPanel\").insertBefore(el,document.getElementById(\"formPanel\").firstChild);\n }\n el.textContent=msg; el.scrollIntoView({behavior:\"smooth\"});\n}\nfunction clearFormError(){ var el=document.getElementById(\"formError\"); if(el) el.textContent=\"\"; }\n\n// ★ Design for the failure being VISIBLE. Anything the renderer had to do\n// differently — no barcode, a demoted layout — is stated on screen, above the\n// preview, in a block that does not print.\nvar previewNotes = [];\nfunction note(msg){ previewNotes.push(msg); }\nfunction flushNotes(){\n var box = document.getElementById(\"previewNotes\");\n if (!previewNotes.length) { box.innerHTML = \"\"; return; }\n box.innerHTML = '\u003cdiv class=\"preview-note no-print\">⚠ ' +\n previewNotes.map(h).join('\u003cbr>⚠ ') + '\u003c/div>';\n}\n\n// =============================================================================\n// GENERATE INVOICE — side effects once, then render\n// =============================================================================\nvar LAST = null; // the payload of the last render, so the language can be\n // switched without re-saving or re-incrementing anything.\n\nfunction generateInvoice(){\n try {\n clearFormError();\n var lang = document.getElementById(\"pdfLang\").value === \"en\" ? \"en\" : \"fi\";\n var T = dict(lang);\n\n var allItems = getLineItems();\n var items = allItems.filter(function(it){ return it.desc || it.price > 0; });\n if(!items.length){ showFormError(T.NOITEMS); return; }\n\n var c = getSenderFields();\n var invNum = parseInt(document.getElementById(\"invoiceNumber\").value)||invoiceNum;\n var invDate = toFin(document.getElementById(\"invoiceDate\").value);\n var dueDate = toFin(document.getElementById(\"dueDate\").value);\n var terms = document.getElementById(\"paymentTerms\").value;\n var viitenro= document.getElementById(\"viitenumero\").value||getViitenumero(invNum);\n var lateInt = document.getElementById(\"lateInterest\").value||\"8\";\n var rec = getRecipientFields();\n\n // ── Save sender settings (fire-and-forget) ───────────────────────────────\n google.script.run\n .withSuccessHandler(function(){})\n .withFailureHandler(function(e){ console.warn(\"saveInvoiceSenderSettings:\", e.message); })\n .saveInvoiceSenderSettings(PE_CLIENT_ID, JSON.stringify(c));\n\n // ── Save recipient profile ───────────────────────────────────────────────\n if (document.getElementById(\"saveRecipient\").checked \u0026\u0026 rec.name) {\n var existingIdx = recipientProfiles.findIndex(function(p){\n return p.name \u0026\u0026 p.name.toLowerCase() === rec.name.toLowerCase();\n });\n var newProfile = { name:rec.name, ytunnus:rec.ytunnus, address:rec.address,\n postal:rec.postal, custNum:rec.custNum };\n if (existingIdx >= 0) recipientProfiles[existingIdx] = newProfile;\n else recipientProfiles.push(newProfile);\n populateProfileDropdown();\n saveRecipientProfiles();\n }\n\n // ── Issue the invoice in Core: Core gives the number and does the VAT ────\n var iso = function(f){ var a=String(f||\"\").split(\".\"); return a.length===3 ? a[2]+\"-\"+pad(a[1])+\"-\"+pad(a[0]) : \"\"; };\n var header = { invoice_date: iso(invDate), due_date: iso(dueDate), customer_name: rec.name,\n customer_y_tunnus: rec.ytunnus, customer_ref: rec.custNum };\n var lines = items.map(function(it){\n return { account_code: it.code, description: it.desc, quantity: it.qty,\n unit_price: it.price, net_amount: it.net };\n });\n var btn = document.querySelector(\"button[onclick^='generateInvoice']\");\n if (btn) btn.disabled = true;\n google.script.run\n .withSuccessHandler(function(res){\n if (btn) btn.disabled = false;\n if (!res || res.error || !res.invoice) {\n showFormError((res \u0026\u0026 res.error) || \"Scribe 2.0 did not issue the invoice, so nothing was saved.\");\n return;\n }\n try {\n invNum = parseInt(res.invoice.invoice_no) || invNum;\n viitenro = getViitenumero(invNum);\n LAST = {\n items:items, c:c, invNum:invNum, invDate:invDate, dueDate:dueDate,\n terms:terms, viitenro:viitenro, lateInt:lateInt, rec:rec,\n delDate: document.getElementById(\"deliveryDate\").value,\n remDays: document.getElementById(\"reminderDays\").value,\n period: document.getElementById(\"servicePeriod\").value,\n delTerms:document.getElementById(\"deliveryTerms\").value,\n delMeth: document.getElementById(\"deliveryMethod\").value\n };\n renderInvoice(lang);\n // the next invoice number is Core's; show it after this one is out\n invoiceNum = invNum + 1;\n document.getElementById(\"invoiceNumber\").value = invoiceNum;\n updateViitenumero();\n } catch(err2) { showFormError(dict(lang).ERR + err2.message); console.error(err2); }\n })\n .withFailureHandler(function(e){\n if (btn) btn.disabled = false;\n showFormError(\"Scribe 2.0 did not issue the invoice, so nothing was saved: \" + e.message);\n })\n .issueInvoice(PE_CLIENT_ID, JSON.stringify(header), JSON.stringify(lines));\n\n } catch(err) {\n showFormError(dict(document.getElementById(\"pdfLang\").value).ERR + err.message);\n document.getElementById(\"formPanel\").style.display=\"block\";\n document.getElementById(\"previewPanel\").style.display=\"none\";\n console.error(err);\n }\n}\n\n// ★ Re-render in the other language. NO side effects — the counter is not\n// incremented again and nothing is re-saved.\nfunction switchLang(lang){\n if (!LAST) return;\n document.getElementById(\"pdfLang\").value = lang;\n renderInvoice(lang);\n}\n\n// =============================================================================\n// RENDER\n// =============================================================================\nfunction renderInvoice(lang){\n var T = dict(lang);\n var d = LAST;\n var items = d.items;\n var c = d.c, rec = d.rec;\n\n // ★ The panel must be VISIBLE before anything is measured: a display:none\n // element reports every rectangle as zero, which reads as \"no clear air\"\n // and demotes a layout that would have fitted perfectly. Caught by the\n // headless render test, not by reading the code.\n document.getElementById(\"formPanel\").style.display = \"none\";\n document.getElementById(\"previewPanel\").style.display = \"block\";\n\n var tot = calcTotals(items);\n var gr = groupLines(items);\n var lines = gr.lines;\n var collapsed = gr.collapsed;\n\n // ── ★ THE PAGE-2 RULE — two INDEPENDENT triggers ─────────────────────────\n // (a) grouping collapsed rows -> page 2 carries the breakdown\n // (b) page-1 lines exceed capacity -> they cannot be shown on page 1\n //\n // (b) is the case that caused the original bug and that Hassan's first\n // draft rule missed: Type blank AND 40 rows. Nothing collapses, so no\n // breakdown is owed — but 40 rows do not fit and must go somewhere.\n //\n // On (b) page 1 falls back to ONE LUMP LINE PER VAT RATE — [STATED Hassan,\n // 2 Sep 2026]: \"page 1 should have at least something in my opinion, it\n // looks very odd as per the Finnish standards.\"\n // ★ That fallback is NOT self-evidently safe, contrary to build.py: with\n // four VAT rates it is four lump lines AND four totals rows, and it\n // misses by 17mm. What closes the rule is the measurement below, not a\n // count of lines.\n var lumped = lines.length > MAX_P1_LINES;\n if (lumped) lines = lumpByVat(tot, T);\n\n // First render.\n paint(lang, lines, collapsed || lumped, lumped);\n\n // ★ Then MEASURE, and demote if the header turned out taller than the\n // calibration assumed. build.py could not do this; a browser can.\n var clear = measureClear();\n if (clear !== null \u0026\u0026 clear \u003c MIN_CLEAR_PX \u0026\u0026 !lumped) {\n lumped = true;\n lines = lumpByVat(tot, T);\n paint(lang, lines, true, true);\n clear = measureClear();\n note(lang === \"en\"\n ? \"Page 1 was summarised by VAT rate because the detail lines do not fit above the giro form. The full line-by-line breakdown is on page 2.\"\n : \"Sivu 1 on koottu verokannoittain, koska rivit eivät mahdu tilisiirron yläpuolelle. Täydellinen erittely on sivulla 2.\");\n }\n // Last resort: even the lump layout collides. Scale the flowing part of\n // page 1 only — the footer stays pinned and full size.\n if (clear !== null \u0026\u0026 clear \u003c MIN_CLEAR_PX) {\n var flow = document.querySelector(\"#invoiceOutput .iv-p1 .iv-flow\");\n if (flow \u0026\u0026 flow.offsetHeight > 0) {\n var have = flow.offsetHeight;\n var want = have - (MIN_CLEAR_PX - clear);\n var s = Math.max(0.6, want / have);\n flow.style.transform = \"scale(\" + s + \")\";\n flow.style.height = Math.ceil(have * s) + \"px\";\n flow.setAttribute(\"data-fit\", s.toFixed(3));\n note(lang === \"en\"\n ? \"Page 1 was reduced to \" + Math.round(s*100) + \"% to keep the giro form on the page. Check it before sending.\"\n : \"Sivun 1 yläosaa pienennettiin \" + Math.round(s*100) + \" %:iin, jotta tilisiirto mahtuu sivulle. Tarkista lasku ennen lähetystä.\");\n }\n }\n\n numberPages(lang);\n flushNotes();\n\n document.getElementById(\"langFi\").style.fontWeight = (lang === \"fi\") ? \"800\" : \"600\";\n document.getElementById(\"langEn\").style.fontWeight = (lang === \"en\") ? \"800\" : \"600\";\n window.scrollTo(0, 0);\n}\n\nfunction lumpByVat(tot, T){\n // Qty, Unit and Unit price are left EMPTY on a lump line: one rate can span\n // kpl and km, and 4 008 kpl + 95 km is not a quantity. Stating a number there\n // would be worse than stating nothing.\n return tot.bands.map(function(b){\n return {label:T.LUMP, qty:null, net:b.net, vat:b.rate, unit:\"\",\n price:null, mixedPrice:false, n:0};\n });\n}\n\n// Clear air in px between the bottom of the totals block and the top of the\n// pinned footer, on page 1. Null when the elements are not present.\nfunction measureClear(){\n var p1 = document.querySelector(\"#invoiceOutput .iv-p1\");\n if (!p1) return null;\n var tw = p1.querySelector(\".totwrap\");\n var ft = p1.querySelector(\".foot\");\n if (!tw || !ft) return null;\n var pTop = p1.getBoundingClientRect().top;\n var twB = tw.getBoundingClientRect().bottom - pTop;\n var ftT = ft.getBoundingClientRect().top - pTop;\n return ftT - twB;\n}\n\nfunction numberPages(lang){\n var T = dict(lang);\n var pages = document.querySelectorAll(\"#invoiceOutput .iv-page\");\n // Page 2 flows, so it can occupy more than one printed sheet. Count them.\n var sheets = 0;\n Array.prototype.forEach.call(pages, function(p){\n sheets += Math.max(1, Math.ceil((p.offsetHeight - 2) / (297 * PX_PER_MM)));\n });\n var n = 0;\n Array.prototype.forEach.call(pages, function(p){\n var m = p.querySelector(\".pg\");\n n += 1;\n if (m) m.textContent = (sheets > 1) ? fill(T.PAGE, {a:n, b:sheets}) : \"\";\n });\n}\n\n// =============================================================================\n// PAINT — build the document HTML\n// =============================================================================\nfunction paint(lang, lines, needsP2, lumped){\n var T = dict(lang);\n previewNotes = []; // a re-paint replaces the notes, never appends\n var d = LAST, c = d.c, rec = d.rec, cur = \"€\";\n var items = d.items;\n var tot = calcTotals(items);\n\n // ── key/value table (right of the header) — optional rows only when filled ─\n var kv = [];\n function kvRow(label, value){\n if (value === \"\" || value == null) return;\n kv.push(\"\u003ctr>\u003cth>\" + h(label) + \"\u003c/th>\u003ctd>\" + h(value) + \"\u003c/td>\u003c/tr>\");\n }\n kvRow(T.KV_NO, d.invNum);\n kvRow(T.KV_DATE, d.invDate);\n kvRow(T.KV_TERMS, fill(T.DAYS, {n: d.terms}));\n kvRow(T.KV_DUE, d.dueDate);\n kvRow(T.KV_INT, (parseFloat(d.lateInt)||0).toFixed(2).replace(\".\", lang===\"en\"?\".\":\",\") + \" %\");\n kvRow(T.KV_REF, d.viitenro);\n kvRow(T.KV_CUST, rec.custNum);\n kvRow(T.KV_CUSTYT, rec.ytunnus);\n kvRow(T.KV_DELDATE, d.delDate);\n kvRow(T.KV_REMIND, d.remDays);\n kvRow(T.KV_DELTERMS, d.delTerms);\n kvRow(T.KV_DELMETH, d.delMeth);\n\n // ── page-1 line rows ──────────────────────────────────────────────────────\n var rows1 = lines.map(function(g){\n if (g.qty === null) { // lump line\n return \"\u003ctr>\u003ctd>\" + h(g.label) + \"\u003c/td>\" +\n '\u003ctd class=\"r\">' + h(d.invDate) + \"\u003c/td>\" +\n '\u003ctd class=\"r\">\u003c/td>\u003ctd class=\"c\">\u003c/td>\u003ctd class=\"r\">\u003c/td>' +\n '\u003ctd class=\"r\">' + pct(g.vat, lang) + \" %\u003c/td>\" +\n '\u003ctd class=\"r\">' + cur + money(g.gross, lang) + \"\u003c/td>\u003c/tr>\";\n }\n // ★ the unit price prints ONLY when the whole group shares one — otherwise\n // blank. A blended average would fail the first qty x price check anybody\n // does with a calculator.\n var up = g.mixedPrice ? \"\" : (cur + money(g.price, lang));\n return \"\u003ctr>\u003ctd>\" + h(g.label) + \"\u003c/td>\" +\n '\u003ctd class=\"r\">' + h(d.invDate) + \"\u003c/td>\" +\n '\u003ctd class=\"r\">' + money(g.qty, lang) + \"\u003c/td>\" +\n '\u003ctd class=\"c\">' + h(g.unit) + \"\u003c/td>\" +\n '\u003ctd class=\"r\">' + up + \"\u003c/td>\" +\n '\u003ctd class=\"r\">' + pct(g.vat, lang) + \" %\u003c/td>\" +\n '\u003ctd class=\"r\">' + cur + money(g.gross, lang) + \"\u003c/td>\u003c/tr>\";\n }).join(\"\");\n\n // ── totals block ──────────────────────────────────────────────────────────\n var totRows = ['\u003ctr>\u003ctd>' + h(T.EXVAT) + '\u003c/td>\u003ctd class=\"v\">' + cur + money(tot.net, lang) + \"\u003c/td>\u003c/tr>\"];\n tot.bands.forEach(function(b){\n totRows.push('\u003ctr>\u003ctd>' + h(T.VATPC.replace(\" %\",\"\")) + \" \" + pct(b.rate, lang) +\n ' %\u003c/td>\u003ctd class=\"v\">' + cur + money(b.vat, lang) + \"\u003c/td>\u003c/tr>\");\n });\n totRows.push('\u003ctr>\u003ctd>' + h(T.VATTOT) + '\u003c/td>\u003ctd class=\"v\">' + cur + money(tot.vat, lang) + \"\u003c/td>\u003c/tr>\");\n totRows.push('\u003ctr class=\"due\">\u003ctd>' + h(T.DUEAMT) + '\u003c/td>\u003ctd class=\"v\">' + cur + money(tot.gross, lang) + \"\u003c/td>\u003c/tr>\");\n var totalsHtml = totRows.join(\"\");\n\n // ── barcode ───────────────────────────────────────────────────────────────\n var bc = buildBarcodeString(c.iban, tot.gross, d.viitenro, d.dueDate);\n var bcSvg = bc.str ? generateCode128SVG(bc.str, 40) : \"\";\n if (!bc.str) {\n note(lang === \"en\"\n ? \"No payment barcode was printed because \" + bc.reasons.join(\"; \") +\n \". The giro form is still valid without it.\"\n : \"Viivakoodia ei tulostettu, koska \" + bc.reasons.join(\"; \") +\n \". Tilisiirtolomake on silti pätevä ilman sitä.\");\n }\n\n var vatNo = vatNumberFromYtunnus(c.ytunnus);\n var conum = h(c.ytunnus) + (vatNo ? \" / \" + vatNo : \"\");\n var seeP2 = needsP2 ? fill(T.SEEP2, {n: items.length}) : \"\";\n\n // ── PAGE 1 ────────────────────────────────────────────────────────────────\n var p1 =\n '\u003cdiv class=\"iv-page iv-p1\">' +\n '\u003cdiv class=\"iv-flow\">' +\n '\u003cdiv class=\"head\">' +\n '\u003cdiv class=\"from\">\u003cspan class=\"nm\">' + h(c.companyName) + \"\u003c/span>\u003cbr>\" +\n h(c.address) + \"\u003cbr>\" + h(c.postalCity) + \"\u003c/div>\" +\n '\u003cdiv class=\"to\">' + h(rec.name) + \"\u003cbr>\" + h(rec.address) + \"\u003cbr>\" + h(rec.postal) + \"\u003c/div>\" +\n '\u003ch1 class=\"inv-title\">' + h(T.INVOICE) + \"\u003c/h1>\" +\n '\u003cdiv class=\"pg\">\u003c/div>' +\n '\u003cdiv class=\"kvwrap\">\u003ctable class=\"kv\">' + kv.join(\"\") + \"\u003c/table>\u003c/div>\" +\n \"\u003c/div>\" +\n (d.period ? '\u003cdiv class=\"period\">' + h(d.period) + \"\u003c/div>\" : '\u003cdiv class=\"period\">\u0026nbsp;\u003c/div>') +\n '\u003ctable class=\"lines\">\u003cthead>\u003ctr>' +\n \"\u003cth>\" + h(T.DESC) + '\u003c/th>\u003cth class=\"r\">' + h(T.DATE) + '\u003c/th>\u003cth class=\"r\">' + h(T.QTY) + \"\u003c/th>\" +\n '\u003cth class=\"c\">' + h(T.UNIT) + '\u003c/th>\u003cth class=\"r\">' + h(T.PRICE) + \"\u003c/th>\" +\n '\u003cth class=\"r\">' + h(T.VATPC) + '\u003c/th>\u003cth class=\"r\">' + h(T.TOTAL) + \"\u003c/th>\" +\n \"\u003c/tr>\u003c/thead>\u003ctbody>\" + rows1 + \"\u003c/tbody>\u003c/table>\" +\n '\u003cdiv class=\"totwrap\">' +\n '\u003cdiv class=\"totleft\">' + h(d.period) +\n '\u003cdiv style=\"font-style:normal;font-size:8pt;color:#333;margin-top:4mm\">' + h(seeP2) + \"\u003c/div>\" +\n \"\u003c/div>\" +\n '\u003ctable class=\"tot\">' + totalsHtml + \"\u003c/table>\" +\n \"\u003c/div>\" +\n \"\u003c/div>\" +\n // ── the pinned footer. Its position does not depend on row count. ───────\n '\u003cdiv class=\"foot\">' +\n '\u003cdiv class=\"rule\">\u003c/div>' +\n '\u003cdiv class=\"info\">' +\n '\u003cdiv class=\"col\">' +\n '\u003cdiv class=\"r\">\u003cdiv class=\"l\">' + h(T.COMPANY) + '\u003c/div>\u003cdiv class=\"v\">' + h(c.companyName) + \"\u003c/div>\u003c/div>\" +\n '\u003cdiv class=\"r\">\u003cdiv class=\"l\">' + h(T.ADDRESS) + '\u003c/div>\u003cdiv class=\"v\">' + h(c.address) + (c.postalCity ? \", \" + h(c.postalCity) : \"\") + \"\u003c/div>\u003c/div>\" +\n '\u003cdiv class=\"r\">\u003cdiv class=\"l\">' + h(T.CONUM) + '\u003c/div>\u003cdiv class=\"v\">' + conum + \"\u003c/div>\u003c/div>\" +\n \"\u003c/div>\" +\n '\u003cdiv class=\"col b\">' +\n '\u003cdiv class=\"r\">\u003cdiv class=\"l\">' + h(T.TEL) + '\u003c/div>\u003cdiv class=\"v\">' + h(c.phone) + \"\u003c/div>\u003c/div>\" +\n '\u003cdiv class=\"r\">\u003cdiv class=\"l\">' + h(T.EMAIL) + '\u003c/div>\u003cdiv class=\"v\">' + h(c.email) + \"\u003c/div>\u003c/div>\" +\n '\u003cdiv class=\"r\">\u003cdiv class=\"l\">' + h(T.WWW) + '\u003c/div>\u003cdiv class=\"v\">' + h(c.web) + \"\u003c/div>\u003c/div>\" +\n \"\u003c/div>\" +\n \"\u003c/div>\" +\n '\u003cdiv class=\"cut\">\u003c/div>' +\n '\u003ctable class=\"giro\">' +\n '\u003ccolgroup>\u003ccol style=\"width:24mm\">\u003ccol style=\"width:82mm\">\u003ccol>\u003c/colgroup>' +\n \"\u003ctr>\" +\n '\u003ctd class=\"lab\">' + GIRO.ACCT + \"\u003c/td>\" +\n '\u003ctd>\u003cspan class=\"tag\">IBAN\u003c/span>\u003cspan class=\"big\">' +\n (c.bankName ? h(c.bankName) + \" \u0026nbsp; \" : \"\") + h(c.iban) + \"\u003c/span>\u003c/td>\" +\n '\u003ctd>\u003cspan class=\"tag\">' + GIRO.BIC + '\u003c/span>\u003cspan class=\"big\">' + h(c.bic) + \"\u003c/span>\u003c/td>\" +\n \"\u003c/tr>\" +\n \"\u003ctr>\" +\n '\u003ctd class=\"lab\">' + GIRO.RECIP + \"\u003c/td>\" +\n '\u003ctd class=\"cellh\">' + h(c.companyName) + \"\u003cbr>\" + h(c.address) + \"\u003cbr>\" + h(c.postalCity) + \"\u003c/td>\" +\n '\u003ctd rowspan=\"2\">\u003c/td>' +\n \"\u003c/tr>\" +\n \"\u003ctr>\" +\n '\u003ctd class=\"lab\">' + GIRO.PAYER + \"\u003c/td>\" +\n '\u003ctd class=\"cellh\" style=\"border-bottom:none\">' + h(rec.name) + \"\u003cbr>\" + h(rec.address) + \"\u003cbr>\" + h(rec.postal) + \"\u003c/td>\" +\n \"\u003c/tr>\" +\n \"\u003ctr>\" +\n '\u003ctd class=\"lab\">' + GIRO.SIG + \"\u003c/td>\" +\n '\u003ctd style=\"border-top:none\">\u003cdiv class=\"sig\">\u003c/div>\u003c/td>' +\n '\u003ctd>\u003cspan class=\"tag\">' + GIRO.REF + '\u003c/span>\u003cspan class=\"big\">' + h(d.viitenro) + \"\u003c/span>\u003c/td>\" +\n \"\u003c/tr>\" +\n \"\u003ctr>\" +\n '\u003ctd class=\"lab\">' + GIRO.FROM + \"\u003c/td>\" +\n '\u003ctd style=\"height:11mm\">\u003c/td>' +\n '\u003ctd style=\"padding:0\">' +\n '\u003ctable style=\"width:100%;border-collapse:collapse\">\u003ctr>' +\n '\u003ctd style=\"border:none;border-right:1px solid #000;padding:1.5mm 2mm;width:55%\">' +\n '\u003cspan class=\"tag\">' + GIRO.DUE + '\u003c/span>\u003cspan class=\"big\">' + h(d.dueDate) + \"\u003c/span>\u003c/td>\" +\n '\u003ctd style=\"border:none;padding:1.5mm 2mm\">' +\n '\u003cspan class=\"tag\">' + GIRO.TOT + '\u003c/span>\u003cspan class=\"big\">' + money(tot.gross, lang) + \"\u003c/span>\u003c/td>\" +\n \"\u003c/tr>\u003c/table>\" +\n \"\u003c/td>\" +\n \"\u003c/tr>\" +\n \"\u003c/table>\" +\n '\u003cdiv class=\"bcwrap\">' +\n '\u003cdiv class=\"bc\">' +\n (bc.str ? '\u003cdiv class=\"bcdigits\">' + bc.str + \"\u003c/div>\" + bcSvg : \"\") +\n \"\u003c/div>\" +\n '\u003cdiv class=\"terms\">' + GIRO.TERMS + \"\u003c/div>\" +\n \"\u003c/div>\" +\n \"\u003c/div>\" +\n \"\u003c/div>\";\n\n // ── PAGE 2 — the full line-by-line breakdown. Flows; never clipped. ───────\n var p2 = \"\";\n if (needsP2) {\n var rows2 = items.map(function(it){\n return \"\u003ctr>\u003ctd>\" + h(it.desc) + \"\u003c/td>\u003ctd>\" + h(it.type) + \"\u003c/td>\" +\n '\u003ctd class=\"r\">' + money(it.qty, lang) + \"\u003c/td>\" +\n '\u003ctd class=\"c\">' + h(it.unit) + \"\u003c/td>\" +\n '\u003ctd class=\"r\">' + cur + money(it.price, lang) + \"\u003c/td>\" +\n '\u003ctd class=\"r\">' + cur + money(it.net, lang) + \"\u003c/td>\" +\n '\u003ctd class=\"r\">' + pct(it.vat, lang) + \" %\u003c/td>\" +\n '\u003ctd class=\"r\">' + cur + money(it.gross, lang) + \"\u003c/td>\u003c/tr>\";\n }).join(\"\");\n p2 =\n '\u003cdiv class=\"iv-page iv-p2\">' +\n '\u003cdiv class=\"pg\" style=\"right:10mm\">\u003c/div>' +\n '\u003ch2 class=\"bd\">' + h(T.BREAKDOWN) + \"\u003c/h2>\" +\n '\u003cp class=\"sub\">' + h(c.companyName) + \" \u0026nbsp;\u0026bull;\u0026nbsp; \" + h(T.INVOICE_N) + \" \" +\n h(d.invNum) + (d.period ? \" \u0026nbsp;\u0026bull;\u0026nbsp; \" + h(d.period) : \"\") + \"\u003c/p>\" +\n '\u003ctable class=\"lines\">\u003cthead>\u003ctr>' +\n \"\u003cth>\" + h(T.DESC) + \"\u003c/th>\u003cth>\" + h(T.TYPE) + '\u003c/th>\u003cth class=\"r\">' + h(T.QTY) + \"\u003c/th>\" +\n '\u003cth class=\"c\">' + h(T.UNIT) + '\u003c/th>\u003cth class=\"r\">' + h(T.PRICE) + \"\u003c/th>\" +\n '\u003cth class=\"r\">' + h(T.NET) + '\u003c/th>\u003cth class=\"r\">' + h(T.VATPC) + \"\u003c/th>\" +\n '\u003cth class=\"r\">' + h(T.TOTAL) + \"\u003c/th>\" +\n \"\u003c/tr>\u003c/thead>\u003ctbody>\" + rows2 + \"\u003c/tbody>\u003c/table>\" +\n '\u003ctable class=\"p2tot\">' + totalsHtml + \"\u003c/table>\" +\n \"\u003c/div>\";\n }\n\n document.getElementById(\"invoiceOutput\").innerHTML = p1 + p2;\n}\n\u003c/script>\n\u003c/body>\n\u003c/html>\n"