From 1acab8c04988e6dfb30263a549de26ce0c86ba6f Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Mon, 29 Dec 2025 15:02:10 +0100
Subject: [PATCH] Adds proof-of-concept cash reconciliation HTML page

Creates a detailed HTML prototype for cash reconciliation process
Includes comprehensive UI components for tracking daily cash operations
Implements interactive calculations and user input validation for cash counting
---
 wwwroot/poc-kasseafstemning.html | 1301 ++++++++++++++++--------------
 1 file changed, 681 insertions(+), 620 deletions(-)

diff --git a/wwwroot/poc-kasseafstemning.html b/wwwroot/poc-kasseafstemning.html
index 11b4985..9f470dc 100644
--- a/wwwroot/poc-kasseafstemning.html
+++ b/wwwroot/poc-kasseafstemning.html
@@ -50,11 +50,11 @@
       --color-text: #333;
       --color-text-secondary: #666;
       --color-teal: #00897b;
-      --color-purple: #8b5cf6;
-      --color-amber: #f59e0b;
+      --color-blue: #1976d2;
       --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
       --color-green: #43a047;
-      --color-blue: #3b82f6;
       --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
       --font-mono: 'JetBrains Mono', monospace;
     }
@@ -76,6 +76,53 @@
       line-height: 1.5;
     }
 
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-back-link {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-back-link:hover {
+      color: var(--color-teal);
+    }
+
+    swp-page-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
     /* ==========================================
        LAYOUT
        ========================================== */
@@ -86,88 +133,46 @@
       padding: 24px;
     }
 
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px;
+    }
+
+    @media (max-width: 900px) {
+      .grid-2 { grid-template-columns: 1fr; }
+    }
+
     /* ==========================================
-       HEADER
+       PAGE HEADER
        ========================================== */
     swp-page-header {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
+      display: block;
       margin-bottom: 24px;
-      flex-wrap: wrap;
-      gap: 16px;
     }
 
-    swp-header-left {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-    }
-
-    swp-page-title {
+    swp-page-header h1 {
       font-size: 24px;
       font-weight: 600;
       color: var(--color-text);
+      margin-bottom: 6px;
     }
 
-    swp-header-controls {
-      display: flex;
-      align-items: center;
-      gap: 16px;
-    }
-
-    swp-employee-filter select,
-    swp-date-selector input[type="date"] {
-      padding: 10px 14px;
+    swp-page-subtitle {
+      display: block;
       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
+       CARDS
        ========================================== */
     swp-card {
       display: block;
       background: var(--color-surface);
       border-radius: 8px;
       box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      margin-bottom: 20px;
       overflow: hidden;
     }
 
@@ -185,358 +190,414 @@
       color: var(--color-text);
     }
 
+    swp-card-hint {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
     swp-card-body {
       display: block;
-      padding: 16px 20px;
+      padding: 20px;
     }
 
     /* ==========================================
-       TWO COLUMN LAYOUT
+       FORM ELEMENTS
        ========================================== */
-    swp-content-grid {
+    swp-form-grid {
       display: grid;
       grid-template-columns: 1fr 1fr;
-      gap: 24px;
-      margin-bottom: 24px;
+      gap: 16px;
+    }
+
+    swp-form-field {
+      display: block;
+    }
+
+    swp-form-field.full-width {
+      grid-column: 1 / -1;
+    }
+
+    swp-form-label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      margin-bottom: 6px;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+    }
+
+    swp-form-label .required {
+      color: var(--color-red);
+    }
+
+    swp-form-input input,
+    swp-form-input select {
+      width: 100%;
+      padding: 10px 12px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      transition: border-color 150ms ease;
+    }
+
+    swp-form-input input:focus,
+    swp-form-input select:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-auto-id {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid var(--color-border);
     }
 
     /* ==========================================
-       SIMPLE TABLE (for payment methods & sales)
+       DATA TABLE
        ========================================== */
-    swp-simple-table {
+    swp-data-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-data-header {
+      display: grid;
+      grid-template-columns: 1fr 100px 140px;
+      gap: 12px;
+      padding: 10px 0;
+      border-bottom: 2px solid var(--color-border);
     }
 
-    swp-simple-row:last-child {
-      border-bottom: none;
-    }
-
-    swp-simple-row.total {
+    swp-data-header span {
+      font-size: 11px;
       font-weight: 600;
-      border-top: 2px solid var(--color-border);
-      border-bottom: none;
-      margin-top: 8px;
-      padding-top: 16px;
-    }
-
-    swp-simple-row.subtotal {
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
       color: var(--color-text-secondary);
-      font-size: 13px;
-      padding: 8px 0 8px 16px;
+    }
+
+    swp-data-header span:not(:first-child) {
+      text-align: right;
+    }
+
+    swp-data-row {
+      display: grid;
+      grid-template-columns: 1fr 100px 140px;
+      gap: 12px;
+      padding: 14px 0;
+      border-bottom: 1px solid var(--color-border);
+      align-items: center;
+    }
+
+    swp-data-row:last-child {
       border-bottom: none;
     }
 
-    swp-row-label {
-      display: flex;
-      align-items: center;
-      gap: 10px;
+    swp-data-label {
       font-size: 14px;
+      color: var(--color-text);
     }
 
-    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 {
+    swp-data-system {
+      text-align: right;
       font-family: var(--font-mono);
       font-size: 14px;
-      font-weight: 500;
+      color: var(--color-text-secondary);
     }
 
-    swp-row-value.negative {
-      color: var(--color-red);
+    swp-data-input input {
+      width: 100%;
+      padding: 8px 10px;
+      font-size: 14px;
+      font-family: var(--font-mono);
+      text-align: right;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
     }
 
-    /* Card details toggle */
-    swp-card-details {
+    swp-data-input input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-data-input input::placeholder {
+      color: #bbb;
+      font-family: var(--font-family);
+      font-size: 12px;
+    }
+
+    swp-data-value {
+      text-align: right;
+      font-family: var(--font-mono);
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-data-value.muted {
+      color: var(--color-text-secondary);
+    }
+
+    swp-table-note {
       display: block;
-      padding: 12px 16px;
-      margin: 8px 0;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 16px;
+      padding: 12px;
       background: var(--color-background-alt);
       border-radius: 6px;
     }
 
-    swp-card-details-header {
+    /* ==========================================
+       CASH CALCULATION
+       ========================================== */
+    swp-calc-row {
       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;
+      padding: 14px 0;
       border-bottom: 1px solid var(--color-border);
     }
 
-    swp-primo-row:last-child {
+    swp-calc-row:last-of-type {
       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);
+    swp-calc-row.input-row {
+      padding: 18px 0;
+      background: var(--color-background-alt);
+      margin: 16px -20px -20px -20px;
+      padding: 20px;
+      border-radius: 0 0 8px 8px;
     }
 
-    /* Denomination grid */
-    swp-denomination-container {
+    swp-calc-label span {
       display: block;
+      font-size: 14px;
+      color: var(--color-text);
     }
 
-    swp-denomination-group {
+    swp-calc-label small {
       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;
+      font-size: 12px;
       color: var(--color-text-secondary);
-      margin-bottom: 8px;
+      margin-top: 2px;
     }
 
-    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);
+    swp-calc-value {
       font-family: var(--font-mono);
+      font-size: 14px;
+      color: var(--color-text);
     }
 
-    swp-denomination-item input {
-      width: 60px;
-      padding: 8px;
-      text-align: center;
+    swp-calc-value.muted {
+      color: var(--color-text-secondary);
+    }
+
+    swp-calc-input input {
+      width: 140px;
+      padding: 12px 14px;
       font-size: 16px;
-      font-weight: 600;
       font-family: var(--font-mono);
+      text-align: right;
       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 {
+    swp-calc-input input:focus {
       outline: none;
       border-color: var(--color-teal);
     }
 
     /* ==========================================
-       FOOTER
+       DIFFERENCE BOX
        ========================================== */
-    swp-page-footer {
+    swp-difference-box {
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 20px 24px;
-      background: var(--color-surface);
+      padding: 20px;
       border-radius: 8px;
-      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
-      margin-top: 24px;
+      background: var(--color-background-alt);
+      margin-top: 16px;
     }
 
-    swp-footer-left {
-      display: flex;
-      flex-direction: column;
-      gap: 4px;
+    swp-difference-box.positive {
+      background: color-mix(in srgb, var(--color-green) 10%, white);
     }
 
-    swp-shop-name {
-      font-size: 16px;
+    swp-difference-box.negative {
+      background: color-mix(in srgb, var(--color-red) 10%, white);
+    }
+
+    swp-difference-box.neutral {
+      background: color-mix(in srgb, var(--color-teal) 10%, white);
+    }
+
+    swp-difference-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-difference-label small {
+      display: block;
+      font-size: 12px;
+      font-weight: 400;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+    }
+
+    swp-difference-value {
+      font-size: 24px;
       font-weight: 600;
+      font-family: var(--font-mono);
     }
 
-    swp-reconciled-by {
+    swp-difference-box.positive swp-difference-value {
+      color: var(--color-green);
+    }
+
+    swp-difference-box.negative swp-difference-value {
+      color: var(--color-red);
+    }
+
+    swp-difference-box.neutral swp-difference-value {
+      color: var(--color-teal);
+    }
+
+    /* ==========================================
+       NOTE FIELD
+       ========================================== */
+    swp-note-field textarea {
+      width: 100%;
+      min-height: 80px;
+      padding: 12px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      resize: vertical;
+    }
+
+    swp-note-field textarea:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-note-hint {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 8px;
+    }
+
+    /* ==========================================
+       STATUS & APPROVAL
+       ========================================== */
+    swp-status-row {
       display: flex;
       align-items: center;
-      gap: 8px;
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+
+    swp-status-label {
       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-status-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      font-size: 12px;
+      font-weight: 500;
+      border-radius: 20px;
     }
 
-    swp-footer-actions {
+    swp-status-badge.draft {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b45309;
+    }
+
+    swp-status-badge.approved {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+    }
+
+    swp-status-badge::before {
+      content: '';
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: currentColor;
+    }
+
+    swp-approval-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    swp-checkbox-field {
       display: flex;
+      align-items: flex-start;
       gap: 12px;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      margin-bottom: 20px;
+      grid-column: 1 / -1;
+    }
+
+    swp-checkbox-field input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      margin-top: 2px;
+      accent-color: var(--color-teal);
+      cursor: pointer;
+    }
+
+    swp-checkbox-field label {
+      font-size: 13px;
+      color: var(--color-text);
+      cursor: pointer;
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       ACTIONS
+       ========================================== */
+    swp-card-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      background: var(--color-background-alt);
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-actions-right {
+      display: flex;
+      gap: 10px;
     }
 
     swp-btn {
       display: inline-flex;
       align-items: center;
-      gap: 8px;
-      padding: 12px 24px;
-      font-size: 14px;
+      gap: 6px;
+      padding: 10px 18px;
+      font-size: 13px;
       font-weight: 500;
       font-family: var(--font-family);
       border-radius: 6px;
@@ -544,6 +605,16 @@
       transition: all 150ms ease;
     }
 
+    swp-btn.ghost {
+      background: transparent;
+      border: none;
+      color: var(--color-text-secondary);
+    }
+
+    swp-btn.ghost:hover {
+      color: var(--color-text);
+    }
+
     swp-btn.secondary {
       background: var(--color-surface);
       border: 1px solid var(--color-border);
@@ -561,355 +632,345 @@
     }
 
     swp-btn.primary:hover {
-      background: color-mix(in srgb, var(--color-teal) 90%, black);
+      background: #00796b;
+    }
+
+    swp-btn.primary:disabled {
+      background: #ccc;
+      border-color: #ccc;
+      cursor: not-allowed;
+    }
+
+    swp-system-note {
+      display: block;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      text-align: center;
+      padding: 12px;
     }
   </style>
 </head>
 <body>
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-back-link>
+        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+        Tilbage
+      </swp-back-link>
+      <swp-page-title>Kasseafstemning</swp-page-title>
+    </swp-topbar-left>
+    <swp-topbar-right>
+      <swp-status-badge class="draft" id="statusBadge">Kladde</swp-status-badge>
+    </swp-topbar-right>
+  </swp-topbar>
+
   <swp-page-container>
-    <!-- Header -->
+    <!-- Page 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>
+      <h1>Kasseafstemning</h1>
+      <swp-page-subtitle>Enkel dagsafslutning med fokus på kontanter. Kort afstemmes separat mod bank/indløser.</swp-page-subtitle>
     </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>
+    <div class="grid-2">
+      <!-- VENSTRE KOLONNE -->
+      <div>
+        <!-- Dagens tal -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Dagens tal</swp-card-title>
+            <swp-card-hint>Systemtal vs. kontrol</swp-card-hint>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-data-table>
+              <swp-data-header>
+                <span>Type</span>
+                <span>System</span>
+                <span>Kontrol</span>
+              </swp-data-header>
 
-            <!-- 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-data-row>
+                <swp-data-label>Kortbetalinger</swp-data-label>
+                <swp-data-system>12.875,50</swp-data-system>
+                <swp-data-input>
+                  <input type="text" placeholder="Valgfrit" />
+                </swp-data-input>
+              </swp-data-row>
 
-            <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-data-row>
+                <swp-data-label>MobilePay / Online</swp-data-label>
+                <swp-data-system>2.450,00</swp-data-system>
+                <swp-data-input>
+                  <input type="text" placeholder="Valgfrit" />
+                </swp-data-input>
+              </swp-data-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-data-row>
+                <swp-data-label>Kontantsalg</swp-data-label>
+                <swp-data-system>3.540,00</swp-data-system>
+                <swp-data-value class="muted">..</swp-data-value>
+              </swp-data-row>
+            </swp-data-table>
 
-            <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-table-note>Kort og MobilePay afstemmes mod bank/indløser. Kontanter tælles op nedenfor.</swp-table-note>
+          </swp-card-body>
+        </swp-card>
 
-            <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>
+        <!-- Kontanter i kassen -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Kontanter i kassen</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-calc-row>
+              <swp-calc-label>
+                <span>Startbeholdning</span>
+                <small>Overført fra sidste afstemning</small>
+              </swp-calc-label>
+              <swp-calc-value class="muted">2.000,00</swp-calc-value>
+            </swp-calc-row>
 
-      <!-- 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-calc-row>
+              <swp-calc-label>
+                <span>Udbetalinger / Bilag</span>
+                <small>Sammentæl bilag betalt kontant</small>
+              </swp-calc-label>
+              <swp-calc-input>
+                <input type="text" id="payouts" placeholder="0,00" />
+              </swp-calc-input>
+            </swp-calc-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-calc-row>
+              <swp-calc-label>
+                <span>Udtaget til bank</span>
+                <small>Kontanter lagt til side</small>
+              </swp-calc-label>
+              <swp-calc-input>
+                <input type="text" id="toBank" placeholder="0,00" />
+              </swp-calc-input>
+            </swp-calc-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-calc-row>
+              <swp-calc-label>
+                <span>Forventet kontantbeholdning</span>
+              </swp-calc-label>
+              <swp-calc-value id="expectedCash">5.220,00</swp-calc-value>
+            </swp-calc-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-calc-row class="input-row">
+              <swp-calc-label>
+                <span>Optalt kontantbeholdning <span style="color: var(--color-red)">*</span></span>
+                <small>Hvad ligger der faktisk i kassen?</small>
+              </swp-calc-label>
+              <swp-calc-input>
+                <input type="text" id="actualCash" placeholder="0,00" />
+              </swp-calc-input>
+            </swp-calc-row>
+          </swp-card-body>
+        </swp-card>
 
-            <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>
+        <!-- Difference -->
+        <swp-difference-box id="differenceBox" class="neutral">
+          <swp-difference-label>
+            Kontant difference
+            <small>Optalt minus forventet</small>
+          </swp-difference-label>
+          <swp-difference-value id="differenceValue">– kr</swp-difference-value>
+        </swp-difference-box>
+      </div>
 
-    <!-- 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>
+      <!-- HØJRE KOLONNE -->
+      <div>
+        <!-- Dagsoplysninger -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Dagsoplysninger</swp-card-title>
+            <swp-card-hint>Identificér afstemningen</swp-card-hint>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-form-grid>
+              <swp-form-field>
+                <swp-form-label>Dato <span class="required">*</span></swp-form-label>
+                <swp-form-input>
+                  <input type="date" id="reconciliationDate" />
+                </swp-form-input>
+              </swp-form-field>
 
-        <!-- 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-form-field>
+                <swp-form-label>Medarbejder <span class="required">*</span></swp-form-label>
+                <swp-form-input>
+                  <select id="employee">
+                    <option>Anna Jensen</option>
+                    <option>Karina Knudsen</option>
+                    <option>Martin Nielsen</option>
+                  </select>
+                </swp-form-input>
+              </swp-form-field>
 
-            <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>
+              <swp-form-field>
+                <swp-form-label>Kassepunkt <span class="required">*</span></swp-form-label>
+                <swp-form-input>
+                  <select id="register">
+                    <option>Kasse 1 – Reception</option>
+                    <option>Kasse 2 – Salon</option>
+                  </select>
+                </swp-form-input>
+              </swp-form-field>
 
-        <!-- 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>
+              <swp-form-field>
+                <swp-form-label>Skift (valgfrit)</swp-form-label>
+                <swp-form-input>
+                  <select id="shift">
+                    <option>Ikke angivet</option>
+                    <option>Morgen (08-14)</option>
+                    <option>Eftermiddag (14-20)</option>
+                  </select>
+                </swp-form-input>
+              </swp-form-field>
+            </swp-form-grid>
 
-    <!-- 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-auto-id>Afstemnings-ID: <strong id="reconciliationId">KA-2025-12-29-01</strong> · oprettet automatisk</swp-auto-id>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Note -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Note til difference</swp-card-title>
+            <swp-card-hint>Valgfrit</swp-card-hint>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-note-field>
+              <textarea placeholder="Fx kassedifference, fejlslag, runding osv."></textarea>
+            </swp-note-field>
+            <swp-note-hint>Kan gøres obligatorisk ved difference over 100 kr.</swp-note-hint>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Godkendelse -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Afslut dagen</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-approval-grid>
+              <swp-form-field>
+                <swp-form-label>Status</swp-form-label>
+                <swp-status-row>
+                  <swp-status-badge class="draft">Kladde</swp-status-badge>
+                </swp-status-row>
+              </swp-form-field>
+
+              <swp-form-field>
+                <swp-form-label>Godkendt af (valgfrit)</swp-form-label>
+                <swp-form-input>
+                  <select id="approver">
+                    <option value="">Vælg...</option>
+                    <option>Karina Knudsen</option>
+                    <option>Butikschef</option>
+                  </select>
+                </swp-form-input>
+              </swp-form-field>
+
+              <swp-checkbox-field>
+                <input type="checkbox" id="confirmCheckbox" />
+                <label for="confirmCheckbox">Jeg bekræfter, at kassen er talt op, og at tallene er indtastet efter bedste evne.</label>
+              </swp-checkbox-field>
+            </swp-approval-grid>
+          </swp-card-body>
+          <swp-card-footer>
+            <swp-btn class="secondary">Gem som kladde</swp-btn>
+            <swp-actions-right>
+              <swp-btn class="ghost">Fortryd</swp-btn>
+              <swp-btn class="primary" id="approveBtn" disabled>Godkend & lås</swp-btn>
+            </swp-actions-right>
+          </swp-card-footer>
+        </swp-card>
+      </div>
+    </div>
+
+    <swp-system-note>Systemet gemmer hvornår og af hvem der er godkendt – enkelt kontrolspor.</swp-system-note>
   </swp-page-container>
 
   <script>
     // Set today's date
     const dateInput = document.getElementById('reconciliationDate');
-    const today = new Date().toISOString().split('T')[0];
-    dateInput.value = today;
+    const today = new Date();
+    dateInput.value = today.toISOString().split('T')[0];
 
-    // Date navigation
-    document.querySelector('.prev').addEventListener('click', () => {
+    // Update reconciliation ID based on date
+    function updateReconciliationId() {
       const date = new Date(dateInput.value);
-      date.setDate(date.getDate() - 1);
-      dateInput.value = date.toISOString().split('T')[0];
-    });
+      const id = `KA-${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}-01`;
+      document.getElementById('reconciliationId').textContent = id;
+    }
+    dateInput.addEventListener('change', updateReconciliationId);
 
-    document.querySelector('.next').addEventListener('click', () => {
-      const date = new Date(dateInput.value);
-      date.setDate(date.getDate() + 1);
-      dateInput.value = date.toISOString().split('T')[0];
-    });
+    // Base values (from system)
+    const startBalance = 2000;
+    const cashSales = 3540;
 
-    // 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') ? '▼' : '▲';
+    // Format number as Danish currency
+    function formatNumber(num) {
+      return num.toLocaleString('da-DK', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
     }
 
-    // Cash count calculation
-    const primo = 230;
-    const cashIn = 0; // From payment methods
-
-    function formatCurrency(value) {
-      return value.toLocaleString('da-DK') + ' kr';
+    // Parse Danish number format
+    function parseNumber(str) {
+      if (!str) return 0;
+      return parseFloat(str.replace(/\./g, '').replace(',', '.')) || 0;
     }
 
-    function calculateCashTotal() {
-      const inputs = document.querySelectorAll('swp-denomination-item input');
-      let counted = 0;
+    // Calculate expected cash and difference
+    function calculate() {
+      const payoutsInput = document.getElementById('payouts');
+      const toBankInput = document.getElementById('toBank');
+      const actualInput = document.getElementById('actualCash');
 
-      inputs.forEach(input => {
-        const count = parseInt(input.value) || 0;
-        const value = parseInt(input.dataset.value);
-        counted += count * value;
-      });
+      const payouts = parseNumber(payoutsInput.value);
+      const toBank = parseNumber(toBankInput.value);
+      const actual = parseNumber(actualInput.value);
 
-      const expected = primo + cashIn;
-      const difference = counted - expected;
-      const toBank = parseInt(document.getElementById('toBank').value) || 0;
-      const restNextDay = counted - toBank;
+      // Forventet = start + salg - udbetalinger - til bank
+      const expectedCash = startBalance + cashSales - payouts - toBank;
+      document.getElementById('expectedCash').textContent = formatNumber(expectedCash);
 
-      // 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);
+      // Difference
+      const box = document.getElementById('differenceBox');
+      const value = document.getElementById('differenceValue');
+      const diff = actual - expectedCash;
 
-      // Update difference with color
-      const diffRow = document.getElementById('differenceRow');
-      const diffValue = document.getElementById('differenceValue');
+      box.classList.remove('positive', 'negative', 'neutral');
 
-      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');
+      if (actual === 0 && actualInput.value === '') {
+        value.textContent = '– kr';
+        box.classList.add('neutral');
+      } else if (diff > 0) {
+        value.textContent = '+' + formatNumber(diff) + ' kr';
+        box.classList.add('positive');
+      } else if (diff < 0) {
+        value.textContent = formatNumber(diff) + ' kr';
+        box.classList.add('negative');
       } else {
-        diffValue.textContent = '0 kr';
+        value.textContent = '0,00 kr';
+        box.classList.add('neutral');
       }
     }
 
-    // Add event listeners
-    document.querySelectorAll('swp-denomination-item input').forEach(input => {
-      input.addEventListener('input', calculateCashTotal);
+    document.getElementById('payouts').addEventListener('input', calculate);
+    document.getElementById('toBank').addEventListener('input', calculate);
+    document.getElementById('actualCash').addEventListener('input', calculate);
+
+    // Enable approve button when checkbox is checked
+    const checkbox = document.getElementById('confirmCheckbox');
+    const approveBtn = document.getElementById('approveBtn');
+
+    checkbox.addEventListener('change', () => {
+      approveBtn.disabled = !checkbox.checked;
     });
 
-    document.getElementById('toBank').addEventListener('input', calculateCashTotal);
-
-    // Initial calculation
-    calculateCashTotal();
+    // Initial display
+    calculate();
   </script>
 </body>
 </html>