From 6b0a84a07e53ba015e9e6b8d614203e52a5f0475 Mon Sep 17 00:00:00 2001
From: "Janus C. H. Knudsen" <janus007@gmail.com>
Date: Mon, 19 Jan 2026 23:27:18 +0100
Subject: [PATCH] Adds comprehensive customer detail page with dynamic features

Develops detailed customer profile view with multiple sections including overview, statistics, journal, appointments, and activity tracking

Implements interactive UI components for customer management
Includes dynamic tab switching, editable profile sections, and activity timeline
---
 .../Features/Customers/Pages/Detail.cshtml    |  898 ++++++++++++++
 .../Features/Customers/Pages/Detail.cshtml.cs |   14 +
 .../Features/Customers/Pages/Index.cshtml     |   34 +-
 .../wwwroot/css/COMPONENT-CATALOG.md          |   20 +-
 .../wwwroot/css/components.css                |    5 +
 .../wwwroot/css/customers.css                 | 1052 +++++++++++++++++
 6 files changed, 2015 insertions(+), 8 deletions(-)
 create mode 100644 PlanTempus.Application/Features/Customers/Pages/Detail.cshtml
 create mode 100644 PlanTempus.Application/Features/Customers/Pages/Detail.cshtml.cs

diff --git a/PlanTempus.Application/Features/Customers/Pages/Detail.cshtml b/PlanTempus.Application/Features/Customers/Pages/Detail.cshtml
new file mode 100644
index 0000000..4ef9731
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Pages/Detail.cshtml
@@ -0,0 +1,898 @@
+@page "/kunder/{id}"
+@model PlanTempus.Application.Features.Customers.Pages.DetailModel
+@{
+    ViewData["Title"] = "Kundedetaljer - Sofie Nielsen";
+}
+
+<swp-sticky-header>
+    <swp-header-content>
+        <swp-page-header>
+            <swp-back-link href="/kunder">
+                <i class="ph ph-arrow-left"></i>
+                <span>Tilbage til kunder</span>
+            </swp-back-link>
+            <swp-page-actions>
+                <swp-btn class="secondary">
+                    <i class="ph ph-trash"></i>
+                    <span localize="customers.detail.delete">Slet kunde</span>
+                </swp-btn>
+                <swp-btn class="primary">
+                    <i class="ph ph-floppy-disk"></i>
+                    <span localize="customers.detail.save">Gem</span>
+                </swp-btn>
+            </swp-page-actions>
+        </swp-page-header>
+
+        <swp-customer-detail-header>
+            <swp-customer-avatar-large>SN</swp-customer-avatar-large>
+            <swp-customer-detail-info>
+                <swp-customer-name-row>
+                    <swp-customer-detail-name>Sofie Nielsen</swp-customer-detail-name>
+                    <swp-customer-detail-tags>
+                        <swp-tag class="vip">VIP</swp-tag>
+                    </swp-customer-detail-tags>
+                    <swp-booking-exclusion data-excluded="false">
+                        <i class="ph ph-check icon"></i>
+                        <span>Booking tilladt</span>
+                    </swp-booking-exclusion>
+                </swp-customer-name-row>
+                <swp-contact-line>
+                    <a href="tel:+4523456789">+45 23 45 67 89</a>
+                    <span class="separator">|</span>
+                    <a href="mailto:sofie@email.dk">sofie@email.dk</a>
+                    <span class="separator">|</span>
+                    <span>Kunde siden marts 2024</span>
+                </swp-contact-line>
+                <swp-fact-boxes-inline>
+                    <swp-fact-inline>
+                        <swp-fact-inline-value>14</swp-fact-inline-value>
+                        <swp-fact-inline-label>besog</swp-fact-inline-label>
+                    </swp-fact-inline>
+                    <swp-fact-inline>
+                        <swp-fact-inline-value>32</swp-fact-inline-value>
+                        <swp-fact-inline-label>dage interval</swp-fact-inline-label>
+                    </swp-fact-inline>
+                    <swp-fact-inline>
+                        <swp-fact-inline-value>Emma L.</swp-fact-inline-value>
+                        <swp-fact-inline-label>foretrukken frisor</swp-fact-inline-label>
+                    </swp-fact-inline>
+                    <swp-fact-inline>
+                        <swp-fact-inline-value>12.450 kr</swp-fact-inline-value>
+                        <swp-fact-inline-label>total omsaetning</swp-fact-inline-label>
+                    </swp-fact-inline>
+                </swp-fact-boxes-inline>
+            </swp-customer-detail-info>
+        </swp-customer-detail-header>
+    </swp-header-content>
+
+    <swp-tab-bar>
+        <swp-tab class="active" data-tab="overview">Oversigt</swp-tab>
+        <swp-tab data-tab="economy">Økonomi</swp-tab>
+        <swp-tab data-tab="statistics">Statistik</swp-tab>
+        <swp-tab data-tab="journal">Journal</swp-tab>
+        <swp-tab data-tab="appointments">Aftaler</swp-tab>
+        <swp-tab data-tab="giftcards">Gavekort</swp-tab>
+        <swp-tab data-tab="activity">Aktivitet</swp-tab>
+    </swp-tab-bar>
+</swp-sticky-header>
+
+<!-- OVERSIGT TAB -->
+<swp-tab-content class="active" data-tab="overview">
+    <swp-page-container>
+        <swp-detail-grid>
+            <!-- Left Column -->
+            <swp-card-column>
+                <!-- Kontaktoplysninger -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>
+                            <i class="ph ph-address-book"></i>
+                            <span localize="customers.detail.contactInfo">Kontaktoplysninger</span>
+                        </swp-card-title>
+                    </swp-card-header>
+                    <swp-edit-section>
+                        <swp-edit-row>
+                            <swp-edit-label localize="customers.detail.phone">Telefon</swp-edit-label>
+                            <swp-edit-value contenteditable="true">+45 23 45 67 89</swp-edit-value>
+                        </swp-edit-row>
+                        <swp-edit-row>
+                            <swp-edit-label localize="customers.detail.email">Email</swp-edit-label>
+                            <swp-edit-value contenteditable="true">sofie@email.dk</swp-edit-value>
+                        </swp-edit-row>
+                        <swp-edit-row>
+                            <swp-edit-label localize="customers.detail.address">Adresse</swp-edit-label>
+                            <swp-edit-value contenteditable="true">Hovedgaden 12</swp-edit-value>
+                        </swp-edit-row>
+                        <swp-edit-row>
+                            <swp-edit-label localize="customers.detail.zipCity">Postnr + By</swp-edit-label>
+                            <swp-edit-value contenteditable="true">2100 København Ø</swp-edit-value>
+                        </swp-edit-row>
+                    </swp-edit-section>
+                </swp-card>
+
+                <!-- Profil -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>
+                            <i class="ph ph-user-circle"></i>
+                            <span localize="customers.detail.profile">Profil</span>
+                        </swp-card-title>
+                    </swp-card-header>
+                    <swp-profile-boxes>
+                        <swp-profile-box>
+                            <swp-profile-box-label localize="customers.detail.hairType">Hårtype</swp-profile-box-label>
+                            <swp-profile-box-value>Medium - Bolget</swp-profile-box-value>
+                        </swp-profile-box>
+                        <swp-profile-box>
+                            <swp-profile-box-label localize="customers.detail.porosity">Porøsitet</swp-profile-box-label>
+                            <swp-profile-box-value>Medium</swp-profile-box-value>
+                        </swp-profile-box>
+                        <swp-profile-box>
+                            <swp-profile-box-label localize="customers.detail.scalp">Hovedbund</swp-profile-box-label>
+                            <swp-profile-box-value>Normal</swp-profile-box-value>
+                        </swp-profile-box>
+                        <swp-profile-box>
+                            <swp-profile-box-label localize="customers.detail.naturalColor">Naturlig farve</swp-profile-box-label>
+                            <swp-profile-box-value>Mørkblond (6)</swp-profile-box-value>
+                        </swp-profile-box>
+                    </swp-profile-boxes>
+                </swp-card>
+            </swp-card-column>
+
+            <!-- Right Column -->
+            <swp-card-column>
+                <!-- Marketing -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>
+                            <i class="ph ph-megaphone"></i>
+                            <span localize="customers.detail.marketing">Marketing</span>
+                        </swp-card-title>
+                    </swp-card-header>
+                    <swp-toggle-row>
+                        <swp-toggle-label localize="customers.detail.emailMarketing">Email marketing</swp-toggle-label>
+                        <swp-toggle-slider data-value="yes">
+                            <swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
+                            <swp-toggle-option localize="common.no">Nej</swp-toggle-option>
+                        </swp-toggle-slider>
+                    </swp-toggle-row>
+                    <swp-toggle-row>
+                        <swp-toggle-label localize="customers.detail.smsMarketing">SMS marketing</swp-toggle-label>
+                        <swp-toggle-slider data-value="no">
+                            <swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
+                            <swp-toggle-option localize="common.no">Nej</swp-toggle-option>
+                        </swp-toggle-slider>
+                    </swp-toggle-row>
+                </swp-card>
+
+                <!-- Betalingsindstillinger -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>
+                            <i class="ph ph-credit-card"></i>
+                            <span localize="customers.detail.paymentSettings">Betalingsindstillinger</span>
+                        </swp-card-title>
+                    </swp-card-header>
+                    <swp-toggle-row>
+                        <swp-toggle-info>
+                            <swp-toggle-label localize="customers.detail.requirePrepayment">Kræv forudbetaling</swp-toggle-label>
+                            <swp-toggle-desc>Kunden skal betale fuldt belob ved booking</swp-toggle-desc>
+                        </swp-toggle-info>
+                        <swp-toggle-slider data-value="no">
+                            <swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
+                            <swp-toggle-option localize="common.no">Nej</swp-toggle-option>
+                        </swp-toggle-slider>
+                    </swp-toggle-row>
+                    <swp-toggle-row>
+                        <swp-toggle-info>
+                            <swp-toggle-label localize="customers.detail.allowPartialPayment">Tillad delvis betaling</swp-toggle-label>
+                            <swp-toggle-desc>Kunden kan vaelge at betale et depositum</swp-toggle-desc>
+                        </swp-toggle-info>
+                        <swp-toggle-slider data-value="no">
+                            <swp-toggle-option localize="common.yes">Ja</swp-toggle-option>
+                            <swp-toggle-option localize="common.no">Nej</swp-toggle-option>
+                        </swp-toggle-slider>
+                    </swp-toggle-row>
+                </swp-card>
+
+                <!-- Praeferencer -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>
+                            <i class="ph ph-sliders-horizontal"></i>
+                            <span localize="customers.detail.preferences">Præferencer</span>
+                        </swp-card-title>
+                    </swp-card-header>
+                    <swp-profile-boxes>
+                        <swp-profile-box>
+                            <swp-profile-box-label localize="customers.detail.preferredHairdresser">Foretrukken frisor</swp-profile-box-label>
+                            <swp-profile-box-value>Emma L.</swp-profile-box-value>
+                        </swp-profile-box>
+                        <swp-profile-box>
+                            <swp-profile-box-label localize="customers.detail.preferredDay">Foretrukken dag</swp-profile-box-label>
+                            <swp-profile-box-value>Tirsdag/Torsdag</swp-profile-box-value>
+                        </swp-profile-box>
+                        <swp-profile-box class="full-width">
+                            <swp-profile-box-label localize="customers.detail.specialRequests">Specielle onsker</swp-profile-box-label>
+                            <swp-profile-box-value>Foretraekker kold tone, ikke for mork</swp-profile-box-value>
+                        </swp-profile-box>
+                    </swp-profile-boxes>
+                </swp-card>
+
+                <!-- Advarsler -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>
+                            <i class="ph ph-warning"></i>
+                            <span localize="customers.detail.warnings">Advarsler</span>
+                        </swp-card-title>
+                    </swp-card-header>
+                    <swp-profile-boxes>
+                        <swp-profile-box class="warning full-width">
+                            <swp-profile-box-label localize="customers.detail.allergies">Allergier / Følsomhed</swp-profile-box-label>
+                            <swp-profile-box-value>Parfumeallergi - brug uparfumerede produkter</swp-profile-box-value>
+                        </swp-profile-box>
+                    </swp-profile-boxes>
+                </swp-card>
+
+                <!-- Kundegruppe & Relationer -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>
+                            <i class="ph ph-users-three"></i>
+                            <span localize="customers.detail.groupAndRelations">Kundegruppe & Relationer</span>
+                        </swp-card-title>
+                    </swp-card-header>
+                    <swp-customer-group-row>
+                        <swp-customer-group-label>Kundegruppe:</swp-customer-group-label>
+                        <swp-select>
+                            <button type="button">
+                                <swp-select-value>Standard</swp-select-value>
+                                <i class="ph ph-caret-down"></i>
+                            </button>
+                            <swp-select-dropdown>
+                                <swp-select-option class="selected" data-value="standard">Standard</swp-select-option>
+                                <swp-select-option data-value="premium">Premium</swp-select-option>
+                                <swp-select-option data-value="erhverv">Erhverv</swp-select-option>
+                                <swp-select-option data-value="medarbejder">Medarbejder</swp-select-option>
+                                <swp-select-option data-value="familie">Familie & Venner</swp-select-option>
+                            </swp-select-dropdown>
+                        </swp-select>
+                    </swp-customer-group-row>
+
+                    <swp-relations-list>
+                        <swp-relation-item>
+                            <swp-relation-avatar>EN</swp-relation-avatar>
+                            <swp-relation-info>
+                                <swp-relation-name>Emil Nielsen</swp-relation-name>
+                                <swp-relation-type>Barn</swp-relation-type>
+                            </swp-relation-info>
+                            <swp-relation-actions>
+                                <swp-relation-link>Åbn</swp-relation-link>
+                                <swp-relation-remove>&times;</swp-relation-remove>
+                            </swp-relation-actions>
+                        </swp-relation-item>
+
+                        <swp-relation-item>
+                            <swp-relation-avatar>LN</swp-relation-avatar>
+                            <swp-relation-info>
+                                <swp-relation-name>Luna Nielsen</swp-relation-name>
+                                <swp-relation-type>Barn</swp-relation-type>
+                            </swp-relation-info>
+                            <swp-relation-actions>
+                                <swp-relation-link>Åbn</swp-relation-link>
+                                <swp-relation-remove>&times;</swp-relation-remove>
+                            </swp-relation-actions>
+                        </swp-relation-item>
+
+                        <swp-add-relation>
+                            <i class="ph ph-plus"></i>
+                            <span>Tilføj relation</span>
+                        </swp-add-relation>
+                    </swp-relations-list>
+                </swp-card>
+            </swp-card-column>
+        </swp-detail-grid>
+    </swp-page-container>
+</swp-tab-content>
+
+<!-- Placeholder for other tabs -->
+<swp-tab-content data-tab="economy">
+    <swp-page-container>
+        <swp-empty-state>
+            <i class="ph ph-currency-circle-dollar"></i>
+            <span>Økonomi tab - kommer snart</span>
+        </swp-empty-state>
+    </swp-page-container>
+</swp-tab-content>
+
+<swp-tab-content data-tab="statistics">
+    <swp-page-container>
+        <swp-detail-grid>
+            <!-- Fremmøde & Pålidelighed - spans both columns -->
+            <swp-card class="full-width">
+                <swp-card-header>
+                    <swp-card-title>Fremmøde & Pålidelighed</swp-card-title>
+                </swp-card-header>
+                <div class="grid-4">
+                    <swp-stat-card class="highlight">
+                        <swp-stat-value>47</swp-stat-value>
+                        <swp-stat-label>Fremmøder</swp-stat-label>
+                    </swp-stat-card>
+                    <swp-stat-card class="warning">
+                        <swp-stat-value>3</swp-stat-value>
+                        <swp-stat-label>Aflysninger</swp-stat-label>
+                    </swp-stat-card>
+                    <swp-stat-card class="danger">
+                        <swp-stat-value>1</swp-stat-value>
+                        <swp-stat-label>No-shows</swp-stat-label>
+                    </swp-stat-card>
+                    <swp-stat-card class="success">
+                        <swp-stat-value>92%</swp-stat-value>
+                        <swp-stat-label>Pålidelighed</swp-stat-label>
+                    </swp-stat-card>
+                </div>
+                <swp-attendance-bar>
+                    <swp-attendance-segment class="attended" style="width: 92%;">47</swp-attendance-segment>
+                    <swp-attendance-segment class="cancelled" style="width: 6%;">3</swp-attendance-segment>
+                    <swp-attendance-segment class="noshow" style="width: 2%;">1</swp-attendance-segment>
+                </swp-attendance-bar>
+            </swp-card>
+
+            <!-- Left Column -->
+            <swp-card-column>
+                <!-- Service-mønstre -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>Service-mønstre</swp-card-title>
+                    </swp-card-header>
+                    <div class="grid-2">
+                        <div>
+                            <swp-section-label class="small">Top 3 Services</swp-section-label>
+                            <swp-top-list>
+                                <swp-top-item>
+                                    <swp-top-rank>1</swp-top-rank>
+                                    <swp-top-name>Klip + Farve</swp-top-name>
+                                    <swp-top-count>12×</swp-top-count>
+                                </swp-top-item>
+                                <swp-top-item>
+                                    <swp-top-rank>2</swp-top-rank>
+                                    <swp-top-name>Farve</swp-top-name>
+                                    <swp-top-count>8×</swp-top-count>
+                                </swp-top-item>
+                                <swp-top-item>
+                                    <swp-top-rank>3</swp-top-rank>
+                                    <swp-top-name>Klip</swp-top-name>
+                                    <swp-top-count>6×</swp-top-count>
+                                </swp-top-item>
+                            </swp-top-list>
+                        </div>
+                        <div>
+                            <swp-section-label class="small">Top 3 Produkter</swp-section-label>
+                            <swp-top-list>
+                                <swp-top-item>
+                                    <swp-top-rank>1</swp-top-rank>
+                                    <swp-top-name>Olaplex No. 3</swp-top-name>
+                                    <swp-top-count>5×</swp-top-count>
+                                </swp-top-item>
+                                <swp-top-item>
+                                    <swp-top-rank>2</swp-top-rank>
+                                    <swp-top-name>Shampoo</swp-top-name>
+                                    <swp-top-count>3×</swp-top-count>
+                                </swp-top-item>
+                                <swp-top-item>
+                                    <swp-top-rank>3</swp-top-rank>
+                                    <swp-top-name>Hårkur</swp-top-name>
+                                    <swp-top-count>2×</swp-top-count>
+                                </swp-top-item>
+                            </swp-top-list>
+                        </div>
+                    </div>
+                </swp-card>
+            </swp-card-column>
+
+            <!-- Right Column -->
+            <swp-card-column>
+                <!-- Booking-adfærd -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>Booking-adfærd</swp-card-title>
+                    </swp-card-header>
+                    <swp-kv-list>
+                        <swp-kv-row>
+                            <swp-kv-label>Gns. bookingvarsel</swp-kv-label>
+                            <swp-kv-value>5 dage</swp-kv-value>
+                        </swp-kv-row>
+                        <swp-kv-row>
+                            <swp-kv-label>Foretrukken dag</swp-kv-label>
+                            <swp-kv-value>Tirsdag</swp-kv-value>
+                        </swp-kv-row>
+                        <swp-kv-row>
+                            <swp-kv-label>Foretrukken tid</swp-kv-label>
+                            <swp-kv-value>10:00 - 12:00</swp-kv-value>
+                        </swp-kv-row>
+                        <swp-kv-row>
+                            <swp-kv-label>Online booking rate</swp-kv-label>
+                            <swp-kv-value>78%</swp-kv-value>
+                        </swp-kv-row>
+                        <swp-kv-row>
+                            <swp-kv-label>Gns. aflysningsvarsel</swp-kv-label>
+                            <swp-kv-value>2 dage</swp-kv-value>
+                        </swp-kv-row>
+                    </swp-kv-list>
+                </swp-card>
+
+                <!-- Loyalitet -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>Loyalitet</swp-card-title>
+                    </swp-card-header>
+                    <div class="grid-2 compact">
+                        <swp-stat-card>
+                            <swp-stat-value class="small">1,8 år</swp-stat-value>
+                            <swp-stat-label>Kunde siden</swp-stat-label>
+                        </swp-stat-card>
+                        <swp-stat-card class="success">
+                            <swp-stat-value class="small">13</swp-stat-value>
+                            <swp-stat-label>Dage siden sidst</swp-stat-label>
+                        </swp-stat-card>
+                        <swp-stat-card>
+                            <swp-stat-value class="small">
+                                <swp-risk-indicator class="low">
+                                    <swp-risk-dot></swp-risk-dot>
+                                    <span>Lav</span>
+                                </swp-risk-indicator>
+                            </swp-stat-value>
+                            <swp-stat-label>Churn-risiko</swp-stat-label>
+                        </swp-stat-card>
+                        <swp-stat-card>
+                            <swp-stat-value class="small">32 dage</swp-stat-value>
+                            <swp-stat-label>Gns. interval</swp-stat-label>
+                        </swp-stat-card>
+                    </div>
+                </swp-card>
+            </swp-card-column>
+        </swp-detail-grid>
+    </swp-page-container>
+</swp-tab-content>
+
+<swp-tab-content data-tab="journal">
+    <swp-page-container>
+        <!-- Mini Tabs for quick filter -->
+        <swp-journal-mini-tabs>
+            <swp-journal-mini-tab class="active">
+                <span class="tab-dot blue"></span>
+                Alle
+                <span class="tab-count">5</span>
+            </swp-journal-mini-tab>
+            <swp-journal-mini-tab>
+                <span class="tab-dot blue"></span>
+                Noter
+                <span class="tab-count">2</span>
+            </swp-journal-mini-tab>
+            <swp-journal-mini-tab>
+                <span class="tab-dot amber"></span>
+                Farveformler
+                <span class="tab-count">2</span>
+            </swp-journal-mini-tab>
+            <swp-journal-mini-tab>
+                <span class="tab-dot purple"></span>
+                Analyser
+                <span class="tab-count">1</span>
+            </swp-journal-mini-tab>
+        </swp-journal-mini-tabs>
+
+        <swp-detail-grid>
+            <!-- Left Column -->
+            <swp-card-column>
+                <!-- Noter header card -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>
+                            <span class="col-dot blue"></span>
+                            <span>Noter</span>
+                        </swp-card-title>
+                        <swp-section-action>+ Tilføj note</swp-section-action>
+                    </swp-card-header>
+                    <swp-journal-entry>
+                        <swp-journal-entry-header>
+                            <swp-journal-entry-type class="note">Note</swp-journal-entry-type>
+                            <swp-journal-entry-delete><i class="ph ph-trash"></i></swp-journal-entry-delete>
+                        </swp-journal-entry-header>
+                        <swp-journal-entry-body>
+                            Kunden foretrækker naturlige farver og ønsker lidt ekstra tid til konsultation. Husk at tjekke allergistatus inden farvebehandling.
+                        </swp-journal-entry-body>
+                        <swp-journal-entry-footer>
+                            <swp-journal-entry-date>9. dec 2025 · Af: Emma</swp-journal-entry-date>
+                            <swp-journal-entry-visibility>
+                                <i class="ph ph-eye"></i>
+                                <span>Alle</span>
+                            </swp-journal-entry-visibility>
+                        </swp-journal-entry-footer>
+                    </swp-journal-entry>
+                </swp-card>
+
+                <!-- Advarsel note card -->
+                <swp-card>
+                    <swp-journal-entry>
+                        <swp-journal-entry-header>
+                            <swp-journal-entry-type class="advarsel">Advarsel</swp-journal-entry-type>
+                            <swp-journal-entry-tags>
+                                <swp-journal-tag class="allergi">Allergi</swp-journal-tag>
+                            </swp-journal-entry-tags>
+                            <swp-journal-entry-delete><i class="ph ph-trash"></i></swp-journal-entry-delete>
+                        </swp-journal-entry-header>
+                        <swp-journal-entry-body>
+                            <strong>PARFUMEALLERGI</strong> — Brug kun uparfumerede produkter. Havde reaktion på standard shampoo ved første besøg.
+                        </swp-journal-entry-body>
+                        <swp-journal-entry-footer>
+                            <swp-journal-entry-date>15. mar 2024 · Af: Nina</swp-journal-entry-date>
+                            <swp-journal-entry-visibility class="warning">
+                                <i class="ph ph-warning"></i>
+                                <span>Advarsel</span>
+                            </swp-journal-entry-visibility>
+                        </swp-journal-entry-footer>
+                    </swp-journal-entry>
+                </swp-card>
+
+                <!-- Farveformler card -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>
+                            <span class="col-dot amber"></span>
+                            <span>Farveformler</span>
+                        </swp-card-title>
+                        <swp-section-action>+ Tilføj</swp-section-action>
+                    </swp-card-header>
+                    <swp-journal-entry>
+                        <swp-journal-entry-header>
+                            <swp-journal-entry-type class="farveformel">Farveformel</swp-journal-entry-type>
+                            <swp-journal-entry-delete><i class="ph ph-trash"></i></swp-journal-entry-delete>
+                        </swp-journal-entry-header>
+                        <swp-journal-entry-body>
+                            <span class="label">Måltone:</span> Kold<br>
+                            <span class="label">Oxidant:</span> <span class="mono">6%</span><br>
+                            <span class="label">Formel:</span> <span class="mono">7/1 + 7/0 (1:1)</span><br>
+                            <span class="label">Virketid:</span> <span class="mono">35 min</span><br>
+                            <span class="label">Placering:</span> Hele håret<br><br>
+                            Resultat: Flot ensartet farve, kunden meget tilfreds
+                        </swp-journal-entry-body>
+                        <swp-journal-entry-footer>
+                            <swp-journal-entry-date>12. nov 2025 · Af: Emma</swp-journal-entry-date>
+                        </swp-journal-entry-footer>
+                    </swp-journal-entry>
+                </swp-card>
+            </swp-card-column>
+
+            <!-- Right Column -->
+            <swp-card-column>
+                <!-- Analyser card -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>
+                            <span class="col-dot purple"></span>
+                            <span>Analyser</span>
+                        </swp-card-title>
+                        <swp-section-action>+ Tilføj</swp-section-action>
+                    </swp-card-header>
+                    <swp-journal-entry>
+                        <swp-journal-entry-header>
+                            <swp-journal-entry-type class="analyse">Håranalyse</swp-journal-entry-type>
+                            <swp-journal-entry-delete><i class="ph ph-trash"></i></swp-journal-entry-delete>
+                        </swp-journal-entry-header>
+                        <swp-journal-entry-body>
+                            <span class="label">Tilstand:</span> God, let tørt i spidserne<br>
+                            <span class="label">Porøsitet:</span> Medium<br>
+                            <span class="label">Elasticitet:</span> Normal<br><br>
+                            Anbefaling: Olaplex behandling hver 6. uge
+                        </swp-journal-entry-body>
+                        <swp-journal-entry-footer>
+                            <swp-journal-entry-date>1. okt 2025 · Af: Maria</swp-journal-entry-date>
+                        </swp-journal-entry-footer>
+                    </swp-journal-entry>
+                </swp-card>
+            </swp-card-column>
+        </swp-detail-grid>
+    </swp-page-container>
+</swp-tab-content>
+
+<swp-tab-content data-tab="appointments">
+    <swp-page-container>
+        <swp-detail-grid>
+            <!-- Left Column -->
+            <swp-card-column>
+                <!-- Kommende aftaler -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>Kommende aftaler</swp-card-title>
+                    </swp-card-header>
+                    <swp-appointment-card>
+                        <swp-appointment-date>
+                            Tirsdag 14. januar 2026 kl. 10:00
+                        </swp-appointment-date>
+                        <swp-appointment-details>
+                            Klip + Farve · Emma L. · 2 timer
+                        </swp-appointment-details>
+                        <swp-appointment-actions>
+                            <swp-btn class="secondary">Flyt</swp-btn>
+                            <swp-btn class="secondary">Aflys</swp-btn>
+                        </swp-appointment-actions>
+                    </swp-appointment-card>
+                </swp-card>
+            </swp-card-column>
+
+            <!-- Right Column -->
+            <swp-card-column>
+                <!-- Tidligere aftaler -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>Tidligere aftaler</swp-card-title>
+                    </swp-card-header>
+                    <swp-table>
+                        <swp-table-header>
+                            <span>Dato</span>
+                            <span>Service</span>
+                            <span>Frisør</span>
+                            <span>Varighed</span>
+                            <span>Pris</span>
+                        </swp-table-header>
+                        <swp-table-row>
+                            <span>9. dec 2025</span>
+                            <span>Klip + Farve</span>
+                            <span>Emma L.</span>
+                            <span>2 timer</span>
+                            <span class="mono">1.450 kr</span>
+                        </swp-table-row>
+                        <swp-table-row>
+                            <span>12. nov 2025</span>
+                            <span>Farve</span>
+                            <span>Emma L.</span>
+                            <span>1t 30m</span>
+                            <span class="mono">1.200 kr</span>
+                        </swp-table-row>
+                        <swp-table-row>
+                            <span>15. okt 2025</span>
+                            <span>Klip</span>
+                            <span>Emma L.</span>
+                            <span>45 min</span>
+                            <span class="mono">550 kr</span>
+                        </swp-table-row>
+                        <swp-table-row>
+                            <span>20. sep 2025</span>
+                            <span>Klip + Behandling</span>
+                            <span>Nina K.</span>
+                            <span>1t 15m</span>
+                            <span class="mono">750 kr</span>
+                        </swp-table-row>
+                        <swp-table-row>
+                            <span>15. aug 2025</span>
+                            <span>Farve + Klip</span>
+                            <span>Emma L.</span>
+                            <span>2t 15m</span>
+                            <span class="mono">1.600 kr</span>
+                        </swp-table-row>
+                    </swp-table>
+                    <swp-see-all>Se alle aftaler →</swp-see-all>
+                </swp-card>
+            </swp-card-column>
+        </swp-detail-grid>
+    </swp-page-container>
+</swp-tab-content>
+
+<swp-tab-content data-tab="giftcards">
+    <swp-page-container>
+        <swp-detail-grid>
+            <!-- Left Column -->
+            <swp-card-column>
+                <!-- Aktive gavekort -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>Aktive gavekort</swp-card-title>
+                    </swp-card-header>
+                    <swp-giftcard>
+                        <swp-giftcard-header>
+                            Gavekort #GK-2024-0892
+                        </swp-giftcard-header>
+                        <swp-giftcard-balance>
+                            Saldo: <strong>350 kr</strong> (af 500 kr)
+                        </swp-giftcard-balance>
+                        <swp-progress-bar>
+                            <swp-progress-fill style="width: 70%;"></swp-progress-fill>
+                        </swp-progress-bar>
+                        <swp-giftcard-expires>Udløber: 15. marts 2026</swp-giftcard-expires>
+                    </swp-giftcard>
+                </swp-card>
+
+                <!-- Klippekort -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>Klippekort</swp-card-title>
+                    </swp-card-header>
+                    <swp-giftcard>
+                        <swp-giftcard-header>
+                            10-klip kort
+                        </swp-giftcard-header>
+                        <swp-giftcard-balance>
+                            Brugt: <strong>7 af 10</strong> klip
+                        </swp-giftcard-balance>
+                        <swp-progress-bar>
+                            <swp-progress-fill style="width: 70%;"></swp-progress-fill>
+                        </swp-progress-bar>
+                        <swp-giftcard-expires>Udløber aldrig</swp-giftcard-expires>
+                    </swp-giftcard>
+                </swp-card>
+            </swp-card-column>
+
+            <!-- Right Column -->
+            <swp-card-column>
+                <!-- Udløbne / Brugte -->
+                <swp-card>
+                    <swp-card-header>
+                        <swp-card-title>Udløbne / Brugte</swp-card-title>
+                    </swp-card-header>
+                    <swp-empty-state>
+                        <p>Ingen udløbne eller brugte kort</p>
+                    </swp-empty-state>
+                </swp-card>
+            </swp-card-column>
+        </swp-detail-grid>
+    </swp-page-container>
+</swp-tab-content>
+
+<swp-tab-content data-tab="activity">
+    <swp-page-container>
+        <!-- Filters -->
+        <swp-activity-filters>
+            <swp-activity-filter class="active">Alle</swp-activity-filter>
+            <swp-activity-filter><i class="ph ph-calendar"></i> Bookinger</swp-activity-filter>
+            <swp-activity-filter><i class="ph ph-envelope"></i> Kommunikation</swp-activity-filter>
+            <swp-activity-filter><i class="ph ph-pencil-simple"></i> Ændringer</swp-activity-filter>
+            <swp-activity-filter><i class="ph ph-credit-card"></i> Betalinger</swp-activity-filter>
+            <swp-activity-filter><i class="ph ph-key"></i> Login</swp-activity-filter>
+        </swp-activity-filters>
+
+        <swp-card>
+            <swp-activity-timeline>
+                <!-- I dag -->
+                <swp-activity-date-group>
+                    <swp-activity-date-header>I dag</swp-activity-date-header>
+
+                    <swp-activity-item>
+                        <swp-activity-icon class="communication"><i class="ph ph-chat-text"></i></swp-activity-icon>
+                        <swp-activity-content>
+                            <swp-activity-title>
+                                <strong>SMS påmindelse</strong> sendt om aftale i morgen
+                                <swp-activity-badge class="auto">Auto</swp-activity-badge>
+                            </swp-activity-title>
+                            <swp-activity-meta>
+                                <swp-activity-time>14:00</swp-activity-time>
+                                <swp-activity-actor>System</swp-activity-actor>
+                            </swp-activity-meta>
+                        </swp-activity-content>
+                    </swp-activity-item>
+
+                    <swp-activity-item>
+                        <swp-activity-icon class="customer"><i class="ph ph-key"></i></swp-activity-icon>
+                        <swp-activity-content>
+                            <swp-activity-title>
+                                Kunde <strong>loggede ind</strong> via online booking
+                                <swp-activity-badge class="online">Online</swp-activity-badge>
+                            </swp-activity-title>
+                            <swp-activity-meta>
+                                <swp-activity-time>09:15</swp-activity-time>
+                            </swp-activity-meta>
+                        </swp-activity-content>
+                    </swp-activity-item>
+                </swp-activity-date-group>
+
+                <!-- 9. december 2025 -->
+                <swp-activity-date-group>
+                    <swp-activity-date-header>9. december 2025</swp-activity-date-header>
+
+                    <swp-activity-item>
+                        <swp-activity-icon class="booking"><i class="ph ph-check-circle"></i></swp-activity-icon>
+                        <swp-activity-content>
+                            <swp-activity-title>
+                                <strong>Booking gennemført</strong>
+                            </swp-activity-title>
+                            <swp-activity-meta>
+                                <swp-activity-time>12:30</swp-activity-time>
+                                <swp-activity-actor>Farve + Behandling · Emma L.</swp-activity-actor>
+                            </swp-activity-meta>
+                        </swp-activity-content>
+                    </swp-activity-item>
+
+                    <swp-activity-item>
+                        <swp-activity-icon class="edit"><i class="ph ph-note-pencil"></i></swp-activity-icon>
+                        <swp-activity-content>
+                            <swp-activity-title>
+                                <strong>Note tilføjet</strong> — Farveformel opdateret
+                            </swp-activity-title>
+                            <swp-activity-meta>
+                                <swp-activity-time>12:45</swp-activity-time>
+                                <swp-activity-actor>Emma L.</swp-activity-actor>
+                            </swp-activity-meta>
+                        </swp-activity-content>
+                    </swp-activity-item>
+                </swp-activity-date-group>
+
+                <!-- 15. november 2025 -->
+                <swp-activity-date-group>
+                    <swp-activity-date-header>15. november 2025</swp-activity-date-header>
+
+                    <swp-activity-item>
+                        <swp-activity-icon class="warning"><i class="ph ph-warning"></i></swp-activity-icon>
+                        <swp-activity-content>
+                            <swp-activity-title>
+                                <strong>Allergi registreret</strong> — Parfumeallergi tilføjet til profil
+                            </swp-activity-title>
+                            <swp-activity-meta>
+                                <swp-activity-time>10:00</swp-activity-time>
+                                <swp-activity-actor>Nina K.</swp-activity-actor>
+                            </swp-activity-meta>
+                        </swp-activity-content>
+                    </swp-activity-item>
+                </swp-activity-date-group>
+
+                <!-- 1. marts 2024 -->
+                <swp-activity-date-group>
+                    <swp-activity-date-header>1. marts 2024</swp-activity-date-header>
+
+                    <swp-activity-item>
+                        <swp-activity-icon class="customer"><i class="ph ph-user-plus"></i></swp-activity-icon>
+                        <swp-activity-content>
+                            <swp-activity-title>
+                                <strong>Kunde oprettet</strong> via online booking
+                            </swp-activity-title>
+                            <swp-activity-meta>
+                                <swp-activity-time>14:22</swp-activity-time>
+                                <swp-activity-actor>System</swp-activity-actor>
+                            </swp-activity-meta>
+                        </swp-activity-content>
+                    </swp-activity-item>
+                </swp-activity-date-group>
+            </swp-activity-timeline>
+        </swp-card>
+    </swp-page-container>
+</swp-tab-content>
+
+@section Scripts {
+    <script>
+        // Tab switching
+        document.querySelectorAll('swp-tab').forEach(tab => {
+            tab.addEventListener('click', () => {
+                const tabName = tab.dataset.tab;
+
+                // Update tab active state
+                document.querySelectorAll('swp-tab').forEach(t => t.classList.remove('active'));
+                tab.classList.add('active');
+
+                // Update content visibility
+                document.querySelectorAll('swp-tab-content').forEach(content => {
+                    content.classList.remove('active');
+                    if (content.dataset.tab === tabName) {
+                        content.classList.add('active');
+                    }
+                });
+            });
+        });
+
+        // Booking exclusion toggle (feature-specific)
+        const bookingExclusion = document.querySelector('swp-booking-exclusion');
+        if (bookingExclusion) {
+            bookingExclusion.addEventListener('click', () => {
+                const isExcluded = bookingExclusion.dataset.excluded === 'true';
+                bookingExclusion.dataset.excluded = isExcluded ? 'false' : 'true';
+                const icon = bookingExclusion.querySelector('.icon');
+                const text = bookingExclusion.querySelector('span:not(.icon)');
+                if (isExcluded) {
+                    icon.className = 'ph ph-check icon';
+                    text.textContent = 'Booking tilladt';
+                } else {
+                    icon.className = 'ph ph-x icon';
+                    text.textContent = 'Booking blokeret';
+                }
+            });
+        }
+    </script>
+}
diff --git a/PlanTempus.Application/Features/Customers/Pages/Detail.cshtml.cs b/PlanTempus.Application/Features/Customers/Pages/Detail.cshtml.cs
new file mode 100644
index 0000000..26aa752
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Pages/Detail.cshtml.cs
@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Mvc;
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace PlanTempus.Application.Features.Customers.Pages;
+
+public class DetailModel : PageModel
+{
+    [BindProperty(SupportsGet = true)]
+    public string Id { get; set; } = string.Empty;
+
+    public void OnGet()
+    {
+    }
+}
diff --git a/PlanTempus.Application/Features/Customers/Pages/Index.cshtml b/PlanTempus.Application/Features/Customers/Pages/Index.cshtml
index ba4a96c..8b75e69 100644
--- a/PlanTempus.Application/Features/Customers/Pages/Index.cshtml
+++ b/PlanTempus.Application/Features/Customers/Pages/Index.cshtml
@@ -255,15 +255,21 @@
 </swp-page-container>
 
 <!-- Customer Drawer -->
-<div id="customer-drawer" data-drawer="xxl">
+<div id="customer-drawer" data-drawer="xxl" data-customer-id="">
     <swp-drawer-header>
         <swp-drawer-title>
             <i class="ph ph-user"></i>
             <span localize="customers.drawer.title">Kundekort</span>
         </swp-drawer-title>
-        <swp-drawer-close data-drawer-close>
-            <i class="ph ph-x"></i>
-        </swp-drawer-close>
+        <swp-drawer-actions>
+            <a href="#" id="openFullDetailLink" class="drawer-detail-link">
+                <i class="ph ph-arrow-square-out"></i>
+                <span>Åbn fuld side</span>
+            </a>
+            <swp-drawer-close data-drawer-close>
+                <i class="ph ph-x"></i>
+            </swp-drawer-close>
+        </swp-drawer-actions>
     </swp-drawer-header>
 
     <swp-drawer-body>
@@ -410,3 +416,23 @@
         </swp-notes-section>
     </swp-drawer-body>
 </div>
+
+@section Scripts {
+    <script>
+        // Update detail link when drawer opens
+        document.querySelectorAll('[data-drawer-trigger="customer-drawer"]').forEach(row => {
+            row.addEventListener('click', () => {
+                const drawer = document.getElementById('customer-drawer');
+                const detailLink = document.getElementById('openFullDetailLink');
+
+                // Generate a customer ID from the row data (in real app, use actual ID)
+                const customerName = row.dataset.name || 'unknown';
+                const customerId = customerName.toLowerCase().replace(/\s+/g, '-');
+
+                // Update drawer data attribute and link href
+                drawer.dataset.customerId = customerId;
+                detailLink.href = `/kunder/${customerId}`;
+            });
+        });
+    </script>
+}
diff --git a/PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md b/PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md
index 2f3d4e7..47a5727 100644
--- a/PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md
+++ b/PlanTempus.Application/wwwroot/css/COMPONENT-CATALOG.md
@@ -78,16 +78,26 @@ Standard icon wrapper (40×40px cirkel):
 | `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-section-label` | Subsection label (KUN til sekundære sektioner inde i card, ALDRIG som card header) | Uppercase, 11px, border-bottom |
 | `swp-card-content` | Card indhold | Block |
 
 ### Card Header Eksempler
 
-**Standard card header (ANBEFALET):**
+**VIGTIGT:** Brug ALTID `swp-card-header` + `swp-card-title` som første element i et card.
+
+❌ **FORKERT - brug IKKE `swp-section-label` som card header:**
+```html
+<swp-card>
+    <swp-section-label>Kontaktoplysninger</swp-section-label>
+    <!-- content -->
+</swp-card>
+```
+
+✅ **KORREKT - brug `swp-card-header` + `swp-card-title`:**
 ```html
 <swp-card>
     <swp-card-header>
-        <swp-card-title>Kontakter</swp-card-title>
+        <swp-card-title>Kontaktoplysninger</swp-card-title>
     </swp-card-header>
     <!-- content -->
 </swp-card>
@@ -117,7 +127,7 @@ Standard icon wrapper (40×40px cirkel):
 </swp-card>
 ```
 
-**Subsection label (inde i card):**
+**Subsection label (KUN til sekundære sektioner inde i card):**
 ```html
 <swp-card>
     <swp-card-header>
@@ -130,6 +140,8 @@ Standard icon wrapper (40×40px cirkel):
 </swp-card>
 ```
 
+**HUSK:** `swp-section-label` må ALDRIG bruges som erstatning for `swp-card-header`!
+
 ---
 
 ## Stats Components (stats.css)
diff --git a/PlanTempus.Application/wwwroot/css/components.css b/PlanTempus.Application/wwwroot/css/components.css
index c64415c..321f803 100644
--- a/PlanTempus.Application/wwwroot/css/components.css
+++ b/PlanTempus.Application/wwwroot/css/components.css
@@ -1353,6 +1353,11 @@ swp-detail-grid {
   grid-template-columns: repeat(2, 1fr);
   gap: var(--card-gap);
   align-items: start;
+
+  /* Full width cards span both columns */
+  & > .full-width {
+    grid-column: 1 / -1;
+  }
 }
 
 /* ===========================================
diff --git a/PlanTempus.Application/wwwroot/css/customers.css b/PlanTempus.Application/wwwroot/css/customers.css
index 1609c05..4eb5733 100644
--- a/PlanTempus.Application/wwwroot/css/customers.css
+++ b/PlanTempus.Application/wwwroot/css/customers.css
@@ -73,6 +73,34 @@ swp-card.customers-list swp-data-table-cell:last-child {
            swp-edit-section/row (components.css), swp-toggle-row/slider (controls.css)
    =========================================== */
 
+/* Drawer header actions */
+swp-drawer-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+.drawer-detail-link {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-teal);
+  text-decoration: none;
+  border-radius: var(--radius-md);
+  transition: all var(--transition-fast);
+
+  &:hover {
+    background: var(--bg-teal-subtle);
+  }
+
+  i {
+    font-size: var(--font-size-base);
+  }
+}
+
 /* Customer Header */
 swp-customer-header {
   display: flex;
@@ -337,3 +365,1027 @@ swp-edit-input {
     }
   }
 }
+
+/* ===========================================
+   CUSTOMER DETAIL PAGE
+   Reuses: swp-sticky-header, swp-header-content (page.css),
+           swp-tab-bar/swp-tab (tabs.css), swp-detail-grid (components.css)
+   =========================================== */
+
+/* Customer Detail Header (inside swp-header-content) */
+swp-customer-detail-header {
+  display: flex;
+  gap: var(--spacing-6);
+  margin-top: var(--spacing-6);
+}
+
+swp-customer-detail-header swp-customer-avatar-large {
+  width: 80px;
+  height: 80px;
+  border-radius: var(--radius-full);
+  background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
+  color: white;
+  font-size: var(--font-size-3xl);
+  font-weight: var(--font-weight-semibold);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+swp-customer-detail-info {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+/* Name row with name, tags, and booking exclusion toggle */
+swp-customer-name-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+
+swp-customer-detail-name {
+  font-size: var(--font-size-2xl);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+}
+
+swp-customer-detail-tags {
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+/* Booking exclusion toggle */
+swp-booking-exclusion {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+  margin-left: auto;
+
+  &[data-excluded="false"] {
+    background: var(--color-background);
+    color: var(--color-text-secondary);
+    border: 1px solid var(--color-border);
+  }
+
+  &[data-excluded="true"] {
+    background: var(--bg-red-subtle);
+    color: var(--color-red);
+    border: 1px solid var(--border-red);
+  }
+
+  .icon {
+    font-size: var(--font-size-base);
+  }
+}
+
+/* Contact line with phone, email, customer since */
+swp-contact-line {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+
+  a {
+    color: var(--color-teal);
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+
+  .separator {
+    color: var(--color-border);
+  }
+}
+
+/* Customer Group Row (in card) */
+swp-customer-group-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  margin-bottom: var(--spacing-4);
+  padding-bottom: var(--spacing-4);
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-customer-group-label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* Relations List */
+swp-relations-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+swp-relation-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-3) var(--spacing-4);
+  background: var(--color-background-alt);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+swp-relation-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-full);
+  background: var(--color-purple);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  flex-shrink: 0;
+}
+
+swp-relation-info {
+  flex: 1;
+}
+
+swp-relation-name {
+  display: block;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+}
+
+swp-relation-type {
+  display: block;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+swp-relation-actions {
+  display: flex;
+  gap: var(--spacing-3);
+}
+
+swp-relation-link {
+  font-size: var(--font-size-sm);
+  color: var(--color-teal);
+  cursor: pointer;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+swp-relation-remove {
+  font-size: var(--font-size-lg);
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  opacity: 0.6;
+
+  &:hover {
+    opacity: 1;
+    color: var(--color-red);
+  }
+}
+
+swp-add-relation {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-3) var(--spacing-4);
+  border: 1px dashed var(--color-border);
+  border-radius: var(--radius-md);
+  color: var(--color-text-secondary);
+  font-size: var(--font-size-sm);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+
+  &:hover {
+    border-color: var(--color-teal);
+    color: var(--color-teal);
+  }
+}
+
+/* Toggle info wrapper (for toggles with description) */
+swp-toggle-info {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+swp-toggle-desc {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* Profile box full-width variant */
+swp-profile-box.full-width {
+  grid-column: span 2;
+}
+
+/* ===========================================
+   CUSTOMER DETAIL - APPOINTMENTS TABLE
+   =========================================== */
+swp-card.customer-appointments {
+  padding: 0;
+  overflow: hidden;
+}
+
+swp-card.customer-appointments swp-card-header {
+  padding: var(--spacing-6);
+}
+
+swp-card.customer-appointments swp-data-table {
+  grid-template-columns: 80px 60px 1fr 100px 110px;
+}
+
+/* ===========================================
+   CUSTOMER DETAIL - GIFTCARDS TABLE
+   =========================================== */
+swp-card.customer-giftcards {
+  padding: 0;
+  overflow: hidden;
+}
+
+swp-card.customer-giftcards swp-card-header {
+  padding: var(--spacing-6);
+}
+
+swp-card.customer-giftcards swp-data-table {
+  grid-template-columns: 140px 100px 80px 80px 100px;
+}
+
+/* ===========================================
+   CUSTOMER DETAIL - ACTIVITY LIST
+   =========================================== */
+swp-card.customer-activity {
+  padding: 0;
+  overflow: hidden;
+}
+
+swp-card.customer-activity swp-card-header {
+  padding: var(--spacing-6);
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-card.customer-activity swp-attention-list {
+  display: grid;
+  grid-template-columns: 56px 1fr 100px;
+  padding: var(--spacing-4);
+  gap: var(--spacing-3);
+}
+
+swp-card.customer-activity swp-attention-item {
+  border-radius: var(--radius-md);
+  padding: var(--spacing-4);
+}
+
+swp-card.customer-activity swp-attention-action {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* ===========================================
+   CUSTOMER DETAIL - JOURNAL NOTES
+   Override notes-section when inside a card
+   =========================================== */
+swp-card swp-notes-section {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+  padding: var(--spacing-6);
+  padding-top: 0;
+}
+
+/* Override chart-section when inside a card */
+swp-card swp-chart-section {
+  margin-top: 0;
+  padding-top: 0;
+  border-top: none;
+  padding: var(--spacing-6);
+  padding-top: 0;
+}
+
+/* ===========================================
+   CUSTOMER DETAIL - STATISTICS TAB
+   =========================================== */
+
+/* Grid helpers */
+.grid-4 {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: var(--spacing-4);
+}
+
+.grid-2 {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--spacing-6);
+}
+
+.grid-2.compact {
+  gap: var(--spacing-3);
+}
+
+/* Stat card variants */
+swp-stat-card.warning swp-stat-value {
+  color: var(--color-amber);
+}
+
+swp-stat-card.danger swp-stat-value {
+  color: var(--color-red);
+}
+
+swp-stat-card.success swp-stat-value {
+  color: var(--color-green);
+}
+
+swp-stat-value.small {
+  font-size: var(--font-size-xl);
+}
+
+/* Key-Value List */
+swp-kv-list {
+  display: flex;
+  flex-direction: column;
+}
+
+swp-kv-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-4) 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-kv-row:last-child {
+  border-bottom: none;
+}
+
+swp-kv-label {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+swp-kv-value {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  font-family: var(--font-mono);
+  color: var(--color-text);
+}
+
+/* Attendance Bar */
+swp-attendance-bar {
+  display: flex;
+  height: 24px;
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  margin-top: var(--spacing-4);
+}
+
+swp-attendance-segment {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: white;
+}
+
+swp-attendance-segment.attended {
+  background: var(--color-teal);
+}
+
+swp-attendance-segment.cancelled {
+  background: var(--color-amber);
+}
+
+swp-attendance-segment.noshow {
+  background: var(--color-red);
+}
+
+/* Top List */
+swp-top-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+}
+
+swp-top-item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  font-size: var(--font-size-sm);
+}
+
+swp-top-rank {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--radius-full);
+  background: var(--color-background);
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  flex-shrink: 0;
+}
+
+swp-top-item:first-child swp-top-rank {
+  background: var(--bg-teal-subtle);
+  color: var(--color-teal);
+}
+
+swp-top-name {
+  flex: 1;
+  color: var(--color-text);
+}
+
+swp-top-count {
+  font-family: var(--font-mono);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* Risk Indicator */
+swp-risk-indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+swp-risk-indicator.low swp-risk-dot {
+  background: var(--color-green);
+}
+
+swp-risk-indicator.low span {
+  color: var(--color-green);
+}
+
+swp-risk-indicator.medium swp-risk-dot {
+  background: var(--color-amber);
+}
+
+swp-risk-indicator.medium span {
+  color: var(--color-amber);
+}
+
+swp-risk-indicator.high swp-risk-dot {
+  background: var(--color-red);
+}
+
+swp-risk-indicator.high span {
+  color: var(--color-red);
+}
+
+swp-risk-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+}
+
+/* Section label small variant */
+swp-section-label.small {
+  font-size: 10px;
+  margin-bottom: var(--spacing-3);
+}
+
+/* ===========================================
+   CUSTOMER DETAIL - JOURNAL TAB
+   =========================================== */
+
+/* Journal Mini Tabs (filter tabs) */
+swp-journal-mini-tabs {
+  display: flex;
+  gap: var(--spacing-2);
+  margin-bottom: var(--spacing-6);
+}
+
+swp-journal-mini-tab {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+swp-journal-mini-tab:hover {
+  border-color: var(--color-teal);
+  color: var(--color-teal);
+}
+
+swp-journal-mini-tab.active {
+  background: var(--bg-teal-subtle);
+  border-color: var(--color-teal);
+  color: var(--color-teal);
+}
+
+.tab-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: var(--radius-full);
+}
+
+.tab-dot.blue {
+  background: var(--color-blue);
+}
+
+.tab-dot.amber {
+  background: var(--color-amber);
+}
+
+.tab-dot.purple {
+  background: var(--color-purple);
+}
+
+.tab-count {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* Journal Color Dots */
+.col-dot {
+  width: 10px;
+  height: 10px;
+  border-radius: var(--radius-full);
+}
+
+.col-dot.blue {
+  background: var(--color-blue);
+}
+
+.col-dot.amber {
+  background: var(--color-amber);
+}
+
+.col-dot.purple {
+  background: var(--color-purple);
+}
+
+/* Journal Entry Card */
+swp-journal-entry {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  padding: var(--spacing-5);
+  background: var(--color-background-alt);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+swp-journal-entry-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+}
+
+swp-journal-entry-type {
+  display: inline-flex;
+  padding: var(--spacing-1) var(--spacing-3);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-radius: var(--radius-sm);
+}
+
+swp-journal-entry-type.note {
+  background: var(--bg-blue-subtle);
+  color: var(--color-blue);
+}
+
+swp-journal-entry-type.advarsel {
+  background: var(--bg-red-subtle);
+  color: var(--color-red);
+}
+
+swp-journal-entry-type.farveformel {
+  background: var(--bg-amber-subtle);
+  color: var(--color-amber);
+}
+
+swp-journal-entry-type.analyse {
+  background: var(--bg-purple-subtle);
+  color: var(--color-purple);
+}
+
+swp-journal-entry-tags {
+  display: flex;
+  gap: var(--spacing-2);
+}
+
+swp-journal-tag {
+  display: inline-flex;
+  padding: var(--spacing-1) var(--spacing-2);
+  font-size: 10px;
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  border-radius: var(--radius-sm);
+}
+
+swp-journal-tag.allergi {
+  background: var(--bg-red-subtle);
+  color: var(--color-red);
+}
+
+swp-journal-entry-delete {
+  margin-left: auto;
+  color: var(--color-text-tertiary);
+  cursor: pointer;
+  opacity: 0.6;
+  transition: all var(--transition-fast);
+}
+
+swp-journal-entry-delete:hover {
+  opacity: 1;
+  color: var(--color-red);
+}
+
+swp-journal-entry-body {
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
+  line-height: 1.6;
+}
+
+swp-journal-entry-body .label {
+  color: var(--color-text-secondary);
+}
+
+swp-journal-entry-body .mono {
+  font-family: var(--font-mono);
+}
+
+swp-journal-entry-footer {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-top: var(--spacing-3);
+  border-top: 1px solid var(--color-border);
+}
+
+swp-journal-entry-date {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+swp-journal-entry-visibility {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-secondary);
+}
+
+swp-journal-entry-visibility.warning {
+  color: var(--color-amber);
+}
+
+/* ===========================================
+   CUSTOMER DETAIL - APPOINTMENTS TAB
+   =========================================== */
+
+/* Appointment Card (for upcoming) */
+swp-appointment-card {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  padding: var(--spacing-5);
+  background: var(--color-background-alt);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+swp-appointment-date {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+}
+
+swp-appointment-details {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+swp-appointment-actions {
+  display: flex;
+  gap: var(--spacing-3);
+  margin-top: var(--spacing-2);
+}
+
+/* Simple Table (for previous appointments) */
+swp-table {
+  display: flex;
+  flex-direction: column;
+}
+
+swp-table-header {
+  display: grid;
+  grid-template-columns: 120px 1fr 100px 80px 100px;
+  padding: var(--spacing-3) 0;
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-table-header span:last-child {
+  text-align: right;
+}
+
+swp-table-row {
+  display: grid;
+  grid-template-columns: 120px 1fr 100px 80px 100px;
+  padding: var(--spacing-4) 0;
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-table-row:last-child {
+  border-bottom: none;
+}
+
+swp-table-row span:last-child {
+  text-align: right;
+}
+
+swp-table-row .mono {
+  font-family: var(--font-mono);
+}
+
+/* See All Link */
+swp-see-all {
+  display: block;
+  padding-top: var(--spacing-4);
+  font-size: var(--font-size-sm);
+  color: var(--color-teal);
+  text-align: center;
+  cursor: pointer;
+}
+
+swp-see-all:hover {
+  text-decoration: underline;
+}
+
+/* Button */
+swp-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  border-radius: var(--radius-md);
+  border: none;
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+swp-btn.primary {
+  background: var(--color-teal);
+  color: white;
+}
+
+swp-btn.primary:hover {
+  background: var(--color-teal-hover);
+}
+
+swp-btn.secondary {
+  background: var(--color-surface);
+  color: var(--color-text);
+  border: 1px solid var(--color-border);
+}
+
+swp-btn.secondary:hover {
+  background: var(--color-background);
+}
+
+/* ===========================================
+   CUSTOMER DETAIL - GIFTCARDS TAB
+   =========================================== */
+
+/* Giftcard Card */
+swp-giftcard {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  padding: var(--spacing-5);
+  background: var(--color-background-alt);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+}
+
+swp-giftcard-header {
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+}
+
+swp-giftcard-balance {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+swp-giftcard-balance strong {
+  color: var(--color-text);
+  font-weight: var(--font-weight-semibold);
+}
+
+swp-giftcard-expires {
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+/* Progress Bar */
+swp-progress-bar {
+  height: 6px;
+  background: var(--color-border);
+  border-radius: var(--radius-full);
+  overflow: hidden;
+}
+
+swp-progress-fill {
+  height: 100%;
+  background: var(--color-teal);
+  border-radius: var(--radius-full);
+}
+
+/* ===========================================
+   CUSTOMER DETAIL - ACTIVITY TAB
+   =========================================== */
+
+/* Activity Filters */
+swp-activity-filters {
+  display: flex;
+  gap: var(--spacing-2);
+  margin-bottom: var(--spacing-6);
+  flex-wrap: wrap;
+}
+
+swp-activity-filter {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-4);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+}
+
+swp-activity-filter:hover {
+  border-color: var(--color-teal);
+  color: var(--color-teal);
+}
+
+swp-activity-filter.active {
+  background: var(--bg-teal-subtle);
+  border-color: var(--color-teal);
+  color: var(--color-teal);
+}
+
+swp-activity-filter i {
+  font-size: var(--font-size-base);
+  opacity: 0.7;
+}
+
+/* Activity Timeline */
+swp-activity-timeline {
+  display: flex;
+  flex-direction: column;
+}
+
+swp-activity-date-group {
+  display: flex;
+  flex-direction: column;
+  padding: var(--spacing-5);
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-activity-date-group:last-child {
+  border-bottom: none;
+}
+
+swp-activity-date-header {
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: var(--spacing-4);
+}
+
+swp-activity-item {
+  display: flex;
+  gap: var(--spacing-4);
+  padding: var(--spacing-3) 0;
+}
+
+swp-activity-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: var(--radius-full);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: var(--font-size-base);
+}
+
+swp-activity-icon.communication {
+  background: var(--bg-blue-subtle);
+  color: var(--color-blue);
+}
+
+swp-activity-icon.customer {
+  background: var(--bg-purple-subtle);
+  color: var(--color-purple);
+}
+
+swp-activity-icon.booking {
+  background: var(--bg-teal-subtle);
+  color: var(--color-teal);
+}
+
+swp-activity-icon.edit {
+  background: var(--bg-amber-subtle);
+  color: var(--color-amber);
+}
+
+swp-activity-icon.warning {
+  background: var(--bg-red-subtle);
+  color: var(--color-red);
+}
+
+swp-activity-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+}
+
+swp-activity-title {
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  flex-wrap: wrap;
+}
+
+swp-activity-badge {
+  display: inline-flex;
+  padding: var(--spacing-1) var(--spacing-2);
+  font-size: 10px;
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  border-radius: var(--radius-sm);
+}
+
+swp-activity-badge.auto {
+  background: var(--color-background);
+  color: var(--color-text-secondary);
+}
+
+swp-activity-badge.online {
+  background: var(--bg-blue-subtle);
+  color: var(--color-blue);
+}
+
+swp-activity-meta {
+  display: flex;
+  gap: var(--spacing-3);
+  font-size: var(--font-size-xs);
+  color: var(--color-text-tertiary);
+}
+
+swp-activity-time {
+  font-family: var(--font-mono);
+}
+
+swp-activity-actor {
+  color: var(--color-text-secondary);
+}