wwwroot/poc-detail-drawer.html

@@ -4,6 +4,9 @@
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Detail Drawer POC</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
   <style>
     /* Import design tokens fra calendar-base.css */
     :root {
@@ -30,6 +33,10 @@
       --b-color-teal: #00897b;
       --b-mix: #fff;
 
+      /* Checkout style tokens */
+      --color-teal: #00897b;
+      --font-mono: 'JetBrains Mono', monospace;
+
       /* Shadows */
       --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
       --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
@@ -229,12 +236,12 @@
 
     swp-section-label {
       display: block;
-      font-size: 13px;
+      font-size: 11px;
-      font-weight: 500;
+      font-weight: 400;
       color: var(--color-text-secondary);
       text-transform: uppercase;
       letter-spacing: 0.5px;
-      margin-bottom: 8px;
+      margin-bottom: 10px;
     }
 
     /* Event time/date */
@@ -286,7 +293,7 @@
     }
 
     swp-contact-item a {
-      color: var(--color-primary);
+      color: var(--color-teal);
       text-decoration: none;
     }
 
@@ -377,11 +384,16 @@
 
     swp-service-details {
       display: block;
-      font-size: 14px;
+      font-size: 13px;
       color: var(--color-text-secondary);
       margin-top: 2px;
     }
 
+    swp-service-price {
+      font-family: var(--font-mono);
+      font-weight: 500;
+    }
+
     swp-service-resource {
       display: block;
       font-size: 13px;
@@ -407,6 +419,7 @@
     }
 
     swp-total-amount {
+      font-family: var(--font-mono);
       font-size: 20px;
       font-weight: 600;
     }
@@ -438,7 +451,7 @@
 
     swp-journal-link:hover {
       background: var(--color-background-hover);
-      border-color: var(--color-primary);
+      border-color: var(--color-teal);
     }
 
     swp-journal-icon {
@@ -491,7 +504,7 @@
 
     swp-journal-link.no-journal:hover {
       background: var(--color-surface);
-      border-color: var(--color-primary);
+      border-color: var(--color-teal);
       border-style: solid;
     }
 
@@ -517,6 +530,10 @@
       color: var(--color-text);
     }
 
+    swp-stat-value.mono {
+      font-family: var(--font-mono);
+    }
+
     swp-stat-label {
       font-size: 11px;
       color: var(--color-text-secondary);
@@ -545,13 +562,13 @@
     }
 
     swp-footer-btn.btn-primary {
-      background: var(--color-primary);
+      background: var(--color-teal);
       color: white;
-      border-color: var(--color-primary);
+      border-color: var(--color-teal);
     }
 
     swp-footer-btn.btn-primary:hover {
-      background: #1565c0;
+      background: #00796b;
     }
 
     swp-footer-btn.btn-secondary {
@@ -565,8 +582,10 @@
 
     /* Footer states based on booking status */
     swp-drawer-footer.status-paid swp-footer-btn.btn-primary {
-      background: var(--b-color-green);
+      background: var(--color-teal);
-      border-color: var(--b-color-green);
+      border-color: var(--color-teal);
+      opacity: 0.7;
+      cursor: default;
     }
 
     swp-drawer-footer.status-cancelled swp-footer-btn.btn-primary,
@@ -819,12 +838,12 @@
         <swp-services-list>
           <swp-service-item>
             <swp-service-name>Klipning og styling</swp-service-name>
-            <swp-service-details>60 min · 500 DKK</swp-service-details>
+            <swp-service-details>60 min · <swp-service-price>500 kr</swp-service-price></swp-service-details>
             <swp-service-resource>Emma (EMP001)</swp-service-resource>
           </swp-service-item>
           <swp-service-item>
             <swp-service-name>Bundfarve</swp-service-name>
-            <swp-service-details>90 min · 800 DKK</swp-service-details>
+            <swp-service-details>90 min · <swp-service-price>800 kr</swp-service-price></swp-service-details>
             <swp-service-resource>Emma (EMP001)</swp-service-resource>
           </swp-service-item>
         </swp-services-list>
@@ -834,7 +853,7 @@
       <swp-drawer-section>
         <swp-total-row>
           <swp-total-label>Total</swp-total-label>
-          <swp-total-amount>1.300 DKK</swp-total-amount>
+          <swp-total-amount>1.300 kr</swp-total-amount>
         </swp-total-row>
       </swp-drawer-section>
 
@@ -861,11 +880,11 @@
         <swp-section-label>Kundehistorik</swp-section-label>
         <swp-stats-grid>
           <swp-stat-item>
-            <swp-stat-value>14</swp-stat-value>
+            <swp-stat-value class="mono">14</swp-stat-value>
             <swp-stat-label>Besøg</swp-stat-label>
           </swp-stat-item>
           <swp-stat-item>
-            <swp-stat-value>8.450</swp-stat-value>
+            <swp-stat-value class="mono">8.450 kr</swp-stat-value>
             <swp-stat-label>Omsætning</swp-stat-label>
           </swp-stat-item>
           <swp-stat-item>