npm - @facturion/invoice-renderer - Versions diffs - 0.1.0 → 0.2.0 - Mend

@facturion/invoice-renderer 0.1.0 → 0.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (9) hide show

package/index.d.ts CHANGED Viewed

@@ -5,7 +5,7 @@ export type Lang = "en" | "de";
 /** Label resolver: `(key, vars?) => string`, returning the key unchanged on a miss. */
 export type TFunction = (key: string, vars?: Record<string, unknown>) => string;
-export { lineNet, computeTotals } from "@facturion/invoice";
+export { lineNet, computeTotals } from "@facturion/invoice/model";
 /** HTML-escape a value (`&`, `<`, `>`, `"`). */
 export function esc(s: unknown): string;

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@facturion/invoice-renderer",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Render the @facturion/invoice simplified-JSON model to a human-readable HTML invoice — the presentation layer behind Facturion's invoice PDFs.",
   "keywords": [
     "en16931",
@@ -28,9 +28,7 @@
       "types": "./index.d.ts",
       "default": "./src/index.js"
     },
-    "./styles/view.css": "./styles/view.css",
-    "./styles/utilities.css": "./styles/utilities.css",
-    "./styles/variables.css": "./styles/variables.css",
+    "./styles/invoice.css": "./styles/invoice.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -42,12 +40,15 @@
     "NOTICE"
   ],
   "scripts": {
+    "generate": "node scripts/generate-styles.mjs",
+    "prepare": "npm run generate",
+    "pretest": "npm run generate",
     "test": "node --test test/*.test.js",
     "prepublishOnly": "npm test"
   },
   "dependencies": {
     "@facturion/codelists": "^0.1.1",
-    "@facturion/invoice": "^0.1.0"
+    "@facturion/invoice": "^0.1.1"
   },
   "engines": {
     "node": ">=20"

package/src/document.js CHANGED Viewed

@@ -1,17 +1,14 @@
 // Batteries-included wrapper: a standalone HTML document for an invoice, with
 // the bundled stylesheet inlined and a default label resolver. This is what an
 // HTML→PDF service (e.g. headless Chromium) consumes.
+//
+// The CSS is embedded as JS strings (./styles.js, generated from styles/*.css),
+// so this module has no filesystem dependency and works in the browser as well
+// as in Node.
-import { readFileSync } from "node:fs";
-import { dirname, join } from "node:path";
-import { fileURLToPath } from "node:url";
 import { renderInvoice } from "./render.js";
 import { makeT, DEFAULT_LANG } from "./i18n.js";
-const _stylesDir = join(dirname(fileURLToPath(import.meta.url)), "..", "styles");
-const _variablesCss = readFileSync(join(_stylesDir, "variables.css"), "utf-8");
-const _utilitiesCss = readFileSync(join(_stylesDir, "utilities.css"), "utf-8");
-const _viewCss = readFileSync(join(_stylesDir, "view.css"), "utf-8");
+import { invoiceCss } from "./styles.js";
 const _HTML_LANG = { en: "en", de: "de" };
@@ -32,9 +29,7 @@ export function renderInvoiceDocument(invoice, { lang = DEFAULT_LANG, t } = {})
 <head>
 <meta charset="utf-8">
 <style>
-${_variablesCss}
-${_utilitiesCss}
-${_viewCss}
+${invoiceCss}
 body { margin: 0; padding: 0; background: #fff; }
 </style>
 </head>

package/src/render.js CHANGED Viewed

@@ -10,7 +10,10 @@
 // and `units.*` / `paymentMeans.*` vocabulary. `renderInvoiceDocument` supplies
 // a default `t` (bundled strings + @facturion/codelists); advanced callers pass
 // their own. The net/total math comes from @facturion/invoice.
-import { computeTotals, lineNet } from "@facturion/invoice";
+// Import from the pure ./model subpath, not the package root — the root eagerly
+// compiles Ajv validators at load, which we don't want dragged into the renderer
+// (and, transitively, the browser) bundle just for the net/total math.
+import { computeTotals, lineNet } from "@facturion/invoice/model";
 export { computeTotals, lineNet };

package/src/styles.js ADDED Viewed

@@ -0,0 +1,4 @@
+// Generated by scripts/generate-styles.mjs from styles/invoice.css.
+// Do not edit by hand.
+export const invoiceCss = "/* @facturion/invoice-renderer — invoice render stylesheet.\n * The traditional invoice rendering (.invoice-paper / .inv-*), self-contained:\n * design tokens are scoped to .invoice-paper (not :root) so importing this into\n * a host app neither depends on nor collides with the app's global tokens.\n * Light is the default; .invoice-paper--dark is the dark theme (preview only). */\n\n.invoice-paper {\n  --bg-card: #18223a;\n  --bg-elevated: #1d2742;\n  --border: rgba(255, 255, 255, 0.08);\n  --border-light: rgba(255, 255, 255, 0.14);\n  --primary-light: #7fa0d8;\n  --radius-md: 8px;\n  --radius-sm: 4px;\n  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);\n  --space-1: 0.25rem;\n  --space-10: 2.5rem;\n  --space-2: 0.5rem;\n  --space-3: 0.75rem;\n  --space-4: 1rem;\n  --space-6: 1.5rem;\n  --space-8: 2rem;\n  --text: #e7ecf6;\n  --text-base: 1rem;\n  --text-muted: #647190;\n  --text-secondary: #99a6bf;\n  --text-sm: 0.875rem;\n  --text-xl: 1.3rem;\n  --text-xs: 0.8125rem;\n}\n\n/* Table base (scoped) */\n.invoice-paper .data-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--text-sm);\n}\n\n.invoice-paper .data-table th,\n.invoice-paper .data-table td {\n  text-align: left;\n  padding: var(--space-2) var(--space-3);\n  border-bottom: 1px solid var(--border);\n}\n\n.invoice-paper .data-table th {\n  color: var(--text-secondary);\n  font-weight: 500;\n  font-size: var(--text-xs);\n  text-transform: uppercase;\n  letter-spacing: 0.04em;\n}\n\n.invoice-paper .data-table td {\n  color: var(--text-secondary);\n}\n\n.invoice-paper .data-table code {\n  font-size: var(--text-xs);\n  color: var(--primary-light);\n}\n\n/* Invoice render rules */\n.invoice-paper {\n  background: #fdf8f0;\n  color: #111;\n  border-radius: var(--radius-md);\n  padding: var(--space-10);\n  box-shadow: var(--shadow-lg);\n  font-size: var(--text-sm);\n  line-height: 1.6;\n}\n\n.inv-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: flex-start;\n  margin-bottom: var(--space-8);\n  padding-bottom: var(--space-6);\n  border-bottom: 2px solid #e2e8f0;\n}\n\n.inv-type {\n  font-size: var(--text-xs);\n  font-weight: 700;\n  letter-spacing: 0.1em;\n  text-transform: uppercase;\n  color: #64748b;\n  margin-bottom: var(--space-1);\n}\n\n.inv-id {\n  font-size: var(--text-xl);\n  font-weight: 700;\n  color: #0f172a;\n}\n\n.inv-header-right {\n  text-align: right;\n  color: #475569;\n}\n\n.inv-header-right > div {\n  margin-bottom: var(--space-1);\n}\n\n.inv-parties {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: var(--space-8);\n  margin-bottom: var(--space-8);\n}\n\n.inv-party-label {\n  font-size: var(--text-xs);\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: #94a3b8;\n  margin-bottom: var(--space-2);\n}\n\n.inv-party-name {\n  font-weight: 600;\n  color: #0f172a;\n  margin-bottom: var(--space-1);\n}\n\n.inv-party > div {\n  color: #475569;\n}\n\n.inv-party-trading {\n  font-style: italic;\n  color: #64748b !important;\n  margin-bottom: var(--space-1);\n}\n\n.inv-party-legal {\n  margin-top: var(--space-2);\n  font-size: var(--text-xs);\n  color: #64748b !important;\n  line-height: 1.4;\n}\n\n.inv-party-contact {\n  margin-top: var(--space-2);\n  font-size: var(--text-xs);\n  color: #475569 !important;\n}\n\n.inv-parties-secondary {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));\n  gap: var(--space-6);\n  margin-bottom: var(--space-8);\n}\n\n.inv-references {\n  display: grid;\n  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));\n  gap: var(--space-1) var(--space-6);\n  margin-bottom: var(--space-6);\n  padding: var(--space-3) var(--space-4);\n  background: #f5ede0;\n  border-radius: var(--radius-sm);\n  font-size: var(--text-xs);\n}\n\n.inv-ref {\n  display: flex;\n  gap: var(--space-2);\n  color: #475569;\n}\n\n.inv-ref-label {\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  color: #64748b;\n  text-transform: uppercase;\n  flex-shrink: 0;\n}\n\n.inv-ref-value {\n  color: #0f172a;\n  word-break: break-all;\n}\n\n.inv-period {\n  margin-bottom: var(--space-6);\n  padding: var(--space-2) var(--space-4);\n  background: #f5ede0;\n  border-left: 3px solid #94a3b8;\n  border-radius: var(--radius-sm);\n  color: #334155;\n  font-size: var(--text-sm);\n}\n\n.inv-notes,\n.inv-payment {\n  margin-bottom: var(--space-6);\n  padding: var(--space-4);\n  background: #f5ede0;\n  border-radius: var(--radius-sm);\n  color: #334155;\n}\n\n.inv-references,\n.inv-period,\n.inv-notes,\n.inv-payment,\n.inv-payment-terms,\n.inv-totals-wrap,\n.inv-lines tr {\n  break-inside: avoid;\n}\n\n.inv-notes p {\n  margin: 0 0 var(--space-2) 0;\n}\n\n.inv-notes p:last-child {\n  margin-bottom: 0;\n}\n\n.inv-payment > div {\n  margin-bottom: var(--space-1);\n}\n\n.inv-section-label {\n  font-size: var(--text-xs);\n  font-weight: 700;\n  letter-spacing: 0.08em;\n  text-transform: uppercase;\n  color: #64748b;\n  margin-bottom: var(--space-2);\n}\n\n.inv-label {\n  font-size: var(--text-xs);\n  font-weight: 600;\n  letter-spacing: 0.04em;\n  text-transform: uppercase;\n  color: #94a3b8;\n  margin-right: 0.3em;\n}\n\n.inv-lines-wrap {\n  margin-bottom: var(--space-6);\n  overflow-x: auto;\n}\n\n.inv-lines {\n  color: #1e293b;\n}\n\n.inv-lines thead th {\n  background: #f5ede0;\n  color: #64748b;\n}\n\n.inv-col-id {\n  width: 3rem;\n  color: #94a3b8;\n}\n\n.inv-col-desc {\n  /* takes remaining space */\n}\n\n.inv-col-num {\n  text-align: right;\n  white-space: nowrap;\n}\n\n.inv-line-name {\n  font-weight: 500;\n  color: #0f172a;\n}\n\n.inv-line-desc,\n.inv-line-meta,\n.inv-line-allowance,\n.inv-line-charge {\n  font-size: var(--text-xs);\n  color: #64748b;\n  line-height: 1.4;\n}\n\n.inv-line-meta {\n  margin-top: var(--space-1);\n}\n\n.inv-line-allowance {\n  color: #b45309;  /* amber-700 */\n}\n\n.inv-line-charge {\n  color: #475569;\n}\n\n.inv-line-price-gross {\n  font-size: var(--text-xs);\n  color: #94a3b8;\n  text-decoration: line-through;\n}\n\n.inv-vat-base {\n  font-size: var(--text-xs);\n  color: #94a3b8;\n  font-weight: 400;\n}\n\n.inv-vat-reason td {\n  padding-top: 0 !important;\n  padding-bottom: var(--space-2) !important;\n  font-size: var(--text-xs);\n  font-style: italic;\n  color: #64748b;\n  line-height: 1.3;\n}\n\n.inv-totals-wrap {\n  display: flex;\n  justify-content: flex-end;\n  margin-bottom: var(--space-6);\n}\n\n.inv-totals {\n  min-width: 280px;\n  border-collapse: collapse;\n  color: #1e293b;\n}\n\n.inv-totals td {\n  padding: var(--space-1) var(--space-3);\n}\n\n.inv-totals td:first-child {\n  color: #475569;\n}\n\n.inv-totals td.inv-col-num {\n  font-variant-numeric: tabular-nums;\n}\n\n.inv-totals tr:first-child td {\n  padding-top: var(--space-3);\n  border-top: 1px solid #e2e8f0;\n}\n\n.inv-totals-payable td {\n  padding-top: var(--space-3);\n  border-top: 2px solid #e2e8f0;\n  font-weight: 700;\n  font-size: var(--text-base);\n  color: #0f172a;\n}\n\n.invoice-paper--dark {\n  background: var(--bg-elevated);\n  color: var(--text);\n}\n\n.invoice-paper--dark .inv-header {\n  border-bottom-color: var(--border);\n}\n\n.invoice-paper--dark .inv-type {\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .inv-id {\n  color: var(--text);\n}\n\n.invoice-paper--dark .inv-header-right {\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .inv-party-name {\n  color: var(--text);\n}\n\n.invoice-paper--dark .inv-party > div {\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .inv-party-label,\n.invoice-paper--dark .inv-label {\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .inv-lines {\n  color: var(--text);\n}\n\n.invoice-paper--dark .inv-lines thead th {\n  background: var(--bg-card);\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .data-table td {\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .inv-col-id {\n  color: var(--text-muted);\n}\n\n.invoice-paper--dark .inv-totals {\n  color: var(--text);\n}\n\n.invoice-paper--dark .inv-totals td:first-child {\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .inv-totals tr:first-child td {\n  border-top-color: var(--border);\n}\n\n.invoice-paper--dark .inv-totals-payable td {\n  border-top-color: var(--border-light);\n  color: var(--text);\n}\n\n.invoice-paper--dark .inv-payment-terms {\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .inv-party-trading,\n.invoice-paper--dark .inv-party-legal,\n.invoice-paper--dark .inv-party-contact {\n  color: var(--text-secondary) !important;\n}\n\n.invoice-paper--dark .inv-references,\n.invoice-paper--dark .inv-period,\n.invoice-paper--dark .inv-notes,\n.invoice-paper--dark .inv-payment {\n  background: var(--bg-card);\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .inv-ref {\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .inv-ref-label,\n.invoice-paper--dark .inv-section-label {\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .inv-ref-value {\n  color: var(--text);\n}\n\n.invoice-paper--dark .inv-period {\n  border-left-color: var(--border-light);\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .inv-line-name {\n  color: var(--text);\n}\n\n.invoice-paper--dark .inv-line-desc,\n.invoice-paper--dark .inv-line-meta,\n.invoice-paper--dark .inv-line-charge {\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .inv-line-price-gross {\n  color: var(--text-secondary);\n}\n\n.invoice-paper--dark .inv-vat-base,\n.invoice-paper--dark .inv-vat-reason td {\n  color: var(--text-secondary);\n}\n\n@media print {\n@page {\n    margin: 1.5cm;\n  }\n\n.invoice-paper {\n    box-shadow: none;\n    border-radius: 0;\n    padding: 0;\n    background: #fff;\n  }\n}\n\n@media (max-width: 600px) {\n.inv-parties {\n    grid-template-columns: 1fr;\n  }\n\n.inv-header {\n    flex-direction: column;\n    gap: var(--space-3);\n  }\n\n.inv-header-right {\n    text-align: left;\n  }\n}\n";

package/styles/invoice.css ADDED Viewed

@@ -0,0 +1,509 @@
+/* @facturion/invoice-renderer — invoice render stylesheet.
+ * The traditional invoice rendering (.invoice-paper / .inv-*), self-contained:
+ * design tokens are scoped to .invoice-paper (not :root) so importing this into
+ * a host app neither depends on nor collides with the app's global tokens.
+ * Light is the default; .invoice-paper--dark is the dark theme (preview only). */
+.invoice-paper {
+  --bg-card: #18223a;
+  --bg-elevated: #1d2742;
+  --border: rgba(255, 255, 255, 0.08);
+  --border-light: rgba(255, 255, 255, 0.14);
+  --primary-light: #7fa0d8;
+  --radius-md: 8px;
+  --radius-sm: 4px;
+  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.4);
+  --space-1: 0.25rem;
+  --space-10: 2.5rem;
+  --space-2: 0.5rem;
+  --space-3: 0.75rem;
+  --space-4: 1rem;
+  --space-6: 1.5rem;
+  --space-8: 2rem;
+  --text: #e7ecf6;
+  --text-base: 1rem;
+  --text-muted: #647190;
+  --text-secondary: #99a6bf;
+  --text-sm: 0.875rem;
+  --text-xl: 1.3rem;
+  --text-xs: 0.8125rem;
+}
+/* Table base (scoped) */
+.invoice-paper .data-table {
+  width: 100%;
+  border-collapse: collapse;
+  font-size: var(--text-sm);
+}
+.invoice-paper .data-table th,
+.invoice-paper .data-table td {
+  text-align: left;
+  padding: var(--space-2) var(--space-3);
+  border-bottom: 1px solid var(--border);
+}
+.invoice-paper .data-table th {
+  color: var(--text-secondary);
+  font-weight: 500;
+  font-size: var(--text-xs);
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+}
+.invoice-paper .data-table td {
+  color: var(--text-secondary);
+}
+.invoice-paper .data-table code {
+  font-size: var(--text-xs);
+  color: var(--primary-light);
+}
+/* Invoice render rules */
+.invoice-paper {
+  background: #fdf8f0;
+  color: #111;
+  border-radius: var(--radius-md);
+  padding: var(--space-10);
+  box-shadow: var(--shadow-lg);
+  font-size: var(--text-sm);
+  line-height: 1.6;
+}
+.inv-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: flex-start;
+  margin-bottom: var(--space-8);
+  padding-bottom: var(--space-6);
+  border-bottom: 2px solid #e2e8f0;
+}
+.inv-type {
+  font-size: var(--text-xs);
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  color: #64748b;
+  margin-bottom: var(--space-1);
+}
+.inv-id {
+  font-size: var(--text-xl);
+  font-weight: 700;
+  color: #0f172a;
+}
+.inv-header-right {
+  text-align: right;
+  color: #475569;
+}
+.inv-header-right > div {
+  margin-bottom: var(--space-1);
+}
+.inv-parties {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--space-8);
+  margin-bottom: var(--space-8);
+}
+.inv-party-label {
+  font-size: var(--text-xs);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #94a3b8;
+  margin-bottom: var(--space-2);
+}
+.inv-party-name {
+  font-weight: 600;
+  color: #0f172a;
+  margin-bottom: var(--space-1);
+}
+.inv-party > div {
+  color: #475569;
+}
+.inv-party-trading {
+  font-style: italic;
+  color: #64748b !important;
+  margin-bottom: var(--space-1);
+}
+.inv-party-legal {
+  margin-top: var(--space-2);
+  font-size: var(--text-xs);
+  color: #64748b !important;
+  line-height: 1.4;
+}
+.inv-party-contact {
+  margin-top: var(--space-2);
+  font-size: var(--text-xs);
+  color: #475569 !important;
+}
+.inv-parties-secondary {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  gap: var(--space-6);
+  margin-bottom: var(--space-8);
+}
+.inv-references {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+  gap: var(--space-1) var(--space-6);
+  margin-bottom: var(--space-6);
+  padding: var(--space-3) var(--space-4);
+  background: #f5ede0;
+  border-radius: var(--radius-sm);
+  font-size: var(--text-xs);
+}
+.inv-ref {
+  display: flex;
+  gap: var(--space-2);
+  color: #475569;
+}
+.inv-ref-label {
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  color: #64748b;
+  text-transform: uppercase;
+  flex-shrink: 0;
+}
+.inv-ref-value {
+  color: #0f172a;
+  word-break: break-all;
+}
+.inv-period {
+  margin-bottom: var(--space-6);
+  padding: var(--space-2) var(--space-4);
+  background: #f5ede0;
+  border-left: 3px solid #94a3b8;
+  border-radius: var(--radius-sm);
+  color: #334155;
+  font-size: var(--text-sm);
+}
+.inv-notes,
+.inv-payment {
+  margin-bottom: var(--space-6);
+  padding: var(--space-4);
+  background: #f5ede0;
+  border-radius: var(--radius-sm);
+  color: #334155;
+}
+.inv-references,
+.inv-period,
+.inv-notes,
+.inv-payment,
+.inv-payment-terms,
+.inv-totals-wrap,
+.inv-lines tr {
+  break-inside: avoid;
+}
+.inv-notes p {
+  margin: 0 0 var(--space-2) 0;
+}
+.inv-notes p:last-child {
+  margin-bottom: 0;
+}
+.inv-payment > div {
+  margin-bottom: var(--space-1);
+}
+.inv-section-label {
+  font-size: var(--text-xs);
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: #64748b;
+  margin-bottom: var(--space-2);
+}
+.inv-label {
+  font-size: var(--text-xs);
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: #94a3b8;
+  margin-right: 0.3em;
+}
+.inv-lines-wrap {
+  margin-bottom: var(--space-6);
+  overflow-x: auto;
+}
+.inv-lines {
+  color: #1e293b;
+}
+.inv-lines thead th {
+  background: #f5ede0;
+  color: #64748b;
+}
+.inv-col-id {
+  width: 3rem;
+  color: #94a3b8;
+}
+.inv-col-desc {
+  /* takes remaining space */
+}
+.inv-col-num {
+  text-align: right;
+  white-space: nowrap;
+}
+.inv-line-name {
+  font-weight: 500;
+  color: #0f172a;
+}
+.inv-line-desc,
+.inv-line-meta,
+.inv-line-allowance,
+.inv-line-charge {
+  font-size: var(--text-xs);
+  color: #64748b;
+  line-height: 1.4;
+}
+.inv-line-meta {
+  margin-top: var(--space-1);
+}
+.inv-line-allowance {
+  color: #b45309;  /* amber-700 */
+}
+.inv-line-charge {
+  color: #475569;
+}
+.inv-line-price-gross {
+  font-size: var(--text-xs);
+  color: #94a3b8;
+  text-decoration: line-through;
+}
+.inv-vat-base {
+  font-size: var(--text-xs);
+  color: #94a3b8;
+  font-weight: 400;
+}
+.inv-vat-reason td {
+  padding-top: 0 !important;
+  padding-bottom: var(--space-2) !important;
+  font-size: var(--text-xs);
+  font-style: italic;
+  color: #64748b;
+  line-height: 1.3;
+}
+.inv-totals-wrap {
+  display: flex;
+  justify-content: flex-end;
+  margin-bottom: var(--space-6);
+}
+.inv-totals {
+  min-width: 280px;
+  border-collapse: collapse;
+  color: #1e293b;
+}
+.inv-totals td {
+  padding: var(--space-1) var(--space-3);
+}
+.inv-totals td:first-child {
+  color: #475569;
+}
+.inv-totals td.inv-col-num {
+  font-variant-numeric: tabular-nums;
+}
+.inv-totals tr:first-child td {
+  padding-top: var(--space-3);
+  border-top: 1px solid #e2e8f0;
+}
+.inv-totals-payable td {
+  padding-top: var(--space-3);
+  border-top: 2px solid #e2e8f0;
+  font-weight: 700;
+  font-size: var(--text-base);
+  color: #0f172a;
+}
+.invoice-paper--dark {
+  background: var(--bg-elevated);
+  color: var(--text);
+}
+.invoice-paper--dark .inv-header {
+  border-bottom-color: var(--border);
+}
+.invoice-paper--dark .inv-type {
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .inv-id {
+  color: var(--text);
+}
+.invoice-paper--dark .inv-header-right {
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .inv-party-name {
+  color: var(--text);
+}
+.invoice-paper--dark .inv-party > div {
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .inv-party-label,
+.invoice-paper--dark .inv-label {
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .inv-lines {
+  color: var(--text);
+}
+.invoice-paper--dark .inv-lines thead th {
+  background: var(--bg-card);
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .data-table td {
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .inv-col-id {
+  color: var(--text-muted);
+}
+.invoice-paper--dark .inv-totals {
+  color: var(--text);
+}
+.invoice-paper--dark .inv-totals td:first-child {
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .inv-totals tr:first-child td {
+  border-top-color: var(--border);
+}
+.invoice-paper--dark .inv-totals-payable td {
+  border-top-color: var(--border-light);
+  color: var(--text);
+}
+.invoice-paper--dark .inv-payment-terms {
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .inv-party-trading,
+.invoice-paper--dark .inv-party-legal,
+.invoice-paper--dark .inv-party-contact {
+  color: var(--text-secondary) !important;
+}
+.invoice-paper--dark .inv-references,
+.invoice-paper--dark .inv-period,
+.invoice-paper--dark .inv-notes,
+.invoice-paper--dark .inv-payment {
+  background: var(--bg-card);
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .inv-ref {
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .inv-ref-label,
+.invoice-paper--dark .inv-section-label {
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .inv-ref-value {
+  color: var(--text);
+}
+.invoice-paper--dark .inv-period {
+  border-left-color: var(--border-light);
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .inv-line-name {
+  color: var(--text);
+}
+.invoice-paper--dark .inv-line-desc,
+.invoice-paper--dark .inv-line-meta,
+.invoice-paper--dark .inv-line-charge {
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .inv-line-price-gross {
+  color: var(--text-secondary);
+}
+.invoice-paper--dark .inv-vat-base,
+.invoice-paper--dark .inv-vat-reason td {
+  color: var(--text-secondary);
+}
+@media print {
+@page {
+    margin: 1.5cm;
+  }
+.invoice-paper {
+    box-shadow: none;
+    border-radius: 0;
+    padding: 0;
+    background: #fff;
+  }
+}
+@media (max-width: 600px) {
+.inv-parties {
+    grid-template-columns: 1fr;
+  }
+.inv-header {
+    flex-direction: column;
+    gap: var(--space-3);
+  }
+.inv-header-right {
+    text-align: left;
+  }
+}