From c1d2df932771af0ad822532d8d3a1c247d0d192b Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Mon, 19 Jan 2026 14:23:41 +0100
Subject: [PATCH] Refactors UI components with new card header structure

Replaces `swp-section-label` with standardized `swp-card-header` and `swp-card-title`

Improves component consistency across multiple features:
- Adds structured card headers
- Introduces more semantic HTML elements
- Enhances layout and readability of card components

Updates CSS and component styles to support new structure
---
 .../Components/InvoiceHistory/Default.cshtml  |  4 +-
 .../Components/CashApproval/Default.cshtml    |  4 +-
 .../Components/CashBalance/Default.cshtml     |  4 +-
 .../Components/PeriodInfo/Default.cshtml      |  4 +-
 .../Components/PeriodRevenue/Default.cshtml   |  4 +-
 .../ReconciliationNote/Default.cshtml         |  4 +-
 .../ReconciliationTable/Default.cshtml        |  2 +-
 .../Features/CashRegister/Pages/Index.cshtml  | 12 ++--
 .../Components/AttentionList/Default.cshtml   |  4 +-
 .../Components/BookingList/Default.cshtml     |  6 +-
 .../NotificationList/Default.cshtml           |  6 +-
 .../Components/QuickStatList/Default.cshtml   |  4 +-
 .../Features/Dashboard/Pages/Index.cshtml     |  4 +-
 .../EmployeeDetailGeneral/Default.cshtml      | 28 +++++++---
 .../EmployeeDetailHR/Default.cshtml           | 34 ++++++++----
 .../EmployeeDetailSalary/Default.cshtml       | 22 +++++---
 .../EmployeeDetailServices/Default.cshtml     |  4 +-
 .../EmployeeDetailStats/Default.cshtml        |  8 ++-
 .../ServiceDetailAddons/Default.cshtml        |  5 +-
 .../ServiceDetailDuration/Default.cshtml      |  9 ++-
 .../ServiceDetailEmployees/Default.cshtml     | 18 +++---
 .../ServiceDetailGeneral/Default.cshtml       | 20 ++++---
 .../ServiceDetailPrices/Default.cshtml        | 13 +++--
 .../ServiceDetailRules/Default.cshtml         | 12 +++-
 .../SettingsPayments/Default.cshtml           |  4 +-
 .../SettingsReminders/Default.cshtml          | 20 ++++---
 .../wwwroot/css/COMPONENT-CATALOG.md          | 55 +++++++++++++++----
 PlanTempus.Application/wwwroot/css/cash.css   | 30 +---------
 .../wwwroot/css/components.css                | 22 ++++----
 PlanTempus.Application/wwwroot/css/stats.css  |  2 +
 .../wwwroot/ts/modules/cash.ts                | 31 ++++++++---
 31 files changed, 250 insertions(+), 149 deletions(-)

diff --git a/PlanTempus.Application/Features/Account/Components/InvoiceHistory/Default.cshtml b/PlanTempus.Application/Features/Account/Components/InvoiceHistory/Default.cshtml
index 8ec4b75..8796866 100644
--- a/PlanTempus.Application/Features/Account/Components/InvoiceHistory/Default.cshtml
+++ b/PlanTempus.Application/Features/Account/Components/InvoiceHistory/Default.cshtml
@@ -1,5 +1,7 @@
 <swp-card class="invoice-history">
-    <swp-section-label localize="account.invoices.title">Faktura-historik</swp-section-label>
+    <swp-card-header>
+        <swp-card-title localize="account.invoices.title">Faktura-historik</swp-card-title>
+    </swp-card-header>
     <swp-data-table>
         <swp-data-table-header>
             <swp-data-table-cell localize="account.invoices.date">Dato</swp-data-table-cell>
diff --git a/PlanTempus.Application/Features/CashRegister/Components/CashApproval/Default.cshtml b/PlanTempus.Application/Features/CashRegister/Components/CashApproval/Default.cshtml
index 109dfe5..1be609a 100644
--- a/PlanTempus.Application/Features/CashRegister/Components/CashApproval/Default.cshtml
+++ b/PlanTempus.Application/Features/CashRegister/Components/CashApproval/Default.cshtml
@@ -1,5 +1,7 @@
 <swp-card>
-    <swp-section-label localize="cash.approval.title">Afslut dagen</swp-section-label>
+    <swp-card-header>
+        <swp-card-title localize="cash.approval.title">Afslut dagen</swp-card-title>
+    </swp-card-header>
     <swp-card-content>
         <swp-approval-grid>
             <swp-form-field>
diff --git a/PlanTempus.Application/Features/CashRegister/Components/CashBalance/Default.cshtml b/PlanTempus.Application/Features/CashRegister/Components/CashBalance/Default.cshtml
index beb8052..d6f3cc1 100644
--- a/PlanTempus.Application/Features/CashRegister/Components/CashBalance/Default.cshtml
+++ b/PlanTempus.Application/Features/CashRegister/Components/CashBalance/Default.cshtml
@@ -1,5 +1,7 @@
 <swp-card>
-    <swp-section-label localize="cash.balance.title">Kontanter i kassen</swp-section-label>
+    <swp-card-header>
+        <swp-card-title localize="cash.balance.title">Kontanter i kassen</swp-card-title>
+    </swp-card-header>
     <swp-card-content>
         <swp-calc-row>
             <swp-calc-label>
diff --git a/PlanTempus.Application/Features/CashRegister/Components/PeriodInfo/Default.cshtml b/PlanTempus.Application/Features/CashRegister/Components/PeriodInfo/Default.cshtml
index 4571d8c..8956a97 100644
--- a/PlanTempus.Application/Features/CashRegister/Components/PeriodInfo/Default.cshtml
+++ b/PlanTempus.Application/Features/CashRegister/Components/PeriodInfo/Default.cshtml
@@ -1,5 +1,7 @@
 <swp-card>
-    <swp-section-label localize="cash.period.title">Periodeoplysninger</swp-section-label>
+    <swp-card-header>
+        <swp-card-title localize="cash.period.title">Periodeoplysninger</swp-card-title>
+    </swp-card-header>
     <swp-card-content>
         <swp-period-display>
             <swp-period-label localize="cash.period.dateRange">Periode</swp-period-label>
diff --git a/PlanTempus.Application/Features/CashRegister/Components/PeriodRevenue/Default.cshtml b/PlanTempus.Application/Features/CashRegister/Components/PeriodRevenue/Default.cshtml
index b2a5cf0..39c3494 100644
--- a/PlanTempus.Application/Features/CashRegister/Components/PeriodRevenue/Default.cshtml
+++ b/PlanTempus.Application/Features/CashRegister/Components/PeriodRevenue/Default.cshtml
@@ -1,5 +1,7 @@
 <swp-card>
-    <swp-section-label localize="cash.revenue.title">Periodens omsætning</swp-section-label>
+    <swp-card-header>
+        <swp-card-title localize="cash.revenue.title">Periodens omsætning</swp-card-title>
+    </swp-card-header>
     <swp-card-content>
         <swp-data-table>
             <swp-data-header>
diff --git a/PlanTempus.Application/Features/CashRegister/Components/ReconciliationNote/Default.cshtml b/PlanTempus.Application/Features/CashRegister/Components/ReconciliationNote/Default.cshtml
index b7d1936..bda7473 100644
--- a/PlanTempus.Application/Features/CashRegister/Components/ReconciliationNote/Default.cshtml
+++ b/PlanTempus.Application/Features/CashRegister/Components/ReconciliationNote/Default.cshtml
@@ -1,5 +1,7 @@
 <swp-card>
-    <swp-section-label localize="cash.note.title">Note til afstemning</swp-section-label>
+    <swp-card-header>
+        <swp-card-title localize="cash.note.title">Note til afstemning</swp-card-title>
+    </swp-card-header>
     <swp-card-content>
         <swp-note-field>
             <textarea placeholder="Beskriv evt. årsag til difference..."></textarea>
diff --git a/PlanTempus.Application/Features/CashRegister/Components/ReconciliationTable/Default.cshtml b/PlanTempus.Application/Features/CashRegister/Components/ReconciliationTable/Default.cshtml
index e75ddf8..3a385e3 100644
--- a/PlanTempus.Application/Features/CashRegister/Components/ReconciliationTable/Default.cshtml
+++ b/PlanTempus.Application/Features/CashRegister/Components/ReconciliationTable/Default.cshtml
@@ -1,5 +1,5 @@
 <!-- Action Bar -->
-<swp-action-bar>
+<swp-action-bar class="grid-top">
     <swp-selection-info>
         <span id="selectionCount" localize="cash.table.noneSelected">0 valgt</span>
     </swp-selection-info>
diff --git a/PlanTempus.Application/Features/CashRegister/Pages/Index.cshtml b/PlanTempus.Application/Features/CashRegister/Pages/Index.cshtml
index d1e930d..9d227b2 100644
--- a/PlanTempus.Application/Features/CashRegister/Pages/Index.cshtml
+++ b/PlanTempus.Application/Features/CashRegister/Pages/Index.cshtml
@@ -74,19 +74,19 @@
 <!-- Tab Content: Kasseafstemning -->
 <swp-tab-content data-tab="afstemning">
     <swp-page-container>
-        <swp-cash-grid>
-            <swp-cash-column>
+        <swp-two-column-grid>
+            <swp-card-column>
                 @await Component.InvokeAsync("PeriodRevenue")
                 @await Component.InvokeAsync("CashBalance")
                 @await Component.InvokeAsync("CashDifference")
-            </swp-cash-column>
+            </swp-card-column>
 
-            <swp-cash-column>
+            <swp-card-column>
                 @await Component.InvokeAsync("PeriodInfo")
                 @await Component.InvokeAsync("ReconciliationNote")
                 @await Component.InvokeAsync("CashApproval")
-            </swp-cash-column>
-        </swp-cash-grid>
+            </swp-card-column>
+        </swp-two-column-grid>
 
         <swp-system-note localize="cash.systemNote">Systemet gemmer hvornår og af hvem der er godkendt – enkelt kontrolspor.</swp-system-note>
     </swp-page-container>
diff --git a/PlanTempus.Application/Features/Dashboard/Components/AttentionList/Default.cshtml b/PlanTempus.Application/Features/Dashboard/Components/AttentionList/Default.cshtml
index 77f5360..22bcca1 100644
--- a/PlanTempus.Application/Features/Dashboard/Components/AttentionList/Default.cshtml
+++ b/PlanTempus.Application/Features/Dashboard/Components/AttentionList/Default.cshtml
@@ -1,7 +1,9 @@
 @model PlanTempus.Application.Features.Dashboard.Components.AttentionListViewModel
 
 <swp-card data-key="@Model.Key">
-    <swp-section-label>@Model.Title</swp-section-label>
+    <swp-card-header>
+        <swp-card-title>@Model.Title</swp-card-title>
+    </swp-card-header>
     <swp-card-content>
         <swp-attention-list>
             @foreach (var attentionKey in Model.AttentionKeys)
diff --git a/PlanTempus.Application/Features/Dashboard/Components/BookingList/Default.cshtml b/PlanTempus.Application/Features/Dashboard/Components/BookingList/Default.cshtml
index 3c46b91..573fea6 100644
--- a/PlanTempus.Application/Features/Dashboard/Components/BookingList/Default.cshtml
+++ b/PlanTempus.Application/Features/Dashboard/Components/BookingList/Default.cshtml
@@ -1,10 +1,10 @@
 @model PlanTempus.Application.Features.Dashboard.Components.BookingListViewModel
 
 <swp-card data-key="@Model.Key">
-    <swp-section-header>
-        <swp-section-label>@Model.Title</swp-section-label>
+    <swp-card-header>
+        <swp-card-title>@Model.Title</swp-card-title>
         <swp-section-action localize="dashboard.bookings.viewAll">Se alle</swp-section-action>
-    </swp-section-header>
+    </swp-card-header>
     <swp-current-time>
         <i class="ph ph-clock"></i>
         <span><span localize="dashboard.bookings.currentTime">Nu:</span> <swp-time>@Model.CurrentTime</swp-time></span>
diff --git a/PlanTempus.Application/Features/Dashboard/Components/NotificationList/Default.cshtml b/PlanTempus.Application/Features/Dashboard/Components/NotificationList/Default.cshtml
index 73a739d..2adfd1b 100644
--- a/PlanTempus.Application/Features/Dashboard/Components/NotificationList/Default.cshtml
+++ b/PlanTempus.Application/Features/Dashboard/Components/NotificationList/Default.cshtml
@@ -1,10 +1,10 @@
 @model PlanTempus.Application.Features.Dashboard.Components.NotificationListViewModel
 
 <swp-card data-key="@Model.Key">
-    <swp-section-header>
-        <swp-section-label>@Model.Title</swp-section-label>
+    <swp-card-header>
+        <swp-card-title>@Model.Title</swp-card-title>
         <swp-section-action>@Model.ActionText</swp-section-action>
-    </swp-section-header>
+    </swp-card-header>
     <swp-card-content>
         <swp-notification-list>
             @foreach (var notificationKey in Model.NotificationKeys)
diff --git a/PlanTempus.Application/Features/Dashboard/Components/QuickStatList/Default.cshtml b/PlanTempus.Application/Features/Dashboard/Components/QuickStatList/Default.cshtml
index c309c10..006edbe 100644
--- a/PlanTempus.Application/Features/Dashboard/Components/QuickStatList/Default.cshtml
+++ b/PlanTempus.Application/Features/Dashboard/Components/QuickStatList/Default.cshtml
@@ -1,7 +1,9 @@
 @model PlanTempus.Application.Features.Dashboard.Components.QuickStatListViewModel
 
 <swp-card data-key="@Model.Key">
-    <swp-section-label>@Model.Title</swp-section-label>
+    <swp-card-header>
+        <swp-card-title>@Model.Title</swp-card-title>
+    </swp-card-header>
     <swp-card-content>
         <swp-quick-stats>
             @foreach (var statKey in Model.StatKeys)
diff --git a/PlanTempus.Application/Features/Dashboard/Pages/Index.cshtml b/PlanTempus.Application/Features/Dashboard/Pages/Index.cshtml
index fd12e17..ad4c940 100644
--- a/PlanTempus.Application/Features/Dashboard/Pages/Index.cshtml
+++ b/PlanTempus.Application/Features/Dashboard/Pages/Index.cshtml
@@ -50,7 +50,9 @@
 
             <!-- Quick Actions -->
             <swp-card>
-                <swp-section-label localize="dashboard.quickActions.title">Hurtige handlinger</swp-section-label>
+                <swp-card-header>
+                    <swp-card-title localize="dashboard.quickActions.title">Hurtige handlinger</swp-card-title>
+                </swp-card-header>
                 <swp-card-content>
                     <swp-quick-actions>
                         <swp-quick-action-btn>
diff --git a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailGeneral/Default.cshtml b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailGeneral/Default.cshtml
index aa95640..74a7dce 100644
--- a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailGeneral/Default.cshtml
+++ b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailGeneral/Default.cshtml
@@ -2,10 +2,12 @@
 
 <swp-detail-grid>
     <!-- Left column -->
-    <div>
+    <swp-card-column>
         <!-- Contact Card -->
         <swp-card>
-            <swp-section-label>@Model.LabelContact</swp-section-label>
+            <swp-card-header>
+                <swp-card-title>@Model.LabelContact</swp-card-title>
+            </swp-card-header>
             <swp-edit-section>
                 <swp-edit-row>
                     <swp-edit-label>@Model.LabelFullName</swp-edit-label>
@@ -32,7 +34,9 @@
 
         <!-- Personal Card -->
         <swp-card>
-            <swp-section-label>@Model.LabelPersonal</swp-section-label>
+            <swp-card-header>
+                <swp-card-title>@Model.LabelPersonal</swp-card-title>
+            </swp-card-header>
             <swp-edit-section>
                 <swp-edit-row>
                     <swp-edit-label>@Model.LabelBirthDate</swp-edit-label>
@@ -48,13 +52,15 @@
                 </swp-edit-row>
             </swp-edit-section>
         </swp-card>
-    </div>
+    </swp-card-column>
 
     <!-- Right column -->
-    <div>
+    <swp-card-column>
         <!-- Employment Card -->
         <swp-card>
-            <swp-section-label>@Model.LabelEmployment</swp-section-label>
+            <swp-card-header>
+                <swp-card-title>@Model.LabelEmployment</swp-card-title>
+            </swp-card-header>
             <swp-edit-section>
                 <swp-edit-row>
                     <swp-edit-label>@Model.LabelEmploymentDate</swp-edit-label>
@@ -77,7 +83,9 @@
 
         <!-- Settings Card -->
         <swp-card>
-            <swp-section-label>@Model.LabelSettings</swp-section-label>
+            <swp-card-header>
+                <swp-card-title>@Model.LabelSettings</swp-card-title>
+            </swp-card-header>
             <swp-toggle-row>
                 <div>
                     <swp-toggle-label>@Model.SettingShowInBooking</swp-toggle-label>
@@ -102,7 +110,9 @@
 
         <!-- Notifications Card -->
         <swp-card>
-            <swp-section-label>@Model.LabelNotifications</swp-section-label>
+            <swp-card-header>
+                <swp-card-title>@Model.LabelNotifications</swp-card-title>
+            </swp-card-header>
             <swp-notification-intro>@Model.NotificationsIntro</swp-notification-intro>
             <swp-toggle-row>
                 <swp-toggle-label>@Model.SettingSmsReminders</swp-toggle-label>
@@ -147,5 +157,5 @@
                 </swp-toggle-slider>
             </swp-toggle-row>
         </swp-card>
-    </div>
+    </swp-card-column>
 </swp-detail-grid>
diff --git a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailHR/Default.cshtml b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailHR/Default.cshtml
index 3fcbda2..23c38f5 100644
--- a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailHR/Default.cshtml
+++ b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailHR/Default.cshtml
@@ -2,11 +2,12 @@
 
 <swp-detail-grid>
     <!-- Left column -->
-    <div>
+    <swp-card-column>
         <!-- Contract & Documents -->
         <swp-card>
-            <swp-section-label>@Model.LabelContractDocuments</swp-section-label>
-
+            <swp-card-header>
+                <swp-card-title>@Model.LabelContractDocuments</swp-card-title>
+            </swp-card-header>
             <swp-edit-section>
                 <swp-edit-row>
                     <swp-edit-label>@Model.LabelContractType</swp-edit-label>
@@ -57,7 +58,9 @@
 
         <!-- Planned absence -->
         <swp-card>
-            <swp-section-label>@Model.LabelPlannedAbsence</swp-section-label>
+            <swp-card-header>
+                <swp-card-title>@Model.LabelPlannedAbsence</swp-card-title>
+            </swp-card-header>
             <swp-simple-list>
                 @foreach (var absence in Model.PlannedAbsences)
                 {
@@ -69,13 +72,15 @@
             </swp-simple-list>
             <swp-add-button>+ @Model.LabelAddAbsence</swp-add-button>
         </swp-card>
-    </div>
+    </swp-card-column>
 
     <!-- Right column -->
-    <div>
+    <swp-card-column>
         <!-- Certifications -->
         <swp-card>
-            <swp-section-label>@Model.LabelCertifications</swp-section-label>
+            <swp-card-header>
+                <swp-card-title>@Model.LabelCertifications</swp-card-title>
+            </swp-card-header>
             <swp-document-list>
                 @foreach (var cert in Model.Certifications)
                 {
@@ -96,8 +101,9 @@
 
         <!-- Courses -->
         <swp-card>
-            <swp-section-label>@Model.LabelCourses</swp-section-label>
-
+            <swp-card-header>
+                <swp-card-title>@Model.LabelCourses</swp-card-title>
+            </swp-card-header>
             <swp-subsection>
                 <swp-subsection-title>@Model.LabelCompletedCourses</swp-subsection-title>
                 <swp-document-list>
@@ -136,13 +142,15 @@
 
             <swp-add-button>+ @Model.LabelAddCourse</swp-add-button>
         </swp-card>
-    </div>
+    </swp-card-column>
 </swp-detail-grid>
 
 <!-- Vacation & Absence section -->
 <swp-detail-grid style="margin-top: var(--spacing-8);">
     <swp-card>
-        <swp-section-label>@Model.LabelVacationBalance</swp-section-label>
+        <swp-card-header>
+            <swp-card-title>@Model.LabelVacationBalance</swp-card-title>
+        </swp-card-header>
         <swp-edit-section>
             <swp-edit-row>
                 <swp-edit-label>@Model.LabelVacationEarned</swp-edit-label>
@@ -160,7 +168,9 @@
     </swp-card>
 
     <swp-card>
-        <swp-section-label>@Model.LabelAbsenceSickness</swp-section-label>
+        <swp-card-header>
+            <swp-card-title>@Model.LabelAbsenceSickness</swp-card-title>
+        </swp-card-header>
         <swp-edit-section>
             <swp-edit-row>
                 <swp-edit-label>@Model.LabelSickDays2025</swp-edit-label>
diff --git a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml
index 7560c6d..3d1053b 100644
--- a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml
+++ b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml
@@ -1,13 +1,13 @@
 @model PlanTempus.Application.Features.Employees.Components.EmployeeDetailSalaryViewModel
 
 <swp-detail-grid>
-    <div>
+    <swp-card-column>
         <!-- Satser (Grundsatser) -->
         <swp-card>
-            <swp-section-header>
-                <swp-section-label>@Model.LabelRates</swp-section-label>
+            <swp-card-header>
+                <swp-card-title>@Model.LabelRates</swp-card-title>
                 <swp-section-action data-drawer-trigger="rates-drawer">@Model.LabelEdit</swp-section-action>
-            </swp-section-header>
+            </swp-card-header>
             <swp-edit-section>
                 <swp-edit-row id="card-normal">
                     <swp-edit-label>@Model.LabelNormalRate</swp-edit-label>
@@ -54,7 +54,9 @@
 
         <!-- Tillæg -->
         <swp-card>
-            <swp-section-label>@Model.LabelSupplements</swp-section-label>
+            <swp-card-header>
+                <swp-card-title>@Model.LabelSupplements</swp-card-title>
+            </swp-card-header>
             <swp-edit-section>
                 <swp-edit-row id="card-weekday">
                     <swp-edit-label>@Model.LabelWeekdaySupplement</swp-edit-label>
@@ -73,7 +75,9 @@
 
         <!-- Provision -->
         <swp-card>
-            <swp-section-label>@Model.LabelCommission</swp-section-label>
+            <swp-card-header>
+                <swp-card-title>@Model.LabelCommission</swp-card-title>
+            </swp-card-header>
             <swp-edit-section>
                 <swp-edit-row id="card-productcommission">
                     <swp-edit-label>@Model.LabelProductCommission</swp-edit-label>
@@ -85,10 +89,12 @@
                 </swp-edit-row>
             </swp-edit-section>
         </swp-card>
-    </div>
+    </swp-card-column>
 
     <swp-card class="salary-history">
-        <swp-section-label>@Model.LabelSalaryHistory</swp-section-label>
+        <swp-card-header>
+            <swp-card-title>@Model.LabelSalaryHistory</swp-card-title>
+        </swp-card-header>
         <swp-data-table>
             <swp-data-table-header>
                 <swp-data-table-cell>@Model.LabelPeriod</swp-data-table-cell>
diff --git a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailServices/Default.cshtml b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailServices/Default.cshtml
index f6f55f0..b206b0a 100644
--- a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailServices/Default.cshtml
+++ b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailServices/Default.cshtml
@@ -2,7 +2,9 @@
 
 <swp-detail-grid>
     <swp-card>
-        <swp-section-label>@Model.LabelAssignedServices</swp-section-label>
+        <swp-card-header>
+            <swp-card-title>@Model.LabelAssignedServices</swp-card-title>
+        </swp-card-header>
         <swp-service-list>
             <swp-service-item>
                 <swp-service-name>Dameklip</swp-service-name>
diff --git a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailStats/Default.cshtml b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailStats/Default.cshtml
index 433a8ce..b5a65be 100644
--- a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailStats/Default.cshtml
+++ b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailStats/Default.cshtml
@@ -2,7 +2,9 @@
 
 <swp-detail-grid>
     <swp-card>
-        <swp-section-label>@Model.LabelPerformance</swp-section-label>
+        <swp-card-header>
+            <swp-card-title>@Model.LabelPerformance</swp-card-title>
+        </swp-card-header>
         <swp-stats-row>
             <swp-stat-card class="teal">
                 <swp-stat-value>@Model.BookingsThisYear</swp-stat-value>
@@ -24,7 +26,9 @@
     </swp-card>
 
     <swp-card class="stats-bookings">
-        <swp-section-label>@Model.LabelCompletedBookings</swp-section-label>
+        <swp-card-header>
+            <swp-card-title>@Model.LabelCompletedBookings</swp-card-title>
+        </swp-card-header>
         <swp-data-table>
             <swp-data-table-header>
                 <swp-data-table-cell>@Model.LabelDate</swp-data-table-cell>
diff --git a/PlanTempus.Application/Features/Services/Components/ServiceDetailAddons/Default.cshtml b/PlanTempus.Application/Features/Services/Components/ServiceDetailAddons/Default.cshtml
index f9ac741..1646d24 100644
--- a/PlanTempus.Application/Features/Services/Components/ServiceDetailAddons/Default.cshtml
+++ b/PlanTempus.Application/Features/Services/Components/ServiceDetailAddons/Default.cshtml
@@ -1,8 +1,9 @@
 @model PlanTempus.Application.Features.Services.Components.ServiceDetailAddonsViewModel
 
 <swp-card>
-    <swp-section-label>@Model.LabelAddonsForService</swp-section-label>
-
+    <swp-card-header>
+        <swp-card-title>@Model.LabelAddonsForService</swp-card-title>
+    </swp-card-header>
     <swp-selectable-list>
         @foreach (var addon in Model.Addons)
         {
diff --git a/PlanTempus.Application/Features/Services/Components/ServiceDetailDuration/Default.cshtml b/PlanTempus.Application/Features/Services/Components/ServiceDetailDuration/Default.cshtml
index 35864d7..3ba76f2 100644
--- a/PlanTempus.Application/Features/Services/Components/ServiceDetailDuration/Default.cshtml
+++ b/PlanTempus.Application/Features/Services/Components/ServiceDetailDuration/Default.cshtml
@@ -2,8 +2,9 @@
 
 <swp-detail-grid>
     <swp-card>
-        <swp-section-label>@Model.LabelDurationVariants</swp-section-label>
-
+        <swp-card-header>
+            <swp-card-title>@Model.LabelDurationVariants</swp-card-title>
+        </swp-card-header>
         <swp-duration-list>
             @foreach (var variant in Model.DurationVariants)
             {
@@ -27,7 +28,9 @@
     </swp-card>
 
     <swp-card>
-        <swp-section-label>@Model.LabelBufferTimes</swp-section-label>
+        <swp-card-header>
+            <swp-card-title>@Model.LabelBufferTimes</swp-card-title>
+        </swp-card-header>
         <swp-edit-section>
             <swp-edit-row>
                 <swp-edit-label>@Model.LabelBufferBefore</swp-edit-label>
diff --git a/PlanTempus.Application/Features/Services/Components/ServiceDetailEmployees/Default.cshtml b/PlanTempus.Application/Features/Services/Components/ServiceDetailEmployees/Default.cshtml
index 915c0ee..7d45334 100644
--- a/PlanTempus.Application/Features/Services/Components/ServiceDetailEmployees/Default.cshtml
+++ b/PlanTempus.Application/Features/Services/Components/ServiceDetailEmployees/Default.cshtml
@@ -1,10 +1,11 @@
 @model PlanTempus.Application.Features.Services.Components.ServiceDetailEmployeesViewModel
 
 <swp-detail-grid>
-    <div>
+    <swp-card-column>
         <swp-card>
-            <swp-section-label>@Model.LabelEmployeesForService</swp-section-label>
-
+            <swp-card-header>
+                <swp-card-title>@Model.LabelEmployeesForService</swp-card-title>
+            </swp-card-header>
             <swp-selectable-list>
                 @foreach (var employee in Model.Employees)
                 {
@@ -32,12 +33,13 @@
 
             <swp-see-all>@Model.LabelSelectAll</swp-see-all>
         </swp-card>
-    </div>
+    </swp-card-column>
 
-    <div>
+    <swp-card-column>
         <swp-card>
-            <swp-section-label>@Model.LabelAvailability</swp-section-label>
-
+            <swp-card-header>
+                <swp-card-title>@Model.LabelAvailability</swp-card-title>
+            </swp-card-header>
             <swp-availability-list>
                 @foreach (var day in Model.Availability)
                 {
@@ -62,5 +64,5 @@
                 }
             </swp-availability-list>
         </swp-card>
-    </div>
+    </swp-card-column>
 </swp-detail-grid>
diff --git a/PlanTempus.Application/Features/Services/Components/ServiceDetailGeneral/Default.cshtml b/PlanTempus.Application/Features/Services/Components/ServiceDetailGeneral/Default.cshtml
index 207805d..82e4563 100644
--- a/PlanTempus.Application/Features/Services/Components/ServiceDetailGeneral/Default.cshtml
+++ b/PlanTempus.Application/Features/Services/Components/ServiceDetailGeneral/Default.cshtml
@@ -2,10 +2,12 @@
 
 <swp-detail-grid>
     <!-- Left column -->
-    <div>
+    <swp-card-column>
         <!-- Basic Info Card -->
         <swp-card>
-            <swp-section-label>@Model.LabelBasic</swp-section-label>
+            <swp-card-header>
+                <swp-card-title>@Model.LabelBasic</swp-card-title>
+            </swp-card-header>
             <swp-edit-section>
                 <swp-edit-row>
                     <swp-edit-label>@Model.LabelServiceName</swp-edit-label>
@@ -70,7 +72,9 @@
 
         <!-- Booking Type Card -->
         <swp-card>
-            <swp-section-label>@Model.LabelBookingType</swp-section-label>
+            <swp-card-header>
+                <swp-card-title>@Model.LabelBookingType</swp-card-title>
+            </swp-card-header>
             <swp-toggle-row>
                 <div>
                     <swp-toggle-label>@Model.LabelCanBookAsMain</swp-toggle-label>
@@ -92,13 +96,15 @@
                 </swp-toggle-slider>
             </swp-toggle-row>
         </swp-card>
-    </div>
+    </swp-card-column>
 
     <!-- Right column -->
-    <div>
+    <swp-card-column>
         <!-- Online Booking Card -->
         <swp-card>
-            <swp-section-label>@Model.LabelOnlineBooking</swp-section-label>
+            <swp-card-header>
+                <swp-card-title>@Model.LabelOnlineBooking</swp-card-title>
+            </swp-card-header>
             <swp-toggle-row>
                 <div>
                     <swp-toggle-label>@Model.LabelShowInOnlineBooking</swp-toggle-label>
@@ -129,5 +135,5 @@
                 @Model.LabelUploadImage
             </swp-add-button>
         </swp-card>
-    </div>
+    </swp-card-column>
 </swp-detail-grid>
diff --git a/PlanTempus.Application/Features/Services/Components/ServiceDetailPrices/Default.cshtml b/PlanTempus.Application/Features/Services/Components/ServiceDetailPrices/Default.cshtml
index 8075090..8ed8e70 100644
--- a/PlanTempus.Application/Features/Services/Components/ServiceDetailPrices/Default.cshtml
+++ b/PlanTempus.Application/Features/Services/Components/ServiceDetailPrices/Default.cshtml
@@ -1,8 +1,9 @@
 @model PlanTempus.Application.Features.Services.Components.ServiceDetailPricesViewModel
 
 <swp-card>
-    <swp-section-label>@Model.LabelPriceStructure</swp-section-label>
-
+    <swp-card-header>
+        <swp-card-title>@Model.LabelPriceStructure</swp-card-title>
+    </swp-card-header>
     <swp-price-mode>
         <swp-price-mode-btn data-mode="simple" class="@(Model.PriceMode == PlanTempus.Application.Features.Services.Components.PriceMode.Simple ? "active" : "")">@Model.LabelSimplePrice</swp-price-mode-btn>
         <swp-price-mode-btn data-mode="matrix" class="@(Model.PriceMode == PlanTempus.Application.Features.Services.Components.PriceMode.Matrix ? "active" : "")">@Model.LabelMatrixPrice</swp-price-mode-btn>
@@ -49,7 +50,9 @@
 
 <swp-detail-grid>
     <swp-card>
-        <swp-section-label>@Model.LabelEconomy</swp-section-label>
+        <swp-card-header>
+            <swp-card-title>@Model.LabelEconomy</swp-card-title>
+        </swp-card-header>
         <swp-edit-section>
             <swp-edit-row>
                 <swp-edit-label>@Model.LabelVatRate</swp-edit-label>
@@ -86,7 +89,9 @@
     </swp-card>
 
     <swp-card>
-        <swp-section-label>@Model.LabelDiscounts</swp-section-label>
+        <swp-card-header>
+            <swp-card-title>@Model.LabelDiscounts</swp-card-title>
+        </swp-card-header>
         <swp-toggle-row>
             <swp-toggle-label>@Model.LabelMemberDiscount</swp-toggle-label>
             <swp-toggle-slider data-value="@(Model.MemberDiscount ? "yes" : "no")">
diff --git a/PlanTempus.Application/Features/Services/Components/ServiceDetailRules/Default.cshtml b/PlanTempus.Application/Features/Services/Components/ServiceDetailRules/Default.cshtml
index 57f6813..6c5b5d0 100644
--- a/PlanTempus.Application/Features/Services/Components/ServiceDetailRules/Default.cshtml
+++ b/PlanTempus.Application/Features/Services/Components/ServiceDetailRules/Default.cshtml
@@ -2,7 +2,9 @@
 
 <swp-detail-grid>
     <swp-card>
-        <swp-section-label>@Model.LabelBookingRules</swp-section-label>
+        <swp-card-header>
+            <swp-card-title>@Model.LabelBookingRules</swp-card-title>
+        </swp-card-header>
         <swp-edit-section>
             <swp-edit-row>
                 <swp-edit-label>@Model.LabelMinNotice</swp-edit-label>
@@ -73,7 +75,9 @@
     </swp-card>
 
     <swp-card>
-        <swp-section-label>@Model.LabelRequirements</swp-section-label>
+        <swp-card-header>
+            <swp-card-title>@Model.LabelRequirements</swp-card-title>
+        </swp-card-header>
         <swp-toggle-row>
             <div>
                 <swp-toggle-label>@Model.LabelRequiresConsultation</swp-toggle-label>
@@ -108,7 +112,9 @@
 </swp-detail-grid>
 
 <swp-card>
-    <swp-section-label>@Model.LabelOnlineBookingSettings</swp-section-label>
+    <swp-card-header>
+        <swp-card-title>@Model.LabelOnlineBookingSettings</swp-card-title>
+    </swp-card-header>
     <swp-toggle-row>
         <swp-toggle-label>@Model.LabelShowInOnlineBooking</swp-toggle-label>
         <swp-toggle-slider data-value="@(Model.ShowInOnlineBooking ? "yes" : "no")">
diff --git a/PlanTempus.Application/Features/Settings/Components/SettingsPayments/Default.cshtml b/PlanTempus.Application/Features/Settings/Components/SettingsPayments/Default.cshtml
index 6694493..24d7745 100644
--- a/PlanTempus.Application/Features/Settings/Components/SettingsPayments/Default.cshtml
+++ b/PlanTempus.Application/Features/Settings/Components/SettingsPayments/Default.cshtml
@@ -63,7 +63,7 @@
     </swp-card>
 
     <!-- Column 2: Online betaling + Gebyr -->
-    <div class="stacked-cards">
+    <swp-card-column>
         <!-- Online betaling -->
         <swp-card>
             <swp-card-header>
@@ -137,5 +137,5 @@
                 </swp-toggle-row>
             </swp-card-content>
         </swp-card>
-    </div>
+    </swp-card-column>
 </swp-two-column-grid>
diff --git a/PlanTempus.Application/Features/Settings/Components/SettingsReminders/Default.cshtml b/PlanTempus.Application/Features/Settings/Components/SettingsReminders/Default.cshtml
index 23f2804..e84b587 100644
--- a/PlanTempus.Application/Features/Settings/Components/SettingsReminders/Default.cshtml
+++ b/PlanTempus.Application/Features/Settings/Components/SettingsReminders/Default.cshtml
@@ -1,10 +1,12 @@
 <swp-two-column-grid>
     <!-- EMAIL -->
     <swp-card>
-        <swp-section-label>
-            <i class="ph ph-envelope"></i>
-            Email
-        </swp-section-label>
+        <swp-card-header>
+            <swp-card-title>
+                <i class="ph ph-envelope"></i>
+                Email
+            </swp-card-title>
+        </swp-card-header>
         <swp-toggle-row>
             <div>
                 <swp-toggle-label>Bekræftelse</swp-toggle-label>
@@ -51,10 +53,12 @@
 
     <!-- SMS -->
     <swp-card>
-        <swp-section-label>
-            <i class="ph ph-chat-text"></i>
-            SMS
-        </swp-section-label>
+        <swp-card-header>
+            <swp-card-title>
+                <i class="ph ph-chat-text"></i>
+                SMS
+            </swp-card-title>
+        </swp-card-header>
         <swp-toggle-row>
             <div>
                 <swp-toggle-label>Bekræftelse online <span class="text-secondary">(0,30 kr.)</span></swp-toggle-label>
diff --git a/PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md b/PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md
index aca7a8c..2f3d4e7 100644
--- a/PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md
+++ b/PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md
@@ -75,29 +75,58 @@ Standard icon wrapper (40×40px cirkel):
 | `swp-page-title` | Titel-wrapper med h1 og p | h1 + subtitle |
 | `swp-page-actions` | Action buttons i header | Flex gap |
 | `swp-card` | Standard card wrapper | Border, padding, rounded |
-| `swp-section-label` | Card section label | Uppercase, 11px, border-bottom |
-| `swp-section-header` | Wrapper for label + action | Flex, space-between |
-| `swp-section-action` | Action link i section header | Teal, clickable |
+| `swp-card-header` | Card header wrapper | Flex, space-between, border-bottom |
+| `swp-card-title` | Card title med ikon | Flex, icon + text |
+| `swp-section-action` | Action link i header | Teal, clickable |
+| `swp-section-label` | Subsection label (inde i card) | Uppercase, 11px, border-bottom |
 | `swp-card-content` | Card indhold | Block |
 
 ### Card Header Eksempler
 
-**Simpel label (uden action):**
+**Standard card header (ANBEFALET):**
 ```html
 <swp-card>
-    <swp-section-label>Kontakter</swp-section-label>
-    <swp-card-content>...</swp-card-content>
+    <swp-card-header>
+        <swp-card-title>Kontakter</swp-card-title>
+    </swp-card-header>
+    <!-- content -->
 </swp-card>
 ```
 
-**Label med action:**
+**Card header med ikon:**
 ```html
 <swp-card>
-    <swp-section-header>
-        <swp-section-label>Dagens bookinger</swp-section-label>
+    <swp-card-header>
+        <swp-card-title>
+            <i class="ph ph-envelope"></i>
+            Email
+        </swp-card-title>
+    </swp-card-header>
+    <!-- content -->
+</swp-card>
+```
+
+**Card header med action:**
+```html
+<swp-card>
+    <swp-card-header>
+        <swp-card-title>Dagens bookinger</swp-card-title>
         <swp-section-action>Se alle</swp-section-action>
-    </swp-section-header>
-    <swp-card-content>...</swp-card-content>
+    </swp-card-header>
+    <!-- content -->
+</swp-card>
+```
+
+**Subsection label (inde i card):**
+```html
+<swp-card>
+    <swp-card-header>
+        <swp-card-title>Grundlæggende</swp-card-title>
+    </swp-card-header>
+    <!-- first section content -->
+
+    <swp-section-label class="spaced">Interne noter</swp-section-label>
+    <!-- second section content -->
 </swp-card>
 ```
 
@@ -434,7 +463,9 @@ Bruger `swp-data-table` med `.salary-history` context class.
 
 ```html
 <swp-card class="salary-history">
-    <swp-section-label>Lønhistorik</swp-section-label>
+    <swp-card-header>
+        <swp-card-title>Lønhistorik</swp-card-title>
+    </swp-card-header>
     <swp-data-table>
         <swp-data-table-header>
             <swp-data-table-cell>Periode</swp-data-table-cell>
diff --git a/PlanTempus.Application/wwwroot/css/cash.css b/PlanTempus.Application/wwwroot/css/cash.css
index 67ce439..9c0a355 100644
--- a/PlanTempus.Application/wwwroot/css/cash.css
+++ b/PlanTempus.Application/wwwroot/css/cash.css
@@ -57,15 +57,9 @@ swp-filter-spacer {
 /* ===========================================
    ACTION BAR (Table Header)
    =========================================== */
-swp-action-bar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  padding: var(--spacing-6) var(--spacing-8);
-  background: var(--color-surface);
-  border: 1px solid var(--color-border);
+swp-action-bar.grid-top {
   border-bottom: none;
-  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  margin-bottom: 0;
 }
 
 swp-selection-info {
@@ -279,20 +273,6 @@ swp-row-arrow {
   }
 }
 
-/* ===========================================
-   TWO-COLUMN GRID (Detail View)
-   =========================================== */
-swp-cash-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: var(--spacing-12);
-}
-
-swp-cash-column {
-  display: grid;
-  align-content: start;
-}
-
 /* ===========================================
    DATA TABLE (Dagens Tal)
    =========================================== */
@@ -690,12 +670,6 @@ swp-system-note {
   }
 }
 
-@media (max-width: 900px) {
-  swp-cash-grid {
-    grid-template-columns: 1fr;
-  }
-}
-
 @media (max-width: 768px) {
   swp-filter-bar {
     flex-direction: column;
diff --git a/PlanTempus.Application/wwwroot/css/components.css b/PlanTempus.Application/wwwroot/css/components.css
index 01e40ec..3d1b08e 100644
--- a/PlanTempus.Application/wwwroot/css/components.css
+++ b/PlanTempus.Application/wwwroot/css/components.css
@@ -570,6 +570,7 @@ swp-card-title {
   gap: var(--spacing-3);
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
   color: var(--color-text);
 
   & i {
@@ -1322,12 +1323,17 @@ swp-back-link {
 swp-detail-grid {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  gap: var(--spacing-8);
+  gap: var(--card-gap);
+  align-items: start;
+}
 
-  > div {
-    display: flex;
-    flex-direction: column;
-  }
+/* ===========================================
+   CARD COLUMN (Stacked cards container)
+   =========================================== */
+swp-card-column {
+  display: grid;
+  gap: var(--card-gap);
+  align-content: start;
 }
 
 @media (max-width: 900px) {
@@ -1582,9 +1588,3 @@ swp-two-column-grid {
   }
 }
 
-/* Stacked cards in a grid column */
-.stacked-cards {
-  display: flex;
-  flex-direction: column;
-  gap: var(--card-gap);
-}
diff --git a/PlanTempus.Application/wwwroot/css/stats.css b/PlanTempus.Application/wwwroot/css/stats.css
index 1a4e993..b38e800 100644
--- a/PlanTempus.Application/wwwroot/css/stats.css
+++ b/PlanTempus.Application/wwwroot/css/stats.css
@@ -12,6 +12,8 @@ swp-stats-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: var(--card-gap);
+  margin-bottom: var(--section-gap);
+
 }
 
 swp-stats-row {
diff --git a/PlanTempus.Application/wwwroot/ts/modules/cash.ts b/PlanTempus.Application/wwwroot/ts/modules/cash.ts
index 519dde2..2892122 100644
--- a/PlanTempus.Application/wwwroot/ts/modules/cash.ts
+++ b/PlanTempus.Application/wwwroot/ts/modules/cash.ts
@@ -88,10 +88,31 @@ export class CashController {
     toBankInput.addEventListener('input', calculate);
     actualCashInput.addEventListener('input', calculate);
 
+    // Setup Enter key navigation between fields
+    this.setupEnterNavigation([payoutsInput, toBankInput, actualCashInput]);
+
     // Initial calculation
     calculate();
   }
 
+  /**
+   * Setup Enter key to move focus to next input field
+   */
+  private setupEnterNavigation(inputs: HTMLInputElement[]): void {
+    inputs.forEach((input, index) => {
+      input.addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') {
+          e.preventDefault();
+          const nextIndex = index + 1;
+          if (nextIndex < inputs.length) {
+            inputs[nextIndex].focus();
+            inputs[nextIndex].select();
+          }
+        }
+      });
+    });
+  }
+
   /**
    * Calculate expected cash and difference
    */
@@ -113,13 +134,13 @@ export class CashController {
     }
 
     // Calculate and display difference
-    this.updateDifference(actual, expectedCash, actualCashInput.value);
+    this.updateDifference(actual, expectedCash);
   }
 
   /**
    * Update difference box with color coding
    */
-  private updateDifference(actual: number, expected: number, rawValue: string): void {
+  private updateDifference(actual: number, expected: number): void {
     const box = document.getElementById('differenceBox');
     const value = document.getElementById('differenceValue');
     if (!box || !value) return;
@@ -129,11 +150,7 @@ export class CashController {
     // Remove all state classes
     box.classList.remove('positive', 'negative', 'neutral');
 
-    if (actual === 0 && rawValue === '') {
-      // No input yet
-      value.textContent = '– kr';
-      box.classList.add('neutral');
-    } else if (diff > 0) {
+    if (diff > 0) {
       // More cash than expected
       value.textContent = '+' + this.formatNumber(diff) + ' kr';
       box.classList.add('positive');