diff --git a/templates/customer.html b/templates/customer.html
index 8b93ab8..206c75e 100644
--- a/templates/customer.html
+++ b/templates/customer.html
@@ -1,236 +1,241 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="sv">
-<head>
-    <meta charset="UTF-8">
-    <title>Fakturaunderlag - Kund {{ customer.customer_number }}</title>
-    <style>
-        @page {
-            size: A4;
-            margin: 15mm;
-        }
-        * {
-            box-sizing: border-box;
-        }
-        body {
-            font-family: Arial, sans-serif;
-            font-size: 12px;
-            margin: 0;
-            padding: 20px;
-            background: white;
-        }
-        @media print {
+    <head>
+        <meta charset="UTF-8" />
+        <title>Fakturaunderlag - Kund {{ customer.customer_number }}</title>
+        <style>
+            @page {
+                size: A4;
+                margin: 15mm;
+            }
+            * {
+                box-sizing: border-box;
+            }
             body {
-                padding: 0;
+                font-family: Arial, sans-serif;
+                font-size: 12px;
+                margin: 0;
+                padding: 20px;
+                background: white;
+            }
+            @media print {
+                body {
+                    padding: 0;
+                }
+                .card-section {
+                    break-inside: avoid;
+                }
+            }
+            .header {
+                display: flex;
+                justify-content: space-between;
+                align-items: flex-end;
+                border-bottom: 2px solid #333;
+                padding-bottom: 10px;
+                margin-bottom: 15px;
+            }
+            .header h1 {
+                margin: 0;
+                font-size: 20px;
+            }
+            .header .meta {
+                text-align: right;
+                font-size: 11px;
+                color: #666;
+            }
+            .summary {
+                background: #f5f5f5;
+                border: 1px solid #ccc;
+                padding: 12px;
+                margin-bottom: 15px;
+            }
+            .summary h2 {
+                margin: 0 0 10px 0;
+                font-size: 14px;
+                border-bottom: 1px solid #ccc;
+                padding-bottom: 5px;
+            }
+            .summary-table {
+                width: 100%;
+                border-collapse: collapse;
+                font-size: 11px;
+            }
+            .summary-table th,
+            .summary-table td {
+                padding: 5px 8px;
+                text-align: left;
+            }
+            .summary-table th {
+                background: #e0e0e0;
+                font-weight: bold;
+            }
+            .summary-table td:not(:first-child),
+            .summary-table th:not(:first-child) {
+                text-align: right;
+            }
+            .grand-total-row td {
+                font-weight: bold;
+                border-top: 2px solid #333;
+                background: #f0f0f0;
             }
             .card-section {
-                break-inside: avoid;
+                margin-bottom: 15px;
+                border: 1px solid #ccc;
             }
-        }
-        .header {
-            display: flex;
-            justify-content: space-between;
-            align-items: flex-end;
-            border-bottom: 2px solid #333;
-            padding-bottom: 10px;
-            margin-bottom: 15px;
-        }
-        .header h1 {
-            margin: 0;
-            font-size: 20px;
-        }
-        .header .meta {
-            text-align: right;
-            font-size: 11px;
-            color: #666;
-        }
-        .summary {
-            background: #f5f5f5;
-            border: 1px solid #ccc;
-            padding: 12px;
-            margin-bottom: 15px;
-        }
-        .summary h2 {
-            margin: 0 0 10px 0;
-            font-size: 14px;
-            border-bottom: 1px solid #ccc;
-            padding-bottom: 5px;
-        }
-        .summary-table {
-            width: 100%;
-            border-collapse: collapse;
-            font-size: 11px;
-        }
-        .summary-table th, .summary-table td {
-            padding: 5px 8px;
-            text-align: left;
-        }
-        .summary-table th {
-            background: #e0e0e0;
-            font-weight: bold;
-        }
-        .summary-table td:not(:first-child),
-        .summary-table th:not(:first-child) {
-            text-align: right;
-        }
-        .grand-total-row td {
-            font-weight: bold;
-            border-top: 2px solid #333;
-            background: #f0f0f0;
-        }
-        .card-section {
-            margin-bottom: 15px;
-            border: 1px solid #ccc;
-        }
-        .card-header {
-            background: #f0f0f0;
-            padding: 8px 12px;
-            font-weight: bold;
-            border-bottom: 1px solid #ccc;
-            display: flex;
-            justify-content: space-between;
-        }
-        .card-summary {
-            padding: 6px 12px;
-            font-size: 11px;
-            background: #fafafa;
-            border-bottom: 1px solid #eee;
-        }
-        table {
-            width: 100%;
-            border-collapse: collapse;
-            font-size: 11px;
-        }
-        th, td {
-            padding: 6px 8px;
-            text-align: left;
-        }
-        th {
-            background: #f5f5f5;
-            font-weight: bold;
-            border-bottom: 1px solid #ccc;
-        }
-        .amount, .volume, .price {
-            text-align: right;
-        }
-        .card-total {
-            font-weight: bold;
-            background: #f9f9f9;
-        }
-        .card-total td {
-            border-top: 1px solid #333;
-        }
-        .grand-total {
-            background: #333;
-            color: white;
-            padding: 12px 15px;
-            font-size: 14px;
-            font-weight: bold;
-            text-align: right;
-            margin-top: 15px;
-        }
-        .grand-total span {
-            font-size: 18px;
-            margin-left: 20px;
-        }
-    </style>
-</head>
-<body>
-    <div class="header">
-        <div>
-            <h1>Faktura - Kund {{ customer.customer_number }}</h1>
-            <div>Period: {{ period }}</div>
+            .card-header {
+                background: #f0f0f0;
+                padding: 8px 12px;
+                font-weight: bold;
+                border-bottom: 1px solid #ccc;
+                display: flex;
+                justify-content: space-between;
+            }
+            .card-summary {
+                padding: 6px 12px;
+                font-size: 11px;
+                background: #fafafa;
+                border-bottom: 1px solid #eee;
+            }
+            table {
+                width: 100%;
+                border-collapse: collapse;
+                font-size: 11px;
+            }
+            th,
+            td {
+                padding: 6px 8px;
+                text-align: left;
+            }
+            th {
+                background: #f5f5f5;
+                font-weight: bold;
+                border-bottom: 1px solid #ccc;
+            }
+            .amount,
+            .volume,
+            .price {
+                text-align: right;
+            }
+            .card-total {
+                font-weight: bold;
+                background: #f9f9f9;
+            }
+            .card-total td {
+                border-top: 1px solid #333;
+            }
+            .grand-total {
+                background: #333;
+                color: white;
+                padding: 12px 15px;
+                font-size: 14px;
+                font-weight: bold;
+                text-align: right;
+                margin-top: 15px;
+            }
+            .grand-total span {
+                font-size: 18px;
+                margin-left: 20px;
+            }
+        </style>
+    </head>
+    <body>
+        <div class="header">
+            <div>
+                <h1>Fakturaunderlag - Kund {{ customer.customer_number }}</h1>
+                <div>Period: {{ period }}</div>
+            </div>
+            <div class="meta">
+                <div>Genererad: {{ generated_date }}</div>
+            </div>
         </div>
-        <div class="meta">
-            <div>Genererad: {{ generated_date }}</div>
-        </div>
-    </div>
 
-    <div class="summary">
-        <h2>Sammanfattning</h2>
-        <table class="summary-table">
-            <thead>
-                <tr>
-                    <th>Produkt</th>
-                    <th>Volym (L)</th>
-                    <th>Snittpris/L</th>
-                    <th>Belopp</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for product in customer.summary.products %}
-                <tr>
-                    <td>{{ product.name }}</td>
-                    <td>{{ product.volume }}</td>
-                    <td>{{ product.avg_price }} Kr</td>
-                    <td>{{ product.amount }} Kr</td>
-                </tr>
-                {% endfor %}
-                <tr>
-                    <td>Avrundningsfel</td>
-                    <td></td>
-                    <td></td>
-                    <td>{{ customer.summary.avrundningsfel }} Kr</td>
-                </tr>
-                <tr>
-                    <td>Öresutjämning</td>
-                    <td></td>
-                    <td></td>
-                    <td>{{ customer.summary.oresutjamning }} Kr</td>
-                </tr>
-                <tr class="grand-total-row">
-                    <td>Totalt</td>
-                    <td>{{ customer.summary.total_volume }}</td>
-                    <td></td>
-                    <td>{{ customer.summary.grand_total }} Kr</td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-
-    {% for card in customer.cards %}
-    <div class="card-section">
-        <div class="card-header">
-            <span>Kort: {{ card.card_number }}</span>
-            <span>{{ card.transactions.len() }} transaktioner</span>
+        <div class="summary">
+            <h2>Sammanfattning</h2>
+            <table class="summary-table">
+                <thead>
+                    <tr>
+                        <th>Produkt</th>
+                        <th>Volym (L)</th>
+                        <th>Snittpris/L</th>
+                        <th>Belopp</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for product in customer.summary.products %}
+                    <tr>
+                        <td>{{ product.name }}</td>
+                        <td>{{ product.volume }}</td>
+                        <td>{{ product.avg_price }} Kr</td>
+                        <td>{{ product.amount }} Kr</td>
+                    </tr>
+                    {% endfor %}
+                    <tr>
+                        <td>Avrundningsfel</td>
+                        <td></td>
+                        <td></td>
+                        <td>{{ customer.summary.avrundningsfel }} Kr</td>
+                    </tr>
+                    <tr>
+                        <td>Öresutjämning</td>
+                        <td></td>
+                        <td></td>
+                        <td>{{ customer.summary.oresutjamning }} Kr</td>
+                    </tr>
+                    <tr class="grand-total-row">
+                        <td>Totalt</td>
+                        <td>{{ customer.summary.total_volume }}</td>
+                        <td></td>
+                        <td>{{ customer.summary.grand_total }} Kr</td>
+                    </tr>
+                </tbody>
+            </table>
         </div>
-        <div class="card-summary">
-            Summa: {{ card.total_amount }} Kr | Volym: {{ card.total_volume }} L
-        </div>
-        <table>
-            <thead>
-                <tr>
-                    <th class="date">Datum</th>
-                    <th>Produkt</th>
-                    <th class="price">Pris/L</th>
-                    <th class="volume">Volym (L)</th>
-                    <th class="amount">Belopp</th>
-                    <th>Kvitto</th>
-                </tr>
-            </thead>
-            <tbody>
-                {% for tx in card.transactions %}
-                <tr>
-                    <td class="date">{{ tx.date }}</td>
-                    <td>{{ tx.quality_name }}</td>
-                    <td class="price">{{ tx.price }}</td>
-                    <td class="volume">{{ tx.volume }}</td>
-                    <td class="amount">{{ tx.amount }}</td>
-                    <td>{{ tx.receipt }}</td>
-                </tr>
-                {% endfor %}
-                <tr class="card-total">
-                    <td colspan="3">Kortsumma</td>
-                    <td class="volume">{{ card.total_volume }}</td>
-                    <td class="amount">{{ card.total_amount }}</td>
-                    <td></td>
-                </tr>
-            </tbody>
-        </table>
-    </div>
-    {% endfor %}
 
-    <div class="grand-total">
-        Totalsumma:<span>{{ customer.summary.grand_total }} Kr</span>
-    </div>
-</body>
+        {% for card in customer.cards %}
+        <div class="card-section">
+            <div class="card-header">
+                <span>Kort: {{ card.card_number }}</span>
+                <span>{{ card.transactions.len() }} transaktioner</span>
+            </div>
+            <div class="card-summary">
+                Summa: {{ card.total_amount }} Kr | Volym: {{ card.total_volume
+                }} L
+            </div>
+            <table>
+                <thead>
+                    <tr>
+                        <th class="date">Datum</th>
+                        <th>Produkt</th>
+                        <th class="price">Pris/L</th>
+                        <th class="volume">Volym (L)</th>
+                        <th class="amount">Belopp</th>
+                        <th>Kvitto</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    {% for tx in card.transactions %}
+                    <tr>
+                        <td class="date">{{ tx.date }}</td>
+                        <td>{{ tx.quality_name }}</td>
+                        <td class="price">{{ tx.price }}</td>
+                        <td class="volume">{{ tx.volume }}</td>
+                        <td class="amount">{{ tx.amount }}</td>
+                        <td>{{ tx.receipt }}</td>
+                    </tr>
+                    {% endfor %}
+                    <tr class="card-total">
+                        <td colspan="3">Kortsumma</td>
+                        <td class="volume">{{ card.total_volume }}</td>
+                        <td class="amount">{{ card.total_amount }}</td>
+                        <td></td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        {% endfor %}
+
+        <div class="grand-total">
+            Totalsumma:<span>{{ customer.summary.grand_total }} Kr</span>
+        </div>
+    </body>
 </html>
