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

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');