Adds Poppins font and updates typography across pages

Replaces default system font with locally hosted Poppins font
Adds @font-face definitions for multiple font weights
Updates global font-family across various HTML pages

Improves typography consistency and performance by using local font files

wwwroot/poc-arbejdstidsplan.html

@@ -7,6 +7,35 @@
   <style>
     @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
 
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
     :root {
       --color-background: #ffffff;
       --color-background-alt: #f8f9fa;
@@ -26,7 +55,7 @@
     }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
       background: var(--color-background-alt);
       color: var(--color-text);
       line-height: 1.5;

wwwroot/poc-checkout.html

@@ -8,6 +8,35 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
     :root {
       --color-border: #e0e0e0;
       --color-surface: #fff;
@@ -25,7 +54,7 @@
     * { box-sizing: border-box; margin: 0; padding: 0; }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       background: var(--color-background);
       font-size: 14px;
       color: var(--color-text);

wwwroot/poc-customer-detail.html

@@ -6,6 +6,38 @@
   <title>Kundedetaljer - Sofie Nielsen</title>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
     /* ==========================================
        CSS VARIABLES (Design System)
        ========================================== */
@@ -26,7 +58,7 @@
       --color-green: #43a047;
 
       /* Typography */
-      --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       --font-mono: 'JetBrains Mono', monospace;
     }
 

wwwroot/poc-customer-list.html

@@ -6,6 +6,38 @@
   <title>Kunder - POC</title>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
     /* ==========================================
        CSS VARIABLES (Design System)
        ========================================== */
@@ -26,7 +58,7 @@
       --color-green: #43a047;
 
       /* Typography */
-      --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       --font-mono: 'JetBrains Mono', monospace;
     }
 

wwwroot/poc-detail-drawer.html

@@ -8,6 +8,35 @@
   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
     /* Import design tokens fra calendar-base.css */
     :root {
       --hour-height: 64px;
@@ -48,7 +77,7 @@
     * { box-sizing: border-box; margin: 0; padding: 0; }
 
     body {
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       background: var(--color-background);
     }
 

wwwroot/poc-employee.html

@@ -6,6 +6,38 @@
   <title>Medarbejder Detaljer - Anna Sørensen</title>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
     /* ==========================================
        CSS VARIABLES (Design System)
        ========================================== */
@@ -23,7 +55,7 @@
       --color-amber: #f59e0b;
       --color-purple: #8b5cf6;
       --color-green: #43a047;
-      --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       --font-mono: 'JetBrains Mono', monospace;
     }
 

wwwroot/poc-kasseafstemning.html

@@ -0,0 +1,915 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kasseafstemning - POC</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-purple: #8b5cf6;
+      --color-amber: #f59e0b;
+      --color-red: #e53935;
+      --color-green: #43a047;
+      --color-blue: #3b82f6;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    /* ==========================================
+       HEADER
+       ========================================== */
+    swp-page-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 24px;
+      flex-wrap: wrap;
+      gap: 16px;
+    }
+
+    swp-header-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-page-title {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-header-controls {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-employee-filter select,
+    swp-date-selector input[type="date"] {
+      padding: 10px 14px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      cursor: pointer;
+    }
+
+    swp-employee-filter select {
+      padding-right: 32px;
+      background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
+      appearance: none;
+      min-width: 180px;
+    }
+
+    swp-date-selector {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-date-selector button {
+      width: 36px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      cursor: pointer;
+      font-size: 16px;
+      color: var(--color-text-secondary);
+      transition: all 150ms ease;
+    }
+
+    swp-date-selector button:hover {
+      background: var(--color-background-hover);
+      color: var(--color-text);
+    }
+
+    /* ==========================================
+       CARD STYLES
+       ========================================== */
+    swp-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      overflow: hidden;
+    }
+
+    swp-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-card-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-card-body {
+      display: block;
+      padding: 16px 20px;
+    }
+
+    /* ==========================================
+       TWO COLUMN LAYOUT
+       ========================================== */
+    swp-content-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px;
+      margin-bottom: 24px;
+    }
+
+    /* ==========================================
+       SIMPLE TABLE (for payment methods & sales)
+       ========================================== */
+    swp-simple-table {
+      display: block;
+      width: 100%;
+    }
+
+    swp-simple-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-simple-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-simple-row.total {
+      font-weight: 600;
+      border-top: 2px solid var(--color-border);
+      border-bottom: none;
+      margin-top: 8px;
+      padding-top: 16px;
+    }
+
+    swp-simple-row.subtotal {
+      color: var(--color-text-secondary);
+      font-size: 13px;
+      padding: 8px 0 8px 16px;
+      border-bottom: none;
+    }
+
+    swp-row-label {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 14px;
+    }
+
+    swp-row-icon {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      font-size: 14px;
+    }
+
+    swp-row-icon.card { background: color-mix(in srgb, var(--color-blue) 15%, white); }
+    swp-row-icon.cash { background: color-mix(in srgb, var(--color-green) 15%, white); }
+    swp-row-icon.mobile { background: color-mix(in srgb, var(--color-purple) 15%, white); }
+    swp-row-icon.credit { background: color-mix(in srgb, var(--color-red) 15%, white); }
+    swp-row-icon.service { background: color-mix(in srgb, var(--color-teal) 15%, white); }
+    swp-row-icon.product { background: color-mix(in srgb, var(--color-amber) 15%, white); }
+
+    swp-row-value {
+      font-family: var(--font-mono);
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    swp-row-value.negative {
+      color: var(--color-red);
+    }
+
+    /* Card details toggle */
+    swp-card-details {
+      display: block;
+      padding: 12px 16px;
+      margin: 8px 0;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+    }
+
+    swp-card-details-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      cursor: pointer;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-card-details-header:hover {
+      color: var(--color-text);
+    }
+
+    swp-card-details-content {
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-card-details-content.collapsed {
+      display: none;
+    }
+
+    swp-detail-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 6px 0;
+      font-size: 13px;
+    }
+
+    swp-detail-row span:last-child {
+      font-family: var(--font-mono);
+    }
+
+    /* ==========================================
+       CASH COUNT SECTION
+       ========================================== */
+    swp-cash-section {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      margin-bottom: 24px;
+      overflow: hidden;
+    }
+
+    swp-cash-grid {
+      display: grid;
+      grid-template-columns: 200px 1fr 200px;
+      gap: 1px;
+      background: var(--color-border);
+    }
+
+    swp-cash-panel {
+      background: var(--color-surface);
+      padding: 20px;
+    }
+
+    swp-cash-panel-title {
+      display: block;
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      margin-bottom: 16px;
+    }
+
+    /* Primo panel */
+    swp-primo-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-primo-row:last-child {
+      border-bottom: none;
+      font-weight: 600;
+      padding-top: 16px;
+      margin-top: 8px;
+      border-top: 2px solid var(--color-border);
+    }
+
+    swp-primo-row span:last-child {
+      font-family: var(--font-mono);
+    }
+
+    /* Denomination grid */
+    swp-denomination-container {
+      display: block;
+    }
+
+    swp-denomination-group {
+      display: block;
+      margin-bottom: 16px;
+    }
+
+    swp-denomination-group:last-child {
+      margin-bottom: 0;
+    }
+
+    swp-denomination-label {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      margin-bottom: 8px;
+    }
+
+    swp-denomination-grid {
+      display: flex;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    swp-denomination-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+      min-width: 70px;
+    }
+
+    swp-denomination-item label {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      font-family: var(--font-mono);
+    }
+
+    swp-denomination-item input {
+      width: 60px;
+      padding: 8px;
+      text-align: center;
+      font-size: 16px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      border: 2px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+    }
+
+    swp-denomination-item input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-denomination-item input::-webkit-inner-spin-button,
+    swp-denomination-item input::-webkit-outer-spin-button {
+      -webkit-appearance: none;
+      margin: 0;
+    }
+
+    /* Result panel */
+    swp-result-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 10px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-result-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-result-row.highlight {
+      font-weight: 600;
+      padding: 16px 0;
+      margin-top: 8px;
+      border-top: 2px solid var(--color-border);
+      border-bottom: none;
+    }
+
+    swp-result-row.difference {
+      font-size: 16px;
+    }
+
+    swp-result-row.difference.positive span:last-child {
+      color: var(--color-green);
+    }
+
+    swp-result-row.difference.negative span:last-child {
+      color: var(--color-red);
+    }
+
+    swp-result-row span:last-child {
+      font-family: var(--font-mono);
+    }
+
+    swp-result-row input {
+      width: 100px;
+      padding: 8px;
+      text-align: right;
+      font-size: 14px;
+      font-family: var(--font-mono);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+    }
+
+    swp-result-row input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    /* ==========================================
+       FOOTER
+       ========================================== */
+    swp-page-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 24px;
+      background: var(--color-surface);
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      margin-top: 24px;
+    }
+
+    swp-footer-left {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    swp-shop-name {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-reconciled-by {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-reconciled-by select {
+      padding: 6px 10px;
+      font-size: 13px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      background: var(--color-surface);
+    }
+
+    swp-footer-actions {
+      display: flex;
+      gap: 12px;
+    }
+
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 24px;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      border: 1px solid var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: color-mix(in srgb, var(--color-teal) 90%, black);
+    }
+  </style>
+</head>
+<body>
+  <swp-page-container>
+    <!-- Header -->
+    <swp-page-header>
+      <swp-header-left>
+        <swp-page-title>Kasseafstemning</swp-page-title>
+      </swp-header-left>
+      <swp-header-controls>
+        <swp-employee-filter>
+          <select id="employeeFilter">
+            <option>Alle medarbejdere</option>
+            <option>Karina Knudsen</option>
+            <option>Anna Jensen</option>
+            <option>Martin Nielsen</option>
+          </select>
+        </swp-employee-filter>
+        <swp-date-selector>
+          <button class="prev">&#8249;</button>
+          <input type="date" id="reconciliationDate" />
+          <button class="next">&#8250;</button>
+        </swp-date-selector>
+      </swp-header-controls>
+    </swp-page-header>
+
+    <!-- Two Column Layout: Betalingsmetoder + Salgsfordeling -->
+    <swp-content-grid>
+      <!-- Betalingsmetoder -->
+      <swp-card>
+        <swp-card-header>
+          <swp-card-title>Betalingsmetoder</swp-card-title>
+        </swp-card-header>
+        <swp-card-body>
+          <swp-simple-table>
+            <swp-simple-row>
+              <swp-row-label>
+                <swp-row-icon class="card">💳</swp-row-icon>
+                <span>Betalingskort</span>
+              </swp-row-label>
+              <swp-row-value>6.401 kr</swp-row-value>
+            </swp-simple-row>
+
+            <!-- Kort detaljer (kollapsbar) -->
+            <swp-card-details>
+              <swp-card-details-header onclick="toggleCardDetails()">
+                <span>Vis kortdetaljer</span>
+                <span id="cardDetailsToggle">▼</span>
+              </swp-card-details-header>
+              <swp-card-details-content id="cardDetailsContent" class="collapsed">
+                <swp-detail-row>
+                  <span>Visa/Dankort</span>
+                  <span>6.401 kr</span>
+                </swp-detail-row>
+                <swp-detail-row>
+                  <span>Mastercard</span>
+                  <span>0 kr</span>
+                </swp-detail-row>
+              </swp-card-details-content>
+            </swp-card-details>
+
+            <swp-simple-row>
+              <swp-row-label>
+                <swp-row-icon class="cash">💵</swp-row-icon>
+                <span>Kontant</span>
+              </swp-row-label>
+              <swp-row-value id="cashPayments">0 kr</swp-row-value>
+            </swp-simple-row>
+
+            <swp-simple-row>
+              <swp-row-label>
+                <swp-row-icon class="mobile">📱</swp-row-icon>
+                <span>MobilePay</span>
+              </swp-row-label>
+              <swp-row-value>475 kr</swp-row-value>
+            </swp-simple-row>
+
+            <swp-simple-row>
+              <swp-row-label>
+                <swp-row-icon class="credit">↩️</swp-row-icon>
+                <span>Krediteringer</span>
+              </swp-row-label>
+              <swp-row-value class="negative">0 kr</swp-row-value>
+            </swp-simple-row>
+
+            <swp-simple-row class="total">
+              <swp-row-label>
+                <span>TOTAL</span>
+              </swp-row-label>
+              <swp-row-value>6.876 kr</swp-row-value>
+            </swp-simple-row>
+          </swp-simple-table>
+        </swp-card-body>
+      </swp-card>
+
+      <!-- Salgsfordeling -->
+      <swp-card>
+        <swp-card-header>
+          <swp-card-title>Salgsfordeling</swp-card-title>
+        </swp-card-header>
+        <swp-card-body>
+          <swp-simple-table>
+            <swp-simple-row>
+              <swp-row-label>
+                <swp-row-icon class="service">✂️</swp-row-icon>
+                <span>Service salg</span>
+              </swp-row-label>
+              <swp-row-value>5.145 kr</swp-row-value>
+            </swp-simple-row>
+
+            <swp-simple-row>
+              <swp-row-label>
+                <swp-row-icon class="product">🧴</swp-row-icon>
+                <span>Produkt salg</span>
+              </swp-row-label>
+              <swp-row-value>1.731 kr</swp-row-value>
+            </swp-simple-row>
+
+            <swp-simple-row>
+              <swp-row-label>
+                <swp-row-icon class="card">🎁</swp-row-icon>
+                <span>Gavekort salg</span>
+              </swp-row-label>
+              <swp-row-value>0 kr</swp-row-value>
+            </swp-simple-row>
+
+            <swp-simple-row>
+              <swp-row-label>
+                <swp-row-icon class="mobile">🎟️</swp-row-icon>
+                <span>Klippekort salg</span>
+              </swp-row-label>
+              <swp-row-value>0 kr</swp-row-value>
+            </swp-simple-row>
+
+            <swp-simple-row class="total">
+              <swp-row-label>
+                <span>OMSÆTNING</span>
+              </swp-row-label>
+              <swp-row-value>6.876 kr</swp-row-value>
+            </swp-simple-row>
+          </swp-simple-table>
+        </swp-card-body>
+      </swp-card>
+    </swp-content-grid>
+
+    <!-- Kontantoptælling -->
+    <swp-cash-section>
+      <swp-card-header>
+        <swp-card-title>Kontantoptælling</swp-card-title>
+      </swp-card-header>
+      <swp-cash-grid>
+        <!-- Primo panel -->
+        <swp-cash-panel>
+          <swp-cash-panel-title>Kassebeholdning</swp-cash-panel-title>
+          <swp-primo-row>
+            <span>Primo (start)</span>
+            <span>230 kr</span>
+          </swp-primo-row>
+          <swp-primo-row>
+            <span>Kontant ind</span>
+            <span id="cashInDisplay">0 kr</span>
+          </swp-primo-row>
+          <swp-primo-row>
+            <span>Forventet</span>
+            <span id="expectedTotal">230 kr</span>
+          </swp-primo-row>
+        </swp-cash-panel>
+
+        <!-- Optælling panel -->
+        <swp-cash-panel>
+          <swp-cash-panel-title>Optælling</swp-cash-panel-title>
+          <swp-denomination-container>
+            <swp-denomination-group>
+              <swp-denomination-label>Sedler</swp-denomination-label>
+              <swp-denomination-grid>
+                <swp-denomination-item>
+                  <label>500 kr</label>
+                  <input type="number" min="0" value="0" data-value="500" />
+                </swp-denomination-item>
+                <swp-denomination-item>
+                  <label>200 kr</label>
+                  <input type="number" min="0" value="1" data-value="200" />
+                </swp-denomination-item>
+                <swp-denomination-item>
+                  <label>100 kr</label>
+                  <input type="number" min="0" value="0" data-value="100" />
+                </swp-denomination-item>
+                <swp-denomination-item>
+                  <label>50 kr</label>
+                  <input type="number" min="0" value="0" data-value="50" />
+                </swp-denomination-item>
+              </swp-denomination-grid>
+            </swp-denomination-group>
+
+            <swp-denomination-group>
+              <swp-denomination-label>Mønter</swp-denomination-label>
+              <swp-denomination-grid>
+                <swp-denomination-item>
+                  <label>20 kr</label>
+                  <input type="number" min="0" value="1" data-value="20" />
+                </swp-denomination-item>
+                <swp-denomination-item>
+                  <label>10 kr</label>
+                  <input type="number" min="0" value="1" data-value="10" />
+                </swp-denomination-item>
+                <swp-denomination-item>
+                  <label>5 kr</label>
+                  <input type="number" min="0" value="0" data-value="5" />
+                </swp-denomination-item>
+                <swp-denomination-item>
+                  <label>2 kr</label>
+                  <input type="number" min="0" value="0" data-value="2" />
+                </swp-denomination-item>
+                <swp-denomination-item>
+                  <label>1 kr</label>
+                  <input type="number" min="0" value="0" data-value="1" />
+                </swp-denomination-item>
+              </swp-denomination-grid>
+            </swp-denomination-group>
+          </swp-denomination-container>
+        </swp-cash-panel>
+
+        <!-- Resultat panel -->
+        <swp-cash-panel>
+          <swp-cash-panel-title>Resultat</swp-cash-panel-title>
+          <swp-result-row>
+            <span>Optalt</span>
+            <span id="countedTotal">230 kr</span>
+          </swp-result-row>
+          <swp-result-row class="difference" id="differenceRow">
+            <span>DIFFERENCE</span>
+            <span id="differenceValue">0 kr</span>
+          </swp-result-row>
+          <swp-result-row>
+            <span>Til bank</span>
+            <input type="number" id="toBank" value="0" min="0" />
+          </swp-result-row>
+          <swp-result-row class="highlight">
+            <span>Rest til næste dag</span>
+            <span id="restNextDay">230 kr</span>
+          </swp-result-row>
+        </swp-cash-panel>
+      </swp-cash-grid>
+    </swp-cash-section>
+
+    <!-- Footer -->
+    <swp-page-footer>
+      <swp-footer-left>
+        <swp-shop-name>KARINA KNUDSEN®</swp-shop-name>
+        <swp-reconciled-by>
+          <span>Hvem afstemmer?</span>
+          <select id="reconciledBy">
+            <option>Vælg medarbejder</option>
+            <option>Karina Knudsen</option>
+            <option>Anna Jensen</option>
+            <option>Martin Nielsen</option>
+          </select>
+        </swp-reconciled-by>
+      </swp-footer-left>
+      <swp-footer-actions>
+        <swp-btn class="secondary">Gem kladde</swp-btn>
+        <swp-btn class="primary">Godkend afstemning</swp-btn>
+      </swp-footer-actions>
+    </swp-page-footer>
+  </swp-page-container>
+
+  <script>
+    // Set today's date
+    const dateInput = document.getElementById('reconciliationDate');
+    const today = new Date().toISOString().split('T')[0];
+    dateInput.value = today;
+
+    // Date navigation
+    document.querySelector('.prev').addEventListener('click', () => {
+      const date = new Date(dateInput.value);
+      date.setDate(date.getDate() - 1);
+      dateInput.value = date.toISOString().split('T')[0];
+    });
+
+    document.querySelector('.next').addEventListener('click', () => {
+      const date = new Date(dateInput.value);
+      date.setDate(date.getDate() + 1);
+      dateInput.value = date.toISOString().split('T')[0];
+    });
+
+    // Card details toggle
+    function toggleCardDetails() {
+      const content = document.getElementById('cardDetailsContent');
+      const toggle = document.getElementById('cardDetailsToggle');
+      content.classList.toggle('collapsed');
+      toggle.textContent = content.classList.contains('collapsed') ? '▼' : '▲';
+    }
+
+    // Cash count calculation
+    const primo = 230;
+    const cashIn = 0; // From payment methods
+
+    function formatCurrency(value) {
+      return value.toLocaleString('da-DK') + ' kr';
+    }
+
+    function calculateCashTotal() {
+      const inputs = document.querySelectorAll('swp-denomination-item input');
+      let counted = 0;
+
+      inputs.forEach(input => {
+        const count = parseInt(input.value) || 0;
+        const value = parseInt(input.dataset.value);
+        counted += count * value;
+      });
+
+      const expected = primo + cashIn;
+      const difference = counted - expected;
+      const toBank = parseInt(document.getElementById('toBank').value) || 0;
+      const restNextDay = counted - toBank;
+
+      // Update displays
+      document.getElementById('cashInDisplay').textContent = formatCurrency(cashIn);
+      document.getElementById('expectedTotal').textContent = formatCurrency(expected);
+      document.getElementById('countedTotal').textContent = formatCurrency(counted);
+      document.getElementById('restNextDay').textContent = formatCurrency(restNextDay);
+
+      // Update difference with color
+      const diffRow = document.getElementById('differenceRow');
+      const diffValue = document.getElementById('differenceValue');
+
+      diffRow.classList.remove('positive', 'negative');
+      if (difference > 0) {
+        diffValue.textContent = '+' + formatCurrency(difference);
+        diffRow.classList.add('positive');
+      } else if (difference < 0) {
+        diffValue.textContent = formatCurrency(difference);
+        diffRow.classList.add('negative');
+      } else {
+        diffValue.textContent = '0 kr';
+      }
+    }
+
+    // Add event listeners
+    document.querySelectorAll('swp-denomination-item input').forEach(input => {
+      input.addEventListener('input', calculateCashTotal);
+    });
+
+    document.getElementById('toBank').addEventListener('input', calculateCashTotal);
+
+    // Initial calculation
+    calculateCashTotal();
+  </script>
+</body>
+</html>

wwwroot/poc-rapport.html

@@ -6,6 +6,38 @@
   <title>Rapport - POC</title>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
     /* ==========================================
        CSS VARIABLES (Design System)
        ========================================== */
@@ -22,7 +54,7 @@
       --color-amber: #f59e0b;
       --color-red: #e53935;
       --color-green: #43a047;
-      --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       --font-mono: 'JetBrains Mono', monospace;
     }
 

wwwroot/poc-service-detail.html

@@ -6,6 +6,38 @@
   <title>Service Detaljer - Klip & Farve</title>
   <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
     /* ==========================================
        CSS VARIABLES (Design System)
        ========================================== */
@@ -46,7 +78,7 @@
       --b-color-deep-orange: #f4511e;
 
       /* Typography */
-      --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       --font-mono: 'JetBrains Mono', monospace;
     }