diff --git a/.gitignore b/.gitignore
index 686d1cb..ce4fd55 100644
--- a/.gitignore
+++ b/.gitignore
@@ -1,7 +1,4 @@
-## Ignore Visual Studio temporary files, build results, and
-## files generated by popular Visual Studio add-ons.
-##
-## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
+## .NET / Visual Studio gitignore
 
 # User-specific files
 *.rsuser
@@ -10,12 +7,6 @@
 *.userosscache
 *.sln.docstates
 
-# User-specific files (MonoDevelop/Xamarin Studio)
-*.userprefs
-
-# Mono auto generated files
-mono_crash.*
-
 # Build results
 [Dd]ebug/
 [Dd]ebugPublic/
@@ -32,13 +23,8 @@ bld/
 [Ll]og/
 [Ll]ogs/
 
-# Visual Studio 2015/2017 cache/options directory
+# Visual Studio cache/options directory
 .vs/
-# Uncomment if you have tasks that create the project's static files in wwwroot
-#wwwroot/
-
-# Visual Studio 2017 auto generated files
-Generated\ Files/
 
 # MSTest test Results
 [Tt]est[Rr]esult*/
@@ -49,11 +35,6 @@ Generated\ Files/
 TestResult.xml
 nunit-*.xml
 
-# Build Results of an ATL Project
-[Dd]ebugPS/
-[Rr]eleasePS/
-dlldata.c
-
 # Benchmark Results
 BenchmarkDotNet.Artifacts/
 
@@ -62,16 +43,10 @@ project.lock.json
 project.fragment.lock.json
 artifacts/
 
-# ASP.NET Scaffolding
-ScaffoldingReadMe.txt
-
 # StyleCop
 StyleCopReport.xml
 
 # Files built by Visual Studio
-*_i.c
-*_p.c
-*_h.h
 *.ilk
 *.meta
 *.obj
@@ -97,9 +72,6 @@ StyleCopReport.xml
 *.svclog
 *.scc
 
-# Chutzpah Test files
-_Chutzpah*
-
 # Visual C++ cache files
 ipch/
 *.aps
@@ -123,25 +95,22 @@ ipch/
 # TFS 2012 Local Workspace
 $tf/
 
-# Guidance Automation Toolkit
-*.gpState
-
-# ReSharper is a .NET coding add-in
+# ReSharper
 _ReSharper*/
 *.[Rr]e[Ss]harper
 *.DotSettings.user
 
-# TeamCity is a build add-in
+# TeamCity
 _TeamCity*
 
-# DotCover is a Code Coverage Tool
+# DotCover
 *.dotCover
 
-# AxoCover is a Code Coverage Tool
+# AxoCover
 .axoCover/*
 !.axoCover/settings.json
 
-# Coverlet is a free, cross platform Code Coverage Tool
+# Coverlet
 coverage*.json
 coverage*.xml
 coverage*.info
@@ -155,53 +124,23 @@ _NCrunch_*
 .*crunch*.local.xml
 nCrunchTemp_*
 
-# MightyMoose
-*.mm.*
-AutoTest.Net/
-
-# Web workbench (sass)
-.sass-cache/
-
-# Installshield output folder
-[Ee]xpress/
-
-# DocProject is a documentation generator add-in
-DocProject/buildhelp/
-DocProject/Help/*.HxT
-DocProject/Help/*.HxC
-DocProject/Help/*.hhc
-DocProject/Help/*.hhk
-DocProject/Help/*.hhp
-DocProject/Help/Html2
-DocProject/Help/html
-
 # Click-Once directory
 publish/
 
 # Publish Web Output
 *.[Pp]ublish.xml
 *.azurePubxml
-# Note: Comment the next line if you want to checkin your web deploy settings,
-# but database connection strings (with potential passwords) will be unencrypted
 *.pubxml
 *.publishproj
 
-# Microsoft Azure Web App publish settings. Comment the next line if you want to
-# checkin your Azure Web App publish settings, but sensitive information contained
-# in these scripts will be unencrypted
+# Microsoft Azure Web App publish settings
 PublishScripts/
 
 # NuGet Packages
 *.nupkg
-# NuGet Symbol Packages
 *.snupkg
-# The packages folder can be ignored because of Package Restore
 **/[Pp]ackages/*
-# except build/, which is used as an MSBuild target.
 !**/[Pp]ackages/build/
-# Uncomment if necessary however generally it will be regenerated when needed
-#!**/[Pp]ackages/repositories.config
-# NuGet v3's project.json files produces more ignorable files
 *.nuget.props
 *.nuget.targets
 
@@ -213,19 +152,8 @@ csx/
 ecf/
 rcf/
 
-# Windows Store app package directories and files
-AppPackages/
-BundleArtifacts/
-Package.StoreAssociation.xml
-_pkginfo.txt
-*.appx
-*.appxbundle
-*.appxupload
-
 # Visual Studio cache files
-# files ending in .cache can be ignored
 *.[Cc]ache
-# but keep track of directories ending in .cache
 !?*.[Cc]ache/
 
 # Others
@@ -237,22 +165,8 @@ ClientBin/
 *.jfm
 *.pfx
 *.publishsettings
-orleans.codegen.cs
-
-# Including strong name files can present a security risk
-# (https://github.com/github/gitignore/pull/2483#issue-259490424)
-#*.snk
-
-# Since there are multiple workflows, uncomment next line to ignore bower_components
-# (https://github.com/github/gitignore/pull/1529#issuecomment-104372622)
-#bower_components/
-
-# RIA/Silverlight projects
-Generated_Code/
 
 # Backup & report files from converting an old project file
-# to a newer Visual Studio version. Backup files are not needed,
-# because we have git ;-)
 _UpgradeReport_Files/
 Backup*/
 UpgradeLog*.XML
@@ -265,87 +179,15 @@ ServiceFabricBackup/
 *.ldf
 *.ndf
 
-# Business Intelligence projects
-*.rdl.data
-*.bim.layout
-*.bim_*.settings
-*.rptproj.rsuser
-*- [Bb]ackup.rdl
-*- [Bb]ackup ([0-9]).rdl
-*- [Bb]ackup ([0-9][0-9]).rdl
-
 # Microsoft Fakes
 FakesAssemblies/
 
-# GhostDoc plugin setting file
-*.GhostDoc.xml
-
-# Node.js Tools for Visual Studio
-.ntvs_analysis.dat
+# Node.js (for TypeScript frontend)
 node_modules/
 
-# Visual Studio 6 build log
-*.plg
-
-# Visual Studio 6 workspace options file
-*.opt
-
-# Visual Studio 6 auto-generated workspace file (contains which files were open etc.)
-*.vbw
-
-# Visual Studio LightSwitch build output
-**/*.HTMLClient/GeneratedArtifacts
-**/*.DesktopClient/GeneratedArtifacts
-**/*.DesktopClient/ModelManifest.xml
-**/*.Server/GeneratedArtifacts
-**/*.Server/ModelManifest.xml
-_Pvt_Extensions
-
-# Paket dependency manager
-.paket/paket.exe
-paket-files/
-
-# FAKE - F# Make
-.fake/
-
-# CodeRush personal settings
-.cr/personal
-
-# Python Tools for Visual Studio (PTVS)
-__pycache__/
-*.pyc
-
-# Cake - Uncomment if you are using it
-# tools/**
-# !tools/packages.config
-
-# Tabs Studio
-*.tss
-
-# Telerik's JustMock configuration file
-*.jmconfig
-
-# BizTalk build output
-*.btp.cs
-*.btm.cs
-*.odx.cs
-*.xsd.cs
-
-# OpenCover UI analysis results
-OpenCover/
-
-# Azure Stream Analytics local run output
-ASALocalRun/
-
 # MSBuild Binary and Structured Log
 *.binlog
 
-# NVidia Nsight GPU debugger configuration file
-*.nvuser
-
-# MFractors (Xamarin productivity tool) working folder
-.mfractor/
-
 # Local History for Visual Studio
 .localhistory/
 
@@ -355,20 +197,14 @@ healthchecksdb
 # Backup folder for Package Reference Convert tool in Visual Studio 2017
 MigrationBackup/
 
-# Ionide (cross platform F# VS Code tools) working folder
-.ionide/
-
 # Fody - auto-generated XML schema
 FodyWeavers.xsd
 
 nul
 
+# Project-specific
 tmpclaude*
 PlanTempus.Application/tmpclaude*
-
-
 PlanTempus.Application/wwwroot/js/app.js
-
 PlanTempus.Application/wwwroot/js/app.js.map
-
 PlanTempus.Application/wwwroot/lib/*
diff --git a/.workbench/POC/calendar-poc-single-file.html b/.workbench/POC/calendar-poc-single-file.html
new file mode 100644
index 0000000..8c2f25f
--- /dev/null
+++ b/.workbench/POC/calendar-poc-single-file.html
@@ -0,0 +1,1066 @@
+        <!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calendar Week View - POC</title>
+    <style>
+        /* Base CSS */
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            /* Grid measurements */
+            --hour-height: 60px;
+            --minute-height: 1px;
+            --snap-interval: 15;
+            
+            /* Time boundaries */
+            --day-start-hour: 7;
+            --day-end-hour: 19;
+            --work-start-hour: 8;
+            --work-end-hour: 17;
+            
+            /* Colors */
+            --color-primary: #2196f3;
+            --color-grid-line: #e0e0e0;
+            --color-grid-line-light: rgba(0, 0, 0, 0.03);
+            --color-work-hours: rgba(0, 100, 0, 0.02);
+            --color-current-time: #ff0000;
+            
+            /* Event colors */
+            --color-event-meeting: #e3f2fd;
+            --color-event-meeting-border: #2196f3;
+            --color-event-meal: #fff3e0;
+            --color-event-meal-border: #ff9800;
+            --color-event-work: #f3e5f5;
+            --color-event-work-border: #9c27b0;
+            
+            /* UI colors */
+            --color-background: #ffffff;
+            --color-surface: #f5f5f5;
+            --color-text: #333333;
+            --color-text-secondary: #666666;
+            --color-border: #e0e0e0;
+            
+            /* Shadows */
+            --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
+            --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
+            font-size: 14px;
+            line-height: 1.5;
+            color: var(--color-text);
+            background-color: var(--color-surface);
+        }
+
+        /* Custom elements default display */
+        swp-calendar,
+        swp-calendar-nav,
+        swp-calendar-container,
+        swp-time-axis,
+        swp-calendar-header,
+        swp-scrollable-content,
+        swp-time-grid,
+        swp-day-columns,
+        swp-day-column,
+        swp-events-layer,
+        swp-event,
+        swp-loading-overlay {
+            display: block;
+        }
+
+        /* Main calendar container */
+        swp-calendar {
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            background: var(--color-background);
+            position: relative;
+        }
+
+        /* Navigation bar */
+        swp-calendar-nav {
+            display: grid;
+            grid-template-columns: auto 1fr auto auto;
+            align-items: center;
+            gap: 20px;
+            padding: 12px 16px;
+            background: var(--color-background);
+            border-bottom: 1px solid var(--color-border);
+            box-shadow: var(--shadow-sm);
+        }
+
+        swp-nav-group {
+            display: flex;
+            align-items: center;
+            gap: 4px;
+        }
+
+        swp-nav-button {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 8px 16px;
+            border: 1px solid var(--color-border);
+            background: var(--color-background);
+            border-radius: 4px;
+            cursor: pointer;
+            font-size: 0.875rem;
+            font-weight: 500;
+            transition: all 150ms ease;
+            min-width: 40px;
+            height: 36px;
+        }
+
+        swp-nav-button:hover {
+            background: var(--color-surface);
+            border-color: var(--color-text-secondary);
+        }
+
+        /* Search container */
+        swp-search-container {
+            display: flex;
+            align-items: center;
+            position: relative;
+            justify-self: end;
+            
+            swp-search-icon {
+                position: absolute;
+                left: 12px;
+                pointer-events: none;
+                color: var(--color-text-secondary);
+                display: flex;
+                align-items: center;
+                
+                svg {
+                    width: 16px;
+                    height: 16px;
+                }
+            }
+            
+            input[type="search"] {
+                padding: 8px 36px 8px 36px;
+                border: 1px solid var(--color-border);
+                border-radius: 20px;
+                background: var(--color-surface);
+                font-size: 0.875rem;
+                width: 200px;
+                transition: all 150ms ease;
+                
+                &::-webkit-search-cancel-button {
+                    display: none;
+                }
+                
+                &:focus {
+                    outline: none;
+                    border-color: var(--color-primary);
+                    background: var(--color-background);
+                    width: 250px;
+                    box-shadow: 0 0 0 3px rgba(33, 150, 243, 0.1);
+                }
+                
+                &::placeholder {
+                    color: var(--color-text-secondary);
+                }
+            }
+            
+            swp-search-clear {
+                position: absolute;
+                right: 8px;
+                width: 24px;
+                height: 24px;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                cursor: pointer;
+                border-radius: 50%;
+                transition: all 150ms ease;
+                color: var(--color-text-secondary);
+                
+                &:hover {
+                    background: rgba(0, 0, 0, 0.1);
+                }
+                
+                svg {
+                    width: 12px;
+                    height: 12px;
+                }
+                
+                &[hidden] {
+                    display: none;
+                }
+            }
+        }
+
+        swp-view-button {
+            padding: 8px 16px;
+            border: none;
+            background: transparent;
+            cursor: pointer;
+            font-size: 0.875rem;
+            font-weight: 500;
+            transition: all 150ms ease;
+        }
+
+        swp-view-button:not(:last-child) {
+            border-right: 1px solid var(--color-border);
+        }
+
+        swp-view-button[data-active="true"] {
+            background: var(--color-primary);
+            color: white;
+        }
+
+        /* Calendar container grid */
+        swp-calendar-container {
+            flex: 1;
+            display: grid;
+            grid-template-columns: 60px 1fr;
+            grid-template-rows: 1fr;
+            overflow: hidden;
+            position: relative;
+        }
+
+        /* Week container for sliding */
+        swp-grid-container {
+            grid-column: 2;
+            display: grid;
+            grid-template-rows: auto 1fr;
+            position: relative;
+            width: 100%;
+            transition: transform 400ms cubic-bezier(0.4, 0, 0.2, 1);
+        }
+
+        swp-grid-container.slide-out-left {
+            transform: translateX(-100%);
+        }
+
+        swp-grid-container.slide-out-right {
+            transform: translateX(100%);
+        }
+
+        swp-grid-container.slide-in-left {
+            transform: translateX(-100%);
+        }
+
+        swp-grid-container.slide-in-right {
+            transform: translateX(100%);
+        }
+
+        /* Time axis */
+        swp-time-axis {
+            grid-column: 1;
+            grid-row: 1;
+            background: var(--color-surface);
+            border-right: 1px solid var(--color-border);
+            position: sticky;
+            left: 0;
+            z-index: 4;
+            padding-top: 80px; /* Match header height */
+        }
+
+        swp-hour-marker {
+            height: var(--hour-height);
+            padding: 0 8px 8px 8px;
+            font-size: 0.75rem;
+            color: var(--color-text-secondary);
+            display: flex;
+            align-items: flex-start;
+            position: relative;
+        }
+
+        swp-hour-marker::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 100%;
+            width: 100vw;
+            height: 1px;
+            background: var(--color-grid-line);
+            pointer-events: none;
+        }
+
+        /* Week header */
+        swp-calendar-header {
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+            background: var(--color-surface);
+            border-bottom: 1px solid var(--color-border);
+            position: sticky;
+            top: 0;
+            z-index: 3;
+            height: 80px; /* Fixed height */
+        }
+
+        swp-day-header {
+            padding: 12px;
+            text-align: center;
+            border-right: 1px solid var(--color-grid-line);
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+        }
+
+        swp-day-header:last-child {
+            border-right: none;
+        }
+
+        swp-day-name {
+            display: block;
+            font-weight: 500;
+            font-size: 0.875rem;
+            color: var(--color-text-secondary);
+        }
+
+        swp-day-date {
+            display: block;
+            font-size: 1.25rem;
+            font-weight: 600;
+            margin-top: 4px;
+        }
+
+        swp-day-header[data-today="true"] swp-day-date {
+            color: var(--color-primary);
+            background: rgba(33, 150, 243, 0.1);
+            border-radius: 50%;
+            width: 36px;
+            height: 36px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin: 4px auto 0;
+        }
+
+        /* Scrollable content */
+        swp-scrollable-content {
+            overflow-y: auto;
+            overflow-x: hidden;
+            scroll-behavior: smooth;
+            position: relative;
+        }
+
+        /* Time grid */
+        swp-time-grid {
+            position: relative;
+            height: calc(12 * var(--hour-height));
+        }
+
+        swp-time-grid::before {
+            content: '';
+            position: absolute;
+            top: calc((var(--work-start-hour) - var(--day-start-hour)) * var(--hour-height));
+            height: calc((var(--work-end-hour) - var(--work-start-hour)) * var(--hour-height));
+            left: 0;
+            right: 0;
+            background: var(--color-work-hours);
+            pointer-events: none;
+        }
+
+        /* Grid lines */
+        swp-grid-lines {
+            position: absolute;
+            inset: 0;
+            pointer-events: none;
+            background-image: repeating-linear-gradient(
+                to bottom,
+                transparent,
+                transparent calc(var(--hour-height) / 4 - 1px),
+                rgba(0, 0, 0, 0.03) calc(var(--hour-height) / 4 - 1px),
+                rgba(0, 0, 0, 0.03) calc(var(--hour-height) / 4)
+            );
+        }
+
+        /* Day columns */
+        swp-day-columns {
+            position: absolute;
+            inset: 0;
+            display: grid;
+            grid-template-columns: repeat(7, 1fr);
+        }
+
+        swp-day-column {
+            position: relative;
+            border-right: 1px solid var(--color-grid-line);
+        }
+
+        swp-day-column:last-child {
+            border-right: none;
+        }
+
+        swp-events-layer {
+            position: absolute;
+            inset: 0;
+        }
+
+        /* Events */
+        swp-event {
+            position: absolute;
+            border-radius: 4px;
+            overflow: hidden;
+            cursor: move;
+            transition: box-shadow 150ms ease, transform 150ms ease;
+            z-index: 10;
+            left: 1px;
+            right: 1px;
+            padding: 8px;
+        }
+
+        swp-event[data-type="meeting"] {
+            background: var(--color-event-meeting);
+            border-left: 4px solid var(--color-event-meeting-border);
+        }
+
+        swp-event[data-type="meal"] {
+            background: var(--color-event-meal);
+            border-left: 4px solid var(--color-event-meal-border);
+        }
+
+        swp-event[data-type="work"] {
+            background: var(--color-event-work);
+            border-left: 4px solid var(--color-event-work-border);
+        }
+
+        swp-event:hover {
+            box-shadow: var(--shadow-md);
+            transform: scale(1.02);
+            z-index: 20;
+        }
+
+        swp-event-time {
+            display: block;
+            font-size: 0.875rem;
+            font-weight: 500;
+            opacity: 0.8;
+            margin-bottom: 4px;
+        }
+
+        swp-event-title {
+            display: block;
+            font-size: 0.875rem;
+            line-height: 1.3;
+        }
+
+        /* Loading */
+        swp-loading-overlay {
+            position: absolute;
+            inset: 0;
+            background: rgba(255, 255, 255, 0.9);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            z-index: 200;
+        }
+
+        swp-loading-overlay[hidden] {
+            display: none;
+        }
+
+        swp-spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid #f3f3f3;
+            border-top: 3px solid var(--color-primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+</head>
+<body>
+    <swp-calendar data-view="week" data-week-days="7" data-snap-interval="15">
+        <!-- Navigation Bar -->
+        <swp-calendar-nav>
+            <swp-nav-group>
+                <swp-nav-button data-action="prev">←</swp-nav-button>
+                <swp-nav-button data-action="next">→</swp-nav-button>
+                <swp-nav-button data-action="today">Today</swp-nav-button>
+            </swp-nav-group>
+            
+            <swp-week-info>
+                <swp-week-number>Week 3</swp-week-number>
+                <swp-date-range>Jan 15 - Jan 21, 2024</swp-date-range>
+            </swp-week-info>
+            
+            <swp-search-container>
+                <swp-search-icon>
+                    <svg width="16" height="16" viewBox="0 0 16 16">
+                        <circle cx="6" cy="6" r="5" stroke="currentColor" fill="none" stroke-width="1.5"/>
+                        <path d="M10 10l4 4" stroke="currentColor" stroke-width="1.5"/>
+                    </svg>
+                </swp-search-icon>
+                <input type="search" placeholder="Search events..." />
+                <swp-search-clear hidden>
+                    <svg width="14" height="14" viewBox="0 0 16 16">
+                        <path d="M5 5l6 6M11 5l-6 6" stroke="currentColor" stroke-width="2"/>
+                    </svg>
+                </swp-search-clear>
+            </swp-search-container>
+            
+            <swp-view-selector>
+                <swp-view-button data-view="day">Day</swp-view-button>
+                <swp-view-button data-view="week" data-active="true">Week</swp-view-button>
+                <swp-view-button data-view="month" disabled>Month</swp-view-button>
+            </swp-view-selector>
+                <swp-view-button data-view="day">Day</swp-view-button>
+                <swp-view-button data-view="week" data-active="true">Week</swp-view-button>
+                <swp-view-button data-view="month" disabled>Month</swp-view-button>
+            </swp-view-selector>
+        </swp-calendar-nav>
+        
+        <!-- Calendar Grid -->
+        <swp-calendar-container>
+            <swp-time-axis></swp-time-axis>
+            
+            <swp-grid-container>
+                <swp-calendar-header></swp-calendar-header>
+                
+                <swp-scrollable-content>
+                    <swp-time-grid>
+                        <swp-grid-lines></swp-grid-lines>
+                        <swp-day-columns></swp-day-columns>
+                    </swp-time-grid>
+                </swp-scrollable-content>
+            </swp-grid-container>
+        </swp-calendar-container>
+        
+        <swp-loading-overlay hidden>
+            <swp-spinner></swp-spinner>
+        </swp-loading-overlay>
+    </swp-calendar>
+
+    <script type="module">
+        // Simple proof of concept implementation
+        class CalendarPOC {
+            constructor() {
+                this.currentWeek = this.getWeekStart(new Date());
+                this.targetWeek = new Date(this.currentWeek); // Track where we're heading
+                this.animationQueue = 0; // Track pending animations
+                this.init();
+            }
+
+            init() {
+                this.renderTimeAxis();
+                this.renderWeekHeaders();
+                this.renderDayColumns();
+                this.updateWeekInfo();
+                this.setupEventListeners();
+                this.loadMockEvents();
+            }
+
+            updateWeekInfo() {
+                const weekNumber = this.getWeekNumber(this.currentWeek);
+                const weekEnd = new Date(this.currentWeek);
+                weekEnd.setDate(weekEnd.getDate() + 6);
+                
+                const monthNames = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
+                
+                const startMonth = monthNames[this.currentWeek.getMonth()];
+                const endMonth = monthNames[weekEnd.getMonth()];
+                const startDay = this.currentWeek.getDate();
+                const endDay = weekEnd.getDate();
+                const year = this.currentWeek.getFullYear();
+                
+                let dateRange;
+                if (startMonth === endMonth) {
+                    dateRange = `${startMonth} ${startDay} - ${endDay}, ${year}`;
+                } else if (this.currentWeek.getFullYear() !== weekEnd.getFullYear()) {
+                    dateRange = `${startMonth} ${startDay}, ${this.currentWeek.getFullYear()} - ${endMonth} ${endDay}, ${weekEnd.getFullYear()}`;
+                } else {
+                    dateRange = `${startMonth} ${startDay} - ${endMonth} ${endDay}, ${year}`;
+                }
+                
+                document.querySelector('swp-week-number').textContent = `Week ${weekNumber}`;
+                document.querySelector('swp-date-range').textContent = dateRange;
+            }
+
+            getWeekNumber(date) {
+                const d = new Date(Date.UTC(date.getFullYear(), date.getMonth(), date.getDate()));
+                const dayNum = d.getUTCDay() || 7;
+                d.setUTCDate(d.getUTCDate() + 4 - dayNum);
+                const yearStart = new Date(Date.UTC(d.getUTCFullYear(), 0, 1));
+                return Math.ceil((((d - yearStart) / 86400000) + 1) / 7);
+            }
+
+            renderTimeAxis() {
+                const timeAxis = document.querySelector('swp-time-axis');
+                const startHour = 7;
+                const endHour = 19;
+                
+                for (let hour = startHour; hour <= endHour; hour++) {
+                    const marker = document.createElement('swp-hour-marker');
+                    const period = hour >= 12 ? 'PM' : 'AM';
+                    const displayHour = hour > 12 ? hour - 12 : (hour === 0 ? 12 : hour);
+                    marker.textContent = `${displayHour} ${period}`;
+                    timeAxis.appendChild(marker);
+                }
+            }
+
+            renderWeekHeaders() {
+                const weekHeader = document.querySelector('swp-calendar-header');
+                const days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
+                
+                weekHeader.innerHTML = ''; // Clear any existing content
+                
+                for (let i = 0; i < 7; i++) {
+                    const date = new Date(this.currentWeek);
+                    date.setDate(date.getDate() + i);
+                    
+                    const header = document.createElement('swp-day-header');
+                    if (this.isToday(date)) {
+                        header.dataset.today = 'true';
+                    }
+                    
+                    header.innerHTML = `
+                        <swp-day-name>${days[date.getDay()]}</swp-day-name>
+                        <swp-day-date>${date.getDate()}</swp-day-date>
+                    `;
+                    header.dataset.date = this.formatDate(date);
+                    
+                    weekHeader.appendChild(header);
+                }
+            }
+
+            renderDayColumns() {
+                const dayColumns = document.querySelector('swp-day-columns');
+                
+                for (let i = 0; i < 7; i++) {
+                    const column = document.createElement('swp-day-column');
+                    const date = new Date(this.currentWeek);
+                    date.setDate(date.getDate() + i);
+                    column.dataset.date = this.formatDate(date);
+                    
+                    const eventsLayer = document.createElement('swp-events-layer');
+                    column.appendChild(eventsLayer);
+                    
+                    dayColumns.appendChild(column);
+                }
+            }
+
+            loadMockEvents() {
+                const events = [
+                    {
+                        title: 'Team Standup',
+                        type: 'meeting',
+                        day: 1,
+                        startTime: '09:00',
+                        duration: 30
+                    },
+                    {
+                        title: 'Client Meeting',
+                        type: 'meeting',
+                        day: 1,
+                        startTime: '14:00',
+                        duration: 90
+                    },
+                    {
+                        title: 'Lunch',
+                        type: 'meal',
+                        day: 1,
+                        startTime: '12:00',
+                        duration: 60
+                    },
+                    {
+                        title: 'Deep Work Session',
+                        type: 'work',
+                        day: 2,
+                        startTime: '10:00',
+                        duration: 120
+                    },
+                    {
+                        title: 'Team Standup',
+                        type: 'meeting',
+                        day: 2,
+                        startTime: '09:00',
+                        duration: 30
+                    },
+                    {
+                        title: 'Lunch',
+                        type: 'meal',
+                        day: 2,
+                        startTime: '12:30',
+                        duration: 60
+                    },
+                    {
+                        title: 'Project Review',
+                        type: 'meeting',
+                        day: 3,
+                        startTime: '15:00',
+                        duration: 60
+                    },
+                    {
+                        title: 'Lunch',
+                        type: 'meal',
+                        day: 3,
+                        startTime: '12:00',
+                        duration: 60
+                    },
+                    {
+                        title: 'Sprint Planning',
+                        type: 'meeting',
+                        day: 4,
+                        startTime: '10:00',
+                        duration: 120
+                    },
+                    {
+                        title: 'Coffee Break',
+                        type: 'meal',
+                        day: 4,
+                        startTime: '15:00',
+                        duration: 30
+                    },
+                    {
+                        title: 'Documentation',
+                        type: 'work',
+                        day: 5,
+                        startTime: '13:00',
+                        duration: 180
+                    }
+                ];
+
+                events.forEach(event => {
+                    this.renderEvent(event);
+                });
+            }
+
+            renderEvent(eventData) {
+                const column = document.querySelectorAll('swp-day-column')[eventData.day];
+                if (!column) return;
+                
+                const eventsLayer = column.querySelector('swp-events-layer');
+                const event = document.createElement('swp-event');
+                event.dataset.type = eventData.type;
+                
+                // Calculate position
+                const [hours, minutes] = eventData.startTime.split(':').map(Number);
+                const startMinutes = (hours - 7) * 60 + minutes; // 7 is start hour
+                
+                event.style.setProperty('--start-minutes', startMinutes);
+                event.style.setProperty('--duration-minutes', eventData.duration);
+                event.style.top = `${startMinutes}px`;
+                event.style.height = `${eventData.duration}px`;
+                
+                event.innerHTML = `
+                    <swp-event-time>${this.formatTime(hours, minutes)}</swp-event-time>
+                    <swp-event-title>${eventData.title}</swp-event-title>
+                `;
+                
+                eventsLayer.appendChild(event);
+            }
+
+            setupEventListeners() {
+                // Navigation buttons
+                document.querySelector('[data-action="prev"]').addEventListener('click', () => {
+                    // Calculate from targetWeek, not currentWeek
+                    this.targetWeek.setDate(this.targetWeek.getDate() - 7);
+                    const weekToShow = new Date(this.targetWeek);
+                    this.animationQueue++;
+                    this.animateTransition('prev', weekToShow);
+                });
+
+                document.querySelector('[data-action="next"]').addEventListener('click', () => {
+                    // Calculate from targetWeek, not currentWeek
+                    this.targetWeek.setDate(this.targetWeek.getDate() + 7);
+                    const weekToShow = new Date(this.targetWeek);
+                    this.animationQueue++;
+                    this.animateTransition('next', weekToShow);
+                });
+
+                document.querySelector('[data-action="today"]').addEventListener('click', () => {
+                    const today = new Date();
+                    const todayWeekStart = this.getWeekStart(today);
+                    
+                    // Reset to today
+                    this.targetWeek = new Date(todayWeekStart);
+                    
+                    const currentTime = this.currentWeek.getTime();
+                    const targetTime = todayWeekStart.getTime();
+                    
+                    if (currentTime < targetTime) {
+                        this.animationQueue++;
+                        this.animateTransition('next', todayWeekStart);
+                    } else if (currentTime > targetTime) {
+                        this.animationQueue++;
+                        this.animateTransition('prev', todayWeekStart);
+                    }
+                });
+
+                // Simple drag functionality
+                let draggedEvent = null;
+                
+                document.addEventListener('mousedown', (e) => {
+                    const event = e.target.closest('swp-event');
+                    if (event) {
+                        draggedEvent = event;
+                        event.style.opacity = '0.5';
+                        event.style.cursor = 'grabbing';
+                    }
+                });
+
+                document.addEventListener('mouseup', () => {
+                    if (draggedEvent) {
+                        draggedEvent.style.opacity = '1';
+                        draggedEvent.style.cursor = 'move';
+                        draggedEvent = null;
+                    }
+                });
+            }
+
+            animateTransition(direction, targetWeek) {
+                const container = document.querySelector('swp-calendar-container');
+                const currentWeek = document.querySelector('swp-grid-container');
+                
+                // Create new week container
+                const newWeek = document.createElement('swp-grid-container');
+                newWeek.innerHTML = `
+                    <swp-calendar-header></swp-calendar-header>
+                    <swp-scrollable-content>
+                        <swp-time-grid>
+                            <swp-grid-lines></swp-grid-lines>
+                            <swp-day-columns></swp-day-columns>
+                        </swp-time-grid>
+                    </swp-scrollable-content>
+                `;
+                
+                // Position new week off-screen
+                newWeek.style.position = 'absolute';
+                newWeek.style.top = '0';
+                newWeek.style.left = '0';
+                newWeek.style.width = '100%';
+                newWeek.style.height = '100%';
+                newWeek.style.transform = direction === 'next' ? 'translateX(100%)' : 'translateX(-100%)';
+                
+                // Add to container
+                container.appendChild(newWeek);
+                
+                // Render new content in the new container using targetWeek
+                const tempHeader = newWeek.querySelector('swp-calendar-header');
+                const tempColumns = newWeek.querySelector('swp-day-columns');
+                
+                // Clear any existing content
+                tempHeader.innerHTML = '';
+                tempColumns.innerHTML = '';
+                
+                // Render headers for target week
+                for (let i = 0; i < 7; i++) {
+                    const date = new Date(targetWeek);
+                    date.setDate(date.getDate() + i);
+                    
+                    const header = document.createElement('swp-day-header');
+                    if (this.isToday(date)) {
+                        header.dataset.today = 'true';
+                    }
+                    
+                    header.innerHTML = `
+                        <swp-day-name>${['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'][date.getDay()]}</swp-day-name>
+                        <swp-day-date>${date.getDate()}</swp-day-date>
+                    `;
+                    header.dataset.date = this.formatDate(date);
+                    
+                    tempHeader.appendChild(header);
+                }
+                
+                // Render columns for target week
+                for (let i = 0; i < 7; i++) {
+                    const column = document.createElement('swp-day-column');
+                    const date = new Date(targetWeek);
+                    date.setDate(date.getDate() + i);
+                    column.dataset.date = this.formatDate(date);
+                    
+                    const eventsLayer = document.createElement('swp-events-layer');
+                    column.appendChild(eventsLayer);
+                    
+                    tempColumns.appendChild(column);
+                }
+                
+                // Load events into new container
+                this.loadMockEventsIntoContainer(newWeek);
+                
+                // Animate transition
+                requestAnimationFrame(() => {
+                    // Slide out current week
+                    currentWeek.style.transform = direction === 'next' ? 'translateX(-100%)' : 'translateX(100%)';
+                    currentWeek.style.opacity = '0.5';
+                    
+                    // Slide in new week
+                    newWeek.style.transform = 'translateX(0)';
+                    
+                    // Clean up after animation
+                    setTimeout(() => {
+                        currentWeek.remove();
+                        newWeek.style.position = 'relative';
+                        // Update currentWeek only after animation is complete
+                        this.currentWeek = new Date(targetWeek);
+                        this.animationQueue--;
+                        
+                        // If this was the last queued animation, ensure we're in sync
+                        if (this.animationQueue === 0) {
+                            this.currentWeek = new Date(this.targetWeek);
+                        }
+                        
+                        // Update week info
+                        this.updateWeekInfo();
+                    }, 400);
+                });
+            }
+
+            loadMockEventsIntoContainer(container) {
+                const events = [
+                    {
+                        title: 'Team Standup',
+                        type: 'meeting',
+                        day: 1,
+                        startTime: '09:00',
+                        duration: 30
+                    },
+                    {
+                        title: 'Client Meeting',
+                        type: 'meeting',
+                        day: 1,
+                        startTime: '14:00',
+                        duration: 90
+                    },
+                    {
+                        title: 'Lunch',
+                        type: 'meal',
+                        day: 1,
+                        startTime: '12:00',
+                        duration: 60
+                    },
+                    {
+                        title: 'Deep Work Session',
+                        type: 'work',
+                        day: 2,
+                        startTime: '10:00',
+                        duration: 120
+                    },
+                    {
+                        title: 'Team Standup',
+                        type: 'meeting',
+                        day: 2,
+                        startTime: '09:00',
+                        duration: 30
+                    },
+                    {
+                        title: 'Lunch',
+                        type: 'meal',
+                        day: 2,
+                        startTime: '12:30',
+                        duration: 60
+                    },
+                    {
+                        title: 'Project Review',
+                        type: 'meeting',
+                        day: 3,
+                        startTime: '15:00',
+                        duration: 60
+                    },
+                    {
+                        title: 'Lunch',
+                        type: 'meal',
+                        day: 3,
+                        startTime: '12:00',
+                        duration: 60
+                    },
+                    {
+                        title: 'Sprint Planning',
+                        type: 'meeting',
+                        day: 4,
+                        startTime: '10:00',
+                        duration: 120
+                    },
+                    {
+                        title: 'Coffee Break',
+                        type: 'meal',
+                        day: 4,
+                        startTime: '15:00',
+                        duration: 30
+                    },
+                    {
+                        title: 'Documentation',
+                        type: 'work',
+                        day: 5,
+                        startTime: '13:00',
+                        duration: 180
+                    }
+                ];
+
+                const columns = container.querySelectorAll('swp-day-column');
+                events.forEach(event => {
+                    this.renderEventInColumn(event, columns[event.day]);
+                });
+            }
+
+            renderEventInColumn(eventData, column) {
+                if (!column) return;
+                
+                const eventsLayer = column.querySelector('swp-events-layer');
+                const event = document.createElement('swp-event');
+                event.dataset.type = eventData.type;
+                
+                // Calculate position
+                const [hours, minutes] = eventData.startTime.split(':').map(Number);
+                const startMinutes = (hours - 7) * 60 + minutes; // 7 is start hour
+                
+                event.style.setProperty('--start-minutes', startMinutes);
+                event.style.setProperty('--duration-minutes', eventData.duration);
+                event.style.top = `${startMinutes}px`;
+                event.style.height = `${eventData.duration}px`;
+                
+                event.innerHTML = `
+                    <swp-event-time>${this.formatTime(hours, minutes)}</swp-event-time>
+                    <swp-event-title>${eventData.title}</swp-event-title>
+                `;
+                
+                eventsLayer.appendChild(event);
+            }
+
+            updateCalendar() {
+                // This method is now only used for initial render
+                document.querySelector('swp-calendar-header').innerHTML = '';
+                document.querySelector('swp-day-columns').innerHTML = '';
+                this.renderWeekHeaders();
+                this.renderDayColumns();
+                this.loadMockEvents();
+            }
+
+            // Utility functions
+            getWeekStart(date) {
+                const d = new Date(date);
+                const day = d.getDay();
+                d.setDate(d.getDate() - day);
+                d.setHours(0, 0, 0, 0);
+                return d;
+            }
+
+            formatDate(date) {
+                return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
+            }
+
+            formatTime(hours, minutes) {
+                const period = hours >= 12 ? 'PM' : 'AM';
+                const displayHours = hours % 12 || 12;
+                return `${displayHours}:${String(minutes).padStart(2, '0')} ${period}`;
+            }
+
+            isToday(date) {
+                const today = new Date();
+                return date.toDateString() === today.toDateString();
+            }
+        }
+
+        // Initialize calendar
+        const calendar = new CalendarPOC();
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/.workbench/POC/css/dashboard.css b/.workbench/POC/css/dashboard.css
new file mode 100644
index 0000000..b03b55f
--- /dev/null
+++ b/.workbench/POC/css/dashboard.css
@@ -0,0 +1,1157 @@
+/* ==========================================
+   DASHBOARD STYLES
+   ========================================== */
+
+/* ==========================================
+   FONT FACE (Poppins)
+   ========================================== */
+@font-face {
+  font-family: 'Poppins';
+  src: url('../fonts/Poppins-Regular.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Poppins';
+  src: url('../fonts/Poppins-Medium.woff') format('woff');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Poppins';
+  src: url('../fonts/Poppins-SemiBold.woff') format('woff');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Poppins';
+  src: url('../fonts/Poppins-Bold.woff') format('woff');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+/* ==========================================
+   CSS VARIABLES
+   ========================================== */
+:root {
+  --color-surface: #fff;
+  --color-background: #f5f5f5;
+  --color-background-hover: #f0f0f0;
+  --color-background-alt: #fafafa;
+  --color-border: #e0e0e0;
+  --color-text: #333;
+  --color-text-secondary: #666;
+  --color-teal: #00897b;
+  --color-blue: #1976d2;
+  --color-red: #e53935;
+  --color-amber: #f59e0b;
+  --color-purple: #8b5cf6;
+  --color-green: #43a047;
+  --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  --font-mono: 'JetBrains Mono', monospace;
+}
+
+/* Dark mode */
+@media (prefers-color-scheme: dark) {
+  :root:not(.light-mode) {
+    --color-surface: #1e1e1e;
+    --color-background: #121212;
+    --color-background-hover: #2a2a2a;
+    --color-background-alt: #1a1a1a;
+    --color-border: #333;
+    --color-text: #e0e0e0;
+    --color-text-secondary: #999;
+    --color-teal: #26a69a;
+    --color-blue: #42a5f5;
+    --color-red: #ef5350;
+    --color-amber: #ffb74d;
+    --color-purple: #a78bfa;
+    --color-green: #66bb6a;
+  }
+}
+
+:root.dark-mode {
+  --color-surface: #1e1e1e;
+  --color-background: #121212;
+  --color-background-hover: #2a2a2a;
+  --color-background-alt: #1a1a1a;
+  --color-border: #333;
+  --color-text: #e0e0e0;
+  --color-text-secondary: #999;
+  --color-teal: #26a69a;
+  --color-blue: #42a5f5;
+  --color-red: #ef5350;
+  --color-amber: #ffb74d;
+  --color-purple: #a78bfa;
+  --color-green: #66bb6a;
+}
+
+/* ==========================================
+   RESET & BASE
+   ========================================== */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: var(--font-family);
+  font-size: 14px;
+  color: var(--color-text);
+  background: var(--color-background);
+  line-height: 1.5;
+}
+
+/* ==========================================
+   LAYOUT
+   ========================================== */
+swp-page-container {
+  display: block;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+swp-dashboard-grid {
+  display: grid;
+  grid-template-columns: 1fr 380px;
+  gap: 24px;
+}
+
+swp-main-column {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+swp-side-column {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+}
+
+/* ==========================================
+   BUTTONS
+   ========================================== */
+swp-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--font-family);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 150ms ease;
+  border: none;
+}
+
+swp-btn i {
+  font-size: 18px;
+}
+
+swp-btn.primary {
+  background: var(--color-teal);
+  color: white;
+}
+
+swp-btn.primary:hover {
+  background: #00796b;
+}
+
+swp-btn.secondary {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+swp-btn.secondary:hover {
+  background: var(--color-background-hover);
+}
+
+/* ==========================================
+   CARDS
+   ========================================== */
+swp-card {
+  display: block;
+  background: var(--color-surface);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  padding: 20px;
+}
+
+swp-card-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+swp-card-title {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+swp-card-title i {
+  font-size: 20px;
+  color: var(--color-teal);
+}
+
+swp-card-action {
+  font-size: 12px;
+  color: var(--color-teal);
+  cursor: pointer;
+  text-decoration: none;
+}
+
+swp-card-action:hover {
+  text-decoration: underline;
+}
+
+swp-section-label {
+  display: block;
+  font-size: 11px;
+  font-weight: 600;
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 12px;
+}
+
+/* ==========================================
+   STATS BAR
+   ========================================== */
+swp-stats-bar {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+  gap: 16px;
+  margin-bottom: 24px;
+}
+
+swp-stat-card {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  padding: 16px 20px;
+  background: var(--color-surface);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+swp-stat-card swp-stat-value {
+  font-size: 28px;
+  font-weight: 700;
+  font-family: var(--font-mono);
+  color: var(--color-text);
+}
+
+swp-stat-card swp-stat-label {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+swp-stat-card swp-stat-trend {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 11px;
+  margin-top: 4px;
+}
+
+swp-stat-card swp-stat-trend.up {
+  color: var(--color-green);
+}
+
+swp-stat-card swp-stat-trend.down {
+  color: var(--color-red);
+}
+
+swp-stat-card.highlight swp-stat-value {
+  color: var(--color-teal);
+}
+
+swp-stat-card.success swp-stat-value {
+  color: var(--color-green);
+}
+
+swp-stat-card.warning swp-stat-value {
+  color: var(--color-amber);
+}
+
+/* ==========================================
+   AI INSIGHT
+   ========================================== */
+swp-ai-insight {
+  display: block;
+  padding: 16px;
+  background: linear-gradient(135deg, color-mix(in srgb, var(--color-purple) 8%, transparent), color-mix(in srgb, var(--color-teal) 8%, transparent));
+  border: 1px solid color-mix(in srgb, var(--color-purple) 20%, transparent);
+  border-radius: 8px;
+}
+
+swp-ai-header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 10px;
+}
+
+swp-ai-header i {
+  font-size: 20px;
+  color: var(--color-purple);
+}
+
+swp-ai-header span {
+  font-size: 12px;
+  font-weight: 600;
+  color: var(--color-purple);
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+}
+
+swp-ai-text {
+  display: block;
+  font-size: 14px;
+  line-height: 1.6;
+  color: var(--color-text);
+}
+
+swp-ai-text strong {
+  color: var(--color-purple);
+}
+
+/* ==========================================
+   OCCUPANCY BAR
+   ========================================== */
+swp-occupancy-bar {
+  display: block;
+  margin-top: 16px;
+}
+
+swp-occupancy-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+  margin-bottom: 8px;
+}
+
+swp-occupancy-label {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+swp-occupancy-value {
+  font-size: 14px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  color: var(--color-text);
+}
+
+swp-occupancy-track {
+  height: 8px;
+  background: var(--color-border);
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+swp-occupancy-fill {
+  display: block;
+  height: 100%;
+  background: var(--color-teal);
+  border-radius: 4px;
+  transition: width 500ms ease;
+}
+
+swp-occupancy-fill.high {
+  background: var(--color-green);
+}
+
+swp-occupancy-fill.medium {
+  background: var(--color-amber);
+}
+
+swp-occupancy-fill.low {
+  background: var(--color-red);
+}
+
+/* ==========================================
+   TIMELINE / BOOKINGS
+   ========================================== */
+swp-booking-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+swp-booking-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 12px;
+  background: var(--color-background-alt);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+swp-booking-item:hover {
+  background: var(--color-background-hover);
+}
+
+swp-booking-time {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  min-width: 50px;
+}
+
+swp-booking-time swp-time-start {
+  font-size: 14px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  color: var(--color-text);
+}
+
+swp-booking-time swp-time-end {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+  font-family: var(--font-mono);
+}
+
+swp-booking-indicator {
+  width: 4px;
+  height: 40px;
+  border-radius: 2px;
+  flex-shrink: 0;
+}
+
+swp-booking-indicator.teal { background: var(--color-teal); }
+swp-booking-indicator.blue { background: var(--color-blue); }
+swp-booking-indicator.purple { background: var(--color-purple); }
+swp-booking-indicator.amber { background: var(--color-amber); }
+swp-booking-indicator.green { background: var(--color-green); }
+
+swp-booking-details {
+  flex: 1;
+  min-width: 0;
+}
+
+swp-booking-service {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+swp-booking-customer {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+swp-booking-employee {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+
+swp-booking-employee swp-avatar-small {
+  width: 24px;
+  height: 24px;
+  border-radius: 50%;
+  background: var(--color-teal);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 10px;
+  font-weight: 600;
+}
+
+swp-booking-employee span {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+swp-booking-status {
+  padding: 4px 8px;
+  border-radius: 4px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+swp-booking-status.confirmed {
+  background: color-mix(in srgb, var(--color-green) 15%, transparent);
+  color: var(--color-green);
+}
+
+swp-booking-status.pending {
+  background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+  color: var(--color-amber);
+}
+
+swp-booking-status.inprogress {
+  background: color-mix(in srgb, var(--color-blue) 15%, transparent);
+  color: var(--color-blue);
+}
+
+swp-booking-status.completed {
+  background: var(--color-background-hover);
+  color: var(--color-text-secondary);
+}
+
+swp-booking-item.completed {
+  opacity: 0.6;
+}
+
+swp-booking-item.completed swp-booking-indicator {
+  background: var(--color-border);
+}
+
+/* ==========================================
+   ATTENTION LIST
+   ========================================== */
+swp-attention-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+swp-attention-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px;
+  background: var(--color-background-alt);
+  border-radius: 6px;
+  border-left: 3px solid var(--color-border);
+}
+
+swp-attention-item.urgent {
+  border-left-color: var(--color-red);
+  background: color-mix(in srgb, var(--color-red) 5%, var(--color-background-alt));
+}
+
+swp-attention-item.warning {
+  border-left-color: var(--color-amber);
+  background: color-mix(in srgb, var(--color-amber) 5%, var(--color-background-alt));
+}
+
+swp-attention-item.info {
+  border-left-color: var(--color-blue);
+}
+
+swp-attention-icon {
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+swp-attention-item.urgent swp-attention-icon {
+  background: color-mix(in srgb, var(--color-red) 15%, transparent);
+  color: var(--color-red);
+}
+
+swp-attention-item.warning swp-attention-icon {
+  background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+  color: var(--color-amber);
+}
+
+swp-attention-item.info swp-attention-icon {
+  background: color-mix(in srgb, var(--color-blue) 15%, transparent);
+  color: var(--color-blue);
+}
+
+swp-attention-icon i {
+  font-size: 16px;
+}
+
+swp-attention-content {
+  flex: 1;
+}
+
+swp-attention-title {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text);
+  margin-bottom: 2px;
+}
+
+swp-attention-desc {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+swp-attention-action {
+  font-size: 12px;
+  color: var(--color-teal);
+  cursor: pointer;
+  white-space: nowrap;
+}
+
+swp-attention-action:hover {
+  text-decoration: underline;
+}
+
+/* ==========================================
+   EMPLOYEE STATUS
+   ========================================== */
+swp-employee-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+swp-employee-status-item {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 10px 12px;
+  background: var(--color-background-alt);
+  border-radius: 6px;
+}
+
+swp-employee-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--color-teal);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+swp-employee-info {
+  flex: 1;
+  min-width: 0;
+}
+
+swp-employee-name {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+swp-employee-current {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+swp-employee-status-badge {
+  padding: 4px 10px;
+  border-radius: 12px;
+  font-size: 11px;
+  font-weight: 500;
+}
+
+swp-employee-status-badge.busy {
+  background: color-mix(in srgb, var(--color-teal) 15%, transparent);
+  color: var(--color-teal);
+}
+
+swp-employee-status-badge.available {
+  background: color-mix(in srgb, var(--color-green) 15%, transparent);
+  color: var(--color-green);
+}
+
+swp-employee-status-badge.away {
+  background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+  color: var(--color-amber);
+}
+
+swp-employee-status-badge.off {
+  background: var(--color-background-hover);
+  color: var(--color-text-secondary);
+}
+
+/* ==========================================
+   QUICK STATS MINI
+   ========================================== */
+swp-quick-stats {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 12px;
+}
+
+swp-quick-stat {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 12px;
+  background: var(--color-background-alt);
+  border-radius: 6px;
+}
+
+swp-quick-stat swp-stat-value {
+  font-size: 20px;
+  font-weight: 600;
+  font-family: var(--font-mono);
+  color: var(--color-text);
+}
+
+swp-quick-stat swp-stat-label {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+
+/* ==========================================
+   NOTIFICATIONS
+   ========================================== */
+swp-notification-list {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+swp-notification-item {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding: 10px 12px;
+  background: var(--color-background-alt);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: background 150ms ease;
+}
+
+swp-notification-item:hover {
+  background: var(--color-background-hover);
+}
+
+swp-notification-item.unread {
+  background: color-mix(in srgb, var(--color-teal) 5%, var(--color-background-alt));
+}
+
+swp-notification-icon {
+  width: 28px;
+  height: 28px;
+  border-radius: 50%;
+  background: var(--color-background-hover);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--color-text-secondary);
+}
+
+swp-notification-icon i {
+  font-size: 14px;
+}
+
+swp-notification-content {
+  flex: 1;
+  min-width: 0;
+}
+
+swp-notification-text {
+  font-size: 13px;
+  color: var(--color-text);
+  line-height: 1.4;
+}
+
+swp-notification-text strong {
+  font-weight: 600;
+}
+
+swp-notification-time {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+  margin-top: 2px;
+}
+
+swp-notification-item.unread swp-notification-icon {
+  background: color-mix(in srgb, var(--color-teal) 15%, transparent);
+  color: var(--color-teal);
+}
+
+/* ==========================================
+   TIME INDICATOR
+   ========================================== */
+swp-current-time {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 8px 12px;
+  background: color-mix(in srgb, var(--color-teal) 10%, transparent);
+  border-radius: 6px;
+  margin-bottom: 12px;
+}
+
+swp-current-time i {
+  font-size: 16px;
+  color: var(--color-teal);
+}
+
+swp-current-time span {
+  font-size: 13px;
+  color: var(--color-teal);
+  font-weight: 500;
+}
+
+swp-current-time swp-time {
+  font-family: var(--font-mono);
+  font-weight: 600;
+}
+
+/* ==========================================
+   PAGE HEADER (for content modules)
+   ========================================== */
+swp-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+swp-page-header swp-page-title {
+  font-size: 18px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+swp-page-header swp-page-actions {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+swp-date-display {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--color-text-secondary);
+}
+
+swp-date-display i {
+  font-size: 18px;
+}
+
+/* ==========================================
+   RESPONSIVE
+   ========================================== */
+@media (max-width: 1100px) {
+  swp-dashboard-grid {
+    grid-template-columns: 1fr;
+  }
+
+  swp-stats-bar {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+@media (max-width: 600px) {
+  swp-stats-bar {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* ==========================================
+   WAITLIST MINI CARD
+   ========================================== */
+swp-waitlist-card {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  padding: 16px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  cursor: pointer;
+  transition: all 0.15s ease;
+}
+
+swp-waitlist-card:hover {
+  border-color: var(--color-teal);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+}
+
+swp-waitlist-icon {
+  position: relative;
+  font-size: 24px;
+  color: var(--color-text-secondary);
+}
+
+swp-waitlist-badge {
+  position: absolute;
+  top: -8px;
+  right: -8px;
+  min-width: 20px;
+  height: 20px;
+  padding: 0 6px;
+  background: var(--color-teal);
+  color: white;
+  font-size: 11px;
+  font-weight: 600;
+  border-radius: 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+swp-waitlist-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+/* ==========================================
+   WAITLIST DRAWER
+   ========================================== */
+swp-drawer-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.3);
+  opacity: 0;
+  visibility: hidden;
+  transition: all 0.3s ease;
+  z-index: 999;
+}
+
+swp-drawer-overlay.visible {
+  opacity: 1;
+  visibility: visible;
+}
+
+swp-waitlist-drawer {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 420px;
+  height: 100vh;
+  background: var(--color-surface);
+  border-left: 1px solid var(--color-border);
+  box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
+  transform: translateX(100%);
+  transition: transform 0.3s ease;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+}
+
+swp-waitlist-drawer.open {
+  transform: translateX(0);
+}
+
+swp-drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-drawer-title {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text);
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+swp-drawer-title swp-count {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+
+swp-drawer-close {
+  width: 32px;
+  height: 32px;
+  border-radius: 6px;
+  background: var(--color-background-alt);
+  border: none;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-secondary);
+  transition: all 0.15s ease;
+}
+
+swp-drawer-close:hover {
+  background: var(--color-background-hover);
+  color: var(--color-text);
+}
+
+swp-drawer-close i {
+  font-size: 18px;
+}
+
+swp-drawer-body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 16px;
+}
+
+swp-waitlist-list {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+swp-waitlist-item {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+  background: var(--color-background-alt);
+  border-radius: 8px;
+  border: 1px solid var(--color-border);
+}
+
+swp-waitlist-customer {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+swp-waitlist-customer swp-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--color-teal);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+swp-waitlist-customer-info {
+  flex: 1;
+}
+
+swp-waitlist-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+swp-waitlist-phone {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+swp-waitlist-service {
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-teal);
+  padding: 6px 10px;
+  background: color-mix(in srgb, var(--color-teal) 10%, transparent);
+  border-radius: 4px;
+  display: inline-block;
+}
+
+swp-waitlist-meta {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+swp-waitlist-periods {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+swp-waitlist-periods swp-label {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+swp-waitlist-period-tag {
+  font-size: 11px;
+  padding: 3px 8px;
+  background: var(--color-background);
+  border-radius: 4px;
+  color: var(--color-text);
+}
+
+swp-waitlist-dates {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+}
+
+swp-waitlist-date {
+  font-size: 11px;
+  color: var(--color-text-secondary);
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+swp-waitlist-date i {
+  font-size: 12px;
+}
+
+swp-waitlist-date.expires {
+  color: var(--color-text-secondary);
+}
+
+swp-waitlist-date.expires.soon {
+  color: var(--color-amber);
+  font-weight: 500;
+}
+
+swp-waitlist-actions {
+  display: flex;
+  gap: 8px;
+  padding-top: 8px;
+  border-top: 1px solid var(--color-border);
+}
+
+swp-waitlist-actions swp-btn {
+  flex: 1;
+  justify-content: center;
+  padding: 8px 12px;
+  font-size: 12px;
+}
+
+swp-waitlist-empty {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+}
+
+swp-waitlist-empty i {
+  font-size: 48px;
+  color: var(--color-border);
+  margin-bottom: 16px;
+}
+
+swp-waitlist-empty span {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+}
diff --git a/.workbench/POC/css/indstillinger.css b/.workbench/POC/css/indstillinger.css
new file mode 100644
index 0000000..31bec2a
--- /dev/null
+++ b/.workbench/POC/css/indstillinger.css
@@ -0,0 +1,576 @@
+/* ==========================================
+   INDSTILLINGER (SETTINGS) STYLES
+   ========================================== */
+
+/* ==========================================
+   PAGE LAYOUT
+   ========================================== */
+swp-page-container {
+  display: block;
+  max-width: 900px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+swp-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 32px;
+}
+
+swp-page-title {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+swp-page-title h1 {
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+}
+
+swp-page-title p {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+/* ==========================================
+   SETTINGS SECTIONS
+   ========================================== */
+swp-settings-section {
+  display: block;
+  background: var(--color-surface);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  margin-bottom: 24px;
+}
+
+swp-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 20px 24px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-section-title {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+swp-section-title i {
+  font-size: 22px;
+  color: var(--color-teal);
+}
+
+swp-section-title h2 {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+}
+
+swp-section-content {
+  display: block;
+  padding: 24px;
+}
+
+swp-section-footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 24px;
+  border-top: 1px solid var(--color-border);
+  background: var(--color-background-alt);
+  border-radius: 0 0 8px 8px;
+}
+
+/* ==========================================
+   FORM ELEMENTS
+   ========================================== */
+swp-form-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: 20px;
+}
+
+swp-form-grid.single-column {
+  grid-template-columns: 1fr;
+}
+
+swp-form-row {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+swp-form-row.full-width {
+  grid-column: 1 / -1;
+}
+
+swp-form-label {
+  display: block;
+  font-size: 13px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+swp-form-label span.optional {
+  font-weight: 400;
+  color: var(--color-text-secondary);
+  margin-left: 4px;
+}
+
+swp-form-input {
+  display: block;
+  width: 100%;
+  padding: 10px 14px;
+  font-size: 14px;
+  font-family: var(--font-family);
+  color: var(--color-text);
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  transition: all 150ms ease;
+}
+
+swp-form-input:focus {
+  outline: none;
+  border-color: var(--color-teal);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent);
+}
+
+swp-form-input::placeholder {
+  color: var(--color-text-secondary);
+}
+
+swp-form-input[type="time"] {
+  padding: 8px 14px;
+}
+
+swp-form-textarea {
+  display: block;
+  width: 100%;
+  padding: 10px 14px;
+  font-size: 14px;
+  font-family: var(--font-family);
+  color: var(--color-text);
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  resize: vertical;
+  min-height: 80px;
+  transition: all 150ms ease;
+}
+
+swp-form-textarea:focus {
+  outline: none;
+  border-color: var(--color-teal);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent);
+}
+
+swp-form-select {
+  display: block;
+  width: 100%;
+  padding: 10px 14px;
+  font-size: 14px;
+  font-family: var(--font-family);
+  color: var(--color-text);
+  background: var(--color-background);
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 150ms ease;
+  appearance: none;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%23666' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80A8 8 0 0 1 48 88h160a8 8 0 0 1 5.66 13.66z'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: right 12px center;
+  padding-right: 40px;
+}
+
+swp-form-select:focus {
+  outline: none;
+  border-color: var(--color-teal);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent);
+}
+
+swp-form-hint {
+  display: block;
+  font-size: 12px;
+  color: var(--color-text-secondary);
+  margin-top: 4px;
+}
+
+/* ==========================================
+   TOGGLE SWITCH
+   ========================================== */
+swp-toggle-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-toggle-row:last-child {
+  border-bottom: none;
+}
+
+swp-toggle-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+swp-toggle-label {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+swp-toggle-desc {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+swp-toggle {
+  position: relative;
+  width: 44px;
+  height: 24px;
+  background: var(--color-border);
+  border-radius: 12px;
+  cursor: pointer;
+  transition: background 200ms ease;
+  flex-shrink: 0;
+}
+
+swp-toggle.active {
+  background: var(--color-teal);
+}
+
+swp-toggle-knob {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: white;
+  border-radius: 50%;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
+  transition: transform 200ms ease;
+}
+
+swp-toggle.active swp-toggle-knob {
+  transform: translateX(20px);
+}
+
+/* ==========================================
+   OPENING HOURS TABLE
+   ========================================== */
+swp-hours-table {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+
+swp-hours-row {
+  display: grid;
+  grid-template-columns: 100px 80px 1fr 1fr auto;
+  gap: 16px;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-hours-row:last-child {
+  border-bottom: none;
+}
+
+swp-hours-day {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+swp-hours-status {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+swp-hours-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 4px;
+  background: color-mix(in srgb, var(--color-green) 15%, transparent);
+  color: var(--color-green);
+}
+
+swp-hours-badge.closed {
+  background: var(--color-background);
+  color: var(--color-text-secondary);
+}
+
+swp-hours-time {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+swp-hours-time span {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+swp-hours-time swp-form-input {
+  width: 100px;
+  padding: 8px 12px;
+  font-size: 13px;
+  text-align: center;
+}
+
+swp-hours-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+/* ==========================================
+   LOGO UPLOAD
+   ========================================== */
+swp-logo-upload {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+}
+
+swp-logo-preview {
+  width: 80px;
+  height: 80px;
+  background: var(--color-background);
+  border: 2px dashed var(--color-border);
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+}
+
+swp-logo-preview.has-logo {
+  border-style: solid;
+}
+
+swp-logo-preview img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+swp-logo-preview i {
+  font-size: 32px;
+  color: var(--color-text-secondary);
+  opacity: 0.5;
+}
+
+swp-logo-actions {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+swp-logo-actions swp-btn {
+  justify-content: center;
+}
+
+/* ==========================================
+   URL FIELD WITH COPY
+   ========================================== */
+swp-url-field {
+  display: flex;
+  align-items: stretch;
+  border: 1px solid var(--color-border);
+  border-radius: 6px;
+  overflow: hidden;
+  background: var(--color-background);
+}
+
+swp-url-field swp-form-input {
+  border: none;
+  border-radius: 0;
+  background: transparent;
+}
+
+swp-url-field swp-form-input:focus {
+  box-shadow: none;
+}
+
+swp-url-copy {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 14px;
+  background: var(--color-surface);
+  border-left: 1px solid var(--color-border);
+  cursor: pointer;
+  transition: all 150ms ease;
+  color: var(--color-text-secondary);
+}
+
+swp-url-copy:hover {
+  background: var(--color-background-hover);
+  color: var(--color-teal);
+}
+
+swp-url-copy i {
+  font-size: 18px;
+}
+
+/* ==========================================
+   BUTTONS
+   ========================================== */
+swp-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--font-family);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 150ms ease;
+  border: none;
+}
+
+swp-btn i {
+  font-size: 18px;
+}
+
+swp-btn.primary {
+  background: var(--color-teal);
+  color: white;
+}
+
+swp-btn.primary:hover {
+  background: #00796b;
+}
+
+swp-btn.secondary {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+swp-btn.secondary:hover {
+  background: var(--color-background-hover);
+}
+
+swp-btn.small {
+  padding: 6px 12px;
+  font-size: 12px;
+}
+
+swp-btn.small i {
+  font-size: 16px;
+}
+
+swp-btn.danger {
+  background: transparent;
+  border: 1px solid var(--color-border);
+  color: var(--color-text-secondary);
+}
+
+swp-btn.danger:hover {
+  background: color-mix(in srgb, var(--color-red) 10%, transparent);
+  border-color: var(--color-red);
+  color: var(--color-red);
+}
+
+/* ==========================================
+   ICON BUTTON
+   ========================================== */
+swp-icon-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  transition: all 150ms ease;
+}
+
+swp-icon-btn:hover {
+  background: var(--color-background-hover);
+  color: var(--color-text);
+}
+
+swp-icon-btn i {
+  font-size: 18px;
+}
+
+/* ==========================================
+   INFO BOX
+   ========================================== */
+swp-info-box {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 14px 16px;
+  background: color-mix(in srgb, var(--color-blue) 8%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-blue) 20%, transparent);
+  border-radius: 6px;
+  margin-bottom: 20px;
+}
+
+swp-info-box i {
+  font-size: 20px;
+  color: var(--color-blue);
+  flex-shrink: 0;
+  margin-top: 1px;
+}
+
+swp-info-box p {
+  font-size: 13px;
+  color: var(--color-text);
+  margin: 0;
+  line-height: 1.5;
+}
+
+/* ==========================================
+   RESPONSIVE
+   ========================================== */
+@media (max-width: 768px) {
+  swp-page-container {
+    padding: 16px;
+  }
+
+  swp-form-grid {
+    grid-template-columns: 1fr;
+  }
+
+  swp-hours-row {
+    grid-template-columns: 1fr;
+    gap: 12px;
+  }
+
+  swp-hours-time {
+    flex-wrap: wrap;
+  }
+
+  swp-section-header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 12px;
+  }
+}
diff --git a/.workbench/POC/css/konto.css b/.workbench/POC/css/konto.css
new file mode 100644
index 0000000..69fd7d7
--- /dev/null
+++ b/.workbench/POC/css/konto.css
@@ -0,0 +1,684 @@
+/* ==========================================
+   KONTO & ABONNEMENT STYLES
+   ========================================== */
+
+/* ==========================================
+   PAGE LAYOUT
+   ========================================== */
+swp-page-container {
+  display: block;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+swp-page-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 24px;
+}
+
+swp-page-title {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+swp-page-title h1 {
+  font-size: 22px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin: 0;
+}
+
+swp-page-title p {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  margin: 0;
+}
+
+/* ==========================================
+   SECTIONS
+   ========================================== */
+swp-section {
+  display: block;
+  margin-bottom: 32px;
+}
+
+swp-section-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+swp-section-title {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+swp-section-title i {
+  font-size: 22px;
+  color: var(--color-teal);
+}
+
+/* ==========================================
+   PLAN CARDS
+   ========================================== */
+swp-plan-grid {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 20px;
+}
+
+swp-plan-card {
+  display: flex;
+  flex-direction: column;
+  background: var(--color-surface);
+  border: 2px solid var(--color-border);
+  border-radius: 12px;
+  padding: 24px;
+  transition: all 200ms ease;
+}
+
+swp-plan-card.current {
+  border-color: var(--color-teal);
+  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-teal) 15%, transparent);
+}
+
+swp-plan-card.enterprise {
+  background: linear-gradient(135deg, var(--color-surface) 0%, color-mix(in srgb, var(--color-purple) 5%, var(--color-surface)) 100%);
+  border-color: var(--color-purple);
+}
+
+swp-plan-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-radius: 20px;
+  width: fit-content;
+  margin-bottom: 12px;
+}
+
+swp-plan-badge.current {
+  background: color-mix(in srgb, var(--color-teal) 15%, transparent);
+  color: var(--color-teal);
+}
+
+swp-plan-badge.popular {
+  background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+  color: var(--color-amber);
+}
+
+swp-plan-name {
+  font-size: 20px;
+  font-weight: 700;
+  color: var(--color-text);
+  margin-bottom: 4px;
+}
+
+swp-plan-users {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  margin-bottom: 16px;
+}
+
+swp-plan-price {
+  display: flex;
+  align-items: baseline;
+  gap: 4px;
+  margin-bottom: 20px;
+}
+
+swp-plan-price-amount {
+  font-size: 36px;
+  font-weight: 700;
+  color: var(--color-text);
+}
+
+swp-plan-price-period {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+}
+
+swp-plan-features {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  flex: 1;
+  margin-bottom: 20px;
+}
+
+swp-plan-feature {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  font-size: 13px;
+  color: var(--color-text);
+}
+
+swp-plan-feature i {
+  font-size: 18px;
+  color: var(--color-green);
+}
+
+swp-plan-action {
+  margin-top: auto;
+}
+
+swp-plan-action swp-btn {
+  width: 100%;
+  justify-content: center;
+}
+
+swp-plan-card.current swp-btn.secondary {
+  background: var(--color-background-alt);
+  color: var(--color-text-secondary);
+  cursor: default;
+}
+
+/* ==========================================
+   USERS TABLE
+   ========================================== */
+swp-users-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 16px;
+}
+
+swp-users-count {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 14px;
+  color: var(--color-text-secondary);
+}
+
+swp-users-count strong {
+  color: var(--color-text);
+  font-weight: 600;
+}
+
+swp-users-progress {
+  width: 100px;
+  height: 6px;
+  background: var(--color-border);
+  border-radius: 3px;
+  overflow: hidden;
+}
+
+swp-users-progress-bar {
+  height: 100%;
+  background: var(--color-teal);
+  border-radius: 3px;
+  transition: width 300ms ease;
+}
+
+swp-users-progress-bar.warning {
+  background: var(--color-amber);
+}
+
+swp-users-progress-bar.full {
+  background: var(--color-red);
+}
+
+swp-table-card {
+  display: block;
+  background: var(--color-surface);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  overflow: hidden;
+}
+
+swp-table {
+  display: table;
+  width: 100%;
+  border-collapse: collapse;
+}
+
+swp-table-header {
+  display: table-header-group;
+  background: var(--color-background-alt);
+}
+
+swp-table-body {
+  display: table-row-group;
+}
+
+swp-table-row {
+  display: table-row;
+  transition: background 150ms ease;
+}
+
+swp-table-body swp-table-row:hover {
+  background: var(--color-background-hover);
+}
+
+swp-table-cell {
+  display: table-cell;
+  padding: 14px 16px;
+  font-size: 13px;
+  color: var(--color-text);
+  border-bottom: 1px solid var(--color-border);
+  vertical-align: middle;
+}
+
+swp-table-header swp-table-cell {
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  color: var(--color-text-secondary);
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-table-cell:first-child {
+  padding-left: 20px;
+}
+
+swp-table-cell:last-child {
+  padding-right: 20px;
+}
+
+/* User row specific */
+swp-user-info {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+
+swp-user-avatar {
+  width: 36px;
+  height: 36px;
+  border-radius: 50%;
+  background: var(--color-teal);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+swp-user-avatar.purple { background: var(--color-purple); }
+swp-user-avatar.blue { background: var(--color-blue); }
+swp-user-avatar.amber { background: var(--color-amber); }
+
+swp-user-details {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+swp-user-name {
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+swp-user-email {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+swp-role-badge {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 4px;
+  background: var(--color-background);
+  color: var(--color-text-secondary);
+}
+
+swp-role-badge.admin {
+  background: color-mix(in srgb, var(--color-purple) 15%, transparent);
+  color: var(--color-purple);
+}
+
+swp-role-badge.owner {
+  background: color-mix(in srgb, var(--color-teal) 15%, transparent);
+  color: var(--color-teal);
+}
+
+swp-status-badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 4px;
+}
+
+swp-status-badge.active {
+  background: color-mix(in srgb, var(--color-green) 15%, transparent);
+  color: var(--color-green);
+}
+
+swp-status-badge.invited {
+  background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+  color: var(--color-amber);
+}
+
+swp-status-badge.inactive {
+  background: var(--color-background);
+  color: var(--color-text-secondary);
+}
+
+swp-status-dot {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+swp-table-actions {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+swp-icon-btn {
+  width: 32px;
+  height: 32px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: none;
+  background: transparent;
+  border-radius: 6px;
+  cursor: pointer;
+  color: var(--color-text-secondary);
+  transition: all 150ms ease;
+}
+
+swp-icon-btn:hover {
+  background: var(--color-background-hover);
+  color: var(--color-text);
+}
+
+swp-icon-btn.danger:hover {
+  background: color-mix(in srgb, var(--color-red) 15%, transparent);
+  color: var(--color-red);
+}
+
+swp-icon-btn i {
+  font-size: 18px;
+}
+
+/* ==========================================
+   BILLING GRID
+   ========================================== */
+swp-billing-grid {
+  display: grid;
+  grid-template-columns: 380px 1fr;
+  gap: 24px;
+}
+
+/* ==========================================
+   PAYMENT CARD
+   ========================================== */
+swp-payment-card {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  background: var(--color-surface);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+  padding: 24px;
+}
+
+swp-payment-method {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+  background: var(--color-background-alt);
+  border-radius: 8px;
+}
+
+swp-payment-icon {
+  width: 48px;
+  height: 32px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+swp-payment-icon i {
+  font-size: 24px;
+  color: var(--color-blue);
+}
+
+swp-payment-info {
+  flex: 1;
+}
+
+swp-payment-type {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+  margin-bottom: 2px;
+}
+
+swp-payment-number {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+  font-family: var(--font-mono);
+}
+
+swp-payment-detail {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-payment-detail:last-of-type {
+  border-bottom: none;
+}
+
+swp-payment-label {
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+swp-payment-value {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-text);
+}
+
+swp-payment-value.highlight {
+  color: var(--color-teal);
+}
+
+/* ==========================================
+   INVOICES
+   ========================================== */
+swp-invoices-card {
+  display: block;
+  background: var(--color-surface);
+  border-radius: 8px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+}
+
+swp-invoices-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--color-border);
+}
+
+swp-invoices-title {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+swp-invoice-status {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 4px 10px;
+  font-size: 12px;
+  font-weight: 500;
+  border-radius: 4px;
+}
+
+swp-invoice-status.paid {
+  background: color-mix(in srgb, var(--color-green) 15%, transparent);
+  color: var(--color-green);
+}
+
+swp-invoice-status.pending {
+  background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+  color: var(--color-amber);
+}
+
+swp-invoice-status.overdue {
+  background: color-mix(in srgb, var(--color-red) 15%, transparent);
+  color: var(--color-red);
+}
+
+swp-download-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 12px;
+  font-size: 12px;
+  font-weight: 500;
+  color: var(--color-teal);
+  background: transparent;
+  border: 1px solid var(--color-teal);
+  border-radius: 4px;
+  cursor: pointer;
+  transition: all 150ms ease;
+}
+
+swp-download-btn:hover {
+  background: color-mix(in srgb, var(--color-teal) 10%, transparent);
+}
+
+swp-download-btn i {
+  font-size: 14px;
+}
+
+/* ==========================================
+   BUTTONS
+   ========================================== */
+swp-btn {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 18px;
+  font-size: 13px;
+  font-weight: 500;
+  font-family: var(--font-family);
+  border-radius: 6px;
+  cursor: pointer;
+  transition: all 150ms ease;
+  border: none;
+}
+
+swp-btn i {
+  font-size: 18px;
+}
+
+swp-btn.primary {
+  background: var(--color-teal);
+  color: white;
+}
+
+swp-btn.primary:hover {
+  background: #00796b;
+}
+
+swp-btn.secondary {
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  color: var(--color-text);
+}
+
+swp-btn.secondary:hover {
+  background: var(--color-background-hover);
+}
+
+swp-btn.outline {
+  background: transparent;
+  border: 1px solid var(--color-teal);
+  color: var(--color-teal);
+}
+
+swp-btn.outline:hover {
+  background: color-mix(in srgb, var(--color-teal) 10%, transparent);
+}
+
+/* ==========================================
+   EMPTY STATE
+   ========================================== */
+swp-empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding: 48px 24px;
+  text-align: center;
+}
+
+swp-empty-state i {
+  font-size: 48px;
+  color: var(--color-text-secondary);
+  margin-bottom: 16px;
+  opacity: 0.5;
+}
+
+swp-empty-state p {
+  font-size: 14px;
+  color: var(--color-text-secondary);
+}
+
+/* ==========================================
+   RESPONSIVE
+   ========================================== */
+@media (max-width: 1024px) {
+  swp-plan-grid {
+    grid-template-columns: 1fr;
+  }
+
+  swp-billing-grid {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media (max-width: 768px) {
+  swp-page-container {
+    padding: 16px;
+  }
+
+  swp-table-card {
+    overflow-x: auto;
+  }
+
+  swp-table {
+    min-width: 600px;
+  }
+}
diff --git a/.workbench/POC/data/calendar-config.json b/.workbench/POC/data/calendar-config.json
new file mode 100644
index 0000000..ec3fdd8
--- /dev/null
+++ b/.workbench/POC/data/calendar-config.json
@@ -0,0 +1,88 @@
+{
+  "gridSettings": {
+    "hourHeight": 80,
+    "dayStartHour": 6,
+    "dayEndHour": 22,
+    "workStartHour": 8,
+    "workEndHour": 17,
+    "snapInterval": 15,
+    "gridStartThresholdMinutes": 30,
+    "showCurrentTime": true,
+    "showWorkHours": true,
+    "fitToWidth": false,
+    "scrollToHour": 8
+  },
+  "dateViewSettings": {
+    "period": "week",
+    "weekDays": 7,
+    "firstDayOfWeek": 1,
+    "showAllDay": true
+  },
+  "timeFormatConfig": {
+    "timezone": "Europe/Copenhagen",
+    "use24HourFormat": true,
+    "locale": "da-DK",
+    "dateFormat": "technical",
+    "showSeconds": false
+  },
+  "workWeekPresets": {
+    "standard": {
+      "id": "standard",
+      "workDays": [1, 2, 3, 4, 5],
+      "totalDays": 5,
+      "firstWorkDay": 1
+    },
+    "compressed": {
+      "id": "compressed",
+      "workDays": [1, 2, 3, 4],
+      "totalDays": 4,
+      "firstWorkDay": 1
+    },
+    "midweek": {
+      "id": "midweek",
+      "workDays": [3, 4, 5],
+      "totalDays": 3,
+      "firstWorkDay": 3
+    },
+    "weekend": {
+      "id": "weekend",
+      "workDays": [6, 7],
+      "totalDays": 2,
+      "firstWorkDay": 6
+    },
+    "fullweek": {
+      "id": "fullweek",
+      "workDays": [1, 2, 3, 4, 5, 6, 7],
+      "totalDays": 7,
+      "firstWorkDay": 1
+    }
+  },
+  "currentWorkWeek": "standard",
+  "currentView": "week",
+  "scrollbar": {
+    "width": 16,
+    "color": "#666",
+    "trackColor": "#f0f0f0",
+    "hoverColor": "#b53f7aff",
+    "borderRadius": 6
+  },
+  "interaction": {
+    "allowDrag": true,
+    "allowResize": true,
+    "allowCreate": true
+  },
+  "api": {
+    "endpoint": "/api/events",
+    "dateFormat": "YYYY-MM-DD",
+    "timeFormat": "HH:mm"
+  },
+  "features": {
+    "enableSearch": true,
+    "enableTouch": true
+  },
+  "eventDefaults": {
+    "defaultEventDuration": 60,
+    "minEventDuration": 15,
+    "maxEventDuration": 480
+  }
+}
diff --git a/.workbench/POC/data/employee-revenue-utilization.json b/.workbench/POC/data/employee-revenue-utilization.json
new file mode 100644
index 0000000..02746a0
--- /dev/null
+++ b/.workbench/POC/data/employee-revenue-utilization.json
@@ -0,0 +1,67 @@
+{
+  "categories": ["Uge 40", "Uge 41", "Uge 42", "Uge 43", "Uge 44", "Uge 45", "Uge 46", "Uge 47", "Uge 48", "Uge 49", "Uge 50", "Uge 51", "Uge 52", "Uge 1", "Uge 2", "Uge 3", "Uge 4", "Uge 5", "Uge 6", "Uge 7", "Uge 8", "Uge 9", "Uge 10", "Uge 11", "Uge 12"],
+  "nowCategory": "Uge 52",
+  "forecastStartCategory": "Uge 1",
+  "actual": {
+    "revenue": [
+      { "x": "Uge 40", "y": 38500 },
+      { "x": "Uge 41", "y": 42000 },
+      { "x": "Uge 42", "y": 35200 },
+      { "x": "Uge 43", "y": 44800 },
+      { "x": "Uge 44", "y": 41500 },
+      { "x": "Uge 45", "y": 39200 },
+      { "x": "Uge 46", "y": 46100 },
+      { "x": "Uge 47", "y": 43800 },
+      { "x": "Uge 48", "y": 40500 },
+      { "x": "Uge 49", "y": 45200 },
+      { "x": "Uge 50", "y": 42800 },
+      { "x": "Uge 51", "y": 44500 },
+      { "x": "Uge 52", "y": 28450 }
+    ],
+    "utilization": [
+      { "x": "Uge 40", "y": 82 },
+      { "x": "Uge 41", "y": 88 },
+      { "x": "Uge 42", "y": 75 },
+      { "x": "Uge 43", "y": 91 },
+      { "x": "Uge 44", "y": 85 },
+      { "x": "Uge 45", "y": 80 },
+      { "x": "Uge 46", "y": 94 },
+      { "x": "Uge 47", "y": 89 },
+      { "x": "Uge 48", "y": 83 },
+      { "x": "Uge 49", "y": 92 },
+      { "x": "Uge 50", "y": 87 },
+      { "x": "Uge 51", "y": 90 },
+      { "x": "Uge 52", "y": 84 }
+    ]
+  },
+  "forecast": {
+    "revenue": [
+      { "x": "Uge 1", "y": 0 },
+      { "x": "Uge 2", "y": 32500 },
+      { "x": "Uge 3", "y": 28800 },
+      { "x": "Uge 4", "y": 22400 },
+      { "x": "Uge 5", "y": 15200 },
+      { "x": "Uge 6", "y": 9800 },
+      { "x": "Uge 7", "y": 6500 },
+      { "x": "Uge 8", "y": 4200 },
+      { "x": "Uge 9", "y": 2800 },
+      { "x": "Uge 10", "y": 1500 },
+      { "x": "Uge 11", "y": 800 },
+      { "x": "Uge 12", "y": 0 }
+    ],
+    "utilization": [
+      { "x": "Uge 1", "y": 0 },
+      { "x": "Uge 2", "y": 74 },
+      { "x": "Uge 3", "y": 58 },
+      { "x": "Uge 4", "y": 39 },
+      { "x": "Uge 5", "y": 21 },
+      { "x": "Uge 6", "y": 11 },
+      { "x": "Uge 7", "y": 8 },
+      { "x": "Uge 8", "y": 5 },
+      { "x": "Uge 9", "y": 3 },
+      { "x": "Uge 10", "y": 2 },
+      { "x": "Uge 11", "y": 1 },
+      { "x": "Uge 12", "y": 0 }
+    ]
+  }
+}
diff --git a/.workbench/POC/data/kk-services.json b/.workbench/POC/data/kk-services.json
new file mode 100644
index 0000000..5c84a0a
--- /dev/null
+++ b/.workbench/POC/data/kk-services.json
@@ -0,0 +1,125 @@
+{
+  "Klip dame, herre og børn": [
+    { "name": "Dameklip", "duration": 60, "price": 725 },
+    { "name": "Dameklip uden snak", "duration": 60, "price": 725 },
+    { "name": "Dameklip spidser mellemlangt og langt hår", "duration": 40, "price": 575 },
+    { "name": "Dameklip Luksus ekstra glans og pleje", "duration": 75, "price": 925 },
+    { "name": "Herreklip", "duration": 60, "price": 645 },
+    { "name": "Herreklip uden snak", "duration": 60, "price": 645 },
+    { "name": "Skin fade", "duration": 60, "price": 645 },
+    { "name": "Klip med maskine (herre klip)", "duration": 30, "price": 475 },
+    { "name": "Børneklip 0-4 år", "duration": 45, "price": 475 },
+    { "name": "Børneklip 4-8 år", "duration": 45, "price": 525 },
+    { "name": "Touch up Dame", "duration": 10, "price": 0 },
+    { "name": "Touch up Herre", "duration": 10, "price": 0 },
+    { "name": "Pandehår helt nyt", "duration": 20, "price": 325 },
+    { "name": "Konsultation uden behandling", "duration": 10, "price": 0 },
+    { "name": "Herreklip", "duration": 60, "price": 550 },
+    { "name": "Klip med maskine (herre klip)", "duration": 45, "price": 525 }
+  ],
+
+  "Farvebehandlinger": [
+    { "name": "Bundfarve almindelig udgroning maks 3 cm", "duration": 90, "price": 785 },
+    { "name": "Helfarve kort hår", "duration": 105, "price": 950 },
+    { "name": "Helfarve mellemlangt hår", "duration": 120, "price": 1450 },
+    { "name": "Helfarve langt hår", "duration": 120, "price": 1550 },
+    { "name": "Bundfarve/ Lysning", "duration": 105, "price": 975 },
+    { "name": "Afblegning kort hår + gloss", "duration": 150, "price": 1895 }
+  ],
+
+  "Striber/ Refleksbehandling": [
+    { "name": "Striber kort hår", "duration": 120, "price": 1465 },
+    { "name": "Striber mellemlangt hår", "duration": 150, "price": 1665 },
+    { "name": "Striber langt hår", "duration": 180, "price": 1865 },
+    { "name": "Striber på toppen/ overhår", "duration": 90, "price": 1065 },
+    { "name": "Striber babylights tæt lysning mellemlangt hår", "duration": 180, "price": 2650 },
+    { "name": "Striber babylights tæt lysning langt hår", "duration": 180, "price": 2850 },
+    { "name": "Striber babylights tæt lysning på toppen", "duration": 120, "price": 1650 },
+    { "name": "AirTouch skulderlangt hår", "duration": 210, "price": 3250 },
+    { "name": "AirTouch langt hår", "duration": 240, "price": 3850 }
+  ],
+
+  "Hårvask med styling eller uden styling": [
+    { "name": "Hårvask uden styling", "duration": 30, "price": 265 },
+    { "name": "Hårvask med styling (kun føn)", "duration": 40, "price": 450 },
+    { "name": "Vask + Styling med varme glatning/krøller (mellemlangt/langt)", "duration": 60, "price": 650 }
+  ],
+
+  "Henna naturlig hårfarver": [
+    { "name": "Henna kort hår", "duration": 90, "price": 965 },
+    { "name": "Henna mellemlangt/langt hår", "duration": 90, "price": 1265 },
+    { "name": "Henna bundfarve", "duration": 90, "price": 750 }
+  ],
+
+  "Kurbehandling": [
+    { "name": "Olaplex Stand alone", "duration": 60, "price": 550 },
+    { "name": "Kurbehandling fugt/protein", "duration": 40, "price": 365 }
+  ],
+
+  "Bryn og vipper": [
+    { "name": "Farvning vipper & bryn", "duration": 30, "price": 345 },
+    { "name": "Farvning vipper", "duration": 20, "price": 185 },
+    { "name": "Farvning og retning af bryn", "duration": 20, "price": 185 },
+    { "name": "Retning af bryn", "duration": 10, "price": 100 }
+  ],
+
+  "Balayage": [
+    { "name": "Balayage maks til skulderen", "duration": 150, "price": 1850 },
+    { "name": "Balayage maks skulder + gloss/toning", "duration": 180, "price": 2250 },
+    { "name": "Balayage langt hår", "duration": 150, "price": 2150 },
+    { "name": "Balayage langt hår + gloss/toning", "duration": 180, "price": 2550 }
+  ],
+
+  "Skæg": [
+    { "name": "Skægtrim", "duration": 20, "price": 300 }
+  ],
+
+  "Gloss": [
+    { "name": "Gloss ekstra langt/tykt hår", "duration": 75, "price": 900 },
+    { "name": "Glossing kort hår", "duration": 60, "price": 685 },
+    { "name": "Glossing mellemlangt/ langt hår", "duration": 60, "price": 745 },
+    { "name": "Glossing mænd", "duration": 40, "price": 350 },
+    { "name": "Gloss ifb. anden farvebehandling", "duration": 20, "price": 450 },
+    { "name": "Gloss ifb. anden farvebehandling", "duration": 30, "price": 450 }
+  ],
+
+  "Håropsætning": [
+    { "name": "Håropsætning kort hår", "duration": 60, "price": 850 },
+    { "name": "Håropsætning langt hår", "duration": 60, "price": 1450 },
+    { "name": "Håropsætning Brud/brudepiger/Galla/Oscar", "duration": 90, "price": 1599 },
+    { "name": "Make-up Special Brud/Galla mm", "duration": 90, "price": 3000 }
+  ],
+
+  "Modeller": [
+    { "name": "Dameklip Model", "duration": 60, "price": 0 },
+    { "name": "Herreklip Model", "duration": 60, "price": 0 },
+    { "name": "Balayage Model", "duration": 240, "price": 0 },
+    { "name": "Striber Model", "duration": 180, "price": 0 },
+    { "name": "Bryn & Vippe Model", "duration": 40, "price": 0 },
+    { "name": "Bundfarve Model", "duration": 120, "price": 0 },
+    { "name": "Gloss", "duration": 30, "price": 0 }
+  ],
+
+  "Tristan farve modeller": [
+    { "name": "Bundfarve med HP/HPF", "duration": 90, "price": 325 },
+    { "name": "Striber Model", "duration": 240, "price": 400 }
+  ],
+
+  "Uden kategori": [
+    { "name": "P-afgift", "duration": 0, "price": -25 },
+    { "name": "Børneklip 9-12 år", "duration": 60, "price": 450 }
+  ],
+
+  "Tilvalg services": [
+    { "name": "Touch up kur", "duration": 15, "price": 175 },
+    { "name": "Root shading", "duration": 30, "price": 425 },
+    { "name": "Styling med varme (efter behandling)", "duration": 60, "price": 475 },
+    { "name": "Styling kort hår (efter farve)", "duration": 20, "price": 175 },
+    { "name": "Olaplex efter afblegning", "duration": 10, "price": 325 },
+    { "name": "Let afrensning af gloss/klor/kemi", "duration": 20, "price": 220 },
+    { "name": "Forpigmentering", "duration": 20, "price": 300 },
+    { "name": "Knække bund ifb. farvebehandling", "duration": 20, "price": 400 },
+    { "name": "Olaplex i farve", "duration": 10, "price": 230 },
+    { "name": "Metal DX intens kur redken gloss", "duration": 20, "price": 225 }
+  ]
+}
diff --git a/.workbench/POC/data/mock-bookings.json b/.workbench/POC/data/mock-bookings.json
new file mode 100644
index 0000000..985bda0
--- /dev/null
+++ b/.workbench/POC/data/mock-bookings.json
@@ -0,0 +1,514 @@
+[
+  {
+    "id": "BOOK001",
+    "customerId": "CUST001",
+    "status": "arrived",
+    "createdAt": "2025-08-05T08:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV001",
+        "serviceName": "Klipning og styling",
+        "baseDuration": 60,
+        "basePrice": 500,
+        "customPrice": 500,
+        "resourceId": "EMP001"
+      }
+    ],
+    "totalPrice": 500,
+    "notes": "Kunde ønsker lidt kortere"
+  },
+  {
+    "id": "BOOK002",
+    "customerId": "CUST002",
+    "status": "paid",
+    "createdAt": "2025-08-05T09:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV002",
+        "serviceName": "Hårvask",
+        "baseDuration": 30,
+        "basePrice": 100,
+        "customPrice": 100,
+        "resourceId": "STUDENT001"
+      },
+      {
+        "serviceId": "SRV003",
+        "serviceName": "Bundfarve",
+        "baseDuration": 90,
+        "basePrice": 800,
+        "customPrice": 800,
+        "resourceId": "EMP001"
+      }
+    ],
+    "totalPrice": 900,
+    "notes": "Split booking: Elev laver hårvask, master laver farve"
+  },
+  {
+    "id": "BOOK003",
+    "customerId": "CUST003",
+    "status": "created",
+    "createdAt": "2025-08-05T07:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV004A",
+        "serviceName": "Bryllupsfrisure - Del 1",
+        "baseDuration": 60,
+        "basePrice": 750,
+        "customPrice": 750,
+        "resourceId": "EMP001"
+      },
+      {
+        "serviceId": "SRV004B",
+        "serviceName": "Bryllupsfrisure - Del 2",
+        "baseDuration": 60,
+        "basePrice": 750,
+        "customPrice": 750,
+        "resourceId": "EMP002"
+      }
+    ],
+    "totalPrice": 1500,
+    "notes": "Equal-split: To master stylister arbejder sammen"
+  },
+  {
+    "id": "BOOK004",
+    "customerId": "CUST004",
+    "status": "arrived",
+    "createdAt": "2025-08-05T10:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV005",
+        "serviceName": "Herreklipning",
+        "baseDuration": 30,
+        "basePrice": 350,
+        "customPrice": 350,
+        "resourceId": "EMP003"
+      }
+    ],
+    "totalPrice": 350
+  },
+  {
+    "id": "BOOK005",
+    "customerId": "CUST005",
+    "status": "paid",
+    "createdAt": "2025-08-05T11:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV006",
+        "serviceName": "Balayage langt hår",
+        "baseDuration": 120,
+        "basePrice": 1200,
+        "customPrice": 1200,
+        "resourceId": "EMP002"
+      }
+    ],
+    "totalPrice": 1200,
+    "notes": "Kunde ønsker naturlig blond tone"
+  },
+  {
+    "id": "BOOK006",
+    "customerId": "CUST006",
+    "status": "created",
+    "createdAt": "2025-08-06T08:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV007",
+        "serviceName": "Permanent",
+        "baseDuration": 90,
+        "basePrice": 900,
+        "customPrice": 900,
+        "resourceId": "EMP004"
+      }
+    ],
+    "totalPrice": 900
+  },
+  {
+    "id": "BOOK007",
+    "customerId": "CUST007",
+    "status": "arrived",
+    "createdAt": "2025-08-06T09:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV008",
+        "serviceName": "Highlights",
+        "baseDuration": 90,
+        "basePrice": 850,
+        "customPrice": 850,
+        "resourceId": "EMP001"
+      },
+      {
+        "serviceId": "SRV009",
+        "serviceName": "Styling",
+        "baseDuration": 30,
+        "basePrice": 200,
+        "customPrice": 200,
+        "resourceId": "EMP001"
+      }
+    ],
+    "totalPrice": 1050,
+    "notes": "Highlights + styling samme stylist"
+  },
+  {
+    "id": "BOOK008",
+    "customerId": "CUST008",
+    "status": "paid",
+    "createdAt": "2025-08-06T10:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV010",
+        "serviceName": "Klipning",
+        "baseDuration": 45,
+        "basePrice": 450,
+        "customPrice": 450,
+        "resourceId": "EMP004"
+      }
+    ],
+    "totalPrice": 450
+  },
+  {
+    "id": "BOOK009",
+    "customerId": "CUST001",
+    "status": "created",
+    "createdAt": "2025-08-07T08:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV011",
+        "serviceName": "Farve behandling",
+        "baseDuration": 120,
+        "basePrice": 950,
+        "customPrice": 950,
+        "resourceId": "EMP002"
+      }
+    ],
+    "totalPrice": 950
+  },
+  {
+    "id": "BOOK010",
+    "customerId": "CUST002",
+    "status": "arrived",
+    "createdAt": "2025-08-07T09:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV012",
+        "serviceName": "Skæg trimning",
+        "baseDuration": 20,
+        "basePrice": 200,
+        "customPrice": 200,
+        "resourceId": "EMP003"
+      }
+    ],
+    "totalPrice": 200
+  },
+  {
+    "id": "BOOK011",
+    "customerId": "CUST003",
+    "status": "paid",
+    "createdAt": "2025-08-07T10:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV002",
+        "serviceName": "Hårvask",
+        "baseDuration": 30,
+        "basePrice": 100,
+        "customPrice": 100,
+        "resourceId": "STUDENT002"
+      },
+      {
+        "serviceId": "SRV013",
+        "serviceName": "Ombré",
+        "baseDuration": 100,
+        "basePrice": 1100,
+        "customPrice": 1100,
+        "resourceId": "EMP002"
+      }
+    ],
+    "totalPrice": 1200,
+    "notes": "Split booking: Student hårvask, master ombré"
+  },
+  {
+    "id": "BOOK012",
+    "customerId": "CUST004",
+    "status": "created",
+    "createdAt": "2025-08-08T08:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV014",
+        "serviceName": "Føntørring",
+        "baseDuration": 30,
+        "basePrice": 250,
+        "customPrice": 250,
+        "resourceId": "STUDENT001"
+      }
+    ],
+    "totalPrice": 250
+  },
+  {
+    "id": "BOOK013",
+    "customerId": "CUST005",
+    "status": "arrived",
+    "createdAt": "2025-08-08T09:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV015",
+        "serviceName": "Opsætning",
+        "baseDuration": 60,
+        "basePrice": 700,
+        "customPrice": 700,
+        "resourceId": "EMP004"
+      }
+    ],
+    "totalPrice": 700,
+    "notes": "Fest opsætning"
+  },
+  {
+    "id": "BOOK014",
+    "customerId": "CUST006",
+    "status": "created",
+    "createdAt": "2025-08-09T08:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV016A",
+        "serviceName": "Ekstensions - Del 1",
+        "baseDuration": 90,
+        "basePrice": 1250,
+        "customPrice": 1250,
+        "resourceId": "EMP001"
+      },
+      {
+        "serviceId": "SRV016B",
+        "serviceName": "Ekstensions - Del 2",
+        "baseDuration": 90,
+        "basePrice": 1250,
+        "customPrice": 1250,
+        "resourceId": "EMP004"
+      }
+    ],
+    "totalPrice": 2500,
+    "notes": "Equal-split: To stylister arbejder sammen om extensions"
+  },
+  {
+    "id": "BOOK015",
+    "customerId": "CUST007",
+    "status": "noshow",
+    "createdAt": "2025-08-09T09:00:00Z",
+    "services": [
+      {
+        "serviceId": "SRV001",
+        "serviceName": "Klipning og styling",
+        "baseDuration": 60,
+        "basePrice": 500,
+        "customPrice": 500,
+        "resourceId": "EMP002"
+      }
+    ],
+    "totalPrice": 500,
+    "notes": "Kunde mødte ikke op"
+  },
+  {
+    "id": "BOOK-NOV22-001",
+    "customerId": "CUST001",
+    "status": "arrived",
+    "createdAt": "2025-11-20T10:00:00Z",
+    "services": [
+      { "serviceId": "SRV-WASH", "serviceName": "Hårvask", "baseDuration": 30, "basePrice": 100, "resourceId": "STUDENT001" },
+      { "serviceId": "SRV-BAL", "serviceName": "Balayage", "baseDuration": 90, "basePrice": 1200, "resourceId": "EMP001" }
+    ],
+    "totalPrice": 1300,
+    "notes": "Split: Elev vasker, Camilla farver"
+  },
+  {
+    "id": "BOOK-NOV22-002",
+    "customerId": "CUST002",
+    "status": "arrived",
+    "createdAt": "2025-11-20T11:00:00Z",
+    "services": [
+      { "serviceId": "SRV-HERREKLIP", "serviceName": "Herreklipning", "baseDuration": 30, "basePrice": 350, "resourceId": "EMP003" }
+    ],
+    "totalPrice": 350
+  },
+  {
+    "id": "BOOK-NOV22-003",
+    "customerId": "CUST003",
+    "status": "created",
+    "createdAt": "2025-11-20T12:00:00Z",
+    "services": [
+      { "serviceId": "SRV-FARVE", "serviceName": "Farvning", "baseDuration": 120, "basePrice": 900, "resourceId": "EMP002" }
+    ],
+    "totalPrice": 900
+  },
+  {
+    "id": "BOOK-NOV22-004",
+    "customerId": "CUST004",
+    "status": "arrived",
+    "createdAt": "2025-11-20T13:00:00Z",
+    "services": [
+      { "serviceId": "SRV-KLIP", "serviceName": "Dameklipning", "baseDuration": 60, "basePrice": 450, "resourceId": "EMP004" }
+    ],
+    "totalPrice": 450
+  },
+  {
+    "id": "BOOK-NOV22-005",
+    "customerId": "CUST005",
+    "status": "created",
+    "createdAt": "2025-11-20T14:00:00Z",
+    "services": [
+      { "serviceId": "SRV-STYLE", "serviceName": "Styling", "baseDuration": 60, "basePrice": 400, "resourceId": "EMP001" }
+    ],
+    "totalPrice": 400
+  },
+  {
+    "id": "BOOK-NOV23-001",
+    "customerId": "CUST006",
+    "status": "created",
+    "createdAt": "2025-11-21T09:00:00Z",
+    "services": [
+      { "serviceId": "SRV-PERM", "serviceName": "Permanent", "baseDuration": 150, "basePrice": 1100, "resourceId": "EMP002" }
+    ],
+    "totalPrice": 1100
+  },
+  {
+    "id": "BOOK-NOV23-002",
+    "customerId": "CUST007",
+    "status": "created",
+    "createdAt": "2025-11-21T10:00:00Z",
+    "services": [
+      { "serviceId": "SRV-SKAEG", "serviceName": "Skæg trimning", "baseDuration": 30, "basePrice": 200, "resourceId": "EMP003" }
+    ],
+    "totalPrice": 200
+  },
+  {
+    "id": "BOOK-NOV23-003",
+    "customerId": "CUST008",
+    "status": "created",
+    "createdAt": "2025-11-21T11:00:00Z",
+    "services": [
+      { "serviceId": "SRV-WASH", "serviceName": "Hårvask", "baseDuration": 30, "basePrice": 100, "resourceId": "STUDENT002" },
+      { "serviceId": "SRV-HIGH", "serviceName": "Highlights", "baseDuration": 120, "basePrice": 1000, "resourceId": "EMP001" }
+    ],
+    "totalPrice": 1100,
+    "notes": "Split: Elev vasker, Camilla laver highlights"
+  },
+  {
+    "id": "BOOK-NOV24-001",
+    "customerId": "CUST001",
+    "status": "created",
+    "createdAt": "2025-11-22T08:00:00Z",
+    "services": [
+      { "serviceId": "SRV-BRYLLUP1", "serviceName": "Bryllupsfrisure Del 1", "baseDuration": 60, "basePrice": 750, "resourceId": "EMP001" },
+      { "serviceId": "SRV-BRYLLUP2", "serviceName": "Bryllupsfrisure Del 2", "baseDuration": 60, "basePrice": 750, "resourceId": "EMP002" }
+    ],
+    "totalPrice": 1500,
+    "notes": "Equal split: Camilla og Isabella arbejder sammen"
+  },
+  {
+    "id": "BOOK-NOV24-002",
+    "customerId": "CUST002",
+    "status": "created",
+    "createdAt": "2025-11-22T09:00:00Z",
+    "services": [
+      { "serviceId": "SRV-FADE", "serviceName": "Fade klipning", "baseDuration": 45, "basePrice": 400, "resourceId": "EMP003" }
+    ],
+    "totalPrice": 400
+  },
+  {
+    "id": "BOOK-NOV24-003",
+    "customerId": "CUST003",
+    "status": "created",
+    "createdAt": "2025-11-22T10:00:00Z",
+    "services": [
+      { "serviceId": "SRV-KLIPVASK", "serviceName": "Klipning og vask", "baseDuration": 60, "basePrice": 500, "resourceId": "EMP004" }
+    ],
+    "totalPrice": 500
+  },
+  {
+    "id": "BOOK-NOV25-001",
+    "customerId": "CUST004",
+    "status": "created",
+    "createdAt": "2025-11-23T08:00:00Z",
+    "services": [
+      { "serviceId": "SRV-BALKORT", "serviceName": "Balayage kort hår", "baseDuration": 90, "basePrice": 900, "resourceId": "EMP001" }
+    ],
+    "totalPrice": 900
+  },
+  {
+    "id": "BOOK-NOV25-002",
+    "customerId": "CUST005",
+    "status": "created",
+    "createdAt": "2025-11-23T09:00:00Z",
+    "services": [
+      { "serviceId": "SRV-EXT", "serviceName": "Extensions", "baseDuration": 180, "basePrice": 2500, "resourceId": "EMP002" }
+    ],
+    "totalPrice": 2500
+  },
+  {
+    "id": "BOOK-NOV25-003",
+    "customerId": "CUST006",
+    "status": "created",
+    "createdAt": "2025-11-23T10:00:00Z",
+    "services": [
+      { "serviceId": "SRV-HERRESKAEG", "serviceName": "Herreklipning + skæg", "baseDuration": 60, "basePrice": 500, "resourceId": "EMP003" }
+    ],
+    "totalPrice": 500
+  },
+  {
+    "id": "BOOK-NOV26-001",
+    "customerId": "CUST007",
+    "status": "created",
+    "createdAt": "2025-11-24T08:00:00Z",
+    "services": [
+      { "serviceId": "SRV-FARVKOR", "serviceName": "Farvekorrektion", "baseDuration": 180, "basePrice": 1800, "resourceId": "EMP001" }
+    ],
+    "totalPrice": 1800
+  },
+  {
+    "id": "BOOK-NOV26-002",
+    "customerId": "CUST008",
+    "status": "created",
+    "createdAt": "2025-11-24T09:00:00Z",
+    "services": [
+      { "serviceId": "SRV-KERATIN", "serviceName": "Keratinbehandling", "baseDuration": 150, "basePrice": 1400, "resourceId": "EMP002" }
+    ],
+    "totalPrice": 1400
+  },
+  {
+    "id": "BOOK-NOV26-003",
+    "customerId": "CUST001",
+    "status": "created",
+    "createdAt": "2025-11-24T10:00:00Z",
+    "services": [
+      { "serviceId": "SRV-SKINFADE", "serviceName": "Skin fade", "baseDuration": 45, "basePrice": 450, "resourceId": "EMP003" }
+    ],
+    "totalPrice": 450
+  },
+  {
+    "id": "BOOK-NOV27-001",
+    "customerId": "CUST002",
+    "status": "created",
+    "createdAt": "2025-11-25T08:00:00Z",
+    "services": [
+      { "serviceId": "SRV-FULLCOLOR", "serviceName": "Full color", "baseDuration": 120, "basePrice": 1000, "resourceId": "EMP001" }
+    ],
+    "totalPrice": 1000
+  },
+  {
+    "id": "BOOK-NOV27-002",
+    "customerId": "CUST003",
+    "status": "created",
+    "createdAt": "2025-11-25T09:00:00Z",
+    "services": [
+      { "serviceId": "SRV-WASH", "serviceName": "Hårvask", "baseDuration": 30, "basePrice": 100, "resourceId": "STUDENT001" },
+      { "serviceId": "SRV-BABY", "serviceName": "Babylights", "baseDuration": 180, "basePrice": 1500, "resourceId": "EMP002" }
+    ],
+    "totalPrice": 1600,
+    "notes": "Split: Elev vasker, Isabella laver babylights"
+  },
+  {
+    "id": "BOOK-NOV27-003",
+    "customerId": "CUST004",
+    "status": "created",
+    "createdAt": "2025-11-25T10:00:00Z",
+    "services": [
+      { "serviceId": "SRV-KLASSISK", "serviceName": "Klassisk herreklip", "baseDuration": 30, "basePrice": 300, "resourceId": "EMP003" }
+    ],
+    "totalPrice": 300
+  }
+]
diff --git a/.workbench/POC/data/mock-customers.json b/.workbench/POC/data/mock-customers.json
new file mode 100644
index 0000000..28997bf
--- /dev/null
+++ b/.workbench/POC/data/mock-customers.json
@@ -0,0 +1,49 @@
+[
+  {
+    "id": "CUST001",
+    "name": "Sofie Nielsen",
+    "phone": "+45 23 45 67 89",
+    "email": "sofie.nielsen@email.dk"
+  },
+  {
+    "id": "CUST002",
+    "name": "Emma Andersen",
+    "phone": "+45 31 24 56 78",
+    "email": "emma.andersen@email.dk"
+  },
+  {
+    "id": "CUST003",
+    "name": "Freja Christensen",
+    "phone": "+45 42 67 89 12",
+    "email": "freja.christensen@email.dk"
+  },
+  {
+    "id": "CUST004",
+    "name": "Laura Pedersen",
+    "phone": "+45 51 98 76 54"
+  },
+  {
+    "id": "CUST005",
+    "name": "Ida Larsen",
+    "phone": "+45 29 87 65 43",
+    "email": "ida.larsen@email.dk"
+  },
+  {
+    "id": "CUST006",
+    "name": "Caroline Jensen",
+    "phone": "+45 38 76 54 32",
+    "email": "caroline.jensen@email.dk"
+  },
+  {
+    "id": "CUST007",
+    "name": "Mathilde Hansen",
+    "phone": "+45 47 65 43 21",
+    "email": "mathilde.hansen@email.dk"
+  },
+  {
+    "id": "CUST008",
+    "name": "Olivia Sørensen",
+    "phone": "+45 56 54 32 10",
+    "email": "olivia.sorensen@email.dk"
+  }
+]
diff --git a/.workbench/POC/data/mock-departments.json b/.workbench/POC/data/mock-departments.json
new file mode 100644
index 0000000..033caad
--- /dev/null
+++ b/.workbench/POC/data/mock-departments.json
@@ -0,0 +1,14 @@
+[
+  {
+    "id": "dept-styling",
+    "name": "Styling",
+    "resourceIds": ["EMP001", "EMP002", "EMP003"],
+    "syncStatus": "synced"
+  },
+  {
+    "id": "dept-training",
+    "name": "Training",
+    "resourceIds": ["EMP004", "STUDENT001", "STUDENT002"],
+    "syncStatus": "synced"
+  }
+]
diff --git a/.workbench/POC/data/mock-events.json b/.workbench/POC/data/mock-events.json
new file mode 100644
index 0000000..82297ee
--- /dev/null
+++ b/.workbench/POC/data/mock-events.json
@@ -0,0 +1,669 @@
+[
+  {
+    "id": "EVT-NOV24-001",
+    "title": "Herreklipning",
+    "start": "2025-11-24T09:00:00",
+    "end": "2025-11-24T09:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N01",
+    "resourceId": "EMP001",
+    "customerId": "CUST001",
+    "syncStatus": "synced",
+    "metadata": { "color": "blue" }
+  },
+  {
+    "id": "EVT-NOV24-002",
+    "title": "Balayage",
+    "start": "2025-11-24T10:00:00",
+    "end": "2025-11-24T12:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N02",
+    "resourceId": "EMP002",
+    "customerId": "CUST002",
+    "syncStatus": "synced",
+    "metadata": { "color": "purple" }
+  },
+  {
+    "id": "EVT-NOV24-003",
+    "title": "Klipning dame",
+    "start": "2025-11-24T14:00:00",
+    "end": "2025-11-24T15:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N03",
+    "resourceId": "EMP003",
+    "customerId": "CUST003",
+    "syncStatus": "synced",
+    "metadata": { "color": "teal" }
+  },
+  {
+    "id": "EVT-NOV25-001",
+    "title": "Farve behandling",
+    "start": "2025-11-25T09:00:00",
+    "end": "2025-11-25T11:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N04",
+    "resourceId": "EMP001",
+    "customerId": "CUST004",
+    "syncStatus": "synced",
+    "metadata": { "color": "orange" }
+  },
+  {
+    "id": "EVT-NOV25-002",
+    "title": "Permanent",
+    "start": "2025-11-25T12:00:00",
+    "end": "2025-11-25T14:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N05",
+    "resourceId": "EMP004",
+    "customerId": "CUST005",
+    "syncStatus": "synced",
+    "metadata": { "color": "indigo" }
+  },
+  {
+    "id": "EVT-NOV26-001",
+    "title": "Highlights",
+    "start": "2025-11-26T10:00:00",
+    "end": "2025-11-26T12:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N06",
+    "resourceId": "EMP002",
+    "customerId": "CUST006",
+    "syncStatus": "synced",
+    "metadata": { "color": "lime" }
+  },
+  {
+    "id": "EVT-NOV26-002",
+    "title": "Børneklip",
+    "start": "2025-11-26T14:00:00",
+    "end": "2025-11-26T14:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N07",
+    "resourceId": "EMP003",
+    "customerId": "CUST007",
+    "syncStatus": "synced",
+    "metadata": { "color": "cyan" }
+  },
+  {
+    "id": "EVT-NOV27-001",
+    "title": "Olaplex behandling",
+    "start": "2025-11-27T09:00:00",
+    "end": "2025-11-27T10:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N08",
+    "resourceId": "EMP005",
+    "customerId": "CUST008",
+    "syncStatus": "synced",
+    "metadata": { "color": "pink" }
+  },
+  {
+    "id": "EVT-NOV27-002",
+    "title": "Skæg trim",
+    "start": "2025-11-27T11:00:00",
+    "end": "2025-11-27T11:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N09",
+    "resourceId": "EMP001",
+    "customerId": "CUST009",
+    "syncStatus": "synced",
+    "metadata": { "color": "teal" }
+  },
+  {
+    "id": "EVT-NOV28-001",
+    "title": "Extensions",
+    "start": "2025-11-28T09:00:00",
+    "end": "2025-11-28T12:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N10",
+    "resourceId": "EMP002",
+    "customerId": "CUST010",
+    "syncStatus": "synced",
+    "metadata": { "color": "deep-purple" }
+  },
+  {
+    "id": "EVT-DEC01-001",
+    "title": "Klipning og føn",
+    "start": "2025-12-01T10:00:00",
+    "end": "2025-12-01T11:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N11",
+    "resourceId": "EMP001",
+    "customerId": "CUST011",
+    "syncStatus": "synced",
+    "metadata": { "color": "blue" }
+  },
+  {
+    "id": "EVT-DEC01-002",
+    "title": "Farve korrektion",
+    "start": "2025-12-01T13:00:00",
+    "end": "2025-12-01T16:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N12",
+    "resourceId": "EMP004",
+    "customerId": "CUST012",
+    "syncStatus": "synced",
+    "metadata": { "color": "magenta" }
+  },
+  {
+    "id": "EVT-DEC02-001",
+    "title": "Bryllupsfrisure prøve",
+    "start": "2025-12-02T09:00:00",
+    "end": "2025-12-02T11:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N13",
+    "resourceId": "EMP002",
+    "customerId": "CUST013",
+    "syncStatus": "synced",
+    "metadata": { "color": "green" }
+  },
+  {
+    "id": "EVT-DEC02-002",
+    "title": "Herreklip express",
+    "start": "2025-12-02T14:00:00",
+    "end": "2025-12-02T14:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N14",
+    "resourceId": "EMP003",
+    "customerId": "CUST014",
+    "syncStatus": "synced",
+    "metadata": { "color": "amber" }
+  },
+  {
+    "id": "EVT-DEC03-001",
+    "title": "Keratin behandling",
+    "start": "2025-12-03T10:00:00",
+    "end": "2025-12-03T13:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N15",
+    "resourceId": "EMP005",
+    "customerId": "CUST001",
+    "syncStatus": "synced",
+    "metadata": { "color": "violet" }
+  },
+  {
+    "id": "EVT-DEC03-002",
+    "title": "Vask og styling",
+    "start": "2025-12-03T15:00:00",
+    "end": "2025-12-03T15:45:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N16",
+    "resourceId": "EMP001",
+    "customerId": "CUST002",
+    "syncStatus": "synced",
+    "metadata": { "color": "light-green" }
+  },
+  {
+    "id": "EVT-DEC04-001",
+    "title": "Balayage kort hår",
+    "start": "2025-12-04T09:00:00",
+    "end": "2025-12-04T10:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N17",
+    "resourceId": "EMP002",
+    "customerId": "CUST003",
+    "syncStatus": "synced",
+    "metadata": { "color": "purple" }
+  },
+  {
+    "id": "EVT-DEC04-002",
+    "title": "Ferie",
+    "start": "2025-12-04T00:00:00",
+    "end": "2025-12-05T23:59:59",
+    "type": "vacation",
+    "allDay": true,
+    "resourceId": "EMP004",
+    "syncStatus": "synced",
+    "metadata": { "color": "red" }
+  },
+  {
+    "id": "EVT-DEC05-001",
+    "title": "Dameklip langt hår",
+    "start": "2025-12-05T11:00:00",
+    "end": "2025-12-05T12:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N18",
+    "resourceId": "EMP003",
+    "customerId": "CUST004",
+    "syncStatus": "synced",
+    "metadata": { "color": "pink" }
+  },
+  {
+    "id": "EVT-DEC05-002",
+    "title": "Highlights delvis",
+    "start": "2025-12-05T14:00:00",
+    "end": "2025-12-05T15:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-N19",
+    "resourceId": "EMP005",
+    "customerId": "CUST005",
+    "syncStatus": "synced",
+    "metadata": { "color": "lime" }
+  },
+  {
+    "id": "EVT-DEC08-001",
+    "title": "Balayage langt hår",
+    "description": "Fuld balayage behandling",
+    "start": "2025-12-08T10:00:00",
+    "end": "2025-12-08T11:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-001",
+    "resourceId": "EMP001",
+    "customerId": "CUST001",
+    "syncStatus": "synced",
+    "metadata": { "color": "purple" }
+  },
+  {
+    "id": "EVT-DEC08-002",
+    "title": "Klipning og styling",
+    "description": "Dameklipning med føn",
+    "start": "2025-12-08T14:00:00",
+    "end": "2025-12-08T15:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-002",
+    "resourceId": "EMP001",
+    "customerId": "CUST002",
+    "syncStatus": "synced",
+    "metadata": { "color": "pink" }
+  },
+  {
+    "id": "EVT-DEC08-003",
+    "title": "Permanent",
+    "description": "Permanent med curler",
+    "start": "2025-12-08T09:00:00",
+    "end": "2025-12-08T11:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-003",
+    "resourceId": "EMP002",
+    "customerId": "CUST003",
+    "syncStatus": "synced",
+    "metadata": { "color": "indigo" }
+  },
+  {
+    "id": "EVT-DEC08-004",
+    "title": "Farve behandling",
+    "description": "Farve og pleje",
+    "start": "2025-12-08T13:00:00",
+    "end": "2025-12-08T15:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-004",
+    "resourceId": "EMP002",
+    "customerId": "CUST004",
+    "syncStatus": "synced",
+    "metadata": { "color": "orange" }
+  },
+  {
+    "id": "EVT-DEC09-001",
+    "title": "Herreklipning",
+    "description": "Klassisk herreklip",
+    "start": "2025-12-09T11:00:00",
+    "end": "2025-12-09T11:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-005",
+    "resourceId": "EMP003",
+    "customerId": "CUST005",
+    "syncStatus": "synced",
+    "metadata": { "color": "teal" }
+  },
+  {
+    "id": "EVT-DEC09-002",
+    "title": "Kursus",
+    "description": "Ekstern kursusdag",
+    "start": "2025-12-09T00:00:00",
+    "end": "2025-12-10T23:59:59",
+    "type": "blocked",
+    "allDay": true,
+    "resourceId": "EMP003",
+    "syncStatus": "synced",
+    "metadata": { "color": "cyan" }
+  },
+  {
+    "id": "EVT-DEC09-003",
+    "title": "Bryllupsfrisure",
+    "description": "Bryllupsfrisure med prøve",
+    "start": "2025-12-09T08:00:00",
+    "end": "2025-12-09T10:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-007",
+    "resourceId": "EMP004",
+    "customerId": "CUST007",
+    "syncStatus": "synced",
+    "metadata": { "color": "green" }
+  },
+  {
+    "id": "EVT-DEC10-001",
+    "title": "Highlights",
+    "description": "Highlights med folie",
+    "start": "2025-12-10T12:00:00",
+    "end": "2025-12-10T14:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-008",
+    "resourceId": "EMP005",
+    "customerId": "CUST008",
+    "syncStatus": "synced",
+    "metadata": { "color": "lime" }
+  },
+  {
+    "id": "EVT-DEC10-002",
+    "title": "Styling konsultation",
+    "description": "Rådgivning om ny stil",
+    "start": "2025-12-10T15:00:00",
+    "end": "2025-12-10T15:30:00",
+    "type": "meeting",
+    "allDay": false,
+    "resourceId": "EMP005",
+    "syncStatus": "synced",
+    "metadata": { "color": "amber" }
+  },
+  {
+    "id": "EVT-DEC10-003",
+    "title": "Olaplex behandling",
+    "description": "Fuld Olaplex kur",
+    "start": "2025-12-10T09:00:00",
+    "end": "2025-12-10T10:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-009",
+    "resourceId": "EMP001",
+    "customerId": "CUST009",
+    "syncStatus": "synced",
+    "metadata": { "color": "blue" }
+  },
+  {
+    "id": "EVT-DEC11-001",
+    "title": "Extensions",
+    "description": "Hair extensions påsætning",
+    "start": "2025-12-11T09:00:00",
+    "end": "2025-12-11T12:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-010",
+    "resourceId": "EMP002",
+    "customerId": "CUST010",
+    "syncStatus": "synced",
+    "metadata": { "color": "deep-purple" }
+  },
+  {
+    "id": "EVT-DEC11-002",
+    "title": "Børneklip",
+    "description": "Klipning af barn",
+    "start": "2025-12-11T14:00:00",
+    "end": "2025-12-11T14:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-011",
+    "resourceId": "EMP003",
+    "customerId": "CUST011",
+    "syncStatus": "synced",
+    "metadata": { "color": "light-blue" }
+  },
+  {
+    "id": "EVT-DEC11-003",
+    "title": "Team møde",
+    "description": "Morgen briefing",
+    "start": "2025-12-11T08:00:00",
+    "end": "2025-12-11T08:30:00",
+    "type": "meeting",
+    "allDay": false,
+    "resourceId": "EMP001",
+    "syncStatus": "synced",
+    "metadata": { "color": "red" }
+  },
+  {
+    "id": "EVT-DEC12-001",
+    "title": "Keratin behandling",
+    "description": "Brasiliansk keratin",
+    "start": "2025-12-12T10:00:00",
+    "end": "2025-12-12T13:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-012",
+    "resourceId": "EMP004",
+    "customerId": "CUST012",
+    "syncStatus": "synced",
+    "metadata": { "color": "violet" }
+  },
+  {
+    "id": "EVT-DEC12-002",
+    "title": "Vask og føn",
+    "description": "Express service",
+    "start": "2025-12-12T15:00:00",
+    "end": "2025-12-12T15:45:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-013",
+    "resourceId": "EMP005",
+    "customerId": "CUST013",
+    "syncStatus": "synced",
+    "metadata": { "color": "light-green" }
+  },
+  {
+    "id": "EVT-DEC12-003",
+    "title": "Farvekorrektion",
+    "description": "Korrektion af tidligere farve",
+    "start": "2025-12-12T09:00:00",
+    "end": "2025-12-12T12:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-014",
+    "resourceId": "EMP001",
+    "customerId": "CUST014",
+    "syncStatus": "synced",
+    "metadata": { "color": "magenta" }
+  },
+  {
+    "id": "EVT-DEC15-001",
+    "title": "Juleklipning",
+    "start": "2025-12-15T09:00:00",
+    "end": "2025-12-15T10:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-F01",
+    "resourceId": "EMP001",
+    "customerId": "CUST001",
+    "syncStatus": "synced",
+    "metadata": { "color": "red" }
+  },
+  {
+    "id": "EVT-DEC15-002",
+    "title": "Balayage jul",
+    "start": "2025-12-15T11:00:00",
+    "end": "2025-12-15T13:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-F02",
+    "resourceId": "EMP002",
+    "customerId": "CUST002",
+    "syncStatus": "synced",
+    "metadata": { "color": "purple" }
+  },
+  {
+    "id": "EVT-DEC15-003",
+    "title": "Herreklip",
+    "start": "2025-12-15T14:00:00",
+    "end": "2025-12-15T14:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-F03",
+    "resourceId": "EMP003",
+    "customerId": "CUST003",
+    "syncStatus": "synced",
+    "metadata": { "color": "blue" }
+  },
+  {
+    "id": "EVT-DEC16-001",
+    "title": "Farve og klip",
+    "start": "2025-12-16T10:00:00",
+    "end": "2025-12-16T12:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-F04",
+    "resourceId": "EMP004",
+    "customerId": "CUST004",
+    "syncStatus": "synced",
+    "metadata": { "color": "orange" }
+  },
+  {
+    "id": "EVT-DEC16-002",
+    "title": "Permanent",
+    "start": "2025-12-16T13:00:00",
+    "end": "2025-12-16T15:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-F05",
+    "resourceId": "EMP005",
+    "customerId": "CUST005",
+    "syncStatus": "synced",
+    "metadata": { "color": "indigo" }
+  },
+  {
+    "id": "EVT-DEC17-001",
+    "title": "Julefrokost",
+    "start": "2025-12-17T12:00:00",
+    "end": "2025-12-17T14:00:00",
+    "type": "meeting",
+    "allDay": false,
+    "resourceId": "EMP001",
+    "syncStatus": "synced",
+    "metadata": { "color": "green" }
+  },
+  {
+    "id": "EVT-DEC17-002",
+    "title": "Extensions fjernelse",
+    "start": "2025-12-17T09:00:00",
+    "end": "2025-12-17T11:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-F06",
+    "resourceId": "EMP002",
+    "customerId": "CUST006",
+    "syncStatus": "synced",
+    "metadata": { "color": "deep-purple" }
+  },
+  {
+    "id": "EVT-DEC18-001",
+    "title": "Highlights jul",
+    "start": "2025-12-18T10:00:00",
+    "end": "2025-12-18T12:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-F07",
+    "resourceId": "EMP001",
+    "customerId": "CUST007",
+    "syncStatus": "synced",
+    "metadata": { "color": "lime" }
+  },
+  {
+    "id": "EVT-DEC18-002",
+    "title": "Børneklip jul",
+    "start": "2025-12-18T14:00:00",
+    "end": "2025-12-18T14:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-F08",
+    "resourceId": "EMP003",
+    "customerId": "CUST008",
+    "syncStatus": "synced",
+    "metadata": { "color": "cyan" }
+  },
+  {
+    "id": "EVT-DEC19-001",
+    "title": "Festfrisure",
+    "start": "2025-12-19T09:00:00",
+    "end": "2025-12-19T10:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-F09",
+    "resourceId": "EMP004",
+    "customerId": "CUST009",
+    "syncStatus": "synced",
+    "metadata": { "color": "pink" }
+  },
+  {
+    "id": "EVT-DEC19-002",
+    "title": "Julestyling",
+    "start": "2025-12-19T11:00:00",
+    "end": "2025-12-19T12:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-F10",
+    "resourceId": "EMP005",
+    "customerId": "CUST010",
+    "syncStatus": "synced",
+    "metadata": { "color": "amber" }
+  },
+  {
+    "id": "EVT-DEC19-003",
+    "title": "Klipning og farve",
+    "start": "2025-12-19T14:00:00",
+    "end": "2025-12-19T16:30:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-F11",
+    "resourceId": "EMP001",
+    "customerId": "CUST011",
+    "syncStatus": "synced",
+    "metadata": { "color": "violet" }
+  },
+  {
+    "id": "EVT-DEC22-001",
+    "title": "Sidste jul klip",
+    "start": "2025-12-22T09:00:00",
+    "end": "2025-12-22T10:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-F12",
+    "resourceId": "EMP002",
+    "customerId": "CUST012",
+    "syncStatus": "synced",
+    "metadata": { "color": "red" }
+  },
+  {
+    "id": "EVT-DEC22-002",
+    "title": "Juleaften forberedelse",
+    "start": "2025-12-22T11:00:00",
+    "end": "2025-12-22T13:00:00",
+    "type": "customer",
+    "allDay": false,
+    "bookingId": "BOOK-F13",
+    "resourceId": "EMP003",
+    "customerId": "CUST013",
+    "syncStatus": "synced",
+    "metadata": { "color": "green" }
+  },
+  {
+    "id": "EVT-DEC22-003",
+    "title": "Juleferie start",
+    "start": "2025-12-22T00:00:00",
+    "end": "2025-12-27T23:59:59",
+    "type": "vacation",
+    "allDay": true,
+    "resourceId": "EMP004",
+    "syncStatus": "synced",
+    "metadata": { "color": "light-blue" }
+  }
+]
diff --git a/.workbench/POC/data/mock-resource-events.json b/.workbench/POC/data/mock-resource-events.json
new file mode 100644
index 0000000..a569174
--- /dev/null
+++ b/.workbench/POC/data/mock-resource-events.json
@@ -0,0 +1,135 @@
+{
+  "date": "2025-08-05",
+  "resources": [
+    {
+      "name": "karina.knudsen",
+      "displayName": "Karina Knudsen",
+      "avatarUrl": "/avatars/karina.jpg",
+      "employeeId": "EMP001",
+      "events": [
+        {
+          "id": "1",
+          "title": "Balayage langt hår",
+          "start": "2025-08-05T10:00:00",
+          "end": "2025-08-05T11:00:00",
+          "type": "work",
+          "allDay": false,
+          "syncStatus": "synced",
+          "metadata": { "duration": 60, "color": "#9c27b0" }
+        },
+        {
+          "id": "2",
+          "title": "Klipning og styling",
+          "start": "2025-08-05T14:00:00",
+          "end": "2025-08-05T15:30:00",
+          "type": "work",
+          "allDay": false,
+          "syncStatus": "synced",
+          "metadata": { "duration": 90, "color": "#e91e63" }
+        }
+      ]
+    },
+    {
+      "name": "maria.hansen",
+      "displayName": "Maria Hansen",
+      "avatarUrl": "/avatars/maria.jpg",
+      "employeeId": "EMP002",
+      "events": [
+        {
+          "id": "3",
+          "title": "Permanent",
+          "start": "2025-08-05T09:00:00",
+          "end": "2025-08-05T11:00:00",
+          "type": "work",
+          "allDay": false,
+          "syncStatus": "synced",
+          "metadata": { "duration": 120, "color": "#3f51b5" }
+        },
+        {
+          "id": "4",
+          "title": "Farve behandling",
+          "start": "2025-08-05T13:00:00",
+          "end": "2025-08-05T15:00:00",
+          "type": "work",
+          "allDay": false,
+          "syncStatus": "synced",
+          "metadata": { "duration": 120, "color": "#ff9800" }
+        }
+      ]
+    },
+    {
+      "name": "lars.nielsen",
+      "displayName": "Lars Nielsen",
+      "avatarUrl": "/avatars/lars.jpg",
+      "employeeId": "EMP003",
+      "events": [
+        {
+          "id": "5",
+          "title": "Herreklipning",
+          "start": "2025-08-05T11:00:00",
+          "end": "2025-08-05T11:30:00",
+          "type": "work",
+          "allDay": false,
+          "syncStatus": "synced",
+          "metadata": { "duration": 30, "color": "#795548" }
+        },
+        {
+          "id": "6",
+          "title": "Skæg trimning",
+          "start": "2025-08-05T16:00:00",
+          "end": "2025-08-05T16:30:00",
+          "type": "work",
+          "allDay": false,
+          "syncStatus": "synced",
+          "metadata": { "duration": 30, "color": "#607d8b" }
+        }
+      ]
+    },
+    {
+      "name": "anna.petersen",
+      "displayName": "Anna Petersen",
+      "avatarUrl": "/avatars/anna.jpg",
+      "employeeId": "EMP004",
+      "events": [
+        {
+          "id": "7",
+          "title": "Bryllupsfrisure",
+          "start": "2025-08-05T08:00:00",
+          "end": "2025-08-05T10:00:00",
+          "type": "work",
+          "allDay": false,
+          "syncStatus": "synced",
+          "metadata": { "duration": 120, "color": "#009688" }
+        }
+      ]
+    },
+    {
+      "name": "thomas.olsen",
+      "displayName": "Thomas Olsen",
+      "avatarUrl": "/avatars/thomas.jpg",
+      "employeeId": "EMP005",
+      "events": [
+        {
+          "id": "8",
+          "title": "Highlights",
+          "start": "2025-08-05T12:00:00",
+          "end": "2025-08-05T14:00:00",
+          "type": "work",
+          "allDay": false,
+          "syncStatus": "synced",
+          "metadata": { "duration": 120, "color": "#8bc34a" }
+        },
+        {
+          "id": "9",
+          "title": "Styling konsultation",
+          "start": "2025-08-05T15:00:00",
+          "end": "2025-08-05T15:30:00",
+          "type": "meeting",
+          "allDay": false,
+          "syncStatus": "synced",
+          "metadata": { "duration": 30, "color": "#cddc39" }
+        }
+      ]
+    }
+  ]
+}
\ No newline at end of file
diff --git a/.workbench/POC/data/mock-resources.json b/.workbench/POC/data/mock-resources.json
new file mode 100644
index 0000000..0776705
--- /dev/null
+++ b/.workbench/POC/data/mock-resources.json
@@ -0,0 +1,134 @@
+[
+  {
+    "id": "EMP001",
+    "name": "camilla.jensen",
+    "displayName": "Camilla Jensen",
+    "type": "person",
+    "avatarUrl": "/avatars/camilla.jpg",
+    "color": "#9c27b0",
+    "isActive": true,
+    "defaultSchedule": {
+      "1": { "start": "09:00", "end": "17:00" },
+      "2": { "start": "09:00", "end": "17:00" },
+      "3": { "start": "09:00", "end": "15:00" },
+      "4": { "start": "09:00", "end": "17:00" },
+      "5": { "start": "09:00", "end": "14:00" },
+      "6": null,
+      "7": null
+    },
+    "metadata": {
+      "role": "master stylist",
+      "specialties": ["balayage", "color", "bridal"]
+    }
+  },
+  {
+    "id": "EMP002",
+    "name": "isabella.hansen",
+    "displayName": "Isabella Hansen",
+    "type": "person",
+    "avatarUrl": "/avatars/isabella.jpg",
+    "color": "#e91e63",
+    "isActive": true,
+    "defaultSchedule": {
+      "1": { "start": "10:00", "end": "18:00" },
+      "2": { "start": "10:00", "end": "18:00" },
+      "3": { "start": "10:00", "end": "18:00" },
+      "4": { "start": "10:00", "end": "18:00" },
+      "5": { "start": "10:00", "end": "16:00" },
+      "6": null,
+      "7": null
+    },
+    "metadata": {
+      "role": "master stylist",
+      "specialties": ["highlights", "ombre", "styling"]
+    }
+  },
+  {
+    "id": "EMP003",
+    "name": "alexander.nielsen",
+    "displayName": "Alexander Nielsen",
+    "type": "person",
+    "avatarUrl": "/avatars/alexander.jpg",
+    "color": "#3f51b5",
+    "isActive": true,
+    "defaultSchedule": {
+      "1": { "start": "08:00", "end": "16:00" },
+      "2": { "start": "08:00", "end": "16:00" },
+      "3": { "start": "08:00", "end": "16:00" },
+      "4": { "start": "08:00", "end": "16:00" },
+      "5": { "start": "08:00", "end": "14:00" },
+      "6": null,
+      "7": null
+    },
+    "metadata": {
+      "role": "master stylist",
+      "specialties": ["men's cuts", "beard", "fade"]
+    }
+  },
+  {
+    "id": "EMP004",
+    "name": "viktor.andersen",
+    "displayName": "Viktor Andersen",
+    "type": "person",
+    "avatarUrl": "/avatars/viktor.jpg",
+    "color": "#009688",
+    "isActive": true,
+    "defaultSchedule": {
+      "1": { "start": "09:00", "end": "17:00" },
+      "2": null,
+      "3": { "start": "09:00", "end": "17:00" },
+      "4": { "start": "09:00", "end": "17:00" },
+      "5": { "start": "09:00", "end": "17:00" },
+      "6": { "start": "10:00", "end": "14:00" },
+      "7": null
+    },
+    "metadata": {
+      "role": "stylist",
+      "specialties": ["cuts", "styling", "perms"]
+    }
+  },
+  {
+    "id": "STUDENT001",
+    "name": "line.pedersen",
+    "displayName": "Line Pedersen (Elev)",
+    "type": "person",
+    "avatarUrl": "/avatars/line.jpg",
+    "color": "#8bc34a",
+    "isActive": true,
+    "defaultSchedule": {
+      "1": { "start": "09:00", "end": "15:00" },
+      "2": { "start": "09:00", "end": "15:00" },
+      "3": { "start": "09:00", "end": "15:00" },
+      "4": null,
+      "5": { "start": "09:00", "end": "15:00" },
+      "6": null,
+      "7": null
+    },
+    "metadata": {
+      "role": "student",
+      "specialties": ["wash", "blow-dry", "basic cuts"]
+    }
+  },
+  {
+    "id": "STUDENT002",
+    "name": "mads.larsen",
+    "displayName": "Mads Larsen (Elev)",
+    "type": "person",
+    "avatarUrl": "/avatars/mads.jpg",
+    "color": "#ff9800",
+    "isActive": true,
+    "defaultSchedule": {
+      "1": null,
+      "2": { "start": "10:00", "end": "16:00" },
+      "3": { "start": "10:00", "end": "16:00" },
+      "4": { "start": "10:00", "end": "16:00" },
+      "5": null,
+      "6": null,
+      "7": null
+    },
+    "metadata": {
+      "role": "student",
+      "specialties": ["wash", "styling assistance"]
+    }
+  }
+]
diff --git a/.workbench/POC/data/mock-teams.json b/.workbench/POC/data/mock-teams.json
new file mode 100644
index 0000000..6257ddc
--- /dev/null
+++ b/.workbench/POC/data/mock-teams.json
@@ -0,0 +1,14 @@
+[
+  {
+    "id": "team1",
+    "name": "Team Alpha",
+    "resourceIds": ["EMP001", "EMP002"],
+    "syncStatus": "synced"
+  },
+  {
+    "id": "team2",
+    "name": "Team Beta",
+    "resourceIds": ["EMP003", "EMP004"],
+    "syncStatus": "synced"
+  }
+]
diff --git a/.workbench/POC/data/tenant-settings.json b/.workbench/POC/data/tenant-settings.json
new file mode 100644
index 0000000..40d7782
--- /dev/null
+++ b/.workbench/POC/data/tenant-settings.json
@@ -0,0 +1,69 @@
+[
+  {
+    "id": "workweek",
+    "syncStatus": "synced",
+    "presets": {
+      "standard": {
+        "id": "standard",
+        "workDays": [1, 2, 3, 4, 5],
+        "label": "Man-Fre",
+        "periodDays": 7
+      },
+      "compressed": {
+        "id": "compressed",
+        "workDays": [1, 2, 3],
+        "label": "Man-Ons",
+        "periodDays": 7
+      },
+      "midweek": {
+        "id": "midweek",
+        "workDays": [4, 5],
+        "label": "Tors-Fre",
+        "periodDays": 7
+      },
+      "weekend": {
+        "id": "weekend",
+        "workDays": [6, 7],
+        "label": "Weekend",
+        "periodDays": 7
+      },
+      "fullweek": {
+        "id": "fullweek",
+        "workDays": [1, 2, 3, 4, 5, 6, 7],
+        "label": "Alle dage",
+        "periodDays": 7
+      },
+      "day": {
+        "id": "day",
+        "workDays": [1],
+        "label": "Dag",
+        "periodDays": 1
+      }
+    },
+    "defaultPreset": "standard",
+    "firstDayOfWeek": 1
+  },
+  {
+    "id": "grid",
+    "syncStatus": "synced",
+    "dayStartHour": 6,
+    "dayEndHour": 22,
+    "workStartHour": 8,
+    "workEndHour": 17,
+    "hourHeight": 80,
+    "snapInterval": 15
+  },
+  {
+    "id": "timeFormat",
+    "syncStatus": "synced",
+    "timezone": "Europe/Copenhagen",
+    "locale": "da-DK",
+    "use24HourFormat": true
+  },
+  {
+    "id": "views",
+    "syncStatus": "synced",
+    "availableViews": ["simple", "resource", "team", "department"],
+    "defaultView": "simple"
+  }
+]
diff --git a/.workbench/POC/data/viewconfigs.json b/.workbench/POC/data/viewconfigs.json
new file mode 100644
index 0000000..2e1f027
--- /dev/null
+++ b/.workbench/POC/data/viewconfigs.json
@@ -0,0 +1,45 @@
+[
+  {
+    "id": "day",
+    "groupings": [
+      { "type": "resource", "values": ["EMP001", "EMP002"], "idProperty": "resourceId" },
+      { "type": "date", "values": [], "idProperty": "date", "derivedFrom": "start", "hideHeader": true }
+    ]
+  },
+  {
+    "id": "simple",
+    "groupings": [
+      { "type": "date", "values": [], "idProperty": "date", "derivedFrom": "start" }
+    ]
+  },
+  {
+    "id": "resource",
+    "groupings": [
+      { "type": "resource", "values": ["EMP001", "EMP002"], "idProperty": "resourceId" },
+      { "type": "date", "values": [], "idProperty": "date", "derivedFrom": "start" }
+    ]
+  },
+  {
+    "id": "team",
+    "groupings": [
+      { "type": "team", "values": ["team1", "team2"] },
+      { "type": "resource", "values": ["EMP001", "EMP002", "EMP003", "EMP004"], "idProperty": "resourceId", "belongsTo": "team.resourceIds" },
+      { "type": "date", "values": [], "idProperty": "date", "derivedFrom": "start" }
+    ]
+  },
+  {
+    "id": "department",
+    "groupings": [
+      { "type": "department", "values": ["dept-styling", "dept-training"] },
+      { "type": "resource", "values": ["EMP001", "EMP002", "EMP003", "EMP004", "STUDENT001", "STUDENT002"], "idProperty": "resourceId", "belongsTo": "department.resourceIds" },
+      { "type": "date", "values": [], "idProperty": "date", "derivedFrom": "start" }
+    ]
+  },
+  {
+    "id": "picker",
+    "groupings": [
+      { "type": "resource", "values": ["EMP001", "EMP002", "EMP003", "EMP004"], "idProperty": "resourceId" },
+      { "type": "date", "values": [], "idProperty": "date", "derivedFrom": "start" }
+    ]
+  }
+]
diff --git a/.workbench/POC/docs/ai-booking-optimering.md b/.workbench/POC/docs/ai-booking-optimering.md
new file mode 100644
index 0000000..1312d50
--- /dev/null
+++ b/.workbench/POC/docs/ai-booking-optimering.md
@@ -0,0 +1,255 @@
+# AI Booking Optimering
+
+## Produktoversigt
+
+AI Booking Optimering er et intelligent tillægsmodul der hjælper saloner med at maksimere deres kalenderudnyttelse og reducere tabt omsætning fra tomme tidsslots.
+
+---
+
+## Features
+
+### Feature 1: Smart Tidsforslag (Real-time)
+
+Når kunder booker online, analyserer AI'en eksisterende bookinger og foreslår de mest optimale tidspunkter.
+
+**Hvordan det virker:**
+1. Kunden vælger ydelse (f.eks. Dameklip, 60 min)
+2. AI'en analyserer dagens/ugens bookinger for den valgte medarbejder
+3. Hvert ledigt tidsslot får en score baseret på:
+   - Minimering af huller
+   - Optimal udnyttelse af åbningstiden
+   - Kontinuitet i bookinger
+4. Top 2-3 bedste slots markeres med "Anbefalet" badge
+
+**Scoring-algoritme:**
+
+| Kriterium | Score |
+|-----------|-------|
+| Starter ved åbningstid | +3 |
+| Slutter præcis på næste booking | +3 |
+| Starter lige efter en booking | +2 |
+| Slutter ved lukketid | +1 |
+| Skaber hul < 30 min | -2 |
+
+**UX-principper:**
+- Blød anbefaling - kunden kan stadig vælge alle ledige tider
+- Grøn badge med AI-ikon på anbefalede tider
+- Info-tekst forklarer fordelen
+
+---
+
+### Feature 2: Kalender-optimering Dashboard
+
+Salonejere får et dashboard der identificerer huller og foreslår handlinger.
+
+**Dashboard-komponenter:**
+
+1. **Statistik-kort**
+   - Huller i dag
+   - Tabt omsætning (estimeret)
+   - Huller denne uge
+   - Potentiel besparelse
+
+2. **Mini-kalender**
+   - Visuel oversigt over ugen
+   - Farvekodede dage (grøn = optimalt, gul = huller, rød = kritisk)
+
+3. **Hul-liste**
+   - Detaljeret visning af hvert identificeret hul
+   - Medarbejder og tidspunkt
+   - Estimeret tabt omsætning
+   - AI-forslag til at fylde hullet
+
+4. **AI-forslag typer:**
+   - **Flyt booking**: Foreslå at flytte en eksisterende kundes tid
+   - **Venteliste**: Kontakt kunde fra ventelisten
+   - **Rabattilbud**: Send SMS med rabat for at fylde hullet
+
+5. **SMS-historik**
+   - Track sendte tilbud
+   - Accept/afvisning statistik
+   - Pending tilbud
+
+---
+
+## Teknisk Implementation
+
+### POC 1: poc-booking-v2.html
+
+**Tilføjede komponenter:**
+
+```javascript
+// Mock data for eksisterende bookinger
+const existingBookings = {
+  'EMP001': {
+    '2026-01-06': [
+      { start: '10:00', end: '11:00', service: 'Dameklip' },
+      { start: '13:30', end: '14:30', service: 'Herreklip' }
+    ]
+  }
+};
+
+// Scoring-algoritme
+function calculateOptimalSlots(serviceDuration, date, employeeId) {
+  // 1. Hent bookinger for dato/medarbejder
+  // 2. Generer alle mulige slots (30 min intervaller)
+  // 3. Tjek overlap med eksisterende bookinger
+  // 4. Beregn score for hvert ledigt slot
+  // 5. Marker top 3 med positiv score som "recommended"
+  return slots;
+}
+```
+
+**CSS-styling:**
+- `.time-slot.recommended` - Grøn border og baggrund
+- `.ai-badge` - Absolut positioneret badge med sparkle-ikon
+- `.ai-info` - Info-boks over tidsgrid
+
+### POC 2: poc-ai-booking-optimizer.html
+
+**Struktur:**
+- Topbar med AI-badge
+- Stats-grid med 4 KPI-kort
+- Main-grid med kalender og hul-liste
+- Sidebar med optimeringsscore og SMS-historik
+
+**Mock data:**
+- `gaps[]` - Identificerede huller med forslag
+- `weekDays[]` - Ugevisning med gap-status
+- `smsHistory[]` - Historik over sendte tilbud
+
+---
+
+## Forretningsværdi
+
+### ROI-beregning
+
+```
+Typisk salon:
+- 4 medarbejdere
+- 40 timer/uge pr. medarbejder
+- 15% tomme slots = 24 timer/uge tabt
+- Gennemsnitlig timepris: 500 kr.
+- Tabt omsætning: 12.000 kr./uge = 624.000 kr./år
+
+AI-optimering fylder 50% af huller:
+- Ekstra omsætning: 312.000 kr./år
+
+Pris for AI-modul: 499 kr./md = 5.988 kr./år
+ROI: 52x investering
+```
+
+### Nøgletal at tracke
+
+| Metrik | Beskrivelse |
+|--------|-------------|
+| Kalenderudnyttelse | % af tilgængelige timer der er booket |
+| Gennemsnitligt hul | Minutter tabt pr. dag i gaps |
+| Accept-rate | % af kunder der accepterer flyttetilbud |
+| Tabt omsætning | Estimeret kr. i tomme slots |
+| Optimeringsscore | Samlet effektivitet (mål: 90%+) |
+
+---
+
+## Fremtidig AI-udvidelse
+
+### Niveau 1: Regelbaseret (Nuværende POC)
+- Statiske scoring-regler
+- Ingen læring
+- Fungerer for alle saloner ens
+
+### Niveau 2: Machine Learning
+- Lærer fra salonens historik
+- Personlige kundeprofilenr
+- Forudsigelse af no-shows
+- Dynamisk prisjustering
+
+### ML-features (fremtidig):
+
+1. **Historisk mønstergenkendelse**
+   - Populære vs. døde tider
+   - Sæsonvariation
+   - Service-specifikke mønstre
+
+2. **Kundesegmentering**
+   - Fleksible vs. fastlåste kunder
+   - Pris-sensitive kunder
+   - No-show risiko-profiler
+
+3. **Intelligent rabat-beregning**
+   - Dynamisk rabat baseret på:
+     - Hullets "værdi"
+     - Kundens prissensitivitet
+     - Sandsynlighed for naturlig booking
+
+4. **Proaktiv optimering**
+   - Forudsig huller før de opstår
+   - Automatisk udsend tilbud
+   - Venteliste-matching
+
+---
+
+## Integration med eksisterende system
+
+### Data-flow
+
+```
+Booking system
+     │
+     ▼
+┌─────────────────┐
+│ AI Optimizer    │
+│  - Analyse      │
+│  - Scoring      │
+│  - Anbefalinger │
+└─────────────────┘
+     │
+     ▼
+┌─────────────────┐    ┌─────────────────┐
+│ Booking Widget  │    │ Dashboard       │
+│ (kundevisning)  │    │ (ejervisning)   │
+└─────────────────┘    └─────────────────┘
+```
+
+### API-endpoints (fremtidig)
+
+```
+GET  /api/ai/optimal-slots?date=X&employee=Y&duration=Z
+POST /api/ai/send-offer
+GET  /api/ai/gaps?week=X
+GET  /api/ai/stats
+```
+
+---
+
+## Konfiguration
+
+### Indstillinger pr. salon
+
+| Indstilling | Beskrivelse | Default |
+|-------------|-------------|---------|
+| `minGapMinutes` | Mindste hul der tæller som tabt | 30 min |
+| `recommendedSlots` | Antal anbefalede slots | 3 |
+| `defaultDiscount` | Standard rabat ved flytning | 5% |
+| `autoSendOffers` | Automatisk udsend tilbud | Fra |
+| `smsEnabled` | Aktiver SMS-udsendelse | Til |
+
+---
+
+## Filer
+
+| Fil | Beskrivelse |
+|-----|-------------|
+| `poc-booking-v2.html` | Kundens booking-widget med AI-anbefalinger |
+| `poc-ai-booking-optimizer.html` | Dashboard til salonejere |
+| `docs/ai-booking-optimering.md` | Denne dokumentation |
+
+---
+
+## Changelog
+
+### Version 1.0 (Januar 2026)
+- Initial POC implementation
+- Regelbaseret scoring-algoritme
+- Dashboard med hul-identifikation
+- SMS-historik tracking
diff --git a/.workbench/POC/fonts/Poppins-Black.woff b/.workbench/POC/fonts/Poppins-Black.woff
new file mode 100644
index 0000000..65f3801
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-Black.woff differ
diff --git a/.workbench/POC/fonts/Poppins-BlackItalic.woff b/.workbench/POC/fonts/Poppins-BlackItalic.woff
new file mode 100644
index 0000000..63eb02e
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-BlackItalic.woff differ
diff --git a/.workbench/POC/fonts/Poppins-Bold.woff b/.workbench/POC/fonts/Poppins-Bold.woff
new file mode 100644
index 0000000..28fe6b6
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-Bold.woff differ
diff --git a/.workbench/POC/fonts/Poppins-BoldItalic.woff b/.workbench/POC/fonts/Poppins-BoldItalic.woff
new file mode 100644
index 0000000..8ec438d
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-BoldItalic.woff differ
diff --git a/.workbench/POC/fonts/Poppins-ExtraBold.woff b/.workbench/POC/fonts/Poppins-ExtraBold.woff
new file mode 100644
index 0000000..10df1ac
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-ExtraBold.woff differ
diff --git a/.workbench/POC/fonts/Poppins-ExtraBoldItalic.woff b/.workbench/POC/fonts/Poppins-ExtraBoldItalic.woff
new file mode 100644
index 0000000..38090a0
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-ExtraBoldItalic.woff differ
diff --git a/.workbench/POC/fonts/Poppins-ExtraLight.woff b/.workbench/POC/fonts/Poppins-ExtraLight.woff
new file mode 100644
index 0000000..8eb4095
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-ExtraLight.woff differ
diff --git a/.workbench/POC/fonts/Poppins-ExtraLightItalic.woff b/.workbench/POC/fonts/Poppins-ExtraLightItalic.woff
new file mode 100644
index 0000000..560f65e
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-ExtraLightItalic.woff differ
diff --git a/.workbench/POC/fonts/Poppins-Italic.woff b/.workbench/POC/fonts/Poppins-Italic.woff
new file mode 100644
index 0000000..341cbb3
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-Italic.woff differ
diff --git a/.workbench/POC/fonts/Poppins-Light.woff b/.workbench/POC/fonts/Poppins-Light.woff
new file mode 100644
index 0000000..61f6a5c
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-Light.woff differ
diff --git a/.workbench/POC/fonts/Poppins-LightItalic.woff b/.workbench/POC/fonts/Poppins-LightItalic.woff
new file mode 100644
index 0000000..2706cd4
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-LightItalic.woff differ
diff --git a/.workbench/POC/fonts/Poppins-Medium.woff b/.workbench/POC/fonts/Poppins-Medium.woff
new file mode 100644
index 0000000..e2b717d
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-Medium.woff differ
diff --git a/.workbench/POC/fonts/Poppins-MediumItalic.woff b/.workbench/POC/fonts/Poppins-MediumItalic.woff
new file mode 100644
index 0000000..d8101a7
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-MediumItalic.woff differ
diff --git a/.workbench/POC/fonts/Poppins-Regular.woff b/.workbench/POC/fonts/Poppins-Regular.woff
new file mode 100644
index 0000000..609eb3d
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-Regular.woff differ
diff --git a/.workbench/POC/fonts/Poppins-SemiBold.woff b/.workbench/POC/fonts/Poppins-SemiBold.woff
new file mode 100644
index 0000000..c097e14
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-SemiBold.woff differ
diff --git a/.workbench/POC/fonts/Poppins-SemiBoldItalic.woff b/.workbench/POC/fonts/Poppins-SemiBoldItalic.woff
new file mode 100644
index 0000000..902dcfd
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-SemiBoldItalic.woff differ
diff --git a/.workbench/POC/fonts/Poppins-Thin.woff b/.workbench/POC/fonts/Poppins-Thin.woff
new file mode 100644
index 0000000..d21fbd3
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-Thin.woff differ
diff --git a/.workbench/POC/fonts/Poppins-ThinItalic.woff b/.workbench/POC/fonts/Poppins-ThinItalic.woff
new file mode 100644
index 0000000..ea3a42f
Binary files /dev/null and b/.workbench/POC/fonts/Poppins-ThinItalic.woff differ
diff --git a/.workbench/POC/icons/angle-small-left.svg b/.workbench/POC/icons/angle-small-left.svg
new file mode 100644
index 0000000..aed03e7
--- /dev/null
+++ b/.workbench/POC/icons/angle-small-left.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="512" height="512"><g id="_01_align_center" data-name="01 align center"><path d="M13.775,18.707,8.482,13.414a2,2,0,0,1,0-2.828l5.293-5.293,1.414,1.414L9.9,12l5.293,5.293Z"/></g></svg>
diff --git a/.workbench/POC/icons/angle-small-right.svg b/.workbench/POC/icons/angle-small-right.svg
new file mode 100644
index 0000000..f2a7cba
--- /dev/null
+++ b/.workbench/POC/icons/angle-small-right.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="512" height="512"><g id="_01_align_center" data-name="01 align center"><path d="M10.811,18.707,9.4,17.293,14.689,12,9.4,6.707l1.415-1.414L16.1,10.586a2,2,0,0,1,0,2.828Z"/></g></svg>
diff --git a/.workbench/POC/icons/bank.svg b/.workbench/POC/icons/bank.svg
new file mode 100644
index 0000000..838f254
--- /dev/null
+++ b/.workbench/POC/icons/bank.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m24 23a1 1 0 0 1 -1 1h-22a1 1 0 0 1 0-2h22a1 1 0 0 1 1 1zm-23.709-14.448a2.443 2.443 0 0 1 .153-2.566 4.716 4.716 0 0 1 1.668-1.5l7.501-3.904a5.174 5.174 0 0 1 4.774 0l7.5 3.907a4.716 4.716 0 0 1 1.668 1.5 2.443 2.443 0 0 1 .153 2.566 2.713 2.713 0 0 1 -2.416 1.445h-.292v8h1a1 1 0 0 1 0 2h-20a1 1 0 0 1 0-2h1v-8h-.292a2.713 2.713 0 0 1 -2.417-1.448zm4.709 9.448h3v-8h-3zm5-8v8h4v-8zm9 0h-3v8h3zm-16.937-2.375a.717.717 0 0 0 .645.375h18.584a.717.717 0 0 0 .645-.375.452.452 0 0 0 -.024-.5 2.7 2.7 0 0 0 -.949-.864l-7.5-3.907a3.176 3.176 0 0 0 -2.926 0l-7.5 3.907a2.712 2.712 0 0 0 -.949.865.452.452 0 0 0 -.026.499z"/></svg>
\ No newline at end of file
diff --git a/.workbench/POC/icons/booking.svg b/.workbench/POC/icons/booking.svg
new file mode 100644
index 0000000..7a65614
--- /dev/null
+++ b/.workbench/POC/icons/booking.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
+  <path d="m3.866,18.965c-.186.32-.521.5-.867.5-.17,0-.342-.043-.5-.134-1.542-.892-2.5-2.551-2.5-4.331V7C0,4.243,2.243,2,5,2v-1c0-.552.448-1,1-1s1,.448,1,1v1h7v-1c0-.552.447-1,1-1s1,.448,1,1v1c2.757,0,5,2.243,5,5v8c0,.552-.447,1-1,1s-1-.448-1-1v-6h-1c-.553,0-1-.448-1-1s.447-1,1-1h1c0-1.654-1.346-3-3-3H5c-1.654,0-3,1.346-3,3h8c.552,0,1,.448,1,1s-.448,1-1,1H2v6c0,1.068.575,2.064,1.5,2.599.478.276.642.888.365,1.366Zm16.892-.385l-3.749-1.401v-5.045c0-1.516-1.076-2.834-2.503-3.066-.881-.143-1.768.102-2.439.673-.672.571-1.058,1.405-1.058,2.286v7.563l-1.015-.808c-.007-.006-.016-.006-.023-.012-1.211-1.053-3.049-.975-4.153.207-1.13,1.208-1.066,3.11.13,4.23l.558.538c.186.18.435.28.694.28.9,0,1.342-1.095.694-1.72l-.568-.548c-.403-.378-.424-1.013-.046-1.416.375-.402,1.008-.421,1.41-.048.01.009,2.697,2.151,2.697,2.151.301.24.713.285,1.057.119.346-.167.566-.517.566-.901v-9.638c0-.294.129-.572.353-.763.228-.193.518-.273.822-.223.463.076.825.556.825,1.093v5.739c0,.417.259.791.65.937l4.399,1.644c1.104.412,1.866,1.438,1.943,2.612.035.529.475.935.997.935.022,0,.044,0,.066-.002.551-.037.969-.513.933-1.063-.129-1.958-1.4-3.668-3.24-4.354Z"/>
+</svg>
diff --git a/.workbench/POC/icons/check-in-calendar.svg b/.workbench/POC/icons/check-in-calendar.svg
new file mode 100644
index 0000000..a47968f
--- /dev/null
+++ b/.workbench/POC/icons/check-in-calendar.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
+  <path d="m24,7.5v11c0,3.033-2.467,5.5-5.5,5.5H5.5c-2.511,0-4.701-1.697-5.327-4.126-.207-.802.276-1.62,1.079-1.827.804-.208,1.62.277,1.827,1.079.284,1.104,1.28,1.874,2.421,1.874h13c1.378,0,2.5-1.122,2.5-2.5v-9.5H3v.5c0,.829-.671,1.5-1.5,1.5s-1.5-.671-1.5-1.5v-2C0,4.467,2.467,2,5.5,2h.5v-.5c0-.829.671-1.5,1.5-1.5s1.5.671,1.5,1.5v.5h6v-.5c0-.829.671-1.5,1.5-1.5s1.5.671,1.5,1.5v.5h.5c3.033,0,5.5,2.467,5.5,5.5Zm-15.346,10.748l3.063-3.063c.378-.378.378-.991,0-1.369l-3.063-3.063c-.61-.61-1.653-.178-1.653.685v1.563H1.5c-.829,0-1.5.671-1.5,1.5s.671,1.5,1.5,1.5h5.501v1.563c0,.863,1.043,1.295,1.653.685Z"/>
+</svg>
diff --git a/.workbench/POC/icons/coins.svg b/.workbench/POC/icons/coins.svg
new file mode 100644
index 0000000..6dbea92
--- /dev/null
+++ b/.workbench/POC/icons/coins.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M16.5,0c-4.206,0-7.5,1.977-7.5,4.5v2.587c-.483-.057-.985-.087-1.5-.087C3.294,7,0,8.977,0,11.5v8c0,2.523,3.294,4.5,7.5,4.5,3.407,0,6.216-1.297,7.16-3.131,.598,.087,1.214,.131,1.84,.131,4.206,0,7.5-1.977,7.5-4.5V4.5c0-2.523-3.294-4.5-7.5-4.5Zm5.5,12.5c0,1.18-2.352,2.5-5.5,2.5-.512,0-1.014-.035-1.5-.103v-1.984c.49,.057,.992,.087,1.5,.087,2.194,0,4.14-.538,5.5-1.411v.911ZM2,14.589c1.36,.873,3.306,1.411,5.5,1.411s4.14-.538,5.5-1.411v.911c0,1.18-2.352,2.5-5.5,2.5s-5.5-1.32-5.5-2.5v-.911Zm20-6.089c0,1.18-2.352,2.5-5.5,2.5-.535,0-1.06-.038-1.566-.112-.193-.887-.8-1.684-1.706-2.323,.984,.28,2.092,.435,3.272,.435,2.194,0,4.14-.538,5.5-1.411v.911Zm-5.5-6.5c3.148,0,5.5,1.32,5.5,2.5s-2.352,2.5-5.5,2.5-5.5-1.32-5.5-2.5,2.352-2.5,5.5-2.5ZM7.5,9c3.148,0,5.5,1.32,5.5,2.5s-2.352,2.5-5.5,2.5-5.5-1.32-5.5-2.5,2.352-2.5,5.5-2.5Zm0,13c-3.148,0-5.5-1.32-5.5-2.5v-.911c1.36,.873,3.306,1.411,5.5,1.411s4.14-.538,5.5-1.411v.911c0,1.18-2.352,2.5-5.5,2.5Zm9-3c-.512,0-1.014-.035-1.5-.103v-1.984c.49,.057,.992,.087,1.5,.087,2.194,0,4.14-.538,5.5-1.411v.911c0,1.18-2.352,2.5-5.5,2.5Z"/></svg>
diff --git a/.workbench/POC/icons/comment-sms.svg b/.workbench/POC/icons/comment-sms.svg
new file mode 100644
index 0000000..f6e7a17
--- /dev/null
+++ b/.workbench/POC/icons/comment-sms.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M19,24h-5.917C6.082,24,.47,19.208,.03,12.854-.211,9.378,1.057,5.977,3.509,3.521,5.96,1.066,9.364-.205,12.836,.028c6.26,.426,11.164,5.833,11.164,12.312v6.66c0,2.757-2.243,5-5,5ZM12.016,2.001c-2.657,0-5.209,1.049-7.092,2.934-2.043,2.046-3.1,4.882-2.899,7.781,.373,5.38,5.024,9.284,11.059,9.284h5.917c1.654,0,3-1.346,3-3v-6.66c0-5.431-4.084-9.962-9.299-10.315-.229-.016-.458-.023-.685-.023Zm2.984,7.624c0-.345-.28-.624-.625-.625-.399,0-.78,.173-1.042,.474l-1.333,1.526-1.352-1.548c-.251-.287-.578-.452-1.023-.452-.345,0-.625,.28-.625,.625v4.75c0,.345,.28,.625,.625,.625s.625-.28,.625-.625l.002-3.269,1.282,1.389c.251,.272,.681,.272,.932,0l1.281-1.388v3.267h.003c0,.345,.28,.625,.625,.625s.625-.28,.625-.625l-.003-.016,.003-4.734Zm-8.53,1.843c-.658-.243-1.257-.506-1.272-.506-.143-.097-.138-.243-.13-.302,.012-.079,.069-.273,.362-.361,.119-.035,.236-.049,.349-.047,.509,.008,.926,.324,.946,.34,.11,.095,.249,.158,.405,.158,.345,0,.625-.28,.625-.625,0-.197-.097-.365-.239-.48-.037-.031-.773-.648-1.766-.645-.216,0-.445,.03-.68,.101-.671,.202-1.146,.731-1.239,1.38-.087,.61,.178,1.197,.777,1.579,0,0,.678,.303,1.43,.58,.159,.059,.672,.276,.61,.621-.046,.256-.361,.521-.81,.521-.468,0-.919-.187-1.206-.503-.114-.125-.275-.206-.458-.206-.345,0-.625,.28-.625,.625,0,.161,.065,.304,.164,.414,.527,.566,1.309,.92,2.124,.92,1.021,0,1.88-.653,2.04-1.552,.121-.678-.186-1.562-1.408-2.014Zm12.558,0c-.658-.243-1.257-.506-1.272-.506-.143-.097-.138-.243-.13-.302,.012-.079,.069-.273,.362-.361,.119-.035,.236-.049,.349-.047,.509,.008,.926,.324,.946,.34,.11,.095,.249,.158,.405,.158,.345,0,.625-.28,.625-.625,0-.197-.097-.365-.239-.48-.037-.031-.773-.648-1.766-.645-.216,0-.445,.03-.68,.101-.671,.202-1.146,.731-1.239,1.38-.087,.61,.178,1.197,.777,1.579,0,0,.678,.303,1.43,.58,.159,.059,.672,.276,.61,.621-.046,.256-.361,.521-.81,.521-.468,0-.919-.187-1.206-.503-.114-.125-.275-.206-.458-.206-.345,0-.625,.28-.625,.625,0,.161,.065,.304,.164,.414,.527,.566,1.309,.92,2.124,.92,1.021,0,1.88-.653,2.04-1.552,.121-.678-.186-1.562-1.408-2.014Z"/></svg>
diff --git a/.workbench/POC/icons/created.svg b/.workbench/POC/icons/created.svg
new file mode 100644
index 0000000..663e635
--- /dev/null
+++ b/.workbench/POC/icons/created.svg
@@ -0,0 +1 @@
+<svg id="Layer_1" height="512" viewBox="0 0 24 24" width="512" xmlns="http://www.w3.org/2000/svg" data-name="Layer 1"><path d="m18 9.064a3.049 3.049 0 0 0 -.9-2.164 3.139 3.139 0 0 0 -4.334 0l-11.866 11.869a3.064 3.064 0 0 0 4.33 4.331l11.87-11.869a3.047 3.047 0 0 0 .9-2.167zm-14.184 12.624a1.087 1.087 0 0 1 -1.5 0 1.062 1.062 0 0 1 0-1.5l7.769-7.77 1.505 1.505zm11.872-11.872-2.688 2.689-1.5-1.505 2.689-2.688a1.063 1.063 0 1 1 1.5 1.5zm-10.825-6.961 1.55-.442.442-1.55a1.191 1.191 0 0 1 2.29 0l.442 1.55 1.55.442a1.191 1.191 0 0 1 0 2.29l-1.55.442-.442 1.55a1.191 1.191 0 0 1 -2.29 0l-.442-1.55-1.55-.442a1.191 1.191 0 0 1 0-2.29zm18.274 14.29-1.55.442-.442 1.55a1.191 1.191 0 0 1 -2.29 0l-.442-1.55-1.55-.442a1.191 1.191 0 0 1 0-2.29l1.55-.442.442-1.55a1.191 1.191 0 0 1 2.29 0l.442 1.55 1.55.442a1.191 1.191 0 0 1 0 2.29zm-5.382-14.645 1.356-.387.389-1.358a1.042 1.042 0 0 1 2 0l.387 1.356 1.356.387a1.042 1.042 0 0 1 0 2l-1.356.387-.387 1.359a1.042 1.042 0 0 1 -2 0l-.387-1.355-1.358-.389a1.042 1.042 0 0 1 0-2z"/></svg>
\ No newline at end of file
diff --git a/.workbench/POC/icons/credit-card.svg b/.workbench/POC/icons/credit-card.svg
new file mode 100644
index 0000000..e061fd1
--- /dev/null
+++ b/.workbench/POC/icons/credit-card.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Outline" viewBox="0 0 24 24" width="512" height="512"><circle cx="5.5" cy="15.5" r="1.5"/><path d="M19,3H5A5.006,5.006,0,0,0,0,8v8a5.006,5.006,0,0,0,5,5H19a5.006,5.006,0,0,0,5-5V8A5.006,5.006,0,0,0,19,3ZM5,5H19a3,3,0,0,1,3,3H2A3,3,0,0,1,5,5ZM19,19H5a3,3,0,0,1-3-3V10H22v6A3,3,0,0,1,19,19Z"/></svg>
diff --git a/.workbench/POC/icons/drag.svg b/.workbench/POC/icons/drag.svg
new file mode 100644
index 0000000..0ecb252
--- /dev/null
+++ b/.workbench/POC/icons/drag.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" width="800px" height="800px" viewBox="-32 0 512 512" xmlns="http://www.w3.org/2000/svg"><path d="M358.182 179.361c-19.493-24.768-52.679-31.945-79.872-19.098-15.127-15.687-36.182-22.487-56.595-19.629V67c0-36.944-29.736-67-66.286-67S89.143 30.056 89.143 67v161.129c-19.909-7.41-43.272-5.094-62.083 8.872-29.355 21.795-35.793 63.333-14.55 93.152l109.699 154.001C134.632 501.59 154.741 512 176 512h178.286c30.802 0 57.574-21.5 64.557-51.797l27.429-118.999A67.873 67.873 0 0 0 448 326v-84c0-46.844-46.625-79.273-89.818-62.639zM80.985 279.697l27.126 38.079c8.995 12.626 29.031 6.287 29.031-9.283V67c0-25.12 36.571-25.16 36.571 0v175c0 8.836 7.163 16 16 16h6.857c8.837 0 16-7.164 16-16v-35c0-25.12 36.571-25.16 36.571 0v35c0 8.836 7.163 16 16 16H272c8.837 0 16-7.164 16-16v-21c0-25.12 36.571-25.16 36.571 0v21c0 8.836 7.163 16 16 16h6.857c8.837 0 16-7.164 16-16 0-25.121 36.571-25.16 36.571 0v84c0 1.488-.169 2.977-.502 4.423l-27.43 119.001c-1.978 8.582-9.29 14.576-17.782 14.576H176c-5.769 0-11.263-2.878-14.697-7.697l-109.712-154c-14.406-20.223 14.994-42.818 29.394-22.606zM176.143 400v-96c0-8.837 6.268-16 14-16h6c7.732 0 14 7.163 14 16v96c0 8.837-6.268 16-14 16h-6c-7.733 0-14-7.163-14-16zm75.428 0v-96c0-8.837 6.268-16 14-16h6c7.732 0 14 7.163 14 16v96c0 8.837-6.268 16-14 16h-6c-7.732 0-14-7.163-14-16zM327 400v-96c0-8.837 6.268-16 14-16h6c7.732 0 14 7.163 14 16v96c0 8.837-6.268 16-14 16h-6c-7.732 0-14-7.163-14-16z"/></svg>
\ No newline at end of file
diff --git a/.workbench/POC/icons/envelope.svg b/.workbench/POC/icons/envelope.svg
new file mode 100644
index 0000000..2da3fb5
--- /dev/null
+++ b/.workbench/POC/icons/envelope.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Bold" viewBox="0 0 24 24" width="512" height="512"><path d="M18.5,1H5.5A5.506,5.506,0,0,0,0,6.5v11A5.506,5.506,0,0,0,5.5,23h13A5.506,5.506,0,0,0,24,17.5V6.5A5.506,5.506,0,0,0,18.5,1Zm0,3a2.476,2.476,0,0,1,1.643.631l-6.5,6.5a2.373,2.373,0,0,1-3.278,0l-6.5-6.5A2.476,2.476,0,0,1,5.5,4Zm0,16H5.5A2.5,2.5,0,0,1,3,17.5V8.017l5.239,5.239a5.317,5.317,0,0,0,7.521,0L21,8.017V17.5A2.5,2.5,0,0,1,18.5,20Z"/></svg>
diff --git a/.workbench/POC/icons/exclamation.svg b/.workbench/POC/icons/exclamation.svg
new file mode 100644
index 0000000..ce5eada
--- /dev/null
+++ b/.workbench/POC/icons/exclamation.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
+  <path d="m22.389,5.418l-3.808-3.808c-1.039-1.039-2.42-1.611-3.889-1.611h-5.385c-1.469,0-2.85.572-3.889,1.611l-3.808,3.808c-1.039,1.04-1.611,2.421-1.611,3.889v5.385c0,1.468.572,2.85,1.611,3.889l3.808,3.808c1.039,1.039,2.42,1.611,3.889,1.611h5.385c1.469,0,2.85-.572,3.889-1.611l3.808-3.808c1.039-1.04,1.611-2.421,1.611-3.889v-5.385c0-1.468-.572-2.85-1.611-3.889Zm-1.389,9.274c0,.667-.261,1.295-.732,1.768l-3.808,3.808c-.466.465-1.109.732-1.768.732h-5.385c-.658,0-1.302-.267-1.768-.732l-3.808-3.808c-.472-.473-.732-1.101-.732-1.768v-5.385c0-.667.261-1.295.732-1.768l3.808-3.808c.466-.465,1.109-.732,1.768-.732h5.385c.658,0,1.302.267,1.768.732l3.808,3.808c.472.473.732,1.101.732,1.768v5.385Zm-7.5-7.192v5c0,.829-.672,1.5-1.5,1.5s-1.5-.671-1.5-1.5v-5c0-.829.672-1.5,1.5-1.5s1.5.671,1.5,1.5Zm0,9c0,.828-.672,1.5-1.5,1.5s-1.5-.672-1.5-1.5.672-1.5,1.5-1.5,1.5.672,1.5,1.5Z"/>
+</svg>
diff --git a/.workbench/POC/icons/eye.svg b/.workbench/POC/icons/eye.svg
new file mode 100644
index 0000000..7e9da41
--- /dev/null
+++ b/.workbench/POC/icons/eye.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="512" height="512"><g id="_01_align_center" data-name="01 align center"><path d="M23.821,11.181v0C22.943,9.261,19.5,3,12,3S1.057,9.261.179,11.181a1.969,1.969,0,0,0,0,1.64C1.057,14.739,4.5,21,12,21s10.943-6.261,11.821-8.181A1.968,1.968,0,0,0,23.821,11.181ZM12,19c-6.307,0-9.25-5.366-10-6.989C2.75,10.366,5.693,5,12,5c6.292,0,9.236,5.343,10,7C21.236,13.657,18.292,19,12,19Z"/><path d="M12,7a5,5,0,1,0,5,5A5.006,5.006,0,0,0,12,7Zm0,8a3,3,0,1,1,3-3A3,3,0,0,1,12,15Z"/></g></svg>
diff --git a/.workbench/POC/icons/gift-card.svg b/.workbench/POC/icons/gift-card.svg
new file mode 100644
index 0000000..d761c8d
--- /dev/null
+++ b/.workbench/POC/icons/gift-card.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M19,6h-1.226c1.413-1.38,1.629-3.195,.545-4.64-.545-.728-1.34-1.198-2.239-1.326-.902-.131-1.795,.102-2.521,.646-.678,.508-1.178,1.155-1.547,1.813-.369-.659-.869-1.305-1.547-1.813C9.739,.135,8.844-.097,7.945,.034c-.899,.128-1.694,.599-2.239,1.326-1.078,1.437-.87,3.24,.547,4.64h-1.253C2.243,6,0,8.243,0,11v8c0,2.757,2.243,5,5,5h14c2.757,0,5-2.243,5-5V11c0-2.757-2.243-5-5-5Zm-4.24-3.72c.245-.184,.537-.28,.837-.28,.403,0,.898,.261,1.123,.56,.641,.854,.043,1.644-.343,2.013-1.561,1.385-3.217,1.427-3.358,1.428h-.013c.019-.091,.025-.186,.017-.283l-.002-.021c.089-.598,.461-2.458,1.739-3.416Zm-7.084,2.316c-.414-.395-1.011-1.182-.37-2.037,.225-.299,.552-.493,.922-.546,.373-.048,.739,.043,1.038,.267,1.279,.959,1.651,2.822,1.74,3.416l-.002,.021c-.008,.097-.002,.192,.017,.283h-.013c-.141,0-1.797-.042-3.332-1.403Zm-2.676,3.403h5.824c-.751,1.951-3.666,1.999-3.826,2-.552,0-.999,.448-.999,1s.448,1,1,1c1.417,0,3.697-.488,5-2.056,1.303,1.569,3.583,2.056,5,2.056,.552,0,1-.447,1-1s-.448-1-1-1c-.142,0-3.078-.026-3.827-2h5.827c1.654,0,3,1.346,3,3v6H2v-6c0-1.654,1.346-3,3-3Zm14,14H5c-1.654,0-3-1.346-3-3H22c0,1.654-1.346,3-3,3Z"/></svg>
diff --git a/.workbench/POC/icons/journal-alt.svg b/.workbench/POC/icons/journal-alt.svg
new file mode 100644
index 0000000..2cc7599
--- /dev/null
+++ b/.workbench/POC/icons/journal-alt.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
+  <path d="m15,2.766v-1.766c0-.553-.448-1-1-1s-1,.447-1,1v1h-2v-1c0-.553-.448-1-1-1s-1,.447-1,1v1h-2v-1c0-.553-.448-1-1-1s-1,.447-1,1v1h-2v-1c0-.553-.448-1-1-1s-1,.447-1,1v1.766c-.613.55-1,1.347-1,2.234v14c0,2.757,2.243,5,5,5h6c2.757,0,5-2.243,5-5V5c0-.886-.387-1.684-1-2.234Zm-1,16.234c0,1.654-1.346,3-3,3h-6c-1.654,0-3-1.346-3-3V5c0-.552.449-1,1-1h10c.551,0,1,.448,1,1v14Zm-2-11c0,.553-.448,1-1,1h-6c-.552,0-1-.447-1-1s.448-1,1-1h6c.552,0,1,.447,1,1Zm0,4c0,.553-.448,1-1,1h-6c-.552,0-1-.447-1-1s.448-1,1-1h6c.552,0,1,.447,1,1Zm-3,4c0,.553-.448,1-1,1h-3c-.552,0-1-.447-1-1s.448-1,1-1h3c.552,0,1,.447,1,1ZM21,0c-1.654,0-3,1.346-3,3v16.758c0,1.054.427,2.084,1.172,2.828l1.121,1.121c.195.195.451.293.707.293s.512-.098.707-.293l1.121-1.121c.745-.744,1.172-1.774,1.172-2.828V3c0-1.654-1.346-3-3-3Zm1,19.758c0,.526-.213,1.042-.586,1.414l-.414.414-.414-.414c-.373-.372-.586-.888-.586-1.414V3c0-.552.449-1,1-1s1,.448,1,1v16.758Z"/>
+</svg>
diff --git a/.workbench/POC/icons/loan.svg b/.workbench/POC/icons/loan.svg
new file mode 100644
index 0000000..7db1e08
--- /dev/null
+++ b/.workbench/POC/icons/loan.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24">
+  <path d="m23.018,8.785c-.595-.542-1.356-.821-2.169-.782-.804.037-1.545.386-2.085.981l-3.217,3.534c-.427-.704-1.124-1.224-1.945-1.425.246-.477.398-1.009.398-1.582,0-2.517-1.763-5.472-4.115-6.569.337-.352.666-.743.93-1.163.488-.772-.048-1.78-.962-1.78h-3.708c-.914,0-1.449,1.008-.962,1.78.265.42.593.81.93,1.163-2.352,1.096-4.115,4.052-4.115,6.569,0,.654.193,1.26.508,1.783-1.468.593-2.508,2.027-2.508,3.705v5c0,2.206,1.794,4,4,4h4.965c2.85,0,5.57-1.22,7.467-3.348l6.804-7.637c1.094-1.225.996-3.123-.218-4.23Zm-15.018-4.285c1.821.049,4,2.738,4,5.012,0,.821-.673,1.488-1.5,1.488h-5c-.827,0-1.5-.667-1.5-1.488,0-2.274,2.179-4.963,4-5.012Zm13.742,7.184l-6.805,7.638c-1.517,1.702-3.693,2.678-5.973,2.678h-4.965c-1.103,0-2-.897-2-2v-5c0-1.103.897-2,2-2h8.857c.63,0,1.143.512,1.143,1.142,0,.564-.422,1.051-.98,1.131l-5.161.737c-.547.078-.927.584-.849,1.131.078.546.584.922,1.132.848l5.161-.737c1.175-.168,2.128-.988,2.514-2.058l4.427-4.865c.181-.2.43-.316.699-.329.271-.007.528.082.728.262.407.372.44,1.009.072,1.421Z"/>
+</svg>
diff --git a/.workbench/POC/icons/mobilepay.svg b/.workbench/POC/icons/mobilepay.svg
new file mode 100644
index 0000000..feb2a8c
--- /dev/null
+++ b/.workbench/POC/icons/mobilepay.svg
@@ -0,0 +1,19 @@
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000" stroke-width="1.6799999999999997">
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round" stroke="#CCCCCC" stroke-width="3.936">
+
<defs>
+
<style>.a{fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;}</style>
+
</defs>
+
<path class="a" d="M18.924,19.1788l4.3315,10.45a21.1489,21.1489,0,0,1,9.042-2.1117,19.2351,19.2351,0,0,1,8.7714,2.1117v-10.45a10.3349,10.3349,0,0,0-3.5735-1.4078l-2.22-5.5768A20.3917,20.3917,0,0,0,26.45,13.9268C20.1693,16.6882,18.924,19.1788,18.924,19.1788Z"/>
+
<path class="a" d="M32.8978,27.5311,35.6164,33.76a2.3649,2.3649,0,0,1-1.2215,3.1135L21.9571,42.302a2.3651,2.3651,0,0,1-3.1135-1.2215L7.1292,14.24a2.3649,2.3649,0,0,1,1.2215-3.1135L20.7885,5.698A2.3651,2.3651,0,0,1,23.902,6.92l2.98,6.8279"/>
+
</g>
+
<g id="SVGRepo_iconCarrier">
+
<defs>
+
<style>.a{fill:none;stroke:#000000;stroke-linecap:round;stroke-linejoin:round;}</style>
+
</defs>
+
<path class="a" d="M18.924,19.1788l4.3315,10.45a21.1489,21.1489,0,0,1,9.042-2.1117,19.2351,19.2351,0,0,1,8.7714,2.1117v-10.45a10.3349,10.3349,0,0,0-3.5735-1.4078l-2.22-5.5768A20.3917,20.3917,0,0,0,26.45,13.9268C20.1693,16.6882,18.924,19.1788,18.924,19.1788Z"/>
+
<path class="a" d="M32.8978,27.5311,35.6164,33.76a2.3649,2.3649,0,0,1-1.2215,3.1135L21.9571,42.302a2.3651,2.3651,0,0,1-3.1135-1.2215L7.1292,14.24a2.3649,2.3649,0,0,1,1.2215-3.1135L20.7885,5.698A2.3651,2.3651,0,0,1,23.902,6.92l2.98,6.8279"/>
+
</g>
+
</svg>
\ No newline at end of file
diff --git a/.workbench/POC/icons/note-sticky.svg b/.workbench/POC/icons/note-sticky.svg
new file mode 100644
index 0000000..fc6bf16
--- /dev/null
+++ b/.workbench/POC/icons/note-sticky.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M19,0H5C2.24,0,0,2.24,0,5v14c0,2.76,2.24,5,5,5h11.34c1.34,0,2.59-.52,3.54-1.46l2.66-2.66c.94-.94,1.46-2.2,1.46-3.54V5c0-2.76-2.24-5-5-5ZM5,22c-1.65,0-3-1.35-3-3V5c0-1.65,1.35-3,3-3h14c1.65,0,3,1.35,3,3V15h-4c-1.65,0-3,1.35-3,3v4H5Zm13.46-.88c-.4,.4-.91,.68-1.46,.8v-3.93c0-.55,.45-1,1-1h3.93c-.12,.55-.4,1.06-.8,1.46l-2.66,2.66Z"/></svg>
diff --git a/.workbench/POC/icons/phone-flip.svg b/.workbench/POC/icons/phone-flip.svg
new file mode 100644
index 0000000..ec83b44
--- /dev/null
+++ b/.workbench/POC/icons/phone-flip.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M22.17,1.82l-1.05-.91c-1.21-1.21-3.17-1.21-4.38,0-.03,.03-1.88,2.44-1.88,2.44-1.14,1.2-1.14,3.09,0,4.28l1.16,1.46c-1.46,3.31-3.73,5.59-6.93,6.95l-1.46-1.17c-1.19-1.15-3.09-1.15-4.28,0,0,0-2.41,1.85-2.44,1.88-1.21,1.21-1.21,3.17-.05,4.33l1,1.15c1.15,1.15,2.7,1.78,4.38,1.78,7.64,0,17.76-10.13,17.76-17.76,0-1.67-.63-3.23-1.83-4.42ZM6.24,22c-1.14,0-2.19-.42-2.91-1.15l-1-1.15c-.41-.41-.43-1.08-.04-1.51,0,0,2.39-1.84,2.42-1.87,.41-.41,1.13-.41,1.55,0,.03,.03,2.04,1.64,2.04,1.64,.28,.22,.65,.28,.98,.15,4.14-1.58,7.11-4.54,8.82-8.81,.13-.33,.08-.71-.15-1,0,0-1.61-2.02-1.63-2.04-.43-.43-.43-1.12,0-1.55,.03-.03,1.87-2.42,1.87-2.42,.43-.39,1.1-.38,1.56,.08l1.05,.91c.77,.77,1.2,1.82,1.2,2.96,0,6.96-9.77,15.76-15.76,15.76Z"/></svg>
diff --git a/.workbench/POC/icons/search.svg b/.workbench/POC/icons/search.svg
new file mode 100644
index 0000000..884067f
--- /dev/null
+++ b/.workbench/POC/icons/search.svg
@@ -0,0 +1,22 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generator: Adobe Illustrator 25.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 513.749 513.749" style="enable-background:new 0 0 513.749 513.749;" xml:space="preserve" width="512" height="512">
+<g>
+	<path d="M504.352,459.061l-99.435-99.477c74.402-99.427,54.115-240.344-45.312-314.746S119.261-9.277,44.859,90.15   S-9.256,330.494,90.171,404.896c79.868,59.766,189.565,59.766,269.434,0l99.477,99.477c12.501,12.501,32.769,12.501,45.269,0   c12.501-12.501,12.501-32.769,0-45.269L504.352,459.061z M225.717,385.696c-88.366,0-160-71.634-160-160s71.634-160,160-160   s160,71.634,160,160C385.623,314.022,314.044,385.602,225.717,385.696z"/>
+</g>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+</svg>
diff --git a/.workbench/POC/icons/square-plus.svg b/.workbench/POC/icons/square-plus.svg
new file mode 100644
index 0000000..d9e4ae1
--- /dev/null
+++ b/.workbench/POC/icons/square-plus.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M17,12c0,.553-.448,1-1,1h-3v3c0,.553-.448,1-1,1s-1-.447-1-1v-3h-3c-.552,0-1-.447-1-1s.448-1,1-1h3v-3c0-.553,.448-1,1-1s1,.447,1,1v3h3c.552,0,1,.447,1,1Zm7-7v14c0,2.757-2.243,5-5,5H5c-2.757,0-5-2.243-5-5V5C0,2.243,2.243,0,5,0h14c2.757,0,5,2.243,5,5Zm-2,0c0-1.654-1.346-3-3-3H5c-1.654,0-3,1.346-3,3v14c0,1.654,1.346,3,3,3h14c1.654,0,3-1.346,3-3V5Z"/></svg>
diff --git a/.workbench/POC/icons/unlock.svg b/.workbench/POC/icons/unlock.svg
new file mode 100644
index 0000000..35971b9
--- /dev/null
+++ b/.workbench/POC/icons/unlock.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Isolation_Mode" data-name="Isolation Mode" viewBox="0 0 24 24" width="512" height="512"><path d="M8,8V7.151A4,4,0,0,1,15.494,5.2l2.618-1.465A7,7,0,0,0,5,7.151V8H2V21a3,3,0,0,0,3,3H19a3,3,0,0,0,3-3V8ZM5,21V11H19l0,10Z"/><rect x="10" y="14" width="4" height="3"/></svg>
diff --git a/.workbench/POC/icons/user.svg b/.workbench/POC/icons/user.svg
new file mode 100644
index 0000000..3145a9d
--- /dev/null
+++ b/.workbench/POC/icons/user.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="512" height="512"><g id="_01_align_center" data-name="01 align center"><path d="M21,24H19V18.957A2.96,2.96,0,0,0,16.043,16H7.957A2.96,2.96,0,0,0,5,18.957V24H3V18.957A4.963,4.963,0,0,1,7.957,14h8.086A4.963,4.963,0,0,1,21,18.957Z"/><path d="M12,12a6,6,0,1,1,6-6A6.006,6.006,0,0,1,12,12ZM12,2a4,4,0,1,0,4,4A4,4,0,0,0,12,2Z"/></g></svg>
diff --git a/.workbench/POC/icons/warning.svg b/.workbench/POC/icons/warning.svg
new file mode 100644
index 0000000..cf7068e
--- /dev/null
+++ b/.workbench/POC/icons/warning.svg
@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg xmlns="http://www.w3.org/2000/svg" id="Layer_1" data-name="Layer 1" viewBox="0 0 24 24" width="512" height="512"><path d="M23.08,15.33L15,2.57c-.68-.98-1.81-1.57-3-1.57s-2.32,.58-3.03,1.6L.93,15.31c-1.02,1.46-1.21,3.21-.5,4.56,.7,1.35,2.17,2.12,4.01,2.12h15.12c1.85,0,3.31-.77,4.01-2.12,.7-1.35,.51-3.09-.49-4.54ZM11,7c0-.55,.45-1,1-1s1,.45,1,1v6c0,.55-.45,1-1,1s-1-.45-1-1V7Zm1,12c-.83,0-1.5-.67-1.5-1.5s.67-1.5,1.5-1.5,1.5,.67,1.5,1.5-.67,1.5-1.5,1.5Z"/></svg>
diff --git a/.workbench/POC/month-view-design.html b/.workbench/POC/month-view-design.html
new file mode 100644
index 0000000..b9cfffe
--- /dev/null
+++ b/.workbench/POC/month-view-design.html
@@ -0,0 +1,536 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calendar Plantempus - Month View</title>
+    <style>
+        /* Use existing Calendar Plantempus variables and styling */
+        :root {
+            --hour-height: 60px;
+            --minute-height: 1px;
+            --snap-interval: 15;
+            --day-column-min-width: 140px;
+            --week-days: 7;
+            --header-height: 80px;
+            
+            --color-primary: #2196f3;
+            --color-secondary: #ff9800;
+            --color-success: #4caf50;
+            --color-warning: #ff5722;
+            --color-error: #f44336;
+            --color-text: #2c3e50;
+            --color-text-secondary: #6c757d;
+            --color-border: #e0e0e0;
+            --color-background: #ffffff;
+            --color-surface: #f8f9fa;
+            --color-hover: #f0f0f0;
+            
+            --transition-fast: 0.15s ease;
+            --border-radius: 4px;
+            --box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background-color: var(--color-surface);
+            color: var(--color-text);
+            line-height: 1.5;
+        }
+
+        /* Month grid container - matches existing swp-calendar-container */
+        .month-container {
+            background: var(--color-background);
+            border: 1px solid var(--color-border);
+            border-radius: var(--border-radius);
+            overflow: hidden;
+            margin: 20px;
+        }
+
+        /* Month grid layout with week numbers */
+        .month-grid {
+            display: grid;
+            grid-template-columns: 40px repeat(7, 1fr); /* Small column for week numbers + 7 days */
+            grid-template-rows: 40px repeat(6, 1fr);
+            min-height: 600px;
+        }
+
+        /* Week number header */
+        .week-header {
+            grid-column: 1;
+            grid-row: 1;
+            background: var(--color-surface);
+            border-right: 1px solid var(--color-border);
+            border-bottom: 1px solid var(--color-border);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: var(--color-text-secondary);
+            height: 40px;
+        }
+
+        /* Day headers - only day names, right aligned, smaller height */
+        .month-day-header {
+            background: var(--color-surface);
+            border-right: 1px solid var(--color-border);
+            border-bottom: 1px solid var(--color-border);
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            padding: 8px 12px;
+            font-weight: 600;
+            color: var(--color-text-secondary);
+            font-size: 0.875rem;
+            height: 40px;
+        }
+
+        .month-day-header:last-child {
+            border-right: none;
+        }
+
+        /* Week number cells */
+        .week-number {
+            grid-column: 1;
+            background: var(--color-surface);
+            border-right: 1px solid var(--color-border);
+            border-bottom: 1px solid var(--color-border);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: var(--color-text-secondary);
+        }
+
+        /* Month day cells - similar to existing day columns */
+        .month-day-cell {
+            border-right: 1px solid var(--color-border);
+            border-bottom: 1px solid var(--color-border);
+            padding: 8px;
+            background: var(--color-background);
+            transition: background-color var(--transition-fast);
+            position: relative;
+            min-height: 100px;
+            cursor: pointer;
+        }
+
+        .month-day-cell:hover {
+            background: var(--color-hover);
+        }
+
+        .month-day-cell:last-child {
+            border-right: none;
+        }
+
+        .month-day-cell.other-month {
+            background: var(--color-surface);
+            color: var(--color-text-secondary);
+        }
+
+        .month-day-cell.today {
+            background: #f0f8ff;
+            border-left: 3px solid var(--color-primary);
+        }
+
+        .month-day-cell.weekend {
+            background: #fafbfc;
+        }
+
+        .month-day-number {
+            font-weight: 600;
+            margin-bottom: 6px;
+            font-size: 0.875rem;
+        }
+
+        .month-day-cell.today .month-day-number {
+            color: var(--color-primary);
+            font-weight: 700;
+        }
+
+        /* Month events styling - compact version of existing events */
+        .month-events {
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+            max-height: 70px;
+            overflow: hidden;
+        }
+
+        .month-event {
+            background: #e3f2fd;
+            color: var(--color-primary);
+            padding: 1px 4px;
+            border-radius: 2px;
+            font-size: 10px;
+            font-weight: 500;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+            border-left: 2px solid var(--color-primary);
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            line-height: 1.2;
+        }
+
+        .month-event:hover {
+            transform: translateY(-1px);
+        }
+
+        /* Event categories - using existing color scheme */
+        .month-event.category-meeting {
+            background: #e8f5e8;
+            color: var(--color-success);
+            border-left-color: var(--color-success);
+        }
+
+        .month-event.category-deadline {
+            background: #ffebee;
+            color: var(--color-error);
+            border-left-color: var(--color-error);
+        }
+
+        .month-event.category-work {
+            background: #fff8e1;
+            color: var(--color-secondary);
+            border-left-color: var(--color-secondary);
+        }
+
+        .month-event.category-personal {
+            background: #f3e5f5;
+            color: #7b1fa2;
+            border-left-color: #9c27b0;
+        }
+
+        .month-event-more {
+            background: var(--color-surface);
+            color: var(--color-text-secondary);
+            padding: 1px 4px;
+            border-radius: 2px;
+            font-size: 9px;
+            text-align: center;
+            cursor: pointer;
+            border: 1px dashed var(--color-border);
+            margin-top: 1px;
+        }
+
+        .month-event-more:hover {
+            background: var(--color-hover);
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .month-container {
+                margin: 10px;
+            }
+
+            .month-grid {
+                grid-template-columns: 30px repeat(7, 1fr);
+                min-height: 400px;
+            }
+
+            .month-day-cell {
+                min-height: 60px;
+                padding: 4px;
+            }
+
+            .month-day-header {
+                padding: 8px 4px;
+                font-size: 0.75rem;
+            }
+
+            .month-event {
+                font-size: 9px;
+                padding: 1px 3px;
+            }
+
+            .month-events {
+                max-height: 40px;
+            }
+
+            .week-number {
+                font-size: 0.6rem;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="month-container">
+        <div class="month-grid">
+            <!-- Week number header -->
+            <div class="week-header">Uge</div>
+
+            <!-- Day headers - only day names, right aligned -->
+            <div class="month-day-header">Man</div>
+            <div class="month-day-header">Tir</div>
+            <div class="month-day-header">Ons</div>
+            <div class="month-day-header">Tor</div>
+            <div class="month-day-header">Fre</div>
+            <div class="month-day-header">Lør</div>
+            <div class="month-day-header">Søn</div>
+
+            <!-- Week 1 -->
+            <div class="week-number">1</div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">30</div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">31</div>
+                <div class="month-events">
+                    <div class="month-event category-personal">Nytår</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">1</div>
+                <div class="month-events">
+                    <div class="month-event category-personal">Nytårsdag</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">2</div>
+                <div class="month-events">
+                    <div class="month-event category-work">Tilbage på arbejde</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">3</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting">Team møde</div>
+                    <div class="month-event category-work">Review</div>
+                </div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">4</div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">5</div>
+                <div class="month-events">
+                    <div class="month-event category-personal">Familie</div>
+                </div>
+            </div>
+
+            <!-- Week 2 -->
+            <div class="week-number">2</div>
+            <div class="month-day-cell">
+                <div class="month-day-number">6</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting">Stand-up</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">7</div>
+                <div class="month-events">
+                    <div class="month-event category-deadline">Rapport</div>
+                    <div class="month-event category-meeting">1:1</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">8</div>
+                <div class="month-events">
+                    <div class="month-event category-work">Code review</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">9</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting">Planning</div>
+                    <div class="month-event category-work">Design</div>
+                    <div class="month-event-more">+1</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">10</div>
+                <div class="month-events">
+                    <div class="month-event category-work">Sprint review</div>
+                </div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">11</div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">12</div>
+                <div class="month-events">
+                    <div class="month-event category-personal">Brunch</div>
+                </div>
+            </div>
+
+            <!-- Week 3 -->
+            <div class="week-number">3</div>
+            <div class="month-day-cell">
+                <div class="month-day-number">13</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting">All hands</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">14</div>
+                <div class="month-events">
+                    <div class="month-event category-work">Deploy</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">15</div>
+                <div class="month-events">
+                    <div class="month-event category-deadline">Presentation</div>
+                    <div class="month-event category-meeting">Retro</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">16</div>
+                <div class="month-events">
+                    <div class="month-event category-work">Bug triage</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">17</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting">Planning</div>
+                </div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">18</div>
+                <div class="month-events">
+                    <div class="month-event category-personal">Koncert</div>
+                </div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">19</div>
+            </div>
+
+            <!-- Week 4 - Today -->
+            <div class="week-number">4</div>
+            <div class="month-day-cell today">
+                <div class="month-day-number">20</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting">Status møde</div>
+                    <div class="month-event category-work">Refactoring</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">21</div>
+                <div class="month-events">
+                    <div class="month-event category-deadline">Beta release</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">22</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting">Architecture</div>
+                    <div class="month-event category-work">Performance</div>
+                    <div class="month-event category-deadline">Docs</div>
+                    <div class="month-event-more">+2</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">23</div>
+                <div class="month-events">
+                    <div class="month-event category-work">Cleanup</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">24</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting">Weekly sync</div>
+                </div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">25</div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">26</div>
+                <div class="month-events">
+                    <div class="month-event category-personal">Fødselsdag</div>
+                </div>
+            </div>
+
+            <!-- Week 5 -->
+            <div class="week-number">5</div>
+            <div class="month-day-cell">
+                <div class="month-day-number">27</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting">Q1 planning</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">28</div>
+                <div class="month-events">
+                    <div class="month-event category-work">Tech talks</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">29</div>
+                <div class="month-events">
+                    <div class="month-event category-deadline">Monthly report</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">30</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting">Team building</div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">31</div>
+                <div class="month-events">
+                    <div class="month-event category-deadline">End of month</div>
+                </div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">1</div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">2</div>
+            </div>
+
+            <!-- Week 6 -->
+            <div class="week-number">6</div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">3</div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">4</div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">5</div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">6</div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">7</div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">8</div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">9</div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Add click handlers for events and days
+        document.addEventListener('click', function(e) {
+            if (e.target.classList.contains('month-event')) {
+                console.log('Event clicked:', e.target.textContent);
+            }
+            
+            if (e.target.classList.contains('month-event-more')) {
+                console.log('Show more events');
+            }
+            
+            if (e.target.classList.contains('month-day-cell') || e.target.closest('.month-day-cell')) {
+                const cell = e.target.closest('.month-day-cell');
+                const dayNumber = cell.querySelector('.month-day-number').textContent;
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/.workbench/POC/month-view-expanded.html b/.workbench/POC/month-view-expanded.html
new file mode 100644
index 0000000..1b36518
--- /dev/null
+++ b/.workbench/POC/month-view-expanded.html
@@ -0,0 +1,848 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Calendar Plantempus - Month View Expanded</title>
+    <style>
+        /* Use existing Calendar Plantempus variables and styling */
+        :root {
+            /* Event duration sizing */
+            --pixels-per-hour: 30px;
+            --min-event-height: 15px; /* 30 min minimum */
+            
+            --color-primary: #2196f3;
+            --color-secondary: #ff9800;
+            --color-success: #4caf50;
+            --color-warning: #ff5722;
+            --color-error: #f44336;
+            --color-text: #2c3e50;
+            --color-text-secondary: #6c757d;
+            --color-border: #e0e0e0;
+            --color-background: #ffffff;
+            --color-surface: #f8f9fa;
+            --color-hover: #f0f0f0;
+            
+            --transition-fast: 0.15s ease;
+            --border-radius: 4px;
+        }
+
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+            background-color: var(--color-surface);
+            color: var(--color-text);
+            line-height: 1.5;
+        }
+
+        /* Month grid container */
+        .month-container {
+            background: var(--color-background);
+            border: 1px solid var(--color-border);
+            border-radius: var(--border-radius);
+            overflow: hidden;
+            margin: 20px;
+        }
+
+        /* Month grid layout - rows auto-size based on content */
+        .month-grid {
+            display: grid;
+            grid-template-columns: 40px repeat(7, 1fr);
+            grid-template-rows: 40px repeat(6, auto);
+            min-height: 600px;
+        }
+
+        /* Week number header */
+        .week-header {
+            grid-column: 1;
+            grid-row: 1;
+            background: var(--color-surface);
+            border-right: 1px solid var(--color-border);
+            border-bottom: 1px solid var(--color-border);
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: var(--color-text-secondary);
+            height: 40px;
+        }
+
+        /* Day headers */
+        .month-day-header {
+            background: var(--color-surface);
+            border-right: 1px solid var(--color-border);
+            border-bottom: 1px solid var(--color-border);
+            display: flex;
+            align-items: center;
+            justify-content: flex-end;
+            padding: 8px 12px;
+            font-weight: 600;
+            color: var(--color-text-secondary);
+            font-size: 0.875rem;
+            height: 40px;
+        }
+
+        .month-day-header:last-child {
+            border-right: none;
+        }
+
+        /* Week number cells */
+        .week-number {
+            grid-column: 1;
+            background: var(--color-surface);
+            border-right: 1px solid var(--color-border);
+            border-bottom: 1px solid var(--color-border);
+            display: flex;
+            align-items: start;
+            justify-content: center;
+            padding-top: 8px;
+            font-size: 0.75rem;
+            font-weight: 600;
+            color: var(--color-text-secondary);
+        }
+
+        /* Month day cells */
+        .month-day-cell {
+            border-right: 1px solid var(--color-border);
+            border-bottom: 1px solid var(--color-border);
+            padding: 8px;
+            background: var(--color-background);
+            transition: background-color var(--transition-fast);
+            min-height: 80px;
+            cursor: pointer;
+        }
+
+        .month-day-cell:hover {
+            background: var(--color-hover);
+        }
+
+        .month-day-cell:last-child {
+            border-right: none;
+        }
+
+        .month-day-cell.other-month {
+            background: var(--color-surface);
+            color: var(--color-text-secondary);
+        }
+
+        .month-day-cell.today {
+            background: #f0f8ff;
+            border-left: 3px solid var(--color-primary);
+        }
+
+        .month-day-cell.weekend {
+            background: #fafbfc;
+        }
+
+        .month-day-number {
+            font-weight: 600;
+            margin-bottom: 6px;
+            font-size: 0.875rem;
+        }
+
+        .month-day-cell.today .month-day-number {
+            color: var(--color-primary);
+            font-weight: 700;
+        }
+
+        /* Events container */
+        .month-events {
+            display: flex;
+            flex-direction: column;
+            gap: 3px;
+        }
+
+        /* Individual events with duration-based minimum height */
+        .month-event {
+            background: #e3f2fd;
+            color: var(--color-text);
+            padding: 6px 8px;
+            border-radius: 4px;
+            cursor: pointer;
+            transition: all var(--transition-fast);
+            border-left: 3px solid var(--color-primary);
+            /* Min-height set inline based on duration */
+            display: flex;
+            flex-direction: column;
+            gap: 2px;
+        }
+
+        /* Event time range */
+        .event-time-range {
+            font-size: 11px;
+            color: var(--color-text-secondary);
+            font-weight: 500;
+        }
+
+        /* Event title */
+        .event-title {
+            font-size: 12px;
+            font-weight: 600;
+            color: var(--color-text);
+            line-height: 1.3;
+        }
+
+        /* Event subtitle/description */
+        .event-subtitle {
+            font-size: 11px;
+            color: var(--color-text-secondary);
+            font-weight: 400;
+            line-height: 1.3;
+        }
+
+        .month-event:hover {
+            transform: translateX(2px);
+            background: #d1e7fd;
+        }
+
+        /* Event categories */
+        .month-event.category-meeting {
+            background: #e8f5e8;
+            border-left-color: var(--color-success);
+        }
+
+        .month-event.category-meeting:hover {
+            background: #d4edd4;
+        }
+
+        .month-event.category-deadline {
+            background: #ffebee;
+            border-left-color: var(--color-error);
+        }
+
+        .month-event.category-deadline:hover {
+            background: #ffd6dc;
+        }
+
+        .month-event.category-work {
+            background: #fff8e1;
+            border-left-color: var(--color-secondary);
+        }
+
+        .month-event.category-work:hover {
+            background: #ffedcc;
+        }
+
+        .month-event.category-personal {
+            background: #f3e5f5;
+            border-left-color: #9c27b0;
+        }
+
+        .month-event.category-personal:hover {
+            background: #e8d1ec;
+        }
+
+        /* All-day events */
+        .month-event.all-day {
+            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+            border-left: none;
+        }
+
+        .month-event.all-day .event-time-range,
+        .month-event.all-day .event-title,
+        .month-event.all-day .event-subtitle {
+            color: white;
+        }
+
+        .month-event.all-day:hover {
+            background: linear-gradient(135deg, #5a72e8 0%, #6b42a0 100%);
+        }
+
+        /* Short events (30 min) - compact layout */
+        .month-event.short-event {
+            flex-direction: row;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .month-event.short-event .event-time-range {
+            flex-shrink: 0;
+        }
+
+        .month-event.short-event .event-title {
+            font-size: 11px;
+        }
+
+        .month-event.short-event .event-subtitle {
+            display: none;
+        }
+
+        /* Responsive adjustments */
+        @media (max-width: 768px) {
+            .month-container {
+                margin: 10px;
+            }
+
+            .month-grid {
+                grid-template-columns: 30px repeat(7, 1fr);
+                min-height: 500px;
+            }
+
+            .month-day-cell {
+                padding: 4px;
+                min-height: 60px;
+            }
+
+            .month-day-header {
+                padding: 8px 4px;
+                font-size: 0.75rem;
+            }
+
+            .month-event {
+                padding: 4px 6px;
+            }
+
+            .event-title {
+                font-size: 11px;
+            }
+
+            .event-time-range,
+            .event-subtitle {
+                font-size: 10px;
+            }
+
+            .week-number {
+                font-size: 0.6rem;
+            }
+
+            :root {
+                --pixels-per-hour: 20px;
+            }
+        }
+    </style>
+</head>
+<body>
+    <div class="month-container">
+        <div class="month-grid">
+            <!-- Week number header -->
+            <div class="week-header">Uge</div>
+
+            <!-- Day headers -->
+            <div class="month-day-header">Man</div>
+            <div class="month-day-header">Tir</div>
+            <div class="month-day-header">Ons</div>
+            <div class="month-day-header">Tor</div>
+            <div class="month-day-header">Fre</div>
+            <div class="month-day-header">Lør</div>
+            <div class="month-day-header">Søn</div>
+
+            <!-- Week 1 -->
+            <div class="week-number">1</div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">30</div>
+                <div class="month-events"></div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">31</div>
+                <div class="month-events">
+                    <div class="month-event category-personal" style="min-height: 60px;">
+                        <div class="event-time-range">20:00 - 22:00</div>
+                        <div class="event-title">Nytårsaften</div>
+                        <div class="event-subtitle">Fest med familie og venner</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">1</div>
+                <div class="month-events">
+                    <div class="month-event category-personal all-day" style="min-height: 30px;">
+                        <div class="event-time-range">Hele dagen</div>
+                        <div class="event-title">Nytårsdag</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">2</div>
+                <div class="month-events">
+                    <div class="month-event category-work" style="min-height: 30px;">
+                        <div class="event-time-range">09:00 - 10:00</div>
+                        <div class="event-title">Tilbage på arbejde</div>
+                        <div class="event-subtitle">Opstart efter ferien</div>
+                    </div>
+                    <div class="month-event category-meeting short-event" style="min-height: 15px;">
+                        <div class="event-time-range">10:00 - 10:30</div>
+                        <div class="event-title">Kick-off møde</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">3</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting" style="min-height: 45px;">
+                        <div class="event-time-range">09:00 - 10:30</div>
+                        <div class="event-title">Team møde</div>
+                        <div class="event-subtitle">Q1 planning og mål</div>
+                    </div>
+                    <div class="month-event category-work" style="min-height: 60px;">
+                        <div class="event-time-range">11:00 - 13:00</div>
+                        <div class="event-title">Projekt review</div>
+                        <div class="event-subtitle">Gennemgang af December projekter og status på Q1 initiativer</div>
+                    </div>
+                    <div class="month-event category-deadline short-event" style="min-height: 15px;">
+                        <div class="event-time-range">15:00 - 15:30</div>
+                        <div class="event-title">Sprint deadline</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">4</div>
+                <div class="month-events"></div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">5</div>
+                <div class="month-events">
+                    <div class="month-event category-personal" style="min-height: 75px;">
+                        <div class="event-time-range">18:00 - 20:30</div>
+                        <div class="event-title">Familie middag</div>
+                        <div class="event-subtitle">Hos mormor og morfar</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Week 2 -->
+            <div class="week-number">2</div>
+            <div class="month-day-cell">
+                <div class="month-day-number">6</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting short-event" style="min-height: 7.5px;">
+                        <div class="event-time-range">09:15 - 09:30</div>
+                        <div class="event-title">Stand-up</div>
+                    </div>
+                    <div class="month-event category-work" style="min-height: 45px;">
+                        <div class="event-time-range">10:00 - 11:30</div>
+                        <div class="event-title">Code review</div>
+                        <div class="event-subtitle">Frontend refactoring PR</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">7</div>
+                <div class="month-events">
+                    <div class="month-event category-deadline" style="min-height: 30px;">
+                        <div class="event-time-range">12:00 - 13:00</div>
+                        <div class="event-title">Rapport deadline</div>
+                        <div class="event-subtitle">Månedlig status rapport</div>
+                    </div>
+                    <div class="month-event category-meeting" style="min-height: 30px;">
+                        <div class="event-time-range">14:00 - 15:00</div>
+                        <div class="event-title">1:1 med chef</div>
+                        <div class="event-subtitle">Karriere udvikling</div>
+                    </div>
+                    <div class="month-event category-work short-event" style="min-height: 15px;">
+                        <div class="event-time-range">15:30 - 16:00</div>
+                        <div class="event-title">Design review</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">8</div>
+                <div class="month-events">
+                    <div class="month-event category-work" style="min-height: 30px;">
+                        <div class="event-time-range">10:00 - 11:00</div>
+                        <div class="event-title">Feature demo</div>
+                        <div class="event-subtitle">Ny dashboard funktionalitet</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">9</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting" style="min-height: 60px;">
+                        <div class="event-time-range">09:00 - 11:00</div>
+                        <div class="event-title">Planning møde</div>
+                        <div class="event-subtitle">Sprint 23 planning og estimering</div>
+                    </div>
+                    <div class="month-event category-work" style="min-height: 45px;">
+                        <div class="event-time-range">11:00 - 12:30</div>
+                        <div class="event-title">Design session</div>
+                        <div class="event-subtitle">UX workshop for ny feature</div>
+                    </div>
+                    <div class="month-event category-deadline short-event" style="min-height: 15px;">
+                        <div class="event-time-range">14:00 - 14:30</div>
+                        <div class="event-title">Release notes</div>
+                    </div>
+                    <div class="month-event category-meeting" style="min-height: 30px;">
+                        <div class="event-time-range">15:00 - 16:00</div>
+                        <div class="event-title">Tech sync</div>
+                        <div class="event-subtitle">Arkitektur diskussion</div>
+                    </div>
+                    <div class="month-event category-personal short-event" style="min-height: 15px;">
+                        <div class="event-time-range">17:00 - 17:30</div>
+                        <div class="event-title">Tandlæge</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">10</div>
+                <div class="month-events">
+                    <div class="month-event category-work" style="min-height: 60px;">
+                        <div class="event-time-range">13:00 - 15:00</div>
+                        <div class="event-title">Sprint review</div>
+                        <div class="event-subtitle">Demo af Sprint 22 leverancer til stakeholders</div>
+                    </div>
+                    <div class="month-event category-meeting" style="min-height: 30px;">
+                        <div class="event-time-range">15:00 - 16:00</div>
+                        <div class="event-title">Retrospective</div>
+                        <div class="event-subtitle">Sprint 22 læringer</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">11</div>
+                <div class="month-events"></div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">12</div>
+                <div class="month-events">
+                    <div class="month-event category-personal" style="min-height: 60px;">
+                        <div class="event-time-range">11:00 - 13:00</div>
+                        <div class="event-title">Brunch</div>
+                        <div class="event-subtitle">Med gamle venner fra uni</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Week 3 -->
+            <div class="week-number">3</div>
+            <div class="month-day-cell">
+                <div class="month-day-number">13</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting all-day" style="min-height: 30px;">
+                        <div class="event-time-range">Hele dagen</div>
+                        <div class="event-title">All hands møde</div>
+                        <div class="event-subtitle">Quarterly business update</div>
+                    </div>
+                    <div class="month-event category-work" style="min-height: 60px;">
+                        <div class="event-time-range">14:00 - 16:00</div>
+                        <div class="event-title">Architecture planning</div>
+                        <div class="event-subtitle">Microservices migration strategi</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">14</div>
+                <div class="month-events">
+                    <div class="month-event category-work" style="min-height: 90px;">
+                        <div class="event-time-range">10:00 - 13:00</div>
+                        <div class="event-title">Feature deployment</div>
+                        <div class="event-subtitle">Production release og monitoring af ny payment feature</div>
+                    </div>
+                    <div class="month-event category-meeting" style="min-height: 45px;">
+                        <div class="event-time-range">15:00 - 16:30</div>
+                        <div class="event-title">Client call</div>
+                        <div class="event-subtitle">Requirements gathering</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">15</div>
+                <div class="month-events">
+                    <div class="month-event category-deadline" style="min-height: 60px;">
+                        <div class="event-time-range">10:00 - 12:00</div>
+                        <div class="event-title">Client presentation</div>
+                        <div class="event-subtitle">Q4 results og Q1 roadmap præsentation</div>
+                    </div>
+                    <div class="month-event category-meeting" style="min-height: 30px;">
+                        <div class="event-time-range">14:00 - 15:00</div>
+                        <div class="event-title">Team retrospective</div>
+                        <div class="event-subtitle">Monthly team health check</div>
+                    </div>
+                    <div class="month-event category-work" style="min-height: 30px;">
+                        <div class="event-time-range">16:00 - 17:00</div>
+                        <div class="event-title">Bug triage</div>
+                        <div class="event-subtitle">Priority 1 issues</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">16</div>
+                <div class="month-events">
+                    <div class="month-event category-work" style="min-height: 45px;">
+                        <div class="event-time-range">11:00 - 12:30</div>
+                        <div class="event-title">Performance review</div>
+                        <div class="event-subtitle">Database optimization results</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">17</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting" style="min-height: 90px;">
+                        <div class="event-time-range">09:00 - 12:00</div>
+                        <div class="event-title">Sprint planning</div>
+                        <div class="event-subtitle">Sprint 24 - omfattende planning session med hele teamet</div>
+                    </div>
+                    <div class="month-event category-work" style="min-height: 60px;">
+                        <div class="event-time-range">13:00 - 15:00</div>
+                        <div class="event-title">Code cleanup</div>
+                        <div class="event-subtitle">Technical debt reduction</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">18</div>
+                <div class="month-events">
+                    <div class="month-event category-personal" style="min-height: 90px;">
+                        <div class="event-time-range">19:00 - 22:00</div>
+                        <div class="event-title">Koncert</div>
+                        <div class="event-subtitle">Royal Arena - med forband og afterparty</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">19</div>
+                <div class="month-events"></div>
+            </div>
+
+            <!-- Week 4 - Today -->
+            <div class="week-number">4</div>
+            <div class="month-day-cell today">
+                <div class="month-day-number">20</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting short-event" style="min-height: 15px;">
+                        <div class="event-time-range">09:00 - 09:30</div>
+                        <div class="event-title">Status møde</div>
+                    </div>
+                    <div class="month-event category-work" style="min-height: 45px;">
+                        <div class="event-time-range">10:30 - 12:00</div>
+                        <div class="event-title">Refactoring session</div>
+                        <div class="event-subtitle">Legacy code modernization</div>
+                    </div>
+                    <div class="month-event category-deadline" style="min-height: 30px;">
+                        <div class="event-time-range">12:00 - 13:00</div>
+                        <div class="event-title">Documentation due</div>
+                        <div class="event-subtitle">API documentation update</div>
+                    </div>
+                    <div class="month-event category-meeting" style="min-height: 45px;">
+                        <div class="event-time-range">14:00 - 15:30</div>
+                        <div class="event-title">Architecture review</div>
+                        <div class="event-subtitle">System design review med senior architects</div>
+                    </div>
+                    <div class="month-event category-work" style="min-height: 30px;">
+                        <div class="event-time-range">15:30 - 16:30</div>
+                        <div class="event-title">Performance testing</div>
+                        <div class="event-subtitle">Load testing results</div>
+                    </div>
+                    <div class="month-event category-personal short-event" style="min-height: 15px;">
+                        <div class="event-time-range">17:00 - 17:30</div>
+                        <div class="event-title">Gym</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">21</div>
+                <div class="month-events">
+                    <div class="month-event category-deadline" style="min-height: 120px;">
+                        <div class="event-time-range">14:00 - 18:00</div>
+                        <div class="event-title">Beta release</div>
+                        <div class="event-subtitle">Full release process including deployment, smoke testing, monitoring setup og stakeholder notification</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">22</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting" style="min-height: 45px;">
+                        <div class="event-time-range">09:00 - 10:30</div>
+                        <div class="event-title">Architecture review</div>
+                        <div class="event-subtitle">Final design approval</div>
+                    </div>
+                    <div class="month-event category-work" style="min-height: 60px;">
+                        <div class="event-time-range">11:00 - 13:00</div>
+                        <div class="event-title">Performance testing</div>
+                        <div class="event-subtitle">Full regression test suite execution</div>
+                    </div>
+                    <div class="month-event category-deadline" style="min-height: 30px;">
+                        <div class="event-time-range">14:00 - 15:00</div>
+                        <div class="event-title">Documentation deadline</div>
+                        <div class="event-subtitle">User guide completion</div>
+                    </div>
+                    <div class="month-event category-meeting" style="min-height: 45px;">
+                        <div class="event-time-range">15:00 - 16:30</div>
+                        <div class="event-title">Stakeholder meeting</div>
+                        <div class="event-subtitle">Project status update</div>
+                    </div>
+                    <div class="month-event category-work short-event" style="min-height: 15px;">
+                        <div class="event-time-range">16:30 - 17:00</div>
+                        <div class="event-title">Deploy to staging</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">23</div>
+                <div class="month-events">
+                    <div class="month-event category-work all-day" style="min-height: 30px;">
+                        <div class="event-time-range">Hele dagen</div>
+                        <div class="event-title">Code cleanup day</div>
+                        <div class="event-subtitle">Team-wide technical debt reduction</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">24</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting" style="min-height: 30px;">
+                        <div class="event-time-range">14:00 - 15:00</div>
+                        <div class="event-title">Weekly sync</div>
+                        <div class="event-subtitle">Cross-team alignment</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">25</div>
+                <div class="month-events"></div>
+            </div>
+            <div class="month-day-cell weekend">
+                <div class="month-day-number">26</div>
+                <div class="month-events">
+                    <div class="month-event category-personal all-day" style="min-height: 30px;">
+                        <div class="event-time-range">Hele dagen</div>
+                        <div class="event-title">Fødselsdag</div>
+                    </div>
+                    <div class="month-event category-personal" style="min-height: 120px;">
+                        <div class="event-time-range">18:00 - 22:00</div>
+                        <div class="event-title">Fødselsdagsfest</div>
+                        <div class="event-subtitle">Stor fest med familie og venner, middag og underholdning</div>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Week 5 -->
+            <div class="week-number">5</div>
+            <div class="month-day-cell">
+                <div class="month-day-number">27</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting all-day" style="min-height: 30px;">
+                        <div class="event-time-range">Hele dagen</div>
+                        <div class="event-title">Q1 planning - Day 1</div>
+                        <div class="event-subtitle">Quarterly planning workshop</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">28</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting all-day" style="min-height: 30px;">
+                        <div class="event-time-range">Hele dagen</div>
+                        <div class="event-title">Q1 planning - Day 2</div>
+                        <div class="event-subtitle">OKR setting og roadmap</div>
+                    </div>
+                    <div class="month-event category-work" style="min-height: 60px;">
+                        <div class="event-time-range">14:00 - 16:00</div>
+                        <div class="event-title">Tech talks</div>
+                        <div class="event-subtitle">Knowledge sharing session om nye teknologier</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">29</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting all-day" style="min-height: 30px;">
+                        <div class="event-time-range">Hele dagen</div>
+                        <div class="event-title">Q1 planning - Day 3</div>
+                        <div class="event-subtitle">Final alignment og præsentation</div>
+                    </div>
+                    <div class="month-event category-deadline" style="min-height: 60px;">
+                        <div class="event-time-range">16:00 - 18:00</div>
+                        <div class="event-title">Monthly report</div>
+                        <div class="event-subtitle">Januar status rapport og metrics sammensætning</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">30</div>
+                <div class="month-events">
+                    <div class="month-event category-meeting" style="min-height: 90px;">
+                        <div class="event-time-range">15:00 - 18:00</div>
+                        <div class="event-title">Team building</div>
+                        <div class="event-subtitle">Off-site team building aktivitet med middag</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell">
+                <div class="month-day-number">31</div>
+                <div class="month-events">
+                    <div class="month-event category-deadline all-day" style="min-height: 30px;">
+                        <div class="event-time-range">Hele dagen</div>
+                        <div class="event-title">End of month</div>
+                    </div>
+                    <div class="month-event category-work" style="min-height: 60px;">
+                        <div class="event-time-range">14:00 - 16:00</div>
+                        <div class="event-title">Month wrap-up</div>
+                        <div class="event-subtitle">Januar review og Februar forberedelse</div>
+                    </div>
+                </div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">1</div>
+                <div class="month-events"></div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">2</div>
+                <div class="month-events"></div>
+            </div>
+
+            <!-- Week 6 -->
+            <div class="week-number">6</div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">3</div>
+                <div class="month-events"></div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">4</div>
+                <div class="month-events"></div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">5</div>
+                <div class="month-events"></div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">6</div>
+                <div class="month-events"></div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">7</div>
+                <div class="month-events"></div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">8</div>
+                <div class="month-events"></div>
+            </div>
+            <div class="month-day-cell other-month">
+                <div class="month-day-number">9</div>
+                <div class="month-events"></div>
+            </div>
+        </div>
+    </div>
+
+    <script>
+        // Click handlers
+        document.addEventListener('click', function(e) {
+            if (e.target.closest('.month-event')) {
+                const event = e.target.closest('.month-event');
+                console.log('Event clicked:', event.querySelector('.event-title').textContent);
+                
+                // Remove previous selection
+                document.querySelectorAll('.month-event').forEach(el => {
+                    el.style.outline = '';
+                });
+                
+                // Highlight selected event
+                event.style.outline = '2px solid var(--color-primary)';
+            }
+            
+            if (e.target.closest('.month-day-cell')) {
+                const cell = e.target.closest('.month-day-cell');
+                const dayNumber = cell.querySelector('.month-day-number').textContent;
+                console.log('Day clicked:', dayNumber);
+            }
+        });
+    </script>
+</body>
+</html>
\ No newline at end of file
diff --git a/.workbench/POC/plantempus-sales.html b/.workbench/POC/plantempus-sales.html
new file mode 100644
index 0000000..9439cd8
--- /dev/null
+++ b/.workbench/POC/plantempus-sales.html
@@ -0,0 +1,1896 @@
+
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Plantempus - Din salon digitaliseret og optimeret</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+    }
+
+    /* ==========================================
+       VARIABLES
+       ========================================== */
+    :root {
+      --color-primary: #6B8CAE;
+      --color-primary-light: #E8EDF3;
+      --color-primary-dark: #4A6B8A;
+      --color-accent: #E07B39;
+      --color-accent-light: #FCF0E8;
+      --color-surface: #ffffff;
+      --color-background: #f8f9fa;
+      --color-border: #e0e0e0;
+      --color-text: #2c3e50;
+      --color-text-secondary: #6c757d;
+      --color-text-muted: #95a5a6;
+      --color-green: #52A675;
+      --color-blue: #6B8CAE;
+      --color-purple: #9B87B5;
+      --color-amber: #E07B39;
+      --font-family: 'Poppins', -apple-system, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html {
+      scroll-behavior: smooth;
+    }
+
+    body {
+      font-family: var(--font-family);
+      color: var(--color-text);
+      line-height: 1.6;
+      background: var(--color-surface);
+    }
+
+    /* ==========================================
+       NAVIGATION
+       ========================================== */
+    .navbar {
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      padding: 16px 0;
+    }
+
+    .navbar-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 0 24px;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .logo {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--color-primary);
+      text-decoration: none;
+    }
+
+    .logo-icon {
+      width: 40px;
+      height: 40px;
+      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 18px;
+    }
+
+    .nav-links {
+      display: flex;
+      gap: 32px;
+      list-style: none;
+    }
+
+    .nav-links a {
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      font-weight: 500;
+      transition: color 150ms ease;
+    }
+
+    .nav-links a:hover {
+      color: var(--color-primary);
+    }
+
+    .nav-cta {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 24px;
+      background: var(--color-primary);
+      color: white;
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 600;
+      transition: background 150ms ease;
+    }
+
+    .nav-cta:hover {
+      background: var(--color-primary-dark);
+    }
+
+    /* ==========================================
+       HERO SECTION
+       ========================================== */
+    .hero {
+      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+      color: white;
+      padding: 120px 24px;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+
+    .hero::before {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
+      opacity: 0.3;
+    }
+
+    .hero-container {
+      max-width: 900px;
+      margin: 0 auto;
+      position: relative;
+      z-index: 1;
+    }
+
+    .hero-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 24px;
+      font-size: 14px;
+      font-weight: 600;
+      margin-bottom: 24px;
+    }
+
+    .hero h1 {
+      font-size: 56px;
+      font-weight: 700;
+      line-height: 1.2;
+      margin-bottom: 24px;
+    }
+
+    .hero-subtitle {
+      font-size: 24px;
+      font-weight: 400;
+      opacity: 0.95;
+      margin-bottom: 40px;
+    }
+
+    .hero-cta-group {
+      display: flex;
+      gap: 16px;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
+    .btn-primary {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 16px 32px;
+      background: white;
+      color: var(--color-primary);
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 600;
+      font-size: 16px;
+      transition: transform 150ms ease, box-shadow 150ms ease;
+    }
+
+    .btn-primary:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    }
+
+    .btn-secondary {
+      display: inline-flex;
+      align-items: center;
+      gap: 10px;
+      padding: 16px 32px;
+      background: rgba(255, 255, 255, 0.2);
+      color: white;
+      border: 2px solid white;
+      border-radius: 8px;
+      text-decoration: none;
+      font-weight: 600;
+      font-size: 16px;
+      transition: background 150ms ease;
+    }
+
+    .btn-secondary:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+
+    /* ==========================================
+       SECTIONS
+       ========================================== */
+    .section {
+      padding: 80px 24px;
+    }
+
+    .section-alt {
+      background: var(--color-background);
+    }
+
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    .section-header {
+      text-align: center;
+      margin-bottom: 60px;
+    }
+
+    .section-badge {
+      display: inline-block;
+      padding: 6px 16px;
+      background: var(--color-primary-light);
+      color: var(--color-primary);
+      border-radius: 24px;
+      font-size: 13px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 16px;
+    }
+
+    .section-title {
+      font-size: 42px;
+      font-weight: 700;
+      color: var(--color-text);
+      margin-bottom: 16px;
+    }
+
+    .section-subtitle {
+      font-size: 20px;
+      color: var(--color-text-secondary);
+      max-width: 700px;
+      margin: 0 auto;
+    }
+
+    /* ==========================================
+       PITCH SECTION
+       ========================================== */
+    .pitch-box {
+      max-width: 800px;
+      margin: 0 auto;
+      padding: 40px;
+      background: var(--color-surface);
+      border-radius: 16px;
+      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
+      font-size: 18px;
+      line-height: 1.8;
+      color: var(--color-text);
+    }
+
+    .pitch-highlight {
+      color: var(--color-primary);
+      font-weight: 600;
+    }
+
+    /* ==========================================
+       FEATURE GRID
+       ========================================== */
+    .feature-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 32px;
+    }
+
+    @media (max-width: 900px) {
+      .feature-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    @media (max-width: 600px) {
+      .feature-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .feature-card {
+      padding: 32px;
+      background: var(--color-surface);
+      border-radius: 12px;
+      border: 1px solid var(--color-border);
+      transition: transform 150ms ease, box-shadow 150ms ease;
+    }
+
+    .feature-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 8px 24px rgba(0, 137, 123, 0.15);
+    }
+
+    .feature-icon {
+      width: 56px;
+      height: 56px;
+      background: var(--color-primary-light);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 20px;
+    }
+
+    .feature-icon i {
+      font-size: 28px;
+      color: var(--color-primary);
+    }
+
+    .feature-title {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 12px;
+      color: var(--color-text);
+    }
+
+    .feature-desc {
+      color: var(--color-text-secondary);
+      line-height: 1.6;
+    }
+
+    /* ==========================================
+       AI SECTION
+       ========================================== */
+    .ai-showcase {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 48px;
+      align-items: center;
+    }
+
+    @media (max-width: 900px) {
+      .ai-showcase {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .ai-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 16px;
+      background: linear-gradient(135deg, var(--color-accent) 0%, var(--color-amber) 100%);
+      color: white;
+      border-radius: 24px;
+      font-size: 13px;
+      font-weight: 600;
+      margin-bottom: 20px;
+    }
+
+    .ai-title {
+      font-size: 36px;
+      font-weight: 700;
+      margin-bottom: 20px;
+      color: var(--color-text);
+    }
+
+    .ai-desc {
+      font-size: 18px;
+      color: var(--color-text-secondary);
+      margin-bottom: 32px;
+      line-height: 1.7;
+    }
+
+    .ai-stats {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 24px;
+    }
+
+    .ai-stat {
+      text-align: center;
+      padding: 20px;
+      background: var(--color-background);
+      border-radius: 12px;
+    }
+
+    .ai-stat-value {
+      font-size: 32px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-primary);
+      margin-bottom: 8px;
+    }
+
+    .ai-stat-label {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    .ai-visual {
+      background: var(--color-background);
+      border-radius: 16px;
+      padding: 40px;
+      border: 2px solid var(--color-border);
+    }
+
+    /* ==========================================
+       BENEFITS SECTION
+       ========================================== */
+    .benefits-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 40px;
+    }
+
+    @media (max-width: 768px) {
+      .benefits-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .benefit-item {
+      display: flex;
+      gap: 20px;
+    }
+
+    .benefit-icon {
+      width: 48px;
+      height: 48px;
+      background: var(--color-primary);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .benefit-icon i {
+      font-size: 24px;
+      color: white;
+    }
+
+    .benefit-content h3 {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: var(--color-text);
+    }
+
+    .benefit-content p {
+      color: var(--color-text-secondary);
+      line-height: 1.6;
+    }
+
+    /* ==========================================
+       PRICING SECTION
+       ========================================== */
+    .pricing-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 32px;
+      max-width: 1100px;
+      margin: 0 auto;
+    }
+
+    @media (max-width: 900px) {
+      .pricing-grid {
+        grid-template-columns: 1fr;
+        max-width: 400px;
+      }
+    }
+
+    .pricing-card {
+      background: var(--color-surface);
+      border: 2px solid var(--color-border);
+      border-radius: 16px;
+      padding: 40px 32px;
+      position: relative;
+      transition: transform 150ms ease, box-shadow 150ms ease;
+    }
+
+    .pricing-card:hover {
+      transform: translateY(-8px);
+      box-shadow: 0 12px 32px rgba(0, 137, 123, 0.15);
+    }
+
+    .pricing-card.featured {
+      border-color: var(--color-primary);
+      box-shadow: 0 8px 32px rgba(0, 137, 123, 0.2);
+    }
+
+    .pricing-badge {
+      position: absolute;
+      top: -12px;
+      left: 50%;
+      transform: translateX(-50%);
+      padding: 6px 16px;
+      background: var(--color-primary);
+      color: white;
+      border-radius: 24px;
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    .pricing-name {
+      font-size: 24px;
+      font-weight: 600;
+      margin-bottom: 8px;
+      color: var(--color-text);
+    }
+
+    .pricing-users {
+      color: var(--color-text-secondary);
+      font-size: 14px;
+      margin-bottom: 24px;
+    }
+
+    .pricing-price {
+      display: flex;
+      align-items: baseline;
+      gap: 8px;
+      margin-bottom: 32px;
+    }
+
+    .pricing-amount {
+      font-size: 48px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    .pricing-period {
+      font-size: 18px;
+      color: var(--color-text-secondary);
+    }
+
+    .pricing-features {
+      list-style: none;
+      margin-bottom: 32px;
+    }
+
+    .pricing-features li {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 10px 0;
+      color: var(--color-text);
+    }
+
+    .pricing-features i {
+      color: var(--color-accent);
+      font-size: 20px;
+      flex-shrink: 0;
+      margin-top: 2px;
+    }
+
+    .pricing-cta {
+      display: block;
+      width: 100%;
+      padding: 14px 24px;
+      background: var(--color-primary);
+      color: white;
+      border: none;
+      border-radius: 8px;
+      font-weight: 600;
+      font-size: 16px;
+      font-family: var(--font-family);
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    .pricing-cta:hover {
+      background: var(--color-primary-dark);
+    }
+
+    .pricing-card.featured .pricing-cta {
+      background: var(--color-primary-dark);
+    }
+
+    .pricing-card:not(.featured) .pricing-cta {
+      background: transparent;
+      color: var(--color-primary);
+      border: 2px solid var(--color-primary);
+    }
+
+    /* ==========================================
+       TESTIMONIALS
+       ========================================== */
+    .testimonials-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 32px;
+    }
+
+    @media (max-width: 900px) {
+      .testimonials-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .testimonial-card {
+      background: var(--color-surface);
+      padding: 32px;
+      border-radius: 12px;
+      border: 1px solid var(--color-border);
+    }
+
+    .testimonial-quote {
+      font-size: 16px;
+      line-height: 1.7;
+      color: var(--color-text);
+      margin-bottom: 24px;
+      font-style: italic;
+    }
+
+    .testimonial-author {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    .testimonial-avatar {
+      width: 48px;
+      height: 48px;
+      background: var(--color-accent);
+      color: white;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 18px;
+    }
+
+    .testimonial-info {
+      flex: 1;
+    }
+
+    .testimonial-name {
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    .testimonial-title {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       ROI SECTION
+       ========================================== */
+    .roi-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 32px;
+      max-width: 1000px;
+      margin: 0 auto;
+    }
+
+    @media (max-width: 768px) {
+      .roi-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    .roi-card {
+      text-align: center;
+      padding: 32px 24px;
+      background: var(--color-surface);
+      border-radius: 12px;
+      border: 2px solid var(--color-border);
+    }
+
+    .roi-value {
+      font-size: 48px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-primary);
+      margin-bottom: 8px;
+    }
+
+    .roi-label {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       CTA SECTION
+       ========================================== */
+    .cta-section {
+      background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
+      color: white;
+      padding: 80px 24px;
+      text-align: center;
+    }
+
+    .cta-section h2 {
+      font-size: 42px;
+      font-weight: 700;
+      margin-bottom: 20px;
+    }
+
+    .cta-section p {
+      font-size: 20px;
+      opacity: 0.95;
+      margin-bottom: 40px;
+    }
+
+    /* ==========================================
+       FOOTER
+       ========================================== */
+    .footer {
+      background: var(--color-text);
+      color: var(--color-text-secondary);
+      padding: 60px 24px 32px;
+    }
+
+    .footer-container {
+      max-width: 1200px;
+      margin: 0 auto;
+      display: grid;
+      grid-template-columns: 2fr 1fr 1fr 1fr;
+      gap: 48px;
+      margin-bottom: 40px;
+    }
+
+    @media (max-width: 768px) {
+      .footer-container {
+        grid-template-columns: 1fr;
+        gap: 32px;
+      }
+    }
+
+    .footer-logo {
+      color: white;
+      font-size: 24px;
+      font-weight: 700;
+      margin-bottom: 16px;
+    }
+
+    .footer-desc {
+      line-height: 1.7;
+      margin-bottom: 20px;
+    }
+
+    .footer-title {
+      color: white;
+      font-weight: 600;
+      margin-bottom: 16px;
+    }
+
+    .footer-links {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .footer-links a {
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      transition: color 150ms ease;
+    }
+
+    .footer-links a:hover {
+      color: var(--color-primary);
+    }
+
+    .footer-bottom {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding-top: 32px;
+      border-top: 1px solid rgba(255, 255, 255, 0.1);
+      text-align: center;
+    }
+
+    /* ==========================================
+       MODULE CARDS (for detailed features)
+       ========================================== */
+    .module-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 24px;
+    }
+
+    @media (max-width: 768px) {
+      .module-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .module-card {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 12px;
+      padding: 28px;
+      transition: border-color 150ms ease;
+    }
+
+    .module-card:hover {
+      border-color: var(--color-primary);
+    }
+
+    .module-header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    .module-icon {
+      width: 48px;
+      height: 48px;
+      background: var(--color-primary-light);
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .module-icon i {
+      font-size: 24px;
+      color: var(--color-primary);
+    }
+
+    .module-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    .module-features {
+      list-style: none;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .module-features li {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 14px;
+      color: var(--color-text-secondary);
+    }
+
+    .module-features i {
+      color: var(--color-accent);
+      font-size: 16px;
+      flex-shrink: 0;
+    }
+
+    /* ==========================================
+       STATS BAR
+       ========================================== */
+    .stats-bar {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 24px;
+      padding: 60px 24px;
+      background: var(--color-primary-dark);
+      color: white;
+    }
+
+    @media (max-width: 768px) {
+      .stats-bar {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    .stat-item {
+      text-align: center;
+    }
+
+    .stat-value {
+      font-size: 48px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      margin-bottom: 8px;
+    }
+
+    .stat-label {
+      font-size: 16px;
+      opacity: 0.9;
+    }
+
+    /* ==========================================
+       RESPONSIVE
+       ========================================== */
+    @media (max-width: 768px) {
+      .hero h1 {
+        font-size: 36px;
+      }
+
+      .hero-subtitle {
+        font-size: 18px;
+      }
+
+      .section-title {
+        font-size: 32px;
+      }
+
+      .nav-links {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Navigation -->
+  <nav class="navbar">
+    <div class="navbar-container">
+      <a href="#" class="logo">
+        <div class="logo-icon">P</div>
+        <span>Plantempus</span>
+      </a>
+      <ul class="nav-links">
+        <li><a href="#features">Features</a></li>
+        <li><a href="#ai">AI-Innovation</a></li>
+        <li><a href="#pricing">Priser</a></li>
+        <li><a href="#demo">Demo</a></li>
+      </ul>
+      <a href="#pricing" class="nav-cta">
+        <i class="ph ph-rocket-launch"></i>
+        Kom i gang
+      </a>
+    </div>
+  </nav>
+
+  <!-- Hero Section -->
+  <section class="hero">
+    <div class="hero-container">
+      <div class="hero-badge">
+        <i class="ph ph-scissors"></i>
+        Til professionelle frisører og skønhedssaloner
+      </div>
+      <h1>Mere tid til det du er god til</h1>
+      <p class="hero-subtitle">
+        Plantempus tager sig af booking, administration og papirarbejde - så du kan fokusere på dine kunder og dit håndværk.
+      </p>
+      <div class="hero-cta-group">
+        <a href="#pricing" class="btn-primary">
+          <i class="ph ph-rocket-launch"></i>
+          Prøv gratis i 14 dage
+        </a>
+        <a href="#demo" class="btn-secondary">
+          <i class="ph ph-play"></i>
+          Se demo
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Stats Bar -->
+  <div class="stats-bar">
+    <div class="stat-item">
+      <div class="stat-value">10t</div>
+      <div class="stat-label">Mere tid til kunder om ugen</div>
+    </div>
+    <div class="stat-item">
+      <div class="stat-value">0 kr</div>
+      <div class="stat-label">I tabte bookinger</div>
+    </div>
+    <div class="stat-item">
+      <div class="stat-value">24/7</div>
+      <div class="stat-label">Kunderne kan selv booke</div>
+    </div>
+    <div class="stat-item">
+      <div class="stat-value">5 min</div>
+      <div class="stat-label">At lukke kassen dagligt</div>
+    </div>
+  </div>
+
+  <!-- Elevator Pitch Section -->
+  <section class="section">
+    <div class="container">
+      <div class="section-header">
+        <div class="section-badge">For professionelle frisører</div>
+        <h2 class="section-title">Gør det du elsker - ikke papirarbejde</h2>
+      </div>
+      
+      <div class="pitch-box">
+        <p>
+          <strong class="pitch-highlight">Du blev frisør for at klippe hår - ikke for at sidde med papirarbejde.</strong>
+          Plantempus håndterer booking, påmindelser og løn automatisk.
+          Kunderne booker selv online. Du får tid til det du er god til.
+        </p>
+        <p style="margin-top: 20px;">
+          <strong class="pitch-highlight">10 timer mere om ugen til dine kunder.</strong>
+          Ingen dobbeltbookinger. Ingen glemte påmindelser. Ingen timer ved Excel.
+          Bare en fyldt kalender og tilfredse kunder.
+        </p>
+        <p style="margin-top: 20px;">
+          <strong class="pitch-highlight">Gratis i 14 dage.</strong>
+          Ingen binding. Intet kreditkort.
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Core Features Section -->
+  <section id="features" class="section section-alt">
+    <div class="container">
+      <div class="section-header">
+        <div class="section-badge">Kernefunktionalitet</div>
+        <h2 class="section-title">Alt hvad din salon har brug for - i ét system</h2>
+        <p class="section-subtitle">
+          Fra online booking til lønudbetaling. Plantempus dækker hele din forretning.
+        </p>
+      </div>
+
+      <div class="feature-grid">
+        <div class="feature-card">
+          <div class="feature-icon">
+            <i class="ph ph-calendar-check"></i>
+          </div>
+          <h3 class="feature-title">Booking der kører sig selv</h3>
+          <p class="feature-desc">
+            Kunderne booker selv online når det passer dem - også klokken 22 om aftenen.
+            Systemet sender selv påmindelser, så du slipper for no-shows.
+          </p>
+        </div>
+
+        <div class="feature-card">
+          <div class="feature-icon">
+            <i class="ph ph-users-three"></i>
+          </div>
+          <h3 class="feature-title">Husk hver kunde</h3>
+          <p class="feature-desc">
+            Gem farveformler, noter og præferencer direkte i systemet.
+            Næste gang kunden kommer, har du alt ved hånden - selv om det er 6 måneder siden.
+          </p>
+        </div>
+
+        <div class="feature-card">
+          <div class="feature-icon">
+            <i class="ph ph-shopping-cart"></i>
+          </div>
+          <h3 class="feature-title">Nem betaling</h3>
+          <p class="feature-desc">
+            Tag imod kort, kontant, MobilePay og gavekort - alt sammen i samme system.
+            Scan stregkoder på produkter og de kommer automatisk med på kvitteringen.
+          </p>
+        </div>
+
+        <div class="feature-card">
+          <div class="feature-icon">
+            <i class="ph ph-user-circle-gear"></i>
+          </div>
+          <h3 class="feature-title">Styr på medarbejdere</h3>
+          <p class="feature-desc">
+            Planlæg vagter, hold styr på ferie og sygedage.
+            Løn og provision bliver beregnet automatisk - eksporter direkte til dit lønsystem.
+          </p>
+        </div>
+
+        <div class="feature-card">
+          <div class="feature-icon">
+            <i class="ph ph-coins"></i>
+          </div>
+          <h3 class="feature-title">Nemt kassearbejde</h3>
+          <p class="feature-desc">
+            Luk kassen på 5 minutter i stedet for 30.
+            Systemet tæller op for dig og viser hvor meget der skal være i skuffen.
+          </p>
+        </div>
+
+        <div class="feature-card">
+          <div class="feature-icon">
+            <i class="ph ph-chart-line-up"></i>
+          </div>
+          <h3 class="feature-title">Se hvordan det går</h3>
+          <p class="feature-desc">
+            Simpelt dashboard der viser hvad du tjener, hvilke kunder der kommer tilbage,
+            og hvor meget hver medarbejder omsætter for. Ingen komplicerede rapporter.
+          </p>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Smart Features Section -->
+  <section id="ai" class="section">
+    <div class="container">
+      <div class="ai-showcase">
+        <div>
+          <div class="ai-badge">
+            <i class="ph ph-lightbulb"></i>
+            Smart hjælp
+          </div>
+          <h2 class="ai-title">Systemet arbejder for dig - ikke omvendt</h2>
+          <p class="ai-desc">
+            Plantempus gør det tunge arbejde. Det foreslår de bedste tider til dine kunder (så de ikke ringer midt i en klipning),
+            giver dig besked når du har huller i kalenderen der kan fyldes, og husker hvilke produkter dine kunder plejer at købe.
+            Det er som at have en ekstra medarbejder - der aldrig har fri.
+          </p>
+          <div class="ai-stats">
+            <div class="ai-stat">
+              <div class="ai-stat-value">10t</div>
+              <div class="ai-stat-label">Mere tid til kunder/uge</div>
+            </div>
+            <div class="ai-stat">
+              <div class="ai-stat-value">0</div>
+              <div class="ai-stat-label">Glemte påmindelser</div>
+            </div>
+            <div class="ai-stat">
+              <div class="ai-stat-value">+8</div>
+              <div class="ai-stat-label">Ekstra kunder/uge</div>
+            </div>
+          </div>
+        </div>
+        <div class="ai-visual">
+          <img src="data:image/svg+xml,%3Csvg width='400' height='300' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='400' height='300' fill='%23f5f5f5'/%3E%3Ctext x='200' y='150' text-anchor='middle' font-family='Poppins' font-size='18' fill='%2300897b'%3EAI Dashboard Preview%3C/text%3E%3C/svg%3E" alt="AI Dashboard" style="width: 100%; border-radius: 8px;">
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Detailed Modules Section -->
+  <section class="section section-alt">
+    <div class="container">
+      <div class="section-header">
+        <div class="section-badge">Alt du har brug for</div>
+        <h2 class="section-title">Ét system der klarer det hele</h2>
+        <p class="section-subtitle">
+          Fra booking til løn. Fra kundejournal til kasseafstemning. Alt samlet ét sted.
+        </p>
+      </div>
+
+      <div class="module-grid">
+        <!-- Booking & Kalender -->
+        <div class="module-card">
+          <div class="module-header">
+            <div class="module-icon">
+              <i class="ph ph-calendar-check"></i>
+            </div>
+            <h3 class="module-title">Booking & Kalender</h3>
+          </div>
+          <ul class="module-features">
+            <li><i class="ph ph-check"></i> Kunderne booker selv online</li>
+            <li><i class="ph ph-check"></i> Forslag til ledige tider</li>
+            <li><i class="ph ph-check"></i> Venteliste når I er fyldt op</li>
+            <li><i class="ph ph-check"></i> Flyt bookinger med træk-og-slip</li>
+            <li><i class="ph ph-check"></i> Book flere medarbejdere til samme kunde</li>
+            <li><i class="ph ph-check"></i> Automatiske påmindelser</li>
+          </ul>
+        </div>
+
+        <!-- Kunde-management -->
+        <div class="module-card">
+          <div class="module-header">
+            <div class="module-icon">
+              <i class="ph ph-address-book"></i>
+            </div>
+            <h3 class="module-title">Kunde-management</h3>
+          </div>
+          <ul class="module-features">
+            <li><i class="ph ph-check"></i> Alle kunder ét sted</li>
+            <li><i class="ph ph-check"></i> Marker VIP-kunder og stamkunder</li>
+            <li><i class="ph ph-check"></i> Gem noter og observationer</li>
+            <li><i class="ph ph-check"></i> Farveformler der følger med</li>
+            <li><i class="ph ph-check"></i> Link familie-medlemmer</li>
+            <li><i class="ph ph-check"></i> Håndter marketing-tilladelser</li>
+          </ul>
+        </div>
+
+        <!-- Medarbejder & HR -->
+        <div class="module-card">
+          <div class="module-header">
+            <div class="module-icon">
+              <i class="ph ph-users"></i>
+            </div>
+            <h3 class="module-title">Medarbejdere</h3>
+          </div>
+          <ul class="module-features">
+            <li><i class="ph ph-check"></i> Planlæg vagter for hele ugen</li>
+            <li><i class="ph ph-check"></i> Løn regnes automatisk ud</li>
+            <li><i class="ph ph-check"></i> Gem kontrakter og dokumenter</li>
+            <li><i class="ph ph-check"></i> Hold styr på ferie og sygdom</li>
+            <li><i class="ph ph-check"></i> Påmindelser om certificeringer</li>
+            <li><i class="ph ph-check"></i> Se hvem der tjener mest</li>
+          </ul>
+        </div>
+
+        <!-- Økonomi & Kasse -->
+        <div class="module-card">
+          <div class="module-header">
+            <div class="module-icon">
+              <i class="ph ph-credit-card"></i>
+            </div>
+            <h3 class="module-title">Økonomi & Kasse</h3>
+          </div>
+          <ul class="module-features">
+            <li><i class="ph ph-check"></i> Tag imod kort, kontant, MobilePay</li>
+            <li><i class="ph ph-check"></i> Sælg og administrer gavekort</li>
+            <li><i class="ph ph-check"></i> Kasseafstemning på 5 minutter</li>
+            <li><i class="ph ph-check"></i> Del betalingen på flere metoder</li>
+            <li><i class="ph ph-check"></i> Print eller email kvitteringer</li>
+            <li><i class="ph ph-check"></i> Scan produkter ind</li>
+          </ul>
+        </div>
+
+        <!-- AI & Analyse -->
+        <div class="module-card">
+          <div class="module-header">
+            <div class="module-icon">
+              <i class="ph ph-lightbulb"></i>
+            </div>
+            <h3 class="module-title">Smart hjælp</h3>
+          </div>
+          <ul class="module-features">
+            <li><i class="ph ph-check"></i> Foreslår de bedste booking-tider</li>
+            <li><i class="ph ph-check"></i> Finder huller i din kalender</li>
+            <li><i class="ph ph-check"></i> Advarer når kunder er ved at stoppe</li>
+            <li><i class="ph ph-check"></i> Anbefaler produkter til kunder</li>
+            <li><i class="ph ph-check"></i> Viser hvad der sælger bedst</li>
+            <li><i class="ph ph-check"></i> Giver dig overblik hver dag</li>
+          </ul>
+        </div>
+
+        <!-- Automatisering -->
+        <div class="module-card">
+          <div class="module-header">
+            <div class="module-icon">
+              <i class="ph ph-lightning"></i>
+            </div>
+            <h3 class="module-title">Ting der sker selv</h3>
+          </div>
+          <ul class="module-features">
+            <li><i class="ph ph-check"></i> SMS går automatisk ud</li>
+            <li><i class="ph ph-check"></i> Emails når noget ændres</li>
+            <li><i class="ph ph-check"></i> Send løn direkte til revisor</li>
+            <li><i class="ph ph-check"></i> Kvitteringer til sygeforsikring</li>
+            <li><i class="ph ph-check"></i> Synk med din telefon-kalender</li>
+            <li><i class="ph ph-check"></i> Kvitteringer printes eller sendes</li>
+          </ul>
+        </div>
+
+        <!-- Integration -->
+        <div class="module-card">
+          <div class="module-header">
+            <div class="module-icon">
+              <i class="ph ph-plugs-connected"></i>
+            </div>
+            <h3 class="module-title">Virker med det du har</h3>
+          </div>
+          <ul class="module-features">
+            <li><i class="ph ph-check"></i> Intect, Proløn, Zenegy og flere</li>
+            <li><i class="ph ph-check"></i> Sender til "danmark" sygeforsikring</li>
+            <li><i class="ph ph-check"></i> Tæl besøgende på hjemmesiden</li>
+            <li><i class="ph ph-check"></i> Beskyt kundernes privatliv</li>
+            <li><i class="ph ph-check"></i> Synk med Google/Apple kalender</li>
+            <li><i class="ph ph-check"></i> Kan kobles til andre systemer</li>
+          </ul>
+        </div>
+
+        <!-- Indstillinger -->
+        <div class="module-card">
+          <div class="module-header">
+            <div class="module-icon">
+              <i class="ph ph-sliders"></i>
+            </div>
+            <h3 class="module-title">Gør det til dit eget</h3>
+          </div>
+          <ul class="module-features">
+            <li><i class="ph ph-check"></i> Slå funktioner til og fra</li>
+            <li><i class="ph ph-check"></i> Dit logo og dine farver</li>
+            <li><i class="ph ph-check"></i> Skriv dine egne beskeder</li>
+            <li><i class="ph ph-check"></i> Sæt åbningstider og helligdage</li>
+            <li><i class="ph ph-check"></i> Flere saloner i samme system</li>
+            <li><i class="ph ph-check"></i> Mørkt tema til aftenvagter</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- ROI & Benefits -->
+  <section class="section">
+    <div class="container">
+      <div class="section-header">
+        <div class="section-badge">Resultater</div>
+        <h2 class="section-title">Det virker i praksis</h2>
+        <p class="section-subtitle">
+          Tal fra saloner der allerede bruger Plantempus
+        </p>
+      </div>
+
+      <div class="roi-grid">
+        <div class="roi-card">
+          <div class="roi-value">10t</div>
+          <div class="roi-label">Mere tid til kunder hver uge</div>
+        </div>
+        <div class="roi-card">
+          <div class="roi-value">95%</div>
+          <div class="roi-label">Kunder møder op (ingen no-shows)</div>
+        </div>
+        <div class="roi-card">
+          <div class="roi-value">8</div>
+          <div class="roi-label">Ekstra kunder om ugen</div>
+        </div>
+        <div class="roi-card">
+          <div class="roi-value">0 kr</div>
+          <div class="roi-label">Tabte bookinger om måneden</div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Benefits Section -->
+  <section class="section section-alt">
+    <div class="container">
+      <div class="section-header">
+        <div class="section-badge">Fordele</div>
+        <h2 class="section-title">Hvorfor vælge Plantempus?</h2>
+      </div>
+
+      <div class="benefits-grid">
+        <div class="benefit-item">
+          <div class="benefit-icon">
+            <i class="ph ph-rocket-launch"></i>
+          </div>
+          <div class="benefit-content">
+            <h3>Start i dag</h3>
+            <p>
+              Intet at installere. Ingen kompliceret opsætning.
+              Du kan være klar til at modtage bookinger samme dag du starter.
+            </p>
+          </div>
+        </div>
+
+        <div class="benefit-item">
+          <div class="benefit-icon">
+            <i class="ph ph-currency-circle-dollar"></i>
+          </div>
+          <div class="benefit-content">
+            <h3>Ingen overraskelser</h3>
+            <p>
+              Fast pris hver måned. Ingen skjulte gebyrer. Ubegrænsede bookinger og SMS inkluderet.
+              Du betaler kun for antallet af medarbejdere.
+            </p>
+          </div>
+        </div>
+
+        <div class="benefit-item">
+          <div class="benefit-icon">
+            <i class="ph ph-shield-check"></i>
+          </div>
+          <div class="benefit-content">
+            <h3>Sikkerhed & GDPR</h3>
+            <p>
+              Dine data er krypteret og hostet sikkert i EU. Fuld GDPR-compliance, 
+              automatisk backup og 99.9% uptime garanti.
+            </p>
+          </div>
+        </div>
+
+        <div class="benefit-item">
+          <div class="benefit-icon">
+            <i class="ph ph-headset"></i>
+          </div>
+          <div class="benefit-content">
+            <h3>Hjælp når du har brug for det</h3>
+            <p>
+              Skriv eller ring på dansk til folk der kender til frisørbranchen.
+              Vi svarer hurtigt og forklarer tingene i et sprog du forstår.
+            </p>
+          </div>
+        </div>
+
+        <div class="benefit-item">
+          <div class="benefit-icon">
+            <i class="ph ph-device-mobile"></i>
+          </div>
+          <div class="benefit-content">
+            <h3>Virker på mobilen</h3>
+            <p>
+              Kunderne booker fra deres telefon. Du kan tjekke kalenderen og ændre bookinger fra din tablet.
+              Intet kræver at du sidder ved en computer.
+            </p>
+          </div>
+        </div>
+
+        <div class="benefit-item">
+          <div class="benefit-icon">
+            <i class="ph ph-arrows-clockwise"></i>
+          </div>
+          <div class="benefit-content">
+            <h3>Bliver bedre hele tiden</h3>
+            <p>
+              Nye funktioner tilføjes løbende uden du skal betale mere.
+              Vi lytter til hvad I har brug for og bygger det ind.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Pricing Section -->
+  <section id="pricing" class="section">
+    <div class="container">
+      <div class="section-header">
+        <div class="section-badge">Priser</div>
+        <h2 class="section-title">Vælg den plan der passer til dig</h2>
+        <p class="section-subtitle">
+          Alle planer inkluderer 14 dages gratis prøveperiode. Ingen binding. Opsig når som helst.
+        </p>
+      </div>
+
+      <div class="pricing-grid">
+        <!-- Basis Plan -->
+        <div class="pricing-card">
+          <h3 class="pricing-name">Basis</h3>
+          <p class="pricing-users">1-3 brugere</p>
+          <div class="pricing-price">
+            <span class="pricing-amount">299</span>
+            <span class="pricing-period">kr/md</span>
+          </div>
+          <ul class="pricing-features">
+            <li><i class="ph ph-check-circle"></i> Op til 3 brugere</li>
+            <li><i class="ph ph-check-circle"></i> Online booking</li>
+            <li><i class="ph ph-check-circle"></i> Kalender & aftalestyring</li>
+            <li><i class="ph ph-check-circle"></i> Kundekartotek</li>
+            <li><i class="ph ph-check-circle"></i> SMS-påmindelser</li>
+            <li><i class="ph ph-check-circle"></i> Email-notifikationer</li>
+            <li><i class="ph ph-check-circle"></i> Basis rapporter</li>
+            <li><i class="ph ph-check-circle"></i> Email support</li>
+          </ul>
+          <button class="pricing-cta">Start gratis prøveperiode</button>
+        </div>
+
+        <!-- Pro Plan (Featured) -->
+        <div class="pricing-card featured">
+          <div class="pricing-badge">Mest populær</div>
+          <h3 class="pricing-name">Pro</h3>
+          <p class="pricing-users">4-8 brugere</p>
+          <div class="pricing-price">
+            <span class="pricing-amount">599</span>
+            <span class="pricing-period">kr/md</span>
+          </div>
+          <ul class="pricing-features">
+            <li><i class="ph ph-check-circle"></i> Op til 8 brugere</li>
+            <li><i class="ph ph-check-circle"></i> <strong>Alt fra Basis</strong></li>
+            <li><i class="ph ph-check-circle"></i> <strong>AI-optimering</strong></li>
+            <li><i class="ph ph-check-circle"></i> Lønberegning & eksport</li>
+            <li><i class="ph ph-check-circle"></i> Gavekort & klippekort</li>
+            <li><i class="ph ph-check-circle"></i> Kasseafstemning</li>
+            <li><i class="ph ph-check-circle"></i> Avancerede rapporter</li>
+            <li><i class="ph ph-check-circle"></i> Prioriteret support</li>
+          </ul>
+          <button class="pricing-cta">Start gratis prøveperiode</button>
+        </div>
+
+        <!-- Enterprise Plan -->
+        <div class="pricing-card">
+          <h3 class="pricing-name">Enterprise</h3>
+          <p class="pricing-users">8+ brugere</p>
+          <div class="pricing-price">
+            <span class="pricing-amount" style="font-size: 32px;">Kontakt os</span>
+          </div>
+          <ul class="pricing-features">
+            <li><i class="ph ph-check-circle"></i> Ubegrænset brugere</li>
+            <li><i class="ph ph-check-circle"></i> <strong>Alt fra Pro</strong></li>
+            <li><i class="ph ph-check-circle"></i> Flere lokationer</li>
+            <li><i class="ph ph-check-circle"></i> Tilpasset integration</li>
+            <li><i class="ph ph-check-circle"></i> Dedikeret kontaktperson</li>
+            <li><i class="ph ph-check-circle"></i> SLA & uptime garanti</li>
+            <li><i class="ph ph-check-circle"></i> On-premise option</li>
+            <li><i class="ph ph-check-circle"></i> 24/7 prioriteret support</li>
+          </ul>
+          <button class="pricing-cta">Kontakt salg</button>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Comparison Matrix -->
+  <section class="section section-alt">
+    <div class="container">
+      <div class="section-header">
+        <div class="section-badge">Sammenligning</div>
+        <h2 class="section-title">Plantempus vs. Traditionelle Systemer</h2>
+        <p class="section-subtitle">
+          Se forskellen på et system bygget til moderne saloner
+        </p>
+      </div>
+
+      <div style="max-width: 900px; margin: 0 auto; background: var(--color-surface); border-radius: 16px; overflow: hidden; box-shadow: 0 4px 24px rgba(0,0,0,0.1);">
+        <table style="width: 100%; border-collapse: collapse;">
+          <thead>
+            <tr style="background: var(--color-primary); color: white;">
+              <th style="padding: 20px; text-align: left; font-weight: 600; font-size: 16px;">Feature</th>
+              <th style="padding: 20px; text-align: center; font-weight: 600; font-size: 16px;">Plantempus</th>
+              <th style="padding: 20px; text-align: center; font-weight: 600; font-size: 16px; opacity: 0.7;">Andre systemer</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr style="border-bottom: 1px solid var(--color-border);">
+              <td style="padding: 16px 20px; font-weight: 500;">Avanceret kundesøgning</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">—</td>
+            </tr>
+            <tr style="border-bottom: 1px solid var(--color-border); background: var(--color-background);">
+              <td style="padding: 16px 20px; font-weight: 500;">Detaljerede statistikker med grafer</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">△</td>
+            </tr>
+            <tr style="border-bottom: 1px solid var(--color-border);">
+              <td style="padding: 16px 20px; font-weight: 500;">Farveformler & håranalyser</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">—</td>
+            </tr>
+            <tr style="border-bottom: 1px solid var(--color-border); background: var(--color-background);">
+              <td style="padding: 16px 20px; font-weight: 500;">Automatisk lønberegning med provision</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">—</td>
+            </tr>
+            <tr style="border-bottom: 1px solid var(--color-border);">
+              <td style="padding: 16px 20px; font-weight: 500;">Multi-payment checkout (flere metoder)</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">△</td>
+            </tr>
+            <tr style="border-bottom: 1px solid var(--color-border); background: var(--color-background);">
+              <td style="padding: 16px 20px; font-weight: 500;">Kasseafstemning</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">—</td>
+            </tr>
+            <tr style="border-bottom: 1px solid var(--color-border);">
+              <td style="padding: 16px 20px; font-weight: 500;">Stregkodescanner med produkt-genkendelse</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">—</td>
+            </tr>
+            <tr style="border-bottom: 1px solid var(--color-border); background: var(--color-background);">
+              <td style="padding: 16px 20px; font-weight: 500;">Smart tidsforslag til kunder</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">—</td>
+            </tr>
+            <tr style="border-bottom: 1px solid var(--color-border);">
+              <td style="padding: 16px 20px; font-weight: 500;">Moderne, hurtig grænseflade</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">△</td>
+            </tr>
+            <tr>
+              <td style="padding: 16px 20px; font-weight: 500;">Eksport til 5+ lønsystemer</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-green); font-size: 24px;">✓</td>
+              <td style="padding: 16px 20px; text-align: center; color: var(--color-text-muted); font-size: 20px;">△</td>
+            </tr>
+          </tbody>
+        </table>
+        <div style="padding: 20px; text-align: center; background: var(--color-accent-light); color: var(--color-text-secondary); font-size: 13px;">
+          ✓ = Inkluderet · △ = Begrænset · — = Ikke tilgængelig
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Screenshot Gallery -->
+  <section class="section">
+    <div class="container">
+      <div class="section-header">
+        <div class="section-badge">Se det rigtige system</div>
+        <h2 class="section-title">Ikke bare infographics - det her er rigtigt</h2>
+        <p class="section-subtitle">
+          Vi er stolte af vores UX og performance. Se hvordan systemet faktisk ser ud.
+        </p>
+      </div>
+
+      <div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-bottom: 32px;">
+        <div style="background: var(--color-surface); border-radius: 12px; padding: 24px; border: 2px solid var(--color-border);">
+          <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--color-text);">
+            <i class="ph ph-chart-line-up" style="color: var(--color-accent);"></i>
+            Dashboard med rigtige data
+          </h3>
+          <p style="color: var(--color-text-secondary); margin-bottom: 16px;">
+            Se dagens omsætning, bookinger og medarbejder-status på ét blik. Ikke bare tal - visuelle grafer der giver mening.
+          </p>
+          <a href="poc-dashboard.html" target="_blank" style="display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 500; text-decoration: none;">
+            Se live demo <i class="ph ph-arrow-right"></i>
+          </a>
+        </div>
+
+        <div style="background: var(--color-surface); border-radius: 12px; padding: 24px; border: 2px solid var(--color-border);">
+          <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--color-text);">
+            <i class="ph ph-magnifying-glass" style="color: var(--color-accent);"></i>
+            Kunde-søgning der virker
+          </h3>
+          <p style="color: var(--color-text-secondary); margin-bottom: 16px;">
+            Find kunder på navn, telefon, email - med det samme. Filtrér på VIP, stamkunder eller nye kunder. Hurtigt og præcist.
+          </p>
+          <a href="poc-customer-list.html" target="_blank" style="display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 500; text-decoration: none;">
+            Se live demo <i class="ph ph-arrow-right"></i>
+          </a>
+        </div>
+
+        <div style="background: var(--color-surface); border-radius: 12px; padding: 24px; border: 2px solid var(--color-border);">
+          <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--color-text);">
+            <i class="ph ph-user-circle" style="color: var(--color-accent);"></i>
+            Kundeprofiler med detaljer
+          </h3>
+          <p style="color: var(--color-text-secondary); margin-bottom: 16px;">
+            Farveformler, håranalyser, præferencer og købs-historie. Alt organiseret og nemt at finde.
+          </p>
+          <a href="poc-customer-detail.html" target="_blank" style="display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 500; text-decoration: none;">
+            Se live demo <i class="ph ph-arrow-right"></i>
+          </a>
+        </div>
+
+        <div style="background: var(--color-surface); border-radius: 12px; padding: 24px; border: 2px solid var(--color-border);">
+          <h3 style="font-size: 18px; font-weight: 600; margin-bottom: 12px; color: var(--color-text);">
+            <i class="ph ph-calculator" style="color: var(--color-accent);"></i>
+            Løn & Provision
+          </h3>
+          <p style="color: var(--color-text-secondary); margin-bottom: 16px;">
+            Se præcis hvad hver medarbejder har tjent. Eksportér direkte til Intect, Proløn eller Zenegy med et klik.
+          </p>
+          <a href="poc-loen-provision.html" target="_blank" style="display: inline-flex; align-items: center; gap: 6px; color: var(--color-primary); font-weight: 500; text-decoration: none;">
+            Se live demo <i class="ph ph-arrow-right"></i>
+          </a>
+        </div>
+      </div>
+
+      <div style="text-align: center; padding: 32px; background: var(--color-primary-light); border-radius: 12px;">
+        <p style="font-size: 18px; font-weight: 500; color: var(--color-text); margin-bottom: 12px;">
+          <i class="ph ph-rocket-launch" style="color: var(--color-accent); font-size: 24px;"></i>
+          Alle demos er interaktive - klik og prøv dem
+        </p>
+        <p style="color: var(--color-text-secondary);">
+          Ikke mock-ups. Ikke static billeder. Det her er det rigtige system i aktion.
+        </p>
+      </div>
+    </div>
+  </section>
+
+  <!-- Performance & UX -->
+  <section class="section">
+    <div class="container">
+      <div class="section-header">
+        <div class="section-badge">Performance & Design</div>
+        <h2 class="section-title">Bygget med omtanke - mærkes i hverdagen</h2>
+      </div>
+
+      <div class="benefits-grid" style="max-width: 900px; margin: 0 auto;">
+        <div class="benefit-item">
+          <div class="benefit-icon" style="background: var(--color-accent);">
+            <i class="ph ph-lightning"></i>
+          </div>
+          <div class="benefit-content">
+            <h3>Lynhurtigt</h3>
+            <p>
+              Under 1 sekund load-tid. Ingen langsomme overgang
+
+er.
+              Systemet reagerer med det samme - som det skal være.
+            </p>
+          </div>
+        </div>
+
+        <div class="benefit-item">
+          <div class="benefit-icon" style="background: var(--color-accent);">
+            <i class="ph ph-eye"></i>
+          </div>
+          <div class="benefit-content">
+            <h3>Gennemtænkt UX</h3>
+            <p>
+              Hver knap, hver farve, hver animation er testet.
+              Designet så det er intuitivt - også for den der ikke er teknisk.
+            </p>
+          </div>
+        </div>
+
+        <div class="benefit-item">
+          <div class="benefit-icon" style="background: var(--color-accent);">
+            <i class="ph ph-chart-bar"></i>
+          </div>
+          <div class="benefit-content">
+            <h3>Statistik der giver mening</h3>
+            <p>
+              Ikke bare tal på en side. Visuelle grafer, trends og indsigter.
+              Se med det samme hvad der virker og hvad der ikke gør.
+            </p>
+          </div>
+        </div>
+
+        <div class="benefit-item">
+          <div class="benefit-icon" style="background: var(--color-accent);">
+            <i class="ph ph-palette"></i>
+          </div>
+          <div class="benefit-content">
+            <h3>Moderne design</h3>
+            <p>
+              Ikke et system fra 2010. Rent, moderne interface der matcher
+              det professionelle udtryk din salon har.
+            </p>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- Testimonials -->
+  <section class="section section-alt">
+    <div class="container">
+      <div class="section-header">
+        <div class="section-badge">Kundeudtalelser</div>
+        <h2 class="section-title">Hvad siger vores brugere?</h2>
+      </div>
+
+      <div class="testimonials-grid">
+        <div class="testimonial-card">
+          <div class="testimonial-quote">
+            "Nu har jeg faktisk tid til at snakke med mine kunder i stedet for at rende efter telefonen.
+            Bookinger sker automatisk, påmindelser går selv ud, og jeg kan se hele ugen med et blik. Det er befriende."
+          </div>
+          <div class="testimonial-author">
+            <div class="testimonial-avatar">KK</div>
+            <div class="testimonial-info">
+              <div class="testimonial-name">Karina Knudsen</div>
+              <div class="testimonial-title">Ejer, KARINA KNUDSEN®</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="testimonial-card">
+          <div class="testimonial-quote">
+            "Mine kunder elsker at de kan booke online klokken 22 om aftenen når de lige kommer i tanke om det.
+            Og jeg slipper for at svare på telefonen hele dagen. Win-win."
+          </div>
+          <div class="testimonial-author">
+            <div class="testimonial-avatar">MH</div>
+            <div class="testimonial-info">
+              <div class="testimonial-name">Maria Hansen</div>
+              <div class="testimonial-title">Salonchef, Salon Bellezza</div>
+            </div>
+          </div>
+        </div>
+
+        <div class="testimonial-card">
+          <div class="testimonial-quote">
+            "Før brugte jeg en hel formiddag hver måned på løn. Nu tager det 10 minutter.
+            Systemet har styr på hvem der har arbejdet hvornår, og sender det hele til min revisor."
+          </div>
+          <div class="testimonial-author">
+            <div class="testimonial-avatar">AS</div>
+            <div class="testimonial-info">
+              <div class="testimonial-name">Anna Sørensen</div>
+              <div class="testimonial-title">Økonomiansvarlig, Beauty Studio</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+
+  <!-- CTA Section -->
+  <section id="demo" class="cta-section">
+    <div class="container">
+      <h2>Klar til at optimere din salon?</h2>
+      <p>Start din gratis 14-dages prøveperiode i dag. Ingen kreditkort påkrævet.</p>
+      <div class="hero-cta-group">
+        <a href="#pricing" class="btn-primary">
+          <i class="ph ph-rocket-launch"></i>
+          Kom i gang gratis
+        </a>
+        <a href="mailto:sales@plantempus.dk" class="btn-secondary">
+          <i class="ph ph-envelope"></i>
+          Kontakt salg
+        </a>
+      </div>
+    </div>
+  </section>
+
+  <!-- Footer -->
+  <footer class="footer">
+    <div class="footer-container">
+      <div>
+        <div class="footer-logo">Plantempus</div>
+        <p class="footer-desc">
+          Moderne salon-management med AI-drevet optimering. 
+          Bygget til danske saloner og skønhedsklinikker.
+        </p>
+      </div>
+
+      <div>
+        <div class="footer-title">Produkt</div>
+        <ul class="footer-links">
+          <li><a href="#features">Features</a></li>
+          <li><a href="#ai">AI-Innovation</a></li>
+          <li><a href="#pricing">Priser</a></li>
+          <li><a href="#demo">Demo</a></li>
+        </ul>
+      </div>
+
+      <div>
+        <div class="footer-title">Ressourcer</div>
+        <ul class="footer-links">
+          <li><a href="#">Hjælpecenter</a></li>
+          <li><a href="#">API Dokumentation</a></li>
+          <li><a href="#">Blog</a></li>
+          <li><a href="#">Status</a></li>
+        </ul>
+      </div>
+
+      <div>
+        <div class="footer-title">Firma</div>
+        <ul class="footer-links">
+</a></li>
+          <li><a href="#">Karriere</a></li>
+          <li><a href="#">Kontakt</a></li>
+          <li><a href="#">Privatlivspolitik</a></li>
+        </ul>
+      </div>
+    </div>
+
+    <div class="footer-bottom">
+      <p>&copy; 2026 Plantempus. Alle rettigheder forbeholdes.</p>
+    </div>
+  </footer>
+
+  <script>
+    // Smooth scroll for navigation
+    document.querySelectorAll('a[href^="#"]').forEach(anchor => {
+      anchor.addEventListener('click', function (e) {
+        e.preventDefault();
+        const target = document.querySelector(this.getAttribute('href'));
+        if (target) {
+          target.scrollIntoView({ behavior: 'smooth', block: 'start' });
+        }
+      });
+    });
+
+    // CTA button handlers
+    document.querySelectorAll('.pricing-cta').forEach(btn => {
+      btn.addEventListener('click', () => {
+        alert('Tak for din interesse! Kontakt sales@plantempus.dk for at komme i gang.');
+      });
+    });
+  </script>
+
+</body>
+</html>
+          <li><a href="#">Om os
\ No newline at end of file
diff --git a/.workbench/POC/poc-ai-booking-optimizer.html b/.workbench/POC/poc-ai-booking-optimizer.html
new file mode 100644
index 0000000..65fa4ff
--- /dev/null
+++ b/.workbench/POC/poc-ai-booking-optimizer.html
@@ -0,0 +1,1009 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>AI Booking Optimering - KARINA KNUDSEN®</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css">
+  <style>
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Regular.woff') format('woff'); font-weight: 400; }
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Medium.woff') format('woff'); font-weight: 500; }
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBold.woff') format('woff'); font-weight: 600; }
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Bold.woff') format('woff'); font-weight: 700; }
+
+    :root {
+      --color-teal: #00897b;
+      --color-teal-light: #e0f2f1;
+      --color-surface: #ffffff;
+      --color-background: #f5f5f5;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-text-muted: #999;
+      --color-green: #43a047;
+      --color-amber: #f59e0b;
+      --color-red: #e53935;
+      --color-purple: #8b5cf6;
+      --color-blue: #1976d2;
+      --font-family: 'Poppins', -apple-system, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: var(--font-family);
+      background: var(--color-background);
+      color: var(--color-text);
+      min-height: 100vh;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-topbar-title {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-topbar-title h1 {
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    swp-ai-badge-header {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      background: linear-gradient(135deg, var(--color-purple) 0%, var(--color-blue) 100%);
+      color: white;
+      font-size: 11px;
+      font-weight: 600;
+      padding: 4px 10px;
+      border-radius: 20px;
+    }
+
+    swp-topbar-date {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       PAGE CONTAINER
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    /* ==========================================
+       STATS GRID
+       ========================================== */
+    swp-stats-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      margin-bottom: 24px;
+    }
+
+    @media (max-width: 900px) {
+      swp-stats-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    swp-stat-card {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 20px;
+      background: var(--color-surface);
+      border-radius: 12px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+    }
+
+    swp-stat-card.highlight {
+      background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
+      color: white;
+    }
+
+    swp-stat-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    swp-stat-card.highlight swp-stat-label {
+      color: rgba(255,255,255,0.8);
+    }
+
+    swp-stat-value {
+      font-size: 28px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+    }
+
+    swp-stat-change {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 12px;
+      font-weight: 500;
+    }
+
+    swp-stat-change.positive {
+      color: var(--color-green);
+    }
+
+    swp-stat-change.negative {
+      color: var(--color-red);
+    }
+
+    swp-stat-card.highlight swp-stat-change {
+      color: rgba(255,255,255,0.9);
+    }
+
+    /* ==========================================
+       MAIN GRID
+       ========================================== */
+    swp-main-grid {
+      display: grid;
+      grid-template-columns: 1fr 340px;
+      gap: 24px;
+    }
+
+    @media (max-width: 1000px) {
+      swp-main-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    /* ==========================================
+       CARD
+       ========================================== */
+    swp-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 12px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.08);
+      margin-bottom: 24px;
+    }
+
+    swp-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-card-title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    swp-card-title i {
+      font-size: 20px;
+      color: var(--color-teal);
+    }
+
+    swp-card-content {
+      display: block;
+      padding: 20px;
+    }
+
+    /* ==========================================
+       MINI CALENDAR
+       ========================================== */
+    swp-mini-calendar {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 8px;
+    }
+
+    swp-mini-day {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+      padding: 12px 8px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-mini-day:hover {
+      background: var(--color-background);
+    }
+
+    swp-mini-day.today {
+      background: var(--color-teal-light);
+      border: 2px solid var(--color-teal);
+    }
+
+    swp-mini-day-name {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+    }
+
+    swp-mini-day-date {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-mini-day-status {
+      display: flex;
+      gap: 3px;
+    }
+
+    swp-mini-day-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: var(--color-green);
+    }
+
+    swp-mini-day-dot.gap {
+      background: var(--color-amber);
+    }
+
+    swp-mini-day-dot.critical {
+      background: var(--color-red);
+    }
+
+    /* ==========================================
+       GAPS LIST
+       ========================================== */
+    swp-gaps-list {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    swp-gap-card {
+      display: block;
+      border: 1px solid var(--color-border);
+      border-radius: 10px;
+      overflow: hidden;
+    }
+
+    swp-gap-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 16px;
+      background: var(--color-background-alt);
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-gap-time {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      font-weight: 600;
+    }
+
+    swp-gap-time i {
+      font-size: 18px;
+      color: var(--color-amber);
+    }
+
+    swp-gap-meta {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-gap-employee {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    swp-gap-employee-avatar {
+      width: 20px;
+      height: 20px;
+      border-radius: 50%;
+      background: var(--color-purple);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 10px;
+      font-weight: 600;
+    }
+
+    swp-gap-revenue {
+      font-weight: 500;
+      color: var(--color-red);
+    }
+
+    swp-gap-content {
+      padding: 16px;
+    }
+
+    swp-gap-suggestions-title {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      margin-bottom: 12px;
+    }
+
+    swp-gap-suggestions-title i {
+      font-size: 16px;
+      color: var(--color-purple);
+    }
+
+    swp-suggestion-list {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    swp-suggestion-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+    }
+
+    swp-suggestion-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-suggestion-customer {
+      font-size: 13px;
+      font-weight: 500;
+    }
+
+    swp-suggestion-detail {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-flex-score {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--color-green);
+      background: color-mix(in srgb, var(--color-green) 12%, transparent);
+      padding: 2px 8px;
+      border-radius: 4px;
+    }
+
+    swp-suggestion-action {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 14px;
+      font-size: 12px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00695c;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background);
+    }
+
+    swp-btn i {
+      font-size: 14px;
+    }
+
+    /* Waitlist suggestion */
+    swp-suggestion-item.waitlist {
+      border: 1px dashed var(--color-border);
+      background: transparent;
+    }
+
+    swp-waitlist-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 10px;
+      font-weight: 600;
+      color: var(--color-blue);
+      background: color-mix(in srgb, var(--color-blue) 12%, transparent);
+      padding: 2px 8px;
+      border-radius: 4px;
+      text-transform: uppercase;
+    }
+
+    /* ==========================================
+       SMS HISTORY
+       ========================================== */
+    swp-sms-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    swp-sms-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-sms-item:last-child {
+      border-bottom: none;
+    }
+
+    swp-sms-status-icon {
+      width: 28px;
+      height: 28px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    swp-sms-status-icon.accepted {
+      background: color-mix(in srgb, var(--color-green) 15%, transparent);
+      color: var(--color-green);
+    }
+
+    swp-sms-status-icon.rejected {
+      background: color-mix(in srgb, var(--color-red) 15%, transparent);
+      color: var(--color-red);
+    }
+
+    swp-sms-status-icon.pending {
+      background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+      color: var(--color-amber);
+    }
+
+    swp-sms-info {
+      flex: 1;
+    }
+
+    swp-sms-customer {
+      font-size: 13px;
+      font-weight: 500;
+    }
+
+    swp-sms-detail {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-sms-date {
+      font-size: 11px;
+      color: var(--color-text-muted);
+    }
+
+    /* ==========================================
+       OPTIMIZATION SCORE
+       ========================================== */
+    swp-optimization-score {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 12px;
+      padding: 24px;
+      text-align: center;
+    }
+
+    swp-score-circle {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      background: conic-gradient(var(--color-teal) var(--score-percent), var(--color-border) var(--score-percent));
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+
+    swp-score-circle::before {
+      content: '';
+      position: absolute;
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      background: var(--color-surface);
+    }
+
+    swp-score-value {
+      position: relative;
+      z-index: 1;
+      font-size: 24px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-teal);
+    }
+
+    swp-score-label {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-score-hint {
+      font-size: 11px;
+      color: var(--color-text-muted);
+      max-width: 200px;
+    }
+
+    /* ==========================================
+       SIDEBAR SECTION
+       ========================================== */
+    swp-sidebar {
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+  </style>
+</head>
+<body>
+
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-topbar-title>
+        <h1>AI Booking Optimering</h1>
+        <swp-ai-badge-header>
+          <i class="ph ph-sparkle"></i>
+          AI-drevet
+        </swp-ai-badge-header>
+      </swp-topbar-title>
+    </swp-topbar-left>
+    <swp-topbar-date id="currentDate"></swp-topbar-date>
+  </swp-topbar>
+
+  <swp-page-container>
+    <!-- Stats Grid -->
+    <swp-stats-grid>
+      <swp-stat-card>
+        <swp-stat-label>Huller i dag</swp-stat-label>
+        <swp-stat-value id="gapsToday">3</swp-stat-value>
+        <swp-stat-change class="negative">
+          <i class="ph ph-arrow-up"></i>
+          +1 fra i går
+        </swp-stat-change>
+      </swp-stat-card>
+
+      <swp-stat-card>
+        <swp-stat-label>Tabt omsætning</swp-stat-label>
+        <swp-stat-value id="lostRevenue">1.950 kr.</swp-stat-value>
+        <swp-stat-change class="negative">
+          <i class="ph ph-arrow-up"></i>
+          +450 kr.
+        </swp-stat-change>
+      </swp-stat-card>
+
+      <swp-stat-card>
+        <swp-stat-label>Huller denne uge</swp-stat-label>
+        <swp-stat-value id="gapsWeek">12</swp-stat-value>
+        <swp-stat-change class="positive">
+          <i class="ph ph-arrow-down"></i>
+          -3 fra sidste uge
+        </swp-stat-change>
+      </swp-stat-card>
+
+      <swp-stat-card class="highlight">
+        <swp-stat-label>Potentiel besparelse</swp-stat-label>
+        <swp-stat-value id="potentialSavings">8.400 kr.</swp-stat-value>
+        <swp-stat-change>
+          <i class="ph ph-trend-up"></i>
+          Denne måned
+        </swp-stat-change>
+      </swp-stat-card>
+    </swp-stats-grid>
+
+    <!-- Main Grid -->
+    <swp-main-grid>
+      <!-- Left Column -->
+      <div>
+        <!-- Mini Calendar -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>
+              <i class="ph ph-calendar"></i>
+              Denne uge
+            </swp-card-title>
+          </swp-card-header>
+          <swp-card-content>
+            <swp-mini-calendar id="miniCalendar"></swp-mini-calendar>
+          </swp-card-content>
+        </swp-card>
+
+        <!-- Gaps List -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>
+              <i class="ph ph-warning-circle"></i>
+              Identificerede huller
+            </swp-card-title>
+            <swp-btn class="secondary">
+              <i class="ph ph-funnel"></i>
+              Filter
+            </swp-btn>
+          </swp-card-header>
+          <swp-card-content>
+            <swp-gaps-list id="gapsList"></swp-gaps-list>
+          </swp-card-content>
+        </swp-card>
+      </div>
+
+      <!-- Sidebar -->
+      <swp-sidebar>
+        <!-- Optimization Score -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>
+              <i class="ph ph-chart-pie"></i>
+              Optimeringsscore
+            </swp-card-title>
+          </swp-card-header>
+          <swp-card-content>
+            <swp-optimization-score>
+              <swp-score-circle style="--score-percent: 78%;">
+                <swp-score-value>78%</swp-score-value>
+              </swp-score-circle>
+              <swp-score-label>Kalenderudnyttelse</swp-score-label>
+              <swp-score-hint>Mål: 90% udnyttelse. Fyld 2 huller mere for at nå målet.</swp-score-hint>
+            </swp-optimization-score>
+          </swp-card-content>
+        </swp-card>
+
+        <!-- SMS History -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>
+              <i class="ph ph-chat-circle-text"></i>
+              SMS-historik
+            </swp-card-title>
+          </swp-card-header>
+          <swp-card-content>
+            <swp-sms-list id="smsList"></swp-sms-list>
+          </swp-card-content>
+        </swp-card>
+      </swp-sidebar>
+    </swp-main-grid>
+  </swp-page-container>
+
+  <script>
+    // ==========================================
+    // DATA
+    // ==========================================
+    const employees = [
+      { id: 'EMP001', name: 'Camilla', initials: 'CA', color: '#9c27b0' },
+      { id: 'EMP002', name: 'Isabella', initials: 'IS', color: '#e91e63' },
+      { id: 'EMP003', name: 'Alexander', initials: 'AL', color: '#3f51b5' },
+      { id: 'EMP004', name: 'Viktor', initials: 'VI', color: '#009688' }
+    ];
+
+    const gaps = [
+      {
+        id: 'gap1',
+        date: '2026-01-06',
+        dayName: 'Tirsdag',
+        start: '11:00',
+        end: '12:00',
+        duration: 60,
+        employeeId: 'EMP001',
+        lostRevenue: 650,
+        suggestions: [
+          {
+            type: 'move',
+            customerId: 'C001',
+            customerName: 'Maria Jensen',
+            currentTime: '14:00',
+            currentDate: '2026-01-06',
+            flexScore: 87,
+            service: 'Dameklip'
+          },
+          {
+            type: 'waitlist',
+            customerId: 'C002',
+            customerName: 'Lars Hansen',
+            note: 'Ønsker tid denne uge',
+            service: 'Herreklip'
+          }
+        ]
+      },
+      {
+        id: 'gap2',
+        date: '2026-01-06',
+        dayName: 'Tirsdag',
+        start: '14:30',
+        end: '15:30',
+        duration: 60,
+        employeeId: 'EMP002',
+        lostRevenue: 725,
+        suggestions: [
+          {
+            type: 'move',
+            customerId: 'C003',
+            customerName: 'Anne Larsen',
+            currentTime: '10:00',
+            currentDate: '2026-01-07',
+            flexScore: 62,
+            service: 'Dameklip'
+          }
+        ]
+      },
+      {
+        id: 'gap3',
+        date: '2026-01-08',
+        dayName: 'Torsdag',
+        start: '09:00',
+        end: '10:30',
+        duration: 90,
+        employeeId: 'EMP003',
+        lostRevenue: 575,
+        suggestions: [
+          {
+            type: 'waitlist',
+            customerId: 'C004',
+            customerName: 'Peter Olsen',
+            note: 'Ny kunde, fleksibel',
+            service: 'Bundfarve'
+          }
+        ]
+      }
+    ];
+
+    const weekDays = [
+      { date: '2026-01-05', name: 'Man', day: 5, gaps: 0, bookings: 8 },
+      { date: '2026-01-06', name: 'Tir', day: 6, gaps: 2, bookings: 6, isToday: true },
+      { date: '2026-01-07', name: 'Ons', day: 7, gaps: 1, bookings: 7 },
+      { date: '2026-01-08', name: 'Tor', day: 8, gaps: 1, bookings: 5 },
+      { date: '2026-01-09', name: 'Fre', day: 9, gaps: 0, bookings: 9 }
+    ];
+
+    const smsHistory = [
+      {
+        customerId: 'C005',
+        customerName: 'Sofie Nielsen',
+        status: 'accepted',
+        action: 'Flyttede fra 15:00 til 11:00',
+        discount: '5%',
+        date: 'I går'
+      },
+      {
+        customerId: 'C006',
+        customerName: 'Peter Olsen',
+        status: 'rejected',
+        action: 'Afviste flytning',
+        date: '3. jan'
+      },
+      {
+        customerId: 'C003',
+        customerName: 'Anne Larsen',
+        status: 'pending',
+        action: 'Tilbud sendt: Flyt til 14:30',
+        discount: '5%',
+        date: 'I dag'
+      },
+      {
+        customerId: 'C007',
+        customerName: 'Michael Bruun',
+        status: 'accepted',
+        action: 'Booket fra venteliste',
+        date: '2. jan'
+      }
+    ];
+
+    // ==========================================
+    // RENDER FUNCTIONS
+    // ==========================================
+    function getEmployee(id) {
+      return employees.find(e => e.id === id) || employees[0];
+    }
+
+    function renderCurrentDate() {
+      const now = new Date();
+      const options = { weekday: 'long', day: 'numeric', month: 'long', year: 'numeric' };
+      document.getElementById('currentDate').textContent = now.toLocaleDateString('da-DK', options);
+    }
+
+    function renderMiniCalendar() {
+      const container = document.getElementById('miniCalendar');
+      container.innerHTML = weekDays.map(day => `
+        <swp-mini-day class="${day.isToday ? 'today' : ''}">
+          <swp-mini-day-name>${day.name}</swp-mini-day-name>
+          <swp-mini-day-date>${day.day}</swp-mini-day-date>
+          <swp-mini-day-status>
+            ${day.gaps > 0 ? `<swp-mini-day-dot class="${day.gaps > 1 ? 'critical' : 'gap'}"></swp-mini-day-dot>`.repeat(Math.min(day.gaps, 3)) : '<swp-mini-day-dot></swp-mini-day-dot>'}
+          </swp-mini-day-status>
+        </swp-mini-day>
+      `).join('');
+    }
+
+    function renderGapsList() {
+      const container = document.getElementById('gapsList');
+      container.innerHTML = gaps.map(gap => {
+        const emp = getEmployee(gap.employeeId);
+        return `
+          <swp-gap-card>
+            <swp-gap-header>
+              <swp-gap-time>
+                <i class="ph ph-clock"></i>
+                ${gap.dayName} ${gap.start}-${gap.end} (${gap.duration} min)
+              </swp-gap-time>
+              <swp-gap-meta>
+                <swp-gap-employee>
+                  <swp-gap-employee-avatar style="background: ${emp.color}">${emp.initials}</swp-gap-employee-avatar>
+                  ${emp.name}
+                </swp-gap-employee>
+                <swp-gap-revenue>~${gap.lostRevenue} kr. tabt</swp-gap-revenue>
+              </swp-gap-meta>
+            </swp-gap-header>
+            <swp-gap-content>
+              <swp-gap-suggestions-title>
+                <i class="ph ph-sparkle"></i>
+                AI-forslag
+              </swp-gap-suggestions-title>
+              <swp-suggestion-list>
+                ${gap.suggestions.map(s => renderSuggestion(s)).join('')}
+              </swp-suggestion-list>
+            </swp-gap-content>
+          </swp-gap-card>
+        `;
+      }).join('');
+    }
+
+    function renderSuggestion(suggestion) {
+      if (suggestion.type === 'move') {
+        return `
+          <swp-suggestion-item>
+            <swp-suggestion-info>
+              <swp-suggestion-customer>${suggestion.customerName}</swp-suggestion-customer>
+              <swp-suggestion-detail>Nuværende tid: ${suggestion.currentTime} · ${suggestion.service}</swp-suggestion-detail>
+              <swp-flex-score>
+                <i class="ph ph-chart-line-up"></i>
+                Fleksibilitet: ${suggestion.flexScore}%
+              </swp-flex-score>
+            </swp-suggestion-info>
+            <swp-suggestion-action>
+              <swp-btn class="primary" onclick="sendOffer('${suggestion.customerId}')">
+                <i class="ph ph-paper-plane-tilt"></i>
+                Send tilbud -5%
+              </swp-btn>
+            </swp-suggestion-action>
+          </swp-suggestion-item>
+        `;
+      } else {
+        return `
+          <swp-suggestion-item class="waitlist">
+            <swp-suggestion-info>
+              <swp-suggestion-customer>
+                ${suggestion.customerName}
+                <swp-waitlist-badge>
+                  <i class="ph ph-clock"></i>
+                  Venteliste
+                </swp-waitlist-badge>
+              </swp-suggestion-customer>
+              <swp-suggestion-detail>${suggestion.note} · ${suggestion.service}</swp-suggestion-detail>
+            </swp-suggestion-info>
+            <swp-suggestion-action>
+              <swp-btn class="secondary" onclick="sendOffer('${suggestion.customerId}')">
+                <i class="ph ph-paper-plane-tilt"></i>
+                Send tilbud
+              </swp-btn>
+            </swp-suggestion-action>
+          </swp-suggestion-item>
+        `;
+      }
+    }
+
+    function renderSmsHistory() {
+      const container = document.getElementById('smsList');
+      container.innerHTML = smsHistory.map(sms => {
+        let icon, iconClass;
+        if (sms.status === 'accepted') {
+          icon = 'check';
+          iconClass = 'accepted';
+        } else if (sms.status === 'rejected') {
+          icon = 'x';
+          iconClass = 'rejected';
+        } else {
+          icon = 'hourglass';
+          iconClass = 'pending';
+        }
+
+        return `
+          <swp-sms-item>
+            <swp-sms-status-icon class="${iconClass}">
+              <i class="ph ph-${icon}"></i>
+            </swp-sms-status-icon>
+            <swp-sms-info>
+              <swp-sms-customer>${sms.customerName}</swp-sms-customer>
+              <swp-sms-detail>${sms.action}${sms.discount ? ` · ${sms.discount} rabat` : ''}</swp-sms-detail>
+            </swp-sms-info>
+            <swp-sms-date>${sms.date}</swp-sms-date>
+          </swp-sms-item>
+        `;
+      }).join('');
+    }
+
+    // ==========================================
+    // ACTIONS
+    // ==========================================
+    function sendOffer(customerId) {
+      // Simuler send
+      alert(`SMS sendt til kunde ${customerId} med tilbud om at flytte tid!`);
+    }
+
+    // ==========================================
+    // INIT
+    // ==========================================
+    function init() {
+      renderCurrentDate();
+      renderMiniCalendar();
+      renderGapsList();
+      renderSmsHistory();
+    }
+
+    init();
+  </script>
+
+</body>
+</html>
diff --git a/.workbench/POC/poc-arbejdstidsplan.html b/.workbench/POC/poc-arbejdstidsplan.html
new file mode 100644
index 0000000..d27190e
--- /dev/null
+++ b/.workbench/POC/poc-arbejdstidsplan.html
@@ -0,0 +1,1783 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Arbejdstidsplan</title>
+  <style>
+    @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500&display=swap');
+
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    :root {
+      --color-background: #ffffff;
+      --color-background-alt: #f8f9fa;
+      --color-border: #e5e7eb;
+      --color-text: #1f2937;
+      --color-text-secondary: #6b7280;
+      --color-text-muted: #9ca3af;
+      --color-teal: #00897b;
+      --color-teal-light: #ccfbf1;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+      background: var(--color-background-alt);
+      color: var(--color-text);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       PAGE LAYOUT
+       ========================================== */
+    swp-page {
+      display: block;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    swp-page-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 24px;
+    }
+
+    swp-page-title {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-page-actions {
+      display: flex;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       WEEK NAVIGATION
+       ========================================== */
+    swp-week-nav {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 24px;
+    }
+
+    swp-week-date-nav {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-week-nav button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-background);
+      cursor: pointer;
+      color: var(--color-text);
+      font-size: 16px;
+    }
+
+    swp-week-nav button:hover {
+      background: var(--color-background-alt);
+    }
+
+    swp-week-label {
+      font-size: 15px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      min-width: 200px;
+      text-align: center;
+    }
+
+    /* ==========================================
+       BUTTONS
+       ========================================== */
+    swp-button {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      border-radius: 6px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      border: none;
+      transition: all 0.15s ease;
+    }
+
+    swp-button.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-button.primary:hover {
+      background: #0f766e;
+    }
+
+    swp-button.secondary {
+      background: var(--color-background);
+      color: var(--color-text);
+      border: 1px solid var(--color-border);
+    }
+
+    swp-button.secondary:hover {
+      background: var(--color-background-alt);
+    }
+
+    /* ==========================================
+       SCHEDULE TABLE (flat grid with cell borders)
+       ========================================== */
+    swp-schedule-table {
+      display: grid;
+      grid-template-columns: 180px repeat(7, minmax(100px, 1fr));
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-schedule-cell {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      padding: 12px 16px;
+      min-height: 60px;
+      background: var(--color-background);
+      border-right: 1px solid var(--color-border);
+      border-bottom: 1px solid var(--color-border);
+      user-select: none;
+    }
+
+    /* Sidste kolonne: ingen højre border */
+    swp-schedule-cell:nth-child(8n) {
+      border-right: none;
+    }
+
+    /* Sidste række: ingen bund border */
+    swp-schedule-cell:nth-last-child(-n+8) {
+      border-bottom: none;
+    }
+
+    swp-schedule-cell.header {
+      background: var(--color-background-alt);
+      font-weight: 500;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      min-height: 48px;
+      text-align: center;
+      align-items: center;
+    }
+
+    swp-schedule-cell.header.week-number {
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    /* Lukkedag styling */
+    body.edit-mode swp-schedule-cell.header:not(.week-number) {
+      cursor: pointer;
+    }
+
+    body.edit-mode swp-schedule-cell.header:not(.week-number):hover {
+      background: var(--color-border);
+    }
+
+    swp-schedule-cell.header.closed {
+      background: color-mix(in srgb, #f59e0b 10%, var(--color-background-alt));
+      border-top: 2px solid #f59e0b !important;
+      border-left: 2px solid #f59e0b !important;
+      border-right: 2px solid #f59e0b !important;
+      border-bottom: none !important;
+    }
+
+    swp-schedule-cell.header.closed swp-day-name {
+      color: #d97706;
+    }
+
+    /* Celler i lukket kolonne */
+    swp-schedule-cell.day.closed-day {
+      background: color-mix(in srgb, #f59e0b 6%, var(--color-background));
+      border-left: 2px solid #f59e0b !important;
+      border-right: 2px solid #f59e0b !important;
+    }
+
+    /* Sidste celle i lukket kolonne får bund-border */
+    swp-schedule-cell.day.closed-day:nth-last-child(-n+8) {
+      border-bottom: 2px solid #f59e0b !important;
+    }
+
+    swp-schedule-cell.day.closed-day swp-time-display {
+      opacity: 0.5;
+    }
+
+    swp-schedule-cell.employee {
+      align-items: flex-start;
+      gap: 2px;
+    }
+
+    swp-schedule-cell.day {
+      align-items: center;
+      text-align: center;
+      position: relative;
+    }
+
+    /* ==========================================
+       EMPLOYEE INFO
+       ========================================== */
+    swp-employee-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-employee-hours {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--color-text-muted);
+    }
+
+    /* ==========================================
+       TIME DISPLAY
+       ========================================== */
+    swp-time-display {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      font-weight: 500;
+      padding: 4px 8px;
+      border-radius: 4px;
+      background: color-mix(in srgb, var(--color-teal) 10%, white);
+      color: var(--color-text);
+      white-space: nowrap;
+      min-width: 90px;
+      text-align: center;
+      display: inline-block;
+    }
+
+    swp-time-display.off {
+      background: transparent;
+      color: var(--color-text-muted);
+    }
+
+    swp-time-display.off.off-override {
+      background: color-mix(in srgb, #7c3aed 12%, white);
+      color: #6d28d9;
+    }
+
+    swp-time-display.vacation {
+      background: color-mix(in srgb, #f59e0b 15%, white);
+      color: #b45309;
+    }
+
+    swp-time-display.sick {
+      background: color-mix(in srgb, #ef4444 15%, white);
+      color: #dc2626;
+    }
+
+    /* ==========================================
+       DAY HEADER
+       ========================================== */
+    swp-day-name {
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-day-date {
+      font-size: 12px;
+      color: var(--color-text-muted);
+      font-weight: 400;
+    }
+
+    /* ==========================================
+       EDIT MODE
+       ========================================== */
+    body.edit-mode swp-schedule-cell.day {
+      cursor: pointer;
+      position: relative;
+    }
+
+    body.edit-mode swp-schedule-cell.day:hover {
+      background: var(--color-background-alt);
+    }
+
+
+    body.edit-mode swp-schedule-cell.day.selected {
+      background: color-mix(in srgb, var(--color-teal) 12%, white);
+      border-color: var(--color-teal);
+      border-width: 2px;
+      border-left: 2px solid var(--color-teal);
+      border-top: 2px solid var(--color-teal);
+      /* Kompenser for ekstra border-bredde */
+      margin-left: -1px;
+      margin-top: -1px;
+      padding: 11px 15px;
+    }
+
+    /* Én border mellem tilstødende valgte celler */
+    /* Venstre celle beholder sin højre border, højre celle fjerner sin venstre */
+    body.edit-mode swp-schedule-cell.day.selected.adj-left {
+      border-left: none;
+      margin-left: 0;
+      padding-left: 12px;
+    }
+    /* Øverste celle beholder sin bund border, nederste celle fjerner sin top */
+    body.edit-mode swp-schedule-cell.day.selected.adj-top {
+      border-top: none;
+      margin-top: 0;
+      padding-top: 12px;
+    }
+
+    /* ==========================================
+       DRAWER
+       ========================================== */
+    swp-drawer {
+      display: block;
+      position: fixed;
+      top: 0;
+      right: -400px;
+      width: 400px;
+      height: 100vh;
+      background: var(--color-background);
+      box-shadow: -4px 0 20px rgba(0, 0, 0, 0.1);
+      z-index: 101;
+      transition: right 0.3s ease;
+      overflow-y: auto;
+    }
+
+    swp-drawer.open {
+      right: 0;
+    }
+
+    swp-drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 24px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-drawer-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-drawer-subtitle {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    swp-drawer-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border: none;
+      background: transparent;
+      cursor: pointer;
+      border-radius: 6px;
+      color: var(--color-text-secondary);
+      font-size: 20px;
+    }
+
+    swp-drawer-close:hover {
+      background: var(--color-border);
+    }
+
+    swp-drawer-content {
+      display: block;
+      padding: 24px;
+    }
+
+    swp-drawer-section {
+      display: block;
+      margin-bottom: 24px;
+    }
+
+    swp-drawer-section-title {
+      display: block;
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      margin-bottom: 12px;
+    }
+
+    /* ==========================================
+       DRAWER FORM ELEMENTS
+       ========================================== */
+    swp-form-row {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      margin-bottom: 16px;
+    }
+
+    swp-form-label {
+      font-size: 11px;
+      font-weight: 400;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    swp-form-label .optional,
+    swp-form-label .auto {
+      font-weight: 400;
+      text-transform: none;
+      color: var(--color-text-muted);
+    }
+
+    swp-form-value {
+      font-size: 15px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-form-divider {
+      display: block;
+      height: 1px;
+      background: var(--color-border);
+      margin: 20px 0;
+    }
+
+    swp-form-group {
+      display: block;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      margin-top: 16px;
+    }
+
+    swp-form-group swp-form-row:last-child {
+      margin-bottom: 0;
+    }
+
+    swp-form-hint {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-muted);
+      margin: -8px 0 16px 0;
+      line-height: 1.4;
+    }
+
+    swp-form-select {
+      display: block;
+    }
+
+    swp-form-select select {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      cursor: pointer;
+    }
+
+    swp-form-select select:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-drawer-content input[type="time"],
+    swp-drawer-content input[type="text"],
+    swp-drawer-content input[type="date"] {
+      width: 100%;
+      padding: 10px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+    }
+
+    swp-drawer-content input[type="time"] {
+      font-family: var(--font-mono);
+    }
+
+    swp-drawer-content input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-drawer-content input::placeholder {
+      color: var(--color-text-muted);
+    }
+
+    /* ==========================================
+       TOGGLE OPTIONS (Enkelt/Gentagelse)
+       ========================================== */
+    swp-toggle-options {
+      display: flex;
+      gap: 0;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      overflow: hidden;
+    }
+
+    swp-toggle-option {
+      flex: 1;
+      padding: 10px 16px;
+      text-align: center;
+      font-size: 14px;
+      cursor: pointer;
+      background: var(--color-background);
+      border-right: 1px solid var(--color-border);
+      transition: all 0.15s ease;
+    }
+
+    swp-toggle-option:last-child {
+      border-right: none;
+    }
+
+    swp-toggle-option:hover {
+      background: var(--color-background-alt);
+    }
+
+    swp-toggle-option.selected {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    /* ==========================================
+       STATUS OPTIONS (badge style like poc-detail-drawer)
+       ========================================== */
+    swp-status-options {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+    }
+
+    swp-status-option {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      border: none;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 0.15s ease;
+      font-size: 13px;
+      font-weight: 500;
+      background: var(--color-background-alt);
+      color: var(--color-text-secondary);
+    }
+
+    swp-status-option::before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    swp-status-option[data-status="work"] {
+      --status-color: var(--color-teal);
+    }
+    swp-status-option[data-status="off"] {
+      --status-color: #7c3aed;
+    }
+    swp-status-option[data-status="vacation"] {
+      --status-color: #f59e0b;
+    }
+    swp-status-option[data-status="sick"] {
+      --status-color: #e53935;
+    }
+
+    swp-status-option::before {
+      background: var(--status-color);
+    }
+
+    swp-status-option:hover {
+      background: var(--color-border);
+    }
+
+    swp-status-option.selected {
+      background: color-mix(in srgb, var(--status-color) 15%, white);
+      color: var(--status-color);
+    }
+
+    /* ==========================================
+       DRAWER FOOTER
+       ========================================== */
+    swp-drawer-footer {
+      display: flex;
+      gap: 12px;
+      padding: 20px 24px;
+      border-top: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-drawer-footer swp-button {
+      flex: 1;
+    }
+
+    /* ==========================================
+       OVERRIDE DISPLAY
+       ========================================== */
+    swp-time-override {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 2px;
+    }
+
+    swp-time-original {
+      font-family: var(--font-mono);
+      font-size: 10px;
+      color: var(--color-text-muted);
+      text-decoration: line-through;
+    }
+
+    swp-override-badge {
+      position: absolute;
+      top: 4px;
+      right: 4px;
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: #f59e0b;
+    }
+
+    /* ==========================================
+       TIME RANGE SLIDER
+       ========================================== */
+    swp-time-range {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-time-range-slider {
+      position: relative;
+      flex: 1;
+      height: 20px;
+      display: flex;
+      align-items: center;
+    }
+
+    swp-time-range-track {
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      background: var(--color-border);
+      border-radius: 2px;
+    }
+
+    swp-time-range-fill {
+      position: absolute;
+      height: 4px;
+      background: var(--color-teal);
+      border-radius: 2px;
+      cursor: grab;
+    }
+
+    swp-time-range-fill:active {
+      cursor: grabbing;
+    }
+
+    swp-time-range-slider input[type="range"] {
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      -webkit-appearance: none;
+      appearance: none;
+      background: transparent;
+      pointer-events: none;
+      margin: 0;
+    }
+
+    swp-time-range-slider input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 14px;
+      height: 14px;
+      background: var(--color-teal);
+      border: 2px solid white;
+      border-radius: 50%;
+      cursor: pointer;
+      pointer-events: auto;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    }
+
+    swp-time-range-slider input[type="range"]::-moz-range-thumb {
+      width: 14px;
+      height: 14px;
+      background: var(--color-teal);
+      border: 2px solid white;
+      border-radius: 50%;
+      cursor: pointer;
+      pointer-events: auto;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    }
+
+    swp-time-range-label {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 2px;
+      min-width: 100px;
+      text-align: center;
+      background: var(--color-background-alt);
+      padding: 6px 12px;
+      border-radius: 4px;
+    }
+
+    swp-time-range-times {
+      font-size: 13px;
+      font-family: var(--font-mono);
+      font-weight: 500;
+      color: var(--color-text);
+      white-space: nowrap;
+    }
+
+    swp-time-range-duration {
+      font-size: 11px;
+      font-family: var(--font-mono);
+      color: var(--color-text-secondary);
+      white-space: nowrap;
+    }
+
+    /* ==========================================
+       DRAWER EMPLOYEE DISPLAY
+       ========================================== */
+    swp-employee-display {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    swp-employee-display swp-employee-avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 12px;
+      flex-shrink: 0;
+    }
+
+    swp-employee-display.empty swp-employee-avatar {
+      background: var(--color-border);
+      color: var(--color-text-muted);
+    }
+
+    swp-employee-display.multi swp-employee-avatar {
+      background: var(--color-text-muted);
+    }
+
+    /* Note icon i celle */
+    swp-note-icon {
+      position: absolute;
+      bottom: 7px;
+      right: 4px;
+      width: 14px;
+      height: 14px;
+      opacity: 0.5;
+    }
+
+    swp-note-icon img {
+      width: 100%;
+      height: 100%;
+      filter: brightness(0) saturate(100%) invert(20%) sepia(30%) saturate(700%) hue-rotate(190deg) brightness(90%) contrast(95%);
+    }
+
+    /* Override indikator - viser original tid overstreget */
+    swp-override-original {
+      position: absolute;
+      bottom: 1px;
+      left: 8px;
+      font-family: var(--font-mono);
+      font-size: 10px;
+      color: var(--color-text-muted);
+      text-decoration: line-through;
+      opacity: 0.7;
+    }
+  </style>
+</head>
+<body>
+
+<swp-page>
+  <swp-page-header>
+    <swp-page-title>Arbejdstidsplan</swp-page-title>
+    <swp-page-actions>
+      <swp-button class="primary" id="editModeBtn">
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+        </svg>
+        Rediger
+      </swp-button>
+    </swp-page-actions>
+  </swp-page-header>
+
+  <swp-week-nav>
+    <swp-week-date-nav>
+      <button id="prevWeek">&#8249;</button>
+      <swp-week-label>23. - 29. december 2025</swp-week-label>
+      <button id="nextWeek">&#8250;</button>
+    </swp-week-date-nav>
+  </swp-week-nav>
+
+  <swp-schedule-table>
+    <!-- Header row -->
+    <swp-schedule-cell class="header week-number">Uge 52</swp-schedule-cell>
+    <swp-schedule-cell class="header">
+      <swp-day-name>Mandag</swp-day-name>
+      <swp-day-date>23/12</swp-day-date>
+    </swp-schedule-cell>
+    <swp-schedule-cell class="header">
+      <swp-day-name>Tirsdag</swp-day-name>
+      <swp-day-date>24/12</swp-day-date>
+    </swp-schedule-cell>
+    <swp-schedule-cell class="header closed">
+      <swp-day-name>Onsdag</swp-day-name>
+      <swp-day-date>25/12</swp-day-date>
+    </swp-schedule-cell>
+    <swp-schedule-cell class="header">
+      <swp-day-name>Torsdag</swp-day-name>
+      <swp-day-date>26/12</swp-day-date>
+    </swp-schedule-cell>
+    <swp-schedule-cell class="header">
+      <swp-day-name>Fredag</swp-day-name>
+      <swp-day-date>27/12</swp-day-date>
+    </swp-schedule-cell>
+    <swp-schedule-cell class="header">
+      <swp-day-name>Lørdag</swp-day-name>
+      <swp-day-date>28/12</swp-day-date>
+    </swp-schedule-cell>
+    <swp-schedule-cell class="header">
+      <swp-day-name>Søndag</swp-day-name>
+      <swp-day-date>29/12</swp-day-date>
+    </swp-schedule-cell>
+
+    <!-- Anna Sørensen -->
+    <swp-schedule-cell class="employee">
+      <swp-employee-name>Anna Sørensen</swp-employee-name>
+      <swp-employee-hours>32 timer</swp-employee-hours>
+    </swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Man" data-date="23/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Tir" data-date="24/12"><swp-time-display>09:00 - 13:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day closed-day" data-employee="Anna Sørensen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Tor" data-date="26/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Fre" data-date="27/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Lør" data-date="28/12"><swp-time-display>10:00 - 14:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Anna Sørensen" data-day="Søn" data-date="29/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+
+    <!-- Mette Jensen -->
+    <swp-schedule-cell class="employee">
+      <swp-employee-name>Mette Jensen</swp-employee-name>
+      <swp-employee-hours>40 timer</swp-employee-hours>
+    </swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Man" data-date="23/12"><swp-time-display>10:00 - 18:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Tir" data-date="24/12"><swp-time-display>10:00 - 18:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day closed-day" data-employee="Mette Jensen" data-day="Ons" data-date="25/12"><swp-time-display class="vacation">Ferie</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Tor" data-date="26/12"><swp-time-display class="vacation">Ferie</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Fre" data-date="27/12"><swp-time-display class="vacation">Ferie</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Lør" data-date="28/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Mette Jensen" data-day="Søn" data-date="29/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+
+    <!-- Louise Nielsen -->
+    <swp-schedule-cell class="employee">
+      <swp-employee-name>Louise Nielsen</swp-employee-name>
+      <swp-employee-hours>37 timer</swp-employee-hours>
+    </swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Man" data-date="23/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Tir" data-date="24/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day closed-day" data-employee="Louise Nielsen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Tor" data-date="26/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Fre" data-date="27/12"><swp-time-display>09:00 - 17:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Lør" data-date="28/12"><swp-time-display>09:00 - 14:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Louise Nielsen" data-day="Søn" data-date="29/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+
+    <!-- Katrine Pedersen -->
+    <swp-schedule-cell class="employee">
+      <swp-employee-name>Katrine Pedersen</swp-employee-name>
+      <swp-employee-hours>24 timer</swp-employee-hours>
+    </swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Man" data-date="23/12"><swp-time-display>12:00 - 20:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Tir" data-date="24/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day closed-day" data-employee="Katrine Pedersen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Tor" data-date="26/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Fre" data-date="27/12"><swp-time-display>12:00 - 20:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Lør" data-date="28/12"><swp-time-display>10:00 - 18:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Katrine Pedersen" data-day="Søn" data-date="29/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+
+    <!-- Sofie Andersen -->
+    <swp-schedule-cell class="employee">
+      <swp-employee-name>Sofie Andersen</swp-employee-name>
+      <swp-employee-hours>20 timer</swp-employee-hours>
+    </swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Man" data-date="23/12"><swp-time-display class="sick">Syg</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Tir" data-date="24/12"><swp-time-display>09:00 - 15:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day closed-day" data-employee="Sofie Andersen" data-day="Ons" data-date="25/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Tor" data-date="26/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Fre" data-date="27/12"><swp-time-display>09:00 - 15:00</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Lør" data-date="28/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+    <swp-schedule-cell class="day" data-employee="Sofie Andersen" data-day="Søn" data-date="29/12"><swp-time-display class="off">—</swp-time-display></swp-schedule-cell>
+  </swp-schedule-table>
+</swp-page>
+
+<!-- DRAWER -->
+<swp-drawer id="scheduleDrawer">
+  <swp-drawer-header>
+    <swp-drawer-title id="drawerTitle">Redigér vagt</swp-drawer-title>
+    <swp-drawer-close id="drawerClose">×</swp-drawer-close>
+  </swp-drawer-header>
+
+  <swp-drawer-content>
+    <swp-form-row>
+      <swp-form-label>Medarbejder</swp-form-label>
+      <swp-employee-display id="fieldEmployeeDisplay">
+        <swp-employee-avatar id="fieldAvatar"></swp-employee-avatar>
+        <swp-form-value id="fieldEmployee">Vælg celle...</swp-form-value>
+      </swp-employee-display>
+    </swp-form-row>
+
+    <swp-form-row>
+      <swp-form-label>Dato</swp-form-label>
+      <swp-form-value id="fieldDate">—</swp-form-value>
+    </swp-form-row>
+
+    <swp-form-divider></swp-form-divider>
+
+    <swp-form-row>
+      <swp-form-label>Status</swp-form-label>
+      <swp-status-options id="statusOptions">
+        <swp-status-option data-status="work" class="selected">Arbejde</swp-status-option>
+        <swp-status-option data-status="off">Fri</swp-status-option>
+        <swp-status-option data-status="vacation">Ferie</swp-status-option>
+        <swp-status-option data-status="sick">Syg</swp-status-option>
+      </swp-status-options>
+    </swp-form-row>
+
+    <swp-form-row id="timeRow">
+      <swp-form-label>Tidsrum</swp-form-label>
+      <swp-time-range id="drawerTimeRange">
+        <swp-time-range-slider>
+          <swp-time-range-track></swp-time-range-track>
+          <swp-time-range-fill></swp-time-range-fill>
+          <input type="range" class="range-start" min="0" max="60" value="12" step="1">
+          <input type="range" class="range-end" min="0" max="60" value="44" step="1">
+        </swp-time-range-slider>
+        <swp-time-range-label>
+          <swp-time-range-times>09:00 – 17:00</swp-time-range-times>
+          <swp-time-range-duration>8 timer</swp-time-range-duration>
+        </swp-time-range-label>
+      </swp-time-range>
+    </swp-form-row>
+
+    <swp-form-row>
+      <swp-form-label>Note <span class="optional">(valgfrit)</span></swp-form-label>
+      <input type="text" id="fieldNote" placeholder="F.eks. Aftenvagt">
+    </swp-form-row>
+
+    <swp-form-divider></swp-form-divider>
+
+    <swp-form-row>
+      <swp-form-label>Type</swp-form-label>
+      <swp-toggle-options id="typeOptions">
+        <swp-toggle-option data-value="single">Enkelt</swp-toggle-option>
+        <swp-toggle-option data-value="template" class="selected">Gentagelse</swp-toggle-option>
+      </swp-toggle-options>
+    </swp-form-row>
+
+    <swp-form-group id="repeatGroup">
+      <swp-form-row>
+        <swp-form-label>Gentag</swp-form-label>
+        <swp-form-select>
+          <select id="repeatInterval">
+            <option value="1">Hver uge</option>
+            <option value="2">Hver 2. uge</option>
+            <option value="3">Hver 3. uge</option>
+            <option value="4">Hver 4. uge</option>
+          </select>
+        </swp-form-select>
+      </swp-form-row>
+
+      <swp-form-hint>
+        Gentagelser bruger valgt dato som startuge.
+      </swp-form-hint>
+
+      <swp-form-row>
+        <swp-form-label>Slutdato <span class="optional">(valgfrit)</span></swp-form-label>
+        <input type="date" id="repeatEndDate">
+      </swp-form-row>
+
+      <swp-form-row>
+        <swp-form-label>Ugedag <span class="auto">(auto)</span></swp-form-label>
+        <swp-form-value id="fieldWeekday">—</swp-form-value>
+      </swp-form-row>
+    </swp-form-group>
+  </swp-drawer-content>
+
+  <swp-drawer-footer>
+    <swp-button class="secondary" id="drawerCancel">Annuller</swp-button>
+    <swp-button class="primary" id="drawerSave">Gem</swp-button>
+  </swp-drawer-footer>
+</swp-drawer>
+
+<script>
+  // ==========================================
+  // EDIT MODE
+  // ==========================================
+  const editModeBtn = document.getElementById('editModeBtn');
+  let isEditMode = false;
+
+  editModeBtn.addEventListener('click', () => {
+    isEditMode = !isEditMode;
+    document.body.classList.toggle('edit-mode', isEditMode);
+
+    if (isEditMode) {
+      editModeBtn.innerHTML = `
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+          <polyline points="17 21 17 13 7 13 7 21"/>
+          <polyline points="7 3 7 8 15 8"/>
+        </svg>
+        Færdig`;
+      openDrawer();
+      showEmptyState();
+    } else {
+      editModeBtn.innerHTML = `
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+          <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+        </svg>
+        Rediger`;
+      closeDrawer();
+      clearSelection();
+    }
+  });
+
+  // ==========================================
+  // DRAWER
+  // ==========================================
+  const drawer = document.getElementById('scheduleDrawer');
+  const drawerClose = document.getElementById('drawerClose');
+  const drawerCancel = document.getElementById('drawerCancel');
+  const drawerSave = document.getElementById('drawerSave');
+  const drawerContent = document.querySelector('swp-drawer-content');
+  const drawerFooter = document.querySelector('swp-drawer-footer');
+
+  // Form fields
+  const fieldEmployee = document.getElementById('fieldEmployee');
+  const fieldEmployeeDisplay = document.getElementById('fieldEmployeeDisplay');
+  const fieldAvatar = document.getElementById('fieldAvatar');
+  const fieldDate = document.getElementById('fieldDate');
+  const fieldWeekday = document.getElementById('fieldWeekday');
+  const timeRow = document.getElementById('timeRow');
+  const repeatGroup = document.getElementById('repeatGroup');
+  const drawerTimeRange = document.getElementById('drawerTimeRange');
+
+  function getInitials(name) {
+    return name.split(' ').map(n => n[0]).join('').toUpperCase().slice(0, 2);
+  }
+
+  const weekdays = ['Søndag', 'Mandag', 'Tirsdag', 'Onsdag', 'Torsdag', 'Fredag', 'Lørdag'];
+
+  // ==========================================
+  // TIME RANGE SLIDER
+  // ==========================================
+  const TIME_RANGE_MAX = 60; // 15 hours (06:00-21:00) * 4 intervals
+
+  function valueToTime(value) {
+    const totalMinutes = (value * 15) + (6 * 60); // Add 6 hour offset
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+  }
+
+  function timeToValue(timeStr) {
+    const [hours, minutes] = timeStr.split(':').map(Number);
+    const totalMinutes = hours * 60 + minutes;
+    return Math.round((totalMinutes - 6 * 60) / 15);
+  }
+
+  function updateTimeRange(slider) {
+    const startInput = slider.querySelector('.range-start');
+    const endInput = slider.querySelector('.range-end');
+    const fill = slider.querySelector('swp-time-range-fill');
+    const labelContainer = slider.closest('swp-time-range').querySelector('swp-time-range-label');
+    const timesEl = labelContainer.querySelector('swp-time-range-times');
+    const durationEl = labelContainer.querySelector('swp-time-range-duration');
+
+    let startVal = parseInt(startInput.value);
+    let endVal = parseInt(endInput.value);
+
+    // Ensure start doesn't exceed end
+    if (startVal > endVal) {
+      if (startInput === document.activeElement) {
+        startInput.value = endVal;
+        startVal = endVal;
+      } else {
+        endInput.value = startVal;
+        endVal = startVal;
+      }
+    }
+
+    // Update fill bar position
+    const startPercent = (startVal / TIME_RANGE_MAX) * 100;
+    const endPercent = (endVal / TIME_RANGE_MAX) * 100;
+    fill.style.left = startPercent + '%';
+    fill.style.width = (endPercent - startPercent) + '%';
+
+    // Calculate duration in hours
+    const durationIntervals = endVal - startVal;
+    const durationMinutes = durationIntervals * 15;
+    const durationHours = durationMinutes / 60;
+    const durationText = durationHours % 1 === 0
+      ? `${durationHours} timer`
+      : `${durationHours.toFixed(1).replace('.', ',')} timer`;
+
+    // Update time range and duration separately
+    timesEl.textContent = `${valueToTime(startVal)} – ${valueToTime(endVal)}`;
+    durationEl.textContent = durationText;
+  }
+
+  function initTimeRangeSlider(sliderContainer) {
+    const slider = sliderContainer.querySelector('swp-time-range-slider');
+    const startInput = slider.querySelector('.range-start');
+    const endInput = slider.querySelector('.range-end');
+    const fill = slider.querySelector('swp-time-range-fill');
+    const track = slider.querySelector('swp-time-range-track');
+
+    // Initialize
+    updateTimeRange(slider);
+
+    startInput.addEventListener('input', () => {
+      updateTimeRange(slider);
+      updateSelectedCellsTime();
+    });
+    endInput.addEventListener('input', () => {
+      updateTimeRange(slider);
+      updateSelectedCellsTime();
+    });
+
+    // Drag fill bar to move entire range
+    let isDragging = false;
+    let dragStartX = 0;
+    let dragStartValues = { start: 0, end: 0 };
+
+    fill.addEventListener('mousedown', (e) => {
+      isDragging = true;
+      dragStartX = e.clientX;
+      dragStartValues.start = parseInt(startInput.value);
+      dragStartValues.end = parseInt(endInput.value);
+      e.preventDefault();
+    });
+
+    document.addEventListener('mousemove', (e) => {
+      if (!isDragging) return;
+
+      const sliderWidth = track.offsetWidth;
+      const deltaX = e.clientX - dragStartX;
+      const deltaValue = Math.round((deltaX / sliderWidth) * TIME_RANGE_MAX);
+
+      const duration = dragStartValues.end - dragStartValues.start;
+      let newStart = dragStartValues.start + deltaValue;
+      let newEnd = dragStartValues.end + deltaValue;
+
+      // Clamp to bounds
+      if (newStart < 0) {
+        newStart = 0;
+        newEnd = duration;
+      }
+      if (newEnd > TIME_RANGE_MAX) {
+        newEnd = TIME_RANGE_MAX;
+        newStart = TIME_RANGE_MAX - duration;
+      }
+
+      startInput.value = newStart;
+      endInput.value = newEnd;
+      updateTimeRange(slider);
+      updateSelectedCellsTime();
+    });
+
+    document.addEventListener('mouseup', () => {
+      isDragging = false;
+    });
+  }
+
+  // Initialize the drawer time range slider
+  initTimeRangeSlider(drawerTimeRange);
+
+  // Opdater valgte celler i realtid når tiden ændres
+  function updateSelectedCellsTime() {
+    const selectedStatus = document.querySelector('#statusOptions swp-status-option.selected');
+    const status = selectedStatus ? selectedStatus.dataset.status : 'work';
+
+    // Kun opdater hvis status er "work"
+    if (status !== 'work') return;
+
+    const slider = drawerTimeRange.querySelector('swp-time-range-slider');
+    const startVal = parseInt(slider.querySelector('.range-start').value);
+    const endVal = parseInt(slider.querySelector('.range-end').value);
+    const startTime = valueToTime(startVal);
+    const endTime = valueToTime(endVal);
+    const formattedTime = `${startTime} - ${endTime}`;
+
+    selectedCells.forEach(cell => {
+      const timeDisplay = cell.querySelector('swp-time-display');
+      if (timeDisplay && !timeDisplay.classList.contains('off') &&
+          !timeDisplay.classList.contains('vacation') &&
+          !timeDisplay.classList.contains('sick')) {
+        timeDisplay.textContent = formattedTime;
+      }
+    });
+  }
+
+  let selectedCells = [];
+  const GRID_COLUMNS = 8; // 1 employee + 7 days
+  const allCells = Array.from(document.querySelectorAll('swp-schedule-table > swp-schedule-cell'));
+
+  function updateAdjacentClasses() {
+    // Fjern adjacency klasser først
+    selectedCells.forEach(c => c.classList.remove('adj-left', 'adj-right', 'adj-top', 'adj-bottom'));
+
+    // Find indices af alle valgte celler
+    const selectedIndices = selectedCells.map(cell => allCells.indexOf(cell));
+
+    selectedCells.forEach(cell => {
+      const idx = allCells.indexOf(cell);
+      const col = idx % GRID_COLUMNS;
+
+      // Venstre nabo
+      if (col > 1 && selectedIndices.includes(idx - 1)) {
+        cell.classList.add('adj-left');
+      }
+      // Højre nabo
+      if (col < GRID_COLUMNS - 1 && selectedIndices.includes(idx + 1)) {
+        cell.classList.add('adj-right');
+      }
+      // Nabo ovenover
+      if (selectedIndices.includes(idx - GRID_COLUMNS)) {
+        cell.classList.add('adj-top');
+      }
+      // Nabo nedenunder
+      if (selectedIndices.includes(idx + GRID_COLUMNS)) {
+        cell.classList.add('adj-bottom');
+      }
+    });
+  }
+
+  function showEmptyState() {
+    fieldEmployee.textContent = 'Vælg celle...';
+    fieldAvatar.textContent = '?';
+    fieldEmployeeDisplay.classList.add('empty');
+    fieldEmployeeDisplay.classList.remove('multi');
+    fieldDate.textContent = '—';
+    fieldWeekday.textContent = '—';
+    drawerContent.style.opacity = '0.5';
+    drawerContent.style.pointerEvents = 'none';
+    drawerFooter.style.display = 'none';
+  }
+
+  function showEditState() {
+    drawerContent.style.opacity = '1';
+    drawerContent.style.pointerEvents = 'auto';
+    drawerFooter.style.display = 'flex';
+  }
+
+  function updateDrawerFields() {
+    if (selectedCells.length === 0) {
+      showEmptyState();
+      return;
+    }
+
+    showEditState();
+    fieldEmployeeDisplay.classList.remove('empty', 'multi');
+
+    if (selectedCells.length === 1) {
+      const cell = selectedCells[0];
+      const employeeName = cell.dataset.employee;
+      fieldEmployee.textContent = employeeName;
+      fieldAvatar.textContent = getInitials(employeeName);
+      fieldDate.textContent = cell.dataset.date + '/2025';
+
+      // Calculate weekday from day name
+      const dayMap = { 'Man': 1, 'Tir': 2, 'Ons': 3, 'Tor': 4, 'Fre': 5, 'Lør': 6, 'Søn': 0 };
+      fieldWeekday.textContent = weekdays[dayMap[cell.dataset.day]];
+
+      // Pre-fill form with current cell values
+      prefillFormFromCell(cell);
+    } else {
+      const employees = [...new Set(selectedCells.map(c => c.dataset.employee))];
+      const days = [...new Set(selectedCells.map(c => c.dataset.day))];
+
+      if (employees.length === 1) {
+        fieldEmployee.textContent = employees[0];
+        fieldAvatar.textContent = getInitials(employees[0]);
+        fieldDate.textContent = `${selectedCells.length} dage valgt`;
+      } else if (days.length === 1) {
+        fieldEmployee.textContent = `${selectedCells.length} medarbejdere`;
+        fieldAvatar.textContent = employees.length;
+        fieldEmployeeDisplay.classList.add('multi');
+        fieldDate.textContent = selectedCells[0].dataset.date + '/2025';
+      } else {
+        fieldEmployee.textContent = `${selectedCells.length} valgt`;
+        fieldAvatar.textContent = selectedCells.length;
+        fieldEmployeeDisplay.classList.add('multi');
+        fieldDate.textContent = `${employees.length} medarbejdere, ${days.length} dage`;
+      }
+      fieldWeekday.textContent = days.length === 1 ? weekdays[{ 'Man': 1, 'Tir': 2, 'Ons': 3, 'Tor': 4, 'Fre': 5, 'Lør': 6, 'Søn': 0 }[days[0]]] : 'Flere dage';
+
+      // Reset form to default for multi-select
+      resetFormToDefault();
+    }
+  }
+
+  function prefillFormFromCell(cell) {
+    const timeDisplay = cell.querySelector('swp-time-display');
+    if (!timeDisplay) return;
+
+    // Determine current status
+    let status = 'work';
+    if (timeDisplay.classList.contains('off')) status = 'off';
+    else if (timeDisplay.classList.contains('vacation')) status = 'vacation';
+    else if (timeDisplay.classList.contains('sick')) status = 'sick';
+
+    // Update status options
+    document.querySelectorAll('#statusOptions swp-status-option').forEach(opt => {
+      opt.classList.toggle('selected', opt.dataset.status === status);
+    });
+
+    // Show/hide time slider based on status
+    const showTime = status === 'work';
+    timeRow.style.display = showTime ? 'flex' : 'none';
+
+    // Parse and fill time if work status
+    if (status === 'work') {
+      const timeText = timeDisplay.textContent.trim();
+      const timeMatch = timeText.match(/(\d{2}:\d{2})\s*-\s*(\d{2}:\d{2})/);
+      if (timeMatch) {
+        const slider = drawerTimeRange.querySelector('swp-time-range-slider');
+        slider.querySelector('.range-start').value = timeToValue(timeMatch[1]);
+        slider.querySelector('.range-end').value = timeToValue(timeMatch[2]);
+        updateTimeRange(slider);
+      }
+    }
+
+    // Reset type to template (gentagelse)
+    document.querySelectorAll('#typeOptions swp-toggle-option').forEach(opt => {
+      opt.classList.toggle('selected', opt.dataset.value === 'template');
+    });
+    repeatGroup.style.display = 'block';
+
+    // Udfyld note hvis den findes
+    document.getElementById('fieldNote').value = cell.dataset.note || '';
+  }
+
+  function resetFormToDefault() {
+    // Reset to work status
+    document.querySelectorAll('#statusOptions swp-status-option').forEach(opt => {
+      opt.classList.toggle('selected', opt.dataset.status === 'work');
+    });
+    timeRow.style.display = 'flex';
+
+    // Reset time slider to 09:00-17:00
+    const slider = drawerTimeRange.querySelector('swp-time-range-slider');
+    slider.querySelector('.range-start').value = 12; // 09:00
+    slider.querySelector('.range-end').value = 44;   // 17:00
+    updateTimeRange(slider);
+
+    // Reset type to template (gentagelse)
+    document.querySelectorAll('#typeOptions swp-toggle-option').forEach(opt => {
+      opt.classList.toggle('selected', opt.dataset.value === 'template');
+    });
+    repeatGroup.style.display = 'block';
+
+    // Nulstil note
+    document.getElementById('fieldNote').value = '';
+  }
+
+  function openDrawer() {
+    drawer.classList.add('open');
+  }
+
+  function closeDrawer() {
+    drawer.classList.remove('open');
+  }
+
+  function clearSelection() {
+    selectedCells.forEach(c => {
+      c.classList.remove('selected', 'adj-left', 'adj-right', 'adj-top', 'adj-bottom');
+    });
+    selectedCells = [];
+  }
+
+  drawerClose.addEventListener('click', () => {
+    // Exit edit mode
+    isEditMode = false;
+    document.body.classList.remove('edit-mode');
+    editModeBtn.innerHTML = `
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <path d="M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7"/>
+        <path d="M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z"/>
+      </svg>
+      Rediger`;
+    closeDrawer();
+    clearSelection();
+  });
+
+  drawerCancel.addEventListener('click', () => {
+    clearSelection();
+    showEmptyState();
+  });
+
+  drawerSave.addEventListener('click', () => {
+    if (selectedCells.length === 0) return;
+
+    const selectedStatus = document.querySelector('#statusOptions swp-status-option.selected');
+    const status = selectedStatus ? selectedStatus.dataset.status : 'work';
+
+    // Get time from slider
+    const slider = drawerTimeRange.querySelector('swp-time-range-slider');
+    const startVal = parseInt(slider.querySelector('.range-start').value);
+    const endVal = parseInt(slider.querySelector('.range-end').value);
+    const startTime = valueToTime(startVal);
+    const endTime = valueToTime(endVal);
+
+    const noteValue = document.getElementById('fieldNote').value.trim();
+
+    selectedCells.forEach(cell => {
+      const timeDisplay = cell.querySelector('swp-time-display');
+      if (!timeDisplay) return;
+
+      // Store original if not already stored (kun hvis cellen har en reel tid)
+      const hasRealTime = !timeDisplay.classList.contains('off') &&
+                          !timeDisplay.classList.contains('vacation') &&
+                          !timeDisplay.classList.contains('sick');
+      if (!cell.dataset.originalTime && hasRealTime) {
+        cell.dataset.originalTime = timeDisplay.textContent;
+      }
+
+      // Remove all status classes
+      timeDisplay.classList.remove('off', 'off-override', 'vacation', 'sick');
+
+      switch (status) {
+        case 'work':
+          const formattedTime = `${startTime} - ${endTime}`;
+          timeDisplay.textContent = formattedTime;
+          break;
+        case 'off':
+          timeDisplay.classList.add('off');
+          if (cell.dataset.originalTime) {
+            timeDisplay.classList.add('off-override');
+            timeDisplay.textContent = 'Fri';
+          } else {
+            timeDisplay.textContent = '—';
+          }
+          break;
+        case 'vacation':
+          timeDisplay.classList.add('vacation');
+          timeDisplay.textContent = 'Ferie';
+          break;
+        case 'sick':
+          timeDisplay.classList.add('sick');
+          timeDisplay.textContent = 'Syg';
+          break;
+      }
+
+      // Håndter note-ikon
+      let noteIcon = cell.querySelector('swp-note-icon');
+      if (noteValue) {
+        if (!noteIcon) {
+          noteIcon = document.createElement('swp-note-icon');
+          noteIcon.innerHTML = '<img src="icons/note-sticky.svg" alt="Note">';
+          cell.appendChild(noteIcon);
+        }
+        cell.dataset.note = noteValue;
+      } else {
+        if (noteIcon) {
+          noteIcon.remove();
+        }
+        delete cell.dataset.note;
+      }
+
+      // Håndter override-indikator (vis original tid når ændret)
+      let overrideEl = cell.querySelector('swp-override-original');
+      if (cell.dataset.originalTime) {
+        // Der er en original værdi - vis override
+        if (!overrideEl) {
+          overrideEl = document.createElement('swp-override-original');
+          cell.appendChild(overrideEl);
+        }
+        overrideEl.textContent = cell.dataset.originalTime;
+      }
+
+      // Mark as modified
+      cell.dataset.modified = 'true';
+    });
+
+    clearSelection();
+    showEmptyState();
+  });
+
+  // ==========================================
+  // CELL CLICK (in edit mode)
+  // ==========================================
+  const dayCells = Array.from(document.querySelectorAll('swp-schedule-cell.day'));
+  let anchorCell = null; // Første valgte celle til shift-selection
+
+  document.querySelectorAll('swp-schedule-cell.day').forEach(cell => {
+    // Dobbeltklik aktiverer edit-mode
+    cell.addEventListener('dblclick', (e) => {
+      if (!isEditMode) {
+        isEditMode = true;
+        document.body.classList.add('edit-mode');
+        editModeBtn.innerHTML = `
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+            <path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/>
+            <polyline points="17 21 17 13 7 13 7 21"/>
+            <polyline points="7 3 7 8 15 8"/>
+          </svg>
+          Færdig`;
+        openDrawer();
+
+        // Vælg den dobbeltklikkede celle
+        clearSelection();
+        cell.classList.add('selected');
+        selectedCells = [cell];
+        anchorCell = cell;
+        updateAdjacentClasses();
+        updateDrawerFields();
+      }
+    });
+
+    cell.addEventListener('click', (e) => {
+      if (!isEditMode) return;
+
+      if (e.shiftKey && anchorCell) {
+        // Shift-click: vælg alle celler fra anchor til denne
+        const anchorIdx = dayCells.indexOf(anchorCell);
+        const targetIdx = dayCells.indexOf(cell);
+        const startIdx = Math.min(anchorIdx, targetIdx);
+        const endIdx = Math.max(anchorIdx, targetIdx);
+
+        // Beregn rækkevidde baseret på grid position
+        const anchorRow = Math.floor(anchorIdx / 7);
+        const anchorCol = anchorIdx % 7;
+        const targetRow = Math.floor(targetIdx / 7);
+        const targetCol = targetIdx % 7;
+
+        const minRow = Math.min(anchorRow, targetRow);
+        const maxRow = Math.max(anchorRow, targetRow);
+        const minCol = Math.min(anchorCol, targetCol);
+        const maxCol = Math.max(anchorCol, targetCol);
+
+        clearSelection();
+
+        // Vælg alle celler i rektanglet
+        dayCells.forEach((c, idx) => {
+          const row = Math.floor(idx / 7);
+          const col = idx % 7;
+          if (row >= minRow && row <= maxRow && col >= minCol && col <= maxCol) {
+            c.classList.add('selected');
+            selectedCells.push(c);
+          }
+        });
+      } else if (e.ctrlKey || e.metaKey) {
+        // Multi-select with Ctrl/Cmd
+        if (cell.classList.contains('selected')) {
+          cell.classList.remove('selected');
+          selectedCells = selectedCells.filter(c => c !== cell);
+        } else {
+          cell.classList.add('selected');
+          selectedCells.push(cell);
+          anchorCell = cell;
+        }
+      } else {
+        // Single click - clear previous and select this one
+        clearSelection();
+        cell.classList.add('selected');
+        selectedCells = [cell];
+        anchorCell = cell;
+      }
+
+      updateAdjacentClasses();
+      updateDrawerFields();
+    });
+  });
+
+  // ==========================================
+  // STATUS OPTIONS
+  // ==========================================
+  function updateSelectedCellsStatus() {
+    const selectedStatus = document.querySelector('#statusOptions swp-status-option.selected');
+    const status = selectedStatus ? selectedStatus.dataset.status : 'work';
+
+    const slider = drawerTimeRange.querySelector('swp-time-range-slider');
+    const startVal = parseInt(slider.querySelector('.range-start').value);
+    const endVal = parseInt(slider.querySelector('.range-end').value);
+    const startTime = valueToTime(startVal);
+    const endTime = valueToTime(endVal);
+
+    selectedCells.forEach(cell => {
+      const timeDisplay = cell.querySelector('swp-time-display');
+      if (!timeDisplay) return;
+
+      // Gem original tid hvis ikke allerede gemt
+      const hasRealTime = !timeDisplay.classList.contains('off') &&
+                          !timeDisplay.classList.contains('vacation') &&
+                          !timeDisplay.classList.contains('sick');
+      const currentText = timeDisplay.textContent;
+      const isRealTimeText = currentText.includes(':'); // Tjek om det er en tid
+
+      if (!cell.dataset.originalTime && (hasRealTime || isRealTimeText)) {
+        cell.dataset.originalTime = currentText;
+      }
+
+      // Fjern alle status klasser
+      timeDisplay.classList.remove('off', 'off-override', 'vacation', 'sick');
+
+      switch (status) {
+        case 'work':
+          timeDisplay.textContent = `${startTime} - ${endTime}`;
+          break;
+        case 'off':
+          timeDisplay.classList.add('off');
+          if (cell.dataset.originalTime) {
+            timeDisplay.classList.add('off-override');
+            timeDisplay.textContent = 'Fri';
+          } else {
+            timeDisplay.textContent = '—';
+          }
+          break;
+        case 'vacation':
+          timeDisplay.classList.add('vacation');
+          timeDisplay.textContent = 'Ferie';
+          break;
+        case 'sick':
+          timeDisplay.classList.add('sick');
+          timeDisplay.textContent = 'Syg';
+          break;
+      }
+    });
+  }
+
+  document.querySelectorAll('#statusOptions swp-status-option').forEach(option => {
+    option.addEventListener('click', () => {
+      document.querySelectorAll('#statusOptions swp-status-option').forEach(o => o.classList.remove('selected'));
+      option.classList.add('selected');
+
+      const status = option.dataset.status;
+      const showTime = status === 'work';
+      timeRow.style.display = showTime ? 'flex' : 'none';
+
+      // Opdater celler i realtid
+      updateSelectedCellsStatus();
+    });
+  });
+
+  // ==========================================
+  // TYPE TOGGLE (Enkelt/Gentagelse)
+  // ==========================================
+  document.querySelectorAll('#typeOptions swp-toggle-option').forEach(option => {
+    option.addEventListener('click', () => {
+      document.querySelectorAll('#typeOptions swp-toggle-option').forEach(o => o.classList.remove('selected'));
+      option.classList.add('selected');
+
+      const isTemplate = option.dataset.value === 'template';
+      repeatGroup.style.display = isTemplate ? 'block' : 'none';
+    });
+  });
+
+  // ==========================================
+  // WEEK NAVIGATION
+  // ==========================================
+  document.getElementById('prevWeek').addEventListener('click', () => {
+    console.log('Previous week');
+  });
+
+  document.getElementById('nextWeek').addEventListener('click', () => {
+    console.log('Next week');
+  });
+
+  // ==========================================
+  // LUKKEDAGE (klik på dag-header)
+  // ==========================================
+  const scheduleTable = document.querySelector('swp-schedule-table');
+  const dayHeaders = document.querySelectorAll('swp-schedule-cell.header:not(.week-number)');
+
+  dayHeaders.forEach((header, index) => {
+    header.addEventListener('click', () => {
+      if (!isEditMode) return;
+
+      // Toggle lukket status på header
+      header.classList.toggle('closed');
+
+      // Find alle celler i denne kolonne (kolonne index + 1 pga. employee kolonne)
+      const columnIndex = index + 1; // 0-baseret, +1 for employee kolonne
+
+      // Opdater alle dag-celler i kolonnen
+      const allDayCells = document.querySelectorAll('swp-schedule-cell.day');
+      allDayCells.forEach(cell => {
+        const cellIndex = allCells.indexOf(cell);
+        const cellColumn = cellIndex % GRID_COLUMNS;
+
+        if (cellColumn === columnIndex) {
+          cell.classList.toggle('closed-day', header.classList.contains('closed'));
+        }
+      });
+
+      // Opdater has-closed class på tabellen
+      const hasAnyClosed = document.querySelector('swp-schedule-cell.header.closed');
+      scheduleTable.classList.toggle('has-closed', !!hasAnyClosed);
+    });
+  });
+</script>
+
+</body>
+</html>
diff --git a/.workbench/POC/poc-booking-v2.html b/.workbench/POC/poc-booking-v2.html
new file mode 100644
index 0000000..f3c71bc
--- /dev/null
+++ b/.workbench/POC/poc-booking-v2.html
@@ -0,0 +1,2993 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Book tid - KARINA KNUDSEN®</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet">
+  <style>
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Regular.woff') format('woff'); font-weight: 400; }
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Medium.woff') format('woff'); font-weight: 500; }
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-SemiBold.woff') format('woff'); font-weight: 600; }
+    @font-face { font-family: 'Poppins'; src: url('fonts/Poppins-Bold.woff') format('woff'); font-weight: 700; }
+  </style>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css">
+
+  <style>
+    :root {
+      --color-teal: #00897b;
+      --color-teal-light: #e0f2f1;
+      --color-surface: #ffffff;
+      --color-background: #f5f5f5;
+      --color-border: #e0e0e0;
+      --color-text: #333333;
+      --color-text-secondary: #666666;
+      --color-text-muted: #999999;
+      --color-green: #43a047;
+      --color-red: #e53935;
+      --font-family: 'Poppins', -apple-system, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+      --anim-duration: 250ms;
+    }
+
+    * { margin: 0; padding: 0; box-sizing: border-box; }
+
+    body {
+      font-family: var(--font-family);
+      background: var(--color-background);
+      color: var(--color-text);
+      min-height: 100vh;
+    }
+
+    /* ==========================================
+       PAGE LAYOUT
+       ========================================== */
+    .booking-page {
+      display: grid;
+      grid-template-columns: 1fr 360px;
+      max-width: 1100px;
+      margin: 0 auto;
+      min-height: 100vh;
+    }
+
+    @media (max-width: 900px) {
+      .booking-page {
+        grid-template-columns: 1fr;
+      }
+      .sidebar {
+        display: none;
+      }
+    }
+
+    /* ==========================================
+       MAIN CONTENT
+       ========================================== */
+    .main-content {
+      background: var(--color-surface);
+      padding: 40px;
+    }
+
+    .salon-header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-bottom: 36px;
+    }
+
+    .salon-logo {
+      width: 52px;
+      height: 52px;
+      background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 16px;
+      font-weight: 700;
+      color: white;
+    }
+
+    .salon-name {
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    .salon-address {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       STEPS
+       ========================================== */
+    .steps {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .step {
+      background: var(--color-background);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+
+    .step.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    .step-header {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+      padding: 18px 20px;
+      cursor: pointer;
+      user-select: none;
+      transition: background 150ms ease;
+    }
+
+    .step:not(.disabled) .step-header:hover {
+      background: rgba(0,0,0,0.02);
+    }
+
+    .step-icon {
+      font-size: 22px;
+      color: var(--color-text-muted);
+      transition: color var(--anim-duration) ease;
+    }
+
+    .step.active .step-icon,
+    .step.completed .step-icon {
+      color: var(--color-teal);
+    }
+
+    .step-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .step-title {
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 2px;
+    }
+
+    .step-summary {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    .step.completed .step-summary {
+      color: var(--color-teal);
+    }
+
+    .step-chevron {
+      font-size: 20px;
+      color: var(--color-text-muted);
+      transition: transform var(--anim-duration) ease;
+    }
+
+    .step.active .step-chevron {
+      transform: rotate(180deg);
+    }
+
+    .step-body {
+      overflow: hidden;
+      height: 0;
+    }
+
+    .step-content {
+      padding: 4px 20px 24px;
+    }
+
+    /* ==========================================
+       SERVICES
+       ========================================== */
+    .category {
+      margin-bottom: 20px;
+    }
+
+    .category:last-child {
+      margin-bottom: 0;
+    }
+
+    .category-title {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 10px;
+    }
+
+    .service-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .service-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 16px;
+      background: var(--color-surface);
+      border: 2px solid transparent;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .service-item:hover {
+      border-color: var(--color-border);
+    }
+
+    .service-item.selected {
+      border-color: var(--color-teal);
+      background: var(--color-teal-light);
+    }
+
+    .service-check {
+      width: 22px;
+      height: 22px;
+      border-radius: 6px;
+      border: 2px solid var(--color-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      color: white;
+      transition: all 150ms ease;
+      flex-shrink: 0;
+    }
+
+    .service-item.selected .service-check {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+    }
+
+    .service-check i {
+      opacity: 0;
+      transition: opacity 150ms ease;
+    }
+
+    .service-item.selected .service-check i {
+      opacity: 1;
+    }
+
+    .service-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    .service-name {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .service-duration {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    .service-price {
+      font-size: 14px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      white-space: nowrap;
+    }
+
+    /* ==========================================
+       EMPLOYEES
+       ========================================== */
+    .employee-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+    }
+
+    @media (max-width: 480px) {
+      .employee-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .employee-card {
+      background: var(--color-surface);
+      border: 2px solid transparent;
+      border-radius: 12px;
+      padding: 20px 16px;
+      cursor: pointer;
+      text-align: center;
+      transition: all 150ms ease;
+    }
+
+    .employee-card:hover {
+      border-color: var(--color-border);
+    }
+
+    .employee-card.selected {
+      border-color: var(--color-teal);
+      background: var(--color-teal-light);
+    }
+
+    .employee-photo {
+      width: 80px;
+      height: 80px;
+      border-radius: 8px;
+      margin: 0 auto 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      font-weight: 600;
+      color: white;
+    }
+
+    .employee-photo.neutral {
+      background: var(--color-border);
+      color: var(--color-text-secondary);
+    }
+
+    .employee-photo.neutral i {
+      font-size: 32px;
+    }
+
+    .employee-name {
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 2px;
+    }
+
+    .employee-role {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    .employee-price {
+      font-size: 13px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      margin-top: 10px;
+      color: var(--color-text-secondary);
+    }
+
+    .employee-price.discount {
+      color: var(--color-green);
+    }
+
+    /* ==========================================
+       CALENDAR & TIME
+       ========================================== */
+    .datetime-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+    }
+
+    @media (max-width: 560px) {
+      .datetime-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .calendar {
+      background: var(--color-surface);
+      border-radius: 10px;
+      padding: 16px;
+    }
+
+    .calendar-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 14px;
+    }
+
+    .calendar-month {
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    .calendar-nav {
+      display: flex;
+      gap: 4px;
+    }
+
+    .calendar-nav button {
+      width: 30px;
+      height: 30px;
+      border: none;
+      background: var(--color-background);
+      border-radius: 6px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-secondary);
+      transition: all 150ms ease;
+    }
+
+    .calendar-nav button:hover {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    .calendar-grid {
+      display: grid;
+      grid-template-columns: repeat(7, 1fr);
+      gap: 2px;
+    }
+
+    .weekday {
+      text-align: center;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-muted);
+      padding: 6px 0;
+    }
+
+    .day {
+      aspect-ratio: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .day:hover:not(.disabled):not(.selected) {
+      background: var(--color-surface);
+    }
+
+    .day.today {
+      font-weight: 600;
+      color: var(--color-teal);
+    }
+
+    .day.selected {
+      background: var(--color-teal);
+      color: white;
+      font-weight: 500;
+    }
+
+    .day.disabled {
+      color: var(--color-border);
+      cursor: default;
+    }
+
+    .time-section-title {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 10px;
+    }
+
+    .time-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 6px;
+    }
+
+    .time-slot {
+      padding: 10px 8px;
+      text-align: center;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-mono);
+      background: var(--color-surface);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .time-slot:hover:not(.disabled):not(.selected) {
+      background: var(--color-teal-light);
+    }
+
+    .time-slot.selected {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    .time-slot.disabled {
+      color: var(--color-text-muted);
+      cursor: default;
+      text-decoration: line-through;
+    }
+
+    /* AI Recommended Slots */
+    .time-slot.recommended {
+      position: relative;
+      border: 2px solid var(--color-green);
+      background: color-mix(in srgb, var(--color-green) 8%, white);
+    }
+
+    .time-slot.recommended:hover:not(.disabled):not(.selected) {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+    }
+
+    .time-slot.recommended.selected {
+      background: var(--color-green);
+      border-color: var(--color-green);
+    }
+
+    .ai-badge {
+      position: absolute;
+      top: -8px;
+      right: -8px;
+      background: var(--color-green);
+      color: white;
+      font-size: 10px;
+      padding: 2px 5px;
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      gap: 2px;
+      font-weight: 500;
+      font-family: var(--font-family);
+    }
+
+    .ai-badge i {
+      font-size: 10px;
+    }
+
+    .ai-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 14px;
+      background: color-mix(in srgb, var(--color-green) 10%, white);
+      border-radius: 8px;
+      margin-bottom: 12px;
+      font-size: 12px;
+      color: var(--color-green);
+    }
+
+    .ai-info i {
+      font-size: 16px;
+    }
+
+    /* ==========================================
+       WAITLIST
+       ========================================== */
+    .waitlist-trigger {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 20px;
+      padding: 12px 16px;
+      width: 100%;
+      background: transparent;
+      border: 1px dashed var(--color-border);
+      border-radius: 8px;
+      font-size: 13px;
+      font-family: var(--font-family);
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .waitlist-trigger:hover {
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+      background: var(--color-teal-light);
+    }
+
+    .waitlist-trigger i {
+      font-size: 18px;
+    }
+
+    .waitlist-section {
+      overflow: hidden;
+      height: 0;
+    }
+
+    .waitlist-content {
+      padding-top: 20px;
+    }
+
+    .waitlist-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+
+    .waitlist-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    .waitlist-close {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      background: transparent;
+      border: none;
+      border-radius: 6px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .waitlist-close:hover {
+      background: var(--color-background);
+      color: var(--color-text);
+    }
+
+    .waitlist-close i {
+      font-size: 18px;
+    }
+
+    .waitlist-desc {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      margin-bottom: 20px;
+      line-height: 1.5;
+    }
+
+    .waitlist-field {
+      margin-bottom: 16px;
+    }
+
+    .waitlist-field:last-child {
+      margin-bottom: 0;
+    }
+
+    .waitlist-label {
+      display: block;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text);
+      margin-bottom: 6px;
+    }
+
+    .waitlist-periods {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 8px;
+    }
+
+    .period-option {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 12px 14px;
+      background: var(--color-surface);
+      border: 2px solid transparent;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .period-option:hover {
+      border-color: var(--color-border);
+    }
+
+    .period-option.selected {
+      border-color: var(--color-teal);
+      background: var(--color-teal-light);
+    }
+
+    .period-check {
+      width: 20px;
+      height: 20px;
+      border-radius: 4px;
+      border: 2px solid var(--color-border);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      color: white;
+      transition: all 150ms ease;
+      flex-shrink: 0;
+    }
+
+    .period-option.selected .period-check {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+    }
+
+    .period-check i {
+      opacity: 0;
+      transition: opacity 150ms ease;
+    }
+
+    .period-option.selected .period-check i {
+      opacity: 1;
+    }
+
+    .period-info {
+      flex: 1;
+    }
+
+    .period-name {
+      font-size: 13px;
+      font-weight: 500;
+    }
+
+    .period-time {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    .waitlist-submit {
+      margin-top: 20px;
+      width: 100%;
+      padding: 12px 20px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    .waitlist-submit:hover {
+      background: #00695c;
+    }
+
+    /* ==========================================
+       FORM
+       ========================================== */
+    .form-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    @media (max-width: 480px) {
+      .form-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .form-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .form-field.full-width {
+      grid-column: 1 / -1;
+    }
+
+    .form-label {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    .form-label .optional {
+      font-weight: 400;
+      color: var(--color-text-muted);
+    }
+
+    .form-input {
+      width: 100%;
+      padding: 10px 14px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      color: var(--color-text);
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      transition: border-color 150ms ease, box-shadow 150ms ease;
+    }
+
+    .form-input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+      box-shadow: 0 0 0 3px rgba(0, 137, 123, 0.15);
+    }
+
+    .form-input::placeholder {
+      color: var(--color-text-muted);
+    }
+
+    textarea.form-input {
+      resize: vertical;
+      min-height: 80px;
+    }
+
+    /* ==========================================
+       SIDEBAR
+       ========================================== */
+    .sidebar {
+      background: var(--color-background);
+      border-left: 1px solid var(--color-border);
+      padding: 40px 28px;
+      display: flex;
+      flex-direction: column;
+    }
+
+    .sidebar-title {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 20px;
+    }
+
+    .cart-empty {
+      text-align: center;
+      padding: 40px 20px;
+      color: var(--color-text-muted);
+      font-size: 14px;
+    }
+
+    .cart-empty i {
+      font-size: 48px;
+      margin-bottom: 12px;
+      display: block;
+    }
+
+    .cart-items {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+
+    .cart-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+      padding: 12px 14px;
+      background: var(--color-surface);
+      border-radius: 10px;
+    }
+
+    .cart-item-name {
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 2px;
+    }
+
+    .cart-item-duration {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    .cart-item-price {
+      font-size: 14px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+    }
+
+    .cart-details {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      padding: 16px 0;
+      border-top: 1px solid var(--color-border);
+      margin-bottom: 20px;
+    }
+
+    .cart-detail {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 13px;
+    }
+
+    .cart-detail i {
+      font-size: 18px;
+      color: var(--color-teal);
+      width: 20px;
+      flex-shrink: 0;
+    }
+
+    .cart-detail-label {
+      color: var(--color-text-secondary);
+    }
+
+    .cart-detail-value {
+      color: var(--color-text);
+      font-weight: 500;
+    }
+
+    .cart-total {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 18px;
+      background: var(--color-teal-light);
+      border-radius: 12px;
+      margin-bottom: 20px;
+    }
+
+    .cart-total-label {
+      font-size: 15px;
+      font-weight: 600;
+    }
+
+    .cart-total-price {
+      font-size: 22px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-teal);
+    }
+
+    .book-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      width: 100%;
+      padding: 16px 24px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 15px;
+      font-weight: 600;
+      font-family: var(--font-family);
+      border: none;
+      border-radius: 12px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    .book-btn:hover:not(:disabled) {
+      background: #00695c;
+    }
+
+    .book-btn:disabled {
+      background: var(--color-border);
+      cursor: not-allowed;
+    }
+
+    .book-btn i {
+      font-size: 20px;
+    }
+
+    /* ==========================================
+       FLOATING BUTTON
+       ========================================== */
+    .floating-btn {
+      position: fixed;
+      bottom: 24px;
+      left: 50%;
+      transform: translateX(-50%) translateY(80px);
+      opacity: 0;
+      pointer-events: none;
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 14px 28px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 15px;
+      font-weight: 600;
+      font-family: var(--font-family);
+      border: none;
+      border-radius: 12px;
+      cursor: pointer;
+      box-shadow: 0 4px 20px rgba(0, 137, 123, 0.35);
+      transition: transform var(--anim-duration) ease, opacity var(--anim-duration) ease, background 150ms ease;
+      z-index: 100;
+    }
+
+    .floating-btn.visible {
+      transform: translateX(-50%) translateY(0);
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    .floating-btn:hover {
+      background: #00695c;
+    }
+
+    .floating-btn i {
+      font-size: 18px;
+    }
+
+    /* ==========================================
+       MOBILE RESPONSIVE
+       ========================================== */
+    @media (max-width: 600px) {
+      .main-content {
+        padding: 20px 16px;
+      }
+
+      .salon-header {
+        margin-bottom: 24px;
+      }
+
+      .step-header {
+        padding: 16px 14px;
+        gap: 12px;
+      }
+
+      .step-content {
+        padding: 4px 14px 20px;
+      }
+
+      .service-item {
+        padding: 12px 14px;
+      }
+
+      .calendar {
+        padding: 14px 12px;
+      }
+
+      .employee-item {
+        padding: 10px 12px;
+      }
+    }
+
+    /* ==========================================
+       SUCCESS OVERLAY
+       ========================================== */
+    .success-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.5);
+      display: none;
+      align-items: center;
+      justify-content: center;
+      z-index: 200;
+    }
+
+    .success-overlay.visible {
+      display: flex;
+    }
+
+    .success-modal {
+      background: var(--color-surface);
+      border-radius: 16px;
+      padding: 40px;
+      text-align: center;
+      max-width: 360px;
+      margin: 20px;
+    }
+
+    .success-icon {
+      width: 72px;
+      height: 72px;
+      background: rgba(67, 160, 71, 0.12);
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin: 0 auto 20px;
+    }
+
+    .success-icon i {
+      font-size: 36px;
+      color: var(--color-green);
+    }
+
+    .success-modal h2 {
+      font-size: 20px;
+      font-weight: 600;
+      margin-bottom: 8px;
+    }
+
+    .success-modal p {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      line-height: 1.5;
+    }
+
+    .success-icon.waitlist {
+      background: rgba(0, 137, 123, 0.12);
+    }
+
+    .success-icon.waitlist i {
+      color: var(--color-teal);
+    }
+
+    .success-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      margin-top: 20px;
+      padding: 12px 24px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border: none;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    .success-btn:hover {
+      background: #00695c;
+    }
+
+    .success-btn i {
+      font-size: 16px;
+    }
+
+    /* ==========================================
+       LANDING VIEW
+       ========================================== */
+    .landing-view {
+      min-height: 100vh;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-background);
+      padding: 20px;
+    }
+
+    .landing-card {
+      background: var(--color-surface);
+      border-radius: 16px;
+      padding: 48px 40px;
+      max-width: 400px;
+      width: 100%;
+      text-align: center;
+      box-shadow: 0 4px 24px rgba(0,0,0,0.08);
+    }
+
+    .landing-card .salon-logo {
+      width: 64px;
+      height: 64px;
+      margin: 0 auto 16px;
+      font-size: 20px;
+    }
+
+    .landing-card .salon-name {
+      font-size: 20px;
+      margin-bottom: 4px;
+    }
+
+    .landing-card .salon-address {
+      margin-bottom: 32px;
+    }
+
+    .landing-title {
+      font-size: 18px;
+      font-weight: 600;
+      margin-bottom: 24px;
+    }
+
+    .landing-form {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    .landing-divider {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      color: var(--color-text-muted);
+      font-size: 13px;
+      margin: 24px 0;
+    }
+
+    .landing-divider::before,
+    .landing-divider::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: var(--color-border);
+    }
+
+    .btn-primary {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      width: 100%;
+      padding: 14px 24px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 15px;
+      font-weight: 600;
+      font-family: var(--font-family);
+      border: none;
+      border-radius: 10px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    .btn-primary:hover {
+      background: #00695c;
+    }
+
+    .btn-secondary {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      width: 100%;
+      padding: 14px 24px;
+      background: var(--color-surface);
+      color: var(--color-text);
+      font-size: 15px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 10px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .btn-secondary:hover {
+      background: var(--color-background);
+      border-color: var(--color-text-muted);
+    }
+
+    .landing-step {
+      width: 100%;
+    }
+
+    .landing-phone-display {
+      font-size: 18px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-teal);
+      margin-bottom: 20px;
+    }
+
+    .landing-back {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      margin-top: 20px;
+      padding: 8px 12px;
+      font-size: 13px;
+      font-family: var(--font-family);
+      color: var(--color-text-secondary);
+      background: transparent;
+      border: none;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    .landing-back:hover {
+      color: var(--color-text);
+    }
+
+    .landing-back i {
+      font-size: 16px;
+    }
+
+    /* ==========================================
+       MY PAGE VIEW
+       ========================================== */
+    .mypage-view {
+      display: none;
+      min-height: 100vh;
+      background: var(--color-background);
+    }
+
+    .mypage-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .mypage-header-brand {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .mypage-header .salon-logo {
+      width: 40px;
+      height: 40px;
+      font-size: 14px;
+    }
+
+    .mypage-header .salon-name {
+      font-size: 16px;
+    }
+
+    .btn-logout {
+      padding: 8px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      background: transparent;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .btn-logout:hover {
+      background: var(--color-background);
+      color: var(--color-text);
+    }
+
+    .mypage-content {
+      max-width: 600px;
+      margin: 0 auto;
+      padding: 32px 24px;
+    }
+
+    .mypage-greeting {
+      font-size: 22px;
+      font-weight: 600;
+      margin-bottom: 24px;
+    }
+
+    .mypage-section {
+      background: var(--color-surface);
+      border-radius: 12px;
+      margin-bottom: 20px;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.06);
+    }
+
+    .mypage-section-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    .mypage-section-header i {
+      font-size: 20px;
+      color: var(--color-teal);
+    }
+
+    .mypage-section-content {
+      padding: 20px;
+    }
+
+    .book-cta {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px;
+      background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
+      color: white;
+      border-radius: 12px;
+      cursor: pointer;
+      transition: transform 150ms ease, box-shadow 150ms ease;
+    }
+
+    .book-cta:hover {
+      transform: translateY(-2px);
+      box-shadow: 0 4px 12px rgba(0, 137, 123, 0.3);
+    }
+
+    .book-cta-text {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    .book-cta-sub {
+      font-size: 13px;
+      opacity: 0.9;
+      margin-top: 2px;
+    }
+
+    .book-cta i {
+      font-size: 24px;
+    }
+
+    .upcoming-booking {
+      display: flex;
+      align-items: flex-start;
+      gap: 16px;
+      padding: 16px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .upcoming-booking:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    .upcoming-booking:first-child {
+      padding-top: 0;
+    }
+
+    .upcoming-icon {
+      width: 44px;
+      height: 44px;
+      background: var(--color-teal-light);
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    .upcoming-icon i {
+      font-size: 22px;
+      color: var(--color-teal);
+    }
+
+    .upcoming-info {
+      flex: 1;
+    }
+
+    .upcoming-service {
+      font-size: 15px;
+      font-weight: 600;
+      margin-bottom: 4px;
+    }
+
+    .upcoming-datetime {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      margin-bottom: 2px;
+    }
+
+    .upcoming-details {
+      font-size: 12px;
+      color: var(--color-text-muted);
+    }
+
+    .btn-cancel {
+      padding: 8px 14px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-red);
+      background: transparent;
+      border: 1px solid var(--color-red);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      white-space: nowrap;
+    }
+
+    .btn-cancel:hover {
+      background: rgba(229, 57, 53, 0.08);
+    }
+
+    .mypage-form-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    @media (max-width: 480px) {
+      .mypage-form-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    .mypage-form-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    .mypage-form-field.full-width {
+      grid-column: 1 / -1;
+    }
+
+    .password-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      grid-column: 1 / -1;
+    }
+
+    .password-row .mypage-form-field {
+      flex: 1;
+    }
+
+    .btn-change-password {
+      padding: 10px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-teal);
+      background: transparent;
+      border: 1px solid var(--color-teal);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      white-space: nowrap;
+      margin-top: 20px;
+    }
+
+    .btn-change-password:hover {
+      background: var(--color-teal-light);
+    }
+
+    .mypage-form-actions {
+      display: flex;
+      justify-content: flex-end;
+      margin-top: 20px;
+      padding-top: 16px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    .btn-save {
+      padding: 10px 20px;
+      font-size: 14px;
+      font-weight: 500;
+      color: white;
+      background: var(--color-teal);
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    .btn-save:hover {
+      background: #00695c;
+    }
+
+    .receipt-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .receipt-item:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    .receipt-item:first-child {
+      padding-top: 0;
+    }
+
+    .receipt-date {
+      font-size: 13px;
+      color: var(--color-text-muted);
+      width: 100px;
+    }
+
+    .receipt-service {
+      flex: 1;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .receipt-amount {
+      font-size: 14px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+    }
+
+    .empty-state {
+      text-align: center;
+      padding: 24px;
+      color: var(--color-text-muted);
+      font-size: 14px;
+    }
+
+    .empty-state i {
+      font-size: 32px;
+      margin-bottom: 8px;
+      display: block;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Landing View -->
+  <div class="landing-view" id="landingView">
+    <div class="landing-card">
+      <div class="salon-logo">KK</div>
+      <div class="salon-name">KARINA KNUDSEN®</div>
+      <div class="salon-address">Amager Strandvej 22f, 2300 Kbh S</div>
+
+      <!-- Step 1: Phone -->
+      <div class="landing-step" id="landingStep1">
+        <div class="landing-title">Book tid hos os</div>
+        <div class="landing-form">
+          <input type="tel" class="form-input" id="phoneInput" placeholder="Telefonnummer">
+          <button class="btn-primary" id="phoneNextBtn">
+            Fortsæt <i class="ph ph-arrow-right"></i>
+          </button>
+        </div>
+      </div>
+
+      <!-- Step 2: PIN -->
+      <div class="landing-step" id="landingStep2" style="display: none;">
+        <div class="landing-title">Indtast PIN-kode</div>
+        <p class="landing-phone-display" id="phoneDisplay"></p>
+        <div class="landing-form">
+          <input type="password" class="form-input" id="pinInput" placeholder="PIN-kode" inputmode="numeric" maxlength="4">
+          <button class="btn-primary" id="loginBtn">
+            Log ind <i class="ph ph-arrow-right"></i>
+          </button>
+          <div class="landing-divider">eller</div>
+          <button class="btn-secondary" id="continueBtn">
+            Fortsæt uden login <i class="ph ph-arrow-right"></i>
+          </button>
+        </div>
+        <button class="landing-back" id="backToPhoneBtn">
+          <i class="ph ph-arrow-left"></i> Ret telefonnummer
+        </button>
+      </div>
+    </div>
+  </div>
+
+  <!-- My Page View -->
+  <div class="mypage-view" id="mypageView">
+    <div class="mypage-header">
+      <div class="mypage-header-brand">
+        <div class="salon-logo">KK</div>
+        <div class="salon-name">KARINA KNUDSEN®</div>
+      </div>
+      <button class="btn-logout" id="logoutBtn">Log ud</button>
+    </div>
+
+    <div class="mypage-content">
+      <div class="mypage-greeting" id="mypageGreeting">Hej, Maria!</div>
+
+      <!-- Book CTA -->
+      <div class="book-cta" id="bookCtaBtn">
+        <div>
+          <div class="book-cta-text">Book ny tid</div>
+          <div class="book-cta-sub">Vælg ydelse, tidspunkt og medarbejder</div>
+        </div>
+        <i class="ph ph-arrow-right"></i>
+      </div>
+
+      <!-- Upcoming Bookings -->
+      <div class="mypage-section" style="margin-top: 24px;">
+        <div class="mypage-section-header">
+          <i class="ph ph-calendar-check"></i> Kommende tider
+        </div>
+        <div class="mypage-section-content" id="upcomingBookings">
+          <div class="upcoming-booking">
+            <div class="upcoming-icon">
+              <i class="ph ph-scissors"></i>
+            </div>
+            <div class="upcoming-info">
+              <div class="upcoming-service">Dameklip</div>
+              <div class="upcoming-datetime">Fredag 24. januar kl. 14:00</div>
+              <div class="upcoming-details">Camilla · 725 kr.</div>
+            </div>
+            <button class="btn-cancel">Aflys</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Account Settings -->
+      <div class="mypage-section">
+        <div class="mypage-section-header">
+          <i class="ph ph-user-circle"></i> Mine oplysninger
+        </div>
+        <div class="mypage-section-content">
+          <div class="mypage-form-grid">
+            <div class="mypage-form-field">
+              <label class="form-label">Fornavn</label>
+              <input type="text" class="form-input" id="mypageFirstName" value="Maria">
+            </div>
+            <div class="mypage-form-field">
+              <label class="form-label">Efternavn</label>
+              <input type="text" class="form-input" id="mypageLastName" value="Hansen">
+            </div>
+            <div class="mypage-form-field">
+              <label class="form-label">Email</label>
+              <input type="email" class="form-input" id="mypageEmail" value="maria@email.dk">
+            </div>
+            <div class="mypage-form-field">
+              <label class="form-label">Telefon</label>
+              <input type="tel" class="form-input" id="mypagePhone" value="12 34 56 78">
+            </div>
+            <div class="password-row">
+              <div class="mypage-form-field">
+                <label class="form-label">Adgangskode</label>
+                <input type="password" class="form-input" value="••••••••" disabled>
+              </div>
+              <button class="btn-change-password">Skift</button>
+            </div>
+          </div>
+          <div class="mypage-form-actions">
+            <button class="btn-save">Gem ændringer</button>
+          </div>
+        </div>
+      </div>
+
+      <!-- Receipts -->
+      <div class="mypage-section">
+        <div class="mypage-section-header">
+          <i class="ph ph-receipt"></i> Kvitteringer
+        </div>
+        <div class="mypage-section-content" id="receipts">
+          <div class="receipt-item">
+            <div class="receipt-date">12. dec 2024</div>
+            <div class="receipt-service">Dameklip + Olaplex</div>
+            <div class="receipt-amount">1.275 kr.</div>
+          </div>
+          <div class="receipt-item">
+            <div class="receipt-date">15. nov 2024</div>
+            <div class="receipt-service">Dameklip</div>
+            <div class="receipt-amount">725 kr.</div>
+          </div>
+          <div class="receipt-item">
+            <div class="receipt-date">18. okt 2024</div>
+            <div class="receipt-service">Farve + Klip</div>
+            <div class="receipt-amount">1.510 kr.</div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <!-- Booking View -->
+  <div class="booking-page" id="bookingView" style="display: none;">
+    <!-- Main Content -->
+    <div class="main-content">
+      <div class="salon-header">
+        <div class="salon-logo">KK</div>
+        <div>
+          <div class="salon-name">KARINA KNUDSEN®</div>
+          <div class="salon-address">Amager Strandvej 22f, 2300 Kbh S</div>
+        </div>
+      </div>
+
+      <div class="steps">
+        <!-- Step 1: Services -->
+        <div class="step active" data-step="1">
+          <div class="step-header">
+            <i class="ph ph-scissors step-icon"></i>
+            <div class="step-info">
+              <div class="step-title">Vælg ydelse</div>
+              <div class="step-summary" data-summary>Hvad vil du have lavet?</div>
+            </div>
+            <i class="ph ph-caret-down step-chevron"></i>
+          </div>
+          <div class="step-body">
+            <div class="step-content" id="servicesContainer"></div>
+          </div>
+        </div>
+
+        <!-- Step 2: Add-ons -->
+        <div class="step disabled" data-step="2">
+          <div class="step-header">
+            <i class="ph ph-plus-circle step-icon"></i>
+            <div class="step-info">
+              <div class="step-title">Tilvalg</div>
+              <div class="step-summary" data-summary>Valgfrit</div>
+            </div>
+            <i class="ph ph-caret-down step-chevron"></i>
+          </div>
+          <div class="step-body">
+            <div class="step-content" id="addonsContainer"></div>
+          </div>
+        </div>
+
+        <!-- Step 3: Employee -->
+        <div class="step disabled" data-step="3">
+          <div class="step-header">
+            <i class="ph ph-user-circle step-icon"></i>
+            <div class="step-info">
+              <div class="step-title">Vælg medarbejder</div>
+              <div class="step-summary" data-summary>Valgfrit</div>
+            </div>
+            <i class="ph ph-caret-down step-chevron"></i>
+          </div>
+          <div class="step-body">
+            <div class="step-content" id="employeesContainer"></div>
+          </div>
+        </div>
+
+        <!-- Step 4: Date & Time -->
+        <div class="step disabled" data-step="4">
+          <div class="step-header">
+            <i class="ph ph-calendar step-icon"></i>
+            <div class="step-info">
+              <div class="step-title">Vælg dato og tid</div>
+              <div class="step-summary" data-summary>Find en ledig tid</div>
+            </div>
+            <i class="ph ph-caret-down step-chevron"></i>
+          </div>
+          <div class="step-body">
+            <div class="step-content" id="datetimeContainer"></div>
+          </div>
+        </div>
+
+        <!-- Step 5: Contact -->
+        <div class="step disabled" data-step="5">
+          <div class="step-header">
+            <i class="ph ph-identification-card step-icon"></i>
+            <div class="step-info">
+              <div class="step-title">Dine oplysninger</div>
+              <div class="step-summary" data-summary>Kontaktinformation</div>
+            </div>
+            <i class="ph ph-caret-down step-chevron"></i>
+          </div>
+          <div class="step-body">
+            <div class="step-content">
+              <div class="form-grid">
+                <div class="form-field">
+                  <label class="form-label" for="firstName">Fornavn</label>
+                  <input type="text" class="form-input" id="firstName" placeholder="Dit fornavn">
+                </div>
+                <div class="form-field">
+                  <label class="form-label" for="lastName">Efternavn</label>
+                  <input type="text" class="form-input" id="lastName" placeholder="Dit efternavn">
+                </div>
+                <div class="form-field">
+                  <label class="form-label" for="phone">Telefon</label>
+                  <input type="tel" class="form-input" id="phone" placeholder="12 34 56 78">
+                </div>
+                <div class="form-field">
+                  <label class="form-label" for="email">Email</label>
+                  <input type="email" class="form-input" id="email" placeholder="din@email.dk">
+                </div>
+                <div class="form-field full-width">
+                  <label class="form-label" for="notes">Noter <span class="optional">(valgfrit)</span></label>
+                  <textarea class="form-input" id="notes" placeholder="Særlige ønsker..."></textarea>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- Sidebar -->
+    <div class="sidebar">
+      <div class="sidebar-title">Din booking</div>
+
+      <div class="cart-empty" id="cartEmpty">
+        <i class="ph ph-shopping-cart"></i>
+        Vælg en ydelse for at starte
+      </div>
+
+      <div class="cart-items" id="cartItems" style="display: none;"></div>
+
+      <div class="cart-details" id="cartDetails" style="display: none;">
+        <div class="cart-detail">
+          <i class="ph ph-user-circle"></i>
+          <span class="cart-detail-label">Medarbejder:</span>
+          <span class="cart-detail-value" id="detailEmployee">Ikke valgt</span>
+        </div>
+        <div class="cart-detail">
+          <i class="ph ph-calendar"></i>
+          <span class="cart-detail-label">Dato:</span>
+          <span class="cart-detail-value" id="detailDate">Ikke valgt</span>
+        </div>
+        <div class="cart-detail">
+          <i class="ph ph-clock"></i>
+          <span class="cart-detail-label">Tid:</span>
+          <span class="cart-detail-value" id="detailTime">Ikke valgt</span>
+        </div>
+      </div>
+
+      <div class="cart-total" id="cartTotal" style="display: none;">
+        <span class="cart-total-label">Total</span>
+        <span class="cart-total-price" id="totalPrice">0 kr.</span>
+      </div>
+
+      <button class="book-btn" id="bookBtn" disabled>
+        <i class="ph ph-check-circle"></i>
+        Book tid
+      </button>
+    </div>
+  </div>
+
+  <!-- Floating "Videre" button -->
+  <button class="floating-btn" id="floatingBtn">
+    Videre <i class="ph ph-arrow-right"></i>
+  </button>
+
+  <!-- Success overlay -->
+  <div class="success-overlay" id="successOverlay">
+    <div class="success-modal">
+      <div class="success-icon">
+        <i class="ph ph-check"></i>
+      </div>
+      <h2>Booking bekræftet!</h2>
+      <p>Du modtager en bekræftelse på email og SMS. Vi glæder os til at se dig!</p>
+    </div>
+  </div>
+
+  <!-- Waitlist success overlay -->
+  <div class="success-overlay" id="waitlistSuccessOverlay">
+    <div class="success-modal">
+      <div class="success-icon waitlist">
+        <i class="ph ph-clock-countdown"></i>
+      </div>
+      <h2>Du er på ventelisten!</h2>
+      <p>Tak for din tilmelding. Vi kontakter dig hurtigst muligt, hvis der bliver en ledig tid.</p>
+      <button class="success-btn" id="waitlistSuccessClose">
+        Luk <i class="ph ph-x"></i>
+      </button>
+    </div>
+  </div>
+
+  <script>
+    // ==========================================
+    // CONFIG
+    // ==========================================
+    const ANIM_DURATION = 250;
+
+    // ==========================================
+    // STATE
+    // ==========================================
+    const state = {
+      services: [],
+      addons: [],
+      employee: null,
+      date: null,
+      time: null,
+      customer: { firstName: '', lastName: '', phone: '', email: '', notes: '' }
+    };
+
+    // ==========================================
+    // DATA
+    // ==========================================
+    const servicesData = {
+      "Klip": [
+        { id: "s1", name: "Dameklip", duration: 60, price: 725 },
+        { id: "s2", name: "Herreklip", duration: 60, price: 645 },
+        { id: "s3", name: "Børneklip (0-12 år)", duration: 45, price: 475 }
+      ],
+      "Farve": [
+        { id: "s4", name: "Bundfarve", duration: 90, price: 785 },
+        { id: "s5", name: "Helfarve kort hår", duration: 105, price: 950 },
+        { id: "s6", name: "Striber/Highlights", duration: 120, price: 1465 }
+      ],
+      "Styling": [
+        { id: "s7", name: "Vask & føn", duration: 40, price: 450 },
+        { id: "s8", name: "Håropsætning", duration: 60, price: 850 }
+      ],
+      "Behandlinger": [
+        { id: "s9", name: "Olaplex", duration: 60, price: 550 },
+        { id: "s10", name: "Kurbehandling", duration: 40, price: 365 }
+      ]
+    };
+
+    const addonsData = [
+      { id: "a1", name: "Hårkur", duration: 15, price: 150 },
+      { id: "a2", name: "Hovedbundsmassage", duration: 10, price: 95 },
+      { id: "a3", name: "Styling produkt", duration: 0, price: 175 },
+      { id: "a4", name: "Varmebeskyttelse", duration: 5, price: 85 }
+    ];
+
+    const employeesData = [
+      { id: null, name: "Ingen præference", role: "Første ledige", color: null, priceModifier: 0 },
+      { id: "EMP001", name: "Camilla", role: "Master Stylist", color: "#9c27b0", priceModifier: 0 },
+      { id: "EMP002", name: "Isabella", role: "Master Stylist", color: "#e91e63", priceModifier: 0 },
+      { id: "EMP003", name: "Alexander", role: "Frisør", color: "#3f51b5", priceModifier: -50 },
+      { id: "EMP004", name: "Viktor", role: "Junior Stylist", color: "#009688", priceModifier: -100 }
+    ];
+
+    // ==========================================
+    // EKSISTERENDE BOOKINGER (Mock data til AI-optimering)
+    // ==========================================
+    const existingBookings = {
+      'EMP001': {
+        '2026-01-06': [
+          { start: '10:00', end: '11:00', service: 'Dameklip' },
+          { start: '13:30', end: '14:30', service: 'Herreklip' }
+        ],
+        '2026-01-07': [
+          { start: '09:00', end: '10:30', service: 'Bundfarve' },
+          { start: '11:00', end: '12:00', service: 'Dameklip' },
+          { start: '14:00', end: '15:00', service: 'Dameklip' }
+        ]
+      },
+      'EMP002': {
+        '2026-01-06': [
+          { start: '09:00', end: '10:00', service: 'Herreklip' },
+          { start: '11:00', end: '12:00', service: 'Dameklip' },
+          { start: '15:00', end: '16:30', service: 'Striber' }
+        ],
+        '2026-01-07': [
+          { start: '10:00', end: '11:00', service: 'Dameklip' },
+          { start: '13:00', end: '14:00', service: 'Herreklip' }
+        ]
+      },
+      'EMP003': {
+        '2026-01-06': [
+          { start: '08:30', end: '09:30', service: 'Herreklip' },
+          { start: '12:00', end: '13:00', service: 'Dameklip' }
+        ]
+      },
+      'EMP004': {
+        '2026-01-06': [
+          { start: '09:00', end: '10:00', service: 'Herreklip' },
+          { start: '14:00', end: '15:30', service: 'Bundfarve' }
+        ]
+      }
+    };
+
+    const SALON_OPEN = '08:00';
+    const SALON_CLOSE = '17:00';
+
+    // ==========================================
+    // AI SLOT OPTIMERING
+    // ==========================================
+    function timeToMinutes(time) {
+      const [h, m] = time.split(':').map(Number);
+      return h * 60 + m;
+    }
+
+    function minutesToTime(mins) {
+      const h = Math.floor(mins / 60);
+      const m = mins % 60;
+      return `${h.toString().padStart(2, '0')}:${m.toString().padStart(2, '0')}`;
+    }
+
+    function getBookingsForSlot(date, employeeId) {
+      if (!employeeId) {
+        let bestEmployee = 'EMP001';
+        let minBookings = Infinity;
+        for (const empId of Object.keys(existingBookings)) {
+          const bookings = existingBookings[empId]?.[date] || [];
+          if (bookings.length < minBookings) {
+            minBookings = bookings.length;
+            bestEmployee = empId;
+          }
+        }
+        return existingBookings[bestEmployee]?.[date] || [];
+      }
+      return existingBookings[employeeId]?.[date] || [];
+    }
+
+    function calculateOptimalSlots(serviceDuration, date, employeeId) {
+      const bookings = getBookingsForSlot(date, employeeId);
+      const openMins = timeToMinutes(SALON_OPEN);
+      const closeMins = timeToMinutes(SALON_CLOSE);
+
+      const slots = [];
+      for (let mins = openMins; mins <= closeMins - serviceDuration; mins += 30) {
+        const slotStart = mins;
+        const slotEnd = mins + serviceDuration;
+        const time = minutesToTime(mins);
+
+        let isTaken = false;
+        for (const booking of bookings) {
+          const bookStart = timeToMinutes(booking.start);
+          const bookEnd = timeToMinutes(booking.end);
+          if (slotStart < bookEnd && slotEnd > bookStart) {
+            isTaken = true;
+            break;
+          }
+        }
+
+        let score = 0;
+        if (!isTaken) {
+          if (slotStart === openMins) score += 3;
+          for (const booking of bookings) {
+            if (slotEnd === timeToMinutes(booking.start)) { score += 3; break; }
+          }
+          for (const booking of bookings) {
+            if (slotStart === timeToMinutes(booking.end)) { score += 2; break; }
+          }
+          for (const booking of bookings) {
+            const gap = timeToMinutes(booking.start) - slotEnd;
+            if (gap > 0 && gap < 30) { score -= 2; break; }
+          }
+          for (const booking of bookings) {
+            const gap = slotStart - timeToMinutes(booking.end);
+            if (gap > 0 && gap < 30) { score -= 2; break; }
+          }
+          if (slotEnd >= closeMins - 60) score += 1;
+        }
+
+        slots.push({ time, taken: isTaken, score, recommended: false });
+      }
+
+      const availableSlots = slots.filter(s => !s.taken);
+      availableSlots.sort((a, b) => b.score - a.score);
+      const topSlots = availableSlots.slice(0, 3);
+      for (const slot of topSlots) {
+        if (slot.score > 0) slot.recommended = true;
+      }
+
+      return slots;
+    }
+
+    // ==========================================
+    // STEP ANIMATION
+    // ==========================================
+    function animateStep(stepEl, open) {
+      const body = stepEl.querySelector('.step-body');
+
+      if (open) {
+        body.style.height = 'auto';
+        const targetHeight = body.scrollHeight;
+        body.style.height = '0px';
+        body.offsetHeight; // Force reflow
+
+        const anim = body.animate(
+          [{ height: '0px' }, { height: targetHeight + 'px' }],
+          { duration: ANIM_DURATION, easing: 'ease-out' }
+        );
+        anim.onfinish = () => { body.style.height = 'auto'; };
+      } else {
+        const currentHeight = body.scrollHeight;
+        const anim = body.animate(
+          [{ height: currentHeight + 'px' }, { height: '0px' }],
+          { duration: ANIM_DURATION, easing: 'ease-out' }
+        );
+        anim.onfinish = () => { body.style.height = '0px'; };
+      }
+    }
+
+    // ==========================================
+    // STEP NAVIGATION
+    // ==========================================
+    function getActiveStep() {
+      const active = document.querySelector('.step.active');
+      return active ? parseInt(active.dataset.step) : null;
+    }
+
+    function openStep(stepNum) {
+      const targetStep = document.querySelector(`.step[data-step="${stepNum}"]`);
+      if (!targetStep || targetStep.classList.contains('disabled')) return;
+
+      const currentActive = document.querySelector('.step.active');
+      if (currentActive) {
+        currentActive.classList.remove('active');
+        animateStep(currentActive, false);
+      }
+
+      targetStep.classList.add('active');
+      animateStep(targetStep, true);
+      updateFloatingBtn();
+    }
+
+    function toggleStep(stepEl) {
+      if (stepEl.classList.contains('disabled')) return;
+
+      const isActive = stepEl.classList.contains('active');
+      const stepNum = parseInt(stepEl.dataset.step);
+
+      if (isActive) {
+        stepEl.classList.remove('active');
+        animateStep(stepEl, false);
+        updateFloatingBtn();
+      } else {
+        openStep(stepNum);
+      }
+    }
+
+    // ==========================================
+    // FLOATING BUTTON
+    // ==========================================
+    function updateFloatingBtn() {
+      const floatingBtn = document.getElementById('floatingBtn');
+      const activeStepNum = getActiveStep();
+
+      // Show floating button on step 1 (when services selected) and step 2 (always)
+      let showBtn = false;
+      if (activeStepNum === 1) showBtn = state.services.length > 0;
+      else if (activeStepNum === 2) showBtn = true;
+
+      floatingBtn.classList.toggle('visible', showBtn);
+    }
+
+    function onFloatingBtnClick() {
+      const activeStepNum = getActiveStep();
+      if (activeStepNum && activeStepNum < 5) {
+        openStep(activeStepNum + 1);
+      }
+    }
+
+    // ==========================================
+    // RENDER: SERVICES
+    // ==========================================
+    function renderServices() {
+      const container = document.getElementById('servicesContainer');
+      container.innerHTML = Object.entries(servicesData).map(([category, services]) => `
+        <div class="category">
+          <div class="category-title">${category}</div>
+          <div class="service-list">
+            ${services.map(s => `
+              <div class="service-item" data-id="${s.id}">
+                <div class="service-check"><i class="ph ph-check"></i></div>
+                <div class="service-info">
+                  <div class="service-name">${s.name}</div>
+                  <div class="service-duration">${s.duration} min</div>
+                </div>
+                <div class="service-price">${s.price} kr.</div>
+              </div>
+            `).join('')}
+          </div>
+        </div>
+      `).join('');
+
+      container.querySelectorAll('.service-item').forEach(item => {
+        item.addEventListener('click', () => {
+          const id = item.dataset.id;
+          const service = Object.values(servicesData).flat().find(s => s.id === id);
+          const idx = state.services.findIndex(s => s.id === id);
+
+          if (idx > -1) {
+            state.services.splice(idx, 1);
+            item.classList.remove('selected');
+          } else {
+            state.services.push(service);
+            item.classList.add('selected');
+          }
+          updateUI();
+        });
+      });
+    }
+
+    // ==========================================
+    // RENDER: ADDONS
+    // ==========================================
+    function renderAddons() {
+      const container = document.getElementById('addonsContainer');
+      container.innerHTML = `
+        <div class="service-list">
+          ${addonsData.map(a => `
+            <div class="service-item" data-id="${a.id}">
+              <div class="service-check"><i class="ph ph-check"></i></div>
+              <div class="service-info">
+                <div class="service-name">${a.name}</div>
+                <div class="service-duration">${a.duration > 0 ? a.duration + ' min' : ''}</div>
+              </div>
+              <div class="service-price">${a.price} kr.</div>
+            </div>
+          `).join('')}
+        </div>
+      `;
+
+      container.querySelectorAll('.service-item').forEach(item => {
+        item.addEventListener('click', () => {
+          const id = item.dataset.id;
+          const addon = addonsData.find(a => a.id === id);
+          const idx = state.addons.findIndex(a => a.id === id);
+
+          if (idx > -1) {
+            state.addons.splice(idx, 1);
+            item.classList.remove('selected');
+          } else {
+            state.addons.push(addon);
+            item.classList.add('selected');
+          }
+          updateUI();
+        });
+      });
+    }
+
+    // ==========================================
+    // UPDATE EMPLOYEE PRICES
+    // ==========================================
+    function updateEmployeePrices() {
+      const servicesTotal = state.services.reduce((sum, s) => sum + s.price, 0);
+      const addonsTotal = state.addons.reduce((sum, a) => sum + a.price, 0);
+      const baseTotal = servicesTotal + addonsTotal;
+      const container = document.getElementById('employeesContainer');
+
+      container.querySelectorAll('.employee-card').forEach(card => {
+        const empId = card.dataset.id || null;
+        const emp = employeesData.find(e => (e.id || '') === empId);
+        if (!emp || emp.id === null) return;
+
+        const priceEl = card.querySelector('.employee-price');
+        const employeePrice = baseTotal + (emp.priceModifier || 0);
+
+        if (servicesTotal > 0) {
+          if (priceEl) {
+            priceEl.textContent = `${employeePrice} kr.`;
+          } else {
+            const newPriceEl = document.createElement('div');
+            newPriceEl.className = `employee-price ${emp.priceModifier < 0 ? 'discount' : ''}`;
+            newPriceEl.textContent = `${employeePrice} kr.`;
+            card.appendChild(newPriceEl);
+          }
+        } else if (priceEl) {
+          priceEl.remove();
+        }
+      });
+    }
+
+    // ==========================================
+    // RENDER: EMPLOYEES
+    // ==========================================
+    function renderEmployees() {
+      const container = document.getElementById('employeesContainer');
+      const servicesTotal = state.services.reduce((sum, s) => sum + s.price, 0);
+      const addonsTotal = state.addons.reduce((sum, a) => sum + a.price, 0);
+      const baseTotal = servicesTotal + addonsTotal;
+
+      container.innerHTML = `
+        <div class="employee-grid">
+          ${employeesData.map(e => {
+            const employeePrice = baseTotal + (e.priceModifier || 0);
+            const isDiscount = e.priceModifier < 0;
+            const isSelected = (e.id === null && state.employee === null) || e.id === state.employee;
+
+            return `
+              <div class="employee-card ${isSelected ? 'selected' : ''}" data-id="${e.id || ''}">
+                <div class="employee-photo ${e.id === null ? 'neutral' : ''}" ${e.color ? `style="background:${e.color}"` : ''}>
+                  ${e.id === null ? '<i class="ph ph-shuffle"></i>' : e.name[0]}
+                </div>
+                <div class="employee-name">${e.name}</div>
+                <div class="employee-role">${e.role}</div>
+                ${e.id !== null && servicesTotal > 0 ? `<div class="employee-price ${isDiscount ? 'discount' : ''}">${employeePrice} kr.</div>` : ''}
+              </div>
+            `;
+          }).join('')}
+        </div>
+      `;
+
+      container.querySelectorAll('.employee-card').forEach(item => {
+        item.addEventListener('click', () => {
+          container.querySelectorAll('.employee-card').forEach(i => i.classList.remove('selected'));
+          item.classList.add('selected');
+          state.employee = item.dataset.id || null;
+          updateUI();
+          // Auto-advance to step 4
+          setTimeout(() => openStep(4), 150);
+        });
+      });
+    }
+
+    // ==========================================
+    // RENDER: CALENDAR
+    // ==========================================
+    let currentMonth = new Date();
+
+    function renderCalendar() {
+      const container = document.getElementById('datetimeContainer');
+      const monthNames = ['Januar', 'Februar', 'Marts', 'April', 'Maj', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'December'];
+      const today = new Date();
+      today.setHours(0,0,0,0);
+
+      const year = currentMonth.getFullYear();
+      const month = currentMonth.getMonth();
+      const firstDay = new Date(year, month, 1);
+      const lastDay = new Date(year, month + 1, 0);
+
+      let startOffset = firstDay.getDay() - 1;
+      if (startOffset < 0) startOffset = 6;
+
+      let daysHtml = '';
+      for (let i = 0; i < startOffset; i++) {
+        daysHtml += '<div class="day disabled"></div>';
+      }
+
+      for (let d = 1; d <= lastDay.getDate(); d++) {
+        const date = new Date(year, month, d);
+        const dateStr = date.toISOString().split('T')[0];
+        const isToday = date.getTime() === today.getTime();
+        const isPast = date < today;
+        const isSelected = state.date === dateStr;
+
+        let cls = 'day';
+        if (isToday) cls += ' today';
+        if (isPast && !isToday) cls += ' disabled';
+        if (isSelected) cls += ' selected';
+
+        daysHtml += `<div class="${cls}" data-date="${dateStr}">${d}</div>`;
+      }
+
+      // Beregn total varighed for valgte ydelser
+      const serviceDuration = state.services.reduce((sum, s) => sum + s.duration, 0) || 60;
+
+      // Brug AI-algoritme til at beregne optimale slots
+      const selectedDate = state.date || new Date().toISOString().split('T')[0];
+      const slots = calculateOptimalSlots(serviceDuration, selectedDate, state.employee);
+
+      // Filtrer til åbningstider (08:00-17:00)
+      const displaySlots = slots.filter(s => {
+        const mins = timeToMinutes(s.time);
+        return mins >= timeToMinutes('08:00') && mins <= timeToMinutes('16:30');
+      });
+
+      container.innerHTML = `
+        <div class="datetime-grid">
+          <div class="calendar">
+            <div class="calendar-header">
+              <div class="calendar-month">${monthNames[month]} ${year}</div>
+              <div class="calendar-nav">
+                <button id="prevMonth"><i class="ph ph-caret-left"></i></button>
+                <button id="nextMonth"><i class="ph ph-caret-right"></i></button>
+              </div>
+            </div>
+            <div class="calendar-grid">
+              <div class="weekday">Ma</div>
+              <div class="weekday">Ti</div>
+              <div class="weekday">On</div>
+              <div class="weekday">To</div>
+              <div class="weekday">Fr</div>
+              <div class="weekday">Lø</div>
+              <div class="weekday">Sø</div>
+              ${daysHtml}
+            </div>
+          </div>
+          <div class="time-section">
+            <div class="time-section-title">Ledige tider</div>
+            <div class="ai-info">
+              <i class="ph ph-sparkle"></i>
+              <span>Anbefalede tider passer bedst i vores kalender</span>
+            </div>
+            <div class="time-grid">
+              ${displaySlots.map(slot => {
+                let cls = 'time-slot';
+                if (slot.taken) cls += ' disabled';
+                if (slot.recommended && !slot.taken) cls += ' recommended';
+                if (state.time === slot.time) cls += ' selected';
+                return `<div class="${cls}" data-time="${slot.time}">
+                  ${slot.time}
+                  ${slot.recommended && !slot.taken ? '<span class="ai-badge"><i class="ph ph-sparkle"></i></span>' : ''}
+                </div>`;
+              }).join('')}
+            </div>
+
+            <!-- Waitlist -->
+            <button class="waitlist-trigger" id="waitlistTrigger">
+              <i class="ph ph-clock-countdown"></i>
+              Ingen tid der passer? Skriv dig på venteliste
+            </button>
+
+            <div class="waitlist-section" id="waitlistSection">
+              <div class="waitlist-content">
+                <div class="waitlist-header">
+                  <div class="waitlist-title">Skriv dig på venteliste</div>
+                  <button class="waitlist-close" id="waitlistClose">
+                    <i class="ph ph-x"></i>
+                  </button>
+                </div>
+                <p class="waitlist-desc">
+                  Hvis der bliver en ledig tid, kontakter vi dig hurtigst muligt.
+                  Angiv hvornår du senest ønsker en tid, og hvilke tidspunkter der passer dig.
+                </p>
+
+                <div class="waitlist-field">
+                  <label class="waitlist-label">Senest dato for aftale</label>
+                  <input type="date" class="form-input" id="waitlistDate">
+                </div>
+
+                <div class="waitlist-field">
+                  <label class="waitlist-label">Hvilke tidspunkter passer dig?</label>
+                  <div class="waitlist-periods">
+                    <div class="period-option" data-period="morning">
+                      <div class="period-check"><i class="ph ph-check"></i></div>
+                      <div class="period-info">
+                        <div class="period-name">Morgen</div>
+                        <div class="period-time">Åbning - 10:00</div>
+                      </div>
+                    </div>
+                    <div class="period-option" data-period="lateMorning">
+                      <div class="period-check"><i class="ph ph-check"></i></div>
+                      <div class="period-info">
+                        <div class="period-name">Formiddag</div>
+                        <div class="period-time">10:00 - 12:00</div>
+                      </div>
+                    </div>
+                    <div class="period-option" data-period="afternoon">
+                      <div class="period-check"><i class="ph ph-check"></i></div>
+                      <div class="period-info">
+                        <div class="period-name">Eftermiddag</div>
+                        <div class="period-time">12:00 - 17:00</div>
+                      </div>
+                    </div>
+                    <div class="period-option" data-period="evening">
+                      <div class="period-check"><i class="ph ph-check"></i></div>
+                      <div class="period-info">
+                        <div class="period-name">Aften</div>
+                        <div class="period-time">17:00 - Luk</div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="waitlist-field">
+                  <label class="waitlist-label">Besked til salonen <span class="optional">(valgfrit)</span></label>
+                  <textarea class="form-input" id="waitlistMessage" placeholder="Evt. særlige ønsker eller kommentarer..." rows="3"></textarea>
+                </div>
+
+                <button class="waitlist-submit" id="waitlistSubmit">
+                  <i class="ph ph-check"></i> Skriv mig på venteliste
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+
+      document.getElementById('prevMonth').addEventListener('click', () => {
+        currentMonth.setMonth(currentMonth.getMonth() - 1);
+        renderCalendar();
+      });
+
+      document.getElementById('nextMonth').addEventListener('click', () => {
+        currentMonth.setMonth(currentMonth.getMonth() + 1);
+        renderCalendar();
+      });
+
+      container.querySelectorAll('.day:not(.disabled)').forEach(day => {
+        day.addEventListener('click', () => {
+          container.querySelectorAll('.day').forEach(d => d.classList.remove('selected'));
+          day.classList.add('selected');
+          state.date = day.dataset.date;
+          updateUI();
+        });
+      });
+
+      container.querySelectorAll('.time-slot:not(.disabled)').forEach(slot => {
+        slot.addEventListener('click', () => {
+          container.querySelectorAll('.time-slot').forEach(s => s.classList.remove('selected'));
+          slot.classList.add('selected');
+          state.time = slot.dataset.time;
+          updateUI();
+          // Auto-advance to step 5 when both date and time are selected
+          if (state.date && state.time) {
+            setTimeout(() => openStep(5), 150);
+          }
+        });
+      });
+
+      // Waitlist functionality
+      setupWaitlist();
+    }
+
+    // ==========================================
+    // WAITLIST
+    // ==========================================
+    let waitlistOpen = false;
+    const waitlistState = {
+      date: null,
+      periods: [],
+      message: ''
+    };
+
+    function setupWaitlist() {
+      const trigger = document.getElementById('waitlistTrigger');
+      const section = document.getElementById('waitlistSection');
+      const closeBtn = document.getElementById('waitlistClose');
+      const submitBtn = document.getElementById('waitlistSubmit');
+
+      if (!trigger || !section) return;
+
+      trigger.addEventListener('click', () => toggleWaitlist(true));
+      closeBtn.addEventListener('click', () => toggleWaitlist(false));
+
+      // Period selection
+      document.querySelectorAll('.period-option').forEach(option => {
+        option.addEventListener('click', () => {
+          option.classList.toggle('selected');
+          const period = option.dataset.period;
+          const idx = waitlistState.periods.indexOf(period);
+          if (idx > -1) {
+            waitlistState.periods.splice(idx, 1);
+          } else {
+            waitlistState.periods.push(period);
+          }
+        });
+      });
+
+      // Submit
+      submitBtn.addEventListener('click', handleWaitlistSubmit);
+    }
+
+    function toggleWaitlist(open) {
+      const trigger = document.getElementById('waitlistTrigger');
+      const section = document.getElementById('waitlistSection');
+
+      if (open) {
+        trigger.style.display = 'none';
+        section.style.height = 'auto';
+        const targetHeight = section.scrollHeight;
+        section.style.height = '0px';
+        section.offsetHeight;
+
+        const anim = section.animate(
+          [{ height: '0px' }, { height: targetHeight + 'px' }],
+          { duration: ANIM_DURATION, easing: 'ease-out' }
+        );
+        anim.onfinish = () => { section.style.height = 'auto'; };
+        waitlistOpen = true;
+      } else {
+        const currentHeight = section.scrollHeight;
+        const anim = section.animate(
+          [{ height: currentHeight + 'px' }, { height: '0px' }],
+          { duration: ANIM_DURATION, easing: 'ease-out' }
+        );
+        anim.onfinish = () => {
+          section.style.height = '0px';
+          trigger.style.display = 'flex';
+        };
+        waitlistOpen = false;
+      }
+    }
+
+    function handleWaitlistSubmit() {
+      const date = document.getElementById('waitlistDate').value;
+      const message = document.getElementById('waitlistMessage').value;
+
+      if (!date) {
+        alert('Vælg venligst en seneste dato');
+        return;
+      }
+
+      if (waitlistState.periods.length === 0) {
+        alert('Vælg mindst ét tidspunkt der passer dig');
+        return;
+      }
+
+      waitlistState.date = date;
+      waitlistState.message = message;
+
+      // Show success overlay
+      document.getElementById('waitlistSuccessOverlay').classList.add('visible');
+    }
+
+    function closeWaitlistSuccess() {
+      document.getElementById('waitlistSuccessOverlay').classList.remove('visible');
+      toggleWaitlist(false);
+
+      // Reset waitlist form
+      document.getElementById('waitlistDate').value = '';
+      document.getElementById('waitlistMessage').value = '';
+      document.querySelectorAll('.period-option').forEach(opt => opt.classList.remove('selected'));
+      waitlistState.periods = [];
+      waitlistState.date = null;
+      waitlistState.message = '';
+    }
+
+    // ==========================================
+    // UI UPDATE
+    // ==========================================
+    function updateUI() {
+      const step1 = document.querySelector('.step[data-step="1"]');
+      const step2 = document.querySelector('.step[data-step="2"]');
+      const step3 = document.querySelector('.step[data-step="3"]');
+      const step4 = document.querySelector('.step[data-step="4"]');
+      const step5 = document.querySelector('.step[data-step="5"]');
+
+      // Step 1: Services
+      if (state.services.length > 0) {
+        step1.classList.add('completed');
+        step1.querySelector('[data-summary]').textContent = state.services.map(s => s.name).join(', ');
+        step2.classList.remove('disabled');
+        step3.classList.remove('disabled');
+        step4.classList.remove('disabled');
+      } else {
+        step1.classList.remove('completed');
+        step1.querySelector('[data-summary]').textContent = 'Hvad vil du have lavet?';
+        step2.classList.add('disabled');
+        step3.classList.add('disabled');
+        step4.classList.add('disabled');
+        step5.classList.add('disabled');
+      }
+
+      // Step 2: Addons
+      if (state.addons.length > 0) {
+        step2.classList.add('completed');
+        step2.querySelector('[data-summary]').textContent = state.addons.map(a => a.name).join(', ');
+      } else {
+        step2.classList.remove('completed');
+        step2.querySelector('[data-summary]').textContent = 'Valgfrit';
+      }
+
+      // Update employee prices based on selected services + addons
+      updateEmployeePrices();
+
+      // Step 3: Employee
+      const selectedEmployee = state.employee ? employeesData.find(e => e.id === state.employee) : null;
+      const empName = selectedEmployee?.name || 'Ingen præference';
+      const empPriceModifier = selectedEmployee?.priceModifier || 0;
+      step3.classList.add('completed');
+      step3.querySelector('[data-summary]').textContent = empName;
+
+      // Step 4: Date & Time
+      if (state.date && state.time) {
+        step4.classList.add('completed');
+        const d = new Date(state.date);
+        step4.querySelector('[data-summary]').textContent = `${d.toLocaleDateString('da-DK', { weekday: 'short', day: 'numeric', month: 'short' })} kl. ${state.time}`;
+        step5.classList.remove('disabled');
+      } else {
+        step4.classList.remove('completed');
+        step4.querySelector('[data-summary]').textContent = 'Find en ledig tid';
+      }
+
+      // Step 5: Contact
+      const { firstName, lastName, phone } = state.customer;
+      if (firstName && phone) {
+        step5.classList.add('completed');
+        step5.querySelector('[data-summary]').textContent = `${firstName} ${lastName || ''} · ${phone}`;
+      } else {
+        step5.classList.remove('completed');
+        step5.querySelector('[data-summary]').textContent = 'Kontaktinformation';
+      }
+
+      // Sidebar
+      const cartEmpty = document.getElementById('cartEmpty');
+      const cartItems = document.getElementById('cartItems');
+      const cartDetails = document.getElementById('cartDetails');
+      const cartTotal = document.getElementById('cartTotal');
+
+      if (state.services.length === 0) {
+        cartEmpty.style.display = 'block';
+        cartItems.style.display = 'none';
+        cartDetails.style.display = 'none';
+        cartTotal.style.display = 'none';
+      } else {
+        cartEmpty.style.display = 'none';
+        cartItems.style.display = 'flex';
+        cartDetails.style.display = 'flex';
+        cartTotal.style.display = 'flex';
+
+        let cartHtml = state.services.map(s => `
+          <div class="cart-item">
+            <div>
+              <div class="cart-item-name">${s.name}</div>
+              <div class="cart-item-duration">${s.duration} min</div>
+            </div>
+            <div class="cart-item-price">${s.price} kr.</div>
+          </div>
+        `).join('');
+
+        if (state.addons.length > 0) {
+          cartHtml += state.addons.map(a => `
+            <div class="cart-item">
+              <div>
+                <div class="cart-item-name">${a.name}</div>
+                <div class="cart-item-duration">${a.duration > 0 ? a.duration + ' min' : 'Tilvalg'}</div>
+              </div>
+              <div class="cart-item-price">${a.price} kr.</div>
+            </div>
+          `).join('');
+        }
+
+        cartItems.innerHTML = cartHtml;
+
+        const servicesTotal = state.services.reduce((sum, s) => sum + s.price, 0);
+        const addonsTotal = state.addons.reduce((sum, a) => sum + a.price, 0);
+        const total = servicesTotal + addonsTotal + empPriceModifier;
+        document.getElementById('totalPrice').textContent = total + ' kr.';
+
+        document.getElementById('detailEmployee').textContent = empName;
+
+        if (state.date) {
+          const d = new Date(state.date);
+          document.getElementById('detailDate').textContent = d.toLocaleDateString('da-DK', { weekday: 'long', day: 'numeric', month: 'long' });
+        } else {
+          document.getElementById('detailDate').textContent = 'Ikke valgt';
+        }
+
+        document.getElementById('detailTime').textContent = state.time || 'Ikke valgt';
+      }
+
+      // Book button
+      const canBook = state.services.length > 0 && state.date && state.time && firstName && phone;
+      document.getElementById('bookBtn').disabled = !canBook;
+
+      updateFloatingBtn();
+    }
+
+    // ==========================================
+    // FORM LISTENERS
+    // ==========================================
+    function setupFormListeners() {
+      ['firstName', 'lastName', 'phone', 'email', 'notes'].forEach(field => {
+        const el = document.getElementById(field);
+        if (el) {
+          el.addEventListener('input', () => {
+            state.customer[field] = el.value;
+            updateUI();
+          });
+        }
+      });
+    }
+
+    // ==========================================
+    // BOOKING
+    // ==========================================
+    function onBookClick() {
+      const { firstName, phone } = state.customer;
+      if (!firstName || !phone) {
+        alert('Udfyld venligst fornavn og telefon.');
+        return;
+      }
+      document.getElementById('successOverlay').classList.add('visible');
+    }
+
+    // ==========================================
+    // VIEW SWITCHING
+    // ==========================================
+    let isLoggedIn = false;
+    let loggedInUser = null;
+    let enteredPhone = '';
+
+    const views = {
+      landing: document.getElementById('landingView'),
+      mypage: document.getElementById('mypageView'),
+      booking: document.getElementById('bookingView')
+    };
+
+    function showView(viewName) {
+      Object.entries(views).forEach(([name, el]) => {
+        if (name === viewName) {
+          el.style.display = name === 'booking' ? 'grid' : (name === 'mypage' ? 'block' : 'flex');
+        } else {
+          el.style.display = 'none';
+        }
+      });
+
+      // Reset landing to step 1 when showing
+      if (viewName === 'landing') {
+        showLandingStep(1);
+      }
+    }
+
+    function showLandingStep(step) {
+      const step1 = document.getElementById('landingStep1');
+      const step2 = document.getElementById('landingStep2');
+
+      if (step === 1) {
+        step1.style.display = 'block';
+        step2.style.display = 'none';
+      } else {
+        step1.style.display = 'none';
+        step2.style.display = 'block';
+        document.getElementById('pinInput').value = '';
+        document.getElementById('pinInput').focus();
+      }
+    }
+
+    function handlePhoneNext() {
+      const phone = document.getElementById('phoneInput').value.trim();
+
+      if (!phone) {
+        alert('Indtast telefonnummer');
+        return;
+      }
+
+      enteredPhone = phone;
+      document.getElementById('phoneDisplay').textContent = phone;
+      showLandingStep(2);
+    }
+
+    function handleBackToPhone() {
+      showLandingStep(1);
+      document.getElementById('phoneInput').focus();
+    }
+
+    function handleLogin() {
+      const pin = document.getElementById('pinInput').value.trim();
+
+      if (!pin) {
+        alert('Indtast PIN-kode');
+        return;
+      }
+
+      // Mock login - in real app, validate phone + PIN against backend
+      isLoggedIn = true;
+      loggedInUser = {
+        firstName: 'Maria',
+        lastName: 'Hansen',
+        email: 'maria@email.dk',
+        phone: enteredPhone
+      };
+
+      // Update mypage form fields with user data
+      document.getElementById('mypageFirstName').value = loggedInUser.firstName;
+      document.getElementById('mypageLastName').value = loggedInUser.lastName;
+      document.getElementById('mypageEmail').value = loggedInUser.email;
+      document.getElementById('mypagePhone').value = loggedInUser.phone;
+
+      document.getElementById('mypageGreeting').textContent = `Hej, ${loggedInUser.firstName}!`;
+      showView('mypage');
+    }
+
+    function handleLogout() {
+      isLoggedIn = false;
+      loggedInUser = null;
+      enteredPhone = '';
+      document.getElementById('phoneInput').value = '';
+      document.getElementById('pinInput').value = '';
+      showView('landing');
+    }
+
+    function handleContinueWithoutLogin() {
+      // Not logged in, but pre-fill phone in booking
+      isLoggedIn = false;
+      loggedInUser = null;
+
+      document.getElementById('phone').value = enteredPhone;
+      state.customer.phone = enteredPhone;
+      updateUI();
+
+      showView('booking');
+    }
+
+    function handleBookFromMyPage() {
+      // Pre-fill customer info from logged in user
+      if (loggedInUser) {
+        document.getElementById('firstName').value = loggedInUser.firstName;
+        document.getElementById('lastName').value = loggedInUser.lastName;
+        document.getElementById('email').value = loggedInUser.email;
+        document.getElementById('phone').value = loggedInUser.phone;
+
+        state.customer = {
+          firstName: loggedInUser.firstName,
+          lastName: loggedInUser.lastName,
+          email: loggedInUser.email,
+          phone: loggedInUser.phone,
+          notes: ''
+        };
+        updateUI();
+      }
+      showView('booking');
+    }
+
+    // ==========================================
+    // INIT
+    // ==========================================
+    function init() {
+      renderServices();
+      renderAddons();
+      renderEmployees();
+      renderCalendar();
+
+      // Open step 1
+      document.querySelector('.step[data-step="1"] .step-body').style.height = 'auto';
+
+      // Step headers
+      document.querySelectorAll('.step-header').forEach(header => {
+        header.addEventListener('click', () => toggleStep(header.closest('.step')));
+      });
+
+      // Floating button
+      document.getElementById('floatingBtn').addEventListener('click', onFloatingBtnClick);
+
+      // Book button
+      document.getElementById('bookBtn').addEventListener('click', onBookClick);
+
+      // Form
+      setupFormListeners();
+
+      // Success overlay close
+      document.getElementById('successOverlay').addEventListener('click', (e) => {
+        if (e.target.id === 'successOverlay') location.reload();
+      });
+
+      // Waitlist success overlay close
+      document.getElementById('waitlistSuccessClose').addEventListener('click', closeWaitlistSuccess);
+      document.getElementById('waitlistSuccessOverlay').addEventListener('click', (e) => {
+        if (e.target.id === 'waitlistSuccessOverlay') closeWaitlistSuccess();
+      });
+
+      // View switching - Landing
+      document.getElementById('phoneNextBtn').addEventListener('click', handlePhoneNext);
+      document.getElementById('backToPhoneBtn').addEventListener('click', handleBackToPhone);
+      document.getElementById('loginBtn').addEventListener('click', handleLogin);
+      document.getElementById('continueBtn').addEventListener('click', handleContinueWithoutLogin);
+
+      // Enter key support
+      document.getElementById('phoneInput').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') handlePhoneNext();
+      });
+      document.getElementById('pinInput').addEventListener('keydown', (e) => {
+        if (e.key === 'Enter') handleLogin();
+      });
+
+      // View switching - MyPage
+      document.getElementById('logoutBtn').addEventListener('click', handleLogout);
+      document.getElementById('bookCtaBtn').addEventListener('click', handleBookFromMyPage);
+
+      // Start with landing view
+      showView('landing');
+    }
+
+    init();
+  </script>
+
+</body>
+</html>
diff --git a/.workbench/POC/poc-checkout.html b/.workbench/POC/poc-checkout.html
new file mode 100644
index 0000000..210d46f
--- /dev/null
+++ b/.workbench/POC/poc-checkout.html
@@ -0,0 +1,2499 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Checkout 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>
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    :root {
+      --color-border: #e0e0e0;
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-red: #e53935;
+      --transition-fast: 150ms ease;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--color-background);
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    .demo-trigger { padding: 20px; }
+
+    .demo-btn {
+      padding: 12px 24px;
+      background: var(--color-teal);
+      color: white;
+      border: none;
+      border-radius: 4px;
+      font-size: 14px;
+      cursor: pointer;
+    }
+
+    /* Overlay & Panel */
+    .overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.25);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 200ms, visibility 200ms;
+      z-index: 100;
+    }
+    .overlay.open { opacity: 1; visibility: visible; }
+
+    .panel {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 80%;
+      background: var(--color-background);
+      transform: translateX(100%);
+      transition: transform 200ms ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 101;
+      box-shadow: -4px 0 20px rgba(0,0,0,0.15);
+    }
+    .panel.open { transform: translateX(0); }
+
+    /* Header */
+    .header {
+      display: flex;
+      align-items: center;
+      gap: 40px;
+      padding: 20px 28px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .header-field { display: flex; align-items: center; gap: 10px; }
+    .header-label { color: var(--color-text-secondary); font-size: 13px; }
+    .header-value { font-weight: 500; font-size: 15px; }
+    .header-link { color: var(--color-teal); cursor: pointer; font-size: 13px; }
+
+    .header-select {
+      padding: 6px 28px 6px 10px;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      font-size: 14px;
+      background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center;
+      appearance: none;
+    }
+
+    .header-close {
+      margin-left: auto;
+      background: none;
+      border: none;
+      font-size: 20px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      padding: 4px 8px;
+    }
+
+    /* Main layout */
+    .main {
+      flex: 1;
+      display: grid;
+      grid-template-columns: 20% 1fr 35%;
+      overflow: hidden;
+    }
+
+    /* Sidebar */
+    .sidebar {
+      border-right: 1px solid var(--color-border);
+      display: flex;
+      flex-direction: column;
+      background: var(--color-surface);
+    }
+
+    .search-box {
+      padding: 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .search-input {
+      width: 100%;
+      padding: 12px 14px 12px 40px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 14px;
+      background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E") no-repeat 12px center;
+    }
+
+    .menu-section {
+      border-bottom: 1px solid var(--color-border);
+      padding: 12px 0;
+    }
+
+    .menu-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 20px;
+      font-size: 14px;
+      cursor: pointer;
+    }
+    .menu-item:hover { background: var(--color-background-hover); }
+    .menu-item.active { color: var(--color-teal); font-weight: 500; }
+
+    .categories {
+      flex: 1;
+      overflow-y: auto;
+      padding: 12px 0;
+    }
+
+    .category {
+      display: flex;
+      justify-content: space-between;
+      padding: 12px 20px;
+      font-size: 14px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+    }
+    .category:hover { background: var(--color-background-hover); color: var(--color-text); }
+
+    /* Cart area */
+    .cart-area {
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+      background: var(--color-background);
+    }
+
+    .cart-list {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px 24px;
+    }
+
+    .cart-section {
+      margin-bottom: 24px;
+    }
+
+    .cart-section:last-child {
+      margin-bottom: 0;
+    }
+
+    .cart-section-header {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      padding: 0 4px 10px;
+      border-bottom: 1px solid var(--color-border);
+      margin-bottom: 12px;
+    }
+
+    .cart-section-items {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    /* Cart footer with totals */
+    .cart-footer {
+      padding: 20px 24px;
+      background: var(--color-surface);
+      border-top: 1px solid var(--color-border);
+    }
+
+    .cart-totals {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    .cart-total-row {
+      display: flex;
+      justify-content: space-between;
+      font-size: 14px;
+    }
+
+    .cart-total-row .label {
+      color: var(--color-text-secondary);
+    }
+
+    .cart-total-row .value {
+      font-family: var(--font-mono);
+      font-weight: 500;
+    }
+
+    .cart-total-row.grand {
+      padding-top: 12px;
+      border-top: 1px solid var(--color-border);
+      margin-top: 4px;
+    }
+
+    .cart-total-row.grand .label {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    .cart-total-row.grand .value {
+      font-family: var(--font-mono);
+      font-size: 24px;
+      font-weight: 700;
+    }
+
+    /* Cart item card */
+    .cart-item {
+      background: var(--color-surface);
+      border-radius: 6px;
+      overflow: hidden;
+      transition: box-shadow 200ms ease;
+    }
+
+    .cart-item.expanded {
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
+    }
+
+    .cart-item-main {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 12px 16px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    .cart-item-main:hover {
+      background: var(--color-background-hover);
+    }
+
+    .cart-item.expanded .cart-item-main {
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .cart-item-main::after {
+      content: '';
+      width: 8px;
+      height: 8px;
+      border-right: 2px solid var(--color-text-secondary);
+      border-bottom: 2px solid var(--color-text-secondary);
+      transform: rotate(45deg);
+      transition: transform 200ms ease;
+      margin-left: 4px;
+      opacity: 0.5;
+    }
+
+    .cart-item:hover .cart-item-main::after {
+      opacity: 1;
+    }
+
+    .cart-item.expanded .cart-item-main::after {
+      transform: rotate(-135deg);
+      opacity: 1;
+    }
+
+    /* Expandable edit section */
+    .cart-item-edit {
+      max-height: 0;
+      opacity: 0;
+      overflow: hidden;
+      transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
+                  opacity 250ms ease,
+                  padding 300ms ease;
+      padding: 0 16px;
+      background: var(--color-background-alt);
+    }
+
+    .cart-item.expanded .cart-item-edit {
+      max-height: 200px;
+      opacity: 1;
+      padding: 16px;
+    }
+
+    .edit-row {
+      display: flex;
+      gap: 12px;
+      margin-bottom: 12px;
+    }
+
+    .edit-row:last-child {
+      margin-bottom: 0;
+    }
+
+    .edit-field {
+      flex: 1;
+    }
+
+    .edit-field-label {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 6px;
+    }
+
+    .edit-field-input {
+      width: 100%;
+      padding: 8px 10px;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      font-size: 13px;
+      transition: border-color 150ms ease;
+    }
+
+    .edit-field-input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    .edit-field-input.mono {
+      font-family: var(--font-mono);
+      text-align: right;
+    }
+
+    .edit-field-select {
+      width: 100%;
+      padding: 8px 10px;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      font-size: 13px;
+      background: var(--color-surface);
+      cursor: pointer;
+    }
+
+    .edit-field-select:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    .discount-row {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+    }
+
+    .discount-type {
+      display: flex;
+      gap: 4px;
+    }
+
+    .discount-type-btn {
+      padding: 6px 10px;
+      border: 1px solid var(--color-border);
+      background: var(--color-surface);
+      font-size: 12px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .discount-type-btn:first-child {
+      border-radius: 4px 0 0 4px;
+    }
+
+    .discount-type-btn:last-child {
+      border-radius: 0 4px 4px 0;
+    }
+
+    .discount-type-btn.active {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+      color: white;
+    }
+
+    .item-qty {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    .qty-btn {
+      width: 26px;
+      height: 26px;
+      border: 1px solid var(--color-border);
+      background: var(--color-surface);
+      border-radius: 4px;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .qty-btn:hover { background: var(--color-background-hover); }
+
+    .qty-val {
+      width: 24px;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .item-info {
+      flex: 1;
+    }
+
+    .item-name {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .item-meta {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    .item-price {
+      text-align: right;
+    }
+
+    .item-original-price {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      text-decoration: line-through;
+      max-height: 0;
+      opacity: 0;
+      overflow: hidden;
+      transition: max-height 200ms ease, opacity 150ms ease;
+    }
+
+    .item-original-price.visible {
+      max-height: 20px;
+      opacity: 1;
+    }
+
+    .item-total {
+      font-family: var(--font-mono);
+      font-size: 15px;
+      font-weight: 600;
+      transition: color 200ms ease;
+    }
+
+    .cart-item:has(.item-discount.visible) .item-total {
+      color: var(--color-teal);
+    }
+
+    .item-discount {
+      font-size: 11px;
+      color: var(--color-teal);
+      font-weight: 500;
+      max-height: 0;
+      opacity: 0;
+      overflow: hidden;
+      transition: max-height 200ms ease, opacity 150ms ease;
+    }
+
+    .item-discount.visible {
+      max-height: 20px;
+      opacity: 1;
+    }
+
+    .item-remove {
+      background: none;
+      border: none;
+      font-size: 16px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      opacity: 0.3;
+      padding: 4px;
+    }
+    .item-remove:hover { opacity: 1; color: var(--color-red); }
+
+    /* Payment Panel */
+    .payment-panel {
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      display: flex;
+      flex-direction: column;
+      overflow: hidden;
+    }
+
+    .payment-total {
+      padding: 24px 28px;
+      text-align: center;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .payment-total-amount {
+      font-family: var(--font-mono);
+      font-size: 48px;
+      font-weight: 700;
+      color: var(--color-text);
+      letter-spacing: -2px;
+    }
+
+    .payment-total-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .payment-methods {
+      display: flex;
+      gap: 8px;
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--color-border);
+      flex-wrap: wrap;
+    }
+
+    .method-btn {
+      flex: 1 1 auto;
+      min-width: 70px;
+      padding: 12px 8px;
+      border: 2px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      cursor: pointer;
+      text-align: center;
+      transition: all var(--transition-fast);
+    }
+
+    .method-btn:hover {
+      border-color: #ccc;
+    }
+
+    .method-btn.active {
+      border-color: var(--color-teal);
+      background: rgba(0, 137, 123, 0.05);
+    }
+
+    .method-btn-icon {
+      width: 24px;
+      height: 24px;
+      display: block;
+      margin: 0 auto 4px;
+      filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%);
+    }
+
+    .method-btn-label {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    .method-btn.active .method-btn-label {
+      color: var(--color-teal);
+      font-weight: 500;
+    }
+
+    .payment-input-section {
+      padding: 16px 24px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .payment-input-label {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+
+    .payment-input-row {
+      display: flex;
+      gap: 10px;
+    }
+
+    .payment-input {
+      flex: 1;
+      padding: 12px 16px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-family: var(--font-mono);
+      font-size: 22px;
+      font-weight: 600;
+      text-align: right;
+    }
+
+    .payment-input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    .btn-pay-rest {
+      padding: 10px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      white-space: nowrap;
+    }
+
+    .btn-pay-rest:hover {
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+    }
+
+    .btn-add-payment {
+      width: 100%;
+      padding: 12px;
+      margin-top: 12px;
+      border: none;
+      border-radius: 6px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 200ms ease, opacity 200ms ease, transform 150ms ease;
+    }
+
+    .btn-add-payment:hover:not(:disabled) {
+      background: #00796b;
+    }
+
+    .btn-add-payment:active:not(:disabled) {
+      transform: scale(0.98);
+    }
+
+    .btn-add-payment:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+      opacity: 0.7;
+    }
+
+    /* Giftcard lookup */
+    .giftcard-lookup {
+      max-height: 0;
+      opacity: 0;
+      overflow: hidden;
+      transition: max-height 300ms cubic-bezier(0.4, 0, 0.2, 1),
+                  opacity 250ms ease,
+                  margin-bottom 300ms ease,
+                  padding-bottom 300ms ease;
+      margin-bottom: 0;
+      padding-bottom: 0;
+      border-bottom: 1px solid transparent;
+    }
+
+    .giftcard-lookup.visible {
+      max-height: 150px;
+      opacity: 1;
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+      border-bottom-color: var(--color-border);
+    }
+
+    .giftcard-lookup-label {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+
+    .giftcard-lookup-row {
+      display: flex;
+      gap: 10px;
+    }
+
+    .giftcard-input {
+      flex: 1;
+      padding: 10px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-family: var(--font-mono);
+      font-size: 14px;
+      letter-spacing: 1px;
+    }
+
+    .giftcard-input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    .btn-lookup {
+      padding: 10px 16px;
+      border: 1px solid var(--color-teal);
+      border-radius: 6px;
+      background: var(--color-surface);
+      color: var(--color-teal);
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: background 150ms ease, transform 150ms ease;
+    }
+
+    .btn-lookup:hover {
+      background: rgba(0, 137, 123, 0.08);
+    }
+
+    .btn-lookup:active {
+      transform: scale(0.97);
+    }
+
+    .giftcard-result {
+      margin-top: 0;
+      padding: 0 12px;
+      border-radius: 6px;
+      font-size: 13px;
+      max-height: 0;
+      opacity: 0;
+      overflow: hidden;
+      transition: max-height 250ms ease,
+                  opacity 200ms ease,
+                  margin-top 250ms ease,
+                  padding 250ms ease;
+    }
+
+    .giftcard-result.visible {
+      max-height: 50px;
+      opacity: 1;
+      margin-top: 10px;
+      padding: 10px 12px;
+    }
+
+    .giftcard-result.success {
+      background: rgba(0, 137, 123, 0.1);
+      color: var(--color-teal);
+    }
+
+    .giftcard-result.error {
+      background: rgba(229, 57, 53, 0.1);
+      color: var(--color-red);
+    }
+
+    .giftcard-balance {
+      font-family: var(--font-mono);
+      font-weight: 600;
+    }
+
+    /* Registered payments */
+    .registered-payments {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px 24px;
+    }
+
+    .registered-payments-label {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 12px;
+    }
+
+    .payment-entry {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .payment-entry-icon {
+      width: 20px;
+      height: 20px;
+      filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%);
+    }
+
+    .payment-entry-info {
+      flex: 1;
+    }
+
+    .payment-entry-method {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    .payment-entry-detail {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    .payment-entry-amount {
+      font-family: var(--font-mono);
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-teal);
+    }
+
+    .payment-entry-remove {
+      background: none;
+      border: none;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      font-size: 16px;
+      opacity: 0.5;
+      padding: 4px;
+    }
+
+    .payment-entry-remove:hover {
+      opacity: 1;
+      color: var(--color-red);
+    }
+
+    .no-payments {
+      color: var(--color-text-secondary);
+      font-size: 13px;
+      text-align: center;
+      padding: 24px;
+    }
+
+    /* Payment footer */
+    .payment-footer {
+      padding: 16px 24px;
+      border-top: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    .remaining-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 16px;
+    }
+
+    .remaining-label {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+    }
+
+    .remaining-value {
+      font-family: var(--font-mono);
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--color-red);
+    }
+
+    .remaining-value.zero {
+      color: var(--color-teal);
+    }
+
+    .btn-complete {
+      width: 100%;
+      padding: 16px;
+      border: none;
+      border-radius: 6px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 16px;
+      font-weight: 500;
+      cursor: pointer;
+    }
+
+    .btn-complete:hover {
+      background: #00796b;
+    }
+
+    .btn-complete:disabled {
+      background: #ccc;
+      cursor: not-allowed;
+    }
+
+    .payment-actions {
+      display: flex;
+      gap: 12px;
+      margin-top: 16px;
+    }
+
+    .btn-secondary {
+      flex: 1;
+      padding: 10px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+    }
+
+    .btn-secondary:hover {
+      border-color: #ccc;
+    }
+
+    /* ==========================================
+       BARCODE SCANNER
+       ========================================== */
+    .scan-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 10px;
+      width: 100%;
+      padding: 14px 20px;
+      margin-top: 12px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 8%, white);
+      border: 2px dashed var(--color-teal);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 200ms ease;
+    }
+
+    .scan-btn:hover {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      border-style: solid;
+    }
+
+    .scan-btn.scanning {
+      border-color: #1976d2;
+      color: #1976d2;
+      background: color-mix(in srgb, #1976d2 8%, white);
+      animation: pulse-border 1.5s ease-in-out infinite;
+    }
+
+    @keyframes pulse-border {
+      0%, 100% { border-color: #1976d2; }
+      50% { border-color: #64b5f6; }
+    }
+
+    .scan-btn svg {
+      width: 18px;
+      height: 18px;
+      fill: currentColor;
+    }
+
+    .scanner-input-hidden {
+      position: absolute;
+      left: -9999px;
+      opacity: 0;
+    }
+
+    /* Debug codes in sidebar */
+    .debug-codes {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 12px 16px;
+      border-top: 1px solid var(--color-border);
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    .debug-codes strong {
+      color: var(--color-text);
+      margin-bottom: 4px;
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    .debug-codes div {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    .debug-codes code {
+      font-family: var(--font-mono);
+      font-size: 10px;
+      background: var(--color-surface);
+      padding: 2px 6px;
+      border-radius: 3px;
+      cursor: pointer;
+      user-select: all;
+    }
+
+    .debug-codes code:hover {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    /* ==========================================
+       RECEIPT
+       ========================================== */
+    .receipt-container {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: rgba(0,0,0,0.3);
+      z-index: 10;
+      display: flex;
+      justify-content: center;
+      padding-top: 20px;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 300ms ease, visibility 300ms ease;
+      overflow-y: auto;
+    }
+
+    .receipt-container.visible {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    .receipt {
+      width: 280px;
+      background: #fff;
+      font-family: 'Courier New', monospace;
+      font-size: 12px;
+      color: #000;
+      padding: 20px 16px;
+      box-shadow: 0 4px 20px rgba(0,0,0,0.3);
+      transform: translateY(-100%);
+      transition: transform 500ms cubic-bezier(0.34, 1.56, 0.64, 1);
+      position: relative;
+      margin-bottom: 20px;
+    }
+
+    .receipt-container.visible .receipt {
+      transform: translateY(0);
+    }
+
+    /* Torn paper effect at bottom */
+    .receipt::after {
+      content: '';
+      position: absolute;
+      bottom: -10px;
+      left: 0;
+      right: 0;
+      height: 10px;
+      background: linear-gradient(135deg, #fff 25%, transparent 25%),
+                  linear-gradient(-135deg, #fff 25%, transparent 25%);
+      background-size: 10px 10px;
+    }
+
+    .receipt-header {
+      text-align: center;
+      padding-bottom: 12px;
+      border-bottom: 1px dashed #000;
+      margin-bottom: 12px;
+    }
+
+    .receipt-logo {
+      font-size: 18px;
+      font-weight: bold;
+      letter-spacing: 2px;
+      margin-bottom: 4px;
+    }
+
+    .receipt-address {
+      font-size: 10px;
+      line-height: 1.4;
+    }
+
+    .receipt-info {
+      display: flex;
+      justify-content: space-between;
+      font-size: 10px;
+      padding: 8px 0;
+      border-bottom: 1px dashed #000;
+      margin-bottom: 12px;
+    }
+
+    .receipt-items {
+      margin-bottom: 12px;
+    }
+
+    .receipt-item {
+      display: flex;
+      justify-content: space-between;
+      padding: 4px 0;
+      font-size: 11px;
+    }
+
+    .receipt-item-name {
+      flex: 1;
+      padding-right: 8px;
+    }
+
+    .receipt-item-qty {
+      width: 30px;
+      text-align: center;
+    }
+
+    .receipt-item-price {
+      width: 70px;
+      text-align: right;
+      font-family: 'JetBrains Mono', monospace;
+    }
+
+    .receipt-divider {
+      border-top: 1px dashed #000;
+      margin: 8px 0;
+    }
+
+    .receipt-totals {
+      margin-bottom: 12px;
+    }
+
+    .receipt-total-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 3px 0;
+      font-size: 11px;
+    }
+
+    .receipt-total-row.grand {
+      font-size: 14px;
+      font-weight: bold;
+      padding: 8px 0;
+      border-top: 2px solid #000;
+      border-bottom: 2px solid #000;
+      margin: 8px 0;
+    }
+
+    .receipt-payment {
+      font-size: 10px;
+      padding: 8px 0;
+      border-bottom: 1px dashed #000;
+    }
+
+    .receipt-payment-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 2px 0;
+    }
+
+    .receipt-footer {
+      text-align: center;
+      padding-top: 12px;
+      font-size: 10px;
+    }
+
+    .receipt-footer-msg {
+      font-size: 12px;
+      font-weight: bold;
+      margin-bottom: 8px;
+    }
+
+    .receipt-qr {
+      margin: 12px auto 8px;
+      display: flex;
+      justify-content: center;
+    }
+
+    .receipt-qr svg {
+      border: 2px solid #000;
+    }
+
+    .receipt-id {
+      font-size: 9px;
+      letter-spacing: 1px;
+    }
+
+    .receipt-close {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: #f0f0f0;
+      border-radius: 50%;
+      cursor: pointer;
+      font-size: 14px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .receipt-close:hover {
+      background: #e0e0e0;
+    }
+
+    .receipt-actions {
+      display: flex;
+      gap: 8px;
+      margin-top: 16px;
+      padding-top: 12px;
+      border-top: 1px solid #e0e0e0;
+    }
+
+    .receipt-actions button {
+      flex: 1;
+      padding: 8px;
+      font-size: 11px;
+      border-radius: 4px;
+      cursor: pointer;
+      font-family: var(--font-family);
+    }
+
+    .receipt-actions .btn-print {
+      background: #000;
+      color: #fff;
+      border: none;
+    }
+
+    .receipt-actions .btn-close {
+      background: #fff;
+      border: 1px solid #ccc;
+      color: #333;
+    }
+
+    /* ==========================================
+       PRINT STYLES
+       ========================================== */
+    @media print {
+      /* White background */
+      html, body {
+        background: white !important;
+        -webkit-print-color-adjust: exact;
+        print-color-adjust: exact;
+      }
+
+      /* Hide everything by default */
+      .demo-trigger,
+      .overlay,
+      .header,
+      .sidebar,
+      .cart-area,
+      .payment-total,
+      .payment-methods,
+      .payment-input-section,
+      .registered-payments,
+      .payment-footer {
+        display: none !important;
+      }
+
+      /* Reset panel positioning */
+      .panel {
+        position: static !important;
+        width: 100% !important;
+        transform: none !important;
+        box-shadow: none !important;
+        background: white !important;
+      }
+
+      .main {
+        display: block !important;
+      }
+
+      .payment-panel {
+        display: block !important;
+        position: static !important;
+        border: none !important;
+        background: white !important;
+      }
+
+      /* Show receipt */
+      .receipt-container {
+        display: flex !important;
+        justify-content: center !important;
+        visibility: visible !important;
+        opacity: 1 !important;
+        position: static !important;
+        background: white !important;
+        padding: 0 !important;
+      }
+
+      .receipt {
+        display: block !important;
+        margin: 0 !important;
+        box-shadow: none !important;
+        transform: none !important;
+        text-align: left !important;
+      }
+
+      /* Preserve item layout */
+      .receipt-item {
+        display: flex !important;
+        justify-content: space-between !important;
+        text-align: left !important;
+      }
+
+      .receipt-item-name {
+        text-align: left !important;
+      }
+
+      .receipt-item-price {
+        text-align: right !important;
+      }
+
+      .receipt-total-row {
+        display: flex !important;
+        justify-content: space-between !important;
+      }
+
+      /* Hide buttons in receipt */
+      .receipt-close,
+      .receipt-actions {
+        display: none !important;
+      }
+
+      /* Remove torn paper effect */
+      .receipt::after {
+        display: none;
+      }
+    }
+
+  </style>
+</head>
+<body>
+  <div class="demo-trigger">
+    <button class="demo-btn" onclick="openPanel()">Gå til betaling</button>
+  </div>
+
+  <div class="overlay" id="overlay" onclick="closePanel()"></div>
+
+  <div class="panel" id="panel">
+    <div class="header">
+      <div class="header-field">
+        <span class="header-label">Kunde</span>
+        <span class="header-value">Sofie Nielsen</span>
+        <span class="header-link">Fjern</span>
+      </div>
+      <div class="header-field">
+        <span class="header-label">Dato</span>
+        <span class="header-value">16. dec 2025</span>
+      </div>
+      <div class="header-field">
+        <span class="header-label">Betjent af</span>
+        <select class="header-select">
+          <option>Emma Larsen</option>
+          <option>Anett Davidsson</option>
+        </select>
+      </div>
+      <button class="header-close" onclick="closePanel()">✕</button>
+    </div>
+
+    <div class="main">
+      <div class="sidebar">
+        <div class="search-box">
+          <input type="text" class="search-input" placeholder="Søg varer...">
+        </div>
+        <div class="menu-section">
+          <div class="menu-item"><span>Brugerdefineret linje</span></div>
+          <div class="menu-item"><span>Tidligere salg</span></div>
+          <div class="menu-item"><span>Refunder</span></div>
+          <div class="menu-item active"><span>Services</span></div>
+        </div>
+        <div class="categories">
+          <div class="category"><span>Acidic Bonding</span><span>›</span></div>
+          <div class="category"><span>Amino Mint</span><span>›</span></div>
+          <div class="category"><span>Color Gloss</span><span>›</span></div>
+          <div class="category"><span>Conditioner</span><span>›</span></div>
+          <div class="category"><span>Styling</span><span>›</span></div>
+          <div class="category"><span>Olaplex</span><span>›</span></div>
+        </div>
+        <div class="debug-codes">
+          <strong>Test EAN-koder:</strong>
+          <div><code>5012345678900</code> Olaplex No.4</div>
+          <div><code>8710447489109</code> Redken Shampoo</div>
+          <div><code>3474636610143</code> Kérastase</div>
+          <div><code>0000000000000</code> Ukendt</div>
+        </div>
+      </div>
+
+      <div class="cart-area">
+        <div class="cart-list">
+          <!-- Services -->
+          <div class="cart-section">
+            <div class="cart-section-header">Services</div>
+            <div class="cart-section-items">
+              <div class="cart-item" onclick="toggleCartItem(this)" data-base-price="725" data-duration="45 min">
+                <div class="cart-item-main">
+                  <div class="item-qty" onclick="event.stopPropagation()">
+                    <button class="qty-btn">−</button>
+                    <span class="qty-val">1</span>
+                    <button class="qty-btn">+</button>
+                  </div>
+                  <div class="item-info">
+                    <div class="item-name">Dameklip</div>
+                    <div class="item-meta"><span class="item-employee">Emma Larsen</span> · 45 min</div>
+                  </div>
+                  <div class="item-price">
+                    <div class="item-original-price">725 kr</div>
+                    <div class="item-total">725 kr</div>
+                    <div class="item-discount">-0 kr rabat</div>
+                  </div>
+                  <button class="item-remove" onclick="event.stopPropagation()">✕</button>
+                </div>
+                <div class="cart-item-edit" onclick="event.stopPropagation()">
+                  <div class="edit-row">
+                    <div class="edit-field">
+                      <div class="edit-field-label">Pris</div>
+                      <input type="text" class="edit-field-input mono edit-price" value="725" oninput="updateCartItemDisplay(this)">
+                    </div>
+                    <div class="edit-field">
+                      <div class="edit-field-label">Udført af</div>
+                      <select class="edit-field-select edit-employee" onchange="updateCartItemDisplay(this)">
+                        <option selected>Emma Larsen</option>
+                        <option>Anett Davidsson</option>
+                        <option>Maria Jensen</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="edit-row">
+                    <div class="edit-field">
+                      <div class="edit-field-label">Rabat</div>
+                      <div class="discount-row">
+                        <input type="text" class="edit-field-input mono edit-discount" value="0" style="width: 80px;" oninput="updateCartItemDisplay(this)">
+                        <div class="discount-type">
+                          <button class="discount-type-btn active" data-type="kr">kr</button>
+                          <button class="discount-type-btn" data-type="pct">%</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="cart-item" onclick="toggleCartItem(this)" data-base-price="900" data-duration="90 min">
+                <div class="cart-item-main">
+                  <div class="item-qty" onclick="event.stopPropagation()">
+                    <button class="qty-btn">−</button>
+                    <span class="qty-val">1</span>
+                    <button class="qty-btn">+</button>
+                  </div>
+                  <div class="item-info">
+                    <div class="item-name">Gloss extra langt/tykt hår</div>
+                    <div class="item-meta"><span class="item-employee">Emma Larsen</span> · 90 min</div>
+                  </div>
+                  <div class="item-price">
+                    <div class="item-original-price">900 kr</div>
+                    <div class="item-total">900 kr</div>
+                    <div class="item-discount">-0 kr rabat</div>
+                  </div>
+                  <button class="item-remove" onclick="event.stopPropagation()">✕</button>
+                </div>
+                <div class="cart-item-edit" onclick="event.stopPropagation()">
+                  <div class="edit-row">
+                    <div class="edit-field">
+                      <div class="edit-field-label">Pris</div>
+                      <input type="text" class="edit-field-input mono edit-price" value="900" oninput="updateCartItemDisplay(this)">
+                    </div>
+                    <div class="edit-field">
+                      <div class="edit-field-label">Udført af</div>
+                      <select class="edit-field-select edit-employee" onchange="updateCartItemDisplay(this)">
+                        <option selected>Emma Larsen</option>
+                        <option>Anett Davidsson</option>
+                        <option>Maria Jensen</option>
+                      </select>
+                    </div>
+                  </div>
+                  <div class="edit-row">
+                    <div class="edit-field">
+                      <div class="edit-field-label">Rabat</div>
+                      <div class="discount-row">
+                        <input type="text" class="edit-field-input mono edit-discount" value="0" style="width: 80px;" oninput="updateCartItemDisplay(this)">
+                        <div class="discount-type">
+                          <button class="discount-type-btn active" data-type="kr">kr</button>
+                          <button class="discount-type-btn" data-type="pct">%</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <!-- Produkter -->
+          <div class="cart-section">
+            <div class="cart-section-header">Produkter</div>
+            <div class="cart-section-items">
+              <div class="cart-item" onclick="toggleCartItem(this)" data-base-price="300">
+                <div class="cart-item-main">
+                  <div class="item-qty" onclick="event.stopPropagation()">
+                    <button class="qty-btn">−</button>
+                    <span class="qty-val">1</span>
+                    <button class="qty-btn">+</button>
+                  </div>
+                  <div class="item-info">
+                    <div class="item-name">Olaplex No. 3</div>
+                    <div class="item-meta">100ml</div>
+                  </div>
+                  <div class="item-price">
+                    <div class="item-original-price">300 kr</div>
+                    <div class="item-total">300 kr</div>
+                    <div class="item-discount">-0 kr rabat</div>
+                  </div>
+                  <button class="item-remove" onclick="event.stopPropagation()">✕</button>
+                </div>
+                <div class="cart-item-edit" onclick="event.stopPropagation()">
+                  <div class="edit-row">
+                    <div class="edit-field">
+                      <div class="edit-field-label">Pris</div>
+                      <input type="text" class="edit-field-input mono edit-price" value="300" oninput="updateCartItemDisplay(this)">
+                    </div>
+                    <div class="edit-field">
+                      <div class="edit-field-label">Rabat</div>
+                      <div class="discount-row">
+                        <input type="text" class="edit-field-input mono edit-discount" value="0" style="width: 80px;" oninput="updateCartItemDisplay(this)">
+                        <div class="discount-type">
+                          <button class="discount-type-btn active" data-type="kr">kr</button>
+                          <button class="discount-type-btn" data-type="pct">%</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              <div class="cart-item" onclick="toggleCartItem(this)" data-base-price="175">
+                <div class="cart-item-main">
+                  <div class="item-qty" onclick="event.stopPropagation()">
+                    <button class="qty-btn">−</button>
+                    <span class="qty-val">2</span>
+                    <button class="qty-btn">+</button>
+                  </div>
+                  <div class="item-info">
+                    <div class="item-name">India supercharged mask</div>
+                    <div class="item-meta">250ml</div>
+                  </div>
+                  <div class="item-price">
+                    <div class="item-original-price">350 kr</div>
+                    <div class="item-total">350 kr</div>
+                    <div class="item-discount">-0 kr rabat</div>
+                  </div>
+                  <button class="item-remove" onclick="event.stopPropagation()">✕</button>
+                </div>
+                <div class="cart-item-edit" onclick="event.stopPropagation()">
+                  <div class="edit-row">
+                    <div class="edit-field">
+                      <div class="edit-field-label">Pris</div>
+                      <input type="text" class="edit-field-input mono edit-price" value="175" oninput="updateCartItemDisplay(this)">
+                    </div>
+                    <div class="edit-field">
+                      <div class="edit-field-label">Rabat</div>
+                      <div class="discount-row">
+                        <input type="text" class="edit-field-input mono edit-discount" value="0" style="width: 80px;" oninput="updateCartItemDisplay(this)">
+                        <div class="discount-type">
+                          <button class="discount-type-btn active" data-type="kr">kr</button>
+                          <button class="discount-type-btn" data-type="pct">%</button>
+                        </div>
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- Scan Button -->
+            <button class="scan-btn" id="scanButton">
+              <svg viewBox="0 0 24 24"><path d="M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h3v12H7V6zm4 0h1v12h-1V6zm3 0h2v12h-2V6zm3 0h3v12h-3V6zm4 0h1v12h-1V6z"/></svg>
+              SCAN PRODUKT
+            </button>
+            <!-- Hidden scanner input -->
+            <input type="text" id="scannerInput" class="scanner-input-hidden" autocomplete="off" />
+          </div>
+        </div>
+
+        <div class="cart-footer">
+          <div class="cart-totals">
+            <div class="cart-total-row">
+              <span class="label">Subtotal</span>
+              <span class="value">1.820 kr</span>
+            </div>
+            <div class="cart-total-row">
+              <span class="label">Moms (25%)</span>
+              <span class="value">455 kr</span>
+            </div>
+            <div class="cart-total-row grand">
+              <span class="label">Total</span>
+              <span class="value">2.275 kr</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Payment Panel -->
+      <div class="payment-panel" style="position: relative;">
+        <!-- Receipt overlay -->
+        <div class="receipt-container" id="receiptContainer">
+          <div class="receipt">
+            <button class="receipt-close" onclick="hideReceipt()">✕</button>
+
+            <div class="receipt-header">
+              <div class="receipt-logo">SALON BELLEZZA</div>
+              <div class="receipt-address">
+                Østergade 42, 1. sal<br>
+                1100 København K<br>
+                Tlf: 33 12 34 56<br>
+                CVR: 12345678
+              </div>
+            </div>
+
+            <div class="receipt-info">
+              <div>
+                <div>Dato: 16-12-2025</div>
+                <div>Tid: 14:32</div>
+              </div>
+              <div style="text-align: right;">
+                <div>Kvit: #4521</div>
+                <div>Kasse: 1</div>
+              </div>
+            </div>
+
+            <div class="receipt-items">
+              <div class="receipt-item" style="font-weight: bold; border-bottom: 1px solid #000; padding-bottom: 4px; margin-bottom: 4px;">
+                <span class="receipt-item-name">Vare</span>
+                <span class="receipt-item-qty">Antal</span>
+                <span class="receipt-item-price">Pris</span>
+              </div>
+              <div class="receipt-item">
+                <span class="receipt-item-name">Dameklip</span>
+                <span class="receipt-item-qty">1</span>
+                <span class="receipt-item-price">725,00</span>
+              </div>
+              <div class="receipt-item">
+                <span class="receipt-item-name">Gloss langt hår</span>
+                <span class="receipt-item-qty">1</span>
+                <span class="receipt-item-price">900,00</span>
+              </div>
+              <div class="receipt-item">
+                <span class="receipt-item-name">Olaplex No. 3</span>
+                <span class="receipt-item-qty">1</span>
+                <span class="receipt-item-price">300,00</span>
+              </div>
+              <div class="receipt-item">
+                <span class="receipt-item-name">India mask 250ml</span>
+                <span class="receipt-item-qty">2</span>
+                <span class="receipt-item-price">350,00</span>
+              </div>
+            </div>
+
+            <div class="receipt-divider"></div>
+
+            <div class="receipt-totals">
+              <div class="receipt-total-row">
+                <span>Subtotal</span>
+                <span>1.820,00</span>
+              </div>
+              <div class="receipt-total-row">
+                <span>Moms (25%)</span>
+                <span>455,00</span>
+              </div>
+              <div class="receipt-total-row grand">
+                <span>TOTAL</span>
+                <span>2.275,00 DKK</span>
+              </div>
+            </div>
+
+            <div class="receipt-payment">
+              <div class="receipt-payment-row">
+                <span>Betalt med Kort</span>
+                <span>2.275,00</span>
+              </div>
+            </div>
+
+            <div class="receipt-footer">
+              <div class="receipt-footer-msg">TAK FOR BESØGET!</div>
+              <div>Kunde: Sofie Nielsen</div>
+              <div>Betjent af: Emma Larsen</div>
+
+              <div class="receipt-qr">
+                <svg viewBox="0 0 29 29" width="80" height="80">
+                  <!-- QR Code pattern -->
+                  <rect width="29" height="29" fill="white"/>
+                  <!-- Position patterns (corners) -->
+                  <rect x="0" y="0" width="7" height="7" fill="black"/>
+                  <rect x="1" y="1" width="5" height="5" fill="white"/>
+                  <rect x="2" y="2" width="3" height="3" fill="black"/>
+                  <rect x="22" y="0" width="7" height="7" fill="black"/>
+                  <rect x="23" y="1" width="5" height="5" fill="white"/>
+                  <rect x="24" y="2" width="3" height="3" fill="black"/>
+                  <rect x="0" y="22" width="7" height="7" fill="black"/>
+                  <rect x="1" y="23" width="5" height="5" fill="white"/>
+                  <rect x="2" y="24" width="3" height="3" fill="black"/>
+                  <!-- Timing patterns -->
+                  <rect x="8" y="6" width="1" height="1" fill="black"/>
+                  <rect x="10" y="6" width="1" height="1" fill="black"/>
+                  <rect x="12" y="6" width="1" height="1" fill="black"/>
+                  <rect x="6" y="8" width="1" height="1" fill="black"/>
+                  <rect x="6" y="10" width="1" height="1" fill="black"/>
+                  <rect x="6" y="12" width="1" height="1" fill="black"/>
+                  <!-- Data modules (random pattern) -->
+                  <rect x="8" y="8" width="1" height="1" fill="black"/>
+                  <rect x="9" y="9" width="1" height="1" fill="black"/>
+                  <rect x="10" y="8" width="1" height="1" fill="black"/>
+                  <rect x="11" y="10" width="1" height="1" fill="black"/>
+                  <rect x="12" y="9" width="1" height="1" fill="black"/>
+                  <rect x="13" y="8" width="1" height="1" fill="black"/>
+                  <rect x="8" y="11" width="1" height="1" fill="black"/>
+                  <rect x="10" y="11" width="1" height="1" fill="black"/>
+                  <rect x="12" y="11" width="1" height="1" fill="black"/>
+                  <rect x="9" y="12" width="1" height="1" fill="black"/>
+                  <rect x="11" y="12" width="1" height="1" fill="black"/>
+                  <rect x="13" y="12" width="1" height="1" fill="black"/>
+                  <rect x="15" y="8" width="1" height="1" fill="black"/>
+                  <rect x="16" y="9" width="1" height="1" fill="black"/>
+                  <rect x="17" y="8" width="1" height="1" fill="black"/>
+                  <rect x="18" y="10" width="1" height="1" fill="black"/>
+                  <rect x="19" y="9" width="1" height="1" fill="black"/>
+                  <rect x="20" y="8" width="1" height="1" fill="black"/>
+                  <rect x="15" y="11" width="1" height="1" fill="black"/>
+                  <rect x="17" y="11" width="1" height="1" fill="black"/>
+                  <rect x="19" y="11" width="1" height="1" fill="black"/>
+                  <rect x="16" y="12" width="1" height="1" fill="black"/>
+                  <rect x="18" y="12" width="1" height="1" fill="black"/>
+                  <rect x="20" y="12" width="1" height="1" fill="black"/>
+                  <rect x="8" y="14" width="1" height="1" fill="black"/>
+                  <rect x="10" y="14" width="1" height="1" fill="black"/>
+                  <rect x="12" y="15" width="1" height="1" fill="black"/>
+                  <rect x="9" y="16" width="1" height="1" fill="black"/>
+                  <rect x="11" y="16" width="1" height="1" fill="black"/>
+                  <rect x="13" y="17" width="1" height="1" fill="black"/>
+                  <rect x="8" y="18" width="1" height="1" fill="black"/>
+                  <rect x="10" y="18" width="1" height="1" fill="black"/>
+                  <rect x="12" y="19" width="1" height="1" fill="black"/>
+                  <rect x="15" y="14" width="1" height="1" fill="black"/>
+                  <rect x="17" y="15" width="1" height="1" fill="black"/>
+                  <rect x="19" y="14" width="1" height="1" fill="black"/>
+                  <rect x="16" y="16" width="1" height="1" fill="black"/>
+                  <rect x="18" y="17" width="1" height="1" fill="black"/>
+                  <rect x="20" y="16" width="1" height="1" fill="black"/>
+                  <rect x="22" y="8" width="1" height="1" fill="black"/>
+                  <rect x="24" y="9" width="1" height="1" fill="black"/>
+                  <rect x="23" y="10" width="1" height="1" fill="black"/>
+                  <rect x="25" y="11" width="1" height="1" fill="black"/>
+                  <rect x="22" y="12" width="1" height="1" fill="black"/>
+                  <rect x="24" y="13" width="1" height="1" fill="black"/>
+                  <rect x="8" y="22" width="1" height="1" fill="black"/>
+                  <rect x="10" y="23" width="1" height="1" fill="black"/>
+                  <rect x="9" y="24" width="1" height="1" fill="black"/>
+                  <rect x="11" y="25" width="1" height="1" fill="black"/>
+                  <rect x="12" y="22" width="1" height="1" fill="black"/>
+                  <rect x="13" y="24" width="1" height="1" fill="black"/>
+                  <!-- Alignment pattern -->
+                  <rect x="20" y="20" width="5" height="5" fill="black"/>
+                  <rect x="21" y="21" width="3" height="3" fill="white"/>
+                  <rect x="22" y="22" width="1" height="1" fill="black"/>
+                </svg>
+              </div>
+              <div class="receipt-id">4521-161225-1432</div>
+            </div>
+
+            <div class="receipt-actions">
+              <button class="btn-print" onclick="window.print()">🖨️ Print</button>
+              <button class="btn-close" onclick="hideReceipt()">Luk</button>
+            </div>
+          </div>
+        </div>
+        <div class="payment-total">
+          <div class="payment-total-amount" id="totalAmount">2.275 kr</div>
+          <div class="payment-total-label">Total at betale</div>
+        </div>
+
+        <div class="payment-methods">
+          <button class="method-btn active" onclick="selectMethod('kort')">
+            <img class="method-btn-icon" src="icons/credit-card.svg" alt="">
+            <span class="method-btn-label">Kort</span>
+          </button>
+          <button class="method-btn" onclick="selectMethod('kontant')">
+            <img class="method-btn-icon" src="icons/coins.svg" alt="">
+            <span class="method-btn-label">Kontant</span>
+          </button>
+          <button class="method-btn" onclick="selectMethod('mobilepay')">
+            <img class="method-btn-icon" src="icons/mobilepay.svg" alt="">
+            <span class="method-btn-label">MobilePay</span>
+          </button>
+          <button class="method-btn" onclick="selectMethod('bank')">
+            <img class="method-btn-icon" src="icons/bank.svg" alt="">
+            <span class="method-btn-label">Bank</span>
+          </button>
+          <button class="method-btn" onclick="selectMethod('gavekort')">
+            <img class="method-btn-icon" src="icons/gift-card.svg" alt="">
+            <span class="method-btn-label">Gavekort</span>
+          </button>
+          <button class="method-btn" onclick="selectMethod('tilgode')">
+            <img class="method-btn-icon" src="icons/loan.svg" alt="">
+            <span class="method-btn-label">Tilgode</span>
+          </button>
+        </div>
+
+        <div class="payment-input-section">
+          <!-- Gavekort lookup -->
+          <div class="giftcard-lookup" id="giftcardLookup">
+            <div class="giftcard-lookup-label">Indtast gavekortnummer</div>
+            <div class="giftcard-lookup-row">
+              <input type="text" class="giftcard-input" id="giftcardInput" placeholder="XXXX-XXXX-XXXX" onkeydown="if(event.key==='Enter')lookupGiftcard()">
+              <button class="btn-lookup" onclick="lookupGiftcard()">Slå op</button>
+            </div>
+            <div class="giftcard-result" id="giftcardResult"></div>
+          </div>
+
+          <div class="payment-input-label" id="inputLabel">Beløb at betale med Kort</div>
+          <div class="payment-input-row">
+            <input type="text" class="payment-input" id="paymentInput" value="2.275" inputmode="decimal">
+            <button class="btn-pay-rest" onclick="payRest()">Betal rest<br><span id="restAmount">(2.275 kr)</span></button>
+          </div>
+          <button class="btn-add-payment" id="btnAddPayment" onclick="addPayment()">+ Tilføj betaling</button>
+        </div>
+
+        <div class="registered-payments">
+          <div class="registered-payments-label">Registrerede betalinger</div>
+          <div id="paymentsList">
+            <div class="no-payments">Ingen betalinger registreret</div>
+          </div>
+        </div>
+
+        <div class="payment-footer">
+          <div class="remaining-row">
+            <span class="remaining-label">Restbeløb</span>
+            <span class="remaining-value" id="remainingAmount">2.275 kr</span>
+          </div>
+          <button class="btn-complete" id="btnComplete" disabled>Afslut salg</button>
+          <div class="payment-actions">
+            <button class="btn-secondary" onclick="showReceipt()">Print kvittering</button>
+            <button class="btn-secondary">Send på mail</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <script>
+    const total = 2275;
+    const payments = [];
+    let currentMethod = 'kort';
+    let currentGiftcard = null; // { number, balance }
+
+    const methodLabels = {
+      'kort': 'Kort',
+      'kontant': 'Kontant',
+      'mobilepay': 'MobilePay',
+      'bank': 'Bank',
+      'gavekort': 'Gavekort',
+      'tilgode': 'Tilgode'
+    };
+
+    const methodIcons = {
+      'kort': 'icons/credit-card.svg',
+      'kontant': 'icons/coins.svg',
+      'mobilepay': 'icons/mobilepay.svg',
+      'bank': 'icons/bank.svg',
+      'gavekort': 'icons/gift-card.svg',
+      'tilgode': 'icons/loan.svg'
+    };
+
+    function openPanel() {
+      document.getElementById('overlay').classList.add('open');
+      document.getElementById('panel').classList.add('open');
+    }
+
+    function closePanel() {
+      document.getElementById('overlay').classList.remove('open');
+      document.getElementById('panel').classList.remove('open');
+    }
+
+    function toggleCartItem(item) {
+      // Close other expanded items
+      document.querySelectorAll('.cart-item.expanded').forEach(el => {
+        if (el !== item) el.classList.remove('expanded');
+      });
+      // Toggle this item
+      item.classList.toggle('expanded');
+    }
+
+    function toggleDiscountType(btn) {
+      const container = btn.closest('.discount-type');
+      const previousType = container.querySelector('.discount-type-btn.active')?.dataset.type;
+      const newType = btn.dataset.type;
+
+      // Don't do anything if clicking the same button
+      if (previousType === newType) return;
+
+      container.querySelectorAll('.discount-type-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+
+      // Convert discount value
+      const cartItem = btn.closest('.cart-item');
+      const discountInput = cartItem.querySelector('.edit-discount');
+      const priceInput = cartItem.querySelector('.edit-price');
+
+      if (discountInput && priceInput) {
+        const currentValue = parseFloat(discountInput.value.replace(/\./g, '').replace(',', '.')) || 0;
+        const basePrice = parseFloat(priceInput.value.replace(/\./g, '').replace(',', '.')) || 0;
+
+        if (basePrice > 0 && currentValue > 0) {
+          let newValue;
+          if (previousType === 'pct' && newType === 'kr') {
+            // Converting from % to kr
+            newValue = Math.round(basePrice * currentValue / 100);
+          } else if (previousType === 'kr' && newType === 'pct') {
+            // Converting from kr to %
+            newValue = Math.round((currentValue / basePrice) * 100 * 10) / 10; // 1 decimal
+          }
+          discountInput.value = newValue;
+        }
+
+        updateCartItemDisplay(discountInput);
+      }
+    }
+
+    function updateCartItemDisplay(inputEl) {
+      const cartItem = inputEl.closest('.cart-item');
+      if (!cartItem) return;
+
+      // Get elements
+      const priceInput = cartItem.querySelector('.edit-price');
+      const employeeSelect = cartItem.querySelector('.edit-employee');
+      const discountInput = cartItem.querySelector('.edit-discount');
+      const discountTypeBtn = cartItem.querySelector('.discount-type-btn.active');
+
+      const itemTotal = cartItem.querySelector('.item-total');
+      const itemOriginalPrice = cartItem.querySelector('.item-original-price');
+      const itemDiscount = cartItem.querySelector('.item-discount');
+      const itemEmployee = cartItem.querySelector('.item-employee');
+
+      // Get values
+      const basePrice = parseFloat(priceInput?.value.replace(/\./g, '').replace(',', '.')) || 0;
+      const discountValue = parseFloat(discountInput?.value.replace(/\./g, '').replace(',', '.')) || 0;
+      const discountType = discountTypeBtn?.dataset.type || 'kr';
+      const qty = parseInt(cartItem.querySelector('.qty-val')?.textContent) || 1;
+
+      // Calculate discount
+      let discountAmount = 0;
+      if (discountType === 'kr') {
+        discountAmount = discountValue;
+      } else {
+        discountAmount = (basePrice * discountValue / 100);
+      }
+
+      const finalPrice = Math.max(0, (basePrice - discountAmount) * qty);
+      const totalBeforeDiscount = basePrice * qty;
+
+      // Update display
+      itemTotal.textContent = formatNumber(finalPrice) + ' kr';
+
+      // Show original price and discount if there's a discount
+      if (discountAmount > 0) {
+        itemOriginalPrice.textContent = formatNumber(totalBeforeDiscount) + ' kr';
+        itemOriginalPrice.classList.add('visible');
+
+        if (discountType === 'pct') {
+          itemDiscount.textContent = `-${discountValue}% rabat`;
+        } else {
+          itemDiscount.textContent = `-${formatNumber(discountAmount * qty)} kr rabat`;
+        }
+        itemDiscount.classList.add('visible');
+      } else {
+        itemOriginalPrice.classList.remove('visible');
+        itemDiscount.classList.remove('visible');
+      }
+
+      // Update employee if exists
+      if (employeeSelect && itemEmployee) {
+        itemEmployee.textContent = employeeSelect.value;
+      }
+    }
+
+    // Setup discount type button handlers
+    document.addEventListener('DOMContentLoaded', () => {
+      document.querySelectorAll('.discount-type-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          toggleDiscountType(btn);
+        });
+      });
+    });
+
+    function selectMethod(method) {
+      currentMethod = method;
+
+      // Update active button
+      document.querySelectorAll('.method-btn').forEach(btn => btn.classList.remove('active'));
+      event.currentTarget.classList.add('active');
+
+      // Update label
+      document.getElementById('inputLabel').textContent = `Beløb at betale med ${methodLabels[method]}`;
+
+      // Show/hide giftcard lookup
+      const giftcardLookup = document.getElementById('giftcardLookup');
+      const btnAddPayment = document.getElementById('btnAddPayment');
+
+      if (method === 'gavekort') {
+        giftcardLookup.classList.add('visible');
+        // Disable add payment until giftcard is looked up
+        if (!currentGiftcard) {
+          btnAddPayment.disabled = true;
+        }
+      } else {
+        giftcardLookup.classList.remove('visible');
+        currentGiftcard = null;
+        resetGiftcardLookup();
+        btnAddPayment.disabled = false;
+      }
+
+      // Set input to remaining amount
+      payRest();
+    }
+
+    function lookupGiftcard() {
+      const input = document.getElementById('giftcardInput');
+      const result = document.getElementById('giftcardResult');
+      const cardNumber = input.value.trim();
+
+      if (!cardNumber) {
+        result.className = 'giftcard-result visible error';
+        result.innerHTML = 'Indtast venligst et gavekortnummer';
+        return;
+      }
+
+      // Simulate lookup - in real app this would be an API call
+      // For demo: simulate different balances based on card number
+      const simulatedBalance = simulateGiftcardBalance(cardNumber);
+
+      if (simulatedBalance === null) {
+        result.className = 'giftcard-result visible error';
+        result.innerHTML = 'Gavekort ikke fundet';
+        currentGiftcard = null;
+        document.getElementById('btnAddPayment').disabled = true;
+        return;
+      }
+
+      // Success - card found
+      currentGiftcard = {
+        number: cardNumber,
+        balance: simulatedBalance
+      };
+
+      result.className = 'giftcard-result visible success';
+      result.innerHTML = `Gavekort fundet! Saldo: <span class="giftcard-balance">${formatNumber(simulatedBalance)} kr</span>`;
+
+      // Enable payment button
+      document.getElementById('btnAddPayment').disabled = false;
+
+      // Set payment input to min of remaining and giftcard balance
+      const remaining = getRemaining();
+      const maxPayment = Math.min(remaining, simulatedBalance);
+      const paymentInput = document.getElementById('paymentInput');
+      paymentInput.value = formatNumber(maxPayment);
+
+      // Focus payment input and select the value
+      setTimeout(() => {
+        paymentInput.focus();
+        paymentInput.select();
+      }, 50);
+    }
+
+    function simulateGiftcardBalance(cardNumber) {
+      // Demo simulation: different cards have different balances
+      // Cards starting with "1" = 500 kr, "2" = 1000 kr, "3" = 1500 kr
+      // Any other = 750 kr, empty/invalid = not found
+
+      if (cardNumber.length < 4) return null;
+
+      const firstChar = cardNumber.charAt(0);
+      switch (firstChar) {
+        case '1': return 500;
+        case '2': return 1000;
+        case '3': return 1500;
+        case '0': return null; // Not found
+        default: return 750;
+      }
+    }
+
+    function resetGiftcardLookup() {
+      document.getElementById('giftcardInput').value = '';
+      const result = document.getElementById('giftcardResult');
+      result.className = 'giftcard-result';
+      result.innerHTML = '';
+    }
+
+    function payRest() {
+      const remaining = getRemaining();
+      let maxPayment = remaining;
+
+      // For giftcard, limit to available balance
+      if (currentMethod === 'gavekort' && currentGiftcard) {
+        maxPayment = Math.min(remaining, currentGiftcard.balance);
+      }
+
+      document.getElementById('paymentInput').value = formatNumber(maxPayment);
+    }
+
+    function addPayment() {
+      let amount = parseAmount(document.getElementById('paymentInput').value);
+      if (amount <= 0) return;
+
+      // For giftcard payments, validate and limit to balance
+      if (currentMethod === 'gavekort') {
+        if (!currentGiftcard) {
+          alert('Slå gavekortet op først');
+          return;
+        }
+        // Limit to available balance
+        if (amount > currentGiftcard.balance) {
+          amount = currentGiftcard.balance;
+        }
+      }
+
+      const payment = {
+        method: currentMethod,
+        amount: amount
+      };
+
+      // Add giftcard details if applicable
+      if (currentMethod === 'gavekort' && currentGiftcard) {
+        payment.giftcardNumber = currentGiftcard.number;
+        payment.giftcardOriginalBalance = currentGiftcard.balance;
+
+        // Reduce the giftcard balance (simulate using it)
+        currentGiftcard.balance -= amount;
+
+        // If balance is 0, reset the giftcard lookup for next use
+        if (currentGiftcard.balance <= 0) {
+          currentGiftcard = null;
+          resetGiftcardLookup();
+          document.getElementById('btnAddPayment').disabled = true;
+        } else {
+          // Update displayed balance
+          const result = document.getElementById('giftcardResult');
+          result.innerHTML = `Gavekort fundet! Resterende saldo: <span class="giftcard-balance">${formatNumber(currentGiftcard.balance)} kr</span>`;
+        }
+      }
+
+      payments.push(payment);
+
+      updatePaymentsList();
+      updateTotals();
+
+      // Reset input to new remaining
+      payRest();
+    }
+
+    function removePayment(index) {
+      payments.splice(index, 1);
+      updatePaymentsList();
+      updateTotals();
+      payRest();
+    }
+
+    function updatePaymentsList() {
+      const container = document.getElementById('paymentsList');
+
+      if (payments.length === 0) {
+        container.innerHTML = '<div class="no-payments">Ingen betalinger registreret</div>';
+        return;
+      }
+
+      container.innerHTML = payments.map((p, i) => {
+        const detail = p.giftcardNumber ? `Kort: ${p.giftcardNumber}` : '';
+        return `
+          <div class="payment-entry">
+            <img class="payment-entry-icon" src="${methodIcons[p.method]}" alt="">
+            <div class="payment-entry-info">
+              <div class="payment-entry-method">${methodLabels[p.method]}</div>
+              ${detail ? `<div class="payment-entry-detail">${detail}</div>` : ''}
+            </div>
+            <span class="payment-entry-amount">+${formatNumber(p.amount)} kr</span>
+            <button class="payment-entry-remove" onclick="removePayment(${i})">✕</button>
+          </div>
+        `;
+      }).join('');
+    }
+
+    function updateTotals() {
+      const remaining = getRemaining();
+
+      // Update remaining display
+      const remainingEl = document.getElementById('remainingAmount');
+      remainingEl.textContent = formatNumber(remaining) + ' kr';
+
+      // Update rest button
+      document.getElementById('restAmount').textContent = `(${formatNumber(remaining)} kr)`;
+
+      // Toggle styling and button state
+      const btnComplete = document.getElementById('btnComplete');
+      if (remaining <= 0) {
+        remainingEl.classList.add('zero');
+        btnComplete.disabled = false;
+      } else {
+        remainingEl.classList.remove('zero');
+        btnComplete.disabled = true;
+      }
+    }
+
+    function getRemaining() {
+      const paid = payments.reduce((sum, p) => sum + p.amount, 0);
+      return Math.max(0, total - paid);
+    }
+
+    function formatNumber(num) {
+      return num.toLocaleString('da-DK');
+    }
+
+    function parseAmount(str) {
+      if (!str) return 0;
+      const cleaned = str.replace(/\./g, '').replace(',', '.').replace(/[^0-9.]/g, '');
+      return parseFloat(cleaned) || 0;
+    }
+
+    document.addEventListener('keydown', e => {
+      if (e.key === 'Escape') closePanel();
+    });
+
+    // ==========================================
+    // BARCODE SCANNER
+    // ==========================================
+
+    // Mock product database for scanning
+    const scanProducts = {
+      '5012345678900': {
+        name: 'Olaplex No.4 Bond Maintenance Shampoo',
+        price: 299,
+        size: '250ml'
+      },
+      '8710447489109': {
+        name: 'Redken All Soft Shampoo',
+        price: 249,
+        size: '300ml'
+      },
+      '3474636610143': {
+        name: 'Kérastase Elixir Ultime',
+        price: 425,
+        size: '100ml'
+      },
+      '0850018802239': {
+        name: 'Olaplex No.7 Bonding Oil',
+        price: 319,
+        size: '30ml'
+      }
+    };
+
+    // Scanner elements
+    const scanButton = document.getElementById('scanButton');
+    const scannerInput = document.getElementById('scannerInput');
+
+    let isScanning = false;
+    let scannedCode = '';
+    let scanTimeout = null;
+
+    // Start scanning
+    scanButton.addEventListener('click', () => {
+      if (isScanning) return;
+
+      isScanning = true;
+      scannedCode = '';
+      scanButton.classList.add('scanning');
+      scanButton.innerHTML = `
+        <svg viewBox="0 0 24 24"><path d="M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h3v12H7V6zm4 0h1v12h-1V6zm3 0h2v12h-2V6zm3 0h3v12h-3V6zm4 0h1v12h-1V6z"/></svg>
+        SCANNING...
+      `;
+      scannerInput.value = '';
+      scannerInput.focus();
+    });
+
+    // Handle scanner input
+    scannerInput.addEventListener('input', (e) => {
+      scannedCode = e.target.value;
+
+      if (scanTimeout) clearTimeout(scanTimeout);
+
+      // After 200ms of no input, consider scan complete
+      scanTimeout = setTimeout(() => {
+        if (scannedCode.length >= 8) {
+          processScannedCode(scannedCode);
+        }
+      }, 200);
+    });
+
+    // Handle Enter key from scanner
+    scannerInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        e.preventDefault();
+        if (scannedCode.length >= 8) {
+          clearTimeout(scanTimeout);
+          processScannedCode(scannedCode);
+        }
+      }
+    });
+
+    // Handle blur - reset if no code scanned
+    scannerInput.addEventListener('blur', () => {
+      if (isScanning && scannedCode.length === 0) {
+        setTimeout(() => {
+          if (isScanning && scannedCode.length === 0) {
+            resetScanner();
+          }
+        }, 300);
+      }
+    });
+
+    // Reset scanner to ready state
+    function resetScanner() {
+      isScanning = false;
+      scannedCode = '';
+      scanButton.classList.remove('scanning');
+      scanButton.innerHTML = `
+        <svg viewBox="0 0 24 24"><path d="M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h3v12H7V6zm4 0h1v12h-1V6zm3 0h2v12h-2V6zm3 0h3v12h-3V6zm4 0h1v12h-1V6z"/></svg>
+        SCAN PRODUKT
+      `;
+    }
+
+    // Process scanned code
+    async function processScannedCode(code) {
+      // Show loading state
+      scanButton.innerHTML = `
+        <svg viewBox="0 0 24 24" style="animation: spin 1s linear infinite;"><path d="M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h3v12H7V6zm4 0h1v12h-1V6zm3 0h2v12h-2V6zm3 0h3v12h-3V6zm4 0h1v12h-1V6z"/></svg>
+        HENTER...
+      `;
+
+      // Simulate API delay
+      await new Promise(r => setTimeout(r, 600));
+
+      // Look up product
+      const foundProduct = scanProducts[code] || null;
+
+      if (foundProduct) {
+        // Add to cart
+        addScannedProductToCart(foundProduct, code);
+
+        // Show success briefly
+        scanButton.style.borderColor = '#43a047';
+        scanButton.style.color = '#43a047';
+        scanButton.innerHTML = `
+          <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+          TILFØJET!
+        `;
+
+        setTimeout(() => {
+          scanButton.style.borderColor = '';
+          scanButton.style.color = '';
+          resetScanner();
+        }, 800);
+      } else {
+        // Show not found
+        scanButton.style.borderColor = '#f59e0b';
+        scanButton.style.color = '#f59e0b';
+        scanButton.innerHTML = `
+          <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
+          IKKE FUNDET
+        `;
+
+        setTimeout(() => {
+          scanButton.style.borderColor = '';
+          scanButton.style.color = '';
+          resetScanner();
+        }, 1500);
+      }
+    }
+
+    // Add scanned product to cart visually
+    function addScannedProductToCart(product, ean) {
+      const cartSectionItems = document.querySelector('.cart-section:last-of-type .cart-section-items');
+
+      const newItem = document.createElement('div');
+      newItem.className = 'cart-item';
+      newItem.setAttribute('onclick', 'toggleCartItem(this)');
+      newItem.setAttribute('data-base-price', product.price);
+      newItem.innerHTML = `
+        <div class="cart-item-main">
+          <div class="item-qty" onclick="event.stopPropagation()">
+            <button class="qty-btn">−</button>
+            <span class="qty-val">1</span>
+            <button class="qty-btn">+</button>
+          </div>
+          <div class="item-info">
+            <div class="item-name">${product.name}</div>
+            <div class="item-meta">${product.size}</div>
+          </div>
+          <div class="item-price">
+            <div class="item-original-price">${product.price} kr</div>
+            <div class="item-total">${product.price} kr</div>
+            <div class="item-discount">-0 kr rabat</div>
+          </div>
+          <button class="item-remove" onclick="event.stopPropagation(); this.closest('.cart-item').remove();">✕</button>
+        </div>
+        <div class="cart-item-edit" onclick="event.stopPropagation()">
+          <div class="edit-row">
+            <div class="edit-field">
+              <div class="edit-field-label">Pris</div>
+              <input type="text" class="edit-field-input mono edit-price" value="${product.price}" oninput="updateCartItemDisplay(this)">
+            </div>
+            <div class="edit-field">
+              <div class="edit-field-label">Rabat</div>
+              <div class="discount-row">
+                <input type="text" class="edit-field-input mono edit-discount" value="0" style="width: 80px;" oninput="updateCartItemDisplay(this)">
+                <div class="discount-type">
+                  <button class="discount-type-btn active" data-type="kr">kr</button>
+                  <button class="discount-type-btn" data-type="pct">%</button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      `;
+
+      // Insert at end of items list
+      cartSectionItems.appendChild(newItem);
+
+      // Flash the new item
+      newItem.style.animation = 'flash 0.5s ease';
+
+      // Re-attach discount type handlers
+      newItem.querySelectorAll('.discount-type-btn').forEach(btn => {
+        btn.addEventListener('click', (e) => {
+          e.stopPropagation();
+          toggleDiscountType(btn);
+        });
+      });
+    }
+
+    // Add animations
+    const scannerStyle = document.createElement('style');
+    scannerStyle.textContent = `
+      @keyframes flash {
+        0% { background-color: rgba(0, 137, 123, 0.2); }
+        100% { background-color: transparent; }
+      }
+      @keyframes spin {
+        to { transform: rotate(360deg); }
+      }
+    `;
+    document.head.appendChild(scannerStyle);
+
+    // ==========================================
+    // RECEIPT
+    // ==========================================
+
+    function showReceipt() {
+      const receiptContainer = document.getElementById('receiptContainer');
+      receiptContainer.classList.add('visible');
+    }
+
+    function hideReceipt() {
+      const receiptContainer = document.getElementById('receiptContainer');
+      receiptContainer.classList.remove('visible');
+    }
+
+    // Close receipt on Escape key
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        const receiptContainer = document.getElementById('receiptContainer');
+        if (receiptContainer.classList.contains('visible')) {
+          hideReceipt();
+          e.stopPropagation();
+        }
+      }
+    });
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-customer-detail.html b/.workbench/POC/poc-customer-detail.html
new file mode 100644
index 0000000..5539554
--- /dev/null
+++ b/.workbench/POC/poc-customer-detail.html
@@ -0,0 +1,3396 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kundedetaljer - Sofie Nielsen</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      /* Colors */
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #ffb300;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+
+      /* Typography */
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-back-link {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-back-link:hover {
+      color: var(--color-teal);
+    }
+
+    swp-back-link img {
+      width: 16px;
+      height: 16px;
+      opacity: 0.6;
+    }
+
+    swp-topbar-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-topbar-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      border-radius: 6px;
+      border: none;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    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);
+    }
+
+    /* ==========================================
+       STICKY HEADER
+       ========================================== */
+    swp-customer-header {
+      display: flex;
+      gap: 24px;
+      padding: 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 49px;
+      z-index: 90;
+    }
+
+    swp-customer-avatar {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+
+    swp-customer-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-customer-name-row {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-customer-name {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-customer-name[contenteditable="true"] {
+      outline: none;
+      border-bottom: 1px dashed var(--color-border);
+      padding-bottom: 2px;
+    }
+
+    swp-customer-name[contenteditable="true"]:focus {
+      border-bottom-color: var(--color-teal);
+    }
+
+    /* Tags Editor */
+    swp-tags-editor {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    swp-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      border-radius: 4px;
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+    }
+
+    swp-tag.vip {
+      background: color-mix(in srgb, var(--color-amber) 20%, white);
+      color: #b8860b;
+    }
+
+    swp-tag.stamkunde {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      color: var(--color-teal);
+    }
+
+    swp-tag.ny {
+      background: color-mix(in srgb, var(--color-blue) 15%, white);
+      color: var(--color-blue);
+    }
+
+    swp-tag.allergi {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+      color: var(--color-red);
+    }
+
+    swp-tag.sensitiv {
+      background: color-mix(in srgb, var(--color-purple) 15%, white);
+      color: var(--color-purple);
+    }
+
+    swp-tag .remove {
+      cursor: pointer;
+      opacity: 0.6;
+      margin-left: 2px;
+    }
+
+    swp-tag .remove:hover {
+      opacity: 1;
+    }
+
+    swp-tag-add {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      border: 1px dashed var(--color-border);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-tag-add:hover {
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+    }
+
+    /* Booking Exclusion Toggle */
+    swp-booking-exclusion {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      font-size: 12px;
+      font-weight: 500;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      margin-left: auto;
+    }
+
+    swp-booking-exclusion[data-excluded="false"] {
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+      border: 1px solid var(--color-border);
+    }
+
+    swp-booking-exclusion[data-excluded="true"] {
+      background: color-mix(in srgb, var(--color-red) 12%, white);
+      color: var(--color-red);
+      border: 1px solid color-mix(in srgb, var(--color-red) 30%, white);
+    }
+
+    swp-booking-exclusion .icon {
+      font-size: 14px;
+    }
+
+    /* Customer Group Selector */
+    swp-customer-group {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      position: relative;
+    }
+
+    swp-customer-group-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-customer-group-select {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 5px 10px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text);
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-customer-group-select:hover {
+      border-color: var(--color-teal);
+    }
+
+    swp-customer-group-select .arrow {
+      font-size: 10px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-customer-group-dropdown {
+      position: absolute;
+      top: 100%;
+      left: 0;
+      margin-top: 4px;
+      min-width: 180px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+      z-index: 200;
+      display: none;
+    }
+
+    swp-customer-group-dropdown.open {
+      display: block;
+    }
+
+    swp-customer-group-option {
+      display: block;
+      padding: 10px 14px;
+      font-size: 13px;
+      color: var(--color-text);
+      cursor: pointer;
+      transition: background 100ms ease;
+    }
+
+    swp-customer-group-option:first-child {
+      border-radius: 7px 7px 0 0;
+    }
+
+    swp-customer-group-option:last-child {
+      border-radius: 0 0 7px 7px;
+    }
+
+    swp-customer-group-option:hover {
+      background: var(--color-background);
+    }
+
+    swp-customer-group-option.selected {
+      background: color-mix(in srgb, var(--color-teal) 10%, white);
+      color: var(--color-teal);
+      font-weight: 500;
+    }
+
+    /* Relation Items */
+    swp-relations-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-relation-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 12px;
+      background: var(--color-background-alt);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+    }
+
+    swp-relation-avatar {
+      width: 36px;
+      height: 36px;
+      border-radius: 50%;
+      background: var(--color-purple);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 13px;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+
+    swp-relation-info {
+      flex: 1;
+    }
+
+    swp-relation-name {
+      display: block;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-relation-type {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-relation-actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    swp-relation-link {
+      font-size: 12px;
+      color: var(--color-teal);
+      cursor: pointer;
+    }
+
+    swp-relation-link:hover {
+      text-decoration: underline;
+    }
+
+    swp-relation-remove {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      opacity: 0.6;
+    }
+
+    swp-relation-remove:hover {
+      opacity: 1;
+      color: var(--color-red);
+    }
+
+    swp-add-relation {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 12px;
+      border: 1px dashed var(--color-border);
+      border-radius: 6px;
+      color: var(--color-text-secondary);
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-add-relation:hover {
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+    }
+
+    /* Customer Group in Card */
+    swp-customer-group-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 16px;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    /* Contact Line */
+    swp-contact-line {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-contact-line a {
+      color: var(--color-teal);
+      text-decoration: none;
+    }
+
+    swp-contact-line a:hover {
+      text-decoration: underline;
+    }
+
+    swp-contact-line span.separator {
+      color: var(--color-border);
+    }
+
+    /* Fact Boxes Inline */
+    swp-fact-boxes-inline {
+      display: flex;
+      gap: 24px;
+      margin-top: 4px;
+    }
+
+    swp-fact-inline {
+      display: flex;
+      align-items: baseline;
+      gap: 6px;
+    }
+
+    swp-fact-inline-value {
+      font-size: 18px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-fact-inline-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       TAB BAR
+       ========================================== */
+    swp-tab-bar {
+      display: flex;
+      gap: 0;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      padding: 0 24px;
+      position: sticky;
+      top: 193px;
+      z-index: 80;
+    }
+
+    swp-tab {
+      padding: 14px 24px;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+      transition: all 150ms ease;
+    }
+
+    swp-tab:hover {
+      color: var(--color-text);
+      background: var(--color-background-alt);
+    }
+
+    swp-tab.active {
+      color: var(--color-teal);
+      border-bottom-color: var(--color-teal);
+    }
+
+    /* ==========================================
+       TAB CONTENT
+       ========================================== */
+    swp-tab-content {
+      display: none;
+      padding: 24px;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    swp-tab-content.active {
+      display: block;
+    }
+
+    /* ==========================================
+       COMMON COMPONENTS
+       ========================================== */
+
+    /* Section Label */
+    swp-section-label {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 12px;
+    }
+
+    /* Card */
+    swp-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      padding: 20px;
+      margin-bottom: 20px;
+    }
+
+    /* Grid Layouts */
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+    }
+
+    .grid-4 {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+    }
+
+    /* Edit Section */
+    swp-edit-section {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    swp-edit-row {
+      display: grid;
+      grid-template-columns: 120px 1fr;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-edit-label {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-edit-value {
+      font-size: 14px;
+      color: var(--color-text);
+      padding: 8px 12px;
+      border: 1px solid transparent;
+      border-radius: 6px;
+      cursor: text;
+      transition: all 150ms ease;
+    }
+
+    swp-edit-value:hover {
+      background: var(--color-background-alt);
+    }
+
+    swp-edit-value:focus {
+      outline: none;
+      border-color: var(--color-teal);
+      background: var(--color-surface);
+    }
+
+    swp-edit-value[contenteditable="true"] {
+      cursor: text;
+    }
+
+    /* Toggle Slider (Ja/Nej) */
+    swp-toggle-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-toggle-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-toggle-label {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-toggle-slider {
+      display: flex;
+      position: relative;
+      background: var(--color-background);
+      border-radius: 6px;
+      padding: 3px;
+      gap: 0;
+    }
+
+    swp-toggle-slider::before {
+      content: '';
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      width: calc(50% - 3px);
+      height: calc(100% - 6px);
+      background: color-mix(in srgb, var(--color-green) 18%, white);
+      border-radius: 4px;
+      transition: transform 200ms ease, background 200ms ease;
+      z-index: 0;
+    }
+
+    swp-toggle-slider[data-value="no"]::before {
+      transform: translateX(100%);
+      background: color-mix(in srgb, var(--color-red) 18%, white);
+    }
+
+    swp-toggle-option {
+      position: relative;
+      z-index: 1;
+      padding: 5px 16px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: color 200ms ease;
+      user-select: none;
+    }
+
+    swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
+      color: var(--color-green);
+      font-weight: 600;
+    }
+
+    swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
+      color: var(--color-red);
+      font-weight: 600;
+    }
+
+    /* Toggle with description */
+    swp-toggle-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-toggle-desc {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Profile Boxes */
+    swp-profile-boxes {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+    }
+
+    swp-profile-box {
+      padding: 12px 14px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-profile-box.warning {
+      background: color-mix(in srgb, var(--color-red) 8%, white);
+      border-color: color-mix(in srgb, var(--color-red) 30%, white);
+    }
+
+    swp-profile-box.full-width {
+      grid-column: span 2;
+    }
+
+    swp-profile-box-label {
+      display: block;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 4px;
+    }
+
+    swp-profile-box-value {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-profile-box.warning swp-profile-box-value {
+      color: var(--color-red);
+    }
+
+    /* Stat Cards */
+    swp-stat-card {
+      background: var(--color-surface);
+      border-radius: 8px;
+      padding: 16px 20px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      text-align: center;
+    }
+
+    swp-stat-value {
+      display: block;
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--color-text);
+      font-family: var(--font-mono);
+    }
+
+    swp-stat-card.highlight swp-stat-value {
+      color: var(--color-teal);
+    }
+
+    swp-stat-label {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+    }
+
+    /* Chart Container */
+    swp-chart-container {
+      display: block;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+      min-height: 200px;
+    }
+
+    swp-chart-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    swp-chart-legend {
+      display: flex;
+      gap: 16px;
+    }
+
+    swp-chart-legend-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-chart-legend-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    swp-chart-legend-dot.services {
+      background: var(--color-teal);
+    }
+
+    swp-chart-legend-dot.products {
+      background: var(--color-blue);
+    }
+
+    /* Table */
+    swp-table {
+      display: block;
+      width: 100%;
+    }
+
+    swp-table-header {
+      display: grid;
+      padding: 12px 16px;
+      background: var(--color-background);
+      border-radius: 6px 6px 0 0;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-table-row {
+      display: grid;
+      padding: 12px 16px;
+      border-bottom: 1px solid var(--color-border);
+      font-size: 13px;
+      align-items: center;
+    }
+
+    swp-table-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-table-row:hover {
+      background: var(--color-background-alt);
+    }
+
+    /* Journal Entry */
+    swp-journal-entry {
+      display: block;
+      padding: 16px;
+      background: var(--color-surface);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+      margin-bottom: 12px;
+    }
+
+    swp-journal-entry:last-child {
+      margin-bottom: 0;
+    }
+
+    swp-journal-meta {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 8px;
+    }
+
+    swp-journal-type {
+      display: inline-block;
+      padding: 3px 8px;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      border-radius: 4px;
+    }
+
+    swp-journal-type.farveformel {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      color: var(--color-teal);
+    }
+
+    swp-journal-type.analyse {
+      background: color-mix(in srgb, var(--color-purple) 15%, white);
+      color: var(--color-purple);
+    }
+
+    swp-journal-type.note {
+      background: color-mix(in srgb, var(--color-blue) 15%, white);
+      color: var(--color-blue);
+    }
+
+    swp-journal-type.advarsel {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+      color: var(--color-red);
+    }
+
+    swp-journal-date {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-content {
+      font-size: 14px;
+      color: var(--color-text);
+      line-height: 1.6;
+    }
+
+    swp-journal-author {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 8px;
+    }
+
+    /* Appointment Card */
+    swp-appointment-card {
+      display: block;
+      padding: 16px;
+      background: color-mix(in srgb, var(--color-teal) 5%, white);
+      border: 1px solid color-mix(in srgb, var(--color-teal) 20%, white);
+      border-radius: 8px;
+      margin-bottom: 12px;
+    }
+
+    swp-appointment-date {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-teal);
+      margin-bottom: 6px;
+    }
+
+    swp-appointment-details {
+      font-size: 13px;
+      color: var(--color-text);
+      margin-bottom: 12px;
+    }
+
+    swp-appointment-actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    swp-appointment-actions swp-btn {
+      padding: 6px 12px;
+      font-size: 12px;
+    }
+
+    /* Giftcard */
+    swp-giftcard {
+      display: block;
+      padding: 16px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      margin-bottom: 12px;
+    }
+
+    swp-giftcard-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 8px;
+    }
+
+    swp-giftcard-balance {
+      font-size: 13px;
+      color: var(--color-text);
+      margin-bottom: 4px;
+    }
+
+    swp-giftcard-balance strong {
+      font-family: var(--font-mono);
+      color: var(--color-teal);
+    }
+
+    swp-giftcard-expires {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Progress Bar */
+    swp-progress-bar {
+      display: block;
+      height: 8px;
+      background: var(--color-background);
+      border-radius: 4px;
+      overflow: hidden;
+      margin: 8px 0;
+    }
+
+    swp-progress-fill {
+      display: block;
+      height: 100%;
+      background: var(--color-teal);
+      border-radius: 4px;
+      transition: width 300ms ease;
+    }
+
+    /* See All Link */
+    swp-see-all {
+      display: inline-block;
+      margin-top: 12px;
+      font-size: 13px;
+      color: var(--color-teal);
+      cursor: pointer;
+    }
+
+    swp-see-all:hover {
+      text-decoration: underline;
+    }
+
+    /* Add Button */
+    swp-add-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 10%, white);
+      border: 1px solid color-mix(in srgb, var(--color-teal) 30%, white);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      margin-bottom: 16px;
+    }
+
+    swp-add-btn:hover {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+    }
+
+    /* Empty State */
+    swp-empty-state {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 40px;
+      text-align: center;
+      color: var(--color-text-secondary);
+    }
+
+    swp-empty-state p {
+      font-size: 14px;
+    }
+
+    /* ==========================================
+       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);
+    }
+
+    /* ==========================================
+       KEY-VALUE LIST
+       ========================================== */
+    swp-kv-list {
+      display: flex;
+      flex-direction: column;
+    }
+
+    swp-kv-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-kv-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-kv-label {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-kv-value {
+      font-size: 14px;
+      font-weight: 500;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    /* ==========================================
+       RATIO BAR
+       ========================================== */
+    swp-ratio-container {
+      display: block;
+      margin-top: 16px;
+    }
+
+    swp-ratio-labels {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 8px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-ratio-bar {
+      display: flex;
+      height: 10px;
+      border-radius: 5px;
+      overflow: hidden;
+      background: var(--color-background);
+    }
+
+    swp-ratio-segment {
+      height: 100%;
+      transition: width 300ms ease;
+    }
+
+    swp-ratio-segment.services {
+      background: var(--color-teal);
+    }
+
+    swp-ratio-segment.products {
+      background: var(--color-blue);
+    }
+
+    /* ==========================================
+       RISK INDICATOR
+       ========================================== */
+    swp-risk-indicator {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    swp-risk-dot {
+      width: 10px;
+      height: 10px;
+      border-radius: 50%;
+    }
+
+    swp-risk-dot.low {
+      background: var(--color-green);
+    }
+
+    swp-risk-dot.medium {
+      background: var(--color-amber);
+    }
+
+    swp-risk-dot.high {
+      background: var(--color-red);
+    }
+
+    swp-risk-text {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    swp-risk-text.low {
+      color: var(--color-green);
+    }
+
+    swp-risk-text.medium {
+      color: var(--color-amber);
+    }
+
+    swp-risk-text.high {
+      color: var(--color-red);
+    }
+
+    /* ==========================================
+       TOP LIST
+       ========================================== */
+    swp-top-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-top-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 13px;
+    }
+
+    swp-top-rank {
+      width: 24px;
+      height: 24px;
+      border-radius: 50%;
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+      font-weight: 600;
+    }
+
+    swp-top-item:first-child swp-top-rank {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      color: var(--color-teal);
+    }
+
+    swp-top-name {
+      flex: 1;
+      color: var(--color-text);
+    }
+
+    swp-top-count {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       ATTENDANCE BAR
+       ========================================== */
+    swp-attendance-bar {
+      display: flex;
+      height: 24px;
+      border-radius: 6px;
+      overflow: hidden;
+      margin-top: 12px;
+    }
+
+    swp-attendance-segment {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 11px;
+      font-weight: 600;
+      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);
+    }
+
+    /* ==========================================
+       JOURNAL - NEW LAYOUT
+       ========================================== */
+
+    /* Journal Mini Tabs */
+    swp-journal-mini-tabs {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 20px;
+    }
+
+    swp-journal-mini-tab {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-journal-mini-tab:hover {
+      border-color: var(--color-text-secondary);
+    }
+
+    swp-journal-mini-tab.active {
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 5%, white);
+    }
+
+    swp-journal-mini-tab .tab-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    swp-journal-mini-tab .tab-dot.blue { background: var(--color-blue); }
+    swp-journal-mini-tab .tab-dot.amber { background: var(--color-amber); }
+    swp-journal-mini-tab .tab-dot.purple { background: var(--color-purple); }
+
+    swp-journal-mini-tab .tab-count {
+      font-size: 11px;
+      padding: 2px 6px;
+      background: var(--color-background);
+      border-radius: 10px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Journal Columns */
+    swp-journal-columns {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 20px;
+    }
+
+    swp-journal-column {
+      display: flex;
+      flex-direction: column;
+    }
+
+    swp-journal-column-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 12px;
+      padding-bottom: 12px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-journal-column-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-journal-column-title .col-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    swp-journal-column-title .col-dot.amber { background: var(--color-amber); }
+    swp-journal-column-title .col-dot.purple { background: var(--color-purple); }
+
+    swp-journal-column-add {
+      font-size: 12px;
+      color: var(--color-teal);
+      cursor: pointer;
+    }
+
+    swp-journal-column-add:hover {
+      text-decoration: underline;
+    }
+
+    /* Journal Entry - New Style */
+    swp-journal-entry-new {
+      display: block;
+      padding: 14px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      margin-bottom: 10px;
+      transition: border-color 150ms ease;
+    }
+
+    swp-journal-entry-new:hover {
+      border-color: var(--color-text-secondary);
+    }
+
+    swp-journal-entry-new:last-child {
+      margin-bottom: 0;
+    }
+
+    swp-journal-entry-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 10px;
+    }
+
+    swp-journal-entry-type-new {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      border-radius: 4px;
+    }
+
+    swp-journal-entry-type-new.farveformel {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b8860b;
+    }
+
+    swp-journal-entry-type-new.analyse {
+      background: color-mix(in srgb, var(--color-purple) 15%, white);
+      color: var(--color-purple);
+    }
+
+    swp-journal-entry-type-new.note {
+      background: color-mix(in srgb, var(--color-blue) 15%, white);
+      color: var(--color-blue);
+    }
+
+    swp-journal-entry-type-new.advarsel {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+      color: var(--color-red);
+    }
+
+    swp-journal-entry-tags-new {
+      display: flex;
+      gap: 6px;
+    }
+
+    swp-journal-tag-new {
+      display: inline-block;
+      padding: 3px 8px;
+      font-size: 10px;
+      font-weight: 500;
+      border-radius: 4px;
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-tag-new.sensitiv {
+      background: color-mix(in srgb, var(--color-purple) 12%, white);
+      color: var(--color-purple);
+    }
+
+    swp-journal-tag-new.allergi {
+      background: color-mix(in srgb, var(--color-red) 12%, white);
+      color: var(--color-red);
+    }
+
+    swp-journal-entry-delete-new {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 150ms ease;
+    }
+
+    swp-journal-entry-new:hover swp-journal-entry-delete-new {
+      opacity: 0.6;
+    }
+
+    swp-journal-entry-delete-new:hover {
+      opacity: 1;
+      color: var(--color-red);
+    }
+
+    swp-journal-entry-body {
+      font-size: 13px;
+      line-height: 1.6;
+      color: var(--color-text);
+    }
+
+    swp-journal-entry-body .mono {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      background: var(--color-background);
+      padding: 1px 4px;
+      border-radius: 3px;
+    }
+
+    swp-journal-entry-body .label {
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-entry-footer-new {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 12px;
+      padding-top: 10px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-journal-entry-date-new {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-entry-icons-new {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-journal-entry-icon {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-entry-icon img {
+      width: 14px;
+      height: 14px;
+      opacity: 0.5;
+    }
+
+    swp-journal-entry-icon.warning {
+      color: var(--color-amber);
+    }
+
+    swp-journal-entry-icon.warning img {
+      opacity: 1;
+    }
+
+    /* Noter Section (full width above columns) */
+    swp-journal-noter-section {
+      display: block;
+      margin-bottom: 24px;
+    }
+
+    swp-journal-noter-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+    }
+
+    /* Kundeprofil i Journal */
+    swp-journal-profile {
+      display: block;
+      margin-top: 24px;
+      padding-top: 20px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-journal-profile-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      margin-bottom: 12px;
+      cursor: pointer;
+    }
+
+    swp-journal-profile-header .arrow {
+      transition: transform 150ms ease;
+    }
+
+    swp-journal-profile-header.collapsed .arrow {
+      transform: rotate(-90deg);
+    }
+
+    swp-journal-profile swp-profile-boxes {
+      transition: all 200ms ease;
+    }
+
+    swp-journal-profile swp-profile-boxes.collapsed {
+      display: none;
+    }
+
+    /* ==========================================
+       ACTIVITY / AUDIT LOG
+       ========================================== */
+
+    /* Activity Filters */
+    swp-activity-filters {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    swp-activity-filter {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 20px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-activity-filter:hover {
+      border-color: var(--color-text-secondary);
+    }
+
+    swp-activity-filter.active {
+      background: var(--color-teal);
+      color: white;
+      border-color: var(--color-teal);
+    }
+
+    swp-activity-filter .filter-icon {
+      font-size: 11px;
+    }
+
+    swp-activity-filter .filter-icon img {
+      width: 12px;
+      height: 12px;
+      filter: invert(45%) sepia(0%) saturate(0%) brightness(90%);
+    }
+
+    swp-activity-filter.active .filter-icon img {
+      filter: brightness(0) invert(1);
+    }
+
+    /* Activity Timeline */
+    swp-activity-timeline {
+      display: block;
+      position: relative;
+    }
+
+    /* Date Group */
+    swp-activity-date-group {
+      display: block;
+      margin-bottom: 24px;
+    }
+
+    swp-activity-date-header {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 12px;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    swp-activity-date-header::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: var(--color-border);
+    }
+
+    /* Activity Item */
+    swp-activity-item {
+      display: flex;
+      gap: 12px;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-activity-item:last-child {
+      border-bottom: none;
+    }
+
+    swp-activity-icon {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    swp-activity-icon img {
+      width: 16px;
+      height: 16px;
+    }
+
+    swp-activity-icon.system {
+      background: var(--color-background);
+    }
+
+    swp-activity-icon.system img {
+      filter: invert(45%) sepia(0%) saturate(0%) brightness(90%);
+    }
+
+    swp-activity-icon.customer {
+      background: color-mix(in srgb, var(--color-blue) 15%, white);
+    }
+
+    swp-activity-icon.customer img {
+      filter: invert(32%) sepia(98%) saturate(1234%) hue-rotate(196deg) brightness(93%) contrast(92%);
+    }
+
+    swp-activity-icon.employee {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+    }
+
+    swp-activity-icon.employee img {
+      filter: invert(32%) sepia(98%) saturate(1234%) hue-rotate(152deg) brightness(93%) contrast(92%);
+    }
+
+    swp-activity-icon.booking {
+      background: color-mix(in srgb, var(--color-purple) 15%, white);
+    }
+
+    swp-activity-icon.booking img {
+      filter: invert(45%) sepia(70%) saturate(2000%) hue-rotate(235deg) brightness(90%) contrast(95%);
+    }
+
+    swp-activity-icon.communication {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+    }
+
+    swp-activity-icon.communication img {
+      filter: invert(55%) sepia(80%) saturate(500%) hue-rotate(10deg) brightness(95%) contrast(95%);
+    }
+
+    swp-activity-icon.payment {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+    }
+
+    swp-activity-icon.payment img {
+      filter: invert(45%) sepia(70%) saturate(500%) hue-rotate(90deg) brightness(95%) contrast(90%);
+    }
+
+    swp-activity-icon.warning {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+    }
+
+    swp-activity-icon.warning img {
+      filter: invert(30%) sepia(90%) saturate(2000%) hue-rotate(340deg) brightness(90%) contrast(95%);
+    }
+
+    swp-activity-content {
+      flex: 1;
+      min-width: 0;
+    }
+
+    swp-activity-title {
+      display: block;
+      font-size: 13px;
+      color: var(--color-text);
+      margin-bottom: 2px;
+    }
+
+    swp-activity-title strong {
+      font-weight: 600;
+    }
+
+    swp-activity-title .highlight {
+      color: var(--color-teal);
+      font-weight: 500;
+    }
+
+    swp-activity-title .old-value {
+      color: var(--color-text-secondary);
+      text-decoration: line-through;
+    }
+
+    swp-activity-title .new-value {
+      color: var(--color-teal);
+    }
+
+    swp-activity-meta {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-activity-time {
+      font-family: var(--font-mono);
+    }
+
+    swp-activity-actor {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    swp-activity-actor::before {
+      content: '·';
+    }
+
+    swp-activity-badge {
+      display: inline-block;
+      padding: 2px 6px;
+      font-size: 9px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      border-radius: 3px;
+      margin-left: 6px;
+    }
+
+    swp-activity-badge.auto {
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+    }
+
+    swp-activity-badge.online {
+      background: color-mix(in srgb, var(--color-blue) 15%, white);
+      color: var(--color-blue);
+    }
+
+    swp-activity-badge.manual {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      color: var(--color-teal);
+    }
+
+    /* Activity Details (expandable) */
+    swp-activity-details {
+      display: block;
+      margin-top: 8px;
+      padding: 10px 12px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-activity-details code {
+      font-family: var(--font-mono);
+      font-size: 11px;
+      background: var(--color-background);
+      padding: 1px 4px;
+      border-radius: 3px;
+    }
+
+    /* Load More */
+    swp-activity-load-more {
+      display: block;
+      text-align: center;
+      padding: 16px;
+      font-size: 13px;
+      color: var(--color-teal);
+      cursor: pointer;
+      border-top: 1px solid var(--color-border);
+      margin-top: 12px;
+    }
+
+    swp-activity-load-more:hover {
+      text-decoration: underline;
+    }
+
+    /* ==========================================
+       DRAG & DROP CARDS
+       ========================================== */
+
+    /* Draggable Card */
+    swp-card[draggable="true"] {
+      position: relative;
+      transition: transform 200ms ease, box-shadow 200ms ease, opacity 200ms ease;
+    }
+
+    swp-card[draggable="true"]:hover {
+      box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+    }
+
+    swp-card[draggable="true"].dragging {
+      opacity: 0.5;
+      transform: scale(0.98);
+      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
+    }
+
+    /* Drag Handle */
+    swp-drag-handle {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 4px;
+      color: var(--color-text-secondary);
+      opacity: 0;
+      transition: opacity 150ms ease, background 150ms ease;
+      cursor: move;
+    }
+
+    swp-drag-handle svg {
+      width: 14px;
+      height: 14px;
+      fill: currentColor;
+    }
+
+    swp-card[draggable="true"]:hover swp-drag-handle {
+      opacity: 0.5;
+    }
+
+    swp-drag-handle:hover {
+      opacity: 1 !important;
+      background: var(--color-background);
+    }
+
+    /* Column Drop Zones */
+    swp-card-column {
+      display: flex;
+      flex-direction: column;
+      min-height: 200px;
+      position: relative;
+    }
+
+    /* Drop zone indicator element - dynamically inserted */
+    swp-drop-indicator {
+      display: block;
+      height: 60px;
+      background: color-mix(in srgb, var(--color-teal) 8%, transparent);
+      border: 2px dashed var(--color-teal);
+      border-radius: 8px;
+      margin: 8px 0;
+      transition: opacity 150ms ease;
+    }
+
+    /* Column empty state drop zone */
+    swp-card-column.drag-over-empty {
+      background: color-mix(in srgb, var(--color-teal) 5%, white);
+      border: 2px dashed var(--color-teal);
+      border-radius: 8px;
+      min-height: 100px;
+    }
+
+    /* Cards have no gap by default */
+    swp-card-column swp-card {
+      margin-bottom: 16px;
+    }
+
+    swp-card-column swp-card:last-child {
+      margin-bottom: 0;
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-back-link onclick="history.back()">
+        <img src="icons/angle-small-left.svg" alt="">
+        Tilbage til kunder
+      </swp-back-link>
+    </swp-topbar-left>
+    <swp-topbar-actions>
+      <swp-btn class="secondary">Slet kunde</swp-btn>
+      <swp-btn class="primary" id="saveBtn">Gem</swp-btn>
+    </swp-topbar-actions>
+  </swp-topbar>
+
+  <!-- Sticky Header -->
+  <swp-customer-header>
+    <swp-customer-avatar>SN</swp-customer-avatar>
+    <swp-customer-info>
+      <swp-customer-name-row>
+        <swp-customer-name contenteditable="true">Sofie Nielsen</swp-customer-name>
+        <swp-tags-editor>
+          <swp-tag class="vip">VIP <span class="remove">×</span></swp-tag>
+          <swp-tag-add>+ Tilføj tag</swp-tag-add>
+        </swp-tags-editor>
+        <swp-booking-exclusion data-excluded="false" id="bookingExclusion">
+          <span class="icon">✓</span>
+          <span class="text">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>besøg</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 frisør</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 omsætning</swp-fact-inline-label>
+        </swp-fact-inline>
+      </swp-fact-boxes-inline>
+    </swp-customer-info>
+  </swp-customer-header>
+
+  <!-- Tab Bar -->
+  <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>
+
+  <!-- Tab Contents -->
+
+  <!-- OVERSIGT TAB -->
+  <swp-tab-content class="active" data-tab="overview">
+    <div class="grid-2">
+      <!-- Left Column -->
+      <swp-card-column data-column="left">
+        <swp-card draggable="true" data-card-id="kontakt">
+          <swp-drag-handle><svg viewBox="0 0 24 24"><path d="M13 6v5h5V8l4 4-4 4v-3h-5v5h3l-4 4-4-4h3v-5H6v3l-4-4 4-4v3h5V6H8l4-4 4 4h-3z"/></svg></swp-drag-handle>
+          <swp-section-label>Kontaktoplysninger</swp-section-label>
+          <swp-edit-section>
+            <swp-edit-row>
+              <swp-edit-label>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>Email</swp-edit-label>
+              <swp-edit-value contenteditable="true">sofie@email.dk</swp-edit-value>
+            </swp-edit-row>
+            <swp-edit-row>
+              <swp-edit-label>Adresse</swp-edit-label>
+              <swp-edit-value contenteditable="true">Hovedgaden 12</swp-edit-value>
+            </swp-edit-row>
+            <swp-edit-row>
+              <swp-edit-label>Postnr + By</swp-edit-label>
+              <swp-edit-value contenteditable="true">2100 København Ø</swp-edit-value>
+            </swp-edit-row>
+          </swp-edit-section>
+        </swp-card>
+
+        <swp-card draggable="true" data-card-id="profil">
+          <swp-drag-handle><svg viewBox="0 0 24 24"><path d="M13 6v5h5V8l4 4-4 4v-3h-5v5h3l-4 4-4-4h3v-5H6v3l-4-4 4-4v3h5V6H8l4-4 4 4h-3z"/></svg></swp-drag-handle>
+          <swp-section-label>Profil</swp-section-label>
+          <swp-profile-boxes>
+            <swp-profile-box>
+              <swp-profile-box-label>Hårtype</swp-profile-box-label>
+              <swp-profile-box-value>Medium · Bølget</swp-profile-box-value>
+            </swp-profile-box>
+            <swp-profile-box>
+              <swp-profile-box-label>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>Hovedbund</swp-profile-box-label>
+              <swp-profile-box-value>Normal</swp-profile-box-value>
+            </swp-profile-box>
+            <swp-profile-box>
+              <swp-profile-box-label>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 data-column="right">
+        <swp-card draggable="true" data-card-id="marketing">
+          <swp-drag-handle><svg viewBox="0 0 24 24"><path d="M13 6v5h5V8l4 4-4 4v-3h-5v5h3l-4 4-4-4h3v-5H6v3l-4-4 4-4v3h5V6H8l4-4 4 4h-3z"/></svg></swp-drag-handle>
+          <swp-section-label>Marketing</swp-section-label>
+          <swp-toggle-row>
+            <swp-toggle-label>Email marketing</swp-toggle-label>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+          </swp-toggle-row>
+          <swp-toggle-row>
+            <swp-toggle-label>SMS marketing</swp-toggle-label>
+            <swp-toggle-slider data-value="no">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+          </swp-toggle-row>
+        </swp-card>
+
+        <swp-card draggable="true" data-card-id="betalingsindstillinger">
+          <swp-drag-handle><svg viewBox="0 0 24 24"><path d="M13 6v5h5V8l4 4-4 4v-3h-5v5h3l-4 4-4-4h3v-5H6v3l-4-4 4-4v3h5V6H8l4-4 4 4h-3z"/></svg></swp-drag-handle>
+          <swp-section-label>Betalingsindstillinger</swp-section-label>
+          <swp-toggle-row>
+            <swp-toggle-info>
+              <swp-toggle-label>Kræv forudbetaling</swp-toggle-label>
+              <swp-toggle-desc>Kunden skal betale fuldt beløb ved booking</swp-toggle-desc>
+            </swp-toggle-info>
+            <swp-toggle-slider data-value="no">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+          </swp-toggle-row>
+          <swp-toggle-row>
+            <swp-toggle-info>
+              <swp-toggle-label>Tillad delvis betaling</swp-toggle-label>
+              <swp-toggle-desc>Kunden kan vælge at betale et depositum</swp-toggle-desc>
+            </swp-toggle-info>
+            <swp-toggle-slider data-value="no">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+          </swp-toggle-row>
+        </swp-card>
+
+        <swp-card draggable="true" data-card-id="praeferencer">
+          <swp-drag-handle><svg viewBox="0 0 24 24"><path d="M13 6v5h5V8l4 4-4 4v-3h-5v5h3l-4 4-4-4h3v-5H6v3l-4-4 4-4v3h5V6H8l4-4 4 4h-3z"/></svg></swp-drag-handle>
+          <swp-section-label>Præferencer</swp-section-label>
+          <swp-profile-boxes>
+            <swp-profile-box>
+              <swp-profile-box-label>Foretrukken frisør</swp-profile-box-label>
+              <swp-profile-box-value>Emma L.</swp-profile-box-value>
+            </swp-profile-box>
+            <swp-profile-box>
+              <swp-profile-box-label>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>Specielle ønsker</swp-profile-box-label>
+              <swp-profile-box-value>Foretrækker kold tone, ikke for mørk</swp-profile-box-value>
+            </swp-profile-box>
+          </swp-profile-boxes>
+        </swp-card>
+
+        <swp-card draggable="true" data-card-id="advarsler">
+          <swp-drag-handle><svg viewBox="0 0 24 24"><path d="M13 6v5h5V8l4 4-4 4v-3h-5v5h3l-4 4-4-4h3v-5H6v3l-4-4 4-4v3h5V6H8l4-4 4 4h-3z"/></svg></swp-drag-handle>
+          <swp-section-label>Advarsler</swp-section-label>
+          <swp-profile-boxes>
+            <swp-profile-box class="warning full-width">
+              <swp-profile-box-label>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>
+
+        <swp-card draggable="true" data-card-id="relationer">
+          <swp-drag-handle><svg viewBox="0 0 24 24"><path d="M13 6v5h5V8l4 4-4 4v-3h-5v5h3l-4 4-4-4h3v-5H6v3l-4-4 4-4v3h5V6H8l4-4 4 4h-3z"/></svg></swp-drag-handle>
+          <swp-section-label>Kundegruppe & Relationer</swp-section-label>
+
+          <swp-customer-group-row>
+            <swp-customer-group-label>Kundegruppe:</swp-customer-group-label>
+            <swp-customer-group>
+              <swp-customer-group-select id="customerGroupSelect">
+                <span class="value">Standard</span>
+                <span class="arrow">▼</span>
+              </swp-customer-group-select>
+              <swp-customer-group-dropdown id="customerGroupDropdown">
+                <swp-customer-group-option class="selected" data-value="standard">Standard</swp-customer-group-option>
+                <swp-customer-group-option data-value="premium">Premium</swp-customer-group-option>
+                <swp-customer-group-option data-value="erhverv">Erhverv</swp-customer-group-option>
+                <swp-customer-group-option data-value="medarbejder">Medarbejder</swp-customer-group-option>
+                <swp-customer-group-option data-value="familie">Familie & Venner</swp-customer-group-option>
+              </swp-customer-group-dropdown>
+            </swp-customer-group>
+          </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>×</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>×</swp-relation-remove>
+              </swp-relation-actions>
+            </swp-relation-item>
+
+            <swp-add-relation>
+              <span>+</span> Tilføj relation
+            </swp-add-relation>
+          </swp-relations-list>
+        </swp-card>
+      </swp-card-column>
+    </div>
+  </swp-tab-content>
+
+  <!-- ØKONOMI TAB -->
+  <swp-tab-content data-tab="economy">
+    <div class="grid-4" style="margin-bottom: 24px;">
+      <swp-stat-card class="highlight">
+        <swp-stat-value>12.450 kr</swp-stat-value>
+        <swp-stat-label>I år (2025)</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>9.800 kr</swp-stat-value>
+        <swp-stat-label>Sidste år</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>889 kr</swp-stat-value>
+        <swp-stat-label>Gns. pr. besøg</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>1.038 kr</swp-stat-value>
+        <swp-stat-label>Gns. pr. måned</swp-stat-label>
+      </swp-stat-card>
+    </div>
+
+    <swp-card>
+      <swp-chart-header>
+        <swp-section-label style="margin-bottom: 0;">Omsætning over tid</swp-section-label>
+        <swp-chart-legend>
+          <swp-chart-legend-item>
+            <swp-chart-legend-dot class="services"></swp-chart-legend-dot>
+            <span>Services</span>
+          </swp-chart-legend-item>
+          <swp-chart-legend-item>
+            <swp-chart-legend-dot class="products"></swp-chart-legend-dot>
+            <span>Produkter</span>
+          </swp-chart-legend-item>
+        </swp-chart-legend>
+      </swp-chart-header>
+      <swp-chart-container id="revenueChart"></swp-chart-container>
+    </swp-card>
+
+    <swp-card>
+      <swp-section-label>Købshistorik</swp-section-label>
+      <swp-table>
+        <swp-table-header style="grid-template-columns: 100px 80px 1fr 100px;">
+          <span>Dato</span>
+          <span>Type</span>
+          <span>Beskrivelse</span>
+          <span style="text-align: right;">Beløb</span>
+        </swp-table-header>
+        <swp-table-row style="grid-template-columns: 100px 80px 1fr 100px;">
+          <span>9. dec 2025</span>
+          <span><swp-journal-type class="farveformel" style="font-size: 9px;">Service</swp-journal-type></span>
+          <span>Klip + Farve</span>
+          <span style="text-align: right; font-family: var(--font-mono);">1.450 kr</span>
+        </swp-table-row>
+        <swp-table-row style="grid-template-columns: 100px 80px 1fr 100px;">
+          <span>9. dec 2025</span>
+          <span><swp-journal-type class="analyse" style="font-size: 9px;">Produkt</swp-journal-type></span>
+          <span>Olaplex No. 3</span>
+          <span style="text-align: right; font-family: var(--font-mono);">349 kr</span>
+        </swp-table-row>
+        <swp-table-row style="grid-template-columns: 100px 80px 1fr 100px;">
+          <span>12. nov 2025</span>
+          <span><swp-journal-type class="farveformel" style="font-size: 9px;">Service</swp-journal-type></span>
+          <span>Farve</span>
+          <span style="text-align: right; font-family: var(--font-mono);">1.200 kr</span>
+        </swp-table-row>
+        <swp-table-row style="grid-template-columns: 100px 80px 1fr 100px;">
+          <span>15. okt 2025</span>
+          <span><swp-journal-type class="farveformel" style="font-size: 9px;">Service</swp-journal-type></span>
+          <span>Klip</span>
+          <span style="text-align: right; font-family: var(--font-mono);">550 kr</span>
+        </swp-table-row>
+      </swp-table>
+      <swp-see-all>Se alle transaktioner →</swp-see-all>
+    </swp-card>
+  </swp-tab-content>
+
+  <!-- STATISTIK TAB -->
+  <swp-tab-content data-tab="statistics">
+    <!-- Fremmøde & Pålidelighed -->
+    <swp-card>
+      <swp-section-label>Fremmøde & Pålidelighed</swp-section-label>
+      <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>
+
+    <div class="grid-2">
+      <!-- Booking-adfærd -->
+      <swp-card>
+        <swp-section-label>Booking-adfærd</swp-section-label>
+        <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-section-label>Loyalitet</swp-section-label>
+        <div class="grid-2" style="gap: 12px;">
+          <swp-stat-card>
+            <swp-stat-value style="font-size: 20px;">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 style="font-size: 20px;">13</swp-stat-value>
+            <swp-stat-label>Dage siden sidst</swp-stat-label>
+          </swp-stat-card>
+          <swp-stat-card>
+            <swp-stat-value style="font-size: 20px;">
+              <swp-risk-indicator>
+                <swp-risk-dot class="low"></swp-risk-dot>
+                <swp-risk-text class="low">Lav</swp-risk-text>
+              </swp-risk-indicator>
+            </swp-stat-value>
+            <swp-stat-label>Churn-risiko</swp-stat-label>
+          </swp-stat-card>
+          <swp-stat-card>
+            <swp-stat-value style="font-size: 20px;">32 dage</swp-stat-value>
+            <swp-stat-label>Gns. interval</swp-stat-label>
+          </swp-stat-card>
+        </div>
+      </swp-card>
+    </div>
+
+    <!-- Service-mønstre -->
+    <swp-card>
+      <swp-section-label>Service-mønstre</swp-section-label>
+      <div class="grid-2">
+        <div>
+          <swp-section-label style="font-size: 10px; margin-bottom: 10px;">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 style="font-size: 10px; margin-bottom: 10px;">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-ratio-container>
+        <swp-ratio-labels>
+          <span>Services (85%)</span>
+          <span>Produkter (15%)</span>
+        </swp-ratio-labels>
+        <swp-ratio-bar>
+          <swp-ratio-segment class="services" style="width: 85%;"></swp-ratio-segment>
+          <swp-ratio-segment class="products" style="width: 15%;"></swp-ratio-segment>
+        </swp-ratio-bar>
+      </swp-ratio-container>
+    </swp-card>
+  </swp-tab-content>
+
+  <!-- JOURNAL TAB -->
+  <swp-tab-content data-tab="journal">
+
+    <!-- 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>
+
+    <!-- Noter Section - full width -->
+    <swp-journal-noter-section>
+      <swp-card>
+        <swp-journal-column-header>
+          <swp-journal-column-title>
+            <span class="col-dot" style="background: var(--color-blue);"></span>
+            Noter
+          </swp-journal-column-title>
+          <swp-journal-column-add>+ Tilføj note</swp-journal-column-add>
+        </swp-journal-column-header>
+
+        <swp-journal-noter-grid>
+          <swp-journal-entry-new>
+            <swp-journal-entry-header>
+              <swp-journal-entry-type-new class="note">Note</swp-journal-entry-type-new>
+              <swp-journal-entry-delete-new>🗑</swp-journal-entry-delete-new>
+            </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-new>
+              <swp-journal-entry-date-new>9. dec 2025 · Af: Emma</swp-journal-entry-date-new>
+              <swp-journal-entry-icons-new>
+                <swp-journal-entry-icon>
+                  <img src="icons/eye.svg" alt="">
+                  <span>Alle</span>
+                </swp-journal-entry-icon>
+              </swp-journal-entry-icons-new>
+            </swp-journal-entry-footer-new>
+          </swp-journal-entry-new>
+
+          <swp-journal-entry-new>
+            <swp-journal-entry-header>
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <swp-journal-entry-type-new class="advarsel">Advarsel</swp-journal-entry-type-new>
+                <swp-journal-entry-tags-new>
+                  <swp-journal-tag-new class="allergi">Allergi</swp-journal-tag-new>
+                </swp-journal-entry-tags-new>
+              </div>
+              <swp-journal-entry-delete-new>🗑</swp-journal-entry-delete-new>
+            </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-new>
+              <swp-journal-entry-date-new>15. mar 2024 · Af: Nina</swp-journal-entry-date-new>
+              <swp-journal-entry-icons-new>
+                <swp-journal-entry-icon>
+                  <img src="icons/eye.svg" alt="">
+                  <span>Alle</span>
+                </swp-journal-entry-icon>
+                <swp-journal-entry-icon class="warning">
+                  <img src="icons/warning.svg" alt="">
+                  <span>Advarsel</span>
+                </swp-journal-entry-icon>
+              </swp-journal-entry-icons-new>
+            </swp-journal-entry-footer-new>
+          </swp-journal-entry-new>
+        </swp-journal-noter-grid>
+      </swp-card>
+    </swp-journal-noter-section>
+
+    <!-- Two Column Layout: Farveformler + Analyser -->
+    <swp-journal-columns>
+      <!-- Farveformler Column -->
+      <swp-journal-column>
+        <swp-card style="height: 100%;">
+          <swp-journal-column-header>
+            <swp-journal-column-title>
+              <span class="col-dot amber"></span>
+              Farveformler
+            </swp-journal-column-title>
+            <swp-journal-column-add>+ Tilføj</swp-journal-column-add>
+          </swp-journal-column-header>
+
+          <swp-journal-entry-new>
+            <swp-journal-entry-header>
+              <swp-journal-entry-type-new class="farveformel">Farveformel</swp-journal-entry-type-new>
+              <swp-journal-entry-delete-new>🗑</swp-journal-entry-delete-new>
+            </swp-journal-entry-header>
+            <swp-journal-entry-body>
+              <span class="label">Mål/tone:</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-new>
+              <swp-journal-entry-date-new>12. nov 2025 · Af: Emma</swp-journal-entry-date-new>
+              <swp-journal-entry-icons-new>
+                <swp-journal-entry-icon>
+                  <img src="icons/eye.svg" alt="">
+                  <span>Alle</span>
+                </swp-journal-entry-icon>
+              </swp-journal-entry-icons-new>
+            </swp-journal-entry-footer-new>
+          </swp-journal-entry-new>
+
+          <swp-journal-entry-new>
+            <swp-journal-entry-header>
+              <swp-journal-entry-type-new class="farveformel">Farveformel</swp-journal-entry-type-new>
+              <swp-journal-entry-delete-new>🗑</swp-journal-entry-delete-new>
+            </swp-journal-entry-header>
+            <swp-journal-entry-body>
+              <span class="label">Mål/tone:</span> Varm<br>
+              <span class="label">Oxidant:</span> <span class="mono">6%</span><br>
+              <span class="label">Formel:</span> <span class="mono">8/0 + 7/1 (2:1)</span><br>
+              <span class="label">Virketid:</span> <span class="mono">30 min</span><br>
+              <span class="label">Placering:</span> Rødder<br><br>
+              Resultat: Lidt for varm, juster næste gang
+            </swp-journal-entry-body>
+            <swp-journal-entry-footer-new>
+              <swp-journal-entry-date-new>15. sep 2025 · Af: Emma</swp-journal-entry-date-new>
+              <swp-journal-entry-icons-new>
+                <swp-journal-entry-icon>
+                  <img src="icons/eye.svg" alt="">
+                  <span>Alle</span>
+                </swp-journal-entry-icon>
+              </swp-journal-entry-icons-new>
+            </swp-journal-entry-footer-new>
+          </swp-journal-entry-new>
+        </swp-card>
+      </swp-journal-column>
+
+      <!-- Analyser Column -->
+      <swp-journal-column>
+        <swp-card style="height: 100%;">
+          <swp-journal-column-header>
+            <swp-journal-column-title>
+              <span class="col-dot purple"></span>
+              Hår & Hovedbund
+            </swp-journal-column-title>
+            <swp-journal-column-add>+ Tilføj</swp-journal-column-add>
+          </swp-journal-column-header>
+
+          <swp-journal-entry-new>
+            <swp-journal-entry-header>
+              <div style="display: flex; align-items: center; gap: 8px;">
+                <swp-journal-entry-type-new class="analyse">Analyse</swp-journal-entry-type-new>
+                <swp-journal-entry-tags-new>
+                  <swp-journal-tag-new class="sensitiv">Sensitiv</swp-journal-tag-new>
+                </swp-journal-entry-tags-new>
+              </div>
+              <swp-journal-entry-delete-new>🗑</swp-journal-entry-delete-new>
+            </swp-journal-entry-header>
+            <swp-journal-entry-body>
+              <span class="label">Hovedbund:</span> Normal<br>
+              <span class="label">Hår:</span> <span class="mono">Medium · Bølget</span><br>
+              <span class="label">Porøsitet:</span> <span class="mono">Medium</span><br>
+              <span class="label">Elasticitet:</span> <span class="mono">Normal</span><br>
+              <span class="label">Tilstand:</span> Let tørt i spidserne<br><br>
+              Anbefaling: Fugtgivende behandling hver 6. uge
+            </swp-journal-entry-body>
+            <swp-journal-entry-footer-new>
+              <swp-journal-entry-date-new>10. aug 2025 · Af: Nina</swp-journal-entry-date-new>
+              <swp-journal-entry-icons-new>
+                <swp-journal-entry-icon>
+                  <img src="icons/eye.svg" alt="">
+                  <span>Alle</span>
+                </swp-journal-entry-icon>
+              </swp-journal-entry-icons-new>
+            </swp-journal-entry-footer-new>
+          </swp-journal-entry-new>
+        </swp-card>
+      </swp-journal-column>
+    </swp-journal-columns>
+
+    <!-- Kundeprofil Section -->
+    <swp-journal-profile>
+      <swp-journal-profile-header onclick="this.classList.toggle('collapsed'); this.nextElementSibling.classList.toggle('collapsed');">
+        <span class="arrow">▼</span>
+        Vis "Kundeprofil" (hurtige facts)
+      </swp-journal-profile-header>
+      <swp-profile-boxes id="journalProfileBoxes">
+        <swp-profile-box>
+          <swp-profile-box-label>Hårtype</swp-profile-box-label>
+          <swp-profile-box-value>Medium · Bølget</swp-profile-box-value>
+        </swp-profile-box>
+        <swp-profile-box>
+          <swp-profile-box-label>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>Præference</swp-profile-box-label>
+          <swp-profile-box-value>Kold tone, ikke for mørk</swp-profile-box-value>
+        </swp-profile-box>
+        <swp-profile-box class="warning">
+          <swp-profile-box-label>Advarsler</swp-profile-box-label>
+          <swp-profile-box-value>Parfumeallergi · Sensitiv hovedbund</swp-profile-box-value>
+        </swp-profile-box>
+      </swp-profile-boxes>
+    </swp-journal-profile>
+  </swp-tab-content>
+
+  <!-- AFTALER TAB -->
+  <swp-tab-content data-tab="appointments">
+    <swp-card>
+      <swp-section-label>Kommende aftaler</swp-section-label>
+
+      <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>
+      <swp-section-label>Tidligere aftaler</swp-section-label>
+      <swp-table>
+        <swp-table-header style="grid-template-columns: 120px 1fr 100px 80px 100px;">
+          <span>Dato</span>
+          <span>Service</span>
+          <span>Frisør</span>
+          <span>Varighed</span>
+          <span style="text-align: right;">Pris</span>
+        </swp-table-header>
+        <swp-table-row style="grid-template-columns: 120px 1fr 100px 80px 100px;">
+          <span>9. dec 2025</span>
+          <span>Klip + Farve</span>
+          <span>Emma L.</span>
+          <span>2 timer</span>
+          <span style="text-align: right; font-family: var(--font-mono);">1.450 kr</span>
+        </swp-table-row>
+        <swp-table-row style="grid-template-columns: 120px 1fr 100px 80px 100px;">
+          <span>12. nov 2025</span>
+          <span>Farve</span>
+          <span>Emma L.</span>
+          <span>1t 30m</span>
+          <span style="text-align: right; font-family: var(--font-mono);">1.200 kr</span>
+        </swp-table-row>
+        <swp-table-row style="grid-template-columns: 120px 1fr 100px 80px 100px;">
+          <span>15. okt 2025</span>
+          <span>Klip</span>
+          <span>Emma L.</span>
+          <span>45 min</span>
+          <span style="text-align: right; font-family: var(--font-mono);">550 kr</span>
+        </swp-table-row>
+        <swp-table-row style="grid-template-columns: 120px 1fr 100px 80px 100px;">
+          <span>20. sep 2025</span>
+          <span>Klip + Behandling</span>
+          <span>Nina K.</span>
+          <span>1t 15m</span>
+          <span style="text-align: right; font-family: var(--font-mono);">750 kr</span>
+        </swp-table-row>
+        <swp-table-row style="grid-template-columns: 120px 1fr 100px 80px 100px;">
+          <span>15. aug 2025</span>
+          <span>Farve + Klip</span>
+          <span>Emma L.</span>
+          <span>2t 15m</span>
+          <span style="text-align: right; font-family: var(--font-mono);">1.600 kr</span>
+        </swp-table-row>
+      </swp-table>
+      <swp-see-all>Se alle aftaler →</swp-see-all>
+    </swp-card>
+  </swp-tab-content>
+
+  <!-- GAVEKORT TAB -->
+  <swp-tab-content data-tab="giftcards">
+    <swp-card>
+      <swp-section-label>Aktive gavekort</swp-section-label>
+
+      <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>
+
+    <swp-card>
+      <swp-section-label>Klippekort</swp-section-label>
+
+      <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>
+      <swp-section-label>Udløbne / Brugte</swp-section-label>
+      <swp-empty-state>
+        <p>Ingen udløbne eller brugte kort</p>
+      </swp-empty-state>
+    </swp-card>
+  </swp-tab-content>
+
+  <!-- AKTIVITET TAB -->
+  <swp-tab-content data-tab="activity">
+    <!-- Filters -->
+    <swp-activity-filters>
+      <swp-activity-filter class="active">Alle</swp-activity-filter>
+      <swp-activity-filter><span class="filter-icon"><img src="icons/booking.svg" alt=""></span> Bookinger</swp-activity-filter>
+      <swp-activity-filter><span class="filter-icon"><img src="icons/envelope.svg" alt=""></span> Kommunikation</swp-activity-filter>
+      <swp-activity-filter><span class="filter-icon"><img src="icons/journal-alt.svg" alt=""></span> Ændringer</swp-activity-filter>
+      <swp-activity-filter><span class="filter-icon"><img src="icons/credit-card.svg" alt=""></span> Betalinger</swp-activity-filter>
+      <swp-activity-filter><span class="filter-icon"><img src="icons/unlock.svg" alt=""></span> 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"><img src="icons/comment-sms.svg" alt=""></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"><img src="icons/unlock.svg" alt=""></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>11:23</swp-activity-time>
+                <swp-activity-actor>Sofie Nielsen</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+        </swp-activity-date-group>
+
+        <!-- 9. december -->
+        <swp-activity-date-group>
+          <swp-activity-date-header>9. december 2025</swp-activity-date-header>
+
+          <swp-activity-item>
+            <swp-activity-icon class="payment"><img src="icons/credit-card.svg" alt=""></swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Betaling modtaget</strong> — <span class="highlight">1.799 kr</span> (Dankort)
+              </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-item>
+            <swp-activity-icon class="booking"><img src="icons/booking.svg" alt=""></swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Aftale gennemført</strong> — Klip + Farve hos Emma L.
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>12:30</swp-activity-time>
+                <swp-activity-actor>Emma L.</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+
+          <swp-activity-item>
+            <swp-activity-icon class="booking"><img src="icons/check-in-calendar.svg" alt=""></swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Check-in</strong> — Kunden er ankommet
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>10:02</swp-activity-time>
+                <swp-activity-actor>Reception</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+
+          <swp-activity-item>
+            <swp-activity-icon class="employee"><img src="icons/journal-alt.svg" alt=""></swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Journal opdateret</strong> — Ny farveformel tilføjet
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>12:35</swp-activity-time>
+                <swp-activity-actor>Emma L.</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+        </swp-activity-date-group>
+
+        <!-- 5. december -->
+        <swp-activity-date-group>
+          <swp-activity-date-header>5. december 2025</swp-activity-date-header>
+
+          <swp-activity-item>
+            <swp-activity-icon class="booking"><img src="icons/created.svg" alt=""></swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Ny booking</strong> oprettet — 9. dec kl. 10:00, Klip + Farve
+                <swp-activity-badge class="online">Online</swp-activity-badge>
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>19:42</swp-activity-time>
+                <swp-activity-actor>Sofie Nielsen</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+
+          <swp-activity-item>
+            <swp-activity-icon class="customer"><img src="icons/unlock.svg" alt=""></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>19:40</swp-activity-time>
+                <swp-activity-actor>Sofie Nielsen</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+        </swp-activity-date-group>
+
+        <!-- 28. november -->
+        <swp-activity-date-group>
+          <swp-activity-date-header>28. november 2025</swp-activity-date-header>
+
+          <swp-activity-item>
+            <swp-activity-icon class="employee"><img src="icons/journal-alt.svg" alt=""></swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Telefon ændret</strong> — <span class="old-value">+45 12 34 56 78</span> → <span class="new-value">+45 23 45 67 89</span>
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>14:15</swp-activity-time>
+                <swp-activity-actor>Emma L.</swp-activity-actor>
+              </swp-activity-meta>
+              <swp-activity-details>
+                Kunden oplyste nyt nummer under besøg.
+              </swp-activity-details>
+            </swp-activity-content>
+          </swp-activity-item>
+
+          <swp-activity-item>
+            <swp-activity-icon class="employee"><img src="icons/journal-alt.svg" alt=""></swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Tag tilføjet</strong> — <span class="highlight">VIP</span>
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>14:10</swp-activity-time>
+                <swp-activity-actor>Emma L.</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+        </swp-activity-date-group>
+
+        <!-- 12. november -->
+        <swp-activity-date-group>
+          <swp-activity-date-header>12. november 2025</swp-activity-date-header>
+
+          <swp-activity-item>
+            <swp-activity-icon class="warning"><img src="icons/warning.svg" alt=""></swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Booking aflyst</strong> — Af kunden med 2 dages varsel
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>09:15</swp-activity-time>
+                <swp-activity-actor>Sofie Nielsen</swp-activity-actor>
+              </swp-activity-meta>
+              <swp-activity-details>
+                Årsag: "Kan desværre ikke den dag alligevel"
+              </swp-activity-details>
+            </swp-activity-content>
+          </swp-activity-item>
+
+          <swp-activity-item>
+            <swp-activity-icon class="communication"><img src="icons/envelope.svg" alt=""></swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Email sendt</strong> — Booking bekræftelse
+                <swp-activity-badge class="auto">Auto</swp-activity-badge>
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>08:00</swp-activity-time>
+                <swp-activity-actor>System</swp-activity-actor>
+              </swp-activity-meta>
+            </swp-activity-content>
+          </swp-activity-item>
+        </swp-activity-date-group>
+
+        <!-- Marts 2024 -->
+        <swp-activity-date-group>
+          <swp-activity-date-header>15. marts 2024</swp-activity-date-header>
+
+          <swp-activity-item>
+            <swp-activity-icon class="system"><img src="icons/created.svg" alt=""></swp-activity-icon>
+            <swp-activity-content>
+              <swp-activity-title>
+                <strong>Kunde oprettet</strong>
+              </swp-activity-title>
+              <swp-activity-meta>
+                <swp-activity-time>10:30</swp-activity-time>
+                <swp-activity-actor>Nina K.</swp-activity-actor>
+              </swp-activity-meta>
+              <swp-activity-details>
+                Oprettet manuelt ved første besøg. Kilde: Walk-in
+              </swp-activity-details>
+            </swp-activity-content>
+          </swp-activity-item>
+        </swp-activity-date-group>
+
+      </swp-activity-timeline>
+
+      <swp-activity-load-more>Indlæs ældre aktivitet...</swp-activity-load-more>
+    </swp-card>
+  </swp-tab-content>
+
+  <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');
+          }
+        });
+      });
+    });
+
+    // ==========================================
+    // TOGGLE SLIDERS (Ja/Nej)
+    // ==========================================
+    document.querySelectorAll('swp-toggle-slider').forEach(slider => {
+      const options = slider.querySelectorAll('swp-toggle-option');
+      options.forEach((option, index) => {
+        option.addEventListener('click', () => {
+          slider.dataset.value = index === 0 ? 'yes' : 'no';
+        });
+      });
+    });
+
+    // ==========================================
+    // TAG REMOVAL
+    // ==========================================
+    document.querySelectorAll('swp-tag .remove').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        btn.closest('swp-tag').remove();
+      });
+    });
+
+    // ==========================================
+    // BOOKING EXCLUSION TOGGLE
+    // ==========================================
+    const bookingExclusion = document.getElementById('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('.text');
+
+      if (isExcluded) {
+        icon.textContent = '✓';
+        text.textContent = 'Booking tilladt';
+      } else {
+        icon.textContent = '✕';
+        text.textContent = 'Udelukket fra booking';
+      }
+    });
+
+    // ==========================================
+    // CUSTOMER GROUP DROPDOWN
+    // ==========================================
+    const customerGroupSelect = document.getElementById('customerGroupSelect');
+    const customerGroupDropdown = document.getElementById('customerGroupDropdown');
+
+    customerGroupSelect.addEventListener('click', (e) => {
+      e.stopPropagation();
+      customerGroupDropdown.classList.toggle('open');
+    });
+
+    document.querySelectorAll('swp-customer-group-option').forEach(option => {
+      option.addEventListener('click', () => {
+        // Update selection
+        document.querySelectorAll('swp-customer-group-option').forEach(o => o.classList.remove('selected'));
+        option.classList.add('selected');
+
+        // Update display
+        customerGroupSelect.querySelector('.value').textContent = option.textContent;
+
+        // Close dropdown
+        customerGroupDropdown.classList.remove('open');
+      });
+    });
+
+    // Close dropdown when clicking outside
+    document.addEventListener('click', () => {
+      customerGroupDropdown.classList.remove('open');
+    });
+
+    // ==========================================
+    // RELATION REMOVE
+    // ==========================================
+    document.querySelectorAll('swp-relation-remove').forEach(btn => {
+      btn.addEventListener('click', () => {
+        btn.closest('swp-relation-item').remove();
+      });
+    });
+
+    // ==========================================
+    // SAVE BUTTON
+    // ==========================================
+    const saveBtn = document.getElementById('saveBtn');
+    saveBtn.addEventListener('click', () => {
+      // Simulate save
+      saveBtn.textContent = 'Gemt!';
+      saveBtn.style.background = 'var(--color-green)';
+      setTimeout(() => {
+        saveBtn.textContent = 'Gem';
+        saveBtn.style.background = '';
+      }, 2000);
+    });
+
+    // ==========================================
+    // CHART (lazy load)
+    // ==========================================
+    let chartLoaded = false;
+    function loadChart() {
+      if (chartLoaded) return;
+
+      import('https://unpkg.com/@sevenweirdpeople/swp-charting@latest/dist/index.js')
+        .then(module => {
+          const { createChart } = module;
+          createChart(document.getElementById('revenueChart'), {
+            width: 1100,
+            height: 200,
+            xAxis: {
+              categories: ['Jan', 'Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
+            },
+            series: [
+              {
+                name: 'Services',
+                color: '#00897b',
+                data: [
+                  { x: 'Mar', y: 1200 },
+                  { x: 'Apr', y: 800 },
+                  { x: 'Jun', y: 1500 },
+                  { x: 'Aug', y: 1600 },
+                  { x: 'Sep', y: 750 },
+                  { x: 'Okt', y: 550 },
+                  { x: 'Nov', y: 1200 },
+                  { x: 'Dec', y: 1450 }
+                ]
+              },
+              {
+                name: 'Produkter',
+                color: '#1976d2',
+                data: [
+                  { x: 'Apr', y: 250 },
+                  { x: 'Jun', y: 180 },
+                  { x: 'Sep', y: 320 },
+                  { x: 'Dec', y: 349 }
+                ]
+              }
+            ],
+            legend: false
+          });
+          chartLoaded = true;
+        });
+    }
+
+    // Load chart when Økonomi tab is shown
+    document.querySelector('swp-tab[data-tab="economy"]').addEventListener('click', loadChart);
+
+    // ==========================================
+    // JOURNAL MINI TABS
+    // ==========================================
+    document.querySelectorAll('swp-journal-mini-tab').forEach(tab => {
+      tab.addEventListener('click', () => {
+        document.querySelectorAll('swp-journal-mini-tab').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+        // In a real app, this would filter the entries
+      });
+    });
+
+    // ==========================================
+    // JOURNAL ENTRY DELETE
+    // ==========================================
+    document.querySelectorAll('swp-journal-entry-delete-new').forEach(btn => {
+      btn.addEventListener('click', () => {
+        btn.closest('swp-journal-entry-new').remove();
+      });
+    });
+
+    // ==========================================
+    // ACTIVITY FILTERS
+    // ==========================================
+    document.querySelectorAll('swp-activity-filter').forEach(filter => {
+      filter.addEventListener('click', () => {
+        document.querySelectorAll('swp-activity-filter').forEach(f => f.classList.remove('active'));
+        filter.classList.add('active');
+        // In a real app, this would filter the activity items
+      });
+    });
+
+    // ==========================================
+    // CARD DRAG & DROP
+    // ==========================================
+    let draggedCard = null;
+    let dropIndicator = null;
+
+    // Create drop indicator element
+    function createDropIndicator() {
+      if (!dropIndicator) {
+        dropIndicator = document.createElement('swp-drop-indicator');
+      }
+      return dropIndicator;
+    }
+
+    function removeDropIndicator() {
+      if (dropIndicator && dropIndicator.parentNode) {
+        dropIndicator.remove();
+      }
+    }
+
+    function clearDropIndicators() {
+      removeDropIndicator();
+      document.querySelectorAll('.drag-over-empty').forEach(el => {
+        el.classList.remove('drag-over-empty');
+      });
+    }
+
+    // Find the closest card and position based on mouse Y
+    function findDropPosition(column, mouseY) {
+      const cards = Array.from(column.querySelectorAll('swp-card[draggable="true"]:not(.dragging)'));
+      if (cards.length === 0) return { card: null, position: null };
+
+      for (let i = 0; i < cards.length; i++) {
+        const card = cards[i];
+        const rect = card.getBoundingClientRect();
+        const cardMiddle = rect.top + rect.height / 2;
+
+        // If mouse is above the middle of this card, insert before it
+        if (mouseY < cardMiddle) {
+          return { card, position: 'before' };
+        }
+      }
+
+      // Mouse is below all cards, insert after the last one
+      return { card: cards[cards.length - 1], position: 'after' };
+    }
+
+    // Setup draggable cards
+    document.querySelectorAll('swp-card[draggable="true"]').forEach(card => {
+      card.addEventListener('dragstart', (e) => {
+        draggedCard = card;
+        card.classList.add('dragging');
+        e.dataTransfer.effectAllowed = 'move';
+        e.dataTransfer.setData('text/plain', card.dataset.cardId);
+
+        setTimeout(() => {
+          card.style.opacity = '0.4';
+        }, 0);
+      });
+
+      card.addEventListener('dragend', () => {
+        card.classList.remove('dragging');
+        card.style.opacity = '';
+        draggedCard = null;
+        clearDropIndicators();
+      });
+    });
+
+    // Handle all dragover at column level for seamless detection
+    document.querySelectorAll('swp-card-column').forEach(column => {
+      column.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        if (!draggedCard) return;
+
+        e.dataTransfer.dropEffect = 'move';
+
+        const cards = column.querySelectorAll('swp-card[draggable="true"]:not(.dragging)');
+
+        if (cards.length === 0) {
+          // Empty column
+          column.classList.add('drag-over-empty');
+          removeDropIndicator();
+          return;
+        }
+
+        column.classList.remove('drag-over-empty');
+
+        // Find where to show the indicator
+        const { card, position } = findDropPosition(column, e.clientY);
+
+        if (card) {
+          const indicator = createDropIndicator();
+
+          if (position === 'before') {
+            if (indicator.nextElementSibling !== card) {
+              card.before(indicator);
+            }
+          } else {
+            if (indicator.previousElementSibling !== card) {
+              card.after(indicator);
+            }
+          }
+        }
+      });
+
+      column.addEventListener('dragleave', (e) => {
+        if (!column.contains(e.relatedTarget)) {
+          column.classList.remove('drag-over-empty');
+          removeDropIndicator();
+        }
+      });
+
+      column.addEventListener('drop', (e) => {
+        e.preventDefault();
+        if (!draggedCard) return;
+
+        // Insert dragged card where the indicator is, or at end of empty column
+        if (dropIndicator && dropIndicator.parentNode) {
+          dropIndicator.before(draggedCard);
+        } else if (column.classList.contains('drag-over-empty')) {
+          column.appendChild(draggedCard);
+        }
+
+        clearDropIndicators();
+      });
+    });
+
+    // Also handle drop on the indicator itself
+    document.addEventListener('dragover', (e) => {
+      if (e.target.tagName === 'SWP-DROP-INDICATOR') {
+        e.preventDefault();
+        e.dataTransfer.dropEffect = 'move';
+      }
+    });
+
+    document.addEventListener('drop', (e) => {
+      if (e.target.tagName === 'SWP-DROP-INDICATOR' && draggedCard) {
+        e.preventDefault();
+        dropIndicator.before(draggedCard);
+        clearDropIndicators();
+      }
+    });
+  </script>
+
+</body>
+</html>
diff --git a/.workbench/POC/poc-customer-list.html b/.workbench/POC/poc-customer-list.html
new file mode 100644
index 0000000..b46c180
--- /dev/null
+++ b/.workbench/POC/poc-customer-list.html
@@ -0,0 +1,1642 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kunder - POC</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      /* Colors */
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #ffb300;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+
+      /* Typography */
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    /* ==========================================
+       HEADER
+       ========================================== */
+    swp-page-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 24px;
+    }
+
+    swp-page-title {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-page-actions {
+      display: flex;
+      gap: 12px;
+    }
+
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      border-radius: 6px;
+      border: none;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    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);
+    }
+
+    /* ==========================================
+       STATS BAR
+       ========================================== */
+    swp-stats-bar {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+      margin-bottom: 24px;
+    }
+
+    swp-stat-card {
+      background: var(--color-surface);
+      border-radius: 8px;
+      padding: 16px 20px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    swp-stat-value {
+      display: block;
+      font-size: 28px;
+      font-weight: 600;
+      color: var(--color-text);
+      font-family: var(--font-mono);
+    }
+
+    swp-stat-label {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+    }
+
+    swp-stat-card.highlight swp-stat-value {
+      color: var(--color-teal);
+    }
+
+    /* ==========================================
+       SEARCH BAR
+       ========================================== */
+    swp-search-bar {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-bottom: 16px;
+      background: var(--color-surface);
+      padding: 12px 16px;
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    swp-search-input {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      flex: 1;
+      position: relative;
+    }
+
+    swp-search-input img {
+      width: 18px;
+      height: 18px;
+      opacity: 0.5;
+      filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%);
+    }
+
+    swp-search-input input {
+      flex: 1;
+      padding: 8px 0;
+      font-size: 14px;
+      border: none;
+      outline: none;
+      background: transparent;
+    }
+
+    swp-search-input input::placeholder {
+      color: var(--color-text-secondary);
+    }
+
+    swp-search-filters {
+      display: flex;
+      gap: 8px;
+    }
+
+    .filter-btn {
+      padding: 6px 14px;
+      font-size: 12px;
+      font-weight: 500;
+      border: 1px solid var(--color-border);
+      border-radius: 20px;
+      background: var(--color-surface);
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .filter-btn:hover {
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+    }
+
+    .filter-btn.active {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+      color: white;
+    }
+
+    swp-search-count {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      white-space: nowrap;
+    }
+
+    /* ==========================================
+       TABLE
+       ========================================== */
+    swp-customer-table {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      overflow: hidden;
+    }
+
+    /* Grid: Navn(220) | Tlf(130) | Email(200) | Besøg(70) | Sidste(100) | Frisør(100) | Oprettet(90) | Tags(1fr) */
+    swp-table-header,
+    swp-customer-row {
+      display: grid;
+      grid-template-columns: 220px 130px 200px 70px 100px 100px 90px 1fr;
+      align-items: center;
+    }
+
+    swp-table-header {
+      background: var(--color-background);
+      border-bottom: 1px solid var(--color-border);
+      padding: 14px 20px;
+    }
+
+    swp-th {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      user-select: none;
+    }
+
+    swp-th.sortable {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: color 150ms ease;
+    }
+
+    swp-th.sortable:hover {
+      color: var(--color-teal);
+    }
+
+    swp-th.sorted {
+      color: var(--color-teal);
+    }
+
+    .sort-icon {
+      font-size: 10px;
+      opacity: 0.4;
+      transition: opacity 150ms ease, transform 150ms ease;
+    }
+
+    swp-th.sorted .sort-icon {
+      opacity: 1;
+    }
+
+    swp-th.sorted.desc .sort-icon {
+      transform: rotate(180deg);
+    }
+
+    swp-table-body {
+      display: block;
+    }
+
+    swp-customer-row {
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+      transition: background 150ms ease;
+    }
+
+    swp-customer-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-customer-row:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-customer-row.hidden {
+      display: none;
+    }
+
+    /* Table cells */
+    swp-td {
+      display: block;
+      font-size: 13px;
+      color: var(--color-text);
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    swp-td.secondary {
+      color: var(--color-text-secondary);
+    }
+
+    swp-td.center {
+      text-align: center;
+    }
+
+    swp-td.mono {
+      font-family: var(--font-mono);
+      font-size: 12px;
+    }
+
+    /* Name cell with avatar */
+    .name-cell {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-customer-avatar {
+      width: 34px;
+      height: 34px;
+      border-radius: 50%;
+      background: var(--color-teal);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+
+    swp-customer-name {
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    /* Tags */
+    swp-customer-tags {
+      display: flex;
+      gap: 6px;
+      flex-wrap: wrap;
+    }
+
+    swp-tag {
+      display: inline-block;
+      padding: 3px 8px;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      border-radius: 4px;
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+    }
+
+    swp-tag.vip {
+      background: color-mix(in srgb, var(--color-amber) 20%, white);
+      color: #b8860b;
+    }
+
+    swp-tag.stamkunde {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      color: var(--color-teal);
+    }
+
+    swp-tag.ny {
+      background: color-mix(in srgb, var(--color-blue) 15%, white);
+      color: var(--color-blue);
+    }
+
+    swp-tag.allergi {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+      color: var(--color-red);
+    }
+
+    swp-tag.sensitiv {
+      background: color-mix(in srgb, var(--color-purple) 15%, white);
+      color: var(--color-purple);
+    }
+
+    /* ==========================================
+       EMPTY STATE
+       ========================================== */
+    swp-empty-state {
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 20px;
+      text-align: center;
+    }
+
+    swp-empty-state.visible {
+      display: flex;
+    }
+
+    swp-empty-state svg {
+      width: 64px;
+      height: 64px;
+      opacity: 0.3;
+      margin-bottom: 16px;
+    }
+
+    swp-empty-state p {
+      color: var(--color-text-secondary);
+      font-size: 14px;
+    }
+
+    /* ==========================================
+       RESPONSIVE (optional)
+       ========================================== */
+    @media (max-width: 1200px) {
+      swp-table-header,
+      swp-customer-row {
+        grid-template-columns: 200px 120px 180px 60px 90px 90px 90px 80px 1fr;
+      }
+    }
+
+    /* ==========================================
+       OVERLAY
+       ========================================== */
+    swp-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.25);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 200ms ease, visibility 0ms 200ms;
+      z-index: 900;
+    }
+
+    swp-overlay.open {
+      opacity: 1;
+      visibility: visible;
+      transition: opacity 200ms ease, visibility 0ms 0ms;
+    }
+
+    /* ==========================================
+       CUSTOMER CARD PANEL
+       ========================================== */
+    swp-customer-card {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 680px;
+      background: var(--color-surface);
+      box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+      transform: translateX(100%);
+      opacity: 0;
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1), opacity 200ms ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 1000;
+      overflow: hidden;
+    }
+
+    swp-customer-card.open {
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    swp-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 24px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-card-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 18px;
+      font-weight: 600;
+    }
+
+    swp-card-title img {
+      width: 20px;
+      height: 20px;
+      filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%);
+    }
+
+    swp-card-close {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      background: transparent;
+      border-radius: 6px;
+      cursor: pointer;
+      font-size: 18px;
+      color: var(--color-text-secondary);
+      transition: background 150ms ease;
+    }
+
+    swp-card-close:hover {
+      background: var(--color-background);
+    }
+
+    swp-card-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+
+    /* Customer Header */
+    swp-customer-header {
+      display: flex;
+      gap: 20px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-customer-header swp-customer-avatar {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+
+    swp-customer-header-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    swp-customer-header-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+
+    swp-customer-header-left {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    swp-customer-header-name {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-customer-since {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-customer-header-contact {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 4px;
+    }
+
+    swp-customer-header-contact a {
+      font-size: 13px;
+      color: var(--color-teal);
+      text-decoration: none;
+    }
+
+    swp-customer-header-contact a:hover {
+      text-decoration: underline;
+    }
+
+    swp-customer-header-contact swp-customer-tags {
+      margin-top: 4px;
+      justify-content: flex-end;
+    }
+
+    /* Fact Boxes */
+    swp-fact-boxes {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+    }
+
+    swp-fact-box {
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+      text-align: center;
+    }
+
+    swp-fact-box.highlight {
+      background: color-mix(in srgb, var(--color-teal) 10%, white);
+      border-color: var(--color-teal);
+    }
+
+    swp-fact-box-value {
+      display: block;
+      font-size: 20px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-fact-box.highlight swp-fact-box-value {
+      color: var(--color-teal);
+    }
+
+    swp-fact-box-label {
+      display: block;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-top: 4px;
+    }
+
+    /* Section Labels */
+    swp-section-label {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 12px;
+    }
+
+    /* Edit Section */
+    swp-edit-section {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    swp-edit-row {
+      display: grid;
+      grid-template-columns: 120px 1fr;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-edit-label {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-edit-input {
+      display: flex;
+      gap: 8px;
+    }
+
+    swp-edit-input input {
+      flex: 1;
+      padding: 10px 12px;
+      font-size: 13px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      transition: border-color 150ms ease;
+    }
+
+    swp-edit-input input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-edit-input input.short {
+      max-width: 80px;
+      flex: none;
+    }
+
+    /* Marketing Section */
+    swp-marketing-section {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    swp-toggle-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-toggle-label {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-toggle-slider {
+      display: flex;
+      position: relative;
+      background: var(--color-background);
+      border-radius: 6px;
+      padding: 3px;
+      gap: 0;
+    }
+
+    swp-toggle-slider::before {
+      content: '';
+      position: absolute;
+      top: 3px;
+      left: 3px;
+      width: calc(50% - 3px);
+      height: calc(100% - 6px);
+      background: color-mix(in srgb, var(--color-green) 18%, white);
+      border-radius: 4px;
+      transition: transform 200ms ease, background 200ms ease;
+      z-index: 0;
+    }
+
+    swp-toggle-slider[data-value="no"]::before {
+      transform: translateX(100%);
+      background: color-mix(in srgb, var(--color-red) 18%, white);
+    }
+
+    swp-toggle-option {
+      position: relative;
+      z-index: 1;
+      padding: 5px 16px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: color 200ms ease;
+      user-select: none;
+    }
+
+    swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
+      color: var(--color-green);
+      font-weight: 600;
+    }
+
+    swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
+      color: var(--color-red);
+      font-weight: 600;
+    }
+
+    /* Profile Boxes */
+    swp-profile-boxes {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 12px;
+    }
+
+    swp-profile-box {
+      padding: 12px 14px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-profile-box.warning {
+      background: color-mix(in srgb, var(--color-red) 8%, white);
+      border-color: color-mix(in srgb, var(--color-red) 30%, white);
+    }
+
+    swp-profile-box-label {
+      display: block;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 4px;
+    }
+
+    swp-profile-box-value {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-profile-box.warning swp-profile-box-value {
+      color: var(--color-red);
+    }
+
+    /* Chart Section */
+    swp-chart-section {
+      display: block;
+    }
+
+    swp-chart-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    swp-chart-legend {
+      display: flex;
+      gap: 16px;
+    }
+
+    swp-chart-legend-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-chart-legend-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    swp-chart-legend-dot.services {
+      background: var(--color-teal);
+    }
+
+    swp-chart-legend-dot.products {
+      background: var(--color-blue);
+    }
+
+    swp-chart-container {
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+      min-height: 180px;
+    }
+
+    /* Notes Section */
+    swp-notes-section {
+      display: block;
+    }
+
+    swp-note-item {
+      display: block;
+      padding: 12px 14px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      margin-bottom: 8px;
+    }
+
+    swp-note-item:last-of-type {
+      margin-bottom: 0;
+    }
+
+    swp-note-meta {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 6px;
+    }
+
+    swp-note-type {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      padding: 2px 6px;
+      border-radius: 3px;
+      background: color-mix(in srgb, var(--color-blue) 15%, white);
+      color: var(--color-blue);
+    }
+
+    swp-note-date {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-note-text {
+      font-size: 13px;
+      color: var(--color-text);
+      line-height: 1.5;
+    }
+
+    swp-see-all-link {
+      display: inline-block;
+      margin-top: 12px;
+      font-size: 13px;
+      color: var(--color-teal);
+      cursor: pointer;
+    }
+
+    swp-see-all-link:hover {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+
+  <swp-page-container>
+    <!-- Page Header -->
+    <swp-page-header>
+      <swp-page-title>Kunder</swp-page-title>
+      <swp-page-actions>
+        <swp-btn class="secondary">
+          <span>⬇</span> Eksporter
+        </swp-btn>
+        <swp-btn class="primary">
+          <span>+</span> Ny kunde
+        </swp-btn>
+      </swp-page-actions>
+    </swp-page-header>
+
+    <!-- Stats Bar -->
+    <swp-stats-bar>
+      <swp-stat-card class="highlight">
+        <swp-stat-value>12</swp-stat-value>
+        <swp-stat-label>Total kunder</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>3</swp-stat-value>
+        <swp-stat-label>Nye denne måned</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>12,4</swp-stat-value>
+        <swp-stat-label>Gns. besøg</swp-stat-label>
+      </swp-stat-card>
+    </swp-stats-bar>
+
+    <!-- Search Bar -->
+    <swp-search-bar>
+      <swp-search-input>
+        <img src="icons/search.svg" alt="">
+        <input type="text" id="searchInput" placeholder="Søg kunde (navn, telefon, email...)">
+      </swp-search-input>
+      <swp-search-filters>
+        <button class="filter-btn active" data-filter="all">Alle</button>
+        <button class="filter-btn" data-filter="vip">VIP</button>
+        <button class="filter-btn" data-filter="stamkunde">Stamkunder</button>
+        <button class="filter-btn" data-filter="ny">Nye</button>
+      </swp-search-filters>
+      <swp-search-count id="searchCount">12 kunder</swp-search-count>
+    </swp-search-bar>
+
+    <!-- Customer Table -->
+    <swp-customer-table>
+      <swp-table-header>
+        <swp-th class="sortable sorted" data-sort="name">Navn <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable" data-sort="phone">Telefon <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable" data-sort="email">Email <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable" data-sort="visits">Besøg <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable" data-sort="lastVisit">Sidste <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable" data-sort="hairdresser">Frisør <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable" data-sort="created">Oprettet <span class="sort-icon">▲</span></swp-th>
+        <swp-th>Tags</swp-th>
+      </swp-table-header>
+
+      <swp-table-body id="tableBody">
+        <swp-customer-row data-name="Anna Jensen" data-visits="6" data-revenue="5900" data-created="2024-09" data-tags="">
+          <swp-td class="name-cell">
+            <swp-customer-avatar>AJ</swp-customer-avatar>
+            <swp-customer-name>Anna Jensen</swp-customer-name>
+          </swp-td>
+          <swp-td>+45 22 33 44 55</swp-td>
+          <swp-td class="secondary">anna.j@hotmail.dk</swp-td>
+          <swp-td class="center">6</swp-td>
+          <swp-td>15. nov</swp-td>
+          <swp-td>Nina K.</swp-td>
+          <swp-td class="secondary">Sep 2024</swp-td>
+          <swp-td><swp-customer-tags></swp-customer-tags></swp-td>
+        </swp-customer-row>
+
+        <swp-customer-row data-name="Camilla Holm" data-visits="25" data-revenue="18500" data-created="2022-12" data-tags="vip">
+          <swp-td class="name-cell">
+            <swp-customer-avatar>CH</swp-customer-avatar>
+            <swp-customer-name>Camilla Holm</swp-customer-name>
+          </swp-td>
+          <swp-td>+45 66 77 88 99</swp-td>
+          <swp-td class="secondary">camilla.h@outlook.dk</swp-td>
+          <swp-td class="center">25</swp-td>
+          <swp-td>28. okt</swp-td>
+          <swp-td>Emma L.</swp-td>
+          <swp-td class="secondary">Dec 2022</swp-td>
+          <swp-td><swp-customer-tags><swp-tag class="vip">VIP</swp-tag></swp-customer-tags></swp-td>
+        </swp-customer-row>
+
+        <swp-customer-row data-name="Emma Larsen" data-visits="8" data-revenue="8200" data-created="2024-06" data-tags="">
+          <swp-td class="name-cell">
+            <swp-customer-avatar>EL</swp-customer-avatar>
+            <swp-customer-name>Emma Larsen</swp-customer-name>
+          </swp-td>
+          <swp-td>+45 12 34 56 78</swp-td>
+          <swp-td class="secondary">emma.l@gmail.com</swp-td>
+          <swp-td class="center">8</swp-td>
+          <swp-td>5. dec</swp-td>
+          <swp-td>Nina K.</swp-td>
+          <swp-td class="secondary">Jun 2024</swp-td>
+          <swp-td><swp-customer-tags></swp-customer-tags></swp-td>
+        </swp-customer-row>
+
+        <swp-customer-row data-name="Freja Christensen" data-visits="31" data-revenue="22100" data-created="2022-08" data-tags="vip,allergi">
+          <swp-td class="name-cell">
+            <swp-customer-avatar>FC</swp-customer-avatar>
+            <swp-customer-name>Freja Christensen</swp-customer-name>
+          </swp-td>
+          <swp-td>+45 55 66 77 88</swp-td>
+          <swp-td class="secondary">freja.c@outlook.dk</swp-td>
+          <swp-td class="center">31</swp-td>
+          <swp-td>20. nov</swp-td>
+          <swp-td>Emma L.</swp-td>
+          <swp-td class="secondary">Aug 2022</swp-td>
+          <swp-td><swp-customer-tags><swp-tag class="vip">VIP</swp-tag><swp-tag class="allergi">Allergi</swp-tag></swp-customer-tags></swp-td>
+        </swp-customer-row>
+
+        <swp-customer-row data-name="Ida Andersen" data-visits="3" data-revenue="4500" data-created="2025-10" data-tags="ny">
+          <swp-td class="name-cell">
+            <swp-customer-avatar>IA</swp-customer-avatar>
+            <swp-customer-name>Ida Andersen</swp-customer-name>
+          </swp-td>
+          <swp-td>+45 11 22 33 44</swp-td>
+          <swp-td class="secondary">ida@firma.dk</swp-td>
+          <swp-td class="center">3</swp-td>
+          <swp-td>28. nov</swp-td>
+          <swp-td>Sofie M.</swp-td>
+          <swp-td class="secondary">Okt 2025</swp-td>
+          <swp-td><swp-customer-tags><swp-tag class="ny">Ny</swp-tag></swp-customer-tags></swp-td>
+        </swp-customer-row>
+
+        <swp-customer-row data-name="Katrine Berg" data-visits="12" data-revenue="9600" data-created="2024-04" data-tags="">
+          <swp-td class="name-cell">
+            <swp-customer-avatar>KB</swp-customer-avatar>
+            <swp-customer-name>Katrine Berg</swp-customer-name>
+          </swp-td>
+          <swp-td>+45 55 66 77 88</swp-td>
+          <swp-td class="secondary">katrine.b@firma.dk</swp-td>
+          <swp-td class="center">12</swp-td>
+          <swp-td>1. nov</swp-td>
+          <swp-td>Nina K.</swp-td>
+          <swp-td class="secondary">Apr 2024</swp-td>
+          <swp-td><swp-customer-tags></swp-customer-tags></swp-td>
+        </swp-customer-row>
+
+        <swp-customer-row data-name="Line Frost" data-visits="9" data-revenue="7400" data-created="2024-05" data-tags="sensitiv">
+          <swp-td class="name-cell">
+            <swp-customer-avatar>LF</swp-customer-avatar>
+            <swp-customer-name>Line Frost</swp-customer-name>
+          </swp-td>
+          <swp-td>+45 88 99 00 11</swp-td>
+          <swp-td class="secondary">line.f@mail.dk</swp-td>
+          <swp-td class="center">9</swp-td>
+          <swp-td>15. okt</swp-td>
+          <swp-td>Nina K.</swp-td>
+          <swp-td class="secondary">Maj 2024</swp-td>
+          <swp-td><swp-customer-tags><swp-tag class="sensitiv">Sensitiv</swp-tag></swp-customer-tags></swp-td>
+        </swp-customer-row>
+
+        <swp-customer-row data-name="Louise Hansen" data-visits="18" data-revenue="14200" data-created="2023-02" data-tags="stamkunde">
+          <swp-td class="name-cell">
+            <swp-customer-avatar>LH</swp-customer-avatar>
+            <swp-customer-name>Louise Hansen</swp-customer-name>
+          </swp-td>
+          <swp-td>+45 33 44 55 66</swp-td>
+          <swp-td class="secondary">louise.h@gmail.com</swp-td>
+          <swp-td class="center">18</swp-td>
+          <swp-td>10. nov</swp-td>
+          <swp-td>Emma L.</swp-td>
+          <swp-td class="secondary">Feb 2023</swp-td>
+          <swp-td><swp-customer-tags><swp-tag class="stamkunde">Stamkunde</swp-tag></swp-customer-tags></swp-td>
+        </swp-customer-row>
+
+        <swp-customer-row data-name="Maja Petersen" data-visits="22" data-revenue="15800" data-created="2023-01" data-tags="stamkunde">
+          <swp-td class="name-cell">
+            <swp-customer-avatar>MP</swp-customer-avatar>
+            <swp-customer-name>Maja Petersen</swp-customer-name>
+          </swp-td>
+          <swp-td>+45 98 76 54 32</swp-td>
+          <swp-td class="secondary">maja.p@mail.dk</swp-td>
+          <swp-td class="center">22</swp-td>
+          <swp-td>1. dec</swp-td>
+          <swp-td>Emma L.</swp-td>
+          <swp-td class="secondary">Jan 2023</swp-td>
+          <swp-td><swp-customer-tags><swp-tag class="stamkunde">Stamkunde</swp-tag></swp-customer-tags></swp-td>
+        </swp-customer-row>
+
+        <swp-customer-row data-name="Maria Olsen" data-visits="2" data-revenue="1800" data-created="2025-11" data-tags="ny">
+          <swp-td class="name-cell">
+            <swp-customer-avatar>MO</swp-customer-avatar>
+            <swp-customer-name>Maria Olsen</swp-customer-name>
+          </swp-td>
+          <swp-td>+45 44 55 66 77</swp-td>
+          <swp-td class="secondary">maria.o@mail.dk</swp-td>
+          <swp-td class="center">2</swp-td>
+          <swp-td>5. nov</swp-td>
+          <swp-td>Sofie M.</swp-td>
+          <swp-td class="secondary">Nov 2025</swp-td>
+          <swp-td><swp-customer-tags><swp-tag class="ny">Ny</swp-tag></swp-customer-tags></swp-td>
+        </swp-customer-row>
+
+        <swp-customer-row data-name="Rikke Skov" data-visits="4" data-revenue="3200" data-created="2025-08" data-tags="">
+          <swp-td class="name-cell">
+            <swp-customer-avatar>RS</swp-customer-avatar>
+            <swp-customer-name>Rikke Skov</swp-customer-name>
+          </swp-td>
+          <swp-td>+45 77 88 99 00</swp-td>
+          <swp-td class="secondary">rikke.s@gmail.com</swp-td>
+          <swp-td class="center">4</swp-td>
+          <swp-td>20. okt</swp-td>
+          <swp-td>Sofie M.</swp-td>
+          <swp-td class="secondary">Aug 2025</swp-td>
+          <swp-td><swp-customer-tags></swp-customer-tags></swp-td>
+        </swp-customer-row>
+
+        <swp-customer-row data-name="Sofie Nielsen" data-visits="14" data-revenue="12450" data-created="2024-03" data-tags="vip">
+          <swp-td class="name-cell">
+            <swp-customer-avatar>SN</swp-customer-avatar>
+            <swp-customer-name>Sofie Nielsen</swp-customer-name>
+          </swp-td>
+          <swp-td>+45 23 45 67 89</swp-td>
+          <swp-td class="secondary">sofie@email.dk</swp-td>
+          <swp-td class="center">14</swp-td>
+          <swp-td>9. dec</swp-td>
+          <swp-td>Emma L.</swp-td>
+          <swp-td class="secondary">Mar 2024</swp-td>
+          <swp-td><swp-customer-tags><swp-tag class="vip">VIP</swp-tag></swp-customer-tags></swp-td>
+        </swp-customer-row>
+      </swp-table-body>
+
+      <swp-empty-state id="emptyState">
+        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2a10 10 0 100 20 10 10 0 000-20zm0 18a8 8 0 110-16 8 8 0 010 16zm-1-5h2v2h-2v-2zm0-8h2v6h-2V7z"/></svg>
+        <p>Ingen kunder matcher din søgning</p>
+      </swp-empty-state>
+    </swp-customer-table>
+  </swp-page-container>
+
+  <!-- Overlay -->
+  <swp-overlay id="cardOverlay" onclick="closeCustomerCard()"></swp-overlay>
+
+  <!-- Customer Card Panel -->
+  <swp-customer-card id="customerCard">
+    <swp-card-header>
+      <swp-card-title><img src="icons/user.svg" alt="">Kundekort</swp-card-title>
+      <swp-card-close onclick="closeCustomerCard()">✕</swp-card-close>
+    </swp-card-header>
+
+    <swp-card-content>
+      <!-- Customer Header -->
+      <swp-customer-header>
+        <swp-customer-avatar id="cardAvatar">SN</swp-customer-avatar>
+        <swp-customer-header-info>
+          <swp-customer-header-top>
+            <swp-customer-header-left>
+              <swp-customer-header-name id="cardName">Sofie Nielsen</swp-customer-header-name>
+              <swp-customer-since id="cardSince">Kunde siden marts 2024</swp-customer-since>
+            </swp-customer-header-left>
+            <swp-customer-header-contact>
+              <a href="tel:+4523456789" id="cardPhoneLink">+45 23 45 67 89</a>
+              <a href="mailto:sofie@email.dk" id="cardEmailLink">sofie@email.dk</a>
+              <swp-customer-tags id="cardTags"></swp-customer-tags>
+            </swp-customer-header-contact>
+          </swp-customer-header-top>
+        </swp-customer-header-info>
+      </swp-customer-header>
+
+      <!-- Fact Boxes -->
+      <swp-fact-boxes>
+        <swp-fact-box class="highlight">
+          <swp-fact-box-value id="cardVisits">14</swp-fact-box-value>
+          <swp-fact-box-label>Besøg</swp-fact-box-label>
+        </swp-fact-box>
+        <swp-fact-box>
+          <swp-fact-box-value id="cardInterval">32 dage</swp-fact-box-value>
+          <swp-fact-box-label>Gns. interval</swp-fact-box-label>
+        </swp-fact-box>
+        <swp-fact-box>
+          <swp-fact-box-value id="cardHairdresser">Emma L.</swp-fact-box-value>
+          <swp-fact-box-label>Foretrukken frisør</swp-fact-box-label>
+        </swp-fact-box>
+      </swp-fact-boxes>
+
+      <!-- Contact Info (Editable) -->
+      <div>
+        <swp-section-label>Kontaktoplysninger</swp-section-label>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Telefon</swp-edit-label>
+            <swp-edit-input><input type="tel" id="editPhone" value="+45 23 45 67 89"></swp-edit-input>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Email</swp-edit-label>
+            <swp-edit-input><input type="email" id="editEmail" value="sofie@email.dk"></swp-edit-input>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Adresse</swp-edit-label>
+            <swp-edit-input><input type="text" id="editAddress" value="Hovedgaden 12"></swp-edit-input>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Postnr + By</swp-edit-label>
+            <swp-edit-input>
+              <input type="text" id="editZip" value="2100" class="short">
+              <input type="text" id="editCity" value="København Ø">
+            </swp-edit-input>
+          </swp-edit-row>
+        </swp-edit-section>
+      </div>
+
+      <!-- Marketing Opt-in -->
+      <div>
+        <swp-section-label>Marketing</swp-section-label>
+        <swp-marketing-section>
+          <swp-toggle-row>
+            <swp-toggle-label>Email marketing</swp-toggle-label>
+            <swp-toggle-slider id="toggleEmail" data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+          </swp-toggle-row>
+          <swp-toggle-row>
+            <swp-toggle-label>SMS marketing</swp-toggle-label>
+            <swp-toggle-slider id="toggleSms" data-value="no">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+          </swp-toggle-row>
+        </swp-marketing-section>
+      </div>
+
+      <!-- Profile Boxes -->
+      <div>
+        <swp-section-label>Profil</swp-section-label>
+        <swp-profile-boxes>
+          <swp-profile-box>
+            <swp-profile-box-label>Hårtype</swp-profile-box-label>
+            <swp-profile-box-value>Medium · Bølget</swp-profile-box-value>
+          </swp-profile-box>
+          <swp-profile-box>
+            <swp-profile-box-label>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>Præference</swp-profile-box-label>
+            <swp-profile-box-value>Kold tone, ikke for mørk</swp-profile-box-value>
+          </swp-profile-box>
+          <swp-profile-box class="warning">
+            <swp-profile-box-label>Advarsler</swp-profile-box-label>
+            <swp-profile-box-value>Parfume-allergi</swp-profile-box-value>
+          </swp-profile-box>
+        </swp-profile-boxes>
+      </div>
+
+      <!-- Chart -->
+      <swp-chart-section>
+        <swp-chart-header>
+          <swp-section-label style="margin-bottom: 0;">Omsætning (sidste 6 mdr)</swp-section-label>
+          <swp-chart-legend>
+            <swp-chart-legend-item>
+              <swp-chart-legend-dot class="services"></swp-chart-legend-dot>
+              <span>Services</span>
+            </swp-chart-legend-item>
+            <swp-chart-legend-item>
+              <swp-chart-legend-dot class="products"></swp-chart-legend-dot>
+              <span>Produkter</span>
+            </swp-chart-legend-item>
+          </swp-chart-legend>
+        </swp-chart-header>
+        <swp-chart-container id="customerChart"></swp-chart-container>
+      </swp-chart-section>
+
+      <!-- Notes -->
+      <swp-notes-section>
+        <swp-section-label>Seneste noter</swp-section-label>
+        <swp-note-item>
+          <swp-note-meta>
+            <swp-note-type>Note</swp-note-type>
+            <swp-note-date>9. dec 2025</swp-note-date>
+          </swp-note-meta>
+          <swp-note-text>Kunden foretrækker naturlige farver og ønsker lidt ekstra tid til konsultation.</swp-note-text>
+        </swp-note-item>
+        <swp-note-item>
+          <swp-note-meta>
+            <swp-note-type>Farveformel</swp-note-type>
+            <swp-note-date>12. nov 2025</swp-note-date>
+          </swp-note-meta>
+          <swp-note-text>7/1 + 7/0 (1:1) · Oxidant 6% · Virketid 35 min</swp-note-text>
+        </swp-note-item>
+        <swp-see-all-link>Se alle noter →</swp-see-all-link>
+      </swp-notes-section>
+    </swp-card-content>
+  </swp-customer-card>
+
+  <script>
+    // ==========================================
+    // SEARCH FUNCTIONALITY
+    // ==========================================
+    const searchInput = document.getElementById('searchInput');
+    const searchCount = document.getElementById('searchCount');
+    const tableBody = document.getElementById('tableBody');
+    const emptyState = document.getElementById('emptyState');
+    let currentFilter = 'all';
+
+    // Debounce helper
+    function debounce(fn, delay) {
+      let timeout;
+      return (...args) => {
+        clearTimeout(timeout);
+        timeout = setTimeout(() => fn(...args), delay);
+      };
+    }
+
+    function filterCustomers() {
+      const query = searchInput.value.toLowerCase().trim();
+      const rows = document.querySelectorAll('swp-customer-row');
+      let visibleCount = 0;
+
+      rows.forEach(row => {
+        const text = row.textContent.toLowerCase();
+        const tags = row.dataset.tags || '';
+
+        // Check search query
+        const matchesSearch = query === '' || text.includes(query);
+
+        // Check filter
+        let matchesFilter = true;
+        if (currentFilter !== 'all') {
+          matchesFilter = tags.includes(currentFilter);
+        }
+
+        if (matchesSearch && matchesFilter) {
+          row.classList.remove('hidden');
+          visibleCount++;
+        } else {
+          row.classList.add('hidden');
+        }
+      });
+
+      // Update count
+      searchCount.textContent = `${visibleCount} kunde${visibleCount !== 1 ? 'r' : ''}`;
+
+      // Show/hide empty state
+      if (visibleCount === 0) {
+        emptyState.classList.add('visible');
+        tableBody.style.display = 'none';
+      } else {
+        emptyState.classList.remove('visible');
+        tableBody.style.display = 'block';
+      }
+    }
+
+    searchInput.addEventListener('input', debounce(filterCustomers, 150));
+
+    // ==========================================
+    // FILTER BUTTONS
+    // ==========================================
+    document.querySelectorAll('.filter-btn').forEach(btn => {
+      btn.addEventListener('click', () => {
+        // Update active state
+        document.querySelectorAll('.filter-btn').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+
+        // Apply filter
+        currentFilter = btn.dataset.filter;
+        filterCustomers();
+      });
+    });
+
+    // ==========================================
+    // SORTING FUNCTIONALITY
+    // ==========================================
+    let currentSort = { column: 'name', direction: 'asc' };
+
+    document.querySelectorAll('swp-th.sortable').forEach(th => {
+      th.addEventListener('click', () => {
+        const column = th.dataset.sort;
+
+        // Toggle direction if same column
+        if (currentSort.column === column) {
+          currentSort.direction = currentSort.direction === 'asc' ? 'desc' : 'asc';
+        } else {
+          currentSort.column = column;
+          currentSort.direction = 'asc';
+        }
+
+        sortTable();
+        updateSortIndicators();
+      });
+    });
+
+    function sortTable() {
+      const rows = [...document.querySelectorAll('swp-customer-row')];
+      const { column, direction } = currentSort;
+
+      rows.sort((a, b) => {
+        let aVal, bVal;
+
+        switch (column) {
+          case 'name':
+            aVal = a.dataset.name.toLowerCase();
+            bVal = b.dataset.name.toLowerCase();
+            break;
+          case 'visits':
+            aVal = parseInt(a.dataset.visits) || 0;
+            bVal = parseInt(b.dataset.visits) || 0;
+            break;
+          case 'created':
+            aVal = a.dataset.created;
+            bVal = b.dataset.created;
+            break;
+          case 'phone':
+          case 'email':
+          case 'lastVisit':
+          case 'hairdresser':
+            // Get text content from the appropriate cell
+            const cells = {
+              phone: 1,
+              email: 2,
+              lastVisit: 4,
+              hairdresser: 5
+            };
+            aVal = a.querySelectorAll('swp-td')[cells[column]]?.textContent.toLowerCase() || '';
+            bVal = b.querySelectorAll('swp-td')[cells[column]]?.textContent.toLowerCase() || '';
+            break;
+          default:
+            aVal = '';
+            bVal = '';
+        }
+
+        if (typeof aVal === 'number' && typeof bVal === 'number') {
+          return direction === 'asc' ? aVal - bVal : bVal - aVal;
+        }
+
+        if (aVal < bVal) return direction === 'asc' ? -1 : 1;
+        if (aVal > bVal) return direction === 'asc' ? 1 : -1;
+        return 0;
+      });
+
+      // Re-append sorted rows
+      rows.forEach(row => tableBody.appendChild(row));
+    }
+
+    function updateSortIndicators() {
+      document.querySelectorAll('swp-th.sortable').forEach(th => {
+        const isSorted = th.dataset.sort === currentSort.column;
+        th.classList.toggle('sorted', isSorted);
+        th.classList.toggle('desc', isSorted && currentSort.direction === 'desc');
+      });
+    }
+
+    // Initial state
+    updateSortIndicators();
+
+    // ==========================================
+    // CUSTOMER CARD
+    // ==========================================
+    const customerCard = document.getElementById('customerCard');
+    const cardOverlay = document.getElementById('cardOverlay');
+
+    // Add click handlers to all customer rows
+    document.querySelectorAll('swp-customer-row').forEach(row => {
+      row.style.cursor = 'pointer';
+      row.addEventListener('click', () => openCustomerCard(row));
+    });
+
+    function openCustomerCard(row) {
+      // Get data from row
+      const name = row.dataset.name;
+      const visits = row.dataset.visits;
+      const created = row.dataset.created;
+      const cells = row.querySelectorAll('swp-td');
+      const phone = cells[1]?.textContent || '';
+      const email = cells[2]?.textContent || '';
+      const hairdresser = cells[5]?.textContent || '';
+
+      // Generate initials
+      const initials = name.split(' ').map(n => n[0]).join('').toUpperCase();
+
+      // Format "Kunde siden"
+      const createdDate = created ? formatCreatedDate(created) : 'Ukendt';
+
+      // Update card content
+      document.getElementById('cardAvatar').textContent = initials;
+      document.getElementById('cardName').textContent = name;
+      document.getElementById('cardSince').textContent = `Kunde siden ${createdDate}`;
+      document.getElementById('cardPhoneLink').textContent = phone;
+      document.getElementById('cardPhoneLink').href = `tel:${phone.replace(/\s/g, '')}`;
+      document.getElementById('cardEmailLink').textContent = email;
+      document.getElementById('cardEmailLink').href = `mailto:${email}`;
+      document.getElementById('cardVisits').textContent = visits;
+      document.getElementById('cardHairdresser').textContent = hairdresser;
+
+      // Update editable fields
+      document.getElementById('editPhone').value = phone;
+      document.getElementById('editEmail').value = email;
+
+      // Update tags
+      const tags = row.dataset.tags || '';
+      const cardTags = document.getElementById('cardTags');
+      cardTags.innerHTML = '';
+      if (tags) {
+        tags.split(',').forEach(tag => {
+          const tagEl = document.createElement('swp-tag');
+          tagEl.className = tag.trim();
+          tagEl.textContent = tag.trim().charAt(0).toUpperCase() + tag.trim().slice(1);
+          cardTags.appendChild(tagEl);
+        });
+      }
+
+      // Open panel
+      cardOverlay.classList.add('open');
+      customerCard.classList.add('open');
+
+      // Initialize chart
+      initCustomerChart();
+    }
+
+    function closeCustomerCard() {
+      cardOverlay.classList.remove('open');
+      customerCard.classList.remove('open');
+    }
+
+    function formatCreatedDate(dateStr) {
+      // Format: "2024-03" -> "marts 2024"
+      const months = ['januar', 'februar', 'marts', 'april', 'maj', 'juni',
+                      'juli', 'august', 'september', 'oktober', 'november', 'december'];
+      const [year, month] = dateStr.split('-');
+      return `${months[parseInt(month) - 1]} ${year}`;
+    }
+
+    // Escape key closes card
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') closeCustomerCard();
+    });
+
+    // ==========================================
+    // TOGGLE SLIDER (Ja/Nej)
+    // ==========================================
+    document.querySelectorAll('swp-toggle-slider').forEach(slider => {
+      const options = slider.querySelectorAll('swp-toggle-option');
+      options.forEach((option, index) => {
+        option.addEventListener('click', () => {
+          slider.dataset.value = index === 0 ? 'yes' : 'no';
+        });
+      });
+    });
+
+    // Chart initialization
+    let chartInitialized = false;
+    function initCustomerChart() {
+      if (chartInitialized) return;
+
+      import('https://unpkg.com/@sevenweirdpeople/swp-charting@latest/dist/index.js')
+        .then(module => {
+          const { createChart } = module;
+          createChart(document.getElementById('customerChart'), {
+            width: 620,
+            height: 180,
+            xAxis: {
+              categories: ['Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
+            },
+            series: [
+              {
+                name: 'Services',
+                color: '#00897b',
+                data: [
+                  { x: 'Jul', y: 1200 },
+                  { x: 'Sep', y: 1500 },
+                  { x: 'Okt', y: 2800 },
+                  { x: 'Dec', y: 1800 }
+                ]
+              },
+              {
+                name: 'Produkter',
+                color: '#1976d2',
+                data: [
+                  { x: 'Aug', y: 800 },
+                  { x: 'Okt', y: 900 },
+                  { x: 'Nov', y: 700 },
+                  { x: 'Dec', y: 950 }
+                ]
+              }
+            ],
+            legend: false
+          });
+          chartInitialized = true;
+        });
+    }
+  </script>
+
+</body>
+</html>
diff --git a/.workbench/POC/poc-dashboard.html b/.workbench/POC/poc-dashboard.html
new file mode 100644
index 0000000..a4b3f63
--- /dev/null
+++ b/.workbench/POC/poc-dashboard.html
@@ -0,0 +1,732 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Dashboard - Salon OS</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>
+  <link rel="stylesheet" href="css/dashboard.css">
+</head>
+<body>
+  <!-- Page Header -->
+  <swp-page-header>
+    <swp-page-title>Dashboard</swp-page-title>
+    <swp-page-actions>
+      <swp-date-display>
+        <i class="ph ph-calendar-blank"></i>
+        <span>Mandag, 30. december 2024</span>
+      </swp-date-display>
+      <swp-btn class="primary">
+        <i class="ph ph-plus"></i>
+        Ny booking
+      </swp-btn>
+    </swp-page-actions>
+  </swp-page-header>
+
+  <swp-page-container>
+    <!-- Stats Bar -->
+    <swp-stats-bar>
+      <swp-stat-card class="highlight">
+        <swp-stat-value>12</swp-stat-value>
+        <swp-stat-label>Bookinger i dag</swp-stat-label>
+        <swp-stat-trend class="up">
+          <i class="ph ph-check-circle"></i>
+          4 gennemf&oslash;rt, 2 i gang
+        </swp-stat-trend>
+      </swp-stat-card>
+      <swp-stat-card class="success">
+        <swp-stat-value>8.450 kr</swp-stat-value>
+        <swp-stat-label>Forventet oms&aelig;tning</swp-stat-label>
+        <swp-stat-trend class="up">
+          <i class="ph ph-trend-up"></i>
+          +12% vs. gennemsnit
+        </swp-stat-trend>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>78%</swp-stat-value>
+        <swp-stat-label>Bel&aelig;gningsgrad</swp-stat-label>
+        <swp-stat-trend class="up">
+          <i class="ph ph-trend-up"></i>
+          God kapacitet
+        </swp-stat-trend>
+      </swp-stat-card>
+      <swp-stat-card class="warning">
+        <swp-stat-value>3</swp-stat-value>
+        <swp-stat-label>Kr&aelig;ver opm&aelig;rksomhed</swp-stat-label>
+      </swp-stat-card>
+    </swp-stats-bar>
+
+    <swp-dashboard-grid>
+      <!-- Main Column -->
+      <swp-main-column>
+        <!-- AI Insight -->
+        <swp-card>
+          <swp-ai-insight>
+            <swp-ai-header>
+              <i class="ph ph-sparkle"></i>
+              <span>AI Analyse</span>
+            </swp-ai-header>
+            <swp-ai-text>
+              <strong>Godt i gang!</strong> 4 af 12 bookinger er gennemf&oslash;rt. 2 er i gang nu, og 6 venter.
+              Forventet oms&aelig;tning: <strong>8.450 kr</strong> &ndash; allerede realiseret <strong>2.150 kr</strong>.
+              Tip: Ida Rasmussen (11:30) har ikke bekr&aelig;ftet &ndash; overvej at sende en p&aring;mindelse.
+            </swp-ai-text>
+          </swp-ai-insight>
+        </swp-card>
+
+        <!-- Today's Bookings -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>
+              <i class="ph ph-calendar-check"></i>
+              Dagens bookinger
+            </swp-card-title>
+            <swp-card-action>Se alle</swp-card-action>
+          </swp-card-header>
+
+          <swp-current-time>
+            <i class="ph ph-clock"></i>
+            <span>Nu: <swp-time>10:45</swp-time></span>
+          </swp-current-time>
+
+          <swp-booking-list>
+            <!-- Gennemførte bookinger -->
+            <swp-booking-item class="completed">
+              <swp-booking-time>
+                <swp-time-start>08:00</swp-time-start>
+                <swp-time-end>08:30</swp-time-end>
+              </swp-booking-time>
+              <swp-booking-indicator></swp-booking-indicator>
+              <swp-booking-details>
+                <swp-booking-service>Herreklip</swp-booking-service>
+                <swp-booking-customer>Thomas Berg</swp-booking-customer>
+              </swp-booking-details>
+              <swp-booking-employee>
+                <swp-avatar-small>MH</swp-avatar-small>
+                <span>Maria</span>
+              </swp-booking-employee>
+              <swp-booking-status class="completed">Gennemf&oslash;rt</swp-booking-status>
+            </swp-booking-item>
+
+            <swp-booking-item class="completed">
+              <swp-booking-time>
+                <swp-time-start>08:30</swp-time-start>
+                <swp-time-end>09:00</swp-time-end>
+              </swp-booking-time>
+              <swp-booking-indicator></swp-booking-indicator>
+              <swp-booking-details>
+                <swp-booking-service>Dameklip</swp-booking-service>
+                <swp-booking-customer>Katrine Holm</swp-booking-customer>
+              </swp-booking-details>
+              <swp-booking-employee>
+                <swp-avatar-small>AS</swp-avatar-small>
+                <span>Anna</span>
+              </swp-booking-employee>
+              <swp-booking-status class="completed">Gennemf&oslash;rt</swp-booking-status>
+            </swp-booking-item>
+
+            <swp-booking-item class="completed">
+              <swp-booking-time>
+                <swp-time-start>09:00</swp-time-start>
+                <swp-time-end>09:30</swp-time-end>
+              </swp-booking-time>
+              <swp-booking-indicator></swp-booking-indicator>
+              <swp-booking-details>
+                <swp-booking-service>Sk&aelig;gtrimning</swp-booking-service>
+                <swp-booking-customer>Mikkel Skov</swp-booking-customer>
+              </swp-booking-details>
+              <swp-booking-employee>
+                <swp-avatar-small>PK</swp-avatar-small>
+                <span>Peter</span>
+              </swp-booking-employee>
+              <swp-booking-status class="completed">Gennemf&oslash;rt</swp-booking-status>
+            </swp-booking-item>
+
+            <swp-booking-item class="completed">
+              <swp-booking-time>
+                <swp-time-start>09:00</swp-time-start>
+                <swp-time-end>10:30</swp-time-end>
+              </swp-booking-time>
+              <swp-booking-indicator></swp-booking-indicator>
+              <swp-booking-details>
+                <swp-booking-service>Dameklip + Farve</swp-booking-service>
+                <swp-booking-customer>Sofie Nielsen</swp-booking-customer>
+              </swp-booking-details>
+              <swp-booking-employee>
+                <swp-avatar-small>AS</swp-avatar-small>
+                <span>Anna</span>
+              </swp-booking-employee>
+              <swp-booking-status class="completed">Gennemf&oslash;rt</swp-booking-status>
+            </swp-booking-item>
+
+            <!-- Igangværende -->
+            <swp-booking-item style="background: color-mix(in srgb, var(--color-teal) 8%, var(--color-background-alt));">
+              <swp-booking-time>
+                <swp-time-start>10:30</swp-time-start>
+                <swp-time-end>11:00</swp-time-end>
+              </swp-booking-time>
+              <swp-booking-indicator class="blue"></swp-booking-indicator>
+              <swp-booking-details>
+                <swp-booking-service>Herreklip</swp-booking-service>
+                <swp-booking-customer>Jonas Petersen</swp-booking-customer>
+              </swp-booking-details>
+              <swp-booking-employee>
+                <swp-avatar-small>MH</swp-avatar-small>
+                <span>Maria</span>
+              </swp-booking-employee>
+              <swp-booking-status class="inprogress">I gang</swp-booking-status>
+            </swp-booking-item>
+
+            <swp-booking-item style="background: color-mix(in srgb, var(--color-teal) 8%, var(--color-background-alt));">
+              <swp-booking-time>
+                <swp-time-start>10:00</swp-time-start>
+                <swp-time-end>11:00</swp-time-end>
+              </swp-booking-time>
+              <swp-booking-indicator class="purple"></swp-booking-indicator>
+              <swp-booking-details>
+                <swp-booking-service>F&oslash;n + Styling</swp-booking-service>
+                <swp-booking-customer>Rikke Dam</swp-booking-customer>
+              </swp-booking-details>
+              <swp-booking-employee>
+                <swp-avatar-small>LJ</swp-avatar-small>
+                <span>Louise</span>
+              </swp-booking-employee>
+              <swp-booking-status class="inprogress">I gang</swp-booking-status>
+            </swp-booking-item>
+
+            <!-- Kommende -->
+            <swp-booking-item>
+              <swp-booking-time>
+                <swp-time-start>11:00</swp-time-start>
+                <swp-time-end>12:00</swp-time-end>
+              </swp-booking-time>
+              <swp-booking-indicator class="teal"></swp-booking-indicator>
+              <swp-booking-details>
+                <swp-booking-service>Balayage</swp-booking-service>
+                <swp-booking-customer>Emma Christensen</swp-booking-customer>
+              </swp-booking-details>
+              <swp-booking-employee>
+                <swp-avatar-small>AS</swp-avatar-small>
+                <span>Anna</span>
+              </swp-booking-employee>
+              <swp-booking-status class="confirmed">Bekr&aelig;ftet</swp-booking-status>
+            </swp-booking-item>
+
+            <swp-booking-item>
+              <swp-booking-time>
+                <swp-time-start>11:30</swp-time-start>
+                <swp-time-end>12:00</swp-time-end>
+              </swp-booking-time>
+              <swp-booking-indicator class="amber"></swp-booking-indicator>
+              <swp-booking-details>
+                <swp-booking-service>Dameklip</swp-booking-service>
+                <swp-booking-customer>Ida Rasmussen</swp-booking-customer>
+              </swp-booking-details>
+              <swp-booking-employee>
+                <swp-avatar-small>MH</swp-avatar-small>
+                <span>Maria</span>
+              </swp-booking-employee>
+              <swp-booking-status class="pending">Afventer</swp-booking-status>
+            </swp-booking-item>
+
+            <swp-booking-item>
+              <swp-booking-time>
+                <swp-time-start>13:00</swp-time-start>
+                <swp-time-end>14:00</swp-time-end>
+              </swp-booking-time>
+              <swp-booking-indicator class="green"></swp-booking-indicator>
+              <swp-booking-details>
+                <swp-booking-service>Farve + F&oslash;n</swp-booking-service>
+                <swp-booking-customer>Louise Andersen</swp-booking-customer>
+              </swp-booking-details>
+              <swp-booking-employee>
+                <swp-avatar-small>AS</swp-avatar-small>
+                <span>Anna</span>
+              </swp-booking-employee>
+              <swp-booking-status class="confirmed">Bekr&aelig;ftet</swp-booking-status>
+            </swp-booking-item>
+
+            <swp-booking-item>
+              <swp-booking-time>
+                <swp-time-start>14:00</swp-time-start>
+                <swp-time-end>14:30</swp-time-end>
+              </swp-booking-time>
+              <swp-booking-indicator class="blue"></swp-booking-indicator>
+              <swp-booking-details>
+                <swp-booking-service>Herreklip</swp-booking-service>
+                <swp-booking-customer>Anders M&oslash;ller</swp-booking-customer>
+              </swp-booking-details>
+              <swp-booking-employee>
+                <swp-avatar-small>PK</swp-avatar-small>
+                <span>Peter</span>
+              </swp-booking-employee>
+              <swp-booking-status class="confirmed">Bekr&aelig;ftet</swp-booking-status>
+            </swp-booking-item>
+
+            <swp-booking-item>
+              <swp-booking-time>
+                <swp-time-start>15:30</swp-time-start>
+                <swp-time-end>16:30</swp-time-end>
+              </swp-booking-time>
+              <swp-booking-indicator class="purple"></swp-booking-indicator>
+              <swp-booking-details>
+                <swp-booking-service>Extensions</swp-booking-service>
+                <swp-booking-customer>Julie Lund</swp-booking-customer>
+              </swp-booking-details>
+              <swp-booking-employee>
+                <swp-avatar-small>LJ</swp-avatar-small>
+                <span>Louise</span>
+              </swp-booking-employee>
+              <swp-booking-status class="confirmed">Bekr&aelig;ftet</swp-booking-status>
+            </swp-booking-item>
+          </swp-booking-list>
+        </swp-card>
+
+        <!-- Attention Items -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>
+              <i class="ph ph-warning-circle"></i>
+              Opm&aelig;rksomheder
+            </swp-card-title>
+          </swp-card-header>
+
+          <swp-attention-list>
+            <swp-attention-item class="urgent">
+              <swp-attention-icon>
+                <i class="ph ph-x-circle"></i>
+              </swp-attention-icon>
+              <swp-attention-content>
+                <swp-attention-title>Aflyst booking</swp-attention-title>
+                <swp-attention-desc>Mette Hansen aflyste kl. 15:00 &ndash; tid nu ledig</swp-attention-desc>
+              </swp-attention-content>
+              <swp-attention-action>Fyld tid</swp-attention-action>
+            </swp-attention-item>
+
+            <swp-attention-item class="warning">
+              <swp-attention-icon>
+                <i class="ph ph-clock"></i>
+              </swp-attention-icon>
+              <swp-attention-content>
+                <swp-attention-title>Ubekr&aelig;ftet booking</swp-attention-title>
+                <swp-attention-desc>Ida Rasmussen har ikke bekr&aelig;ftet kl. 11:30</swp-attention-desc>
+              </swp-attention-content>
+              <swp-attention-action>Send p&aring;mindelse</swp-attention-action>
+            </swp-attention-item>
+
+            <swp-attention-item class="info">
+              <swp-attention-icon>
+                <i class="ph ph-gift"></i>
+              </swp-attention-icon>
+              <swp-attention-content>
+                <swp-attention-title>Gavekort udl&oslash;ber snart</swp-attention-title>
+                <swp-attention-desc>GC-D2R4-6TY9 udl&oslash;ber om 3 uger (200 DKK)</swp-attention-desc>
+              </swp-attention-content>
+              <swp-attention-action>Se gavekort</swp-attention-action>
+            </swp-attention-item>
+          </swp-attention-list>
+        </swp-card>
+      </swp-main-column>
+
+      <!-- Side Column -->
+      <swp-side-column>
+        <!-- Notifications -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>
+              <i class="ph ph-bell"></i>
+              Notifikationer
+            </swp-card-title>
+            <swp-card-action>Marker alle som l&aelig;st</swp-card-action>
+          </swp-card-header>
+
+          <swp-notification-list>
+            <swp-notification-item class="unread">
+              <swp-notification-icon>
+                <i class="ph ph-calendar-plus"></i>
+              </swp-notification-icon>
+              <swp-notification-content>
+                <swp-notification-text>
+                  <strong>Ny booking</strong> fra Emma Christensen til Balayage
+                </swp-notification-text>
+                <swp-notification-time>For 15 min. siden</swp-notification-time>
+              </swp-notification-content>
+            </swp-notification-item>
+
+            <swp-notification-item class="unread">
+              <swp-notification-icon>
+                <i class="ph ph-star"></i>
+              </swp-notification-icon>
+              <swp-notification-content>
+                <swp-notification-text>
+                  <strong>Ny anmeldelse</strong> &ndash; 5 stjerner fra Sofie Nielsen
+                </swp-notification-text>
+                <swp-notification-time>For 1 time siden</swp-notification-time>
+              </swp-notification-content>
+            </swp-notification-item>
+
+            <swp-notification-item>
+              <swp-notification-icon>
+                <i class="ph ph-x"></i>
+              </swp-notification-icon>
+              <swp-notification-content>
+                <swp-notification-text>
+                  <strong>Aflysning</strong> &ndash; Mette Hansen aflyste kl. 15:00
+                </swp-notification-text>
+                <swp-notification-time>For 2 timer siden</swp-notification-time>
+              </swp-notification-content>
+            </swp-notification-item>
+
+            <swp-notification-item>
+              <swp-notification-icon>
+                <i class="ph ph-check"></i>
+              </swp-notification-icon>
+              <swp-notification-content>
+                <swp-notification-text>
+                  <strong>Bekr&aelig;ftet</strong> &ndash; Louise Andersen bekr&aelig;ftede kl. 13:00
+                </swp-notification-text>
+                <swp-notification-time>I g&aring;r kl. 18:30</swp-notification-time>
+              </swp-notification-content>
+            </swp-notification-item>
+          </swp-notification-list>
+        </swp-card>
+
+        <!-- Waitlist Mini Card -->
+        <swp-waitlist-card>
+          <swp-waitlist-icon>
+            <i class="ph ph-users-three"></i>
+            <swp-waitlist-badge>4</swp-waitlist-badge>
+          </swp-waitlist-icon>
+          <swp-waitlist-label>P&aring; venteliste</swp-waitlist-label>
+        </swp-waitlist-card>
+
+        <!-- Quick Stats -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>
+              <i class="ph ph-chart-line-up"></i>
+              Denne uge
+            </swp-card-title>
+          </swp-card-header>
+
+          <swp-quick-stats>
+            <swp-quick-stat>
+              <swp-stat-value>47</swp-stat-value>
+              <swp-stat-label>Bookinger</swp-stat-label>
+            </swp-quick-stat>
+            <swp-quick-stat>
+              <swp-stat-value>38.200 kr</swp-stat-value>
+              <swp-stat-label>Oms&aelig;tning</swp-stat-label>
+            </swp-quick-stat>
+            <swp-quick-stat>
+              <swp-stat-value>8</swp-stat-value>
+              <swp-stat-label>Nye kunder</swp-stat-label>
+            </swp-quick-stat>
+            <swp-quick-stat>
+              <swp-stat-value>72%</swp-stat-value>
+              <swp-stat-label>Gns. bel&aelig;gning</swp-stat-label>
+            </swp-quick-stat>
+          </swp-quick-stats>
+        </swp-card>
+
+        <!-- Employee Status -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>
+              <i class="ph ph-users"></i>
+              Medarbejdere
+            </swp-card-title>
+          </swp-card-header>
+
+          <swp-employee-list>
+            <swp-employee-status-item>
+              <swp-employee-avatar>AS</swp-employee-avatar>
+              <swp-employee-info>
+                <swp-employee-name>Anna S&oslash;rensen</swp-employee-name>
+                <swp-employee-current>Ledig til kl. 11:00 (Balayage)</swp-employee-current>
+              </swp-employee-info>
+              <swp-employee-status-badge class="available">Ledig</swp-employee-status-badge>
+            </swp-employee-status-item>
+
+            <swp-employee-status-item>
+              <swp-employee-avatar>MH</swp-employee-avatar>
+              <swp-employee-info>
+                <swp-employee-name>Maria Hansen</swp-employee-name>
+                <swp-employee-current>Herreklip med Jonas</swp-employee-current>
+              </swp-employee-info>
+              <swp-employee-status-badge class="busy">Optaget</swp-employee-status-badge>
+            </swp-employee-status-item>
+
+            <swp-employee-status-item>
+              <swp-employee-avatar>LJ</swp-employee-avatar>
+              <swp-employee-info>
+                <swp-employee-name>Louise Jensen</swp-employee-name>
+                <swp-employee-current>F&oslash;n + Styling med Rikke</swp-employee-current>
+              </swp-employee-info>
+              <swp-employee-status-badge class="busy">Optaget</swp-employee-status-badge>
+            </swp-employee-status-item>
+
+            <swp-employee-status-item>
+              <swp-employee-avatar>PK</swp-employee-avatar>
+              <swp-employee-info>
+                <swp-employee-name>Peter Kristensen</swp-employee-name>
+                <swp-employee-current>Ledig til kl. 14:00</swp-employee-current>
+              </swp-employee-info>
+              <swp-employee-status-badge class="available">Ledig</swp-employee-status-badge>
+            </swp-employee-status-item>
+          </swp-employee-list>
+        </swp-card>
+      </swp-side-column>
+    </swp-dashboard-grid>
+  </swp-page-container>
+
+  <!-- Waitlist Drawer Overlay -->
+  <swp-drawer-overlay></swp-drawer-overlay>
+
+  <!-- Waitlist Drawer -->
+  <swp-waitlist-drawer>
+    <swp-drawer-header>
+      <swp-drawer-title>
+        Venteliste <swp-count>(4)</swp-count>
+      </swp-drawer-title>
+      <swp-drawer-close>
+        <i class="ph ph-x"></i>
+      </swp-drawer-close>
+    </swp-drawer-header>
+    <swp-drawer-body>
+      <swp-waitlist-list>
+        <!-- Entry 1 -->
+        <swp-waitlist-item>
+          <swp-waitlist-customer>
+            <swp-avatar>EC</swp-avatar>
+            <swp-waitlist-customer-info>
+              <swp-waitlist-name>Emma Christensen</swp-waitlist-name>
+              <swp-waitlist-phone>+45 12 34 56 78</swp-waitlist-phone>
+            </swp-waitlist-customer-info>
+          </swp-waitlist-customer>
+          <swp-waitlist-service>Dameklip + Farve</swp-waitlist-service>
+          <swp-waitlist-meta>
+            <swp-waitlist-periods>
+              <swp-label>&Oslash;nsker:</swp-label>
+              <swp-waitlist-period-tag>Mandag-Onsdag</swp-waitlist-period-tag>
+              <swp-waitlist-period-tag>Formiddag</swp-waitlist-period-tag>
+            </swp-waitlist-periods>
+            <swp-waitlist-dates>
+              <swp-waitlist-date>
+                <i class="ph ph-calendar"></i>
+                Tilmeldt: 2. jan 2026
+              </swp-waitlist-date>
+              <swp-waitlist-date class="expires">
+                <i class="ph ph-clock"></i>
+                Udl&oslash;ber: 16. jan 2026
+              </swp-waitlist-date>
+            </swp-waitlist-dates>
+          </swp-waitlist-meta>
+          <swp-waitlist-actions>
+            <swp-btn class="secondary">
+              <i class="ph ph-phone"></i>
+              Kontakt
+            </swp-btn>
+            <swp-btn class="primary">
+              <i class="ph ph-calendar-plus"></i>
+              Book nu
+            </swp-btn>
+          </swp-waitlist-actions>
+        </swp-waitlist-item>
+
+        <!-- Entry 2 -->
+        <swp-waitlist-item>
+          <swp-waitlist-customer>
+            <swp-avatar>MS</swp-avatar>
+            <swp-waitlist-customer-info>
+              <swp-waitlist-name>Mikkel S&oslash;rensen</swp-waitlist-name>
+              <swp-waitlist-phone>+45 23 45 67 89</swp-waitlist-phone>
+            </swp-waitlist-customer-info>
+          </swp-waitlist-customer>
+          <swp-waitlist-service>Herreklip</swp-waitlist-service>
+          <swp-waitlist-meta>
+            <swp-waitlist-periods>
+              <swp-label>&Oslash;nsker:</swp-label>
+              <swp-waitlist-period-tag>Weekend</swp-waitlist-period-tag>
+            </swp-waitlist-periods>
+            <swp-waitlist-dates>
+              <swp-waitlist-date>
+                <i class="ph ph-calendar"></i>
+                Tilmeldt: 30. dec 2025
+              </swp-waitlist-date>
+              <swp-waitlist-date class="expires soon">
+                <i class="ph ph-clock"></i>
+                Udl&oslash;ber: 6. jan 2026
+              </swp-waitlist-date>
+            </swp-waitlist-dates>
+          </swp-waitlist-meta>
+          <swp-waitlist-actions>
+            <swp-btn class="secondary">
+              <i class="ph ph-phone"></i>
+              Kontakt
+            </swp-btn>
+            <swp-btn class="primary">
+              <i class="ph ph-calendar-plus"></i>
+              Book nu
+            </swp-btn>
+          </swp-waitlist-actions>
+        </swp-waitlist-item>
+
+        <!-- Entry 3 -->
+        <swp-waitlist-item>
+          <swp-waitlist-customer>
+            <swp-avatar>LA</swp-avatar>
+            <swp-waitlist-customer-info>
+              <swp-waitlist-name>Lise Andersen</swp-waitlist-name>
+              <swp-waitlist-phone>+45 34 56 78 90</swp-waitlist-phone>
+            </swp-waitlist-customer-info>
+          </swp-waitlist-customer>
+          <swp-waitlist-service>Balayage</swp-waitlist-service>
+          <swp-waitlist-meta>
+            <swp-waitlist-periods>
+              <swp-label>&Oslash;nsker:</swp-label>
+              <swp-waitlist-period-tag>Tirsdag-Torsdag</swp-waitlist-period-tag>
+              <swp-waitlist-period-tag>Eftermiddag</swp-waitlist-period-tag>
+            </swp-waitlist-periods>
+            <swp-waitlist-dates>
+              <swp-waitlist-date>
+                <i class="ph ph-calendar"></i>
+                Tilmeldt: 28. dec 2025
+              </swp-waitlist-date>
+              <swp-waitlist-date class="expires">
+                <i class="ph ph-clock"></i>
+                Udl&oslash;ber: 11. jan 2026
+              </swp-waitlist-date>
+            </swp-waitlist-dates>
+          </swp-waitlist-meta>
+          <swp-waitlist-actions>
+            <swp-btn class="secondary">
+              <i class="ph ph-phone"></i>
+              Kontakt
+            </swp-btn>
+            <swp-btn class="primary">
+              <i class="ph ph-calendar-plus"></i>
+              Book nu
+            </swp-btn>
+          </swp-waitlist-actions>
+        </swp-waitlist-item>
+
+        <!-- Entry 4 -->
+        <swp-waitlist-item>
+          <swp-waitlist-customer>
+            <swp-avatar>PH</swp-avatar>
+            <swp-waitlist-customer-info>
+              <swp-waitlist-name>Peter Hansen</swp-waitlist-name>
+              <swp-waitlist-phone>+45 45 67 89 01</swp-waitlist-phone>
+            </swp-waitlist-customer-info>
+          </swp-waitlist-customer>
+          <swp-waitlist-service>Herreklip + Sk&aelig;g</swp-waitlist-service>
+          <swp-waitlist-meta>
+            <swp-waitlist-periods>
+              <swp-label>&Oslash;nsker:</swp-label>
+              <swp-waitlist-period-tag>Fleksibel</swp-waitlist-period-tag>
+            </swp-waitlist-periods>
+            <swp-waitlist-dates>
+              <swp-waitlist-date>
+                <i class="ph ph-calendar"></i>
+                Tilmeldt: 27. dec 2025
+              </swp-waitlist-date>
+              <swp-waitlist-date class="expires">
+                <i class="ph ph-clock"></i>
+                Udl&oslash;ber: 10. jan 2026
+              </swp-waitlist-date>
+            </swp-waitlist-dates>
+          </swp-waitlist-meta>
+          <swp-waitlist-actions>
+            <swp-btn class="secondary">
+              <i class="ph ph-phone"></i>
+              Kontakt
+            </swp-btn>
+            <swp-btn class="primary">
+              <i class="ph ph-calendar-plus"></i>
+              Book nu
+            </swp-btn>
+          </swp-waitlist-actions>
+        </swp-waitlist-item>
+      </swp-waitlist-list>
+    </swp-drawer-body>
+  </swp-waitlist-drawer>
+
+  <script>
+    // Update current time
+    function updateTime() {
+      const now = new Date();
+      const hours = String(now.getHours()).padStart(2, '0');
+      const minutes = String(now.getMinutes()).padStart(2, '0');
+      const timeEl = document.querySelector('swp-current-time swp-time');
+      if (timeEl) {
+        timeEl.textContent = `${hours}:${minutes}`;
+      }
+    }
+
+    updateTime();
+    setInterval(updateTime, 60000);
+
+    // Click handlers for attention items
+    document.querySelectorAll('swp-attention-action').forEach(action => {
+      action.addEventListener('click', (e) => {
+        e.stopPropagation();
+        alert('Handling: ' + action.textContent);
+      });
+    });
+
+    // Click handlers for bookings
+    document.querySelectorAll('swp-booking-item').forEach(item => {
+      item.addEventListener('click', () => {
+        const service = item.querySelector('swp-booking-service').textContent;
+        alert('&Aring;bn booking: ' + service);
+      });
+    });
+
+    // Waitlist Drawer functionality
+    const waitlistCard = document.querySelector('swp-waitlist-card');
+    const waitlistDrawer = document.querySelector('swp-waitlist-drawer');
+    const drawerOverlay = document.querySelector('swp-drawer-overlay');
+    const drawerClose = document.querySelector('swp-drawer-close');
+
+    function openWaitlistDrawer() {
+      waitlistDrawer.classList.add('open');
+      drawerOverlay.classList.add('visible');
+      document.body.style.overflow = 'hidden';
+    }
+
+    function closeWaitlistDrawer() {
+      waitlistDrawer.classList.remove('open');
+      drawerOverlay.classList.remove('visible');
+      document.body.style.overflow = '';
+    }
+
+    waitlistCard.addEventListener('click', openWaitlistDrawer);
+    drawerClose.addEventListener('click', closeWaitlistDrawer);
+    drawerOverlay.addEventListener('click', closeWaitlistDrawer);
+
+    // Close on Escape key
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape' && waitlistDrawer.classList.contains('open')) {
+        closeWaitlistDrawer();
+      }
+    });
+
+    // Click handlers for waitlist actions
+    document.querySelectorAll('swp-waitlist-actions swp-btn').forEach(btn => {
+      btn.addEventListener('click', (e) => {
+        e.stopPropagation();
+        const isContact = btn.classList.contains('secondary');
+        const name = btn.closest('swp-waitlist-item').querySelector('swp-waitlist-name').textContent;
+        if (isContact) {
+          alert('Kontakt: ' + name);
+        } else {
+          alert('Book nu for: ' + name);
+          closeWaitlistDrawer();
+        }
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-detail-drawer.html b/.workbench/POC/poc-detail-drawer.html
new file mode 100644
index 0000000..9e7650e
--- /dev/null
+++ b/.workbench/POC/poc-detail-drawer.html
@@ -0,0 +1,3481 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <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>
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* Import design tokens fra calendar-base.css */
+    :root {
+      --hour-height: 64px;
+      --time-axis-width: 60px;
+      --header-height: 70px;
+
+      /* Colors - UI */
+      --color-border: #e0e0e0;
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-text: #333333;
+      --color-text-secondary: #666;
+      --color-primary: #1976d2;
+
+      /* Named color palette */
+      --b-color-blue: #1e88e5;
+      --b-color-green: #43a047;
+      --b-color-red: #e53935;
+      --b-color-amber: #ffb300;
+      --b-color-purple: #8e24aa;
+      --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);
+
+      /* Transitions */
+      --transition-fast: 150ms ease;
+    }
+
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+
+    body {
+      font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      background: var(--color-background);
+    }
+
+    /* Demo layout */
+    .demo-container {
+      padding: 16px;
+    }
+
+    .demo-buttons {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 16px;
+      flex-wrap: wrap;
+    }
+
+    .demo-btn {
+      padding: 6px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      cursor: pointer;
+      background: var(--color-surface);
+      font-size: 12px;
+      transition: background var(--transition-fast);
+    }
+
+    .demo-btn:hover {
+      background: var(--color-background-hover);
+    }
+
+    .demo-btn-primary {
+      background: var(--color-primary);
+      color: white;
+      border-color: var(--color-primary);
+    }
+
+    .demo-btn-primary:hover {
+      background: #1565c0;
+    }
+
+    /* Calendar mock */
+    .calendar-mock {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      height: 500px;
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+    }
+
+    .calendar-mock-column {
+      border-right: 1px solid var(--color-border);
+      padding: 8px;
+    }
+
+    .calendar-mock-column:last-child {
+      border-right: none;
+    }
+
+    .mock-event {
+      --b-primary: var(--b-color-blue);
+      background-color: color-mix(in srgb, var(--b-primary) 10%, var(--b-mix));
+      border-left: 4px solid var(--b-primary);
+      padding: 4px 6px;
+      margin-bottom: 8px;
+      border-radius: 3px;
+      cursor: pointer;
+      font-size: 12px;
+      transition: background-color 200ms ease;
+    }
+
+    .mock-event:hover {
+      background-color: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
+    }
+
+    .mock-event-time {
+      font-size: 0.875rem;
+      font-weight: 500;
+    }
+
+    .mock-event-title {
+      font-size: 0.875rem;
+    }
+
+    /* ==========================================
+       DETAIL DRAWER
+       ========================================== */
+
+    swp-detail-drawer-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.2);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 200ms ease, visibility 200ms ease;
+      z-index: 900;
+    }
+
+    swp-detail-drawer-overlay.open {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    swp-detail-drawer {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 340px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+      transform: translateX(100%);
+      transition: transform 200ms ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 1000; /* Drawer 1 - top */
+    }
+
+    swp-detail-drawer.open {
+      transform: translateX(0);
+    }
+
+    /* Drawer header */
+    swp-drawer-header {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      padding: 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-drawer-title {
+      display: flex;
+      justify-content: center;
+      padding: 14px 16px;
+      font-size: 14px;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+    }
+
+    swp-drawer-title.source-web {
+      --b-primary: var(--b-color-blue);
+      background: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
+      color: var(--b-primary);
+    }
+
+    swp-drawer-title.source-recurring {
+      --b-primary: var(--b-color-purple);
+      background: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
+      color: var(--b-primary);
+    }
+
+    swp-drawer-title.source-manual {
+      --b-primary: var(--b-color-teal);
+      background: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
+      color: var(--b-primary);
+    }
+
+    swp-created-date {
+      font-size: 10px;
+      color: var(--color-text-secondary);
+      opacity: 0.8;
+      padding: 4px 16px 8px;
+      text-align: right;
+      background: var(--color-background-alt);
+    }
+
+    /* Drawer content */
+    swp-drawer-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    /* Section styling */
+    swp-drawer-section {
+      display: block;
+    }
+
+    swp-section-label {
+      display: block;
+      font-size: 11px;
+      font-weight: 400;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 10px;
+    }
+
+    /* Event time/date */
+    swp-event-info {
+      display: block;
+      padding-bottom: 16px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-event-time-display {
+      display: block;
+      font-size: 20px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-event-date-display {
+      display: block;
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    /* Customer section */
+    swp-customer-info {
+      display: block;
+    }
+
+    swp-customer-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+    }
+
+    swp-customer-name {
+      font-size: 18px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-customer-phone {
+      font-size: 14px;
+      color: var(--color-teal);
+    }
+
+    swp-customer-phone a {
+      color: var(--color-teal);
+      text-decoration: none;
+    }
+
+    swp-customer-phone a:hover {
+      text-decoration: underline;
+    }
+
+    swp-customer-details-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      margin-top: 6px;
+      transition: color 150ms ease;
+    }
+
+    swp-customer-details-link:hover {
+      color: var(--color-teal);
+    }
+
+    /* Chevron icon styling */
+    .link-chevron {
+      width: 18px;
+      height: 18px;
+      transition: transform 200ms ease;
+      filter: invert(45%) sepia(0%) saturate(0%) brightness(90%);
+    }
+
+    swp-customer-details-link:hover .link-chevron,
+    swp-journal-details-link:hover .link-chevron {
+      filter: invert(32%) sepia(98%) saturate(1234%) hue-rotate(152deg) brightness(93%) contrast(92%);
+    }
+
+    swp-customer-details-link.panel-open .link-chevron,
+    swp-journal-details-link.panel-open .link-chevron {
+      transform: rotate(90deg);
+    }
+
+    /* Status */
+    swp-status-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 12px;
+      background: var(--color-background-alt);
+      border-radius: 4px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-status-label {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-status-dot {
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+    }
+
+    /* Status variants - using color-mix like events */
+    .status-badge.status-created {
+      --b-primary: var(--b-color-purple);
+      background: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
+      color: var(--b-primary);
+    }
+    .status-badge.status-created swp-status-dot { background: var(--b-color-purple); }
+
+    .status-badge.status-arrived {
+      --b-primary: var(--b-color-green);
+      background: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
+      color: var(--b-primary);
+    }
+    .status-badge.status-arrived swp-status-dot { background: var(--b-color-green); }
+
+    .status-badge.status-paid {
+      --b-primary: var(--b-color-blue);
+      background: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
+      color: var(--b-primary);
+    }
+    .status-badge.status-paid swp-status-dot { background: var(--b-color-blue); }
+
+    .status-badge.status-noshow {
+      --b-primary: var(--b-color-red);
+      background: color-mix(in srgb, var(--b-primary) 15%, var(--b-mix));
+      color: var(--b-primary);
+    }
+    .status-badge.status-noshow swp-status-dot { background: var(--b-color-red); }
+
+    .status-badge.status-cancelled {
+      background: var(--color-background-alt);
+      color: var(--color-text-secondary);
+      border: 1px solid var(--color-border);
+    }
+    .status-badge.status-cancelled swp-status-dot { background: var(--color-text-secondary); }
+
+    /* Services list */
+    swp-services-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-service-item {
+      --b-primary: var(--b-color-blue);
+      display: block;
+      padding: 10px 12px;
+      background: color-mix(in srgb, var(--b-primary) 5%, var(--b-mix));
+      border-left: 3px solid var(--b-primary);
+      border-radius: 3px;
+    }
+
+    swp-service-name {
+      display: block;
+      font-size: 15px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-service-details {
+      display: block;
+      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;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+      opacity: 0.8;
+    }
+
+    /* Total */
+    swp-total-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 0;
+      border-top: 1px solid var(--color-border);
+      border-bottom: 1px solid var(--color-border);
+      margin-top: 4px;
+    }
+
+    swp-total-label {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-total-amount {
+      font-family: var(--font-mono);
+      font-size: 24px;
+      font-weight: 700;
+      color: var(--color-text);
+    }
+
+    /* Notes */
+    swp-notes-box {
+      display: block;
+      padding: 10px 12px;
+      background: color-mix(in srgb, var(--b-color-amber) 10%, var(--b-mix));
+      border-left: 3px solid var(--b-color-amber);
+      border-radius: 3px;
+      font-size: 14px;
+      color: var(--color-text);
+      font-style: italic;
+    }
+
+    /* Journal link */
+    swp-journal-link {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 12px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all var(--transition-fast);
+    }
+
+    swp-journal-link:hover {
+      background: var(--color-background-hover);
+      border-color: var(--color-teal);
+    }
+
+    swp-journal-icon {
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    swp-journal-icon img {
+      width: 20px;
+      height: 20px;
+      filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%);
+      transition: filter 150ms ease;
+    }
+
+    swp-journal-link:hover swp-journal-icon img {
+      filter: invert(32%) sepia(98%) saturate(1234%) hue-rotate(196deg) brightness(93%) contrast(92%);
+    }
+
+    swp-journal-link.no-journal swp-journal-icon img {
+      filter: invert(45%) sepia(8%) saturate(0%) hue-rotate(0deg) brightness(95%) contrast(90%);
+    }
+
+    swp-journal-link.no-journal:hover swp-journal-icon img {
+      filter: invert(32%) sepia(98%) saturate(1234%) hue-rotate(196deg) brightness(93%) contrast(92%);
+    }
+
+    swp-journal-text {
+      flex: 1;
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-journal-arrow {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Journal not created state */
+    swp-journal-link.no-journal {
+      border-style: dashed;
+      background: var(--color-background-alt);
+    }
+
+    swp-journal-link.no-journal swp-journal-text {
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-link.no-journal:hover {
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+      border-style: solid;
+    }
+
+    /* Journal Panel - slides out from left of drawer */
+    swp-journal-panel {
+      position: fixed;
+      top: 0;
+      right: 340px;
+      bottom: 0;
+      width: 440px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+      transform: translateX(100%);
+      opacity: 0;
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                  opacity 200ms ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 990; /* Drawer 2 - middle */
+    }
+
+    swp-journal-panel.open {
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    swp-journal-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-journal-header-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-journal-close {
+      background: none;
+      border: none;
+      font-size: 18px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      padding: 4px 8px;
+      border-radius: 4px;
+      transition: background 150ms ease;
+    }
+
+    swp-journal-close:hover {
+      background: var(--color-background-hover);
+    }
+
+    /* Journal Tabs - Traditional style */
+    swp-journal-tabs {
+      display: flex;
+      padding: 0 20px;
+      background: var(--color-background-alt);
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-journal-tab {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 14px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      background: transparent;
+      border: none;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-journal-tab:hover:not(.disabled) {
+      color: var(--color-text);
+      background: var(--color-background-hover);
+    }
+
+    swp-journal-tab.active {
+      color: var(--color-text);
+      background: var(--color-surface);
+      border-bottom-color: var(--color-teal);
+    }
+
+    swp-journal-tab.disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    .tab-indicator {
+      width: 8px;
+      height: 8px;
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+
+    .tab-indicator.blue {
+      background: var(--b-color-blue);
+    }
+
+    .tab-indicator.amber {
+      background: var(--b-color-amber);
+    }
+
+    .tab-indicator.gray {
+      background: var(--color-text-secondary);
+    }
+
+    .tab-indicator.purple {
+      background: #8b5cf6;
+    }
+
+    /* Tab Content Container */
+    swp-journal-tab-content {
+      display: none;
+      flex-direction: column;
+      flex: 1;
+      overflow: hidden;
+    }
+
+    swp-journal-tab-content.active {
+      display: flex;
+    }
+
+    /* Tab Content Header */
+    swp-journal-tab-header {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-journal-tab-title {
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-journal-tab-title span {
+      font-weight: 400;
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-tab-desc {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      line-height: 1.4;
+    }
+
+    swp-journal-add-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 8px 14px;
+      font-size: 13px;
+      font-weight: 500;
+      color: white;
+      background: var(--color-teal);
+      border-radius: 6px;
+      cursor: pointer;
+      margin-top: 4px;
+      align-self: flex-start;
+      transition: background 150ms ease;
+    }
+
+    swp-journal-add-btn:hover {
+      background: #00796b;
+    }
+
+    /* Journal Content */
+    swp-journal-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    /* Journal Entry Card */
+    swp-journal-entry {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+      padding: 14px 16px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-journal-entry-meta {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-journal-entry-type {
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--b-color-blue);
+      background: color-mix(in srgb, var(--b-color-blue) 15%, var(--b-mix));
+      border-radius: 4px;
+    }
+
+    swp-journal-entry-type.farveformel {
+      color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 15%, var(--b-mix));
+    }
+
+    swp-journal-entry-type.analyse {
+      color: #7c3aed;
+      background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix));
+    }
+
+    swp-journal-entry-date {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-entry-author {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-entry-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 6px;
+      margin-left: auto;
+    }
+
+    swp-journal-tag {
+      padding: 3px 10px;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 12px;
+    }
+
+    /* Tag Colors - Journal Panel */
+    swp-journal-tag.tag-note,
+    swp-journal-tag:contains('Fri note') {
+      background: color-mix(in srgb, var(--b-color-blue) 15%, var(--b-mix));
+      border-color: var(--b-color-blue);
+      color: var(--b-color-blue);
+    }
+    swp-journal-tag.tag-sensitiv {
+      background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix));
+      border-color: #8b5cf6;
+      color: #7c3aed;
+    }
+    swp-journal-tag.tag-allergi {
+      background: color-mix(in srgb, var(--b-color-red) 15%, var(--b-mix));
+      border-color: var(--b-color-red);
+      color: var(--b-color-red);
+    }
+    swp-journal-tag.tag-praference {
+      background: color-mix(in srgb, var(--color-teal) 15%, var(--b-mix));
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+    }
+    swp-journal-tag.tag-anbefaling {
+      background: color-mix(in srgb, var(--b-color-amber) 15%, var(--b-mix));
+      border-color: var(--b-color-amber);
+      color: #b45309;
+    }
+
+    /* Farveformel Tags */
+    swp-journal-tag.tag-farveformel {
+      background: color-mix(in srgb, var(--color-teal) 15%, var(--b-mix));
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+    }
+    swp-journal-tag.tag-kold-tone {
+      background: color-mix(in srgb, var(--b-color-blue) 15%, var(--b-mix));
+      border-color: var(--b-color-blue);
+      color: var(--b-color-blue);
+    }
+    swp-journal-tag.tag-toning {
+      background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix));
+      border-color: #8b5cf6;
+      color: #7c3aed;
+    }
+    swp-journal-tag.tag-balayage {
+      background: color-mix(in srgb, var(--b-color-amber) 15%, var(--b-mix));
+      border-color: var(--b-color-amber);
+      color: #b45309;
+    }
+
+    swp-journal-entry-delete {
+      padding: 4px 6px;
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      border-radius: 4px;
+      transition: all 150ms ease;
+      opacity: 0.6;
+    }
+
+    swp-journal-entry-delete:hover {
+      color: var(--b-color-red);
+      background: color-mix(in srgb, var(--b-color-red) 10%, var(--b-mix));
+      opacity: 1;
+    }
+
+    swp-journal-entry-text {
+      font-size: 13px;
+      color: var(--color-text);
+      line-height: 1.5;
+      white-space: pre-line;
+    }
+
+    swp-journal-entry-text .mono {
+      font-family: var(--font-mono);
+    }
+
+    /* Entry Footer - Dato, Synlighed & Markering */
+    swp-journal-entry-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-journal-entry-footer swp-journal-entry-date {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-entry-icons {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-journal-entry-visibility,
+    swp-journal-entry-marking {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-journal-entry-visibility .entry-icon,
+    swp-journal-entry-marking .entry-icon {
+      width: 18px;
+      height: 18px;
+      filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%);
+    }
+
+    swp-journal-entry-marking.hidden {
+      display: none;
+    }
+
+    /* Preview Entry */
+    swp-journal-entry.preview {
+      border: 2px dashed var(--color-teal);
+      opacity: 1;
+      transform: translateY(0);
+      transition: opacity 200ms ease, transform 200ms ease, max-height 300ms ease;
+      max-height: 2000px;
+    }
+
+    swp-journal-entry.preview.hidden {
+      opacity: 0;
+      transform: translateY(-20px);
+      max-height: 0;
+      margin: 0;
+      padding: 0;
+      overflow: hidden;
+      border: none;
+    }
+
+    /* Journal Profile Section */
+    swp-journal-profile-section {
+      padding: 16px 20px;
+      border-top: 1px solid var(--color-border);
+      background: var(--color-surface);
+    }
+
+    swp-journal-profile-toggle {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--color-teal);
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-journal-profile-toggle:hover {
+      color: #00796b;
+    }
+
+    swp-journal-profile-toggle .toggle-arrow {
+      font-size: 10px;
+      transition: transform 200ms ease;
+    }
+
+    swp-journal-profile-toggle.collapsed .toggle-arrow {
+      transform: rotate(-90deg);
+    }
+
+    swp-journal-profile-boxes {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+      margin-top: 12px;
+      max-height: 200px;
+      overflow: hidden;
+      transition: max-height 200ms ease, margin-top 200ms ease, opacity 200ms ease;
+    }
+
+    swp-journal-profile-boxes.collapsed {
+      max-height: 0;
+      margin-top: 0;
+      opacity: 0;
+    }
+
+    /* Customer Details Panel - double width drawer, slides under like journal */
+    swp-customer-panel {
+      position: fixed;
+      top: 0;
+      right: 340px;
+      bottom: 0;
+      width: 680px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+      transform: translateX(100%);
+      opacity: 0;
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                  opacity 200ms ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 1000;
+      overflow: hidden;
+    }
+
+    swp-customer-panel.open {
+      transform: translateX(0);
+      opacity: 1;
+    }
+
+    swp-customer-panel-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 24px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-customer-panel-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    .panel-header-icon {
+      width: 20px;
+      height: 20px;
+      filter: invert(22%) sepia(14%) saturate(1042%) hue-rotate(164deg) brightness(102%) contrast(85%);
+    }
+
+    swp-customer-panel-close {
+      background: none;
+      border: none;
+      font-size: 20px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      padding: 4px 8px;
+      border-radius: 4px;
+      transition: background 150ms ease;
+    }
+
+    swp-customer-panel-close:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-customer-panel-content {
+      flex: 1;
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 24px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+      min-height: 0;
+    }
+
+    /* Customer info header */
+    swp-customer-header-section {
+      display: flex;
+      gap: 24px;
+      padding-bottom: 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-customer-avatar {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--color-teal), #4db6ac);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32px;
+      font-weight: 600;
+      color: white;
+      flex-shrink: 0;
+    }
+
+    swp-customer-header-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    swp-customer-header-top {
+      display: flex;
+      justify-content: space-between;
+      align-items: flex-start;
+    }
+
+    swp-customer-header-left {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    swp-customer-header-name {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-customer-header-contact {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      align-items: flex-end;
+    }
+
+    swp-customer-header-contact-item {
+      font-size: 14px;
+    }
+
+    swp-customer-header-contact-item a {
+      color: var(--color-teal);
+      text-decoration: none;
+    }
+
+    swp-customer-header-contact-item a:hover {
+      text-decoration: underline;
+    }
+
+    swp-customer-since {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Fact boxes grid */
+    swp-fact-boxes {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+    }
+
+    swp-fact-box {
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+      text-align: center;
+    }
+
+    swp-fact-box-value {
+      display: block;
+      font-family: var(--font-mono);
+      font-size: 20px;
+      font-weight: 700;
+      color: var(--color-text);
+      margin-bottom: 4px;
+    }
+
+    swp-fact-box-label {
+      display: block;
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-fact-box.highlight {
+      background: linear-gradient(135deg, rgba(0, 137, 123, 0.1), rgba(0, 137, 123, 0.05));
+      border-color: var(--color-teal);
+    }
+
+    swp-fact-box.highlight swp-fact-box-value {
+      color: var(--color-teal);
+    }
+
+    /* Chart section */
+    swp-chart-section {
+      display: block;
+    }
+
+    swp-chart-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+
+    swp-chart-title {
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-chart-legend {
+      display: flex;
+      gap: 16px;
+    }
+
+    swp-chart-legend-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-chart-legend-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    swp-chart-legend-dot.services {
+      background: var(--color-teal);
+    }
+
+    swp-chart-legend-dot.products {
+      background: var(--b-color-blue);
+    }
+
+    swp-chart-container {
+      display: block;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+    }
+
+    /* Products list */
+    swp-products-section {
+      display: block;
+    }
+
+    swp-products-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-product-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 14px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-product-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-product-name {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-product-date {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-product-price {
+      font-family: var(--font-mono);
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    /* Preferences section */
+    swp-preferences-section {
+      display: block;
+    }
+
+    swp-preferences-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+    }
+
+    swp-preference-item {
+      padding: 12px 14px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-preference-label {
+      display: block;
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      margin-bottom: 4px;
+    }
+
+    swp-preference-value {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    /* Customer stats */
+    swp-stats-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+
+    swp-stat-item {
+      display: flex;
+      flex-direction: column;
+      padding: 10px 12px;
+      background: var(--color-background-alt);
+      border-radius: 4px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-stat-value {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-stat-value.mono {
+      font-family: var(--font-mono);
+    }
+
+    swp-stat-label {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    /* Profile boxes */
+    swp-profile-boxes {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+
+    swp-profile-box {
+      padding: 10px 12px;
+      background: var(--color-background-alt);
+      border-radius: 4px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-profile-box.warning {
+      background: color-mix(in srgb, var(--b-color-amber) 10%, var(--b-mix));
+      border-color: var(--b-color-amber);
+    }
+
+    swp-profile-box-label {
+      display: block;
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      margin-bottom: 3px;
+    }
+
+    swp-profile-box.warning swp-profile-box-label {
+      color: #b8860b;
+    }
+
+    swp-profile-box-value {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text);
+      line-height: 1.3;
+    }
+
+    swp-journal-details-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      margin-top: 10px;
+      transition: color 150ms ease;
+    }
+
+    swp-journal-details-link:hover {
+      color: var(--color-teal);
+    }
+
+    swp-journal-details-link.no-journal {
+      color: var(--color-teal);
+    }
+
+    /* Drawer footer */
+    swp-drawer-footer {
+      display: flex;
+      gap: 8px;
+      padding: 16px;
+      border-top: 1px solid var(--color-border);
+      background: var(--color-surface);
+    }
+
+    swp-footer-btn {
+      flex: 1;
+      padding: 12px 16px;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      font-size: 14px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all var(--transition-fast);
+      text-align: center;
+    }
+
+    swp-footer-btn.btn-primary {
+      background: var(--color-teal);
+      color: white;
+      border-color: var(--color-teal);
+    }
+
+    swp-footer-btn.btn-primary:hover {
+      background: #00796b;
+    }
+
+    swp-footer-btn.btn-secondary {
+      background: var(--color-surface);
+      color: var(--color-text);
+    }
+
+    swp-footer-btn.btn-secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    /* Footer states based on booking status */
+    swp-drawer-footer.status-paid swp-footer-btn.btn-primary {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+      opacity: 0.7;
+      cursor: default;
+    }
+
+    swp-drawer-footer.status-cancelled swp-footer-btn.btn-primary,
+    swp-drawer-footer.status-noshow swp-footer-btn.btn-primary {
+      background: var(--color-text-secondary);
+      border-color: var(--color-text-secondary);
+      cursor: not-allowed;
+      opacity: 0.6;
+    }
+
+    /* ==========================================
+       STATUS DROPDOWN (Popover API)
+       ========================================== */
+
+    swp-status-row {
+      position: relative;
+      anchor-name: --status-row;
+    }
+
+    .status-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 3px 8px;
+      border: none;
+      border-radius: 3px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: inherit;
+      cursor: pointer;
+      transition: transform var(--transition-fast);
+    }
+
+    .status-badge:hover {
+      transform: scale(1.02);
+    }
+
+    #statusText {
+      margin-top: -2px;
+    }
+
+    swp-status-dropdown {
+      margin: 0;
+      padding: 4px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      box-shadow: var(--shadow-md);
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+
+      /* Animation */
+      opacity: 0;
+      transform: translateY(-8px);
+      transition: opacity 150ms ease, transform 150ms ease, display 150ms ease allow-discrete;
+    }
+
+    swp-status-dropdown:popover-open {
+      opacity: 1;
+      transform: translateY(0);
+    }
+
+    @starting-style {
+      swp-status-dropdown:popover-open {
+        opacity: 0;
+        transform: translateY(-8px);
+      }
+    }
+
+    swp-status-option {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 10px;
+      border-radius: 3px;
+      cursor: pointer;
+      font-size: 13px;
+      font-weight: 500;
+      opacity: 0;
+      transform: translateX(10px);
+      transition: background var(--transition-fast), opacity 150ms ease, transform 150ms ease;
+    }
+
+    swp-status-dropdown:popover-open swp-status-option {
+      opacity: 1;
+      transform: translateX(0);
+    }
+
+    /* Stagger animation delays */
+    swp-status-dropdown:popover-open swp-status-option:nth-child(1) { transition-delay: 0ms; }
+    swp-status-dropdown:popover-open swp-status-option:nth-child(2) { transition-delay: 30ms; }
+    swp-status-dropdown:popover-open swp-status-option:nth-child(3) { transition-delay: 60ms; }
+    swp-status-dropdown:popover-open swp-status-option:nth-child(4) { transition-delay: 90ms; }
+    swp-status-dropdown:popover-open swp-status-option:nth-child(5) { transition-delay: 120ms; }
+
+    swp-status-option:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-status-option swp-status-dot {
+      width: 8px;
+      height: 8px;
+    }
+
+    swp-status-option swp-status-check {
+      margin-left: auto;
+      font-size: 12px;
+      opacity: 0;
+    }
+
+    swp-status-option.selected swp-status-check {
+      opacity: 1;
+    }
+
+    /* Status option colors */
+    swp-status-option.opt-created { color: var(--b-color-purple); }
+    swp-status-option.opt-created swp-status-dot { background: var(--b-color-purple); }
+
+    swp-status-option.opt-arrived { color: var(--b-color-green); }
+    swp-status-option.opt-arrived swp-status-dot { background: var(--b-color-green); }
+
+    swp-status-option.opt-paid { color: var(--b-color-blue); }
+    swp-status-option.opt-paid swp-status-dot { background: var(--b-color-blue); }
+
+    swp-status-option.opt-noshow { color: var(--b-color-red); }
+    swp-status-option.opt-noshow swp-status-dot { background: var(--b-color-red); }
+
+    swp-status-option.opt-cancelled { color: var(--color-text-secondary); }
+    swp-status-option.opt-cancelled swp-status-dot { background: var(--color-text-secondary); }
+
+    /* ==========================================
+       ADD NOTE PANEL
+       ========================================== */
+    swp-add-note-panel {
+      position: fixed;
+      top: 0;
+      right: 340px; /* Same as journal - starts behind it */
+      bottom: 0;
+      width: 440px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+      transform: translateX(0); /* Behind journal panel */
+      visibility: hidden;
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                  visibility 0ms 250ms;
+      display: flex;
+      flex-direction: column;
+      z-index: 980; /* Drawer 3 - bottom */
+    }
+
+    swp-add-note-panel.open {
+      transform: translateX(-100%); /* Slide out to the left */
+      visibility: visible;
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                  visibility 0ms 0ms;
+    }
+
+    swp-add-note-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-add-note-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-add-note-close {
+      cursor: pointer;
+      padding: 4px 8px;
+      border-radius: 4px;
+      font-size: 18px;
+      color: var(--color-text-secondary);
+      transition: background 150ms ease;
+    }
+
+    swp-add-note-close:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-add-note-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    swp-add-note-desc {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      line-height: 1.4;
+    }
+
+    swp-add-note-field {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-add-note-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Tags */
+    swp-add-note-tags {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+    }
+
+    swp-add-note-tag-option {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 14px;
+      font-size: 13px;
+      border-radius: 16px;
+      border: 1px solid var(--color-border);
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-add-note-tag-option::before {
+      content: '';
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      border: 1px solid var(--color-border);
+      transition: all 150ms ease;
+    }
+
+    swp-add-note-tag-option:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-add-note-tag-option.selected {
+      background: color-mix(in srgb, var(--b-color-blue) 12%, var(--b-mix));
+      border-color: var(--b-color-blue);
+    }
+
+    /* Tag Colors - Add Note Panel */
+    swp-add-note-tag-option[data-tag="note"].selected {
+      background: color-mix(in srgb, var(--b-color-blue) 15%, var(--b-mix));
+      border-color: var(--b-color-blue);
+      color: var(--b-color-blue);
+    }
+    swp-add-note-tag-option[data-tag="sensitiv"].selected {
+      background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix));
+      border-color: #8b5cf6;
+      color: #7c3aed;
+    }
+    swp-add-note-tag-option[data-tag="allergi"].selected {
+      background: color-mix(in srgb, var(--b-color-red) 15%, var(--b-mix));
+      border-color: var(--b-color-red);
+      color: var(--b-color-red);
+    }
+    swp-add-note-tag-option[data-tag="praference"].selected {
+      background: color-mix(in srgb, var(--color-teal) 15%, var(--b-mix));
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+    }
+    swp-add-note-tag-option[data-tag="anbefaling"].selected {
+      background: color-mix(in srgb, var(--b-color-amber) 15%, var(--b-mix));
+      border-color: var(--b-color-amber);
+      color: #b45309;
+    }
+    /* Farveformel tags */
+    swp-add-note-tag-option[data-tag="farveformel"].selected {
+      background: color-mix(in srgb, var(--color-teal) 15%, var(--b-mix));
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+    }
+    swp-add-note-tag-option[data-tag="kold-tone"].selected {
+      background: color-mix(in srgb, var(--b-color-blue) 15%, var(--b-mix));
+      border-color: var(--b-color-blue);
+      color: var(--b-color-blue);
+    }
+    swp-add-note-tag-option[data-tag="toning"].selected {
+      background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix));
+      border-color: #8b5cf6;
+      color: #7c3aed;
+    }
+    swp-add-note-tag-option[data-tag="balayage"].selected {
+      background: color-mix(in srgb, var(--b-color-amber) 15%, var(--b-mix));
+      border-color: var(--b-color-amber);
+      color: #b45309;
+    }
+
+    swp-add-note-tag-option.selected::before {
+      background: var(--b-color-blue);
+      border-color: var(--b-color-blue);
+    }
+    swp-add-note-tag-option[data-tag="note"].selected::before {
+      background: var(--b-color-blue);
+      border-color: var(--b-color-blue);
+    }
+    swp-add-note-tag-option[data-tag="sensitiv"].selected::before {
+      background: #8b5cf6;
+      border-color: #8b5cf6;
+    }
+    swp-add-note-tag-option[data-tag="allergi"].selected::before {
+      background: var(--b-color-red);
+      border-color: var(--b-color-red);
+    }
+    swp-add-note-tag-option[data-tag="praference"].selected::before {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+    }
+    swp-add-note-tag-option[data-tag="anbefaling"].selected::before {
+      background: var(--b-color-amber);
+      border-color: var(--b-color-amber);
+    }
+    /* Farveformel tags ::before */
+    swp-add-note-tag-option[data-tag="farveformel"].selected::before {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+    }
+    swp-add-note-tag-option[data-tag="kold-tone"].selected::before {
+      background: var(--b-color-blue);
+      border-color: var(--b-color-blue);
+    }
+    swp-add-note-tag-option[data-tag="toning"].selected::before {
+      background: #8b5cf6;
+      border-color: #8b5cf6;
+    }
+    swp-add-note-tag-option[data-tag="balayage"].selected::before {
+      background: var(--b-color-amber);
+      border-color: var(--b-color-amber);
+    }
+
+    swp-add-note-tip {
+      font-size: 11px;
+      color: var(--color-teal);
+      font-style: italic;
+    }
+
+    /* Textarea */
+    swp-add-note-content textarea {
+      width: 100%;
+      min-height: 120px;
+      padding: 12px;
+      font-family: inherit;
+      font-size: 13px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      resize: vertical;
+      line-height: 1.5;
+    }
+
+    swp-add-note-content textarea:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    /* Dropdowns */
+    swp-add-note-dropdowns {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    swp-add-note-dropdown-group {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    swp-add-note-dropdown-group select {
+      padding: 10px 12px;
+      font-size: 13px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      cursor: pointer;
+    }
+
+    swp-add-note-dropdown-group select:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-add-note-help {
+      font-size: 11px;
+      color: var(--color-teal);
+    }
+
+    /* Footer */
+    swp-add-note-footer {
+      display: flex;
+      gap: 8px;
+      padding: 16px 20px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-add-note-btn {
+      flex: 1;
+      padding: 10px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      border-radius: 6px;
+      cursor: pointer;
+      text-align: center;
+      transition: all 150ms ease;
+    }
+
+    swp-add-note-btn.primary {
+      background: var(--color-teal);
+      color: white;
+      border: none;
+    }
+
+    swp-add-note-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-add-note-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-add-note-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    /* ==========================================
+       FARVEFORMEL PANEL (extends add-note styles)
+       ========================================== */
+    swp-farveformel-panel {
+      position: fixed;
+      top: 0;
+      right: 340px;
+      bottom: 0;
+      width: 440px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+      transform: translateX(0);
+      visibility: hidden;
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                  visibility 0ms 250ms;
+      display: flex;
+      flex-direction: column;
+      z-index: 980;
+    }
+
+    swp-farveformel-panel.open {
+      transform: translateX(-100%);
+      visibility: visible;
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                  visibility 0ms 0ms;
+    }
+
+    /* Farveformel-specific: 2-column grid layout */
+    swp-add-note-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    swp-add-note-field.full-width {
+      grid-column: 1 / -1;
+    }
+
+    /* Input styling for farveformel */
+    swp-farveformel-panel input[type="text"] {
+      padding: 10px 12px;
+      font-size: 13px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+    }
+
+    /* Monospace for formula fields */
+    swp-farveformel-panel input#ffFormel,
+    swp-farveformel-panel input#ffBlandingsforhold {
+      font-family: var(--font-mono);
+    }
+
+    swp-farveformel-panel input[type="text"]:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-farveformel-panel select {
+      padding: 10px 12px;
+      font-size: 13px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      cursor: pointer;
+    }
+
+    swp-farveformel-panel select:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-farveformel-panel textarea {
+      width: 100%;
+      min-height: 100px;
+      padding: 12px;
+      font-family: inherit;
+      font-size: 13px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      resize: vertical;
+      line-height: 1.5;
+    }
+
+    swp-farveformel-panel textarea:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    /* ==========================================
+       ANALYSE PANEL (extends add-note styles)
+       ========================================== */
+    swp-analyse-panel {
+      position: fixed;
+      top: 0;
+      right: 340px;
+      bottom: 0;
+      width: 440px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+      transform: translateX(0);
+      visibility: hidden;
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                  visibility 0ms 250ms;
+      display: flex;
+      flex-direction: column;
+      z-index: 980;
+    }
+
+    swp-analyse-panel.open {
+      transform: translateX(-100%);
+      visibility: visible;
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                  visibility 0ms 0ms;
+    }
+
+    swp-analyse-panel input[type="text"] {
+      padding: 10px 12px;
+      font-size: 13px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+    }
+
+    swp-analyse-panel input[type="text"]:focus {
+      outline: none;
+      border-color: #8b5cf6;
+    }
+
+    swp-analyse-panel select {
+      padding: 10px 12px;
+      font-size: 13px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      cursor: pointer;
+    }
+
+    swp-analyse-panel select:focus {
+      outline: none;
+      border-color: #8b5cf6;
+    }
+
+    swp-analyse-panel textarea {
+      width: 100%;
+      min-height: 80px;
+      padding: 12px;
+      font-family: inherit;
+      font-size: 13px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      resize: vertical;
+      line-height: 1.5;
+    }
+
+    swp-analyse-panel textarea:focus {
+      outline: none;
+      border-color: #8b5cf6;
+    }
+
+    /* Analyse tags */
+    swp-add-note-tag-option[data-tag="analyse"].selected {
+      background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix));
+      border-color: #8b5cf6;
+      color: #7c3aed;
+    }
+    swp-add-note-tag-option[data-tag="hovedbund"].selected {
+      background: color-mix(in srgb, var(--b-color-amber) 15%, var(--b-mix));
+      border-color: var(--b-color-amber);
+      color: #b45309;
+    }
+    swp-add-note-tag-option[data-tag="analyse"].selected::before {
+      background: #8b5cf6;
+      border-color: #8b5cf6;
+    }
+    swp-add-note-tag-option[data-tag="hovedbund"].selected::before {
+      background: var(--b-color-amber);
+      border-color: var(--b-color-amber);
+    }
+
+    /* Journal tag for analyse */
+    swp-journal-tag.tag-analyse {
+      background: color-mix(in srgb, #8b5cf6 15%, var(--b-mix));
+      border-color: #8b5cf6;
+      color: #7c3aed;
+    }
+    swp-journal-tag.tag-hovedbund {
+      background: color-mix(in srgb, var(--b-color-amber) 15%, var(--b-mix));
+      border-color: var(--b-color-amber);
+      color: #b45309;
+    }
+  </style>
+</head>
+<body>
+  <div class="demo-container">
+    <p style="font-size: 12px; color: var(--color-text-secondary); margin-bottom: 12px;">
+      Dobbeltklik på en event eller brug knapperne
+    </p>
+
+    <div class="demo-buttons">
+      <button class="demo-btn demo-btn-primary" onclick="openDrawer('arrived', 'web', true)">Online + journal</button>
+      <button class="demo-btn" onclick="openDrawer('created', 'manual', false)">Manuel</button>
+      <button class="demo-btn" onclick="openDrawer('paid', 'recurring', true)">Recurring</button>
+      <button class="demo-btn" onclick="openDrawer('noshow', 'web', false)">No-show</button>
+      <button class="demo-btn" onclick="openDrawer('cancelled', 'manual', true)">Cancelled</button>
+    </div>
+
+    <div class="calendar-mock">
+      <div class="calendar-mock-column">
+        <div class="mock-event" ondblclick="openDrawer('arrived')">
+          <div class="mock-event-time">10:00 - 11:00</div>
+          <div class="mock-event-title">Sofie Nielsen</div>
+        </div>
+        <div class="mock-event" ondblclick="openDrawer('created')">
+          <div class="mock-event-time">14:00 - 15:30</div>
+          <div class="mock-event-title">Lars Pedersen</div>
+        </div>
+      </div>
+      <div class="calendar-mock-column">
+        <div class="mock-event" ondblclick="openDrawer('paid')">
+          <div class="mock-event-time">09:00 - 10:00</div>
+          <div class="mock-event-title">Marie Hansen</div>
+        </div>
+      </div>
+      <div class="calendar-mock-column">
+        <div class="mock-event" ondblclick="openDrawer('noshow')">
+          <div class="mock-event-time">11:00 - 12:00</div>
+          <div class="mock-event-title">Peter Jensen</div>
+        </div>
+      </div>
+      <div class="calendar-mock-column"></div>
+      <div class="calendar-mock-column"></div>
+    </div>
+  </div>
+
+  <!-- Overlay -->
+  <swp-detail-drawer-overlay id="drawerOverlay" onclick="closeDrawer()"></swp-detail-drawer-overlay>
+
+  <!-- Journal Panel -->
+  <swp-journal-panel id="journalPanel">
+    <swp-journal-header>
+      <swp-journal-header-title>Journal</swp-journal-header-title>
+      <swp-journal-close onclick="closeJournal()">✕</swp-journal-close>
+    </swp-journal-header>
+
+    <!-- Tabs -->
+    <swp-journal-tabs>
+      <swp-journal-tab class="active" data-tab="noter" onclick="switchJournalTab('noter')"><span class="tab-indicator blue"></span>Noter</swp-journal-tab>
+      <swp-journal-tab data-tab="farveformler" onclick="switchJournalTab('farveformler')"><span class="tab-indicator amber"></span>Farveformler</swp-journal-tab>
+      <swp-journal-tab data-tab="analyse" onclick="switchJournalTab('analyse')"><span class="tab-indicator purple"></span>Analyse</swp-journal-tab>
+    </swp-journal-tabs>
+
+    <!-- Tab: Noter -->
+    <swp-journal-tab-content id="tabNoter" class="active">
+      <swp-journal-tab-header>
+        <swp-journal-tab-title>Kunde-journal <span>(langsigtet)</span></swp-journal-tab-title>
+        <swp-journal-tab-desc>Private noter om hår, reaktioner og anbefalinger. Kunden ser det ikke.</swp-journal-tab-desc>
+        <swp-journal-add-btn onclick="openAddNote()">+ Tilføj note</swp-journal-add-btn>
+      </swp-journal-tab-header>
+
+      <swp-journal-content>
+        <!-- Preview Entry for Notes -->
+        <swp-journal-entry id="previewEntry" class="preview hidden">
+          <swp-journal-entry-meta>
+            <swp-journal-entry-type>Note</swp-journal-entry-type>
+            <swp-journal-entry-tags id="previewTags"></swp-journal-entry-tags>
+          </swp-journal-entry-meta>
+          <swp-journal-entry-text id="previewText">(Tom note)</swp-journal-entry-text>
+          <swp-journal-entry-footer>
+            <swp-journal-entry-date id="previewDate">I dag</swp-journal-entry-date>
+            <swp-journal-entry-icons>
+              <swp-journal-entry-visibility id="previewVisibility">
+                <img src="icons/eye.svg" class="entry-icon" alt="">
+                <span>Alle</span>
+              </swp-journal-entry-visibility>
+              <swp-journal-entry-marking id="previewMarking" class="hidden"></swp-journal-entry-marking>
+            </swp-journal-entry-icons>
+          </swp-journal-entry-footer>
+        </swp-journal-entry>
+
+        <swp-journal-entry>
+          <swp-journal-entry-meta>
+            <swp-journal-entry-type>Note</swp-journal-entry-type>
+            <swp-journal-entry-tags>
+              <swp-journal-tag class="tag-allergi">Hovedbund</swp-journal-tag>
+              <swp-journal-tag class="tag-sensitiv">Sensitiv</swp-journal-tag>
+            </swp-journal-entry-tags>
+            <swp-journal-entry-delete title="Slet">🗑</swp-journal-entry-delete>
+          </swp-journal-entry-meta>
+          <swp-journal-entry-text>
+            Let irritation ved hårgrænsen. Anbefalet parfumefri shampoo + mild kur.<br>
+            Kunden reagerer på stærk parfume.
+          </swp-journal-entry-text>
+          <swp-journal-entry-footer>
+            <swp-journal-entry-date>2. sep 2025 · Af: Nina</swp-journal-entry-date>
+            <swp-journal-entry-icons>
+              <swp-journal-entry-visibility>
+                <img src="icons/eye.svg" class="entry-icon" alt="">
+                <span>Alle</span>
+              </swp-journal-entry-visibility>
+            </swp-journal-entry-icons>
+          </swp-journal-entry-footer>
+        </swp-journal-entry>
+      </swp-journal-content>
+    </swp-journal-tab-content>
+
+    <!-- Tab: Farveformler -->
+    <swp-journal-tab-content id="tabFarveformler">
+      <swp-journal-tab-header>
+        <swp-journal-tab-title>Farveformler <span>(historik)</span></swp-journal-tab-title>
+        <swp-journal-tab-desc>Gemte farveformler for denne kunde. Nem genbrug og konsistens.</swp-journal-tab-desc>
+        <swp-journal-add-btn onclick="openFarveformel()">+ Tilføj farveformel</swp-journal-add-btn>
+      </swp-journal-tab-header>
+
+      <swp-journal-content>
+        <!-- Preview Entry for Farveformler -->
+        <swp-journal-entry id="previewEntryFarveformel" class="preview hidden">
+          <swp-journal-entry-meta>
+            <swp-journal-entry-type class="farveformel">Farveformel</swp-journal-entry-type>
+            <swp-journal-entry-tags id="previewTagsFarveformel"></swp-journal-entry-tags>
+          </swp-journal-entry-meta>
+          <swp-journal-entry-text id="previewTextFarveformel">(Udfyld felter...)</swp-journal-entry-text>
+          <swp-journal-entry-footer>
+            <swp-journal-entry-date>I dag</swp-journal-entry-date>
+            <swp-journal-entry-icons>
+              <swp-journal-entry-visibility>
+                <img src="icons/eye.svg" class="entry-icon" alt="">
+                <span>Alle</span>
+              </swp-journal-entry-visibility>
+            </swp-journal-entry-icons>
+          </swp-journal-entry-footer>
+        </swp-journal-entry>
+
+        <swp-journal-entry>
+          <swp-journal-entry-meta>
+            <swp-journal-entry-type class="farveformel">Farveformel</swp-journal-entry-type>
+            <swp-journal-entry-delete title="Slet">🗑</swp-journal-entry-delete>
+          </swp-journal-entry-meta>
+          <swp-journal-entry-text>
+            • Mål/tone: Kold<br>
+            • Oxidant: <span class="mono">1.9%</span><br>
+            • Formel: <span class="mono">7/1 + 7/0 (1:1)</span><br>
+            • Virketid: <span class="mono">15 min</span><br>
+            • Placering: Hele håret<br><br>
+            Resultat: neutral/kold, god glans. Undgå varme toner næste gang.
+          </swp-journal-entry-text>
+          <swp-journal-entry-footer>
+            <swp-journal-entry-date>12. nov 2025 · Af: Maja</swp-journal-entry-date>
+            <swp-journal-entry-icons>
+              <swp-journal-entry-visibility>
+                <img src="icons/eye.svg" class="entry-icon" alt="">
+                <span>Alle</span>
+              </swp-journal-entry-visibility>
+            </swp-journal-entry-icons>
+          </swp-journal-entry-footer>
+        </swp-journal-entry>
+
+        <swp-journal-entry>
+          <swp-journal-entry-meta>
+            <swp-journal-entry-type class="farveformel">Farveformel</swp-journal-entry-type>
+            <swp-journal-entry-delete title="Slet">🗑</swp-journal-entry-delete>
+          </swp-journal-entry-meta>
+          <swp-journal-entry-text>
+            • Mål/tone: Neutral<br>
+            • Oxidant: <span class="mono">3%</span><br>
+            • Formel: <span class="mono">6/0 + 7/1 (2:1)</span><br>
+            • Virketid: <span class="mono">20 min</span><br>
+            • Placering: Rødder<br><br>
+            Første besøg. Kunden ønskede naturlig look.
+          </swp-journal-entry-text>
+          <swp-journal-entry-footer>
+            <swp-journal-entry-date>15. aug 2025 · Af: Maja</swp-journal-entry-date>
+            <swp-journal-entry-icons>
+              <swp-journal-entry-visibility>
+                <img src="icons/eye.svg" class="entry-icon" alt="">
+                <span>Alle</span>
+              </swp-journal-entry-visibility>
+            </swp-journal-entry-icons>
+          </swp-journal-entry-footer>
+        </swp-journal-entry>
+      </swp-journal-content>
+    </swp-journal-tab-content>
+
+    <!-- Tab: Analyse -->
+    <swp-journal-tab-content id="tabAnalyse">
+      <swp-journal-tab-header>
+        <swp-journal-tab-title>Hår & hovedbund <span>(analyse)</span></swp-journal-tab-title>
+        <swp-journal-tab-desc>Struktureret analyse af hår og hovedbund. Kan blive til advarsel.</swp-journal-tab-desc>
+        <swp-journal-add-btn onclick="openAnalyse()">+ Tilføj analyse</swp-journal-add-btn>
+      </swp-journal-tab-header>
+
+      <swp-journal-content>
+        <!-- Preview Entry for Analyse -->
+        <swp-journal-entry id="previewEntryAnalyse" class="preview hidden">
+          <swp-journal-entry-meta>
+            <swp-journal-entry-type class="analyse">Analyse</swp-journal-entry-type>
+            <swp-journal-entry-tags id="previewTagsAnalyse"></swp-journal-entry-tags>
+          </swp-journal-entry-meta>
+          <swp-journal-entry-text id="previewTextAnalyse">(Udfyld felter...)</swp-journal-entry-text>
+          <swp-journal-entry-footer>
+            <swp-journal-entry-date>I dag</swp-journal-entry-date>
+            <swp-journal-entry-icons>
+              <swp-journal-entry-visibility>
+                <img src="icons/eye.svg" class="entry-icon" alt="">
+                <span>Alle</span>
+              </swp-journal-entry-visibility>
+            </swp-journal-entry-icons>
+          </swp-journal-entry-footer>
+        </swp-journal-entry>
+
+        <swp-journal-entry>
+          <swp-journal-entry-meta>
+            <swp-journal-entry-type class="analyse">Analyse</swp-journal-entry-type>
+            <swp-journal-entry-tags>
+              <swp-journal-tag class="tag-analyse">Hovedbund</swp-journal-tag>
+              <swp-journal-tag class="tag-sensitiv">Sensitiv</swp-journal-tag>
+            </swp-journal-entry-tags>
+            <swp-journal-entry-delete title="Slet">🗑</swp-journal-entry-delete>
+          </swp-journal-entry-meta>
+          <swp-journal-entry-text>
+            • Hovedbund: Let irriteret<br>
+            • Hår: <span class="mono">Medium · Bølget</span><br>
+            • Porøsitet: <span class="mono">Medium</span><br>
+            • Kemisk beh.: Nej<br><br>
+            Let rødme ved hårgrænsen. Anbefalet parfumefri shampoo.
+          </swp-journal-entry-text>
+          <swp-journal-entry-footer>
+            <swp-journal-entry-date>2. sep 2025 · Af: Nina</swp-journal-entry-date>
+            <swp-journal-entry-icons>
+              <swp-journal-entry-visibility>
+                <img src="icons/eye.svg" class="entry-icon" alt="">
+                <span>Alle</span>
+              </swp-journal-entry-visibility>
+              <swp-journal-entry-marking class="warning">
+                <img src="icons/warning.svg" class="entry-icon" alt="">
+                <span>Advarsel</span>
+              </swp-journal-entry-marking>
+            </swp-journal-entry-icons>
+          </swp-journal-entry-footer>
+        </swp-journal-entry>
+      </swp-journal-content>
+    </swp-journal-tab-content>
+
+    <!-- Kundeprofil Toggle -->
+    <swp-journal-profile-section>
+      <swp-journal-profile-toggle onclick="toggleJournalProfile()">
+        <span class="toggle-arrow">▼</span> Vis "Kundeprofil" (hurtige facts)
+      </swp-journal-profile-toggle>
+      <swp-journal-profile-boxes id="journalProfileBoxes">
+        <swp-profile-box>
+          <swp-profile-box-label>Hårtype</swp-profile-box-label>
+          <swp-profile-box-value>Medium • Bølget</swp-profile-box-value>
+        </swp-profile-box>
+        <swp-profile-box>
+          <swp-profile-box-label>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>Præference</swp-profile-box-label>
+          <swp-profile-box-value>Kold tone, ikke for mørk</swp-profile-box-value>
+        </swp-profile-box>
+        <swp-profile-box class="warning">
+          <swp-profile-box-label>Advarsler</swp-profile-box-label>
+          <swp-profile-box-value>Parfume-allergi • Sensitiv hovedbund</swp-profile-box-value>
+        </swp-profile-box>
+      </swp-journal-profile-boxes>
+    </swp-journal-profile-section>
+  </swp-journal-panel>
+
+  <!-- Add Note Panel -->
+  <swp-add-note-panel id="addNotePanel">
+    <swp-add-note-header>
+      <swp-add-note-title>Opret ny note</swp-add-note-title>
+      <swp-add-note-close onclick="closeAddNote()">✕</swp-add-note-close>
+    </swp-add-note-header>
+
+    <swp-add-note-content>
+      <swp-add-note-desc>God til observationer, præferencer, reaktioner og næste gang-plan.</swp-add-note-desc>
+
+      <!-- Tags -->
+      <swp-add-note-field>
+        <swp-add-note-label>Tags (klik for at tilføje)</swp-add-note-label>
+        <swp-add-note-tags>
+          <swp-add-note-tag-option class="selected" data-tag="note">Fri note</swp-add-note-tag-option>
+          <swp-add-note-tag-option data-tag="sensitiv">Sensitiv</swp-add-note-tag-option>
+          <swp-add-note-tag-option data-tag="allergi">Allergi</swp-add-note-tag-option>
+          <swp-add-note-tag-option data-tag="praference">Præference</swp-add-note-tag-option>
+          <swp-add-note-tag-option data-tag="anbefaling">Anbefaling</swp-add-note-tag-option>
+        </swp-add-note-tags>
+        <swp-add-note-tip>Tip: I et rigtigt system kan tags være søgbare/standardiserede.</swp-add-note-tip>
+      </swp-add-note-field>
+
+      <!-- Note Textarea -->
+      <swp-add-note-field>
+        <swp-add-note-label>Note</swp-add-note-label>
+        <textarea placeholder="Fx: Kunden vil have kold tone og ikke for mørk. Reagerer på parfume. Næste gang: kortere pandehår."></textarea>
+      </swp-add-note-field>
+
+      <!-- Dropdowns -->
+      <swp-add-note-dropdowns>
+        <swp-add-note-dropdown-group>
+          <swp-add-note-label>Synlighed</swp-add-note-label>
+          <select>
+            <option>Hele salonen</option>
+            <option>Kun mig</option>
+          </select>
+          <swp-add-note-help>Hvis I er flere frisører, kan "Kun mig" være nyttigt.</swp-add-note-help>
+        </swp-add-note-dropdown-group>
+        <swp-add-note-dropdown-group>
+          <swp-add-note-label>Markering</swp-add-note-label>
+          <select>
+            <option>Ingen</option>
+            <option>Vigtigt</option>
+            <option>Advarsel</option>
+          </select>
+          <swp-add-note-help>"Advarsel" kan vise ikon på kundekortet.</swp-add-note-help>
+        </swp-add-note-dropdown-group>
+      </swp-add-note-dropdowns>
+    </swp-add-note-content>
+
+    <swp-add-note-footer>
+      <swp-add-note-btn class="secondary" onclick="closeAddNote()">Annuller</swp-add-note-btn>
+      <swp-add-note-btn class="primary">Gem note</swp-add-note-btn>
+    </swp-add-note-footer>
+  </swp-add-note-panel>
+
+  <!-- Farveformel Panel -->
+  <swp-farveformel-panel id="farveformelPanel">
+    <swp-add-note-header>
+      <swp-add-note-title>Farveformel</swp-add-note-title>
+      <swp-add-note-close onclick="closeFarveformel()">✕</swp-add-note-close>
+    </swp-add-note-header>
+
+    <swp-add-note-content>
+      <swp-add-note-desc>Struktureret nok til at kunne genskabes. Gemmes som journalnote.</swp-add-note-desc>
+
+      <!-- Row 1: Mål/tone + Oxidant -->
+      <swp-add-note-row>
+        <swp-add-note-field>
+          <swp-add-note-label>Mål / tone</swp-add-note-label>
+          <select id="ffMaalTone">
+            <option value="">Vælg...</option>
+            <option value="Kold">Kold</option>
+            <option value="Varm">Varm</option>
+            <option value="Neutral">Neutral</option>
+          </select>
+        </swp-add-note-field>
+        <swp-add-note-field>
+          <swp-add-note-label>Oxidant / styrke</swp-add-note-label>
+          <select id="ffOxidant">
+            <option value="">Vælg...</option>
+            <option value="1.9%">1.9%</option>
+            <option value="3%">3%</option>
+            <option value="6%">6%</option>
+            <option value="9%">9%</option>
+            <option value="12%">12%</option>
+          </select>
+        </swp-add-note-field>
+      </swp-add-note-row>
+
+      <!-- Row 2: Formel + Blandingsforhold -->
+      <swp-add-note-row>
+        <swp-add-note-field>
+          <swp-add-note-label>Formel (skriv som du vil)</swp-add-note-label>
+          <input type="text" id="ffFormel" placeholder="Fx: 7/1 + 7/0 (1:1)">
+          <swp-add-note-tip>Monospace gør formler nemmere at læse.</swp-add-note-tip>
+        </swp-add-note-field>
+        <swp-add-note-field>
+          <swp-add-note-label>Blandingsforhold</swp-add-note-label>
+          <input type="text" id="ffBlandingsforhold" placeholder="Fx: 1:2">
+        </swp-add-note-field>
+      </swp-add-note-row>
+
+      <!-- Row 3: Virketid + Placering -->
+      <swp-add-note-row>
+        <swp-add-note-field>
+          <swp-add-note-label>Virketid</swp-add-note-label>
+          <input type="text" id="ffVirketid" placeholder="Fx: 15 min">
+        </swp-add-note-field>
+        <swp-add-note-field>
+          <swp-add-note-label>Placering</swp-add-note-label>
+          <select id="ffPlacering">
+            <option value="">Vælg...</option>
+            <option value="Hele håret">Hele håret</option>
+            <option value="Rødder">Rødder</option>
+            <option value="Længder">Længder</option>
+            <option value="Spidser">Spidser</option>
+          </select>
+        </swp-add-note-field>
+      </swp-add-note-row>
+
+      <!-- Resultat / note -->
+      <swp-add-note-field class="full-width">
+        <swp-add-note-label>Resultat / note</swp-add-note-label>
+        <textarea id="ffResultat" placeholder="Fx: Resultat kold/neutral, god glans. Undgå varme toner næste gang."></textarea>
+      </swp-add-note-field>
+
+    </swp-add-note-content>
+
+    <swp-add-note-footer>
+      <swp-add-note-btn class="secondary" onclick="closeFarveformel()">Annuller</swp-add-note-btn>
+      <swp-add-note-btn class="primary" onclick="saveFarveformel()">Gem farveformel</swp-add-note-btn>
+    </swp-add-note-footer>
+  </swp-farveformel-panel>
+
+  <!-- Analyse Panel -->
+  <swp-analyse-panel id="analysePanel">
+    <swp-add-note-header>
+      <swp-add-note-title>Shampoo & hovedbund-analyse</swp-add-note-title>
+      <swp-add-note-close onclick="closeAnalyse()">✕</swp-add-note-close>
+    </swp-add-note-header>
+
+    <swp-add-note-content>
+      <swp-add-note-desc>Hurtige valg + bemærkning. Kan blive til "sticky warning".</swp-add-note-desc>
+
+      <!-- Row 1: Hovedbund + Irritation -->
+      <swp-add-note-row>
+        <swp-add-note-field>
+          <swp-add-note-label>Hovedbund (tilstand)</swp-add-note-label>
+          <select id="anHovedbund">
+            <option value="">Vælg...</option>
+            <option value="Normal">Normal</option>
+            <option value="Tør">Tør</option>
+            <option value="Fedtet">Fedtet</option>
+            <option value="Let irriteret">Let irriteret</option>
+            <option value="Irriteret">Irriteret</option>
+          </select>
+        </swp-add-note-field>
+        <swp-add-note-field>
+          <swp-add-note-label>Irritation</swp-add-note-label>
+          <select id="anIrritation">
+            <option value="">Vælg...</option>
+            <option value="Ingen">Ingen</option>
+            <option value="Let">Let</option>
+            <option value="Moderat">Moderat</option>
+            <option value="Kraftig">Kraftig</option>
+          </select>
+        </swp-add-note-field>
+      </swp-add-note-row>
+
+      <!-- Row 2: Hår tykkelse + struktur -->
+      <swp-add-note-row>
+        <swp-add-note-field>
+          <swp-add-note-label>Hår (tykkelse)</swp-add-note-label>
+          <select id="anHaarTykkelse">
+            <option value="">Vælg...</option>
+            <option value="Fint">Fint</option>
+            <option value="Medium">Medium</option>
+            <option value="Tykt">Tykt</option>
+          </select>
+        </swp-add-note-field>
+        <swp-add-note-field>
+          <swp-add-note-label>Hår (struktur)</swp-add-note-label>
+          <select id="anHaarStruktur">
+            <option value="">Vælg...</option>
+            <option value="Glat">Glat</option>
+            <option value="Bølget">Bølget</option>
+            <option value="Krøllet">Krøllet</option>
+          </select>
+        </swp-add-note-field>
+      </swp-add-note-row>
+
+      <!-- Row 3: Porøsitet + Kemisk behandling -->
+      <swp-add-note-row>
+        <swp-add-note-field>
+          <swp-add-note-label>Porøsitet</swp-add-note-label>
+          <select id="anPorositet">
+            <option value="">Vælg...</option>
+            <option value="Lav">Lav</option>
+            <option value="Medium">Medium</option>
+            <option value="Høj">Høj</option>
+          </select>
+        </swp-add-note-field>
+        <swp-add-note-field>
+          <swp-add-note-label>Tidligere kemisk behandling?</swp-add-note-label>
+          <select id="anKemisk">
+            <option value="">Vælg...</option>
+            <option value="Nej">Nej</option>
+            <option value="Ja">Ja</option>
+          </select>
+        </swp-add-note-field>
+      </swp-add-note-row>
+
+      <!-- Row 4: Shampoo + Hjemmepleje -->
+      <swp-add-note-row>
+        <swp-add-note-field>
+          <swp-add-note-label>Anvendt shampoo</swp-add-note-label>
+          <input type="text" id="anShampoo" placeholder="Fx: Kerastase Bain">
+        </swp-add-note-field>
+        <swp-add-note-field>
+          <swp-add-note-label>Anbefalet hjemmepleje</swp-add-note-label>
+          <input type="text" id="anHjemmepleje" placeholder="Fx: Parfumefri shampoo">
+        </swp-add-note-field>
+      </swp-add-note-row>
+
+      <!-- Bemærkning -->
+      <swp-add-note-field class="full-width">
+        <swp-add-note-label>Bemærkning</swp-add-note-label>
+        <textarea id="anBemaerkning" placeholder="Fx: Let rødme ved hårgrænsen. Undgå parfume og stærke sulfater."></textarea>
+      </swp-add-note-field>
+
+      <!-- Row 5: Advarsel + Tags -->
+      <swp-add-note-row>
+        <swp-add-note-field>
+          <swp-add-note-label>Gør til advarsel på kundekort?</swp-add-note-label>
+          <select id="anAdvarsel">
+            <option value="Nej">Nej</option>
+            <option value="Ja">Ja</option>
+          </select>
+          <swp-add-note-help>Brug "Ja" ved fx allergi/sensitivitet.</swp-add-note-help>
+        </swp-add-note-field>
+        <swp-add-note-field>
+          <swp-add-note-label>Tags</swp-add-note-label>
+          <swp-add-note-tags>
+            <swp-add-note-tag-option class="selected" data-tag="analyse">Analyse</swp-add-note-tag-option>
+            <swp-add-note-tag-option data-tag="hovedbund">Hovedbund</swp-add-note-tag-option>
+            <swp-add-note-tag-option data-tag="sensitiv">Sensitiv</swp-add-note-tag-option>
+            <swp-add-note-tag-option data-tag="allergi">Allergi</swp-add-note-tag-option>
+          </swp-add-note-tags>
+        </swp-add-note-field>
+      </swp-add-note-row>
+    </swp-add-note-content>
+
+    <swp-add-note-footer>
+      <swp-add-note-btn class="secondary" onclick="closeAnalyse()">Annuller</swp-add-note-btn>
+      <swp-add-note-btn class="primary" onclick="saveAnalyse()">Gem analyse</swp-add-note-btn>
+    </swp-add-note-footer>
+  </swp-analyse-panel>
+
+  <!-- Customer Details Panel -->
+  <swp-customer-panel id="customerPanel">
+    <swp-customer-panel-header>
+      <swp-customer-panel-title><img src="icons/user.svg" class="panel-header-icon" alt="">Kundedetaljer</swp-customer-panel-title>
+      <swp-customer-panel-close onclick="closeCustomerPanel()">✕</swp-customer-panel-close>
+    </swp-customer-panel-header>
+    <swp-customer-panel-content>
+      <!-- Customer header with avatar -->
+      <swp-customer-header-section>
+        <swp-customer-avatar>SN</swp-customer-avatar>
+        <swp-customer-header-info>
+          <swp-customer-header-top>
+            <swp-customer-header-left>
+              <swp-customer-header-name>Sofie Nielsen</swp-customer-header-name>
+              <swp-customer-since>Kunde siden marts 2024</swp-customer-since>
+            </swp-customer-header-left>
+            <swp-customer-header-contact>
+              <swp-customer-header-contact-item>
+                <a href="tel:+4523456789">+45 23 45 67 89</a>
+              </swp-customer-header-contact-item>
+              <swp-customer-header-contact-item>
+                <a href="mailto:sofie@email.dk">sofie@email.dk</a>
+              </swp-customer-header-contact-item>
+            </swp-customer-header-contact>
+          </swp-customer-header-top>
+        </swp-customer-header-info>
+      </swp-customer-header-section>
+
+      <!-- Fact boxes -->
+      <swp-fact-boxes>
+        <swp-fact-box class="highlight">
+          <swp-fact-box-value>12.450 kr</swp-fact-box-value>
+          <swp-fact-box-label>Total omsætning</swp-fact-box-label>
+        </swp-fact-box>
+        <swp-fact-box>
+          <swp-fact-box-value>14</swp-fact-box-value>
+          <swp-fact-box-label>Besøg</swp-fact-box-label>
+        </swp-fact-box>
+        <swp-fact-box>
+          <swp-fact-box-value>889 kr</swp-fact-box-value>
+          <swp-fact-box-label>Gns. pr. besøg</swp-fact-box-label>
+        </swp-fact-box>
+        <swp-fact-box>
+          <swp-fact-box-value>32 dage</swp-fact-box-value>
+          <swp-fact-box-label>Gns. interval</swp-fact-box-label>
+        </swp-fact-box>
+      </swp-fact-boxes>
+
+      <!-- Chart -->
+      <swp-chart-section>
+        <swp-chart-header>
+          <swp-chart-title>Omsætning (sidste 6 mdr)</swp-chart-title>
+          <swp-chart-legend>
+            <swp-chart-legend-item>
+              <swp-chart-legend-dot class="services"></swp-chart-legend-dot>
+              <span>Services</span>
+            </swp-chart-legend-item>
+            <swp-chart-legend-item>
+              <swp-chart-legend-dot class="products"></swp-chart-legend-dot>
+              <span>Produkter</span>
+            </swp-chart-legend-item>
+          </swp-chart-legend>
+        </swp-chart-header>
+        <swp-chart-container id="customerRevenueChart"></swp-chart-container>
+      </swp-chart-section>
+
+      <!-- Last 5 products -->
+      <swp-products-section>
+        <swp-section-label>Seneste produktkøb</swp-section-label>
+        <swp-products-list>
+          <swp-product-item>
+            <swp-product-info>
+              <swp-product-name>Olaplex No. 3</swp-product-name>
+              <swp-product-date>9. dec 2025</swp-product-date>
+            </swp-product-info>
+            <swp-product-price>300 kr</swp-product-price>
+          </swp-product-item>
+          <swp-product-item>
+            <swp-product-info>
+              <swp-product-name>Kevin Murphy Hydrate-Me Wash</swp-product-name>
+              <swp-product-date>12. nov 2025</swp-product-date>
+            </swp-product-info>
+            <swp-product-price>275 kr</swp-product-price>
+          </swp-product-item>
+          <swp-product-item>
+            <swp-product-info>
+              <swp-product-name>Olaplex No. 4 Bond Shampoo</swp-product-name>
+              <swp-product-date>18. okt 2025</swp-product-date>
+            </swp-product-info>
+            <swp-product-price>320 kr</swp-product-price>
+          </swp-product-item>
+          <swp-product-item>
+            <swp-product-info>
+              <swp-product-name>Moroccanoil Treatment</swp-product-name>
+              <swp-product-date>5. sep 2025</swp-product-date>
+            </swp-product-info>
+            <swp-product-price>399 kr</swp-product-price>
+          </swp-product-item>
+          <swp-product-item>
+            <swp-product-info>
+              <swp-product-name>Olaplex No. 5 Conditioner</swp-product-name>
+              <swp-product-date>12. aug 2025</swp-product-date>
+            </swp-product-info>
+            <swp-product-price>320 kr</swp-product-price>
+          </swp-product-item>
+        </swp-products-list>
+      </swp-products-section>
+
+      <!-- Preferences -->
+      <swp-preferences-section>
+        <swp-section-label>Præferencer & noter</swp-section-label>
+        <swp-preferences-grid>
+          <swp-preference-item>
+            <swp-preference-label>Foretrukken frisør</swp-preference-label>
+            <swp-preference-value>Emma Larsen</swp-preference-value>
+          </swp-preference-item>
+          <swp-preference-item>
+            <swp-preference-label>Hårtype</swp-preference-label>
+            <swp-preference-value>Fint, medium tykkelse</swp-preference-value>
+          </swp-preference-item>
+          <swp-preference-item>
+            <swp-preference-label>Farvehistorik</swp-preference-label>
+            <swp-preference-value>7.3 + 7.4 blanding</swp-preference-value>
+          </swp-preference-item>
+          <swp-preference-item>
+            <swp-preference-label>Allergier</swp-preference-label>
+            <swp-preference-value>Ingen kendte</swp-preference-value>
+          </swp-preference-item>
+        </swp-preferences-grid>
+      </swp-preferences-section>
+    </swp-customer-panel-content>
+  </swp-customer-panel>
+
+  <!-- Detail Drawer -->
+  <swp-detail-drawer id="detailDrawer">
+    <swp-drawer-header>
+      <swp-drawer-title id="drawerTitle" class="source-web">Online Booking</swp-drawer-title>
+      <swp-created-date>oprettet 5. aug 2025, 14:32</swp-created-date>
+    </swp-drawer-header>
+
+    <swp-drawer-content>
+      <!-- Event time/date -->
+      <swp-event-info>
+        <swp-event-time-display>10:00 - 11:00</swp-event-time-display>
+        <swp-event-date-display>Mandag 9. december 2025</swp-event-date-display>
+      </swp-event-info>
+
+      <!-- Customer -->
+      <swp-drawer-section>
+        <swp-section-label>Kunde</swp-section-label>
+        <swp-customer-info>
+          <swp-customer-row>
+            <swp-customer-name>Sofie Nielsen</swp-customer-name>
+            <swp-customer-phone><a href="tel:+4523456789">+45 23 45 67 89</a></swp-customer-phone>
+          </swp-customer-row>
+          <swp-customer-details-link id="customerDetailsLink" onclick="openCustomerPanel()">Vis detaljer <img src="icons/angle-small-right.svg" class="link-chevron" alt=""></swp-customer-details-link>
+        </swp-customer-info>
+      </swp-drawer-section>
+
+      <!-- Status -->
+      <swp-drawer-section>
+        <swp-status-row>
+          <swp-status-label>Status</swp-status-label>
+          <button class="status-badge status-arrived" id="statusBadge" popovertarget="statusDropdown">
+            <swp-status-dot></swp-status-dot>
+            <span id="statusText">Ankommet</span>
+          </button>
+          <swp-status-dropdown id="statusDropdown" popover>
+            <swp-status-option class="opt-created" data-status="created" onclick="selectStatus('created')">
+              <swp-status-dot></swp-status-dot>
+              <span>Oprettet</span>
+              <swp-status-check>✓</swp-status-check>
+            </swp-status-option>
+            <swp-status-option class="opt-arrived" data-status="arrived" onclick="selectStatus('arrived')">
+              <swp-status-dot></swp-status-dot>
+              <span>Ankommet</span>
+              <swp-status-check>✓</swp-status-check>
+            </swp-status-option>
+            <swp-status-option class="opt-paid" data-status="paid" onclick="selectStatus('paid')">
+              <swp-status-dot></swp-status-dot>
+              <span>Betalt</span>
+              <swp-status-check>✓</swp-status-check>
+            </swp-status-option>
+            <swp-status-option class="opt-noshow" data-status="noshow" onclick="selectStatus('noshow')">
+              <swp-status-dot></swp-status-dot>
+              <span>Udeblevet</span>
+              <swp-status-check>✓</swp-status-check>
+            </swp-status-option>
+            <swp-status-option class="opt-cancelled" data-status="cancelled" onclick="selectStatus('cancelled')">
+              <swp-status-dot></swp-status-dot>
+              <span>Aflyst</span>
+              <swp-status-check>✓</swp-status-check>
+            </swp-status-option>
+          </swp-status-dropdown>
+        </swp-status-row>
+      </swp-drawer-section>
+
+      <!-- Services -->
+      <swp-drawer-section>
+        <swp-section-label>Services</swp-section-label>
+        <swp-services-list>
+          <swp-service-item>
+            <swp-service-name>Klipning og styling</swp-service-name>
+            <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 · <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>
+      </swp-drawer-section>
+
+      <!-- Total -->
+      <swp-drawer-section>
+        <swp-total-row>
+          <swp-total-label>Total</swp-total-label>
+          <swp-total-amount>1.300 kr</swp-total-amount>
+        </swp-total-row>
+      </swp-drawer-section>
+
+      <!-- Notes -->
+      <swp-drawer-section>
+        <swp-section-label>Noter</swp-section-label>
+        <swp-notes-box>
+          Kunden foretrækker naturlige farver og ønsker lidt ekstra tid til konsultation
+        </swp-notes-box>
+      </swp-drawer-section>
+
+      <!-- Customer profile boxes -->
+      <swp-drawer-section>
+        <swp-section-label>Profil</swp-section-label>
+        <swp-profile-boxes>
+          <swp-profile-box>
+            <swp-profile-box-label>Hårtype</swp-profile-box-label>
+            <swp-profile-box-value>Medium • Bølget</swp-profile-box-value>
+          </swp-profile-box>
+          <swp-profile-box>
+            <swp-profile-box-label>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>Præference</swp-profile-box-label>
+            <swp-profile-box-value>Kold tone, ikke for mørk</swp-profile-box-value>
+          </swp-profile-box>
+          <swp-profile-box class="warning">
+            <swp-profile-box-label>Advarsler</swp-profile-box-label>
+            <swp-profile-box-value>Parfume-allergi • Sensitiv hovedbund</swp-profile-box-value>
+          </swp-profile-box>
+        </swp-profile-boxes>
+        <swp-journal-details-link id="journalLink" onclick="toggleJournal()">Se journal <img src="icons/angle-small-right.svg" class="link-chevron" alt=""></swp-journal-details-link>
+      </swp-drawer-section>
+
+    </swp-drawer-content>
+
+    <swp-drawer-footer id="drawerFooter">
+      <swp-footer-btn class="btn-primary" id="payBtn">Gå til betaling</swp-footer-btn>
+    </swp-drawer-footer>
+  </swp-detail-drawer>
+
+  <script>
+    const statusLabels = {
+      created: 'Oprettet',
+      arrived: 'Ankommet',
+      paid: 'Betalt',
+      noshow: 'Udeblevet',
+      cancelled: 'Aflyst'
+    };
+
+    const sourceTitles = {
+      manual: 'Manuel Booking',
+      web: 'Online Booking',
+      recurring: 'Gentagende Booking'
+    };
+
+    function openDrawer(status = 'arrived', source = 'web', hasJournal = true) {
+      document.getElementById('drawerOverlay').classList.add('open');
+      document.getElementById('detailDrawer').classList.add('open');
+
+      // Update current status for dropdown
+      currentStatus = status;
+
+      // Update status badge
+      const badge = document.getElementById('statusBadge');
+      const text = document.getElementById('statusText');
+      badge.className = 'status-badge status-' + status;
+      text.textContent = statusLabels[status];
+
+      // Update drawer title based on source
+      const title = document.getElementById('drawerTitle');
+      title.textContent = sourceTitles[source];
+      title.className = 'source-' + source;
+
+      // Update journal link
+      const journalLink = document.getElementById('journalLink');
+      const chevronImg = '<img src="icons/angle-small-right.svg" class="link-chevron" alt="">';
+
+      if (hasJournal) {
+        journalLink.classList.remove('no-journal');
+        journalLink.innerHTML = 'Se journal ' + chevronImg;
+      } else {
+        journalLink.classList.add('no-journal');
+        journalLink.innerHTML = '+ Opret journal';
+      }
+
+      // Update footer based on status
+      const footer = document.getElementById('drawerFooter');
+      const payBtn = document.getElementById('payBtn');
+      footer.className = 'status-' + status;
+
+      const btnLabels = {
+        created: 'Gå til betaling',
+        arrived: 'Gå til betaling',
+        paid: 'Betalt ✓',
+        noshow: 'Udeblevet',
+        cancelled: 'Aflyst'
+      };
+      payBtn.textContent = btnLabels[status];
+    }
+
+    function closeDrawer() {
+      document.getElementById('drawerOverlay').classList.remove('open');
+      document.getElementById('detailDrawer').classList.remove('open');
+      document.getElementById('journalPanel').classList.remove('open');
+      document.getElementById('customerPanel').classList.remove('open');
+      document.getElementById('addNotePanel').classList.remove('open');
+      document.getElementById('journalLink').classList.remove('panel-open');
+      document.getElementById('customerDetailsLink').classList.remove('panel-open');
+    }
+
+    function toggleJournal() {
+      const journalLink = document.getElementById('journalLink');
+      // Don't open journal if it's the "create" state
+      if (journalLink.classList.contains('no-journal')) {
+        // Could show create journal flow here
+        return;
+      }
+      const journalPanel = document.getElementById('journalPanel');
+      journalPanel.classList.toggle('open');
+      journalLink.classList.toggle('panel-open', journalPanel.classList.contains('open'));
+    }
+
+    function closeJournal() {
+      document.getElementById('journalPanel').classList.remove('open');
+      document.getElementById('journalLink').classList.remove('panel-open');
+      closeAddNote();
+      closeFarveformel();
+      closeAnalyse();
+    }
+
+    function switchJournalTab(tabName) {
+      // Update tab buttons
+      document.querySelectorAll('swp-journal-tab[data-tab]').forEach(tab => {
+        tab.classList.toggle('active', tab.dataset.tab === tabName);
+      });
+      // Update tab content
+      document.getElementById('tabNoter').classList.toggle('active', tabName === 'noter');
+      document.getElementById('tabFarveformler').classList.toggle('active', tabName === 'farveformler');
+      document.getElementById('tabAnalyse').classList.toggle('active', tabName === 'analyse');
+      // Close any open panels
+      closeAddNote();
+      closeFarveformel();
+      closeAnalyse();
+    }
+
+    function openAddNote() {
+      document.getElementById('addNotePanel').classList.add('open');
+    }
+
+    function closeAddNote() {
+      document.getElementById('addNotePanel').classList.remove('open');
+      hidePreview();
+      resetAddNoteForm();
+    }
+
+    function toggleJournalProfile() {
+      const toggle = document.querySelector('swp-journal-profile-toggle');
+      const boxes = document.getElementById('journalProfileBoxes');
+      toggle.classList.toggle('collapsed');
+      boxes.classList.toggle('collapsed');
+    }
+
+    function openCustomerPanel() {
+      const panel = document.getElementById('customerPanel');
+      const link = document.getElementById('customerDetailsLink');
+      const isOpen = panel.classList.contains('open');
+
+      if (isOpen) {
+        panel.classList.remove('open');
+        link.classList.remove('panel-open');
+      } else {
+        panel.classList.add('open');
+        link.classList.add('panel-open');
+      }
+    }
+
+    function closeCustomerPanel() {
+      document.getElementById('customerPanel').classList.remove('open');
+      document.getElementById('customerDetailsLink').classList.remove('panel-open');
+    }
+
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') closeDrawer();
+    });
+
+    // Status dropdown (Popover API)
+    let currentStatus = 'arrived';
+    const dropdown = document.getElementById('statusDropdown');
+    const badge = document.getElementById('statusBadge');
+
+    // Update selection when popover is about to open
+    dropdown.addEventListener('beforetoggle', (e) => {
+      if (e.newState === 'open') {
+        updateDropdownSelection();
+      }
+    });
+
+    // Position after popover opens
+    dropdown.addEventListener('toggle', (e) => {
+      if (e.newState === 'open') {
+        const rect = badge.getBoundingClientRect();
+        dropdown.style.position = 'fixed';
+        dropdown.style.top = `${rect.bottom + 4}px`;
+        dropdown.style.left = `${rect.right - dropdown.offsetWidth}px`;
+      }
+    });
+
+    function updateDropdownSelection() {
+      const options = document.querySelectorAll('swp-status-option');
+      options.forEach(opt => {
+        opt.classList.toggle('selected', opt.dataset.status === currentStatus);
+      });
+    }
+
+    function selectStatus(status) {
+      currentStatus = status;
+
+      // Update badge
+      const badge = document.getElementById('statusBadge');
+      const text = document.getElementById('statusText');
+      badge.className = 'status-badge status-' + status;
+      text.textContent = statusLabels[status];
+
+      // Update footer
+      const footer = document.getElementById('drawerFooter');
+      const payBtn = document.getElementById('payBtn');
+      footer.className = 'status-' + status;
+
+      const btnLabels = {
+        created: 'Gå til betaling',
+        arrived: 'Gå til betaling',
+        paid: 'Betalt ✓',
+        noshow: 'Udeblevet',
+        cancelled: 'Aflyst'
+      };
+      payBtn.textContent = btnLabels[status];
+
+      // Close popover
+      dropdown.hidePopover();
+    }
+
+    // Add note tags: multi-select (toggle) + update preview
+    document.querySelectorAll('swp-add-note-tag-option').forEach(tag => {
+      tag.onclick = () => {
+        tag.classList.toggle('selected');
+        updatePreviewTags();
+      };
+    });
+
+    // Live Preview Logic
+    const addNoteTextarea = document.querySelector('swp-add-note-content textarea');
+    const previewEntry = document.getElementById('previewEntry');
+    const previewText = document.getElementById('previewText');
+    const previewTags = document.getElementById('previewTags');
+    const previewVisibility = document.getElementById('previewVisibility');
+    const previewMarking = document.getElementById('previewMarking');
+    const visibilitySelect = document.querySelector('swp-add-note-dropdown-group:nth-child(1) select');
+    const markingSelect = document.querySelector('swp-add-note-dropdown-group:nth-child(2) select');
+
+    // Show preview on textarea focus
+    addNoteTextarea.addEventListener('focus', showPreview);
+
+    // Update visibility in preview
+    visibilitySelect.addEventListener('change', updatePreviewVisibility);
+
+    // Update marking in preview
+    markingSelect.addEventListener('change', updatePreviewMarking);
+
+    // Update preview text in real-time
+    addNoteTextarea.addEventListener('input', () => {
+      previewText.textContent = addNoteTextarea.value || '(Tom note)';
+    });
+
+    function showPreview() {
+      previewEntry.classList.remove('hidden');
+      updatePreviewTags();
+    }
+
+    function hidePreview() {
+      previewEntry.classList.add('hidden');
+    }
+
+    function updatePreviewTags() {
+      const selectedTags = document.querySelectorAll('swp-add-note-tag-option.selected');
+      previewTags.innerHTML = '';
+      selectedTags.forEach(tag => {
+        const tagEl = document.createElement('swp-journal-tag');
+        tagEl.textContent = tag.textContent;
+        tagEl.classList.add('tag-' + tag.dataset.tag);
+        previewTags.appendChild(tagEl);
+      });
+    }
+
+    function updatePreviewVisibility() {
+      const value = visibilitySelect.value;
+      const text = value === 'Kun mig' ? 'Kun dig' : 'Alle';
+      previewVisibility.querySelector('span').textContent = text;
+    }
+
+    function updatePreviewMarking() {
+      const value = markingSelect.value;
+      previewMarking.className = '';
+
+      if (value === 'Ingen') {
+        previewMarking.classList.add('hidden');
+        previewMarking.innerHTML = '';
+      } else if (value === 'Vigtigt') {
+        previewMarking.classList.add('important');
+        previewMarking.innerHTML = '<img src="icons/exclamation.svg" class="entry-icon" alt=""><span>Vigtigt</span>';
+      } else if (value === 'Advarsel') {
+        previewMarking.classList.add('warning');
+        previewMarking.innerHTML = '<img src="icons/warning.svg" class="entry-icon" alt=""><span>Advarsel</span>';
+      }
+    }
+
+    function resetAddNoteForm() {
+      addNoteTextarea.value = '';
+      previewText.textContent = '(Tom note)';
+      document.querySelectorAll('swp-add-note-tag-option').forEach(tag => {
+        if (tag.textContent === 'Fri note') {
+          tag.classList.add('selected');
+        } else {
+          tag.classList.remove('selected');
+        }
+      });
+      visibilitySelect.value = 'Hele salonen';
+      markingSelect.value = 'Ingen';
+      updatePreviewTags();
+      updatePreviewVisibility();
+      updatePreviewMarking();
+    }
+
+    // ==========================================
+    // FARVEFORMEL PANEL
+    // ==========================================
+    let activePanel = null; // 'note' or 'farveformel'
+
+    // Farveformel elements
+    const ffMaalTone = document.getElementById('ffMaalTone');
+    const ffOxidant = document.getElementById('ffOxidant');
+    const ffFormel = document.getElementById('ffFormel');
+    const ffBlandingsforhold = document.getElementById('ffBlandingsforhold');
+    const ffVirketid = document.getElementById('ffVirketid');
+    const ffPlacering = document.getElementById('ffPlacering');
+    const ffResultat = document.getElementById('ffResultat');
+    const previewType = document.querySelector('#previewEntry swp-journal-entry-type');
+
+    // Farveformel preview elements (in farveformler tab)
+    const previewEntryFarveformel = document.getElementById('previewEntryFarveformel');
+    const previewTextFarveformel = document.getElementById('previewTextFarveformel');
+
+    function openFarveformel() {
+      document.getElementById('farveformelPanel').classList.add('open');
+      activePanel = 'farveformel';
+      showFarveformelPreview();
+    }
+
+    function closeFarveformel() {
+      document.getElementById('farveformelPanel').classList.remove('open');
+      hideFarveformelPreview();
+      resetFarveformelForm();
+      activePanel = null;
+    }
+
+    function showFarveformelPreview() {
+      previewEntryFarveformel.classList.remove('hidden');
+      updateFarveformelPreview();
+    }
+
+    function hideFarveformelPreview() {
+      previewEntryFarveformel.classList.add('hidden');
+    }
+
+    function updateFarveformelPreview() {
+      const lines = [];
+
+      if (ffMaalTone.value) {
+        lines.push(`• Mål/tone: ${ffMaalTone.value}`);
+      }
+      if (ffOxidant.value) {
+        lines.push(`• Oxidant: <span class="mono">${ffOxidant.value}</span>`);
+      }
+      if (ffFormel.value) {
+        lines.push(`• Formel: <span class="mono">${ffFormel.value}</span>`);
+      } else {
+        lines.push(`• Formel: <span class="mono">(ikke angivet)</span>`);
+      }
+      if (ffBlandingsforhold.value) {
+        lines.push(`• Blanding: <span class="mono">${ffBlandingsforhold.value}</span>`);
+      }
+      if (ffVirketid.value) {
+        lines.push(`• Virketid: <span class="mono">${ffVirketid.value}</span>`);
+      }
+      if (ffPlacering.value) {
+        lines.push(`• Placering: ${ffPlacering.value}`);
+      }
+      if (ffResultat.value) {
+        lines.push(`<br>${ffResultat.value}`);
+      }
+
+      previewTextFarveformel.innerHTML = lines.length > 0 ? lines.join('<br>') : '(Udfyld felter...)';
+    }
+
+    function resetFarveformelForm() {
+      ffMaalTone.value = '';
+      ffOxidant.value = '';
+      ffFormel.value = '';
+      ffBlandingsforhold.value = '';
+      ffVirketid.value = '';
+      ffPlacering.value = '';
+      ffResultat.value = '';
+    }
+
+    function saveFarveformel() {
+      // In a real app, this would save to backend
+      alert('Farveformel gemt!');
+      closeFarveformel();
+    }
+
+    // Add event listeners for farveformel fields
+    [ffMaalTone, ffOxidant, ffFormel, ffBlandingsforhold, ffVirketid, ffPlacering, ffResultat].forEach(el => {
+      el.addEventListener('input', () => {
+        if (activePanel === 'farveformel') {
+          updateFarveformelPreview();
+        }
+      });
+      el.addEventListener('change', () => {
+        if (activePanel === 'farveformel') {
+          updateFarveformelPreview();
+        }
+      });
+    });
+
+    // Update original openAddNote to track active panel
+    const originalOpenAddNote = openAddNote;
+    openAddNote = function() {
+      originalOpenAddNote();
+      activePanel = 'note';
+    };
+
+    // Update original closeAddNote to clear active panel
+    const originalCloseAddNote = closeAddNote;
+    closeAddNote = function() {
+      originalCloseAddNote();
+      activePanel = null;
+    };
+
+    // ==========================================
+    // ANALYSE PANEL
+    // ==========================================
+
+    // Analyse form elements
+    const anHovedbund = document.getElementById('anHovedbund');
+    const anIrritation = document.getElementById('anIrritation');
+    const anHaarTykkelse = document.getElementById('anHaarTykkelse');
+    const anHaarStruktur = document.getElementById('anHaarStruktur');
+    const anPorositet = document.getElementById('anPorositet');
+    const anKemisk = document.getElementById('anKemisk');
+    const anShampoo = document.getElementById('anShampoo');
+    const anHjemmepleje = document.getElementById('anHjemmepleje');
+    const anBemaerkning = document.getElementById('anBemaerkning');
+    const anAdvarsel = document.getElementById('anAdvarsel');
+
+    // Analyse preview elements
+    const previewEntryAnalyse = document.getElementById('previewEntryAnalyse');
+    const previewTextAnalyse = document.getElementById('previewTextAnalyse');
+    const previewTagsAnalyse = document.getElementById('previewTagsAnalyse');
+
+    function openAnalyse() {
+      document.getElementById('analysePanel').classList.add('open');
+      activePanel = 'analyse';
+      showAnalysePreview();
+    }
+
+    function closeAnalyse() {
+      document.getElementById('analysePanel').classList.remove('open');
+      hideAnalysePreview();
+      resetAnalyseForm();
+      activePanel = null;
+    }
+
+    function showAnalysePreview() {
+      previewEntryAnalyse.classList.remove('hidden');
+      updateAnalysePreview();
+      updateAnalysePreviewTags();
+    }
+
+    function hideAnalysePreview() {
+      previewEntryAnalyse.classList.add('hidden');
+    }
+
+    function updateAnalysePreview() {
+      const lines = [];
+
+      if (anHovedbund.value) {
+        lines.push(`• Hovedbund: ${anHovedbund.value}`);
+      }
+      if (anIrritation.value) {
+        lines.push(`• Irritation: ${anIrritation.value}`);
+      }
+      if (anHaarTykkelse.value || anHaarStruktur.value) {
+        const haarParts = [];
+        if (anHaarTykkelse.value) haarParts.push(anHaarTykkelse.value);
+        if (anHaarStruktur.value) haarParts.push(anHaarStruktur.value);
+        lines.push(`• Hår: <span class="mono">${haarParts.join(' · ')}</span>`);
+      }
+      if (anPorositet.value) {
+        lines.push(`• Porøsitet: <span class="mono">${anPorositet.value}</span>`);
+      }
+      if (anKemisk.value) {
+        lines.push(`• Kemisk beh.: ${anKemisk.value}`);
+      }
+      if (anShampoo.value) {
+        lines.push(`• Shampoo: ${anShampoo.value}`);
+      }
+      if (anHjemmepleje.value) {
+        lines.push(`• Hjemmepleje: ${anHjemmepleje.value}`);
+      }
+      if (anBemaerkning.value) {
+        lines.push(`<br>${anBemaerkning.value}`);
+      }
+
+      previewTextAnalyse.innerHTML = lines.length > 0 ? lines.join('<br>') : '(Udfyld felter...)';
+    }
+
+    function updateAnalysePreviewTags() {
+      const analysePanelTags = document.querySelectorAll('#analysePanel swp-add-note-tag-option.selected');
+      previewTagsAnalyse.innerHTML = '';
+      analysePanelTags.forEach(tag => {
+        const tagEl = document.createElement('swp-journal-tag');
+        tagEl.textContent = tag.textContent;
+        tagEl.classList.add('tag-' + tag.dataset.tag);
+        previewTagsAnalyse.appendChild(tagEl);
+      });
+    }
+
+    function resetAnalyseForm() {
+      anHovedbund.value = '';
+      anIrritation.value = '';
+      anHaarTykkelse.value = '';
+      anHaarStruktur.value = '';
+      anPorositet.value = '';
+      anKemisk.value = '';
+      anShampoo.value = '';
+      anHjemmepleje.value = '';
+      anBemaerkning.value = '';
+      anAdvarsel.value = 'Nej';
+
+      // Reset tags - only "Analyse" selected by default
+      document.querySelectorAll('#analysePanel swp-add-note-tag-option').forEach(tag => {
+        if (tag.dataset.tag === 'analyse') {
+          tag.classList.add('selected');
+        } else {
+          tag.classList.remove('selected');
+        }
+      });
+    }
+
+    function saveAnalyse() {
+      // In a real app, this would save to backend
+      alert('Analyse gemt!');
+      closeAnalyse();
+    }
+
+    // Add event listeners for analyse form fields
+    [anHovedbund, anIrritation, anHaarTykkelse, anHaarStruktur, anPorositet, anKemisk, anShampoo, anHjemmepleje, anBemaerkning, anAdvarsel].forEach(el => {
+      el.addEventListener('input', () => {
+        if (activePanel === 'analyse') {
+          updateAnalysePreview();
+        }
+      });
+      el.addEventListener('change', () => {
+        if (activePanel === 'analyse') {
+          updateAnalysePreview();
+        }
+      });
+    });
+
+    // Add tag toggle listeners for analyse panel
+    document.querySelectorAll('#analysePanel swp-add-note-tag-option').forEach(tag => {
+      tag.onclick = () => {
+        tag.classList.toggle('selected');
+        updateAnalysePreviewTags();
+      };
+    });
+  </script>
+
+  <!-- Chart initialization -->
+  <script type="module">
+    import { createChart } from 'https://unpkg.com/@sevenweirdpeople/swp-charting@latest/dist/index.js';
+
+    // Initialize chart when customer panel opens
+    let chartInitialized = false;
+
+    const originalOpenCustomerPanel = window.openCustomerPanel;
+    window.openCustomerPanel = function() {
+      originalOpenCustomerPanel();
+
+      if (!chartInitialized) {
+        setTimeout(() => {
+          createChart(document.getElementById('customerRevenueChart'), {
+            width: 620,
+            height: 215,
+            xAxis: {
+              categories: ['Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
+            },
+            series: [
+              {
+                name: 'Services',
+                color: '#00897b',
+                data: [
+                  { x: 'Jul', y: 1200 },
+                  { x: 'Sep', y: 1500 },
+                  { x: 'Okt', y: 2800 },
+                  { x: 'Dec', y: 1800 }
+                ]
+              },
+              {
+                name: 'Produkter',
+                color: '#1e88e5',
+                data: [
+                  { x: 'Aug', y: 800 },
+                  { x: 'Okt', y: 900 },
+                  { x: 'Nov', y: 700 },
+                  { x: 'Dec', y: 950 }
+                ]
+              }
+            ],
+            legend: true
+          });
+          chartInitialized = true;
+        }, 100);
+      }
+    };
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-employee.html b/.workbench/POC/poc-employee.html
new file mode 100644
index 0000000..36b7cbf
--- /dev/null
+++ b/.workbench/POC/poc-employee.html
@@ -0,0 +1,4150 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Medarbejder Detaljer - Anna Sørensen</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-back-link {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-back-link:hover {
+      color: var(--color-teal);
+    }
+
+    swp-back-link svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-topbar-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-topbar-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      border-radius: 6px;
+      border: none;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    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);
+    }
+
+    /* ==========================================
+       EMPLOYEE HEADER
+       ========================================== */
+    swp-employee-header {
+      display: flex;
+      gap: 24px;
+      padding: 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 49px;
+      z-index: 90;
+    }
+
+    swp-employee-avatar-large {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 28px;
+      font-weight: 600;
+      color: white;
+      flex-shrink: 0;
+      position: relative;
+      cursor: pointer;
+      overflow: hidden;
+    }
+
+    swp-employee-avatar-large img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    swp-employee-avatar-large swp-avatar-initials {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+    }
+
+    swp-employee-avatar-large.has-image swp-avatar-initials {
+      display: none;
+    }
+
+    swp-avatar-overlay {
+      position: absolute;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 2px;
+      opacity: 0;
+      transition: opacity 150ms ease;
+      border-radius: 50%;
+    }
+
+    swp-employee-avatar-large:hover swp-avatar-overlay {
+      opacity: 1;
+    }
+
+    swp-avatar-overlay svg {
+      width: 24px;
+      height: 24px;
+      fill: white;
+    }
+
+    swp-avatar-overlay span {
+      font-size: 9px;
+      font-weight: 500;
+      color: white;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+    }
+
+    swp-avatar-overlay .upload-text { display: block; }
+    swp-avatar-overlay .change-text { display: none; }
+    swp-employee-avatar-large.has-image swp-avatar-overlay .upload-text { display: none; }
+    swp-employee-avatar-large.has-image swp-avatar-overlay .change-text { display: block; }
+
+    swp-avatar-remove {
+      position: absolute;
+      top: -4px;
+      right: -4px;
+      width: 20px;
+      height: 20px;
+      background: var(--color-red);
+      border-radius: 50%;
+      display: none;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-size: 12px;
+      font-weight: 600;
+      cursor: pointer;
+      z-index: 2;
+      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+      transition: transform 150ms ease;
+    }
+
+    swp-employee-avatar-large.has-image:hover swp-avatar-remove {
+      display: flex;
+    }
+
+    swp-avatar-remove:hover {
+      transform: scale(1.1);
+    }
+
+    swp-avatar-upload-input {
+      display: none;
+    }
+
+    /* ==========================================
+       CHECKBOX ROW
+       ========================================== */
+    swp-checkbox-list {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    swp-checkbox-row {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 10px 12px;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    swp-checkbox-row:hover {
+      background: var(--color-background-alt);
+    }
+
+    swp-checkbox-box {
+      width: 18px;
+      height: 18px;
+      border: 2px solid var(--color-border);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      margin-top: 1px;
+      transition: all 150ms ease;
+    }
+
+    swp-checkbox-row.checked swp-checkbox-box {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+    }
+
+    swp-checkbox-box svg {
+      width: 12px;
+      height: 12px;
+      fill: white;
+      opacity: 0;
+      transition: opacity 150ms ease;
+    }
+
+    swp-checkbox-row.checked swp-checkbox-box svg {
+      opacity: 1;
+    }
+
+    swp-checkbox-text {
+      font-size: 14px;
+      color: var(--color-text);
+      line-height: 1.4;
+    }
+
+    /* ==========================================
+       SCHEDULE TABLE (read-only, single employee)
+       Matches poc-arbejdstidsplan.html styling
+       ========================================== */
+    swp-schedule-grid {
+      display: grid;
+      grid-template-columns: 120px repeat(7, minmax(80px, 1fr));
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid var(--color-border);
+      background: var(--color-surface);
+    }
+
+    swp-schedule-grid swp-cell {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 12px 16px;
+      min-height: 60px;
+      border-right: 1px solid var(--color-border);
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-surface);
+    }
+
+    swp-schedule-grid swp-cell:nth-child(8n) {
+      border-right: none;
+    }
+
+    swp-schedule-grid swp-cell:nth-last-child(-n+8) {
+      border-bottom: none;
+    }
+
+    swp-schedule-grid swp-cell.header {
+      background: var(--color-background-alt);
+      font-weight: 500;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      min-height: 48px;
+      text-align: center;
+    }
+
+    swp-schedule-grid swp-cell.header swp-day-name {
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-schedule-grid swp-cell.header swp-day-date {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      font-weight: 400;
+    }
+
+    swp-schedule-grid swp-cell.header.week-col {
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-schedule-grid swp-cell.week-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+      background: var(--color-background-alt);
+      justify-content: center;
+      align-items: flex-start;
+      padding-left: 16px;
+    }
+
+    swp-schedule-grid swp-cell.week-label swp-week-hours {
+      font-size: 12px;
+      font-weight: 400;
+      color: var(--color-text-secondary);
+      font-family: var(--font-mono);
+      margin-top: 2px;
+    }
+
+    swp-time-badge {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      font-weight: 500;
+      padding: 4px 8px;
+      border-radius: 4px;
+      background: color-mix(in srgb, var(--color-teal) 10%, white);
+      color: var(--color-text);
+      white-space: nowrap;
+      min-width: 90px;
+      text-align: center;
+      display: inline-block;
+    }
+
+    swp-time-badge.off {
+      background: transparent;
+      color: var(--color-text-secondary);
+    }
+
+    swp-time-badge.vacation {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b45309;
+    }
+
+    swp-time-badge.sick {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+      color: var(--color-red);
+    }
+
+    swp-schedule-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+
+    swp-schedule-header swp-section-label {
+      margin-bottom: 0;
+    }
+
+    swp-edit-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--color-teal);
+      text-decoration: none;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-edit-link:hover {
+      color: #00695c;
+    }
+
+    swp-edit-link svg {
+      width: 14px;
+      height: 14px;
+      fill: currentColor;
+    }
+
+    swp-employee-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-employee-name-row {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-employee-name {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-tags-row {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    swp-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      border-radius: 4px;
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+    }
+
+    swp-tag.master {
+      background: color-mix(in srgb, var(--color-purple) 15%, white);
+      color: var(--color-purple);
+    }
+
+    swp-tag.senior {
+      background: color-mix(in srgb, var(--color-blue) 15%, white);
+      color: var(--color-blue);
+    }
+
+    swp-tag.junior {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b45309;
+    }
+
+    swp-tag.cert {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      color: var(--color-teal);
+    }
+
+    swp-employee-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      font-size: 12px;
+      font-weight: 500;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      margin-left: auto;
+    }
+
+    swp-employee-status[data-active="true"] {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+      border: 1px solid color-mix(in srgb, var(--color-green) 30%, white);
+    }
+
+    swp-employee-status[data-active="false"] {
+      background: color-mix(in srgb, var(--color-red) 12%, white);
+      color: var(--color-red);
+      border: 1px solid color-mix(in srgb, var(--color-red) 30%, white);
+    }
+
+    swp-employee-status .icon {
+      font-size: 14px;
+    }
+
+    swp-fact-boxes-inline {
+      display: flex;
+      gap: 24px;
+      margin-top: 4px;
+    }
+
+    swp-fact-inline {
+      display: flex;
+      align-items: baseline;
+      gap: 6px;
+    }
+
+    swp-fact-inline-value {
+      font-size: 18px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-fact-inline-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    .stars {
+      color: var(--color-amber);
+    }
+
+    /* ==========================================
+       TAB BAR
+       ========================================== */
+    swp-tab-bar {
+      display: flex;
+      gap: 0;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      padding: 0 24px;
+      position: sticky;
+      top: 178px;
+      z-index: 80;
+    }
+
+    swp-tab {
+      padding: 14px 24px;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+      transition: all 150ms ease;
+    }
+
+    swp-tab:hover {
+      color: var(--color-text);
+      background: var(--color-background-alt);
+    }
+
+    swp-tab.active {
+      color: var(--color-teal);
+      border-bottom-color: var(--color-teal);
+    }
+
+    /* ==========================================
+       TAB CONTENT
+       ========================================== */
+    swp-tab-content {
+      display: none;
+      padding: 24px;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    swp-tab-content.active {
+      display: block;
+    }
+
+    swp-tab-info {
+      display: flex;
+      align-items: flex-start;
+      gap: 10px;
+      padding: 12px 16px;
+      background: color-mix(in srgb, var(--color-teal) 8%, white);
+      border: 1px solid color-mix(in srgb, var(--color-teal) 25%, white);
+      border-radius: 8px;
+      margin-bottom: 20px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      line-height: 1.4;
+    }
+
+    swp-tab-info svg {
+      flex-shrink: 0;
+      color: var(--color-teal);
+      margin-top: 1px;
+    }
+
+    swp-tab-info strong {
+      color: var(--color-teal);
+      font-weight: 600;
+    }
+
+    /* ==========================================
+       SERVICES DRAG-DROP
+       ========================================== */
+    .services-grid {
+      align-items: start;
+    }
+
+    /* Services layout with collapsible panel */
+    .services-layout {
+      display: flex;
+      gap: 0;
+      align-items: stretch;
+      min-height: 500px;
+    }
+
+    swp-services-panel {
+      display: flex;
+      transition: width 300ms ease;
+      overflow: hidden;
+    }
+
+    swp-services-panel.collapsed {
+      width: 40px;
+    }
+
+    swp-services-panel.expanded {
+      width: 420px;
+    }
+
+    swp-panel-toggle {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 40px;
+      min-width: 40px;
+      background: linear-gradient(135deg, var(--color-teal) 0%, color-mix(in srgb, var(--color-teal) 80%, #000) 100%);
+      color: white;
+      cursor: pointer;
+      border-radius: 8px 0 0 8px;
+      transition: all 200ms ease;
+      flex-shrink: 0;
+    }
+
+    swp-panel-toggle:hover {
+      background: linear-gradient(135deg, color-mix(in srgb, var(--color-teal) 90%, #fff) 0%, var(--color-teal) 100%);
+    }
+
+    swp-panel-toggle svg {
+      transition: transform 200ms ease;
+    }
+
+    swp-services-panel.expanded swp-panel-toggle svg {
+      transform: rotate(180deg);
+    }
+
+    swp-panel-content {
+      display: none;
+      flex: 1;
+      min-width: 0;
+    }
+
+    swp-services-panel.expanded swp-panel-content {
+      display: block;
+    }
+
+    swp-services-panel swp-card {
+      border-radius: 0 8px 8px 0;
+      border-left: none;
+      height: 100%;
+    }
+
+    .selected-services-card {
+      flex: 1;
+    }
+
+    /* Edit button in section label */
+    .selected-services-card swp-section-label {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+
+    .edit-services-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      background: var(--color-teal);
+      color: white;
+      border: none;
+      border-radius: 4px;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    .edit-services-btn:hover {
+      background: color-mix(in srgb, var(--color-teal) 85%, #000);
+    }
+
+    .edit-services-btn.active {
+      background: var(--color-text-secondary);
+    }
+
+    .services-card {
+      display: flex;
+      flex-direction: column;
+    }
+
+    .services-card swp-search-field {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      margin-bottom: 12px;
+    }
+
+    .services-card swp-search-field img {
+      opacity: 0.5;
+      flex-shrink: 0;
+    }
+
+    .services-card swp-search-field input {
+      flex: 1;
+      border: none;
+      background: none;
+      outline: none;
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    .services-card swp-search-field input::placeholder {
+      color: var(--color-text-muted);
+    }
+
+    swp-services-selected,
+    swp-services-available {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      min-height: 300px;
+      max-height: 600px;
+      overflow-y: auto;
+      padding: 4px;
+      border-radius: 8px;
+      transition: all 150ms ease;
+    }
+
+    swp-services-selected.drag-over,
+    swp-services-available.drag-over {
+      background: color-mix(in srgb, var(--color-teal) 8%, white);
+      outline: 2px dashed var(--color-teal);
+      outline-offset: -2px;
+    }
+
+    swp-services-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 40px 20px;
+      color: var(--color-text-muted);
+      border: 2px dashed var(--color-border);
+      border-radius: 8px;
+      text-align: center;
+      font-size: 14px;
+    }
+
+    swp-services-empty svg {
+      opacity: 0.4;
+    }
+
+    /* Service category in columns */
+    swp-service-category-group {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    swp-service-category-header {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      padding: 8px 0 4px 0;
+      border-bottom: 1px solid var(--color-border);
+      margin-bottom: 4px;
+    }
+
+    /* Service row - draggable */
+    swp-service-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 12px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      cursor: url('icons/drag.svg') 12 12, grab;
+      transition: all 150ms ease;
+      user-select: none;
+    }
+
+    swp-service-row:hover {
+      border-color: var(--color-teal);
+      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+    }
+
+    swp-service-row:active {
+      cursor: url('icons/drag.svg') 12 12, grabbing;
+    }
+
+    swp-service-row.dragging {
+      opacity: 0.5;
+      transform: scale(0.98);
+    }
+
+    swp-service-row.multi-selected {
+      background: color-mix(in srgb, var(--color-teal) 12%, white);
+      border-color: var(--color-teal);
+      box-shadow: 0 0 0 1px var(--color-teal);
+    }
+
+    swp-drag-handle {
+      color: var(--color-text-muted);
+      font-size: 14px;
+      cursor: url('icons/drag.svg') 12 12, grab;
+      padding: 0 2px;
+    }
+
+    swp-service-row:hover swp-drag-handle {
+      color: var(--color-text-secondary);
+    }
+
+
+    swp-service-color {
+      width: 4px;
+      height: 28px;
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+
+    swp-service-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    swp-service-name {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    swp-service-meta {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    /* Price and duration columns */
+    swp-service-price-col {
+      width: 75px;
+      text-align: right;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      color: var(--color-text-secondary);
+      flex-shrink: 0;
+    }
+
+    swp-service-duration-col {
+      width: 50px;
+      text-align: right;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      color: var(--color-text-secondary);
+      flex-shrink: 0;
+    }
+
+    /* Editable inputs in selected column */
+    swp-services-selected swp-service-price-col,
+    swp-services-selected swp-service-duration-col {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 4px;
+    }
+
+    swp-services-selected swp-service-price-col input,
+    swp-services-selected swp-service-duration-col input {
+      width: 55px;
+      padding: 4px 6px;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      font-size: 12px;
+      font-family: var(--font-mono);
+      text-align: right;
+      background: var(--color-surface);
+    }
+
+    swp-services-selected swp-service-price-col input:focus,
+    swp-services-selected swp-service-duration-col input:focus {
+      border-color: var(--color-teal);
+      outline: none;
+    }
+
+    swp-services-selected swp-service-price-col input::-webkit-inner-spin-button,
+    swp-services-selected swp-service-price-col input::-webkit-outer-spin-button {
+      opacity: 1;
+    }
+
+    /* Override indicator */
+    swp-service-row.has-override swp-service-price-col,
+    swp-service-row.has-override swp-service-duration-col {
+      color: var(--color-teal);
+    }
+
+    /* Service values (read mode) */
+    swp-service-values {
+      display: flex;
+      align-items: center;
+      margin-left: auto;
+    }
+
+    swp-service-price,
+    swp-service-duration {
+      font-size: 13px;
+      font-family: var(--font-mono);
+      color: var(--color-text-secondary);
+      text-align: right;
+    }
+
+    swp-service-price {
+      width: 100px;
+    }
+
+    swp-service-duration {
+      width: 80px;
+    }
+
+    swp-service-price.modified,
+    swp-service-duration.modified {
+      color: var(--color-teal);
+      font-weight: 500;
+    }
+
+    /* Hide values in edit mode */
+    .edit-mode swp-service-values {
+      display: none;
+    }
+
+    /* Service controls container - hidden by default */
+    swp-service-controls {
+      display: none;
+      align-items: center;
+      margin-left: auto;
+    }
+
+    /* Show controls in edit mode */
+    .edit-mode swp-service-controls {
+      display: flex;
+    }
+
+    /* Final values with adjustable controls */
+    swp-service-final-values {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-adjustable-value {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      padding: 2px;
+    }
+
+    swp-adjustable-value.modified {
+      border-color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 5%, white);
+    }
+
+    swp-adjustable-value .adjust-down,
+    swp-adjustable-value .adjust-up {
+      width: 24px;
+      height: 24px;
+      border: none;
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+      font-size: 14px;
+      font-weight: 600;
+      cursor: pointer;
+      border-radius: 3px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: all 100ms ease;
+    }
+
+    swp-adjustable-value .adjust-down:hover,
+    swp-adjustable-value .adjust-up:hover {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-adjustable-value .adjust-down:active,
+    swp-adjustable-value .adjust-up:active {
+      transform: scale(0.95);
+    }
+
+    swp-adjustable-value .adjust-display {
+      min-width: 55px;
+      text-align: center;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+      padding: 0 4px;
+    }
+
+    swp-adjustable-value.modified .adjust-display {
+      color: var(--color-teal);
+      font-weight: 500;
+    }
+
+    /* Duration display */
+    .duration-display {
+      min-width: 50px;
+      text-align: right;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      color: var(--color-text-secondary);
+    }
+
+    .duration-display.modified {
+      color: var(--color-teal);
+      font-weight: 500;
+    }
+
+    /* Original values (read mode) */
+    swp-service-originals {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-right: 16px;
+    }
+
+    swp-service-originals .original-price-val,
+    swp-service-originals .original-duration-val {
+      font-family: var(--font-mono);
+      font-size: 15px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Strikethrough only when value is changed */
+    swp-service-originals .original-price-val.struck,
+    swp-service-originals .original-duration-val.struck {
+      text-decoration: line-through;
+      text-decoration-color: var(--color-teal);
+      text-decoration-thickness: 1px;
+      color: var(--color-text-muted);
+    }
+
+    /* Original values (edit mode) - hidden by default, shown when has-override */
+    swp-service-originals-edit {
+      display: none;
+      align-items: center;
+      gap: 16px;
+      margin-right: 20px;
+    }
+
+    swp-service-row.has-override swp-service-originals-edit {
+      display: flex;
+    }
+
+    swp-service-originals-edit .original-price-val,
+    swp-service-originals-edit .original-duration-val {
+      font-family: var(--font-mono);
+      font-size: 15px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-service-originals-edit .original-price-val.struck,
+    swp-service-originals-edit .original-duration-val.struck {
+      text-decoration: line-through;
+      text-decoration-color: var(--color-teal);
+      text-decoration-thickness: 1px;
+      color: var(--color-text-muted);
+    }
+
+    /* Highlight originals when value changes */
+    swp-service-originals.highlight .original-price-val,
+    swp-service-originals.highlight .original-duration-val,
+    swp-service-originals-edit.highlight .original-price-val,
+    swp-service-originals-edit.highlight .original-duration-val {
+      animation: flash-text 300ms ease;
+    }
+
+    @keyframes pulse-border {
+      0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color-teal) 40%, transparent); }
+      100% { box-shadow: 0 0 0 4px transparent; }
+    }
+
+    @keyframes flash-text {
+      0% { opacity: 0.5; }
+      100% { opacity: 1; }
+    }
+
+    /* ==========================================
+       LAYOUT GRID
+       ========================================== */
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px;
+    }
+
+    .grid-4 {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+    }
+
+    @media (max-width: 900px) {
+      .grid-2 { grid-template-columns: 1fr; }
+      .grid-4 { grid-template-columns: repeat(2, 1fr); }
+    }
+
+    /* ==========================================
+       CARDS
+       ========================================== */
+    swp-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      padding: 20px;
+      border: 1px solid var(--color-border);
+      margin-bottom: 16px;
+    }
+
+    swp-card:last-child {
+      margin-bottom: 0;
+    }
+
+    swp-section-label {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 16px;
+    }
+
+    /* ==========================================
+       STAT CARDS
+       ========================================== */
+    swp-stat-card {
+      background: var(--color-surface);
+      border-radius: 8px;
+      padding: 20px;
+      text-align: center;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-stat-value {
+      display: block;
+      font-size: 28px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-stat-label {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+    }
+
+    swp-stat-subtitle {
+      display: block;
+      font-size: 11px;
+      color: var(--color-text-muted);
+      margin-top: 2px;
+    }
+
+    swp-stat-card.highlight swp-stat-value {
+      color: var(--color-teal);
+    }
+
+    /* ==========================================
+       EDIT SECTION
+       ========================================== */
+    swp-edit-section {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    swp-edit-row {
+      display: grid;
+      grid-template-columns: 140px 1fr;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-edit-label {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-edit-value {
+      font-size: 14px;
+      padding: 8px 12px;
+      border-radius: 4px;
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      transition: all 150ms ease;
+      cursor: text;
+    }
+
+    swp-edit-value:hover {
+      background: var(--color-background);
+    }
+
+    swp-edit-value:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    swp-edit-value.masked {
+      letter-spacing: 1px;
+    }
+
+    swp-edit-select select {
+      width: 100%;
+      font-size: 14px;
+      font-family: inherit;
+      padding: 8px 12px;
+      border-radius: 4px;
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-edit-select select:hover {
+      background: var(--color-background);
+    }
+
+    swp-edit-select select:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    /* ==========================================
+       TOGGLE SLIDER
+       ========================================== */
+    swp-toggle-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-toggle-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-toggle-label {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-toggle-description {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    swp-toggle-slider {
+      display: inline-flex;
+      width: fit-content;
+      background: var(--color-background);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      overflow: hidden;
+      position: relative;
+    }
+
+    swp-toggle-slider::before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: calc(50% - 4px);
+      height: calc(100% - 4px);
+      background: color-mix(in srgb, var(--color-green) 18%, white);
+      border-radius: 4px;
+      transition: transform 200ms ease, background 200ms ease;
+    }
+
+    swp-toggle-slider[data-value="no"]::before {
+      transform: translateX(100%);
+      background: color-mix(in srgb, var(--color-red) 18%, white);
+    }
+
+    swp-toggle-option {
+      position: relative;
+      z-index: 1;
+      padding: 5px 16px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: color 150ms ease;
+      user-select: none;
+    }
+
+    swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
+      color: var(--color-green);
+      font-weight: 600;
+    }
+
+    swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
+      color: var(--color-red);
+      font-weight: 600;
+    }
+
+    /* ==========================================
+       AVAILABILITY LIST
+       ========================================== */
+    swp-availability-list {
+      display: flex;
+      flex-direction: column;
+    }
+
+    swp-availability-row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 8px 16px;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-availability-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-availability-row[data-enabled="false"] {
+      opacity: 0.5;
+    }
+
+    swp-availability-day {
+      width: 80px;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-availability-time {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    swp-time-range {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-time-range-slider {
+      position: relative;
+      flex: 1;
+      height: 20px;
+      display: flex;
+      align-items: center;
+    }
+
+    swp-time-range-track {
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      background: var(--color-border);
+      border-radius: 2px;
+    }
+
+    swp-time-range-fill {
+      position: absolute;
+      height: 4px;
+      background: var(--color-teal);
+      border-radius: 2px;
+      cursor: grab;
+    }
+
+    swp-time-range-slider input[type="range"] {
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      -webkit-appearance: none;
+      appearance: none;
+      background: transparent;
+      pointer-events: none;
+      margin: 0;
+    }
+
+    swp-time-range-slider input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 14px;
+      height: 14px;
+      background: var(--color-teal);
+      border: 2px solid white;
+      border-radius: 50%;
+      cursor: pointer;
+      pointer-events: auto;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    }
+
+    swp-time-range-label {
+      font-size: 12px;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+      min-width: 90px;
+      text-align: center;
+      background: var(--color-background-alt);
+      padding: 3px 8px;
+      border-radius: 4px;
+    }
+
+    /* ==========================================
+       VACATION LIST
+       ========================================== */
+    swp-vacation-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-vacation-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-vacation-dates {
+      flex: 1;
+      font-size: 14px;
+      font-family: var(--font-mono);
+    }
+
+    swp-vacation-type {
+      font-size: 12px;
+      padding: 3px 10px;
+      border-radius: 12px;
+      font-weight: 500;
+    }
+
+    swp-vacation-type.ferie {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b45309;
+    }
+
+    swp-vacation-type.fri {
+      background: color-mix(in srgb, var(--color-purple) 15%, white);
+      color: var(--color-purple);
+    }
+
+    swp-vacation-type.syg {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+      color: var(--color-red);
+    }
+
+    swp-vacation-delete {
+      padding: 4px 8px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      border-radius: 4px;
+      transition: all 150ms ease;
+    }
+
+    swp-vacation-delete:hover {
+      color: var(--color-red);
+      background: color-mix(in srgb, var(--color-red) 10%, white);
+    }
+
+    /* ==========================================
+       SERVICE LIST
+       ========================================== */
+    swp-service-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-service-item {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      cursor: pointer;
+      transition: border-color 0.15s ease;
+    }
+
+    swp-service-item:hover {
+      border-color: var(--color-teal);
+    }
+
+    swp-service-item.selected {
+      border-color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 5%, var(--color-background-alt));
+    }
+
+    swp-service-checkbox {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--color-border);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: all 0.15s ease;
+    }
+
+    swp-service-item.selected swp-service-checkbox {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+      color: white;
+    }
+
+    swp-service-checkbox svg {
+      width: 14px;
+      height: 14px;
+      fill: currentColor;
+      opacity: 0;
+    }
+
+    swp-service-item.selected swp-service-checkbox svg {
+      opacity: 1;
+    }
+
+    swp-service-color {
+      width: 4px;
+      height: 40px;
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+
+    swp-service-info {
+      flex: 1;
+    }
+
+    swp-service-name {
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-service-meta {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    swp-service-override {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-service-override-value {
+      color: var(--color-text);
+      font-weight: 500;
+    }
+
+    /* ==========================================
+       CERTIFICATION LIST
+       ========================================== */
+    swp-cert-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-cert-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-cert-icon {
+      width: 36px;
+      height: 36px;
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 18px;
+    }
+
+    swp-cert-info {
+      flex: 1;
+    }
+
+    swp-cert-name {
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-cert-dates {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    swp-cert-status {
+      font-size: 11px;
+      font-weight: 600;
+      padding: 4px 10px;
+      border-radius: 12px;
+    }
+
+    swp-cert-status.valid {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+    }
+
+    swp-cert-status.expiring {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b45309;
+    }
+
+    swp-cert-status.expired {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+      color: var(--color-red);
+    }
+
+    /* ==========================================
+       SALARY TABLE
+       ========================================== */
+    swp-salary-history {
+      display: block;
+      margin-top: 16px;
+    }
+
+    swp-salary-history table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 13px;
+    }
+
+    swp-salary-history th,
+    swp-salary-history td {
+      padding: 10px 12px;
+      text-align: left;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-salary-history th {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      background: var(--color-background-alt);
+    }
+
+    swp-salary-history td {
+      color: var(--color-text);
+    }
+
+    swp-salary-history td.mono {
+      font-family: var(--font-mono);
+    }
+
+    /* ==========================================
+       BOOKING TABLE
+       ========================================== */
+    swp-booking-table {
+      display: block;
+      margin-top: 16px;
+    }
+
+    swp-booking-table table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 13px;
+    }
+
+    swp-booking-table th,
+    swp-booking-table td {
+      padding: 12px 16px;
+      text-align: left;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-booking-table th {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      background: var(--color-background-alt);
+    }
+
+    swp-booking-table td {
+      color: var(--color-text);
+    }
+
+    swp-booking-table .customer {
+      font-weight: 500;
+    }
+
+    swp-booking-table .date {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-booking-table .amount {
+      font-family: var(--font-mono);
+      font-weight: 500;
+    }
+
+    /* ==========================================
+       INVOICE TABLE (afsluttede bookinger)
+       ========================================== */
+    swp-invoice-table {
+      display: block;
+      margin-top: 16px;
+    }
+
+    swp-invoice-table table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 13px;
+    }
+
+    swp-invoice-table th,
+    swp-invoice-table td {
+      padding: 12px 16px;
+      text-align: left;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-invoice-table th {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      background: var(--color-background-alt);
+    }
+
+    swp-invoice-table td {
+      color: var(--color-text);
+    }
+
+    swp-invoice-table .date,
+    swp-invoice-table .time {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-invoice-table .customer {
+      font-weight: 500;
+    }
+
+    swp-invoice-table .services {
+      max-width: 250px;
+    }
+
+    swp-invoice-table .duration {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-invoice-table .amount {
+      font-family: var(--font-mono);
+      font-weight: 600;
+      text-align: right;
+    }
+
+    swp-invoice-table .amount-col {
+      text-align: right;
+    }
+
+    /* Status badges */
+    swp-status-badge {
+      display: inline-block;
+      padding: 4px 10px;
+      border-radius: 12px;
+      font-size: 11px;
+      font-weight: 500;
+    }
+
+    swp-status-badge.paid {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      color: var(--color-teal);
+    }
+
+    swp-status-badge.pending {
+      background: color-mix(in srgb, #f59e0b 15%, white);
+      color: #d97706;
+    }
+
+    /* ==========================================
+       CHART SECTION (matches poc-detail-drawer.html)
+       ========================================== */
+    swp-chart-section {
+      display: block;
+    }
+
+    swp-chart-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+
+    swp-chart-title {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-chart-subtitle {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-muted);
+      margin-top: 2px;
+    }
+
+    swp-chart-legend {
+      display: flex;
+      gap: 16px;
+    }
+
+    swp-chart-legend-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-chart-legend-dot {
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+    }
+
+    swp-chart-legend-dot.services {
+      background: var(--color-teal);
+    }
+
+    swp-chart-legend-dot.products {
+      background: var(--color-blue);
+    }
+
+    swp-chart-container {
+      display: block;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+      padding: 16px;
+    }
+
+    /* ==========================================
+       ADD BUTTON
+       ========================================== */
+    swp-add-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 12px;
+      border: 2px dashed var(--color-border);
+      border-radius: 6px;
+      color: var(--color-text-secondary);
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      margin-top: 12px;
+    }
+
+    swp-add-button:hover {
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 5%, white);
+    }
+
+    /* Duration slider (same style as time-range-slider) */
+    swp-duration-slider {
+      position: relative;
+      width: 80px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+    }
+
+    swp-duration-slider swp-slider-track {
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      background: var(--color-border);
+      border-radius: 2px;
+    }
+
+    swp-duration-slider input[type="range"] {
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      -webkit-appearance: none;
+      appearance: none;
+      background: transparent;
+      margin: 0;
+    }
+
+    swp-duration-slider input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 14px;
+      height: 14px;
+      background: var(--color-teal);
+      border: 2px solid white;
+      border-radius: 50%;
+      cursor: pointer;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    }
+
+    swp-duration-slider input[type="range"]::-moz-range-thumb {
+      width: 14px;
+      height: 14px;
+      background: var(--color-teal);
+      border: 2px solid white;
+      border-radius: 50%;
+      cursor: pointer;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    }
+
+    /* Compact service list (main view) */
+    swp-service-compact-list {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    swp-service-compact-category {
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-top: 12px;
+      padding-bottom: 4px;
+    }
+
+    swp-service-compact-category:first-child {
+      margin-top: 0;
+    }
+
+    swp-service-compact-item {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 10px 12px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+    }
+
+    swp-service-compact-color {
+      width: 4px;
+      height: 24px;
+      border-radius: 2px;
+      flex-shrink: 0;
+    }
+
+    swp-service-compact-name {
+      flex: 1;
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-service-compact-override {
+      display: flex;
+      gap: 8px;
+      font-size: 12px;
+      font-family: var(--font-mono);
+    }
+
+    swp-service-compact-override .duration-override {
+      color: var(--color-teal);
+      padding: 2px 8px;
+      background: color-mix(in srgb, var(--color-teal) 10%, white);
+      border-radius: 4px;
+    }
+
+    swp-service-compact-override .price-override {
+      color: var(--color-teal);
+      padding: 2px 8px;
+      background: color-mix(in srgb, var(--color-teal) 10%, white);
+      border-radius: 4px;
+    }
+
+    swp-service-compact-override .price-override s {
+      color: var(--color-text-muted);
+      margin-right: 4px;
+    }
+
+    swp-service-compact-override.standard {
+      display: none;
+    }
+
+    swp-service-compact-empty {
+      display: block;
+      padding: 24px 16px;
+      text-align: center;
+      color: var(--color-text-muted);
+      font-size: 14px;
+    }
+
+    /* Edit link for services card */
+    swp-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+
+    swp-card-header swp-section-label {
+      margin-bottom: 0;
+    }
+
+    swp-edit-link {
+      font-size: 13px;
+      color: var(--color-teal);
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      transition: color 150ms ease;
+    }
+
+    swp-edit-link:hover {
+      color: #00695c;
+    }
+
+    swp-edit-link svg {
+      width: 14px;
+      height: 14px;
+      fill: currentColor;
+    }
+
+    /* ==========================================
+       HR TAB - DOCUMENTS
+       ========================================== */
+    swp-document-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-top: 16px;
+    }
+
+    swp-document-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-document-icon {
+      font-size: 20px;
+    }
+
+    swp-document-info {
+      flex: 1;
+    }
+
+    swp-document-name {
+      display: block;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-document-meta {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    swp-document-actions {
+      display: flex;
+      gap: 8px;
+    }
+
+    /* ==========================================
+       HR TAB - COURSES
+       ========================================== */
+    swp-course-section {
+      margin-bottom: 20px;
+    }
+
+    swp-course-section:last-of-type {
+      margin-bottom: 0;
+    }
+
+    swp-course-section-title {
+      display: block;
+      font-size: 12px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      margin-bottom: 8px;
+    }
+
+    swp-course-list {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    swp-course-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 14px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+    }
+
+    swp-course-item.upcoming {
+      background: color-mix(in srgb, var(--color-teal) 8%, white);
+      border: 1px solid color-mix(in srgb, var(--color-teal) 20%, white);
+    }
+
+    swp-course-info {
+      flex: 1;
+    }
+
+    swp-course-name {
+      display: block;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-course-meta {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    swp-course-status {
+      font-size: 11px;
+      font-weight: 500;
+      padding: 4px 10px;
+      border-radius: 12px;
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      color: var(--color-teal);
+    }
+
+    /* ==========================================
+       RATES DRAWER
+       ========================================== */
+    swp-drawer-overlay {
+      display: none;
+      position: fixed;
+      inset: 0;
+      background: rgba(0,0,0,0.3);
+      z-index: 999;
+    }
+
+    swp-drawer-overlay.open {
+      display: block;
+    }
+
+    swp-rates-drawer {
+      display: none;
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 420px;
+      background: var(--color-surface);
+      box-shadow: -4px 0 20px rgba(0,0,0,0.15);
+      z-index: 1000;
+      flex-direction: column;
+    }
+
+    swp-rates-drawer.open {
+      display: flex;
+    }
+
+    swp-drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-drawer-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-drawer-close {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: 6px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      transition: all 150ms ease;
+    }
+
+    swp-drawer-close:hover {
+      background: var(--color-background);
+      color: var(--color-text);
+    }
+
+    swp-drawer-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px 20px;
+    }
+
+    swp-rate-row {
+      display: grid;
+      grid-template-columns: 28px 1fr 100px;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-rate-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-rate-row input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      accent-color: var(--color-teal);
+    }
+
+    swp-rate-label {
+      font-size: 14px;
+    }
+
+    swp-rate-label.disabled {
+      opacity: 0.4;
+    }
+
+    swp-rate-input {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-rate-input input {
+      width: 70px;
+      padding: 6px 8px;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      text-align: right;
+    }
+
+    swp-rate-input.disabled input {
+      opacity: 0.4;
+      background: var(--color-background);
+    }
+
+    .btn-link {
+      background: none;
+      border: none;
+      color: var(--color-teal);
+      font-size: 13px;
+      cursor: pointer;
+      padding: 0;
+    }
+
+    .btn-link:hover {
+      text-decoration: underline;
+    }
+
+    swp-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-bottom: 12px;
+    }
+
+    swp-card-header swp-section-label {
+      margin-bottom: 0;
+    }
+
+    .mono {
+      font-family: var(--font-mono);
+    }
+  </style>
+</head>
+<body>
+
+<!-- Topbar -->
+<swp-topbar>
+  <swp-topbar-left>
+    <swp-back-link>
+      <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+      Tilbage til medarbejdere
+    </swp-back-link>
+    <swp-topbar-title>Medarbejder detaljer</swp-topbar-title>
+  </swp-topbar-left>
+  <swp-topbar-actions>
+    <swp-btn class="secondary">Slet medarbejder</swp-btn>
+    <swp-btn class="primary">Gem ændringer</swp-btn>
+  </swp-topbar-actions>
+</swp-topbar>
+
+<!-- Employee Header -->
+<swp-employee-header>
+  <swp-employee-avatar-large id="avatarUpload">
+    <swp-avatar-initials>AS</swp-avatar-initials>
+    <swp-avatar-overlay>
+      <svg viewBox="0 0 24 24"><path d="M12 15.2c1.77 0 3.2-1.43 3.2-3.2 0-1.77-1.43-3.2-3.2-3.2-1.77 0-3.2 1.43-3.2 3.2 0 1.77 1.43 3.2 3.2 3.2zm8-10.2h-3.17L15 3H9L7.17 5H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm-8 13c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5z"/></svg>
+      <span class="upload-text">Upload</span>
+      <span class="change-text">Skift</span>
+    </swp-avatar-overlay>
+    <swp-avatar-remove id="avatarRemove" title="Fjern billede">✕</swp-avatar-remove>
+    <input type="file" accept="image/*" id="avatarInput" style="display: none;">
+  </swp-employee-avatar-large>
+  <swp-employee-info>
+    <swp-employee-name-row>
+      <swp-employee-name contenteditable="true">Anna Sørensen</swp-employee-name>
+      <swp-tags-row>
+        <swp-tag class="master">Master Stylist</swp-tag>
+        <swp-tag class="cert">Farvecertificeret</swp-tag>
+        <swp-tag class="cert">Balayage</swp-tag>
+      </swp-tags-row>
+      <swp-employee-status data-active="true">
+        <span class="icon">●</span>
+        <span class="text">Aktiv</span>
+      </swp-employee-status>
+    </swp-employee-name-row>
+    <swp-fact-boxes-inline>
+      <swp-fact-inline>
+        <swp-fact-inline-value>248</swp-fact-inline-value>
+        <swp-fact-inline-label>bookinger i år</swp-fact-inline-label>
+      </swp-fact-inline>
+      <swp-fact-inline>
+        <swp-fact-inline-value>186.450 kr</swp-fact-inline-value>
+        <swp-fact-inline-label>omsætning i år</swp-fact-inline-label>
+      </swp-fact-inline>
+      <swp-fact-inline>
+        <swp-fact-inline-value class="stars">★★★★★</swp-fact-inline-value>
+        <swp-fact-inline-label>4.9 rating</swp-fact-inline-label>
+      </swp-fact-inline>
+      <swp-fact-inline>
+        <swp-fact-inline-value>2019</swp-fact-inline-value>
+        <swp-fact-inline-label>ansat siden</swp-fact-inline-label>
+      </swp-fact-inline>
+    </swp-fact-boxes-inline>
+  </swp-employee-info>
+</swp-employee-header>
+
+<!-- Tab Bar -->
+<swp-tab-bar>
+  <swp-tab class="active" data-tab="general">Generelt</swp-tab>
+  <swp-tab data-tab="hours">Arbejdstid</swp-tab>
+  <swp-tab data-tab="services">Services</swp-tab>
+  <swp-tab data-tab="salary">Løn</swp-tab>
+  <swp-tab data-tab="hr">HR</swp-tab>
+  <swp-tab data-tab="stats">Statistik</swp-tab>
+</swp-tab-bar>
+
+<!-- ==========================================
+     GENERELT TAB
+     ========================================== -->
+<swp-tab-content class="active" data-tab="general">
+  <div class="grid-2">
+    <div>
+      <swp-card>
+        <swp-section-label>Kontaktoplysninger</swp-section-label>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Fulde navn</swp-edit-label>
+            <swp-edit-value contenteditable="true">Anna Sørensen</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>E-mail</swp-edit-label>
+            <swp-edit-value contenteditable="true">anna@salon.dk</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Telefon</swp-edit-label>
+            <swp-edit-value contenteditable="true">+45 12 34 56 78</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Adresse</swp-edit-label>
+            <swp-edit-value contenteditable="true">Vestergade 15, 3. tv</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Postnr. & By</swp-edit-label>
+            <swp-edit-value contenteditable="true">8000 Aarhus C</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+      </swp-card>
+
+      <swp-card>
+        <swp-section-label>Personlige oplysninger</swp-section-label>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Fødselsdato</swp-edit-label>
+            <swp-edit-value contenteditable="true">15. marts 1992</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>CPR-nummer</swp-edit-label>
+            <swp-edit-value class="masked" contenteditable="true">150392-****</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Nødkontakt</swp-edit-label>
+            <swp-edit-value contenteditable="true">Peter Sørensen (ægtefælle)</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Nødkontakt tlf.</swp-edit-label>
+            <swp-edit-value contenteditable="true">+45 87 65 43 21</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+      </swp-card>
+    </div>
+
+    <div>
+      <swp-card>
+        <swp-section-label>Ansættelse</swp-section-label>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Ansættelsesdato</swp-edit-label>
+            <swp-edit-value contenteditable="true">1. august 2019</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Stilling</swp-edit-label>
+            <swp-edit-select>
+              <select>
+                <option>Junior Stylist</option>
+                <option>Stylist</option>
+                <option>Senior Stylist</option>
+                <option selected>Master Stylist</option>
+              </select>
+            </swp-edit-select>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Ansættelsestype</swp-edit-label>
+            <swp-edit-select>
+              <select>
+                <option selected>Fuldtid</option>
+                <option>Deltid</option>
+                <option>Vikar</option>
+                <option>Elev</option>
+              </select>
+            </swp-edit-select>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Timer/uge</swp-edit-label>
+            <swp-edit-value contenteditable="true">37</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+      </swp-card>
+
+      <swp-card>
+        <swp-section-label>Indstillinger</swp-section-label>
+        <swp-toggle-row>
+          <div>
+            <swp-toggle-label>Vis i online booking</swp-toggle-label>
+            <swp-toggle-description>Kunder kan vælge denne medarbejder</swp-toggle-description>
+          </div>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+        <swp-toggle-row>
+          <div>
+            <swp-toggle-label>Modtag SMS-påmindelser</swp-toggle-label>
+            <swp-toggle-description>Få besked om nye bookinger</swp-toggle-description>
+          </div>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+        <swp-toggle-row>
+          <div>
+            <swp-toggle-label>Kan redigere egen kalender</swp-toggle-label>
+            <swp-toggle-description>Tillad ændringer i egne bookinger</swp-toggle-description>
+          </div>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+      </swp-card>
+
+      <swp-card>
+        <swp-section-label>Notifikationer</swp-section-label>
+        <p style="font-size: 13px; color: var(--color-text-secondary); margin-bottom: 16px;">
+          Vælg hvilke email-notifikationer medarbejderen skal modtage.
+        </p>
+        <swp-checkbox-list>
+          <swp-checkbox-row class="checked">
+            <swp-checkbox-box>
+              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+            </swp-checkbox-box>
+            <swp-checkbox-text>Modtag email ved online booking</swp-checkbox-text>
+          </swp-checkbox-row>
+          <swp-checkbox-row class="checked">
+            <swp-checkbox-box>
+              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+            </swp-checkbox-box>
+            <swp-checkbox-text>Modtag email ved manuel booking</swp-checkbox-text>
+          </swp-checkbox-row>
+          <swp-checkbox-row>
+            <swp-checkbox-box>
+              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+            </swp-checkbox-box>
+            <swp-checkbox-text>Modtag email ved aflysning</swp-checkbox-text>
+          </swp-checkbox-row>
+          <swp-checkbox-row>
+            <swp-checkbox-box>
+              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+            </swp-checkbox-box>
+            <swp-checkbox-text>Modtag email ved opskrivning til venteliste</swp-checkbox-text>
+          </swp-checkbox-row>
+          <swp-checkbox-row class="checked">
+            <swp-checkbox-box>
+              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+            </swp-checkbox-box>
+            <swp-checkbox-text>Modtag daglig oversigt over morgendagens bookinger</swp-checkbox-text>
+          </swp-checkbox-row>
+        </swp-checkbox-list>
+      </swp-card>
+    </div>
+  </div>
+</swp-tab-content>
+
+<!-- ==========================================
+     ARBEJDSTID TAB
+     ========================================== -->
+<swp-tab-content data-tab="hours">
+  <swp-card>
+    <swp-schedule-header>
+      <swp-section-label>Arbejdstidsplan</swp-section-label>
+      <swp-edit-link href="poc-arbejdstidsplan.html">
+        <svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+        Rediger i arbejdstidsplan
+      </swp-edit-link>
+    </swp-schedule-header>
+
+    <swp-schedule-grid>
+      <!-- Header row -->
+      <swp-cell class="header week-col"></swp-cell>
+      <swp-cell class="header"><swp-day-name>Mandag</swp-day-name></swp-cell>
+      <swp-cell class="header"><swp-day-name>Tirsdag</swp-day-name></swp-cell>
+      <swp-cell class="header"><swp-day-name>Onsdag</swp-day-name></swp-cell>
+      <swp-cell class="header"><swp-day-name>Torsdag</swp-day-name></swp-cell>
+      <swp-cell class="header"><swp-day-name>Fredag</swp-day-name></swp-cell>
+      <swp-cell class="header"><swp-day-name>Lørdag</swp-day-name></swp-cell>
+      <swp-cell class="header"><swp-day-name>Søndag</swp-day-name></swp-cell>
+
+      <!-- Uge 51 -->
+      <swp-cell class="week-label">Uge 51<swp-week-hours>38 timer</swp-week-hours></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 17:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 17:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>10:00 - 18:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 17:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 15:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
+
+      <!-- Uge 52 -->
+      <swp-cell class="week-label">Uge 52<swp-week-hours>20 timer</swp-week-hours></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 17:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 13:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="vacation">Ferie</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="vacation">Ferie</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="vacation">Ferie</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="vacation">Ferie</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="vacation">Ferie</swp-time-badge></swp-cell>
+
+      <!-- Uge 1 -->
+      <swp-cell class="week-label">Uge 1<swp-week-hours>0 timer</swp-week-hours></swp-cell>
+      <swp-cell><swp-time-badge class="vacation">Ferie</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="vacation">Ferie</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
+
+      <!-- Uge 2 -->
+      <swp-cell class="week-label">Uge 2<swp-week-hours>38 timer</swp-week-hours></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 17:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 17:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>10:00 - 18:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 17:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 15:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
+
+      <!-- Uge 3 -->
+      <swp-cell class="week-label">Uge 3<swp-week-hours>38 timer</swp-week-hours></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 17:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 17:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>10:00 - 18:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 17:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 15:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
+
+      <!-- Uge 4 -->
+      <swp-cell class="week-label">Uge 4<swp-week-hours>38 timer</swp-week-hours></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 17:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 17:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>10:00 - 18:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 17:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge>09:00 - 15:00</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
+      <swp-cell><swp-time-badge class="off">—</swp-time-badge></swp-cell>
+    </swp-schedule-grid>
+  </swp-card>
+</swp-tab-content>
+
+<!-- ==========================================
+     SERVICES TAB
+     ========================================== -->
+<swp-tab-content data-tab="services">
+  <swp-tab-info>
+    <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/></svg>
+    <span>Priserne vises for stillingen "<strong>Master Stylist</strong>". <strong>Tip:</strong> Hold Shift nede for at vælge en række, eller Ctrl for at vælge flere enkeltvis.</span>
+  </swp-tab-info>
+  <div class="services-layout">
+    <!-- Venstre panel: Tilgængelige services (collapsible) -->
+    <swp-services-panel id="servicesPanel" class="collapsed">
+      <swp-panel-toggle id="panelToggle" title="Klik for at redigere services">
+        <svg viewBox="0 0 24 24" width="16" height="16"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+      </swp-panel-toggle>
+      <swp-panel-content>
+        <swp-card class="services-card">
+          <swp-section-label>Tilgængelige services</swp-section-label>
+          <swp-search-field>
+            <img src="icons/search.svg" alt="Søg" width="16" height="16">
+            <input type="text" id="serviceSearch" placeholder="Søg i services...">
+          </swp-search-field>
+          <swp-services-available id="availableServices">
+            <!-- Services vil blive indsat her -->
+          </swp-services-available>
+        </swp-card>
+      </swp-panel-content>
+    </swp-services-panel>
+
+    <!-- Højre kolonne: Valgte services -->
+    <swp-card class="services-card selected-services-card">
+      <swp-section-label>
+        Valgte services
+        <button type="button" id="editServicesBtn" class="edit-services-btn">
+          <svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
+          Rediger
+        </button>
+      </swp-section-label>
+      <swp-services-selected id="selectedServices">
+        <swp-services-empty>
+          <svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+          <span>Træk services hertil</span>
+        </swp-services-empty>
+      </swp-services-selected>
+    </swp-card>
+  </div>
+</swp-tab-content>
+
+<!-- ==========================================
+     LØN TAB
+     ========================================== -->
+<swp-tab-content data-tab="salary">
+  <div class="grid-2">
+    <div>
+      <swp-card>
+        <swp-card-header>
+          <swp-section-label>Satser</swp-section-label>
+          <button class="btn-link" onclick="openRatesDrawer()">Rediger</button>
+        </swp-card-header>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Normal (timeløn)</swp-edit-label>
+            <swp-edit-value class="mono">131,49 kr</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Overarbejde (100%)</swp-edit-label>
+            <swp-edit-value class="mono">280,50 kr</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Ferie m. løn</swp-edit-label>
+            <swp-edit-value class="mono">140,25 kr</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+      </swp-card>
+
+      <swp-card>
+        <swp-section-label>Provision</swp-section-label>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Minimum pr. time</swp-edit-label>
+            <swp-edit-value class="mono" contenteditable="true">220 kr</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>På services</swp-edit-label>
+            <swp-edit-value class="mono" contenteditable="true">15%</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>På produktsalg</swp-edit-label>
+            <swp-edit-value class="mono" contenteditable="true">15%</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+      </swp-card>
+
+      <swp-card>
+        <swp-section-label>Tillæg</swp-section-label>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>8-21 Hverdage</swp-edit-label>
+            <swp-edit-value class="mono">28,03 kr</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>8-21 Lørdage</swp-edit-label>
+            <swp-edit-value class="mono">56,02 kr</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Søndag</swp-edit-label>
+            <swp-edit-value class="mono">112,07 kr</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+      </swp-card>
+    </div>
+
+    <swp-card>
+      <swp-section-label>Lønspecifikationer</swp-section-label>
+      <swp-salary-history>
+        <table>
+          <thead>
+            <tr>
+              <th>Periode</th>
+              <th>Bruttoløn</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Januar 2026</td>
+              <td class="mono">34.063,50 kr</td>
+              <td><a href="poc-loenspecifikation.html" class="link">Vis</a></td>
+            </tr>
+            <tr>
+              <td>December 2025</td>
+              <td class="mono">31.845,00 kr</td>
+              <td><a href="poc-loenspecifikation.html" class="link">Vis</a></td>
+            </tr>
+            <tr>
+              <td>November 2025</td>
+              <td class="mono">33.290,25 kr</td>
+              <td><a href="poc-loenspecifikation.html" class="link">Vis</a></td>
+            </tr>
+            <tr>
+              <td>Oktober 2025</td>
+              <td class="mono">32.156,75 kr</td>
+              <td><a href="poc-loenspecifikation.html" class="link">Vis</a></td>
+            </tr>
+            <tr>
+              <td>September 2025</td>
+              <td class="mono">34.520,00 kr</td>
+              <td><a href="poc-loenspecifikation.html" class="link">Vis</a></td>
+            </tr>
+          </tbody>
+        </table>
+      </swp-salary-history>
+    </swp-card>
+  </div>
+</swp-tab-content>
+
+<!-- ==========================================
+     HR TAB
+     ========================================== -->
+<swp-tab-content data-tab="hr">
+  <div class="grid-2">
+    <!-- Venstre kolonne -->
+    <div>
+      <!-- Kontrakt & Dokumenter -->
+      <swp-card>
+        <swp-section-label>Kontrakt & Dokumenter</swp-section-label>
+
+        <!-- Kontrakt info -->
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Kontrakttype</swp-edit-label>
+            <swp-edit-select>
+              <select>
+                <option selected>Fastansættelse</option>
+                <option>Tidsbegrænset</option>
+                <option>Freelance</option>
+                <option>Elev/Lærling</option>
+              </select>
+            </swp-edit-select>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Opsigelsesvarsel</swp-edit-label>
+            <swp-edit-select>
+              <select>
+                <option>14 dage</option>
+                <option selected>1 måned</option>
+                <option>3 måneder</option>
+              </select>
+            </swp-edit-select>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Kontraktudløb</swp-edit-label>
+            <swp-edit-value>— (ingen udløb)</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+
+        <!-- Dokument liste -->
+        <swp-document-list>
+          <swp-document-item>
+            <swp-document-icon>📄</swp-document-icon>
+            <swp-document-info>
+              <swp-document-name>Ansættelseskontrakt.pdf</swp-document-name>
+              <swp-document-meta>Uploadet 1. aug 2019</swp-document-meta>
+            </swp-document-info>
+            <swp-document-actions>
+              <swp-btn class="small secondary">Vis</swp-btn>
+            </swp-document-actions>
+          </swp-document-item>
+          <swp-document-item>
+            <swp-document-icon>📄</swp-document-icon>
+            <swp-document-info>
+              <swp-document-name>Tillæg - Lønforhøjelse 2023.pdf</swp-document-name>
+              <swp-document-meta>Uploadet 15. jan 2023</swp-document-meta>
+            </swp-document-info>
+            <swp-document-actions>
+              <swp-btn class="small secondary">Vis</swp-btn>
+            </swp-document-actions>
+          </swp-document-item>
+        </swp-document-list>
+
+        <swp-add-button>
+          + Upload dokument
+        </swp-add-button>
+      </swp-card>
+    </div>
+
+    <!-- Højre kolonne -->
+    <div>
+      <!-- Certificeringer -->
+      <swp-card>
+        <swp-section-label>Certificeringer</swp-section-label>
+        <swp-cert-list>
+          <swp-cert-item>
+            <swp-cert-icon>🎓</swp-cert-icon>
+            <swp-cert-info>
+              <swp-cert-name>Balayage Specialist</swp-cert-name>
+              <swp-cert-dates>Udløber: 15. juni 2026</swp-cert-dates>
+            </swp-cert-info>
+            <swp-cert-status class="valid">Gyldig</swp-cert-status>
+          </swp-cert-item>
+          <swp-cert-item>
+            <swp-cert-icon>🎓</swp-cert-icon>
+            <swp-cert-info>
+              <swp-cert-name>Farvecertificering (Wella)</swp-cert-name>
+              <swp-cert-dates>Udløber: 1. marts 2025</swp-cert-dates>
+            </swp-cert-info>
+            <swp-cert-status class="expiring">Udløber snart</swp-cert-status>
+          </swp-cert-item>
+        </swp-cert-list>
+        <swp-add-button>
+          + Tilføj certificering
+        </swp-add-button>
+      </swp-card>
+
+      <!-- Kurser -->
+      <swp-card>
+        <swp-section-label>Kurser</swp-section-label>
+
+        <swp-course-section>
+          <swp-course-section-title>Gennemførte kurser</swp-course-section-title>
+          <swp-course-list>
+            <swp-course-item>
+              <swp-course-info>
+                <swp-course-name>Avanceret balayage teknikker</swp-course-name>
+                <swp-course-meta>Wella Academy · Marts 2024</swp-course-meta>
+              </swp-course-info>
+            </swp-course-item>
+            <swp-course-item>
+              <swp-course-info>
+                <swp-course-name>Kundeservice & mersalg</swp-course-name>
+                <swp-course-meta>SalonUp · November 2023</swp-course-meta>
+              </swp-course-info>
+            </swp-course-item>
+          </swp-course-list>
+        </swp-course-section>
+
+        <swp-course-section>
+          <swp-course-section-title>Planlagte kurser</swp-course-section-title>
+          <swp-course-list>
+            <swp-course-item class="upcoming">
+              <swp-course-info>
+                <swp-course-name>Olaplex certificering</swp-course-name>
+                <swp-course-meta>Olaplex DK · 15. februar 2026</swp-course-meta>
+              </swp-course-info>
+              <swp-course-status>Tilmeldt</swp-course-status>
+            </swp-course-item>
+          </swp-course-list>
+        </swp-course-section>
+
+        <swp-add-button>
+          + Tilføj kursus
+        </swp-add-button>
+      </swp-card>
+    </div>
+  </div>
+
+  <!-- Ferie & Fravær sektion -->
+  <div class="grid-2" style="margin-top: 24px;">
+    <swp-card>
+      <swp-section-label>Ferie-saldo</swp-section-label>
+      <swp-edit-section>
+        <swp-edit-row>
+          <swp-edit-label>Optjente feriedage</swp-edit-label>
+          <swp-edit-value>25 dage</swp-edit-value>
+        </swp-edit-row>
+        <swp-edit-row>
+          <swp-edit-label>Brugte feriedage</swp-edit-label>
+          <swp-edit-value>12 dage</swp-edit-value>
+        </swp-edit-row>
+        <swp-edit-row>
+          <swp-edit-label>Resterende</swp-edit-label>
+          <swp-edit-value style="font-weight: 600; color: var(--color-teal);">13 dage</swp-edit-value>
+        </swp-edit-row>
+      </swp-edit-section>
+    </swp-card>
+
+    <swp-card>
+      <swp-section-label>Fravær & Sygdom</swp-section-label>
+      <swp-edit-section>
+        <swp-edit-row>
+          <swp-edit-label>Sygefravær 2025</swp-edit-label>
+          <swp-edit-value>3 dage</swp-edit-value>
+        </swp-edit-row>
+        <swp-edit-row>
+          <swp-edit-label>Sygefravær 2024</swp-edit-label>
+          <swp-edit-value>7 dage</swp-edit-value>
+        </swp-edit-row>
+        <swp-edit-row>
+          <swp-edit-label>Børns sygdom 2025</swp-edit-label>
+          <swp-edit-value>1 dag</swp-edit-value>
+        </swp-edit-row>
+        <swp-edit-row>
+          <swp-edit-label>Barsel</swp-edit-label>
+          <swp-edit-value>— (ingen planlagt)</swp-edit-value>
+        </swp-edit-row>
+      </swp-edit-section>
+    </swp-card>
+  </div>
+
+  <!-- Planlagt fravær -->
+  <swp-card style="margin-top: 24px;">
+    <swp-section-label>Planlagt fravær</swp-section-label>
+    <swp-vacation-list>
+      <swp-vacation-item>
+        <swp-vacation-dates>23. dec – 2. jan 2026</swp-vacation-dates>
+        <swp-vacation-type class="ferie">Ferie</swp-vacation-type>
+      </swp-vacation-item>
+      <swp-vacation-item>
+        <swp-vacation-dates>14. feb 2025</swp-vacation-dates>
+        <swp-vacation-type class="fri">Fri</swp-vacation-type>
+      </swp-vacation-item>
+      <swp-vacation-item>
+        <swp-vacation-dates>7. apr – 11. apr 2025</swp-vacation-dates>
+        <swp-vacation-type class="ferie">Ferie</swp-vacation-type>
+      </swp-vacation-item>
+    </swp-vacation-list>
+    <swp-add-button>
+      + Tilføj fravær
+    </swp-add-button>
+  </swp-card>
+</swp-tab-content>
+
+<!-- ==========================================
+     STATISTIK TAB
+     ========================================== -->
+<swp-tab-content data-tab="stats">
+  <div class="grid-4" style="margin-bottom: 24px;">
+    <swp-stat-card class="highlight">
+      <swp-stat-value>42</swp-stat-value>
+      <swp-stat-label>Bookinger denne måned</swp-stat-label>
+    </swp-stat-card>
+    <swp-stat-card>
+      <swp-stat-value>30.825 kr</swp-stat-value>
+      <swp-stat-label>Værdi af bookede services</swp-stat-label>
+      <swp-stat-subtitle>Baseret på 49 bookinger</swp-stat-subtitle>
+    </swp-stat-card>
+    <swp-stat-card>
+      <swp-stat-value>28.450 kr</swp-stat-value>
+      <swp-stat-label>Omsætning denne måned</swp-stat-label>
+    </swp-stat-card>
+    <swp-stat-card>
+      <swp-stat-value>68%</swp-stat-value>
+      <swp-stat-label>Gengangere</swp-stat-label>
+    </swp-stat-card>
+  </div>
+
+  <!-- Omsætning & Belægningsgrad chart -->
+  <swp-card style="margin-bottom: 24px;">
+    <swp-chart-section>
+      <swp-chart-header>
+        <swp-chart-title>Omsætning & Belægningsgrad</swp-chart-title>
+        <swp-chart-subtitle>3 måneder bagud · 3 måneder frem</swp-chart-subtitle>
+      </swp-chart-header>
+      <swp-chart-container id="revenueUtilizationChart" style="height: 300px;"></swp-chart-container>
+    </swp-chart-section>
+  </swp-card>
+
+  <div class="grid-2">
+    <swp-card>
+      <swp-chart-section>
+        <swp-chart-header>
+          <swp-chart-title>Omsætning (sidste 6 mdr)</swp-chart-title>
+          <swp-chart-legend>
+            <swp-chart-legend-item>
+              <swp-chart-legend-dot class="services"></swp-chart-legend-dot>
+              <span>Services</span>
+            </swp-chart-legend-item>
+            <swp-chart-legend-item>
+              <swp-chart-legend-dot class="products"></swp-chart-legend-dot>
+              <span>Produkter</span>
+            </swp-chart-legend-item>
+          </swp-chart-legend>
+        </swp-chart-header>
+        <swp-chart-container id="revenueChart" style="height: 220px;"></swp-chart-container>
+      </swp-chart-section>
+    </swp-card>
+
+    <swp-card>
+      <swp-section-label>Seneste bookinger</swp-section-label>
+      <swp-booking-table>
+        <table>
+          <thead>
+            <tr>
+              <th>Kunde</th>
+              <th>Service</th>
+              <th>Dato</th>
+              <th>Beløb</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td class="customer">Maria Hansen</td>
+              <td>Klip & Farve</td>
+              <td class="date">23. dec 2024</td>
+              <td class="amount">995 kr</td>
+            </tr>
+            <tr>
+              <td class="customer">Louise Nielsen</td>
+              <td>Balayage</td>
+              <td class="date">22. dec 2024</td>
+              <td class="amount">1.495 kr</td>
+            </tr>
+            <tr>
+              <td class="customer">Sofie Andersen</td>
+              <td>Dameklip</td>
+              <td class="date">22. dec 2024</td>
+              <td class="amount">425 kr</td>
+            </tr>
+            <tr>
+              <td class="customer">Karen Pedersen</td>
+              <td>Klip & Farve</td>
+              <td class="date">21. dec 2024</td>
+              <td class="amount">1.095 kr</td>
+            </tr>
+            <tr>
+              <td class="customer">Emma Larsen</td>
+              <td>Olaplex</td>
+              <td class="date">21. dec 2024</td>
+              <td class="amount">350 kr</td>
+            </tr>
+          </tbody>
+        </table>
+      </swp-booking-table>
+    </swp-card>
+  </div>
+
+  <!-- Afsluttede bookinger (fakturaliste) -->
+  <swp-card style="margin-top: 24px;">
+    <swp-section-label>Afsluttede bookinger</swp-section-label>
+    <swp-invoice-table>
+      <table>
+        <thead>
+          <tr>
+            <th>Dato</th>
+            <th>Tid</th>
+            <th>Kunde</th>
+            <th>Services</th>
+            <th>Varighed</th>
+            <th class="amount-col">Beløb</th>
+            <th>Status</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td class="date">23. dec 2024</td>
+            <td class="time">10:00</td>
+            <td class="customer">Maria Hansen</td>
+            <td class="services">Dameklip, Bundfarve</td>
+            <td class="duration">2t 30m</td>
+            <td class="amount">1.510 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">23. dec 2024</td>
+            <td class="time">13:30</td>
+            <td class="customer">Louise Nielsen</td>
+            <td class="services">Balayage langt hår, Olaplex</td>
+            <td class="duration">3t</td>
+            <td class="amount">2.700 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">22. dec 2024</td>
+            <td class="time">09:00</td>
+            <td class="customer">Sofie Andersen</td>
+            <td class="services">Dameklip</td>
+            <td class="duration">1t</td>
+            <td class="amount">725 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">22. dec 2024</td>
+            <td class="time">11:00</td>
+            <td class="customer">Karen Pedersen</td>
+            <td class="services">Striber mellemlangt hår, Klip</td>
+            <td class="duration">2t 30m</td>
+            <td class="amount">2.390 kr</td>
+            <td><swp-status-badge class="pending">Afventer</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">21. dec 2024</td>
+            <td class="time">14:00</td>
+            <td class="customer">Emma Larsen</td>
+            <td class="services">Olaplex Stand alone</td>
+            <td class="duration">1t</td>
+            <td class="amount">550 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">21. dec 2024</td>
+            <td class="time">10:00</td>
+            <td class="customer">Mette Kristensen</td>
+            <td class="services">Herreklip</td>
+            <td class="duration">1t</td>
+            <td class="amount">645 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">20. dec 2024</td>
+            <td class="time">09:30</td>
+            <td class="customer">Anne Thomsen</td>
+            <td class="services">Glossing mellemlangt hår</td>
+            <td class="duration">1t</td>
+            <td class="amount">745 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+          <tr>
+            <td class="date">20. dec 2024</td>
+            <td class="time">12:00</td>
+            <td class="customer">Lise Mortensen</td>
+            <td class="services">Dameklip, Farvning vipper & bryn</td>
+            <td class="duration">1t 30m</td>
+            <td class="amount">1.070 kr</td>
+            <td><swp-status-badge class="paid">Betalt</swp-status-badge></td>
+          </tr>
+        </tbody>
+      </table>
+    </swp-invoice-table>
+  </swp-card>
+</swp-tab-content>
+
+<script type="module">
+  // Tab switching
+  document.querySelectorAll('swp-tab').forEach(tab => {
+    tab.addEventListener('click', () => {
+      document.querySelectorAll('swp-tab').forEach(t => t.classList.remove('active'));
+      document.querySelectorAll('swp-tab-content').forEach(c => c.classList.remove('active'));
+      tab.classList.add('active');
+      document.querySelector(`swp-tab-content[data-tab="${tab.dataset.tab}"]`).classList.add('active');
+    });
+  });
+
+  // Toggle sliders
+  document.querySelectorAll('swp-toggle-slider').forEach(slider => {
+    slider.addEventListener('click', () => {
+      slider.dataset.value = slider.dataset.value === 'yes' ? 'no' : 'yes';
+    });
+  });
+
+  // ==========================================
+  // Services Drag-Drop Functionality
+  // ==========================================
+
+  // Category colors
+  const categoryColors = {
+    'Klip dame, herre og børn': '#1e88e5',
+    'Farvebehandlinger': '#8e24aa',
+    'Striber/ Refleksbehandling': '#f4511e',
+    'Hårvask med styling eller uden styling': '#00897b',
+    'Henna naturlig hårfarver': '#6d4c41',
+    'Kurbehandling': '#43a047',
+    'Bryn og vipper': '#ec407a',
+    'Balayage': '#ab47bc',
+    'Skæg': '#5c6bc0',
+    'Gloss': '#ffb300',
+    'Håropsætning': '#e91e63',
+    'Modeller': '#78909c',
+    'Tristan farve modeller': '#26a69a',
+    'Uden kategori': '#607d8b',
+    'Tilvalg services': '#009688'
+  };
+
+  // Pre-selected services (by name)
+  const preSelectedServices = [
+    // Klip
+    'Dameklip',
+    'Dameklip uden snak',
+    'Herreklip',
+    'Herreklip uden snak',
+    'Skin fade',
+    'Børneklip 0-4 år',
+    'Børneklip 4-8 år',
+    // Farve
+    'Bundfarve almindelig udgroning maks 3 cm',
+    'Helfarve kort hår',
+    'Helfarve mellemlangt hår',
+    // Striber
+    'Striber kort hår',
+    'Striber mellemlangt hår',
+    // Bryn og vipper
+    'Farvning vipper & bryn',
+    'Farvning vipper',
+    'Farvning og retning af bryn',
+    // Balayage
+    'Balayage maks til skulderen',
+    'Balayage langt hår',
+    // Gloss
+    'Glossing kort hår',
+    'Glossing mellemlangt/ langt hår'
+  ];
+
+  // All services data - loaded from JSON
+  let allServices = [];
+  const serviceState = new Map();
+
+  const selectedContainer = document.getElementById('selectedServices');
+  const availableContainer = document.getElementById('availableServices');
+  const serviceSearch = document.getElementById('serviceSearch');
+
+  // Load services from JSON
+  async function loadServices() {
+    try {
+      const response = await fetch('data/kk-services.json');
+      const data = await response.json();
+
+      let id = 1;
+      for (const [category, services] of Object.entries(data)) {
+        const color = categoryColors[category] || '#607d8b';
+        services.forEach(service => {
+          const isPreSelected = preSelectedServices.includes(service.name);
+          allServices.push({
+            id: id,
+            name: service.name,
+            category: category,
+            color: color,
+            duration: service.duration,
+            price: service.price,
+            selected: isPreSelected
+          });
+
+          serviceState.set(id, {
+            selected: isPreSelected,
+            priceOverride: null,
+            durationOverride: 0
+          });
+
+          id++;
+        });
+      }
+
+      console.log(`Loaded ${allServices.length} services from JSON`);
+      renderServices();
+    } catch (error) {
+      console.error('Fejl ved indlæsning af services:', error);
+    }
+  }
+
+  // Format duration
+  function formatDuration(minutes) {
+    if (minutes >= 60) {
+      const hours = Math.floor(minutes / 60);
+      const mins = minutes % 60;
+      return mins > 0 ? `${hours}t ${mins}m` : `${hours}t`;
+    }
+    return `${minutes}m`;
+  }
+
+  // Format duration with offset (e.g., "1t -5m" or "30m +10m")
+  function formatDurationWithOffset(baseMinutes, offset) {
+    const baseStr = formatDuration(baseMinutes);
+    if (offset === 0) return baseStr;
+    const sign = offset > 0 ? '+' : '';
+    return `${baseStr} <span class="duration-offset">${sign}${offset}m</span>`;
+  }
+
+  // Create service row HTML
+  function createServiceRow(service, isSelected) {
+    const state = serviceState.get(service.id);
+    const effectivePrice = state.priceOverride !== null ? state.priceOverride : service.price;
+    const effectiveDuration = service.duration + state.durationOverride;
+    const hasPriceOverride = state.priceOverride !== null && state.priceOverride !== service.price;
+    const hasDurationOverride = state.durationOverride !== 0;
+
+    const row = document.createElement('swp-service-row');
+    row.dataset.id = service.id;
+    row.dataset.category = service.category;
+    row.draggable = true;
+
+    if (hasPriceOverride || hasDurationOverride) {
+      row.classList.add('has-override');
+    }
+
+    if (isSelected) {
+      // Selected: show adjusted values + original values in bordered box when modified
+      const hasAnyOverride = hasPriceOverride || hasDurationOverride;
+
+      // Original values box (shown when any override exists)
+      const originalsHtml = hasAnyOverride
+        ? `<swp-service-originals>
+            <span class="original-price-val ${hasPriceOverride ? 'struck' : ''}" data-original-price="${service.price}">${service.price} kr</span>
+            <span class="original-duration-val ${hasDurationOverride ? 'struck' : ''}" data-original-duration="${service.duration}">${formatDuration(service.duration)}</span>
+          </swp-service-originals>`
+        : '';
+
+      row.innerHTML = `
+        <swp-drag-handle>⋮⋮</swp-drag-handle>
+        <swp-service-color style="background: ${service.color};"></swp-service-color>
+        <swp-service-info>
+          <swp-service-name>${service.name}</swp-service-name>
+        </swp-service-info>
+        <swp-service-values>
+          ${originalsHtml}
+          <swp-service-price class="${hasPriceOverride ? 'modified' : ''}">${effectivePrice} kr</swp-service-price>
+          <swp-service-duration class="${hasDurationOverride ? 'modified' : ''}">${formatDuration(effectiveDuration)}</swp-service-duration>
+        </swp-service-values>
+        <swp-service-controls>
+          <swp-service-originals-edit>
+            <span class="original-price-val ${hasPriceOverride ? 'struck' : ''}">${service.price} kr</span>
+            <span class="original-duration-val ${hasDurationOverride ? 'struck' : ''}">${formatDuration(service.duration)}</span>
+          </swp-service-originals-edit>
+          <swp-service-final-values>
+            <swp-adjustable-value class="price-adjust ${hasPriceOverride ? 'modified' : ''}" data-type="price" data-original="${service.price}" data-value="${effectivePrice}" data-step="5">
+              <button class="adjust-down" type="button">−</button>
+              <span class="adjust-display">${effectivePrice} kr</span>
+              <button class="adjust-up" type="button">+</button>
+            </swp-adjustable-value>
+            <swp-adjustable-value class="duration-adjust ${hasDurationOverride ? 'modified' : ''}" data-type="duration" data-base="${service.duration}" data-offset="${state.durationOverride}" data-step="5">
+              <button class="adjust-down" type="button">−</button>
+              <span class="adjust-display">${formatDuration(effectiveDuration)}</span>
+              <button class="adjust-up" type="button">+</button>
+            </swp-adjustable-value>
+          </swp-service-final-values>
+        </swp-service-controls>
+      `;
+    } else {
+      // Available: name only (no price/duration)
+      row.innerHTML = `
+        <swp-drag-handle>⋮⋮</swp-drag-handle>
+        <swp-service-color style="background: ${service.color};"></swp-service-color>
+        <swp-service-info>
+          <swp-service-name>${service.name}</swp-service-name>
+        </swp-service-info>
+      `;
+    }
+
+    return row;
+  }
+
+  // Render all services
+  function renderServices(searchQuery = '') {
+    const lowerQuery = searchQuery.toLowerCase();
+
+    // Group services by category
+    const selectedByCategory = {};
+    const availableByCategory = {};
+
+    allServices.forEach(service => {
+      const state = serviceState.get(service.id);
+      const matchesSearch = !searchQuery || service.name.toLowerCase().includes(lowerQuery);
+
+      if (state.selected) {
+        if (!selectedByCategory[service.category]) {
+          selectedByCategory[service.category] = [];
+        }
+        selectedByCategory[service.category].push(service);
+      } else if (matchesSearch) {
+        if (!availableByCategory[service.category]) {
+          availableByCategory[service.category] = [];
+        }
+        availableByCategory[service.category].push(service);
+      }
+    });
+
+    // Render selected services
+    selectedContainer.innerHTML = '';
+    const selectedCategories = Object.entries(selectedByCategory);
+
+    if (selectedCategories.length === 0) {
+      selectedContainer.innerHTML = `
+        <swp-services-empty>
+          <svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+          <span>Træk services hertil</span>
+        </swp-services-empty>
+      `;
+    } else {
+      selectedCategories.forEach(([category, services]) => {
+        const group = document.createElement('swp-service-category-group');
+        group.innerHTML = `<swp-service-category-header>${category}</swp-service-category-header>`;
+        services.forEach(service => {
+          group.appendChild(createServiceRow(service, true));
+        });
+        selectedContainer.appendChild(group);
+      });
+    }
+
+    // Render available services
+    availableContainer.innerHTML = '';
+    const availableCategories = Object.entries(availableByCategory);
+
+    availableCategories.forEach(([category, services]) => {
+      const group = document.createElement('swp-service-category-group');
+      group.innerHTML = `<swp-service-category-header>${category}</swp-service-category-header>`;
+      services.forEach(service => {
+        group.appendChild(createServiceRow(service, false));
+      });
+      availableContainer.appendChild(group);
+    });
+  }
+
+  // Multi-selection state
+  let selectedServiceIds = new Set();
+  let lastClickedId = null;
+
+  // Get all service IDs in order (for shift-selection)
+  function getOrderedServiceIds(container) {
+    return Array.from(container.querySelectorAll('swp-service-row'))
+      .map(row => parseInt(row.dataset.id));
+  }
+
+  // Handle service row click for selection
+  function handleServiceClick(e, row) {
+    const serviceId = parseInt(row.dataset.id);
+    const container = row.closest('swp-services-selected, swp-services-available');
+
+    if (e.shiftKey && lastClickedId !== null) {
+      // Shift+click: range selection
+      const orderedIds = getOrderedServiceIds(container);
+      const startIndex = orderedIds.indexOf(lastClickedId);
+      const endIndex = orderedIds.indexOf(serviceId);
+
+      if (startIndex !== -1 && endIndex !== -1) {
+        const minIndex = Math.min(startIndex, endIndex);
+        const maxIndex = Math.max(startIndex, endIndex);
+
+        for (let i = minIndex; i <= maxIndex; i++) {
+          selectedServiceIds.add(orderedIds[i]);
+        }
+      }
+    } else if (e.ctrlKey || e.metaKey) {
+      // Ctrl/Cmd+click: toggle individual selection
+      if (selectedServiceIds.has(serviceId)) {
+        selectedServiceIds.delete(serviceId);
+      } else {
+        selectedServiceIds.add(serviceId);
+      }
+    } else {
+      // Simple click: single selection
+      selectedServiceIds.clear();
+      selectedServiceIds.add(serviceId);
+    }
+
+    lastClickedId = serviceId;
+    updateSelectionVisual();
+  }
+
+  // Update visual selection state
+  function updateSelectionVisual() {
+    document.querySelectorAll('swp-service-row').forEach(row => {
+      const serviceId = parseInt(row.dataset.id);
+      if (selectedServiceIds.has(serviceId)) {
+        row.classList.add('multi-selected');
+      } else {
+        row.classList.remove('multi-selected');
+      }
+    });
+  }
+
+  // Move service between columns
+  function moveService(serviceId, toSelected) {
+    const state = serviceState.get(parseInt(serviceId));
+    if (state) {
+      state.selected = toSelected;
+      renderServices(serviceSearch.value);
+    }
+  }
+
+  // Move multiple services
+  function moveMultipleServices(serviceIds, toSelected) {
+    serviceIds.forEach(id => {
+      const state = serviceState.get(id);
+      if (state) {
+        state.selected = toSelected;
+      }
+    });
+    selectedServiceIds.clear();
+    renderServices(serviceSearch.value);
+  }
+
+  // Drag and drop handlers
+  let draggedId = null;
+  let draggedIds = [];
+
+  // Click handler for row selection
+  document.addEventListener('click', (e) => {
+    const row = e.target.closest('swp-service-row');
+    // Don't select on input focus
+    if (row && e.target.tagName !== 'INPUT') {
+      handleServiceClick(e, row);
+    }
+  });
+
+  document.addEventListener('dragstart', (e) => {
+    const row = e.target.closest('swp-service-row');
+    if (row) {
+      const serviceId = parseInt(row.dataset.id);
+
+      // If dragging a selected row, drag all selected
+      if (selectedServiceIds.has(serviceId) && selectedServiceIds.size > 1) {
+        draggedIds = Array.from(selectedServiceIds);
+        // Mark all selected as dragging
+        document.querySelectorAll('swp-service-row.multi-selected').forEach(r => {
+          r.classList.add('dragging');
+        });
+      } else {
+        // Otherwise, just drag this one
+        draggedIds = [serviceId];
+        row.classList.add('dragging');
+      }
+
+      draggedId = row.dataset.id;
+      e.dataTransfer.effectAllowed = 'move';
+      e.dataTransfer.setData('text/plain', draggedIds.join(','));
+    }
+  });
+
+  document.addEventListener('dragend', (e) => {
+    document.querySelectorAll('swp-service-row.dragging').forEach(row => {
+      row.classList.remove('dragging');
+    });
+    draggedId = null;
+    draggedIds = [];
+    selectedContainer.classList.remove('drag-over');
+    availableContainer.classList.remove('drag-over');
+  });
+
+  selectedContainer.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    selectedContainer.classList.add('drag-over');
+  });
+
+  selectedContainer.addEventListener('dragleave', (e) => {
+    if (!selectedContainer.contains(e.relatedTarget)) {
+      selectedContainer.classList.remove('drag-over');
+    }
+  });
+
+  selectedContainer.addEventListener('drop', (e) => {
+    e.preventDefault();
+    selectedContainer.classList.remove('drag-over');
+    if (draggedIds.length > 0) {
+      moveMultipleServices(draggedIds, true);
+    } else if (draggedId) {
+      moveService(draggedId, true);
+    }
+  });
+
+  availableContainer.addEventListener('dragover', (e) => {
+    e.preventDefault();
+    availableContainer.classList.add('drag-over');
+  });
+
+  availableContainer.addEventListener('dragleave', (e) => {
+    if (!availableContainer.contains(e.relatedTarget)) {
+      availableContainer.classList.remove('drag-over');
+    }
+  });
+
+  availableContainer.addEventListener('drop', (e) => {
+    e.preventDefault();
+    availableContainer.classList.remove('drag-over');
+    if (draggedIds.length > 0) {
+      moveMultipleServices(draggedIds, false);
+    } else if (draggedId) {
+      moveService(draggedId, false);
+    }
+  });
+
+  // Adjustable value click handler (up/down buttons)
+  selectedContainer.addEventListener('click', (e) => {
+    const btn = e.target.closest('.adjust-up, .adjust-down');
+    if (!btn) return;
+
+    const adjustable = btn.closest('swp-adjustable-value');
+    const row = btn.closest('swp-service-row');
+    if (!adjustable || !row) return;
+
+    const serviceId = parseInt(row.dataset.id);
+    const state = serviceState.get(serviceId);
+    const service = allServices.find(s => s.id === serviceId);
+    const step = parseInt(adjustable.dataset.step);
+    const isUp = btn.classList.contains('adjust-up');
+    const delta = isUp ? step : -step;
+
+    if (adjustable.dataset.type === 'price') {
+      // Adjust price
+      const original = parseInt(adjustable.dataset.original);
+      let current = parseInt(adjustable.dataset.value);
+      current = Math.max(0, current + delta);
+      adjustable.dataset.value = current;
+
+      const isModified = current !== original;
+      state.priceOverride = isModified ? current : null;
+
+      // Update displays
+      adjustable.querySelector('.adjust-display').textContent = `${current} kr`;
+      adjustable.classList.toggle('modified', isModified);
+
+      const priceDisplay = row.querySelector('swp-service-price');
+      if (priceDisplay) {
+        priceDisplay.textContent = `${current} kr`;
+        priceDisplay.classList.toggle('modified', isModified);
+      }
+
+      // Toggle strikethrough on all original price elements (read + edit mode)
+      row.querySelectorAll('.original-price-val').forEach(el => {
+        el.classList.toggle('struck', isModified);
+      });
+    } else if (adjustable.dataset.type === 'duration') {
+      // Adjust duration offset
+      const base = parseInt(adjustable.dataset.base);
+      let offset = parseInt(adjustable.dataset.offset);
+      offset = Math.max(-base, offset + delta); // Don't go below 0 total
+      adjustable.dataset.offset = offset;
+
+      const effectiveDuration = base + offset;
+      const isModified = offset !== 0;
+      state.durationOverride = offset;
+
+      // Update displays
+      adjustable.querySelector('.adjust-display').textContent = formatDuration(effectiveDuration);
+      adjustable.classList.toggle('modified', isModified);
+
+      const durationDisplay = row.querySelector('swp-service-duration');
+      if (durationDisplay) {
+        durationDisplay.textContent = formatDuration(effectiveDuration);
+        durationDisplay.classList.toggle('modified', isModified);
+      }
+
+      // Toggle strikethrough on all original duration elements (read + edit mode)
+      row.querySelectorAll('.original-duration-val').forEach(el => {
+        el.classList.toggle('struck', isModified);
+      });
+    }
+
+    // Check if any override exists
+    const hasOverride = state.priceOverride !== null || state.durationOverride !== 0;
+    row.classList.toggle('has-override', hasOverride);
+
+    // Handle originals box visibility and highlight
+    const valuesContainer = row.querySelector('swp-service-values');
+    let originalsBox = valuesContainer.querySelector('swp-service-originals');
+    const originalsEditBox = row.querySelector('swp-service-originals-edit');
+
+    if (hasOverride) {
+      // Show originals box if not present (insert at beginning)
+      const hasPriceOverride = state.priceOverride !== null;
+      const hasDurationOverride = state.durationOverride !== 0;
+
+      if (!originalsBox) {
+        originalsBox = document.createElement('swp-service-originals');
+        originalsBox.innerHTML = `
+          <span class="original-price-val ${hasPriceOverride ? 'struck' : ''}">${service.price} kr</span>
+          <span class="original-duration-val ${hasDurationOverride ? 'struck' : ''}">${formatDuration(service.duration)}</span>
+        `;
+        valuesContainer.insertBefore(originalsBox, valuesContainer.firstChild);
+      } else {
+        // Update struck classes on existing originals box
+        const priceVal = originalsBox.querySelector('.original-price-val');
+        const durationVal = originalsBox.querySelector('.original-duration-val');
+        if (priceVal) priceVal.classList.toggle('struck', hasPriceOverride);
+        if (durationVal) durationVal.classList.toggle('struck', hasDurationOverride);
+      }
+      // Highlight animation
+      originalsBox.classList.remove('highlight');
+      originalsEditBox?.classList.remove('highlight');
+      void originalsBox.offsetWidth; // Trigger reflow
+      originalsBox.classList.add('highlight');
+      originalsEditBox?.classList.add('highlight');
+    } else {
+      // Remove originals box if no overrides
+      if (originalsBox) originalsBox.remove();
+    }
+  });
+
+  // Search handler
+  let searchTimeout;
+  serviceSearch.addEventListener('input', (e) => {
+    clearTimeout(searchTimeout);
+    searchTimeout = setTimeout(() => {
+      renderServices(e.target.value);
+    }, 150);
+  });
+
+  // Initial load from JSON
+  loadServices();
+
+  // Services panel toggle
+  const servicesPanel = document.getElementById('servicesPanel');
+  const panelToggle = document.getElementById('panelToggle');
+  const editServicesBtn = document.getElementById('editServicesBtn');
+  const selectedServicesCard = document.querySelector('.selected-services-card');
+
+  function toggleServicesPanel() {
+    const isCollapsed = servicesPanel.classList.contains('collapsed');
+    servicesPanel.classList.toggle('collapsed', !isCollapsed);
+    servicesPanel.classList.toggle('expanded', isCollapsed);
+    selectedServicesCard.classList.toggle('edit-mode', isCollapsed);
+    editServicesBtn.classList.toggle('active', isCollapsed);
+    editServicesBtn.innerHTML = isCollapsed
+      ? `<svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg> Luk`
+      : `<svg viewBox="0 0 24 24" width="14" height="14"><path fill="currentColor" d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg> Rediger`;
+  }
+
+  panelToggle.addEventListener('click', toggleServicesPanel);
+  editServicesBtn.addEventListener('click', toggleServicesPanel);
+
+  // Checkbox rows
+  document.querySelectorAll('swp-checkbox-row').forEach(row => {
+    row.addEventListener('click', () => {
+      row.classList.toggle('checked');
+    });
+  });
+
+  // Employee status toggle
+  const statusEl = document.querySelector('swp-employee-status');
+  statusEl.addEventListener('click', () => {
+    const isActive = statusEl.dataset.active === 'true';
+    statusEl.dataset.active = isActive ? 'false' : 'true';
+    statusEl.querySelector('.text').textContent = isActive ? 'Inaktiv' : 'Aktiv';
+  });
+
+  // Avatar upload
+  const avatarUpload = document.getElementById('avatarUpload');
+  const avatarInput = document.getElementById('avatarInput');
+
+  avatarUpload.addEventListener('click', () => {
+    avatarInput.click();
+  });
+
+  avatarInput.addEventListener('change', (e) => {
+    const file = e.target.files[0];
+    if (file && file.type.startsWith('image/')) {
+      const reader = new FileReader();
+      reader.onload = (event) => {
+        // Check if image already exists
+        let img = avatarUpload.querySelector('img');
+        if (!img) {
+          img = document.createElement('img');
+          avatarUpload.insertBefore(img, avatarUpload.firstChild);
+        }
+        img.src = event.target.result;
+        avatarUpload.classList.add('has-image');
+      };
+      reader.readAsDataURL(file);
+    }
+  });
+
+  // Avatar remove
+  const avatarRemove = document.getElementById('avatarRemove');
+  avatarRemove.addEventListener('click', (e) => {
+    e.stopPropagation();
+    const img = avatarUpload.querySelector('img');
+    if (img) {
+      img.remove();
+    }
+    avatarUpload.classList.remove('has-image');
+    avatarInput.value = '';
+  });
+
+  // Revenue chart - line (Services + Produkter)
+  import { createChart } from 'https://unpkg.com/@sevenweirdpeople/swp-charting@latest/dist/index.js';
+
+  createChart(document.getElementById('revenueChart'), {
+    xAxis: { categories: ['Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec'] },
+    series: [
+      {
+        name: 'Services',
+        color: '#00897b',
+        data: [
+          { x: 'Jul', y: 22000 },
+          { x: 'Aug', y: 28500 },
+          { x: 'Sep', y: 26200 },
+          { x: 'Okt', y: 30500 },
+          { x: 'Nov', y: 27100 },
+          { x: 'Dec', y: 26000 },
+        ],
+        showArea: true,
+        area: { gradient: { startOpacity: 0.3, endOpacity: 0.05 } }
+      },
+      {
+        name: 'Produkter',
+        color: '#1976d2',
+        data: [
+          { x: 'Jul', y: 2500 },
+          { x: 'Aug', y: 2700 },
+          { x: 'Sep', y: 2600 },
+          { x: 'Okt', y: 2600 },
+          { x: 'Nov', y: 2500 },
+          { x: 'Dec', y: 2450 },
+        ],
+        showArea: true,
+        area: { gradient: { startOpacity: 0.3, endOpacity: 0.05 } }
+      }
+    ],
+    yAxis: { format: (v) => (v/1000).toFixed(0) + 'k' },
+    height: 200,
+    legend: false
+  });
+
+  // Revenue & Utilization chart - dual axis (3 mdr bagud + 3 mdr frem)
+  fetch('data/employee-revenue-utilization.json')
+    .then(res => res.json())
+    .then(data => {
+      createChart(document.getElementById('revenueUtilizationChart'), {
+        xAxis: { categories: data.categories },
+        yAxis: [
+          { min: 0, max: 50000, format: v => `${(v/1000).toFixed(0)}k` },  // Left: Revenue
+          { min: 0, max: 100, format: v => `${v}%` },                       // Right: Utilization
+        ],
+        series: [
+          // Actual revenue (solid bars)
+          {
+            name: 'Omsætning',
+            color: '#3b82f6',
+            type: 'bar',
+            yAxisIndex: 0,
+            unit: 'kr',
+            data: data.actual.revenue,
+            bar: { radius: 2 },
+          },
+          // Forecast revenue (transparent bars)
+          {
+            name: 'Omsætning (forecast)',
+            color: '#3b82f6',
+            type: 'bar',
+            yAxisIndex: 0,
+            unit: 'kr',
+            data: data.forecast.revenue,
+            bar: { radius: 2, opacity: 0.35 },
+          },
+          // Actual utilization (solid line)
+          {
+            name: 'Belægning',
+            color: '#00897b',
+            type: 'line',
+            yAxisIndex: 1,
+            unit: '%',
+            data: data.actual.utilization,
+            line: { width: 2.5 },
+            point: { radius: 0 },
+            showArea: false,
+          },
+          // Forecast utilization (dashed line)
+          {
+            name: 'Belægning (forecast)',
+            color: '#00897b',
+            type: 'line',
+            yAxisIndex: 1,
+            unit: '%',
+            data: data.forecast.utilization,
+            line: { width: 2.5, dashArray: '4 4' },
+            point: { radius: 0 },
+            showArea: false,
+          },
+        ],
+        annotations: [
+          { type: 'region', x: data.forecastStartCategory, x2: data.categories[data.categories.length - 1], backgroundColor: 'rgba(0,0,0,0.03)' },
+          { type: 'verticalLine', x: data.nowCategory, dashArray: '4 4', label: 'Nu', labelPosition: 'top' },
+        ],
+        legend: { position: 'top', align: 'end' },
+        padding: { right: 60 },
+        height: 280,
+      });
+    });
+</script>
+
+<!-- Rates Drawer -->
+<swp-drawer-overlay id="rates-overlay" onclick="closeRatesDrawer()"></swp-drawer-overlay>
+<swp-rates-drawer id="rates-drawer">
+  <swp-drawer-header>
+    <swp-drawer-title>Lønsatser</swp-drawer-title>
+    <swp-drawer-close onclick="closeRatesDrawer()">
+      <i class="ph ph-x"></i>
+    </swp-drawer-close>
+  </swp-drawer-header>
+  <swp-drawer-body>
+    <swp-section-label style="margin-bottom: 12px;">Grundsatser</swp-section-label>
+    <swp-rate-row>
+      <input type="checkbox" checked>
+      <swp-rate-label>Normal (timeløn)</swp-rate-label>
+      <swp-rate-input><input type="text" value="131,49"> kr</swp-rate-input>
+    </swp-rate-row>
+    <swp-rate-row>
+      <input type="checkbox" checked>
+      <swp-rate-label>Overarbejde (100%)</swp-rate-label>
+      <swp-rate-input><input type="text" value="280,50"> kr</swp-rate-input>
+    </swp-rate-row>
+    <swp-rate-row>
+      <input type="checkbox">
+      <swp-rate-label class="disabled">Kursus/skole</swp-rate-label>
+      <swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
+    </swp-rate-row>
+    <swp-rate-row>
+      <input type="checkbox">
+      <swp-rate-label class="disabled">Afspadsering</swp-rate-label>
+      <swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
+    </swp-rate-row>
+    <swp-rate-row>
+      <input type="checkbox">
+      <swp-rate-label class="disabled">Fri m. løn</swp-rate-label>
+      <swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
+    </swp-rate-row>
+    <swp-rate-row>
+      <input type="checkbox" checked>
+      <swp-rate-label>Ferie m. løn</swp-rate-label>
+      <swp-rate-input><input type="text" value="140,25"> kr</swp-rate-input>
+    </swp-rate-row>
+    <swp-rate-row>
+      <input type="checkbox">
+      <swp-rate-label class="disabled">Kontor</swp-rate-label>
+      <swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
+    </swp-rate-row>
+    <swp-rate-row>
+      <input type="checkbox">
+      <swp-rate-label class="disabled">Barns 1. sygedag</swp-rate-label>
+      <swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
+    </swp-rate-row>
+    <swp-rate-row>
+      <input type="checkbox">
+      <swp-rate-label class="disabled">Barns hospitalsindlæggelse</swp-rate-label>
+      <swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
+    </swp-rate-row>
+    <swp-rate-row>
+      <input type="checkbox">
+      <swp-rate-label class="disabled">Barsel</swp-rate-label>
+      <swp-rate-input class="disabled"><input type="text" value="140,25"> kr</swp-rate-input>
+    </swp-rate-row>
+
+    <div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border);">
+      <swp-section-label style="margin-bottom: 12px;">Tillæg</swp-section-label>
+      <swp-rate-row>
+        <input type="checkbox" checked>
+        <swp-rate-label>8-21 Hverdage (udenfor arbejdstid)</swp-rate-label>
+        <swp-rate-input><input type="text" value="28,03"> kr</swp-rate-input>
+      </swp-rate-row>
+      <swp-rate-row>
+        <input type="checkbox" checked>
+        <swp-rate-label>8-21 Lørdage (udenfor arbejdstid)</swp-rate-label>
+        <swp-rate-input><input type="text" value="56,02"> kr</swp-rate-input>
+      </swp-rate-row>
+      <swp-rate-row>
+        <input type="checkbox" checked>
+        <swp-rate-label>Søndag</swp-rate-label>
+        <swp-rate-input><input type="text" value="112,07"> kr</swp-rate-input>
+      </swp-rate-row>
+    </div>
+
+    <div style="margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--color-border);">
+      <swp-section-label style="margin-bottom: 12px;">Provisionsberegning</swp-section-label>
+      <swp-rate-row>
+        <input type="checkbox" checked>
+        <swp-rate-label>Provision på produktsalg</swp-rate-label>
+        <swp-rate-input><input type="text" value="15"> %</swp-rate-input>
+      </swp-rate-row>
+      <swp-rate-row>
+        <input type="checkbox" checked>
+        <swp-rate-label>Provision på servicesalg</swp-rate-label>
+        <swp-rate-input><input type="text" value="15"> %</swp-rate-input>
+      </swp-rate-row>
+    </div>
+  </swp-drawer-body>
+</swp-rates-drawer>
+
+<script>
+  function openRatesDrawer() {
+    document.getElementById('rates-overlay').classList.add('open');
+    document.getElementById('rates-drawer').classList.add('open');
+  }
+
+  function closeRatesDrawer() {
+    document.getElementById('rates-overlay').classList.remove('open');
+    document.getElementById('rates-drawer').classList.remove('open');
+  }
+</script>
+
+</body>
+</html>
diff --git a/.workbench/POC/poc-gavekort-detail.html b/.workbench/POC/poc-gavekort-detail.html
new file mode 100644
index 0000000..7bf7a98
--- /dev/null
+++ b/.workbench/POC/poc-gavekort-detail.html
@@ -0,0 +1,1533 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Fordelskort FK-A7X2-9KM4 - Salon OS</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* Dark mode */
+    @media (prefers-color-scheme: dark) {
+      :root:not(.light-mode) {
+        --color-surface: #1e1e1e;
+        --color-background: #121212;
+        --color-background-hover: #2a2a2a;
+        --color-background-alt: #1a1a1a;
+        --color-border: #333;
+        --color-text: #e0e0e0;
+        --color-text-secondary: #999;
+        --color-teal: #26a69a;
+        --color-blue: #42a5f5;
+        --color-red: #ef5350;
+        --color-amber: #ffb74d;
+        --color-purple: #a78bfa;
+        --color-green: #66bb6a;
+      }
+    }
+
+    :root.dark-mode {
+      --color-surface: #1e1e1e;
+      --color-background: #121212;
+      --color-background-hover: #2a2a2a;
+      --color-background-alt: #1a1a1a;
+      --color-border: #333;
+      --color-text: #e0e0e0;
+      --color-text-secondary: #999;
+      --color-teal: #26a69a;
+      --color-blue: #42a5f5;
+      --color-red: #ef5350;
+      --color-amber: #ffb74d;
+      --color-purple: #a78bfa;
+      --color-green: #66bb6a;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-back-link {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      font-size: 14px;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-back-link:hover {
+      color: var(--color-teal);
+    }
+
+    swp-back-link i {
+      font-size: 18px;
+    }
+
+    swp-page-title {
+      font-size: 16px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    swp-two-columns {
+      display: grid;
+      grid-template-columns: 1fr 400px;
+      gap: 24px;
+    }
+
+    /* ==========================================
+       BUTTONS
+       ========================================== */
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn i {
+      font-size: 18px;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-btn.danger {
+      background: transparent;
+      border: 1px solid var(--color-red);
+      color: var(--color-red);
+    }
+
+    swp-btn.danger:hover {
+      background: color-mix(in srgb, var(--color-red) 10%, transparent);
+    }
+
+    /* ==========================================
+       CARDS
+       ========================================== */
+    swp-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      padding: 20px;
+      margin-bottom: 20px;
+    }
+
+    swp-card:last-child {
+      margin-bottom: 0;
+    }
+
+    swp-section-label {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 12px;
+    }
+
+    /* ==========================================
+       BALANCE DISPLAY
+       ========================================== */
+    swp-balance-display {
+      display: flex;
+      align-items: baseline;
+      gap: 12px;
+      margin-bottom: 16px;
+    }
+
+    swp-balance-amount {
+      font-size: 36px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-balance-original {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-balance-bar {
+      width: 100%;
+      height: 8px;
+      background: var(--color-border);
+      border-radius: 4px;
+      overflow: hidden;
+      margin-bottom: 8px;
+    }
+
+    swp-balance-bar-fill {
+      display: block;
+      height: 100%;
+      background: var(--color-green);
+      border-radius: 4px;
+      transition: width 300ms ease;
+    }
+
+    swp-balance-text {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       EXPIRY WARNING
+       ========================================== */
+    swp-expiry-box {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 14px 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      margin-top: 20px;
+    }
+
+    swp-expiry-box i {
+      font-size: 24px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-expiry-box.warning {
+      background: color-mix(in srgb, var(--color-amber) 12%, transparent);
+    }
+
+    swp-expiry-box.warning i {
+      color: var(--color-amber);
+    }
+
+    swp-expiry-info {
+      flex: 1;
+    }
+
+    swp-expiry-label {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-expiry-date {
+      display: block;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-expiry-box.warning swp-expiry-date {
+      color: var(--color-amber);
+    }
+
+    /* ==========================================
+       KEY-VALUE ROWS
+       ========================================== */
+    swp-kv-list {
+      display: flex;
+      flex-direction: column;
+    }
+
+    swp-kv-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-kv-row:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+
+    swp-kv-row:first-child {
+      padding-top: 0;
+    }
+
+    swp-kv-label {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-kv-value {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-kv-value.mono {
+      font-family: var(--font-mono);
+    }
+
+    swp-kv-value.with-action {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-copy-btn {
+      background: none;
+      border: none;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      transition: all 150ms ease;
+      display: flex;
+    }
+
+    swp-copy-btn:hover {
+      background: var(--color-background-hover);
+      color: var(--color-teal);
+    }
+
+    /* Status badge */
+    swp-status-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 12px;
+    }
+
+    swp-status-badge.active {
+      background: color-mix(in srgb, var(--color-green) 15%, transparent);
+      color: var(--color-green);
+    }
+
+    swp-status-badge.partial {
+      background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+      color: var(--color-amber);
+    }
+
+    swp-status-badge.depleted {
+      background: color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
+      color: var(--color-text-secondary);
+    }
+
+    swp-status-badge.expired {
+      background: color-mix(in srgb, var(--color-red) 15%, transparent);
+      color: var(--color-red);
+    }
+
+    /* ==========================================
+       ACTIONS ROW
+       ========================================== */
+    swp-actions-row {
+      display: flex;
+      gap: 8px;
+      margin-top: 20px;
+      padding-top: 20px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-actions-row swp-btn {
+      flex: 1;
+      justify-content: center;
+    }
+
+    /* ==========================================
+       RECIPIENT CARD
+       ========================================== */
+    swp-recipient-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 8px 0;
+    }
+
+    swp-recipient-row:first-child {
+      padding-top: 0;
+    }
+
+    swp-recipient-row i {
+      font-size: 18px;
+      color: var(--color-text-secondary);
+      width: 20px;
+    }
+
+    swp-recipient-row span {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-recipient-row a {
+      color: var(--color-teal);
+      text-decoration: none;
+    }
+
+    swp-recipient-row a:hover {
+      text-decoration: underline;
+    }
+
+    swp-send-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      width: 100%;
+      padding: 12px;
+      margin-top: 16px;
+      background: color-mix(in srgb, var(--color-teal) 10%, transparent);
+      border: 1px solid color-mix(in srgb, var(--color-teal) 30%, transparent);
+      border-radius: 6px;
+      color: var(--color-teal);
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-send-btn:hover {
+      background: color-mix(in srgb, var(--color-teal) 15%, transparent);
+    }
+
+    swp-send-btn i {
+      font-size: 18px;
+    }
+
+    /* ==========================================
+       TRANSACTION TABLE
+       ========================================== */
+    swp-table {
+      display: block;
+      width: 100%;
+    }
+
+    swp-table-header {
+      display: grid;
+      grid-template-columns: 90px 1fr 100px 90px;
+      padding: 0 0 10px 0;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-table-row {
+      display: grid;
+      grid-template-columns: 90px 1fr 100px 90px;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+      align-items: center;
+    }
+
+    swp-table-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-td {
+      font-size: 13px;
+      color: var(--color-text);
+    }
+
+    swp-td.muted {
+      color: var(--color-text-secondary);
+    }
+
+    swp-td.mono {
+      font-family: var(--font-mono);
+    }
+
+    swp-td.right {
+      text-align: right;
+    }
+
+    swp-td.positive {
+      color: var(--color-green);
+    }
+
+    swp-td.negative {
+      color: var(--color-red);
+    }
+
+    swp-td a {
+      color: var(--color-teal);
+      text-decoration: none;
+    }
+
+    swp-td a:hover {
+      text-decoration: underline;
+    }
+
+    swp-transaction-details {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-transaction-type {
+      font-size: 13px;
+      color: var(--color-text);
+    }
+
+    swp-transaction-meta {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-transaction-meta a {
+      color: var(--color-teal);
+      text-decoration: none;
+    }
+
+    swp-transaction-meta a:hover {
+      text-decoration: underline;
+    }
+
+    /* ==========================================
+       NOTES
+       ========================================== */
+    swp-card textarea {
+      width: 100%;
+      padding: 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      background: var(--color-background-alt);
+      color: var(--color-text);
+      resize: none;
+      min-height: 80px;
+    }
+
+    swp-card textarea:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    /* ==========================================
+       OVERLAY & DRAWERS
+       ========================================== */
+    swp-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.3);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 200ms ease, visibility 0ms 200ms;
+      z-index: 500;
+    }
+
+    swp-overlay.open {
+      opacity: 1;
+      visibility: visible;
+      transition-delay: 0ms;
+    }
+
+    swp-drawer {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 400px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      transform: translateX(100%);
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+      display: flex;
+      flex-direction: column;
+      z-index: 700;
+    }
+
+    swp-drawer.open {
+      transform: translateX(0);
+    }
+
+    swp-email-preview {
+      position: fixed;
+      top: 0;
+      right: 400px;
+      bottom: 0;
+      width: 480px;
+      background: var(--color-background);
+      border-left: 1px solid var(--color-border);
+      transform: translateX(100%);
+      opacity: 0;
+      transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1), opacity 250ms ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 600;
+      pointer-events: none;
+    }
+
+    swp-email-preview.open {
+      transform: translateX(0);
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    swp-preview-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-surface);
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+    }
+
+    swp-preview-header i {
+      font-size: 18px;
+    }
+
+    swp-preview-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 24px;
+      display: flex;
+      justify-content: center;
+    }
+
+    swp-email-template {
+      display: block;
+      width: 100%;
+      max-width: 380px;
+      background: var(--color-surface);
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    swp-email-body {
+      display: block;
+      padding: 24px;
+    }
+
+    swp-email-icon {
+      display: flex;
+      justify-content: center;
+      margin-bottom: 16px;
+    }
+
+    swp-email-icon i {
+      font-size: 48px;
+      color: var(--color-teal);
+    }
+
+    swp-email-title {
+      display: block;
+      text-align: center;
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 20px;
+    }
+
+    swp-giftcard-visual {
+      display: block;
+      background: var(--color-background-alt);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      padding: 24px;
+      margin-bottom: 20px;
+      text-align: center;
+    }
+
+    swp-giftcard-amount {
+      display: block;
+      font-size: 32px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-teal);
+      margin-bottom: 8px;
+    }
+
+    swp-giftcard-code-display {
+      display: block;
+      font-family: var(--font-mono);
+      font-size: 14px;
+      letter-spacing: 2px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-email-message {
+      display: block;
+      padding: 14px 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      margin-bottom: 20px;
+      font-style: italic;
+      font-size: 14px;
+      color: var(--color-text);
+      min-height: 50px;
+      line-height: 1.5;
+    }
+
+    swp-email-sender {
+      display: block;
+      text-align: center;
+      color: var(--color-text-secondary);
+      font-size: 13px;
+    }
+
+    swp-email-sender strong {
+      display: block;
+      color: var(--color-text);
+      margin-top: 4px;
+    }
+
+    swp-email-footer {
+      display: block;
+      padding: 16px 24px;
+      border-top: 1px solid var(--color-border);
+      text-align: center;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-email-footer p {
+      margin: 2px 0;
+    }
+
+    swp-drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-drawer-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-drawer-close {
+      background: none;
+      border: none;
+      font-size: 20px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      transition: background 150ms ease;
+      display: flex;
+    }
+
+    swp-drawer-close:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-drawer-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    swp-drawer-footer {
+      display: flex;
+      gap: 12px;
+      padding: 16px 20px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-drawer-footer swp-btn {
+      flex: 1;
+    }
+
+    swp-form-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    swp-form-label {
+      font-size: 11px;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-form-field input,
+    swp-form-field textarea {
+      padding: 10px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      background: var(--color-surface);
+      color: var(--color-text);
+      transition: border-color 150ms ease;
+    }
+
+    swp-form-field input:focus,
+    swp-form-field textarea:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-form-field textarea {
+      resize: none;
+      min-height: 100px;
+    }
+
+    /* ==========================================
+       ADD VALUE DRAWER
+       ========================================== */
+    swp-balance-info-box {
+      display: block;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+    }
+
+    swp-balance-info-box swp-current-amount {
+      display: block;
+      font-size: 24px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-balance-info-box swp-original-amount {
+      display: block;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+    }
+
+    swp-new-balance-box {
+      display: block;
+      padding: 16px;
+      background: color-mix(in srgb, var(--color-green) 10%, transparent);
+      border: 1px solid color-mix(in srgb, var(--color-green) 30%, transparent);
+      border-radius: 6px;
+    }
+
+    swp-new-balance-box swp-new-amount {
+      display: block;
+      font-size: 24px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-green);
+    }
+
+    swp-new-balance-box swp-new-label {
+      display: block;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+    }
+
+    swp-quick-amounts {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    swp-quick-amount {
+      padding: 8px 16px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      background: var(--color-surface);
+      color: var(--color-text);
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-quick-amount:hover {
+      background: var(--color-background-hover);
+      border-color: var(--color-teal);
+    }
+
+    swp-quick-amount.selected {
+      background: color-mix(in srgb, var(--color-teal) 10%, transparent);
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+    }
+
+    /* Toggle Slider (Ja/Nej) */
+    swp-toggle-slider {
+      display: inline-flex;
+      width: fit-content;
+      background: var(--color-background);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      overflow: hidden;
+      position: relative;
+    }
+
+    swp-toggle-slider::before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: calc(50% - 4px);
+      height: calc(100% - 4px);
+      background: color-mix(in srgb, var(--color-green) 18%, white);
+      border-radius: 4px;
+      transition: transform 200ms ease, background 200ms ease;
+    }
+
+    swp-toggle-slider[data-value="no"]::before {
+      transform: translateX(100%);
+      background: color-mix(in srgb, var(--color-red) 18%, white);
+    }
+
+    swp-toggle-option {
+      position: relative;
+      z-index: 1;
+      padding: 5px 16px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: color 150ms ease;
+      user-select: none;
+    }
+
+    swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
+      color: var(--color-green);
+      font-weight: 600;
+    }
+
+    swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
+      color: var(--color-red);
+      font-weight: 600;
+    }
+
+    swp-date-extend {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    swp-current-expiry {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-current-expiry i {
+      font-size: 16px;
+    }
+
+    swp-current-expiry strong {
+      color: var(--color-text);
+    }
+
+    swp-date-extend input[type="date"] {
+      padding: 10px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      background: var(--color-surface);
+      color: var(--color-text);
+      transition: border-color 150ms ease;
+    }
+
+    swp-date-extend input[type="date"]:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    /* ==========================================
+       RESPONSIVE
+       ========================================== */
+    @media (max-width: 1000px) {
+      swp-two-columns {
+        grid-template-columns: 1fr;
+      }
+
+      swp-email-preview {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-back-link onclick="location.href='poc-gavekort.html'">
+        <i class="ph ph-caret-left"></i>
+        Fordelskort
+      </swp-back-link>
+      <swp-page-title>FK-A7X2-9KM4</swp-page-title>
+    </swp-topbar-left>
+    <swp-topbar-right>
+    </swp-topbar-right>
+  </swp-topbar>
+
+  <swp-page-container>
+    <swp-two-columns>
+      <!-- Left Column -->
+      <div>
+        <!-- Balance & Info Card -->
+        <swp-card>
+          <swp-section-label>Saldo</swp-section-label>
+          <swp-balance-display>
+            <swp-balance-amount>350 DKK</swp-balance-amount>
+            <swp-balance-original>af 500 DKK</swp-balance-original>
+          </swp-balance-display>
+          <swp-balance-bar>
+            <swp-balance-bar-fill style="width: 70%"></swp-balance-bar-fill>
+          </swp-balance-bar>
+          <swp-balance-text>70% tilbage</swp-balance-text>
+
+          <swp-expiry-box>
+            <i class="ph ph-calendar"></i>
+            <swp-expiry-info>
+              <swp-expiry-label>Udløbsdato</swp-expiry-label>
+              <swp-expiry-date>31. december 2025</swp-expiry-date>
+            </swp-expiry-info>
+          </swp-expiry-box>
+
+          <swp-actions-row>
+            <swp-btn class="secondary" id="openAddValueDrawer">
+              <i class="ph ph-sliders-horizontal"></i>
+              Juster
+            </swp-btn>
+            <swp-btn class="secondary" id="openEmailDrawer">
+              <i class="ph ph-envelope"></i>
+              Send på email
+            </swp-btn>
+          </swp-actions-row>
+        </swp-card>
+
+        <!-- Gift Card Details -->
+        <swp-card>
+          <swp-section-label>Kortinfo</swp-section-label>
+          <swp-kv-list>
+            <swp-kv-row>
+              <swp-kv-label>Kode</swp-kv-label>
+              <swp-kv-value class="mono with-action">
+                FK-A7X2-9KM4
+                <swp-copy-btn onclick="copyCode()">
+                  <i class="ph ph-copy"></i>
+                </swp-copy-btn>
+              </swp-kv-value>
+            </swp-kv-row>
+            <swp-kv-row>
+              <swp-kv-label>Status</swp-kv-label>
+              <swp-kv-value>
+                <swp-status-badge class="partial">Delvist brugt</swp-status-badge>
+              </swp-kv-value>
+            </swp-kv-row>
+            <swp-kv-row>
+              <swp-kv-label>Oprettet</swp-kv-label>
+              <swp-kv-value>15. januar 2024</swp-kv-value>
+            </swp-kv-row>
+            <swp-kv-row>
+              <swp-kv-label>Original værdi</swp-kv-label>
+              <swp-kv-value class="mono">500 DKK</swp-kv-value>
+            </swp-kv-row>
+            <swp-kv-row>
+              <swp-kv-label>Aktiv</swp-kv-label>
+              <swp-kv-value>
+                <swp-toggle-slider data-value="yes" id="activeToggle">
+                  <swp-toggle-option>Ja</swp-toggle-option>
+                  <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+              </swp-kv-value>
+            </swp-kv-row>
+          </swp-kv-list>
+        </swp-card>
+
+        <!-- Transactions -->
+        <swp-card>
+          <swp-section-label>Transaktioner</swp-section-label>
+          <swp-table>
+            <swp-table-header>
+              <span>Dato</span>
+              <span>Beskrivelse</span>
+              <span style="text-align: right">Beløb</span>
+              <span style="text-align: right">Saldo</span>
+            </swp-table-header>
+            <swp-table-row>
+              <swp-td class="muted">22/2-24</swp-td>
+              <swp-td>
+                <swp-transaction-details>
+                  <swp-transaction-type>Indløst ved booking</swp-transaction-type>
+                  <swp-transaction-meta>
+                    <a href="#">Faktura #1847</a> · <a href="#">Maria Hansen</a>
+                  </swp-transaction-meta>
+                </swp-transaction-details>
+              </swp-td>
+              <swp-td class="mono right negative">-150 DKK</swp-td>
+              <swp-td class="mono right">350 DKK</swp-td>
+            </swp-table-row>
+            <swp-table-row>
+              <swp-td class="muted">15/1-24</swp-td>
+              <swp-td>
+                <swp-transaction-details>
+                  <swp-transaction-type>Kort oprettet</swp-transaction-type>
+                  <swp-transaction-meta>
+                    <a href="#">Faktura #1652</a> · <a href="#">Signe Larsen</a>
+                  </swp-transaction-meta>
+                </swp-transaction-details>
+              </swp-td>
+              <swp-td class="mono right positive">+500 DKK</swp-td>
+              <swp-td class="mono right">500 DKK</swp-td>
+            </swp-table-row>
+          </swp-table>
+        </swp-card>
+      </div>
+
+      <!-- Right Column -->
+      <div>
+        <!-- Recipient -->
+        <swp-card>
+          <swp-section-label>Modtager</swp-section-label>
+          <swp-recipient-row>
+            <i class="ph ph-user"></i>
+            <span><a href="#">Maria Hansen</a></span>
+          </swp-recipient-row>
+          <swp-recipient-row>
+            <i class="ph ph-envelope"></i>
+            <span>maria@example.com</span>
+          </swp-recipient-row>
+          <swp-recipient-row>
+            <i class="ph ph-phone"></i>
+            <span>+45 12 34 56 78</span>
+          </swp-recipient-row>
+          <swp-send-btn id="openEmailDrawerAlt">
+            <i class="ph ph-paper-plane-tilt"></i>
+            Send fordelskort på email
+          </swp-send-btn>
+        </swp-card>
+
+        <!-- Notes -->
+        <swp-card>
+          <swp-section-label>Intern note</swp-section-label>
+          <textarea placeholder="Tilføj intern note...">Fødselsdagsgave fra Signe.</textarea>
+        </swp-card>
+      </div>
+    </swp-two-columns>
+  </swp-page-container>
+
+  <!-- Overlay -->
+  <swp-overlay id="overlay"></swp-overlay>
+
+  <!-- Email Preview Panel -->
+  <swp-email-preview id="emailPreview">
+    <swp-preview-header>
+      <i class="ph ph-eye"></i>
+      Email preview
+    </swp-preview-header>
+    <swp-preview-content>
+      <swp-email-template>
+        <swp-email-body>
+          <swp-email-icon>
+            <i class="ph ph-gift"></i>
+          </swp-email-icon>
+          <swp-email-title>Du har modtaget et fordelskort!</swp-email-title>
+          <swp-giftcard-visual>
+            <swp-giftcard-amount>500 DKK</swp-giftcard-amount>
+            <swp-giftcard-code-display>FK-A7X2-9KM4</swp-giftcard-code-display>
+          </swp-giftcard-visual>
+          <swp-email-message id="previewMessage">Din besked vises her...</swp-email-message>
+          <swp-email-sender>
+            Med venlig hilsen
+            <strong id="previewSender">Salon Glamour</strong>
+          </swp-email-sender>
+        </swp-email-body>
+        <swp-email-footer>
+          <p>Gyldig til: 31. december 2025</p>
+          <p>Kan bruges hos: Salon Glamour</p>
+        </swp-email-footer>
+      </swp-email-template>
+    </swp-preview-content>
+  </swp-email-preview>
+
+  <!-- Send Email Drawer -->
+  <swp-drawer id="emailDrawer">
+    <swp-drawer-header>
+      <swp-drawer-title>Send fordelskort</swp-drawer-title>
+      <swp-drawer-close id="closeEmailDrawer">
+        <i class="ph ph-x"></i>
+      </swp-drawer-close>
+    </swp-drawer-header>
+
+    <swp-drawer-content>
+      <swp-form-field>
+        <swp-form-label>Modtager email</swp-form-label>
+        <input type="email" id="recipientEmail" value="maria@example.com" />
+      </swp-form-field>
+
+      <swp-form-field>
+        <swp-form-label>Personlig besked</swp-form-label>
+        <textarea id="personalMessage" placeholder="Skriv en personlig besked til modtageren..."></textarea>
+      </swp-form-field>
+
+      <swp-form-field>
+        <swp-form-label>Afsender navn</swp-form-label>
+        <input type="text" id="senderName" value="Salon Glamour" />
+      </swp-form-field>
+    </swp-drawer-content>
+
+    <swp-drawer-footer>
+      <swp-btn class="secondary" id="cancelEmail">Annuller</swp-btn>
+      <swp-btn class="primary" id="sendEmail">
+        <i class="ph ph-paper-plane-tilt"></i>
+        Send email
+      </swp-btn>
+    </swp-drawer-footer>
+  </swp-drawer>
+
+  <!-- Add Value Drawer -->
+  <swp-drawer id="addValueDrawer">
+    <swp-drawer-header>
+      <swp-drawer-title>Juster fordelskort</swp-drawer-title>
+      <swp-drawer-close id="closeAddValueDrawer">
+        <i class="ph ph-x"></i>
+      </swp-drawer-close>
+    </swp-drawer-header>
+
+    <swp-drawer-content>
+      <swp-form-field>
+        <swp-form-label>Nuværende saldo</swp-form-label>
+        <swp-balance-info-box>
+          <swp-current-amount>350 DKK</swp-current-amount>
+          <swp-original-amount>af 500 DKK original værdi</swp-original-amount>
+        </swp-balance-info-box>
+      </swp-form-field>
+
+      <swp-form-field>
+        <swp-form-label>Beløb at tilføje</swp-form-label>
+        <input type="text" id="addValueAmount" class="mono" placeholder="Indtast beløb" value="100 DKK" />
+        <swp-quick-amounts>
+          <swp-quick-amount data-value="50">50 DKK</swp-quick-amount>
+          <swp-quick-amount data-value="100" class="selected">100 DKK</swp-quick-amount>
+          <swp-quick-amount data-value="200">200 DKK</swp-quick-amount>
+          <swp-quick-amount data-value="500">500 DKK</swp-quick-amount>
+        </swp-quick-amounts>
+      </swp-form-field>
+
+      <swp-form-field>
+        <swp-form-label>Ny saldo</swp-form-label>
+        <swp-new-balance-box>
+          <swp-new-amount id="newBalanceAmount">450 DKK</swp-new-amount>
+          <swp-new-label>Efter tilføjelse</swp-new-label>
+        </swp-new-balance-box>
+      </swp-form-field>
+
+      <swp-form-field>
+        <swp-form-label>Forlæng udløbsdato (valgfri)</swp-form-label>
+        <swp-date-extend>
+          <swp-current-expiry>
+            <i class="ph ph-calendar"></i>
+            <span>Nuværende: <strong>31. december 2025</strong></span>
+          </swp-current-expiry>
+          <input type="date" id="newExpiryDate" value="2026-12-31" />
+        </swp-date-extend>
+      </swp-form-field>
+
+      <swp-form-field>
+        <swp-form-label>Intern note</swp-form-label>
+        <textarea id="addValueNote" placeholder="Beskriv hvorfor værdi tilføjes..."></textarea>
+      </swp-form-field>
+    </swp-drawer-content>
+
+    <swp-drawer-footer>
+      <swp-btn class="secondary" id="cancelAddValue">Annuller</swp-btn>
+      <swp-btn class="primary" id="confirmAddValue">
+        <i class="ph ph-check"></i>
+        Gem ændringer
+      </swp-btn>
+    </swp-drawer-footer>
+  </swp-drawer>
+
+  <script>
+    // Elements
+    const overlay = document.getElementById('overlay');
+    const emailDrawer = document.getElementById('emailDrawer');
+    const emailPreview = document.getElementById('emailPreview');
+    const openEmailBtn = document.getElementById('openEmailDrawer');
+    const openEmailBtnAlt = document.getElementById('openEmailDrawerAlt');
+    const closeEmailBtn = document.getElementById('closeEmailDrawer');
+    const cancelEmailBtn = document.getElementById('cancelEmail');
+    const sendEmailBtn = document.getElementById('sendEmail');
+
+    // Preview elements
+    const previewMessage = document.getElementById('previewMessage');
+    const previewSender = document.getElementById('previewSender');
+    const personalMessageInput = document.getElementById('personalMessage');
+    const senderNameInput = document.getElementById('senderName');
+
+    // Open email drawer
+    function openEmailDrawerFn() {
+      overlay.classList.add('open');
+      emailDrawer.classList.add('open');
+      emailPreview.classList.add('open');
+      document.body.style.overflow = 'hidden';
+    }
+
+    // Close email drawer
+    function closeEmailDrawerFn() {
+      overlay.classList.remove('open');
+      emailDrawer.classList.remove('open');
+      emailPreview.classList.remove('open');
+      document.body.style.overflow = '';
+    }
+
+    // Update preview in real-time
+    function updatePreview() {
+      const message = personalMessageInput.value.trim();
+      const sender = senderNameInput.value.trim();
+
+      previewMessage.textContent = message || 'Din besked vises her...';
+      previewMessage.style.opacity = message ? '1' : '0.5';
+
+      previewSender.textContent = sender || 'Salon Glamour';
+    }
+
+    // Copy code to clipboard
+    function copyCode() {
+      navigator.clipboard.writeText('FK-A7X2-9KM4').then(() => {
+        alert('Kode kopieret!');
+      });
+    }
+
+    // Event listeners
+    openEmailBtn.addEventListener('click', openEmailDrawerFn);
+    openEmailBtnAlt.addEventListener('click', openEmailDrawerFn);
+    closeEmailBtn.addEventListener('click', closeEmailDrawerFn);
+    cancelEmailBtn.addEventListener('click', closeEmailDrawerFn);
+
+    // Real-time preview updates
+    personalMessageInput.addEventListener('input', updatePreview);
+    senderNameInput.addEventListener('input', updatePreview);
+
+    // Send email (demo)
+    sendEmailBtn.addEventListener('click', () => {
+      alert('Email sendt! (Demo)');
+      closeEmailDrawerFn();
+    });
+
+    // Initialize preview
+    updatePreview();
+
+    // ==========================================
+    // ADD VALUE DRAWER
+    // ==========================================
+    const addValueDrawer = document.getElementById('addValueDrawer');
+    const openAddValueBtn = document.getElementById('openAddValueDrawer');
+    const closeAddValueBtn = document.getElementById('closeAddValueDrawer');
+    const cancelAddValueBtn = document.getElementById('cancelAddValue');
+    const confirmAddValueBtn = document.getElementById('confirmAddValue');
+    const addValueAmountInput = document.getElementById('addValueAmount');
+    const newBalanceAmount = document.getElementById('newBalanceAmount');
+    const addValueQuickAmounts = document.querySelectorAll('#addValueDrawer swp-quick-amount');
+
+    const currentBalance = 350; // Demo value
+
+    // Open add value drawer
+    function openAddValueDrawerFn() {
+      overlay.classList.add('open');
+      addValueDrawer.classList.add('open');
+      document.body.style.overflow = 'hidden';
+      updateNewBalance();
+    }
+
+    // Close add value drawer
+    function closeAddValueDrawerFn() {
+      overlay.classList.remove('open');
+      addValueDrawer.classList.remove('open');
+      document.body.style.overflow = '';
+    }
+
+    // Parse amount from string
+    function parseAmount(str) {
+      const num = parseInt(str.replace(/[^\d]/g, ''), 10);
+      return isNaN(num) ? 0 : num;
+    }
+
+    // Update new balance calculation
+    function updateNewBalance() {
+      const addAmount = parseAmount(addValueAmountInput.value);
+      const newBalance = currentBalance + addAmount;
+      newBalanceAmount.textContent = newBalance.toLocaleString('da-DK') + ' DKK';
+    }
+
+    // Event listeners
+    openAddValueBtn.addEventListener('click', openAddValueDrawerFn);
+    closeAddValueBtn.addEventListener('click', closeAddValueDrawerFn);
+    cancelAddValueBtn.addEventListener('click', closeAddValueDrawerFn);
+
+    // Quick amount selection
+    addValueQuickAmounts.forEach(btn => {
+      btn.addEventListener('click', () => {
+        addValueQuickAmounts.forEach(b => b.classList.remove('selected'));
+        btn.classList.add('selected');
+        const value = btn.dataset.value;
+        addValueAmountInput.value = Number(value).toLocaleString('da-DK') + ' DKK';
+        updateNewBalance();
+      });
+    });
+
+    // Live update on input
+    addValueAmountInput.addEventListener('input', updateNewBalance);
+
+    // Confirm add value (demo)
+    confirmAddValueBtn.addEventListener('click', () => {
+      alert('Værdi tilføjet! (Demo)');
+      closeAddValueDrawerFn();
+    });
+
+    // Update overlay click to close any open drawer
+    overlay.addEventListener('click', () => {
+      closeEmailDrawerFn();
+      closeAddValueDrawerFn();
+    });
+
+    // Update Escape to close any drawer
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        closeEmailDrawerFn();
+        closeAddValueDrawerFn();
+      }
+    });
+
+    // Toggle sliders (Ja/Nej)
+    document.querySelectorAll('swp-toggle-slider').forEach(slider => {
+      slider.addEventListener('click', () => {
+        slider.dataset.value = slider.dataset.value === 'yes' ? 'no' : 'yes';
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-gavekort.html b/.workbench/POC/poc-gavekort.html
new file mode 100644
index 0000000..a449fc9
--- /dev/null
+++ b/.workbench/POC/poc-gavekort.html
@@ -0,0 +1,1203 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Fordelskort - Salon OS</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* Dark mode */
+    @media (prefers-color-scheme: dark) {
+      :root:not(.light-mode) {
+        --color-surface: #1e1e1e;
+        --color-background: #121212;
+        --color-background-hover: #2a2a2a;
+        --color-background-alt: #1a1a1a;
+        --color-border: #333;
+        --color-text: #e0e0e0;
+        --color-text-secondary: #999;
+        --color-teal: #26a69a;
+        --color-blue: #42a5f5;
+        --color-red: #ef5350;
+        --color-amber: #ffb74d;
+        --color-purple: #a78bfa;
+        --color-green: #66bb6a;
+      }
+    }
+
+    :root.dark-mode {
+      --color-surface: #1e1e1e;
+      --color-background: #121212;
+      --color-background-hover: #2a2a2a;
+      --color-background-alt: #1a1a1a;
+      --color-border: #333;
+      --color-text: #e0e0e0;
+      --color-text-secondary: #999;
+      --color-teal: #26a69a;
+      --color-blue: #42a5f5;
+      --color-red: #ef5350;
+      --color-amber: #ffb74d;
+      --color-purple: #a78bfa;
+      --color-green: #66bb6a;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-page-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    /* ==========================================
+       BUTTONS
+       ========================================== */
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn i {
+      font-size: 18px;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    /* ==========================================
+       STATS BAR
+       ========================================== */
+    swp-stats-bar {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    swp-stat-card {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 16px 20px;
+      background: var(--color-surface);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-stat-card swp-stat-value {
+      font-size: 22px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-stat-card swp-stat-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-stat-card.highlight swp-stat-value {
+      color: var(--color-teal);
+    }
+
+    swp-stat-card.success swp-stat-value {
+      color: var(--color-green);
+    }
+
+    swp-stat-card.warning swp-stat-value {
+      color: var(--color-amber);
+    }
+
+    /* ==========================================
+       FILTER BAR
+       ========================================== */
+    swp-filter-bar {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px 20px;
+      background: var(--color-surface);
+      border-radius: 8px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    swp-search-input {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      flex: 1;
+      max-width: 350px;
+    }
+
+    swp-search-input i {
+      color: var(--color-text-secondary);
+      font-size: 18px;
+    }
+
+    swp-search-input input {
+      border: none;
+      outline: none;
+      font-size: 13px;
+      font-family: var(--font-family);
+      width: 100%;
+      background: transparent;
+      color: var(--color-text);
+    }
+
+    swp-filter-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-filter-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-filter-bar select {
+      padding: 8px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 13px;
+      font-family: var(--font-family);
+      background: var(--color-surface);
+      color: var(--color-text);
+      cursor: pointer;
+    }
+
+    swp-filter-spacer {
+      flex: 1;
+    }
+
+    /* ==========================================
+       TABLE
+       ========================================== */
+    swp-table {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-table-header,
+    swp-table-row {
+      display: grid;
+      grid-template-columns: 180px minmax(150px, 1fr) 150px 150px 120px 100px 40px;
+      align-items: center;
+    }
+
+    swp-table-header {
+      background: var(--color-background-alt);
+      border-bottom: 1px solid var(--color-border);
+      padding: 12px 20px;
+    }
+
+    swp-th {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-th.right {
+      text-align: right;
+    }
+
+    swp-th.center {
+      text-align: center;
+    }
+
+    swp-table-body {
+      display: block;
+    }
+
+    swp-table-row {
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+      transition: background 150ms ease;
+      cursor: pointer;
+    }
+
+    swp-table-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-table-row:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-td {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-td.right {
+      text-align: right;
+    }
+
+    swp-td.center {
+      text-align: center;
+    }
+
+    swp-td.mono {
+      font-family: var(--font-mono);
+      font-size: 13px;
+    }
+
+    swp-td.muted {
+      color: var(--color-text-secondary);
+    }
+
+    /* Gift card cell */
+    swp-giftcard-cell {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-giftcard-code {
+      font-family: var(--font-mono);
+      font-weight: 500;
+      font-size: 13px;
+      color: var(--color-text);
+    }
+
+    swp-giftcard-date {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Recipient cell */
+    swp-recipient-cell {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-recipient-name {
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-recipient-email {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-recipient-none {
+      color: var(--color-text-secondary);
+      font-style: italic;
+    }
+
+    /* Balance with progress */
+    swp-balance-cell {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 0 30px;
+    }
+
+    swp-balance-amount {
+      font-family: var(--font-mono);
+      font-weight: 500;
+      font-size: 13px;
+    }
+
+    swp-balance-bar {
+      width: 100%;
+      height: 6px;
+      background: var(--color-border);
+      border-radius: 3px;
+      overflow: hidden;
+    }
+
+    swp-balance-bar-fill {
+      display: block;
+      height: 100%;
+      background: var(--color-green);
+      border-radius: 3px 0 0 3px;
+      transition: width 300ms ease;
+    }
+
+    swp-balance-bar-fill[style*="100%"] {
+      border-radius: 3px;
+    }
+
+    swp-balance-bar-fill.low {
+      background: var(--color-amber);
+    }
+
+    swp-balance-bar-fill.empty {
+      background: transparent;
+    }
+
+    /* Status badge */
+    swp-status-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 12px;
+    }
+
+    swp-status-badge.active {
+      background: color-mix(in srgb, var(--color-green) 15%, transparent);
+      color: var(--color-green);
+    }
+
+    swp-status-badge.partial {
+      background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+      color: var(--color-amber);
+    }
+
+    swp-status-badge.depleted {
+      background: color-mix(in srgb, var(--color-text-secondary) 15%, transparent);
+      color: var(--color-text-secondary);
+    }
+
+    swp-status-badge.expired {
+      background: color-mix(in srgb, var(--color-red) 15%, transparent);
+      color: var(--color-red);
+    }
+
+    /* Row arrow */
+    swp-row-arrow {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    swp-row-arrow i {
+      font-size: 18px;
+      color: var(--color-text-secondary);
+      transition: transform 150ms ease, color 150ms ease;
+    }
+
+    swp-table-row:hover swp-row-arrow i {
+      transform: translateX(4px);
+      color: var(--color-teal);
+    }
+
+    /* Table footer */
+    swp-table-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 20px;
+      background: var(--color-background-alt);
+      border-top: 1px solid var(--color-border);
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       DRAWER & OVERLAY
+       ========================================== */
+    swp-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.3);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 200ms ease, visibility 0ms 200ms;
+      z-index: 500;
+    }
+
+    swp-overlay.open {
+      opacity: 1;
+      visibility: visible;
+      transition-delay: 0ms;
+    }
+
+    swp-drawer {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 420px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      transform: translateX(100%);
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1);
+      display: flex;
+      flex-direction: column;
+      z-index: 600;
+    }
+
+    swp-drawer.open {
+      transform: translateX(0);
+    }
+
+    swp-drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-drawer-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-drawer-close {
+      background: none;
+      border: none;
+      font-size: 20px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      padding: 4px;
+      border-radius: 4px;
+      transition: background 150ms ease;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    swp-drawer-close:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-drawer-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    swp-drawer-footer {
+      display: flex;
+      gap: 12px;
+      padding: 16px 20px;
+      border-top: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-drawer-footer swp-btn {
+      flex: 1;
+    }
+
+    /* ==========================================
+       FORM ELEMENTS
+       ========================================== */
+    swp-form-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    swp-form-label {
+      font-size: 11px;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-form-field input,
+    swp-form-field textarea,
+    swp-form-field select {
+      padding: 10px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      background: var(--color-surface);
+      color: var(--color-text);
+      transition: border-color 150ms ease;
+    }
+
+    swp-form-field input:focus,
+    swp-form-field textarea:focus,
+    swp-form-field select:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-form-field input.mono {
+      font-family: var(--font-mono);
+    }
+
+    swp-form-field textarea {
+      resize: none;
+      min-height: 80px;
+    }
+
+    swp-form-hint {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Input with button */
+    swp-input-group {
+      display: flex;
+      gap: 8px;
+    }
+
+    swp-input-group input {
+      flex: 1;
+    }
+
+    swp-input-group button {
+      padding: 10px 14px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-background-alt);
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: all 150ms ease;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      font-family: var(--font-family);
+    }
+
+    swp-input-group button:hover {
+      background: var(--color-background-hover);
+      color: var(--color-text);
+    }
+
+    swp-input-group button i {
+      font-size: 16px;
+    }
+
+    /* Checkbox */
+    swp-checkbox-field {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      cursor: pointer;
+    }
+
+    swp-checkbox-field input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      accent-color: var(--color-teal);
+    }
+
+    swp-checkbox-field span {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Quick amount buttons */
+    swp-quick-amounts {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      margin-top: 8px;
+    }
+
+    swp-quick-amount {
+      padding: 8px 16px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      background: var(--color-surface);
+      color: var(--color-text);
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-quick-amount:hover {
+      background: var(--color-background-hover);
+      border-color: var(--color-teal);
+    }
+
+    swp-quick-amount.selected {
+      background: color-mix(in srgb, var(--color-teal) 10%, transparent);
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+    }
+
+    /* Divider */
+    swp-divider {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      color: var(--color-text-secondary);
+      font-size: 12px;
+    }
+
+    swp-divider::before,
+    swp-divider::after {
+      content: '';
+      flex: 1;
+      height: 1px;
+      background: var(--color-border);
+    }
+
+    /* ==========================================
+       RESPONSIVE
+       ========================================== */
+    @media (max-width: 1200px) {
+      swp-stats-bar {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    @media (max-width: 900px) {
+      swp-table-header,
+      swp-table-row {
+        grid-template-columns: 1fr 100px 100px 40px;
+      }
+
+      swp-th:nth-child(2),
+      swp-td:nth-child(2),
+      swp-th:nth-child(3),
+      swp-td:nth-child(3),
+      swp-th:nth-child(6),
+      swp-td:nth-child(6) {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-page-title>Fordelskort</swp-page-title>
+    </swp-topbar-left>
+    <swp-topbar-right>
+      <swp-btn class="primary" id="openCreateDrawer">
+        <i class="ph ph-plus"></i>
+        Opret fordelskort
+      </swp-btn>
+    </swp-topbar-right>
+  </swp-topbar>
+
+  <swp-page-container>
+    <!-- Stats Bar -->
+    <swp-stats-bar>
+      <swp-stat-card class="highlight">
+        <swp-stat-value>47</swp-stat-value>
+        <swp-stat-label>Aktive fordelskort</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>23.500 DKK</swp-stat-value>
+        <swp-stat-label>Samlet saldo</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card class="success">
+        <swp-stat-value>18.230 DKK</swp-stat-value>
+        <swp-stat-label>Indløst i år</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card class="warning">
+        <swp-stat-value>5</swp-stat-value>
+        <swp-stat-label>Udløber inden 30 dage</swp-stat-label>
+      </swp-stat-card>
+    </swp-stats-bar>
+
+    <!-- Filter Bar -->
+    <swp-filter-bar>
+      <swp-search-input>
+        <i class="ph ph-magnifying-glass"></i>
+        <input type="search" id="searchInput" placeholder="Søg kode, kunde, email..." />
+      </swp-search-input>
+      <swp-filter-group>
+        <swp-filter-label>Status</swp-filter-label>
+        <select id="statusFilter">
+          <option value="">Alle</option>
+          <option value="active">Aktiv</option>
+          <option value="partial">Delvist brugt</option>
+          <option value="depleted">Opbrugt</option>
+          <option value="expired">Udløbet</option>
+        </select>
+      </swp-filter-group>
+      <swp-filter-group>
+        <swp-filter-label>Sortering</swp-filter-label>
+        <select id="sortFilter">
+          <option value="newest">Nyeste først</option>
+          <option value="oldest">Ældste først</option>
+          <option value="highest">Højeste saldo</option>
+          <option value="lowest">Laveste saldo</option>
+        </select>
+      </swp-filter-group>
+    </swp-filter-bar>
+
+    <!-- Table -->
+    <swp-table>
+      <swp-table-header>
+        <swp-th>Fordelskort</swp-th>
+        <swp-th>Modtager</swp-th>
+        <swp-th class="right">Original</swp-th>
+        <swp-th>Saldo</swp-th>
+        <swp-th>Status</swp-th>
+        <swp-th>Udløber</swp-th>
+        <swp-th></swp-th>
+      </swp-table-header>
+      <swp-table-body>
+        <swp-table-row onclick="location.href='poc-gavekort-detail.html'">
+          <swp-td>
+            <swp-giftcard-cell>
+              <swp-giftcard-code>FK-A7X2-9KM4</swp-giftcard-code>
+              <swp-giftcard-date>Oprettet 15. jan 2024</swp-giftcard-date>
+            </swp-giftcard-cell>
+          </swp-td>
+          <swp-td>
+            <swp-recipient-cell>
+              <swp-recipient-name>Maria Hansen</swp-recipient-name>
+              <swp-recipient-email>maria@example.com</swp-recipient-email>
+            </swp-recipient-cell>
+          </swp-td>
+          <swp-td class="right mono">500 DKK</swp-td>
+          <swp-td>
+            <swp-balance-cell>
+              <swp-balance-amount>350 DKK</swp-balance-amount>
+              <swp-balance-bar>
+                <swp-balance-bar-fill style="width: 70%"></swp-balance-bar-fill>
+              </swp-balance-bar>
+            </swp-balance-cell>
+          </swp-td>
+          <swp-td><swp-status-badge class="partial">Delvist brugt</swp-status-badge></swp-td>
+          <swp-td class="muted">31. dec 2025</swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row>
+          <swp-td>
+            <swp-giftcard-cell>
+              <swp-giftcard-code>FK-B3K9-2LM7</swp-giftcard-code>
+              <swp-giftcard-date>Oprettet 20. dec 2024</swp-giftcard-date>
+            </swp-giftcard-cell>
+          </swp-td>
+          <swp-td>
+            <swp-recipient-cell>
+              <swp-recipient-none>Ikke tildelt</swp-recipient-none>
+            </swp-recipient-cell>
+          </swp-td>
+          <swp-td class="right mono">1.000 DKK</swp-td>
+          <swp-td>
+            <swp-balance-cell>
+              <swp-balance-amount>1.000 DKK</swp-balance-amount>
+              <swp-balance-bar>
+                <swp-balance-bar-fill style="width: 100%"></swp-balance-bar-fill>
+              </swp-balance-bar>
+            </swp-balance-cell>
+          </swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td class="muted">15. jun 2025</swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row>
+          <swp-td>
+            <swp-giftcard-cell>
+              <swp-giftcard-code>FK-C5P1-8NQ3</swp-giftcard-code>
+              <swp-giftcard-date>Oprettet 10. nov 2024</swp-giftcard-date>
+            </swp-giftcard-cell>
+          </swp-td>
+          <swp-td>
+            <swp-recipient-cell>
+              <swp-recipient-name>Jonas Petersen</swp-recipient-name>
+              <swp-recipient-email>jonas.p@mail.dk</swp-recipient-email>
+            </swp-recipient-cell>
+          </swp-td>
+          <swp-td class="right mono">250 DKK</swp-td>
+          <swp-td>
+            <swp-balance-cell>
+              <swp-balance-amount>0 DKK</swp-balance-amount>
+              <swp-balance-bar>
+                <swp-balance-bar-fill class="empty" style="width: 0%"></swp-balance-bar-fill>
+              </swp-balance-bar>
+            </swp-balance-cell>
+          </swp-td>
+          <swp-td><swp-status-badge class="depleted">Opbrugt</swp-status-badge></swp-td>
+          <swp-td class="muted">1. mar 2025</swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row>
+          <swp-td>
+            <swp-giftcard-cell>
+              <swp-giftcard-code>FK-D2R4-6TY9</swp-giftcard-code>
+              <swp-giftcard-date>Oprettet 5. sep 2024</swp-giftcard-date>
+            </swp-giftcard-cell>
+          </swp-td>
+          <swp-td>
+            <swp-recipient-cell>
+              <swp-recipient-name>Anne Nielsen</swp-recipient-name>
+              <swp-recipient-email>anne.nielsen@email.dk</swp-recipient-email>
+            </swp-recipient-cell>
+          </swp-td>
+          <swp-td class="right mono">750 DKK</swp-td>
+          <swp-td>
+            <swp-balance-cell>
+              <swp-balance-amount>200 DKK</swp-balance-amount>
+              <swp-balance-bar>
+                <swp-balance-bar-fill class="low" style="width: 27%"></swp-balance-bar-fill>
+              </swp-balance-bar>
+            </swp-balance-cell>
+          </swp-td>
+          <swp-td><swp-status-badge class="partial">Delvist brugt</swp-status-badge></swp-td>
+          <swp-td class="muted">20. jan 2025</swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row>
+          <swp-td>
+            <swp-giftcard-cell>
+              <swp-giftcard-code>FK-E8W3-4VX1</swp-giftcard-code>
+              <swp-giftcard-date>Oprettet 1. jun 2024</swp-giftcard-date>
+            </swp-giftcard-cell>
+          </swp-td>
+          <swp-td>
+            <swp-recipient-cell>
+              <swp-recipient-none>Ikke tildelt</swp-recipient-none>
+            </swp-recipient-cell>
+          </swp-td>
+          <swp-td class="right mono">500 DKK</swp-td>
+          <swp-td>
+            <swp-balance-cell>
+              <swp-balance-amount>500 DKK</swp-balance-amount>
+              <swp-balance-bar>
+                <swp-balance-bar-fill style="width: 100%"></swp-balance-bar-fill>
+              </swp-balance-bar>
+            </swp-balance-cell>
+          </swp-td>
+          <swp-td><swp-status-badge class="expired">Udløbet</swp-status-badge></swp-td>
+          <swp-td class="muted">1. dec 2024</swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row>
+          <swp-td>
+            <swp-giftcard-cell>
+              <swp-giftcard-code>FK-F9Q7-3WK5</swp-giftcard-code>
+              <swp-giftcard-date>Oprettet 28. dec 2024</swp-giftcard-date>
+            </swp-giftcard-cell>
+          </swp-td>
+          <swp-td>
+            <swp-recipient-cell>
+              <swp-recipient-name>Sofie Larsen</swp-recipient-name>
+              <swp-recipient-email>sofie.l@gmail.com</swp-recipient-email>
+            </swp-recipient-cell>
+          </swp-td>
+          <swp-td class="right mono">300 DKK</swp-td>
+          <swp-td>
+            <swp-balance-cell>
+              <swp-balance-amount>300 DKK</swp-balance-amount>
+              <swp-balance-bar>
+                <swp-balance-bar-fill style="width: 100%"></swp-balance-bar-fill>
+              </swp-balance-bar>
+            </swp-balance-cell>
+          </swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td class="muted">28. dec 2025</swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+      </swp-table-body>
+      <swp-table-footer>
+        <span>Viser 6 af 47 fordelskort</span>
+        <span>Side 1 af 8</span>
+      </swp-table-footer>
+    </swp-table>
+  </swp-page-container>
+
+  <!-- Overlay -->
+  <swp-overlay id="overlay"></swp-overlay>
+
+  <!-- Create Gift Card Drawer -->
+  <swp-drawer id="createDrawer">
+    <swp-drawer-header>
+      <swp-drawer-title>Opret fordelskort</swp-drawer-title>
+      <swp-drawer-close id="closeDrawer">
+        <i class="ph ph-x"></i>
+      </swp-drawer-close>
+    </swp-drawer-header>
+
+    <swp-drawer-content>
+      <swp-form-field>
+        <swp-form-label>Kortkode</swp-form-label>
+        <swp-input-group>
+          <input type="text" id="giftcardCode" class="mono" value="FK-K8M2-5NP7" readonly />
+          <button type="button" id="generateCode">
+            <i class="ph ph-arrows-clockwise"></i>
+            Ny kode
+          </button>
+        </swp-input-group>
+        <swp-checkbox-field>
+          <input type="checkbox" id="customCode" />
+          <span>Lad mig vælge egen kode</span>
+        </swp-checkbox-field>
+      </swp-form-field>
+
+      <swp-form-field>
+        <swp-form-label>Værdi</swp-form-label>
+        <input type="text" id="giftcardValue" class="mono" placeholder="Indtast beløb" value="500 DKK" />
+        <swp-quick-amounts>
+          <swp-quick-amount data-value="100">100 DKK</swp-quick-amount>
+          <swp-quick-amount data-value="250">250 DKK</swp-quick-amount>
+          <swp-quick-amount data-value="500" class="selected">500 DKK</swp-quick-amount>
+          <swp-quick-amount data-value="1000">1.000 DKK</swp-quick-amount>
+        </swp-quick-amounts>
+      </swp-form-field>
+
+      <swp-form-field>
+        <swp-form-label>Udløbsdato</swp-form-label>
+        <input type="date" id="expiryDate" />
+        <swp-form-hint>Standard: 1 år fra oprettelse</swp-form-hint>
+      </swp-form-field>
+
+      <swp-divider>Modtager (valgfri)</swp-divider>
+
+      <swp-form-field>
+        <swp-form-label>Søg eksisterende kunde</swp-form-label>
+        <swp-input-group>
+          <input type="text" id="customerSearch" placeholder="Søg navn, email, telefon..." />
+          <button type="button">
+            <i class="ph ph-magnifying-glass"></i>
+          </button>
+        </swp-input-group>
+      </swp-form-field>
+
+      <swp-divider>eller indtast manuelt</swp-divider>
+
+      <swp-form-field>
+        <swp-form-label>Modtagers navn</swp-form-label>
+        <input type="text" id="recipientName" placeholder="Navn til gavekortet" />
+      </swp-form-field>
+
+      <swp-form-field>
+        <swp-form-label>Email</swp-form-label>
+        <input type="email" id="recipientEmail" placeholder="Til afsendelse af gavekort" />
+      </swp-form-field>
+
+      <swp-form-field>
+        <swp-form-label>Intern note</swp-form-label>
+        <textarea id="internalNote" placeholder="Intern note (vises ikke for kunden)"></textarea>
+      </swp-form-field>
+    </swp-drawer-content>
+
+    <swp-drawer-footer>
+      <swp-btn class="secondary" id="cancelCreate">Annuller</swp-btn>
+      <swp-btn class="primary" id="saveGiftcard">Opret fordelskort</swp-btn>
+    </swp-drawer-footer>
+  </swp-drawer>
+
+  <script>
+    // Elements
+    const overlay = document.getElementById('overlay');
+    const createDrawer = document.getElementById('createDrawer');
+    const openCreateBtn = document.getElementById('openCreateDrawer');
+    const closeDrawerBtn = document.getElementById('closeDrawer');
+    const cancelCreateBtn = document.getElementById('cancelCreate');
+    const generateCodeBtn = document.getElementById('generateCode');
+    const codeInput = document.getElementById('giftcardCode');
+    const customCodeCheckbox = document.getElementById('customCode');
+    const quickAmounts = document.querySelectorAll('swp-quick-amount');
+    const valueInput = document.getElementById('giftcardValue');
+    const expiryInput = document.getElementById('expiryDate');
+
+    // Set default expiry date (1 year from now)
+    const defaultExpiry = new Date();
+    defaultExpiry.setFullYear(defaultExpiry.getFullYear() + 1);
+    expiryInput.value = defaultExpiry.toISOString().split('T')[0];
+
+    // Open drawer
+    function openDrawer() {
+      overlay.classList.add('open');
+      createDrawer.classList.add('open');
+      document.body.style.overflow = 'hidden';
+    }
+
+    // Close drawer
+    function closeDrawer() {
+      overlay.classList.remove('open');
+      createDrawer.classList.remove('open');
+      document.body.style.overflow = '';
+    }
+
+    // Generate random code
+    function generateCode() {
+      const chars = 'ABCDEFGHJKLMNPQRSTUVWXYZ23456789';
+      let code = 'FK-';
+      for (let i = 0; i < 4; i++) {
+        code += chars.charAt(Math.floor(Math.random() * chars.length));
+      }
+      code += '-';
+      for (let i = 0; i < 4; i++) {
+        code += chars.charAt(Math.floor(Math.random() * chars.length));
+      }
+      return code;
+    }
+
+    // Event listeners
+    openCreateBtn.addEventListener('click', openDrawer);
+    closeDrawerBtn.addEventListener('click', closeDrawer);
+    cancelCreateBtn.addEventListener('click', closeDrawer);
+    overlay.addEventListener('click', closeDrawer);
+
+    generateCodeBtn.addEventListener('click', () => {
+      codeInput.value = generateCode();
+    });
+
+    customCodeCheckbox.addEventListener('change', (e) => {
+      codeInput.readOnly = !e.target.checked;
+      if (!e.target.checked) {
+        codeInput.value = generateCode();
+      }
+    });
+
+    // Quick amount selection
+    quickAmounts.forEach(btn => {
+      btn.addEventListener('click', () => {
+        quickAmounts.forEach(b => b.classList.remove('selected'));
+        btn.classList.add('selected');
+        const value = btn.dataset.value;
+        valueInput.value = Number(value).toLocaleString('da-DK') + ' DKK';
+      });
+    });
+
+    // Close on Escape
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') closeDrawer();
+    });
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-indstillinger.html b/.workbench/POC/poc-indstillinger.html
new file mode 100644
index 0000000..107979b
--- /dev/null
+++ b/.workbench/POC/poc-indstillinger.html
@@ -0,0 +1,4470 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Indstillinger - KARINA KNUDSEN®</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root:not(.light-mode) {
+        --color-surface: #1e1e1e;
+        --color-background: #121212;
+        --color-background-hover: #2a2a2a;
+        --color-background-alt: #1a1a1a;
+        --color-border: #333;
+        --color-text: #e0e0e0;
+        --color-text-secondary: #999;
+        --color-teal: #26a69a;
+        --color-blue: #42a5f5;
+        --color-red: #ef5350;
+        --color-amber: #ffb74d;
+        --color-purple: #a78bfa;
+        --color-green: #66bb6a;
+      }
+    }
+
+    :root.dark-mode {
+      --color-surface: #1e1e1e;
+      --color-background: #121212;
+      --color-background-hover: #2a2a2a;
+      --color-background-alt: #1a1a1a;
+      --color-border: #333;
+      --color-text: #e0e0e0;
+      --color-text-secondary: #999;
+      --color-teal: #26a69a;
+      --color-blue: #42a5f5;
+      --color-red: #ef5350;
+      --color-amber: #ffb74d;
+      --color-purple: #a78bfa;
+      --color-green: #66bb6a;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-topbar-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-topbar-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       TAB BAR
+       ========================================== */
+    swp-tab-bar {
+      display: flex;
+      gap: 0;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      padding: 0 24px;
+      position: sticky;
+      top: 49px;
+      z-index: 80;
+    }
+
+    swp-tab {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 14px 24px;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+      transition: all 150ms ease;
+    }
+
+    swp-tab i {
+      font-size: 18px;
+    }
+
+    swp-tab:hover {
+      color: var(--color-text);
+      background: var(--color-background-alt);
+    }
+
+    swp-tab.active {
+      color: var(--color-teal);
+      border-bottom-color: var(--color-teal);
+    }
+
+    /* ==========================================
+       TAB CONTENT
+       ========================================== */
+    swp-tab-content {
+      display: none;
+      padding: 24px;
+      max-width: 900px;
+      margin: 0 auto;
+    }
+
+    swp-tab-content.active {
+      display: block;
+    }
+
+    /* ==========================================
+       CARDS & SECTIONS
+       ========================================== */
+    swp-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      margin-bottom: 20px;
+    }
+
+    swp-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-card-title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-card-title i {
+      font-size: 20px;
+      color: var(--color-teal);
+    }
+
+    swp-card-content {
+      display: block;
+      padding: 20px;
+    }
+
+    /* ==========================================
+       EDIT SECTION (from poc-employee.html)
+       ========================================== */
+    swp-edit-section {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    swp-edit-row {
+      display: grid;
+      grid-template-columns: 140px 1fr;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-edit-row.wide-label {
+      grid-template-columns: 180px 1fr;
+    }
+
+    swp-edit-label {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-edit-label .optional {
+      font-weight: 400;
+      color: var(--color-text-secondary);
+      opacity: 0.7;
+    }
+
+    swp-edit-value {
+      font-size: 14px;
+      padding: 8px 12px;
+      border-radius: 4px;
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      transition: all 150ms ease;
+      cursor: text;
+    }
+
+    swp-edit-value:hover {
+      background: var(--color-background);
+    }
+
+    swp-edit-value:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    swp-edit-value.mono {
+      font-family: var(--font-mono);
+    }
+
+    /* Edit Select */
+    swp-edit-select {
+      display: block;
+    }
+
+    swp-edit-select select {
+      width: 100%;
+      font-size: 14px;
+      font-family: inherit;
+      padding: 8px 12px;
+      border-radius: 4px;
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      cursor: pointer;
+      transition: all 150ms ease;
+      color: var(--color-text);
+    }
+
+    swp-edit-select select:hover {
+      background: var(--color-background);
+    }
+
+    swp-edit-select select:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    /* Textarea */
+    swp-edit-textarea {
+      display: block;
+      width: 100%;
+      padding: 10px 12px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      color: var(--color-text);
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      border-radius: 4px;
+      resize: vertical;
+      min-height: 80px;
+      transition: all 150ms ease;
+    }
+
+    swp-edit-textarea:hover {
+      background: var(--color-background);
+    }
+
+    swp-edit-textarea:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    /* ==========================================
+       TOGGLE SLIDER (Ja/Nej - from poc-employee.html)
+       ========================================== */
+    swp-toggle-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-toggle-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-toggle-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-toggle-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-toggle-desc {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-toggle-slider {
+      display: inline-flex;
+      width: fit-content;
+      background: var(--color-background);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      overflow: hidden;
+      position: relative;
+    }
+
+    swp-toggle-slider::before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: calc(50% - 4px);
+      height: calc(100% - 4px);
+      background: color-mix(in srgb, var(--color-green) 18%, white);
+      border-radius: 4px;
+      transition: transform 200ms ease, background 200ms ease;
+    }
+
+    swp-toggle-slider[data-value="no"]::before {
+      transform: translateX(100%);
+      background: color-mix(in srgb, var(--color-red) 18%, white);
+    }
+
+    swp-toggle-option {
+      position: relative;
+      z-index: 1;
+      padding: 5px 16px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: color 150ms ease;
+      user-select: none;
+    }
+
+    swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
+      color: var(--color-green);
+      font-weight: 600;
+    }
+
+    swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
+      color: var(--color-red);
+      font-weight: 600;
+    }
+
+    /* ==========================================
+       HOURS TABLE
+       ========================================== */
+    swp-hours-table {
+      display: flex;
+      flex-direction: column;
+    }
+
+    swp-hours-row {
+      display: grid;
+      grid-template-columns: 100px 80px 1fr;
+      gap: 16px;
+      align-items: center;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-hours-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-hours-day {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-hours-time {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-hours-time span {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-hours-time input[type="time"] {
+      width: 100px;
+      padding: 6px 10px;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      border-radius: 4px;
+      color: var(--color-text);
+      transition: all 150ms ease;
+    }
+
+    swp-hours-time input[type="time"]:hover {
+      background: var(--color-background);
+    }
+
+    swp-hours-time input[type="time"]:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    swp-hours-closed {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      font-style: italic;
+    }
+
+    /* ==========================================
+       URL FIELD
+       ========================================== */
+    swp-url-field {
+      display: flex;
+      align-items: stretch;
+      background: var(--color-background-alt);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      overflow: hidden;
+    }
+
+    swp-url-field input {
+      flex: 1;
+      padding: 10px 14px;
+      font-size: 14px;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+      background: transparent;
+      border: none;
+      outline: none;
+    }
+
+    swp-url-copy {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 0 14px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      transition: all 150ms ease;
+    }
+
+    swp-url-copy:hover {
+      background: var(--color-background-hover);
+      color: var(--color-teal);
+    }
+
+    swp-url-copy i {
+      font-size: 18px;
+    }
+
+    /* ==========================================
+       INFO BOX
+       ========================================== */
+    swp-info-box {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 14px 16px;
+      background: color-mix(in srgb, var(--color-blue) 8%, transparent);
+      border: 1px solid color-mix(in srgb, var(--color-blue) 20%, transparent);
+      border-radius: 6px;
+      margin-bottom: 20px;
+    }
+
+    swp-info-box i {
+      font-size: 20px;
+      color: var(--color-blue);
+      flex-shrink: 0;
+    }
+
+    swp-info-box p {
+      font-size: 13px;
+      color: var(--color-text);
+      margin: 0;
+    }
+
+    /* ==========================================
+       BUTTONS
+       ========================================== */
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn i {
+      font-size: 18px;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    /* ==========================================
+       NOTIFICATION ITEMS
+       ========================================== */
+    swp-notification-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    swp-notification-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-notification-item:last-child {
+      border-bottom: none;
+    }
+
+    swp-notification-main {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      flex: 1;
+    }
+
+    swp-notification-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 1;
+    }
+
+    swp-notification-title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-notification-price {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      font-weight: 400;
+    }
+
+    swp-notification-price.free {
+      color: var(--color-green);
+    }
+
+    swp-notification-price.premium {
+      color: var(--color-purple);
+    }
+
+    swp-notification-desc {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-notification-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-edit-link {
+      font-size: 13px;
+      color: var(--color-teal);
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-edit-link:hover {
+      color: #00796b;
+      text-decoration: underline;
+    }
+
+    swp-section-intro {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      margin-bottom: 16px;
+    }
+
+    swp-time-setting {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 16px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-time-setting:last-child {
+      border-bottom: none;
+    }
+
+    swp-time-setting-label {
+      font-size: 14px;
+      color: var(--color-text);
+      min-width: 200px;
+    }
+
+    swp-time-range {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    swp-time-range span {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-time-range input[type="time"] {
+      width: 100px;
+      padding: 6px 10px;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      border-radius: 4px;
+      color: var(--color-text);
+    }
+
+    swp-time-range input[type="time"]:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    /* Section divider */
+    swp-section-divider {
+      display: block;
+      height: 1px;
+      background: var(--color-border);
+      margin: 20px 0;
+    }
+
+    /* ==========================================
+       CLOSED DAYS LIST
+       ========================================== */
+    swp-closed-days-list {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    swp-closed-day-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-closed-day-item:last-child {
+      border-bottom: none;
+    }
+
+    swp-closed-day-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      flex: 1;
+    }
+
+    swp-closed-day-date {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-closed-day-name {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-closed-day-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 4px;
+      flex-shrink: 0;
+    }
+
+    swp-closed-day-badge.holiday {
+      background: color-mix(in srgb, var(--color-purple) 15%, transparent);
+      color: var(--color-purple);
+    }
+
+    swp-closed-day-badge.custom {
+      background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+      color: var(--color-amber);
+    }
+
+    swp-closed-day-item swp-icon-btn {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      background: transparent;
+      border-radius: 6px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      transition: all 150ms ease;
+      flex-shrink: 0;
+    }
+
+    swp-closed-day-item swp-icon-btn i {
+      font-size: 16px;
+    }
+
+    swp-closed-day-item swp-icon-btn.edit:hover {
+      background: color-mix(in srgb, var(--color-teal) 15%, transparent);
+      color: var(--color-teal);
+    }
+
+    swp-closed-day-item swp-icon-btn.delete:hover {
+      background: color-mix(in srgb, var(--color-red) 15%, transparent);
+      color: var(--color-red);
+    }
+
+    /* ==========================================
+       TWO COLUMN GRID
+       ========================================== */
+    swp-two-column-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 20px;
+      align-items: start;
+    }
+
+    @media (max-width: 900px) {
+      swp-two-column-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    /* Card note */
+    swp-card-note {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 16px;
+      padding-top: 12px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    /* ==========================================
+       DRAWER
+       ========================================== */
+    swp-drawer-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.4);
+      z-index: 200;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 200ms ease, visibility 200ms ease;
+    }
+
+    swp-drawer-overlay.open {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    swp-drawer {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 480px;
+      max-width: 100%;
+      background: var(--color-surface);
+      box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
+      z-index: 201;
+      display: flex;
+      flex-direction: column;
+      transform: translateX(100%);
+      transition: transform 250ms ease, width 250ms ease;
+    }
+
+    swp-drawer.open {
+      transform: translateX(0);
+    }
+
+    swp-drawer.wide {
+      width: calc(100% - 420px);
+      min-width: 600px;
+    }
+
+    @media (max-width: 1100px) {
+      swp-drawer.wide {
+        width: 100%;
+        min-width: unset;
+      }
+    }
+
+    swp-drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+      flex-shrink: 0;
+    }
+
+    swp-drawer-title {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-drawer-title h3 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin: 0;
+    }
+
+    swp-drawer-title span {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-drawer-close {
+      width: 36px;
+      height: 36px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      background: transparent;
+      border-radius: 6px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      transition: all 150ms ease;
+    }
+
+    swp-drawer-close:hover {
+      background: var(--color-background-hover);
+      color: var(--color-text);
+    }
+
+    swp-drawer-close i {
+      font-size: 22px;
+    }
+
+    swp-drawer-body {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px;
+    }
+
+    swp-drawer-footer {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      gap: 12px;
+      padding: 16px 20px;
+      border-top: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+      flex-shrink: 0;
+    }
+
+    /* Message editor */
+    swp-message-section {
+      display: block;
+      margin-bottom: 24px;
+    }
+
+    swp-message-section:last-child {
+      margin-bottom: 0;
+    }
+
+    swp-message-section-title {
+      display: block;
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      margin-bottom: 12px;
+    }
+
+    swp-message-editor {
+      display: block;
+      width: 100%;
+      min-height: 120px;
+      padding: 14px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      line-height: 1.6;
+      color: var(--color-text);
+      background: var(--color-background-alt);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      resize: vertical;
+      transition: all 150ms ease;
+    }
+
+    swp-message-editor:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    /* Variables */
+    swp-variables-grid {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px;
+      position: relative;
+    }
+
+    /* Onboarding popover */
+    #variablesHint[popover] {
+      margin: 0;
+      border: none;
+      padding: 0;
+      background: transparent;
+      overflow: visible;
+      inset: unset;
+    }
+
+    #variablesHint[popover]:popover-open {
+      display: block;
+    }
+
+    swp-onboarding-hint {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);
+      color: white;
+      padding: 12px 16px;
+      border-radius: 10px;
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 1.4;
+      white-space: nowrap;
+      box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
+    }
+
+    swp-onboarding-hint i.ph-lightbulb {
+      font-size: 18px;
+    }
+
+    swp-onboarding-hint::after {
+      content: '';
+      position: absolute;
+      top: 100%;
+      left: 50%;
+      transform: translateX(-50%);
+      border: 8px solid transparent;
+      border-top-color: #8b5cf6;
+    }
+
+    swp-onboarding-hint swp-hint-close {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      width: 18px;
+      height: 18px;
+      margin-left: 4px;
+      background: rgba(255, 255, 255, 0.2);
+      border-radius: 50%;
+      cursor: pointer;
+      font-size: 12px;
+      transition: background 150ms ease;
+    }
+
+    swp-onboarding-hint swp-hint-close:hover {
+      background: rgba(255, 255, 255, 0.3);
+    }
+
+    swp-variable-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 6px 10px;
+      font-size: 12px;
+      font-family: var(--font-mono);
+      background: var(--color-background);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      color: var(--color-text-secondary);
+    }
+
+    swp-variable-tag:hover {
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+      cursor: pointer;
+    }
+
+    swp-message-preview .highlight.active {
+      background: color-mix(in srgb, var(--color-teal) 35%, transparent);
+      box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-teal) 20%, transparent);
+    }
+
+    swp-variable-tag i {
+      font-size: 14px;
+    }
+
+    /* Preview */
+    swp-message-preview {
+      display: block;
+      padding: 16px;
+      background: var(--color-background);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 14px;
+      line-height: 1.6;
+      color: var(--color-text);
+    }
+
+    swp-message-preview .highlight {
+      padding: 1px 4px;
+      border-radius: 3px;
+      transition: all 150ms ease;
+    }
+
+    swp-preview-meta {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      margin-top: 12px;
+      padding-top: 12px;
+      border-top: 1px solid var(--color-border);
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-preview-meta span {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    swp-preview-meta i {
+      font-size: 14px;
+    }
+
+    /* ==========================================
+       EMAIL TEMPLATE EDITOR
+       ========================================== */
+    swp-email-editor-layout {
+      display: grid;
+      grid-template-columns: 280px 1fr;
+      gap: 24px;
+      height: 100%;
+    }
+
+    @media (max-width: 900px) {
+      swp-email-editor-layout {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    swp-email-sidebar {
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    swp-email-preview-container {
+      flex: 1;
+      background: var(--color-border);
+      border-radius: 8px;
+      padding: 24px;
+      overflow-y: auto;
+      display: flex;
+      justify-content: center;
+      align-items: flex-start;
+    }
+
+    /* Email preview - uses fixed light colors since emails are light-themed */
+    swp-email-preview {
+      width: 100%;
+      max-width: 520px;
+      background: #ffffff;
+      border-radius: 4px;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+      overflow: hidden;
+      color: #333;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+    }
+
+    swp-email-header {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding: 28px 24px;
+      background: linear-gradient(135deg, #00897b 0%, #00695c 100%);
+      color: #ffffff;
+      text-align: center;
+    }
+
+    swp-email-logo {
+      width: 56px;
+      height: 56px;
+      background: #ffffff;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      margin-bottom: 14px;
+      font-size: 24px;
+      color: #00897b;
+      font-weight: 700;
+    }
+
+    swp-email-header h2 {
+      font-size: 18px;
+      font-weight: 600;
+      margin: 0 0 4px 0;
+      color: #ffffff;
+    }
+
+    swp-email-header p {
+      font-size: 12px;
+      opacity: 0.85;
+      margin: 0;
+      color: #ffffff;
+    }
+
+    swp-email-body {
+      display: block;
+      padding: 28px 32px;
+      background: #ffffff;
+    }
+
+    swp-email-greeting {
+      font-size: 15px;
+      font-weight: 500;
+      margin-bottom: 12px;
+      display: block;
+      color: #333333;
+    }
+
+    swp-email-text {
+      font-size: 14px;
+      line-height: 1.6;
+      color: #555555;
+      display: block;
+      margin-bottom: 20px;
+    }
+
+    swp-email-appointment-card {
+      display: block;
+      background: #f5f5f5;
+      border-radius: 0;
+      padding: 16px 20px;
+      margin-bottom: 24px;
+      border-left: 4px solid #00897b;
+    }
+
+    swp-email-appointment-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 6px 0;
+    }
+
+    swp-email-appointment-row:first-child {
+      padding-top: 0;
+    }
+
+    swp-email-appointment-row:last-child {
+      padding-bottom: 0;
+    }
+
+    swp-email-appointment-row i {
+      font-size: 18px;
+      color: #00897b;
+      width: 20px;
+      flex-shrink: 0;
+    }
+
+    swp-email-appointment-row span {
+      font-size: 14px;
+      color: #333333;
+    }
+
+    swp-email-appointment-row strong {
+      font-weight: 600;
+    }
+
+    swp-email-button {
+      display: inline-block;
+      padding: 12px 24px;
+      background: #00897b;
+      color: #ffffff;
+      font-size: 14px;
+      font-weight: 600;
+      text-decoration: none;
+      border-radius: 6px;
+      text-align: center;
+    }
+
+    swp-email-button-container {
+      text-align: center;
+      margin: 20px 0 8px 0;
+      display: block;
+    }
+
+    swp-email-footer {
+      display: block;
+      padding: 20px 32px;
+      background: #f5f5f5;
+      text-align: center;
+      border-top: none;
+    }
+
+    swp-email-footer-logo {
+      font-size: 14px;
+      font-weight: 600;
+      color: #333333;
+      margin-bottom: 8px;
+      display: block;
+    }
+
+    swp-email-footer p {
+      font-size: 12px;
+      color: #888888;
+      margin: 4px 0;
+      line-height: 1.5;
+    }
+
+    swp-email-footer a {
+      color: #00897b;
+      text-decoration: none;
+    }
+
+    /* Email sidebar - uses swp-edit-* pattern */
+    swp-email-sidebar swp-edit-row {
+      grid-template-columns: 1fr;
+      gap: 6px;
+    }
+
+    swp-email-sidebar swp-edit-label {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    /* Color picker */
+    swp-color-picker-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    swp-color-picker-row input[type="color"] {
+      width: 40px;
+      height: 40px;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      padding: 0;
+      background: none;
+    }
+
+    swp-color-picker-row input[type="color"]::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    swp-color-picker-row input[type="color"]::-webkit-color-swatch {
+      border: 2px solid var(--color-border);
+      border-radius: 6px;
+    }
+
+    swp-color-picker-row span {
+      font-size: 13px;
+      font-family: var(--font-mono);
+      color: var(--color-text-secondary);
+    }
+
+    /* Highlight in email preview - only on hover */
+    swp-email-preview .editable {
+      padding: 1px 3px;
+      border-radius: 2px;
+      transition: all 150ms ease;
+    }
+
+    swp-email-preview .editable.active {
+      background: rgba(0, 137, 123, 0.35);
+      box-shadow: 0 0 0 2px rgba(0, 137, 123, 0.2);
+    }
+
+    /* ==========================================
+       MODULES TAB STYLES
+       ========================================== */
+    swp-modules-section {
+      display: block;
+      margin-bottom: 32px;
+    }
+
+    swp-modules-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+
+    swp-modules-title {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-modules-title i {
+      font-size: 20px;
+      color: var(--color-teal);
+    }
+
+    swp-modules-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      border-radius: 20px;
+      background: color-mix(in srgb, var(--color-purple) 15%, transparent);
+      color: var(--color-purple);
+    }
+
+    swp-modules-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 16px;
+    }
+
+    @media (max-width: 768px) {
+      swp-modules-grid {
+        grid-template-columns: 1fr;
+      }
+    }
+
+    swp-module-card {
+      display: block;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 10px;
+      overflow: hidden;
+      transition: all 150ms ease;
+    }
+
+    swp-module-card.full-width {
+      grid-column: 1 / -1;
+    }
+
+    swp-module-card:hover {
+      border-color: var(--color-teal);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
+    }
+
+    swp-module-header {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 20px;
+    }
+
+    swp-module-icon {
+      width: 48px;
+      height: 48px;
+      border-radius: 12px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    swp-module-icon i {
+      font-size: 24px;
+    }
+
+    swp-module-icon.teal {
+      background: color-mix(in srgb, var(--color-teal) 15%, transparent);
+      color: var(--color-teal);
+    }
+
+    swp-module-icon.purple {
+      background: color-mix(in srgb, var(--color-purple) 15%, transparent);
+      color: var(--color-purple);
+    }
+
+    swp-module-icon.blue {
+      background: color-mix(in srgb, var(--color-blue) 15%, transparent);
+      color: var(--color-blue);
+    }
+
+    swp-module-icon.amber {
+      background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+      color: var(--color-amber);
+    }
+
+    swp-module-icon.green {
+      background: color-mix(in srgb, var(--color-green) 15%, transparent);
+      color: var(--color-green);
+    }
+
+    swp-module-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    swp-module-title {
+      display: block;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 4px;
+    }
+
+    swp-module-desc {
+      display: block;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      line-height: 1.4;
+    }
+
+    swp-module-toggle {
+      flex-shrink: 0;
+    }
+
+    swp-module-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 20px;
+      background: var(--color-background-alt);
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-module-tags {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-module-tag {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      font-size: 12px;
+      font-weight: 500;
+      border-radius: 4px;
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+    }
+
+    swp-module-tag.included {
+      background: color-mix(in srgb, var(--color-green) 15%, transparent);
+      color: var(--color-green);
+    }
+
+    swp-module-tag.price {
+      background: color-mix(in srgb, var(--color-blue) 15%, transparent);
+      color: var(--color-blue);
+    }
+
+    swp-module-tag.new {
+      background: color-mix(in srgb, var(--color-purple) 15%, transparent);
+      color: var(--color-purple);
+    }
+
+    swp-module-tag.coming {
+      background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+      color: var(--color-amber);
+    }
+
+    /* Featured module card */
+    swp-module-card.featured {
+      border: 2px solid var(--color-green);
+      background: linear-gradient(135deg, color-mix(in srgb, var(--color-green) 3%, var(--color-surface)) 0%, var(--color-surface) 100%);
+    }
+
+    swp-module-card.featured:hover {
+      border-color: var(--color-green);
+      box-shadow: 0 4px 16px rgba(67, 160, 71, 0.15);
+    }
+
+    swp-module-features {
+      display: flex;
+      flex-wrap: wrap;
+      gap: 8px 16px;
+      padding: 0 20px 16px;
+    }
+
+    swp-module-feature {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-module-feature i {
+      font-size: 16px;
+      color: var(--color-green);
+    }
+
+    swp-module-stats {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+      padding: 16px 20px;
+      background: color-mix(in srgb, var(--color-green) 6%, transparent);
+      border-top: 1px solid color-mix(in srgb, var(--color-green) 20%, transparent);
+      border-bottom: 1px solid color-mix(in srgb, var(--color-green) 20%, transparent);
+    }
+
+    swp-module-stat {
+      text-align: center;
+    }
+
+    swp-module-stat-value {
+      display: block;
+      font-size: 20px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-green);
+    }
+
+    swp-module-stat-label {
+      display: block;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    /* Purple featured variant */
+    swp-module-card.featured.purple {
+      border-color: var(--color-purple);
+      background: linear-gradient(135deg, color-mix(in srgb, var(--color-purple) 3%, var(--color-surface)) 0%, var(--color-surface) 100%);
+    }
+
+    swp-module-card.featured.purple:hover {
+      border-color: var(--color-purple);
+      box-shadow: 0 4px 16px rgba(139, 92, 246, 0.15);
+    }
+
+    swp-module-feature.purple i {
+      color: var(--color-purple);
+    }
+
+    swp-module-stats.purple {
+      background: color-mix(in srgb, var(--color-purple) 6%, transparent);
+      border-top-color: color-mix(in srgb, var(--color-purple) 20%, transparent);
+      border-bottom-color: color-mix(in srgb, var(--color-purple) 20%, transparent);
+    }
+
+    swp-module-stats.purple swp-module-stat-value {
+      color: var(--color-purple);
+    }
+
+    swp-btn.primary.purple {
+      background: var(--color-purple);
+    }
+
+    swp-btn.primary.purple:hover {
+      background: color-mix(in srgb, var(--color-purple) 85%, black);
+    }
+
+    /* ==========================================
+       TRACKING TAB
+       ========================================== */
+    swp-tab-content[data-tab="tracking"] {
+      display: none;
+    }
+
+    swp-tab-content[data-tab="tracking"].active {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    .tracking-card {
+      margin-bottom: 0;
+    }
+
+    .tracking-card.full-width,
+    .code-preview-card {
+      grid-column: 1 / -1;
+    }
+
+    .tracking-card swp-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .tracking-card[data-tracker] swp-card-content {
+      transition: opacity 200ms ease, max-height 300ms ease;
+    }
+
+    .tracking-card[data-tracker].disabled swp-card-content {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    swp-tracking-hint {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-top: 12px;
+      padding: 10px 12px;
+      background: color-mix(in srgb, var(--color-blue) 8%, transparent);
+      border-radius: 6px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-tracking-hint i {
+      font-size: 16px;
+      color: var(--color-blue);
+    }
+
+    swp-tracking-hint.privacy {
+      background: color-mix(in srgb, var(--color-green) 8%, transparent);
+    }
+
+    swp-tracking-hint.privacy i {
+      color: var(--color-green);
+    }
+
+    swp-script-section {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+
+    swp-script-section:last-child {
+      margin-bottom: 0;
+    }
+
+    swp-script-label {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-script-label i {
+      font-size: 16px;
+      color: var(--color-text-secondary);
+    }
+
+    .script-textarea {
+      width: 100%;
+      min-height: 100px;
+      padding: 12px;
+      font-family: var(--font-mono);
+      font-size: 12px;
+      line-height: 1.5;
+      color: var(--color-text);
+      background: var(--color-background);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      resize: vertical;
+    }
+
+    .script-textarea::placeholder {
+      color: var(--color-text-secondary);
+    }
+
+    .script-textarea:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    .code-preview-card {
+      margin-top: 24px;
+      border: 2px dashed var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 3%, var(--color-surface));
+    }
+
+    .code-preview-card swp-card-header {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+
+    .code-preview-card swp-card-title {
+      color: var(--color-teal);
+    }
+
+    swp-code-info {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      margin-bottom: 12px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-code-info i {
+      font-size: 16px;
+      color: var(--color-teal);
+    }
+
+    .code-preview {
+      margin: 0;
+      padding: 16px;
+      background: var(--color-background);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      overflow-x: auto;
+      max-height: 400px;
+      overflow-y: auto;
+    }
+
+    .code-preview code {
+      font-family: var(--font-mono);
+      font-size: 11px;
+      line-height: 1.6;
+      color: var(--color-text);
+      white-space: pre;
+    }
+
+    .code-preview .comment {
+      color: var(--color-green);
+    }
+
+    .code-preview .tag {
+      color: var(--color-blue);
+    }
+
+    .code-preview .attr {
+      color: var(--color-purple);
+    }
+
+    .code-preview .string {
+      color: var(--color-teal);
+    }
+  </style>
+</head>
+<body>
+
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-topbar-title>Indstillinger</swp-topbar-title>
+    </swp-topbar-left>
+    <swp-topbar-actions>
+      <swp-btn class="primary" id="saveBtn">
+        <i class="ph ph-check"></i>
+        Gem alle ændringer
+      </swp-btn>
+    </swp-topbar-actions>
+  </swp-topbar>
+
+  <!-- Tab Bar -->
+  <swp-tab-bar>
+    <swp-tab class="active" data-tab="general">
+      <i class="ph ph-buildings"></i>
+      Virksomhed
+    </swp-tab>
+    <swp-tab data-tab="hours">
+      <i class="ph ph-clock"></i>
+      Åbningstider
+    </swp-tab>
+    <swp-tab data-tab="calendar">
+      <i class="ph ph-calendar"></i>
+      Kalender
+    </swp-tab>
+    <swp-tab data-tab="booking">
+      <i class="ph ph-globe"></i>
+      Online Booking
+    </swp-tab>
+    <swp-tab data-tab="billing">
+      <i class="ph ph-receipt"></i>
+      Faktura & Kvittering
+    </swp-tab>
+    <swp-tab data-tab="reminders">
+      <i class="ph ph-bell"></i>
+      Påmindelser
+    </swp-tab>
+    <swp-tab data-tab="payments">
+      <i class="ph ph-credit-card"></i>
+      Betalinger
+    </swp-tab>
+    <swp-tab data-tab="modules">
+      <i class="ph ph-puzzle-piece"></i>
+      Moduler
+    </swp-tab>
+    <swp-tab data-tab="tracking">
+      <i class="ph ph-chart-line-up"></i>
+      Tracking
+    </swp-tab>
+  </swp-tab-bar>
+
+  <!-- ==========================================
+       TAB: VIRKSOMHED
+       ========================================== -->
+  <swp-tab-content class="active" data-tab="general">
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-identification-card"></i>
+          Grundlæggende oplysninger
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Virksomhedsnavn</swp-edit-label>
+            <swp-edit-value contenteditable="true">KARINA KNUDSEN®</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>CVR-nummer</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Adresse</swp-edit-label>
+            <swp-edit-value contenteditable="true">Hovedgaden 123</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Postnummer</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono">2100</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>By</swp-edit-label>
+            <swp-edit-value contenteditable="true">København Ø</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Telefon</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono">70 20 30 40</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Email</swp-edit-label>
+            <swp-edit-value contenteditable="true">info@salonbeauty.dk</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Website <span class="optional">(valgfri)</span></swp-edit-label>
+            <swp-edit-value contenteditable="true">https://salonbeauty.dk</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+      </swp-card-content>
+    </swp-card>
+  </swp-tab-content>
+
+  <!-- ==========================================
+       TAB: ÅBNINGSTIDER
+       ========================================== -->
+  <swp-tab-content data-tab="hours">
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-clock"></i>
+          Åbningstider
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-hours-table>
+          <swp-hours-row>
+            <swp-hours-day>Mandag</swp-hours-day>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-hours-time>
+              <input type="time" value="09:00">
+              <span>til</span>
+              <input type="time" value="18:00">
+            </swp-hours-time>
+          </swp-hours-row>
+          <swp-hours-row>
+            <swp-hours-day>Tirsdag</swp-hours-day>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-hours-time>
+              <input type="time" value="09:00">
+              <span>til</span>
+              <input type="time" value="18:00">
+            </swp-hours-time>
+          </swp-hours-row>
+          <swp-hours-row>
+            <swp-hours-day>Onsdag</swp-hours-day>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-hours-time>
+              <input type="time" value="09:00">
+              <span>til</span>
+              <input type="time" value="18:00">
+            </swp-hours-time>
+          </swp-hours-row>
+          <swp-hours-row>
+            <swp-hours-day>Torsdag</swp-hours-day>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-hours-time>
+              <input type="time" value="09:00">
+              <span>til</span>
+              <input type="time" value="20:00">
+            </swp-hours-time>
+          </swp-hours-row>
+          <swp-hours-row>
+            <swp-hours-day>Fredag</swp-hours-day>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-hours-time>
+              <input type="time" value="09:00">
+              <span>til</span>
+              <input type="time" value="17:00">
+            </swp-hours-time>
+          </swp-hours-row>
+          <swp-hours-row>
+            <swp-hours-day>Lørdag</swp-hours-day>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-hours-time>
+              <input type="time" value="10:00">
+              <span>til</span>
+              <input type="time" value="14:00">
+            </swp-hours-time>
+          </swp-hours-row>
+          <swp-hours-row>
+            <swp-hours-day>Søndag</swp-hours-day>
+            <swp-toggle-slider data-value="no">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-hours-closed>Lukket</swp-hours-closed>
+          </swp-hours-row>
+        </swp-hours-table>
+      </swp-card-content>
+    </swp-card>
+  </swp-tab-content>
+
+  <!-- ==========================================
+       TAB: KALENDER
+       ========================================== -->
+  <swp-tab-content data-tab="calendar">
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-calendar-blank"></i>
+          Kalenderindstillinger
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Standard visning</swp-edit-label>
+            <swp-edit-select>
+              <select>
+                <option value="day">Dag</option>
+                <option value="week" selected>Uge</option>
+                <option value="month">Måned</option>
+              </select>
+            </swp-edit-select>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Første dag i ugen</swp-edit-label>
+            <swp-edit-select>
+              <select>
+                <option value="monday" selected>Mandag</option>
+                <option value="sunday">Søndag</option>
+              </select>
+            </swp-edit-select>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Tidsinterval</swp-edit-label>
+            <swp-edit-select>
+              <select>
+                <option value="15" selected>15 minutter</option>
+                <option value="30">30 minutter</option>
+                <option value="60">60 minutter</option>
+              </select>
+            </swp-edit-select>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Vis weekender</swp-edit-label>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Arbejdstid fra</swp-edit-label>
+            <swp-edit-select>
+              <select>
+                <option value="06:00">06:00</option>
+                <option value="07:00">07:00</option>
+                <option value="08:00" selected>08:00</option>
+                <option value="09:00">09:00</option>
+                <option value="10:00">10:00</option>
+              </select>
+            </swp-edit-select>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Arbejdstid til</swp-edit-label>
+            <swp-edit-select>
+              <select>
+                <option value="17:00">17:00</option>
+                <option value="18:00">18:00</option>
+                <option value="19:00">19:00</option>
+                <option value="20:00" selected>20:00</option>
+                <option value="21:00">21:00</option>
+                <option value="22:00">22:00</option>
+              </select>
+            </swp-edit-select>
+          </swp-edit-row>
+        </swp-edit-section>
+      </swp-card-content>
+    </swp-card>
+
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-calendar-x"></i>
+          Helligdage & lukkedage
+        </swp-card-title>
+        <swp-btn class="small secondary" id="addClosedDayBtn">
+          <i class="ph ph-plus"></i>
+          Tilføj lukkedag
+        </swp-btn>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-toggle-row>
+          <swp-toggle-info>
+            <swp-toggle-label>Luk automatisk på helligdage</swp-toggle-label>
+            <swp-toggle-desc>Salonen lukkes automatisk på danske helligdage</swp-toggle-desc>
+          </swp-toggle-info>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+
+        <swp-section-divider></swp-section-divider>
+
+        <swp-closed-days-list>
+          <swp-closed-day-item>
+            <swp-closed-day-info>
+              <swp-closed-day-date>5. april 2026</swp-closed-day-date>
+              <swp-closed-day-name>Påskedag</swp-closed-day-name>
+            </swp-closed-day-info>
+            <swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
+            <swp-icon-btn class="edit" title="Rediger åbningstid">
+              <i class="ph ph-pencil-simple"></i>
+            </swp-icon-btn>
+          </swp-closed-day-item>
+          <swp-closed-day-item>
+            <swp-closed-day-info>
+              <swp-closed-day-date>1. maj 2026</swp-closed-day-date>
+              <swp-closed-day-name>Store bededag</swp-closed-day-name>
+            </swp-closed-day-info>
+            <swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
+            <swp-icon-btn class="edit" title="Rediger åbningstid">
+              <i class="ph ph-pencil-simple"></i>
+            </swp-icon-btn>
+          </swp-closed-day-item>
+          <swp-closed-day-item>
+            <swp-closed-day-info>
+              <swp-closed-day-date>14. maj 2026</swp-closed-day-date>
+              <swp-closed-day-name>Kristi Himmelfart</swp-closed-day-name>
+            </swp-closed-day-info>
+            <swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
+            <swp-icon-btn class="edit" title="Rediger åbningstid">
+              <i class="ph ph-pencil-simple"></i>
+            </swp-icon-btn>
+          </swp-closed-day-item>
+          <swp-closed-day-item>
+            <swp-closed-day-info>
+              <swp-closed-day-date>24. maj 2026</swp-closed-day-date>
+              <swp-closed-day-name>Pinsedag</swp-closed-day-name>
+            </swp-closed-day-info>
+            <swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
+            <swp-icon-btn class="edit" title="Rediger åbningstid">
+              <i class="ph ph-pencil-simple"></i>
+            </swp-icon-btn>
+          </swp-closed-day-item>
+          <swp-closed-day-item>
+            <swp-closed-day-info>
+              <swp-closed-day-date>25. maj 2026</swp-closed-day-date>
+              <swp-closed-day-name>2. pinsedag</swp-closed-day-name>
+            </swp-closed-day-info>
+            <swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
+            <swp-icon-btn class="edit" title="Rediger åbningstid">
+              <i class="ph ph-pencil-simple"></i>
+            </swp-icon-btn>
+          </swp-closed-day-item>
+          <swp-closed-day-item>
+            <swp-closed-day-info>
+              <swp-closed-day-date>5. juni 2026</swp-closed-day-date>
+              <swp-closed-day-name>Grundlovsdag</swp-closed-day-name>
+            </swp-closed-day-info>
+            <swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
+            <swp-icon-btn class="edit" title="Rediger åbningstid">
+              <i class="ph ph-pencil-simple"></i>
+            </swp-icon-btn>
+          </swp-closed-day-item>
+          <swp-closed-day-item>
+            <swp-closed-day-info>
+              <swp-closed-day-date>24. december 2026</swp-closed-day-date>
+              <swp-closed-day-name>Juleaften</swp-closed-day-name>
+            </swp-closed-day-info>
+            <swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
+            <swp-icon-btn class="edit" title="Rediger åbningstid">
+              <i class="ph ph-pencil-simple"></i>
+            </swp-icon-btn>
+          </swp-closed-day-item>
+          <swp-closed-day-item>
+            <swp-closed-day-info>
+              <swp-closed-day-date>25. december 2026</swp-closed-day-date>
+              <swp-closed-day-name>1. juledag</swp-closed-day-name>
+            </swp-closed-day-info>
+            <swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
+            <swp-icon-btn class="edit" title="Rediger åbningstid">
+              <i class="ph ph-pencil-simple"></i>
+            </swp-icon-btn>
+          </swp-closed-day-item>
+          <swp-closed-day-item>
+            <swp-closed-day-info>
+              <swp-closed-day-date>26. december 2026</swp-closed-day-date>
+              <swp-closed-day-name>2. juledag</swp-closed-day-name>
+            </swp-closed-day-info>
+            <swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
+            <swp-icon-btn class="edit" title="Rediger åbningstid">
+              <i class="ph ph-pencil-simple"></i>
+            </swp-icon-btn>
+          </swp-closed-day-item>
+          <swp-closed-day-item>
+            <swp-closed-day-info>
+              <swp-closed-day-date>1. januar 2027</swp-closed-day-date>
+              <swp-closed-day-name>Nytårsdag</swp-closed-day-name>
+            </swp-closed-day-info>
+            <swp-closed-day-badge class="holiday">Helligdag</swp-closed-day-badge>
+            <swp-icon-btn class="edit" title="Rediger åbningstid">
+              <i class="ph ph-pencil-simple"></i>
+            </swp-icon-btn>
+          </swp-closed-day-item>
+          <swp-closed-day-item>
+            <swp-closed-day-info>
+              <swp-closed-day-date>14. - 28. juli 2026</swp-closed-day-date>
+              <swp-closed-day-name>Sommerferie</swp-closed-day-name>
+            </swp-closed-day-info>
+            <swp-closed-day-badge class="custom">Lukkedag</swp-closed-day-badge>
+            <swp-icon-btn class="delete" title="Fjern">
+              <i class="ph ph-trash"></i>
+            </swp-icon-btn>
+          </swp-closed-day-item>
+          <swp-closed-day-item>
+            <swp-closed-day-info>
+              <swp-closed-day-date>24. - 26. december 2026</swp-closed-day-date>
+              <swp-closed-day-name>Julelukning</swp-closed-day-name>
+            </swp-closed-day-info>
+            <swp-closed-day-badge class="custom">Lukkedag</swp-closed-day-badge>
+            <swp-icon-btn class="delete" title="Fjern">
+              <i class="ph ph-trash"></i>
+            </swp-icon-btn>
+          </swp-closed-day-item>
+        </swp-closed-days-list>
+      </swp-card-content>
+    </swp-card>
+  </swp-tab-content>
+
+  <!-- ==========================================
+       TAB: ONLINE BOOKING
+       ========================================== -->
+  <swp-tab-content data-tab="booking">
+    <swp-info-box>
+      <i class="ph ph-info"></i>
+      <p>Din booking-side er tilgængelig for kunder. Del linket på din hjemmeside, sociale medier eller i din email-signatur.</p>
+    </swp-info-box>
+
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-link"></i>
+          Booking URL
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-url-field>
+          <input type="text" value="https://book.plantempus.dk/salonbeauty" readonly>
+          <swp-url-copy title="Kopier link">
+            <i class="ph ph-copy"></i>
+          </swp-url-copy>
+        </swp-url-field>
+      </swp-card-content>
+    </swp-card>
+
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-sliders"></i>
+          Booking-indstillinger
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-toggle-row>
+          <swp-toggle-info>
+            <swp-toggle-label>Aktivér online booking</swp-toggle-label>
+            <swp-toggle-desc>Tillad kunder at booke tider online</swp-toggle-desc>
+          </swp-toggle-info>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+        <swp-toggle-row>
+          <swp-toggle-info>
+            <swp-toggle-label>Tillad online aflysning</swp-toggle-label>
+            <swp-toggle-desc>Kunder kan selv aflyse deres booking</swp-toggle-desc>
+          </swp-toggle-info>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+
+        <swp-section-divider></swp-section-divider>
+
+        <swp-edit-section>
+          <swp-edit-row class="wide-label">
+            <swp-edit-label>Book frem i tiden</swp-edit-label>
+            <swp-edit-select>
+              <select>
+                <option value="7">7 dage</option>
+                <option value="14">14 dage</option>
+                <option value="30" selected>30 dage</option>
+                <option value="60">60 dage</option>
+                <option value="90">90 dage</option>
+              </select>
+            </swp-edit-select>
+          </swp-edit-row>
+          <swp-edit-row class="wide-label">
+            <swp-edit-label>Minimum tid før booking</swp-edit-label>
+            <swp-edit-select>
+              <select>
+                <option value="0">Ingen begrænsning</option>
+                <option value="1">1 time</option>
+                <option value="2" selected>2 timer</option>
+                <option value="4">4 timer</option>
+                <option value="24">24 timer</option>
+              </select>
+            </swp-edit-select>
+          </swp-edit-row>
+          <swp-edit-row class="wide-label">
+            <swp-edit-label>Aflysningsfrist</swp-edit-label>
+            <swp-edit-select>
+              <select>
+                <option value="0">Ingen frist</option>
+                <option value="2">2 timer før</option>
+                <option value="4">4 timer før</option>
+                <option value="24" selected>24 timer før</option>
+                <option value="48">48 timer før</option>
+              </select>
+            </swp-edit-select>
+          </swp-edit-row>
+        </swp-edit-section>
+      </swp-card-content>
+    </swp-card>
+  </swp-tab-content>
+
+  <!-- ==========================================
+       TAB: FAKTURA & KVITTERING (kombineret)
+       ========================================== -->
+  <swp-tab-content data-tab="billing">
+    <swp-info-box>
+      <i class="ph ph-info"></i>
+      <p><strong>Kvittering</strong> printes efter betaling i butikken. <strong>Faktura</strong> sendes til kunder der betaler senere.</p>
+    </swp-info-box>
+
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-identification-badge"></i>
+          Virksomhedsoplysninger
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Firmanavn (juridisk)</swp-edit-label>
+            <swp-edit-value contenteditable="true">KARINA KNUDSEN® ApS</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>CVR-nummer</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Adresse</swp-edit-label>
+            <swp-edit-value contenteditable="true">Amager Strandvej 22f, 2300 København S</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+      </swp-card-content>
+    </swp-card>
+
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-bank"></i>
+          Bankoplysninger (kun faktura)
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Registreringsnr.</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono">1234</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Kontonummer</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>IBAN <span class="optional">(valgfri)</span></swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" style="color: var(--color-text-secondary);">DK00 0000 0000 0000 00</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>MobilePay <span class="optional">(valgfri)</span></swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Betalingsbetingelser</swp-edit-label>
+            <swp-edit-select>
+              <select>
+                <option value="0">Kontant</option>
+                <option value="8" selected>Netto 8 dage</option>
+                <option value="14">Netto 14 dage</option>
+                <option value="30">Netto 30 dage</option>
+              </select>
+            </swp-edit-select>
+          </swp-edit-row>
+        </swp-edit-section>
+      </swp-card-content>
+    </swp-card>
+
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-eye"></i>
+          Vis på print
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-toggle-row>
+          <swp-toggle-label>Vis CVR-nummer</swp-toggle-label>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+        <swp-toggle-row>
+          <swp-toggle-label>Vis telefonnummer</swp-toggle-label>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+        <swp-toggle-row>
+          <swp-toggle-label>Vis website</swp-toggle-label>
+          <swp-toggle-slider data-value="no">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+        <swp-toggle-row>
+          <swp-toggle-label>Vis logo</swp-toggle-label>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+      </swp-card-content>
+    </swp-card>
+
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-text-align-left"></i>
+          Tekster
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Header-tekst</swp-edit-label>
+            <swp-edit-value contenteditable="true">Tak for dit besøg!</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+        <div style="margin-top: 16px;">
+          <swp-edit-label style="display: block; margin-bottom: 8px;">Footer-tekst</swp-edit-label>
+          <swp-edit-textarea contenteditable="true">Åbningstider: Man-Fre 9-18, Lør 10-14
+Vi glæder os til at se dig igen!</swp-edit-textarea>
+        </div>
+        <div style="margin-top: 16px;">
+          <swp-edit-label style="display: block; margin-bottom: 8px;">Faktura-tekst</swp-edit-label>
+          <swp-edit-textarea contenteditable="true">Ved betaling bedes fakturanummer angivet.
+Tak for din handel!</swp-edit-textarea>
+        </div>
+      </swp-card-content>
+    </swp-card>
+  </swp-tab-content>
+
+  <!-- ==========================================
+       TAB: PÅMINDELSER
+       ========================================== -->
+  <swp-tab-content data-tab="reminders">
+    <swp-two-column-grid>
+      <!-- EMAIL COLUMN -->
+      <swp-card>
+        <swp-card-header>
+          <swp-card-title>
+            <i class="ph ph-envelope"></i>
+            Email
+          </swp-card-title>
+        </swp-card-header>
+        <swp-card-content>
+          <swp-notification-list>
+            <swp-notification-item>
+              <swp-notification-main>
+                <swp-toggle-slider data-value="yes">
+                  <swp-toggle-option>Ja</swp-toggle-option>
+                  <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-notification-info>
+                  <swp-notification-title>Bekræftelse</swp-notification-title>
+                  <swp-notification-desc>Sendes når en aftale er booket</swp-notification-desc>
+                </swp-notification-info>
+              </swp-notification-main>
+              <swp-edit-link>Rediger</swp-edit-link>
+            </swp-notification-item>
+
+            <swp-notification-item>
+              <swp-notification-main>
+                <swp-toggle-slider data-value="yes">
+                  <swp-toggle-option>Ja</swp-toggle-option>
+                  <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-notification-info>
+                  <swp-notification-title>Påmindelse</swp-notification-title>
+                  <swp-notification-desc>Sendes inden aftalen</swp-notification-desc>
+                </swp-notification-info>
+              </swp-notification-main>
+              <swp-edit-link>Rediger</swp-edit-link>
+            </swp-notification-item>
+
+            <swp-notification-item>
+              <swp-notification-main>
+                <swp-toggle-slider data-value="yes">
+                  <swp-toggle-option>Ja</swp-toggle-option>
+                  <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-notification-info>
+                  <swp-notification-title>Aflysning</swp-notification-title>
+                  <swp-notification-desc>Sendes når en aftale er aflyst</swp-notification-desc>
+                </swp-notification-info>
+              </swp-notification-main>
+              <swp-edit-link>Rediger</swp-edit-link>
+            </swp-notification-item>
+
+            <swp-notification-item>
+              <swp-notification-main>
+                <swp-toggle-slider data-value="yes">
+                  <swp-toggle-option>Ja</swp-toggle-option>
+                  <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-notification-info>
+                  <swp-notification-title>Flytning</swp-notification-title>
+                  <swp-notification-desc>Sendes når en aftale er flyttet</swp-notification-desc>
+                </swp-notification-info>
+              </swp-notification-main>
+              <swp-edit-link>Rediger</swp-edit-link>
+            </swp-notification-item>
+          </swp-notification-list>
+
+          <swp-card-note>Email-påmindelser er gratis.</swp-card-note>
+        </swp-card-content>
+      </swp-card>
+
+      <!-- SMS COLUMN -->
+      <swp-card>
+        <swp-card-header>
+          <swp-card-title>
+            <i class="ph ph-chat-text"></i>
+            SMS
+          </swp-card-title>
+        </swp-card-header>
+        <swp-card-content>
+          <swp-notification-list>
+            <swp-notification-item>
+              <swp-notification-main>
+                <swp-toggle-slider data-value="no">
+                  <swp-toggle-option>Ja</swp-toggle-option>
+                  <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-notification-info>
+                  <swp-notification-title>
+                    Bekræftelse online
+                    <swp-notification-price>(0,30 kr.)</swp-notification-price>
+                  </swp-notification-title>
+                  <swp-notification-desc>Sendes ved online booking</swp-notification-desc>
+                </swp-notification-info>
+              </swp-notification-main>
+              <swp-edit-link>Rediger</swp-edit-link>
+            </swp-notification-item>
+
+            <swp-notification-item>
+              <swp-notification-main>
+                <swp-toggle-slider data-value="yes">
+                  <swp-toggle-option>Ja</swp-toggle-option>
+                  <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-notification-info>
+                  <swp-notification-title>
+                    Bekræftelse manuelt
+                    <swp-notification-price>(0,30 kr.)</swp-notification-price>
+                  </swp-notification-title>
+                  <swp-notification-desc>Ved oprettelse i kalender</swp-notification-desc>
+                </swp-notification-info>
+              </swp-notification-main>
+              <swp-edit-link>Rediger</swp-edit-link>
+            </swp-notification-item>
+
+            <swp-notification-item>
+              <swp-notification-main>
+                <swp-toggle-slider data-value="yes">
+                  <swp-toggle-option>Ja</swp-toggle-option>
+                  <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-notification-info>
+                  <swp-notification-title>
+                    Påmindelse
+                    <swp-notification-price class="premium">(Premium)</swp-notification-price>
+                  </swp-notification-title>
+                  <swp-notification-desc>Sendes inden aftalen</swp-notification-desc>
+                </swp-notification-info>
+              </swp-notification-main>
+              <swp-edit-link>Rediger</swp-edit-link>
+            </swp-notification-item>
+          </swp-notification-list>
+
+          <swp-section-divider></swp-section-divider>
+
+          <swp-edit-section>
+            <swp-edit-row>
+              <swp-edit-label>Påmindelse sendes</swp-edit-label>
+              <swp-edit-select>
+                <select>
+                  <option value="2">2 timer før</option>
+                  <option value="4">4 timer før</option>
+                  <option value="12">12 timer før</option>
+                  <option value="24" selected>24 timer før</option>
+                  <option value="48">48 timer før</option>
+                </select>
+              </swp-edit-select>
+            </swp-edit-row>
+            <swp-edit-row>
+              <swp-edit-label>Sendes mellem</swp-edit-label>
+              <swp-time-range>
+                <input type="time" value="08:00">
+                <span>–</span>
+                <input type="time" value="21:00">
+              </swp-time-range>
+            </swp-edit-row>
+          </swp-edit-section>
+        </swp-card-content>
+      </swp-card>
+    </swp-two-column-grid>
+  </swp-tab-content>
+
+  <!-- ==========================================
+       TAB: BETALINGER
+       ========================================== -->
+  <swp-tab-content data-tab="payments">
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-wallet"></i>
+          Betalingsmetoder i butik
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-section-intro>Vælg hvilke betalingsmetoder dine kunder kan bruge ved checkout i butikken.</swp-section-intro>
+        <swp-toggle-row>
+          <swp-toggle-info>
+            <swp-toggle-label>Kontant</swp-toggle-label>
+            <swp-toggle-desc>Modtag kontant betaling</swp-toggle-desc>
+          </swp-toggle-info>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+        <swp-toggle-row>
+          <swp-toggle-info>
+            <swp-toggle-label>Dankort / Visa / Mastercard</swp-toggle-label>
+            <swp-toggle-desc>Betalingskort via terminal</swp-toggle-desc>
+          </swp-toggle-info>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+        <swp-toggle-row>
+          <swp-toggle-info>
+            <swp-toggle-label>MobilePay</swp-toggle-label>
+            <swp-toggle-desc>Betaling via MobilePay</swp-toggle-desc>
+          </swp-toggle-info>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+        <swp-toggle-row>
+          <swp-toggle-info>
+            <swp-toggle-label>Gavekort</swp-toggle-label>
+            <swp-toggle-desc>Indløs gavekort som betaling</swp-toggle-desc>
+          </swp-toggle-info>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+        <swp-toggle-row>
+          <swp-toggle-info>
+            <swp-toggle-label>Faktura</swp-toggle-label>
+            <swp-toggle-desc>Send faktura til kunden</swp-toggle-desc>
+          </swp-toggle-info>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+      </swp-card-content>
+    </swp-card>
+
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-globe"></i>
+          Online betaling
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-toggle-row>
+          <swp-toggle-info>
+            <swp-toggle-label>Modtag betaling ved online booking</swp-toggle-label>
+            <swp-toggle-desc>Kunder betaler når de booker online</swp-toggle-desc>
+          </swp-toggle-info>
+          <swp-toggle-slider data-value="no" id="onlinePaymentToggle">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+
+        <div id="onlinePaymentSettings" style="display: none;">
+          <swp-section-divider></swp-section-divider>
+
+          <swp-info-box>
+            <i class="ph ph-info"></i>
+            <p>Online betalinger håndteres via Stripe. Beløbet overføres automatisk til din bankkonto efter den valgte periode.</p>
+          </swp-info-box>
+
+          <swp-edit-section>
+            <swp-edit-row class="wide-label">
+              <swp-edit-label>Registreringsnummer</swp-edit-label>
+              <swp-edit-value contenteditable="true" class="mono">1234</swp-edit-value>
+            </swp-edit-row>
+            <swp-edit-row class="wide-label">
+              <swp-edit-label>Kontonummer</swp-edit-label>
+              <swp-edit-value contenteditable="true" class="mono">12345678</swp-edit-value>
+            </swp-edit-row>
+            <swp-edit-row class="wide-label">
+              <swp-edit-label>Udbetaling</swp-edit-label>
+              <swp-edit-select>
+                <select>
+                  <option value="7" selected>Hver uge</option>
+                  <option value="14">Hver 2. uge</option>
+                  <option value="28">Hver 4. uge</option>
+                </select>
+              </swp-edit-select>
+            </swp-edit-row>
+          </swp-edit-section>
+
+        </div>
+      </swp-card-content>
+    </swp-card>
+
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-percent"></i>
+          Gebyr & tillæg
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-toggle-row>
+          <swp-toggle-info>
+            <swp-toggle-label>Vis kortgebyr til kunden</swp-toggle-label>
+            <swp-toggle-desc>Vis kortgebyr som separat linje på kvittering</swp-toggle-desc>
+          </swp-toggle-info>
+          <swp-toggle-slider data-value="no">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+      </swp-card-content>
+    </swp-card>
+  </swp-tab-content>
+
+  <!-- ==========================================
+       TAB: MODULER
+       ========================================== -->
+  <swp-tab-content data-tab="modules">
+    <!-- Løn & Økonomi sektion -->
+    <swp-modules-section>
+      <swp-modules-header>
+        <swp-modules-title>
+          <i class="ph ph-wallet"></i>
+          Løn & Økonomi
+        </swp-modules-title>
+      </swp-modules-header>
+
+      <swp-modules-grid>
+        <!-- Lønberegning -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="teal">
+              <i class="ph ph-calculator"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Lønberegning</swp-module-title>
+              <swp-module-desc>Beregn løn, overtid, provision og ferie automatisk. Grundmodul for løneksport til eksterne systemer.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="yes">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="included">Inkluderet</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small secondary">Indstillinger</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- Intect -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="blue">
+              <i class="ph ph-export"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Intect</swp-module-title>
+              <swp-module-desc>Eksporter direkte til Intect lønsystem i StandardMapping-format.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="yes">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="included">Inkluderet</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small secondary">Indstillinger</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- Proløn -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="blue">
+              <i class="ph ph-export"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Proløn</swp-module-title>
+              <swp-module-desc>Eksporter direkte til Proløn lønsystem.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="no">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="coming">Kommer</swp-module-tag>
+            </swp-module-tags>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- Danløn -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="blue">
+              <i class="ph ph-export"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Danløn</swp-module-title>
+              <swp-module-desc>Eksporter direkte til Danløn lønsystem.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="no">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="coming">Kommer</swp-module-tag>
+            </swp-module-tags>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- Salary.dk -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="blue">
+              <i class="ph ph-export"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Salary.dk</swp-module-title>
+              <swp-module-desc>Eksporter direkte til Salary.dk lønsystem.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="no">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="coming">Kommer</swp-module-tag>
+            </swp-module-tags>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- Zenegy -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="teal">
+              <i class="ph ph-export"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Zenegy</swp-module-title>
+              <swp-module-desc>Eksporter direkte til Zenegy lønsystem. Automatisk overførsel af timer og provision.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="no">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="coming">Kommer</swp-module-tag>
+            </swp-module-tags>
+          </swp-module-footer>
+        </swp-module-card>
+      </swp-modules-grid>
+    </swp-modules-section>
+
+    <!-- AI & Analyse sektion -->
+    <swp-modules-section>
+      <swp-modules-header>
+        <swp-modules-title>
+          <i class="ph ph-brain"></i>
+          AI & Analyse
+        </swp-modules-title>
+        <swp-modules-badge>Nyt</swp-modules-badge>
+      </swp-modules-header>
+
+      <swp-modules-grid>
+        <!-- AI Dashboard -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="purple">
+              <i class="ph ph-sparkle"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>AI Dashboard</swp-module-title>
+              <swp-module-desc>Din personlige AI-assistent på dashboardet. Få daglige indsigter, anbefalinger og svar på spørgsmål om din forretning.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="yes">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="included">Inkluderet</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small secondary">Indstillinger</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- AI Virksomhedsanalyse -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="purple">
+              <i class="ph ph-chart-line-up"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>AI Virksomhedsanalyse</swp-module-title>
+              <swp-module-desc>Dybdegående AI-analyse af timer vs. omsætning, belægningsgrad og identificer mønstre og vækstmuligheder.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="no">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="price">+49 kr/md</swp-module-tag>
+              <swp-module-tag class="new">Beta</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small secondary">Læs mere</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- AI Kundeanalyse -->
+        <swp-module-card class="featured purple">
+          <swp-module-header>
+            <swp-module-icon class="purple">
+              <i class="ph ph-users-three"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>AI Kundeanalyse</swp-module-title>
+              <swp-module-desc>Forstå dine kunders adfærd og forbliv proaktiv. AI'en analyserer bookingmønstre, forudser hvornår kunder har brug for en tid, og identificerer kunder der er ved at falde fra.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="no">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-features>
+            <swp-module-feature class="purple">
+              <i class="ph ph-check-circle"></i>
+              <span>Booking-prediktion baseret på historik</span>
+            </swp-module-feature>
+            <swp-module-feature class="purple">
+              <i class="ph ph-check-circle"></i>
+              <span>Churn-detektion – se hvem der er ved at falde fra</span>
+            </swp-module-feature>
+            <swp-module-feature class="purple">
+              <i class="ph ph-check-circle"></i>
+              <span>Service-præference analyse pr. kunde</span>
+            </swp-module-feature>
+            <swp-module-feature class="purple">
+              <i class="ph ph-check-circle"></i>
+              <span>Sæson-korrektion i forudsigelser</span>
+            </swp-module-feature>
+            <swp-module-feature class="purple">
+              <i class="ph ph-check-circle"></i>
+              <span>Win-back kampagner for inaktive kunder</span>
+            </swp-module-feature>
+            <swp-module-feature class="purple">
+              <i class="ph ph-check-circle"></i>
+              <span>Automatisk personlig beskedgenerering</span>
+            </swp-module-feature>
+          </swp-module-features>
+          <swp-module-stats class="purple">
+            <swp-module-stat>
+              <swp-module-stat-value>-34%</swp-module-stat-value>
+              <swp-module-stat-label>Færre tabte kunder</swp-module-stat-label>
+            </swp-module-stat>
+            <swp-module-stat>
+              <swp-module-stat-value>+18%</swp-module-stat-value>
+              <swp-module-stat-label>Genbookinger</swp-module-stat-label>
+            </swp-module-stat>
+            <swp-module-stat>
+              <swp-module-stat-value>3.8x</swp-module-stat-value>
+              <swp-module-stat-label>ROI på kampagner</swp-module-stat-label>
+            </swp-module-stat>
+          </swp-module-stats>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="price">+79 kr/md</swp-module-tag>
+              <swp-module-tag class="new">Beta</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small primary purple">Prøv gratis i 14 dage</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- AI Produktsalg -->
+        <swp-module-card class="featured purple">
+          <swp-module-header>
+            <swp-module-icon class="purple">
+              <i class="ph ph-shopping-bag"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>AI Produktsalg</swp-module-title>
+              <swp-module-desc>Øg dit produktsalg med intelligente anbefalinger. AI'en lærer dine kunders præferencer og foreslår de rigtige produkter på det rigtige tidspunkt.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="no">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-features>
+            <swp-module-feature class="purple">
+              <i class="ph ph-check-circle"></i>
+              <span>Personlige produktanbefalinger</span>
+            </swp-module-feature>
+            <swp-module-feature class="purple">
+              <i class="ph ph-check-circle"></i>
+              <span>Automatisk mersalg ved kassen</span>
+            </swp-module-feature>
+            <swp-module-feature class="purple">
+              <i class="ph ph-check-circle"></i>
+              <span>Kundeprofilanalyse</span>
+            </swp-module-feature>
+            <swp-module-feature class="purple">
+              <i class="ph ph-check-circle"></i>
+              <span>Sæson- og trendbaserede forslag</span>
+            </swp-module-feature>
+          </swp-module-features>
+          <swp-module-stats class="purple">
+            <swp-module-stat>
+              <swp-module-stat-value>+23%</swp-module-stat-value>
+              <swp-module-stat-label>Mersalg pr. kunde</swp-module-stat-label>
+            </swp-module-stat>
+            <swp-module-stat>
+              <swp-module-stat-value>4.2x</swp-module-stat-value>
+              <swp-module-stat-label>Højere konvertering</swp-module-stat-label>
+            </swp-module-stat>
+            <swp-module-stat>
+              <swp-module-stat-value>89%</swp-module-stat-value>
+              <swp-module-stat-label>Relevante forslag</swp-module-stat-label>
+            </swp-module-stat>
+          </swp-module-stats>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="price">+49 kr/md</swp-module-tag>
+              <swp-module-tag class="new">Beta</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small primary purple">Prøv gratis i 14 dage</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- AI Kalenderoptimering -->
+        <swp-module-card class="featured">
+          <swp-module-header>
+            <swp-module-icon class="green">
+              <i class="ph ph-sparkle"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>AI Kalenderoptimering</swp-module-title>
+              <swp-module-desc>Maksimer din kalenderudnyttelse og reducer tabt omsætning. AI'en foreslår optimale tider til kunder og identificerer huller der kan fyldes.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="no">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-features>
+            <swp-module-feature>
+              <i class="ph ph-check-circle"></i>
+              <span>Smart tidsforslag ved booking</span>
+            </swp-module-feature>
+            <swp-module-feature>
+              <i class="ph ph-check-circle"></i>
+              <span>Automatisk hul-identifikation</span>
+            </swp-module-feature>
+            <swp-module-feature>
+              <i class="ph ph-check-circle"></i>
+              <span>SMS-tilbud til flytning af tider</span>
+            </swp-module-feature>
+            <swp-module-feature>
+              <i class="ph ph-check-circle"></i>
+              <span>Dashboard med optimeringsscore</span>
+            </swp-module-feature>
+          </swp-module-features>
+          <swp-module-stats>
+            <swp-module-stat>
+              <swp-module-stat-value>52x</swp-module-stat-value>
+              <swp-module-stat-label>ROI i gennemsnit</swp-module-stat-label>
+            </swp-module-stat>
+            <swp-module-stat>
+              <swp-module-stat-value>15%</swp-module-stat-value>
+              <swp-module-stat-label>Færre tomme slots</swp-module-stat-label>
+            </swp-module-stat>
+            <swp-module-stat>
+              <swp-module-stat-value>312k</swp-module-stat-value>
+              <swp-module-stat-label>Ekstra oms./år*</swp-module-stat-label>
+            </swp-module-stat>
+          </swp-module-stats>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="price">+99 kr/md</swp-module-tag>
+              <swp-module-tag class="new">Ny</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small primary">Prøv gratis i 14 dage</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+      </swp-modules-grid>
+    </swp-modules-section>
+
+    <!-- Tillægsmoduler sektion -->
+    <swp-modules-section>
+      <swp-modules-header>
+        <swp-modules-title>
+          <i class="ph ph-plus-circle"></i>
+          Tillægsmoduler
+        </swp-modules-title>
+      </swp-modules-header>
+
+      <swp-modules-grid>
+        <!-- Online Booking -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="teal">
+              <i class="ph ph-globe"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Online Booking</swp-module-title>
+              <swp-module-desc>Lad kunder booke tider online via din egen bookingside. Integreres med kalender og påmindelser.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="yes">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="included">Inkluderet</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small secondary">Indstillinger</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- Gavekort -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="amber">
+              <i class="ph ph-gift"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Gavekort</swp-module-title>
+              <swp-module-desc>Sælg og administrer digitale gavekort. Kunderne kan købe online eller i butikken, og indløse ved betaling.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="yes">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="included">Inkluderet</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small secondary">Indstillinger</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- Kasseafstemning -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="blue">
+              <i class="ph ph-calculator"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Kasseafstemning</swp-module-title>
+              <swp-module-desc>Daglig kasseopgørelse og afstemning. Hold styr på kontanter, kort og andre betalingsmetoder.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="yes">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="included">Inkluderet</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small secondary">Indstillinger</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- Leverandører -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="green">
+              <i class="ph ph-truck"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Leverandører</swp-module-title>
+              <swp-module-desc>Bestil varer direkte fra dine leverandører. Hold styr på ordrer, leveringer og lagerbeholdning.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="no">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="included">Inkluderet</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small secondary">Indstillinger</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- Stregkodescanner -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="purple">
+              <i class="ph ph-barcode"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Stregkodescanner</swp-module-title>
+              <swp-module-desc>Scan EAN-koder og få AI-genererede produktbeskrivelser automatisk. Opret nye produkter på sekunder.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="yes">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="included">Inkluderet</swp-module-tag>
+              <swp-module-tag class="new">AI</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small secondary">Indstillinger</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- Website Builder -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="teal">
+              <i class="ph ph-layout"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Website Builder</swp-module-title>
+              <swp-module-desc>Byg din salons hjemmeside med drag-and-drop blokke. Vælg mellem færdige designs, tilpas farver og fonte, og integrer din booking.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="no">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="price">+149 kr/md</swp-module-tag>
+              <swp-module-tag class="new">Ny</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small secondary" onclick="window.open('poc-website-builder.html', '_blank')">Åbn Builder</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- HR & Dokumenter -->
+        <swp-module-card class="full-width">
+          <swp-module-header>
+            <swp-module-icon class="purple">
+              <i class="ph ph-folder-user"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>HR & Dokumenter</swp-module-title>
+              <swp-module-desc>Komplet medarbejderstyring: Kontrakter, certificeringer, kurser, ferie-saldo, sygefravær og barsel. Upload dokumenter og få påmindelser om udløbsdatoer.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="yes">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="included">Inkluderet</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small secondary">Indstillinger</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+      </swp-modules-grid>
+    </swp-modules-section>
+
+    <!-- Integrationer sektion -->
+    <swp-modules-section>
+      <swp-modules-header>
+        <swp-modules-title>
+          <i class="ph ph-plugs-connected"></i>
+          Integrationer
+        </swp-modules-title>
+      </swp-modules-header>
+
+      <swp-modules-grid>
+        <!-- Sygeforsikring "danmark" -->
+        <swp-module-card class="featured">
+          <swp-module-header>
+            <swp-module-icon class="green">
+              <i class="ph ph-heart-half"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Sygeforsikring "danmark"</swp-module-title>
+              <swp-module-desc>Gør det nemt for dine kunder at få tilskud. Send automatisk kvitteringer til "danmark" så kunderne får deres penge tilbage uden selv at løfte en finger.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="no">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-features>
+            <swp-module-feature>
+              <i class="ph ph-check-circle"></i>
+              <span>Automatisk indsendelse af kvitteringer</span>
+            </swp-module-feature>
+            <swp-module-feature>
+              <i class="ph ph-check-circle"></i>
+              <span>Direkte integration via API</span>
+            </swp-module-feature>
+            <swp-module-feature>
+              <i class="ph ph-check-circle"></i>
+              <span>Kunden får tilskud uden besvær</span>
+            </swp-module-feature>
+            <swp-module-feature>
+              <i class="ph ph-check-circle"></i>
+              <span>Øget kundetilfredshed</span>
+            </swp-module-feature>
+          </swp-module-features>
+          <swp-module-stats>
+            <swp-module-stat>
+              <swp-module-stat-value>2.1M</swp-module-stat-value>
+              <swp-module-stat-label>Medlemmer i DK</swp-module-stat-label>
+            </swp-module-stat>
+            <swp-module-stat>
+              <swp-module-stat-value>100%</swp-module-stat-value>
+              <swp-module-stat-label>Automatiseret</swp-module-stat-label>
+            </swp-module-stat>
+            <swp-module-stat>
+              <swp-module-stat-value>0 kr</swp-module-stat-value>
+              <swp-module-stat-label>Ekstra gebyr</swp-module-stat-label>
+            </swp-module-stat>
+          </swp-module-stats>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="included">Inkluderet</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small primary">Opsæt integration</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+
+        <!-- Kalenderintegration -->
+        <swp-module-card>
+          <swp-module-header>
+            <swp-module-icon class="blue">
+              <i class="ph ph-calendar-check"></i>
+            </swp-module-icon>
+            <swp-module-info>
+              <swp-module-title>Kalenderintegration</swp-module-title>
+              <swp-module-desc>Få dine bookinger synkroniseret til din private kalender automatisk. Se alle aftaler samlet ét sted - også når du er offline.</swp-module-desc>
+            </swp-module-info>
+            <swp-module-toggle>
+              <swp-toggle-slider data-value="yes">
+                <swp-toggle-option>Til</swp-toggle-option>
+                <swp-toggle-option>Fra</swp-toggle-option>
+              </swp-toggle-slider>
+            </swp-module-toggle>
+          </swp-module-header>
+          <swp-module-features>
+            <swp-module-feature>
+              <i class="ph ph-check-circle"></i>
+              <span>Google Kalender</span>
+            </swp-module-feature>
+            <swp-module-feature>
+              <i class="ph ph-check-circle"></i>
+              <span>Apple iCloud Kalender</span>
+            </swp-module-feature>
+            <swp-module-feature>
+              <i class="ph ph-check-circle"></i>
+              <span>Microsoft Outlook</span>
+            </swp-module-feature>
+            <swp-module-feature>
+              <i class="ph ph-check-circle"></i>
+              <span>Tovejs-synkronisering</span>
+            </swp-module-feature>
+          </swp-module-features>
+          <swp-module-footer>
+            <swp-module-tags>
+              <swp-module-tag class="included">Inkluderet</swp-module-tag>
+            </swp-module-tags>
+            <swp-btn class="small secondary">Indstillinger</swp-btn>
+          </swp-module-footer>
+        </swp-module-card>
+      </swp-modules-grid>
+    </swp-modules-section>
+  </swp-tab-content>
+
+  <!-- ==========================================
+       TAB: TRACKING
+       ========================================== -->
+  <swp-tab-content data-tab="tracking">
+    <!-- Meta Pixel -->
+    <swp-card class="tracking-card" data-tracker="meta">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-meta-logo"></i>
+          Meta Pixel (Facebook)
+        </swp-card-title>
+        <swp-toggle-slider data-value="yes">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Pixel ID</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="metaPixelId" oninput="updateTrackingPreview()">123456789012345</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+        <swp-tracking-hint>
+          <i class="ph ph-info"></i>
+          Bruges til Facebook og Instagram annoncering og remarketing
+        </swp-tracking-hint>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Google Analytics -->
+    <swp-card class="tracking-card" data-tracker="ga4">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-chart-line"></i>
+          Google Analytics (GA4)
+        </swp-card-title>
+        <swp-toggle-slider data-value="yes">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Measurement ID</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="ga4Id" oninput="updateTrackingPreview()">G-ABC123XYZ</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+        <swp-tracking-hint>
+          <i class="ph ph-info"></i>
+          Google Analytics 4 til website trafik og brugeradfærd
+        </swp-tracking-hint>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Google Tag Manager -->
+    <swp-card class="tracking-card" data-tracker="gtm">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-code"></i>
+          Google Tag Manager
+        </swp-card-title>
+        <swp-toggle-slider data-value="no">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Container ID</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="gtmId" oninput="updateTrackingPreview()">GTM-XXXXXXX</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+        <swp-tracking-hint>
+          <i class="ph ph-info"></i>
+          Central styring af alle tracking-tags
+        </swp-tracking-hint>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Plausible -->
+    <swp-card class="tracking-card" data-tracker="plausible">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-leaf"></i>
+          Plausible Analytics
+        </swp-card-title>
+        <swp-toggle-slider data-value="no">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Domæne</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="plausibleDomain" oninput="updateTrackingPreview()">minside.dk</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+        <swp-tracking-hint class="privacy">
+          <i class="ph ph-shield-check"></i>
+          Privacy-venlig analytics uden cookies - GDPR compliant
+        </swp-tracking-hint>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Fathom -->
+    <swp-card class="tracking-card" data-tracker="fathom">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-eye"></i>
+          Fathom Analytics
+        </swp-card-title>
+        <swp-toggle-slider data-value="no">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Site ID</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="fathomSiteId" oninput="updateTrackingPreview()">ABCDEFGH</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+        <swp-tracking-hint class="privacy">
+          <i class="ph ph-shield-check"></i>
+          Privacy-venlig analytics uden cookies - GDPR compliant
+        </swp-tracking-hint>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Matomo -->
+    <swp-card class="tracking-card" data-tracker="matomo">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-database"></i>
+          Matomo
+        </swp-card-title>
+        <swp-toggle-slider data-value="no">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Server URL</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="matomoUrl" oninput="updateTrackingPreview()">https://matomo.minside.dk</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Site ID</swp-edit-label>
+            <swp-edit-value contenteditable="true" class="mono" id="matomoSiteId" oninput="updateTrackingPreview()">1</swp-edit-value>
+          </swp-edit-row>
+        </swp-edit-section>
+        <swp-tracking-hint class="privacy">
+          <i class="ph ph-shield-check"></i>
+          Self-hosted analytics - fuld kontrol over dine data
+        </swp-tracking-hint>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Custom Scripts -->
+    <swp-card class="tracking-card full-width">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-code-block"></i>
+          Brugerdefinerede Scripts
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-script-section>
+          <swp-script-label>
+            <i class="ph ph-file-code"></i>
+            Scripts i &lt;head&gt;
+          </swp-script-label>
+          <textarea class="script-textarea" id="customHeadScripts" placeholder="<!-- Indsæt custom tracking kode her -->" oninput="updateTrackingPreview()"></textarea>
+        </swp-script-section>
+        <swp-script-section>
+          <swp-script-label>
+            <i class="ph ph-file-code"></i>
+            Scripts før &lt;/body&gt;
+          </swp-script-label>
+          <textarea class="script-textarea" id="customBodyScripts" placeholder="<!-- Indsæt custom kode her -->"></textarea>
+        </swp-script-section>
+      </swp-card-content>
+    </swp-card>
+
+    <!-- Generated Code Preview -->
+    <swp-card class="code-preview-card">
+      <swp-card-header>
+        <swp-card-title>
+          <i class="ph ph-terminal"></i>
+          Genereret Kode
+        </swp-card-title>
+      </swp-card-header>
+      <swp-card-content>
+        <swp-code-info>
+          <i class="ph ph-info"></i>
+          Denne kode indsættes automatisk i &lt;head&gt; på din online booking side
+        </swp-code-info>
+        <pre class="code-preview" id="trackingCodePreview"><code><!-- Ingen aktive tracking-koder --></code></pre>
+      </swp-card-content>
+    </swp-card>
+  </swp-tab-content>
+
+  <!-- ==========================================
+       DRAWER: REDIGER BESKED
+       ========================================== -->
+  <swp-drawer-overlay id="drawerOverlay"></swp-drawer-overlay>
+  <swp-drawer id="messageDrawer">
+    <swp-drawer-header>
+      <swp-drawer-title>
+        <h3 id="drawerTitle">Bekræftelse</h3>
+        <span id="drawerSubtitle">SMS · Sendes ved booking</span>
+      </swp-drawer-title>
+      <swp-drawer-close id="drawerClose">
+        <i class="ph ph-x"></i>
+      </swp-drawer-close>
+    </swp-drawer-header>
+
+    <swp-drawer-body>
+      <swp-message-section>
+        <swp-message-section-title>Besked</swp-message-section-title>
+        <swp-message-editor contenteditable="true" id="messageEditor">Hej {kunde_navn}!
+
+Din tid er bekræftet:
+{behandling}
+{dato} kl. {tid}
+
+Hos {medarbejder}
+{firma_navn}, {firma_adresse}
+
+Vil du ændre din tid? {booking_link}</swp-message-editor>
+      </swp-message-section>
+
+      <swp-message-section>
+        <swp-message-section-title>Indsæt variabel</swp-message-section-title>
+        <swp-variables-grid id="smsVariablesGrid">
+          <swp-variable-tag data-var="{kunde_navn}"><i class="ph ph-user"></i> kunde_navn</swp-variable-tag>
+          <swp-variable-tag data-var="{behandling}"><i class="ph ph-scissors"></i> behandling</swp-variable-tag>
+          <swp-variable-tag data-var="{dato}"><i class="ph ph-calendar"></i> dato</swp-variable-tag>
+          <swp-variable-tag data-var="{tid}"><i class="ph ph-clock"></i> tid</swp-variable-tag>
+          <swp-variable-tag data-var="{medarbejder}"><i class="ph ph-user-circle"></i> medarbejder</swp-variable-tag>
+          <swp-variable-tag data-var="{firma_navn}"><i class="ph ph-buildings"></i> firma_navn</swp-variable-tag>
+          <swp-variable-tag data-var="{firma_adresse}"><i class="ph ph-map-pin"></i> firma_adresse</swp-variable-tag>
+          <swp-variable-tag data-var="{firma_tlf}"><i class="ph ph-phone"></i> firma_tlf</swp-variable-tag>
+          <swp-variable-tag data-var="{booking_link}"><i class="ph ph-link"></i> booking_link</swp-variable-tag>
+        </swp-variables-grid>
+      </swp-message-section>
+
+      <swp-message-section>
+        <swp-message-section-title>Forhåndsvisning</swp-message-section-title>
+        <swp-message-preview id="messagePreview">
+          Hej <span class="highlight" data-var="{kunde_navn}">Anna Jensen</span>!<br><br>
+          Din tid er bekræftet:<br>
+          <span class="highlight" data-var="{behandling}">Dameklip + Føn</span><br>
+          <span class="highlight" data-var="{dato}">Torsdag d. 2. januar</span> kl. <span class="highlight" data-var="{tid}">14:30</span><br><br>
+          Hos <span class="highlight" data-var="{medarbejder}">Maria</span><br>
+          <span class="highlight" data-var="{firma_navn}">KARINA KNUDSEN®</span>, <span class="highlight" data-var="{firma_adresse}">Hovedgaden 123</span><br><br>
+          Vil du ændre din tid? <span class="highlight" data-var="{booking_link}">book.plantempus.dk/x7k2</span>
+        </swp-message-preview>
+        <swp-preview-meta>
+          <span><i class="ph ph-chat-text"></i> 312 tegn</span>
+          <span><i class="ph ph-coin"></i> 2 SMS (0,98 kr.)</span>
+        </swp-preview-meta>
+      </swp-message-section>
+    </swp-drawer-body>
+
+    <swp-drawer-footer>
+      <swp-btn class="secondary" id="drawerCancel">Annuller</swp-btn>
+      <swp-btn class="primary" id="drawerSave">
+        <i class="ph ph-check"></i>
+        Gem besked
+      </swp-btn>
+    </swp-drawer-footer>
+  </swp-drawer>
+
+  <!-- ==========================================
+       DRAWER: EMAIL SKABELON (bred)
+       ========================================== -->
+  <swp-drawer-overlay id="emailDrawerOverlay"></swp-drawer-overlay>
+  <swp-drawer class="wide" id="emailDrawer">
+    <swp-drawer-header>
+      <swp-drawer-title>
+        <h3 id="emailDrawerTitle">Bekræftelse</h3>
+        <span>Email · Sendes når en aftale er booket</span>
+      </swp-drawer-title>
+      <swp-drawer-close id="emailDrawerClose">
+        <i class="ph ph-x"></i>
+      </swp-drawer-close>
+    </swp-drawer-header>
+
+    <swp-drawer-body>
+      <swp-email-editor-layout>
+        <!-- Sidebar med felter -->
+        <swp-email-sidebar>
+          <swp-edit-section>
+            <swp-edit-row>
+              <swp-edit-label>Email emne</swp-edit-label>
+              <swp-edit-value contenteditable="true" id="emailSubject">Din tid hos KARINA KNUDSEN® er bekræftet</swp-edit-value>
+            </swp-edit-row>
+
+            <swp-edit-row>
+              <swp-edit-label>Overskrift</swp-edit-label>
+              <swp-edit-value contenteditable="true" id="emailHeadline">Tid bekræftet!</swp-edit-value>
+            </swp-edit-row>
+
+            <swp-edit-row>
+              <swp-edit-label>Velkomst</swp-edit-label>
+              <swp-edit-value contenteditable="true" id="emailGreeting">Hej {kunde_navn},</swp-edit-value>
+            </swp-edit-row>
+
+            <swp-edit-row>
+              <swp-edit-label>Brødtekst</swp-edit-label>
+              <swp-edit-textarea contenteditable="true" id="emailBody">Vi glæder os til at se dig! Her er detaljerne for din aftale.</swp-edit-textarea>
+            </swp-edit-row>
+
+            <swp-edit-row>
+              <swp-edit-label>Knap tekst</swp-edit-label>
+              <swp-edit-value contenteditable="true" id="emailButtonText">Se eller ændr din tid</swp-edit-value>
+            </swp-edit-row>
+
+            <swp-edit-row>
+              <swp-edit-label>Primær farve</swp-edit-label>
+              <swp-color-picker-row>
+                <input type="color" value="#00897b" id="emailColor">
+                <span id="emailColorValue">#00897b</span>
+              </swp-color-picker-row>
+            </swp-edit-row>
+          </swp-edit-section>
+
+          <swp-message-section>
+            <swp-message-section-title>Variabler</swp-message-section-title>
+            <swp-variables-grid>
+              <swp-variable-tag data-var="{kunde_navn}"><i class="ph ph-user"></i> kunde_navn</swp-variable-tag>
+              <swp-variable-tag data-var="{behandling}"><i class="ph ph-scissors"></i> behandling</swp-variable-tag>
+              <swp-variable-tag data-var="{dato}"><i class="ph ph-calendar"></i> dato</swp-variable-tag>
+              <swp-variable-tag data-var="{tid}"><i class="ph ph-clock"></i> tid</swp-variable-tag>
+              <swp-variable-tag data-var="{medarbejder}"><i class="ph ph-user-circle"></i> medarbejder</swp-variable-tag>
+            </swp-variables-grid>
+          </swp-message-section>
+        </swp-email-sidebar>
+
+        <!-- Live preview -->
+        <swp-email-preview-container>
+          <swp-email-preview>
+            <swp-email-header id="emailPreviewHeader">
+              <swp-email-logo>SB</swp-email-logo>
+              <h2 id="emailPreviewHeadline">Tid bekræftet!</h2>
+              <p>KARINA KNUDSEN®</p>
+            </swp-email-header>
+
+            <swp-email-body>
+              <swp-email-greeting id="emailPreviewGreeting">Hej <span class="editable" data-var="{kunde_navn}">Anna</span>,</swp-email-greeting>
+
+              <swp-email-text id="emailPreviewBody">Vi glæder os til at se dig! Her er detaljerne for din aftale.</swp-email-text>
+
+              <swp-email-appointment-card>
+                <swp-email-appointment-row>
+                  <i class="ph ph-scissors"></i>
+                  <span><strong class="editable" data-var="{behandling}">Dameklip + Føn</strong></span>
+                </swp-email-appointment-row>
+                <swp-email-appointment-row>
+                  <i class="ph ph-calendar"></i>
+                  <span><span class="editable" data-var="{dato}">Torsdag d. 2. januar 2025</span></span>
+                </swp-email-appointment-row>
+                <swp-email-appointment-row>
+                  <i class="ph ph-clock"></i>
+                  <span>Kl. <span class="editable" data-var="{tid}">14:30</span> – <span class="editable" data-var="{tid}">15:15</span></span>
+                </swp-email-appointment-row>
+                <swp-email-appointment-row>
+                  <i class="ph ph-user-circle"></i>
+                  <span>Hos <strong class="editable" data-var="{medarbejder}">Maria</strong></span>
+                </swp-email-appointment-row>
+                <swp-email-appointment-row>
+                  <i class="ph ph-map-pin"></i>
+                  <span>Amager Strandvej 22f, 2300 København S</span>
+                </swp-email-appointment-row>
+              </swp-email-appointment-card>
+
+              <swp-email-button-container>
+                <swp-email-button id="emailPreviewButton">Se eller ændr din tid</swp-email-button>
+              </swp-email-button-container>
+            </swp-email-body>
+
+            <swp-email-footer>
+              <swp-email-footer-logo>KARINA KNUDSEN®</swp-email-footer-logo>
+              <p>Amager Strandvej 22f, 2300 København S</p>
+              <p>Tlf: 70 20 30 40 · <a href="#">info@salonbeauty.dk</a></p>
+              <p style="margin-top: 12px; font-size: 11px;">
+                <a href="#">Afmeld emails</a>
+              </p>
+            </swp-email-footer>
+          </swp-email-preview>
+        </swp-email-preview-container>
+      </swp-email-editor-layout>
+    </swp-drawer-body>
+
+    <swp-drawer-footer>
+      <swp-btn class="secondary" id="emailDrawerCancel">Annuller</swp-btn>
+      <swp-btn class="primary" id="emailDrawerSave">
+        <i class="ph ph-check"></i>
+        Gem skabelon
+      </swp-btn>
+    </swp-drawer-footer>
+  </swp-drawer>
+
+  <!-- Onboarding Popover -->
+  <div id="variablesHint" popover="manual">
+    <swp-onboarding-hint>
+      <i class="ph ph-lightbulb"></i>
+      <span>Klik for at indsætte, hold musen over for at se i preview</span>
+      <swp-hint-close><i class="ph ph-x"></i></swp-hint-close>
+    </swp-onboarding-hint>
+  </div>
+
+  <script>
+    // Tab switching
+    document.querySelectorAll('swp-tab').forEach(tab => {
+      tab.addEventListener('click', () => {
+        const tabName = tab.dataset.tab;
+
+        // Update active tab
+        document.querySelectorAll('swp-tab').forEach(t => t.classList.remove('active'));
+        tab.classList.add('active');
+
+        // Update active content
+        document.querySelectorAll('swp-tab-content').forEach(c => c.classList.remove('active'));
+        document.querySelector(`swp-tab-content[data-tab="${tabName}"]`).classList.add('active');
+      });
+    });
+
+    // Toggle slider functionality
+    document.querySelectorAll('swp-toggle-slider').forEach(slider => {
+      slider.querySelectorAll('swp-toggle-option').forEach((option, index) => {
+        option.addEventListener('click', () => {
+          slider.dataset.value = index === 0 ? 'yes' : 'no';
+        });
+      });
+    });
+
+    // Copy URL
+    document.querySelector('swp-url-copy')?.addEventListener('click', () => {
+      const input = document.querySelector('swp-url-field input');
+      navigator.clipboard.writeText(input.value);
+      alert('Link kopieret!');
+    });
+
+    // ==========================================
+    // SMS DRAWER
+    // ==========================================
+    const smsDrawer = document.getElementById('messageDrawer');
+    const smsOverlay = document.getElementById('drawerOverlay');
+    const smsTitle = document.getElementById('drawerTitle');
+    const smsSubtitle = document.getElementById('drawerSubtitle');
+
+    function openSmsDrawer(title, subtitle) {
+      smsTitle.textContent = title;
+      smsSubtitle.textContent = subtitle;
+      smsDrawer.classList.add('open');
+      smsOverlay.classList.add('open');
+      document.body.style.overflow = 'hidden';
+
+      // Show onboarding hint if not seen before
+      if (!localStorage.getItem('variablesHintSeen')) {
+        setTimeout(() => {
+          showVariablesHint();
+        }, 600);
+      }
+    }
+
+    function showVariablesHint() {
+      const hint = document.getElementById('variablesHint');
+      const anchor = document.getElementById('smsVariablesGrid');
+      if (!hint || !anchor) return;
+
+      const anchorRect = anchor.getBoundingClientRect();
+
+      hint.style.position = 'fixed';
+      hint.style.top = `${anchorRect.top - 60}px`;
+      hint.style.left = `${anchorRect.left - 80}px`;
+
+      hint.showPopover();
+    }
+
+    function hideVariablesHint() {
+      const hint = document.getElementById('variablesHint');
+      if (hint) {
+        hint.hidePopover();
+        localStorage.setItem('variablesHintSeen', 'true');
+      }
+    }
+
+    function closeSmsDrawer() {
+      smsDrawer.classList.remove('open');
+      smsOverlay.classList.remove('open');
+      document.body.style.overflow = '';
+
+      // Hide hint without marking as seen (will show again next time)
+      const hint = document.getElementById('variablesHint');
+      if (hint) {
+        try { hint.hidePopover(); } catch(e) {}
+      }
+    }
+
+    document.getElementById('drawerClose').addEventListener('click', closeSmsDrawer);
+    document.getElementById('drawerCancel').addEventListener('click', closeSmsDrawer);
+    smsOverlay.addEventListener('click', closeSmsDrawer);
+    document.getElementById('drawerSave').addEventListener('click', closeSmsDrawer);
+
+    // ==========================================
+    // EMAIL DRAWER
+    // ==========================================
+    const emailDrawer = document.getElementById('emailDrawer');
+    const emailOverlay = document.getElementById('emailDrawerOverlay');
+    const emailTitle = document.getElementById('emailDrawerTitle');
+
+    function openEmailDrawer(title) {
+      emailTitle.textContent = title;
+      emailDrawer.classList.add('open');
+      emailOverlay.classList.add('open');
+      document.body.style.overflow = 'hidden';
+    }
+
+    function closeEmailDrawer() {
+      emailDrawer.classList.remove('open');
+      emailOverlay.classList.remove('open');
+      document.body.style.overflow = '';
+    }
+
+    document.getElementById('emailDrawerClose').addEventListener('click', closeEmailDrawer);
+    document.getElementById('emailDrawerCancel').addEventListener('click', closeEmailDrawer);
+    emailOverlay.addEventListener('click', closeEmailDrawer);
+    document.getElementById('emailDrawerSave').addEventListener('click', closeEmailDrawer);
+
+    // ==========================================
+    // OPEN CORRECT DRAWER
+    // ==========================================
+    document.querySelectorAll('swp-edit-link').forEach(link => {
+      link.addEventListener('click', () => {
+        const item = link.closest('swp-notification-item');
+        const titleEl = item?.querySelector('swp-notification-title');
+        const title = titleEl?.childNodes[0]?.textContent.trim() || 'Besked';
+        const card = link.closest('swp-card');
+        const isEmail = card?.querySelector('swp-card-title')?.textContent.includes('Email');
+        const desc = item?.querySelector('swp-notification-desc')?.textContent || '';
+
+        if (isEmail) {
+          openEmailDrawer(title);
+        } else {
+          openSmsDrawer(title, `SMS · ${desc}`);
+        }
+      });
+    });
+
+    // ==========================================
+    // EMAIL LIVE PREVIEW
+    // ==========================================
+    const emailHeadline = document.getElementById('emailHeadline');
+    const emailBody = document.getElementById('emailBody');
+    const emailButtonText = document.getElementById('emailButtonText');
+    const emailColor = document.getElementById('emailColor');
+    const emailColorValue = document.getElementById('emailColorValue');
+
+    // Update headline (contenteditable)
+    emailHeadline?.addEventListener('input', () => {
+      document.getElementById('emailPreviewHeadline').textContent = emailHeadline.textContent;
+    });
+
+    // Update body text (contenteditable)
+    emailBody?.addEventListener('input', () => {
+      document.getElementById('emailPreviewBody').textContent = emailBody.textContent;
+    });
+
+    // Update button text (contenteditable)
+    emailButtonText?.addEventListener('input', () => {
+      document.getElementById('emailPreviewButton').textContent = emailButtonText.textContent;
+    });
+
+    // Update color
+    emailColor?.addEventListener('input', (e) => {
+      const color = e.target.value;
+      emailColorValue.textContent = color;
+
+      const header = document.getElementById('emailPreviewHeader');
+      header.style.background = `linear-gradient(135deg, ${color} 0%, ${adjustColor(color, -20)} 100%)`;
+
+      document.getElementById('emailPreviewButton').style.background = color;
+
+      document.querySelectorAll('swp-email-appointment-row i').forEach(icon => {
+        icon.style.color = color;
+      });
+
+      document.querySelector('swp-email-appointment-card').style.borderLeftColor = color;
+
+      // Update logo color
+      document.querySelector('swp-email-logo').style.color = color;
+    });
+
+    function adjustColor(hex, amount) {
+      const num = parseInt(hex.slice(1), 16);
+      const r = Math.max(0, Math.min(255, (num >> 16) + amount));
+      const g = Math.max(0, Math.min(255, ((num >> 8) & 0x00FF) + amount));
+      const b = Math.max(0, Math.min(255, (num & 0x0000FF) + amount));
+      return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1)}`;
+    }
+
+    // ==========================================
+    // INSERT VARIABLE (SMS)
+    // ==========================================
+    document.querySelectorAll('#messageDrawer swp-variable-tag').forEach(tag => {
+      tag.addEventListener('click', () => {
+        const varText = tag.dataset.var;
+        const editor = document.getElementById('messageEditor');
+
+        // Dismiss onboarding hint on first click
+        hideVariablesHint();
+
+        const selection = window.getSelection();
+        if (selection.rangeCount > 0) {
+          const range = selection.getRangeAt(0);
+          if (editor.contains(range.commonAncestorContainer)) {
+            range.deleteContents();
+            range.insertNode(document.createTextNode(varText));
+            range.collapse(false);
+            return;
+          }
+        }
+        editor.textContent += varText;
+      });
+
+      // Highlight preview on hover
+      tag.addEventListener('mouseenter', () => {
+        const varName = tag.dataset.var;
+        const preview = document.getElementById('messagePreview');
+        preview.querySelectorAll(`.highlight[data-var="${varName}"]`).forEach(span => {
+          span.classList.add('active');
+        });
+      });
+
+      tag.addEventListener('mouseleave', () => {
+        const preview = document.getElementById('messagePreview');
+        preview.querySelectorAll('.highlight.active').forEach(span => {
+          span.classList.remove('active');
+        });
+      });
+    });
+
+    // ==========================================
+    // HIGHLIGHT EMAIL PREVIEW ON HOVER
+    // ==========================================
+    document.querySelectorAll('#emailDrawer swp-variable-tag').forEach(tag => {
+      tag.addEventListener('mouseenter', () => {
+        const varName = tag.dataset.var;
+        const preview = document.querySelector('swp-email-preview');
+        preview.querySelectorAll(`.editable[data-var="${varName}"]`).forEach(span => {
+          span.classList.add('active');
+        });
+      });
+
+      tag.addEventListener('mouseleave', () => {
+        const preview = document.querySelector('swp-email-preview');
+        preview.querySelectorAll('.editable.active').forEach(span => {
+          span.classList.remove('active');
+        });
+      });
+    });
+
+    // ==========================================
+    // ONBOARDING HINT CLOSE
+    // ==========================================
+    document.querySelectorAll('swp-hint-close').forEach(closeBtn => {
+      closeBtn.addEventListener('click', () => {
+        hideVariablesHint();
+      });
+    });
+
+    // ==========================================
+    // ESCAPE KEY
+    // ==========================================
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') {
+        if (smsDrawer.classList.contains('open')) closeSmsDrawer();
+        if (emailDrawer.classList.contains('open')) closeEmailDrawer();
+      }
+    });
+
+    // ==========================================
+    // ONLINE PAYMENT TOGGLE
+    // ==========================================
+    const onlinePaymentToggle = document.getElementById('onlinePaymentToggle');
+    const onlinePaymentSettings = document.getElementById('onlinePaymentSettings');
+
+    function updateOnlinePaymentVisibility() {
+      if (onlinePaymentToggle && onlinePaymentSettings) {
+        const isEnabled = onlinePaymentToggle.dataset.value === 'yes';
+        onlinePaymentSettings.style.display = isEnabled ? 'block' : 'none';
+      }
+    }
+
+    if (onlinePaymentToggle) {
+      onlinePaymentToggle.querySelectorAll('swp-toggle-option').forEach((option, index) => {
+        option.addEventListener('click', () => {
+          onlinePaymentToggle.dataset.value = index === 0 ? 'yes' : 'no';
+          updateOnlinePaymentVisibility();
+        });
+      });
+
+      // Initial state
+      updateOnlinePaymentVisibility();
+    }
+
+    // ==========================================
+    // TRACKING TAB
+    // ==========================================
+
+    function initTrackingToggles() {
+      document.querySelectorAll('.tracking-card swp-toggle-slider').forEach(slider => {
+        slider.querySelectorAll('swp-toggle-option').forEach((option, index) => {
+          option.addEventListener('click', () => {
+            slider.dataset.value = index === 0 ? 'yes' : 'no';
+            const card = slider.closest('.tracking-card');
+
+            if (slider.dataset.value === 'no') {
+              card.classList.add('disabled');
+            } else {
+              card.classList.remove('disabled');
+            }
+
+            updateTrackingPreview();
+          });
+        });
+      });
+    }
+
+    function updateTrackingPreview() {
+      const preview = document.getElementById('trackingCodePreview');
+      if (!preview) return;
+
+      let code = '';
+
+      // Meta Pixel
+      const metaCard = document.querySelector('[data-tracker="meta"]');
+      if (metaCard && metaCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
+        const pixelId = document.getElementById('metaPixelId')?.textContent?.trim() || '';
+        if (pixelId) {
+          code += `<span class="comment">&lt;!-- Meta Pixel --&gt;</span>
+<span class="tag">&lt;script&gt;</span>
+  !function(f,b,e,v,n,t,s)
+  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
+  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
+  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
+  n.queue=[];t=b.createElement(e);t.async=!0;
+  t.src=v;s=b.getElementsByTagName(e)[0];
+  s.parentNode.insertBefore(t,s)}(window, document,'script',
+  'https://connect.facebook.net/en_US/fbevents.js');
+  fbq(<span class="string">'init'</span>, <span class="string">'${pixelId}'</span>);
+  fbq(<span class="string">'track'</span>, <span class="string">'PageView'</span>);
+<span class="tag">&lt;/script&gt;</span>
+
+`;
+        }
+      }
+
+      // Google Analytics
+      const ga4Card = document.querySelector('[data-tracker="ga4"]');
+      if (ga4Card && ga4Card.querySelector('swp-toggle-slider').dataset.value === 'yes') {
+        const measurementId = document.getElementById('ga4Id')?.textContent?.trim() || '';
+        if (measurementId) {
+          code += `<span class="comment">&lt;!-- Google Analytics (GA4) --&gt;</span>
+<span class="tag">&lt;script</span> <span class="attr">async</span> <span class="attr">src</span>=<span class="string">"https://www.googletagmanager.com/gtag/js?id=${measurementId}"</span><span class="tag">&gt;&lt;/script&gt;</span>
+<span class="tag">&lt;script&gt;</span>
+  window.dataLayer = window.dataLayer || [];
+  function gtag(){dataLayer.push(arguments);}
+  gtag(<span class="string">'js'</span>, new Date());
+  gtag(<span class="string">'config'</span>, <span class="string">'${measurementId}'</span>);
+<span class="tag">&lt;/script&gt;</span>
+
+`;
+        }
+      }
+
+      // Google Tag Manager
+      const gtmCard = document.querySelector('[data-tracker="gtm"]');
+      if (gtmCard && gtmCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
+        const containerId = document.getElementById('gtmId')?.textContent?.trim() || '';
+        if (containerId) {
+          code += `<span class="comment">&lt;!-- Google Tag Manager --&gt;</span>
+<span class="tag">&lt;script&gt;</span>
+  (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
+  new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
+  j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
+  'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
+  })(window,document,'script','dataLayer',<span class="string">'${containerId}'</span>);
+<span class="tag">&lt;/script&gt;</span>
+
+`;
+        }
+      }
+
+      // Plausible
+      const plausibleCard = document.querySelector('[data-tracker="plausible"]');
+      if (plausibleCard && plausibleCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
+        const domain = document.getElementById('plausibleDomain')?.textContent?.trim() || '';
+        if (domain) {
+          code += `<span class="comment">&lt;!-- Plausible Analytics --&gt;</span>
+<span class="tag">&lt;script</span> <span class="attr">defer</span> <span class="attr">data-domain</span>=<span class="string">"${domain}"</span> <span class="attr">src</span>=<span class="string">"https://plausible.io/js/script.js"</span><span class="tag">&gt;&lt;/script&gt;</span>
+
+`;
+        }
+      }
+
+      // Fathom
+      const fathomCard = document.querySelector('[data-tracker="fathom"]');
+      if (fathomCard && fathomCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
+        const siteId = document.getElementById('fathomSiteId')?.textContent?.trim() || '';
+        if (siteId) {
+          code += `<span class="comment">&lt;!-- Fathom Analytics --&gt;</span>
+<span class="tag">&lt;script</span> <span class="attr">src</span>=<span class="string">"https://cdn.usefathom.com/script.js"</span> <span class="attr">data-site</span>=<span class="string">"${siteId}"</span> <span class="attr">defer</span><span class="tag">&gt;&lt;/script&gt;</span>
+
+`;
+        }
+      }
+
+      // Matomo
+      const matomoCard = document.querySelector('[data-tracker="matomo"]');
+      if (matomoCard && matomoCard.querySelector('swp-toggle-slider').dataset.value === 'yes') {
+        const serverUrl = document.getElementById('matomoUrl')?.textContent?.trim() || '';
+        const siteId = document.getElementById('matomoSiteId')?.textContent?.trim() || '';
+        if (serverUrl && siteId) {
+          code += `<span class="comment">&lt;!-- Matomo Analytics --&gt;</span>
+<span class="tag">&lt;script&gt;</span>
+  var _paq = window._paq = window._paq || [];
+  _paq.push([<span class="string">'trackPageView'</span>]);
+  _paq.push([<span class="string">'enableLinkTracking'</span>]);
+  (function() {
+    var u=<span class="string">"${serverUrl}/"</span>;
+    _paq.push([<span class="string">'setTrackerUrl'</span>, u+<span class="string">'matomo.php'</span>]);
+    _paq.push([<span class="string">'setSiteId'</span>, <span class="string">'${siteId}'</span>]);
+    var d=document, g=d.createElement(<span class="string">'script'</span>), s=d.getElementsByTagName(<span class="string">'script'</span>)[0];
+    g.async=true; g.src=u+<span class="string">'matomo.js'</span>; s.parentNode.insertBefore(g,s);
+  })();
+<span class="tag">&lt;/script&gt;</span>
+
+`;
+        }
+      }
+
+      // Custom Head Scripts
+      const customHead = document.getElementById('customHeadScripts')?.value?.trim() || '';
+      if (customHead) {
+        code += `<span class="comment">&lt;!-- Custom Scripts --&gt;</span>
+${escapeHtml(customHead)}
+
+`;
+      }
+
+      if (code) {
+        preview.querySelector('code').innerHTML = code.trim();
+      } else {
+        preview.querySelector('code').innerHTML = '<span class="comment">&lt;!-- Ingen aktive tracking-koder --&gt;</span>';
+      }
+    }
+
+    function escapeHtml(text) {
+      return text
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;');
+    }
+
+    function copyTrackingCode() {
+      const preview = document.getElementById('trackingCodePreview');
+      if (!preview) return;
+
+      // Get plain text version (strip HTML tags)
+      const code = preview.querySelector('code').innerHTML
+        .replace(/<span[^>]*>/g, '')
+        .replace(/<\/span>/g, '')
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>')
+        .replace(/&amp;/g, '&');
+
+      navigator.clipboard.writeText(code).then(() => {
+        const btn = document.querySelector('.code-preview-card swp-btn');
+        const originalText = btn.innerHTML;
+        btn.innerHTML = '<i class="ph ph-check"></i> Kopieret!';
+        btn.style.color = 'var(--color-green)';
+        setTimeout(() => {
+          btn.innerHTML = originalText;
+          btn.style.color = '';
+        }, 2000);
+      });
+    }
+
+    // Initialize tracking preview on page load
+    document.addEventListener('DOMContentLoaded', () => {
+      // Initialize tracking toggles
+      initTrackingToggles();
+
+      // Update preview
+      updateTrackingPreview();
+
+      // Set initial disabled state for cards
+      document.querySelectorAll('.tracking-card[data-tracker]').forEach(card => {
+        const toggle = card.querySelector('swp-toggle-slider');
+        if (toggle && toggle.dataset.value === 'no') {
+          card.classList.add('disabled');
+        }
+      });
+    });
+  </script>
+
+</body>
+</html>
diff --git a/.workbench/POC/poc-kasseafstemning.html b/.workbench/POC/poc-kasseafstemning.html
new file mode 100644
index 0000000..4102c17
--- /dev/null
+++ b/.workbench/POC/poc-kasseafstemning.html
@@ -0,0 +1,995 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kasseafstemning - POC</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-back-link {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-back-link:hover {
+      color: var(--color-teal);
+    }
+
+    swp-page-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px;
+    }
+
+    @media (max-width: 900px) {
+      .grid-2 { grid-template-columns: 1fr; }
+    }
+
+    /* ==========================================
+       PAGE HEADER
+       ========================================== */
+    swp-page-header {
+      display: block;
+      margin-bottom: 24px;
+    }
+
+    swp-page-header h1 {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 6px;
+    }
+
+    swp-page-subtitle {
+      display: block;
+      font-size: 14px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       CARDS
+       ========================================== */
+    swp-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      margin-bottom: 20px;
+      overflow: hidden;
+    }
+
+    swp-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-card-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-card-hint {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-card-body {
+      display: block;
+      padding: 20px;
+    }
+
+    /* ==========================================
+       FORM ELEMENTS
+       ========================================== */
+    swp-form-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    swp-form-field {
+      display: block;
+    }
+
+    swp-form-field.full-width {
+      grid-column: 1 / -1;
+    }
+
+    swp-form-label {
+      display: block;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      margin-bottom: 6px;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+    }
+
+    swp-form-label .required {
+      color: var(--color-red);
+    }
+
+    swp-form-input input,
+    swp-form-input select {
+      width: 100%;
+      padding: 10px 12px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      transition: border-color 150ms ease;
+    }
+
+    swp-form-input input:focus,
+    swp-form-input select:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-auto-id {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 16px;
+      padding-top: 16px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    /* ==========================================
+       PERIOD DISPLAY
+       ========================================== */
+    swp-period-display {
+      display: block;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+    }
+
+    swp-period-label {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      margin-bottom: 8px;
+    }
+
+    swp-period-value {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-period-value .arrow {
+      color: var(--color-teal);
+      font-weight: 400;
+    }
+
+    swp-period-hint {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 8px;
+    }
+
+    /* ==========================================
+       DATA TABLE
+       ========================================== */
+    swp-data-table {
+      display: block;
+      width: 100%;
+    }
+
+    swp-data-header {
+      display: grid;
+      grid-template-columns: 1fr 100px 140px;
+      gap: 12px;
+      padding: 10px 0;
+      border-bottom: 2px solid var(--color-border);
+    }
+
+    swp-data-header span {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-data-header span:not(:first-child) {
+      text-align: right;
+    }
+
+    swp-data-row {
+      display: grid;
+      grid-template-columns: 1fr 100px 140px;
+      gap: 12px;
+      padding: 14px 0;
+      border-bottom: 1px solid var(--color-border);
+      align-items: center;
+    }
+
+    swp-data-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-data-label {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-data-system {
+      text-align: right;
+      font-family: var(--font-mono);
+      font-size: 14px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-data-input input {
+      width: 100%;
+      padding: 8px 10px;
+      font-size: 14px;
+      font-family: var(--font-mono);
+      text-align: right;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+    }
+
+    swp-data-input input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-data-input input::placeholder {
+      color: #bbb;
+      font-family: var(--font-family);
+      font-size: 12px;
+    }
+
+    swp-data-value {
+      text-align: right;
+      font-family: var(--font-mono);
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-data-value.muted {
+      color: var(--color-text-secondary);
+    }
+
+    swp-table-note {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 16px;
+      padding: 12px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+    }
+
+    /* ==========================================
+       CASH CALCULATION
+       ========================================== */
+    swp-calc-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 14px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-calc-row:last-of-type {
+      border-bottom: none;
+    }
+
+    swp-calc-row.input-row {
+      padding: 18px 0;
+      background: var(--color-background-alt);
+      margin: 16px -20px -20px -20px;
+      padding: 20px;
+      border-radius: 0 0 8px 8px;
+    }
+
+    swp-calc-label span {
+      display: block;
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-calc-label small {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    swp-calc-value {
+      font-family: var(--font-mono);
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-calc-value.muted {
+      color: var(--color-text-secondary);
+    }
+
+    swp-calc-input input {
+      width: 140px;
+      padding: 12px 14px;
+      font-size: 16px;
+      font-family: var(--font-mono);
+      text-align: right;
+      border: 2px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+    }
+
+    swp-calc-input input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    /* ==========================================
+       DIFFERENCE BOX
+       ========================================== */
+    swp-difference-box {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px;
+      border-radius: 8px;
+      background: var(--color-background-alt);
+      margin-top: 16px;
+    }
+
+    swp-difference-box.positive {
+      background: color-mix(in srgb, var(--color-green) 10%, white);
+    }
+
+    swp-difference-box.negative {
+      background: color-mix(in srgb, var(--color-red) 10%, white);
+    }
+
+    swp-difference-box.neutral {
+      background: color-mix(in srgb, var(--color-teal) 10%, white);
+    }
+
+    swp-difference-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-difference-label small {
+      display: block;
+      font-size: 12px;
+      font-weight: 400;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+    }
+
+    swp-difference-value {
+      font-size: 24px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+    }
+
+    swp-difference-box.positive swp-difference-value {
+      color: var(--color-green);
+    }
+
+    swp-difference-box.negative swp-difference-value {
+      color: var(--color-red);
+    }
+
+    swp-difference-box.neutral swp-difference-value {
+      color: var(--color-teal);
+    }
+
+    /* ==========================================
+       NOTE FIELD
+       ========================================== */
+    swp-note-field textarea {
+      width: 100%;
+      min-height: 80px;
+      padding: 12px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      resize: vertical;
+    }
+
+    swp-note-field textarea:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-note-hint {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 8px;
+    }
+
+    /* ==========================================
+       STATUS & APPROVAL
+       ========================================== */
+    swp-status-row {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+
+    swp-status-label {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-status-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      font-size: 12px;
+      font-weight: 500;
+      border-radius: 20px;
+    }
+
+    swp-status-badge.draft {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b45309;
+    }
+
+    swp-status-badge.approved {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+    }
+
+    swp-status-badge::before {
+      content: '';
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: currentColor;
+    }
+
+    swp-approval-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    swp-checkbox-field {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      margin-bottom: 20px;
+      grid-column: 1 / -1;
+    }
+
+    swp-checkbox-field input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      margin-top: 2px;
+      accent-color: var(--color-teal);
+      cursor: pointer;
+    }
+
+    swp-checkbox-field label {
+      font-size: 13px;
+      color: var(--color-text);
+      cursor: pointer;
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       ACTIONS
+       ========================================== */
+    swp-card-footer {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 20px;
+      background: var(--color-background-alt);
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-actions-right {
+      display: flex;
+      gap: 10px;
+    }
+
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-btn.ghost {
+      background: transparent;
+      border: none;
+      color: var(--color-text-secondary);
+    }
+
+    swp-btn.ghost:hover {
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      border: 1px solid var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-btn.primary:disabled {
+      background: #ccc;
+      border-color: #ccc;
+      cursor: not-allowed;
+    }
+
+    swp-system-note {
+      display: block;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      text-align: center;
+      padding: 12px;
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-back-link>
+        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+        Tilbage
+      </swp-back-link>
+      <swp-page-title>Kasseafstemning</swp-page-title>
+    </swp-topbar-left>
+    <swp-topbar-right>
+      <swp-status-badge class="draft" id="statusBadge">Kladde</swp-status-badge>
+    </swp-topbar-right>
+  </swp-topbar>
+
+  <swp-page-container>
+    <!-- Page Header -->
+    <swp-page-header>
+      <h1>Kasseafstemning</h1>
+      <swp-page-subtitle>Enkel dagsafslutning med fokus på kontanter. Kort afstemmes separat mod bank/indløser.</swp-page-subtitle>
+    </swp-page-header>
+
+    <div class="grid-2">
+      <!-- VENSTRE KOLONNE -->
+      <div>
+        <!-- Dagens tal -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Dagens tal</swp-card-title>
+            <swp-card-hint>Systemtal vs. kontrol</swp-card-hint>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-data-table>
+              <swp-data-header>
+                <span>Type</span>
+                <span>System</span>
+                <span>Kontrol</span>
+              </swp-data-header>
+
+              <swp-data-row>
+                <swp-data-label>Kortbetalinger</swp-data-label>
+                <swp-data-system>12.875,50</swp-data-system>
+                <swp-data-input>
+                  <input type="text" placeholder="Valgfrit" />
+                </swp-data-input>
+              </swp-data-row>
+
+              <swp-data-row>
+                <swp-data-label>MobilePay / Online</swp-data-label>
+                <swp-data-system>2.450,00</swp-data-system>
+                <swp-data-input>
+                  <input type="text" placeholder="Valgfrit" />
+                </swp-data-input>
+              </swp-data-row>
+
+              <swp-data-row>
+                <swp-data-label>Kontantsalg</swp-data-label>
+                <swp-data-system>3.540,00</swp-data-system>
+                <swp-data-value class="muted">..</swp-data-value>
+              </swp-data-row>
+            </swp-data-table>
+
+            <swp-table-note>Kort og MobilePay afstemmes mod bank/indløser. Kontanter tælles op nedenfor.</swp-table-note>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Kontanter i kassen -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Kontanter i kassen</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-calc-row>
+              <swp-calc-label>
+                <span>Startbeholdning</span>
+                <small>Overført fra sidste afstemning</small>
+              </swp-calc-label>
+              <swp-calc-value class="muted">2.000,00</swp-calc-value>
+            </swp-calc-row>
+
+            <swp-calc-row>
+              <swp-calc-label>
+                <span>Udbetalinger / Bilag</span>
+                <small>Sammentæl bilag betalt kontant</small>
+              </swp-calc-label>
+              <swp-calc-input>
+                <input type="text" id="payouts" placeholder="0,00" />
+              </swp-calc-input>
+            </swp-calc-row>
+
+            <swp-calc-row>
+              <swp-calc-label>
+                <span>Udtaget til bank</span>
+                <small>Kontanter lagt til side</small>
+              </swp-calc-label>
+              <swp-calc-input>
+                <input type="text" id="toBank" placeholder="0,00" />
+              </swp-calc-input>
+            </swp-calc-row>
+
+            <swp-calc-row>
+              <swp-calc-label>
+                <span>Forventet kontantbeholdning</span>
+              </swp-calc-label>
+              <swp-calc-value id="expectedCash">5.220,00</swp-calc-value>
+            </swp-calc-row>
+
+            <swp-calc-row class="input-row">
+              <swp-calc-label>
+                <span>Optalt kontantbeholdning <span style="color: var(--color-red)">*</span></span>
+                <small>Hvad ligger der faktisk i kassen?</small>
+              </swp-calc-label>
+              <swp-calc-input>
+                <input type="text" id="actualCash" placeholder="0,00" />
+              </swp-calc-input>
+            </swp-calc-row>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Difference -->
+        <swp-difference-box id="differenceBox" class="neutral">
+          <swp-difference-label>
+            Kontant difference
+            <small>Optalt minus forventet</small>
+          </swp-difference-label>
+          <swp-difference-value id="differenceValue">– kr</swp-difference-value>
+        </swp-difference-box>
+      </div>
+
+      <!-- HØJRE KOLONNE -->
+      <div>
+        <!-- Dagsoplysninger -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Dagsoplysninger</swp-card-title>
+            <swp-card-hint>Identificér afstemningen</swp-card-hint>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-period-display>
+              <swp-period-label>Periode</swp-period-label>
+              <swp-period-value>
+                <span class="from">28. dec 2025 kl. 18:00</span>
+                <span class="arrow">→</span>
+                <span class="to">29. dec 2025</span>
+              </swp-period-value>
+            </swp-period-display>
+
+            <swp-form-grid style="margin-top: 20px;">
+              <swp-form-field>
+                <swp-form-label>Kassepunkt</swp-form-label>
+                <swp-form-input>
+                  <select id="register">
+                    <option>Kasse 1 – Reception</option>
+                    <option>Kasse 2 – Salon</option>
+                  </select>
+                </swp-form-input>
+              </swp-form-field>
+
+              <swp-form-field>
+                <swp-form-label>Afsluttet af</swp-form-label>
+                <swp-form-input>
+                  <select id="employee">
+                    <option>Anna Jensen</option>
+                    <option>Karina Knudsen</option>
+                    <option>Martin Nielsen</option>
+                  </select>
+                </swp-form-input>
+              </swp-form-field>
+            </swp-form-grid>
+
+            <swp-auto-id>Afstemnings-ID: <strong>KA-2025-12-29</strong> · Z-043</swp-auto-id>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Note -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Note til difference</swp-card-title>
+            <swp-card-hint>Valgfrit</swp-card-hint>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-note-field>
+              <textarea placeholder="Fx kassedifference, fejlslag, runding osv."></textarea>
+            </swp-note-field>
+            <swp-note-hint>Kan gøres obligatorisk ved difference over 100 kr.</swp-note-hint>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Godkendelse -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Afslut dagen</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-approval-grid>
+              <swp-form-field>
+                <swp-form-label>Status</swp-form-label>
+                <swp-status-row>
+                  <swp-status-badge class="draft">Kladde</swp-status-badge>
+                </swp-status-row>
+              </swp-form-field>
+
+              <swp-form-field>
+                <swp-form-label>Godkendt af (valgfrit)</swp-form-label>
+                <swp-form-input>
+                  <select id="approver">
+                    <option value="">Vælg...</option>
+                    <option>Karina Knudsen</option>
+                    <option>Butikschef</option>
+                  </select>
+                </swp-form-input>
+              </swp-form-field>
+
+              <swp-checkbox-field>
+                <input type="checkbox" id="confirmCheckbox" />
+                <label for="confirmCheckbox">Jeg bekræfter, at kassen er talt op, og at tallene er indtastet efter bedste evne.</label>
+              </swp-checkbox-field>
+            </swp-approval-grid>
+          </swp-card-body>
+          <swp-card-footer>
+            <swp-btn class="secondary">Gem som kladde</swp-btn>
+            <swp-actions-right>
+              <swp-btn class="ghost">Fortryd</swp-btn>
+              <swp-btn class="primary" id="approveBtn" disabled>Godkend & lås</swp-btn>
+            </swp-actions-right>
+          </swp-card-footer>
+        </swp-card>
+      </div>
+    </div>
+
+    <swp-system-note>Systemet gemmer hvornår og af hvem der er godkendt – enkelt kontrolspor.</swp-system-note>
+  </swp-page-container>
+
+  <script>
+    // Base values (from system)
+    const startBalance = 2000;
+    const cashSales = 3540;
+
+    // Format number as Danish currency
+    function formatNumber(num) {
+      return num.toLocaleString('da-DK', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
+    }
+
+    // Parse Danish number format
+    function parseNumber(str) {
+      if (!str) return 0;
+      return parseFloat(str.replace(/\./g, '').replace(',', '.')) || 0;
+    }
+
+    // Calculate expected cash and difference
+    function calculate() {
+      const payoutsInput = document.getElementById('payouts');
+      const toBankInput = document.getElementById('toBank');
+      const actualInput = document.getElementById('actualCash');
+
+      const payouts = parseNumber(payoutsInput.value);
+      const toBank = parseNumber(toBankInput.value);
+      const actual = parseNumber(actualInput.value);
+
+      // Forventet = start + salg - udbetalinger - til bank
+      const expectedCash = startBalance + cashSales - payouts - toBank;
+      document.getElementById('expectedCash').textContent = formatNumber(expectedCash);
+
+      // Difference
+      const box = document.getElementById('differenceBox');
+      const value = document.getElementById('differenceValue');
+      const diff = actual - expectedCash;
+
+      box.classList.remove('positive', 'negative', 'neutral');
+
+      if (actual === 0 && actualInput.value === '') {
+        value.textContent = '– kr';
+        box.classList.add('neutral');
+      } else if (diff > 0) {
+        value.textContent = '+' + formatNumber(diff) + ' kr';
+        box.classList.add('positive');
+      } else if (diff < 0) {
+        value.textContent = formatNumber(diff) + ' kr';
+        box.classList.add('negative');
+      } else {
+        value.textContent = '0,00 kr';
+        box.classList.add('neutral');
+      }
+    }
+
+    document.getElementById('payouts').addEventListener('input', calculate);
+    document.getElementById('toBank').addEventListener('input', calculate);
+    document.getElementById('actualCash').addEventListener('input', calculate);
+
+    // Enable approve button when checkbox is checked
+    const checkbox = document.getElementById('confirmCheckbox');
+    const approveBtn = document.getElementById('approveBtn');
+
+    checkbox.addEventListener('change', () => {
+      approveBtn.disabled = !checkbox.checked;
+    });
+
+    // Initial display
+    calculate();
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-kasseafstemninger.html b/.workbench/POC/poc-kasseafstemninger.html
new file mode 100644
index 0000000..ba504c7
--- /dev/null
+++ b/.workbench/POC/poc-kasseafstemninger.html
@@ -0,0 +1,798 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Kasseafstemninger - POC</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-back-link {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-back-link:hover {
+      color: var(--color-teal);
+    }
+
+    swp-back-link svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-page-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    /* ==========================================
+       FILTER BAR
+       ========================================== */
+    swp-filter-bar {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px 20px;
+      background: var(--color-surface);
+      border-radius: 8px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    swp-filter-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-filter-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+    }
+
+    swp-filter-bar input,
+    swp-filter-bar select {
+      padding: 8px 12px;
+      font-size: 13px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+    }
+
+    swp-filter-bar input:focus,
+    swp-filter-bar select:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-filter-spacer {
+      flex: 1;
+    }
+
+    /* ==========================================
+       STATS BAR
+       ========================================== */
+    swp-stats-bar {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    swp-stat-card {
+      background: var(--color-surface);
+      border-radius: 8px;
+      padding: 16px 20px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-stat-value {
+      display: block;
+      font-size: 24px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-stat-label {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+    }
+
+    swp-stat-card.highlight swp-stat-value {
+      color: var(--color-teal);
+    }
+
+    swp-stat-card.warning swp-stat-value {
+      color: var(--color-amber);
+    }
+
+    swp-stat-card.negative swp-stat-value {
+      color: var(--color-red);
+    }
+
+    /* ==========================================
+       ACTION BAR
+       ========================================== */
+    swp-action-bar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 16px;
+      background: var(--color-surface);
+      border-radius: 8px 8px 0 0;
+      border: 1px solid var(--color-border);
+      border-bottom: none;
+    }
+
+    swp-selection-info {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-btn:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+    }
+
+    /* ==========================================
+       TABLE
+       ========================================== */
+    swp-table {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 0 0 8px 8px;
+      overflow: hidden;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-th.checkbox,
+    swp-td.checkbox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    swp-table input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+      accent-color: var(--color-teal);
+      cursor: pointer;
+    }
+
+    swp-table-header,
+    swp-table-row {
+      display: grid;
+      grid-template-columns: 40px 70px 60px minmax(140px, 1fr) 90px 100px 100px 90px 100px 40px;
+      align-items: center;
+    }
+
+    swp-table-header {
+      background: var(--color-background-alt);
+      border-bottom: 1px solid var(--color-border);
+      padding: 12px 20px;
+    }
+
+    swp-th {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-th.right {
+      text-align: right;
+    }
+
+    swp-table-body {
+      display: block;
+    }
+
+    swp-table-row {
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+      transition: background 150ms ease;
+      cursor: pointer;
+    }
+
+    swp-table-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-table-row:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-td {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-td.right {
+      text-align: right;
+    }
+
+    swp-td.mono {
+      font-family: var(--font-mono);
+    }
+
+    swp-td.muted {
+      color: var(--color-text-secondary);
+      font-size: 12px;
+    }
+
+    swp-td.negative {
+      color: var(--color-red);
+    }
+
+    swp-td.positive {
+      color: var(--color-green);
+    }
+
+    swp-period-cell {
+      display: block;
+    }
+
+    swp-period-cell .dates {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       STATUS BADGE
+       ========================================== */
+    swp-status-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 20px;
+    }
+
+    swp-status-badge.approved {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+    }
+
+    swp-status-badge.draft {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b45309;
+    }
+
+    swp-status-badge::before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: currentColor;
+    }
+
+    swp-td:nth-child(9) {
+      padding-left: 12px;
+    }
+
+    swp-td.id {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      font-family: var(--font-mono);
+    }
+
+    /* ==========================================
+       TABLE FOOTER
+       ========================================== */
+    swp-table-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 20px;
+      background: var(--color-background-alt);
+      border-top: 1px solid var(--color-border);
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       BUTTONS
+       ========================================== */
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-row-arrow {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+      color: var(--color-text-secondary);
+    }
+
+    swp-row-arrow svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    /* ==========================================
+       RESPONSIVE
+       ========================================== */
+    @media (max-width: 1000px) {
+      swp-stats-bar {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      swp-table-header,
+      swp-table-row {
+        grid-template-columns: 80px 1fr 100px 100px 80px 50px;
+      }
+
+      swp-th:nth-child(3),
+      swp-td:nth-child(3),
+      swp-th:nth-child(4),
+      swp-td:nth-child(4) {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-back-link>
+        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+        Tilbage
+      </swp-back-link>
+      <swp-page-title>Kasseafstemninger</swp-page-title>
+    </swp-topbar-left>
+    <swp-topbar-right>
+    </swp-topbar-right>
+  </swp-topbar>
+
+  <swp-page-container>
+    <!-- Filter Bar -->
+    <swp-filter-bar>
+      <swp-filter-group>
+        <swp-filter-label>Fra</swp-filter-label>
+        <input type="date" id="dateFrom" />
+      </swp-filter-group>
+      <swp-filter-group>
+        <swp-filter-label>Til</swp-filter-label>
+        <input type="date" id="dateTo" />
+      </swp-filter-group>
+      <swp-filter-group>
+        <swp-filter-label>Kassepunkt</swp-filter-label>
+        <select id="register">
+          <option>Alle</option>
+          <option>Kasse 1 – Reception</option>
+          <option>Kasse 2 – Salon</option>
+        </select>
+      </swp-filter-group>
+      <swp-filter-group>
+        <swp-filter-label>Status</swp-filter-label>
+        <select id="status">
+          <option>Alle</option>
+          <option>Godkendt</option>
+          <option>Kladde</option>
+        </select>
+      </swp-filter-group>
+      <swp-filter-spacer></swp-filter-spacer>
+      <swp-btn class="secondary">Nulstil</swp-btn>
+    </swp-filter-bar>
+
+    <!-- Stats Bar -->
+    <swp-stats-bar>
+      <swp-stat-card>
+        <swp-stat-value>12</swp-stat-value>
+        <swp-stat-label>Afstemninger i periode</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card class="highlight">
+        <swp-stat-value>186.450 kr</swp-stat-value>
+        <swp-stat-label>Total omsætning</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>42.340 kr</swp-stat-value>
+        <swp-stat-label>Kontantsalg</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card class="warning">
+        <swp-stat-value>-75 kr</swp-stat-value>
+        <swp-stat-label>Samlet difference</swp-stat-label>
+      </swp-stat-card>
+    </swp-stats-bar>
+
+    <!-- Action Bar -->
+    <swp-action-bar>
+      <swp-selection-info>
+        <span id="selectionCount">0 valgt</span>
+      </swp-selection-info>
+      <swp-btn class="primary" id="exportBtn" disabled>
+        <svg viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+        Eksporter SAF-T
+      </swp-btn>
+    </swp-action-bar>
+
+    <!-- Table -->
+    <swp-table>
+      <swp-table-header>
+        <swp-th class="checkbox"><input type="checkbox" id="selectAll" /></swp-th>
+        <swp-th>Dato</swp-th>
+        <swp-th>ID</swp-th>
+        <swp-th>Periode</swp-th>
+        <swp-th>Kassepunkt</swp-th>
+        <swp-th>Afsluttet af</swp-th>
+        <swp-th class="right">Omsætning</swp-th>
+        <swp-th class="right">Difference</swp-th>
+        <swp-th>Status</swp-th>
+        <swp-th></swp-th>
+      </swp-table-header>
+      <swp-table-body>
+        <swp-table-row data-id="draft" class="draft-row">
+          <swp-td class="checkbox"></swp-td>
+          <swp-td class="muted">I dag</swp-td>
+          <swp-td class="id muted">–</swp-td>
+          <swp-td>
+            <swp-period-cell>
+              <span class="dates">29. dec 17:45 → ...</span>
+            </swp-period-cell>
+          </swp-td>
+          <swp-td>Kasse 1</swp-td>
+          <swp-td class="muted">–</swp-td>
+          <swp-td class="right mono muted">4.250 kr</swp-td>
+          <swp-td class="right mono muted">–</swp-td>
+          <swp-td><swp-status-badge class="draft">Kladde</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="043">
+          <swp-td class="checkbox"><input type="checkbox" class="row-select" /></swp-td>
+          <swp-td>29. dec</swp-td>
+          <swp-td class="id">Z-043</swp-td>
+          <swp-td>
+            <swp-period-cell>
+              <span class="dates">28. dec 18:00 → 29. dec 17:45</span>
+            </swp-period-cell>
+          </swp-td>
+          <swp-td>Kasse 1</swp-td>
+          <swp-td>Anna Jensen</swp-td>
+          <swp-td class="right mono">18.865 kr</swp-td>
+          <swp-td class="right mono">0 kr</swp-td>
+          <swp-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="042">
+          <swp-td class="checkbox"><input type="checkbox" class="row-select" /></swp-td>
+          <swp-td>28. dec</swp-td>
+          <swp-td class="id">Z-042</swp-td>
+          <swp-td>
+            <swp-period-cell>
+              <span class="dates">27. dec 18:30 → 28. dec 18:00</span>
+            </swp-period-cell>
+          </swp-td>
+          <swp-td>Kasse 1</swp-td>
+          <swp-td>Karina Knudsen</swp-td>
+          <swp-td class="right mono">12.450 kr</swp-td>
+          <swp-td class="right mono negative">-25 kr</swp-td>
+          <swp-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="041">
+          <swp-td class="checkbox"><input type="checkbox" class="row-select" /></swp-td>
+          <swp-td>27. dec</swp-td>
+          <swp-td class="id">Z-041</swp-td>
+          <swp-td>
+            <swp-period-cell>
+              <span class="dates">26. dec 18:00 → 27. dec 18:30</span>
+            </swp-period-cell>
+          </swp-td>
+          <swp-td>Kasse 1</swp-td>
+          <swp-td>Martin Nielsen</swp-td>
+          <swp-td class="right mono">21.340 kr</swp-td>
+          <swp-td class="right mono">0 kr</swp-td>
+          <swp-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="040">
+          <swp-td class="checkbox"><input type="checkbox" class="row-select" /></swp-td>
+          <swp-td>23. dec</swp-td>
+          <swp-td class="id">Z-040</swp-td>
+          <swp-td>
+            <swp-period-cell>
+              <span class="dates">22. dec 18:00 → 23. dec 17:30</span>
+            </swp-period-cell>
+          </swp-td>
+          <swp-td>Kasse 1</swp-td>
+          <swp-td>Anna Jensen</swp-td>
+          <swp-td class="right mono">28.750 kr</swp-td>
+          <swp-td class="right mono negative">-50 kr</swp-td>
+          <swp-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="039">
+          <swp-td class="checkbox"><input type="checkbox" class="row-select" /></swp-td>
+          <swp-td>22. dec</swp-td>
+          <swp-td class="id">Z-039</swp-td>
+          <swp-td>
+            <swp-period-cell>
+              <span class="dates">21. dec 18:15 → 22. dec 18:00</span>
+            </swp-period-cell>
+          </swp-td>
+          <swp-td>Kasse 1</swp-td>
+          <swp-td>Karina Knudsen</swp-td>
+          <swp-td class="right mono">15.890 kr</swp-td>
+          <swp-td class="right mono">0 kr</swp-td>
+          <swp-td><swp-status-badge class="approved">Godkendt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+      </swp-table-body>
+      <swp-table-footer>
+        <span>Viser 6 afstemninger</span>
+        <span>Z-038 → Z-043</span>
+      </swp-table-footer>
+    </swp-table>
+  </swp-page-container>
+
+  <script>
+    // Set default date range (last 30 days)
+    const today = new Date();
+    const thirtyDaysAgo = new Date(today);
+    thirtyDaysAgo.setDate(today.getDate() - 30);
+
+    document.getElementById('dateTo').value = today.toISOString().split('T')[0];
+    document.getElementById('dateFrom').value = thirtyDaysAgo.toISOString().split('T')[0];
+
+    // Checkbox selection handling
+    const selectAll = document.getElementById('selectAll');
+    const rowCheckboxes = document.querySelectorAll('.row-select');
+    const exportBtn = document.getElementById('exportBtn');
+    const selectionCount = document.getElementById('selectionCount');
+
+    function updateSelection() {
+      const checked = document.querySelectorAll('.row-select:checked');
+      const count = checked.length;
+      selectionCount.textContent = count === 0 ? '0 valgt' : `${count} valgt`;
+      exportBtn.disabled = count === 0;
+
+      // Update select all state
+      selectAll.checked = count === rowCheckboxes.length && count > 0;
+      selectAll.indeterminate = count > 0 && count < rowCheckboxes.length;
+    }
+
+    selectAll.addEventListener('change', function() {
+      rowCheckboxes.forEach(cb => cb.checked = this.checked);
+      updateSelection();
+    });
+
+    rowCheckboxes.forEach(cb => {
+      cb.addEventListener('change', updateSelection);
+      // Stop click from bubbling to row
+      cb.addEventListener('click', e => e.stopPropagation());
+    });
+
+    // SAF-T Export
+    document.getElementById('exportBtn').addEventListener('click', function() {
+      const selected = document.querySelectorAll('.row-select:checked');
+      const ids = Array.from(selected).map(cb => cb.closest('swp-table-row').dataset.id);
+      // Generate demo SAF-T XML
+      const xml = `<?xml version="1.0" encoding="UTF-8"?>
+<AuditFile xmlns="urn:StandardAuditFile-Taxation-CashRegister:DK">
+  <Header>
+    <AuditFileVersion>1.30</AuditFileVersion>
+    <AuditFileCountry>DK</AuditFileCountry>
+    <AuditFileDateCreated>${today.toISOString().split('T')[0]}</AuditFileDateCreated>
+    <SoftwareCompanyName>Calendar Plantempus</SoftwareCompanyName>
+    <SoftwareID>SWP-POS</SoftwareID>
+    <SoftwareVersion>1.0</SoftwareVersion>
+    <Company>
+      <Name>Demo Salon ApS</Name>
+      <RegistrationNumber>12345678</RegistrationNumber>
+    </Company>
+    <DefaultCurrencyCode>DKK</DefaultCurrencyCode>
+    <SelectionCriteria>
+      <SelectionStartDate>${document.getElementById('dateFrom').value}</SelectionStartDate>
+      <SelectionEndDate>${document.getElementById('dateTo').value}</SelectionEndDate>
+    </SelectionCriteria>
+  </Header>
+  <CashRegisters>
+    <CashRegister>
+      <CashRegisterID>KASSE-001</CashRegisterID>
+      <CashRegisterLocation>Reception</CashRegisterLocation>
+      <Periods>
+        <Period>
+          <PeriodNumber>043</PeriodNumber>
+          <StartDateTime>2025-12-28T18:00:00</StartDateTime>
+          <EndDateTime>2025-12-29T17:45:00</EndDateTime>
+          <CashStatement>
+            <OpeningBalance>2000.00</OpeningBalance>
+            <ClosingBalance>5220.00</ClosingBalance>
+            <CashSales>3540.00</CashSales>
+            <CardSales>12875.50</CardSales>
+            <MobilePaySales>2450.00</MobilePaySales>
+            <TotalSales>18865.50</TotalSales>
+            <NumberOfTransactions>47</NumberOfTransactions>
+            <CashDifference>0.00</CashDifference>
+          </CashStatement>
+          <TaxSummary>
+            <TaxCode>S</TaxCode>
+            <TaxPercentage>25.00</TaxPercentage>
+            <TaxBase>15092.40</TaxBase>
+            <TaxAmount>3773.10</TaxAmount>
+          </TaxSummary>
+        </Period>
+      </Periods>
+    </CashRegister>
+  </CashRegisters>
+</AuditFile>`;
+
+      // Download file
+      const blob = new Blob([xml], { type: 'application/xml' });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement('a');
+      a.href = url;
+      a.download = `SAF-T_CashRegister_${document.getElementById('dateFrom').value}_${document.getElementById('dateTo').value}.xml`;
+      document.body.appendChild(a);
+      a.click();
+      document.body.removeChild(a);
+      URL.revokeObjectURL(url);
+    });
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-konto.html b/.workbench/POC/poc-konto.html
new file mode 100644
index 0000000..9ef596a
--- /dev/null
+++ b/.workbench/POC/poc-konto.html
@@ -0,0 +1,433 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Abonnement & Konto - Salon OS</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />
+  <link rel="stylesheet" href="css/konto.css">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* Dark mode - system preference */
+    @media (prefers-color-scheme: dark) {
+      :root:not(.light-mode) {
+        --color-surface: #1e1e1e;
+        --color-background: #121212;
+        --color-background-hover: #2a2a2a;
+        --color-background-alt: #1a1a1a;
+        --color-border: #333;
+        --color-text: #e0e0e0;
+        --color-text-secondary: #999;
+        --color-teal: #26a69a;
+        --color-blue: #42a5f5;
+        --color-red: #ef5350;
+        --color-amber: #ffb74d;
+        --color-purple: #a78bfa;
+        --color-green: #66bb6a;
+      }
+    }
+
+    /* Manual dark mode override */
+    :root.dark-mode {
+      --color-surface: #1e1e1e;
+      --color-background: #121212;
+      --color-background-hover: #2a2a2a;
+      --color-background-alt: #1a1a1a;
+      --color-border: #333;
+      --color-text: #e0e0e0;
+      --color-text-secondary: #999;
+      --color-teal: #26a69a;
+      --color-blue: #42a5f5;
+      --color-red: #ef5350;
+      --color-amber: #ffb74d;
+      --color-purple: #a78bfa;
+      --color-green: #66bb6a;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+  </style>
+</head>
+<body>
+
+<swp-page-container>
+
+  <!-- Page Header -->
+  <swp-page-header>
+    <swp-page-title>
+      <h1>Abonnement & Konto</h1>
+      <p>Administrer dit abonnement og betalingsinfo</p>
+    </swp-page-title>
+  </swp-page-header>
+
+  <!-- ==========================================
+       SUBSCRIPTION SECTION
+       ========================================== -->
+  <swp-section>
+    <swp-section-header>
+      <swp-section-title>
+        <i class="ph ph-crown"></i>
+        Dit abonnement
+      </swp-section-title>
+    </swp-section-header>
+
+    <swp-plan-grid>
+      <!-- Basis Plan -->
+      <swp-plan-card>
+        <swp-plan-name>Basis</swp-plan-name>
+        <swp-plan-users>1-3 brugere</swp-plan-users>
+        <swp-plan-price>
+          <swp-plan-price-amount>299</swp-plan-price-amount>
+          <swp-plan-price-period>kr/md</swp-plan-price-period>
+        </swp-plan-price>
+        <swp-plan-features>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Op til 3 brugere
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Online booking
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Kalender & aftalestyring
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Kundekartotek
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            SMS-påmindelser
+          </swp-plan-feature>
+        </swp-plan-features>
+        <swp-plan-action>
+          <swp-btn class="secondary">Skift til Basis</swp-btn>
+        </swp-plan-action>
+      </swp-plan-card>
+
+      <!-- Pro Plan (Current) -->
+      <swp-plan-card class="current">
+        <swp-plan-badge class="current">
+          <i class="ph ph-check"></i>
+          Nuværende plan
+        </swp-plan-badge>
+        <swp-plan-name>Pro</swp-plan-name>
+        <swp-plan-users>4-8 brugere</swp-plan-users>
+        <swp-plan-price>
+          <swp-plan-price-amount>599</swp-plan-price-amount>
+          <swp-plan-price-period>kr/md</swp-plan-price-period>
+        </swp-plan-price>
+        <swp-plan-features>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Op til 8 brugere
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Alt fra Basis
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Lagerstyring
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Avancerede rapporter
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Gavekort & klippekort
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Prioriteret support
+          </swp-plan-feature>
+        </swp-plan-features>
+        <swp-plan-action>
+          <swp-btn class="secondary">Nuværende plan</swp-btn>
+        </swp-plan-action>
+      </swp-plan-card>
+
+      <!-- Enterprise Plan -->
+      <swp-plan-card class="enterprise">
+        <swp-plan-badge class="popular">
+          <i class="ph ph-star"></i>
+          Til større saloner
+        </swp-plan-badge>
+        <swp-plan-name>Enterprise</swp-plan-name>
+        <swp-plan-users>8+ brugere</swp-plan-users>
+        <swp-plan-price>
+          <swp-plan-price-amount>Kontakt os</swp-plan-price-amount>
+        </swp-plan-price>
+        <swp-plan-features>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Ubegrænset antal brugere
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Alt fra Pro
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Flere lokationer
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Tilpasset integration
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            Dedikeret kontaktperson
+          </swp-plan-feature>
+          <swp-plan-feature>
+            <i class="ph ph-check-circle"></i>
+            SLA & uptime garanti
+          </swp-plan-feature>
+        </swp-plan-features>
+        <swp-plan-action>
+          <swp-btn class="outline">Kontakt salg</swp-btn>
+        </swp-plan-action>
+      </swp-plan-card>
+    </swp-plan-grid>
+  </swp-section>
+
+  <!-- ==========================================
+       BILLING SECTION
+       ========================================== -->
+  <swp-section>
+    <swp-section-header>
+      <swp-section-title>
+        <i class="ph ph-credit-card"></i>
+        Betaling & Fakturaer
+      </swp-section-title>
+    </swp-section-header>
+
+    <swp-billing-grid>
+      <!-- Payment Info -->
+      <swp-payment-card>
+        <swp-payment-method>
+          <swp-payment-icon>
+            <i class="ph ph-credit-card"></i>
+          </swp-payment-icon>
+          <swp-payment-info>
+            <swp-payment-type>Visa</swp-payment-type>
+            <swp-payment-number>**** **** **** 4582</swp-payment-number>
+          </swp-payment-info>
+          <swp-btn class="secondary" style="padding: 8px 12px; font-size: 12px;">
+            <i class="ph ph-pencil"></i>
+            Skift
+          </swp-btn>
+        </swp-payment-method>
+
+        <swp-payment-detail>
+          <swp-payment-label>Betalingsfrekvens</swp-payment-label>
+          <swp-payment-value>Månedlig</swp-payment-value>
+        </swp-payment-detail>
+
+        <swp-payment-detail>
+          <swp-payment-label>Næste betaling</swp-payment-label>
+          <swp-payment-value class="highlight">1. januar 2026</swp-payment-value>
+        </swp-payment-detail>
+
+        <swp-payment-detail>
+          <swp-payment-label>Beløb</swp-payment-label>
+          <swp-payment-value>599,00 kr</swp-payment-value>
+        </swp-payment-detail>
+
+        <swp-payment-detail>
+          <swp-payment-label>Kortudløb</swp-payment-label>
+          <swp-payment-value>08/2027</swp-payment-value>
+        </swp-payment-detail>
+
+        <swp-btn class="outline" style="margin-top: 8px;">
+          <i class="ph ph-arrows-clockwise"></i>
+          Skift til årlig betaling (spar 15%)
+        </swp-btn>
+      </swp-payment-card>
+
+      <!-- Invoices -->
+      <swp-invoices-card>
+        <swp-invoices-header>
+          <swp-invoices-title>Faktura-historik</swp-invoices-title>
+        </swp-invoices-header>
+
+        <swp-table>
+          <swp-table-header>
+            <swp-table-row>
+              <swp-table-cell>Dato</swp-table-cell>
+              <swp-table-cell>Fakturanr.</swp-table-cell>
+              <swp-table-cell>Beløb</swp-table-cell>
+              <swp-table-cell>Status</swp-table-cell>
+              <swp-table-cell></swp-table-cell>
+            </swp-table-row>
+          </swp-table-header>
+          <swp-table-body>
+            <swp-table-row>
+              <swp-table-cell>1. dec 2025</swp-table-cell>
+              <swp-table-cell style="font-family: var(--font-mono); font-size: 12px;">INV-2025-0012</swp-table-cell>
+              <swp-table-cell>599,00 kr</swp-table-cell>
+              <swp-table-cell>
+                <swp-invoice-status class="paid">
+                  <i class="ph ph-check-circle"></i>
+                  Betalt
+                </swp-invoice-status>
+              </swp-table-cell>
+              <swp-table-cell>
+                <swp-download-btn>
+                  <i class="ph ph-download"></i>
+                  PDF
+                </swp-download-btn>
+              </swp-table-cell>
+            </swp-table-row>
+
+            <swp-table-row>
+              <swp-table-cell>1. nov 2025</swp-table-cell>
+              <swp-table-cell style="font-family: var(--font-mono); font-size: 12px;">INV-2025-0011</swp-table-cell>
+              <swp-table-cell>599,00 kr</swp-table-cell>
+              <swp-table-cell>
+                <swp-invoice-status class="paid">
+                  <i class="ph ph-check-circle"></i>
+                  Betalt
+                </swp-invoice-status>
+              </swp-table-cell>
+              <swp-table-cell>
+                <swp-download-btn>
+                  <i class="ph ph-download"></i>
+                  PDF
+                </swp-download-btn>
+              </swp-table-cell>
+            </swp-table-row>
+
+            <swp-table-row>
+              <swp-table-cell>1. okt 2025</swp-table-cell>
+              <swp-table-cell style="font-family: var(--font-mono); font-size: 12px;">INV-2025-0010</swp-table-cell>
+              <swp-table-cell>599,00 kr</swp-table-cell>
+              <swp-table-cell>
+                <swp-invoice-status class="paid">
+                  <i class="ph ph-check-circle"></i>
+                  Betalt
+                </swp-invoice-status>
+              </swp-table-cell>
+              <swp-table-cell>
+                <swp-download-btn>
+                  <i class="ph ph-download"></i>
+                  PDF
+                </swp-download-btn>
+              </swp-table-cell>
+            </swp-table-row>
+
+            <swp-table-row>
+              <swp-table-cell>1. sep 2025</swp-table-cell>
+              <swp-table-cell style="font-family: var(--font-mono); font-size: 12px;">INV-2025-0009</swp-table-cell>
+              <swp-table-cell>599,00 kr</swp-table-cell>
+              <swp-table-cell>
+                <swp-invoice-status class="paid">
+                  <i class="ph ph-check-circle"></i>
+                  Betalt
+                </swp-invoice-status>
+              </swp-table-cell>
+              <swp-table-cell>
+                <swp-download-btn>
+                  <i class="ph ph-download"></i>
+                  PDF
+                </swp-download-btn>
+              </swp-table-cell>
+            </swp-table-row>
+
+            <swp-table-row>
+              <swp-table-cell>1. aug 2025</swp-table-cell>
+              <swp-table-cell style="font-family: var(--font-mono); font-size: 12px;">INV-2025-0008</swp-table-cell>
+              <swp-table-cell>599,00 kr</swp-table-cell>
+              <swp-table-cell>
+                <swp-invoice-status class="paid">
+                  <i class="ph ph-check-circle"></i>
+                  Betalt
+                </swp-invoice-status>
+              </swp-table-cell>
+              <swp-table-cell>
+                <swp-download-btn>
+                  <i class="ph ph-download"></i>
+                  PDF
+                </swp-download-btn>
+              </swp-table-cell>
+            </swp-table-row>
+          </swp-table-body>
+        </swp-table>
+      </swp-invoices-card>
+    </swp-billing-grid>
+  </swp-section>
+
+</swp-page-container>
+
+</body>
+</html>
diff --git a/.workbench/POC/poc-layout.html b/.workbench/POC/poc-layout.html
new file mode 100644
index 0000000..db76aca
--- /dev/null
+++ b/.workbench/POC/poc-layout.html
@@ -0,0 +1,2992 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Salon OS</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />
+  <link rel="stylesheet" href="css/dashboard.css">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+
+      /* Layout */
+      --side-menu-width: 240px;
+      --side-menu-width-collapsed: 64px;
+      --topbar-height: 56px;
+    }
+
+    /* Dark mode - system preference */
+    @media (prefers-color-scheme: dark) {
+      :root:not(.light-mode) {
+        --color-surface: #1e1e1e;
+        --color-background: #121212;
+        --color-background-hover: #2a2a2a;
+        --color-background-alt: #1a1a1a;
+        --color-border: #333;
+        --color-text: #e0e0e0;
+        --color-text-secondary: #999;
+        --color-teal: #26a69a;
+        --color-blue: #42a5f5;
+        --color-red: #ef5350;
+        --color-amber: #ffb74d;
+        --color-purple: #a78bfa;
+        --color-green: #66bb6a;
+      }
+    }
+
+    /* Manual dark mode override */
+    :root.dark-mode {
+      --color-surface: #1e1e1e;
+      --color-background: #121212;
+      --color-background-hover: #2a2a2a;
+      --color-background-alt: #1a1a1a;
+      --color-border: #333;
+      --color-text: #e0e0e0;
+      --color-text-secondary: #999;
+      --color-teal: #26a69a;
+      --color-blue: #42a5f5;
+      --color-red: #ef5350;
+      --color-amber: #ffb74d;
+      --color-purple: #a78bfa;
+      --color-green: #66bb6a;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    html, body {
+      height: 100%;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    a {
+      color: var(--color-teal);
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    /* ==========================================
+       APP LAYOUT
+       ========================================== */
+    swp-app-layout {
+      display: grid;
+      grid-template-columns: var(--side-menu-width) 1fr;
+      grid-template-rows: var(--topbar-height) 1fr;
+      height: 100vh;
+    }
+
+    /* ==========================================
+       SIDE MENU
+       ========================================== */
+    swp-side-menu {
+      grid-row: 1 / -1;
+      display: flex;
+      flex-direction: column;
+      background: var(--color-surface);
+      border-right: 1px solid var(--color-border);
+      overflow-y: auto;
+    }
+
+    swp-side-menu-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      height: var(--topbar-height);
+      padding: 0 16px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-side-menu-header i {
+      font-size: 26px;
+      color: var(--color-teal);
+    }
+
+    swp-side-menu-logo {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-menu-toggle {
+      margin-left: auto;
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      background: transparent;
+      border-radius: 6px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      transition: all 150ms ease;
+    }
+
+    swp-menu-toggle:hover {
+      background: var(--color-background-hover);
+      color: var(--color-text);
+    }
+
+    swp-menu-toggle i {
+      font-size: 18px;
+      color: inherit;
+      transition: transform 200ms ease;
+    }
+
+    swp-side-menu-nav {
+      flex: 1;
+      padding: 12px 0;
+      overflow-y: auto;
+    }
+
+    swp-side-menu-group {
+      display: block;
+      margin-bottom: 8px;
+    }
+
+    swp-side-menu-label {
+      display: block;
+      padding: 8px 16px 6px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-side-menu-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 10px 16px;
+      color: var(--color-text);
+      cursor: pointer;
+      transition: all 150ms ease;
+      border-left: 3px solid transparent;
+      text-decoration: none;
+    }
+
+    swp-side-menu-item:hover {
+      background: var(--color-background-hover);
+      text-decoration: none;
+    }
+
+    swp-side-menu-item[data-active="true"] {
+      background: color-mix(in srgb, var(--color-teal) 10%, transparent);
+      border-left-color: var(--color-teal);
+      color: var(--color-teal);
+      font-weight: 500;
+    }
+
+    swp-side-menu-item i {
+      font-size: 20px;
+      flex-shrink: 0;
+    }
+
+    swp-side-menu-footer {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 12px 16px;
+      border-top: 1px solid var(--color-border);
+      margin-top: auto;
+    }
+
+    swp-side-menu-action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 10px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      background: transparent;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      font-family: var(--font-family);
+    }
+
+    swp-side-menu-action:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-side-menu-action.lock:hover {
+      color: var(--color-amber);
+      border-color: var(--color-amber);
+    }
+
+    swp-side-menu-action.logout:hover {
+      color: var(--color-red);
+      border-color: var(--color-red);
+    }
+
+    swp-side-menu-action i {
+      font-size: 18px;
+    }
+
+    /* ==========================================
+       SIDE MENU - COLLAPSED STATE
+       ========================================== */
+    swp-app-layout {
+      transition: grid-template-columns 200ms ease;
+    }
+
+    swp-app-layout.menu-collapsed {
+      grid-template-columns: var(--side-menu-width-collapsed) 1fr;
+    }
+
+    swp-app-layout.menu-collapsed swp-side-menu {
+      overflow: visible;
+    }
+
+    swp-app-layout.menu-collapsed swp-side-menu-logo,
+    swp-app-layout.menu-collapsed swp-side-menu-label,
+    swp-app-layout.menu-collapsed swp-side-menu-item span,
+    swp-app-layout.menu-collapsed swp-side-menu-action span {
+      display: none;
+    }
+
+    swp-app-layout.menu-collapsed swp-side-menu-header {
+      justify-content: center;
+      padding: 0;
+    }
+
+    swp-app-layout.menu-collapsed swp-menu-toggle {
+      margin-left: 0;
+    }
+
+    swp-app-layout.menu-collapsed swp-menu-toggle i {
+      transform: rotate(180deg);
+    }
+
+    swp-app-layout.menu-collapsed swp-side-menu-item {
+      justify-content: center;
+      padding: 12px;
+      border-left: none;
+      position: relative;
+    }
+
+    swp-app-layout.menu-collapsed swp-side-menu-item[data-active="true"] {
+      border-left: none;
+      border-radius: 8px;
+      margin: 0 8px;
+    }
+
+    swp-app-layout.menu-collapsed swp-side-menu-action {
+      justify-content: center;
+      padding: 12px;
+    }
+
+    swp-app-layout.menu-collapsed swp-side-menu-footer {
+      padding: 12px 8px;
+    }
+
+    /* Popover tooltip for collapsed menu */
+    .swp-menu-tooltip {
+      position: fixed;
+      margin: 0;
+      padding: 6px 12px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 13px;
+      font-family: var(--font-family);
+      color: var(--color-text);
+      white-space: nowrap;
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+      pointer-events: none;
+    }
+
+    /* ==========================================
+       TOP BAR
+       ========================================== */
+    swp-app-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 20px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-topbar-search {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 14px;
+      background: var(--color-background);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      width: 320px;
+      transition: border-color 150ms ease;
+    }
+
+    swp-topbar-search:focus-within {
+      border-color: var(--color-teal);
+    }
+
+    swp-topbar-search i {
+      font-size: 18px;
+      color: var(--color-text-secondary);
+      flex-shrink: 0;
+    }
+
+    swp-topbar-search input {
+      flex: 1;
+      border: none;
+      outline: none;
+      background: transparent;
+      font-size: 13px;
+      font-family: var(--font-family);
+      color: var(--color-text);
+    }
+
+    swp-topbar-search input::placeholder {
+      color: var(--color-text-secondary);
+    }
+
+    swp-topbar-search kbd {
+      font-size: 11px;
+      font-family: var(--font-mono);
+      padding: 2px 6px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-topbar-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-topbar-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 38px;
+      height: 38px;
+      border: none;
+      background: transparent;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 150ms ease;
+      position: relative;
+      color: var(--color-text-secondary);
+    }
+
+    swp-topbar-btn:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-topbar-btn i {
+      font-size: 22px;
+    }
+
+    swp-notification-badge {
+      position: absolute;
+      top: 6px;
+      right: 6px;
+      min-width: 16px;
+      height: 16px;
+      padding: 0 4px;
+      font-size: 10px;
+      font-weight: 600;
+      background: var(--color-red);
+      color: white;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    swp-topbar-divider {
+      width: 1px;
+      height: 24px;
+      background: var(--color-border);
+      margin: 0 8px;
+    }
+
+    swp-topbar-profile {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 6px 12px 6px 6px;
+      background: transparent;
+      border: 1px solid transparent;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      position: relative;
+    }
+
+    swp-topbar-profile:hover {
+      background: var(--color-background-hover);
+      border-color: var(--color-border);
+    }
+
+    swp-profile-avatar {
+      width: 32px;
+      height: 32px;
+      border-radius: 50%;
+      background: var(--color-purple);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 12px;
+      font-weight: 600;
+    }
+
+    swp-profile-info {
+      display: flex;
+      flex-direction: column;
+      text-align: left;
+    }
+
+    swp-profile-name {
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-profile-role {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       PROFILE DRAWER
+       ========================================== */
+    swp-drawer-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.2);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 200ms ease, visibility 200ms ease;
+      z-index: 900;
+    }
+
+    swp-drawer-overlay.open {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    swp-profile-drawer {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 320px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+      transform: translateX(100%);
+      transition: transform 200ms ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 1000;
+    }
+
+    swp-profile-drawer.open {
+      transform: translateX(0);
+    }
+
+    swp-drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-drawer-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-drawer-close {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      background: transparent;
+      border-radius: 6px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      transition: all 150ms ease;
+    }
+
+    swp-drawer-close:hover {
+      background: var(--color-background-hover);
+      color: var(--color-text);
+    }
+
+    swp-drawer-close i {
+      font-size: 20px;
+    }
+
+    swp-drawer-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 20px 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 24px;
+    }
+
+    /* Profile header in drawer */
+    swp-drawer-profile {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      text-align: center;
+      padding-bottom: 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-drawer-avatar {
+      width: 72px;
+      height: 72px;
+      border-radius: 50%;
+      background: var(--color-purple);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      font-weight: 600;
+      margin-bottom: 12px;
+    }
+
+    swp-drawer-name {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 2px;
+    }
+
+    swp-drawer-role {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      margin-bottom: 8px;
+    }
+
+    swp-drawer-email {
+      font-size: 13px;
+      color: var(--color-teal);
+    }
+
+    /* Drawer sections */
+    swp-drawer-section {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-drawer-section-label {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      margin-bottom: 4px;
+    }
+
+    swp-drawer-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    swp-drawer-item:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-drawer-item i {
+      font-size: 20px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-drawer-item-text {
+      flex: 1;
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-drawer-item-hint {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Theme toggle in drawer - two icons */
+    swp-theme-toggle {
+      display: flex;
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    swp-theme-option {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      padding: 12px;
+      background: var(--color-background-alt);
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-theme-option:first-child {
+      border-right: 1px solid var(--color-border);
+    }
+
+    swp-theme-option i {
+      font-size: 20px;
+      color: var(--color-text-secondary);
+      transition: color 150ms ease;
+    }
+
+    swp-theme-option:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-theme-option.active {
+      background: color-mix(in srgb, var(--color-teal) 12%, transparent);
+    }
+
+    swp-theme-option.active i {
+      color: var(--color-teal);
+    }
+
+    /* Drawer footer */
+    swp-drawer-footer {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+      padding: 16px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-drawer-action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 12px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      background: transparent;
+      color: var(--color-text-secondary);
+    }
+
+    swp-drawer-action:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-drawer-action.lock:hover {
+      color: var(--color-amber);
+      border-color: var(--color-amber);
+    }
+
+    swp-drawer-action.logout:hover {
+      color: var(--color-red);
+      border-color: var(--color-red);
+    }
+
+    swp-drawer-action i {
+      font-size: 18px;
+    }
+
+    /* ==========================================
+       NOTIFICATION DRAWER
+       ========================================== */
+    swp-notification-drawer {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 380px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+      transform: translateX(100%);
+      transition: transform 200ms ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 1000;
+    }
+
+    swp-notification-drawer.open {
+      transform: translateX(0);
+    }
+
+    swp-notification-drawer swp-drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-drawer-header-actions {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-mark-read-btn {
+      padding: 6px 12px;
+      font-size: 12px;
+      font-family: var(--font-family);
+      color: var(--color-teal);
+      background: transparent;
+      border: 1px solid var(--color-teal);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-mark-read-btn:hover {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-notification-drawer swp-drawer-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 12px;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-notification-item {
+      display: flex;
+      gap: 12px;
+      padding: 12px;
+      border-radius: 8px;
+      cursor: pointer;
+      transition: background 150ms ease;
+      background: transparent;
+    }
+
+    swp-notification-item:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-notification-item[data-unread="true"] {
+      background: var(--color-background-alt);
+    }
+
+    swp-notification-item[data-unread="true"]::before {
+      content: '';
+      position: absolute;
+      left: 4px;
+      top: 50%;
+      transform: translateY(-50%);
+      width: 6px;
+      height: 6px;
+      background: var(--color-teal);
+      border-radius: 50%;
+    }
+
+    swp-notification-icon {
+      width: 40px;
+      height: 40px;
+      border-radius: 10px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+    }
+
+    swp-notification-icon i {
+      font-size: 20px;
+    }
+
+    swp-notification-icon.booking {
+      background: color-mix(in srgb, var(--color-teal) 15%, transparent);
+      color: var(--color-teal);
+    }
+
+    swp-notification-icon.smiley {
+      background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+      color: var(--color-amber);
+    }
+
+    swp-notification-icon.call {
+      background: color-mix(in srgb, var(--color-blue) 15%, transparent);
+      color: var(--color-blue);
+    }
+
+    swp-notification-icon.mail {
+      background: color-mix(in srgb, var(--color-purple) 15%, transparent);
+      color: var(--color-purple);
+    }
+
+    swp-notification-icon.chat {
+      background: color-mix(in srgb, var(--color-green) 15%, transparent);
+      color: var(--color-green);
+    }
+
+    swp-notification-icon.reminder {
+      background: color-mix(in srgb, var(--color-red) 15%, transparent);
+      color: var(--color-red);
+    }
+
+    swp-notification-content {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-notification-title {
+      font-weight: 500;
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-notification-text {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    swp-notification-time {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    swp-notification-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 48px 24px;
+      text-align: center;
+      color: var(--color-text-secondary);
+    }
+
+    swp-notification-empty i {
+      font-size: 48px;
+      margin-bottom: 12px;
+      opacity: 0.5;
+    }
+
+    /* ==========================================
+       TODO DRAWER
+       ========================================== */
+    swp-todo-drawer {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 380px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+      transform: translateX(100%);
+      transition: transform 200ms ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 1001;
+    }
+
+    swp-todo-drawer.open {
+      transform: translateX(0);
+    }
+
+    /* New Todo Drawer - slides from left of todo drawer */
+    swp-new-todo-drawer {
+      position: fixed;
+      top: 0;
+      right: 380px;
+      bottom: 0;
+      width: 340px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+      transform: translateX(100%);
+      opacity: 0;
+      pointer-events: none;
+      transition: transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
+                  opacity 200ms ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 1000;
+    }
+
+    swp-new-todo-drawer.open {
+      transform: translateX(0);
+      opacity: 1;
+      pointer-events: auto;
+    }
+
+    swp-todo-drawer swp-drawer-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-todo-drawer swp-drawer-title {
+      flex: 1;
+    }
+
+    swp-drawer-back {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      background: transparent;
+      border-radius: 6px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      transition: all 150ms ease;
+    }
+
+    swp-drawer-back:hover {
+      background: var(--color-background-hover);
+      color: var(--color-text);
+    }
+
+    swp-drawer-back i {
+      font-size: 20px;
+    }
+
+    swp-add-todo-btn {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-teal);
+      color: white;
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-add-todo-btn:hover {
+      background: color-mix(in srgb, var(--color-teal) 85%, black);
+    }
+
+    swp-add-todo-btn i {
+      font-size: 18px;
+    }
+
+    swp-todo-drawer swp-drawer-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 20px;
+    }
+
+    swp-todo-section {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-todo-section-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 4px 0;
+      cursor: pointer;
+    }
+
+    swp-todo-section-header i {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      transition: transform 200ms ease;
+    }
+
+    swp-todo-section.collapsed swp-todo-section-header i {
+      transform: rotate(-90deg);
+    }
+
+    swp-todo-section.collapsed swp-todo-items {
+      display: none;
+    }
+
+    swp-todo-section-title {
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-todo-section-count {
+      font-size: 11px;
+      padding: 2px 6px;
+      background: var(--color-background);
+      border-radius: 10px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-todo-items {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    swp-todo-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      padding: 10px 12px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-todo-item:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-todo-item[data-completed="true"] {
+      opacity: 0.6;
+    }
+
+    swp-todo-item[data-completed="true"] swp-todo-title {
+      text-decoration: line-through;
+      color: var(--color-text-secondary);
+    }
+
+    swp-todo-checkbox {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--color-border);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      margin-top: 1px;
+      transition: all 150ms ease;
+    }
+
+    swp-todo-checkbox i {
+      font-size: 14px;
+      color: white;
+      opacity: 0;
+    }
+
+    swp-todo-item[data-completed="true"] swp-todo-checkbox {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+    }
+
+    swp-todo-item[data-completed="true"] swp-todo-checkbox i {
+      opacity: 1;
+    }
+
+    swp-todo-content {
+      flex: 1;
+      min-width: 0;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    swp-todo-title {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-todo-meta {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-todo-meta i {
+      font-size: 14px;
+    }
+
+    swp-todo-time {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    swp-todo-priority {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    swp-todo-priority.high {
+      color: var(--color-red);
+    }
+
+    swp-todo-priority.low {
+      color: var(--color-text-secondary);
+      opacity: 0.7;
+    }
+
+    swp-todo-date {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    /* New Todo Drawer - Header */
+    swp-new-todo-drawer swp-drawer-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-new-todo-drawer swp-drawer-title {
+      flex: 1;
+    }
+
+    swp-new-todo-drawer swp-drawer-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    /* Form Elements - matches detail-drawer patterns */
+    swp-new-todo-drawer swp-section-label {
+      display: block;
+      font-size: 11px;
+      font-weight: 400;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 8px;
+    }
+
+    swp-new-todo-drawer swp-form-field {
+      display: block;
+    }
+
+    swp-new-todo-drawer swp-form-row {
+      display: flex;
+      gap: 12px;
+    }
+
+    swp-new-todo-drawer swp-form-row swp-form-field {
+      flex: 1;
+    }
+
+    swp-new-todo-drawer input[type="text"],
+    swp-new-todo-drawer input[type="date"],
+    swp-new-todo-drawer input[type="time"],
+    swp-new-todo-drawer select,
+    swp-new-todo-drawer textarea {
+      width: 100%;
+      padding: 10px 12px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      color: var(--color-text);
+      background: var(--color-background-alt);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      outline: none;
+      transition: border-color 150ms ease;
+    }
+
+    swp-new-todo-drawer input:focus,
+    swp-new-todo-drawer select:focus,
+    swp-new-todo-drawer textarea:focus {
+      border-color: var(--color-teal);
+    }
+
+    swp-new-todo-drawer input::placeholder,
+    swp-new-todo-drawer textarea::placeholder {
+      color: var(--color-text-secondary);
+    }
+
+    swp-new-todo-drawer select {
+      cursor: pointer;
+      appearance: none;
+      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 256 256'%3E%3Cpath fill='%23666' d='M213.66 101.66l-80 80a8 8 0 0 1-11.32 0l-80-80a8 8 0 0 1 11.32-11.32L128 164.69l74.34-74.35a8 8 0 0 1 11.32 11.32Z'/%3E%3C/svg%3E");
+      background-repeat: no-repeat;
+      background-position: right 10px center;
+      padding-right: 36px;
+    }
+
+    swp-new-todo-drawer textarea {
+      resize: none;
+      min-height: 80px;
+    }
+
+    /* Visibility toggle */
+    swp-visibility-toggle {
+      display: flex;
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      overflow: hidden;
+    }
+
+    swp-visibility-option {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 10px 12px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      background: var(--color-background-alt);
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-visibility-option:first-child {
+      border-right: 1px solid var(--color-border);
+    }
+
+    swp-visibility-option i {
+      font-size: 16px;
+    }
+
+    swp-visibility-option:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-visibility-option.active {
+      background: color-mix(in srgb, var(--color-teal) 12%, transparent);
+      color: var(--color-teal);
+    }
+
+    /* Footer with buttons */
+    swp-new-todo-drawer swp-drawer-footer {
+      padding: 16px;
+      border-top: 1px solid var(--color-border);
+      display: flex;
+      gap: 12px;
+    }
+
+    swp-new-todo-drawer swp-btn {
+      flex: 1;
+      padding: 10px 16px;
+      font-size: 14px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      text-align: center;
+      border: none;
+    }
+
+    swp-new-todo-drawer swp-btn.secondary {
+      background: transparent;
+      border: 1px solid var(--color-border);
+      color: var(--color-text-secondary);
+    }
+
+    swp-new-todo-drawer swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+      color: var(--color-text);
+    }
+
+    swp-new-todo-drawer swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-new-todo-drawer swp-btn.primary:hover {
+      background: color-mix(in srgb, var(--color-teal) 85%, black);
+    }
+
+    /* ==========================================
+       LOCK SCREEN
+       ========================================== */
+    swp-lock-screen {
+      position: fixed;
+      inset: 0;
+      background: var(--color-background);
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      z-index: 2000;
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 300ms ease, visibility 300ms ease;
+    }
+
+    swp-lock-screen.active {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    swp-lock-content {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 24px;
+      padding: 40px;
+      background: var(--color-surface);
+      border-radius: 16px;
+      border: 1px solid var(--color-border);
+      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
+    }
+
+    swp-lock-icon {
+      width: 80px;
+      height: 80px;
+      border-radius: 50%;
+      background: color-mix(in srgb, var(--color-teal) 12%, transparent);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    swp-lock-icon i {
+      font-size: 36px;
+      color: var(--color-teal);
+    }
+
+    swp-lock-title {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-lock-subtitle {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      margin-top: -16px;
+    }
+
+    swp-pin-input {
+      display: flex;
+      gap: 12px;
+    }
+
+    swp-pin-digit {
+      width: 56px;
+      height: 64px;
+      border: 2px solid var(--color-border);
+      border-radius: 12px;
+      background: var(--color-surface);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 24px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+      transition: all 150ms ease;
+    }
+
+    swp-pin-digit.filled {
+      border-color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 8%, transparent);
+    }
+
+    swp-pin-digit.error {
+      border-color: var(--color-red);
+      background: color-mix(in srgb, var(--color-red) 8%, transparent);
+      animation: shake 0.4s ease;
+    }
+
+    @keyframes shake {
+      0%, 100% { transform: translateX(0); }
+      20%, 60% { transform: translateX(-8px); }
+      40%, 80% { transform: translateX(8px); }
+    }
+
+    swp-pin-keypad {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 12px;
+      margin-top: 8px;
+    }
+
+    swp-pin-key {
+      width: 72px;
+      height: 56px;
+      border: 1px solid var(--color-border);
+      border-radius: 10px;
+      background: var(--color-surface);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 22px;
+      font-weight: 500;
+      color: var(--color-text);
+      cursor: pointer;
+      transition: all 150ms ease;
+      font-family: var(--font-family);
+    }
+
+    swp-pin-key:hover {
+      background: var(--color-background-hover);
+      border-color: var(--color-teal);
+    }
+
+    swp-pin-key:active {
+      transform: scale(0.95);
+    }
+
+    swp-pin-key.empty {
+      visibility: hidden;
+    }
+
+    swp-pin-key.backspace {
+      font-size: 20px;
+    }
+
+    swp-pin-key.backspace i {
+      font-size: 24px;
+    }
+
+    swp-lock-time {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      margin-top: -12px;
+    }
+
+    swp-lock-hint {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: -8px;
+    }
+
+    /* ==========================================
+       MAIN CONTENT
+       ========================================== */
+    swp-main-content {
+      display: block;
+      overflow-y: auto;
+      padding: 24px;
+      background: var(--color-background);
+    }
+
+    /* Demo placeholder */
+    swp-content-placeholder {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      min-height: 400px;
+      background: var(--color-surface);
+      border: 2px dashed var(--color-border);
+      border-radius: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-content-placeholder i {
+      font-size: 64px;
+      color: var(--color-border);
+      margin-bottom: 16px;
+    }
+
+    swp-content-placeholder-title {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 8px;
+    }
+
+    swp-content-placeholder-text {
+      font-size: 14px;
+      text-align: center;
+      max-width: 400px;
+    }
+  </style>
+</head>
+<body>
+  <swp-app-layout>
+    <!-- Side Menu -->
+    <swp-side-menu>
+      <swp-side-menu-header>
+        <i class="ph ph-squares-four"></i>
+        <swp-side-menu-logo>Salon OS</swp-side-menu-logo>
+        <swp-menu-toggle id="menuToggle">
+          <i class="ph ph-caret-left"></i>
+        </swp-menu-toggle>
+      </swp-side-menu-header>
+
+      <swp-side-menu-nav>
+        <!-- DASHBOARD -->
+        <swp-side-menu-group>
+          <swp-side-menu-label>Dashboard</swp-side-menu-label>
+          <swp-side-menu-item data-active="true" data-tooltip="Dashboard">
+            <i class="ph ph-squares-four"></i>
+            <span>Dashboard</span>
+          </swp-side-menu-item>
+          <swp-side-menu-item onclick="location.href='poc-calendar.html'" data-tooltip="Kalender">
+            <i class="ph ph-calendar"></i>
+            <span>Kalender</span>
+          </swp-side-menu-item>
+          <swp-side-menu-item data-tooltip="Kasse">
+            <i class="ph ph-device-mobile"></i>
+            <span>Kasse</span>
+          </swp-side-menu-item>
+        </swp-side-menu-group>
+
+        <!-- DATA -->
+        <swp-side-menu-group>
+          <swp-side-menu-label>Data</swp-side-menu-label>
+          <swp-side-menu-item onclick="location.href='poc-produkter.html'" data-tooltip="Produkter & Lager">
+            <i class="ph ph-package"></i>
+            <span>Produkter & Lager</span>
+          </swp-side-menu-item>
+          <swp-side-menu-item onclick="location.href='poc-leverandoerer.html'" data-tooltip="Leverandører">
+            <i class="ph ph-truck"></i>
+            <span>Leverandører</span>
+          </swp-side-menu-item>
+          <swp-side-menu-item data-tooltip="Kunder">
+            <i class="ph ph-users"></i>
+            <span>Kunder</span>
+          </swp-side-menu-item>
+          <swp-side-menu-item onclick="location.href='poc-medarbejdere.html'" data-tooltip="Medarbejdere">
+            <i class="ph ph-user"></i>
+            <span>Medarbejdere</span>
+          </swp-side-menu-item>
+        </swp-side-menu-group>
+
+        <!-- ANALYSE -->
+        <swp-side-menu-group>
+          <swp-side-menu-label>Analyse</swp-side-menu-label>
+          <swp-side-menu-item data-tooltip="Statistik & Rapporter">
+            <i class="ph ph-chart-bar"></i>
+            <span>Statistik & Rapporter</span>
+          </swp-side-menu-item>
+        </swp-side-menu-group>
+
+        <!-- SYSTEM -->
+        <swp-side-menu-group>
+          <swp-side-menu-label>System</swp-side-menu-label>
+          <swp-side-menu-item onclick="location.href='poc-indstillinger.html'" data-tooltip="Indstillinger">
+            <i class="ph ph-gear"></i>
+            <span>Indstillinger</span>
+          </swp-side-menu-item>
+          <swp-side-menu-item onclick="location.href='poc-konto.html'" data-tooltip="Abonnement & Konto">
+            <i class="ph ph-credit-card"></i>
+            <span>Abonnement & Konto</span>
+          </swp-side-menu-item>
+        </swp-side-menu-group>
+      </swp-side-menu-nav>
+
+      <swp-side-menu-footer>
+        <swp-side-menu-action class="lock" title="Lås skærm">
+          <i class="ph ph-lock"></i>
+          <span>Lås skærm</span>
+        </swp-side-menu-action>
+      </swp-side-menu-footer>
+    </swp-side-menu>
+
+    <!-- Top Bar -->
+    <swp-app-topbar>
+      <swp-topbar-search>
+        <i class="ph ph-magnifying-glass"></i>
+        <input type="text" placeholder="Søg i Salon OS..." id="globalSearch">
+        <kbd>⌘K</kbd>
+      </swp-topbar-search>
+
+      <swp-topbar-actions>
+        <!-- Notifications -->
+        <swp-topbar-btn id="notificationsBtn" title="Notifikationer">
+          <i class="ph ph-bell"></i>
+          <swp-notification-badge>3</swp-notification-badge>
+        </swp-topbar-btn>
+
+        <swp-topbar-divider></swp-topbar-divider>
+
+        <!-- Profile (opens drawer) -->
+        <swp-topbar-profile id="profileTrigger">
+          <swp-profile-avatar>MJ</swp-profile-avatar>
+          <swp-profile-info>
+            <swp-profile-name>Maria Jensen</swp-profile-name>
+            <swp-profile-role>Administrator</swp-profile-role>
+          </swp-profile-info>
+        </swp-topbar-profile>
+      </swp-topbar-actions>
+    </swp-app-topbar>
+
+    <!-- Main Content -->
+    <swp-main-content>
+      <swp-page-container>
+        <!-- Stats Bar -->
+        <swp-stats-bar>
+          <swp-stat-card class="highlight">
+            <swp-stat-value>12</swp-stat-value>
+            <swp-stat-label>Bookinger i dag</swp-stat-label>
+            <swp-stat-trend class="up">
+              <i class="ph ph-check-circle"></i>
+              4 gennemført, 2 i gang
+            </swp-stat-trend>
+          </swp-stat-card>
+          <swp-stat-card class="success">
+            <swp-stat-value>8.450 kr</swp-stat-value>
+            <swp-stat-label>Forventet omsætning</swp-stat-label>
+            <swp-stat-trend class="up">
+              <i class="ph ph-trend-up"></i>
+              +12% vs. gennemsnit
+            </swp-stat-trend>
+          </swp-stat-card>
+          <swp-stat-card>
+            <swp-stat-value>78%</swp-stat-value>
+            <swp-stat-label>Belægningsgrad</swp-stat-label>
+            <swp-stat-trend class="up">
+              <i class="ph ph-trend-up"></i>
+              God kapacitet
+            </swp-stat-trend>
+          </swp-stat-card>
+          <swp-stat-card class="warning">
+            <swp-stat-value>4</swp-stat-value>
+            <swp-stat-label>Kræver opmærksomhed</swp-stat-label>
+          </swp-stat-card>
+        </swp-stats-bar>
+
+        <swp-dashboard-grid>
+          <!-- Main Column -->
+          <swp-main-column>
+            <!-- AI Insight -->
+            <swp-card>
+              <swp-ai-insight>
+                <swp-ai-header>
+                  <i class="ph ph-sparkle"></i>
+                  <span>AI Analyse</span>
+                </swp-ai-header>
+                <swp-ai-text>
+                  <strong>Godt i gang!</strong> 4 af 12 bookinger er gennemført. 2 er i gang nu, og 6 venter.
+                  Forventet omsætning: <strong>8.450 kr</strong> – allerede realiseret <strong>2.150 kr</strong>.
+                  Tip: Ida Rasmussen (11:30) har ikke bekræftet – overvej at sende en påmindelse.
+                </swp-ai-text>
+              </swp-ai-insight>
+            </swp-card>
+
+            <!-- Today's Bookings -->
+            <swp-card>
+              <swp-card-header>
+                <swp-card-title>
+                  <i class="ph ph-calendar-check"></i>
+                  Dagens bookinger
+                </swp-card-title>
+                <swp-card-action>Se alle</swp-card-action>
+              </swp-card-header>
+
+              <swp-current-time>
+                <i class="ph ph-clock"></i>
+                <span>Nu: <swp-time>10:45</swp-time></span>
+              </swp-current-time>
+
+              <swp-booking-list>
+                <!-- Gennemførte bookinger -->
+                <swp-booking-item class="completed">
+                  <swp-booking-time>
+                    <swp-time-start>08:00</swp-time-start>
+                    <swp-time-end>08:30</swp-time-end>
+                  </swp-booking-time>
+                  <swp-booking-indicator></swp-booking-indicator>
+                  <swp-booking-details>
+                    <swp-booking-service>Herreklip</swp-booking-service>
+                    <swp-booking-customer>Thomas Berg</swp-booking-customer>
+                  </swp-booking-details>
+                  <swp-booking-employee>
+                    <swp-avatar-small>MH</swp-avatar-small>
+                    <span>Maria</span>
+                  </swp-booking-employee>
+                  <swp-booking-status class="completed">Gennemført</swp-booking-status>
+                </swp-booking-item>
+
+                <swp-booking-item class="completed">
+                  <swp-booking-time>
+                    <swp-time-start>08:30</swp-time-start>
+                    <swp-time-end>09:00</swp-time-end>
+                  </swp-booking-time>
+                  <swp-booking-indicator></swp-booking-indicator>
+                  <swp-booking-details>
+                    <swp-booking-service>Dameklip</swp-booking-service>
+                    <swp-booking-customer>Katrine Holm</swp-booking-customer>
+                  </swp-booking-details>
+                  <swp-booking-employee>
+                    <swp-avatar-small>AS</swp-avatar-small>
+                    <span>Anna</span>
+                  </swp-booking-employee>
+                  <swp-booking-status class="completed">Gennemført</swp-booking-status>
+                </swp-booking-item>
+
+                <swp-booking-item class="completed">
+                  <swp-booking-time>
+                    <swp-time-start>09:00</swp-time-start>
+                    <swp-time-end>09:30</swp-time-end>
+                  </swp-booking-time>
+                  <swp-booking-indicator></swp-booking-indicator>
+                  <swp-booking-details>
+                    <swp-booking-service>Skægtrimning</swp-booking-service>
+                    <swp-booking-customer>Mikkel Skov</swp-booking-customer>
+                  </swp-booking-details>
+                  <swp-booking-employee>
+                    <swp-avatar-small>PK</swp-avatar-small>
+                    <span>Peter</span>
+                  </swp-booking-employee>
+                  <swp-booking-status class="completed">Gennemført</swp-booking-status>
+                </swp-booking-item>
+
+                <swp-booking-item class="completed">
+                  <swp-booking-time>
+                    <swp-time-start>09:00</swp-time-start>
+                    <swp-time-end>10:30</swp-time-end>
+                  </swp-booking-time>
+                  <swp-booking-indicator></swp-booking-indicator>
+                  <swp-booking-details>
+                    <swp-booking-service>Dameklip + Farve</swp-booking-service>
+                    <swp-booking-customer>Sofie Nielsen</swp-booking-customer>
+                  </swp-booking-details>
+                  <swp-booking-employee>
+                    <swp-avatar-small>AS</swp-avatar-small>
+                    <span>Anna</span>
+                  </swp-booking-employee>
+                  <swp-booking-status class="completed">Gennemført</swp-booking-status>
+                </swp-booking-item>
+
+                <!-- Igangværende -->
+                <swp-booking-item style="background: color-mix(in srgb, var(--color-teal) 8%, var(--color-background-alt));">
+                  <swp-booking-time>
+                    <swp-time-start>10:30</swp-time-start>
+                    <swp-time-end>11:00</swp-time-end>
+                  </swp-booking-time>
+                  <swp-booking-indicator class="blue"></swp-booking-indicator>
+                  <swp-booking-details>
+                    <swp-booking-service>Herreklip</swp-booking-service>
+                    <swp-booking-customer>Jonas Petersen</swp-booking-customer>
+                  </swp-booking-details>
+                  <swp-booking-employee>
+                    <swp-avatar-small>MH</swp-avatar-small>
+                    <span>Maria</span>
+                  </swp-booking-employee>
+                  <swp-booking-status class="inprogress">I gang</swp-booking-status>
+                </swp-booking-item>
+
+                <swp-booking-item style="background: color-mix(in srgb, var(--color-teal) 8%, var(--color-background-alt));">
+                  <swp-booking-time>
+                    <swp-time-start>10:00</swp-time-start>
+                    <swp-time-end>11:00</swp-time-end>
+                  </swp-booking-time>
+                  <swp-booking-indicator class="purple"></swp-booking-indicator>
+                  <swp-booking-details>
+                    <swp-booking-service>Føn + Styling</swp-booking-service>
+                    <swp-booking-customer>Rikke Dam</swp-booking-customer>
+                  </swp-booking-details>
+                  <swp-booking-employee>
+                    <swp-avatar-small>LJ</swp-avatar-small>
+                    <span>Louise</span>
+                  </swp-booking-employee>
+                  <swp-booking-status class="inprogress">I gang</swp-booking-status>
+                </swp-booking-item>
+
+                <!-- Kommende -->
+                <swp-booking-item>
+                  <swp-booking-time>
+                    <swp-time-start>11:00</swp-time-start>
+                    <swp-time-end>12:00</swp-time-end>
+                  </swp-booking-time>
+                  <swp-booking-indicator class="teal"></swp-booking-indicator>
+                  <swp-booking-details>
+                    <swp-booking-service>Balayage</swp-booking-service>
+                    <swp-booking-customer>Emma Christensen</swp-booking-customer>
+                  </swp-booking-details>
+                  <swp-booking-employee>
+                    <swp-avatar-small>AS</swp-avatar-small>
+                    <span>Anna</span>
+                  </swp-booking-employee>
+                  <swp-booking-status class="confirmed">Bekræftet</swp-booking-status>
+                </swp-booking-item>
+
+                <swp-booking-item>
+                  <swp-booking-time>
+                    <swp-time-start>11:30</swp-time-start>
+                    <swp-time-end>12:00</swp-time-end>
+                  </swp-booking-time>
+                  <swp-booking-indicator class="amber"></swp-booking-indicator>
+                  <swp-booking-details>
+                    <swp-booking-service>Dameklip</swp-booking-service>
+                    <swp-booking-customer>Ida Rasmussen</swp-booking-customer>
+                  </swp-booking-details>
+                  <swp-booking-employee>
+                    <swp-avatar-small>MH</swp-avatar-small>
+                    <span>Maria</span>
+                  </swp-booking-employee>
+                  <swp-booking-status class="pending">Afventer</swp-booking-status>
+                </swp-booking-item>
+
+                <swp-booking-item>
+                  <swp-booking-time>
+                    <swp-time-start>13:00</swp-time-start>
+                    <swp-time-end>14:00</swp-time-end>
+                  </swp-booking-time>
+                  <swp-booking-indicator class="green"></swp-booking-indicator>
+                  <swp-booking-details>
+                    <swp-booking-service>Farve + Føn</swp-booking-service>
+                    <swp-booking-customer>Louise Andersen</swp-booking-customer>
+                  </swp-booking-details>
+                  <swp-booking-employee>
+                    <swp-avatar-small>AS</swp-avatar-small>
+                    <span>Anna</span>
+                  </swp-booking-employee>
+                  <swp-booking-status class="confirmed">Bekræftet</swp-booking-status>
+                </swp-booking-item>
+
+                <swp-booking-item>
+                  <swp-booking-time>
+                    <swp-time-start>14:00</swp-time-start>
+                    <swp-time-end>14:30</swp-time-end>
+                  </swp-booking-time>
+                  <swp-booking-indicator class="blue"></swp-booking-indicator>
+                  <swp-booking-details>
+                    <swp-booking-service>Herreklip</swp-booking-service>
+                    <swp-booking-customer>Anders Møller</swp-booking-customer>
+                  </swp-booking-details>
+                  <swp-booking-employee>
+                    <swp-avatar-small>PK</swp-avatar-small>
+                    <span>Peter</span>
+                  </swp-booking-employee>
+                  <swp-booking-status class="confirmed">Bekræftet</swp-booking-status>
+                </swp-booking-item>
+
+                <swp-booking-item>
+                  <swp-booking-time>
+                    <swp-time-start>15:30</swp-time-start>
+                    <swp-time-end>16:30</swp-time-end>
+                  </swp-booking-time>
+                  <swp-booking-indicator class="purple"></swp-booking-indicator>
+                  <swp-booking-details>
+                    <swp-booking-service>Extensions</swp-booking-service>
+                    <swp-booking-customer>Julie Lund</swp-booking-customer>
+                  </swp-booking-details>
+                  <swp-booking-employee>
+                    <swp-avatar-small>LJ</swp-avatar-small>
+                    <span>Louise</span>
+                  </swp-booking-employee>
+                  <swp-booking-status class="confirmed">Bekræftet</swp-booking-status>
+                </swp-booking-item>
+              </swp-booking-list>
+            </swp-card>
+
+            <!-- Attention Items -->
+            <swp-card>
+              <swp-card-header>
+                <swp-card-title>
+                  <i class="ph ph-warning-circle"></i>
+                  Opmærksomheder
+                </swp-card-title>
+              </swp-card-header>
+
+              <swp-attention-list>
+                <swp-attention-item class="urgent">
+                  <swp-attention-icon>
+                    <i class="ph ph-package"></i>
+                  </swp-attention-icon>
+                  <swp-attention-content>
+                    <swp-attention-title>Lav lagerbeholdning på Moroccanoil Balsam</swp-attention-title>
+                    <swp-attention-desc>4 stk tilbage · sidst bestilt for 21 dage siden</swp-attention-desc>
+                  </swp-attention-content>
+                  <swp-attention-action>Opret bestilling</swp-attention-action>
+                </swp-attention-item>
+
+                <swp-attention-item class="warning">
+                  <swp-attention-icon>
+                    <i class="ph ph-calendar-x"></i>
+                  </swp-attention-icon>
+                  <swp-attention-content>
+                    <swp-attention-title>2 kunder uden bekræftet tid i eftermiddag</swp-attention-title>
+                    <swp-attention-desc>Line · Balayage · 13:00 · Cecilie · Klip · 15:00</swp-attention-desc>
+                  </swp-attention-content>
+                  <swp-attention-action>Send SMS-påmindelse</swp-attention-action>
+                </swp-attention-item>
+
+                <swp-attention-item class="info">
+                  <swp-attention-icon>
+                    <i class="ph ph-cash-register"></i>
+                  </swp-attention-icon>
+                  <swp-attention-content>
+                    <swp-attention-title>Kasseafstemning for i går mangler</swp-attention-title>
+                    <swp-attention-desc>9 kontantsalg registreret · forventet differens: 0 kr</swp-attention-desc>
+                  </swp-attention-content>
+                  <swp-attention-action>Afstem kasse</swp-attention-action>
+                </swp-attention-item>
+
+                <swp-attention-item class="info">
+                  <swp-attention-icon>
+                    <i class="ph ph-gift"></i>
+                  </swp-attention-icon>
+                  <swp-attention-content>
+                    <swp-attention-title>Gavekort udløber snart</swp-attention-title>
+                    <swp-attention-desc>GC-D2R4-6TY9 udløber om 3 uger (200 DKK)</swp-attention-desc>
+                  </swp-attention-content>
+                  <swp-attention-action>Se gavekort</swp-attention-action>
+                </swp-attention-item>
+              </swp-attention-list>
+            </swp-card>
+          </swp-main-column>
+
+          <!-- Side Column -->
+          <swp-side-column>
+            <!-- Notifications -->
+            <swp-card>
+              <swp-card-header>
+                <swp-card-title>
+                  <i class="ph ph-bell"></i>
+                  Notifikationer
+                </swp-card-title>
+                <swp-card-action>Marker alle som læst</swp-card-action>
+              </swp-card-header>
+
+              <swp-notification-list>
+                <swp-notification-item class="unread">
+                  <swp-notification-icon>
+                    <i class="ph ph-calendar-plus"></i>
+                  </swp-notification-icon>
+                  <swp-notification-content>
+                    <swp-notification-text>
+                      <strong>Ny booking</strong> fra Emma Christensen til Balayage
+                    </swp-notification-text>
+                    <swp-notification-time>For 15 min. siden</swp-notification-time>
+                  </swp-notification-content>
+                </swp-notification-item>
+
+                <swp-notification-item class="unread">
+                  <swp-notification-icon>
+                    <i class="ph ph-star"></i>
+                  </swp-notification-icon>
+                  <swp-notification-content>
+                    <swp-notification-text>
+                      <strong>Ny anmeldelse</strong> – 5 stjerner fra Sofie Nielsen
+                    </swp-notification-text>
+                    <swp-notification-time>For 1 time siden</swp-notification-time>
+                  </swp-notification-content>
+                </swp-notification-item>
+
+                <swp-notification-item>
+                  <swp-notification-icon>
+                    <i class="ph ph-x"></i>
+                  </swp-notification-icon>
+                  <swp-notification-content>
+                    <swp-notification-text>
+                      <strong>Aflysning</strong> – Mette Hansen aflyste kl. 15:00
+                    </swp-notification-text>
+                    <swp-notification-time>For 2 timer siden</swp-notification-time>
+                  </swp-notification-content>
+                </swp-notification-item>
+
+                <swp-notification-item>
+                  <swp-notification-icon>
+                    <i class="ph ph-check"></i>
+                  </swp-notification-icon>
+                  <swp-notification-content>
+                    <swp-notification-text>
+                      <strong>Bekræftet</strong> – Louise Andersen bekræftede kl. 13:00
+                    </swp-notification-text>
+                    <swp-notification-time>I går kl. 18:30</swp-notification-time>
+                  </swp-notification-content>
+                </swp-notification-item>
+              </swp-notification-list>
+            </swp-card>
+
+            <!-- Quick Stats -->
+            <swp-card>
+              <swp-card-header>
+                <swp-card-title>
+                  <i class="ph ph-chart-line-up"></i>
+                  Denne uge
+                </swp-card-title>
+              </swp-card-header>
+
+              <swp-quick-stats>
+                <swp-quick-stat>
+                  <swp-stat-value>47</swp-stat-value>
+                  <swp-stat-label>Bookinger</swp-stat-label>
+                </swp-quick-stat>
+                <swp-quick-stat>
+                  <swp-stat-value>38.200 kr</swp-stat-value>
+                  <swp-stat-label>Omsætning</swp-stat-label>
+                </swp-quick-stat>
+                <swp-quick-stat>
+                  <swp-stat-value>8</swp-stat-value>
+                  <swp-stat-label>Nye kunder</swp-stat-label>
+                </swp-quick-stat>
+                <swp-quick-stat>
+                  <swp-stat-value>72%</swp-stat-value>
+                  <swp-stat-label>Gns. belægning</swp-stat-label>
+                </swp-quick-stat>
+              </swp-quick-stats>
+            </swp-card>
+
+            <!-- Employee Status -->
+            <swp-card>
+              <swp-card-header>
+                <swp-card-title>
+                  <i class="ph ph-users"></i>
+                  Medarbejdere
+                </swp-card-title>
+              </swp-card-header>
+
+              <swp-employee-list>
+                <swp-employee-status-item>
+                  <swp-employee-avatar>AS</swp-employee-avatar>
+                  <swp-employee-info>
+                    <swp-employee-name>Anna Sørensen</swp-employee-name>
+                    <swp-employee-current>Ledig til kl. 11:00 (Balayage)</swp-employee-current>
+                  </swp-employee-info>
+                  <swp-employee-status-badge class="available">Ledig</swp-employee-status-badge>
+                </swp-employee-status-item>
+
+                <swp-employee-status-item>
+                  <swp-employee-avatar>MH</swp-employee-avatar>
+                  <swp-employee-info>
+                    <swp-employee-name>Maria Hansen</swp-employee-name>
+                    <swp-employee-current>Herreklip med Jonas</swp-employee-current>
+                  </swp-employee-info>
+                  <swp-employee-status-badge class="busy">Optaget</swp-employee-status-badge>
+                </swp-employee-status-item>
+
+                <swp-employee-status-item>
+                  <swp-employee-avatar>LJ</swp-employee-avatar>
+                  <swp-employee-info>
+                    <swp-employee-name>Louise Jensen</swp-employee-name>
+                    <swp-employee-current>Føn + Styling med Rikke</swp-employee-current>
+                  </swp-employee-info>
+                  <swp-employee-status-badge class="busy">Optaget</swp-employee-status-badge>
+                </swp-employee-status-item>
+
+                <swp-employee-status-item>
+                  <swp-employee-avatar>PK</swp-employee-avatar>
+                  <swp-employee-info>
+                    <swp-employee-name>Peter Kristensen</swp-employee-name>
+                    <swp-employee-current>Ledig til kl. 14:00</swp-employee-current>
+                  </swp-employee-info>
+                  <swp-employee-status-badge class="available">Ledig</swp-employee-status-badge>
+                </swp-employee-status-item>
+              </swp-employee-list>
+            </swp-card>
+          </swp-side-column>
+        </swp-dashboard-grid>
+      </swp-page-container>
+    </swp-main-content>
+  </swp-app-layout>
+
+  <!-- Profile Drawer -->
+  <swp-drawer-overlay id="drawerOverlay"></swp-drawer-overlay>
+  <swp-profile-drawer id="profileDrawer">
+    <swp-drawer-header>
+      <swp-drawer-title>Min profil</swp-drawer-title>
+      <swp-drawer-close id="drawerClose">
+        <i class="ph ph-x"></i>
+      </swp-drawer-close>
+    </swp-drawer-header>
+
+    <swp-drawer-content>
+      <swp-drawer-profile>
+        <swp-drawer-avatar>MJ</swp-drawer-avatar>
+        <swp-drawer-name>Maria Jensen</swp-drawer-name>
+        <swp-drawer-role>Administrator</swp-drawer-role>
+        <swp-drawer-email>maria@salon.dk</swp-drawer-email>
+      </swp-drawer-profile>
+
+      <swp-drawer-section>
+        <swp-drawer-section-label>Konto</swp-drawer-section-label>
+        <swp-drawer-item>
+          <i class="ph ph-user-circle"></i>
+          <swp-drawer-item-text>Rediger profil</swp-drawer-item-text>
+          <i class="ph ph-caret-right"></i>
+        </swp-drawer-item>
+        <swp-drawer-item>
+          <i class="ph ph-key"></i>
+          <swp-drawer-item-text>Skift adgangskode</swp-drawer-item-text>
+          <i class="ph ph-caret-right"></i>
+        </swp-drawer-item>
+        <swp-drawer-item>
+          <i class="ph ph-bell"></i>
+          <swp-drawer-item-text>Notifikationer</swp-drawer-item-text>
+          <swp-drawer-item-hint>3 ulæste</swp-drawer-item-hint>
+        </swp-drawer-item>
+        <swp-drawer-item id="openTodoDrawer">
+          <i class="ph ph-check-square"></i>
+          <swp-drawer-item-text>Mine opgaver</swp-drawer-item-text>
+          <swp-drawer-item-hint>2 i dag</swp-drawer-item-hint>
+        </swp-drawer-item>
+      </swp-drawer-section>
+
+      <swp-drawer-section>
+        <swp-drawer-section-label>Udseende</swp-drawer-section-label>
+        <swp-theme-toggle id="themeToggleDrawer">
+          <swp-theme-option data-theme="light" title="Lyst tema">
+            <i class="ph ph-sun"></i>
+          </swp-theme-option>
+          <swp-theme-option data-theme="dark" title="Mørkt tema">
+            <i class="ph ph-moon"></i>
+          </swp-theme-option>
+        </swp-theme-toggle>
+      </swp-drawer-section>
+
+      <swp-drawer-section>
+        <swp-drawer-section-label>Support</swp-drawer-section-label>
+        <swp-drawer-item>
+          <i class="ph ph-question"></i>
+          <swp-drawer-item-text>Hjælp & Support</swp-drawer-item-text>
+          <i class="ph ph-caret-right"></i>
+        </swp-drawer-item>
+        <swp-drawer-item>
+          <i class="ph ph-info"></i>
+          <swp-drawer-item-text>Om Salon OS</swp-drawer-item-text>
+          <swp-drawer-item-hint>v2.1.0</swp-drawer-item-hint>
+        </swp-drawer-item>
+      </swp-drawer-section>
+    </swp-drawer-content>
+
+    <swp-drawer-footer>
+      <swp-drawer-action class="logout">
+        <i class="ph ph-sign-out"></i>
+        Log ud
+      </swp-drawer-action>
+    </swp-drawer-footer>
+  </swp-profile-drawer>
+
+  <!-- Notification Drawer -->
+  <swp-notification-drawer id="notificationDrawer">
+    <swp-drawer-header>
+      <swp-drawer-title>Notifikationer</swp-drawer-title>
+      <swp-drawer-header-actions>
+        <swp-mark-read-btn id="markAllRead">Marker alle læst</swp-mark-read-btn>
+        <swp-drawer-close id="notificationDrawerClose">
+          <i class="ph ph-x"></i>
+        </swp-drawer-close>
+      </swp-drawer-header-actions>
+    </swp-drawer-header>
+
+    <swp-drawer-content>
+      <!-- Booking -->
+      <swp-notification-item data-unread="true">
+        <swp-notification-icon class="booking">
+          <i class="ph ph-calendar-check"></i>
+        </swp-notification-icon>
+        <swp-notification-content>
+          <swp-notification-title>Ny booking</swp-notification-title>
+          <swp-notification-text>Maria Hansen har booket klipning kl. 14:00</swp-notification-text>
+          <swp-notification-time>For 5 min siden</swp-notification-time>
+        </swp-notification-content>
+      </swp-notification-item>
+
+      <!-- Smiley/Feedback -->
+      <swp-notification-item data-unread="true">
+        <swp-notification-icon class="smiley">
+          <i class="ph ph-smiley"></i>
+        </swp-notification-icon>
+        <swp-notification-content>
+          <swp-notification-title>Kunde feedback</swp-notification-title>
+          <swp-notification-text>5 stjerner fra Jonas Petersen</swp-notification-text>
+          <swp-notification-time>For 15 min siden</swp-notification-time>
+        </swp-notification-content>
+      </swp-notification-item>
+
+      <!-- Opkald -->
+      <swp-notification-item data-unread="true">
+        <swp-notification-icon class="call">
+          <i class="ph ph-phone"></i>
+        </swp-notification-icon>
+        <swp-notification-content>
+          <swp-notification-title>Misset opkald</swp-notification-title>
+          <swp-notification-text>+45 12 34 56 78</swp-notification-text>
+          <swp-notification-time>For 1 time siden</swp-notification-time>
+        </swp-notification-content>
+      </swp-notification-item>
+
+      <!-- Mail -->
+      <swp-notification-item>
+        <swp-notification-icon class="mail">
+          <i class="ph ph-envelope"></i>
+        </swp-notification-icon>
+        <swp-notification-content>
+          <swp-notification-title>Ny mail</swp-notification-title>
+          <swp-notification-text>Fra: leverandoer@produkt.dk - Ordrebekræftelse</swp-notification-text>
+          <swp-notification-time>For 2 timer siden</swp-notification-time>
+        </swp-notification-content>
+      </swp-notification-item>
+
+      <!-- Chat -->
+      <swp-notification-item>
+        <swp-notification-icon class="chat">
+          <i class="ph ph-chat-circle"></i>
+        </swp-notification-icon>
+        <swp-notification-content>
+          <swp-notification-title>Ny besked i chat</swp-notification-title>
+          <swp-notification-text>Kunde: "Hej, kan jeg ændre min tid?"</swp-notification-text>
+          <swp-notification-time>For 3 timer siden</swp-notification-time>
+        </swp-notification-content>
+      </swp-notification-item>
+
+      <!-- Reminder -->
+      <swp-notification-item>
+        <swp-notification-icon class="reminder">
+          <i class="ph ph-bell-ringing"></i>
+        </swp-notification-icon>
+        <swp-notification-content>
+          <swp-notification-title>Påmindelse</swp-notification-title>
+          <swp-notification-text>Bestil varer fra Wella inden fredag</swp-notification-text>
+          <swp-notification-time>I går</swp-notification-time>
+        </swp-notification-content>
+      </swp-notification-item>
+    </swp-drawer-content>
+  </swp-notification-drawer>
+
+  <!-- Todo Drawer -->
+  <swp-todo-drawer id="todoDrawer">
+    <swp-drawer-header>
+      <swp-drawer-back id="todoDrawerBack">
+        <i class="ph ph-caret-left"></i>
+      </swp-drawer-back>
+      <swp-drawer-title>Mine opgaver</swp-drawer-title>
+      <swp-drawer-header-actions>
+        <swp-add-todo-btn id="addTodoBtn" title="Tilføj opgave">
+          <i class="ph ph-plus"></i>
+        </swp-add-todo-btn>
+      </swp-drawer-header-actions>
+    </swp-drawer-header>
+
+    <swp-drawer-content>
+      <!-- I dag -->
+      <swp-todo-section>
+        <swp-todo-section-header>
+          <i class="ph ph-caret-down"></i>
+          <swp-todo-section-title>I dag</swp-todo-section-title>
+          <swp-todo-section-count>3</swp-todo-section-count>
+        </swp-todo-section-header>
+        <swp-todo-items>
+          <swp-todo-item>
+            <swp-todo-checkbox>
+              <i class="ph ph-check"></i>
+            </swp-todo-checkbox>
+            <swp-todo-content>
+              <swp-todo-title>Ring til leverandør om ordre</swp-todo-title>
+              <swp-todo-meta>
+                <swp-todo-time>
+                  <i class="ph ph-clock"></i>
+                  10:00
+                </swp-todo-time>
+              </swp-todo-meta>
+            </swp-todo-content>
+          </swp-todo-item>
+          <swp-todo-item data-completed="true">
+            <swp-todo-checkbox>
+              <i class="ph ph-check"></i>
+            </swp-todo-checkbox>
+            <swp-todo-content>
+              <swp-todo-title>Bestil shampoo fra Wella</swp-todo-title>
+            </swp-todo-content>
+          </swp-todo-item>
+          <swp-todo-item>
+            <swp-todo-checkbox>
+              <i class="ph ph-check"></i>
+            </swp-todo-checkbox>
+            <swp-todo-content>
+              <swp-todo-title>Opdater prisliste for 2025</swp-todo-title>
+              <swp-todo-meta>
+                <swp-todo-priority class="high">
+                  <i class="ph ph-flag"></i>
+                  Høj
+                </swp-todo-priority>
+              </swp-todo-meta>
+            </swp-todo-content>
+          </swp-todo-item>
+        </swp-todo-items>
+      </swp-todo-section>
+
+      <!-- Denne uge -->
+      <swp-todo-section>
+        <swp-todo-section-header>
+          <i class="ph ph-caret-down"></i>
+          <swp-todo-section-title>Denne uge</swp-todo-section-title>
+          <swp-todo-section-count>2</swp-todo-section-count>
+        </swp-todo-section-header>
+        <swp-todo-items>
+          <swp-todo-item>
+            <swp-todo-checkbox>
+              <i class="ph ph-check"></i>
+            </swp-todo-checkbox>
+            <swp-todo-content>
+              <swp-todo-title>Rengør og vedligehold udstyr</swp-todo-title>
+              <swp-todo-meta>
+                <swp-todo-date>
+                  <i class="ph ph-calendar"></i>
+                  Onsdag
+                </swp-todo-date>
+              </swp-todo-meta>
+            </swp-todo-content>
+          </swp-todo-item>
+          <swp-todo-item>
+            <swp-todo-checkbox>
+              <i class="ph ph-check"></i>
+            </swp-todo-checkbox>
+            <swp-todo-content>
+              <swp-todo-title>Medarbejdersamtale med Jonas</swp-todo-title>
+              <swp-todo-meta>
+                <swp-todo-date>
+                  <i class="ph ph-calendar"></i>
+                  Fredag
+                </swp-todo-date>
+                <swp-todo-time>
+                  <i class="ph ph-clock"></i>
+                  14:00
+                </swp-todo-time>
+              </swp-todo-meta>
+            </swp-todo-content>
+          </swp-todo-item>
+        </swp-todo-items>
+      </swp-todo-section>
+
+      <!-- Udført -->
+      <swp-todo-section class="collapsed">
+        <swp-todo-section-header>
+          <i class="ph ph-caret-down"></i>
+          <swp-todo-section-title>Udført</swp-todo-section-title>
+          <swp-todo-section-count>3</swp-todo-section-count>
+        </swp-todo-section-header>
+        <swp-todo-items>
+          <swp-todo-item data-completed="true">
+            <swp-todo-checkbox>
+              <i class="ph ph-check"></i>
+            </swp-todo-checkbox>
+            <swp-todo-content>
+              <swp-todo-title>Send faktura til kunde</swp-todo-title>
+            </swp-todo-content>
+          </swp-todo-item>
+          <swp-todo-item data-completed="true">
+            <swp-todo-checkbox>
+              <i class="ph ph-check"></i>
+            </swp-todo-checkbox>
+            <swp-todo-content>
+              <swp-todo-title>Opdater åbningstider på Google</swp-todo-title>
+            </swp-todo-content>
+          </swp-todo-item>
+          <swp-todo-item data-completed="true">
+            <swp-todo-checkbox>
+              <i class="ph ph-check"></i>
+            </swp-todo-checkbox>
+            <swp-todo-content>
+              <swp-todo-title>Bestil nye håndklæder</swp-todo-title>
+            </swp-todo-content>
+          </swp-todo-item>
+        </swp-todo-items>
+      </swp-todo-section>
+    </swp-drawer-content>
+  </swp-todo-drawer>
+
+  <!-- New Todo Drawer - slides from left of todo drawer -->
+  <swp-new-todo-drawer id="newTodoDrawer">
+    <swp-drawer-header>
+      <swp-drawer-back id="newTodoDrawerBack">
+        <i class="ph ph-caret-left"></i>
+      </swp-drawer-back>
+      <swp-drawer-title>Ny opgave</swp-drawer-title>
+    </swp-drawer-header>
+
+    <swp-drawer-content>
+      <!-- Titel -->
+      <swp-form-field>
+        <swp-section-label>Opgave</swp-section-label>
+        <input type="text" placeholder="Hvad skal du huske?" id="newTodoTitle">
+      </swp-form-field>
+
+      <!-- Dato & Tid -->
+      <swp-form-row>
+        <swp-form-field>
+          <swp-section-label>Dato</swp-section-label>
+          <input type="date" id="newTodoDate">
+        </swp-form-field>
+        <swp-form-field>
+          <swp-section-label>Tid</swp-section-label>
+          <input type="time" id="newTodoTime">
+        </swp-form-field>
+      </swp-form-row>
+
+      <!-- Prioritet -->
+      <swp-form-field>
+        <swp-section-label>Prioritet</swp-section-label>
+        <select id="newTodoPriority">
+          <option value="normal">Normal</option>
+          <option value="high">Høj prioritet</option>
+          <option value="low">Lav prioritet</option>
+        </select>
+      </swp-form-field>
+
+      <!-- Synlighed -->
+      <swp-form-field>
+        <swp-section-label>Synlighed</swp-section-label>
+        <swp-visibility-toggle>
+          <swp-visibility-option class="active" data-value="personal">
+            <i class="ph ph-user"></i>
+            Kun mig
+          </swp-visibility-option>
+          <swp-visibility-option data-value="shared">
+            <i class="ph ph-users"></i>
+            Alle
+          </swp-visibility-option>
+        </swp-visibility-toggle>
+      </swp-form-field>
+
+      <!-- Noter -->
+      <swp-form-field>
+        <swp-section-label>Noter</swp-section-label>
+        <textarea placeholder="Tilføj noter..." id="newTodoNotes"></textarea>
+      </swp-form-field>
+    </swp-drawer-content>
+
+    <swp-drawer-footer>
+      <swp-btn class="secondary" id="cancelNewTodo">Annuller</swp-btn>
+      <swp-btn class="primary" id="saveNewTodo">Gem opgave</swp-btn>
+    </swp-drawer-footer>
+  </swp-new-todo-drawer>
+
+  <!-- Lock Screen -->
+  <swp-lock-screen id="lockScreen">
+    <swp-lock-content>
+      <swp-lock-icon>
+        <i class="ph ph-lock"></i>
+      </swp-lock-icon>
+      <swp-lock-title>Skærm låst</swp-lock-title>
+      <swp-lock-subtitle>Indtast PIN for at fortsætte</swp-lock-subtitle>
+
+      <swp-lock-time id="lockTime">Låst kl. 14:32</swp-lock-time>
+
+      <swp-pin-input id="pinInput">
+        <swp-pin-digit></swp-pin-digit>
+        <swp-pin-digit></swp-pin-digit>
+        <swp-pin-digit></swp-pin-digit>
+        <swp-pin-digit></swp-pin-digit>
+      </swp-pin-input>
+
+      <swp-pin-keypad id="pinKeypad">
+        <swp-pin-key data-key="1">1</swp-pin-key>
+        <swp-pin-key data-key="2">2</swp-pin-key>
+        <swp-pin-key data-key="3">3</swp-pin-key>
+        <swp-pin-key data-key="4">4</swp-pin-key>
+        <swp-pin-key data-key="5">5</swp-pin-key>
+        <swp-pin-key data-key="6">6</swp-pin-key>
+        <swp-pin-key data-key="7">7</swp-pin-key>
+        <swp-pin-key data-key="8">8</swp-pin-key>
+        <swp-pin-key data-key="9">9</swp-pin-key>
+        <swp-pin-key class="empty"></swp-pin-key>
+        <swp-pin-key data-key="0">0</swp-pin-key>
+        <swp-pin-key class="backspace" data-key="backspace">
+          <i class="ph ph-backspace"></i>
+        </swp-pin-key>
+      </swp-pin-keypad>
+
+      <swp-lock-hint>Indtast 4 cifre for at låse op</swp-lock-hint>
+    </swp-lock-content>
+  </swp-lock-screen>
+
+  <!-- Menu Tooltip (Popover API) -->
+  <div id="menuTooltip" popover="manual" class="swp-menu-tooltip"></div>
+
+  <script>
+    // Elements
+    const root = document.documentElement;
+    const profileTrigger = document.getElementById('profileTrigger');
+    const profileDrawer = document.getElementById('profileDrawer');
+    const drawerOverlay = document.getElementById('drawerOverlay');
+    const drawerClose = document.getElementById('drawerClose');
+
+    // ==========================================
+    // SIDE MENU COLLAPSE
+    // ==========================================
+    const menuToggle = document.getElementById('menuToggle');
+    const appLayout = document.querySelector('swp-app-layout');
+
+    menuToggle.addEventListener('click', () => {
+      appLayout.classList.toggle('menu-collapsed');
+    });
+
+    // ==========================================
+    // MENU TOOLTIPS (Popover API)
+    // ==========================================
+    const menuTooltip = document.getElementById('menuTooltip');
+    const menuItems = document.querySelectorAll('swp-side-menu-item[data-tooltip]');
+
+    menuItems.forEach(item => {
+      item.addEventListener('mouseenter', () => {
+        if (!appLayout.classList.contains('menu-collapsed')) return;
+
+        const rect = item.getBoundingClientRect();
+        menuTooltip.textContent = item.dataset.tooltip;
+        menuTooltip.style.left = `${rect.right + 8}px`;
+        menuTooltip.style.top = `${rect.top + rect.height / 2}px`;
+        menuTooltip.style.transform = 'translateY(-50%)';
+        menuTooltip.showPopover();
+      });
+
+      item.addEventListener('mouseleave', () => {
+        menuTooltip.hidePopover();
+      });
+    });
+
+    // ==========================================
+    // DRAWERS (Profile, Notifications & Todo)
+    // ==========================================
+    const notificationDrawer = document.getElementById('notificationDrawer');
+    const notificationDrawerClose = document.getElementById('notificationDrawerClose');
+    const notificationsBtn = document.getElementById('notificationsBtn');
+    const markAllReadBtn = document.getElementById('markAllRead');
+    const notificationBadge = document.querySelector('swp-notification-badge');
+
+    const todoDrawer = document.getElementById('todoDrawer');
+    const todoDrawerBack = document.getElementById('todoDrawerBack');
+    const openTodoDrawerBtn = document.getElementById('openTodoDrawer');
+    const addTodoBtn = document.getElementById('addTodoBtn');
+
+    const newTodoDrawer = document.getElementById('newTodoDrawer');
+    const newTodoDrawerBack = document.getElementById('newTodoDrawerBack');
+    const cancelNewTodoBtn = document.getElementById('cancelNewTodo');
+    const saveNewTodoBtn = document.getElementById('saveNewTodo');
+
+    // Open profile drawer
+    function openProfileDrawer() {
+      closeTodoDrawer();
+      closeNotificationDrawer();
+      profileDrawer.classList.add('open');
+      drawerOverlay.classList.add('open');
+      document.body.style.overflow = 'hidden';
+    }
+
+    // Close profile drawer
+    function closeProfileDrawer() {
+      profileDrawer.classList.remove('open');
+      drawerOverlay.classList.remove('open');
+      document.body.style.overflow = '';
+    }
+
+    // Open notification drawer
+    function openNotificationDrawer() {
+      closeTodoDrawer();
+      closeProfileDrawer();
+      notificationDrawer.classList.add('open');
+      drawerOverlay.classList.add('open');
+      document.body.style.overflow = 'hidden';
+    }
+
+    // Close notification drawer
+    function closeNotificationDrawer() {
+      notificationDrawer.classList.remove('open');
+      drawerOverlay.classList.remove('open');
+      document.body.style.overflow = '';
+    }
+
+    // Open todo drawer (on top of profile drawer)
+    function openTodoDrawer() {
+      todoDrawer.classList.add('open');
+    }
+
+    // Close todo drawer
+    function closeTodoDrawer() {
+      todoDrawer.classList.remove('open');
+      closeNewTodoDrawer();
+    }
+
+    // Open new todo drawer (on top of todo drawer)
+    function openNewTodoDrawer() {
+      newTodoDrawer.classList.add('open');
+    }
+
+    // Close new todo drawer
+    function closeNewTodoDrawer() {
+      newTodoDrawer.classList.remove('open');
+    }
+
+    // Close all drawers
+    function closeAllDrawers() {
+      closeProfileDrawer();
+      closeNotificationDrawer();
+      closeTodoDrawer();
+    }
+
+    // Profile trigger opens drawer
+    profileTrigger.addEventListener('click', openProfileDrawer);
+
+    // Notifications button opens drawer
+    notificationsBtn.addEventListener('click', openNotificationDrawer);
+
+    // Todo drawer from profile
+    openTodoDrawerBtn.addEventListener('click', openTodoDrawer);
+
+    // Todo drawer back button (returns to profile)
+    todoDrawerBack.addEventListener('click', closeTodoDrawer);
+
+    // Add todo button opens new todo drawer
+    addTodoBtn.addEventListener('click', openNewTodoDrawer);
+
+    // New todo drawer back/cancel buttons
+    newTodoDrawerBack.addEventListener('click', closeNewTodoDrawer);
+    cancelNewTodoBtn.addEventListener('click', closeNewTodoDrawer);
+
+    // Save new todo (demo - just closes drawer)
+    saveNewTodoBtn.addEventListener('click', () => {
+      // In a real app, save the todo here
+      closeNewTodoDrawer();
+    });
+
+    // Visibility toggle
+    const visibilityOptions = document.querySelectorAll('swp-visibility-option');
+    visibilityOptions.forEach(option => {
+      option.addEventListener('click', () => {
+        visibilityOptions.forEach(o => o.classList.remove('active'));
+        option.classList.add('active');
+      });
+    });
+
+    // Close on overlay click
+    drawerOverlay.addEventListener('click', closeAllDrawers);
+
+    // Close on X buttons
+    drawerClose.addEventListener('click', closeProfileDrawer);
+    notificationDrawerClose.addEventListener('click', closeNotificationDrawer);
+
+    // Close on Escape
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') closeAllDrawers();
+    });
+
+    // Mark all as read
+    markAllReadBtn.addEventListener('click', () => {
+      const unreadItems = notificationDrawer.querySelectorAll('swp-notification-item[data-unread="true"]');
+      unreadItems.forEach(item => {
+        item.removeAttribute('data-unread');
+      });
+      notificationBadge.style.display = 'none';
+    });
+
+    // ==========================================
+    // TODO FUNCTIONALITY
+    // ==========================================
+    // Toggle todo completion
+    todoDrawer.addEventListener('click', (e) => {
+      const todoItem = e.target.closest('swp-todo-item');
+      const checkbox = e.target.closest('swp-todo-checkbox');
+
+      if (checkbox && todoItem) {
+        const isCompleted = todoItem.dataset.completed === 'true';
+        if (isCompleted) {
+          todoItem.removeAttribute('data-completed');
+        } else {
+          todoItem.dataset.completed = 'true';
+        }
+      }
+
+      // Toggle section collapse
+      const sectionHeader = e.target.closest('swp-todo-section-header');
+      if (sectionHeader) {
+        const section = sectionHeader.closest('swp-todo-section');
+        section.classList.toggle('collapsed');
+      }
+    });
+
+    // Theme toggle functionality
+    const themeOptions = document.querySelectorAll('swp-theme-option');
+
+    function isDarkMode() {
+      return root.classList.contains('dark-mode') ||
+        (window.matchMedia('(prefers-color-scheme: dark)').matches && !root.classList.contains('light-mode'));
+    }
+
+    function updateThemeToggle() {
+      const darkActive = isDarkMode();
+      themeOptions.forEach(option => {
+        const theme = option.dataset.theme;
+        if ((theme === 'dark' && darkActive) || (theme === 'light' && !darkActive)) {
+          option.classList.add('active');
+        } else {
+          option.classList.remove('active');
+        }
+      });
+    }
+
+    function setTheme(theme) {
+      if (theme === 'dark') {
+        root.classList.add('dark-mode');
+        root.classList.remove('light-mode');
+      } else {
+        root.classList.add('light-mode');
+        root.classList.remove('dark-mode');
+      }
+      updateThemeToggle();
+    }
+
+    // Initialize theme toggle state
+    updateThemeToggle();
+
+    // Theme option clicks
+    themeOptions.forEach(option => {
+      option.addEventListener('click', () => {
+        setTheme(option.dataset.theme);
+      });
+    });
+
+    // Keyboard shortcut for search (Cmd/Ctrl + K)
+    document.addEventListener('keydown', (e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === 'k') {
+        e.preventDefault();
+        document.getElementById('globalSearch').focus();
+      }
+    });
+
+    // ==========================================
+    // LOCK SCREEN
+    // ==========================================
+    const lockScreen = document.getElementById('lockScreen');
+    const pinInput = document.getElementById('pinInput');
+    const pinKeypad = document.getElementById('pinKeypad');
+    const lockBtn = document.querySelector('swp-side-menu-action.lock');
+    const pinDigits = pinInput.querySelectorAll('swp-pin-digit');
+    const lockTimeEl = document.getElementById('lockTime');
+
+    let currentPin = '';
+
+    // Show lock screen
+    function showLockScreen() {
+      closeAllDrawers();
+      lockScreen.classList.add('active');
+      document.body.style.overflow = 'hidden';
+      currentPin = '';
+      updatePinDisplay();
+
+      // Set lock time
+      const now = new Date();
+      const hours = now.getHours().toString().padStart(2, '0');
+      const minutes = now.getMinutes().toString().padStart(2, '0');
+      lockTimeEl.textContent = `Låst kl. ${hours}:${minutes}`;
+    }
+
+    // Hide lock screen
+    function hideLockScreen() {
+      lockScreen.classList.remove('active');
+      document.body.style.overflow = '';
+      currentPin = '';
+      updatePinDisplay();
+    }
+
+    // Update PIN display
+    function updatePinDisplay() {
+      pinDigits.forEach((digit, index) => {
+        digit.classList.remove('filled', 'error');
+        if (index < currentPin.length) {
+          digit.textContent = '•';
+          digit.classList.add('filled');
+        } else {
+          digit.textContent = '';
+        }
+      });
+    }
+
+    // Show error animation
+    function showPinError() {
+      pinDigits.forEach(digit => {
+        digit.classList.add('error');
+      });
+      setTimeout(() => {
+        currentPin = '';
+        updatePinDisplay();
+      }, 400);
+    }
+
+    const correctPin = '3911';
+
+    // Handle PIN key press
+    function handlePinKey(key) {
+      if (key === 'backspace') {
+        currentPin = currentPin.slice(0, -1);
+        updatePinDisplay();
+        return;
+      }
+
+      if (currentPin.length >= 4) return;
+
+      currentPin += key;
+      updatePinDisplay();
+
+      // Check if 4 digits entered
+      if (currentPin.length === 4) {
+        setTimeout(() => {
+          if (currentPin === correctPin) {
+            hideLockScreen();
+          } else {
+            showPinError();
+          }
+        }, 200);
+      }
+    }
+
+    // Lock button click
+    lockBtn.addEventListener('click', showLockScreen);
+
+    // Keypad clicks
+    pinKeypad.addEventListener('click', (e) => {
+      const key = e.target.closest('swp-pin-key');
+      if (!key || key.classList.contains('empty')) return;
+      handlePinKey(key.dataset.key);
+    });
+
+    // Keyboard support for PIN entry
+    document.addEventListener('keydown', (e) => {
+      // Alt+L to lock screen
+      if (e.altKey && e.key === 'x') {
+        e.preventDefault();
+        showLockScreen();
+        return;
+      }
+
+      if (!lockScreen.classList.contains('active')) return;
+
+      if (e.key >= '0' && e.key <= '9') {
+        handlePinKey(e.key);
+      } else if (e.key === 'Backspace') {
+        handlePinKey('backspace');
+      }
+    });
+
+    // ==========================================
+    // DASHBOARD FUNCTIONALITY
+    // ==========================================
+    // Update current time
+    function updateDashboardTime() {
+      const now = new Date();
+      const hours = String(now.getHours()).padStart(2, '0');
+      const minutes = String(now.getMinutes()).padStart(2, '0');
+      const timeEl = document.querySelector('swp-current-time swp-time');
+      if (timeEl) {
+        timeEl.textContent = `${hours}:${minutes}`;
+      }
+    }
+
+    updateDashboardTime();
+    setInterval(updateDashboardTime, 60000);
+
+    // Click handlers for attention items
+    document.querySelectorAll('swp-attention-action').forEach(action => {
+      action.addEventListener('click', (e) => {
+        e.stopPropagation();
+        alert('Handling: ' + action.textContent);
+      });
+    });
+
+    // Click handlers for bookings
+    document.querySelectorAll('swp-booking-item').forEach(item => {
+      item.addEventListener('click', () => {
+        const service = item.querySelector('swp-booking-service').textContent;
+        alert('Åbn booking: ' + service);
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-leverandoer.html b/.workbench/POC/poc-leverandoer.html
new file mode 100644
index 0000000..26fe80f
--- /dev/null
+++ b/.workbench/POC/poc-leverandoer.html
@@ -0,0 +1,1367 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Leverandør - Beauty Group Denmark</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* Dark mode - følger system preference ELLER manuel toggle */
+    @media (prefers-color-scheme: dark) {
+      :root:not(.light-mode) {
+        --color-surface: #1e1e1e;
+        --color-background: #121212;
+        --color-background-hover: #2a2a2a;
+        --color-background-alt: #1a1a1a;
+        --color-border: #333;
+        --color-text: #e0e0e0;
+        --color-text-secondary: #999;
+        --color-teal: #26a69a;
+        --color-blue: #42a5f5;
+        --color-red: #ef5350;
+        --color-amber: #ffb74d;
+        --color-purple: #a78bfa;
+        --color-green: #66bb6a;
+      }
+    }
+
+    /* Manuel dark mode override */
+    :root.dark-mode {
+      --color-surface: #1e1e1e;
+      --color-background: #121212;
+      --color-background-hover: #2a2a2a;
+      --color-background-alt: #1a1a1a;
+      --color-border: #333;
+      --color-text: #e0e0e0;
+      --color-text-secondary: #999;
+      --color-teal: #26a69a;
+      --color-blue: #42a5f5;
+      --color-red: #ef5350;
+      --color-amber: #ffb74d;
+      --color-purple: #a78bfa;
+      --color-green: #66bb6a;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    a {
+      color: var(--color-teal);
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-back-link {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-back-link:hover {
+      color: var(--color-teal);
+    }
+
+    swp-back-link svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-page-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px;
+    }
+
+    @media (max-width: 900px) {
+      .grid-2 { grid-template-columns: 1fr; }
+    }
+
+    /* ==========================================
+       CARDS
+       ========================================== */
+    swp-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+      margin-bottom: 20px;
+      overflow: hidden;
+    }
+
+    swp-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-card-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-card-hint {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-card-body {
+      display: block;
+      padding: 20px;
+    }
+
+    /* ==========================================
+       BUTTONS
+       ========================================== */
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-btn.danger {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-red);
+    }
+
+    swp-btn.danger:hover {
+      background: color-mix(in srgb, var(--color-red) 10%, white);
+    }
+
+    swp-btn.small {
+      padding: 6px 12px;
+      font-size: 12px;
+    }
+
+    swp-btn.icon-only {
+      padding: 10px;
+    }
+
+    swp-btn.icon-only svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    /* ==========================================
+       FORM ELEMENTS
+       ========================================== */
+    swp-form-grid {
+      display: grid;
+      gap: 16px;
+    }
+
+    swp-form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    swp-form-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    swp-form-field.full {
+      grid-column: 1 / -1;
+    }
+
+    swp-form-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+    }
+
+    swp-form-field input,
+    swp-form-field select,
+    swp-form-field textarea {
+      padding: 10px 12px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      color: var(--color-text);
+    }
+
+    swp-form-field input:focus,
+    swp-form-field select:focus,
+    swp-form-field textarea:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-form-field textarea {
+      min-height: 100px;
+      resize: vertical;
+    }
+
+    swp-form-field input.mono {
+      font-family: var(--font-mono);
+    }
+
+    /* ==========================================
+       TOGGLE SLIDER (Ja/Nej)
+       ========================================== */
+    swp-toggle-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 0;
+    }
+
+    swp-toggle-label {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    swp-toggle-slider {
+      display: inline-flex;
+      width: fit-content;
+      background: var(--color-background);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      position: relative;
+      cursor: pointer;
+    }
+
+    swp-toggle-slider::before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: calc(50% - 4px);
+      height: calc(100% - 4px);
+      background: color-mix(in srgb, var(--color-green) 18%, white);
+      border-radius: 4px;
+      transition: transform 200ms ease, background 200ms ease;
+    }
+
+    swp-toggle-slider[data-value="no"]::before {
+      transform: translateX(100%);
+      background: color-mix(in srgb, var(--color-red) 18%, white);
+    }
+
+    swp-toggle-option {
+      position: relative;
+      z-index: 1;
+      padding: 5px 16px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      transition: color 200ms ease;
+      user-select: none;
+    }
+
+    swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
+      color: var(--color-green);
+      font-weight: 600;
+    }
+
+    swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
+      color: var(--color-red);
+      font-weight: 600;
+    }
+
+    /* ==========================================
+       CONTACTS TABLE
+       ========================================== */
+    swp-contacts-table {
+      display: block;
+      width: 100%;
+    }
+
+    swp-contacts-header,
+    swp-contacts-row {
+      display: grid;
+      grid-template-columns: 1fr 100px 1fr 100px 60px;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-contacts-header {
+      padding: 10px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-contacts-header span {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-contacts-row {
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-contacts-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-contacts-row span {
+      font-size: 14px;
+    }
+
+    swp-contacts-row span.muted {
+      color: var(--color-text-secondary);
+      font-size: 13px;
+    }
+
+    swp-contacts-actions {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+
+    swp-contacts-actions button {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: var(--color-background);
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 150ms ease;
+    }
+
+    swp-contacts-actions button:hover {
+      background: var(--color-border);
+    }
+
+    swp-contacts-actions button svg {
+      width: 14px;
+      height: 14px;
+      fill: var(--color-text-secondary);
+    }
+
+    swp-add-contact {
+      display: flex;
+      justify-content: center;
+      padding-top: 16px;
+    }
+
+    /* ==========================================
+       STATS ROW
+       ========================================== */
+    swp-stats-row {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    swp-stat-box {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+    }
+
+    swp-stat-box swp-stat-value {
+      font-size: 22px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-stat-box swp-stat-label {
+      font-size: 11px;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-stat-box.highlight swp-stat-value {
+      color: var(--color-teal);
+    }
+
+    /* ==========================================
+       PRODUCT LIST
+       ========================================== */
+    swp-product-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-product-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 12px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    swp-product-item:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-product-name {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-product-price {
+      font-size: 13px;
+      font-family: var(--font-mono);
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       ORDER TABLE
+       ========================================== */
+    swp-order-table {
+      display: block;
+      width: 100%;
+    }
+
+    swp-order-header,
+    swp-order-row {
+      display: grid;
+      grid-template-columns: 2fr 2fr 1fr 1fr 110px 30px;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-order-header {
+      padding: 10px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-order-header span {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-order-header span.right {
+      text-align: right;
+    }
+
+    swp-order-row {
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    swp-order-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-order-row:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-order-row span {
+      font-size: 13px;
+    }
+
+    swp-order-row span.mono {
+      font-family: var(--font-mono);
+    }
+
+    swp-order-row span.right {
+      text-align: right;
+    }
+
+    /* ==========================================
+       STATUS BADGE
+       ========================================== */
+    swp-status-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 12px;
+    }
+
+    swp-status-badge.delivered {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+    }
+
+    swp-status-badge.pending {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b45309;
+    }
+
+    swp-status-badge.cancelled {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+      color: var(--color-red);
+    }
+
+    /* ==========================================
+       ROW ARROW
+       ========================================== */
+    swp-row-arrow {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    swp-row-arrow svg {
+      width: 18px;
+      height: 18px;
+      fill: var(--color-text-secondary);
+      transition: transform 150ms ease;
+    }
+
+    swp-order-row:hover swp-row-arrow svg {
+      transform: translateX(4px);
+      fill: var(--color-teal);
+    }
+
+    /* ==========================================
+       SECTION TITLE
+       ========================================== */
+    swp-section-title {
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      margin-bottom: 12px;
+      display: block;
+    }
+
+    /* ==========================================
+       DETAIL DRAWER (samme mønster som poc-detail-drawer.html)
+       ========================================== */
+    swp-detail-drawer-overlay {
+      position: fixed;
+      inset: 0;
+      background: rgba(0, 0, 0, 0.2);
+      opacity: 0;
+      visibility: hidden;
+      transition: opacity 200ms ease, visibility 200ms ease;
+      z-index: 900;
+    }
+
+    swp-detail-drawer-overlay.open {
+      opacity: 1;
+      visibility: visible;
+    }
+
+    swp-detail-drawer {
+      position: fixed;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      width: 380px;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      box-shadow: -2px 0 8px rgba(0, 0, 0, 0.1);
+      transform: translateX(100%);
+      transition: transform 200ms ease;
+      display: flex;
+      flex-direction: column;
+      z-index: 1000;
+    }
+
+    swp-detail-drawer.open {
+      transform: translateX(0);
+    }
+
+    swp-detail-drawer-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-detail-drawer-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-detail-drawer-close {
+      width: 28px;
+      height: 28px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border: none;
+      background: transparent;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    swp-detail-drawer-close:hover {
+      background: var(--color-border);
+    }
+
+    swp-detail-drawer-close svg {
+      width: 16px;
+      height: 16px;
+      fill: var(--color-text-secondary);
+    }
+
+    swp-detail-drawer-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    swp-detail-drawer-section {
+      display: block;
+    }
+
+    swp-detail-drawer-section-title {
+      font-size: 11px;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      margin-bottom: 10px;
+      display: block;
+    }
+
+    swp-detail-drawer-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 12px;
+    }
+
+    swp-detail-drawer-item {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-detail-drawer-item.full {
+      grid-column: 1 / -1;
+    }
+
+    swp-detail-drawer-label {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-detail-drawer-value {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-detail-drawer-value.mono {
+      font-family: var(--font-mono);
+    }
+
+    swp-detail-drawer-value.large {
+      font-size: 20px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+    }
+
+    swp-detail-drawer-value.green {
+      color: var(--color-green);
+    }
+
+    swp-detail-drawer-stats {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 10px;
+    }
+
+    swp-detail-drawer-stat {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+      padding: 10px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      text-align: center;
+    }
+
+    swp-detail-drawer-stat-value {
+      font-size: 16px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-detail-drawer-stat-label {
+      font-size: 10px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-detail-drawer-footer {
+      display: flex;
+      gap: 10px;
+      padding: 12px 16px;
+      border-top: 1px solid var(--color-border);
+      background: var(--color-surface);
+    }
+
+    swp-detail-drawer-footer swp-btn {
+      flex: 1;
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-back-link onclick="location.href='poc-leverandoerer.html'">
+        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+        Leverandører
+      </swp-back-link>
+      <swp-page-title>Beauty Group Denmark</swp-page-title>
+    </swp-topbar-left>
+    <swp-topbar-right>
+      <swp-btn class="secondary icon-only" id="themeToggle" title="Skift tema">
+        <svg id="sunIcon" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/></svg>
+        <svg id="moonIcon" viewBox="0 0 24 24" style="display:none"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/></svg>
+      </swp-btn>
+      <swp-btn class="danger">
+        <svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+        Slet
+      </swp-btn>
+      <swp-btn class="primary">
+        <svg viewBox="0 0 24 24"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>
+        Gem ændringer
+      </swp-btn>
+    </swp-topbar-right>
+  </swp-topbar>
+
+  <swp-page-container>
+    <div class="grid-2">
+      <!-- VENSTRE KOLONNE -->
+      <div>
+        <!-- Virksomhedsoplysninger -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Virksomhedsoplysninger</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-form-grid>
+              <swp-form-field class="full">
+                <swp-form-label>Firmanavn</swp-form-label>
+                <input type="text" value="Beauty Group Denmark" />
+              </swp-form-field>
+
+              <swp-form-field class="full">
+                <swp-form-label>CVR-nummer</swp-form-label>
+                <input type="text" class="mono" value="12345678" />
+              </swp-form-field>
+
+              <swp-form-field class="full">
+                <swp-form-label>Adresse</swp-form-label>
+                <input type="text" value="Industriparken 42" />
+              </swp-form-field>
+
+              <swp-form-row>
+                <swp-form-field>
+                  <swp-form-label>Postnr</swp-form-label>
+                  <input type="text" value="2750" />
+                </swp-form-field>
+                <swp-form-field>
+                  <swp-form-label>By</swp-form-label>
+                  <input type="text" value="Ballerup" />
+                </swp-form-field>
+              </swp-form-row>
+
+              <swp-form-row>
+                <swp-form-field>
+                  <swp-form-label>Email</swp-form-label>
+                  <input type="email" value="ordre@beautygroup.dk" />
+                </swp-form-field>
+                <swp-form-field>
+                  <swp-form-label>Telefon</swp-form-label>
+                  <input type="tel" value="70 20 30 40" />
+                </swp-form-field>
+              </swp-form-row>
+
+              <swp-form-field class="full">
+                <swp-form-label>Website</swp-form-label>
+                <input type="url" value="www.beautygroup.dk" />
+              </swp-form-field>
+
+              <swp-toggle-row>
+                <swp-toggle-label>Leverandør aktiv</swp-toggle-label>
+                <swp-toggle-slider data-value="yes">
+                  <swp-toggle-option>Ja</swp-toggle-option>
+                  <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+              </swp-toggle-row>
+            </swp-form-grid>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Kontaktpersoner -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Kontaktpersoner</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-contacts-table>
+              <swp-contacts-header>
+                <span>Navn</span>
+                <span>Rolle</span>
+                <span>Email</span>
+                <span>Telefon</span>
+                <span></span>
+              </swp-contacts-header>
+              <swp-contacts-row>
+                <span>Lars Hansen</span>
+                <span class="muted">Salgschef</span>
+                <span class="muted">lars@beautygroup.dk</span>
+                <span class="muted">20 30 40 50</span>
+                <swp-contacts-actions>
+                  <button title="Rediger"><svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg></button>
+                  <button title="Slet"><svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg></button>
+                </swp-contacts-actions>
+              </swp-contacts-row>
+              <swp-contacts-row>
+                <span>Mette Sørensen</span>
+                <span class="muted">Kundeservice</span>
+                <span class="muted">mette@beautygroup.dk</span>
+                <span class="muted">20 30 40 51</span>
+                <swp-contacts-actions>
+                  <button title="Rediger"><svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg></button>
+                  <button title="Slet"><svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg></button>
+                </swp-contacts-actions>
+              </swp-contacts-row>
+            </swp-contacts-table>
+            <swp-add-contact>
+              <swp-btn class="secondary small">+ Tilføj kontaktperson</swp-btn>
+            </swp-add-contact>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Betalingsbetingelser -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Betalingsbetingelser</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-form-grid>
+              <swp-form-field>
+                <swp-form-label>Betalingsfrist</swp-form-label>
+                <select>
+                  <option>Netto 8 dage</option>
+                  <option>Netto 14 dage</option>
+                  <option selected>Netto 30 dage</option>
+                </select>
+              </swp-form-field>
+
+              <swp-form-field>
+                <swp-form-label>Kredit limit</swp-form-label>
+                <input type="text" class="mono" value="50.000 DKK" placeholder="f.eks. 50.000 DKK eller 5.000 EUR" />
+              </swp-form-field>
+            </swp-form-grid>
+          </swp-card-body>
+        </swp-card>
+      </div>
+
+      <!-- HØJRE KOLONNE -->
+      <div>
+        <!-- Nøgletal -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Nøgletal</swp-card-title>
+            <swp-card-hint>2024</swp-card-hint>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-stats-row>
+              <swp-stat-box class="highlight">
+                <swp-stat-value>24</swp-stat-value>
+                <swp-stat-label>Produkter</swp-stat-label>
+              </swp-stat-box>
+              <swp-stat-box>
+                <swp-stat-value>145.230 DKK</swp-stat-value>
+                <swp-stat-label>Indkøb i år</swp-stat-label>
+              </swp-stat-box>
+              <swp-stat-box>
+                <swp-stat-value>12</swp-stat-value>
+                <swp-stat-label>Ordrer i år</swp-stat-label>
+              </swp-stat-box>
+            </swp-stats-row>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Indkøbshistorik -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Indkøbshistorik</swp-card-title>
+            <swp-card-hint>Sidste 6 måneder</swp-card-hint>
+          </swp-card-header>
+          <swp-card-body>
+            <div id="purchaseChart"></div>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Produkter fra leverandør -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Produkter fra leverandør</swp-card-title>
+            <swp-card-hint>24 produkter</swp-card-hint>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-product-list>
+              <swp-product-item onclick="openDrawer('Redken Acidic Bonding Concentrate Serum 100ml', 'RDK-ABC-100', '884486532879', 'Hårpleje', '195,00', '379,00', 10, 32, '12.128')">
+                <swp-product-name>Redken Acidic Bonding Concentrate Serum 100ml</swp-product-name>
+                <swp-product-price>195 DKK</swp-product-price>
+              </swp-product-item>
+              <swp-product-item onclick="openDrawer('Redken All Soft Shampoo 300ml', 'RDK-ALS-300', '884486456123', 'Hårpleje', '145,00', '249,00', 4, 18, '4.482')">
+                <swp-product-name>Redken All Soft Shampoo 300ml</swp-product-name>
+                <swp-product-price>145 DKK</swp-product-price>
+              </swp-product-item>
+              <swp-product-item onclick="openDrawer('Redken Extreme Shampoo 300ml', 'RDK-EXT-300', '884486789012', 'Hårpleje', '145,00', '249,00', 8, 24, '5.976')">
+                <swp-product-name>Redken Extreme Shampoo 300ml</swp-product-name>
+                <swp-product-price>145 DKK</swp-product-price>
+              </swp-product-item>
+              <swp-product-item onclick="openDrawer('Redken Color Extend Magnetics Shampoo 300ml', 'RDK-CEM-300', '884486345678', 'Hårpleje', '155,00', '269,00', 6, 15, '4.035')">
+                <swp-product-name>Redken Color Extend Magnetics Shampoo 300ml</swp-product-name>
+                <swp-product-price>155 DKK</swp-product-price>
+              </swp-product-item>
+              <swp-product-item onclick="openDrawer('Redken One United 150ml', 'RDK-ONU-150', '884486901234', 'Styling', '175,00', '299,00', 12, 28, '8.372')">
+                <swp-product-name>Redken One United 150ml</swp-product-name>
+                <swp-product-price>175 DKK</swp-product-price>
+              </swp-product-item>
+            </swp-product-list>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Noter -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Noter</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-form-field class="full">
+              <textarea placeholder="Interne noter om leverandøren...">God leverandør med hurtig levering. Kontakt Lars for store ordrer - kan ofte give rabat ved køb over 10.000 kr.</textarea>
+            </swp-form-field>
+          </swp-card-body>
+        </swp-card>
+      </div>
+    </div>
+
+    <!-- Ordrehistorik (full width) -->
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>Ordrehistorik</swp-card-title>
+        <swp-card-hint>Seneste ordrer</swp-card-hint>
+      </swp-card-header>
+      <swp-card-body>
+        <swp-order-table>
+          <swp-order-header>
+            <span>Dato</span>
+            <span>Ordrenr</span>
+            <span class="right">Antal varer</span>
+            <span class="right">Beløb</span>
+            <span>Status</span>
+            <span></span>
+          </swp-order-header>
+          <swp-order-row>
+            <span>15. december 2024</span>
+            <span class="mono">BGD-2024-0847</span>
+            <span class="right">12</span>
+            <span class="right mono">18.450 DKK</span>
+            <swp-status-badge class="delivered">Leveret</swp-status-badge>
+            <swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow>
+          </swp-order-row>
+          <swp-order-row>
+            <span>28. november 2024</span>
+            <span class="mono">BGD-2024-0812</span>
+            <span class="right">8</span>
+            <span class="right mono">12.340 DKK</span>
+            <swp-status-badge class="delivered">Leveret</swp-status-badge>
+            <swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow>
+          </swp-order-row>
+          <swp-order-row>
+            <span>10. november 2024</span>
+            <span class="mono">BGD-2024-0798</span>
+            <span class="right">15</span>
+            <span class="right mono">24.680 DKK</span>
+            <swp-status-badge class="delivered">Leveret</swp-status-badge>
+            <swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow>
+          </swp-order-row>
+          <swp-order-row>
+            <span>22. oktober 2024</span>
+            <span class="mono">BGD-2024-0756</span>
+            <span class="right">6</span>
+            <span class="right mono">8.920 DKK</span>
+            <swp-status-badge class="cancelled">Annulleret</swp-status-badge>
+            <swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow>
+          </swp-order-row>
+          <swp-order-row>
+            <span>5. oktober 2024</span>
+            <span class="mono">BGD-2024-0734</span>
+            <span class="right">20</span>
+            <span class="right mono">32.150 DKK</span>
+            <swp-status-badge class="delivered">Leveret</swp-status-badge>
+            <swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow>
+          </swp-order-row>
+        </swp-order-table>
+      </swp-card-body>
+    </swp-card>
+  </swp-page-container>
+
+  <!-- Product Detail Drawer -->
+  <swp-detail-drawer-overlay id="drawerOverlay" onclick="closeDrawer()"></swp-detail-drawer-overlay>
+  <swp-detail-drawer id="productDrawer">
+    <swp-detail-drawer-header>
+      <swp-detail-drawer-title id="drawerTitle">Produktnavn</swp-detail-drawer-title>
+      <swp-detail-drawer-close onclick="closeDrawer()">
+        <svg viewBox="0 0 24 24"><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+      </swp-detail-drawer-close>
+    </swp-detail-drawer-header>
+    <swp-detail-drawer-content>
+      <swp-detail-drawer-section>
+        <swp-detail-drawer-section-title>Basisoplysninger</swp-detail-drawer-section-title>
+        <swp-detail-drawer-grid>
+          <swp-detail-drawer-item>
+            <swp-detail-drawer-label>Varenummer</swp-detail-drawer-label>
+            <swp-detail-drawer-value class="mono" id="drawerSku">RDK-ABC-100</swp-detail-drawer-value>
+          </swp-detail-drawer-item>
+          <swp-detail-drawer-item>
+            <swp-detail-drawer-label>EAN</swp-detail-drawer-label>
+            <swp-detail-drawer-value class="mono" id="drawerEan">884486532879</swp-detail-drawer-value>
+          </swp-detail-drawer-item>
+          <swp-detail-drawer-item class="full">
+            <swp-detail-drawer-label>Kategori</swp-detail-drawer-label>
+            <swp-detail-drawer-value id="drawerCategory">Hårpleje</swp-detail-drawer-value>
+          </swp-detail-drawer-item>
+        </swp-detail-drawer-grid>
+      </swp-detail-drawer-section>
+
+      <swp-detail-drawer-section>
+        <swp-detail-drawer-section-title>Pris & Avance</swp-detail-drawer-section-title>
+        <swp-detail-drawer-grid>
+          <swp-detail-drawer-item>
+            <swp-detail-drawer-label>Indkøbspris (ekskl. moms)</swp-detail-drawer-label>
+            <swp-detail-drawer-value class="mono" id="drawerPurchasePrice">195,00 DKK</swp-detail-drawer-value>
+          </swp-detail-drawer-item>
+          <swp-detail-drawer-item>
+            <swp-detail-drawer-label>Salgspris (inkl. moms)</swp-detail-drawer-label>
+            <swp-detail-drawer-value class="mono" id="drawerSalePrice">379,00 DKK</swp-detail-drawer-value>
+          </swp-detail-drawer-item>
+          <swp-detail-drawer-item>
+            <swp-detail-drawer-label>Avance</swp-detail-drawer-label>
+            <swp-detail-drawer-value class="large green" id="drawerMargin">108,20 DKK</swp-detail-drawer-value>
+          </swp-detail-drawer-item>
+          <swp-detail-drawer-item>
+            <swp-detail-drawer-label>Avance %</swp-detail-drawer-label>
+            <swp-detail-drawer-value class="large green" id="drawerMarginPct">35,7%</swp-detail-drawer-value>
+          </swp-detail-drawer-item>
+        </swp-detail-drawer-grid>
+      </swp-detail-drawer-section>
+
+      <swp-detail-drawer-section>
+        <swp-detail-drawer-section-title>Statistik (6 mdr)</swp-detail-drawer-section-title>
+        <swp-detail-drawer-stats>
+          <swp-detail-drawer-stat>
+            <swp-detail-drawer-stat-value id="drawerStock">10</swp-detail-drawer-stat-value>
+            <swp-detail-drawer-stat-label>På lager</swp-detail-drawer-stat-label>
+          </swp-detail-drawer-stat>
+          <swp-detail-drawer-stat>
+            <swp-detail-drawer-stat-value id="drawerSold">32</swp-detail-drawer-stat-value>
+            <swp-detail-drawer-stat-label>Solgt</swp-detail-drawer-stat-label>
+          </swp-detail-drawer-stat>
+          <swp-detail-drawer-stat>
+            <swp-detail-drawer-stat-value id="drawerRevenue">12.128 DKK</swp-detail-drawer-stat-value>
+            <swp-detail-drawer-stat-label>Omsætning</swp-detail-drawer-stat-label>
+          </swp-detail-drawer-stat>
+        </swp-detail-drawer-stats>
+      </swp-detail-drawer-section>
+    </swp-detail-drawer-content>
+    <swp-detail-drawer-footer>
+      <swp-btn class="secondary" onclick="location.href='poc-produkt.html'">
+        <svg viewBox="0 0 24 24"><path d="M19 19H5V5h7V3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2v-7h-2v7zM14 3v2h3.59l-9.83 9.83 1.41 1.41L19 6.41V10h2V3h-7z"/></svg>
+        Åbn produkt
+      </swp-btn>
+    </swp-detail-drawer-footer>
+  </swp-detail-drawer>
+
+  <script type="module">
+    import { createChart } from '../node_modules/@sevenweirdpeople/swp-charting/dist/swp-charting.js';
+
+    // Toggle slider (Ja/Nej)
+    document.querySelectorAll('swp-toggle-slider').forEach(slider => {
+      const options = slider.querySelectorAll('swp-toggle-option');
+      options.forEach((option, index) => {
+        option.addEventListener('click', () => {
+          slider.dataset.value = index === 0 ? 'yes' : 'no';
+        });
+      });
+    });
+
+    // Product Drawer functions
+    window.openDrawer = function(name, sku, ean, category, purchasePrice, salePrice, stock, sold, revenue) {
+      // Calculate margin
+      const purchase = parseFloat(purchasePrice.replace(',', '.'));
+      const sale = parseFloat(salePrice.replace(',', '.'));
+      const saleExMoms = sale / 1.25;
+      const margin = saleExMoms - purchase;
+      const marginPct = (margin / saleExMoms) * 100;
+
+      // Update drawer content
+      document.getElementById('drawerTitle').textContent = name;
+      document.getElementById('drawerSku').textContent = sku;
+      document.getElementById('drawerEan').textContent = ean;
+      document.getElementById('drawerCategory').textContent = category;
+      document.getElementById('drawerPurchasePrice').textContent = purchasePrice + ' DKK';
+      document.getElementById('drawerSalePrice').textContent = salePrice + ' DKK';
+      document.getElementById('drawerMargin').textContent = margin.toFixed(2).replace('.', ',') + ' DKK';
+      document.getElementById('drawerMarginPct').textContent = marginPct.toFixed(1).replace('.', ',') + '%';
+      document.getElementById('drawerStock').textContent = stock;
+      document.getElementById('drawerSold').textContent = sold;
+      document.getElementById('drawerRevenue').textContent = revenue + ' DKK';
+
+      // Open drawer
+      document.getElementById('drawerOverlay').classList.add('open');
+      document.getElementById('productDrawer').classList.add('open');
+      document.body.style.overflow = 'hidden';
+    };
+
+    window.closeDrawer = function() {
+      document.getElementById('drawerOverlay').classList.remove('open');
+      document.getElementById('productDrawer').classList.remove('open');
+      document.body.style.overflow = '';
+    };
+
+    // Close on Escape key
+    document.addEventListener('keydown', (e) => {
+      if (e.key === 'Escape') closeDrawer();
+    });
+
+    // Bar chart - Indkøb pr. måned
+    const chartContainer = document.getElementById('purchaseChart');
+    createChart(chartContainer, {
+      height: 180,
+      series: [{
+        name: 'Indkøb',
+        color: '#00897b',
+        type: 'bar',
+        unit: 'DKK',
+        data: [
+          { x: 'Jul', y: 18500 },
+          { x: 'Aug', y: 22300 },
+          { x: 'Sep', y: 15800 },
+          { x: 'Okt', y: 41070 },
+          { x: 'Nov', y: 37020 },
+          { x: 'Dec', y: 18450 }
+        ],
+        bar: { radius: 4 }
+      }],
+      xAxis: {
+        categories: ['Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
+      },
+      yAxis: {
+        min: 0,
+        ticks: 4,
+        format: (v) => (v / 1000) + 'k'
+      },
+      padding: { top: 20, right: 10, bottom: 30, left: 45 },
+      tooltip: true,
+      legend: false,
+      animation: { duration: 400 }
+    });
+
+    // Theme toggle
+    const themeToggle = document.getElementById('themeToggle');
+    const sunIcon = document.getElementById('sunIcon');
+    const moonIcon = document.getElementById('moonIcon');
+    const root = document.documentElement;
+
+    function updateIcons() {
+      const isDark = root.classList.contains('dark-mode') ||
+        (window.matchMedia('(prefers-color-scheme: dark)').matches && !root.classList.contains('light-mode'));
+      sunIcon.style.display = isDark ? 'none' : 'block';
+      moonIcon.style.display = isDark ? 'block' : 'none';
+    }
+
+    updateIcons();
+
+    themeToggle.addEventListener('click', () => {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      if (prefersDark) {
+        root.classList.toggle('light-mode');
+        root.classList.remove('dark-mode');
+      } else {
+        root.classList.toggle('dark-mode');
+        root.classList.remove('light-mode');
+      }
+
+      updateIcons();
+    });
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-leverandoerer.html b/.workbench/POC/poc-leverandoerer.html
new file mode 100644
index 0000000..adb5c3c
--- /dev/null
+++ b/.workbench/POC/poc-leverandoerer.html
@@ -0,0 +1,719 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Leverandører - Backend</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* Dark mode - følger system preference ELLER manuel toggle */
+    @media (prefers-color-scheme: dark) {
+      :root:not(.light-mode) {
+        --color-surface: #1e1e1e;
+        --color-background: #121212;
+        --color-background-hover: #2a2a2a;
+        --color-background-alt: #1a1a1a;
+        --color-border: #333;
+        --color-text: #e0e0e0;
+        --color-text-secondary: #999;
+        --color-teal: #26a69a;
+        --color-blue: #42a5f5;
+        --color-red: #ef5350;
+        --color-amber: #ffb74d;
+        --color-purple: #a78bfa;
+        --color-green: #66bb6a;
+      }
+    }
+
+    /* Manuel dark mode override */
+    :root.dark-mode {
+      --color-surface: #1e1e1e;
+      --color-background: #121212;
+      --color-background-hover: #2a2a2a;
+      --color-background-alt: #1a1a1a;
+      --color-border: #333;
+      --color-text: #e0e0e0;
+      --color-text-secondary: #999;
+      --color-teal: #26a69a;
+      --color-blue: #42a5f5;
+      --color-red: #ef5350;
+      --color-amber: #ffb74d;
+      --color-purple: #a78bfa;
+      --color-green: #66bb6a;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    a {
+      color: var(--color-teal);
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-page-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    /* ==========================================
+       BUTTONS
+       ========================================== */
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-btn.icon-only {
+      padding: 10px;
+    }
+
+    swp-btn.icon-only svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    /* ==========================================
+       FILTER BAR
+       ========================================== */
+    swp-filter-bar {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px 20px;
+      background: var(--color-surface);
+      border-radius: 8px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    swp-search-input {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+    }
+
+    swp-search-input img {
+      width: 16px;
+      height: 16px;
+      opacity: 0.5;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root:not(.light-mode) swp-search-input img {
+        filter: invert(1);
+      }
+    }
+
+    :root.dark-mode swp-search-input img {
+      filter: invert(1);
+    }
+
+    swp-search-input input {
+      border: none;
+      outline: none;
+      font-size: 13px;
+      font-family: var(--font-family);
+      width: 400px;
+      background: transparent;
+      color: var(--color-text);
+    }
+
+    swp-filter-spacer {
+      flex: 1;
+    }
+
+    /* ==========================================
+       STATS BAR
+       ========================================== */
+    swp-stats-bar {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    swp-stat-card {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 16px 20px;
+      background: var(--color-surface);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-stat-card swp-stat-value {
+      font-size: 22px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-stat-card swp-stat-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-stat-card.highlight swp-stat-value {
+      color: var(--color-teal);
+    }
+
+    swp-stat-card.warning swp-stat-value {
+      color: var(--color-amber);
+    }
+
+    /* ==========================================
+       TABLE
+       ========================================== */
+    swp-table {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-table-header,
+    swp-table-row {
+      display: grid;
+      grid-template-columns: minmax(200px, 1fr) 150px 80px 140px 80px 40px;
+      align-items: center;
+    }
+
+    swp-table-header {
+      background: var(--color-background-alt);
+      border-bottom: 1px solid var(--color-border);
+      padding: 12px 20px;
+    }
+
+    swp-th {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-th.right {
+      text-align: right;
+    }
+
+    swp-th.center {
+      text-align: center;
+    }
+
+    swp-table-body {
+      display: block;
+    }
+
+    swp-table-row {
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+      transition: background 150ms ease;
+      cursor: pointer;
+    }
+
+    swp-table-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-table-row:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-td {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-td.right {
+      text-align: right;
+    }
+
+    swp-td.center {
+      text-align: center;
+    }
+
+    swp-td.mono {
+      font-family: var(--font-mono);
+      font-size: 13px;
+    }
+
+    swp-td.muted {
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       SUPPLIER CELL
+       ========================================== */
+    swp-supplier-cell {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-supplier-name {
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-supplier-city {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       STATUS BADGE
+       ========================================== */
+    swp-status-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 12px;
+    }
+
+    swp-status-badge.active {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+    }
+
+    swp-status-badge.inactive {
+      background: color-mix(in srgb, var(--color-text-secondary) 15%, white);
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       ROW ARROW
+       ========================================== */
+    swp-row-arrow {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    swp-row-arrow svg {
+      width: 18px;
+      height: 18px;
+      fill: var(--color-text-secondary);
+      transition: transform 150ms ease;
+    }
+
+    swp-table-row:hover swp-row-arrow svg {
+      transform: translateX(4px);
+      fill: var(--color-teal);
+    }
+
+    /* ==========================================
+       TABLE FOOTER
+       ========================================== */
+    swp-table-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 20px;
+      background: var(--color-background-alt);
+      border-top: 1px solid var(--color-border);
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       RESPONSIVE
+       ========================================== */
+    @media (max-width: 1200px) {
+      swp-stats-bar {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    @media (max-width: 900px) {
+      swp-table-header,
+      swp-table-row {
+        grid-template-columns: 1fr 80px 80px 40px;
+      }
+
+      swp-th:nth-child(2),
+      swp-td:nth-child(2),
+      swp-th:nth-child(3),
+      swp-td:nth-child(3),
+      swp-th:nth-child(4),
+      swp-td:nth-child(4) {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-page-title>Leverandører</swp-page-title>
+    </swp-topbar-left>
+    <swp-topbar-right>
+      <swp-btn class="secondary icon-only" id="themeToggle" title="Skift tema">
+        <svg id="sunIcon" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/></svg>
+        <svg id="moonIcon" viewBox="0 0 24 24" style="display:none"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/></svg>
+      </swp-btn>
+      <swp-btn class="primary">
+        <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+        Ny leverandør
+      </swp-btn>
+    </swp-topbar-right>
+  </swp-topbar>
+
+  <swp-page-container>
+    <!-- Filter Bar -->
+    <swp-filter-bar>
+      <swp-search-input>
+        <img src="icons/search.svg" alt="Søg" />
+        <input type="search" id="searchInput" placeholder="Søg leverandør, kontaktperson..." />
+      </swp-search-input>
+      <swp-filter-spacer></swp-filter-spacer>
+    </swp-filter-bar>
+
+    <!-- Stats Bar -->
+    <swp-stats-bar>
+      <swp-stat-card class="highlight">
+        <swp-stat-value>12</swp-stat-value>
+        <swp-stat-label>Leverandører i alt</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>10</swp-stat-value>
+        <swp-stat-label>Aktive</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>45.230 kr</swp-stat-value>
+        <swp-stat-label>Indkøb denne måned</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card class="warning">
+        <swp-stat-value>3</swp-stat-value>
+        <swp-stat-label>Afventende ordrer</swp-stat-label>
+      </swp-stat-card>
+    </swp-stats-bar>
+
+    <!-- Table -->
+    <swp-table>
+      <swp-table-header>
+        <swp-th>Leverandør</swp-th>
+        <swp-th>Kontakt</swp-th>
+        <swp-th class="center">Produkter</swp-th>
+        <swp-th>Sidste ordre</swp-th>
+        <swp-th>Status</swp-th>
+        <swp-th></swp-th>
+      </swp-table-header>
+      <swp-table-body>
+        <swp-table-row data-id="1" onclick="location.href='poc-leverandoer.html'">
+          <swp-td>
+            <swp-supplier-cell>
+              <swp-supplier-name>Beauty Group Denmark</swp-supplier-name>
+              <swp-supplier-city>København</swp-supplier-city>
+            </swp-supplier-cell>
+          </swp-td>
+          <swp-td>Lars Hansen</swp-td>
+          <swp-td class="center mono">24</swp-td>
+          <swp-td class="muted">15. december 2024</swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="2">
+          <swp-td>
+            <swp-supplier-cell>
+              <swp-supplier-name>Salon Supplies ApS</swp-supplier-name>
+              <swp-supplier-city>Aarhus</swp-supplier-city>
+            </swp-supplier-cell>
+          </swp-td>
+          <swp-td>Mette Nielsen</swp-td>
+          <swp-td class="center mono">18</swp-td>
+          <swp-td class="muted">22. december 2024</swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="3">
+          <swp-td>
+            <swp-supplier-cell>
+              <swp-supplier-name>Pro Hair Distribution</swp-supplier-name>
+              <swp-supplier-city>Odense</swp-supplier-city>
+            </swp-supplier-cell>
+          </swp-td>
+          <swp-td>Anders Sørensen</swp-td>
+          <swp-td class="center mono">32</swp-td>
+          <swp-td class="muted">10. december 2024</swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="4">
+          <swp-td>
+            <swp-supplier-cell>
+              <swp-supplier-name>Nordic Beauty Import</swp-supplier-name>
+              <swp-supplier-city>Aalborg</swp-supplier-city>
+            </swp-supplier-cell>
+          </swp-td>
+          <swp-td>Pia Kristensen</swp-td>
+          <swp-td class="center mono">15</swp-td>
+          <swp-td class="muted">28. november 2024</swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="5">
+          <swp-td>
+            <swp-supplier-cell>
+              <swp-supplier-name>Color World A/S</swp-supplier-name>
+              <swp-supplier-city>Vejle</swp-supplier-city>
+            </swp-supplier-cell>
+          </swp-td>
+          <swp-td>Thomas Berg</swp-td>
+          <swp-td class="center mono">8</swp-td>
+          <swp-td class="muted">5. december 2024</swp-td>
+          <swp-td><swp-status-badge class="inactive">Inaktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="6">
+          <swp-td>
+            <swp-supplier-cell>
+              <swp-supplier-name>Tools & More</swp-supplier-name>
+              <swp-supplier-city>Roskilde</swp-supplier-city>
+            </swp-supplier-cell>
+          </swp-td>
+          <swp-td>Karen Olsen</swp-td>
+          <swp-td class="center mono">12</swp-td>
+          <swp-td class="muted">18. december 2024</swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+      </swp-table-body>
+      <swp-table-footer>
+        <span>Viser 6 af 12 leverandører</span>
+        <span>Side 1 af 2</span>
+      </swp-table-footer>
+    </swp-table>
+  </swp-page-container>
+
+  <script src="https://cdn.jsdelivr.net/npm/fuse.js@7.0.0"></script>
+  <script>
+    // Supplier data for search
+    const suppliers = [
+      { id: 1, name: 'Beauty Group Denmark', contact: 'Lars Hansen', city: 'København' },
+      { id: 2, name: 'Salon Supplies ApS', contact: 'Mette Nielsen', city: 'Aarhus' },
+      { id: 3, name: 'Pro Hair Distribution', contact: 'Anders Sørensen', city: 'Odense' },
+      { id: 4, name: 'Nordic Beauty Import', contact: 'Pia Kristensen', city: 'Aalborg' },
+      { id: 5, name: 'Color World A/S', contact: 'Thomas Berg', city: 'Vejle' },
+      { id: 6, name: 'Tools & More', contact: 'Karen Olsen', city: 'Roskilde' }
+    ];
+
+    // Initialize Fuse.js
+    const fuse = new Fuse(suppliers, {
+      keys: ['name', 'contact', 'city'],
+      threshold: 0.3,
+      ignoreLocation: true
+    });
+
+    const searchInput = document.getElementById('searchInput');
+    const tableBody = document.querySelector('swp-table-body');
+    const allRows = Array.from(tableBody.querySelectorAll('swp-table-row'));
+
+    // Search handler
+    searchInput.addEventListener('input', (e) => {
+      const query = e.target.value.trim();
+
+      if (query === '') {
+        // Show all rows
+        allRows.forEach(row => row.style.display = '');
+      } else {
+        // Search with Fuse.js
+        const results = fuse.search(query);
+        const matchedIds = results.map(r => r.item.id);
+
+        allRows.forEach(row => {
+          const rowId = parseInt(row.dataset.id);
+          row.style.display = matchedIds.includes(rowId) ? '' : 'none';
+        });
+      }
+    });
+
+    // Theme toggle
+    const themeToggle = document.getElementById('themeToggle');
+    const sunIcon = document.getElementById('sunIcon');
+    const moonIcon = document.getElementById('moonIcon');
+    const root = document.documentElement;
+
+    function updateIcons() {
+      const isDark = root.classList.contains('dark-mode') ||
+        (window.matchMedia('(prefers-color-scheme: dark)').matches && !root.classList.contains('light-mode'));
+      sunIcon.style.display = isDark ? 'none' : 'block';
+      moonIcon.style.display = isDark ? 'block' : 'none';
+    }
+
+    updateIcons();
+
+    themeToggle.addEventListener('click', () => {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      if (prefersDark) {
+        // System is dark - toggle to light or back to system
+        root.classList.toggle('light-mode');
+        root.classList.remove('dark-mode');
+      } else {
+        // System is light - toggle to dark or back to system
+        root.classList.toggle('dark-mode');
+        root.classList.remove('light-mode');
+      }
+
+      updateIcons();
+    });
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-loen-provision.html b/.workbench/POC/poc-loen-provision.html
new file mode 100644
index 0000000..228091d
--- /dev/null
+++ b/.workbench/POC/poc-loen-provision.html
@@ -0,0 +1,1525 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Løn & Provision</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css">
+  <script src="https://cdn.sheetjs.com/xlsx-0.20.1/package/dist/xlsx.full.min.js"></script>
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-back-link {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-back-link:hover {
+      color: var(--color-teal);
+    }
+
+    swp-back-link svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-page-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1100px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    /* ==========================================
+       BUTTONS
+       ========================================== */
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-btn.small {
+      padding: 6px 12px;
+      font-size: 12px;
+    }
+
+    /* ==========================================
+       CARDS
+       ========================================== */
+    swp-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+      margin-bottom: 20px;
+      padding: 20px;
+    }
+
+    swp-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin: -20px -20px 20px -20px;
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-card-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    /* ==========================================
+       PERIODE SELECTOR
+       ========================================== */
+    swp-period-selector {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      flex-wrap: wrap;
+    }
+
+    swp-period-field {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-period-label {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-period-field select {
+      padding: 8px 12px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      cursor: pointer;
+    }
+
+    swp-period-field select:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-period-separator {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       EMPLOYEE ACCORDION
+       ========================================== */
+    swp-employee-list {
+      display: flex;
+      flex-direction: column;
+      gap: 16px;
+    }
+
+    swp-employee-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+      overflow: hidden;
+    }
+
+    swp-employee-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    swp-employee-header:hover {
+      background: var(--color-background-alt);
+    }
+
+    swp-employee-info {
+      display: flex;
+      align-items: center;
+      gap: 14px;
+    }
+
+    swp-employee-avatar {
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
+      background: var(--color-teal);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 15px;
+      font-weight: 600;
+      flex-shrink: 0;
+    }
+
+    swp-employee-avatar.purple { background: var(--color-purple); }
+    swp-employee-avatar.blue { background: var(--color-blue); }
+    swp-employee-avatar.amber { background: var(--color-amber); }
+
+    swp-employee-details {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-employee-name {
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-employee-meta {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-employee-summary {
+      display: flex;
+      align-items: center;
+      gap: 20px;
+    }
+
+    swp-summary-item {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-end;
+      gap: 2px;
+    }
+
+    swp-summary-value {
+      font-size: 16px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-summary-label {
+      font-size: 10px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-expand-icon {
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-secondary);
+      transition: transform 200ms ease;
+    }
+
+    swp-expand-icon svg {
+      width: 20px;
+      height: 20px;
+      fill: currentColor;
+    }
+
+    swp-employee-card.expanded swp-expand-icon {
+      transform: rotate(180deg);
+    }
+
+    swp-employee-content {
+      display: none;
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-employee-card.expanded swp-employee-content {
+      display: block;
+    }
+
+    /* ==========================================
+       EMPLOYEE CONFIG
+       ========================================== */
+    swp-employee-config {
+      display: flex;
+      gap: 24px;
+      padding: 16px 20px;
+      background: var(--color-background-alt);
+      border-bottom: 1px solid var(--color-border);
+      flex-wrap: wrap;
+    }
+
+    swp-config-item {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      font-size: 13px;
+    }
+
+    swp-config-label {
+      color: var(--color-text-secondary);
+    }
+
+    swp-config-value {
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-config-value.mono {
+      font-family: var(--font-mono);
+    }
+
+    /* ==========================================
+       WEEKS TABLE
+       ========================================== */
+    swp-weeks-table {
+      display: block;
+      padding: 20px;
+    }
+
+    swp-table {
+      display: table;
+      width: 100%;
+      border-collapse: collapse;
+    }
+
+    swp-table-header {
+      display: table-header-group;
+    }
+
+    swp-table-body {
+      display: table-row-group;
+    }
+
+    swp-table-footer {
+      display: table-footer-group;
+    }
+
+    swp-table-row {
+      display: table-row;
+    }
+
+    swp-table-cell {
+      display: table-cell;
+      padding: 12px 10px;
+      font-size: 13px;
+      border-bottom: 1px solid var(--color-border);
+      vertical-align: middle;
+    }
+
+    swp-table-header swp-table-cell {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      background: var(--color-background-alt);
+    }
+
+    swp-table-footer swp-table-cell {
+      font-weight: 600;
+      background: var(--color-background-alt);
+      border-bottom: none;
+    }
+
+    swp-table-cell.right {
+      text-align: right;
+    }
+
+    swp-table-cell.mono {
+      font-family: var(--font-mono);
+    }
+
+    swp-table-cell.highlight {
+      color: var(--color-teal);
+    }
+
+    swp-table-cell.warning {
+      color: var(--color-amber);
+    }
+
+    swp-table-body swp-table-row:hover {
+      background: var(--color-background-hover);
+    }
+
+    /* Editable cells */
+    swp-table-cell input {
+      width: 80px;
+      padding: 6px 8px;
+      font-size: 13px;
+      font-family: var(--font-mono);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      text-align: right;
+      background: var(--color-surface);
+    }
+
+    swp-table-cell input:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    /* ==========================================
+       INTECT BOX
+       ========================================== */
+    swp-intect-box {
+      display: block;
+      margin: 0 20px 20px;
+      padding: 20px;
+      background: linear-gradient(135deg, color-mix(in srgb, var(--color-teal) 8%, white) 0%, color-mix(in srgb, var(--color-blue) 8%, white) 100%);
+      border: 2px solid var(--color-teal);
+      border-radius: 8px;
+    }
+
+    swp-intect-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 16px;
+    }
+
+    swp-intect-title {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-teal);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    swp-intect-title svg {
+      width: 18px;
+      height: 18px;
+      fill: currentColor;
+    }
+
+    swp-intect-rows {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    swp-intect-row {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 14px;
+    }
+
+    swp-intect-label {
+      color: var(--color-text);
+    }
+
+    swp-intect-value {
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-intect-divider {
+      height: 1px;
+      background: var(--color-teal);
+      opacity: 0.3;
+      margin: 8px 0;
+    }
+
+    swp-intect-total {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      font-size: 16px;
+      font-weight: 700;
+    }
+
+    swp-intect-total swp-intect-value {
+      font-size: 18px;
+      color: var(--color-teal);
+    }
+
+    swp-copy-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-teal);
+      background: var(--color-surface);
+      border: 1px solid var(--color-teal);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-copy-btn:hover {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-copy-btn svg {
+      width: 14px;
+      height: 14px;
+      fill: currentColor;
+    }
+
+    swp-copy-btn.copied {
+      background: var(--color-green);
+      border-color: var(--color-green);
+      color: white;
+    }
+
+    /* ==========================================
+       TOTAL SUMMARY
+       ========================================== */
+    swp-total-summary {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+      padding: 24px;
+      margin-bottom: 24px;
+    }
+
+    swp-total-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+
+    swp-total-header i {
+      font-size: 24px;
+      color: var(--color-teal);
+    }
+
+    swp-total-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-total-grid {
+      display: grid;
+      grid-template-columns: repeat(5, 1fr);
+      gap: 20px;
+    }
+
+    swp-total-item {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+    }
+
+    swp-total-item.highlight {
+      background: color-mix(in srgb, var(--color-teal) 10%, white);
+    }
+
+    swp-total-value {
+      font-size: 24px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-total-item.highlight swp-total-value {
+      color: var(--color-teal);
+    }
+
+    swp-total-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    @media (max-width: 768px) {
+      swp-total-grid {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    /* ==========================================
+       SECTION LABEL
+       ========================================== */
+    swp-section-label {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 16px;
+    }
+
+    /* ==========================================
+       PAYROLL EXPORT
+       ========================================== */
+    swp-export-table {
+      display: block;
+      margin-bottom: 20px;
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    swp-export-row {
+      display: grid;
+      grid-template-columns: 32px 1fr 90px 80px 55px 85px 85px 100px 44px;
+      align-items: center;
+      padding: 14px 16px;
+      border-bottom: 1px solid var(--color-border);
+      gap: 8px;
+    }
+
+    swp-export-checkbox {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    swp-export-checkbox input[type="checkbox"] {
+      width: 18px;
+      height: 18px;
+      cursor: pointer;
+      accent-color: var(--color-teal);
+    }
+
+    swp-export-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-export-row.header {
+      background: var(--color-background-alt);
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      padding: 12px 16px;
+    }
+
+    swp-export-row.total {
+      background: color-mix(in srgb, var(--color-teal) 8%, white);
+      font-weight: 600;
+    }
+
+    swp-export-cell {
+      font-size: 14px;
+    }
+
+    swp-export-cell.right {
+      text-align: right;
+    }
+
+    swp-export-cell.mono {
+      font-family: var(--font-mono);
+      font-size: 13px;
+    }
+
+    swp-export-cell.highlight {
+      color: var(--color-teal);
+      font-weight: 600;
+    }
+
+    swp-copy-cell-btn {
+      width: 32px;
+      height: 32px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: var(--color-background);
+      border: none;
+      border-radius: 6px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      transition: all 150ms ease;
+    }
+
+    swp-copy-cell-btn:hover {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-copy-cell-btn.copied {
+      background: var(--color-green);
+      color: white;
+    }
+
+    swp-copy-cell-btn svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-export-actions {
+      display: flex;
+      justify-content: flex-end;
+      gap: 12px;
+      padding-top: 16px;
+      border-top: 1px solid var(--color-border);
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-back-link>
+        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+        Tilbage
+      </swp-back-link>
+      <swp-page-title>Løn & Provision</swp-page-title>
+    </swp-topbar-left>
+    <swp-topbar-right>
+      <swp-btn class="secondary">
+        <svg viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+        Eksporter
+      </swp-btn>
+    </swp-topbar-right>
+  </swp-topbar>
+
+  <swp-page-container>
+    <!-- Periode selector -->
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>Vælg periode</swp-card-title>
+      </swp-card-header>
+      <swp-period-selector>
+        <swp-period-field>
+          <swp-period-label>År:</swp-period-label>
+          <select id="yearSelect">
+            <option value="2025" selected>2025</option>
+            <option value="2024">2024</option>
+          </select>
+        </swp-period-field>
+        <swp-period-field>
+          <swp-period-label>Fra uge:</swp-period-label>
+          <select id="weekFromSelect"></select>
+        </swp-period-field>
+        <swp-period-separator>—</swp-period-separator>
+        <swp-period-field>
+          <swp-period-label>Til uge:</swp-period-label>
+          <select id="weekToSelect"></select>
+        </swp-period-field>
+        <swp-btn class="primary" id="loadDataBtn">
+          <svg viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"/></svg>
+          Hent data
+        </swp-btn>
+      </swp-period-selector>
+    </swp-card>
+
+    <!-- Total summary -->
+    <swp-total-summary id="totalSummary">
+      <swp-total-header>
+        <i class="ph ph-coins"></i>
+        <swp-total-title>Samlet overblik for perioden</swp-total-title>
+      </swp-total-header>
+      <swp-total-grid>
+        <swp-total-item class="highlight">
+          <swp-total-value id="grandTotal">0 kr</swp-total-value>
+          <swp-total-label>Total løn</swp-total-label>
+        </swp-total-item>
+        <swp-total-item>
+          <swp-total-value id="totalBasePay">0 kr</swp-total-value>
+          <swp-total-label>Grundløn</swp-total-label>
+        </swp-total-item>
+        <swp-total-item>
+          <swp-total-value id="totalOvertime">0 kr</swp-total-value>
+          <swp-total-label>Overtidstillæg</swp-total-label>
+        </swp-total-item>
+        <swp-total-item>
+          <swp-total-value id="totalServiceCommission">0 kr</swp-total-value>
+          <swp-total-label>Prov. services</swp-total-label>
+        </swp-total-item>
+        <swp-total-item>
+          <swp-total-value id="totalProductCommission">0 kr</swp-total-value>
+          <swp-total-label>Prov. produkter</swp-total-label>
+        </swp-total-item>
+      </swp-total-grid>
+    </swp-total-summary>
+
+    <!-- Employee list -->
+    <swp-employee-list id="employeeList">
+      <!-- Rendered by JavaScript -->
+    </swp-employee-list>
+
+    <!-- Payroll Export Section -->
+    <swp-card id="payrollExportCard">
+      <swp-section-label>Løneksport til Intect</swp-section-label>
+
+      <swp-export-table id="exportTable">
+        <!-- Rendered by JavaScript -->
+      </swp-export-table>
+
+      <swp-export-actions>
+        <swp-btn class="secondary" id="copyAllBtn">
+          <svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
+          Kopier alle til clipboard
+        </swp-btn>
+        <swp-btn class="primary" id="exportBtn">
+          <svg viewBox="0 0 24 24"><path d="M19 9h-4V3H9v6H5l7 7 7-7zM5 18v2h14v-2H5z"/></svg>
+          Eksporter til Intect
+        </swp-btn>
+      </swp-export-actions>
+    </swp-card>
+  </swp-page-container>
+
+  <script>
+    // ==========================================
+    // MOCK DATA
+    // ==========================================
+    const employees = [
+      {
+        id: 1,
+        name: "Emma Larsen",
+        initials: "EL",
+        cpr: "010190-1234",
+        color: "",
+        hourlyRate: 185,
+        weeklyHours: 37,
+        overtimeRate: 1.5,
+        commission: {
+          hourlyMinimum: 220,      // kr pr. time inkl. moms
+          servicePercentage: 15,   // % på services over minimum
+          productPercentage: 15    // % på produktsalg over minimum
+        }
+      },
+      {
+        id: 2,
+        name: "Camilla Jensen",
+        initials: "CJ",
+        cpr: "150885-5678",
+        color: "purple",
+        hourlyRate: 175,
+        weeklyHours: 37,
+        overtimeRate: 1.5,
+        commission: {
+          hourlyMinimum: 220,
+          servicePercentage: 15,
+          productPercentage: 15
+        }
+      },
+      {
+        id: 3,
+        name: "Sofie Nielsen",
+        initials: "SN",
+        cpr: "220792-9012",
+        color: "blue",
+        hourlyRate: 195,
+        weeklyHours: 30,  // Deltid
+        overtimeRate: 1.5,
+        commission: {
+          hourlyMinimum: 220,
+          servicePercentage: 15,
+          productPercentage: 15
+        }
+      }
+    ];
+
+    // Generate mock weekly data
+    function generateMockData(year, weekFrom, weekTo) {
+      const data = [];
+      for (const emp of employees) {
+        for (let week = weekFrom; week <= weekTo; week++) {
+          // Random hours around their weekly hours
+          const hours = Math.floor(Math.random() * 10) + emp.weeklyHours - 3;
+          // Random service revenue (70-80% of total)
+          const serviceRevenue = Math.floor(Math.random() * 15000) + 8000;
+          // Random product revenue (20-30% of total)
+          const productRevenue = Math.floor(Math.random() * 5000) + 2000;
+          // Random vacation days (0-2 per week, mostly 0)
+          const vacationDays = Math.random() > 0.8 ? Math.floor(Math.random() * 3) : 0;
+          data.push({
+            employeeId: emp.id,
+            week,
+            year,
+            hoursWorked: Math.max(hours, 20),
+            serviceRevenue,
+            productRevenue,
+            vacationDays
+          });
+        }
+      }
+      return data;
+    }
+
+    let weeklyData = [];
+
+    // ==========================================
+    // CALCULATIONS
+    // ==========================================
+    function calculateWeekPayroll(employee, weekData) {
+      const normalHours = Math.min(weekData.hoursWorked, employee.weeklyHours);
+      const overtimeHours = Math.max(0, weekData.hoursWorked - employee.weeklyHours);
+
+      const normalPay = normalHours * employee.hourlyRate;
+      const overtimePay = overtimeHours * employee.hourlyRate * employee.overtimeRate;
+
+      // Provision: minimum baseret på timer × timesat
+      const totalRevenue = weekData.serviceRevenue + weekData.productRevenue;
+      const minimumThreshold = weekData.hoursWorked * employee.commission.hourlyMinimum;
+      const revenueOverMinimum = Math.max(0, totalRevenue - minimumThreshold);
+
+      // Fordel overskud proportionalt mellem services og produkter
+      let serviceCommission = 0;
+      let productCommission = 0;
+
+      if (revenueOverMinimum > 0 && totalRevenue > 0) {
+        const serviceRatio = weekData.serviceRevenue / totalRevenue;
+        const productRatio = weekData.productRevenue / totalRevenue;
+
+        const serviceOverMinimum = revenueOverMinimum * serviceRatio;
+        const productOverMinimum = revenueOverMinimum * productRatio;
+
+        serviceCommission = serviceOverMinimum * (employee.commission.servicePercentage / 100);
+        productCommission = productOverMinimum * (employee.commission.productPercentage / 100);
+      }
+
+      const totalCommission = serviceCommission + productCommission;
+
+      return {
+        normalHours,
+        overtimeHours,
+        normalPay,
+        overtimePay,
+        serviceRevenue: weekData.serviceRevenue,
+        productRevenue: weekData.productRevenue,
+        totalRevenue,
+        minimumThreshold,
+        revenueOverMinimum,
+        serviceCommission,
+        productCommission,
+        commission: totalCommission,
+        vacationDays: weekData.vacationDays || 0,
+        totalPay: normalPay + overtimePay + totalCommission
+      };
+    }
+
+    function calculateEmployeeTotals(employee, weeks) {
+      const employeeWeeks = weeks.filter(w => w.employeeId === employee.id);
+
+      let totalNormalHours = 0;
+      let totalOvertimeHours = 0;
+      let totalNormalPay = 0;
+      let totalOvertimePay = 0;
+      let totalServiceCommission = 0;
+      let totalProductCommission = 0;
+      let totalServiceRevenue = 0;
+      let totalProductRevenue = 0;
+      let totalVacationDays = 0;
+
+      const weekResults = [];
+
+      for (const week of employeeWeeks) {
+        const calc = calculateWeekPayroll(employee, week);
+        weekResults.push({
+          ...week,
+          ...calc
+        });
+
+        totalNormalHours += calc.normalHours;
+        totalOvertimeHours += calc.overtimeHours;
+        totalNormalPay += calc.normalPay;
+        totalOvertimePay += calc.overtimePay;
+        totalServiceCommission += calc.serviceCommission;
+        totalProductCommission += calc.productCommission;
+        totalServiceRevenue += calc.serviceRevenue;
+        totalProductRevenue += calc.productRevenue;
+        totalVacationDays += calc.vacationDays;
+      }
+
+      const totalCommission = totalServiceCommission + totalProductCommission;
+
+      return {
+        weeks: weekResults,
+        totals: {
+          normalHours: totalNormalHours,
+          overtimeHours: totalOvertimeHours,
+          normalPay: totalNormalPay,
+          overtimePay: totalOvertimePay,
+          serviceCommission: totalServiceCommission,
+          productCommission: totalProductCommission,
+          commission: totalCommission,
+          serviceRevenue: totalServiceRevenue,
+          productRevenue: totalProductRevenue,
+          revenue: totalServiceRevenue + totalProductRevenue,
+          vacationDays: totalVacationDays,
+          total: totalNormalPay + totalOvertimePay + totalCommission
+        }
+      };
+    }
+
+    // ==========================================
+    // FORMATTING
+    // ==========================================
+    function formatCurrency(amount) {
+      return Math.round(amount).toLocaleString('da-DK') + ' kr';
+    }
+
+    function formatHours(hours) {
+      return hours + 't';
+    }
+
+    // ==========================================
+    // RENDER FUNCTIONS
+    // ==========================================
+    function renderEmployeeCard(employee, data, isExpanded = false) {
+      const { weeks, totals } = data;
+
+      return `
+        <swp-employee-card class="${isExpanded ? 'expanded' : ''}" data-employee-id="${employee.id}">
+          <swp-employee-header onclick="toggleEmployee(${employee.id})">
+            <swp-employee-info>
+              <swp-employee-avatar class="${employee.color}">${employee.initials}</swp-employee-avatar>
+              <swp-employee-details>
+                <swp-employee-name>${employee.name}</swp-employee-name>
+                <swp-employee-meta>${formatHours(totals.normalHours + totals.overtimeHours)} · ${formatCurrency(totals.revenue)} oms.</swp-employee-meta>
+              </swp-employee-details>
+            </swp-employee-info>
+            <swp-employee-summary>
+              <swp-summary-item>
+                <swp-summary-value>${formatCurrency(totals.commission)}</swp-summary-value>
+                <swp-summary-label>Provision</swp-summary-label>
+              </swp-summary-item>
+              <swp-summary-item>
+                <swp-summary-value>${formatCurrency(totals.total)}</swp-summary-value>
+                <swp-summary-label>Total</swp-summary-label>
+              </swp-summary-item>
+              <swp-expand-icon>
+                <svg viewBox="0 0 24 24"><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
+              </swp-expand-icon>
+            </swp-employee-summary>
+          </swp-employee-header>
+          <swp-employee-content>
+            <swp-employee-config>
+              <swp-config-item>
+                <swp-config-label>Timeløn:</swp-config-label>
+                <swp-config-value class="mono">${employee.hourlyRate} kr</swp-config-value>
+              </swp-config-item>
+              <swp-config-item>
+                <swp-config-label>Normtid:</swp-config-label>
+                <swp-config-value>${employee.weeklyHours}t/uge</swp-config-value>
+              </swp-config-item>
+              <swp-config-item>
+                <swp-config-label>Overtid:</swp-config-label>
+                <swp-config-value>+${Math.round((employee.overtimeRate - 1) * 100)}%</swp-config-value>
+              </swp-config-item>
+              <swp-config-item>
+                <swp-config-label>Minimum:</swp-config-label>
+                <swp-config-value class="mono">${employee.commission.hourlyMinimum} kr/time</swp-config-value>
+              </swp-config-item>
+              <swp-config-item>
+                <swp-config-label>Provision:</swp-config-label>
+                <swp-config-value>${employee.commission.servicePercentage}% services · ${employee.commission.productPercentage}% produkter</swp-config-value>
+              </swp-config-item>
+            </swp-employee-config>
+
+            <swp-weeks-table>
+              <swp-table>
+                <swp-table-header>
+                  <swp-table-row>
+                    <swp-table-cell>Uge</swp-table-cell>
+                    <swp-table-cell class="right">Timer</swp-table-cell>
+                    <swp-table-cell class="right">Overtid</swp-table-cell>
+                    <swp-table-cell class="right">Ferie</swp-table-cell>
+                    <swp-table-cell class="right">Services</swp-table-cell>
+                    <swp-table-cell class="right">Produkter</swp-table-cell>
+                    <swp-table-cell class="right">Minimum</swp-table-cell>
+                    <swp-table-cell class="right">Provision</swp-table-cell>
+                    <swp-table-cell class="right">I alt</swp-table-cell>
+                  </swp-table-row>
+                </swp-table-header>
+                <swp-table-body>
+                  ${weeks.map(w => `
+                    <swp-table-row>
+                      <swp-table-cell>Uge ${w.week}</swp-table-cell>
+                      <swp-table-cell class="right mono">${formatHours(w.normalHours)}</swp-table-cell>
+                      <swp-table-cell class="right mono ${w.overtimeHours > 0 ? 'warning' : ''}">${formatHours(w.overtimeHours)}</swp-table-cell>
+                      <swp-table-cell class="right mono">${w.vacationDays} dg</swp-table-cell>
+                      <swp-table-cell class="right mono">${formatCurrency(w.serviceRevenue)}</swp-table-cell>
+                      <swp-table-cell class="right mono">${formatCurrency(w.productRevenue)}</swp-table-cell>
+                      <swp-table-cell class="right mono">${formatCurrency(w.minimumThreshold)}</swp-table-cell>
+                      <swp-table-cell class="right mono ${w.commission > 0 ? 'highlight' : ''}">${formatCurrency(w.commission)}</swp-table-cell>
+                      <swp-table-cell class="right mono">${formatCurrency(w.totalPay)}</swp-table-cell>
+                    </swp-table-row>
+                  `).join('')}
+                </swp-table-body>
+                <swp-table-footer>
+                  <swp-table-row>
+                    <swp-table-cell>TOTAL</swp-table-cell>
+                    <swp-table-cell class="right mono">${formatHours(totals.normalHours)}</swp-table-cell>
+                    <swp-table-cell class="right mono">${formatHours(totals.overtimeHours)}</swp-table-cell>
+                    <swp-table-cell class="right mono">${totals.vacationDays} dg</swp-table-cell>
+                    <swp-table-cell class="right mono">${formatCurrency(totals.serviceRevenue)}</swp-table-cell>
+                    <swp-table-cell class="right mono">${formatCurrency(totals.productRevenue)}</swp-table-cell>
+                    <swp-table-cell class="right mono">—</swp-table-cell>
+                    <swp-table-cell class="right mono">${formatCurrency(totals.commission)}</swp-table-cell>
+                    <swp-table-cell class="right mono">${formatCurrency(totals.total)}</swp-table-cell>
+                  </swp-table-row>
+                </swp-table-footer>
+              </swp-table>
+            </swp-weeks-table>
+
+            </swp-employee-content>
+        </swp-employee-card>
+      `;
+    }
+
+    function renderEmployeeList() {
+      const container = document.getElementById('employeeList');
+
+      let html = '';
+      let grandTotal = 0;
+      let totalBasePay = 0;
+      let totalOvertime = 0;
+      let totalServiceCommission = 0;
+      let totalProductCommission = 0;
+
+      for (const emp of employees) {
+        const data = calculateEmployeeTotals(emp, weeklyData);
+        html += renderEmployeeCard(emp, data, emp.id === 1);
+
+        grandTotal += data.totals.total;
+        totalBasePay += data.totals.normalPay;
+        totalOvertime += data.totals.overtimePay;
+        totalServiceCommission += data.totals.serviceCommission;
+        totalProductCommission += data.totals.productCommission;
+      }
+
+      container.innerHTML = html;
+
+      // Update totals
+      document.getElementById('grandTotal').textContent = formatCurrency(grandTotal);
+      document.getElementById('totalBasePay').textContent = formatCurrency(totalBasePay);
+      document.getElementById('totalOvertime').textContent = formatCurrency(totalOvertime);
+      document.getElementById('totalServiceCommission').textContent = formatCurrency(totalServiceCommission);
+      document.getElementById('totalProductCommission').textContent = formatCurrency(totalProductCommission);
+    }
+
+    // ==========================================
+    // INTERACTIONS
+    // ==========================================
+    function toggleEmployee(employeeId) {
+      const card = document.querySelector(`swp-employee-card[data-employee-id="${employeeId}"]`);
+      card.classList.toggle('expanded');
+    }
+
+    // ==========================================
+    // EXPORT TABLE
+    // ==========================================
+    let employeeTotalsCache = [];
+
+    function renderExportTable() {
+      const container = document.getElementById('exportTable');
+
+      let grandTotalBasePay = 0;
+      let grandTotalOvertime = 0;
+      let grandTotalVacationDays = 0;
+      let grandTotalServiceCommission = 0;
+      let grandTotalProductCommission = 0;
+      let grandTotal = 0;
+
+      let rows = `
+        <swp-export-row class="header">
+          <swp-export-checkbox>
+            <input type="checkbox" id="selectAllExport" checked onchange="toggleAllExport(this.checked)">
+          </swp-export-checkbox>
+          <swp-export-cell>Medarbejder</swp-export-cell>
+          <swp-export-cell class="right">Grundløn</swp-export-cell>
+          <swp-export-cell class="right">Overtid</swp-export-cell>
+          <swp-export-cell class="right">Ferie</swp-export-cell>
+          <swp-export-cell class="right">Prov. serv.</swp-export-cell>
+          <swp-export-cell class="right">Prov. prod.</swp-export-cell>
+          <swp-export-cell class="right">Total</swp-export-cell>
+          <swp-export-cell></swp-export-cell>
+        </swp-export-row>
+      `;
+
+      employeeTotalsCache = [];
+
+      for (const emp of employees) {
+        const data = calculateEmployeeTotals(emp, weeklyData);
+        const { totals } = data;
+
+        employeeTotalsCache.push({ employee: emp, totals });
+
+        grandTotalBasePay += totals.normalPay;
+        grandTotalOvertime += totals.overtimePay;
+        grandTotalVacationDays += totals.vacationDays;
+        grandTotalServiceCommission += totals.serviceCommission;
+        grandTotalProductCommission += totals.productCommission;
+        grandTotal += totals.total;
+
+        rows += `
+          <swp-export-row data-employee-id="${emp.id}">
+            <swp-export-checkbox>
+              <input type="checkbox" class="export-employee-checkbox" data-employee-id="${emp.id}" checked onchange="updateSelectAllCheckbox()">
+            </swp-export-checkbox>
+            <swp-export-cell>${emp.name}</swp-export-cell>
+            <swp-export-cell class="right mono">${formatCurrency(totals.normalPay)}</swp-export-cell>
+            <swp-export-cell class="right mono">${formatCurrency(totals.overtimePay)}</swp-export-cell>
+            <swp-export-cell class="right mono">${totals.vacationDays} dg</swp-export-cell>
+            <swp-export-cell class="right mono">${formatCurrency(totals.serviceCommission)}</swp-export-cell>
+            <swp-export-cell class="right mono">${formatCurrency(totals.productCommission)}</swp-export-cell>
+            <swp-export-cell class="right mono highlight">${formatCurrency(totals.total)}</swp-export-cell>
+            <swp-export-cell>
+              <swp-copy-cell-btn onclick="copyEmployeeRow(${emp.id}, event)" title="Kopier">
+                <svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>
+              </swp-copy-cell-btn>
+            </swp-export-cell>
+          </swp-export-row>
+        `;
+      }
+
+      rows += `
+        <swp-export-row class="total">
+          <swp-export-cell></swp-export-cell>
+          <swp-export-cell>TOTAL</swp-export-cell>
+          <swp-export-cell class="right mono">${formatCurrency(grandTotalBasePay)}</swp-export-cell>
+          <swp-export-cell class="right mono">${formatCurrency(grandTotalOvertime)}</swp-export-cell>
+          <swp-export-cell class="right mono">${grandTotalVacationDays} dg</swp-export-cell>
+          <swp-export-cell class="right mono">${formatCurrency(grandTotalServiceCommission)}</swp-export-cell>
+          <swp-export-cell class="right mono">${formatCurrency(grandTotalProductCommission)}</swp-export-cell>
+          <swp-export-cell class="right mono highlight">${formatCurrency(grandTotal)}</swp-export-cell>
+          <swp-export-cell></swp-export-cell>
+        </swp-export-row>
+      `;
+
+      container.innerHTML = rows;
+    }
+
+    function toggleAllExport(checked) {
+      const checkboxes = document.querySelectorAll('.export-employee-checkbox');
+      checkboxes.forEach(cb => cb.checked = checked);
+    }
+
+    function updateSelectAllCheckbox() {
+      const checkboxes = document.querySelectorAll('.export-employee-checkbox');
+      const allChecked = Array.from(checkboxes).every(cb => cb.checked);
+      const someChecked = Array.from(checkboxes).some(cb => cb.checked);
+      const selectAll = document.getElementById('selectAllExport');
+      selectAll.checked = allChecked;
+      selectAll.indeterminate = someChecked && !allChecked;
+    }
+
+    function getSelectedEmployeeIds() {
+      const checkboxes = document.querySelectorAll('.export-employee-checkbox:checked');
+      return Array.from(checkboxes).map(cb => parseInt(cb.dataset.employeeId));
+    }
+
+    function copyEmployeeRow(employeeId, event) {
+      const cached = employeeTotalsCache.find(c => c.employee.id === employeeId);
+      if (!cached) return;
+
+      const { employee, totals } = cached;
+      const text = `${employee.name}\t${Math.round(totals.normalPay)}\t${Math.round(totals.overtimePay)}\t${totals.vacationDays}\t${Math.round(totals.serviceCommission)}\t${Math.round(totals.productCommission)}\t${Math.round(totals.total)}`;
+
+      navigator.clipboard.writeText(text).then(() => {
+        const btn = event.target.closest('swp-copy-cell-btn');
+        btn.classList.add('copied');
+        btn.innerHTML = `<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>`;
+
+        setTimeout(() => {
+          btn.classList.remove('copied');
+          btn.innerHTML = `<svg viewBox="0 0 24 24"><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm3 4H8c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h11c1.1 0 2-.9 2-2V7c0-1.1-.9-2-2-2zm0 16H8V7h11v14z"/></svg>`;
+        }, 1500);
+      });
+    }
+
+    function copyAllToClipboard() {
+      let text = "Medarbejder\tGrundløn\tOvertid\tFeriedage\tProv. serv.\tProv. prod.\tTotal\n";
+
+      for (const { employee, totals } of employeeTotalsCache) {
+        text += `${employee.name}\t${Math.round(totals.normalPay)}\t${Math.round(totals.overtimePay)}\t${totals.vacationDays}\t${Math.round(totals.serviceCommission)}\t${Math.round(totals.productCommission)}\t${Math.round(totals.total)}\n`;
+      }
+
+      navigator.clipboard.writeText(text).then(() => {
+        const btn = document.getElementById('copyAllBtn');
+        const originalHtml = btn.innerHTML;
+        btn.innerHTML = `<svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg> Kopieret!`;
+
+        setTimeout(() => {
+          btn.innerHTML = originalHtml;
+        }, 2000);
+      });
+    }
+
+    // ==========================================
+    // INTECT EXPORT
+    // ==========================================
+    function generateIntectData() {
+      const rows = [];
+      const selectedIds = getSelectedEmployeeIds();
+      const selectedEmployees = employees.filter(emp => selectedIds.includes(emp.id));
+
+      for (const emp of selectedEmployees) {
+        const data = calculateEmployeeTotals(emp, weeklyData);
+
+        // Løn - en linje pr. uge (normal tid)
+        for (const week of data.weeks) {
+          rows.push({
+            cpr: emp.cpr || '',
+            name: emp.name,
+            initials: emp.initials,
+            lønart: 'Løn',
+            beskrivelse: `Uge ${week.week}`,
+            enheder: week.normalHours,
+            sats: emp.hourlyRate,
+            beløb: week.normalPay
+          });
+
+          // Overtid - også lønart "Løn", pr. uge
+          if (week.overtimeHours > 0) {
+            rows.push({
+              cpr: emp.cpr || '',
+              name: emp.name,
+              initials: emp.initials,
+              lønart: 'Løn',
+              beskrivelse: `Uge ${week.week} Overtid`,
+              enheder: week.overtimeHours,
+              sats: emp.hourlyRate * emp.overtimeRate,
+              beløb: week.overtimePay
+            });
+          }
+        }
+
+        // Provision - en linje pr. uge med provision
+        for (const week of data.weeks) {
+          if (week.commission > 0) {
+            rows.push({
+              cpr: emp.cpr || '',
+              name: emp.name,
+              initials: emp.initials,
+              lønart: 'Provision',
+              beskrivelse: `Uge ${week.week} provision ${emp.commission.servicePercentage}%, oms ${Math.round(week.totalRevenue)}`,
+              grundlag: week.revenueOverMinimum,
+              enheder: emp.commission.servicePercentage,
+              sats: week.revenueOverMinimum,
+              beløb: week.commission
+            });
+          }
+        }
+
+        // Ferie - altid inkluderet, også ved 0 dage
+        rows.push({
+          cpr: emp.cpr || '',
+          name: emp.name,
+          initials: emp.initials,
+          lønart: 'Ferie',
+          beskrivelse: '',
+          enheder: data.totals.vacationDays,
+          sats: '',
+          beløb: 0
+        });
+      }
+
+      return rows;
+    }
+
+    function exportToIntect() {
+      const year = document.getElementById('yearSelect').value;
+      const weekFrom = document.getElementById('weekFromSelect').value;
+      const weekTo = document.getElementById('weekToSelect').value;
+
+      const data = generateIntectData();
+
+      // Konverter til worksheet format
+      const wsData = [
+        ['CPR-nummer', 'Medarbejder navn', 'Initialer', 'Ekstern reference',
+         'Medarbejder-ID', 'Lønart', 'Beskrivelse', 'Grundlag', 'Enheder',
+         'Sats', 'Beløb', 'Efter næste kørsel', 'Fra dato', 'Til dato'],
+        ...data.map(row => [
+          row.cpr, row.name, row.initials, '', '',
+          row.lønart, row.beskrivelse, row.grundlag || '',
+          row.enheder, row.sats, row.beløb, 'Nulstil', '', ''
+        ])
+      ];
+
+      const wb = XLSX.utils.book_new();
+      const ws = XLSX.utils.aoa_to_sheet(wsData);
+      XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');
+      XLSX.writeFile(wb, `loeneksport_${year}_uge${weekFrom}-${weekTo}.xlsx`);
+    }
+
+    // ==========================================
+    // INITIALIZATION
+    // ==========================================
+    function initWeekSelects() {
+      const weekFrom = document.getElementById('weekFromSelect');
+      const weekTo = document.getElementById('weekToSelect');
+
+      for (let i = 1; i <= 52; i++) {
+        weekFrom.innerHTML += `<option value="${i}" ${i === 1 ? 'selected' : ''}>Uge ${i}</option>`;
+        weekTo.innerHTML += `<option value="${i}" ${i === 4 ? 'selected' : ''}>Uge ${i}</option>`;
+      }
+    }
+
+    function loadData() {
+      const year = parseInt(document.getElementById('yearSelect').value);
+      const weekFrom = parseInt(document.getElementById('weekFromSelect').value);
+      const weekTo = parseInt(document.getElementById('weekToSelect').value);
+
+      weeklyData = generateMockData(year, weekFrom, weekTo);
+      renderEmployeeList();
+      renderExportTable();
+    }
+
+    // Initialize
+    initWeekSelects();
+    document.getElementById('loadDataBtn').addEventListener('click', loadData);
+    document.getElementById('copyAllBtn').addEventListener('click', copyAllToClipboard);
+    document.getElementById('exportBtn').addEventListener('click', exportToIntect);
+
+    // Load initial data
+    loadData();
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-loenspecifikation.html b/.workbench/POC/poc-loenspecifikation.html
new file mode 100644
index 0000000..0d28ceb
--- /dev/null
+++ b/.workbench/POC/poc-loenspecifikation.html
@@ -0,0 +1,533 @@
+<!doctype html>
+<html lang="da">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Lønspecifikation – Januar 2026</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+
+  <style>
+    /* ===== Print setup ===== */
+    @page { size: A4; margin: 14mm; }
+    @media print {
+      .no-print { display: none !important; }
+      .page-break { break-after: page; page-break-after: always; }
+      a { color: inherit; text-decoration: none; }
+    }
+
+    /* ===== Base ===== */
+    :root {
+      --ink: #0f172a;
+      --muted: #475569;
+      --line: #e2e8f0;
+      --soft: #f8fafc;
+      --accent: #0ea5e9;
+      --accent-2: #22c55e;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+    * { box-sizing: border-box; }
+    body {
+      margin: 0;
+      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+      color: var(--ink);
+      background: #fff;
+    }
+    .sheet {
+      max-width: 210mm;
+      margin: 0 auto;
+    }
+
+    /* ===== Header ===== */
+    .hdr {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+      padding: 14px 0 10px;
+      border-bottom: 2px solid var(--line);
+      margin-bottom: 12px;
+    }
+    .brand {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+    .title {
+      font-size: 20px;
+      font-weight: 800;
+      letter-spacing: .2px;
+      margin: 0;
+      line-height: 1.1;
+    }
+    .subtitle {
+      margin: 0;
+      color: var(--muted);
+      font-size: 12px;
+    }
+    .meta {
+      text-align: right;
+      min-width: 260px;
+    }
+    .meta .pill {
+      display: inline-block;
+      font-size: 12px;
+      padding: 6px 10px;
+      border: 1px solid var(--line);
+      border-radius: 999px;
+      background: var(--soft);
+      margin-bottom: 8px;
+    }
+    .meta .kv {
+      display: grid;
+      grid-template-columns: auto auto;
+      gap: 4px 12px;
+      justify-content: end;
+      font-size: 12px;
+      color: var(--muted);
+    }
+    .meta .kv b { color: var(--ink); font-weight: 600; }
+
+    /* ===== Blocks ===== */
+    .card {
+      border: 1px solid var(--line);
+      border-radius: 14px;
+      overflow: hidden;
+      background: #fff;
+      margin-bottom: 12px;
+    }
+    .card .hd {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 12px;
+      background: linear-gradient(0deg, var(--soft), #fff);
+      border-bottom: 1px solid var(--line);
+    }
+    .card .hd h2 {
+      font-size: 13px;
+      margin: 0;
+      letter-spacing: .2px;
+      text-transform: uppercase;
+      color: var(--muted);
+    }
+    .card .bd { padding: 12px; }
+
+    .grid {
+      display: grid;
+      grid-template-columns: 1.2fr .8fr;
+      gap: 12px;
+    }
+
+    /* ===== Total ===== */
+    .total {
+      display: flex;
+      align-items: baseline;
+      justify-content: space-between;
+      gap: 12px;
+      padding: 14px 14px;
+      border-radius: 14px;
+      border: 1px solid var(--line);
+      background: var(--soft);
+      margin-bottom: 12px;
+    }
+    .total .label {
+      color: var(--muted);
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: .25px;
+      margin-bottom: 6px;
+    }
+    .total .big {
+      font-size: 28px;
+      font-weight: 900;
+      font-family: var(--font-mono);
+      margin: 0;
+      line-height: 1.05;
+    }
+    .total .big small {
+      font-size: 14px;
+      font-weight: 700;
+      color: var(--muted);
+    }
+    .badge {
+      display: inline-block;
+      font-size: 11px;
+      padding: 4px 8px;
+      border-radius: 999px;
+      border: 1px solid var(--line);
+      background: var(--soft);
+      color: var(--muted);
+    }
+
+    /* ===== Tables ===== */
+    table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 12px;
+    }
+    th, td {
+      padding: 8px 8px;
+      border-bottom: 1px solid var(--line);
+      vertical-align: top;
+    }
+    th {
+      text-align: left;
+      color: var(--muted);
+      font-weight: 700;
+      font-size: 11px;
+      text-transform: uppercase;
+      letter-spacing: .2px;
+      background: var(--soft);
+    }
+    td.num, th.num { text-align: right; }
+    td.num { font-family: var(--font-mono); }
+    tr:last-child td { border-bottom: none; }
+
+    .note {
+      margin: 8px 0 0;
+      color: var(--muted);
+      font-size: 11px;
+      line-height: 1.35;
+    }
+
+    /* ===== Footer ===== */
+    .ftr {
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top: 1px solid var(--line);
+      display: flex;
+      justify-content: space-between;
+      gap: 12px;
+      font-size: 10.5px;
+      color: var(--muted);
+    }
+
+    /* ===== Ensure content doesn't get split awkwardly ===== */
+    .avoid-break { break-inside: avoid; page-break-inside: avoid; }
+  </style>
+</head>
+
+<body>
+  <!-- ===================== PAGE 1: OVERBLIK ===================== -->
+  <div class="sheet">
+    <div class="hdr">
+      <div class="brand">
+        <p class="title">Lønspecifikation</p>
+        <p class="subtitle">Periode: <b>Januar 2026</b></p>
+      </div>
+
+      <div class="meta">
+        <div class="pill">Medarbejdernr.: <b>EMP-001</b></div>
+        <div class="kv">
+          <span>Medarbejder:</span><b>Emma Larsen</b>
+          <span>Afdeling:</span><b>Frisør</b>
+          <span>Ansættelse:</span><b>Fuldtid (37 t/uge)</b>
+        </div>
+      </div>
+    </div>
+
+    <section class="total avoid-break">
+      <div>
+        <div class="label">Bruttoløn (Januar 2026)</div>
+        <p class="big">34.063,50 <small>kr</small></p>
+      </div>
+    </section>
+
+    <section class="grid">
+      <div class="card avoid-break">
+        <div class="hd">
+          <h2>Samlet lønopgørelse</h2>
+        </div>
+        <div class="bd">
+          <table>
+            <thead>
+              <tr>
+                <th>Løndel</th>
+                <th class="num">Beløb</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Grundløn inkl. overarbejde</td>
+                <td class="num">29.322,50 kr</td>
+              </tr>
+              <tr>
+                <td>Provision i alt</td>
+                <td class="num">3.685,00 kr</td>
+              </tr>
+              <tr>
+                <td>Tillæg i alt</td>
+                <td class="num">1.056,00 kr</td>
+              </tr>
+              <tr>
+                <td><b>Bruttoløn</b></td>
+                <td class="num"><b>34.063,50 kr</b></td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </div>
+
+      <div class="card avoid-break">
+        <div class="hd">
+          <h2>Saldi</h2>
+        </div>
+        <div class="bd">
+          <table>
+            <thead>
+              <tr>
+                <th>Type</th>
+                <th class="num">Optjent</th>
+                <th class="num">Afholdt</th>
+                <th class="num">Rest</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Ferie (dage)</td>
+                <td class="num">18,5</td>
+                <td class="num">6,0</td>
+                <td class="num">12,5</td>
+              </tr>
+              <tr>
+                <td>Afspadsering (timer)</td>
+                <td class="num">12,0</td>
+                <td class="num">4,0</td>
+                <td class="num">8,0</td>
+              </tr>
+            </tbody>
+          </table>
+          <p class="note">Saldi er opgjort som angivet på lønspecifikationen.</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="card avoid-break">
+      <div class="hd">
+        <h2>Hurtigt resumé</h2>
+      </div>
+      <div class="bd">
+        <table>
+          <thead>
+            <tr>
+              <th>Nøglepunkt</th>
+              <th class="num">Værdi</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Normaltimer</td>
+              <td class="num">148,0 t</td>
+            </tr>
+            <tr>
+              <td>Overarbejde</td>
+              <td class="num">7,0 t</td>
+            </tr>
+            <tr>
+              <td>Provision (services + produkter)</td>
+              <td class="num">3.685,00 kr</td>
+            </tr>
+            <tr>
+              <td>Tillæg (aften + lørdag + søndag)</td>
+              <td class="num">1.056,00 kr</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <div class="ftr">
+      <div>Overblik</div>
+      <div style="text-align:right">Lønspecifikation · Januar 2026</div>
+    </div>
+
+    <div class="page-break"></div>
+
+    <!-- ===================== PAGE 2: DETALJER ===================== -->
+    <section class="card">
+      <div class="hd">
+        <h2>Arbejdstid pr. uge</h2>
+      </div>
+      <div class="bd">
+        <table>
+          <thead>
+            <tr>
+              <th>Uge</th>
+              <th class="num">Normaltimer</th>
+              <th class="num">Overtid</th>
+              <th class="num">Beløb</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Uge 1 (30. dec – 5. jan)</td>
+              <td class="num">37,0 t</td>
+              <td class="num">2,0 t</td>
+              <td class="num">7.400,00 kr</td>
+            </tr>
+            <tr>
+              <td>Uge 2 (6. – 12. jan)</td>
+              <td class="num">37,0 t</td>
+              <td class="num">3,5 t</td>
+              <td class="num">7.816,25 kr</td>
+            </tr>
+            <tr>
+              <td>Uge 3 (13. – 19. jan)</td>
+              <td class="num">37,0 t</td>
+              <td class="num">0,0 t</td>
+              <td class="num">6.845,00 kr</td>
+            </tr>
+            <tr>
+              <td>Uge 4 (20. – 26. jan)</td>
+              <td class="num">37,0 t</td>
+              <td class="num">1,5 t</td>
+              <td class="num">7.261,25 kr</td>
+            </tr>
+            <tr>
+              <td><b>I alt</b></td>
+              <td class="num"><b>148,0 t</b></td>
+              <td class="num"><b>7,0 t</b></td>
+              <td class="num"><b>29.322,50 kr</b></td>
+            </tr>
+          </tbody>
+        </table>
+        <p class="note">
+          Satser: Normal 185,00 kr/time. Overtid (50%) 277,50 kr/time.
+        </p>
+      </div>
+    </section>
+
+    <section class="card">
+      <div class="hd">
+        <h2>Provision</h2>
+      </div>
+      <div class="bd">
+        <p class="note" style="margin-top:0">
+          <b>Services:</b> 15% af omsætning over minimum (220 kr/time).<br/>
+          <b>Produkter:</b> 10% af salg.
+        </p>
+        <table>
+          <thead>
+            <tr>
+              <th>Uge</th>
+              <th class="num">Service prov.</th>
+              <th class="num">Produkt prov.</th>
+              <th class="num">I alt</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Uge 1</td>
+              <td class="num">573,00 kr</td>
+              <td class="num">210,00 kr</td>
+              <td class="num">783,00 kr</td>
+            </tr>
+            <tr>
+              <td>Uge 2</td>
+              <td class="num">883,50 kr</td>
+              <td class="num">320,00 kr</td>
+              <td class="num">1.203,50 kr</td>
+            </tr>
+            <tr>
+              <td>Uge 3</td>
+              <td class="num">459,00 kr</td>
+              <td class="num">180,00 kr</td>
+              <td class="num">639,00 kr</td>
+            </tr>
+            <tr>
+              <td>Uge 4</td>
+              <td class="num">769,50 kr</td>
+              <td class="num">290,00 kr</td>
+              <td class="num">1.059,50 kr</td>
+            </tr>
+            <tr>
+              <td><b>I alt</b></td>
+              <td class="num"><b>2.685,00 kr</b></td>
+              <td class="num"><b>1.000,00 kr</b></td>
+              <td class="num"><b>3.685,00 kr</b></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <section class="card">
+      <div class="hd">
+        <h2>Tillæg & fravær</h2>
+      </div>
+      <div class="bd">
+        <div class="grid" style="grid-template-columns: 1fr 1fr;">
+          <div>
+            <table>
+              <thead>
+                <tr>
+                  <th>Tillæg</th>
+                  <th class="num">Timer</th>
+                  <th class="num">Beløb</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Aftentillæg (hverdage 18–21)</td>
+                  <td class="num">12,0</td>
+                  <td class="num">336,00 kr</td>
+                </tr>
+                <tr>
+                  <td>Lørdagstillæg (før kl. 14)</td>
+                  <td class="num">16,0</td>
+                  <td class="num">720,00 kr</td>
+                </tr>
+                <tr>
+                  <td>Søndagstillæg</td>
+                  <td class="num">0,0</td>
+                  <td class="num">0,00 kr</td>
+                </tr>
+                <tr>
+                  <td><b>Tillæg i alt</b></td>
+                  <td class="num"></td>
+                  <td class="num"><b>1.056,00 kr</b></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div>
+            <table>
+              <thead>
+                <tr>
+                  <th>Fravær</th>
+                  <th class="num">Dage</th>
+                  <th class="num">Beløb</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Ferie med løn</td>
+                  <td class="num">0</td>
+                  <td class="num">0,00 kr</td>
+                </tr>
+                <tr>
+                  <td>Sygdom</td>
+                  <td class="num">0</td>
+                  <td class="num">0,00 kr</td>
+                </tr>
+                <tr>
+                  <td>Barns sygedag</td>
+                  <td class="num">0</td>
+                  <td class="num">0,00 kr</td>
+                </tr>
+              </tbody>
+            </table>
+            <p class="note">Ingen fravær registreret i perioden.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="ftr">
+      <div>Detaljer</div>
+      <div style="text-align:right">Lønspecifikation · Januar 2026</div>
+    </div>
+
+  </div>
+</body>
+</html>
diff --git a/.workbench/POC/poc-medarbejdere.html b/.workbench/POC/poc-medarbejdere.html
new file mode 100644
index 0000000..5a4a7c5
--- /dev/null
+++ b/.workbench/POC/poc-medarbejdere.html
@@ -0,0 +1,588 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Medarbejdere - Salon OS</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />
+  <link rel="stylesheet" href="css/konto.css">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* Dark mode - system preference */
+    @media (prefers-color-scheme: dark) {
+      :root:not(.light-mode) {
+        --color-surface: #1e1e1e;
+        --color-background: #121212;
+        --color-background-hover: #2a2a2a;
+        --color-background-alt: #1a1a1a;
+        --color-border: #333;
+        --color-text: #e0e0e0;
+        --color-text-secondary: #999;
+        --color-teal: #26a69a;
+        --color-blue: #42a5f5;
+        --color-red: #ef5350;
+        --color-amber: #ffb74d;
+        --color-purple: #a78bfa;
+        --color-green: #66bb6a;
+      }
+    }
+
+    /* Manual dark mode override */
+    :root.dark-mode {
+      --color-surface: #1e1e1e;
+      --color-background: #121212;
+      --color-background-hover: #2a2a2a;
+      --color-background-alt: #1a1a1a;
+      --color-border: #333;
+      --color-text: #e0e0e0;
+      --color-text-secondary: #999;
+      --color-teal: #26a69a;
+      --color-blue: #42a5f5;
+      --color-red: #ef5350;
+      --color-amber: #ffb74d;
+      --color-purple: #a78bfa;
+      --color-green: #66bb6a;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       ROLE BADGES
+       ========================================== */
+    swp-role-badge.leader {
+      background: color-mix(in srgb, var(--color-blue) 15%, transparent);
+      color: var(--color-blue);
+    }
+
+    /* ==========================================
+       STATS CARDS
+       ========================================== */
+    swp-stats-row {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 20px;
+      margin-bottom: 24px;
+    }
+
+    swp-stat-card {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 20px;
+      background: var(--color-surface);
+      border-radius: 12px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-stat-value {
+      font-size: 28px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-stat-label {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-stat-card.teal swp-stat-value {
+      color: var(--color-teal);
+    }
+
+    swp-stat-card.amber swp-stat-value {
+      color: var(--color-amber);
+    }
+
+    swp-stat-card.purple swp-stat-value {
+      color: var(--color-purple);
+    }
+
+    /* ==========================================
+       TABS
+       ========================================== */
+    swp-tabs {
+      display: flex;
+      gap: 4px;
+      border-bottom: 1px solid var(--color-border);
+      margin-bottom: 24px;
+    }
+
+    swp-tab {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 12px 20px;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+      transition: all 150ms ease;
+    }
+
+    swp-tab:hover {
+      color: var(--color-text);
+      background: var(--color-background-hover);
+    }
+
+    swp-tab[data-active="true"] {
+      color: var(--color-teal);
+      border-bottom-color: var(--color-teal);
+    }
+
+    swp-tab i {
+      font-size: 18px;
+    }
+
+    swp-tab-content {
+      display: none;
+    }
+
+    swp-tab-content[data-active="true"] {
+      display: block;
+    }
+
+    /* ==========================================
+       PERMISSIONS MATRIX
+       ========================================== */
+    swp-permissions-matrix {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+    swp-permissions-matrix table {
+      width: 100%;
+      border-collapse: collapse;
+    }
+    swp-permissions-matrix th,
+    swp-permissions-matrix td {
+      padding: 14px 16px;
+      text-align: center;
+      border-bottom: 1px solid var(--color-border);
+    }
+    swp-permissions-matrix th:first-child,
+    swp-permissions-matrix td:first-child {
+      text-align: left;
+      font-weight: 500;
+    }
+    swp-permissions-matrix thead th {
+      background: var(--color-background-alt);
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+    swp-permissions-matrix tbody tr:last-child td {
+      border-bottom: none;
+    }
+    swp-permissions-matrix .permission-name {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+    swp-permissions-matrix .permission-name i {
+      font-size: 18px;
+      color: var(--color-text-secondary);
+    }
+    swp-permissions-matrix .check {
+      color: var(--color-teal);
+      font-size: 20px;
+    }
+    swp-permissions-matrix .no-access {
+      color: var(--color-border);
+      font-size: 16px;
+    }
+  </style>
+</head>
+<body>
+
+<swp-page-container>
+
+  <!-- Page Header -->
+  <swp-page-header>
+    <swp-page-title>
+      <h1>Medarbejdere</h1>
+      <p>Administrer brugere, roller og rettigheder</p>
+    </swp-page-title>
+  </swp-page-header>
+
+  <!-- Stats Cards -->
+  <swp-stats-row>
+    <swp-stat-card class="teal">
+      <swp-stat-value>4</swp-stat-value>
+      <swp-stat-label>Aktive medarbejdere</swp-stat-label>
+    </swp-stat-card>
+    <swp-stat-card class="amber">
+      <swp-stat-value>1</swp-stat-value>
+      <swp-stat-label>Afventer invitation</swp-stat-label>
+    </swp-stat-card>
+    <swp-stat-card class="purple">
+      <swp-stat-value>4</swp-stat-value>
+      <swp-stat-label>Roller defineret</swp-stat-label>
+    </swp-stat-card>
+  </swp-stats-row>
+
+  <!-- Tabs -->
+  <swp-tabs>
+    <swp-tab data-tab="brugere" data-active="true">
+      <i class="ph ph-users"></i>
+      Brugere
+    </swp-tab>
+    <swp-tab data-tab="roller">
+      <i class="ph ph-shield-check"></i>
+      Roller
+    </swp-tab>
+  </swp-tabs>
+
+  <!-- Tab: Brugere -->
+  <swp-tab-content data-tab="brugere" data-active="true">
+    <swp-users-header>
+      <swp-users-count>
+        <strong>5 af 8</strong> brugere
+        <swp-users-progress>
+          <swp-users-progress-bar style="width: 62.5%"></swp-users-progress-bar>
+        </swp-users-progress>
+      </swp-users-count>
+      <swp-btn class="primary">
+        <i class="ph ph-user-plus"></i>
+        Inviter bruger
+      </swp-btn>
+    </swp-users-header>
+
+    <swp-table-card>
+      <swp-table>
+        <swp-table-header>
+          <swp-table-row>
+            <swp-table-cell>Bruger</swp-table-cell>
+            <swp-table-cell>Rolle</swp-table-cell>
+            <swp-table-cell>Status</swp-table-cell>
+            <swp-table-cell>Sidst aktiv</swp-table-cell>
+            <swp-table-cell></swp-table-cell>
+          </swp-table-row>
+        </swp-table-header>
+        <swp-table-body>
+          <!-- User 1 - Owner -->
+          <swp-table-row>
+            <swp-table-cell>
+              <swp-user-info>
+                <swp-user-avatar>MJ</swp-user-avatar>
+                <swp-user-details>
+                  <swp-user-name>Maria Jensen</swp-user-name>
+                  <swp-user-email>maria@salonbeauty.dk</swp-user-email>
+                </swp-user-details>
+              </swp-user-info>
+            </swp-table-cell>
+            <swp-table-cell>
+              <swp-role-badge class="owner">Ejer</swp-role-badge>
+            </swp-table-cell>
+            <swp-table-cell>
+              <swp-status-badge class="active">
+                <swp-status-dot></swp-status-dot>
+                Aktiv
+              </swp-status-badge>
+            </swp-table-cell>
+            <swp-table-cell>I dag, 14:32</swp-table-cell>
+            <swp-table-cell>
+              <swp-table-actions>
+                <swp-icon-btn title="Rediger">
+                  <i class="ph ph-pencil"></i>
+                </swp-icon-btn>
+              </swp-table-actions>
+            </swp-table-cell>
+          </swp-table-row>
+
+          <!-- User 2 - Admin -->
+          <swp-table-row>
+            <swp-table-cell>
+              <swp-user-info>
+                <swp-user-avatar class="purple">AS</swp-user-avatar>
+                <swp-user-details>
+                  <swp-user-name>Anna Sørensen</swp-user-name>
+                  <swp-user-email>anna@salonbeauty.dk</swp-user-email>
+                </swp-user-details>
+              </swp-user-info>
+            </swp-table-cell>
+            <swp-table-cell>
+              <swp-role-badge class="admin">Admin</swp-role-badge>
+            </swp-table-cell>
+            <swp-table-cell>
+              <swp-status-badge class="active">
+                <swp-status-dot></swp-status-dot>
+                Aktiv
+              </swp-status-badge>
+            </swp-table-cell>
+            <swp-table-cell>I dag, 12:15</swp-table-cell>
+            <swp-table-cell>
+              <swp-table-actions>
+                <swp-icon-btn title="Rediger">
+                  <i class="ph ph-pencil"></i>
+                </swp-icon-btn>
+                <swp-icon-btn class="danger" title="Fjern bruger">
+                  <i class="ph ph-trash"></i>
+                </swp-icon-btn>
+              </swp-table-actions>
+            </swp-table-cell>
+          </swp-table-row>
+
+          <!-- User 3 - Leder -->
+          <swp-table-row>
+            <swp-table-cell>
+              <swp-user-info>
+                <swp-user-avatar class="blue">LP</swp-user-avatar>
+                <swp-user-details>
+                  <swp-user-name>Louise Pedersen</swp-user-name>
+                  <swp-user-email>louise@salonbeauty.dk</swp-user-email>
+                </swp-user-details>
+              </swp-user-info>
+            </swp-table-cell>
+            <swp-table-cell>
+              <swp-role-badge class="leader">Leder</swp-role-badge>
+            </swp-table-cell>
+            <swp-table-cell>
+              <swp-status-badge class="active">
+                <swp-status-dot></swp-status-dot>
+                Aktiv
+              </swp-status-badge>
+            </swp-table-cell>
+            <swp-table-cell>I går, 17:45</swp-table-cell>
+            <swp-table-cell>
+              <swp-table-actions>
+                <swp-icon-btn title="Rediger">
+                  <i class="ph ph-pencil"></i>
+                </swp-icon-btn>
+                <swp-icon-btn class="danger" title="Fjern bruger">
+                  <i class="ph ph-trash"></i>
+                </swp-icon-btn>
+              </swp-table-actions>
+            </swp-table-cell>
+          </swp-table-row>
+
+          <!-- User 4 -->
+          <swp-table-row>
+            <swp-table-cell>
+              <swp-user-info>
+                <swp-user-avatar class="amber">KN</swp-user-avatar>
+                <swp-user-details>
+                  <swp-user-name>Katrine Nielsen</swp-user-name>
+                  <swp-user-email>katrine@salonbeauty.dk</swp-user-email>
+                </swp-user-details>
+              </swp-user-info>
+            </swp-table-cell>
+            <swp-table-cell>
+              <swp-role-badge>Medarbejder</swp-role-badge>
+            </swp-table-cell>
+            <swp-table-cell>
+              <swp-status-badge class="active">
+                <swp-status-dot></swp-status-dot>
+                Aktiv
+              </swp-status-badge>
+            </swp-table-cell>
+            <swp-table-cell>27. dec, 09:30</swp-table-cell>
+            <swp-table-cell>
+              <swp-table-actions>
+                <swp-icon-btn title="Rediger">
+                  <i class="ph ph-pencil"></i>
+                </swp-icon-btn>
+                <swp-icon-btn class="danger" title="Fjern bruger">
+                  <i class="ph ph-trash"></i>
+                </swp-icon-btn>
+              </swp-table-actions>
+            </swp-table-cell>
+          </swp-table-row>
+
+          <!-- User 5 - Invited -->
+          <swp-table-row>
+            <swp-table-cell>
+              <swp-user-info>
+                <swp-user-avatar class="purple">SH</swp-user-avatar>
+                <swp-user-details>
+                  <swp-user-name>Sofie Hansen</swp-user-name>
+                  <swp-user-email>sofie@salonbeauty.dk</swp-user-email>
+                </swp-user-details>
+              </swp-user-info>
+            </swp-table-cell>
+            <swp-table-cell>
+              <swp-role-badge>Medarbejder</swp-role-badge>
+            </swp-table-cell>
+            <swp-table-cell>
+              <swp-status-badge class="invited">
+                <swp-status-dot></swp-status-dot>
+                Invitation sendt
+              </swp-status-badge>
+            </swp-table-cell>
+            <swp-table-cell>-</swp-table-cell>
+            <swp-table-cell>
+              <swp-table-actions>
+                <swp-icon-btn title="Send invitation igen">
+                  <i class="ph ph-paper-plane-tilt"></i>
+                </swp-icon-btn>
+                <swp-icon-btn class="danger" title="Annuller invitation">
+                  <i class="ph ph-x"></i>
+                </swp-icon-btn>
+              </swp-table-actions>
+            </swp-table-cell>
+          </swp-table-row>
+        </swp-table-body>
+      </swp-table>
+    </swp-table-card>
+  </swp-tab-content>
+
+  <!-- Tab: Roller -->
+  <swp-tab-content data-tab="roller">
+    <swp-permissions-matrix>
+      <table>
+        <thead>
+          <tr>
+            <th>Rettighed</th>
+            <th>Ejer</th>
+            <th>Admin</th>
+            <th>Leder</th>
+            <th>Medarbejder</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>
+              <span class="permission-name">
+                <i class="ph ph-calendar"></i>
+                Kalender
+              </span>
+            </td>
+            <td><i class="ph ph-check-circle check"></i></td>
+            <td><i class="ph ph-check-circle check"></i></td>
+            <td><i class="ph ph-check-circle check"></i></td>
+            <td><i class="ph ph-check-circle check"></i></td>
+          </tr>
+          <tr>
+            <td>
+              <span class="permission-name">
+                <i class="ph ph-users"></i>
+                Medarbejdere
+              </span>
+            </td>
+            <td><i class="ph ph-check-circle check"></i></td>
+            <td><i class="ph ph-check-circle check"></i></td>
+            <td><i class="ph ph-check-circle check"></i></td>
+            <td><i class="ph ph-minus no-access"></i></td>
+          </tr>
+          <tr>
+            <td>
+              <span class="permission-name">
+                <i class="ph ph-address-book"></i>
+                Kunder
+              </span>
+            </td>
+            <td><i class="ph ph-check-circle check"></i></td>
+            <td><i class="ph ph-check-circle check"></i></td>
+            <td><i class="ph ph-check-circle check"></i></td>
+            <td><i class="ph ph-check-circle check"></i></td>
+          </tr>
+          <tr>
+            <td>
+              <span class="permission-name">
+                <i class="ph ph-chart-bar"></i>
+                Rapporter & Økonomi
+              </span>
+            </td>
+            <td><i class="ph ph-check-circle check"></i></td>
+            <td><i class="ph ph-check-circle check"></i></td>
+            <td><i class="ph ph-minus no-access"></i></td>
+            <td><i class="ph ph-minus no-access"></i></td>
+          </tr>
+        </tbody>
+      </table>
+    </swp-permissions-matrix>
+  </swp-tab-content>
+
+</swp-page-container>
+
+<script>
+  // Simple tab switching
+  document.querySelectorAll('swp-tab').forEach(tab => {
+    tab.addEventListener('click', () => {
+      const tabName = tab.dataset.tab;
+
+      // Update tab active states
+      document.querySelectorAll('swp-tab').forEach(t => t.removeAttribute('data-active'));
+      tab.setAttribute('data-active', 'true');
+
+      // Update content active states
+      document.querySelectorAll('swp-tab-content').forEach(c => c.removeAttribute('data-active'));
+      document.querySelector(`swp-tab-content[data-tab="${tabName}"]`).setAttribute('data-active', 'true');
+    });
+  });
+</script>
+
+</body>
+</html>
diff --git a/.workbench/POC/poc-produkt-opret.html b/.workbench/POC/poc-produkt-opret.html
new file mode 100644
index 0000000..8ff70bf
--- /dev/null
+++ b/.workbench/POC/poc-produkt-opret.html
@@ -0,0 +1,1458 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Opret nyt produkt</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    a {
+      color: var(--color-teal);
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-back-link {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-back-link:hover {
+      color: var(--color-teal);
+    }
+
+    swp-back-link svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-page-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px;
+    }
+
+    @media (max-width: 900px) {
+      .grid-2 { grid-template-columns: 1fr; }
+    }
+
+    /* ==========================================
+       CARDS
+       ========================================== */
+    swp-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+      margin-bottom: 20px;
+      overflow: hidden;
+    }
+
+    swp-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-card-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-card-hint {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-card-body {
+      display: block;
+      padding: 20px;
+    }
+
+    /* ==========================================
+       BUTTONS
+       ========================================== */
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-btn.small {
+      padding: 6px 12px;
+      font-size: 12px;
+    }
+
+    /* ==========================================
+       FORM ELEMENTS
+       ========================================== */
+    swp-form-grid {
+      display: grid;
+      gap: 16px;
+    }
+
+    swp-form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    swp-form-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    swp-form-field.full {
+      grid-column: 1 / -1;
+    }
+
+    swp-form-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+    }
+
+    swp-form-field input,
+    swp-form-field select,
+    swp-form-field textarea {
+      padding: 10px 12px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      color: var(--color-text);
+    }
+
+    swp-form-field input:focus,
+    swp-form-field select:focus,
+    swp-form-field textarea:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-form-field textarea {
+      min-height: 150px;
+      resize: vertical;
+    }
+
+    swp-form-field input.mono {
+      font-family: var(--font-mono);
+    }
+
+    swp-form-field input[readonly] {
+      background: var(--color-background-alt);
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       TOGGLE SLIDER (Ja/Nej)
+       ========================================== */
+    swp-toggle-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 0;
+    }
+
+    swp-toggle-label {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    swp-toggle-slider {
+      display: inline-flex;
+      width: fit-content;
+      background: var(--color-background);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      position: relative;
+      cursor: pointer;
+    }
+
+    swp-toggle-slider::before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: calc(50% - 4px);
+      height: calc(100% - 4px);
+      background: color-mix(in srgb, var(--color-green) 18%, white);
+      border-radius: 4px;
+      transition: transform 200ms ease, background 200ms ease;
+    }
+
+    swp-toggle-slider[data-value="no"]::before {
+      transform: translateX(100%);
+      background: color-mix(in srgb, var(--color-red) 18%, white);
+    }
+
+    swp-toggle-option {
+      position: relative;
+      z-index: 1;
+      padding: 5px 16px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      transition: color 200ms ease;
+      user-select: none;
+    }
+
+    swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
+      color: var(--color-green);
+      font-weight: 600;
+    }
+
+    swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
+      color: var(--color-red);
+      font-weight: 600;
+    }
+
+    /* ==========================================
+       VARIANTS TABLE
+       ========================================== */
+    swp-variants-table {
+      display: block;
+      width: 100%;
+    }
+
+    swp-variants-header,
+    swp-variants-row {
+      display: grid;
+      grid-template-columns: 1fr 120px 80px 100px 80px;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-variants-header {
+      padding: 10px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-variants-header span {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-variants-header span.right {
+      text-align: right;
+    }
+
+    swp-variants-row {
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-variants-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-variants-row span {
+      font-size: 14px;
+    }
+
+    swp-variants-row span.mono {
+      font-family: var(--font-mono);
+      font-size: 13px;
+    }
+
+    swp-variants-row span.right {
+      text-align: right;
+    }
+
+    swp-variants-row span.muted {
+      color: var(--color-text-secondary);
+    }
+
+    swp-variants-actions {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+
+    swp-variants-actions button {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: var(--color-background);
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 150ms ease;
+    }
+
+    swp-variants-actions button:hover {
+      background: var(--color-border);
+    }
+
+    swp-variants-actions button svg {
+      width: 14px;
+      height: 14px;
+      fill: var(--color-text-secondary);
+    }
+
+    swp-add-variant {
+      display: flex;
+      justify-content: center;
+      padding-top: 16px;
+    }
+
+    /* ==========================================
+       PRICE & MARGIN
+       ========================================== */
+    swp-price-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    swp-margin-display {
+      display: flex;
+      gap: 24px;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      margin-top: 16px;
+    }
+
+    swp-margin-item {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    swp-margin-label {
+      font-size: 11px;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-margin-value {
+      font-size: 20px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-green);
+    }
+
+    /* ==========================================
+       STOCK DISPLAY
+       ========================================== */
+    swp-stock-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    /* ==========================================
+       SUPPLIER INFO
+       ========================================== */
+    swp-supplier-grid {
+      display: grid;
+      gap: 16px;
+    }
+
+    /* ==========================================
+       BARCODE SCANNER
+       ========================================== */
+    swp-scanner-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      border: 2px solid var(--color-border);
+      margin-bottom: 20px;
+      overflow: hidden;
+      transition: border-color 300ms ease;
+    }
+
+    swp-scanner-card.scanning {
+      border-color: var(--color-blue);
+    }
+
+    swp-scanner-card.success {
+      border-color: var(--color-green);
+    }
+
+    swp-scanner-card.error {
+      border-color: var(--color-amber);
+    }
+
+    swp-scanner-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+      background: var(--color-background-alt);
+    }
+
+    swp-scanner-header svg {
+      width: 20px;
+      height: 20px;
+      fill: var(--color-teal);
+    }
+
+    swp-scanner-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-scanner-body {
+      padding: 24px;
+    }
+
+    /* Scanner States */
+    swp-scanner-ready {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+      padding: 20px;
+    }
+
+    swp-scan-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 12px;
+      width: 100%;
+      padding: 20px 32px;
+      font-size: 16px;
+      font-weight: 600;
+      font-family: var(--font-family);
+      color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 8%, white);
+      border: 2px dashed var(--color-teal);
+      border-radius: 12px;
+      cursor: pointer;
+      transition: all 200ms ease;
+    }
+
+    swp-scan-button:hover {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      border-style: solid;
+    }
+
+    swp-scan-button svg {
+      width: 28px;
+      height: 28px;
+      fill: currentColor;
+    }
+
+    swp-scanner-hint {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      text-align: center;
+    }
+
+    /* Scanning State */
+    swp-scanner-scanning {
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+      padding: 20px;
+    }
+
+    swp-scanner-scanning.active {
+      display: flex;
+    }
+
+    swp-scanning-status {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 14px;
+      color: var(--color-blue);
+      font-weight: 500;
+    }
+
+    swp-scanning-status .pulse {
+      width: 10px;
+      height: 10px;
+      background: var(--color-blue);
+      border-radius: 50%;
+      animation: pulse 1.5s ease-in-out infinite;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.5; transform: scale(1.2); }
+    }
+
+    swp-scanned-code {
+      font-size: 36px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      letter-spacing: 4px;
+      color: var(--color-text);
+      min-height: 48px;
+    }
+
+    .scanner-input {
+      position: absolute;
+      left: -9999px;
+      opacity: 0;
+      pointer-events: none;
+    }
+
+    swp-debug-codes {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      margin-top: 16px;
+      padding: 12px;
+      background: var(--color-background-alt);
+      border: 1px dashed var(--color-border);
+      border-radius: 6px;
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-debug-codes strong {
+      color: var(--color-text);
+      margin-bottom: 4px;
+    }
+
+    swp-debug-codes code {
+      font-family: var(--font-mono);
+      font-size: 11px;
+      background: var(--color-surface);
+      padding: 2px 6px;
+      border-radius: 3px;
+      margin-right: 8px;
+      user-select: all;
+      cursor: pointer;
+    }
+
+    /* Loading State */
+    swp-scanner-loading {
+      display: none;
+      flex-direction: column;
+      align-items: center;
+      gap: 16px;
+      padding: 20px;
+    }
+
+    swp-scanner-loading.active {
+      display: flex;
+    }
+
+    swp-loading-spinner {
+      width: 40px;
+      height: 40px;
+      border: 3px solid var(--color-border);
+      border-top-color: var(--color-teal);
+      border-radius: 50%;
+      animation: spin 1s linear infinite;
+    }
+
+    @keyframes spin {
+      to { transform: rotate(360deg); }
+    }
+
+    swp-loading-text {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-loading-code {
+      font-size: 20px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      letter-spacing: 2px;
+      color: var(--color-text);
+    }
+
+    /* Success State */
+    swp-scanner-success {
+      display: none;
+      flex-direction: column;
+      gap: 20px;
+      padding: 20px;
+    }
+
+    swp-scanner-success.active {
+      display: flex;
+    }
+
+    swp-success-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      color: var(--color-green);
+      font-weight: 600;
+      font-size: 15px;
+    }
+
+    swp-success-header svg {
+      width: 22px;
+      height: 22px;
+      fill: currentColor;
+    }
+
+    swp-product-preview {
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      padding: 16px;
+    }
+
+    swp-preview-row {
+      display: flex;
+      padding: 8px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-preview-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-preview-label {
+      width: 100px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      flex-shrink: 0;
+    }
+
+    swp-preview-value {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-preview-value.description {
+      font-size: 13px;
+      line-height: 1.5;
+    }
+
+    swp-scanner-actions {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    swp-scanner-actions swp-btn {
+      width: 100%;
+      justify-content: center;
+    }
+
+    swp-btn.success {
+      background: var(--color-green);
+      color: white;
+    }
+
+    swp-btn.success:hover {
+      background: #388e3c;
+    }
+
+    /* Error/Not Found State */
+    swp-scanner-notfound {
+      display: none;
+      flex-direction: column;
+      gap: 20px;
+      padding: 20px;
+    }
+
+    swp-scanner-notfound.active {
+      display: flex;
+    }
+
+    swp-notfound-header {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      color: var(--color-amber);
+      font-weight: 600;
+      font-size: 15px;
+    }
+
+    swp-notfound-header svg {
+      width: 22px;
+      height: 22px;
+      fill: currentColor;
+    }
+
+    swp-notfound-code {
+      font-size: 24px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      letter-spacing: 2px;
+      color: var(--color-text);
+      text-align: center;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+    }
+
+    swp-notfound-message {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      text-align: center;
+      line-height: 1.6;
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-back-link>
+        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+        Produkter
+      </swp-back-link>
+      <swp-page-title>Nyt produkt</swp-page-title>
+    </swp-topbar-left>
+    <swp-topbar-right>
+      <swp-btn class="secondary">Annuller</swp-btn>
+      <swp-btn class="primary">
+        <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+        Opret produkt
+      </swp-btn>
+    </swp-topbar-right>
+  </swp-topbar>
+
+  <swp-page-container>
+    <div class="grid-2">
+      <!-- VENSTRE KOLONNE -->
+      <div>
+        <!-- Basisoplysninger -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Basisoplysninger</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-form-grid>
+              <swp-form-field class="full">
+                <swp-form-label>Produktnavn</swp-form-label>
+                <input type="text" id="productName" placeholder="Indtast produktnavn..." />
+              </swp-form-field>
+
+              <swp-form-row>
+                <swp-form-field>
+                  <swp-form-label>Varenummer</swp-form-label>
+                  <input type="text" id="productSku" class="mono" placeholder="F.eks. ABC-123" />
+                </swp-form-field>
+                <swp-form-field>
+                  <swp-form-label>EAN / Stregkode</swp-form-label>
+                  <input type="text" id="productEan" class="mono" placeholder="Scannes automatisk" />
+                </swp-form-field>
+              </swp-form-row>
+
+              <swp-form-row>
+                <swp-form-field>
+                  <swp-form-label>Kategori</swp-form-label>
+                  <select id="productCategory">
+                    <option value="">Vælg kategori...</option>
+                    <option value="haarpleje">Hårpleje</option>
+                    <option value="styling">Styling</option>
+                    <option value="farve">Farve</option>
+                    <option value="tilbehoer">Tilbehør</option>
+                  </select>
+                </swp-form-field>
+                <swp-form-field>
+                  <swp-form-label>Brand</swp-form-label>
+                  <select id="productBrand">
+                    <option value="">Vælg brand...</option>
+                    <option value="redken">Redken</option>
+                    <option value="olaplex">Olaplex</option>
+                    <option value="kerastase">Kérastase</option>
+                    <option value="wella">Wella</option>
+                    <option value="loreal">L'Oréal</option>
+                  </select>
+                </swp-form-field>
+              </swp-form-row>
+
+              <swp-form-field class="full">
+                <swp-form-label>Beskrivelse</swp-form-label>
+                <textarea id="productDescription" placeholder="Indtast produktbeskrivelse..."></textarea>
+              </swp-form-field>
+
+              <swp-toggle-row>
+                <swp-toggle-label>Produkt aktiv</swp-toggle-label>
+                <swp-toggle-slider data-value="yes">
+                  <swp-toggle-option>Ja</swp-toggle-option>
+                  <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+              </swp-toggle-row>
+            </swp-form-grid>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Leverandør -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Leverandør</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-supplier-grid>
+              <swp-form-field>
+                <swp-form-label>Leverandør</swp-form-label>
+                <select>
+                  <option value="">Vælg leverandør...</option>
+                  <option>L'Oréal Professionnel</option>
+                  <option>Beauty Group Denmark</option>
+                  <option>Hairware ApS</option>
+                </select>
+              </swp-form-field>
+
+              <swp-form-row>
+                <swp-form-field>
+                  <swp-form-label>Leverandør varenr</swp-form-label>
+                  <input type="text" class="mono" placeholder="F.eks. E3845600" />
+                </swp-form-field>
+                <swp-form-field>
+                  <swp-form-label>Leveringstid</swp-form-label>
+                  <input type="text" placeholder="F.eks. 3-5 dage" />
+                </swp-form-field>
+              </swp-form-row>
+            </swp-supplier-grid>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Lager -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Lagerindstillinger</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-stock-grid>
+              <swp-form-field>
+                <swp-form-label>Startlager</swp-form-label>
+                <input type="number" value="0" min="0" />
+              </swp-form-field>
+              <swp-form-field>
+                <swp-form-label>Minimumslager</swp-form-label>
+                <input type="number" value="5" min="0" />
+              </swp-form-field>
+              <swp-form-field>
+                <swp-form-label>Genbestillingspunkt</swp-form-label>
+                <input type="number" value="10" min="0" />
+              </swp-form-field>
+            </swp-stock-grid>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Varianter -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Varianter</swp-card-title>
+            <swp-card-hint>Størrelser og variationer</swp-card-hint>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-variants-table>
+              <swp-variants-header>
+                <span>Variant</span>
+                <span>Varenr</span>
+                <span class="right">Lager</span>
+                <span class="right">Pris</span>
+                <span></span>
+              </swp-variants-header>
+              <!-- Varianter tilføjes her -->
+            </swp-variants-table>
+            <swp-add-variant>
+              <swp-btn class="secondary small">+ Tilføj variant</swp-btn>
+            </swp-add-variant>
+          </swp-card-body>
+        </swp-card>
+      </div>
+
+      <!-- HØJRE KOLONNE -->
+      <div>
+        <!-- Stregkodescanner -->
+        <swp-scanner-card id="scannerCard">
+          <swp-scanner-header>
+            <svg viewBox="0 0 24 24"><path d="M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h3v12H7V6zm4 0h1v12h-1V6zm3 0h2v12h-2V6zm3 0h3v12h-3V6zm4 0h1v12h-1V6z"/></svg>
+            <swp-scanner-title>Stregkodescanner</swp-scanner-title>
+          </swp-scanner-header>
+          <swp-scanner-body>
+            <!-- Ready State (initial) -->
+            <swp-scanner-ready id="scannerReady">
+              <swp-scan-button id="scanButton">
+                <svg viewBox="0 0 24 24"><path d="M2 6h2v12H2V6zm3 0h1v12H5V6zm2 0h3v12H7V6zm4 0h1v12h-1V6zm3 0h2v12h-2V6zm3 0h3v12h-3V6zm4 0h1v12h-1V6z"/></svg>
+                SCAN STREGKODE
+              </swp-scan-button>
+              <swp-scanner-hint>Klik på knappen og scan produktets stregkode</swp-scanner-hint>
+              <swp-debug-codes>
+                <strong>Test EAN-koder:</strong>
+                <code>884486532879</code> Redken Serum
+                <code>3474636610143</code> Kérastase Olie
+                <code>0850018802239</code> Olaplex No.7
+                <code>4015600159122</code> Wella Glam Mist
+              </swp-debug-codes>
+            </swp-scanner-ready>
+
+            <!-- Scanning State -->
+            <swp-scanner-scanning id="scannerScanning">
+              <swp-scanning-status>
+                <span class="pulse"></span>
+                Klar til scanning...
+              </swp-scanning-status>
+              <swp-scanned-code id="scannedCodeDisplay"></swp-scanned-code>
+              <swp-scanner-hint>Scan nu produktets stregkode med din scanner</swp-scanner-hint>
+            </swp-scanner-scanning>
+
+            <!-- Loading State -->
+            <swp-scanner-loading id="scannerLoading">
+              <swp-loading-spinner></swp-loading-spinner>
+              <swp-loading-text>Henter produktinfo...</swp-loading-text>
+              <swp-loading-code id="loadingCode"></swp-loading-code>
+            </swp-scanner-loading>
+
+            <!-- Success State -->
+            <swp-scanner-success id="scannerSuccess">
+              <swp-success-header>
+                <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+                Produkt fundet!
+              </swp-success-header>
+              <swp-product-preview>
+                <swp-preview-row>
+                  <swp-preview-label>Navn</swp-preview-label>
+                  <swp-preview-value id="previewName"></swp-preview-value>
+                </swp-preview-row>
+                <swp-preview-row>
+                  <swp-preview-label>Brand</swp-preview-label>
+                  <swp-preview-value id="previewBrand"></swp-preview-value>
+                </swp-preview-row>
+                <swp-preview-row>
+                  <swp-preview-label>Kategori</swp-preview-label>
+                  <swp-preview-value id="previewCategory"></swp-preview-value>
+                </swp-preview-row>
+                <swp-preview-row>
+                  <swp-preview-label>Beskrivelse</swp-preview-label>
+                  <swp-preview-value id="previewDescription" class="description"></swp-preview-value>
+                </swp-preview-row>
+              </swp-product-preview>
+              <swp-scanner-actions>
+                <swp-btn class="success" id="useProductBtn">
+                  <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+                  Brug disse oplysninger
+                </swp-btn>
+                <swp-btn class="secondary" id="scanAgainBtn">Scan igen</swp-btn>
+              </swp-scanner-actions>
+            </swp-scanner-success>
+
+            <!-- Not Found State -->
+            <swp-scanner-notfound id="scannerNotFound">
+              <swp-notfound-header>
+                <svg viewBox="0 0 24 24"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
+                Produktet blev ikke fundet
+              </swp-notfound-header>
+              <swp-notfound-code id="notFoundCode"></swp-notfound-code>
+              <swp-notfound-message>
+                EAN-koden er registreret i formularen.<br>
+                Udfyld resten af oplysningerne manuelt.
+              </swp-notfound-message>
+              <swp-scanner-actions>
+                <swp-btn class="secondary" id="scanAgainBtn2">Scan igen</swp-btn>
+                <swp-btn class="primary" id="fillManualBtn">Udfyld manuelt</swp-btn>
+              </swp-scanner-actions>
+            </swp-scanner-notfound>
+
+            <!-- Hidden scanner input -->
+            <input type="text" id="scannerInput" class="scanner-input" autocomplete="off" />
+          </swp-scanner-body>
+        </swp-scanner-card>
+
+        <!-- Pris & avance -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Pris & avance</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-price-grid>
+              <swp-form-field>
+                <swp-form-label>Indkøbspris (ekskl. moms)</swp-form-label>
+                <input type="text" id="purchasePrice" class="mono" placeholder="0,00 kr" />
+              </swp-form-field>
+              <swp-form-field>
+                <swp-form-label>Salgspris (inkl. moms)</swp-form-label>
+                <input type="text" id="salePrice" class="mono" placeholder="0,00 kr" />
+              </swp-form-field>
+            </swp-price-grid>
+            <swp-margin-display>
+              <swp-margin-item>
+                <swp-margin-label>Avance</swp-margin-label>
+                <swp-margin-value id="marginAmount">0,00 kr</swp-margin-value>
+              </swp-margin-item>
+              <swp-margin-item>
+                <swp-margin-label>Avance %</swp-margin-label>
+                <swp-margin-value id="marginPercent">0%</swp-margin-value>
+              </swp-margin-item>
+            </swp-margin-display>
+          </swp-card-body>
+        </swp-card>
+      </div>
+    </div>
+  </swp-page-container>
+
+  <script>
+    // ==========================================
+    // MOCK PRODUCT DATABASE
+    // ==========================================
+    const mockProducts = {
+      '884486532879': {
+        name: 'Redken Acidic Bonding Concentrate 24/7 Night & Day Serum 100 ml',
+        brand: 'redken',
+        category: 'haarpleje',
+        description: 'Et plejende og styrkende reparationsserum, der arbejder kontinuerligt for at genopbygge svækket hårstruktur. Tilfører fugt og glans uden at tynge, og efterlader håret mere elastisk og sundt over tid. Særligt effektivt til skadet, farvebehandlet eller kemisk behandlet hår.\n\nFordel 1-2 pump i håndklædetørt eller tørt hår. Skal ikke skylles ud. Kan bruges dagligt og som natpleje for intensiv reparation.'
+      },
+      '3474636610143': {
+        name: 'Kérastase Elixir Ultime L\'Huile Originale 100 ml',
+        brand: 'kerastase',
+        category: 'haarpleje',
+        description: 'Luksus hårolie med argan olie og camellia olie. Giver fantastisk glans og blødhed uden at tynge håret. Perfekt til alle hårtyper som finishing produkt.'
+      },
+      '0850018802239': {
+        name: 'Olaplex No.7 Bonding Oil 30 ml',
+        brand: 'olaplex',
+        category: 'haarpleje',
+        description: 'Ultralettere, koncentreret stylingsolie, der dramatisk øger glans, blødhed og farveintensitet. Beskytter mod varme op til 230°C.'
+      },
+      '4015600159122': {
+        name: 'Wella Professionals EIMI Glam Mist 200 ml',
+        brand: 'wella',
+        category: 'styling',
+        description: 'Let glansspray der giver fantastisk glans og antistatisk effekt. Perfekt som finish på alle frisurer.'
+      }
+    };
+
+    // ==========================================
+    // SCANNER STATE MANAGEMENT
+    // ==========================================
+    const scannerCard = document.getElementById('scannerCard');
+    const scannerReady = document.getElementById('scannerReady');
+    const scannerScanning = document.getElementById('scannerScanning');
+    const scannerLoading = document.getElementById('scannerLoading');
+    const scannerSuccess = document.getElementById('scannerSuccess');
+    const scannerNotFound = document.getElementById('scannerNotFound');
+    const scanButton = document.getElementById('scanButton');
+    const scannerInput = document.getElementById('scannerInput');
+    const scannedCodeDisplay = document.getElementById('scannedCodeDisplay');
+
+    let currentState = 'ready';
+    let scannedCode = '';
+    let scanTimeout = null;
+    let foundProduct = null;
+
+    function setState(state) {
+      currentState = state;
+
+      // Hide all states
+      scannerReady.style.display = 'none';
+      scannerScanning.classList.remove('active');
+      scannerLoading.classList.remove('active');
+      scannerSuccess.classList.remove('active');
+      scannerNotFound.classList.remove('active');
+
+      // Reset card border
+      scannerCard.classList.remove('scanning', 'success', 'error');
+
+      switch(state) {
+        case 'ready':
+          scannerReady.style.display = 'flex';
+          break;
+        case 'scanning':
+          scannerScanning.classList.add('active');
+          scannerCard.classList.add('scanning');
+          break;
+        case 'loading':
+          scannerLoading.classList.add('active');
+          break;
+        case 'success':
+          scannerSuccess.classList.add('active');
+          scannerCard.classList.add('success');
+          break;
+        case 'notfound':
+          scannerNotFound.classList.add('active');
+          scannerCard.classList.add('error');
+          break;
+      }
+    }
+
+    // ==========================================
+    // SCANNER BUTTON CLICK
+    // ==========================================
+    scanButton.addEventListener('click', () => {
+      scannedCode = '';
+      scannedCodeDisplay.textContent = '';
+      setState('scanning');
+      scannerInput.value = '';
+      scannerInput.focus();
+    });
+
+    // ==========================================
+    // SCANNER INPUT HANDLING
+    // ==========================================
+    scannerInput.addEventListener('input', (e) => {
+      // Update display with current value
+      scannedCode = e.target.value;
+      scannedCodeDisplay.textContent = scannedCode;
+
+      // Reset timeout on each keystroke
+      if (scanTimeout) {
+        clearTimeout(scanTimeout);
+      }
+
+      // After 200ms of no input, consider scan complete
+      scanTimeout = setTimeout(() => {
+        if (scannedCode.length >= 8) {
+          processScannedCode(scannedCode);
+        }
+      }, 200);
+    });
+
+    // Handle Enter/Tab from scanner
+    scannerInput.addEventListener('keydown', (e) => {
+      if (e.key === 'Enter' || e.key === 'Tab') {
+        e.preventDefault();
+        if (scannedCode.length >= 8) {
+          clearTimeout(scanTimeout);
+          processScannedCode(scannedCode);
+        }
+      }
+    });
+
+    // Blur handling - if user clicks away during scanning
+    scannerInput.addEventListener('blur', () => {
+      if (currentState === 'scanning' && scannedCode.length === 0) {
+        // No code scanned, return to ready
+        setTimeout(() => {
+          if (currentState === 'scanning') {
+            setState('ready');
+          }
+        }, 500);
+      }
+    });
+
+    // ==========================================
+    // PROCESS SCANNED CODE
+    // ==========================================
+    async function processScannedCode(code) {
+      setState('loading');
+      document.getElementById('loadingCode').textContent = code;
+
+      // Simulate API delay
+      await new Promise(r => setTimeout(r, 1500));
+
+      // Look up product
+      foundProduct = mockProducts[code] || null;
+
+      if (foundProduct) {
+        // Show success state
+        document.getElementById('previewName').textContent = foundProduct.name;
+        document.getElementById('previewBrand').textContent = getBrandDisplayName(foundProduct.brand);
+        document.getElementById('previewCategory').textContent = getCategoryDisplayName(foundProduct.category);
+        document.getElementById('previewDescription').textContent = foundProduct.description;
+        setState('success');
+      } else {
+        // Show not found state
+        document.getElementById('notFoundCode').textContent = code;
+        // Still fill in the EAN field
+        document.getElementById('productEan').value = code;
+        setState('notfound');
+      }
+    }
+
+    function getBrandDisplayName(brand) {
+      const brands = {
+        'redken': 'Redken',
+        'olaplex': 'Olaplex',
+        'kerastase': 'Kérastase',
+        'wella': 'Wella',
+        'loreal': 'L\'Oréal'
+      };
+      return brands[brand] || brand;
+    }
+
+    function getCategoryDisplayName(category) {
+      const categories = {
+        'haarpleje': 'Hårpleje',
+        'styling': 'Styling',
+        'farve': 'Farve',
+        'tilbehoer': 'Tilbehør'
+      };
+      return categories[category] || category;
+    }
+
+    // ==========================================
+    // USE PRODUCT BUTTON
+    // ==========================================
+    document.getElementById('useProductBtn').addEventListener('click', () => {
+      if (foundProduct) {
+        // Fill in the form
+        document.getElementById('productName').value = foundProduct.name;
+        document.getElementById('productEan').value = scannedCode;
+        document.getElementById('productDescription').value = foundProduct.description;
+
+        // Set selects
+        const categorySelect = document.getElementById('productCategory');
+        const brandSelect = document.getElementById('productBrand');
+
+        for (let option of categorySelect.options) {
+          if (option.value === foundProduct.category) {
+            option.selected = true;
+            break;
+          }
+        }
+
+        for (let option of brandSelect.options) {
+          if (option.value === foundProduct.brand) {
+            option.selected = true;
+            break;
+          }
+        }
+
+        // Reset scanner to ready
+        setState('ready');
+        scannedCode = '';
+        foundProduct = null;
+
+        // Scroll to form and highlight
+        document.getElementById('productName').focus();
+      }
+    });
+
+    // ==========================================
+    // SCAN AGAIN BUTTONS
+    // ==========================================
+    document.getElementById('scanAgainBtn').addEventListener('click', () => {
+      scannedCode = '';
+      scannedCodeDisplay.textContent = '';
+      foundProduct = null;
+      setState('scanning');
+      scannerInput.value = '';
+      scannerInput.focus();
+    });
+
+    document.getElementById('scanAgainBtn2').addEventListener('click', () => {
+      scannedCode = '';
+      scannedCodeDisplay.textContent = '';
+      setState('scanning');
+      scannerInput.value = '';
+      scannerInput.focus();
+    });
+
+    // ==========================================
+    // FILL MANUAL BUTTON
+    // ==========================================
+    document.getElementById('fillManualBtn').addEventListener('click', () => {
+      setState('ready');
+      document.getElementById('productName').focus();
+    });
+
+    // ==========================================
+    // TOGGLE SLIDER
+    // ==========================================
+    document.querySelectorAll('swp-toggle-slider').forEach(slider => {
+      const options = slider.querySelectorAll('swp-toggle-option');
+      options.forEach((option, index) => {
+        option.addEventListener('click', () => {
+          slider.dataset.value = index === 0 ? 'yes' : 'no';
+        });
+      });
+    });
+
+    // ==========================================
+    // MARGIN CALCULATION
+    // ==========================================
+    const purchaseInput = document.getElementById('purchasePrice');
+    const saleInput = document.getElementById('salePrice');
+    const marginAmount = document.getElementById('marginAmount');
+    const marginPercent = document.getElementById('marginPercent');
+
+    function parsePrice(value) {
+      return parseFloat(value.replace(/[^\d,]/g, '').replace(',', '.')) || 0;
+    }
+
+    function formatPrice(value) {
+      return value.toFixed(2).replace('.', ',') + ' kr';
+    }
+
+    function calculateMargin() {
+      const purchase = parsePrice(purchaseInput.value);
+      const sale = parsePrice(saleInput.value);
+
+      if (purchase > 0 && sale > 0) {
+        const saleExVat = sale / 1.25; // Remove 25% VAT
+        const margin = saleExVat - purchase;
+        const percent = (margin / saleExVat) * 100;
+
+        marginAmount.textContent = formatPrice(margin);
+        marginPercent.textContent = percent.toFixed(1) + '%';
+      } else {
+        marginAmount.textContent = '0,00 kr';
+        marginPercent.textContent = '0%';
+      }
+    }
+
+    purchaseInput.addEventListener('input', calculateMargin);
+    saleInput.addEventListener('input', calculateMargin);
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-produkt.html b/.workbench/POC/poc-produkt.html
new file mode 100644
index 0000000..b19902c
--- /dev/null
+++ b/.workbench/POC/poc-produkt.html
@@ -0,0 +1,1251 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Produkt - Redken Acidic Bonding Concentrate Serum</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    a {
+      color: var(--color-teal);
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-back-link {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-back-link:hover {
+      color: var(--color-teal);
+    }
+
+    swp-back-link svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-page-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px;
+    }
+
+    @media (max-width: 900px) {
+      .grid-2 { grid-template-columns: 1fr; }
+    }
+
+    /* ==========================================
+       CARDS
+       ========================================== */
+    swp-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+      margin-bottom: 20px;
+      overflow: hidden;
+    }
+
+    swp-card-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-card-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-card-hint {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-card-body {
+      display: block;
+      padding: 20px;
+    }
+
+    /* ==========================================
+       BUTTONS
+       ========================================== */
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-btn.danger {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-red);
+    }
+
+    swp-btn.danger:hover {
+      background: color-mix(in srgb, var(--color-red) 10%, white);
+    }
+
+    swp-btn.small {
+      padding: 6px 12px;
+      font-size: 12px;
+    }
+
+    /* ==========================================
+       FORM ELEMENTS
+       ========================================== */
+    swp-form-grid {
+      display: grid;
+      gap: 16px;
+    }
+
+    swp-form-row {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    swp-form-field {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+    }
+
+    swp-form-field.full {
+      grid-column: 1 / -1;
+    }
+
+    swp-form-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+    }
+
+    swp-form-field input,
+    swp-form-field select,
+    swp-form-field textarea {
+      padding: 10px 12px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      color: var(--color-text);
+    }
+
+    swp-form-field input:focus,
+    swp-form-field select:focus,
+    swp-form-field textarea:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-form-field textarea {
+      min-height: 150px;
+      resize: vertical;
+    }
+
+    swp-form-field input.mono {
+      font-family: var(--font-mono);
+    }
+
+    swp-form-field input[readonly] {
+      background: var(--color-background-alt);
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       TOGGLE SLIDER (Ja/Nej)
+       ========================================== */
+    swp-toggle-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 0;
+    }
+
+    swp-toggle-label {
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    swp-toggle-slider {
+      display: inline-flex;
+      width: fit-content;
+      background: var(--color-background);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      position: relative;
+      cursor: pointer;
+    }
+
+    swp-toggle-slider::before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: calc(50% - 4px);
+      height: calc(100% - 4px);
+      background: color-mix(in srgb, var(--color-green) 18%, white);
+      border-radius: 4px;
+      transition: transform 200ms ease, background 200ms ease;
+    }
+
+    swp-toggle-slider[data-value="no"]::before {
+      transform: translateX(100%);
+      background: color-mix(in srgb, var(--color-red) 18%, white);
+    }
+
+    swp-toggle-option {
+      position: relative;
+      z-index: 1;
+      padding: 5px 16px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      transition: color 200ms ease;
+      user-select: none;
+    }
+
+    swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
+      color: var(--color-green);
+      font-weight: 600;
+    }
+
+    swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
+      color: var(--color-red);
+      font-weight: 600;
+    }
+
+    /* ==========================================
+       VARIANTS TABLE
+       ========================================== */
+    swp-variants-table {
+      display: block;
+      width: 100%;
+    }
+
+    swp-variants-header,
+    swp-variants-row {
+      display: grid;
+      grid-template-columns: 1fr 120px 80px 100px 80px;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-variants-header {
+      padding: 10px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-variants-header span {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-variants-header span.right {
+      text-align: right;
+    }
+
+    swp-variants-row {
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-variants-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-variants-row span {
+      font-size: 14px;
+    }
+
+    swp-variants-row span.mono {
+      font-family: var(--font-mono);
+      font-size: 13px;
+    }
+
+    swp-variants-row span.right {
+      text-align: right;
+    }
+
+    swp-variants-row span.muted {
+      color: var(--color-text-secondary);
+    }
+
+    swp-variants-actions {
+      display: flex;
+      gap: 8px;
+      justify-content: flex-end;
+    }
+
+    swp-variants-actions button {
+      width: 28px;
+      height: 28px;
+      border: none;
+      background: var(--color-background);
+      border-radius: 4px;
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      transition: background 150ms ease;
+    }
+
+    swp-variants-actions button:hover {
+      background: var(--color-border);
+    }
+
+    swp-variants-actions button svg {
+      width: 14px;
+      height: 14px;
+      fill: var(--color-text-secondary);
+    }
+
+    swp-add-variant {
+      display: flex;
+      justify-content: center;
+      padding-top: 16px;
+    }
+
+    /* ==========================================
+       PRICE & MARGIN
+       ========================================== */
+    swp-price-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    swp-margin-display {
+      display: flex;
+      gap: 24px;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      margin-top: 16px;
+    }
+
+    swp-margin-item {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    swp-margin-label {
+      font-size: 11px;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-margin-value {
+      font-size: 20px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-green);
+    }
+
+    /* ==========================================
+       SALES STATS
+       ========================================== */
+    swp-stats-row {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    swp-stat-box {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+    }
+
+    swp-stat-box swp-stat-value {
+      font-size: 22px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-stat-box swp-stat-label {
+      font-size: 11px;
+      font-weight: 500;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-stat-box.highlight swp-stat-value {
+      color: var(--color-teal);
+    }
+
+    /* ==========================================
+       BAR CHART
+       ========================================== */
+    swp-bar-chart {
+      display: flex;
+      align-items: flex-end;
+      gap: 8px;
+      height: 120px;
+      padding: 16px 0;
+    }
+
+    swp-bar-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 8px;
+      flex: 1;
+    }
+
+    swp-bar {
+      width: 100%;
+      max-width: 40px;
+      background: var(--color-teal);
+      border-radius: 4px 4px 0 0;
+      transition: height 300ms ease;
+    }
+
+    swp-bar-label {
+      font-size: 11px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-bar-value {
+      font-size: 11px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    /* ==========================================
+       PIE CHART
+       ========================================== */
+    swp-chart-container {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+    }
+
+    swp-pie-chart {
+      width: 100px;
+      height: 100px;
+      border-radius: 50%;
+      flex-shrink: 0;
+    }
+
+    swp-pie-legend {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-legend-item {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      font-size: 13px;
+    }
+
+    swp-legend-color {
+      width: 12px;
+      height: 12px;
+      border-radius: 2px;
+    }
+
+    swp-legend-value {
+      font-family: var(--font-mono);
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-left: auto;
+    }
+
+    /* ==========================================
+       STOCK DISPLAY
+       ========================================== */
+    swp-stock-display {
+      display: flex;
+      align-items: center;
+      gap: 24px;
+      margin-bottom: 20px;
+    }
+
+    swp-stock-current {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    swp-stock-number {
+      font-size: 36px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+      line-height: 1;
+    }
+
+    swp-stock-number.warning {
+      color: var(--color-amber);
+    }
+
+    swp-stock-number.critical {
+      color: var(--color-red);
+    }
+
+    swp-stock-unit {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-stock-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 6px 12px;
+      font-size: 12px;
+      font-weight: 500;
+      border-radius: 20px;
+    }
+
+    swp-stock-status.ok {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+    }
+
+    swp-stock-status.warning {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b45309;
+    }
+
+    swp-stock-status.critical {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+      color: var(--color-red);
+    }
+
+    swp-stock-status::before {
+      content: '';
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: currentColor;
+    }
+
+    swp-stock-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 16px;
+    }
+
+    swp-stock-actions {
+      display: flex;
+      justify-content: flex-end;
+      padding-top: 16px;
+      border-top: 1px solid var(--color-border);
+      margin-top: 16px;
+    }
+
+    /* ==========================================
+       SUPPLIER INFO
+       ========================================== */
+    swp-supplier-grid {
+      display: grid;
+      gap: 16px;
+    }
+
+    /* ==========================================
+       USAGE LIST
+       ========================================== */
+    swp-usage-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-usage-item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 12px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+    }
+
+    swp-usage-name {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-usage-amount {
+      font-size: 13px;
+      font-family: var(--font-mono);
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       MOVEMENT TABLE
+       ========================================== */
+    swp-movement-table {
+      display: block;
+      width: 100%;
+    }
+
+    swp-movement-header,
+    swp-movement-row {
+      display: grid;
+      grid-template-columns: 110px 90px 70px 1fr 140px;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-movement-header {
+      padding: 10px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-movement-header span {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-movement-row {
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-movement-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-movement-row span {
+      font-size: 13px;
+    }
+
+    swp-movement-row span.positive {
+      color: var(--color-green);
+      font-family: var(--font-mono);
+      font-weight: 500;
+    }
+
+    swp-movement-row span.negative {
+      color: var(--color-red);
+      font-family: var(--font-mono);
+      font-weight: 500;
+    }
+
+    swp-movement-type {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 8px;
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 4px;
+    }
+
+    swp-movement-type.sale {
+      background: color-mix(in srgb, var(--color-blue) 15%, white);
+      color: var(--color-blue);
+    }
+
+    swp-movement-type.purchase {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+    }
+
+    swp-movement-type.treatment {
+      background: color-mix(in srgb, var(--color-purple) 15%, white);
+      color: var(--color-purple);
+    }
+
+    swp-movement-link {
+      font-size: 13px;
+    }
+
+    swp-section-title {
+      font-size: 12px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      margin-bottom: 12px;
+      display: block;
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-back-link>
+        <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+        Produkter
+      </swp-back-link>
+      <swp-page-title>Redken Acidic Bonding Concentrate 24/7 Night & Day Serum</swp-page-title>
+    </swp-topbar-left>
+    <swp-topbar-right>
+      <swp-btn class="danger">
+        <svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg>
+        Slet
+      </swp-btn>
+      <swp-btn class="primary">
+        <svg viewBox="0 0 24 24"><path d="M17 3H5c-1.11 0-2 .9-2 2v14c0 1.1.89 2 2 2h14c1.1 0 2-.9 2-2V7l-4-4zm-5 16c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm3-10H5V5h10v4z"/></svg>
+        Gem ændringer
+      </swp-btn>
+    </swp-topbar-right>
+  </swp-topbar>
+
+  <swp-page-container>
+    <div class="grid-2">
+      <!-- VENSTRE KOLONNE -->
+      <div>
+        <!-- Basisoplysninger -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Basisoplysninger</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-form-grid>
+              <swp-form-field class="full">
+                <swp-form-label>Produktnavn</swp-form-label>
+                <input type="text" value="Redken Acidic Bonding Concentrate 24/7 Night & Day Serum 100 ml" />
+              </swp-form-field>
+
+              <swp-form-row>
+                <swp-form-field>
+                  <swp-form-label>Varenummer</swp-form-label>
+                  <input type="text" class="mono" value="RDK-ABC-100" />
+                </swp-form-field>
+                <swp-form-field>
+                  <swp-form-label>EAN / Stregkode</swp-form-label>
+                  <input type="text" class="mono" value="884486532879" />
+                </swp-form-field>
+              </swp-form-row>
+
+              <swp-form-row>
+                <swp-form-field>
+                  <swp-form-label>Kategori</swp-form-label>
+                  <select>
+                    <option selected>Hårpleje</option>
+                    <option>Styling</option>
+                    <option>Farve</option>
+                    <option>Tilbehør</option>
+                  </select>
+                </swp-form-field>
+                <swp-form-field>
+                  <swp-form-label>Brand</swp-form-label>
+                  <select>
+                    <option selected>Redken</option>
+                    <option>Olaplex</option>
+                    <option>Kérastase</option>
+                    <option>Wella</option>
+                  </select>
+                </swp-form-field>
+              </swp-form-row>
+
+              <swp-form-field class="full">
+                <swp-form-label>Beskrivelse</swp-form-label>
+                <textarea>Et plejende og styrkende reparationsserum, der arbejder kontinuerligt for at genopbygge svækket hårstruktur. Tilfører fugt og glans uden at tynge, og efterlader håret mere elastisk og sundt over tid. Særligt effektivt til skadet, farvebehandlet eller kemisk behandlet hår.
+
+Fordel 1-2 pump i håndklædetørt eller tørt hår. Skal ikke skylles ud. Kan bruges dagligt og som natpleje for intensiv reparation.</textarea>
+              </swp-form-field>
+
+              <swp-toggle-row>
+                <swp-toggle-label>Produkt aktiv</swp-toggle-label>
+                <swp-toggle-slider data-value="yes">
+                  <swp-toggle-option>Ja</swp-toggle-option>
+                  <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+              </swp-toggle-row>
+            </swp-form-grid>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Varianter -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Varianter</swp-card-title>
+            <swp-card-hint>Størrelser og variationer</swp-card-hint>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-variants-table>
+              <swp-variants-header>
+                <span>Variant</span>
+                <span>Varenr</span>
+                <span class="right">Lager</span>
+                <span class="right">Pris</span>
+                <span></span>
+              </swp-variants-header>
+              <swp-variants-row>
+                <span>100 ml</span>
+                <span class="mono muted">RDK-ABC-100</span>
+                <span class="mono right">6</span>
+                <span class="mono right">379 kr</span>
+                <swp-variants-actions>
+                  <button title="Rediger"><svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg></button>
+                  <button title="Slet"><svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg></button>
+                </swp-variants-actions>
+              </swp-variants-row>
+              <swp-variants-row>
+                <span>50 ml (rejsestørrelse)</span>
+                <span class="mono muted">RDK-ABC-050</span>
+                <span class="mono right">4</span>
+                <span class="mono right">219 kr</span>
+                <swp-variants-actions>
+                  <button title="Rediger"><svg viewBox="0 0 24 24"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg></button>
+                  <button title="Slet"><svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"/></svg></button>
+                </swp-variants-actions>
+              </swp-variants-row>
+            </swp-variants-table>
+            <swp-add-variant>
+              <swp-btn class="secondary small">+ Tilføj variant</swp-btn>
+            </swp-add-variant>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Pris & avance -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Pris & avance</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-price-grid>
+              <swp-form-field>
+                <swp-form-label>Indkøbspris (ekskl. moms)</swp-form-label>
+                <input type="text" class="mono" value="195,00 kr" />
+              </swp-form-field>
+              <swp-form-field>
+                <swp-form-label>Salgspris (inkl. moms)</swp-form-label>
+                <input type="text" class="mono" value="379,00 kr" />
+              </swp-form-field>
+            </swp-price-grid>
+            <swp-margin-display>
+              <swp-margin-item>
+                <swp-margin-label>Avance</swp-margin-label>
+                <swp-margin-value>108,20 kr</swp-margin-value>
+              </swp-margin-item>
+              <swp-margin-item>
+                <swp-margin-label>Avance %</swp-margin-label>
+                <swp-margin-value>35,7%</swp-margin-value>
+              </swp-margin-item>
+            </swp-margin-display>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Forbrug i behandlinger -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Bruges i behandlinger</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-usage-list>
+              <swp-usage-item>
+                <swp-usage-name>Acidic Bonding Behandling</swp-usage-name>
+                <swp-usage-amount>5 ml pr. behandling</swp-usage-amount>
+              </swp-usage-item>
+              <swp-usage-item>
+                <swp-usage-name>Reparerende Hårpleje</swp-usage-name>
+                <swp-usage-amount>3 ml pr. behandling</swp-usage-amount>
+              </swp-usage-item>
+            </swp-usage-list>
+          </swp-card-body>
+        </swp-card>
+      </div>
+
+      <!-- HØJRE KOLONNE -->
+      <div>
+        <!-- Salgsstatistik -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Salgsstatistik</swp-card-title>
+            <swp-card-hint>Sidste 6 måneder</swp-card-hint>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-stats-row>
+              <swp-stat-box class="highlight">
+                <swp-stat-value>32</swp-stat-value>
+                <swp-stat-label>Solgt i alt</swp-stat-label>
+              </swp-stat-box>
+              <swp-stat-box>
+                <swp-stat-value>12.128 kr</swp-stat-value>
+                <swp-stat-label>Omsætning</swp-stat-label>
+              </swp-stat-box>
+              <swp-stat-box>
+                <swp-stat-value>3.462 kr</swp-stat-value>
+                <swp-stat-label>Avance</swp-stat-label>
+              </swp-stat-box>
+            </swp-stats-row>
+
+            <swp-section-title>Salg pr. måned</swp-section-title>
+            <div id="salesBarChart"></div>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Salg pr. variant -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Salg pr. variant</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <div id="variantPieChart"></div>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Lager -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Lager</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-stock-display>
+              <swp-stock-current>
+                <swp-stock-number>10</swp-stock-number>
+                <swp-stock-unit>stk. på lager (alle varianter)</swp-stock-unit>
+              </swp-stock-current>
+              <swp-stock-status class="ok">På lager</swp-stock-status>
+            </swp-stock-display>
+
+            <swp-stock-grid>
+              <swp-form-field>
+                <swp-form-label>Minimumslager</swp-form-label>
+                <input type="number" value="5" />
+              </swp-form-field>
+              <swp-form-field>
+                <swp-form-label>Genbestillingspunkt</swp-form-label>
+                <input type="number" value="10" />
+              </swp-form-field>
+            </swp-stock-grid>
+
+            <swp-stock-actions>
+              <swp-btn class="secondary small">
+                <svg viewBox="0 0 24 24"><path d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-2 10h-4v4h-2v-4H7v-2h4V7h2v4h4v2z"/></svg>
+                Juster lager
+              </swp-btn>
+            </swp-stock-actions>
+          </swp-card-body>
+        </swp-card>
+
+        <!-- Leverandør -->
+        <swp-card>
+          <swp-card-header>
+            <swp-card-title>Leverandør</swp-card-title>
+          </swp-card-header>
+          <swp-card-body>
+            <swp-supplier-grid>
+              <swp-form-field>
+                <swp-form-label>Leverandør</swp-form-label>
+                <select>
+                  <option selected>L'Oréal Professionnel</option>
+                  <option>Beauty Group Denmark</option>
+                  <option>Hairware ApS</option>
+                </select>
+              </swp-form-field>
+
+              <swp-form-row>
+                <swp-form-field>
+                  <swp-form-label>Leverandør varenr</swp-form-label>
+                  <input type="text" class="mono" value="E3845600" />
+                </swp-form-field>
+                <swp-form-field>
+                  <swp-form-label>Leveringstid</swp-form-label>
+                  <input type="text" value="3-5 dage" />
+                </swp-form-field>
+              </swp-form-row>
+
+              <swp-form-field>
+                <swp-form-label>Sidste indkøb</swp-form-label>
+                <input type="text" readonly value="15. december 2025" />
+              </swp-form-field>
+            </swp-supplier-grid>
+          </swp-card-body>
+        </swp-card>
+
+      </div>
+    </div>
+
+    <!-- Lagerbevægelser (full width) -->
+    <swp-card>
+      <swp-card-header>
+        <swp-card-title>Lagerbevægelser</swp-card-title>
+        <swp-card-hint>Seneste aktivitet</swp-card-hint>
+      </swp-card-header>
+      <swp-card-body>
+        <swp-movement-table>
+          <swp-movement-header>
+            <span>Dato</span>
+            <span>Type</span>
+            <span>Antal</span>
+            <span>Reference</span>
+            <span></span>
+          </swp-movement-header>
+          <swp-movement-row>
+            <span>28. dec 2025</span>
+            <swp-movement-type class="sale">Salg</swp-movement-type>
+            <span class="negative">-1</span>
+            <span>Faktura #1847</span>
+            <swp-movement-link><a href="#">Marie Hansen →</a></swp-movement-link>
+          </swp-movement-row>
+          <swp-movement-row>
+            <span>27. dec 2025</span>
+            <swp-movement-type class="sale">Salg</swp-movement-type>
+            <span class="negative">-2</span>
+            <span>Faktura #1842</span>
+            <swp-movement-link><a href="#">Louise Andersen →</a></swp-movement-link>
+          </swp-movement-row>
+          <swp-movement-row>
+            <span>22. dec 2025</span>
+            <swp-movement-type class="treatment">Behandling</swp-movement-type>
+            <span class="negative">-1</span>
+            <span>Booking #B-2341</span>
+            <swp-movement-link><a href="#">Se booking →</a></swp-movement-link>
+          </swp-movement-row>
+          <swp-movement-row>
+            <span>15. dec 2025</span>
+            <swp-movement-type class="purchase">Indkøb</swp-movement-type>
+            <span class="positive">+12</span>
+            <span>Ordre #LOR-8834</span>
+            <swp-movement-link><a href="#">L'Oréal Prof. →</a></swp-movement-link>
+          </swp-movement-row>
+          <swp-movement-row>
+            <span>10. dec 2025</span>
+            <swp-movement-type class="sale">Salg</swp-movement-type>
+            <span class="negative">-1</span>
+            <span>Faktura #1798</span>
+            <swp-movement-link><a href="#">Camilla Jensen →</a></swp-movement-link>
+          </swp-movement-row>
+        </swp-movement-table>
+      </swp-card-body>
+    </swp-card>
+  </swp-page-container>
+
+  <script type="module">
+    import { createChart } from '../node_modules/@sevenweirdpeople/swp-charting/dist/swp-charting.js';
+
+    // Toggle slider (Ja/Nej)
+    document.querySelectorAll('swp-toggle-slider').forEach(slider => {
+      const options = slider.querySelectorAll('swp-toggle-option');
+      options.forEach((option, index) => {
+        option.addEventListener('click', () => {
+          slider.dataset.value = index === 0 ? 'yes' : 'no';
+        });
+      });
+    });
+
+    // Bar chart - Salg pr. måned
+    const barContainer = document.getElementById('salesBarChart');
+    createChart(barContainer, {
+      height: 160,
+      series: [{
+        name: 'Salg',
+        color: '#00897b',
+        type: 'bar',
+        unit: 'stk',
+        data: [
+          { x: 'Jul', y: 5 },
+          { x: 'Aug', y: 8 },
+          { x: 'Sep', y: 6 },
+          { x: 'Okt', y: 9 },
+          { x: 'Nov', y: 12 },
+          { x: 'Dec', y: 7 }
+        ],
+        bar: { radius: 4 }
+      }],
+      xAxis: {
+        categories: ['Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec']
+      },
+      yAxis: {
+        min: 0,
+        ticks: 4
+      },
+      padding: { top: 20, right: 10, bottom: 30, left: 35 },
+      tooltip: true,
+      legend: false,
+      animation: { duration: 400 }
+    });
+
+    // Pie chart - Salg pr. variant
+    const pieContainer = document.getElementById('variantPieChart');
+    createChart(pieContainer, {
+      height: 200,
+      series: [
+        { name: '100 ml', color: '#00897b', type: 'pie', data: [{ x: '', y: 23 }], unit: 'stk' },
+        { name: '50 ml', color: '#8b5cf6', type: 'pie', data: [{ x: '', y: 9 }], unit: 'stk' }
+      ],
+      tooltip: true,
+      legend: { position: 'right', align: 'center' },
+      animation: { duration: 400 }
+    });
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-produkter.html b/.workbench/POC/poc-produkter.html
new file mode 100644
index 0000000..13d4d48
--- /dev/null
+++ b/.workbench/POC/poc-produkter.html
@@ -0,0 +1,818 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Produkter - Backend</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* Dark mode - følger system preference ELLER manuel toggle */
+    @media (prefers-color-scheme: dark) {
+      :root:not(.light-mode) {
+        --color-surface: #1e1e1e;
+        --color-background: #121212;
+        --color-background-hover: #2a2a2a;
+        --color-background-alt: #1a1a1a;
+        --color-border: #333;
+        --color-text: #e0e0e0;
+        --color-text-secondary: #999;
+        --color-teal: #26a69a;
+        --color-blue: #42a5f5;
+        --color-red: #ef5350;
+        --color-amber: #ffb74d;
+        --color-purple: #a78bfa;
+        --color-green: #66bb6a;
+      }
+    }
+
+    /* Manuel dark mode override */
+    :root.dark-mode {
+      --color-surface: #1e1e1e;
+      --color-background: #121212;
+      --color-background-hover: #2a2a2a;
+      --color-background-alt: #1a1a1a;
+      --color-border: #333;
+      --color-text: #e0e0e0;
+      --color-text-secondary: #999;
+      --color-teal: #26a69a;
+      --color-blue: #42a5f5;
+      --color-red: #ef5350;
+      --color-amber: #ffb74d;
+      --color-purple: #a78bfa;
+      --color-green: #66bb6a;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    a {
+      color: var(--color-teal);
+      text-decoration: none;
+    }
+
+    a:hover {
+      text-decoration: underline;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-page-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    /* ==========================================
+       BUTTONS
+       ========================================== */
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-btn.icon-only {
+      padding: 10px;
+    }
+
+    swp-btn.icon-only svg {
+      width: 18px;
+      height: 18px;
+    }
+
+    /* ==========================================
+       FILTER BAR
+       ========================================== */
+    swp-filter-bar {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px 20px;
+      background: var(--color-surface);
+      border-radius: 8px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    swp-filter-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-filter-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+    }
+
+    swp-filter-bar input,
+    swp-filter-bar select {
+      padding: 8px 12px;
+      font-size: 13px;
+      font-family: var(--font-family);
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+    }
+
+    swp-filter-bar input:focus,
+    swp-filter-bar select:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-search-input {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+    }
+
+    swp-search-input img {
+      width: 16px;
+      height: 16px;
+      opacity: 0.5;
+    }
+
+    @media (prefers-color-scheme: dark) {
+      :root:not(.light-mode) swp-search-input img {
+        filter: invert(1);
+      }
+    }
+
+    :root.dark-mode swp-search-input img {
+      filter: invert(1);
+    }
+
+    swp-search-input input {
+      border: none;
+      outline: none;
+      font-size: 13px;
+      font-family: var(--font-family);
+      width: 400px;
+      background: transparent;
+      color: var(--color-text);
+    }
+
+    swp-filter-spacer {
+      flex: 1;
+    }
+
+    /* ==========================================
+       STATS BAR
+       ========================================== */
+    swp-stats-bar {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    swp-stat-card {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 16px 20px;
+      background: var(--color-surface);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-stat-card swp-stat-value {
+      font-size: 22px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-stat-card swp-stat-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-stat-card.highlight swp-stat-value {
+      color: var(--color-teal);
+    }
+
+    swp-stat-card.warning swp-stat-value {
+      color: var(--color-amber);
+    }
+
+    /* ==========================================
+       TABLE
+       ========================================== */
+    swp-table {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-table-header,
+    swp-table-row {
+      display: grid;
+      grid-template-columns: minmax(200px, 1fr) 100px 100px 100px 80px 90px 80px 40px;
+      align-items: center;
+    }
+
+    swp-table-header {
+      background: var(--color-background-alt);
+      border-bottom: 1px solid var(--color-border);
+      padding: 12px 20px;
+    }
+
+    swp-th {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-th.right {
+      text-align: right;
+    }
+
+    swp-table-body {
+      display: block;
+    }
+
+    swp-table-row {
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+      transition: background 150ms ease;
+      cursor: pointer;
+    }
+
+    swp-table-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-table-row:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-td {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-td.right {
+      text-align: right;
+    }
+
+    swp-td.mono {
+      font-family: var(--font-mono);
+      font-size: 13px;
+    }
+
+    swp-td.muted {
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       PRODUCT NAME CELL
+       ========================================== */
+    swp-product-cell {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-product-name {
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-product-brand {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       STOCK INDICATOR
+       ========================================== */
+    swp-stock-indicator {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      font-family: var(--font-mono);
+      font-size: 13px;
+    }
+
+    swp-stock-indicator::before {
+      content: '';
+      width: 8px;
+      height: 8px;
+      border-radius: 50%;
+      background: var(--color-green);
+    }
+
+    swp-stock-indicator.warning::before {
+      background: var(--color-amber);
+    }
+
+    swp-stock-indicator.critical::before {
+      background: var(--color-red);
+    }
+
+    /* ==========================================
+       STATUS BADGE
+       ========================================== */
+    swp-status-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 12px;
+    }
+
+    swp-status-badge.active {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+    }
+
+    swp-status-badge.inactive {
+      background: color-mix(in srgb, var(--color-text-secondary) 15%, white);
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       ROW ARROW
+       ========================================== */
+    swp-row-arrow {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    swp-row-arrow svg {
+      width: 18px;
+      height: 18px;
+      fill: var(--color-text-secondary);
+      transition: transform 150ms ease;
+    }
+
+    swp-table-row:hover swp-row-arrow svg {
+      transform: translateX(4px);
+      fill: var(--color-teal);
+    }
+
+    /* ==========================================
+       TABLE FOOTER
+       ========================================== */
+    swp-table-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 20px;
+      background: var(--color-background-alt);
+      border-top: 1px solid var(--color-border);
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       RESPONSIVE
+       ========================================== */
+    @media (max-width: 1200px) {
+      swp-stats-bar {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    @media (max-width: 900px) {
+      swp-table-header,
+      swp-table-row {
+        grid-template-columns: 1fr 80px 80px 40px;
+      }
+
+      swp-th:nth-child(2),
+      swp-td:nth-child(2),
+      swp-th:nth-child(3),
+      swp-td:nth-child(3),
+      swp-th:nth-child(4),
+      swp-td:nth-child(4) {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-page-title>Produkter</swp-page-title>
+    </swp-topbar-left>
+    <swp-topbar-right>
+      <swp-btn class="secondary icon-only" id="themeToggle" title="Skift tema">
+        <svg id="sunIcon" viewBox="0 0 24 24"><path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zM2 13h2c.55 0 1-.45 1-1s-.45-1-1-1H2c-.55 0-1 .45-1 1s.45 1 1 1zm18 0h2c.55 0 1-.45 1-1s-.45-1-1-1h-2c-.55 0-1 .45-1 1s.45 1 1 1zM11 2v2c0 .55.45 1 1 1s1-.45 1-1V2c0-.55-.45-1-1-1s-1 .45-1 1zm0 18v2c0 .55.45 1 1 1s1-.45 1-1v-2c0-.55-.45-1-1-1s-1 .45-1 1zM5.99 4.58c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0s.39-1.03 0-1.41L5.99 4.58zm12.37 12.37c-.39-.39-1.03-.39-1.41 0-.39.39-.39 1.03 0 1.41l1.06 1.06c.39.39 1.03.39 1.41 0 .39-.39.39-1.03 0-1.41l-1.06-1.06zm1.06-10.96c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06zM7.05 18.36c.39-.39.39-1.03 0-1.41-.39-.39-1.03-.39-1.41 0l-1.06 1.06c-.39.39-.39 1.03 0 1.41s1.03.39 1.41 0l1.06-1.06z"/></svg>
+        <svg id="moonIcon" viewBox="0 0 24 24" style="display:none"><path d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9 9-4.03 9-9c0-.46-.04-.92-.1-1.36-.98 1.37-2.58 2.26-4.4 2.26-2.98 0-5.4-2.42-5.4-5.4 0-1.81.89-3.42 2.26-4.4-.44-.06-.9-.1-1.36-.1z"/></svg>
+      </swp-btn>
+      <swp-btn class="secondary">
+        <svg viewBox="0 0 24 24"><path d="M19.35 10.04C18.67 6.59 15.64 4 12 4 9.11 4 6.6 5.64 5.35 8.04 2.34 8.36 0 10.91 0 14c0 3.31 2.69 6 6 6h13c2.76 0 5-2.24 5-5 0-2.64-2.05-4.78-4.65-4.96zM14 13v4h-4v-4H7l5-5 5 5h-3z"/></svg>
+        Importer
+      </swp-btn>
+      <swp-btn class="primary">
+        <svg viewBox="0 0 24 24"><path d="M19 13h-6v6h-2v-6H5v-2h6V5h2v6h6v2z"/></svg>
+        Nyt produkt
+      </swp-btn>
+    </swp-topbar-right>
+  </swp-topbar>
+
+  <swp-page-container>
+    <!-- Filter Bar -->
+    <swp-filter-bar>
+      <swp-search-input>
+        <img src="icons/search.svg" alt="Søg" />
+        <input type="search" id="searchInput" placeholder="Søg produkt, varenr, brand..." />
+      </swp-search-input>
+      <swp-filter-spacer></swp-filter-spacer>
+    </swp-filter-bar>
+
+    <!-- Stats Bar -->
+    <swp-stats-bar>
+      <swp-stat-card class="highlight">
+        <swp-stat-value>47</swp-stat-value>
+        <swp-stat-label>Produkter i alt</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>142.850 kr</swp-stat-value>
+        <swp-stat-label>Samlet lagerværdi</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card class="warning">
+        <swp-stat-value>5</swp-stat-value>
+        <swp-stat-label>Lavt lager</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>12.450 kr</swp-stat-value>
+        <swp-stat-label>Salg denne måned</swp-stat-label>
+      </swp-stat-card>
+    </swp-stats-bar>
+
+    <!-- Table -->
+    <swp-table>
+      <swp-table-header>
+        <swp-th>Produkt</swp-th>
+        <swp-th>Varenr</swp-th>
+        <swp-th>Kategori</swp-th>
+        <swp-th>Brand</swp-th>
+        <swp-th class="right">Lager</swp-th>
+        <swp-th class="right">Pris</swp-th>
+        <swp-th>Status</swp-th>
+        <swp-th></swp-th>
+      </swp-table-header>
+      <swp-table-body>
+        <swp-table-row data-id="1" onclick="location.href='poc-produkt.html'">
+          <swp-td>
+            <swp-product-cell>
+              <swp-product-name>Acidic Bonding Concentrate Serum 100ml</swp-product-name>
+              <swp-product-brand>Redken</swp-product-brand>
+            </swp-product-cell>
+          </swp-td>
+          <swp-td class="mono muted">RDK-ABC-100</swp-td>
+          <swp-td>Hårpleje</swp-td>
+          <swp-td>Redken</swp-td>
+          <swp-td class="right"><swp-stock-indicator>10</swp-stock-indicator></swp-td>
+          <swp-td class="right mono">379 kr</swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="2">
+          <swp-td>
+            <swp-product-cell>
+              <swp-product-name>No. 3 Hair Perfector 100ml</swp-product-name>
+              <swp-product-brand>Olaplex</swp-product-brand>
+            </swp-product-cell>
+          </swp-td>
+          <swp-td class="mono muted">OLP-003</swp-td>
+          <swp-td>Hårpleje</swp-td>
+          <swp-td>Olaplex</swp-td>
+          <swp-td class="right"><swp-stock-indicator class="warning">3</swp-stock-indicator></swp-td>
+          <swp-td class="right mono">349 kr</swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="3">
+          <swp-td>
+            <swp-product-cell>
+              <swp-product-name>Elixir Ultime L'Huile Originale 100ml</swp-product-name>
+              <swp-product-brand>Kérastase</swp-product-brand>
+            </swp-product-cell>
+          </swp-td>
+          <swp-td class="mono muted">KER-ELX-100</swp-td>
+          <swp-td>Hårpleje</swp-td>
+          <swp-td>Kérastase</swp-td>
+          <swp-td class="right"><swp-stock-indicator>8</swp-stock-indicator></swp-td>
+          <swp-td class="right mono">459 kr</swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="4">
+          <swp-td>
+            <swp-product-cell>
+              <swp-product-name>EIMI Ocean Spritz 150ml</swp-product-name>
+              <swp-product-brand>Wella</swp-product-brand>
+            </swp-product-cell>
+          </swp-td>
+          <swp-td class="mono muted">WEL-OCN-150</swp-td>
+          <swp-td>Styling</swp-td>
+          <swp-td>Wella</swp-td>
+          <swp-td class="right"><swp-stock-indicator>15</swp-stock-indicator></swp-td>
+          <swp-td class="right mono">169 kr</swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="5">
+          <swp-td>
+            <swp-product-cell>
+              <swp-product-name>No. 4 Bond Maintenance Shampoo 250ml</swp-product-name>
+              <swp-product-brand>Olaplex</swp-product-brand>
+            </swp-product-cell>
+          </swp-td>
+          <swp-td class="mono muted">OLP-004-250</swp-td>
+          <swp-td>Hårpleje</swp-td>
+          <swp-td>Olaplex</swp-td>
+          <swp-td class="right"><swp-stock-indicator class="critical">0</swp-stock-indicator></swp-td>
+          <swp-td class="right mono">299 kr</swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="6">
+          <swp-td>
+            <swp-product-cell>
+              <swp-product-name>IGORA Royal 6-0 60ml</swp-product-name>
+              <swp-product-brand>Schwarzkopf</swp-product-brand>
+            </swp-product-cell>
+          </swp-td>
+          <swp-td class="mono muted">SCH-IGR-60</swp-td>
+          <swp-td>Farve</swp-td>
+          <swp-td>Schwarzkopf</swp-td>
+          <swp-td class="right"><swp-stock-indicator>24</swp-stock-indicator></swp-td>
+          <swp-td class="right mono">89 kr</swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="7">
+          <swp-td>
+            <swp-product-cell>
+              <swp-product-name>All Soft Shampoo 300ml</swp-product-name>
+              <swp-product-brand>Redken</swp-product-brand>
+            </swp-product-cell>
+          </swp-td>
+          <swp-td class="mono muted">RDK-ALS-300</swp-td>
+          <swp-td>Hårpleje</swp-td>
+          <swp-td>Redken</swp-td>
+          <swp-td class="right"><swp-stock-indicator class="warning">4</swp-stock-indicator></swp-td>
+          <swp-td class="right mono">249 kr</swp-td>
+          <swp-td><swp-status-badge class="active">Aktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row data-id="8">
+          <swp-td>
+            <swp-product-cell>
+              <swp-product-name>Paddle Brush Large</swp-product-name>
+              <swp-product-brand>Denman</swp-product-brand>
+            </swp-product-cell>
+          </swp-td>
+          <swp-td class="mono muted">DNM-PBL-01</swp-td>
+          <swp-td>Tilbehør</swp-td>
+          <swp-td>Denman</swp-td>
+          <swp-td class="right"><swp-stock-indicator>7</swp-stock-indicator></swp-td>
+          <swp-td class="right mono">189 kr</swp-td>
+          <swp-td><swp-status-badge class="inactive">Inaktiv</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><svg viewBox="0 0 24 24"><path d="M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z"/></svg></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+      </swp-table-body>
+      <swp-table-footer>
+        <span>Viser 8 af 47 produkter</span>
+        <span>Side 1 af 6</span>
+      </swp-table-footer>
+    </swp-table>
+  </swp-page-container>
+
+  <script src="https://cdn.jsdelivr.net/npm/fuse.js@7.0.0"></script>
+  <script>
+    // Product data for search
+    const products = [
+      { id: 1, name: 'Acidic Bonding Concentrate Serum 100ml', brand: 'Redken', sku: 'RDK-ABC-100', category: 'Hårpleje' },
+      { id: 2, name: 'No. 3 Hair Perfector 100ml', brand: 'Olaplex', sku: 'OLP-003', category: 'Hårpleje' },
+      { id: 3, name: 'Elixir Ultime L\'Huile Originale 100ml', brand: 'Kérastase', sku: 'KER-ELX-100', category: 'Hårpleje' },
+      { id: 4, name: 'EIMI Ocean Spritz 150ml', brand: 'Wella', sku: 'WEL-OCN-150', category: 'Styling' },
+      { id: 5, name: 'No. 4 Bond Maintenance Shampoo 250ml', brand: 'Olaplex', sku: 'OLP-004-250', category: 'Hårpleje' },
+      { id: 6, name: 'IGORA Royal 6-0 60ml', brand: 'Schwarzkopf', sku: 'SCH-IGR-60', category: 'Farve' },
+      { id: 7, name: 'All Soft Shampoo 300ml', brand: 'Redken', sku: 'RDK-ALS-300', category: 'Hårpleje' },
+      { id: 8, name: 'Paddle Brush Large', brand: 'Denman', sku: 'DNM-PBL-01', category: 'Tilbehør' }
+    ];
+
+    // Initialize Fuse.js
+    const fuse = new Fuse(products, {
+      keys: ['name', 'brand', 'sku', 'category'],
+      threshold: 0.3,
+      ignoreLocation: true
+    });
+
+    const searchInput = document.getElementById('searchInput');
+    const tableBody = document.querySelector('swp-table-body');
+    const allRows = Array.from(tableBody.querySelectorAll('swp-table-row'));
+
+    // Search handler
+    searchInput.addEventListener('input', (e) => {
+      const query = e.target.value.trim();
+
+      if (query === '') {
+        // Show all rows
+        allRows.forEach(row => row.style.display = '');
+      } else {
+        // Search with Fuse.js
+        const results = fuse.search(query);
+        const matchedIds = results.map(r => r.item.id);
+
+        allRows.forEach(row => {
+          const rowId = parseInt(row.dataset.id);
+          row.style.display = matchedIds.includes(rowId) ? '' : 'none';
+        });
+      }
+    });
+
+    // Theme toggle
+    const themeToggle = document.getElementById('themeToggle');
+    const sunIcon = document.getElementById('sunIcon');
+    const moonIcon = document.getElementById('moonIcon');
+    const root = document.documentElement;
+
+    function updateIcons() {
+      const isDark = root.classList.contains('dark-mode') ||
+        (window.matchMedia('(prefers-color-scheme: dark)').matches && !root.classList.contains('light-mode'));
+      sunIcon.style.display = isDark ? 'none' : 'block';
+      moonIcon.style.display = isDark ? 'block' : 'none';
+    }
+
+    updateIcons();
+
+    themeToggle.addEventListener('click', () => {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+
+      if (prefersDark) {
+        // System is dark - toggle to light or back to system
+        root.classList.toggle('light-mode');
+        root.classList.remove('dark-mode');
+      } else {
+        // System is light - toggle to dark or back to system
+        root.classList.toggle('dark-mode');
+        root.classList.remove('light-mode');
+      }
+
+      updateIcons();
+    });
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-rapport.html b/.workbench/POC/poc-rapport.html
new file mode 100644
index 0000000..d67e043
--- /dev/null
+++ b/.workbench/POC/poc-rapport.html
@@ -0,0 +1,615 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Rapport - POC</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-purple: #8b5cf6;
+      --color-amber: #f59e0b;
+      --color-red: #e53935;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    /* ==========================================
+       HEADER
+       ========================================== */
+    swp-page-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      margin-bottom: 24px;
+    }
+
+    swp-page-title {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    /* ==========================================
+       FILTERS
+       ========================================== */
+    swp-report-filters {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-period-selector {
+      display: flex;
+      background: var(--color-surface);
+      border-radius: 6px;
+      padding: 4px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    swp-period-selector button {
+      padding: 8px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      border: none;
+      background: transparent;
+      color: var(--color-text-secondary);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-period-selector button:hover {
+      color: var(--color-text);
+    }
+
+    swp-period-selector button.active {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-employee-filter select {
+      padding: 10px 32px 10px 12px;
+      font-size: 13px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
+      appearance: none;
+      cursor: pointer;
+      min-width: 180px;
+    }
+
+    /* ==========================================
+       STATS BAR
+       ========================================== */
+    swp-stats-bar {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      margin-bottom: 24px;
+    }
+
+    swp-stat-card {
+      background: var(--color-surface);
+      border-radius: 8px;
+      padding: 20px 24px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    swp-stat-value {
+      display: block;
+      font-size: 32px;
+      font-weight: 600;
+      color: var(--color-text);
+      font-family: var(--font-mono);
+    }
+
+    swp-stat-label {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+    }
+
+    swp-stat-card.teal swp-stat-value { color: var(--color-teal); }
+    swp-stat-card.red swp-stat-value { color: var(--color-red); }
+    swp-stat-card.amber swp-stat-value { color: var(--color-amber); }
+    swp-stat-card.purple swp-stat-value { color: var(--color-purple); }
+
+    /* ==========================================
+       CHARTS GRID
+       ========================================== */
+    swp-charts-grid {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: 24px;
+      margin-bottom: 24px;
+    }
+
+    swp-chart-card {
+      background: var(--color-surface);
+      border-radius: 8px;
+      padding: 20px 24px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+    }
+
+    swp-chart-title {
+      display: block;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 16px;
+    }
+
+    swp-chart-container {
+      display: block;
+      height: 240px;
+      position: relative;
+    }
+
+    /* ==========================================
+       REPORT TABLE
+       ========================================== */
+    swp-report-table {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
+      overflow: hidden;
+    }
+
+    swp-table-header,
+    swp-table-row {
+      display: grid;
+      grid-template-columns: 200px repeat(7, 1fr);
+      align-items: center;
+    }
+
+    swp-table-header {
+      background: var(--color-background-alt);
+      border-bottom: 1px solid var(--color-border);
+      padding: 14px 20px;
+    }
+
+    swp-th {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+      user-select: none;
+    }
+
+    swp-th.sortable {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      transition: color 150ms ease;
+    }
+
+    swp-th.sortable:hover {
+      color: var(--color-teal);
+    }
+
+    swp-th.sorted {
+      color: var(--color-teal);
+    }
+
+    .sort-icon {
+      font-size: 10px;
+      opacity: 0.4;
+      transition: opacity 150ms ease, transform 150ms ease;
+    }
+
+    swp-th.sorted .sort-icon {
+      opacity: 1;
+    }
+
+    swp-th.sorted.desc .sort-icon {
+      transform: rotate(180deg);
+    }
+
+    swp-th.right,
+    swp-td.right {
+      text-align: right;
+      justify-content: flex-end;
+    }
+
+    swp-table-body {
+      display: block;
+    }
+
+    swp-table-row {
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+      transition: background 150ms ease;
+    }
+
+    swp-table-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-table-row:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-td {
+      font-size: 13px;
+      color: var(--color-text);
+    }
+
+    swp-td.name {
+      font-weight: 500;
+    }
+
+    swp-td.number {
+      font-family: var(--font-mono);
+      font-size: 12px;
+    }
+
+    swp-td.red { color: var(--color-red); }
+    swp-td.amber { color: var(--color-amber); }
+    swp-td.purple { color: var(--color-purple); }
+
+    swp-badge {
+      display: inline-block;
+      padding: 2px 8px;
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 4px;
+      font-family: var(--font-mono);
+    }
+
+    swp-badge.low {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+    }
+
+    swp-badge.medium {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: var(--color-amber);
+    }
+
+    swp-badge.high {
+      background: color-mix(in srgb, var(--color-red) 15%, white);
+      color: var(--color-red);
+    }
+
+    /* ==========================================
+       FOOTER
+       ========================================== */
+    swp-table-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 20px;
+      background: var(--color-background-alt);
+      border-top: 1px solid var(--color-border);
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+  </style>
+</head>
+<body>
+  <swp-page-container>
+    <!-- Header -->
+    <swp-page-header>
+      <swp-page-title>Rapport</swp-page-title>
+      <swp-report-filters>
+        <swp-period-selector>
+          <button>Uge</button>
+          <button class="active">Måned</button>
+          <button>Kvartal</button>
+          <button>År</button>
+        </swp-period-selector>
+        <swp-employee-filter>
+          <select>
+            <option>Alle medarbejdere</option>
+            <option>Anna Jensen</option>
+            <option>Martin Nielsen</option>
+            <option>Sofie Larsen</option>
+            <option>Peter Hansen</option>
+          </select>
+        </swp-employee-filter>
+      </swp-report-filters>
+    </swp-page-header>
+
+    <!-- Stats Bar -->
+    <swp-stats-bar>
+      <swp-stat-card class="teal">
+        <swp-stat-value>320 t</swp-stat-value>
+        <swp-stat-label>Planlagte timer</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card class="red">
+        <swp-stat-value>24 t</swp-stat-value>
+        <swp-stat-label>Fravær total</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card class="amber">
+        <swp-stat-value>8 t</swp-stat-value>
+        <swp-stat-label>Overarbejde</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>7.5%</swp-stat-value>
+        <swp-stat-label>Fraværsprocent</swp-stat-label>
+      </swp-stat-card>
+    </swp-stats-bar>
+
+    <!-- Charts -->
+    <swp-charts-grid>
+      <swp-chart-card>
+        <swp-chart-title>Timer pr. uge</swp-chart-title>
+        <swp-chart-container id="hoursChart"></swp-chart-container>
+      </swp-chart-card>
+
+      <swp-chart-card>
+        <swp-chart-title>Fraværsfordeling</swp-chart-title>
+        <swp-chart-container id="absenceChart"></swp-chart-container>
+      </swp-chart-card>
+    </swp-charts-grid>
+
+    <!-- Table -->
+    <swp-report-table>
+      <swp-table-header>
+        <swp-th class="sortable sorted">Medarbejder <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Planlagt <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Fravær <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Syg <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Ferie <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Fri <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Overarbejde <span class="sort-icon">▲</span></swp-th>
+        <swp-th class="sortable right">Fraværs-% <span class="sort-icon">▲</span></swp-th>
+      </swp-table-header>
+      <swp-table-body>
+        <swp-table-row>
+          <swp-td class="name">Anna Jensen</swp-td>
+          <swp-td class="number right">80 t</swp-td>
+          <swp-td class="number right">4 t</swp-td>
+          <swp-td class="number right red">0 t</swp-td>
+          <swp-td class="number right amber">4 t</swp-td>
+          <swp-td class="number right purple">0 t</swp-td>
+          <swp-td class="number right">2 t</swp-td>
+          <swp-td class="right"><swp-badge class="low">5.0%</swp-badge></swp-td>
+        </swp-table-row>
+        <swp-table-row>
+          <swp-td class="name">Martin Nielsen</swp-td>
+          <swp-td class="number right">80 t</swp-td>
+          <swp-td class="number right">8 t</swp-td>
+          <swp-td class="number right red">8 t</swp-td>
+          <swp-td class="number right amber">0 t</swp-td>
+          <swp-td class="number right purple">0 t</swp-td>
+          <swp-td class="number right">0 t</swp-td>
+          <swp-td class="right"><swp-badge class="medium">10.0%</swp-badge></swp-td>
+        </swp-table-row>
+        <swp-table-row>
+          <swp-td class="name">Sofie Larsen</swp-td>
+          <swp-td class="number right">80 t</swp-td>
+          <swp-td class="number right">4 t</swp-td>
+          <swp-td class="number right red">0 t</swp-td>
+          <swp-td class="number right amber">0 t</swp-td>
+          <swp-td class="number right purple">4 t</swp-td>
+          <swp-td class="number right">4 t</swp-td>
+          <swp-td class="right"><swp-badge class="low">5.0%</swp-badge></swp-td>
+        </swp-table-row>
+        <swp-table-row>
+          <swp-td class="name">Peter Hansen</swp-td>
+          <swp-td class="number right">80 t</swp-td>
+          <swp-td class="number right">8 t</swp-td>
+          <swp-td class="number right red">4 t</swp-td>
+          <swp-td class="number right amber">4 t</swp-td>
+          <swp-td class="number right purple">0 t</swp-td>
+          <swp-td class="number right">2 t</swp-td>
+          <swp-td class="right"><swp-badge class="medium">10.0%</swp-badge></swp-td>
+        </swp-table-row>
+      </swp-table-body>
+      <swp-table-footer>
+        <span>Viser 4 medarbejdere</span>
+        <span>Total: 320 t planlagt, 24 t fravær, 8 t overarbejde</span>
+      </swp-table-footer>
+    </swp-report-table>
+  </swp-page-container>
+
+  <script type="module">
+    // Import charting library
+    import { createChart } from 'https://unpkg.com/@sevenweirdpeople/swp-charting@latest/dist/index.js';
+
+    // Initialize pie chart with breakdown
+    createChart(document.getElementById('absenceChart'), {
+      height: 240,
+      series: [
+        {
+          name: 'Syg',
+          color: '#e53935',
+          type: 'pie',
+          unit: 't',
+          data: [
+            { x: 'Martin Nielsen', y: 8 },
+            { x: 'Peter Hansen', y: 4 },
+          ],
+          pie: { innerRadius: 25, outerRadius: 100 }
+        },
+        {
+          name: 'Ferie',
+          color: '#f59e0b',
+          type: 'pie',
+          unit: 't',
+          data: [
+            { x: 'Anna Jensen', y: 4 },
+            { x: 'Peter Hansen', y: 4 },
+          ],
+          pie: { innerRadius: 25, outerRadius: 100 }
+        },
+        {
+          name: 'Fri',
+          color: '#8b5cf6',
+          type: 'pie',
+          unit: 't',
+          data: [
+            { x: 'Sofie Larsen', y: 4 },
+          ],
+          pie: { innerRadius: 25, outerRadius: 100 }
+        }
+      ],
+      legend: { position: 'right', align: 'center' }
+    });
+
+    // Initialize grouped bar chart
+    createChart(document.getElementById('hoursChart'), {
+      xAxis: { categories: ['Uge 48', 'Uge 49', 'Uge 50', 'Uge 51', 'Uge 52'] },
+      series: [
+        {
+          name: 'Anna Jensen',
+          color: '#00897b',
+          type: 'bar',
+          data: [
+            { x: 'Uge 48', y: 32 },
+            { x: 'Uge 49', y: 40 },
+            { x: 'Uge 50', y: 38 },
+            { x: 'Uge 51', y: 40 },
+            { x: 'Uge 52', y: 20 },
+          ]
+        },
+        {
+          name: 'Martin Nielsen',
+          color: '#3b82f6',
+          type: 'bar',
+          data: [
+            { x: 'Uge 48', y: 30 },
+            { x: 'Uge 49', y: 40 },
+            { x: 'Uge 50', y: 35 },
+            { x: 'Uge 51', y: 40 },
+            { x: 'Uge 52', y: 16 },
+          ]
+        },
+        {
+          name: 'Sofie Larsen',
+          color: '#8b5cf6',
+          type: 'bar',
+          data: [
+            { x: 'Uge 48', y: 28 },
+            { x: 'Uge 49', y: 36 },
+            { x: 'Uge 50', y: 40 },
+            { x: 'Uge 51', y: 40 },
+            { x: 'Uge 52', y: 18 },
+          ]
+        },
+        {
+          name: 'Peter Hansen',
+          color: '#f59e0b',
+          type: 'bar',
+          data: [
+            { x: 'Uge 48', y: 34 },
+            { x: 'Uge 49', y: 38 },
+            { x: 'Uge 50', y: 32 },
+            { x: 'Uge 51', y: 40 },
+            { x: 'Uge 52', y: 14 },
+          ]
+        }
+      ],
+      yAxis: { format: (v) => v + ' t' },
+      legend: { position: 'bottom', align: 'center', gap: 0 },
+      height: 240
+    });
+
+    // Period selector
+    document.querySelectorAll('swp-period-selector button').forEach(btn => {
+      btn.addEventListener('click', () => {
+        document.querySelectorAll('swp-period-selector button').forEach(b => b.classList.remove('active'));
+        btn.classList.add('active');
+      });
+    });
+
+    // Sort columns
+    document.querySelectorAll('swp-th.sortable').forEach(th => {
+      th.addEventListener('click', () => {
+        const wasSorted = th.classList.contains('sorted');
+        const wasDesc = th.classList.contains('desc');
+
+        // Remove sorted state from all
+        document.querySelectorAll('swp-th.sortable').forEach(t => {
+          t.classList.remove('sorted', 'desc');
+        });
+
+        // Toggle this column
+        th.classList.add('sorted');
+        if (wasSorted && !wasDesc) {
+          th.classList.add('desc');
+        }
+      });
+    });
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-salg.html b/.workbench/POC/poc-salg.html
new file mode 100644
index 0000000..75f91ee
--- /dev/null
+++ b/.workbench/POC/poc-salg.html
@@ -0,0 +1,1133 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Salg - Salon OS</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <script src="https://unpkg.com/@phosphor-icons/web@2.1.1"></script>
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* Dark mode */
+    @media (prefers-color-scheme: dark) {
+      :root:not(.light-mode) {
+        --color-surface: #1e1e1e;
+        --color-background: #121212;
+        --color-background-hover: #2a2a2a;
+        --color-background-alt: #1a1a1a;
+        --color-border: #333;
+        --color-text: #e0e0e0;
+        --color-text-secondary: #999;
+        --color-teal: #26a69a;
+        --color-blue: #42a5f5;
+        --color-red: #ef5350;
+        --color-amber: #ffb74d;
+        --color-purple: #a78bfa;
+        --color-green: #66bb6a;
+      }
+    }
+
+    :root.dark-mode {
+      --color-surface: #1e1e1e;
+      --color-background: #121212;
+      --color-background-hover: #2a2a2a;
+      --color-background-alt: #1a1a1a;
+      --color-border: #333;
+      --color-text: #e0e0e0;
+      --color-text-secondary: #999;
+      --color-teal: #26a69a;
+      --color-blue: #42a5f5;
+      --color-red: #ef5350;
+      --color-amber: #ffb74d;
+      --color-purple: #a78bfa;
+      --color-green: #66bb6a;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-page-title {
+      font-size: 16px;
+      font-weight: 600;
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    /* ==========================================
+       LAYOUT
+       ========================================== */
+    swp-page-container {
+      display: block;
+      max-width: 1400px;
+      margin: 0 auto;
+      padding: 24px;
+    }
+
+    /* ==========================================
+       BUTTONS
+       ========================================== */
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 10px 18px;
+      font-size: 13px;
+      font-weight: 500;
+      font-family: var(--font-family);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn i {
+      font-size: 18px;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    /* ==========================================
+       STATS BAR
+       ========================================== */
+    swp-stats-bar {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+      margin-bottom: 20px;
+    }
+
+    swp-stat-card {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      padding: 16px 20px;
+      background: var(--color-surface);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-stat-card swp-stat-value {
+      font-size: 22px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-stat-card swp-stat-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-stat-card.highlight swp-stat-value {
+      color: var(--color-teal);
+    }
+
+    swp-stat-card.success swp-stat-value {
+      color: var(--color-green);
+    }
+
+    swp-stat-card.warning swp-stat-value {
+      color: var(--color-amber);
+    }
+
+    /* ==========================================
+       FILTER BAR
+       ========================================== */
+    swp-filter-bar {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px 20px;
+      background: var(--color-surface);
+      border-radius: 8px;
+      margin-bottom: 20px;
+      flex-wrap: wrap;
+    }
+
+    swp-search-input {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      background: var(--color-surface);
+      flex: 1;
+      max-width: 350px;
+    }
+
+    swp-search-input i {
+      color: var(--color-text-secondary);
+      font-size: 18px;
+    }
+
+    swp-search-input input {
+      border: none;
+      outline: none;
+      font-size: 13px;
+      font-family: var(--font-family);
+      width: 100%;
+      background: transparent;
+      color: var(--color-text);
+    }
+
+    swp-filter-group {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-filter-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-filter-bar select,
+    swp-filter-bar input[type="date"] {
+      padding: 8px 12px;
+      border: 1px solid var(--color-border);
+      border-radius: 6px;
+      font-size: 13px;
+      font-family: var(--font-family);
+      background: var(--color-surface);
+      color: var(--color-text);
+      cursor: pointer;
+    }
+
+    swp-filter-bar input[type="date"] {
+      font-family: var(--font-mono);
+    }
+
+    swp-filter-spacer {
+      flex: 1;
+    }
+
+    /* ==========================================
+       TABLE
+       ========================================== */
+    swp-table {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      overflow: hidden;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-table-header,
+    swp-table-row {
+      display: grid;
+      grid-template-columns: 100px 140px minmax(120px, 1fr) 120px minmax(140px, 1.2fr) 100px 100px 100px 40px;
+      align-items: center;
+    }
+
+    swp-table-header {
+      background: var(--color-background-alt);
+      border-bottom: 1px solid var(--color-border);
+      padding: 12px 20px;
+    }
+
+    swp-th {
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-th.right {
+      text-align: right;
+    }
+
+    swp-th.center {
+      text-align: center;
+    }
+
+    swp-table-body {
+      display: block;
+    }
+
+    swp-table-row {
+      padding: 14px 20px;
+      border-bottom: 1px solid var(--color-border);
+      transition: background 150ms ease;
+      cursor: pointer;
+    }
+
+    swp-table-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-table-row:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-td {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-td.right {
+      text-align: right;
+    }
+
+    swp-td.center {
+      text-align: center;
+    }
+
+    swp-td.mono {
+      font-family: var(--font-mono);
+      font-size: 13px;
+    }
+
+    swp-td.muted {
+      color: var(--color-text-secondary);
+    }
+
+    /* Invoice cell */
+    swp-invoice-cell {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-invoice-number {
+      font-family: var(--font-mono);
+      font-weight: 500;
+      font-size: 13px;
+      color: var(--color-teal);
+    }
+
+    /* DateTime cell */
+    swp-datetime-cell {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-datetime-date {
+      font-size: 13px;
+      color: var(--color-text);
+    }
+
+    swp-datetime-time {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      font-family: var(--font-mono);
+    }
+
+    /* Customer cell */
+    swp-customer-cell {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-customer-name {
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-customer-phone {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      font-family: var(--font-mono);
+    }
+
+    /* Services cell */
+    swp-services-cell {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-services-main {
+      font-size: 13px;
+      color: var(--color-text);
+    }
+
+    swp-services-more {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Amount cell */
+    swp-amount-cell {
+      font-family: var(--font-mono);
+      font-weight: 600;
+      font-size: 14px;
+      text-align: right;
+    }
+
+    /* Payment method badge */
+    swp-payment-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 4px 10px;
+      font-size: 12px;
+      font-weight: 500;
+      border-radius: 6px;
+      background: var(--color-background-alt);
+      color: var(--color-text-secondary);
+    }
+
+    swp-payment-badge i {
+      font-size: 14px;
+    }
+
+    swp-payment-badge.card {
+      background: color-mix(in srgb, var(--color-blue) 12%, transparent);
+      color: var(--color-blue);
+    }
+
+    swp-payment-badge.cash {
+      background: color-mix(in srgb, var(--color-green) 12%, transparent);
+      color: var(--color-green);
+    }
+
+    swp-payment-badge.mobilepay {
+      background: color-mix(in srgb, var(--color-blue) 12%, transparent);
+      color: var(--color-blue);
+    }
+
+    swp-payment-badge.invoice {
+      background: color-mix(in srgb, var(--color-amber) 12%, transparent);
+      color: var(--color-amber);
+    }
+
+    swp-payment-badge.giftcard {
+      background: color-mix(in srgb, var(--color-purple) 12%, transparent);
+      color: var(--color-purple);
+    }
+
+    /* Status badge */
+    swp-status-badge {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      border-radius: 12px;
+    }
+
+    swp-status-badge.paid {
+      background: color-mix(in srgb, var(--color-green) 15%, transparent);
+      color: var(--color-green);
+    }
+
+    swp-status-badge.pending {
+      background: color-mix(in srgb, var(--color-amber) 15%, transparent);
+      color: var(--color-amber);
+    }
+
+    swp-status-badge.credited {
+      background: color-mix(in srgb, var(--color-purple) 15%, transparent);
+      color: var(--color-purple);
+    }
+
+    /* Row arrow */
+    swp-row-arrow {
+      display: flex;
+      align-items: center;
+      justify-content: flex-end;
+    }
+
+    swp-row-arrow i {
+      font-size: 18px;
+      color: var(--color-text-secondary);
+      transition: transform 150ms ease, color 150ms ease;
+    }
+
+    swp-table-row:hover swp-row-arrow i {
+      transform: translateX(4px);
+      color: var(--color-teal);
+    }
+
+    /* Table footer */
+    swp-table-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 14px 20px;
+      background: var(--color-background-alt);
+      border-top: 1px solid var(--color-border);
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-pagination {
+      display: flex;
+      align-items: center;
+      gap: 4px;
+    }
+
+    swp-page-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      border-radius: 6px;
+      font-size: 13px;
+      font-weight: 500;
+      cursor: pointer;
+      transition: all 150ms ease;
+      background: transparent;
+      color: var(--color-text-secondary);
+      border: 1px solid transparent;
+    }
+
+    swp-page-btn:hover {
+      background: var(--color-background-hover);
+      color: var(--color-text);
+    }
+
+    swp-page-btn.active {
+      background: var(--color-teal);
+      color: white;
+      border-color: var(--color-teal);
+    }
+
+    swp-page-btn i {
+      font-size: 16px;
+    }
+
+    /* ==========================================
+       CHARTS SECTION
+       ========================================== */
+    swp-charts-grid {
+      display: grid;
+      grid-template-columns: 2fr 1fr;
+      gap: 20px;
+      margin-bottom: 20px;
+    }
+
+    swp-chart-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      border: 1px solid var(--color-border);
+      overflow: hidden;
+    }
+
+    swp-chart-header {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-chart-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-chart-hint {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-chart-container {
+      display: block;
+      height: 240px;
+      position: relative;
+    }
+
+    /* ==========================================
+       RESPONSIVE
+       ========================================== */
+    @media (max-width: 1200px) {
+      swp-stats-bar {
+        grid-template-columns: repeat(2, 1fr);
+      }
+
+      swp-charts-grid {
+        grid-template-columns: 1fr;
+      }
+
+      swp-table-header,
+      swp-table-row {
+        grid-template-columns: 100px 130px 1fr 100px 100px 100px 40px;
+      }
+
+      swp-th:nth-child(4),
+      swp-td:nth-child(4),
+      swp-th:nth-child(5),
+      swp-td:nth-child(5) {
+        display: none;
+      }
+    }
+
+    @media (max-width: 900px) {
+      swp-table-header,
+      swp-table-row {
+        grid-template-columns: 100px 1fr 100px 100px 40px;
+      }
+
+      swp-th:nth-child(3),
+      swp-td:nth-child(3) {
+        display: none;
+      }
+    }
+  </style>
+</head>
+<body>
+  <!-- Topbar -->
+  <swp-topbar>
+    <swp-topbar-left>
+      <swp-page-title>Salg</swp-page-title>
+    </swp-topbar-left>
+    <swp-topbar-right>
+      <swp-btn class="secondary" id="exportBtn">
+        <i class="ph ph-export"></i>
+        Eksporter
+      </swp-btn>
+    </swp-topbar-right>
+  </swp-topbar>
+
+  <swp-page-container>
+    <!-- Stats Bar -->
+    <swp-stats-bar>
+      <swp-stat-card class="highlight">
+        <swp-stat-value>12.450 kr</swp-stat-value>
+        <swp-stat-label>Omsætning i dag</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card class="success">
+        <swp-stat-value>187.230 kr</swp-stat-value>
+        <swp-stat-label>Omsætning denne måned</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>18</swp-stat-value>
+        <swp-stat-label>Antal salg i dag</swp-stat-label>
+      </swp-stat-card>
+      <swp-stat-card>
+        <swp-stat-value>692 kr</swp-stat-value>
+        <swp-stat-label>Gns. ordreværdi</swp-stat-label>
+      </swp-stat-card>
+    </swp-stats-bar>
+
+    <!-- Charts Section -->
+    <swp-charts-grid>
+      <swp-chart-card>
+        <swp-chart-header>
+          <swp-chart-title>Omsætning pr. måned</swp-chart-title>
+          <swp-chart-hint>Sidste 12 måneder</swp-chart-hint>
+        </swp-chart-header>
+        <swp-chart-container id="revenueChart"></swp-chart-container>
+      </swp-chart-card>
+      <swp-chart-card>
+        <swp-chart-header>
+          <swp-chart-title>Betalingsmetoder</swp-chart-title>
+          <swp-chart-hint>Fordeling</swp-chart-hint>
+        </swp-chart-header>
+        <swp-chart-container id="paymentChart"></swp-chart-container>
+      </swp-chart-card>
+    </swp-charts-grid>
+
+    <!-- Filter Bar -->
+    <swp-filter-bar>
+      <swp-search-input>
+        <i class="ph ph-magnifying-glass"></i>
+        <input type="search" id="searchInput" placeholder="Søg fakturanr, kunde, medarbejder..." />
+      </swp-search-input>
+      <swp-filter-group>
+        <swp-filter-label>Fra</swp-filter-label>
+        <input type="date" id="dateFrom" value="2025-01-01" />
+      </swp-filter-group>
+      <swp-filter-group>
+        <swp-filter-label>Til</swp-filter-label>
+        <input type="date" id="dateTo" value="2025-01-06" />
+      </swp-filter-group>
+      <swp-filter-group>
+        <swp-filter-label>Status</swp-filter-label>
+        <select id="statusFilter">
+          <option value="">Alle</option>
+          <option value="paid">Betalt</option>
+          <option value="pending">Afventer</option>
+          <option value="credited">Krediteret</option>
+        </select>
+      </swp-filter-group>
+      <swp-filter-group>
+        <swp-filter-label>Betaling</swp-filter-label>
+        <select id="paymentFilter">
+          <option value="">Alle</option>
+          <option value="card">Kort</option>
+          <option value="cash">Kontant</option>
+          <option value="mobilepay">MobilePay</option>
+          <option value="invoice">Faktura</option>
+          <option value="giftcard">Fordelskort</option>
+        </select>
+      </swp-filter-group>
+    </swp-filter-bar>
+
+    <!-- Table -->
+    <swp-table>
+      <swp-table-header>
+        <swp-th>Faktura</swp-th>
+        <swp-th>Dato/tid</swp-th>
+        <swp-th>Kunde</swp-th>
+        <swp-th>Medarbejder</swp-th>
+        <swp-th>Ydelser</swp-th>
+        <swp-th class="right">Beløb</swp-th>
+        <swp-th>Betaling</swp-th>
+        <swp-th>Status</swp-th>
+        <swp-th></swp-th>
+      </swp-table-header>
+      <swp-table-body>
+        <swp-table-row>
+          <swp-td>
+            <swp-invoice-cell>
+              <swp-invoice-number>#1847</swp-invoice-number>
+            </swp-invoice-cell>
+          </swp-td>
+          <swp-td>
+            <swp-datetime-cell>
+              <swp-datetime-date>6. jan 2025</swp-datetime-date>
+              <swp-datetime-time>14:32</swp-datetime-time>
+            </swp-datetime-cell>
+          </swp-td>
+          <swp-td>
+            <swp-customer-cell>
+              <swp-customer-name>Maria Hansen</swp-customer-name>
+              <swp-customer-phone>+45 23 45 67 89</swp-customer-phone>
+            </swp-customer-cell>
+          </swp-td>
+          <swp-td class="muted">Louise P.</swp-td>
+          <swp-td>
+            <swp-services-cell>
+              <swp-services-main>Dameklip, Farve</swp-services-main>
+              <swp-services-more>+ 1 produkt</swp-services-more>
+            </swp-services-cell>
+          </swp-td>
+          <swp-td><swp-amount-cell>1.450 kr</swp-amount-cell></swp-td>
+          <swp-td><swp-payment-badge class="card"><i class="ph ph-credit-card"></i> Kort</swp-payment-badge></swp-td>
+          <swp-td><swp-status-badge class="paid">Betalt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row>
+          <swp-td>
+            <swp-invoice-cell>
+              <swp-invoice-number>#1846</swp-invoice-number>
+            </swp-invoice-cell>
+          </swp-td>
+          <swp-td>
+            <swp-datetime-cell>
+              <swp-datetime-date>6. jan 2025</swp-datetime-date>
+              <swp-datetime-time>13:15</swp-datetime-time>
+            </swp-datetime-cell>
+          </swp-td>
+          <swp-td>
+            <swp-customer-cell>
+              <swp-customer-name>Jonas Petersen</swp-customer-name>
+              <swp-customer-phone>+45 31 22 44 55</swp-customer-phone>
+            </swp-customer-cell>
+          </swp-td>
+          <swp-td class="muted">Karina K.</swp-td>
+          <swp-td>
+            <swp-services-cell>
+              <swp-services-main>Herreklip</swp-services-main>
+            </swp-services-cell>
+          </swp-td>
+          <swp-td><swp-amount-cell>350 kr</swp-amount-cell></swp-td>
+          <swp-td><swp-payment-badge class="mobilepay"><i class="ph ph-device-mobile"></i> MobilePay</swp-payment-badge></swp-td>
+          <swp-td><swp-status-badge class="paid">Betalt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row>
+          <swp-td>
+            <swp-invoice-cell>
+              <swp-invoice-number>#1845</swp-invoice-number>
+            </swp-invoice-cell>
+          </swp-td>
+          <swp-td>
+            <swp-datetime-cell>
+              <swp-datetime-date>6. jan 2025</swp-datetime-date>
+              <swp-datetime-time>11:45</swp-datetime-time>
+            </swp-datetime-cell>
+          </swp-td>
+          <swp-td>
+            <swp-customer-cell>
+              <swp-customer-name>Sofie Larsen</swp-customer-name>
+              <swp-customer-phone>+45 42 33 55 66</swp-customer-phone>
+            </swp-customer-cell>
+          </swp-td>
+          <swp-td class="muted">Louise P.</swp-td>
+          <swp-td>
+            <swp-services-cell>
+              <swp-services-main>Balayage, Klip</swp-services-main>
+              <swp-services-more>+ 2 produkter</swp-services-more>
+            </swp-services-cell>
+          </swp-td>
+          <swp-td><swp-amount-cell>2.850 kr</swp-amount-cell></swp-td>
+          <swp-td><swp-payment-badge class="invoice"><i class="ph ph-file-text"></i> Faktura</swp-payment-badge></swp-td>
+          <swp-td><swp-status-badge class="pending">Afventer</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row>
+          <swp-td>
+            <swp-invoice-cell>
+              <swp-invoice-number>#1844</swp-invoice-number>
+            </swp-invoice-cell>
+          </swp-td>
+          <swp-td>
+            <swp-datetime-cell>
+              <swp-datetime-date>6. jan 2025</swp-datetime-date>
+              <swp-datetime-time>10:30</swp-datetime-time>
+            </swp-datetime-cell>
+          </swp-td>
+          <swp-td>
+            <swp-customer-cell>
+              <swp-customer-name>Anne Nielsen</swp-customer-name>
+              <swp-customer-phone>+45 51 62 73 84</swp-customer-phone>
+            </swp-customer-cell>
+          </swp-td>
+          <swp-td class="muted">Mette J.</swp-td>
+          <swp-td>
+            <swp-services-cell>
+              <swp-services-main>Dameklip, Vask</swp-services-main>
+            </swp-services-cell>
+          </swp-td>
+          <swp-td><swp-amount-cell>550 kr</swp-amount-cell></swp-td>
+          <swp-td><swp-payment-badge class="giftcard"><i class="ph ph-gift"></i> Fordelskort</swp-payment-badge></swp-td>
+          <swp-td><swp-status-badge class="paid">Betalt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row>
+          <swp-td>
+            <swp-invoice-cell>
+              <swp-invoice-number>#1843</swp-invoice-number>
+            </swp-invoice-cell>
+          </swp-td>
+          <swp-td>
+            <swp-datetime-cell>
+              <swp-datetime-date>6. jan 2025</swp-datetime-date>
+              <swp-datetime-time>09:15</swp-datetime-time>
+            </swp-datetime-cell>
+          </swp-td>
+          <swp-td>
+            <swp-customer-cell>
+              <swp-customer-name>Peter Andersen</swp-customer-name>
+              <swp-customer-phone>+45 61 72 83 94</swp-customer-phone>
+            </swp-customer-cell>
+          </swp-td>
+          <swp-td class="muted">Karina K.</swp-td>
+          <swp-td>
+            <swp-services-cell>
+              <swp-services-main>Herreklip, Skægtrim</swp-services-main>
+            </swp-services-cell>
+          </swp-td>
+          <swp-td><swp-amount-cell>450 kr</swp-amount-cell></swp-td>
+          <swp-td><swp-payment-badge class="cash"><i class="ph ph-money"></i> Kontant</swp-payment-badge></swp-td>
+          <swp-td><swp-status-badge class="paid">Betalt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row>
+          <swp-td>
+            <swp-invoice-cell>
+              <swp-invoice-number>#1842</swp-invoice-number>
+            </swp-invoice-cell>
+          </swp-td>
+          <swp-td>
+            <swp-datetime-cell>
+              <swp-datetime-date>5. jan 2025</swp-datetime-date>
+              <swp-datetime-time>16:45</swp-datetime-time>
+            </swp-datetime-cell>
+          </swp-td>
+          <swp-td>
+            <swp-customer-cell>
+              <swp-customer-name>Camilla Holm</swp-customer-name>
+              <swp-customer-phone>+45 71 82 93 04</swp-customer-phone>
+            </swp-customer-cell>
+          </swp-td>
+          <swp-td class="muted">Louise P.</swp-td>
+          <swp-td>
+            <swp-services-cell>
+              <swp-services-main>Extensions</swp-services-main>
+              <swp-services-more>+ 1 produkt</swp-services-more>
+            </swp-services-cell>
+          </swp-td>
+          <swp-td><swp-amount-cell>3.200 kr</swp-amount-cell></swp-td>
+          <swp-td><swp-payment-badge class="card"><i class="ph ph-credit-card"></i> Kort</swp-payment-badge></swp-td>
+          <swp-td><swp-status-badge class="paid">Betalt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row>
+          <swp-td>
+            <swp-invoice-cell>
+              <swp-invoice-number>#1841</swp-invoice-number>
+            </swp-invoice-cell>
+          </swp-td>
+          <swp-td>
+            <swp-datetime-cell>
+              <swp-datetime-date>5. jan 2025</swp-datetime-date>
+              <swp-datetime-time>15:00</swp-datetime-time>
+            </swp-datetime-cell>
+          </swp-td>
+          <swp-td>
+            <swp-customer-cell>
+              <swp-customer-name>Mikkel Jensen</swp-customer-name>
+              <swp-customer-phone>+45 81 92 03 14</swp-customer-phone>
+            </swp-customer-cell>
+          </swp-td>
+          <swp-td class="muted">Mette J.</swp-td>
+          <swp-td>
+            <swp-services-cell>
+              <swp-services-main>Dameklip</swp-services-main>
+            </swp-services-cell>
+          </swp-td>
+          <swp-td><swp-amount-cell>-450 kr</swp-amount-cell></swp-td>
+          <swp-td><swp-payment-badge class="card"><i class="ph ph-credit-card"></i> Kort</swp-payment-badge></swp-td>
+          <swp-td><swp-status-badge class="credited">Krediteret</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+
+        <swp-table-row>
+          <swp-td>
+            <swp-invoice-cell>
+              <swp-invoice-number>#1840</swp-invoice-number>
+            </swp-invoice-cell>
+          </swp-td>
+          <swp-td>
+            <swp-datetime-cell>
+              <swp-datetime-date>5. jan 2025</swp-datetime-date>
+              <swp-datetime-time>13:30</swp-datetime-time>
+            </swp-datetime-cell>
+          </swp-td>
+          <swp-td>
+            <swp-customer-cell>
+              <swp-customer-name>Louise Eriksen</swp-customer-name>
+              <swp-customer-phone>+45 91 02 13 24</swp-customer-phone>
+            </swp-customer-cell>
+          </swp-td>
+          <swp-td class="muted">Karina K.</swp-td>
+          <swp-td>
+            <swp-services-cell>
+              <swp-services-main>Highlights, Klip, Kur</swp-services-main>
+            </swp-services-cell>
+          </swp-td>
+          <swp-td><swp-amount-cell>1.950 kr</swp-amount-cell></swp-td>
+          <swp-td><swp-payment-badge class="card"><i class="ph ph-credit-card"></i> Kort</swp-payment-badge></swp-td>
+          <swp-td><swp-status-badge class="paid">Betalt</swp-status-badge></swp-td>
+          <swp-td><swp-row-arrow><i class="ph ph-caret-right"></i></swp-row-arrow></swp-td>
+        </swp-table-row>
+      </swp-table-body>
+      <swp-table-footer>
+        <span>Viser 1-8 af 1.847 fakturaer</span>
+        <swp-pagination>
+          <swp-page-btn><i class="ph ph-caret-left"></i></swp-page-btn>
+          <swp-page-btn class="active">1</swp-page-btn>
+          <swp-page-btn>2</swp-page-btn>
+          <swp-page-btn>3</swp-page-btn>
+          <swp-page-btn>...</swp-page-btn>
+          <swp-page-btn>231</swp-page-btn>
+          <swp-page-btn><i class="ph ph-caret-right"></i></swp-page-btn>
+        </swp-pagination>
+      </swp-table-footer>
+    </swp-table>
+  </swp-page-container>
+
+  <script type="module">
+    import { createChart } from 'https://unpkg.com/@sevenweirdpeople/swp-charting@latest/dist/index.js';
+
+    // Omsætning pr. måned (bar chart) - sidste 12 måneder
+    createChart(document.getElementById('revenueChart'), {
+      height: 240,
+      xAxis: {
+        categories: ['Feb', 'Mar', 'Apr', 'Maj', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dec', 'Jan']
+      },
+      series: [
+        {
+          name: 'Omsætning',
+          color: '#00897b',
+          type: 'bar',
+          unit: ' kr',
+          data: [
+            { x: 'Feb', y: 142500 },
+            { x: 'Mar', y: 168200 },
+            { x: 'Apr', y: 155800 },
+            { x: 'Maj', y: 178400 },
+            { x: 'Jun', y: 145600 },
+            { x: 'Jul', y: 98200 },
+            { x: 'Aug', y: 134500 },
+            { x: 'Sep', y: 189300 },
+            { x: 'Okt', y: 201400 },
+            { x: 'Nov', y: 178900 },
+            { x: 'Dec', y: 245600 },
+            { x: 'Jan', y: 187230 },
+          ]
+        }
+      ]
+    });
+
+    // Mappe måned-navne til måned-numre (baseret på 2024/2025)
+    const monthMap = {
+      'Feb': { year: 2024, month: 2 },
+      'Mar': { year: 2024, month: 3 },
+      'Apr': { year: 2024, month: 4 },
+      'Maj': { year: 2024, month: 5 },
+      'Jun': { year: 2024, month: 6 },
+      'Jul': { year: 2024, month: 7 },
+      'Aug': { year: 2024, month: 8 },
+      'Sep': { year: 2024, month: 9 },
+      'Okt': { year: 2024, month: 10 },
+      'Nov': { year: 2024, month: 11 },
+      'Dec': { year: 2024, month: 12 },
+      'Jan': { year: 2025, month: 1 },
+    };
+
+    function setDateFilter(startMonth, endMonth) {
+      if (startMonth && endMonth) {
+        const lastDay = new Date(endMonth.year, endMonth.month, 0).getDate();
+        const fromDate = `${startMonth.year}-${String(startMonth.month).padStart(2, '0')}-01`;
+        const toDate = `${endMonth.year}-${String(endMonth.month).padStart(2, '0')}-${lastDay}`;
+        document.getElementById('dateFrom').value = fromDate;
+        document.getElementById('dateTo').value = toDate;
+      }
+    }
+
+    // Enkelt-klik på bar chart -> filtrer fakturaer efter én måned
+    document.addEventListener('swp-chart-click', (e) => {
+      const { type, x } = e.detail;
+      if (type !== 'bar' || !x) return;
+      setDateFilter(monthMap[x], monthMap[x]);
+    });
+
+    // Range-select på bar chart -> filtrer fakturaer efter flere måneder
+    document.addEventListener('swp-chart-select', (e) => {
+      const { type, bounds } = e.detail;
+      if (type !== 'bar' || !bounds) return;
+      setDateFilter(monthMap[bounds.x1], monthMap[bounds.x2]);
+    });
+
+    // Betalingsmetoder (pie chart)
+    createChart(document.getElementById('paymentChart'), {
+      height: 240,
+      series: [
+        { name: 'Kort', color: '#1976d2', type: 'pie', data: [{ x: '', y: 892400 }], unit: ' kr', pie: { innerRadius: 40, outerRadius: 90 } },
+        { name: 'MobilePay', color: '#5C6BC0', type: 'pie', data: [{ x: '', y: 445200 }], unit: ' kr', pie: { innerRadius: 40, outerRadius: 90 } },
+        { name: 'Kontant', color: '#43a047', type: 'pie', data: [{ x: '', y: 234800 }], unit: ' kr', pie: { innerRadius: 40, outerRadius: 90 } },
+        { name: 'Faktura', color: '#f59e0b', type: 'pie', data: [{ x: '', y: 178500 }], unit: ' kr', pie: { innerRadius: 40, outerRadius: 90 } },
+        { name: 'Fordelskort', color: '#8b5cf6', type: 'pie', data: [{ x: '', y: 74700 }], unit: ' kr', pie: { innerRadius: 40, outerRadius: 90 } }
+      ],
+      tooltip: true,
+      legend: { position: 'right', align: 'center' }
+    });
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/poc-service-detail.html b/.workbench/POC/poc-service-detail.html
new file mode 100644
index 0000000..3111190
--- /dev/null
+++ b/.workbench/POC/poc-service-detail.html
@@ -0,0 +1,2521 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Service Detaljer - Klip & Farve</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES (Design System)
+       ========================================== */
+    :root {
+      /* Colors */
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #ffb300;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+
+      /* Calendar colors */
+      --b-color-red: #e53935;
+      --b-color-pink: #d81b60;
+      --b-color-magenta: #c2185b;
+      --b-color-purple: #8e24aa;
+      --b-color-violet: #7b1fa2;
+      --b-color-deep-purple: #5e35b1;
+      --b-color-indigo: #3949ab;
+      --b-color-blue: #1e88e5;
+      --b-color-light-blue: #039be5;
+      --b-color-cyan: #00acc1;
+      --b-color-teal: #00897b;
+      --b-color-green: #43a047;
+      --b-color-light-green: #7cb342;
+      --b-color-lime: #c0ca33;
+      --b-color-yellow: #fdd835;
+      --b-color-amber: #ffb300;
+      --b-color-orange: #fb8c00;
+      --b-color-deep-orange: #f4511e;
+
+      /* Typography */
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 0;
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-back-link {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+      color: var(--color-text-secondary);
+      text-decoration: none;
+      font-size: 13px;
+      cursor: pointer;
+      transition: color 150ms ease;
+    }
+
+    swp-back-link:hover {
+      color: var(--color-teal);
+    }
+
+    swp-back-link svg {
+      width: 16px;
+      height: 16px;
+      fill: currentColor;
+    }
+
+    swp-topbar-title {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-topbar-actions {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      border-radius: 6px;
+      border: none;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    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);
+    }
+
+    /* ==========================================
+       SERVICE HEADER
+       ========================================== */
+    swp-service-header {
+      display: flex;
+      gap: 24px;
+      padding: 24px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      position: sticky;
+      top: 49px;
+      z-index: 90;
+    }
+
+    swp-service-info {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-service-name-row {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-service-name {
+      font-size: 24px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    /* Tags */
+    swp-tags-editor {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      flex-wrap: wrap;
+    }
+
+    swp-tag {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+      border-radius: 4px;
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+    }
+
+    swp-tag.active {
+      background: color-mix(in srgb, var(--color-green) 20%, white);
+      color: var(--color-green);
+    }
+
+    swp-tag.popular {
+      background: color-mix(in srgb, var(--color-amber) 20%, white);
+      color: #b8860b;
+    }
+
+    swp-tag.combo {
+      background: color-mix(in srgb, var(--color-teal) 15%, white);
+      color: var(--color-teal);
+    }
+
+    swp-tag.color {
+      background: color-mix(in srgb, var(--color-purple) 15%, white);
+      color: var(--color-purple);
+    }
+
+    swp-tag .remove {
+      cursor: pointer;
+      opacity: 0.6;
+      margin-left: 2px;
+    }
+
+    swp-tag .remove:hover {
+      opacity: 1;
+    }
+
+    swp-tag-add {
+      display: inline-flex;
+      align-items: center;
+      padding: 4px 10px;
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      border: 1px dashed var(--color-border);
+      border-radius: 4px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-tag-add:hover {
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+    }
+
+    /* Service Status Toggle (like booking exclusion) */
+    swp-service-status {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 6px 12px;
+      font-size: 12px;
+      font-weight: 500;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      margin-left: auto;
+    }
+
+    swp-service-status[data-active="true"] {
+      background: color-mix(in srgb, var(--color-green) 15%, white);
+      color: var(--color-green);
+      border: 1px solid color-mix(in srgb, var(--color-green) 30%, white);
+    }
+
+    swp-service-status[data-active="false"] {
+      background: color-mix(in srgb, var(--color-red) 12%, white);
+      color: var(--color-red);
+      border: 1px solid color-mix(in srgb, var(--color-red) 30%, white);
+    }
+
+    swp-service-status .icon {
+      font-size: 14px;
+    }
+
+    /* Fact Boxes Inline (same as customer detail) */
+    swp-fact-boxes-inline {
+      display: flex;
+      gap: 24px;
+      margin-top: 4px;
+    }
+
+    swp-fact-inline {
+      display: flex;
+      align-items: baseline;
+      gap: 6px;
+    }
+
+    swp-fact-inline-value {
+      font-size: 18px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-fact-inline-label {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* ==========================================
+       TAB BAR
+       ========================================== */
+    swp-tab-bar {
+      display: flex;
+      gap: 0;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      padding: 0 24px;
+      position: sticky;
+      top: 178px;
+      z-index: 80;
+    }
+
+    swp-tab {
+      padding: 14px 24px;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+      transition: all 150ms ease;
+    }
+
+    swp-tab:hover {
+      color: var(--color-text);
+      background: var(--color-background-alt);
+    }
+
+    swp-tab.active {
+      color: var(--color-teal);
+      border-bottom-color: var(--color-teal);
+    }
+
+    /* ==========================================
+       TAB CONTENT
+       ========================================== */
+    swp-tab-content {
+      display: none;
+      padding: 24px;
+      max-width: 1200px;
+      margin: 0 auto;
+    }
+
+    swp-tab-content.active {
+      display: block;
+    }
+
+    /* ==========================================
+       LAYOUT GRID
+       ========================================== */
+    .grid-2 {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 24px;
+    }
+
+    .grid-4 {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 16px;
+    }
+
+    @media (max-width: 900px) {
+      .grid-2 {
+        grid-template-columns: 1fr;
+      }
+      .grid-4 {
+        grid-template-columns: repeat(2, 1fr);
+      }
+    }
+
+    /* ==========================================
+       CARDS
+       ========================================== */
+    swp-card {
+      display: block;
+      background: var(--color-surface);
+      border-radius: 8px;
+      padding: 20px;
+      border: 1px solid var(--color-border);
+      margin-bottom: 16px;
+    }
+
+    swp-card:last-child {
+      margin-bottom: 0;
+    }
+
+    /* Section Label */
+    swp-section-label {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 16px;
+    }
+
+    /* ==========================================
+       STAT CARDS
+       ========================================== */
+    swp-stat-card {
+      background: var(--color-surface);
+      border-radius: 8px;
+      padding: 20px;
+      text-align: center;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-stat-value {
+      display: block;
+      font-size: 28px;
+      font-weight: 600;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+    }
+
+    swp-stat-label {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+    }
+
+    swp-stat-card.highlight swp-stat-value {
+      color: var(--color-teal);
+    }
+
+    /* ==========================================
+       EDIT SECTION
+       ========================================== */
+    swp-edit-section {
+      display: flex;
+      flex-direction: column;
+      gap: 12px;
+    }
+
+    swp-edit-row {
+      display: grid;
+      grid-template-columns: 140px 1fr;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-edit-label {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-edit-value {
+      font-size: 14px;
+      padding: 8px 12px;
+      border-radius: 4px;
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      transition: all 150ms ease;
+      cursor: text;
+    }
+
+    swp-edit-value:hover {
+      background: var(--color-background);
+    }
+
+    swp-edit-value:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    swp-edit-value[contenteditable="true"] {
+      cursor: text;
+    }
+
+    /* Select dropdown styling */
+    swp-edit-select {
+      display: block;
+    }
+
+    swp-edit-select select {
+      width: 100%;
+      font-size: 14px;
+      font-family: inherit;
+      padding: 8px 12px;
+      border-radius: 4px;
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-edit-select select:hover {
+      background: var(--color-background);
+    }
+
+    swp-edit-select select:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    /* Textarea styling */
+    swp-edit-textarea {
+      display: block;
+      width: 100%;
+      min-height: 80px;
+      font-size: 14px;
+      font-family: inherit;
+      padding: 12px;
+      border-radius: 4px;
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      resize: vertical;
+      transition: all 150ms ease;
+    }
+
+    swp-edit-textarea:hover {
+      background: var(--color-background);
+    }
+
+    swp-edit-textarea:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    /* ==========================================
+       TOGGLE SLIDER (Ja/Nej)
+       ========================================== */
+    swp-toggle-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-toggle-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-toggle-label {
+      font-size: 14px;
+      color: var(--color-text);
+    }
+
+    swp-toggle-description {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-secondary);
+      margin-top: 2px;
+    }
+
+    swp-toggle-slider {
+      display: inline-flex;
+      width: fit-content;
+      background: var(--color-background);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      overflow: hidden;
+      position: relative;
+    }
+
+    swp-toggle-slider::before {
+      content: '';
+      position: absolute;
+      top: 2px;
+      left: 2px;
+      width: calc(50% - 4px);
+      height: calc(100% - 4px);
+      background: color-mix(in srgb, var(--color-green) 18%, white);
+      border-radius: 4px;
+      transition: transform 200ms ease, background 200ms ease;
+    }
+
+    swp-toggle-slider[data-value="no"]::before {
+      transform: translateX(100%);
+      background: color-mix(in srgb, var(--color-red) 18%, white);
+    }
+
+    swp-toggle-option {
+      position: relative;
+      z-index: 1;
+      padding: 5px 16px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: color 150ms ease;
+      user-select: none;
+    }
+
+    swp-toggle-slider[data-value="yes"] swp-toggle-option:first-child {
+      color: var(--color-green);
+      font-weight: 600;
+    }
+
+    swp-toggle-slider[data-value="no"] swp-toggle-option:last-child {
+      color: var(--color-red);
+      font-weight: 600;
+    }
+
+    /* ==========================================
+       PRICE MATRIX
+       ========================================== */
+    swp-price-matrix {
+      display: block;
+      overflow-x: auto;
+      margin-top: 16px;
+    }
+
+    swp-price-matrix table {
+      width: 100%;
+      border-collapse: collapse;
+      font-size: 14px;
+    }
+
+    swp-price-matrix th,
+    swp-price-matrix td {
+      padding: 12px 16px;
+      text-align: center;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-price-matrix th {
+      background: var(--color-background);
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      font-size: 12px;
+      text-transform: uppercase;
+      letter-spacing: 0.3px;
+    }
+
+    swp-price-matrix th:first-child,
+    swp-price-matrix td:first-child {
+      text-align: left;
+    }
+
+    swp-price-matrix td:first-child {
+      font-weight: 500;
+      background: var(--color-background-alt);
+    }
+
+    swp-price-matrix td span {
+      font-family: var(--font-mono);
+    }
+
+    swp-price-matrix td span[contenteditable="true"] {
+      display: inline-block;
+      min-width: 60px;
+      padding: 4px 8px;
+      border-radius: 4px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      cursor: text;
+    }
+
+    swp-price-matrix td span[contenteditable="true"]:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    /* Price mode toggle */
+    swp-price-mode {
+      display: flex;
+      gap: 8px;
+      margin-bottom: 16px;
+    }
+
+    swp-price-mode-btn {
+      padding: 8px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      background: var(--color-surface);
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-price-mode-btn.active {
+      background: var(--color-teal);
+      color: white;
+      border-color: var(--color-teal);
+    }
+
+    swp-price-mode-btn:hover:not(.active) {
+      background: var(--color-background);
+    }
+
+    /* Simple price view */
+    swp-price-simple {
+      display: block;
+      margin-top: 16px;
+    }
+
+    /* ==========================================
+       DURATION LIST
+       ========================================== */
+    swp-duration-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-duration-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 12px 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+    }
+
+    swp-duration-name {
+      flex: 1;
+      font-weight: 500;
+    }
+
+    swp-duration-value {
+      display: flex;
+      align-items: center;
+      gap: 6px;
+    }
+
+    swp-duration-value span {
+      font-family: var(--font-mono);
+      min-width: 40px;
+      padding: 4px 8px;
+      border-radius: 4px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      text-align: right;
+    }
+
+    swp-duration-value span[contenteditable="true"]:focus {
+      outline: none;
+      border-color: var(--color-teal);
+    }
+
+    swp-duration-unit {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-duration-delete {
+      padding: 4px 8px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      border-radius: 4px;
+      transition: all 150ms ease;
+    }
+
+    swp-duration-delete:hover {
+      color: var(--color-red);
+      background: color-mix(in srgb, var(--color-red) 10%, white);
+    }
+
+    /* ==========================================
+       EMPLOYEE LIST
+       ========================================== */
+    swp-employee-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-employee-item {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      cursor: pointer;
+      transition: border-color 0.15s ease;
+    }
+
+    swp-employee-item:hover {
+      border-color: var(--color-teal);
+    }
+
+    swp-employee-item.selected {
+      border-color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 5%, var(--color-background-alt));
+    }
+
+    swp-employee-item.disabled {
+      opacity: 0.5;
+      pointer-events: none;
+    }
+
+    swp-employee-checkbox {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--color-border);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: all 0.15s ease;
+    }
+
+    swp-employee-item.selected swp-employee-checkbox {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+      color: white;
+    }
+
+    swp-employee-checkbox svg {
+      width: 14px;
+      height: 14px;
+      fill: currentColor;
+      opacity: 0;
+    }
+
+    swp-employee-item.selected swp-employee-checkbox svg {
+      opacity: 1;
+    }
+
+    swp-employee-avatar {
+      width: 44px;
+      height: 44px;
+      border-radius: 50%;
+      background: linear-gradient(135deg, var(--color-teal) 0%, #00695c 100%);
+      color: white;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-weight: 600;
+      font-size: 14px;
+      flex-shrink: 0;
+    }
+
+    swp-employee-info {
+      flex: 1;
+      min-width: 0;
+    }
+
+    swp-employee-name {
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-employee-info {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+    }
+
+    swp-employee-level {
+      display: inline-flex;
+      font-size: 11px;
+      font-weight: 500;
+      padding: 3px 8px;
+      border-radius: 4px;
+      background: var(--color-background);
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+    }
+
+    swp-employee-overrides {
+      display: flex;
+      gap: 16px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-employee-override-value {
+      color: var(--color-text);
+      font-weight: 500;
+    }
+
+    swp-employee-warning {
+      display: inline-flex;
+      align-items: center;
+      gap: 4px;
+      font-size: 10px;
+      font-weight: 500;
+      color: #b8860b;
+      background: color-mix(in srgb, var(--color-amber) 20%, white);
+      padding: 3px 8px;
+      border-radius: 10px;
+      margin-left: 8px;
+    }
+
+    /* ==========================================
+       ADDON LIST
+       ========================================== */
+    swp-addon-list {
+      display: flex;
+      flex-direction: column;
+      gap: 8px;
+    }
+
+    swp-addon-item {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      padding: 16px;
+      background: var(--color-background-alt);
+      border-radius: 6px;
+      border: 1px solid var(--color-border);
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-addon-item:hover {
+      background: var(--color-background);
+    }
+
+    swp-addon-item.selected {
+      border-color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 5%, white);
+    }
+
+    swp-addon-checkbox {
+      width: 20px;
+      height: 20px;
+      border: 2px solid var(--color-border);
+      border-radius: 4px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      flex-shrink: 0;
+      transition: all 150ms ease;
+    }
+
+    swp-addon-item.selected swp-addon-checkbox {
+      background: var(--color-teal);
+      border-color: var(--color-teal);
+      color: white;
+    }
+
+    swp-addon-checkbox svg {
+      width: 14px;
+      height: 14px;
+      fill: currentColor;
+      opacity: 0;
+    }
+
+    swp-addon-item.selected swp-addon-checkbox svg {
+      opacity: 1;
+    }
+
+    swp-addon-info {
+      flex: 1;
+    }
+
+    swp-addon-name {
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-addon-meta {
+      display: flex;
+      gap: 12px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      margin-top: 4px;
+    }
+
+    swp-addon-price {
+      color: var(--color-teal);
+      font-weight: 500;
+      font-family: var(--font-mono);
+    }
+
+    swp-addon-type {
+      display: inline-block;
+      padding: 2px 8px;
+      background: color-mix(in srgb, var(--color-blue) 12%, white);
+      color: var(--color-blue);
+      border-radius: 10px;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+    }
+
+    swp-addon-type.required {
+      background: color-mix(in srgb, var(--color-amber) 15%, white);
+      color: #b8860b;
+    }
+
+    /* ==========================================
+       AVAILABILITY LIST
+       ========================================== */
+    swp-availability-list {
+      display: flex;
+      flex-direction: column;
+    }
+
+    swp-availability-row {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: center;
+      gap: 8px 16px;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-availability-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-availability-row[data-enabled="false"] {
+      opacity: 0.5;
+    }
+
+    swp-availability-day {
+      width: 100%;
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-availability-time {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+    }
+
+    swp-time-range {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    swp-time-range-slider {
+      position: relative;
+      flex: 1;
+      height: 20px;
+      display: flex;
+      align-items: center;
+    }
+
+    swp-time-range-track {
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      background: var(--color-border);
+      border-radius: 2px;
+    }
+
+    swp-time-range-fill {
+      position: absolute;
+      height: 4px;
+      background: var(--color-teal);
+      border-radius: 2px;
+      cursor: grab;
+    }
+
+    swp-time-range-fill:active {
+      cursor: grabbing;
+    }
+
+    swp-time-range-fill.disabled {
+      pointer-events: none;
+      cursor: default;
+    }
+
+    swp-time-range-slider input[type="range"] {
+      position: absolute;
+      width: 100%;
+      height: 4px;
+      -webkit-appearance: none;
+      appearance: none;
+      background: transparent;
+      pointer-events: none;
+      margin: 0;
+    }
+
+    swp-time-range-slider input[type="range"]::-webkit-slider-thumb {
+      -webkit-appearance: none;
+      appearance: none;
+      width: 14px;
+      height: 14px;
+      background: var(--color-teal);
+      border: 2px solid white;
+      border-radius: 50%;
+      cursor: pointer;
+      pointer-events: auto;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    }
+
+    swp-time-range-slider input[type="range"]::-moz-range-thumb {
+      width: 14px;
+      height: 14px;
+      background: var(--color-teal);
+      border: 2px solid white;
+      border-radius: 50%;
+      cursor: pointer;
+      pointer-events: auto;
+      box-shadow: 0 1px 3px rgba(0,0,0,0.2);
+    }
+
+    swp-time-range-label {
+      font-size: 12px;
+      font-family: var(--font-mono);
+      color: var(--color-text);
+      min-width: 90px;
+      text-align: center;
+      background: var(--color-background-alt);
+      padding: 3px 8px;
+      border-radius: 4px;
+    }
+
+    swp-availability-row[data-enabled="false"] swp-time-range-slider input[type="range"]::-webkit-slider-thumb {
+      background: var(--color-text-secondary);
+    }
+
+    swp-availability-row[data-enabled="false"] swp-time-range-fill {
+      background: var(--color-text-secondary);
+    }
+
+    swp-availability-row[data-enabled="false"] swp-time-range-label {
+      opacity: 0.5;
+    }
+
+    /* ==========================================
+       COLOR DROPDOWN (Popover)
+       ========================================== */
+    swp-color-dropdown {
+      position: relative;
+    }
+
+    swp-color-dropdown button {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 12px;
+      font-size: 14px;
+      font-family: inherit;
+      border-radius: 4px;
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      cursor: pointer;
+      transition: all 150ms ease;
+      min-width: 160px;
+      anchor-name: --color-trigger;
+    }
+
+    swp-color-dropdown button:hover {
+      background: var(--color-background);
+    }
+
+    swp-color-dropdown button .color-name {
+      flex: 1;
+      text-align: left;
+    }
+
+    swp-color-dropdown button .chevron {
+      opacity: 0.5;
+    }
+
+    swp-color-dropdown [popover] {
+      position: absolute;
+      position-anchor: --color-trigger;
+      top: anchor(bottom);
+      left: anchor(left);
+      margin: 4px 0 0 0;
+      padding: 6px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+      min-width: 180px;
+      max-height: 280px;
+      overflow-y: auto;
+    }
+
+    swp-color-dropdown [popover]:popover-open {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-color-option {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background 150ms ease;
+      font-size: 13px;
+    }
+
+    swp-color-option:hover {
+      background: var(--color-background);
+    }
+
+    swp-color-option.selected {
+      background: color-mix(in srgb, var(--color-teal) 12%, white);
+      font-weight: 500;
+    }
+
+    swp-color-dot {
+      width: 18px;
+      height: 12px;
+      border-radius: 3px;
+      flex-shrink: 0;
+    }
+
+    /* ==========================================
+       CUSTOM DROPDOWN (Popover)
+       ========================================== */
+    swp-custom-dropdown {
+      position: relative;
+    }
+
+    swp-custom-dropdown button {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      padding: 8px 12px;
+      font-size: 14px;
+      font-family: inherit;
+      border-radius: 4px;
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      cursor: pointer;
+      transition: all 150ms ease;
+      min-width: 180px;
+      text-align: left;
+      anchor-name: --dropdown-trigger;
+    }
+
+    swp-custom-dropdown button:hover {
+      background: var(--color-background);
+    }
+
+    swp-custom-dropdown button .dropdown-value {
+      flex: 1;
+    }
+
+    swp-custom-dropdown button .chevron {
+      opacity: 0.5;
+    }
+
+    swp-custom-dropdown [popover] {
+      position: absolute;
+      position-anchor: --dropdown-trigger;
+      top: anchor(bottom);
+      left: anchor(left);
+      margin: 4px 0 0 0;
+      padding: 6px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 8px;
+      box-shadow: 0 4px 16px rgba(0,0,0,0.12);
+      min-width: 180px;
+      max-height: 280px;
+      overflow-y: auto;
+    }
+
+    swp-custom-dropdown [popover]:popover-open {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-dropdown-option {
+      display: flex;
+      align-items: center;
+      padding: 8px 12px;
+      border-radius: 4px;
+      cursor: pointer;
+      transition: background 150ms ease;
+      font-size: 13px;
+    }
+
+    swp-dropdown-option:hover {
+      background: var(--color-background);
+    }
+
+    swp-dropdown-option.selected {
+      background: color-mix(in srgb, var(--color-teal) 12%, white);
+      font-weight: 500;
+      color: var(--color-teal);
+    }
+
+    /* Color classes */
+    swp-color-dot.is-red { background: var(--b-color-red); }
+    swp-color-dot.is-pink { background: var(--b-color-pink); }
+    swp-color-dot.is-magenta { background: var(--b-color-magenta); }
+    swp-color-dot.is-purple { background: var(--b-color-purple); }
+    swp-color-dot.is-violet { background: var(--b-color-violet); }
+    swp-color-dot.is-deep-purple { background: var(--b-color-deep-purple); }
+    swp-color-dot.is-indigo { background: var(--b-color-indigo); }
+    swp-color-dot.is-blue { background: var(--b-color-blue); }
+    swp-color-dot.is-light-blue { background: var(--b-color-light-blue); }
+    swp-color-dot.is-cyan { background: var(--b-color-cyan); }
+    swp-color-dot.is-teal { background: var(--b-color-teal); }
+    swp-color-dot.is-green { background: var(--b-color-green); }
+    swp-color-dot.is-light-green { background: var(--b-color-light-green); }
+    swp-color-dot.is-lime { background: var(--b-color-lime); }
+    swp-color-dot.is-yellow { background: var(--b-color-yellow); }
+    swp-color-dot.is-amber { background: var(--b-color-amber); }
+    swp-color-dot.is-orange { background: var(--b-color-orange); }
+    swp-color-dot.is-deep-orange { background: var(--b-color-deep-orange); }
+
+    /* ==========================================
+       ADD BUTTON
+       ========================================== */
+    swp-add-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 8px;
+      padding: 12px;
+      border: 2px dashed var(--color-border);
+      border-radius: 6px;
+      color: var(--color-text-secondary);
+      font-size: 13px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      margin-top: 12px;
+    }
+
+    swp-add-button:hover {
+      border-color: var(--color-teal);
+      color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 5%, white);
+    }
+
+    /* ==========================================
+       SEE ALL LINK
+       ========================================== */
+    swp-see-all {
+      display: block;
+      text-align: center;
+      padding: 12px;
+      font-size: 13px;
+      color: var(--color-teal);
+      cursor: pointer;
+      margin-top: 12px;
+      border-top: 1px solid var(--color-border);
+    }
+
+    swp-see-all:hover {
+      text-decoration: underline;
+    }
+  </style>
+</head>
+<body>
+
+<!-- Topbar -->
+<swp-topbar>
+  <swp-topbar-left>
+    <swp-back-link>
+      <svg viewBox="0 0 24 24"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>
+      Tilbage til services
+    </swp-back-link>
+    <swp-topbar-title>Service detaljer</swp-topbar-title>
+  </swp-topbar-left>
+  <swp-topbar-actions>
+    <swp-btn class="secondary">Duplikér</swp-btn>
+    <swp-btn class="primary">Gem ændringer</swp-btn>
+  </swp-topbar-actions>
+</swp-topbar>
+
+<!-- Service Header -->
+<swp-service-header>
+  <swp-service-info>
+    <swp-service-name-row>
+      <swp-service-name contenteditable="true">Klip & Farve</swp-service-name>
+      <swp-tags-editor>
+        <swp-tag class="popular">Populær</swp-tag>
+        <swp-tag class="combo">Kombi</swp-tag>
+        <swp-tag class="color">Farve</swp-tag>
+        <swp-tag-add>+ Tilføj tag</swp-tag-add>
+      </swp-tags-editor>
+      <swp-service-status data-active="true" id="serviceStatus">
+        <span class="icon">●</span>
+        <span class="text">Aktiv</span>
+      </swp-service-status>
+    </swp-service-name-row>
+    <swp-fact-boxes-inline>
+      <swp-fact-inline>
+        <swp-fact-inline-value>60-120</swp-fact-inline-value>
+        <swp-fact-inline-label>min varighed</swp-fact-inline-label>
+      </swp-fact-inline>
+      <swp-fact-inline>
+        <swp-fact-inline-value>795 kr</swp-fact-inline-value>
+        <swp-fact-inline-label>fra pris</swp-fact-inline-label>
+      </swp-fact-inline>
+      <swp-fact-inline>
+        <swp-fact-inline-value>4</swp-fact-inline-value>
+        <swp-fact-inline-label>medarbejdere</swp-fact-inline-label>
+      </swp-fact-inline>
+      <swp-fact-inline>
+        <swp-fact-inline-value>156</swp-fact-inline-value>
+        <swp-fact-inline-label>bookinger i år</swp-fact-inline-label>
+      </swp-fact-inline>
+    </swp-fact-boxes-inline>
+  </swp-service-info>
+</swp-service-header>
+
+<!-- Tab Bar -->
+<swp-tab-bar>
+  <swp-tab class="active" data-tab="general">Generelt</swp-tab>
+  <swp-tab data-tab="prices">Priser</swp-tab>
+  <swp-tab data-tab="duration">Varighed</swp-tab>
+  <swp-tab data-tab="employees">Medarbejdere</swp-tab>
+  <swp-tab data-tab="addons">Tilvalg</swp-tab>
+  <swp-tab data-tab="rules">Regler</swp-tab>
+</swp-tab-bar>
+
+<!-- ==========================================
+     GENERELT TAB
+     ========================================== -->
+<swp-tab-content class="active" data-tab="general">
+  <div class="grid-2">
+    <div>
+      <swp-card>
+        <swp-section-label>Grundlæggende</swp-section-label>
+        <swp-edit-section>
+          <swp-edit-row>
+            <swp-edit-label>Servicenavn</swp-edit-label>
+            <swp-edit-value contenteditable="true">Klip & Farve</swp-edit-value>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Kategori</swp-edit-label>
+            <swp-custom-dropdown>
+              <button type="button" popovertarget="categoryPopover" id="categoryTrigger">
+                <span class="dropdown-value">Kombi-behandlinger</span>
+                <svg class="chevron" viewBox="0 0 24 24" width="16" height="16"><path d="M7 10l5 5 5-5z" fill="currentColor"/></svg>
+              </button>
+              <div popover id="categoryPopover">
+                <swp-dropdown-option class="selected" data-value="kombi">Kombi-behandlinger</swp-dropdown-option>
+                <swp-dropdown-option data-value="klip">Klip</swp-dropdown-option>
+                <swp-dropdown-option data-value="farve">Farve</swp-dropdown-option>
+                <swp-dropdown-option data-value="behandlinger">Behandlinger</swp-dropdown-option>
+                <swp-dropdown-option data-value="styling">Styling</swp-dropdown-option>
+              </div>
+            </swp-custom-dropdown>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Farve i kalenderen</swp-edit-label>
+            <swp-color-dropdown>
+              <button type="button" popovertarget="colorPopover" id="colorTrigger">
+                <swp-color-dot class="is-deep-orange"></swp-color-dot>
+                <span class="color-name">Orange</span>
+                <svg class="chevron" viewBox="0 0 24 24" width="16" height="16"><path d="M7 10l5 5 5-5z" fill="currentColor"/></svg>
+              </button>
+              <div popover id="colorPopover">
+                <swp-color-option data-value="red" data-label="Rød"><swp-color-dot class="is-red"></swp-color-dot><span>Rød</span></swp-color-option>
+                <swp-color-option data-value="pink" data-label="Pink"><swp-color-dot class="is-pink"></swp-color-dot><span>Pink</span></swp-color-option>
+                <swp-color-option data-value="magenta" data-label="Magenta"><swp-color-dot class="is-magenta"></swp-color-dot><span>Magenta</span></swp-color-option>
+                <swp-color-option data-value="purple" data-label="Lilla"><swp-color-dot class="is-purple"></swp-color-dot><span>Lilla</span></swp-color-option>
+                <swp-color-option data-value="violet" data-label="Violet"><swp-color-dot class="is-violet"></swp-color-dot><span>Violet</span></swp-color-option>
+                <swp-color-option data-value="deep-purple" data-label="Mørk lilla"><swp-color-dot class="is-deep-purple"></swp-color-dot><span>Mørk lilla</span></swp-color-option>
+                <swp-color-option data-value="indigo" data-label="Indigo"><swp-color-dot class="is-indigo"></swp-color-dot><span>Indigo</span></swp-color-option>
+                <swp-color-option data-value="blue" data-label="Blå"><swp-color-dot class="is-blue"></swp-color-dot><span>Blå</span></swp-color-option>
+                <swp-color-option data-value="light-blue" data-label="Lyseblå"><swp-color-dot class="is-light-blue"></swp-color-dot><span>Lyseblå</span></swp-color-option>
+                <swp-color-option data-value="cyan" data-label="Cyan"><swp-color-dot class="is-cyan"></swp-color-dot><span>Cyan</span></swp-color-option>
+                <swp-color-option data-value="teal" data-label="Teal" class="selected"><swp-color-dot class="is-teal"></swp-color-dot><span>Teal</span></swp-color-option>
+                <swp-color-option data-value="green" data-label="Grøn"><swp-color-dot class="is-green"></swp-color-dot><span>Grøn</span></swp-color-option>
+                <swp-color-option data-value="light-green" data-label="Lysegrøn"><swp-color-dot class="is-light-green"></swp-color-dot><span>Lysegrøn</span></swp-color-option>
+                <swp-color-option data-value="lime" data-label="Lime"><swp-color-dot class="is-lime"></swp-color-dot><span>Lime</span></swp-color-option>
+                <swp-color-option data-value="yellow" data-label="Gul"><swp-color-dot class="is-yellow"></swp-color-dot><span>Gul</span></swp-color-option>
+                <swp-color-option data-value="amber" data-label="Amber"><swp-color-dot class="is-amber"></swp-color-dot><span>Amber</span></swp-color-option>
+                <swp-color-option data-value="orange" data-label="Orange"><swp-color-dot class="is-orange"></swp-color-dot><span>Orange</span></swp-color-option>
+                <swp-color-option data-value="deep-orange" data-label="Mørk orange"><swp-color-dot class="is-deep-orange"></swp-color-dot><span>Mørk orange</span></swp-color-option>
+              </div>
+            </swp-color-dropdown>
+          </swp-edit-row>
+          <swp-edit-row>
+            <swp-edit-label>Service aktiv</swp-edit-label>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+          </swp-edit-row>
+        </swp-edit-section>
+
+        <swp-section-label style="margin-top: 20px;">Interne noter</swp-section-label>
+        <swp-edit-textarea contenteditable="true">Komplet farvebehandling med klip. Husk konsultation ved første besøg. Anbefal Olaplex til kemisk behandlet hår.</swp-edit-textarea>
+      </swp-card>
+
+      <swp-card>
+        <swp-section-label>Bookingtype</swp-section-label>
+        <swp-toggle-row>
+          <div>
+            <swp-toggle-label>Kan bookes som hovedservice</swp-toggle-label>
+            <swp-toggle-description>Vises i servicelisten og kan bookes selvstændigt</swp-toggle-description>
+          </div>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+        <swp-toggle-row>
+          <div>
+            <swp-toggle-label>Kan bookes som tilvalg</swp-toggle-label>
+            <swp-toggle-description>Kan tilføjes som ekstra ydelse til andre services</swp-toggle-description>
+          </div>
+          <swp-toggle-slider data-value="no">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+      </swp-card>
+    </div>
+
+    <div>
+      <swp-card>
+        <swp-section-label>Online booking</swp-section-label>
+        <swp-toggle-row>
+          <div>
+            <swp-toggle-label>Vis i online booking</swp-toggle-label>
+            <swp-toggle-description>Synlig for kunder i online booking</swp-toggle-description>
+          </div>
+          <swp-toggle-slider data-value="yes">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+        <swp-toggle-row>
+          <div>
+            <swp-toggle-label>Fremhævet service</swp-toggle-label>
+            <swp-toggle-description>Vises øverst med fremhævet styling</swp-toggle-description>
+          </div>
+          <swp-toggle-slider data-value="no">
+            <swp-toggle-option>Ja</swp-toggle-option>
+            <swp-toggle-option>Nej</swp-toggle-option>
+          </swp-toggle-slider>
+        </swp-toggle-row>
+
+        <swp-section-label style="margin-top: 20px;">Beskrivelse</swp-section-label>
+        <swp-edit-textarea contenteditable="true">Forkæl dig selv med en komplet forvandling! Vores Klip & Farve behandling inkluderer professionel farverådgivning, farvning tilpasset din hudtone, præcisionsklip og styling. Perfekt til dig der ønsker et helt nyt look.</swp-edit-textarea>
+
+        <swp-section-label style="margin-top: 20px;">Billede</swp-section-label>
+        <swp-add-button>+ Upload billede</swp-add-button>
+      </swp-card>
+
+    </div>
+  </div>
+</swp-tab-content>
+
+<!-- ==========================================
+     PRISER TAB
+     ========================================== -->
+<swp-tab-content data-tab="prices">
+  <swp-card>
+    <swp-section-label>Prisstruktur</swp-section-label>
+
+    <swp-price-mode>
+      <swp-price-mode-btn data-mode="simple">Simpel pris</swp-price-mode-btn>
+      <swp-price-mode-btn data-mode="matrix" class="active">Matrix-pris</swp-price-mode-btn>
+    </swp-price-mode>
+
+    <!-- Simpel pris visning -->
+    <swp-price-simple style="display: none;">
+      <swp-edit-section>
+        <swp-edit-row>
+          <swp-edit-label>Pris</swp-edit-label>
+          <swp-edit-value contenteditable="true">995 kr</swp-edit-value>
+        </swp-edit-row>
+      </swp-edit-section>
+    </swp-price-simple>
+
+    <!-- Matrix pris visning -->
+    <swp-price-matrix>
+      <table>
+        <thead>
+          <tr>
+            <th>Niveau</th>
+            <th>Kort hår</th>
+            <th>Mellem hår</th>
+            <th>Langt hår</th>
+            <th>Ekstra langt</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>Junior</td>
+            <td><span contenteditable="true">795</span> kr</td>
+            <td><span contenteditable="true">895</span> kr</td>
+            <td><span contenteditable="true">995</span> kr</td>
+            <td><span contenteditable="true">1.095</span> kr</td>
+          </tr>
+          <tr>
+            <td>Senior</td>
+            <td><span contenteditable="true">895</span> kr</td>
+            <td><span contenteditable="true">995</span> kr</td>
+            <td><span contenteditable="true">1.095</span> kr</td>
+            <td><span contenteditable="true">1.195</span> kr</td>
+          </tr>
+          <tr>
+            <td>Master</td>
+            <td><span contenteditable="true">995</span> kr</td>
+            <td><span contenteditable="true">1.095</span> kr</td>
+            <td><span contenteditable="true">1.195</span> kr</td>
+            <td><span contenteditable="true">1.295</span> kr</td>
+          </tr>
+        </tbody>
+      </table>
+
+      <swp-add-button>+ Tilføj niveau eller hårlængde</swp-add-button>
+    </swp-price-matrix>
+  </swp-card>
+
+  <div class="grid-2">
+    <swp-card>
+      <swp-section-label>Økonomi</swp-section-label>
+      <swp-edit-section>
+        <swp-edit-row>
+          <swp-edit-label>Momssats</swp-edit-label>
+          <swp-edit-select>
+            <select>
+              <option selected>25% (standard)</option>
+              <option>0% (momsfri)</option>
+            </select>
+          </swp-edit-select>
+        </swp-edit-row>
+        <swp-edit-row>
+          <swp-edit-label>Produktomkostning</swp-edit-label>
+          <swp-edit-value contenteditable="true">85 kr</swp-edit-value>
+        </swp-edit-row>
+        <swp-edit-row>
+          <swp-edit-label>Provision</swp-edit-label>
+          <swp-edit-select>
+            <select>
+              <option selected>Standard (fra lønsats)</option>
+              <option>Fast beløb</option>
+              <option>Procent af pris</option>
+            </select>
+          </swp-edit-select>
+        </swp-edit-row>
+      </swp-edit-section>
+    </swp-card>
+
+    <swp-card>
+      <swp-section-label>Rabatter & Loyalitet</swp-section-label>
+      <swp-toggle-row>
+        <swp-toggle-label>Medlemsrabat (10%)</swp-toggle-label>
+        <swp-toggle-slider data-value="yes">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-toggle-row>
+      <swp-toggle-row>
+        <swp-toggle-label>Kan betales med gavekort</swp-toggle-label>
+        <swp-toggle-slider data-value="yes">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-toggle-row>
+      <swp-toggle-row>
+        <swp-toggle-label>Optjen loyalitetspoint</swp-toggle-label>
+        <swp-toggle-slider data-value="yes">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-toggle-row>
+    </swp-card>
+  </div>
+</swp-tab-content>
+
+<!-- ==========================================
+     VARIGHED TAB
+     ========================================== -->
+<swp-tab-content data-tab="duration">
+  <div class="grid-2">
+    <swp-card>
+      <swp-section-label>Varighedsvarianter</swp-section-label>
+
+      <swp-duration-list>
+        <swp-duration-item>
+          <swp-duration-name>Kort hår</swp-duration-name>
+          <swp-duration-value>
+            <span contenteditable="true">60</span>
+            <swp-duration-unit>min</swp-duration-unit>
+          </swp-duration-value>
+          <swp-duration-delete>✕</swp-duration-delete>
+        </swp-duration-item>
+
+        <swp-duration-item>
+          <swp-duration-name>Mellem hår</swp-duration-name>
+          <swp-duration-value>
+            <span contenteditable="true">90</span>
+            <swp-duration-unit>min</swp-duration-unit>
+          </swp-duration-value>
+          <swp-duration-delete>✕</swp-duration-delete>
+        </swp-duration-item>
+
+        <swp-duration-item>
+          <swp-duration-name>Langt hår</swp-duration-name>
+          <swp-duration-value>
+            <span contenteditable="true">120</span>
+            <swp-duration-unit>min</swp-duration-unit>
+          </swp-duration-value>
+          <swp-duration-delete>✕</swp-duration-delete>
+        </swp-duration-item>
+
+        <swp-duration-item>
+          <swp-duration-name>Ekstra langt hår</swp-duration-name>
+          <swp-duration-value>
+            <span contenteditable="true">150</span>
+            <swp-duration-unit>min</swp-duration-unit>
+          </swp-duration-value>
+          <swp-duration-delete>✕</swp-duration-delete>
+        </swp-duration-item>
+      </swp-duration-list>
+
+      <swp-add-button>+ Tilføj variant</swp-add-button>
+    </swp-card>
+
+    <swp-card>
+      <swp-section-label>Buffer-tider</swp-section-label>
+      <swp-edit-section>
+        <swp-edit-row>
+          <swp-edit-label>Buffer før aftale</swp-edit-label>
+          <swp-edit-select>
+            <select>
+              <option>Ingen</option>
+              <option>5 minutter</option>
+              <option>10 minutter</option>
+              <option selected>15 minutter</option>
+              <option>30 minutter</option>
+            </select>
+          </swp-edit-select>
+        </swp-edit-row>
+        <swp-edit-row>
+          <swp-edit-label>Buffer efter aftale</swp-edit-label>
+          <swp-edit-select>
+            <select>
+              <option>Ingen</option>
+              <option>5 minutter</option>
+              <option selected>10 minutter</option>
+              <option>15 minutter</option>
+              <option>30 minutter</option>
+            </select>
+          </swp-edit-select>
+        </swp-edit-row>
+        <swp-edit-row>
+          <swp-edit-label>Oprydningstid</swp-edit-label>
+          <swp-edit-select>
+            <select>
+              <option>Ingen</option>
+              <option selected>5 minutter</option>
+              <option>10 minutter</option>
+              <option>15 minutter</option>
+            </select>
+          </swp-edit-select>
+        </swp-edit-row>
+      </swp-edit-section>
+    </swp-card>
+  </div>
+</swp-tab-content>
+
+<!-- ==========================================
+     MEDARBEJDERE TAB
+     ========================================== -->
+<swp-tab-content data-tab="employees">
+  <div class="grid-2">
+    <div>
+      <swp-card>
+        <swp-section-label>Medarbejdere der udfører denne service</swp-section-label>
+
+        <swp-employee-list>
+          <swp-employee-item class="selected">
+            <swp-employee-checkbox>
+              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+            </swp-employee-checkbox>
+            <swp-employee-avatar>AS</swp-employee-avatar>
+            <swp-employee-info>
+              <swp-employee-name>Anna Sørensen</swp-employee-name>
+              <swp-employee-level data-level="master">Master Stylist</swp-employee-level>
+            </swp-employee-info>
+            <swp-employee-overrides>
+              <span>Varighed: <swp-employee-override-value>Standard</swp-employee-override-value></span>
+            </swp-employee-overrides>
+          </swp-employee-item>
+
+          <swp-employee-item class="selected">
+            <swp-employee-checkbox>
+              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+            </swp-employee-checkbox>
+            <swp-employee-avatar>MJ</swp-employee-avatar>
+            <swp-employee-info>
+              <swp-employee-name>Mette Jensen</swp-employee-name>
+              <swp-employee-level data-level="senior">Senior Stylist</swp-employee-level>
+            </swp-employee-info>
+            <swp-employee-overrides>
+              <span>Varighed: <swp-employee-override-value>+15 min</swp-employee-override-value></span>
+            </swp-employee-overrides>
+          </swp-employee-item>
+
+          <swp-employee-item class="selected">
+            <swp-employee-checkbox>
+              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+            </swp-employee-checkbox>
+            <swp-employee-avatar>LN</swp-employee-avatar>
+            <swp-employee-info>
+              <swp-employee-name>Louise Nielsen</swp-employee-name>
+              <swp-employee-level data-level="senior">Senior Stylist</swp-employee-level>
+            </swp-employee-info>
+            <swp-employee-overrides>
+              <span>Varighed: <swp-employee-override-value>Standard</swp-employee-override-value></span>
+            </swp-employee-overrides>
+          </swp-employee-item>
+
+          <swp-employee-item class="selected">
+            <swp-employee-checkbox>
+              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+            </swp-employee-checkbox>
+            <swp-employee-avatar>KP</swp-employee-avatar>
+            <swp-employee-info>
+              <swp-employee-name>Katrine Pedersen</swp-employee-name>
+              <swp-employee-level data-level="stylist">Stylist</swp-employee-level>
+            </swp-employee-info>
+            <swp-employee-overrides>
+              <span>Varighed: <swp-employee-override-value>+15 min</swp-employee-override-value></span>
+            </swp-employee-overrides>
+          </swp-employee-item>
+
+          <swp-employee-item class="disabled">
+            <swp-employee-checkbox>
+              <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+            </swp-employee-checkbox>
+            <swp-employee-avatar>SA</swp-employee-avatar>
+            <swp-employee-info>
+              <swp-employee-name>Sofie Andersen<swp-employee-warning>⚠ Ikke certificeret</swp-employee-warning></swp-employee-name>
+              <swp-employee-level data-level="junior">Junior Stylist</swp-employee-level>
+            </swp-employee-info>
+            <swp-employee-overrides>
+              <span>Varighed: <swp-employee-override-value>—</swp-employee-override-value></span>
+            </swp-employee-overrides>
+          </swp-employee-item>
+        </swp-employee-list>
+
+        <swp-see-all>Vælg alle / Fravælg alle</swp-see-all>
+      </swp-card>
+    </div>
+
+    <div>
+      <swp-card>
+        <swp-section-label>Tilgængelighed</swp-section-label>
+        <swp-availability-list>
+          <swp-availability-row data-enabled="true">
+            <swp-availability-day>Mandag</swp-availability-day>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-availability-time>
+              <swp-time-range>
+                <swp-time-range-slider>
+                  <swp-time-range-track></swp-time-range-track>
+                  <swp-time-range-fill></swp-time-range-fill>
+                  <input type="range" class="range-start" min="0" max="60" value="8" step="1">
+                  <input type="range" class="range-end" min="0" max="60" value="48" step="1">
+                </swp-time-range-slider>
+                <swp-time-range-label>08:00 – 18:00</swp-time-range-label>
+              </swp-time-range>
+            </swp-availability-time>
+          </swp-availability-row>
+          <swp-availability-row data-enabled="true">
+            <swp-availability-day>Tirsdag</swp-availability-day>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-availability-time>
+              <swp-time-range>
+                <swp-time-range-slider>
+                  <swp-time-range-track></swp-time-range-track>
+                  <swp-time-range-fill></swp-time-range-fill>
+                  <input type="range" class="range-start" min="0" max="60" value="8" step="1">
+                  <input type="range" class="range-end" min="0" max="60" value="48" step="1">
+                </swp-time-range-slider>
+                <swp-time-range-label>08:00 – 18:00</swp-time-range-label>
+              </swp-time-range>
+            </swp-availability-time>
+          </swp-availability-row>
+          <swp-availability-row data-enabled="true">
+            <swp-availability-day>Onsdag</swp-availability-day>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-availability-time>
+              <swp-time-range>
+                <swp-time-range-slider>
+                  <swp-time-range-track></swp-time-range-track>
+                  <swp-time-range-fill></swp-time-range-fill>
+                  <input type="range" class="range-start" min="0" max="60" value="8" step="1">
+                  <input type="range" class="range-end" min="0" max="60" value="48" step="1">
+                </swp-time-range-slider>
+                <swp-time-range-label>08:00 – 18:00</swp-time-range-label>
+              </swp-time-range>
+            </swp-availability-time>
+          </swp-availability-row>
+          <swp-availability-row data-enabled="true">
+            <swp-availability-day>Torsdag</swp-availability-day>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-availability-time>
+              <swp-time-range>
+                <swp-time-range-slider>
+                  <swp-time-range-track></swp-time-range-track>
+                  <swp-time-range-fill></swp-time-range-fill>
+                  <input type="range" class="range-start" min="0" max="60" value="8" step="1">
+                  <input type="range" class="range-end" min="0" max="60" value="24" step="1">
+                </swp-time-range-slider>
+                <swp-time-range-label>08:00 – 12:00</swp-time-range-label>
+              </swp-time-range>
+            </swp-availability-time>
+          </swp-availability-row>
+          <swp-availability-row data-enabled="true">
+            <swp-availability-day>Fredag</swp-availability-day>
+            <swp-toggle-slider data-value="yes">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-availability-time>
+              <swp-time-range>
+                <swp-time-range-slider>
+                  <swp-time-range-track></swp-time-range-track>
+                  <swp-time-range-fill></swp-time-range-fill>
+                  <input type="range" class="range-start" min="0" max="60" value="8" step="1">
+                  <input type="range" class="range-end" min="0" max="60" value="48" step="1">
+                </swp-time-range-slider>
+                <swp-time-range-label>08:00 – 18:00</swp-time-range-label>
+              </swp-time-range>
+            </swp-availability-time>
+          </swp-availability-row>
+          <swp-availability-row data-enabled="false">
+            <swp-availability-day>Lørdag</swp-availability-day>
+            <swp-toggle-slider data-value="no">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-availability-time>
+              <swp-time-range>
+                <swp-time-range-slider>
+                  <swp-time-range-track></swp-time-range-track>
+                  <swp-time-range-fill></swp-time-range-fill>
+                  <input type="range" class="range-start" min="0" max="60" value="8" step="1" disabled>
+                  <input type="range" class="range-end" min="0" max="60" value="48" step="1" disabled>
+                </swp-time-range-slider>
+                <swp-time-range-label>08:00 – 18:00</swp-time-range-label>
+              </swp-time-range>
+            </swp-availability-time>
+          </swp-availability-row>
+          <swp-availability-row data-enabled="false">
+            <swp-availability-day>Søndag</swp-availability-day>
+            <swp-toggle-slider data-value="no">
+              <swp-toggle-option>Ja</swp-toggle-option>
+              <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+            <swp-availability-time>
+              <swp-time-range>
+                <swp-time-range-slider>
+                  <swp-time-range-track></swp-time-range-track>
+                  <swp-time-range-fill></swp-time-range-fill>
+                  <input type="range" class="range-start" min="0" max="60" value="8" step="1" disabled>
+                  <input type="range" class="range-end" min="0" max="60" value="48" step="1" disabled>
+                </swp-time-range-slider>
+                <swp-time-range-label>08:00 – 18:00</swp-time-range-label>
+              </swp-time-range>
+            </swp-availability-time>
+          </swp-availability-row>
+        </swp-availability-list>
+      </swp-card>
+    </div>
+  </div>
+</swp-tab-content>
+
+<!-- ==========================================
+     TILVALG TAB
+     ========================================== -->
+<swp-tab-content data-tab="addons">
+  <swp-card>
+    <swp-section-label>Tilvalg til denne service</swp-section-label>
+
+    <swp-addon-list>
+      <swp-addon-item class="selected">
+        <swp-addon-checkbox>
+          <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+        </swp-addon-checkbox>
+        <swp-addon-info>
+          <swp-addon-name>Olaplex Behandling</swp-addon-name>
+          <swp-addon-meta>
+            <swp-addon-price>+250 kr</swp-addon-price>
+            <span>+15 min</span>
+            <swp-addon-type>Valgfri</swp-addon-type>
+          </swp-addon-meta>
+        </swp-addon-info>
+      </swp-addon-item>
+
+      <swp-addon-item class="selected">
+        <swp-addon-checkbox>
+          <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+        </swp-addon-checkbox>
+        <swp-addon-info>
+          <swp-addon-name>Kerastase Hårkur</swp-addon-name>
+          <swp-addon-meta>
+            <swp-addon-price>+195 kr</swp-addon-price>
+            <span>+10 min</span>
+            <swp-addon-type>Valgfri</swp-addon-type>
+          </swp-addon-meta>
+        </swp-addon-info>
+      </swp-addon-item>
+
+      <swp-addon-item class="selected">
+        <swp-addon-checkbox>
+          <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+        </swp-addon-checkbox>
+        <swp-addon-info>
+          <swp-addon-name>Styling / Curls</swp-addon-name>
+          <swp-addon-meta>
+            <swp-addon-price>+150 kr</swp-addon-price>
+            <span>+20 min</span>
+            <swp-addon-type>Valgfri</swp-addon-type>
+          </swp-addon-meta>
+        </swp-addon-info>
+      </swp-addon-item>
+
+      <swp-addon-item class="selected">
+        <swp-addon-checkbox>
+          <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+        </swp-addon-checkbox>
+        <swp-addon-info>
+          <swp-addon-name>Hovedbundsmassage</swp-addon-name>
+          <swp-addon-meta>
+            <swp-addon-price>+75 kr</swp-addon-price>
+            <span>+5 min</span>
+            <swp-addon-type>Valgfri</swp-addon-type>
+          </swp-addon-meta>
+        </swp-addon-info>
+      </swp-addon-item>
+
+      <swp-addon-item>
+        <swp-addon-checkbox>
+          <svg viewBox="0 0 24 24"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>
+        </swp-addon-checkbox>
+        <swp-addon-info>
+          <swp-addon-name>Patch Test</swp-addon-name>
+          <swp-addon-meta>
+            <swp-addon-price>Gratis</swp-addon-price>
+            <span>48t før</span>
+            <swp-addon-type class="required">Påkrævet (nye)</swp-addon-type>
+          </swp-addon-meta>
+        </swp-addon-info>
+      </swp-addon-item>
+    </swp-addon-list>
+
+    <swp-add-button>+ Tilføj eksisterende tilvalg</swp-add-button>
+  </swp-card>
+</swp-tab-content>
+
+<!-- ==========================================
+     REGLER TAB
+     ========================================== -->
+<swp-tab-content data-tab="rules">
+  <div class="grid-2">
+    <swp-card>
+      <swp-section-label>Booking-regler</swp-section-label>
+      <swp-edit-section>
+        <swp-edit-row>
+          <swp-edit-label>Minimum varsel</swp-edit-label>
+          <swp-edit-select>
+            <select>
+              <option>Ingen</option>
+              <option>2 timer</option>
+              <option>4 timer</option>
+              <option selected>24 timer</option>
+              <option>48 timer</option>
+              <option>1 uge</option>
+            </select>
+          </swp-edit-select>
+        </swp-edit-row>
+        <swp-edit-row>
+          <swp-edit-label>Maks. forudbooking</swp-edit-label>
+          <swp-edit-select>
+            <select>
+              <option>1 måned</option>
+              <option>2 måneder</option>
+              <option selected>3 måneder</option>
+              <option>6 måneder</option>
+              <option>1 år</option>
+            </select>
+          </swp-edit-select>
+        </swp-edit-row>
+        <swp-edit-row>
+          <swp-edit-label>Afbestillingsfrist</swp-edit-label>
+          <swp-edit-select>
+            <select>
+              <option>Ingen</option>
+              <option>2 timer</option>
+              <option>4 timer</option>
+              <option selected>24 timer</option>
+              <option>48 timer</option>
+            </select>
+          </swp-edit-select>
+        </swp-edit-row>
+        <swp-edit-row>
+          <swp-edit-label>No-show gebyr</swp-edit-label>
+          <swp-edit-select>
+            <select>
+              <option>Intet</option>
+              <option>25% af pris</option>
+              <option selected>50% af pris</option>
+              <option>Fuld pris</option>
+              <option>Fast beløb</option>
+            </select>
+          </swp-edit-select>
+        </swp-edit-row>
+      </swp-edit-section>
+    </swp-card>
+
+    <swp-card>
+      <swp-section-label>Krav & Forberedelse</swp-section-label>
+      <swp-toggle-row>
+        <div>
+          <swp-toggle-label>Konsultation påkrævet</swp-toggle-label>
+          <swp-toggle-description>Kunde skal have konsultation før første booking</swp-toggle-description>
+        </div>
+        <swp-toggle-slider data-value="no">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-toggle-row>
+      <swp-toggle-row>
+        <div>
+          <swp-toggle-label>Patch test påkrævet</swp-toggle-label>
+          <swp-toggle-description>Allergitest 48 timer før farvebehandling (nye kunder)</swp-toggle-description>
+        </div>
+        <swp-toggle-slider data-value="yes">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-toggle-row>
+      <swp-toggle-row>
+        <div>
+          <swp-toggle-label>Aldersbegrænsning</swp-toggle-label>
+          <swp-toggle-description>Minimum alder for booking af denne service</swp-toggle-description>
+        </div>
+        <swp-toggle-slider data-value="no">
+          <swp-toggle-option>Ja</swp-toggle-option>
+          <swp-toggle-option>Nej</swp-toggle-option>
+        </swp-toggle-slider>
+      </swp-toggle-row>
+      
+    </swp-card>
+  </div>
+
+  <swp-card>
+    <swp-section-label>Online booking indstillinger</swp-section-label>
+    <swp-toggle-row>
+      <swp-toggle-label>Vis i online booking</swp-toggle-label>
+      <swp-toggle-slider data-value="yes">
+        <swp-toggle-option>Ja</swp-toggle-option>
+        <swp-toggle-option>Nej</swp-toggle-option>
+      </swp-toggle-slider>
+    </swp-toggle-row>
+    <swp-toggle-row>
+      <swp-toggle-label>Tillad valg af medarbejder</swp-toggle-label>
+      <swp-toggle-slider data-value="yes">
+        <swp-toggle-option>Ja</swp-toggle-option>
+        <swp-toggle-option>Nej</swp-toggle-option>
+      </swp-toggle-slider>
+    </swp-toggle-row>
+    <swp-toggle-row>
+      <swp-toggle-label>Vis pris</swp-toggle-label>
+      <swp-toggle-slider data-value="yes">
+        <swp-toggle-option>Ja</swp-toggle-option>
+        <swp-toggle-option>Nej</swp-toggle-option>
+      </swp-toggle-slider>
+    </swp-toggle-row>
+    <swp-toggle-row>
+      <swp-toggle-label>Vis varighed</swp-toggle-label>
+      <swp-toggle-slider data-value="yes">
+        <swp-toggle-option>Ja</swp-toggle-option>
+        <swp-toggle-option>Nej</swp-toggle-option>
+      </swp-toggle-slider>
+    </swp-toggle-row>
+  </swp-card>
+
+</swp-tab-content>
+
+<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');
+        }
+      });
+    });
+  });
+
+  // ==========================================
+  // TIME RANGE SLIDERS
+  // ==========================================
+  function valueToTime(value) {
+    // value 0-60 represents 06:00-21:00 in 15-min intervals
+    const totalMinutes = (value * 15) + (6 * 60); // Add 6 hour offset
+    const hours = Math.floor(totalMinutes / 60);
+    const minutes = totalMinutes % 60;
+    return `${hours.toString().padStart(2, '0')}:${minutes.toString().padStart(2, '0')}`;
+  }
+
+  const TIME_RANGE_MAX = 60; // 15 hours (06:00-21:00) * 4 intervals
+
+  function updateTimeRange(slider) {
+    const startInput = slider.querySelector('.range-start');
+    const endInput = slider.querySelector('.range-end');
+    const fill = slider.querySelector('swp-time-range-fill');
+    const label = slider.closest('swp-time-range').querySelector('swp-time-range-label');
+
+    let startVal = parseInt(startInput.value);
+    let endVal = parseInt(endInput.value);
+
+    // Ensure start doesn't exceed end
+    if (startVal > endVal) {
+      if (startInput === document.activeElement) {
+        startInput.value = endVal;
+        startVal = endVal;
+      } else {
+        endInput.value = startVal;
+        endVal = startVal;
+      }
+    }
+
+    // Update fill bar position
+    const startPercent = (startVal / TIME_RANGE_MAX) * 100;
+    const endPercent = (endVal / TIME_RANGE_MAX) * 100;
+    fill.style.left = startPercent + '%';
+    fill.style.width = (endPercent - startPercent) + '%';
+
+    // Update label
+    label.textContent = valueToTime(startVal) + ' – ' + valueToTime(endVal);
+  }
+
+  document.querySelectorAll('swp-time-range-slider').forEach(slider => {
+    const startInput = slider.querySelector('.range-start');
+    const endInput = slider.querySelector('.range-end');
+    const fill = slider.querySelector('swp-time-range-fill');
+    const track = slider.querySelector('swp-time-range-track');
+
+    // Initialize
+    updateTimeRange(slider);
+
+    startInput.addEventListener('input', () => updateTimeRange(slider));
+    endInput.addEventListener('input', () => updateTimeRange(slider));
+
+    // Drag fill bar to move entire range
+    let isDragging = false;
+    let dragStartX = 0;
+    let dragStartValues = { start: 0, end: 0 };
+
+    fill.addEventListener('mousedown', (e) => {
+      if (startInput.disabled) return;
+      isDragging = true;
+      dragStartX = e.clientX;
+      dragStartValues.start = parseInt(startInput.value);
+      dragStartValues.end = parseInt(endInput.value);
+      e.preventDefault();
+    });
+
+    document.addEventListener('mousemove', (e) => {
+      if (!isDragging) return;
+
+      const sliderWidth = track.offsetWidth;
+      const deltaX = e.clientX - dragStartX;
+      const deltaValue = Math.round((deltaX / sliderWidth) * TIME_RANGE_MAX);
+
+      const duration = dragStartValues.end - dragStartValues.start;
+      let newStart = dragStartValues.start + deltaValue;
+      let newEnd = dragStartValues.end + deltaValue;
+
+      // Clamp to bounds
+      if (newStart < 0) {
+        newStart = 0;
+        newEnd = duration;
+      }
+      if (newEnd > TIME_RANGE_MAX) {
+        newEnd = TIME_RANGE_MAX;
+        newStart = TIME_RANGE_MAX - duration;
+      }
+
+      startInput.value = newStart;
+      endInput.value = newEnd;
+      updateTimeRange(slider);
+    });
+
+    document.addEventListener('mouseup', () => {
+      isDragging = false;
+    });
+  });
+
+  // ==========================================
+  // TOGGLE SLIDERS (Ja/Nej)
+  // ==========================================
+  document.querySelectorAll('swp-toggle-slider').forEach(slider => {
+    const options = slider.querySelectorAll('swp-toggle-option');
+    options.forEach((option, index) => {
+      option.addEventListener('click', () => {
+        const newValue = index === 0 ? 'yes' : 'no';
+        slider.dataset.value = newValue;
+
+        // Handle availability row toggle
+        const availabilityRow = slider.closest('swp-availability-row');
+        if (availabilityRow) {
+          const isEnabled = newValue === 'yes';
+          availabilityRow.dataset.enabled = isEnabled;
+          const rangeInputs = availabilityRow.querySelectorAll('input[type="range"]');
+          rangeInputs.forEach(input => {
+            input.disabled = !isEnabled;
+          });
+          const fill = availabilityRow.querySelector('swp-time-range-fill');
+          if (fill) {
+            fill.classList.toggle('disabled', !isEnabled);
+          }
+        }
+      });
+    });
+  });
+
+  // ==========================================
+  // ADDON ITEMS
+  // ==========================================
+  document.querySelectorAll('swp-addon-item').forEach(item => {
+    item.addEventListener('click', () => {
+      item.classList.toggle('selected');
+    });
+  });
+
+  // ==========================================
+  // EMPLOYEE ITEMS
+  // ==========================================
+  document.querySelectorAll('swp-employee-item:not(.disabled)').forEach(item => {
+    item.addEventListener('click', () => {
+      item.classList.toggle('selected');
+    });
+  });
+
+  // ==========================================
+  // COLOR DROPDOWN
+  // ==========================================
+  const colorPopover = document.getElementById('colorPopover');
+  const colorTrigger = document.getElementById('colorTrigger');
+
+  if (colorPopover) {
+    colorPopover.querySelectorAll('swp-color-option').forEach(option => {
+      option.addEventListener('click', () => {
+        const value = option.dataset.value;
+        const label = option.dataset.label;
+
+        // Update selected state
+        colorPopover.querySelectorAll('swp-color-option').forEach(o => o.classList.remove('selected'));
+        option.classList.add('selected');
+
+        // Update trigger button
+        const triggerDot = colorTrigger.querySelector('swp-color-dot');
+        const triggerName = colorTrigger.querySelector('.color-name');
+        triggerDot.className = `is-${value}`;
+        triggerName.textContent = label;
+
+        // Close popover
+        colorPopover.hidePopover();
+      });
+    });
+  }
+
+  // ==========================================
+  // CATEGORY DROPDOWN
+  // ==========================================
+  const categoryPopover = document.getElementById('categoryPopover');
+  const categoryTrigger = document.getElementById('categoryTrigger');
+
+  if (categoryPopover) {
+    categoryPopover.querySelectorAll('swp-dropdown-option').forEach(option => {
+      option.addEventListener('click', () => {
+        const label = option.textContent;
+
+        // Update selected state
+        categoryPopover.querySelectorAll('swp-dropdown-option').forEach(o => o.classList.remove('selected'));
+        option.classList.add('selected');
+
+        // Update trigger button
+        categoryTrigger.querySelector('.dropdown-value').textContent = label;
+
+        // Close popover
+        categoryPopover.hidePopover();
+      });
+    });
+  }
+
+  // ==========================================
+  // PRICE MODE TOGGLE
+  // ==========================================
+  document.querySelectorAll('swp-price-mode-btn').forEach(btn => {
+    btn.addEventListener('click', () => {
+      document.querySelectorAll('swp-price-mode-btn').forEach(b => b.classList.remove('active'));
+      btn.classList.add('active');
+
+      const mode = btn.dataset.mode;
+      const simpleView = document.querySelector('swp-price-simple');
+      const matrixView = document.querySelector('swp-price-matrix');
+
+      if (mode === 'simple') {
+        simpleView.style.display = 'block';
+        matrixView.style.display = 'none';
+      } else {
+        simpleView.style.display = 'none';
+        matrixView.style.display = 'block';
+      }
+    });
+  });
+
+  // ==========================================
+  // DURATION DELETE
+  // ==========================================
+  document.querySelectorAll('swp-duration-delete').forEach(btn => {
+    btn.addEventListener('click', () => {
+      const item = btn.closest('swp-duration-item');
+      if (item) {
+        item.style.opacity = '0';
+        item.style.transform = 'translateX(20px)';
+        setTimeout(() => item.remove(), 200);
+      }
+    });
+  });
+
+  // ==========================================
+  // TAG REMOVE
+  // ==========================================
+  document.querySelectorAll('swp-tag .remove').forEach(btn => {
+    btn.addEventListener('click', (e) => {
+      e.stopPropagation();
+      const tag = btn.closest('swp-tag');
+      if (tag) tag.remove();
+    });
+  });
+
+  // ==========================================
+  // SERVICE STATUS TOGGLE
+  // ==========================================
+  const serviceStatus = document.getElementById('serviceStatus');
+  if (serviceStatus) {
+    serviceStatus.addEventListener('click', () => {
+      const isActive = serviceStatus.dataset.active === 'true';
+      serviceStatus.dataset.active = isActive ? 'false' : 'true';
+      serviceStatus.querySelector('.icon').textContent = isActive ? '○' : '●';
+      serviceStatus.querySelector('.text').textContent = isActive ? 'Inaktiv' : 'Aktiv';
+    });
+  }
+</script>
+
+</body>
+</html>
diff --git a/.workbench/POC/poc-website-builder.html b/.workbench/POC/poc-website-builder.html
new file mode 100644
index 0000000..5fd5fdd
--- /dev/null
+++ b/.workbench/POC/poc-website-builder.html
@@ -0,0 +1,3633 @@
+<!DOCTYPE html>
+<html lang="da">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Website Builder - Salon OS</title>
+  <link href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@phosphor-icons/web@2.1.2/src/regular/style.css" />
+  <style>
+    /* ==========================================
+       FONT FACE (Poppins)
+       ========================================== */
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Regular.woff') format('woff');
+      font-weight: 400;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Medium.woff') format('woff');
+      font-weight: 500;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-SemiBold.woff') format('woff');
+      font-weight: 600;
+      font-style: normal;
+      font-display: swap;
+    }
+    @font-face {
+      font-family: 'Poppins';
+      src: url('fonts/Poppins-Bold.woff') format('woff');
+      font-weight: 700;
+      font-style: normal;
+      font-display: swap;
+    }
+
+    /* ==========================================
+       CSS VARIABLES
+       ========================================== */
+    :root {
+      --color-surface: #fff;
+      --color-background: #f5f5f5;
+      --color-background-hover: #f0f0f0;
+      --color-background-alt: #fafafa;
+      --color-border: #e0e0e0;
+      --color-text: #333;
+      --color-text-secondary: #666;
+      --color-text-muted: #999;
+      --color-teal: #00897b;
+      --color-blue: #1976d2;
+      --color-red: #e53935;
+      --color-amber: #f59e0b;
+      --color-purple: #8b5cf6;
+      --color-green: #43a047;
+      --font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+      --font-mono: 'JetBrains Mono', monospace;
+
+      /* Builder specific */
+      --builder-topbar-height: 56px;
+      --builder-library-width: 280px;
+      --builder-settings-width: 320px;
+
+      /* Theme variables (user customizable) */
+      --theme-primary: #00897b;
+      --theme-secondary: #333333;
+      --theme-accent: #f59e0b;
+      --theme-font: 'Poppins', sans-serif;
+    }
+
+    /* ==========================================
+       RESET & BASE
+       ========================================== */
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    body {
+      font-family: var(--font-family);
+      font-size: 14px;
+      color: var(--color-text);
+      background: var(--color-background);
+      line-height: 1.5;
+      overflow: hidden;
+    }
+
+    /* ==========================================
+       BUILDER LAYOUT
+       ========================================== */
+    swp-website-builder {
+      display: grid;
+      grid-template-rows: var(--builder-topbar-height) 1fr;
+      height: 100vh;
+      overflow: hidden;
+    }
+
+    /* ==========================================
+       TOPBAR
+       ========================================== */
+    swp-builder-topbar {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 0 16px;
+      background: var(--color-surface);
+      border-bottom: 1px solid var(--color-border);
+      z-index: 100;
+    }
+
+    swp-topbar-left {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+
+    swp-topbar-brand {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    swp-topbar-brand i {
+      font-size: 24px;
+      color: var(--color-teal);
+    }
+
+    swp-page-selector {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 8px 12px;
+      background: var(--color-background);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: background 150ms ease;
+    }
+
+    swp-page-selector:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-page-selector select {
+      border: none;
+      background: transparent;
+      font-family: var(--font-family);
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text);
+      cursor: pointer;
+      outline: none;
+    }
+
+    swp-topbar-center {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+    }
+
+    swp-viewport-toggle {
+      display: flex;
+      align-items: center;
+      background: var(--color-background);
+      border-radius: 6px;
+      overflow: hidden;
+    }
+
+    swp-viewport-btn {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 36px;
+      height: 32px;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-viewport-btn:hover {
+      background: var(--color-background-hover);
+      color: var(--color-text);
+    }
+
+    swp-viewport-btn.active {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-viewport-btn i {
+      font-size: 18px;
+    }
+
+    swp-topbar-right {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    swp-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 6px;
+      padding: 8px 16px;
+      font-family: var(--font-family);
+      font-size: 13px;
+      font-weight: 500;
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+      border: none;
+    }
+
+    swp-btn i {
+      font-size: 16px;
+    }
+
+    swp-btn.secondary {
+      background: var(--color-background);
+      color: var(--color-text);
+    }
+
+    swp-btn.secondary:hover {
+      background: var(--color-background-hover);
+    }
+
+    swp-btn.primary {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    swp-btn.primary:hover {
+      background: #00796b;
+    }
+
+    /* ==========================================
+       WORKSPACE (3-column layout)
+       ========================================== */
+    swp-builder-workspace {
+      display: grid;
+      grid-template-columns: var(--builder-library-width) 1fr var(--builder-settings-width);
+      height: calc(100vh - var(--builder-topbar-height));
+      overflow: hidden;
+    }
+
+    /* ==========================================
+       BLOCK LIBRARY (Left Panel)
+       ========================================== */
+    swp-block-library {
+      display: flex;
+      flex-direction: column;
+      background: var(--color-surface);
+      border-right: 1px solid var(--color-border);
+      overflow: hidden;
+    }
+
+    swp-library-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 16px;
+      font-size: 13px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-library-header i {
+      font-size: 16px;
+    }
+
+    swp-block-category {
+      display: block;
+      padding: 16px;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-category-title {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      color: var(--color-text-muted);
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      margin-bottom: 12px;
+    }
+
+    swp-block-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 8px;
+    }
+
+    swp-block-item {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 6px;
+      padding: 12px 8px;
+      background: var(--color-background);
+      border: 1px solid transparent;
+      border-radius: 8px;
+      cursor: grab;
+      transition: all 150ms ease;
+    }
+
+    swp-block-item:hover {
+      border-color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 8%, white);
+    }
+
+    swp-block-item.dragging {
+      opacity: 0.5;
+      cursor: grabbing;
+    }
+
+    swp-block-item i {
+      font-size: 24px;
+      color: var(--color-teal);
+    }
+
+    swp-block-item span {
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      text-align: center;
+    }
+
+    /* ==========================================
+       CANVAS (Center)
+       ========================================== */
+    swp-builder-canvas {
+      display: flex;
+      flex-direction: column;
+      background: var(--color-background);
+      overflow: hidden;
+    }
+
+    swp-canvas-container {
+      flex: 1;
+      overflow-y: auto;
+      padding: 24px;
+    }
+
+    swp-canvas-page {
+      display: flex;
+      flex-direction: column;
+      min-height: 100%;
+      background: var(--color-surface);
+      border-radius: 8px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.08);
+      overflow: hidden;
+      transition: max-width 300ms ease, font-family 200ms ease, color 200ms ease;
+      font-family: var(--theme-font, 'Poppins', sans-serif);
+      color: var(--theme-text, #333);
+
+      /* Override color variables for theme - makes all block styles use theme colors */
+      --color-text: var(--theme-text, #333);
+      --color-text-secondary: color-mix(in srgb, var(--theme-text, #333) 70%, transparent);
+    }
+
+    /* Responsive viewport simulation */
+    swp-builder-canvas[data-viewport="tablet"] swp-canvas-page {
+      max-width: 768px;
+      margin: 0 auto;
+    }
+
+    swp-builder-canvas[data-viewport="mobile"] swp-canvas-page {
+      max-width: 375px;
+      margin: 0 auto;
+    }
+
+    /* Empty state */
+    swp-canvas-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      padding: 60px 40px;
+      text-align: center;
+      color: var(--color-text-muted);
+    }
+
+    swp-canvas-empty i {
+      font-size: 48px;
+      margin-bottom: 16px;
+      opacity: 0.5;
+    }
+
+    swp-canvas-empty h3 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text-secondary);
+      margin-bottom: 8px;
+    }
+
+    swp-canvas-empty p {
+      font-size: 13px;
+      max-width: 280px;
+    }
+
+    /* Block wrapper */
+    swp-block-wrapper {
+      position: relative;
+      transition: box-shadow 150ms ease;
+    }
+
+    swp-block-wrapper:hover {
+      box-shadow: inset 0 0 0 2px var(--color-teal);
+    }
+
+    swp-block-wrapper[data-selected="true"] {
+      box-shadow: inset 0 0 0 2px var(--color-teal);
+    }
+
+    swp-block-wrapper[data-selected="true"]::before {
+      content: attr(data-block-type);
+      position: absolute;
+      top: 0;
+      left: 0;
+      padding: 4px 8px;
+      background: var(--color-teal);
+      color: white;
+      font-size: 10px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      z-index: 10;
+    }
+
+    /* Block controls */
+    swp-block-controls {
+      position: absolute;
+      top: 8px;
+      right: 8px;
+      display: flex;
+      gap: 4px;
+      opacity: 0;
+      transition: opacity 150ms ease;
+      z-index: 10;
+    }
+
+    swp-block-wrapper:hover swp-block-controls,
+    swp-block-wrapper[data-selected="true"] swp-block-controls {
+      opacity: 1;
+    }
+
+    swp-block-controls button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 28px;
+      height: 28px;
+      background: var(--color-surface);
+      border: 1px solid var(--color-border);
+      border-radius: 4px;
+      cursor: pointer;
+      color: var(--color-text-secondary);
+      transition: all 150ms ease;
+    }
+
+    swp-block-controls button:hover {
+      background: var(--color-background);
+      color: var(--color-text);
+    }
+
+    swp-block-controls button.delete:hover {
+      background: var(--color-red);
+      border-color: var(--color-red);
+      color: white;
+    }
+
+    /* Drop indicator */
+    swp-drop-indicator {
+      display: none;
+      height: 4px;
+      background: var(--color-teal);
+      border-radius: 2px;
+      margin: 8px 16px;
+      animation: pulse 1s infinite;
+    }
+
+    swp-drop-indicator.visible {
+      display: block;
+    }
+
+    @keyframes pulse {
+      0%, 100% { opacity: 0.5; }
+      50% { opacity: 1; }
+    }
+
+    /* ==========================================
+       SETTINGS PANEL (Right)
+       ========================================== */
+    swp-settings-panel {
+      display: flex;
+      flex-direction: column;
+      background: var(--color-surface);
+      border-left: 1px solid var(--color-border);
+      overflow: hidden;
+    }
+
+    swp-settings-header {
+      display: flex;
+      align-items: center;
+      gap: 8px;
+      padding: 16px;
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-settings-header i {
+      font-size: 18px;
+      color: var(--color-teal);
+    }
+
+    swp-settings-tabs {
+      display: flex;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-settings-tab {
+      flex: 1;
+      padding: 12px 16px;
+      font-size: 13px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      text-align: center;
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      transition: all 150ms ease;
+    }
+
+    swp-settings-tab:hover {
+      color: var(--color-text);
+      background: var(--color-background-alt);
+    }
+
+    swp-settings-tab.active {
+      color: var(--color-teal);
+      border-bottom-color: var(--color-teal);
+    }
+
+    swp-settings-content {
+      flex: 1;
+      overflow-y: auto;
+      padding: 16px;
+    }
+
+    swp-settings-empty {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      text-align: center;
+      color: var(--color-text-muted);
+      padding: 24px;
+    }
+
+    swp-settings-empty i {
+      font-size: 32px;
+      margin-bottom: 12px;
+      opacity: 0.5;
+    }
+
+    swp-settings-empty p {
+      font-size: 13px;
+    }
+
+    /* ==========================================
+       EDIT SECTION (Established UI Pattern)
+       ========================================== */
+    swp-edit-section {
+      display: flex;
+      flex-direction: column;
+      gap: 0;
+    }
+
+    swp-edit-row {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-edit-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-edit-label {
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+    }
+
+    .swp-edit-value,
+    input.swp-edit-value,
+    swp-edit-section input[type="text"],
+    swp-edit-section input[type="url"],
+    swp-edit-section input[type="email"] {
+      width: 100%;
+      font-size: 14px;
+      padding: 8px 12px;
+      border-radius: 4px;
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      transition: all 150ms ease;
+      font-family: var(--font-family);
+      color: var(--color-text);
+    }
+
+    .swp-edit-value:hover,
+    swp-edit-section input[type="text"]:hover,
+    swp-edit-section input[type="url"]:hover,
+    swp-edit-section input[type="email"]:hover {
+      background: var(--color-background);
+    }
+
+    .swp-edit-value:focus,
+    swp-edit-section input[type="text"]:focus,
+    swp-edit-section input[type="url"]:focus,
+    swp-edit-section input[type="email"]:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    /* Edit Select */
+    swp-edit-select {
+      display: block;
+    }
+
+    swp-edit-select select,
+    swp-edit-section select {
+      width: 100%;
+      font-size: 14px;
+      font-family: inherit;
+      padding: 8px 12px;
+      border-radius: 4px;
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      cursor: pointer;
+      transition: all 150ms ease;
+      color: var(--color-text);
+    }
+
+    swp-edit-select select:hover,
+    swp-edit-section select:hover {
+      background: var(--color-background);
+    }
+
+    swp-edit-select select:focus,
+    swp-edit-section select:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    /* Textarea */
+    .swp-edit-textarea,
+    textarea.swp-edit-textarea,
+    swp-edit-section textarea {
+      display: block;
+      width: 100%;
+      padding: 10px 12px;
+      font-size: 14px;
+      font-family: var(--font-family);
+      color: var(--color-text);
+      background: var(--color-background-alt);
+      border: 1px solid transparent;
+      border-radius: 4px;
+      resize: vertical;
+      min-height: 80px;
+      transition: all 150ms ease;
+    }
+
+    .swp-edit-textarea:hover,
+    swp-edit-section textarea:hover {
+      background: var(--color-background);
+    }
+
+    .swp-edit-textarea:focus,
+    swp-edit-section textarea:focus {
+      outline: none;
+      background: var(--color-surface);
+      border-color: var(--color-teal);
+    }
+
+    /* Color picker */
+    swp-color-picker-row {
+      display: flex;
+      align-items: center;
+      gap: 10px;
+    }
+
+    swp-color-picker-row input[type="color"] {
+      width: 40px;
+      height: 40px;
+      border: none;
+      padding: 0;
+      cursor: pointer;
+      background: none;
+    }
+
+    swp-color-picker-row input[type="color"]::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+
+    swp-color-picker-row input[type="color"]::-webkit-color-swatch {
+      border: 2px solid var(--color-border);
+      border-radius: 6px;
+    }
+
+    swp-color-picker-row span {
+      font-size: 13px;
+      font-family: var(--font-mono);
+      color: var(--color-text-secondary);
+    }
+
+    /* Toggle Slider */
+    swp-toggle-row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    swp-toggle-row:last-child {
+      border-bottom: none;
+    }
+
+    swp-toggle-info {
+      display: flex;
+      flex-direction: column;
+      gap: 2px;
+    }
+
+    swp-toggle-label {
+      font-size: 14px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    swp-toggle-desc {
+      font-size: 12px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Button Style Picker */
+    swp-button-style-picker {
+      display: flex;
+      gap: 8px;
+    }
+
+    swp-button-style-option {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 60px;
+      height: 36px;
+      background: var(--color-background-alt);
+      border: 2px solid var(--color-border);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-button-style-option:hover {
+      border-color: var(--color-teal);
+    }
+
+    swp-button-style-option.active {
+      border-color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 10%, white);
+    }
+
+    swp-button-style-option span {
+      display: block;
+      width: 40px;
+      height: 20px;
+      background: var(--color-teal);
+    }
+
+    swp-button-style-option[data-style="rounded"] span {
+      border-radius: 4px;
+    }
+
+    swp-button-style-option[data-style="pill"] span {
+      border-radius: 10px;
+    }
+
+    swp-button-style-option[data-style="square"] span {
+      border-radius: 0;
+    }
+
+    /* Spacing Picker */
+    swp-spacing-picker {
+      display: flex;
+      gap: 8px;
+    }
+
+    swp-spacing-option {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 4px;
+      padding: 10px 8px;
+      background: var(--color-background-alt);
+      border: 2px solid var(--color-border);
+      border-radius: 6px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-spacing-option:hover {
+      border-color: var(--color-teal);
+    }
+
+    swp-spacing-option.active {
+      border-color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 10%, white);
+    }
+
+    swp-spacing-option i {
+      font-size: 18px;
+      color: var(--color-text-secondary);
+    }
+
+    swp-spacing-option span {
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+    }
+
+    swp-spacing-option.active i,
+    swp-spacing-option.active span {
+      color: var(--color-teal);
+    }
+
+    /* Section Title in Settings */
+    swp-section-title {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-muted);
+      margin-bottom: 12px;
+      padding-top: 8px;
+    }
+
+    swp-section-title:first-child {
+      padding-top: 0;
+    }
+
+    /* Info hint in settings */
+    swp-settings-hint {
+      display: block;
+      font-size: 12px;
+      color: var(--color-text-muted);
+      margin-top: 8px;
+      padding: 8px 10px;
+      background: var(--color-background-alt);
+      border-radius: 4px;
+    }
+
+    swp-settings-hint i {
+      margin-right: 6px;
+    }
+
+    /* Color Scheme Picker */
+    swp-color-schemes {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 10px;
+      margin-bottom: 16px;
+    }
+
+    swp-color-scheme {
+      display: flex;
+      flex-direction: column;
+      gap: 6px;
+      padding: 10px;
+      background: var(--color-background-alt);
+      border: 2px solid var(--color-border);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-color-scheme:hover {
+      border-color: var(--color-teal);
+    }
+
+    swp-color-scheme.active {
+      border-color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 8%, white);
+    }
+
+    swp-color-scheme-colors {
+      display: flex;
+      gap: 4px;
+      height: 24px;
+    }
+
+    swp-color-scheme-colors span {
+      flex: 1;
+      border-radius: 4px;
+    }
+
+    swp-color-scheme-colors span:first-child {
+      border-radius: 4px 0 0 4px;
+    }
+
+    swp-color-scheme-colors span:last-child {
+      border-radius: 0 4px 4px 0;
+    }
+
+    swp-color-scheme-name {
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      text-align: center;
+    }
+
+    /* Library Tabs */
+    swp-library-tabs {
+      display: flex;
+      border-bottom: 1px solid var(--color-border);
+      margin-bottom: 0;
+    }
+
+    swp-library-tab {
+      flex: 1;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 6px;
+      padding: 12px 8px;
+      font-size: 12px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+      cursor: pointer;
+      border-bottom: 2px solid transparent;
+      margin-bottom: -1px;
+      transition: all 150ms ease;
+    }
+
+    swp-library-tab i {
+      font-size: 16px;
+    }
+
+    swp-library-tab:hover {
+      color: var(--color-text);
+      background: var(--color-background-alt);
+    }
+
+    swp-library-tab.active {
+      color: var(--color-teal);
+      border-bottom-color: var(--color-teal);
+    }
+
+    swp-library-content {
+      display: none;
+      overflow-y: auto;
+      flex: 1;
+    }
+
+    swp-library-content.active {
+      display: flex;
+      flex-direction: column;
+    }
+
+    swp-library-content[data-content="design"] {
+      padding: 16px;
+    }
+
+    /* Font Cards */
+    swp-font-cards {
+      display: flex;
+      flex-direction: column;
+      gap: 10px;
+    }
+
+    swp-font-card {
+      display: flex;
+      flex-direction: column;
+      padding: 12px;
+      background: var(--color-background-alt);
+      border: 2px solid var(--color-border);
+      border-radius: 8px;
+      cursor: pointer;
+      transition: all 150ms ease;
+    }
+
+    swp-font-card:hover {
+      border-color: var(--color-teal);
+    }
+
+    swp-font-card.active {
+      border-color: var(--color-teal);
+      background: color-mix(in srgb, var(--color-teal) 8%, white);
+    }
+
+    swp-font-card-preview {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 4px;
+      line-height: 1.3;
+    }
+
+    swp-font-card-name {
+      font-size: 11px;
+      font-weight: 500;
+      color: var(--color-text-secondary);
+    }
+
+    swp-font-card[data-font="Poppins"] swp-font-card-preview {
+      font-family: 'Poppins', sans-serif;
+    }
+
+    swp-font-card[data-font="Playfair Display"] swp-font-card-preview {
+      font-family: 'Playfair Display', serif;
+    }
+
+    swp-font-card[data-font="Inter"] swp-font-card-preview {
+      font-family: 'Inter', sans-serif;
+    }
+
+    swp-font-card[data-font="Montserrat"] swp-font-card-preview {
+      font-family: 'Montserrat', sans-serif;
+    }
+
+    /* Design Section Title */
+    swp-design-section-title {
+      display: block;
+      font-size: 11px;
+      font-weight: 600;
+      text-transform: uppercase;
+      letter-spacing: 0.5px;
+      color: var(--color-text-muted);
+      margin-bottom: 10px;
+      margin-top: 20px;
+    }
+
+    swp-design-section-title:first-of-type {
+      margin-top: 0;
+    }
+
+    /* ==========================================
+       BLOCK STYLES (Preview)
+       ========================================== */
+
+    /* Hero Block */
+    .block-hero {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      min-height: 400px;
+      padding: calc(60px * var(--theme-spacing, 1)) 40px;
+      background-size: cover;
+      background-position: center;
+      color: white;
+      text-align: center;
+    }
+
+    .block-hero::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: rgba(0,0,0,0.4);
+    }
+
+    .block-hero-content {
+      position: relative;
+      z-index: 1;
+      max-width: 600px;
+    }
+
+    .block-hero h1 {
+      font-size: 42px;
+      font-weight: 700;
+      margin-bottom: 16px;
+      line-height: 1.2;
+    }
+
+    .block-hero p {
+      font-size: 18px;
+      opacity: 0.9;
+      margin-bottom: 24px;
+    }
+
+    .block-hero-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 14px 28px;
+      background: var(--theme-primary);
+      color: white;
+      font-size: 15px;
+      font-weight: 600;
+      text-decoration: none;
+      border-radius: var(--theme-button-radius, 8px);
+      transition: background 150ms ease;
+    }
+
+    .block-hero-btn:hover {
+      background: color-mix(in srgb, var(--theme-primary) 85%, black);
+    }
+
+    /* About Text Block */
+    .block-about {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 40px;
+      padding: calc(60px * var(--theme-spacing, 1)) 40px;
+      align-items: center;
+    }
+
+    .block-about.image-right {
+      direction: rtl;
+    }
+
+    .block-about.image-right > * {
+      direction: ltr;
+    }
+
+    .block-about-content h2 {
+      font-size: 32px;
+      font-weight: 700;
+      margin-bottom: 16px;
+      color: var(--color-text);
+    }
+
+    .block-about-content p {
+      font-size: 15px;
+      color: var(--color-text-secondary);
+      line-height: 1.7;
+    }
+
+    .block-about-image {
+      aspect-ratio: 4/3;
+      background: var(--color-background);
+      border-radius: 12px;
+      overflow: hidden;
+    }
+
+    .block-about-image img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .block-about-image-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      color: var(--color-text-muted);
+    }
+
+    .block-about-image-placeholder i {
+      font-size: 48px;
+    }
+
+    /* Spacer Block */
+    .block-spacer {
+      height: 60px;
+      background: repeating-linear-gradient(
+        45deg,
+        transparent,
+        transparent 10px,
+        var(--color-background) 10px,
+        var(--color-background) 20px
+      );
+      opacity: 0.5;
+    }
+
+    .block-spacer.small { height: 30px; }
+    .block-spacer.large { height: 100px; }
+
+    /* Services Grid Block */
+    .block-services {
+      padding: calc(60px * var(--theme-spacing, 1)) 40px;
+    }
+
+    .block-services-header {
+      text-align: center;
+      margin-bottom: 40px;
+    }
+
+    .block-services-header h2 {
+      font-size: 32px;
+      font-weight: 700;
+      color: var(--color-text);
+      margin-bottom: 8px;
+    }
+
+    .block-services-header p {
+      font-size: 15px;
+      color: var(--color-text-secondary);
+    }
+
+    .block-services-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 24px;
+    }
+
+    .block-service-card {
+      padding: 24px;
+      background: var(--color-background);
+      border-radius: 12px;
+      transition: transform 150ms ease, box-shadow 150ms ease;
+    }
+
+    .block-service-card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 8px 24px rgba(0,0,0,0.1);
+      background: var(--theme-accent-bg-light, #f59e0b1a);
+    }
+
+    .block-service-card h3 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 8px;
+    }
+
+    .block-service-card-meta {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      font-size: 13px;
+      color: var(--color-text-secondary);
+      margin-bottom: 12px;
+    }
+
+    .block-service-card-price {
+      font-size: 18px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--theme-primary);
+    }
+
+    /* Team Block */
+    .block-team {
+      padding: calc(60px * var(--theme-spacing, 1)) 40px;
+      background: var(--color-background);
+    }
+
+    .block-team-header {
+      text-align: center;
+      margin-bottom: 40px;
+    }
+
+    .block-team-header h2 {
+      font-size: 32px;
+      font-weight: 700;
+      color: var(--color-text);
+      margin-bottom: 8px;
+    }
+
+    .block-team-grid {
+      display: grid;
+      grid-template-columns: repeat(4, 1fr);
+      gap: 24px;
+    }
+
+    .block-team-card {
+      text-align: center;
+      padding: 24px;
+      background: var(--color-surface);
+      border-radius: 12px;
+      transition: background 150ms ease;
+    }
+
+    .block-team-card:hover {
+      background: var(--theme-accent-bg-lighter, #f59e0b14);
+    }
+
+    .block-team-avatar {
+      width: 100px;
+      height: 100px;
+      margin: 0 auto 16px;
+      border-radius: 50%;
+      background: var(--theme-primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      font-size: 32px;
+      font-weight: 600;
+      color: white;
+    }
+
+    .block-team-card h3 {
+      font-size: 16px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 4px;
+    }
+
+    .block-team-card p {
+      font-size: 13px;
+      color: var(--color-text-secondary);
+    }
+
+    /* Contact Block */
+    .block-contact {
+      padding: calc(60px * var(--theme-spacing, 1)) 40px;
+    }
+
+    .block-contact-grid {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      gap: 40px;
+    }
+
+    .block-contact-info h2 {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--color-text);
+      margin-bottom: 24px;
+    }
+
+    .block-contact-item {
+      display: flex;
+      align-items: flex-start;
+      gap: 12px;
+      margin-bottom: 20px;
+    }
+
+    .block-contact-item i {
+      font-size: 20px;
+      color: var(--theme-primary);
+      margin-top: 2px;
+    }
+
+    .block-contact-item-content h4 {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 2px;
+    }
+
+    .block-contact-item-content p {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+    }
+
+    .block-contact-map {
+      background: var(--color-background);
+      border-radius: 12px;
+      min-height: 300px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--color-text-muted);
+    }
+
+    /* Opening Hours Block */
+    .block-hours {
+      padding: calc(60px * var(--theme-spacing, 1)) 40px;
+      background: var(--color-background);
+    }
+
+    .block-hours h2 {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--color-text);
+      margin-bottom: 24px;
+      text-align: center;
+    }
+
+    .block-hours-list {
+      max-width: 400px;
+      margin: 0 auto;
+    }
+
+    .block-hours-row {
+      display: flex;
+      justify-content: space-between;
+      padding: 12px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .block-hours-row:last-child {
+      border-bottom: none;
+    }
+
+    .block-hours-day {
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    .block-hours-time {
+      font-family: var(--font-mono);
+      color: var(--color-text-secondary);
+    }
+
+    .block-hours-time.closed {
+      color: var(--color-red);
+    }
+
+    /* Booking Widget Block */
+    .block-booking {
+      padding: calc(60px * var(--theme-spacing, 1)) 40px;
+      text-align: center;
+      background: linear-gradient(135deg, var(--theme-primary) 0%, color-mix(in srgb, var(--theme-primary) 80%, black) 100%);
+      color: white;
+    }
+
+    .block-booking h2 {
+      font-size: 32px;
+      font-weight: 700;
+      margin-bottom: 12px;
+    }
+
+    .block-booking p {
+      font-size: 16px;
+      opacity: 0.9;
+      margin-bottom: 24px;
+    }
+
+    .block-booking-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 16px 32px;
+      background: white;
+      color: var(--theme-primary);
+      font-size: 16px;
+      font-weight: 600;
+      text-decoration: none;
+      border-radius: var(--theme-button-radius, 8px);
+      transition: transform 150ms ease;
+    }
+
+    .block-booking-btn:hover {
+      transform: scale(1.05);
+    }
+
+    /* ==========================================
+       COLUMNS BLOCK (CSS Grid)
+       ========================================== */
+    .block-columns {
+      display: grid;
+      gap: 24px;
+      padding: calc(40px * var(--theme-spacing, 1)) 40px;
+    }
+
+    .block-columns[data-cols="2"] {
+      grid-template-columns: 1fr 1fr;
+    }
+
+    .block-columns[data-cols="3"] {
+      grid-template-columns: 1fr 1fr 1fr;
+    }
+
+    .block-columns[data-cols="1-2"] {
+      grid-template-columns: 1fr 2fr;
+    }
+
+    .block-columns[data-cols="2-1"] {
+      grid-template-columns: 2fr 1fr;
+    }
+
+    .block-column {
+      padding: 24px;
+      background: var(--color-background-alt);
+      border-radius: 8px;
+      min-height: 120px;
+    }
+
+    .block-column h3 {
+      font-size: 20px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 12px;
+    }
+
+    .block-column p {
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      line-height: 1.6;
+    }
+
+    .block-column-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      min-height: 80px;
+      color: var(--color-text-muted);
+      font-size: 13px;
+      border: 2px dashed var(--color-border);
+      border-radius: 6px;
+    }
+
+    /* Divider Block */
+    .block-divider {
+      padding: 20px 40px;
+    }
+
+    .block-divider hr {
+      border: none;
+      height: 1px;
+      background: var(--color-border);
+    }
+
+    .block-divider.thick hr {
+      height: 3px;
+    }
+
+    .block-divider.dashed hr {
+      background: none;
+      border-top: 2px dashed var(--color-border);
+    }
+
+    /* Gallery Block */
+    .block-gallery {
+      padding: calc(60px * var(--theme-spacing, 1)) 40px;
+    }
+
+    .block-gallery-header {
+      text-align: center;
+      margin-bottom: 32px;
+    }
+
+    .block-gallery-header h2 {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--color-text);
+    }
+
+    .block-gallery-grid {
+      display: grid;
+      grid-template-columns: repeat(3, 1fr);
+      gap: 16px;
+    }
+
+    .block-gallery-item {
+      aspect-ratio: 1;
+      background: var(--color-background);
+      border-radius: 8px;
+      overflow: hidden;
+    }
+
+    .block-gallery-item img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+
+    .block-gallery-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      color: var(--color-text-muted);
+    }
+
+    .block-gallery-placeholder i {
+      font-size: 32px;
+    }
+
+    /* Testimonials Block */
+    .block-testimonials {
+      padding: calc(60px * var(--theme-spacing, 1)) 40px;
+      background: var(--color-background);
+    }
+
+    .block-testimonials-header {
+      text-align: center;
+      margin-bottom: 40px;
+    }
+
+    .block-testimonials-header h2 {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--color-text);
+    }
+
+    .block-testimonials-grid {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      gap: 24px;
+    }
+
+    .block-testimonial-card {
+      padding: 24px;
+      background: var(--color-surface);
+      border-radius: 12px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+    }
+
+    .block-testimonial-stars {
+      color: var(--theme-accent);
+      margin-bottom: 12px;
+    }
+
+    .block-testimonial-text {
+      font-size: 15px;
+      color: var(--color-text);
+      line-height: 1.6;
+      margin-bottom: 16px;
+      font-style: italic;
+    }
+
+    .block-testimonial-author {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+    }
+
+    .block-testimonial-avatar {
+      width: 40px;
+      height: 40px;
+      border-radius: 50%;
+      background: var(--theme-primary);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: white;
+      font-weight: 600;
+      font-size: 14px;
+    }
+
+    .block-testimonial-name {
+      font-size: 14px;
+      font-weight: 600;
+      color: var(--color-text);
+    }
+
+    /* CTA Banner Block */
+    .block-cta {
+      padding: calc(50px * var(--theme-spacing, 1)) 40px;
+      background: var(--theme-primary);
+      text-align: center;
+      color: white;
+    }
+
+    .block-cta h2 {
+      font-size: 28px;
+      font-weight: 700;
+      margin-bottom: 12px;
+    }
+
+    .block-cta p {
+      font-size: 16px;
+      opacity: 0.9;
+      margin-bottom: 20px;
+    }
+
+    .block-cta-btn {
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+      padding: 14px 28px;
+      background: white;
+      color: var(--theme-primary);
+      font-size: 15px;
+      font-weight: 600;
+      text-decoration: none;
+      border-radius: var(--theme-button-radius, 8px);
+      transition: transform 150ms ease;
+    }
+
+    .block-cta-btn:hover {
+      transform: scale(1.05);
+    }
+
+    /* Prices Block */
+    .block-prices {
+      padding: calc(60px * var(--theme-spacing, 1)) 40px;
+    }
+
+    .block-prices-header {
+      text-align: center;
+      margin-bottom: 40px;
+    }
+
+    .block-prices-header h2 {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--color-text);
+    }
+
+    .block-prices-list {
+      max-width: 600px;
+      margin: 0 auto;
+    }
+
+    .block-price-item {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 16px 0;
+      border-bottom: 1px solid var(--color-border);
+    }
+
+    .block-price-item:last-child {
+      border-bottom: none;
+    }
+
+    .block-price-name {
+      font-size: 15px;
+      font-weight: 500;
+      color: var(--color-text);
+    }
+
+    .block-price-value {
+      font-size: 16px;
+      font-weight: 700;
+      font-family: var(--font-mono);
+      color: var(--theme-primary);
+    }
+
+    /* FAQ Block */
+    .block-faq {
+      padding: calc(60px * var(--theme-spacing, 1)) 40px;
+      background: var(--color-background);
+    }
+
+    .block-faq-header {
+      text-align: center;
+      margin-bottom: 40px;
+    }
+
+    .block-faq-header h2 {
+      font-size: 28px;
+      font-weight: 700;
+      color: var(--color-text);
+    }
+
+    .block-faq-list {
+      max-width: 700px;
+      margin: 0 auto;
+    }
+
+    .block-faq-item {
+      background: var(--color-surface);
+      border-radius: 8px;
+      margin-bottom: 12px;
+      overflow: hidden;
+      border-left: 3px solid var(--theme-accent);
+    }
+
+    .block-faq-question {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 16px 20px;
+      font-size: 15px;
+      font-weight: 600;
+      color: var(--color-text);
+      cursor: pointer;
+    }
+
+    .block-faq-question i {
+      color: var(--color-text-secondary);
+    }
+
+    .block-faq-answer {
+      padding: 0 20px 16px;
+      font-size: 14px;
+      color: var(--color-text-secondary);
+      line-height: 1.6;
+    }
+
+    /* Map Block */
+    .block-map {
+      height: 400px;
+      background: var(--color-background);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+
+    .block-map-placeholder {
+      text-align: center;
+      color: var(--color-text-muted);
+    }
+
+    .block-map-placeholder i {
+      font-size: 64px;
+      margin-bottom: 16px;
+    }
+
+    .block-map-placeholder p {
+      font-size: 14px;
+    }
+
+    /* Social Block */
+    .block-social {
+      padding: calc(40px * var(--theme-spacing, 1)) 40px;
+      text-align: center;
+    }
+
+    .block-social h3 {
+      font-size: 18px;
+      font-weight: 600;
+      color: var(--color-text);
+      margin-bottom: 20px;
+    }
+
+    .block-social-links {
+      display: flex;
+      justify-content: center;
+      gap: 16px;
+      flex-wrap: wrap;
+    }
+
+    .block-social-link {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 48px;
+      height: 48px;
+      background: var(--theme-primary);
+      color: white;
+      border-radius: 50%;
+      font-size: 22px;
+      text-decoration: none;
+      transition: transform 150ms ease, background 150ms ease;
+    }
+
+    .block-social-link:hover {
+      transform: scale(1.1);
+      background: color-mix(in srgb, var(--theme-primary) 85%, black);
+    }
+
+    .block-social-link.style-outline {
+      background: transparent;
+      border: 2px solid var(--theme-primary);
+      color: var(--theme-primary);
+    }
+
+    .block-social-link.style-outline:hover {
+      background: var(--theme-primary);
+      color: white;
+    }
+
+    .block-social-link.style-square {
+      border-radius: 8px;
+    }
+
+  </style>
+</head>
+<body>
+  <swp-website-builder>
+    <!-- Topbar -->
+    <swp-builder-topbar>
+      <swp-topbar-left>
+        <swp-topbar-brand>
+          <i class="ph ph-browsers"></i>
+          Website Builder
+        </swp-topbar-brand>
+        <swp-page-selector>
+          <i class="ph ph-file-text"></i>
+          <select id="pageSelector">
+            <option value="home">Forside</option>
+            <option value="services">Ydelser</option>
+            <option value="team">Team</option>
+            <option value="about">Om os</option>
+          </select>
+        </swp-page-selector>
+      </swp-topbar-left>
+
+      <swp-topbar-center>
+        <swp-viewport-toggle>
+          <swp-viewport-btn class="active" data-viewport="desktop" title="Desktop">
+            <i class="ph ph-desktop"></i>
+          </swp-viewport-btn>
+          <swp-viewport-btn data-viewport="tablet" title="Tablet">
+            <i class="ph ph-device-tablet"></i>
+          </swp-viewport-btn>
+          <swp-viewport-btn data-viewport="mobile" title="Mobil">
+            <i class="ph ph-device-mobile"></i>
+          </swp-viewport-btn>
+        </swp-viewport-toggle>
+      </swp-topbar-center>
+
+      <swp-topbar-right>
+        <swp-btn class="secondary" id="previewBtn">
+          <i class="ph ph-eye"></i>
+          Preview
+        </swp-btn>
+        <swp-btn class="secondary" id="saveBtn">
+          <i class="ph ph-floppy-disk"></i>
+          Gem
+        </swp-btn>
+        <swp-btn class="primary" id="publishBtn">
+          <i class="ph ph-rocket-launch"></i>
+          Publicer
+        </swp-btn>
+      </swp-topbar-right>
+    </swp-builder-topbar>
+
+    <!-- Workspace -->
+    <swp-builder-workspace>
+      <!-- Block Library -->
+      <swp-block-library>
+        <swp-library-tabs>
+          <swp-library-tab class="active" data-tab="blocks">
+            <i class="ph ph-squares-four"></i>
+            Blokke
+          </swp-library-tab>
+          <swp-library-tab data-tab="design">
+            <i class="ph ph-palette"></i>
+            Design
+          </swp-library-tab>
+        </swp-library-tabs>
+
+        <!-- Blokke Tab -->
+        <swp-library-content class="active" data-content="blocks">
+        <swp-block-category>
+          <swp-category-title>Layout</swp-category-title>
+          <swp-block-grid>
+            <swp-block-item draggable="true" data-block-type="hero">
+              <i class="ph ph-image"></i>
+              <span>Hero</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="columns">
+              <i class="ph ph-columns"></i>
+              <span>Kolonner</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="spacer">
+              <i class="ph ph-arrows-out-line-vertical"></i>
+              <span>Spacer</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="divider">
+              <i class="ph ph-minus"></i>
+              <span>Divider</span>
+            </swp-block-item>
+          </swp-block-grid>
+        </swp-block-category>
+
+        <swp-block-category>
+          <swp-category-title>Indhold</swp-category-title>
+          <swp-block-grid>
+            <swp-block-item draggable="true" data-block-type="about">
+              <i class="ph ph-article"></i>
+              <span>Tekst</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="services">
+              <i class="ph ph-scissors"></i>
+              <span>Ydelser</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="team">
+              <i class="ph ph-users-three"></i>
+              <span>Team</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="gallery">
+              <i class="ph ph-images"></i>
+              <span>Galleri</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="testimonials">
+              <i class="ph ph-quotes"></i>
+              <span>Anmeldelser</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="cta">
+              <i class="ph ph-megaphone"></i>
+              <span>CTA Banner</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="prices">
+              <i class="ph ph-currency-circle-dollar"></i>
+              <span>Prisliste</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="faq">
+              <i class="ph ph-question"></i>
+              <span>FAQ</span>
+            </swp-block-item>
+          </swp-block-grid>
+        </swp-block-category>
+
+        <swp-block-category>
+          <swp-category-title>Kontakt & Booking</swp-category-title>
+          <swp-block-grid>
+            <swp-block-item draggable="true" data-block-type="contact">
+              <i class="ph ph-map-pin"></i>
+              <span>Kontakt</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="hours">
+              <i class="ph ph-clock"></i>
+              <span>Åbningstider</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="booking">
+              <i class="ph ph-calendar-check"></i>
+              <span>Book tid</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="map">
+              <i class="ph ph-map-trifold"></i>
+              <span>Kort</span>
+            </swp-block-item>
+            <swp-block-item draggable="true" data-block-type="social">
+              <i class="ph ph-share-network"></i>
+              <span>Social</span>
+            </swp-block-item>
+          </swp-block-grid>
+        </swp-block-category>
+        </swp-library-content>
+
+        <!-- Design Tab -->
+        <swp-library-content data-content="design">
+          <swp-design-section-title>Farveskema</swp-design-section-title>
+          <swp-color-schemes id="libraryColorSchemes">
+            <!-- Color schemes will be rendered here -->
+          </swp-color-schemes>
+
+          <swp-design-section-title>Typografi</swp-design-section-title>
+          <swp-font-cards id="libraryFontCards">
+            <swp-font-card data-font="Poppins">
+              <swp-font-card-preview>Velkommen til salonen</swp-font-card-preview>
+              <swp-font-card-name>Poppins — Moderne & venlig</swp-font-card-name>
+            </swp-font-card>
+            <swp-font-card data-font="Playfair Display">
+              <swp-font-card-preview>Velkommen til salonen</swp-font-card-preview>
+              <swp-font-card-name>Playfair Display — Elegant & klassisk</swp-font-card-name>
+            </swp-font-card>
+            <swp-font-card data-font="Inter">
+              <swp-font-card-preview>Velkommen til salonen</swp-font-card-preview>
+              <swp-font-card-name>Inter — Ren & professionel</swp-font-card-name>
+            </swp-font-card>
+            <swp-font-card data-font="Montserrat">
+              <swp-font-card-preview>Velkommen til salonen</swp-font-card-preview>
+              <swp-font-card-name>Montserrat — Bold & stilfuld</swp-font-card-name>
+            </swp-font-card>
+          </swp-font-cards>
+
+          <swp-design-section-title>Sociale medier</swp-design-section-title>
+          <swp-edit-section id="socialLinksSettings">
+            <swp-edit-row>
+              <swp-edit-label><i class="ph ph-instagram-logo"></i> Instagram</swp-edit-label>
+              <input type="url" class="swp-edit-value" data-social="instagram" placeholder="https://instagram.com/...">
+            </swp-edit-row>
+            <swp-edit-row>
+              <swp-edit-label><i class="ph ph-facebook-logo"></i> Facebook</swp-edit-label>
+              <input type="url" class="swp-edit-value" data-social="facebook" placeholder="https://facebook.com/...">
+            </swp-edit-row>
+            <swp-edit-row>
+              <swp-edit-label><i class="ph ph-tiktok-logo"></i> TikTok</swp-edit-label>
+              <input type="url" class="swp-edit-value" data-social="tiktok" placeholder="https://tiktok.com/@...">
+            </swp-edit-row>
+            <swp-edit-row>
+              <swp-edit-label><i class="ph ph-linkedin-logo"></i> LinkedIn</swp-edit-label>
+              <input type="url" class="swp-edit-value" data-social="linkedin" placeholder="https://linkedin.com/...">
+            </swp-edit-row>
+          </swp-edit-section>
+        </swp-library-content>
+      </swp-block-library>
+
+      <!-- Canvas -->
+      <swp-builder-canvas data-viewport="desktop">
+        <swp-canvas-container>
+          <swp-canvas-page id="canvasPage">
+            <!-- Blocks will be rendered here -->
+          </swp-canvas-page>
+        </swp-canvas-container>
+      </swp-builder-canvas>
+
+      <!-- Settings Panel -->
+      <swp-settings-panel>
+        <swp-settings-header>
+          <i class="ph ph-sliders"></i>
+          <span id="settingsTitle">Indstillinger</span>
+        </swp-settings-header>
+
+        <swp-settings-tabs>
+          <swp-settings-tab class="active" data-tab="content">Indhold</swp-settings-tab>
+          <swp-settings-tab data-tab="style">Styling</swp-settings-tab>
+        </swp-settings-tabs>
+
+        <swp-settings-content id="settingsContent">
+          <swp-settings-empty>
+            <i class="ph ph-cursor-click"></i>
+            <p>Vælg en blok for at redigere</p>
+          </swp-settings-empty>
+        </swp-settings-content>
+      </swp-settings-panel>
+    </swp-builder-workspace>
+  </swp-website-builder>
+
+  <script>
+    // ==========================================
+    // INDEXEDDB DATABASE
+    // ==========================================
+    class WebsiteBuilderDB {
+      constructor() {
+        this.dbName = 'WebsiteBuilderDB';
+        this.dbVersion = 1;
+        this.storeName = 'sites';
+        this.db = null;
+      }
+
+      async init() {
+        return new Promise((resolve, reject) => {
+          const request = indexedDB.open(this.dbName, this.dbVersion);
+
+          request.onerror = () => reject(request.error);
+          request.onsuccess = () => {
+            this.db = request.result;
+            resolve(this.db);
+          };
+
+          request.onupgradeneeded = (event) => {
+            const db = event.target.result;
+            if (!db.objectStoreNames.contains(this.storeName)) {
+              db.createObjectStore(this.storeName, { keyPath: 'id' });
+            }
+          };
+        });
+      }
+
+      async get(id) {
+        return new Promise((resolve, reject) => {
+          const transaction = this.db.transaction([this.storeName], 'readonly');
+          const store = transaction.objectStore(this.storeName);
+          const request = store.get(id);
+
+          request.onerror = () => reject(request.error);
+          request.onsuccess = () => resolve(request.result);
+        });
+      }
+
+      async put(data) {
+        return new Promise((resolve, reject) => {
+          const transaction = this.db.transaction([this.storeName], 'readwrite');
+          const store = transaction.objectStore(this.storeName);
+          const request = store.put(data);
+
+          request.onerror = () => reject(request.error);
+          request.onsuccess = () => resolve(request.result);
+        });
+      }
+
+      async delete(id) {
+        return new Promise((resolve, reject) => {
+          const transaction = this.db.transaction([this.storeName], 'readwrite');
+          const store = transaction.objectStore(this.storeName);
+          const request = store.delete(id);
+
+          request.onerror = () => reject(request.error);
+          request.onsuccess = () => resolve(request.result);
+        });
+      }
+
+      async getAll() {
+        return new Promise((resolve, reject) => {
+          const transaction = this.db.transaction([this.storeName], 'readonly');
+          const store = transaction.objectStore(this.storeName);
+          const request = store.getAll();
+
+          request.onerror = () => reject(request.error);
+          request.onsuccess = () => resolve(request.result);
+        });
+      }
+    }
+
+    // ==========================================
+    // COLOR SCHEMES 2026
+    // ==========================================
+    const colorSchemes = [
+      {
+        id: 'mocha-mousse',
+        name: 'Mocha Mousse',
+        colors: { primary: '#A47864', secondary: '#5C3D2E', accent: '#D4A574', background: '#F5EDE8' }
+      },
+      {
+        id: 'ocean-teal',
+        name: 'Ocean Teal',
+        colors: { primary: '#0D7377', secondary: '#14403B', accent: '#32E0C4', background: '#E8F6F3' }
+      },
+      {
+        id: 'sunset-orange',
+        name: 'Warm Sunset',
+        colors: { primary: '#FF6633', secondary: '#402010', accent: '#FFAA55', background: '#FFF5F0' }
+      },
+      {
+        id: 'mint-wellness',
+        name: 'Mint Wellness',
+        colors: { primary: '#4ECDC4', secondary: '#1A535C', accent: '#95E1D3', background: '#F0FAF9' }
+      },
+      {
+        id: 'midnight-blue',
+        name: 'Midnight Blue',
+        colors: { primary: '#4D7FFF', secondary: '#1A2540', accent: '#FFCC00', background: '#F0F4FF' }
+      },
+      {
+        id: 'dusty-rose',
+        name: 'Dusty Rose',
+        colors: { primary: '#B84D77', secondary: '#4A1942', accent: '#F0E6D9', background: '#FDF5F7' }
+      },
+      {
+        id: 'emerald-gold',
+        name: 'Emerald & Gold',
+        colors: { primary: '#2D8566', secondary: '#1A3D2E', accent: '#E6994D', background: '#F0F7F4' }
+      },
+      {
+        id: 'retro-70s',
+        name: 'Retro 70\'s',
+        colors: { primary: '#E07B39', secondary: '#101357', accent: '#FBB13C', background: '#FEF9F3' }
+      },
+      {
+        id: 'nordic-calm',
+        name: 'Nordic Calm',
+        colors: { primary: '#6B7A8F', secondary: '#2C3E50', accent: '#A8B5C4', background: '#F5F7FA' }
+      },
+      {
+        id: 'salon-classic',
+        name: 'Salon Classic',
+        colors: { primary: '#00897b', secondary: '#333333', accent: '#f59e0b', background: '#ffffff' }
+      }
+    ];
+
+    // ==========================================
+    // STATE MANAGEMENT
+    // ==========================================
+    const defaultSite = {
+      id: 'site-001',
+      name: 'KARINA KNUDSEN',
+      theme: {
+        primaryColor: '#00897b',
+        secondaryColor: '#333333',
+        fontFamily: 'Poppins',
+        colorScheme: 'salon-classic'
+      },
+      socialLinks: {
+        instagram: '',
+        facebook: '',
+        tiktok: '',
+        linkedin: ''
+      },
+      pages: [
+        {
+          id: 'home',
+          slug: '/',
+          title: 'Forside',
+          isHomepage: true,
+          blocks: [
+            {
+              id: 'block-1',
+              type: 'hero',
+              content: {
+                headline: 'Velkommen til KARINA KNUDSEN',
+                subheadline: 'Din frisør på Amager siden 2010',
+                backgroundImage: 'https://images.unsplash.com/photo-1560066984-138dadb4c035?w=1200',
+                ctaText: 'Book tid',
+                ctaLink: '#booking'
+              }
+            },
+            {
+              id: 'block-2',
+              type: 'about',
+              content: {
+                title: 'Om salonen',
+                text: 'Vi er en moderne frisørsalon med fokus på kvalitet og personlig service. Vores dygtige stylister holder sig altid opdateret med de nyeste trends og teknikker.',
+                imageUrl: 'https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=800',
+                imagePosition: 'right'
+              }
+            },
+            {
+              id: 'block-3',
+              type: 'services',
+              content: {
+                title: 'Vores ydelser',
+                subtitle: 'Vi tilbyder et bredt udvalg af behandlinger'
+              }
+            },
+            {
+              id: 'block-4',
+              type: 'booking',
+              content: {
+                title: 'Book din tid',
+                subtitle: 'Vælg en tid der passer dig',
+                buttonText: 'Book nu'
+              }
+            }
+          ]
+        },
+        { id: 'services', slug: '/ydelser', title: 'Ydelser', blocks: [] },
+        { id: 'team', slug: '/team', title: 'Team', blocks: [] },
+        { id: 'about', slug: '/om-os', title: 'Om os', blocks: [] }
+      ]
+    };
+
+    // Services data (simulated from kk-services.json)
+    const servicesData = [
+      { name: 'Dameklip', duration: 60, price: 725, category: 'Klip' },
+      { name: 'Herreklip', duration: 60, price: 645, category: 'Klip' },
+      { name: 'Børneklip', duration: 45, price: 475, category: 'Klip' },
+      { name: 'Bundfarve', duration: 90, price: 785, category: 'Farve' },
+      { name: 'Striber', duration: 120, price: 1465, category: 'Farve' },
+      { name: 'Balayage', duration: 150, price: 1850, category: 'Farve' }
+    ];
+
+    // Team data (simulated from mock-resources.json)
+    const teamData = [
+      { id: 'EMP001', name: 'Camilla', role: 'Master Stylist', color: '#9c27b0' },
+      { id: 'EMP002', name: 'Isabella', role: 'Master Stylist', color: '#e91e63' },
+      { id: 'EMP003', name: 'Alexander', role: 'Frisør', color: '#3f51b5' },
+      { id: 'EMP004', name: 'Viktor', role: 'Junior Stylist', color: '#009688' }
+    ];
+
+    class WebsiteBuilderState {
+      constructor() {
+        this.db = new WebsiteBuilderDB();
+        this.site = null;
+        this.currentPageId = 'home';
+        this.selectedBlockId = null;
+        this.isInitialized = false;
+      }
+
+      async initialize() {
+        await this.db.init();
+        this.site = await this.loadSite();
+        this.isInitialized = true;
+        this.setupEventListeners();
+        this.render(); // render() calls applyTheme() after renderCanvas()
+      }
+
+      async loadSite() {
+        const saved = await this.db.get('site-001');
+        return saved || JSON.parse(JSON.stringify(defaultSite));
+      }
+
+      async saveSite() {
+        await this.db.put(this.site);
+      }
+
+      getCurrentPage() {
+        return this.site.pages.find(p => p.id === this.currentPageId);
+      }
+
+      getSelectedBlock() {
+        if (!this.selectedBlockId) return null;
+        const page = this.getCurrentPage();
+        return page.blocks.find(b => b.id === this.selectedBlockId);
+      }
+
+      async addBlock(type, index) {
+        const page = this.getCurrentPage();
+        const newBlock = {
+          id: `block-${Date.now()}`,
+          type,
+          content: this.getDefaultContent(type)
+        };
+
+        if (index !== undefined) {
+          page.blocks.splice(index, 0, newBlock);
+        } else {
+          page.blocks.push(newBlock);
+        }
+
+        this.selectedBlockId = newBlock.id;
+        await this.saveSite();
+        this.render();
+      }
+
+      getDefaultContent(type) {
+        const defaults = {
+          hero: {
+            headline: 'Overskrift her',
+            subheadline: 'Underoverskrift her',
+            backgroundImage: 'https://images.unsplash.com/photo-1560066984-138dadb4c035?w=1200',
+            ctaText: 'Læs mere',
+            ctaLink: '#'
+          },
+          columns: {
+            layout: '2',  // '2', '3', '1-2', '2-1'
+            column1Title: 'Kolonne 1',
+            column1Text: 'Indhold til første kolonne...',
+            column2Title: 'Kolonne 2',
+            column2Text: 'Indhold til anden kolonne...',
+            column3Title: 'Kolonne 3',
+            column3Text: 'Indhold til tredje kolonne...'
+          },
+          about: {
+            title: 'Om os',
+            text: 'Skriv noget om din salon her...',
+            imageUrl: '',
+            imagePosition: 'right'
+          },
+          spacer: {
+            size: 'medium'
+          },
+          divider: {
+            style: 'normal'  // 'normal', 'thick', 'dashed'
+          },
+          services: {
+            title: 'Vores ydelser',
+            subtitle: 'Se vores behandlinger'
+          },
+          team: {
+            title: 'Mød teamet',
+            subtitle: 'Vores dygtige medarbejdere'
+          },
+          gallery: {
+            title: 'Galleri',
+            images: [
+              'https://images.unsplash.com/photo-1560066984-138dadb4c035?w=400',
+              'https://images.unsplash.com/photo-1522337360788-8b13dee7a37e?w=400',
+              'https://images.unsplash.com/photo-1595476108010-b4d1f102b1b1?w=400',
+              '',
+              '',
+              ''
+            ]
+          },
+          testimonials: {
+            title: 'Hvad siger vores kunder',
+            items: [
+              { text: 'Fantastisk service og super dygtige stylister!', author: 'Maria J.', rating: 5 },
+              { text: 'Bedste frisør på Amager. Kommer her hver gang.', author: 'Thomas K.', rating: 5 }
+            ]
+          },
+          cta: {
+            title: 'Klar til forandring?',
+            text: 'Book en tid i dag og oplev forskellen',
+            buttonText: 'Book nu',
+            buttonLink: '#booking'
+          },
+          prices: {
+            title: 'Priser',
+            items: [
+              { name: 'Dameklip', price: '725 kr' },
+              { name: 'Herreklip', price: '645 kr' },
+              { name: 'Børneklip', price: '475 kr' },
+              { name: 'Farve', price: 'fra 785 kr' }
+            ]
+          },
+          faq: {
+            title: 'Ofte stillede spørgsmål',
+            items: [
+              { question: 'Skal jeg bestille tid?', answer: 'Ja, vi anbefaler at booke tid på forhånd for at sikre dig en plads.' },
+              { question: 'Hvor lang tid tager en klipning?', answer: 'En dameklip tager typisk 45-60 minutter, herreklip ca. 30 minutter.' }
+            ]
+          },
+          contact: {
+            title: 'Kontakt os',
+            address: 'Amager Strandvej 22f, 2300 Kbh S',
+            phone: '+45 32 54 00 00',
+            email: 'info@karinaknudsen.dk'
+          },
+          hours: {
+            title: 'Åbningstider',
+            hours: [
+              { day: 'Mandag', time: '09:00 - 17:00' },
+              { day: 'Tirsdag', time: '09:00 - 17:00' },
+              { day: 'Onsdag', time: '09:00 - 17:00' },
+              { day: 'Torsdag', time: '09:00 - 17:00' },
+              { day: 'Fredag', time: '09:00 - 17:00' },
+              { day: 'Lørdag', time: 'Lukket' },
+              { day: 'Søndag', time: 'Lukket' }
+            ]
+          },
+          booking: {
+            title: 'Book din tid',
+            subtitle: 'Vælg en tid der passer dig',
+            buttonText: 'Book nu'
+          },
+          map: {
+            address: 'Amager Strandvej 22f, 2300 København S'
+          },
+          social: {
+            title: 'Følg os',
+            style: 'filled'  // 'filled', 'outline'
+          }
+        };
+        return defaults[type] || {};
+      }
+
+      async updateBlock(blockId, updates) {
+        const page = this.getCurrentPage();
+        const block = page.blocks.find(b => b.id === blockId);
+        if (block) {
+          Object.assign(block.content, updates);
+          await this.saveSite();
+          this.render();
+        }
+      }
+
+      async deleteBlock(blockId) {
+        const page = this.getCurrentPage();
+        const index = page.blocks.findIndex(b => b.id === blockId);
+        if (index > -1) {
+          page.blocks.splice(index, 1);
+          if (this.selectedBlockId === blockId) {
+            this.selectedBlockId = null;
+          }
+          await this.saveSite();
+          this.render();
+        }
+      }
+
+      async moveBlock(blockId, newIndex) {
+        const page = this.getCurrentPage();
+        const oldIndex = page.blocks.findIndex(b => b.id === blockId);
+        if (oldIndex > -1 && oldIndex !== newIndex) {
+          const [block] = page.blocks.splice(oldIndex, 1);
+          page.blocks.splice(newIndex > oldIndex ? newIndex - 1 : newIndex, 0, block);
+          await this.saveSite();
+          this.render();
+        }
+      }
+
+      selectBlock(blockId) {
+        this.selectedBlockId = blockId;
+        this.render();
+      }
+
+      setupEventListeners() {
+        // Page selector
+        document.getElementById('pageSelector').addEventListener('change', (e) => {
+          this.currentPageId = e.target.value;
+          this.selectedBlockId = null;
+          this.render();
+        });
+
+        // Viewport toggle
+        document.querySelectorAll('swp-viewport-btn').forEach(btn => {
+          btn.addEventListener('click', () => {
+            document.querySelectorAll('swp-viewport-btn').forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            document.querySelector('swp-builder-canvas').dataset.viewport = btn.dataset.viewport;
+          });
+        });
+
+        // Settings tabs
+        document.querySelectorAll('swp-settings-tab').forEach(tab => {
+          tab.addEventListener('click', () => {
+            document.querySelectorAll('swp-settings-tab').forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+            this.renderSettings();
+          });
+        });
+
+        // Library tabs (Blokke | Design)
+        document.querySelectorAll('swp-library-tab').forEach(tab => {
+          tab.addEventListener('click', () => {
+            document.querySelectorAll('swp-library-tab').forEach(t => t.classList.remove('active'));
+            document.querySelectorAll('swp-library-content').forEach(c => c.classList.remove('active'));
+            tab.classList.add('active');
+            const content = document.querySelector(`swp-library-content[data-content="${tab.dataset.tab}"]`);
+            if (content) content.classList.add('active');
+          });
+        });
+
+        // Color scheme selection in library
+        document.getElementById('libraryColorSchemes').addEventListener('click', async (e) => {
+          const scheme = e.target.closest('swp-color-scheme');
+          if (scheme) {
+            const schemeId = scheme.dataset.scheme;
+            const schemeData = colorSchemes.find(s => s.id === schemeId);
+            if (schemeData) {
+              this.site.theme.colorScheme = schemeId;
+              this.site.theme.primaryColor = schemeData.colors.primary;
+              this.site.theme.secondaryColor = schemeData.colors.secondary;
+              this.site.theme.accentColor = schemeData.colors.accent;
+              await this.saveSite();
+              this.renderCanvas();
+              this.applyTheme(); // Must run AFTER renderCanvas
+              this.renderLibraryDesign();
+              this.renderSettings();
+            }
+          }
+        });
+
+        // Font selection in library
+        document.getElementById('libraryFontCards').addEventListener('click', async (e) => {
+          const card = e.target.closest('swp-font-card');
+          if (card) {
+            const fontFamily = card.dataset.font;
+            this.site.theme.fontFamily = fontFamily;
+            await this.saveSite();
+            this.renderCanvas();
+            this.applyTheme(); // Must run AFTER renderCanvas
+            this.renderLibraryDesign();
+            this.renderSettings();
+          }
+        });
+
+        // Social links settings
+        document.getElementById('socialLinksSettings').addEventListener('input', async (e) => {
+          const input = e.target;
+          if (input.dataset.social) {
+            if (!this.site.socialLinks) this.site.socialLinks = {};
+            this.site.socialLinks[input.dataset.social] = input.value;
+            await this.saveSite();
+            this.renderCanvas();
+          }
+        });
+
+        // Save button
+        document.getElementById('saveBtn').addEventListener('click', async () => {
+          await this.saveSite();
+          alert('Gemt!');
+        });
+
+        // Preview button
+        document.getElementById('previewBtn').addEventListener('click', () => {
+          window.open('poc-website-preview.html', '_blank');
+        });
+
+        // Drag and drop
+        this.setupDragAndDrop();
+      }
+
+      setupDragAndDrop() {
+        const canvas = document.getElementById('canvasPage');
+
+        // Block library items
+        document.querySelectorAll('swp-block-item').forEach(item => {
+          item.addEventListener('dragstart', (e) => {
+            e.dataTransfer.setData('application/json', JSON.stringify({
+              action: 'add',
+              type: item.dataset.blockType
+            }));
+            e.dataTransfer.effectAllowed = 'copy';
+            item.classList.add('dragging');
+          });
+
+          item.addEventListener('dragend', () => {
+            item.classList.remove('dragging');
+            this.hideDropIndicators();
+          });
+        });
+
+        // Canvas drop zone
+        canvas.addEventListener('dragover', (e) => {
+          e.preventDefault();
+          e.dataTransfer.dropEffect = 'copy';
+          this.showDropIndicator(e.clientY);
+        });
+
+        canvas.addEventListener('dragleave', () => {
+          this.hideDropIndicators();
+        });
+
+        canvas.addEventListener('drop', async (e) => {
+          e.preventDefault();
+          const data = JSON.parse(e.dataTransfer.getData('application/json'));
+          const dropIndex = this.calculateDropIndex(e.clientY);
+
+          if (data.action === 'add') {
+            await this.addBlock(data.type, dropIndex);
+          }
+
+          this.hideDropIndicators();
+        });
+      }
+
+      calculateDropIndex(clientY) {
+        const blocks = document.querySelectorAll('swp-block-wrapper');
+        for (let i = 0; i < blocks.length; i++) {
+          const rect = blocks[i].getBoundingClientRect();
+          if (clientY < rect.top + rect.height / 2) {
+            return i;
+          }
+        }
+        return blocks.length;
+      }
+
+      showDropIndicator(clientY) {
+        this.hideDropIndicators();
+        const index = this.calculateDropIndex(clientY);
+        const blocks = document.querySelectorAll('swp-block-wrapper');
+        const indicator = document.createElement('swp-drop-indicator');
+        indicator.classList.add('visible');
+
+        if (blocks.length === 0) {
+          document.getElementById('canvasPage').appendChild(indicator);
+        } else if (index >= blocks.length) {
+          blocks[blocks.length - 1].after(indicator);
+        } else {
+          blocks[index].before(indicator);
+        }
+      }
+
+      hideDropIndicators() {
+        document.querySelectorAll('swp-drop-indicator').forEach(el => el.remove());
+      }
+
+      render() {
+        this.renderCanvas();
+        this.applyTheme(); // Must run AFTER renderCanvas
+        this.renderSettings();
+        this.renderLibraryDesign();
+      }
+
+      renderCanvas() {
+        const canvas = document.getElementById('canvasPage');
+        const page = this.getCurrentPage();
+
+        if (!page.blocks.length) {
+          canvas.innerHTML = `
+            <swp-canvas-empty>
+              <i class="ph ph-plus-circle"></i>
+              <h3>Tilføj din første blok</h3>
+              <p>Træk en blok fra biblioteket til venstre og slip den her</p>
+            </swp-canvas-empty>
+          `;
+          return;
+        }
+
+        canvas.innerHTML = page.blocks.map(block => this.renderBlock(block)).join('');
+
+        // Add click handlers
+        canvas.querySelectorAll('swp-block-wrapper').forEach(wrapper => {
+          wrapper.addEventListener('click', (e) => {
+            if (!e.target.closest('swp-block-controls')) {
+              this.selectBlock(wrapper.dataset.blockId);
+            }
+          });
+        });
+
+        // Add delete handlers
+        canvas.querySelectorAll('.delete-block').forEach(btn => {
+          btn.addEventListener('click', async () => {
+            if (confirm('Slet denne blok?')) {
+              await this.deleteBlock(btn.dataset.blockId);
+            }
+          });
+        });
+      }
+
+      renderBlock(block) {
+        const isSelected = block.id === this.selectedBlockId;
+        const blockHtml = this.getBlockHtml(block);
+
+        return `
+          <swp-block-wrapper
+            data-block-id="${block.id}"
+            data-block-type="${block.type}"
+            data-selected="${isSelected}"
+          >
+            <swp-block-controls>
+              <button class="delete-block delete" data-block-id="${block.id}" title="Slet">
+                <i class="ph ph-trash"></i>
+              </button>
+            </swp-block-controls>
+            ${blockHtml}
+          </swp-block-wrapper>
+        `;
+      }
+
+      getBlockHtml(block) {
+        const renderers = {
+          hero: (b) => `
+            <div class="block-hero" style="background-image: url('${b.content.backgroundImage}')">
+              <div class="block-hero-content">
+                <h1>${b.content.headline}</h1>
+                <p>${b.content.subheadline}</p>
+                <a href="${b.content.ctaLink}" class="block-hero-btn">
+                  ${b.content.ctaText}
+                  <i class="ph ph-arrow-right"></i>
+                </a>
+              </div>
+            </div>
+          `,
+          about: (b) => `
+            <div class="block-about ${b.content.imagePosition === 'left' ? 'image-left' : 'image-right'}">
+              <div class="block-about-content">
+                <h2>${b.content.title}</h2>
+                <p>${b.content.text}</p>
+              </div>
+              <div class="block-about-image">
+                ${b.content.imageUrl
+                  ? `<img src="${b.content.imageUrl}" alt="${b.content.title}">`
+                  : `<div class="block-about-image-placeholder"><i class="ph ph-image"></i></div>`
+                }
+              </div>
+            </div>
+          `,
+          spacer: (b) => `
+            <div class="block-spacer ${b.content.size}"></div>
+          `,
+          services: (b) => `
+            <div class="block-services">
+              <div class="block-services-header">
+                <h2>${b.content.title}</h2>
+                <p>${b.content.subtitle}</p>
+              </div>
+              <div class="block-services-grid">
+                ${servicesData.slice(0, 6).map(s => `
+                  <div class="block-service-card">
+                    <h3>${s.name}</h3>
+                    <div class="block-service-card-meta">
+                      <span><i class="ph ph-clock"></i> ${s.duration} min</span>
+                    </div>
+                    <div class="block-service-card-price">${s.price} kr.</div>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          `,
+          team: (b) => `
+            <div class="block-team">
+              <div class="block-team-header">
+                <h2>${b.content.title || 'Mød teamet'}</h2>
+              </div>
+              <div class="block-team-grid">
+                ${teamData.map(t => `
+                  <div class="block-team-card">
+                    <div class="block-team-avatar" style="background: ${t.color}">${t.name[0]}</div>
+                    <h3>${t.name}</h3>
+                    <p>${t.role}</p>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          `,
+          contact: (b) => `
+            <div class="block-contact">
+              <div class="block-contact-grid">
+                <div class="block-contact-info">
+                  <h2>${b.content.title}</h2>
+                  <div class="block-contact-item">
+                    <i class="ph ph-map-pin"></i>
+                    <div class="block-contact-item-content">
+                      <h4>Adresse</h4>
+                      <p>${b.content.address}</p>
+                    </div>
+                  </div>
+                  <div class="block-contact-item">
+                    <i class="ph ph-phone"></i>
+                    <div class="block-contact-item-content">
+                      <h4>Telefon</h4>
+                      <p>${b.content.phone}</p>
+                    </div>
+                  </div>
+                  <div class="block-contact-item">
+                    <i class="ph ph-envelope"></i>
+                    <div class="block-contact-item-content">
+                      <h4>Email</h4>
+                      <p>${b.content.email}</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="block-contact-map">
+                  <i class="ph ph-map-trifold" style="font-size: 48px;"></i>
+                </div>
+              </div>
+            </div>
+          `,
+          hours: (b) => `
+            <div class="block-hours">
+              <h2>${b.content.title}</h2>
+              <div class="block-hours-list">
+                ${b.content.hours.map(h => `
+                  <div class="block-hours-row">
+                    <span class="block-hours-day">${h.day}</span>
+                    <span class="block-hours-time ${h.time === 'Lukket' ? 'closed' : ''}">${h.time}</span>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          `,
+          booking: (b) => `
+            <div class="block-booking">
+              <h2>${b.content.title}</h2>
+              <p>${b.content.subtitle}</p>
+              <a href="poc-booking-v2.html" target="_blank" class="block-booking-btn">
+                <i class="ph ph-calendar-check"></i>
+                ${b.content.buttonText}
+              </a>
+            </div>
+          `,
+          columns: (b) => {
+            const cols = b.content.layout || '2';
+            const showCol3 = cols === '3';
+            return `
+              <div class="block-columns" data-cols="${cols}">
+                <div class="block-column">
+                  ${b.content.column1Title || b.content.column1Text
+                    ? `<h3>${b.content.column1Title || ''}</h3><p>${b.content.column1Text || ''}</p>`
+                    : `<div class="block-column-placeholder">Kolonne 1</div>`
+                  }
+                </div>
+                <div class="block-column">
+                  ${b.content.column2Title || b.content.column2Text
+                    ? `<h3>${b.content.column2Title || ''}</h3><p>${b.content.column2Text || ''}</p>`
+                    : `<div class="block-column-placeholder">Kolonne 2</div>`
+                  }
+                </div>
+                ${showCol3 ? `
+                  <div class="block-column">
+                    ${b.content.column3Title || b.content.column3Text
+                      ? `<h3>${b.content.column3Title || ''}</h3><p>${b.content.column3Text || ''}</p>`
+                      : `<div class="block-column-placeholder">Kolonne 3</div>`
+                    }
+                  </div>
+                ` : ''}
+              </div>
+            `;
+          },
+          divider: (b) => `
+            <div class="block-divider ${b.content.style || ''}">
+              <hr>
+            </div>
+          `,
+          gallery: (b) => `
+            <div class="block-gallery">
+              <div class="block-gallery-header">
+                <h2>${b.content.title}</h2>
+              </div>
+              <div class="block-gallery-grid">
+                ${(b.content.images || []).slice(0, 6).map(img => `
+                  <div class="block-gallery-item">
+                    ${img
+                      ? `<img src="${img}" alt="Galleri billede">`
+                      : `<div class="block-gallery-placeholder"><i class="ph ph-image"></i></div>`
+                    }
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          `,
+          testimonials: (b) => `
+            <div class="block-testimonials">
+              <div class="block-testimonials-header">
+                <h2>${b.content.title}</h2>
+              </div>
+              <div class="block-testimonials-grid">
+                ${(b.content.items || []).map(item => `
+                  <div class="block-testimonial-card">
+                    <div class="block-testimonial-stars">
+                      ${'★'.repeat(item.rating || 5)}
+                    </div>
+                    <p class="block-testimonial-text">"${item.text}"</p>
+                    <div class="block-testimonial-author">
+                      <div class="block-testimonial-avatar">${(item.author || 'A')[0]}</div>
+                      <span class="block-testimonial-name">${item.author}</span>
+                    </div>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          `,
+          cta: (b) => `
+            <div class="block-cta">
+              <h2>${b.content.title}</h2>
+              <p>${b.content.text}</p>
+              <a href="${b.content.buttonLink || '#'}" class="block-cta-btn">
+                ${b.content.buttonText}
+                <i class="ph ph-arrow-right"></i>
+              </a>
+            </div>
+          `,
+          prices: (b) => `
+            <div class="block-prices">
+              <div class="block-prices-header">
+                <h2>${b.content.title}</h2>
+              </div>
+              <div class="block-prices-list">
+                ${(b.content.items || []).map(item => `
+                  <div class="block-price-item">
+                    <span class="block-price-name">${item.name}</span>
+                    <span class="block-price-value">${item.price}</span>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          `,
+          faq: (b) => `
+            <div class="block-faq">
+              <div class="block-faq-header">
+                <h2>${b.content.title}</h2>
+              </div>
+              <div class="block-faq-list">
+                ${(b.content.items || []).map(item => `
+                  <div class="block-faq-item">
+                    <div class="block-faq-question">
+                      <span>${item.question}</span>
+                      <i class="ph ph-caret-down"></i>
+                    </div>
+                    <div class="block-faq-answer">${item.answer}</div>
+                  </div>
+                `).join('')}
+              </div>
+            </div>
+          `,
+          map: (b) => `
+            <div class="block-map">
+              <div class="block-map-placeholder">
+                <i class="ph ph-map-trifold"></i>
+                <p>${b.content.address}</p>
+              </div>
+            </div>
+          `,
+          social: (b) => {
+            const socialLinks = this.site.socialLinks || {};
+            const styleClass = b.content.style === 'outline' ? 'style-outline' : '';
+            const links = [];
+
+            if (socialLinks.instagram) links.push(`<a href="${socialLinks.instagram}" target="_blank" class="block-social-link ${styleClass}"><i class="ph ph-instagram-logo"></i></a>`);
+            if (socialLinks.facebook) links.push(`<a href="${socialLinks.facebook}" target="_blank" class="block-social-link ${styleClass}"><i class="ph ph-facebook-logo"></i></a>`);
+            if (socialLinks.tiktok) links.push(`<a href="${socialLinks.tiktok}" target="_blank" class="block-social-link ${styleClass}"><i class="ph ph-tiktok-logo"></i></a>`);
+            if (socialLinks.linkedin) links.push(`<a href="${socialLinks.linkedin}" target="_blank" class="block-social-link ${styleClass}"><i class="ph ph-linkedin-logo"></i></a>`);
+
+            if (links.length === 0) {
+              return `
+                <div class="block-social">
+                  <h3>${b.content.title}</h3>
+                  <p style="color: var(--color-text-muted);">Tilføj sociale medier i Design-fanen til venstre</p>
+                </div>
+              `;
+            }
+
+            return `
+              <div class="block-social">
+                <h3>${b.content.title}</h3>
+                <div class="block-social-links">
+                  ${links.join('')}
+                </div>
+              </div>
+            `;
+          }
+        };
+
+        return renderers[block.type] ? renderers[block.type](block) : `<div>Unknown block type: ${block.type}</div>`;
+      }
+
+      renderSettings() {
+        const content = document.getElementById('settingsContent');
+        const titleEl = document.getElementById('settingsTitle');
+        const block = this.getSelectedBlock();
+        const activeTab = document.querySelector('swp-settings-tab.active').dataset.tab;
+
+        if (!block) {
+          titleEl.textContent = 'Indstillinger';
+          content.innerHTML = `
+            <swp-settings-empty>
+              <i class="ph ph-cursor-click"></i>
+              <p>Vælg en blok for at redigere</p>
+            </swp-settings-empty>
+          `;
+          return;
+        }
+
+        titleEl.textContent = this.getBlockTitle(block.type);
+
+        if (activeTab === 'content') {
+          content.innerHTML = this.getContentSettings(block);
+        } else {
+          content.innerHTML = this.getStyleSettings(block);
+        }
+
+        // Add input handlers with debounce for IndexedDB
+        let saveTimeout = null;
+
+        // Content field handlers (block-specific)
+        content.querySelectorAll('[data-field]').forEach(input => {
+          input.addEventListener('input', () => {
+            const field = input.dataset.field;
+            const value = input.type === 'checkbox' ? input.checked : input.value;
+
+            // Update content immediately in memory
+            const page = this.getCurrentPage();
+            const currentBlock = page.blocks.find(b => b.id === this.selectedBlockId);
+            if (currentBlock) {
+              currentBlock.content[field] = value;
+              this.renderCanvas();
+            }
+
+            // Debounce the IndexedDB save
+            clearTimeout(saveTimeout);
+            saveTimeout = setTimeout(() => {
+              this.saveSite();
+            }, 300);
+          });
+        });
+
+        // Theme field handlers (color pickers, font select)
+        content.querySelectorAll('[data-theme-field]').forEach(input => {
+          input.addEventListener('input', () => {
+            const field = input.dataset.themeField;
+            const value = input.value;
+
+            // Update theme in memory
+            this.site.theme[field] = value;
+
+            // Update color value display
+            const colorValueSpan = input.parentElement.querySelector('.color-value');
+            if (colorValueSpan) {
+              colorValueSpan.textContent = value;
+            }
+
+            // Update CSS variables for live preview
+            this.applyTheme();
+            this.renderCanvas();
+
+            // Debounce save
+            clearTimeout(saveTimeout);
+            saveTimeout = setTimeout(() => {
+              this.saveSite();
+            }, 300);
+          });
+        });
+
+        // Button style picker
+        content.querySelectorAll('swp-button-style-option').forEach(option => {
+          option.addEventListener('click', () => {
+            content.querySelectorAll('swp-button-style-option').forEach(o => o.classList.remove('active'));
+            option.classList.add('active');
+            this.site.theme.buttonStyle = option.dataset.style;
+            this.applyTheme();
+            this.renderCanvas();
+            this.saveSite();
+          });
+        });
+
+        // Spacing picker
+        content.querySelectorAll('swp-spacing-option').forEach(option => {
+          option.addEventListener('click', () => {
+            content.querySelectorAll('swp-spacing-option').forEach(o => o.classList.remove('active'));
+            option.classList.add('active');
+            this.site.theme.spacing = option.dataset.spacing;
+            this.applyTheme();
+            this.renderCanvas();
+            this.saveSite();
+          });
+        });
+
+      }
+
+      applyTheme() {
+        const theme = this.site.theme;
+        const canvas = document.querySelector('swp-canvas-page');
+        if (canvas) {
+          const accent = theme.accentColor || '#f59e0b';
+
+          canvas.style.setProperty('--theme-primary', theme.primaryColor);
+          canvas.style.setProperty('--theme-secondary', theme.secondaryColor);
+          canvas.style.setProperty('--theme-accent', accent);
+          canvas.style.setProperty('--theme-text', theme.secondaryColor); // Secondary = text color
+
+          // Pre-computed accent backgrounds for hover states
+          canvas.style.setProperty('--theme-accent-bg-light', `${accent}1a`); // 10% opacity
+          canvas.style.setProperty('--theme-accent-bg-lighter', `${accent}14`); // 8% opacity
+
+          // Font family with proper quotes and fallback
+          const fontFamily = theme.fontFamily || 'Poppins';
+          const fontStack = `'${fontFamily}', sans-serif`;
+          canvas.style.setProperty('--theme-font', fontStack);
+
+          // Button border radius based on style
+          const buttonRadius = {
+            'rounded': '8px',
+            'pill': '50px',
+            'square': '0'
+          };
+          canvas.style.setProperty('--theme-button-radius', buttonRadius[theme.buttonStyle] || '8px');
+
+          // Spacing multiplier
+          const spacingMultiplier = {
+            'compact': '0.75',
+            'normal': '1',
+            'spacious': '1.5'
+          };
+          canvas.style.setProperty('--theme-spacing', spacingMultiplier[theme.spacing] || '1');
+        }
+      }
+
+      renderLibraryDesign() {
+        const currentScheme = this.site.theme.colorScheme || 'salon-classic';
+        const currentFont = this.site.theme.fontFamily || 'Poppins';
+
+        // Render color schemes
+        const schemesContainer = document.getElementById('libraryColorSchemes');
+        schemesContainer.innerHTML = colorSchemes.map(scheme => `
+          <swp-color-scheme data-scheme="${scheme.id}" class="${scheme.id === currentScheme ? 'active' : ''}">
+            <swp-color-scheme-colors>
+              <span style="background: ${scheme.colors.primary}"></span>
+              <span style="background: ${scheme.colors.secondary}"></span>
+              <span style="background: ${scheme.colors.accent}"></span>
+              <span style="background: ${scheme.colors.background}"></span>
+            </swp-color-scheme-colors>
+            <swp-color-scheme-name>${scheme.name}</swp-color-scheme-name>
+          </swp-color-scheme>
+        `).join('');
+
+        // Update font cards active state
+        document.querySelectorAll('swp-font-card').forEach(card => {
+          card.classList.toggle('active', card.dataset.font === currentFont);
+        });
+
+        // Update social links inputs
+        const socialLinks = this.site.socialLinks || {};
+        document.querySelectorAll('#socialLinksSettings input[data-social]').forEach(input => {
+          input.value = socialLinks[input.dataset.social] || '';
+        });
+      }
+
+      getBlockTitle(type) {
+        const titles = {
+          hero: 'Hero Sektion',
+          columns: 'Kolonner',
+          about: 'Tekst',
+          spacer: 'Spacer',
+          divider: 'Divider',
+          services: 'Ydelser',
+          team: 'Team',
+          gallery: 'Galleri',
+          testimonials: 'Anmeldelser',
+          cta: 'CTA Banner',
+          prices: 'Prisliste',
+          faq: 'FAQ',
+          contact: 'Kontakt',
+          hours: 'Åbningstider',
+          booking: 'Booking',
+          map: 'Kort',
+          social: 'Sociale Medier'
+        };
+        return titles[type] || type;
+      }
+
+      getContentSettings(block) {
+        const settingsMap = {
+          hero: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Overskrift</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="headline" value="${block.content.headline || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Underoverskrift</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="subheadline" value="${block.content.subheadline || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Baggrundsbillede URL</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="backgroundImage" value="${block.content.backgroundImage || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Knap tekst</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="ctaText" value="${block.content.ctaText || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Knap link</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="ctaLink" value="${block.content.ctaLink || ''}">
+              </swp-edit-row>
+            </swp-edit-section>
+          `,
+          about: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Titel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="title" value="${block.content.title || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Tekst</swp-edit-label>
+                <textarea class="swp-edit-textarea" data-field="text">${block.content.text || ''}</textarea>
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Billede URL</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="imageUrl" value="${block.content.imageUrl || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Billede position</swp-edit-label>
+                <swp-edit-select>
+                  <select data-field="imagePosition">
+                    <option value="right" ${block.content.imagePosition === 'right' ? 'selected' : ''}>Højre</option>
+                    <option value="left" ${block.content.imagePosition === 'left' ? 'selected' : ''}>Venstre</option>
+                  </select>
+                </swp-edit-select>
+              </swp-edit-row>
+            </swp-edit-section>
+          `,
+          spacer: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Størrelse</swp-edit-label>
+                <swp-edit-select>
+                  <select data-field="size">
+                    <option value="small" ${block.content.size === 'small' ? 'selected' : ''}>Lille (30px)</option>
+                    <option value="medium" ${block.content.size === 'medium' ? 'selected' : ''}>Medium (60px)</option>
+                    <option value="large" ${block.content.size === 'large' ? 'selected' : ''}>Stor (100px)</option>
+                  </select>
+                </swp-edit-select>
+              </swp-edit-row>
+            </swp-edit-section>
+          `,
+          services: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Titel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="title" value="${block.content.title || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Undertitel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="subtitle" value="${block.content.subtitle || ''}">
+              </swp-edit-row>
+            </swp-edit-section>
+            <swp-settings-hint>
+              <i class="ph ph-info"></i>
+              Ydelser hentes automatisk fra systemet.
+            </swp-settings-hint>
+          `,
+          team: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Titel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="title" value="${block.content.title || ''}">
+              </swp-edit-row>
+            </swp-edit-section>
+            <swp-settings-hint>
+              <i class="ph ph-info"></i>
+              Medarbejdere hentes automatisk fra systemet.
+            </swp-settings-hint>
+          `,
+          contact: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Titel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="title" value="${block.content.title || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Adresse</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="address" value="${block.content.address || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Telefon</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="phone" value="${block.content.phone || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Email</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="email" value="${block.content.email || ''}">
+              </swp-edit-row>
+            </swp-edit-section>
+          `,
+          hours: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Titel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="title" value="${block.content.title || ''}">
+              </swp-edit-row>
+            </swp-edit-section>
+            <swp-settings-hint>
+              <i class="ph ph-info"></i>
+              Åbningstider kan redigeres i Indstillinger.
+            </swp-settings-hint>
+          `,
+          booking: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Titel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="title" value="${block.content.title || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Undertitel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="subtitle" value="${block.content.subtitle || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Knap tekst</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="buttonText" value="${block.content.buttonText || ''}">
+              </swp-edit-row>
+            </swp-edit-section>
+          `,
+          columns: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Layout</swp-edit-label>
+                <swp-edit-select>
+                  <select data-field="layout">
+                    <option value="2" ${block.content.layout === '2' ? 'selected' : ''}>2 kolonner (50/50)</option>
+                    <option value="3" ${block.content.layout === '3' ? 'selected' : ''}>3 kolonner</option>
+                    <option value="1-2" ${block.content.layout === '1-2' ? 'selected' : ''}>2 kolonner (33/66)</option>
+                    <option value="2-1" ${block.content.layout === '2-1' ? 'selected' : ''}>2 kolonner (66/33)</option>
+                  </select>
+                </swp-edit-select>
+              </swp-edit-row>
+            </swp-edit-section>
+            <swp-section-title>Kolonne 1</swp-section-title>
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Titel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="column1Title" value="${block.content.column1Title || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Tekst</swp-edit-label>
+                <textarea class="swp-edit-textarea" data-field="column1Text">${block.content.column1Text || ''}</textarea>
+              </swp-edit-row>
+            </swp-edit-section>
+            <swp-section-title>Kolonne 2</swp-section-title>
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Titel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="column2Title" value="${block.content.column2Title || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Tekst</swp-edit-label>
+                <textarea class="swp-edit-textarea" data-field="column2Text">${block.content.column2Text || ''}</textarea>
+              </swp-edit-row>
+            </swp-edit-section>
+            ${block.content.layout === '3' ? `
+              <swp-section-title>Kolonne 3</swp-section-title>
+              <swp-edit-section>
+                <swp-edit-row>
+                  <swp-edit-label>Titel</swp-edit-label>
+                  <input type="text" class="swp-edit-value" data-field="column3Title" value="${block.content.column3Title || ''}">
+                </swp-edit-row>
+                <swp-edit-row>
+                  <swp-edit-label>Tekst</swp-edit-label>
+                  <textarea class="swp-edit-textarea" data-field="column3Text">${block.content.column3Text || ''}</textarea>
+                </swp-edit-row>
+              </swp-edit-section>
+            ` : ''}
+          `,
+          divider: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Stil</swp-edit-label>
+                <swp-edit-select>
+                  <select data-field="style">
+                    <option value="normal" ${block.content.style === 'normal' ? 'selected' : ''}>Normal</option>
+                    <option value="thick" ${block.content.style === 'thick' ? 'selected' : ''}>Tyk</option>
+                    <option value="dashed" ${block.content.style === 'dashed' ? 'selected' : ''}>Stiplet</option>
+                  </select>
+                </swp-edit-select>
+              </swp-edit-row>
+            </swp-edit-section>
+          `,
+          gallery: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Titel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="title" value="${block.content.title || ''}">
+              </swp-edit-row>
+            </swp-edit-section>
+            <swp-settings-hint>
+              <i class="ph ph-info"></i>
+              Billeder kan uploades i Media biblioteket.
+            </swp-settings-hint>
+          `,
+          testimonials: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Titel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="title" value="${block.content.title || ''}">
+              </swp-edit-row>
+            </swp-edit-section>
+            <swp-settings-hint>
+              <i class="ph ph-info"></i>
+              Anmeldelser kan administreres i Indstillinger.
+            </swp-settings-hint>
+          `,
+          cta: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Titel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="title" value="${block.content.title || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Tekst</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="text" value="${block.content.text || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Knap tekst</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="buttonText" value="${block.content.buttonText || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Knap link</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="buttonLink" value="${block.content.buttonLink || ''}">
+              </swp-edit-row>
+            </swp-edit-section>
+          `,
+          prices: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Titel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="title" value="${block.content.title || ''}">
+              </swp-edit-row>
+            </swp-edit-section>
+            <swp-settings-hint>
+              <i class="ph ph-info"></i>
+              Priser hentes fra Ydelser-indstillinger.
+            </swp-settings-hint>
+          `,
+          faq: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Titel</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="title" value="${block.content.title || ''}">
+              </swp-edit-row>
+            </swp-edit-section>
+            <swp-settings-hint>
+              <i class="ph ph-info"></i>
+              FAQ spørgsmål kan redigeres i Indstillinger.
+            </swp-settings-hint>
+          `,
+          map: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Adresse</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="address" value="${block.content.address || ''}">
+              </swp-edit-row>
+            </swp-edit-section>
+            <swp-settings-hint>
+              <i class="ph ph-info"></i>
+              Google Maps integration kræver API-nøgle.
+            </swp-settings-hint>
+          `,
+          social: `
+            <swp-edit-section>
+              <swp-edit-row>
+                <swp-edit-label>Overskrift</swp-edit-label>
+                <input type="text" class="swp-edit-value" data-field="title" value="${block.content.title || ''}">
+              </swp-edit-row>
+              <swp-edit-row>
+                <swp-edit-label>Ikon-stil</swp-edit-label>
+                <swp-edit-select>
+                  <select data-field="style">
+                    <option value="filled" ${block.content.style === 'filled' ? 'selected' : ''}>Udfyldt</option>
+                    <option value="outline" ${block.content.style === 'outline' ? 'selected' : ''}>Kontur</option>
+                  </select>
+                </swp-edit-select>
+              </swp-edit-row>
+            </swp-edit-section>
+            <swp-settings-hint>
+              <i class="ph ph-info"></i>
+              Tilføj sociale medie-links i Design-fanen til venstre.
+            </swp-settings-hint>
+          `
+        };
+
+        return settingsMap[block.type] || '<swp-settings-hint><i class="ph ph-info"></i>Ingen indstillinger for denne blok</swp-settings-hint>';
+      }
+
+      getStyleSettings(block) {
+        const theme = this.site.theme;
+
+        return `
+          <swp-settings-hint style="margin-bottom: 16px;">
+            <i class="ph ph-palette"></i>
+            Vælg farveskema og typografi i Design-fanen til venstre
+          </swp-settings-hint>
+
+          <swp-section-title>Tilpas farver</swp-section-title>
+          <swp-edit-section>
+            <swp-edit-row>
+              <swp-edit-label>Primær farve</swp-edit-label>
+              <swp-color-picker-row>
+                <input type="color" value="${theme.primaryColor}" data-theme-field="primaryColor">
+                <span class="color-value">${theme.primaryColor}</span>
+              </swp-color-picker-row>
+            </swp-edit-row>
+            <swp-edit-row>
+              <swp-edit-label>Sekundær farve</swp-edit-label>
+              <swp-color-picker-row>
+                <input type="color" value="${theme.secondaryColor}" data-theme-field="secondaryColor">
+                <span class="color-value">${theme.secondaryColor}</span>
+              </swp-color-picker-row>
+            </swp-edit-row>
+            <swp-edit-row>
+              <swp-edit-label>Accent farve</swp-edit-label>
+              <swp-color-picker-row>
+                <input type="color" value="${theme.accentColor || '#f59e0b'}" data-theme-field="accentColor">
+                <span class="color-value">${theme.accentColor || '#f59e0b'}</span>
+              </swp-color-picker-row>
+            </swp-edit-row>
+          </swp-edit-section>
+
+          <swp-section-title>Knapper</swp-section-title>
+          <swp-edit-section>
+            <swp-edit-row>
+              <swp-edit-label>Knap-stil</swp-edit-label>
+              <swp-button-style-picker>
+                <swp-button-style-option data-style="rounded" ${theme.buttonStyle === 'rounded' || !theme.buttonStyle ? 'class="active"' : ''}>
+                  <span></span>
+                </swp-button-style-option>
+                <swp-button-style-option data-style="pill" ${theme.buttonStyle === 'pill' ? 'class="active"' : ''}>
+                  <span></span>
+                </swp-button-style-option>
+                <swp-button-style-option data-style="square" ${theme.buttonStyle === 'square' ? 'class="active"' : ''}>
+                  <span></span>
+                </swp-button-style-option>
+              </swp-button-style-picker>
+            </swp-edit-row>
+          </swp-edit-section>
+
+          <swp-section-title>Layout</swp-section-title>
+          <swp-edit-section>
+            <swp-edit-row>
+              <swp-edit-label>Afstand</swp-edit-label>
+              <swp-spacing-picker>
+                <swp-spacing-option data-spacing="compact" ${theme.spacing === 'compact' ? 'class="active"' : ''}>
+                  <i class="ph ph-arrows-in-line-vertical"></i>
+                  <span>Kompakt</span>
+                </swp-spacing-option>
+                <swp-spacing-option data-spacing="normal" ${theme.spacing === 'normal' || !theme.spacing ? 'class="active"' : ''}>
+                  <i class="ph ph-arrows-out-line-vertical"></i>
+                  <span>Normal</span>
+                </swp-spacing-option>
+                <swp-spacing-option data-spacing="spacious" ${theme.spacing === 'spacious' ? 'class="active"' : ''}>
+                  <i class="ph ph-arrows-vertical"></i>
+                  <span>Luftig</span>
+                </swp-spacing-option>
+              </swp-spacing-picker>
+            </swp-edit-row>
+          </swp-edit-section>
+        `;
+      }
+    }
+
+    // Initialize
+    const builder = new WebsiteBuilderState();
+    builder.initialize().catch(err => {
+      console.error('Failed to initialize Website Builder:', err);
+    });
+  </script>
+</body>
+</html>
diff --git a/.workbench/POC/spec-salary.html b/.workbench/POC/spec-salary.html
new file mode 100644
index 0000000..41ee387
--- /dev/null
+++ b/.workbench/POC/spec-salary.html
@@ -0,0 +1,564 @@
+<!doctype html>
+<html lang="da">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1" />
+  <title>Lønspecifikation – Januar 2026 (2 sider)</title>
+
+  <style>
+    /* ===== Print setup ===== */
+    @page { size: A4; margin: 14mm; }
+    @media print {
+      .no-print { display: none !important; }
+      .page-break { break-after: page; page-break-after: always; }
+      a { color: inherit; text-decoration: none; }
+    }
+
+    /* ===== Base ===== */
+    :root{
+      --ink:#0f172a;
+      --muted:#475569;
+      --line:#e2e8f0;
+      --soft:#f8fafc;
+      --accent:#0ea5e9;
+      --accent-2:#22c55e;
+    }
+    *{ box-sizing:border-box; }
+    body{
+      margin:0;
+      font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
+      color:var(--ink);
+      background:#fff;
+    }
+    .sheet{
+      max-width: 210mm;
+      margin: 0 auto;
+    }
+
+    /* ===== Header ===== */
+    .hdr{
+      display:flex;
+      justify-content:space-between;
+      gap:16px;
+      padding: 14px 0 10px;
+      border-bottom: 2px solid var(--line);
+      margin-bottom: 12px;
+    }
+    .brand{
+      display:flex;
+      flex-direction:column;
+      gap:6px;
+    }
+    .title{
+      font-size: 20px;
+      font-weight: 800;
+      letter-spacing: .2px;
+      margin:0;
+      line-height:1.1;
+    }
+    .subtitle{
+      margin:0;
+      color:var(--muted);
+      font-size: 12px;
+    }
+    .meta{
+      text-align:right;
+      min-width: 260px;
+    }
+    .meta .pill{
+      display:inline-block;
+      font-size:12px;
+      padding:6px 10px;
+      border:1px solid var(--line);
+      border-radius:999px;
+      background:var(--soft);
+      margin-bottom:8px;
+    }
+    .meta .kv{
+      display:grid;
+      grid-template-columns: auto auto;
+      gap:4px 12px;
+      justify-content:end;
+      font-size:12px;
+      color:var(--muted);
+    }
+    .meta .kv b{ color:var(--ink); font-weight:600; }
+
+    /* ===== Blocks ===== */
+    .card{
+      border:1px solid var(--line);
+      border-radius: 14px;
+      overflow:hidden;
+      background:#fff;
+      margin-bottom: 12px;
+    }
+    .card .hd{
+      display:flex;
+      align-items:center;
+      justify-content:space-between;
+      padding: 10px 12px;
+      background: linear-gradient(0deg, var(--soft), #fff);
+      border-bottom: 1px solid var(--line);
+    }
+    .card .hd h2{
+      font-size: 13px;
+      margin:0;
+      letter-spacing:.2px;
+      text-transform: uppercase;
+      color:var(--muted);
+    }
+    .card .bd{ padding: 12px; }
+
+    .grid{
+      display:grid;
+      grid-template-columns: 1.2fr .8fr;
+      gap: 12px;
+    }
+
+    /* ===== Total ===== */
+    .total{
+      display:flex;
+      align-items:baseline;
+      justify-content:space-between;
+      gap:12px;
+      padding: 14px 14px;
+      border-radius: 14px;
+      border: 1px solid var(--line);
+      background: linear-gradient(135deg, rgba(14,165,233,.10), rgba(34,197,94,.08));
+      margin-bottom: 12px;
+    }
+    .total .label{
+      color:var(--muted);
+      font-size:12px;
+      text-transform:uppercase;
+      letter-spacing:.25px;
+      margin-bottom:6px;
+    }
+    .total .big{
+      font-size: 28px;
+      font-weight: 900;
+      margin:0;
+      line-height:1.05;
+    }
+    .total .big small{
+      font-size: 14px;
+      font-weight: 700;
+      color:var(--muted);
+    }
+    .badge{
+      display:inline-block;
+      font-size:11px;
+      padding:4px 8px;
+      border-radius:999px;
+      border:1px solid var(--line);
+      background:var(--soft);
+      color:var(--muted);
+    }
+
+    /* ===== Tables ===== */
+    table{
+      width:100%;
+      border-collapse: collapse;
+      font-size: 12px;
+    }
+    th, td{
+      padding: 8px 8px;
+      border-bottom:1px solid var(--line);
+      vertical-align:top;
+    }
+    th{
+      text-align:left;
+      color:var(--muted);
+      font-weight:700;
+      font-size:11px;
+      text-transform:uppercase;
+      letter-spacing:.2px;
+      background: var(--soft);
+    }
+    td.num, th.num{ text-align:right; }
+    tr:last-child td{ border-bottom:none; }
+
+    .note{
+      margin:8px 0 0;
+      color:var(--muted);
+      font-size:11px;
+      line-height:1.35;
+    }
+
+    /* ===== Footer ===== */
+    .ftr{
+      margin-top: 10px;
+      padding-top: 10px;
+      border-top:1px solid var(--line);
+      display:flex;
+      justify-content:space-between;
+      gap:12px;
+      font-size: 10.5px;
+      color:var(--muted);
+    }
+
+    /* ===== Ensure “side 1” content doesn't get split awkwardly ===== */
+    .avoid-break { break-inside: avoid; page-break-inside: avoid; }
+  </style>
+</head>
+
+<body>
+  <!-- ===================== PAGE 1: OVERBLIK ===================== -->
+  <div class="sheet">
+    <div class="hdr">
+      <div class="brand">
+        <p class="title">Lønspecifikation</p>
+        <p class="subtitle">Periode: <b>Januar 2026</b></p>
+      </div>
+
+      <div class="meta">
+        <div class="pill">Medarbejdernr.: <b>EMP-001</b></div>
+        <div class="kv">
+          <span>Medarbejder:</span><b>Emma Larsen</b>
+          <span>Afdeling:</span><b>Frisør</b>
+          <span>Ansættelse:</span><b>Fuldtid (37 t/uge)</b>
+        </div>
+      </div>
+    </div>
+
+    <section class="total avoid-break">
+      <div>
+        <div class="label">Bruttoløn (Januar 2026)</div>
+        <p class="big">34.063,50 <small>kr</small></p>
+      </div>
+      <div style="text-align:right">
+        <div><span class="badge">Side 1: Overblik</span></div>
+        <div style="margin-top:6px; color:var(--muted); font-size:12px; line-height:1.35">
+          Kort opsummering til udlevering.<br/>
+          Detaljer findes på side 2.
+        </div>
+      </div>
+    </section>
+
+    <section class="grid">
+      <div class="card avoid-break">
+        <div class="hd">
+          <h2>Samlet lønopgørelse</h2>
+          <span class="badge">Alle beløb i DKK</span>
+        </div>
+        <div class="bd">
+          <table>
+            <thead>
+              <tr>
+                <th>Løndel</th>
+                <th class="num">Beløb</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Grundløn inkl. overarbejde</td>
+                <td class="num">29.322,50 kr</td>
+              </tr>
+              <tr>
+                <td>Provision i alt</td>
+                <td class="num">3.685,00 kr</td>
+              </tr>
+              <tr>
+                <td>Tillæg i alt</td>
+                <td class="num">1.056,00 kr</td>
+              </tr>
+              <tr>
+                <td><b>Bruttoløn</b></td>
+                <td class="num"><b>34.063,50 kr</b></td>
+              </tr>
+            </tbody>
+          </table>
+          <p class="note">
+            (Hvis du senere vil have skat/AM-bidrag/nettoløn med, kan det tilføjes som ekstra blok her.)
+          </p>
+        </div>
+      </div>
+
+      <div class="card avoid-break">
+        <div class="hd">
+          <h2>Saldi</h2>
+          <span class="badge">Ved periodens slut</span>
+        </div>
+        <div class="bd">
+          <table>
+            <thead>
+              <tr>
+                <th>Type</th>
+                <th class="num">Optjent</th>
+                <th class="num">Afholdt</th>
+                <th class="num">Rest</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr>
+                <td>Ferie (dage)</td>
+                <td class="num">18,5</td>
+                <td class="num">6,0</td>
+                <td class="num">12,5</td>
+              </tr>
+              <tr>
+                <td>Afspadsering (timer)</td>
+                <td class="num">12,0</td>
+                <td class="num">4,0</td>
+                <td class="num">8,0</td>
+              </tr>
+            </tbody>
+          </table>
+          <p class="note">Saldi er opgjort som angivet på lønspecifikationen.</p>
+        </div>
+      </div>
+    </section>
+
+    <section class="card avoid-break">
+      <div class="hd">
+        <h2>Hurtigt resumé</h2>
+        <span class="badge">Det vigtigste</span>
+      </div>
+      <div class="bd">
+        <table>
+          <thead>
+            <tr>
+              <th>Nøglepunkt</th>
+              <th class="num">Værdi</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Normaltimer</td>
+              <td class="num">148,0 t</td>
+            </tr>
+            <tr>
+              <td>Overarbejde</td>
+              <td class="num">7,0 t</td>
+            </tr>
+            <tr>
+              <td>Provision (services + produkter)</td>
+              <td class="num">3.685,00 kr</td>
+            </tr>
+            <tr>
+              <td>Tillæg (aften + lørdag + søndag)</td>
+              <td class="num">1.056,00 kr</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <div class="ftr">
+      <div><b>Side 1/2</b> · Overblik</div>
+      <div style="text-align:right">Lønspecifikation · Januar 2026</div>
+    </div>
+
+    <div class="page-break"></div>
+
+    <!-- ===================== PAGE 2: DETALJER ===================== -->
+    <div class="hdr">
+      <div class="brand">
+        <p class="title">Lønspecifikation – Detaljer</p>
+        <p class="subtitle">Periode: <b>Januar 2026</b> · Medarbejder: <b>Emma Larsen</b></p>
+      </div>
+
+      <div class="meta">
+        <div class="pill">Bruttoløn: <b>34.063,50 kr</b></div>
+        <div class="kv">
+          <span>Ansættelse:</span><b>Fuldtid (37 t/uge)</b>
+          <span>Afdeling:</span><b>Frisør</b>
+          <span>Medarb.nr.:</span><b>EMP-001</b>
+        </div>
+      </div>
+    </div>
+
+    <section class="card">
+      <div class="hd">
+        <h2>Arbejdstid pr. uge</h2>
+        <span class="badge">Normal + overtid</span>
+      </div>
+      <div class="bd">
+        <table>
+          <thead>
+            <tr>
+              <th>Uge</th>
+              <th class="num">Normaltimer</th>
+              <th class="num">Overtid</th>
+              <th class="num">Beløb</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Uge 1 (30. dec – 5. jan)</td>
+              <td class="num">37,0 t</td>
+              <td class="num">2,0 t</td>
+              <td class="num">7.400,00 kr</td>
+            </tr>
+            <tr>
+              <td>Uge 2 (6. – 12. jan)</td>
+              <td class="num">37,0 t</td>
+              <td class="num">3,5 t</td>
+              <td class="num">7.816,25 kr</td>
+            </tr>
+            <tr>
+              <td>Uge 3 (13. – 19. jan)</td>
+              <td class="num">37,0 t</td>
+              <td class="num">0,0 t</td>
+              <td class="num">6.845,00 kr</td>
+            </tr>
+            <tr>
+              <td>Uge 4 (20. – 26. jan)</td>
+              <td class="num">37,0 t</td>
+              <td class="num">1,5 t</td>
+              <td class="num">7.261,25 kr</td>
+            </tr>
+            <tr>
+              <td><b>I alt</b></td>
+              <td class="num"><b>148,0 t</b></td>
+              <td class="num"><b>7,0 t</b></td>
+              <td class="num"><b>29.322,50 kr</b></td>
+            </tr>
+          </tbody>
+        </table>
+        <p class="note">
+          Satser: Normal 185,00 kr/time. Overtid (50%) 277,50 kr/time.
+        </p>
+      </div>
+    </section>
+
+    <section class="card">
+      <div class="hd">
+        <h2>Provision</h2>
+        <span class="badge">Services & produkter</span>
+      </div>
+      <div class="bd">
+        <p class="note" style="margin-top:0">
+          <b>Services:</b> 15% af omsætning over minimum (220 kr/time).<br/>
+          <b>Produkter:</b> 10% af salg.
+        </p>
+        <table>
+          <thead>
+            <tr>
+              <th>Uge</th>
+              <th class="num">Service prov.</th>
+              <th class="num">Produkt prov.</th>
+              <th class="num">I alt</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>Uge 1</td>
+              <td class="num">573,00 kr</td>
+              <td class="num">210,00 kr</td>
+              <td class="num">783,00 kr</td>
+            </tr>
+            <tr>
+              <td>Uge 2</td>
+              <td class="num">883,50 kr</td>
+              <td class="num">320,00 kr</td>
+              <td class="num">1.203,50 kr</td>
+            </tr>
+            <tr>
+              <td>Uge 3</td>
+              <td class="num">459,00 kr</td>
+              <td class="num">180,00 kr</td>
+              <td class="num">639,00 kr</td>
+            </tr>
+            <tr>
+              <td>Uge 4</td>
+              <td class="num">769,50 kr</td>
+              <td class="num">290,00 kr</td>
+              <td class="num">1.059,50 kr</td>
+            </tr>
+            <tr>
+              <td><b>I alt</b></td>
+              <td class="num"><b>2.685,00 kr</b></td>
+              <td class="num"><b>1.000,00 kr</b></td>
+              <td class="num"><b>3.685,00 kr</b></td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+    </section>
+
+    <section class="card">
+      <div class="hd">
+        <h2>Tillæg & fravær</h2>
+        <span class="badge">Opsummering</span>
+      </div>
+      <div class="bd">
+        <div class="grid" style="grid-template-columns: 1fr 1fr;">
+          <div>
+            <table>
+              <thead>
+                <tr>
+                  <th>Tillæg</th>
+                  <th class="num">Timer</th>
+                  <th class="num">Beløb</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Aftentillæg (hverdage 18–21)</td>
+                  <td class="num">12,0</td>
+                  <td class="num">336,00 kr</td>
+                </tr>
+                <tr>
+                  <td>Lørdagstillæg (før kl. 14)</td>
+                  <td class="num">16,0</td>
+                  <td class="num">720,00 kr</td>
+                </tr>
+                <tr>
+                  <td>Søndagstillæg</td>
+                  <td class="num">0,0</td>
+                  <td class="num">0,00 kr</td>
+                </tr>
+                <tr>
+                  <td><b>Tillæg i alt</b></td>
+                  <td class="num"></td>
+                  <td class="num"><b>1.056,00 kr</b></td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+
+          <div>
+            <table>
+              <thead>
+                <tr>
+                  <th>Fravær</th>
+                  <th class="num">Dage</th>
+                  <th class="num">Beløb</th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td>Ferie med løn</td>
+                  <td class="num">0</td>
+                  <td class="num">0,00 kr</td>
+                </tr>
+                <tr>
+                  <td>Sygdom</td>
+                  <td class="num">0</td>
+                  <td class="num">0,00 kr</td>
+                </tr>
+                <tr>
+                  <td>Barns sygedag</td>
+                  <td class="num">0</td>
+                  <td class="num">0,00 kr</td>
+                </tr>
+              </tbody>
+            </table>
+            <p class="note">Ingen fravær registreret i perioden.</p>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <div class="ftr">
+      <div><b>Side 2/2</b> · Detaljer</div>
+      <div style="text-align:right">Lønspecifikation · Januar 2026</div>
+    </div>
+
+    <div class="no-print" style="margin:12px 0; color:var(--muted); font-size:12px;">
+      Tip: I Chrome/Edge: <b>Ctrl/Cmd + P</b> → Destination: <b>Gem som PDF</b> → slå “Headers and footers” fra.
+    </div>
+  </div>
+</body>
+</html>
diff --git a/PlanTempus.Application/.claude/settings.local.json b/PlanTempus.Application/.claude/settings.local.json
index 3cb57dd..addddb1 100644
--- a/PlanTempus.Application/.claude/settings.local.json
+++ b/PlanTempus.Application/.claude/settings.local.json
@@ -2,7 +2,16 @@
   "permissions": {
     "allow": [
       "WebSearch",
-      "Bash(npm run build:*)"
+      "Bash(npm run build:*)",
+      "Bash(node -e:*)",
+      "Bash(dir /s /b \"C:\\\\Users\\\\Janus Knudsen\\\\source\\\\swp-repos\\\\PlanTempus\")",
+      "Bash(findstr:*)",
+      "Bash(dir \"C:\\\\Users\\\\Janus Knudsen\\\\source\\\\swp-repos\\\\PlanTempus\\\\PlanTempus.Application\\\\wwwroot\\\\*.html\")",
+      "Bash(dir /s /b \"C:\\\\Users\\\\Janus Knudsen\\\\source\\\\swp-repos\\\\PlanTempus\\\\PlanTempus.Application\\\\Features\\\\OnlineBooking\\\\*.cs\" \"C:\\\\Users\\\\Janus Knudsen\\\\source\\\\swp-repos\\\\PlanTempus\\\\PlanTempus.Application\\\\Features\\\\OnlineBooking\\\\*.cshtml\")",
+      "Bash(npm view:*)",
+      "Bash(tar:*)",
+      "Bash(find:*)",
+      "Bash(npm install:*)"
     ]
   }
 }
diff --git a/PlanTempus.Application/.npmrc b/PlanTempus.Application/.npmrc
new file mode 100644
index 0000000..863523f
--- /dev/null
+++ b/PlanTempus.Application/.npmrc
@@ -0,0 +1,2 @@
+@novadi:registry=http://npm.jarjarbinks:4873
+registry=http://npm.jarjarbinks:4873
diff --git a/PlanTempus.Application/Features/Accounts/Pages/Payment.cshtml b/PlanTempus.Application/Features/Accounts/Pages/Payment.cshtml
index 23417a6..58e294b 100644
--- a/PlanTempus.Application/Features/Accounts/Pages/Payment.cshtml
+++ b/PlanTempus.Application/Features/Accounts/Pages/Payment.cshtml
@@ -2,7 +2,7 @@
 @model PlanTempus.Application.Features.Accounts.Pages.PaymentModel
 @{
     ViewData["Title"] = "Betaling";
-    Layout = "/Features/_Shared/Pages/_AuthLayout.cshtml";
+    Layout = "/Features/Shared/Pages/_AuthLayout.cshtml";
 
     var plan = Model.SelectedPlan;
 }
diff --git a/PlanTempus.Application/Features/Accounts/Pages/Pricing.cshtml b/PlanTempus.Application/Features/Accounts/Pages/Pricing.cshtml
index 5808513..7f03a84 100644
--- a/PlanTempus.Application/Features/Accounts/Pages/Pricing.cshtml
+++ b/PlanTempus.Application/Features/Accounts/Pages/Pricing.cshtml
@@ -2,7 +2,7 @@
 @model PlanTempus.Application.Features.Accounts.Pages.PricingModel
 @{
     ViewData["Title"] = "Vælg abonnement";
-    Layout = "/Features/_Shared/Pages/_AuthLayout.cshtml";
+    Layout = "/Features/Shared/Pages/_AuthLayout.cshtml";
 }
 
 <swp-pricing-page>
diff --git a/PlanTempus.Application/Features/Accounts/Pages/Signup.cshtml b/PlanTempus.Application/Features/Accounts/Pages/Signup.cshtml
index efcc2d1..d5a82a9 100644
--- a/PlanTempus.Application/Features/Accounts/Pages/Signup.cshtml
+++ b/PlanTempus.Application/Features/Accounts/Pages/Signup.cshtml
@@ -2,7 +2,7 @@
 @model PlanTempus.Application.Features.Accounts.Pages.SignupModel
 @{
     ViewData["Title"] = Model.SelectedPlan.IsContactSales ? "Kontakt salg" : "Opret konto";
-    Layout = "/Features/_Shared/Pages/_AuthLayout.cshtml";
+    Layout = "/Features/Shared/Pages/_AuthLayout.cshtml";
 
     var plan = Model.SelectedPlan;
     var badgeClass = plan.IsContactSales ? plan.BadgeClass : (plan.IsFree ? plan.BadgeClass : "selected");
diff --git a/PlanTempus.Application/Features/Calendar/Pages/Index.cshtml b/PlanTempus.Application/Features/Calendar/Pages/Index.cshtml
new file mode 100644
index 0000000..bf12ed6
--- /dev/null
+++ b/PlanTempus.Application/Features/Calendar/Pages/Index.cshtml
@@ -0,0 +1,37 @@
+@page "/kalender"
+@using PlanTempus.Application.Features.Calendar.Pages
+@model PlanTempus.Application.Features.Calendar.Pages.IndexModel
+@{
+    ViewData["Title"] = "Kalender";
+}
+
+@section Styles {
+    <link rel="stylesheet" href="~/lib/calendar/dist/css/calendar.css" />
+}
+
+<div class="calendar-wrapper">
+    <swp-calendar-container>
+        <swp-time-axis>
+            <swp-header-spacer></swp-header-spacer>
+            <swp-time-axis-content id="time-axis"></swp-time-axis-content>
+        </swp-time-axis>
+        <swp-grid-container>
+            <swp-header-viewport>
+                <swp-header-track>
+                    <swp-calendar-header></swp-calendar-header>
+                </swp-header-track>
+                <swp-header-drawer></swp-header-drawer>
+            </swp-header-viewport>
+            <swp-content-viewport>
+                <swp-content-track>
+                    <swp-scrollable-content>
+                        <swp-time-grid>
+                            <swp-grid-lines></swp-grid-lines>
+                            <swp-day-columns></swp-day-columns>
+                        </swp-time-grid>
+                    </swp-scrollable-content>
+                </swp-content-track>
+            </swp-content-viewport>
+        </swp-grid-container>
+    </swp-calendar-container>
+</div>
diff --git a/PlanTempus.Application/Features/Calendar/Pages/Index.cshtml.cs b/PlanTempus.Application/Features/Calendar/Pages/Index.cshtml.cs
new file mode 100644
index 0000000..c33228d
--- /dev/null
+++ b/PlanTempus.Application/Features/Calendar/Pages/Index.cshtml.cs
@@ -0,0 +1,10 @@
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace PlanTempus.Application.Features.Calendar.Pages;
+
+public class IndexModel : PageModel
+{
+    public void OnGet()
+    {
+    }
+}
diff --git a/PlanTempus.Application/Features/CashRegister/Components/ReconciliationTable/Default.cshtml b/PlanTempus.Application/Features/CashRegister/Components/ReconciliationTable/Default.cshtml
index a341694..840525f 100644
--- a/PlanTempus.Application/Features/CashRegister/Components/ReconciliationTable/Default.cshtml
+++ b/PlanTempus.Application/Features/CashRegister/Components/ReconciliationTable/Default.cshtml
@@ -64,7 +64,7 @@
                 <swp-row-detail-actions>
                     <swp-btn class="secondary" data-zreport="043">
                         <i class="ph ph-file-pdf"></i>
-                        <span localize="cash.table.downloadPdf">Download PDF</span>
+                        <span localize="cash.table.downloadPdf">Download Z-Rapport</span>
                     </swp-btn>
                     <swp-btn class="primary">
                         <i class="ph ph-list-bullets"></i>
@@ -95,7 +95,7 @@
                 <swp-row-detail-actions>
                     <swp-btn class="secondary" data-zreport="042">
                         <i class="ph ph-file-pdf"></i>
-                        <span localize="cash.table.downloadPdf">Download PDF</span>
+                        <span localize="cash.table.downloadPdf">Download Z-Rapport</span>
                     </swp-btn>
                     <swp-btn class="primary">
                         <i class="ph ph-list-bullets"></i>
@@ -126,7 +126,7 @@
                 <swp-row-detail-actions>
                     <swp-btn class="secondary" data-zreport="041">
                         <i class="ph ph-file-pdf"></i>
-                        <span localize="cash.table.downloadPdf">Download PDF</span>
+                        <span localize="cash.table.downloadPdf">Download Z-Rapport</span>
                     </swp-btn>
                     <swp-btn class="primary">
                         <i class="ph ph-list-bullets"></i>
@@ -157,7 +157,7 @@
                 <swp-row-detail-actions>
                     <swp-btn class="secondary" data-zreport="040">
                         <i class="ph ph-file-pdf"></i>
-                        <span localize="cash.table.downloadPdf">Download PDF</span>
+                        <span localize="cash.table.downloadPdf">Download Z_Rapport</span>
                     </swp-btn>
                     <swp-btn class="primary">
                         <i class="ph ph-list-bullets"></i>
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailActivity/CustomerDetailActivityViewComponent.cs b/PlanTempus.Application/Features/Customers/Components/CustomerDetailActivity/CustomerDetailActivityViewComponent.cs
new file mode 100644
index 0000000..523eefd
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailActivity/CustomerDetailActivityViewComponent.cs
@@ -0,0 +1,117 @@
+using Microsoft.AspNetCore.Mvc;
+using PlanTempus.Application.Features.Localization.Services;
+using System.Globalization;
+
+namespace PlanTempus.Application.Features.Customers.Components;
+
+public class CustomerDetailActivityViewComponent : ViewComponent
+{
+    private readonly ILocalizationService _localization;
+
+    public CustomerDetailActivityViewComponent(ILocalizationService localization)
+    {
+        _localization = localization;
+    }
+
+    public IViewComponentResult Invoke(string customerId)
+    {
+        var customer = CustomerDetailCatalog.Get(customerId);
+        var culture = new CultureInfo("da-DK");
+        var today = DateTime.Today;
+
+        // Group activities by date
+        var groupedActivities = customer.Activity
+            .OrderByDescending(a => DateTime.Parse(a.Date))
+            .ThenByDescending(a => a.Time)
+            .GroupBy(a => a.Date)
+            .Select(g =>
+            {
+                var date = DateTime.Parse(g.Key);
+                string dateHeader;
+                if (date.Date == today)
+                {
+                    dateHeader = "I dag";
+                }
+                else if (date.Date == today.AddDays(-1))
+                {
+                    dateHeader = "I gar";
+                }
+                else
+                {
+                    dateHeader = date.ToString("d. MMMM yyyy", culture);
+                }
+
+                return new ActivityDateGroupViewModel
+                {
+                    DateHeader = dateHeader,
+                    Items = g.Select(a => new ActivityItemViewModel
+                    {
+                        Time = a.Time,
+                        Type = a.Type,
+                        Icon = a.Icon,
+                        Title = a.Title,
+                        Actor = a.Actor,
+                        Badges = a.Badges.Select(b => new ActivityBadgeViewModel
+                        {
+                            Text = char.ToUpper(b[0]) + b[1..],
+                            CssClass = b.ToLowerInvariant()
+                        }).ToList()
+                    }).ToList()
+                };
+            })
+            .ToList();
+
+        var model = new CustomerDetailActivityViewModel
+        {
+            DateGroups = groupedActivities,
+            Filters = new List<ActivityFilterViewModel>
+            {
+                new() { Label = "Alle", Type = null, Icon = null, IsActive = true },
+                new() { Label = "Bookinger", Type = "booking", Icon = "calendar" },
+                new() { Label = "Kommunikation", Type = "communication", Icon = "envelope" },
+                new() { Label = "Ændringer", Type = "edit", Icon = "pencil-simple" },
+                new() { Label = "Betalinger", Type = "payment", Icon = "credit-card" },
+                new() { Label = "Advarsler", Type = "warning", Icon = "warning" },
+                new() { Label = "Kunde", Type = "customer", Icon = "user" }
+            }
+        };
+
+        return View(model);
+    }
+}
+
+public class CustomerDetailActivityViewModel
+{
+    public List<ActivityDateGroupViewModel> DateGroups { get; init; } = new();
+    public List<ActivityFilterViewModel> Filters { get; init; } = new();
+}
+
+public class ActivityFilterViewModel
+{
+    public required string Label { get; init; }
+    public string? Type { get; init; }
+    public string? Icon { get; init; }
+    public bool IsActive { get; init; }
+}
+
+public class ActivityDateGroupViewModel
+{
+    public required string DateHeader { get; init; }
+    public List<ActivityItemViewModel> Items { get; init; } = new();
+}
+
+public class ActivityItemViewModel
+{
+    public required string Time { get; init; }
+    public required string Type { get; init; }
+    public required string Icon { get; init; }
+    public required string Title { get; init; }
+    public string? Actor { get; init; }
+    public List<ActivityBadgeViewModel> Badges { get; init; } = new();
+}
+
+public class ActivityBadgeViewModel
+{
+    public required string Text { get; init; }
+    public required string CssClass { get; init; }
+}
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailActivity/Default.cshtml b/PlanTempus.Application/Features/Customers/Components/CustomerDetailActivity/Default.cshtml
new file mode 100644
index 0000000..c78d1f5
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailActivity/Default.cshtml
@@ -0,0 +1,83 @@
+@model PlanTempus.Application.Features.Customers.Components.CustomerDetailActivityViewModel
+
+<!-- Filters -->
+<swp-activity-filters>
+    @foreach (var filter in Model.Filters)
+    {
+        <swp-activity-filter class="@(filter.IsActive ? "active" : "")" data-type="@(filter.Type ?? "all")">
+            @if (!string.IsNullOrEmpty(filter.Icon))
+            {
+                <i class="ph ph-@filter.Icon"></i>
+            }
+            @filter.Label
+        </swp-activity-filter>
+    }
+</swp-activity-filters>
+
+<swp-card>
+    <swp-activity-timeline>
+        @foreach (var dateGroup in Model.DateGroups)
+        {
+            <swp-activity-date-group>
+                <swp-activity-date-header>@dateGroup.DateHeader</swp-activity-date-header>
+
+                @foreach (var item in dateGroup.Items)
+                {
+                    <swp-activity-item data-type="@item.Type">
+                        <swp-activity-icon class="@item.Type"><i class="ph ph-@item.Icon"></i></swp-activity-icon>
+                        <swp-activity-content>
+                            <swp-activity-title>
+                                @Html.Raw(item.Title)
+                                @foreach (var badge in item.Badges)
+                                {
+                                    <swp-activity-badge class="@badge.CssClass">@badge.Text</swp-activity-badge>
+                                }
+                            </swp-activity-title>
+                            <swp-activity-meta>
+                                <swp-activity-time>@item.Time</swp-activity-time>
+                                @if (!string.IsNullOrEmpty(item.Actor))
+                                {
+                                    <swp-activity-actor>@item.Actor</swp-activity-actor>
+                                }
+                            </swp-activity-meta>
+                        </swp-activity-content>
+                    </swp-activity-item>
+                }
+            </swp-activity-date-group>
+        }
+    </swp-activity-timeline>
+</swp-card>
+
+<script>
+(function() {
+    const filters = document.querySelectorAll('swp-activity-filter');
+    const timeline = document.querySelector('swp-activity-timeline');
+
+    filters.forEach(filter => {
+        filter.addEventListener('click', () => {
+            // Update active state
+            filters.forEach(f => f.classList.remove('active'));
+            filter.classList.add('active');
+
+            const filterType = filter.dataset.type;
+
+            // Filter items
+            const items = timeline.querySelectorAll('swp-activity-item');
+            items.forEach(item => {
+                if (filterType === 'all' || item.dataset.type === filterType) {
+                    item.style.display = '';
+                } else {
+                    item.style.display = 'none';
+                }
+            });
+
+            // Hide date groups with no visible items
+            const dateGroups = timeline.querySelectorAll('swp-activity-date-group');
+            dateGroups.forEach(group => {
+                const visibleItems = group.querySelectorAll('swp-activity-item:not([style*="display: none"])');
+                group.style.display = visibleItems.length > 0 ? '' : 'none';
+            });
+        });
+    });
+})();
+</script>
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailAppointments/CustomerDetailAppointmentsViewComponent.cs b/PlanTempus.Application/Features/Customers/Components/CustomerDetailAppointments/CustomerDetailAppointmentsViewComponent.cs
new file mode 100644
index 0000000..a3790c9
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailAppointments/CustomerDetailAppointmentsViewComponent.cs
@@ -0,0 +1,98 @@
+using Microsoft.AspNetCore.Mvc;
+using PlanTempus.Application.Features.Localization.Services;
+using System.Globalization;
+
+namespace PlanTempus.Application.Features.Customers.Components;
+
+public class CustomerDetailAppointmentsViewComponent : ViewComponent
+{
+    private readonly ILocalizationService _localization;
+
+    public CustomerDetailAppointmentsViewComponent(ILocalizationService localization)
+    {
+        _localization = localization;
+    }
+
+    public IViewComponentResult Invoke(string customerId)
+    {
+        var customer = CustomerDetailCatalog.Get(customerId);
+        var culture = new CultureInfo("da-DK");
+
+        var model = new CustomerDetailAppointmentsViewModel
+        {
+            UpcomingTitle = "Kommende aftaler",
+            HistoryTitle = "Tidligere aftaler",
+            MoveButtonText = "Flyt",
+            CancelButtonText = "Aflys",
+            SeeAllText = "Se alle aftaler ->",
+            DateHeader = "Dato",
+            ServiceHeader = "Service",
+            HairdresserHeader = "Frisor",
+            DurationHeader = "Varighed",
+            PriceHeader = "Pris",
+            Upcoming = customer.Appointments.Upcoming.Select(a =>
+            {
+                var dateText = a.Date;
+                if (DateTime.TryParse(a.Date, out var date))
+                {
+                    dateText = date.ToString("dddd d. MMMM yyyy", culture);
+                    dateText = char.ToUpper(dateText[0]) + dateText[1..];
+                }
+                return new UpcomingAppointmentViewModel
+                {
+                    FormattedDate = $"{dateText} kl. {a.Time}",
+                    Details = $"{a.Service} - {a.Hairdresser} - {a.Duration}"
+                };
+            }).ToList(),
+            History = customer.Appointments.History.Select(a =>
+            {
+                var dateText = a.Date;
+                if (DateTime.TryParse(a.Date, out var date))
+                {
+                    dateText = date.ToString("d. MMM yyyy", culture);
+                }
+                return new HistoryAppointmentViewModel
+                {
+                    FormattedDate = dateText,
+                    Service = a.Service,
+                    Hairdresser = a.Hairdresser,
+                    Duration = a.Duration,
+                    FormattedPrice = $"{a.Price:N0} kr".Replace(",", ".")
+                };
+            }).ToList()
+        };
+
+        return View(model);
+    }
+}
+
+public class CustomerDetailAppointmentsViewModel
+{
+    public required string UpcomingTitle { get; init; }
+    public required string HistoryTitle { get; init; }
+    public required string MoveButtonText { get; init; }
+    public required string CancelButtonText { get; init; }
+    public required string SeeAllText { get; init; }
+    public required string DateHeader { get; init; }
+    public required string ServiceHeader { get; init; }
+    public required string HairdresserHeader { get; init; }
+    public required string DurationHeader { get; init; }
+    public required string PriceHeader { get; init; }
+    public List<UpcomingAppointmentViewModel> Upcoming { get; init; } = new();
+    public List<HistoryAppointmentViewModel> History { get; init; } = new();
+}
+
+public class UpcomingAppointmentViewModel
+{
+    public required string FormattedDate { get; init; }
+    public required string Details { get; init; }
+}
+
+public class HistoryAppointmentViewModel
+{
+    public required string FormattedDate { get; init; }
+    public required string Service { get; init; }
+    public required string Hairdresser { get; init; }
+    public required string Duration { get; init; }
+    public required string FormattedPrice { get; init; }
+}
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailAppointments/Default.cshtml b/PlanTempus.Application/Features/Customers/Components/CustomerDetailAppointments/Default.cshtml
new file mode 100644
index 0000000..af0beda
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailAppointments/Default.cshtml
@@ -0,0 +1,64 @@
+@model PlanTempus.Application.Features.Customers.Components.CustomerDetailAppointmentsViewModel
+
+<swp-detail-grid>
+    <!-- Left Column -->
+    <swp-card-column>
+        <!-- Kommende aftaler -->
+        <swp-card>
+            <swp-card-header>
+                <swp-card-title>@Model.UpcomingTitle</swp-card-title>
+            </swp-card-header>
+            @foreach (var appointment in Model.Upcoming)
+            {
+                <swp-appointment-card>
+                    <swp-appointment-date>
+                        @appointment.FormattedDate
+                    </swp-appointment-date>
+                    <swp-appointment-details>
+                        @appointment.Details
+                    </swp-appointment-details>
+                    <swp-appointment-actions>
+                        <swp-btn class="secondary">@Model.MoveButtonText</swp-btn>
+                        <swp-btn class="secondary">@Model.CancelButtonText</swp-btn>
+                    </swp-appointment-actions>
+                </swp-appointment-card>
+            }
+            @if (!Model.Upcoming.Any())
+            {
+                <swp-empty-state>
+                    <p>Ingen kommende aftaler</p>
+                </swp-empty-state>
+            }
+        </swp-card>
+    </swp-card-column>
+
+    <!-- Right Column -->
+    <swp-card-column>
+        <!-- Tidligere aftaler -->
+        <swp-card>
+            <swp-card-header>
+                <swp-card-title>@Model.HistoryTitle</swp-card-title>
+            </swp-card-header>
+            <swp-table>
+                <swp-table-header>
+                    <span>@Model.DateHeader</span>
+                    <span>@Model.ServiceHeader</span>
+                    <span>@Model.HairdresserHeader</span>
+                    <span>@Model.DurationHeader</span>
+                    <span>@Model.PriceHeader</span>
+                </swp-table-header>
+                @foreach (var appointment in Model.History)
+                {
+                    <swp-table-row>
+                        <span>@appointment.FormattedDate</span>
+                        <span>@appointment.Service</span>
+                        <span>@appointment.Hairdresser</span>
+                        <span>@appointment.Duration</span>
+                        <span class="mono">@appointment.FormattedPrice</span>
+                    </swp-table-row>
+                }
+            </swp-table>
+            <swp-see-all>@Model.SeeAllText</swp-see-all>
+        </swp-card>
+    </swp-card-column>
+</swp-detail-grid>
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailCatalog.cs b/PlanTempus.Application/Features/Customers/Components/CustomerDetailCatalog.cs
new file mode 100644
index 0000000..179e088
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailCatalog.cs
@@ -0,0 +1,301 @@
+using System.Text.Json;
+
+namespace PlanTempus.Application.Features.Customers.Components;
+
+/// <summary>
+/// Shared catalog for customer detail data.
+/// Loads from customerDetailMock.json and used by all CustomerDetail* ViewComponents.
+/// </summary>
+public static class CustomerDetailCatalog
+{
+    private static readonly JsonSerializerOptions JsonOptions = new()
+    {
+        PropertyNameCaseInsensitive = true
+    };
+
+    private static Dictionary<string, CustomerDetailRecord>? _customers;
+
+    private static Dictionary<string, CustomerDetailRecord> Customers
+    {
+        get
+        {
+            if (_customers == null)
+            {
+                var jsonPath = Path.Combine(
+                    AppDomain.CurrentDomain.BaseDirectory,
+                    "Features", "Customers", "Data", "customerDetailMock.json");
+                var json = File.ReadAllText(jsonPath);
+                _customers = JsonSerializer.Deserialize<Dictionary<string, CustomerDetailRecord>>(json, JsonOptions)
+                    ?? new Dictionary<string, CustomerDetailRecord>();
+            }
+            return _customers;
+        }
+    }
+
+    public static CustomerDetailRecord Get(string customerId)
+    {
+        if (!Customers.TryGetValue(customerId, out var customer))
+            throw new KeyNotFoundException($"Customer with id '{customerId}' not found");
+        return customer;
+    }
+
+    public static IEnumerable<string> AllIds => Customers.Keys;
+}
+
+// Root record for customer detail
+public record CustomerDetailRecord
+{
+    public required string Id { get; init; }
+    public required CustomerHeaderRecord Header { get; init; }
+    public required CustomerContactRecord Contact { get; init; }
+    public List<CustomerProfileItem> Profile { get; init; } = new();
+    public required CustomerMarketingRecord Marketing { get; init; }
+    public required CustomerPaymentRecord Payment { get; init; }
+    public required CustomerPreferencesRecord Preferences { get; init; }
+    public List<CustomerWarningItem> Warnings { get; init; } = new();
+    public required CustomerGroupRecord Group { get; init; }
+    public List<CustomerRelationRecord> Relations { get; init; } = new();
+    public required CustomerStatisticsRecord Statistics { get; init; }
+    public List<CustomerJournalEntry> Journal { get; init; } = new();
+    public required CustomerAppointmentsRecord Appointments { get; init; }
+    public required CustomerGiftcardsRecord Giftcards { get; init; }
+    public List<CustomerActivityEntry> Activity { get; init; } = new();
+    public CustomerEconomyRecord? Economy { get; init; }
+}
+
+// Header section
+public record CustomerHeaderRecord
+{
+    public required string Initials { get; init; }
+    public required string Name { get; init; }
+    public required string CustomerSince { get; init; }
+    public List<string> Tags { get; init; } = new();
+    public bool BookingAllowed { get; init; }
+    public required CustomerFactsRecord Facts { get; init; }
+}
+
+public record CustomerFactsRecord
+{
+    public int Visits { get; init; }
+    public int AvgIntervalDays { get; init; }
+    public required string PreferredHairdresser { get; init; }
+    public decimal TotalRevenue { get; init; }
+}
+
+// Contact section
+public record CustomerContactRecord
+{
+    public required string Phone { get; init; }
+    public required string Email { get; init; }
+    public required string Address { get; init; }
+    public required string Zip { get; init; }
+    public required string City { get; init; }
+}
+
+// Profile item (flexible)
+public record CustomerProfileItem
+{
+    public required string Title { get; init; }
+    public required string Value { get; init; }
+}
+
+// Marketing settings
+public record CustomerMarketingRecord
+{
+    public bool EmailOptIn { get; init; }
+    public bool SmsOptIn { get; init; }
+}
+
+// Payment settings
+public record CustomerPaymentRecord
+{
+    public bool RequirePrepayment { get; init; }
+    public bool AllowPartialPayment { get; init; }
+}
+
+// Preferences
+public record CustomerPreferencesRecord
+{
+    public required string PreferredHairdresser { get; init; }
+    public required string PreferredDays { get; init; }
+    public required string SpecialRequests { get; init; }
+}
+
+// Warning item (flexible)
+public record CustomerWarningItem
+{
+    public required string Title { get; init; }
+    public required string Value { get; init; }
+}
+
+// Group
+public record CustomerGroupRecord
+{
+    public required string GroupId { get; init; }
+    public required string GroupName { get; init; }
+}
+
+// Relation
+public record CustomerRelationRecord
+{
+    public required string Id { get; init; }
+    public required string Name { get; init; }
+    public required string Initials { get; init; }
+    public required string Type { get; init; }
+}
+
+// Statistics
+public record CustomerStatisticsRecord
+{
+    public required CustomerAttendanceRecord Attendance { get; init; }
+    public List<CustomerTopItem> TopServices { get; init; } = new();
+    public List<CustomerTopItem> TopProducts { get; init; } = new();
+    public required CustomerBookingBehaviorRecord BookingBehavior { get; init; }
+    public required CustomerLoyaltyRecord Loyalty { get; init; }
+}
+
+public record CustomerAttendanceRecord
+{
+    public int Attended { get; init; }
+    public int Cancelled { get; init; }
+    public int NoShow { get; init; }
+    public int ReliabilityPercent { get; init; }
+}
+
+public record CustomerTopItem
+{
+    public required string Name { get; init; }
+    public int Count { get; init; }
+}
+
+public record CustomerBookingBehaviorRecord
+{
+    public int AvgBookingNoticeDays { get; init; }
+    public required string PreferredDay { get; init; }
+    public required string PreferredTimeSlot { get; init; }
+    public int OnlineBookingRate { get; init; }
+    public int AvgCancellationNoticeDays { get; init; }
+}
+
+public record CustomerLoyaltyRecord
+{
+    public double CustomerSinceYears { get; init; }
+    public int DaysSinceLastVisit { get; init; }
+    public required string ChurnRisk { get; init; }
+    public int AvgIntervalDays { get; init; }
+}
+
+// Journal
+public record CustomerJournalEntry
+{
+    public required string Id { get; init; }
+    public required string Type { get; init; }
+    public required string Tag { get; init; }
+    public List<string> Subtags { get; init; } = new();
+    public required string Text { get; init; }
+    public required string Date { get; init; }
+    public required string Author { get; init; }
+}
+
+// Appointments
+public record CustomerAppointmentsRecord
+{
+    public List<CustomerUpcomingAppointment> Upcoming { get; init; } = new();
+    public List<CustomerHistoryAppointment> History { get; init; } = new();
+}
+
+public record CustomerUpcomingAppointment
+{
+    public required string Date { get; init; }
+    public required string Time { get; init; }
+    public required string Service { get; init; }
+    public required string Hairdresser { get; init; }
+    public required string Duration { get; init; }
+}
+
+public record CustomerHistoryAppointment
+{
+    public required string Date { get; init; }
+    public required string Service { get; init; }
+    public required string Hairdresser { get; init; }
+    public required string Duration { get; init; }
+    public decimal Price { get; init; }
+}
+
+// Giftcards
+public record CustomerGiftcardsRecord
+{
+    public List<CustomerGiftcardItem> Active { get; init; } = new();
+    public List<CustomerGiftcardItem> Expired { get; init; } = new();
+}
+
+public record CustomerGiftcardItem
+{
+    public required string Id { get; init; }
+    public required string Type { get; init; }
+    public required string Label { get; init; }
+    public decimal? OriginalValue { get; init; }
+    public decimal? CurrentBalance { get; init; }
+    public int? TotalPunches { get; init; }
+    public int? UsedPunches { get; init; }
+    public string? ExpiresAt { get; init; }
+}
+
+// Activity
+public record CustomerActivityEntry
+{
+    public required string Date { get; init; }
+    public required string Time { get; init; }
+    public required string Type { get; init; }
+    public required string Icon { get; init; }
+    public required string Title { get; init; }
+    public string? Actor { get; init; }
+    public List<string> Badges { get; init; } = new();
+}
+
+// Economy
+public record CustomerEconomyRecord
+{
+    public required CustomerYearRevenue CurrentYear { get; init; }
+    public required CustomerYearRevenue LastYear { get; init; }
+    public decimal AvgPerVisit { get; init; }
+    public decimal AvgPerMonth { get; init; }
+    public CustomerChartData? ChartData { get; init; }
+    public List<CustomerPurchase> Purchases { get; init; } = new();
+}
+
+public record CustomerChartData
+{
+    public List<string> Categories { get; init; } = new();
+    public List<CustomerChartSeries> Series { get; init; } = new();
+}
+
+public record CustomerChartSeries
+{
+    public required string Name { get; init; }
+    public required string Color { get; init; }
+    public List<CustomerChartDataPoint> Data { get; init; } = new();
+}
+
+public record CustomerChartDataPoint
+{
+    public required string X { get; init; }
+    public decimal Y { get; init; }
+}
+
+public record CustomerYearRevenue
+{
+    public int Year { get; init; }
+    public decimal Total { get; init; }
+}
+
+public record CustomerPurchase
+{
+    public required string Invoice { get; init; }
+    public required string Date { get; init; }
+    public required string Time { get; init; }
+    public required string Employee { get; init; }
+    public required string Services { get; init; }
+    public required string Type { get; init; }
+    public decimal Amount { get; init; }
+}
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailEconomy/CustomerDetailEconomyViewComponent.cs b/PlanTempus.Application/Features/Customers/Components/CustomerDetailEconomy/CustomerDetailEconomyViewComponent.cs
new file mode 100644
index 0000000..6d24cc6
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailEconomy/CustomerDetailEconomyViewComponent.cs
@@ -0,0 +1,145 @@
+using Microsoft.AspNetCore.Mvc;
+using PlanTempus.Application.Features.Localization.Services;
+
+namespace PlanTempus.Application.Features.Customers.Components;
+
+public class CustomerDetailEconomyViewComponent : ViewComponent
+{
+    private readonly ILocalizationService _localization;
+
+    public CustomerDetailEconomyViewComponent(ILocalizationService localization)
+    {
+        _localization = localization;
+    }
+
+    public IViewComponentResult Invoke(string customerId)
+    {
+        var customer = CustomerDetailCatalog.Get(customerId);
+        var economy = customer.Economy;
+
+        var model = new CustomerDetailEconomyViewModel
+        {
+            HasData = economy != null,
+
+            // Stat cards
+            CurrentYearValue = economy != null ? $"{economy.CurrentYear.Total:N0} kr".Replace(",", ".") : "-",
+            CurrentYearLabel = string.Format(_localization.Get("customers.detail.economy.thisYear"), economy?.CurrentYear.Year ?? DateTime.Now.Year),
+            LastYearValue = economy != null ? $"{economy.LastYear.Total:N0} kr".Replace(",", ".") : "-",
+            LastYearLabel = _localization.Get("customers.detail.economy.lastYear"),
+            AvgPerVisitValue = economy != null ? $"{economy.AvgPerVisit:N0} kr".Replace(",", ".") : "-",
+            AvgPerVisitLabel = _localization.Get("customers.detail.economy.avgPerVisit"),
+            AvgPerMonthValue = economy != null ? $"{economy.AvgPerMonth:N0} kr".Replace(",", ".") : "-",
+            AvgPerMonthLabel = _localization.Get("customers.detail.economy.avgPerMonth"),
+
+            // Chart card
+            RevenueOverTimeTitle = _localization.Get("customers.detail.economy.revenueOverTime"),
+            ServicesLabel = _localization.Get("customers.detail.economy.services"),
+            ProductsLabel = _localization.Get("customers.detail.economy.products"),
+            ChartData = economy?.ChartData != null ? new CustomerChartDataViewModel
+            {
+                Categories = economy.ChartData.Categories,
+                Series = economy.ChartData.Series.Select(s => new CustomerChartSeriesViewModel
+                {
+                    Name = s.Name,
+                    Color = s.Color,
+                    Data = s.Data.Select(d => new CustomerChartDataPointViewModel
+                    {
+                        X = d.X,
+                        Y = d.Y
+                    }).ToList()
+                }).ToList()
+            } : null,
+
+            // Purchase history
+            PurchaseHistoryTitle = _localization.Get("customers.detail.economy.purchaseHistory"),
+            Purchases = economy?.Purchases.Take(5).Select(p => new CustomerPurchaseViewModel
+            {
+                Invoice = p.Invoice,
+                Date = FormatDate(p.Date),
+                Time = p.Time,
+                Employee = p.Employee,
+                Services = p.Services,
+                Type = p.Type,
+                TypeLabel = p.Type == "service"
+                    ? _localization.Get("customers.detail.economy.services")
+                    : _localization.Get("customers.detail.economy.products"),
+                Amount = $"{p.Amount:N0} kr".Replace(",", ".")
+            }).ToList() ?? new List<CustomerPurchaseViewModel>(),
+            SeeAllText = _localization.Get("customers.detail.economy.seeAll"),
+
+            // Empty state
+            EmptyStateText = _localization.Get("customers.detail.economy.noData")
+        };
+
+        return View(model);
+    }
+
+    private static string FormatDate(string dateStr)
+    {
+        if (DateTime.TryParse(dateStr, out var date))
+        {
+            return date.ToString("d. MMM yyyy", new System.Globalization.CultureInfo("da-DK"));
+        }
+        return dateStr;
+    }
+}
+
+public class CustomerDetailEconomyViewModel
+{
+    public bool HasData { get; init; }
+
+    // Stat cards
+    public required string CurrentYearValue { get; init; }
+    public required string CurrentYearLabel { get; init; }
+    public required string LastYearValue { get; init; }
+    public required string LastYearLabel { get; init; }
+    public required string AvgPerVisitValue { get; init; }
+    public required string AvgPerVisitLabel { get; init; }
+    public required string AvgPerMonthValue { get; init; }
+    public required string AvgPerMonthLabel { get; init; }
+
+    // Chart card
+    public required string RevenueOverTimeTitle { get; init; }
+    public required string ServicesLabel { get; init; }
+    public required string ProductsLabel { get; init; }
+    public CustomerChartDataViewModel? ChartData { get; init; }
+
+    // Purchase history
+    public required string PurchaseHistoryTitle { get; init; }
+    public List<CustomerPurchaseViewModel> Purchases { get; init; } = new();
+    public required string SeeAllText { get; init; }
+
+    // Empty state
+    public required string EmptyStateText { get; init; }
+}
+
+public class CustomerPurchaseViewModel
+{
+    public required string Invoice { get; init; }
+    public required string Date { get; init; }
+    public required string Time { get; init; }
+    public required string Employee { get; init; }
+    public required string Services { get; init; }
+    public required string Type { get; init; }
+    public required string TypeLabel { get; init; }
+    public required string Amount { get; init; }
+}
+
+public class CustomerChartDataViewModel
+{
+    public List<string> Categories { get; init; } = new();
+    public List<CustomerChartSeriesViewModel> Series { get; init; } = new();
+}
+
+public class CustomerChartSeriesViewModel
+{
+    public required string Name { get; init; }
+    public required string Color { get; init; }
+    public List<CustomerChartDataPointViewModel> Data { get; init; } = new();
+}
+
+public class CustomerChartDataPointViewModel
+{
+    public required string X { get; init; }
+    public decimal Y { get; init; }
+}
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailEconomy/Default.cshtml b/PlanTempus.Application/Features/Customers/Components/CustomerDetailEconomy/Default.cshtml
new file mode 100644
index 0000000..18578a0
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailEconomy/Default.cshtml
@@ -0,0 +1,102 @@
+@using System.Text.Json
+@model PlanTempus.Application.Features.Customers.Components.CustomerDetailEconomyViewModel
+
+@if (!Model.HasData)
+{
+    <swp-empty-state>
+        <i class="ph ph-currency-circle-dollar"></i>
+        <span>@Model.EmptyStateText</span>
+    </swp-empty-state>
+}
+else
+{
+    <swp-detail-grid>
+        <!-- Stat Cards -->
+        <swp-stats-row class="cols-4 full-width">
+            <swp-stat-card class="highlight">
+                <swp-stat-value>@Model.CurrentYearValue</swp-stat-value>
+                <swp-stat-label>@Model.CurrentYearLabel</swp-stat-label>
+            </swp-stat-card>
+            <swp-stat-card>
+                <swp-stat-value>@Model.LastYearValue</swp-stat-value>
+                <swp-stat-label>@Model.LastYearLabel</swp-stat-label>
+            </swp-stat-card>
+            <swp-stat-card>
+                <swp-stat-value>@Model.AvgPerVisitValue</swp-stat-value>
+                <swp-stat-label>@Model.AvgPerVisitLabel</swp-stat-label>
+            </swp-stat-card>
+            <swp-stat-card>
+                <swp-stat-value>@Model.AvgPerMonthValue</swp-stat-value>
+                <swp-stat-label>@Model.AvgPerMonthLabel</swp-stat-label>
+            </swp-stat-card>
+        </swp-stats-row>
+
+        <!-- Revenue Chart Card -->
+        <swp-card class="full-width">
+            <swp-card-header>
+                <swp-card-title>@Model.RevenueOverTimeTitle</swp-card-title>
+                <swp-chart-legend>
+                    <swp-chart-legend-item>
+                        <swp-chart-legend-dot class="services"></swp-chart-legend-dot>
+                        <span>@Model.ServicesLabel</span>
+                    </swp-chart-legend-item>
+                    <swp-chart-legend-item>
+                        <swp-chart-legend-dot class="products"></swp-chart-legend-dot>
+                        <span>@Model.ProductsLabel</span>
+                    </swp-chart-legend-item>
+                </swp-chart-legend>
+            </swp-card-header>
+@if (Model.ChartData != null)
+            {
+                <swp-chart-container id="customerRevenueChart"></swp-chart-container>
+                <script id="customerRevenueChartData" type="application/json">@Html.Raw(JsonSerializer.Serialize(Model.ChartData, new JsonSerializerOptions { PropertyNamingPolicy = JsonNamingPolicy.CamelCase }))</script>
+            }
+            else
+            {
+                <swp-chart-container>
+                    <!-- No chart data available -->
+                </swp-chart-container>
+            }
+        </swp-card>
+
+        <!-- Purchase History Card -->
+        <swp-card class="customer-economy full-width">
+            <swp-card-header>
+                <swp-card-title>@Model.PurchaseHistoryTitle</swp-card-title>
+            </swp-card-header>
+            <swp-data-table>
+                <swp-data-table-header>
+                    <swp-data-table-cell>Faktura</swp-data-table-cell>
+                    <swp-data-table-cell>Dato/tid</swp-data-table-cell>
+                    <swp-data-table-cell>Medarbejder</swp-data-table-cell>
+                    <swp-data-table-cell>Ydelser</swp-data-table-cell>
+                    <swp-data-table-cell>Type</swp-data-table-cell>
+                    <swp-data-table-cell>Beløb</swp-data-table-cell>
+                </swp-data-table-header>
+                @foreach (var purchase in Model.Purchases)
+                {
+                    <swp-data-table-row>
+                        <swp-data-table-cell>
+                            <swp-invoice-cell>@purchase.Invoice</swp-invoice-cell>
+                        </swp-data-table-cell>
+                        <swp-data-table-cell>
+                            <swp-datetime-cell>
+                                <span class="date">@purchase.Date</span>
+                                <span class="time">@purchase.Time</span>
+                            </swp-datetime-cell>
+                        </swp-data-table-cell>
+                        <swp-data-table-cell class="muted">@purchase.Employee</swp-data-table-cell>
+                        <swp-data-table-cell>@purchase.Services</swp-data-table-cell>
+                        <swp-data-table-cell>
+                            <swp-tag class="@purchase.Type">@purchase.TypeLabel</swp-tag>
+                        </swp-data-table-cell>
+                        <swp-data-table-cell>
+                            <swp-amount-cell>@purchase.Amount</swp-amount-cell>
+                        </swp-data-table-cell>
+                    </swp-data-table-row>
+                }
+            </swp-data-table>
+            <swp-see-all>@Model.SeeAllText</swp-see-all>
+        </swp-card>
+    </swp-detail-grid>
+}
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailGiftcards/CustomerDetailGiftcardsViewComponent.cs b/PlanTempus.Application/Features/Customers/Components/CustomerDetailGiftcards/CustomerDetailGiftcardsViewComponent.cs
new file mode 100644
index 0000000..694452a
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailGiftcards/CustomerDetailGiftcardsViewComponent.cs
@@ -0,0 +1,93 @@
+using Microsoft.AspNetCore.Mvc;
+using PlanTempus.Application.Features.Localization.Services;
+using System.Globalization;
+
+namespace PlanTempus.Application.Features.Customers.Components;
+
+public class CustomerDetailGiftcardsViewComponent : ViewComponent
+{
+    private readonly ILocalizationService _localization;
+
+    public CustomerDetailGiftcardsViewComponent(ILocalizationService localization)
+    {
+        _localization = localization;
+    }
+
+    public IViewComponentResult Invoke(string customerId)
+    {
+        var customer = CustomerDetailCatalog.Get(customerId);
+        var culture = new CultureInfo("da-DK");
+
+        // Separate giftcards and punchcards
+        var giftcards = customer.Giftcards.Active.Where(g => g.Type == "giftcard").ToList();
+        var punchcards = customer.Giftcards.Active.Where(g => g.Type == "punchcard").ToList();
+
+        var model = new CustomerDetailGiftcardsViewModel
+        {
+            GiftcardsTitle = "Aktive gavekort",
+            PunchcardsTitle = "Klippekort",
+            ExpiredTitle = "Udlobne / Brugte",
+            NoExpiredText = "Ingen udlobne eller brugte kort",
+            Giftcards = giftcards.Select(g =>
+            {
+                var expiresText = "Udlober aldrig";
+                if (!string.IsNullOrEmpty(g.ExpiresAt) && DateTime.TryParse(g.ExpiresAt, out var expires))
+                {
+                    expiresText = $"Udlober: {expires.ToString("d. MMMM yyyy", culture)}";
+                }
+                var percentage = g.OriginalValue > 0 ? (int)((g.CurrentBalance ?? 0) / g.OriginalValue * 100) : 0;
+                return new GiftcardItemViewModel
+                {
+                    Label = g.Label,
+                    BalanceText = $"Saldo: <strong>{g.CurrentBalance:N0} kr</strong> (af {g.OriginalValue:N0} kr)".Replace(",", "."),
+                    ExpiresText = expiresText,
+                    Percentage = percentage
+                };
+            }).ToList(),
+            Punchcards = punchcards.Select(p =>
+            {
+                var expiresText = "Udlober aldrig";
+                if (!string.IsNullOrEmpty(p.ExpiresAt) && DateTime.TryParse(p.ExpiresAt, out var expires))
+                {
+                    expiresText = $"Udlober: {expires.ToString("d. MMMM yyyy", culture)}";
+                }
+                var percentage = p.TotalPunches > 0 ? (int)((p.UsedPunches ?? 0) * 100 / p.TotalPunches) : 0;
+                return new GiftcardItemViewModel
+                {
+                    Label = p.Label,
+                    BalanceText = $"Brugt: <strong>{p.UsedPunches} af {p.TotalPunches}</strong> klip",
+                    ExpiresText = expiresText,
+                    Percentage = percentage
+                };
+            }).ToList(),
+            ExpiredCards = customer.Giftcards.Expired.Select(g => new GiftcardItemViewModel
+            {
+                Label = g.Label,
+                BalanceText = "",
+                ExpiresText = "",
+                Percentage = 0
+            }).ToList()
+        };
+
+        return View(model);
+    }
+}
+
+public class CustomerDetailGiftcardsViewModel
+{
+    public required string GiftcardsTitle { get; init; }
+    public required string PunchcardsTitle { get; init; }
+    public required string ExpiredTitle { get; init; }
+    public required string NoExpiredText { get; init; }
+    public List<GiftcardItemViewModel> Giftcards { get; init; } = new();
+    public List<GiftcardItemViewModel> Punchcards { get; init; } = new();
+    public List<GiftcardItemViewModel> ExpiredCards { get; init; } = new();
+}
+
+public class GiftcardItemViewModel
+{
+    public required string Label { get; init; }
+    public required string BalanceText { get; init; }
+    public required string ExpiresText { get; init; }
+    public int Percentage { get; init; }
+}
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailGiftcards/Default.cshtml b/PlanTempus.Application/Features/Customers/Components/CustomerDetailGiftcards/Default.cshtml
new file mode 100644
index 0000000..ca55cd3
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailGiftcards/Default.cshtml
@@ -0,0 +1,81 @@
+@model PlanTempus.Application.Features.Customers.Components.CustomerDetailGiftcardsViewModel
+
+<swp-detail-grid>
+    <!-- Left Column -->
+    <swp-card-column>
+        <!-- Aktive gavekort -->
+        @if (Model.Giftcards.Any())
+        {
+            <swp-card>
+                <swp-card-header>
+                    <swp-card-title>@Model.GiftcardsTitle</swp-card-title>
+                </swp-card-header>
+                @foreach (var giftcard in Model.Giftcards)
+                {
+                    <swp-giftcard>
+                        <swp-giftcard-header>
+                            @giftcard.Label
+                        </swp-giftcard-header>
+                        <swp-giftcard-balance>
+                            @Html.Raw(giftcard.BalanceText)
+                        </swp-giftcard-balance>
+                        <swp-progress-bar>
+                            <swp-progress-fill style="width: @giftcard.Percentage%;"></swp-progress-fill>
+                        </swp-progress-bar>
+                        <swp-giftcard-expires>@giftcard.ExpiresText</swp-giftcard-expires>
+                    </swp-giftcard>
+                }
+            </swp-card>
+        }
+
+        <!-- Klippekort -->
+        @if (Model.Punchcards.Any())
+        {
+            <swp-card>
+                <swp-card-header>
+                    <swp-card-title>@Model.PunchcardsTitle</swp-card-title>
+                </swp-card-header>
+                @foreach (var punchcard in Model.Punchcards)
+                {
+                    <swp-giftcard>
+                        <swp-giftcard-header>
+                            @punchcard.Label
+                        </swp-giftcard-header>
+                        <swp-giftcard-balance>
+                            @Html.Raw(punchcard.BalanceText)
+                        </swp-giftcard-balance>
+                        <swp-progress-bar>
+                            <swp-progress-fill style="width: @punchcard.Percentage%;"></swp-progress-fill>
+                        </swp-progress-bar>
+                        <swp-giftcard-expires>@punchcard.ExpiresText</swp-giftcard-expires>
+                    </swp-giftcard>
+                }
+            </swp-card>
+        }
+    </swp-card-column>
+
+    <!-- Right Column -->
+    <swp-card-column>
+        <!-- Udlobne / Brugte -->
+        <swp-card>
+            <swp-card-header>
+                <swp-card-title>@Model.ExpiredTitle</swp-card-title>
+            </swp-card-header>
+            @if (Model.ExpiredCards.Any())
+            {
+                @foreach (var card in Model.ExpiredCards)
+                {
+                    <swp-giftcard class="expired">
+                        <swp-giftcard-header>@card.Label</swp-giftcard-header>
+                    </swp-giftcard>
+                }
+            }
+            else
+            {
+                <swp-empty-state>
+                    <p>@Model.NoExpiredText</p>
+                </swp-empty-state>
+            }
+        </swp-card>
+    </swp-card-column>
+</swp-detail-grid>
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailHeader/CustomerDetailHeaderViewComponent.cs b/PlanTempus.Application/Features/Customers/Components/CustomerDetailHeader/CustomerDetailHeaderViewComponent.cs
new file mode 100644
index 0000000..9222364
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailHeader/CustomerDetailHeaderViewComponent.cs
@@ -0,0 +1,84 @@
+using Microsoft.AspNetCore.Mvc;
+using PlanTempus.Application.Features.Localization.Services;
+
+namespace PlanTempus.Application.Features.Customers.Components;
+
+public class CustomerDetailHeaderViewComponent : ViewComponent
+{
+    private readonly ILocalizationService _localization;
+
+    public CustomerDetailHeaderViewComponent(ILocalizationService localization)
+    {
+        _localization = localization;
+    }
+
+    public IViewComponentResult Invoke(string customerId)
+    {
+        var customer = CustomerDetailCatalog.Get(customerId);
+        var header = customer.Header;
+        var contact = customer.Contact;
+
+        // Format customer since date
+        var customerSince = DateTime.TryParse(header.CustomerSince, out var date)
+            ? date.ToString("MMMM yyyy", new System.Globalization.CultureInfo("da-DK"))
+            : header.CustomerSince;
+
+        var model = new CustomerDetailHeaderViewModel
+        {
+            Initials = header.Initials,
+            Name = header.Name,
+            Tags = header.Tags.Select(t => new CustomerTagViewModel
+            {
+                Text = t.ToUpper(),
+                CssClass = t.ToLowerInvariant()
+            }).ToList(),
+            BookingAllowed = header.BookingAllowed,
+            Phone = contact.Phone,
+            PhoneHref = $"tel:{contact.Phone.Replace(" ", "")}",
+            Email = contact.Email,
+            EmailHref = $"mailto:{contact.Email}",
+            CustomerSinceText = $"Kunde siden {customerSince}",
+            FactVisits = header.Facts.Visits.ToString(),
+            FactVisitsLabel = _localization.Get("customers.detail.visits"),
+            FactInterval = header.Facts.AvgIntervalDays.ToString(),
+            FactIntervalLabel = _localization.Get("customers.detail.interval"),
+            FactHairdresser = header.Facts.PreferredHairdresser,
+            FactHairdresserLabel = _localization.Get("customers.detail.preferredHairdresser"),
+            FactRevenue = $"{header.Facts.TotalRevenue:N0} kr".Replace(",", "."),
+            FactRevenueLabel = _localization.Get("customers.detail.totalRevenue"),
+            BookingAllowedText = _localization.Get("customers.detail.bookingAllowed"),
+            BookingBlockedText = _localization.Get("customers.detail.bookingBlocked")
+        };
+
+        return View(model);
+    }
+}
+
+public class CustomerDetailHeaderViewModel
+{
+    public required string Initials { get; init; }
+    public required string Name { get; init; }
+    public List<CustomerTagViewModel> Tags { get; init; } = new();
+    public bool BookingAllowed { get; init; }
+    public required string Phone { get; init; }
+    public required string PhoneHref { get; init; }
+    public required string Email { get; init; }
+    public required string EmailHref { get; init; }
+    public required string CustomerSinceText { get; init; }
+    public required string FactVisits { get; init; }
+    public required string FactVisitsLabel { get; init; }
+    public required string FactInterval { get; init; }
+    public required string FactIntervalLabel { get; init; }
+    public required string FactHairdresser { get; init; }
+    public required string FactHairdresserLabel { get; init; }
+    public required string FactRevenue { get; init; }
+    public required string FactRevenueLabel { get; init; }
+    public required string BookingAllowedText { get; init; }
+    public required string BookingBlockedText { get; init; }
+}
+
+public class CustomerTagViewModel
+{
+    public required string Text { get; init; }
+    public required string CssClass { get; init; }
+}
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailHeader/Default.cshtml b/PlanTempus.Application/Features/Customers/Components/CustomerDetailHeader/Default.cshtml
new file mode 100644
index 0000000..cc13436
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailHeader/Default.cshtml
@@ -0,0 +1,53 @@
+@model PlanTempus.Application.Features.Customers.Components.CustomerDetailHeaderViewModel
+
+<swp-customer-detail-header>
+    <swp-customer-avatar-large>@Model.Initials</swp-customer-avatar-large>
+    <swp-customer-detail-info>
+        <swp-customer-name-row>
+            <swp-customer-detail-name>@Model.Name</swp-customer-detail-name>
+            <swp-customer-detail-tags>
+                @foreach (var tag in Model.Tags)
+                {
+                    <swp-tag class="@tag.CssClass">@tag.Text</swp-tag>
+                }
+            </swp-customer-detail-tags>
+            <swp-booking-exclusion data-excluded="@(Model.BookingAllowed ? "false" : "true")">
+                @if (Model.BookingAllowed)
+                {
+                    <i class="ph ph-check icon"></i>
+                    <span>@Model.BookingAllowedText</span>
+                }
+                else
+                {
+                    <i class="ph ph-x icon"></i>
+                    <span>@Model.BookingBlockedText</span>
+                }
+            </swp-booking-exclusion>
+        </swp-customer-name-row>
+        <swp-contact-line>
+            <a href="@Model.PhoneHref">@Model.Phone</a>
+            <span class="separator">|</span>
+            <a href="@Model.EmailHref">@Model.Email</a>
+            <span class="separator">|</span>
+            <span>@Model.CustomerSinceText</span>
+        </swp-contact-line>
+        <swp-fact-boxes-inline>
+            <swp-fact-inline>
+                <swp-fact-inline-value>@Model.FactVisits</swp-fact-inline-value>
+                <swp-fact-inline-label>@Model.FactVisitsLabel</swp-fact-inline-label>
+            </swp-fact-inline>
+            <swp-fact-inline>
+                <swp-fact-inline-value>@Model.FactInterval</swp-fact-inline-value>
+                <swp-fact-inline-label>@Model.FactIntervalLabel</swp-fact-inline-label>
+            </swp-fact-inline>
+            <swp-fact-inline>
+                <swp-fact-inline-value>@Model.FactHairdresser</swp-fact-inline-value>
+                <swp-fact-inline-label>@Model.FactHairdresserLabel</swp-fact-inline-label>
+            </swp-fact-inline>
+            <swp-fact-inline>
+                <swp-fact-inline-value>@Model.FactRevenue</swp-fact-inline-value>
+                <swp-fact-inline-label>@Model.FactRevenueLabel</swp-fact-inline-label>
+            </swp-fact-inline>
+        </swp-fact-boxes-inline>
+    </swp-customer-detail-info>
+</swp-customer-detail-header>
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailJournal/CustomerDetailJournalViewComponent.cs b/PlanTempus.Application/Features/Customers/Components/CustomerDetailJournal/CustomerDetailJournalViewComponent.cs
new file mode 100644
index 0000000..ce5f7bb
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailJournal/CustomerDetailJournalViewComponent.cs
@@ -0,0 +1,106 @@
+using Microsoft.AspNetCore.Mvc;
+using PlanTempus.Application.Features.Localization.Services;
+
+namespace PlanTempus.Application.Features.Customers.Components;
+
+public class CustomerDetailJournalViewComponent : ViewComponent
+{
+    private readonly ILocalizationService _localization;
+
+    public CustomerDetailJournalViewComponent(ILocalizationService localization)
+    {
+        _localization = localization;
+    }
+
+    public IViewComponentResult Invoke(string customerId)
+    {
+        var customer = CustomerDetailCatalog.Get(customerId);
+
+        // Group entries by type
+        var notes = customer.Journal.Where(j => j.Type == "note").ToList();
+        var colorFormulas = customer.Journal.Where(j => j.Type == "colorFormula").ToList();
+        var analyses = customer.Journal.Where(j => j.Type == "analysis").ToList();
+
+        var model = new CustomerDetailJournalViewModel
+        {
+            AllCount = customer.Journal.Count,
+            NotesCount = notes.Count,
+            ColorFormulasCount = colorFormulas.Count,
+            AnalysesCount = analyses.Count,
+            Notes = notes.Select(MapEntry).ToList(),
+            ColorFormulas = colorFormulas.Select(MapEntry).ToList(),
+            Analyses = analyses.Select(MapEntry).ToList(),
+            NotesTitle = "Noter",
+            ColorFormulasTitle = "Farveformler",
+            AnalysesTitle = "Analyser",
+            AddNoteText = "+ Tilføj note",
+            AddColorFormulaText = "+ Tilføj",
+            AddAnalysisText = "+ Tilføj"
+        };
+
+        return View(model);
+    }
+
+    private JournalEntryViewModel MapEntry(CustomerJournalEntry entry)
+    {
+        // Format the date (e.g., "2025-12-09" -> "9. dec 2025")
+        var formattedDate = entry.Date;
+        if (DateTime.TryParse(entry.Date, out var date))
+        {
+            formattedDate = date.ToString("d. MMM yyyy", new System.Globalization.CultureInfo("da-DK"));
+        }
+
+        return new JournalEntryViewModel
+        {
+            Id = entry.Id,
+            Type = entry.Type,
+            Tag = entry.Tag,
+            Subtags = entry.Subtags,
+            Text = entry.Text,
+            FormattedDate = $"{formattedDate} - Af: {entry.Author}",
+            Author = entry.Author,
+            TypeClass = GetTypeClass(entry.Tag)
+        };
+    }
+
+    private string GetTypeClass(string tag)
+    {
+        return tag.ToLowerInvariant() switch
+        {
+            "note" => "note",
+            "advarsel" => "advarsel",
+            "farveformel" => "farveformel",
+            "haranalyse" or "analyse" => "analyse",
+            _ => "note"
+        };
+    }
+}
+
+public class CustomerDetailJournalViewModel
+{
+    public int AllCount { get; init; }
+    public int NotesCount { get; init; }
+    public int ColorFormulasCount { get; init; }
+    public int AnalysesCount { get; init; }
+    public List<JournalEntryViewModel> Notes { get; init; } = new();
+    public List<JournalEntryViewModel> ColorFormulas { get; init; } = new();
+    public List<JournalEntryViewModel> Analyses { get; init; } = new();
+    public required string NotesTitle { get; init; }
+    public required string ColorFormulasTitle { get; init; }
+    public required string AnalysesTitle { get; init; }
+    public required string AddNoteText { get; init; }
+    public required string AddColorFormulaText { get; init; }
+    public required string AddAnalysisText { get; init; }
+}
+
+public class JournalEntryViewModel
+{
+    public required string Id { get; init; }
+    public required string Type { get; init; }
+    public required string Tag { get; init; }
+    public List<string> Subtags { get; init; } = new();
+    public required string Text { get; init; }
+    public required string FormattedDate { get; init; }
+    public required string Author { get; init; }
+    public required string TypeClass { get; init; }
+}
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailJournal/Default.cshtml b/PlanTempus.Application/Features/Customers/Components/CustomerDetailJournal/Default.cshtml
new file mode 100644
index 0000000..9f5eeb5
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailJournal/Default.cshtml
@@ -0,0 +1,168 @@
+@model PlanTempus.Application.Features.Customers.Components.CustomerDetailJournalViewModel
+
+<!-- Mini Tabs for quick filter -->
+<swp-journal-mini-tabs>
+    <swp-journal-mini-tab class="active" data-filter="all">
+        <span class="tab-dot blue"></span>
+        Alle
+        <span class="tab-count">@Model.AllCount</span>
+    </swp-journal-mini-tab>
+    <swp-journal-mini-tab data-filter="note">
+        <span class="tab-dot blue"></span>
+        Noter
+        <span class="tab-count">@Model.NotesCount</span>
+    </swp-journal-mini-tab>
+    <swp-journal-mini-tab data-filter="colorFormula">
+        <span class="tab-dot amber"></span>
+        Farveformler
+        <span class="tab-count">@Model.ColorFormulasCount</span>
+    </swp-journal-mini-tab>
+    <swp-journal-mini-tab data-filter="analysis">
+        <span class="tab-dot purple"></span>
+        Analyser
+        <span class="tab-count">@Model.AnalysesCount</span>
+    </swp-journal-mini-tab>
+</swp-journal-mini-tabs>
+
+<swp-detail-grid>
+    <!-- Left Column -->
+    <swp-card-column>
+        <!-- Noter header card -->
+        <swp-card data-journal-type="note">
+            <swp-card-header>
+                <swp-card-title>
+                    <span class="col-dot blue"></span>
+                    <span>@Model.NotesTitle</span>
+                </swp-card-title>
+                <swp-section-action>@Model.AddNoteText</swp-section-action>
+            </swp-card-header>
+            @foreach (var entry in Model.Notes)
+            {
+                <swp-journal-entry data-entry-id="@entry.Id">
+                    <swp-journal-entry-header>
+                        <swp-journal-entry-type class="@entry.TypeClass">@entry.Tag</swp-journal-entry-type>
+                        @if (entry.Subtags.Any())
+                        {
+                            <swp-journal-entry-tags>
+                                @foreach (var subtag in entry.Subtags)
+                                {
+                                    <swp-journal-tag class="@subtag.ToLowerInvariant()">@subtag</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>@Html.Raw(entry.Text.Replace("\n", "<br>"))</swp-journal-entry-body>
+                    <swp-journal-entry-footer>
+                        <swp-journal-entry-date>@entry.FormattedDate</swp-journal-entry-date>
+                        @if (entry.Tag == "Advarsel")
+                        {
+                            <swp-journal-entry-visibility class="warning">
+                                <i class="ph ph-warning"></i>
+                                <span>Advarsel</span>
+                            </swp-journal-entry-visibility>
+                        }
+                        else
+                        {
+                            <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>
+
+        <!-- Farveformler card -->
+        <swp-card data-journal-type="colorFormula">
+            <swp-card-header>
+                <swp-card-title>
+                    <span class="col-dot amber"></span>
+                    <span>@Model.ColorFormulasTitle</span>
+                </swp-card-title>
+                <swp-section-action>@Model.AddColorFormulaText</swp-section-action>
+            </swp-card-header>
+            @foreach (var entry in Model.ColorFormulas)
+            {
+                <swp-journal-entry data-entry-id="@entry.Id">
+                    <swp-journal-entry-header>
+                        <swp-journal-entry-type class="@entry.TypeClass">@entry.Tag</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>
+                        @{
+                            var lines = entry.Text.Split('\n');
+                            foreach (var line in lines)
+                            {
+                                if (line.Contains(':'))
+                                {
+                                    var parts = line.Split(':', 2);
+                                    <text><span class="label">@parts[0]:</span> <span class="mono">@parts[1].Trim()</span><br></text>
+                                }
+                                else if (!string.IsNullOrWhiteSpace(line))
+                                {
+                                    @line<br>
+                                }
+                                else
+                                {
+                                    <br>
+                                }
+                            }
+                        }
+                    </swp-journal-entry-body>
+                    <swp-journal-entry-footer>
+                        <swp-journal-entry-date>@entry.FormattedDate</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 data-journal-type="analysis">
+            <swp-card-header>
+                <swp-card-title>
+                    <span class="col-dot purple"></span>
+                    <span>@Model.AnalysesTitle</span>
+                </swp-card-title>
+                <swp-section-action>@Model.AddAnalysisText</swp-section-action>
+            </swp-card-header>
+            @foreach (var entry in Model.Analyses)
+            {
+                <swp-journal-entry data-entry-id="@entry.Id">
+                    <swp-journal-entry-header>
+                        <swp-journal-entry-type class="@entry.TypeClass">@entry.Tag</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>
+                        @{
+                            var analysisLines = entry.Text.Split('\n');
+                            foreach (var line in analysisLines)
+                            {
+                                if (line.Contains(':'))
+                                {
+                                    var parts = line.Split(':', 2);
+                                    <text><span class="label">@parts[0]:</span> @parts[1].Trim()<br></text>
+                                }
+                                else if (!string.IsNullOrWhiteSpace(line))
+                                {
+                                    @line<br>
+                                }
+                                else
+                                {
+                                    <br>
+                                }
+                            }
+                        }
+                    </swp-journal-entry-body>
+                    <swp-journal-entry-footer>
+                        <swp-journal-entry-date>@entry.FormattedDate</swp-journal-entry-date>
+                    </swp-journal-entry-footer>
+                </swp-journal-entry>
+            }
+        </swp-card>
+    </swp-card-column>
+</swp-detail-grid>
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailOverview/CustomerDetailOverviewViewComponent.cs b/PlanTempus.Application/Features/Customers/Components/CustomerDetailOverview/CustomerDetailOverviewViewComponent.cs
new file mode 100644
index 0000000..f257e22
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailOverview/CustomerDetailOverviewViewComponent.cs
@@ -0,0 +1,169 @@
+using Microsoft.AspNetCore.Mvc;
+using PlanTempus.Application.Features.Localization.Services;
+
+namespace PlanTempus.Application.Features.Customers.Components;
+
+public class CustomerDetailOverviewViewComponent : ViewComponent
+{
+    private readonly ILocalizationService _localization;
+
+    public CustomerDetailOverviewViewComponent(ILocalizationService localization)
+    {
+        _localization = localization;
+    }
+
+    public IViewComponentResult Invoke(string customerId)
+    {
+        var customer = CustomerDetailCatalog.Get(customerId);
+
+        var model = new CustomerDetailOverviewViewModel
+        {
+            // Contact
+            ContactTitle = _localization.Get("customers.detail.contactInfo"),
+            Phone = customer.Contact.Phone,
+            PhoneLabel = _localization.Get("customers.detail.phone"),
+            Email = customer.Contact.Email,
+            EmailLabel = _localization.Get("customers.detail.email"),
+            Address = customer.Contact.Address,
+            AddressLabel = _localization.Get("customers.detail.address"),
+            ZipCity = $"{customer.Contact.Zip} {customer.Contact.City}",
+            ZipCityLabel = _localization.Get("customers.detail.zipCity"),
+
+            // Profile
+            ProfileTitle = _localization.Get("customers.detail.profile"),
+            ProfileItems = customer.Profile.Select(p => new ProfileItemViewModel
+            {
+                Title = p.Title,
+                Value = p.Value
+            }).ToList(),
+
+            // Marketing
+            MarketingTitle = _localization.Get("customers.detail.marketing"),
+            EmailMarketingLabel = _localization.Get("customers.detail.emailMarketing"),
+            EmailOptIn = customer.Marketing.EmailOptIn,
+            SmsMarketingLabel = _localization.Get("customers.detail.smsMarketing"),
+            SmsOptIn = customer.Marketing.SmsOptIn,
+            YesLabel = _localization.Get("common.yes"),
+            NoLabel = _localization.Get("common.no"),
+
+            // Payment
+            PaymentTitle = _localization.Get("customers.detail.paymentSettings"),
+            RequirePrepaymentLabel = _localization.Get("customers.detail.requirePrepayment"),
+            RequirePrepaymentDesc = "Kunden skal betale fuldt beløb ved booking",
+            RequirePrepayment = customer.Payment.RequirePrepayment,
+            AllowPartialPaymentLabel = _localization.Get("customers.detail.allowPartialPayment"),
+            AllowPartialPaymentDesc = "Kunden kan vælge at betale et depositum",
+            AllowPartialPayment = customer.Payment.AllowPartialPayment,
+
+            // Preferences
+            PreferencesTitle = _localization.Get("customers.detail.preferences"),
+            PreferredHairdresser = customer.Preferences.PreferredHairdresser,
+            PreferredHairdresserLabel = _localization.Get("customers.detail.preferredHairdresser"),
+            PreferredDays = customer.Preferences.PreferredDays,
+            PreferredDaysLabel = _localization.Get("customers.detail.preferredDay"),
+            SpecialRequests = customer.Preferences.SpecialRequests,
+            SpecialRequestsLabel = _localization.Get("customers.detail.specialRequests"),
+
+            // Warnings
+            WarningsTitle = _localization.Get("customers.detail.warnings"),
+            Warnings = customer.Warnings.Select(w => new WarningItemViewModel
+            {
+                Title = w.Title,
+                Value = w.Value
+            }).ToList(),
+
+            // Group & Relations
+            GroupRelationsTitle = _localization.Get("customers.detail.groupAndRelations"),
+            GroupLabel = "Kundegruppe:",
+            GroupId = customer.Group.GroupId,
+            GroupName = customer.Group.GroupName,
+            Relations = customer.Relations.Select(r => new RelationItemViewModel
+            {
+                Id = r.Id,
+                Name = r.Name,
+                Initials = r.Initials,
+                Type = r.Type
+            }).ToList(),
+            AddRelationText = "Tilføj relation"
+        };
+
+        return View(model);
+    }
+}
+
+public class CustomerDetailOverviewViewModel
+{
+    // Contact
+    public required string ContactTitle { get; init; }
+    public required string Phone { get; init; }
+    public required string PhoneLabel { get; init; }
+    public required string Email { get; init; }
+    public required string EmailLabel { get; init; }
+    public required string Address { get; init; }
+    public required string AddressLabel { get; init; }
+    public required string ZipCity { get; init; }
+    public required string ZipCityLabel { get; init; }
+
+    // Profile
+    public required string ProfileTitle { get; init; }
+    public List<ProfileItemViewModel> ProfileItems { get; init; } = new();
+
+    // Marketing
+    public required string MarketingTitle { get; init; }
+    public required string EmailMarketingLabel { get; init; }
+    public bool EmailOptIn { get; init; }
+    public required string SmsMarketingLabel { get; init; }
+    public bool SmsOptIn { get; init; }
+    public required string YesLabel { get; init; }
+    public required string NoLabel { get; init; }
+
+    // Payment
+    public required string PaymentTitle { get; init; }
+    public required string RequirePrepaymentLabel { get; init; }
+    public required string RequirePrepaymentDesc { get; init; }
+    public bool RequirePrepayment { get; init; }
+    public required string AllowPartialPaymentLabel { get; init; }
+    public required string AllowPartialPaymentDesc { get; init; }
+    public bool AllowPartialPayment { get; init; }
+
+    // Preferences
+    public required string PreferencesTitle { get; init; }
+    public required string PreferredHairdresser { get; init; }
+    public required string PreferredHairdresserLabel { get; init; }
+    public required string PreferredDays { get; init; }
+    public required string PreferredDaysLabel { get; init; }
+    public required string SpecialRequests { get; init; }
+    public required string SpecialRequestsLabel { get; init; }
+
+    // Warnings
+    public required string WarningsTitle { get; init; }
+    public List<WarningItemViewModel> Warnings { get; init; } = new();
+
+    // Group & Relations
+    public required string GroupRelationsTitle { get; init; }
+    public required string GroupLabel { get; init; }
+    public required string GroupId { get; init; }
+    public required string GroupName { get; init; }
+    public List<RelationItemViewModel> Relations { get; init; } = new();
+    public required string AddRelationText { get; init; }
+}
+
+public class ProfileItemViewModel
+{
+    public required string Title { get; init; }
+    public required string Value { get; init; }
+}
+
+public class WarningItemViewModel
+{
+    public required string Title { get; init; }
+    public required string Value { get; init; }
+}
+
+public class RelationItemViewModel
+{
+    public required string Id { get; init; }
+    public required string Name { get; init; }
+    public required string Initials { get; init; }
+    public required string Type { get; init; }
+}
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailOverview/Default.cshtml b/PlanTempus.Application/Features/Customers/Components/CustomerDetailOverview/Default.cshtml
new file mode 100644
index 0000000..a023e28
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailOverview/Default.cshtml
@@ -0,0 +1,201 @@
+@model PlanTempus.Application.Features.Customers.Components.CustomerDetailOverviewViewModel
+
+<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>@Model.ContactTitle</span>
+                </swp-card-title>
+            </swp-card-header>
+            <swp-edit-section>
+                <swp-edit-row>
+                    <swp-edit-label>@Model.PhoneLabel</swp-edit-label>
+                    <swp-edit-value contenteditable="true">@Model.Phone</swp-edit-value>
+                </swp-edit-row>
+                <swp-edit-row>
+                    <swp-edit-label>@Model.EmailLabel</swp-edit-label>
+                    <swp-edit-value contenteditable="true">@Model.Email</swp-edit-value>
+                </swp-edit-row>
+                <swp-edit-row>
+                    <swp-edit-label>@Model.AddressLabel</swp-edit-label>
+                    <swp-edit-value contenteditable="true">@Model.Address</swp-edit-value>
+                </swp-edit-row>
+                <swp-edit-row>
+                    <swp-edit-label>@Model.ZipCityLabel</swp-edit-label>
+                    <swp-edit-value contenteditable="true">@Model.ZipCity</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>@Model.ProfileTitle</span>
+                </swp-card-title>
+            </swp-card-header>
+            <swp-profile-boxes>
+                @foreach (var item in Model.ProfileItems)
+                {
+                    <swp-profile-box>
+                        <swp-profile-box-label>@item.Title</swp-profile-box-label>
+                        <swp-profile-box-value>@item.Value</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>@Model.MarketingTitle</span>
+                </swp-card-title>
+            </swp-card-header>
+            <swp-toggle-row>
+                <swp-toggle-label>@Model.EmailMarketingLabel</swp-toggle-label>
+                <swp-toggle-slider data-value="@(Model.EmailOptIn ? "yes" : "no")">
+                    <swp-toggle-option>@Model.YesLabel</swp-toggle-option>
+                    <swp-toggle-option>@Model.NoLabel</swp-toggle-option>
+                </swp-toggle-slider>
+            </swp-toggle-row>
+            <swp-toggle-row>
+                <swp-toggle-label>@Model.SmsMarketingLabel</swp-toggle-label>
+                <swp-toggle-slider data-value="@(Model.SmsOptIn ? "yes" : "no")">
+                    <swp-toggle-option>@Model.YesLabel</swp-toggle-option>
+                    <swp-toggle-option>@Model.NoLabel</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>@Model.PaymentTitle</span>
+                </swp-card-title>
+            </swp-card-header>
+            <swp-toggle-row>
+                <swp-toggle-info>
+                    <swp-toggle-label>@Model.RequirePrepaymentLabel</swp-toggle-label>
+                    <swp-toggle-desc>@Model.RequirePrepaymentDesc</swp-toggle-desc>
+                </swp-toggle-info>
+                <swp-toggle-slider data-value="@(Model.RequirePrepayment ? "yes" : "no")">
+                    <swp-toggle-option>@Model.YesLabel</swp-toggle-option>
+                    <swp-toggle-option>@Model.NoLabel</swp-toggle-option>
+                </swp-toggle-slider>
+            </swp-toggle-row>
+            <swp-toggle-row>
+                <swp-toggle-info>
+                    <swp-toggle-label>@Model.AllowPartialPaymentLabel</swp-toggle-label>
+                    <swp-toggle-desc>@Model.AllowPartialPaymentDesc</swp-toggle-desc>
+                </swp-toggle-info>
+                <swp-toggle-slider data-value="@(Model.AllowPartialPayment ? "yes" : "no")">
+                    <swp-toggle-option>@Model.YesLabel</swp-toggle-option>
+                    <swp-toggle-option>@Model.NoLabel</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>@Model.PreferencesTitle</span>
+                </swp-card-title>
+            </swp-card-header>
+            <swp-profile-boxes>
+                <swp-profile-box>
+                    <swp-profile-box-label>@Model.PreferredHairdresserLabel</swp-profile-box-label>
+                    <swp-profile-box-value>@Model.PreferredHairdresser</swp-profile-box-value>
+                </swp-profile-box>
+                <swp-profile-box>
+                    <swp-profile-box-label>@Model.PreferredDaysLabel</swp-profile-box-label>
+                    <swp-profile-box-value>@Model.PreferredDays</swp-profile-box-value>
+                </swp-profile-box>
+                <swp-profile-box class="full-width">
+                    <swp-profile-box-label>@Model.SpecialRequestsLabel</swp-profile-box-label>
+                    <swp-profile-box-value>@Model.SpecialRequests</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>@Model.WarningsTitle</span>
+                </swp-card-title>
+            </swp-card-header>
+            <swp-profile-boxes>
+                @foreach (var warning in Model.Warnings)
+                {
+                    <swp-profile-box class="warning full-width">
+                        <swp-profile-box-label>@warning.Title</swp-profile-box-label>
+                        <swp-profile-box-value>@warning.Value</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>@Model.GroupRelationsTitle</span>
+                </swp-card-title>
+            </swp-card-header>
+            <swp-customer-group-row>
+                <swp-customer-group-label>@Model.GroupLabel</swp-customer-group-label>
+                <swp-select>
+                    <button type="button">
+                        <swp-select-value>@Model.GroupName</swp-select-value>
+                        <i class="ph ph-caret-down"></i>
+                    </button>
+                    <swp-select-dropdown>
+                        <swp-select-option class="@(Model.GroupId == "standard" ? "selected" : "")" data-value="standard">Standard</swp-select-option>
+                        <swp-select-option class="@(Model.GroupId == "premium" ? "selected" : "")" data-value="premium">Premium</swp-select-option>
+                        <swp-select-option class="@(Model.GroupId == "erhverv" ? "selected" : "")" data-value="erhverv">Erhverv</swp-select-option>
+                        <swp-select-option class="@(Model.GroupId == "medarbejder" ? "selected" : "")" data-value="medarbejder">Medarbejder</swp-select-option>
+                        <swp-select-option class="@(Model.GroupId == "familie" ? "selected" : "")" data-value="familie">Familie & Venner</swp-select-option>
+                    </swp-select-dropdown>
+                </swp-select>
+            </swp-customer-group-row>
+
+            <swp-relations-list>
+                @foreach (var relation in Model.Relations)
+                {
+                    <swp-relation-item>
+                        <swp-relation-avatar>@relation.Initials</swp-relation-avatar>
+                        <swp-relation-info>
+                            <swp-relation-name>@relation.Name</swp-relation-name>
+                            <swp-relation-type>@relation.Type</swp-relation-type>
+                        </swp-relation-info>
+                        <swp-relation-actions>
+                            <swp-relation-link>Abn</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>@Model.AddRelationText</span>
+                </swp-add-relation>
+            </swp-relations-list>
+        </swp-card>
+    </swp-card-column>
+</swp-detail-grid>
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailStatistics/CustomerDetailStatisticsViewComponent.cs b/PlanTempus.Application/Features/Customers/Components/CustomerDetailStatistics/CustomerDetailStatisticsViewComponent.cs
new file mode 100644
index 0000000..eff8e93
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailStatistics/CustomerDetailStatisticsViewComponent.cs
@@ -0,0 +1,162 @@
+using Microsoft.AspNetCore.Mvc;
+using PlanTempus.Application.Features.Localization.Services;
+
+namespace PlanTempus.Application.Features.Customers.Components;
+
+public class CustomerDetailStatisticsViewComponent : ViewComponent
+{
+    private readonly ILocalizationService _localization;
+
+    public CustomerDetailStatisticsViewComponent(ILocalizationService localization)
+    {
+        _localization = localization;
+    }
+
+    public IViewComponentResult Invoke(string customerId)
+    {
+        var customer = CustomerDetailCatalog.Get(customerId);
+        var stats = customer.Statistics;
+
+        // Calculate widths for the attendance bar
+        var total = stats.Attendance.Attended + stats.Attendance.Cancelled + stats.Attendance.NoShow;
+
+        string attendedWidth, cancelledWidth, noShowWidth;
+        bool allZero = total == 0;
+
+        if (allZero)
+        {
+            // All zero: gray bar with equal segments
+            attendedWidth = "33.33%";
+            cancelledWidth = "33.33%";
+            noShowWidth = "33.34%";
+        }
+        else
+        {
+            // Calculate percentages, but use 12px minimum for zero values
+            var attendedPercent = stats.Attendance.Attended * 100 / total;
+            var cancelledPercent = stats.Attendance.Cancelled * 100 / total;
+            var noShowPercent = stats.Attendance.NoShow * 100 / total;
+
+            attendedWidth = stats.Attendance.Attended == 0 ? "12px" : $"{attendedPercent}%";
+            cancelledWidth = stats.Attendance.Cancelled == 0 ? "12px" : $"{cancelledPercent}%";
+            noShowWidth = stats.Attendance.NoShow == 0 ? "12px" : $"{noShowPercent}%";
+        }
+
+        var model = new CustomerDetailStatisticsViewModel
+        {
+            // Attendance
+            AttendanceTitle = "Fremmøde & Pålidelighed",
+            Attended = stats.Attendance.Attended,
+            AttendedLabel = "Fremmøder",
+            Cancelled = stats.Attendance.Cancelled,
+            CancelledLabel = "Aflysninger",
+            NoShow = stats.Attendance.NoShow,
+            NoShowLabel = "No-shows",
+            ReliabilityPercent = stats.Attendance.ReliabilityPercent,
+            ReliabilityLabel = "Pålidelighed",
+            AttendedWidth = attendedWidth,
+            CancelledWidth = cancelledWidth,
+            NoShowWidth = noShowWidth,
+            AllZero = allZero,
+
+            // Service patterns
+            ServicePatternsTitle = "Service-mønstre",
+            TopServicesLabel = "Top 3 Services",
+            TopServices = stats.TopServices.Select((s, i) => new TopItemViewModel
+            {
+                Rank = i + 1,
+                Name = s.Name,
+                Count = s.Count
+            }).ToList(),
+            TopProductsLabel = "Top 3 Produkter",
+            TopProducts = stats.TopProducts.Select((p, i) => new TopItemViewModel
+            {
+                Rank = i + 1,
+                Name = p.Name,
+                Count = p.Count
+            }).ToList(),
+
+            // Booking behavior
+            BookingBehaviorTitle = "Booking-adfærd",
+            AvgBookingNotice = $"{stats.BookingBehavior.AvgBookingNoticeDays} dage",
+            AvgBookingNoticeLabel = "Gns. bookingvarsel",
+            PreferredDay = stats.BookingBehavior.PreferredDay,
+            PreferredDayLabel = "Foretrukken dag",
+            PreferredTimeSlot = stats.BookingBehavior.PreferredTimeSlot,
+            PreferredTimeSlotLabel = "Foretrukken tid",
+            OnlineBookingRate = $"{stats.BookingBehavior.OnlineBookingRate}%",
+            OnlineBookingRateLabel = "Online booking rate",
+            AvgCancellationNotice = $"{stats.BookingBehavior.AvgCancellationNoticeDays} dage",
+            AvgCancellationNoticeLabel = "Gns. aflysningsvarsel",
+
+            // Loyalty
+            LoyaltyTitle = "Loyalitet",
+            CustomerSinceYears = $"{stats.Loyalty.CustomerSinceYears:0.0} ar".Replace(".", ","),
+            CustomerSinceYearsLabel = "Kunde siden",
+            DaysSinceLastVisit = stats.Loyalty.DaysSinceLastVisit,
+            DaysSinceLastVisitLabel = "Dage siden sidst",
+            ChurnRisk = stats.Loyalty.ChurnRisk,
+            ChurnRiskLabel = "Churn-risiko",
+            AvgIntervalDays = $"{stats.Loyalty.AvgIntervalDays} dage",
+            AvgIntervalDaysLabel = "Gns. interval"
+        };
+
+        return View(model);
+    }
+}
+
+public class CustomerDetailStatisticsViewModel
+{
+    // Attendance
+    public required string AttendanceTitle { get; init; }
+    public int Attended { get; init; }
+    public required string AttendedLabel { get; init; }
+    public int Cancelled { get; init; }
+    public required string CancelledLabel { get; init; }
+    public int NoShow { get; init; }
+    public required string NoShowLabel { get; init; }
+    public int ReliabilityPercent { get; init; }
+    public required string ReliabilityLabel { get; init; }
+    public required string AttendedWidth { get; init; }
+    public required string CancelledWidth { get; init; }
+    public required string NoShowWidth { get; init; }
+    public bool AllZero { get; init; }
+
+    // Service patterns
+    public required string ServicePatternsTitle { get; init; }
+    public required string TopServicesLabel { get; init; }
+    public List<TopItemViewModel> TopServices { get; init; } = new();
+    public required string TopProductsLabel { get; init; }
+    public List<TopItemViewModel> TopProducts { get; init; } = new();
+
+    // Booking behavior
+    public required string BookingBehaviorTitle { get; init; }
+    public required string AvgBookingNotice { get; init; }
+    public required string AvgBookingNoticeLabel { get; init; }
+    public required string PreferredDay { get; init; }
+    public required string PreferredDayLabel { get; init; }
+    public required string PreferredTimeSlot { get; init; }
+    public required string PreferredTimeSlotLabel { get; init; }
+    public required string OnlineBookingRate { get; init; }
+    public required string OnlineBookingRateLabel { get; init; }
+    public required string AvgCancellationNotice { get; init; }
+    public required string AvgCancellationNoticeLabel { get; init; }
+
+    // Loyalty
+    public required string LoyaltyTitle { get; init; }
+    public required string CustomerSinceYears { get; init; }
+    public required string CustomerSinceYearsLabel { get; init; }
+    public int DaysSinceLastVisit { get; init; }
+    public required string DaysSinceLastVisitLabel { get; init; }
+    public required string ChurnRisk { get; init; }
+    public required string ChurnRiskLabel { get; init; }
+    public required string AvgIntervalDays { get; init; }
+    public required string AvgIntervalDaysLabel { get; init; }
+}
+
+public class TopItemViewModel
+{
+    public int Rank { get; init; }
+    public required string Name { get; init; }
+    public int Count { get; init; }
+}
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailStatistics/Default.cshtml b/PlanTempus.Application/Features/Customers/Components/CustomerDetailStatistics/Default.cshtml
new file mode 100644
index 0000000..0484d28
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailStatistics/Default.cshtml
@@ -0,0 +1,142 @@
+@model PlanTempus.Application.Features.Customers.Components.CustomerDetailStatisticsViewModel
+
+<swp-detail-grid>
+    <!-- Fremmøde & Pålidelighed - spans both columns -->
+    <swp-card class="full-width">
+        <swp-card-header>
+            <swp-card-title>@Model.AttendanceTitle</swp-card-title>
+        </swp-card-header>
+        <div class="grid-4">
+            <swp-stat-card class="highlight">
+                <swp-stat-value>@Model.Attended</swp-stat-value>
+                <swp-stat-label>@Model.AttendedLabel</swp-stat-label>
+            </swp-stat-card>
+            <swp-stat-card class="warning">
+                <swp-stat-value>@Model.Cancelled</swp-stat-value>
+                <swp-stat-label>@Model.CancelledLabel</swp-stat-label>
+            </swp-stat-card>
+            <swp-stat-card class="danger">
+                <swp-stat-value>@Model.NoShow</swp-stat-value>
+                <swp-stat-label>@Model.NoShowLabel</swp-stat-label>
+            </swp-stat-card>
+            <swp-stat-card class="success">
+                <swp-stat-value>@Model.ReliabilityPercent%</swp-stat-value>
+                <swp-stat-label>@Model.ReliabilityLabel</swp-stat-label>
+            </swp-stat-card>
+        </div>
+        <swp-attendance-bar class="@(Model.AllZero ? "empty" : "")">
+            <swp-attendance-segment class="attended" style="width: @Model.AttendedWidth;">@Model.Attended</swp-attendance-segment>
+            <swp-attendance-segment class="cancelled" style="width: @Model.CancelledWidth;">@Model.Cancelled</swp-attendance-segment>
+            <swp-attendance-segment class="noshow" style="width: @Model.NoShowWidth;">@Model.NoShow</swp-attendance-segment>
+        </swp-attendance-bar>
+    </swp-card>
+
+    <!-- Left Column -->
+    <swp-card-column>
+        <!-- Service-mønstre -->
+        <swp-card>
+            <swp-card-header>
+                <swp-card-title>@Model.ServicePatternsTitle</swp-card-title>
+            </swp-card-header>
+            <div class="grid-2">
+                <div>
+                    <swp-section-label class="small">@Model.TopServicesLabel</swp-section-label>
+                    <swp-top-list>
+                        @foreach (var service in Model.TopServices)
+                        {
+                            <swp-top-item>
+                                <swp-top-rank>@service.Rank</swp-top-rank>
+                                <swp-top-name>@service.Name</swp-top-name>
+                                <swp-top-count>@(service.Count)x</swp-top-count>
+                            </swp-top-item>
+                        }
+                    </swp-top-list>
+                </div>
+                <div>
+                    <swp-section-label class="small">@Model.TopProductsLabel</swp-section-label>
+                    <swp-top-list>
+                        @foreach (var product in Model.TopProducts)
+                        {
+                            <swp-top-item>
+                                <swp-top-rank>@product.Rank</swp-top-rank>
+                                <swp-top-name>@product.Name</swp-top-name>
+                                <swp-top-count>@(product.Count)x</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>@Model.BookingBehaviorTitle</swp-card-title>
+            </swp-card-header>
+            <swp-kv-list>
+                <swp-kv-row>
+                    <swp-kv-label>@Model.AvgBookingNoticeLabel</swp-kv-label>
+                    <swp-kv-value>@Model.AvgBookingNotice</swp-kv-value>
+                </swp-kv-row>
+                <swp-kv-row>
+                    <swp-kv-label>@Model.PreferredDayLabel</swp-kv-label>
+                    <swp-kv-value>@Model.PreferredDay</swp-kv-value>
+                </swp-kv-row>
+                <swp-kv-row>
+                    <swp-kv-label>@Model.PreferredTimeSlotLabel</swp-kv-label>
+                    <swp-kv-value>@Model.PreferredTimeSlot</swp-kv-value>
+                </swp-kv-row>
+                <swp-kv-row>
+                    <swp-kv-label>@Model.OnlineBookingRateLabel</swp-kv-label>
+                    <swp-kv-value>@Model.OnlineBookingRate</swp-kv-value>
+                </swp-kv-row>
+                <swp-kv-row>
+                    <swp-kv-label>@Model.AvgCancellationNoticeLabel</swp-kv-label>
+                    <swp-kv-value>@Model.AvgCancellationNotice</swp-kv-value>
+                </swp-kv-row>
+            </swp-kv-list>
+        </swp-card>
+
+        <!-- Loyalitet -->
+        <swp-card>
+            <swp-card-header>
+                <swp-card-title>@Model.LoyaltyTitle</swp-card-title>
+            </swp-card-header>
+            <div class="grid-2 compact">
+                <swp-stat-card>
+                    <swp-stat-value class="small">@Model.CustomerSinceYears</swp-stat-value>
+                    <swp-stat-label>@Model.CustomerSinceYearsLabel</swp-stat-label>
+                </swp-stat-card>
+                <swp-stat-card class="success">
+                    <swp-stat-value class="small">@Model.DaysSinceLastVisit</swp-stat-value>
+                    <swp-stat-label>@Model.DaysSinceLastVisitLabel</swp-stat-label>
+                </swp-stat-card>
+                <swp-stat-card>
+                    <swp-stat-value class="small">
+                        <swp-risk-indicator class="@Model.ChurnRisk">
+                            <swp-risk-dot></swp-risk-dot>
+                            @{
+                                var riskText = Model.ChurnRisk switch
+                                {
+                                    "low" => "Lav",
+                                    "medium" => "Medium",
+                                    "high" => "Hoj",
+                                    _ => Model.ChurnRisk
+                                };
+                            }
+                            <span>@riskText</span>
+                        </swp-risk-indicator>
+                    </swp-stat-value>
+                    <swp-stat-label>@Model.ChurnRiskLabel</swp-stat-label>
+                </swp-stat-card>
+                <swp-stat-card>
+                    <swp-stat-value class="small">@Model.AvgIntervalDays</swp-stat-value>
+                    <swp-stat-label>@Model.AvgIntervalDaysLabel</swp-stat-label>
+                </swp-stat-card>
+            </div>
+        </swp-card>
+    </swp-card-column>
+</swp-detail-grid>
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailView/CustomerDetailViewViewComponent.cs b/PlanTempus.Application/Features/Customers/Components/CustomerDetailView/CustomerDetailViewViewComponent.cs
new file mode 100644
index 0000000..5b41bbf
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailView/CustomerDetailViewViewComponent.cs
@@ -0,0 +1,53 @@
+using Microsoft.AspNetCore.Mvc;
+using PlanTempus.Application.Features.Localization.Services;
+
+namespace PlanTempus.Application.Features.Customers.Components;
+
+public class CustomerDetailViewViewComponent : ViewComponent
+{
+    private readonly ILocalizationService _localization;
+
+    public CustomerDetailViewViewComponent(ILocalizationService localization)
+    {
+        _localization = localization;
+    }
+
+    public IViewComponentResult Invoke(string customerId)
+    {
+        var customer = CustomerDetailCatalog.Get(customerId);
+
+        var model = new CustomerDetailViewViewModel
+        {
+            CustomerId = customer.Id,
+            CustomerName = customer.Header.Name,
+            BackText = _localization.Get("customers.detail.back"),
+            DeleteButtonText = _localization.Get("customers.detail.delete"),
+            SaveButtonText = _localization.Get("customers.detail.save"),
+            TabOverview = _localization.Get("customers.detail.tabs.overview"),
+            TabEconomy = _localization.Get("customers.detail.tabs.economy"),
+            TabStatistics = _localization.Get("customers.detail.tabs.statistics"),
+            TabJournal = _localization.Get("customers.detail.tabs.journal"),
+            TabAppointments = _localization.Get("customers.detail.tabs.appointments"),
+            TabGiftcards = _localization.Get("customers.detail.tabs.giftcards"),
+            TabActivity = _localization.Get("customers.detail.tabs.activitylog")
+        };
+
+        return View(model);
+    }
+}
+
+public class CustomerDetailViewViewModel
+{
+    public required string CustomerId { get; init; }
+    public required string CustomerName { get; init; }
+    public required string BackText { get; init; }
+    public required string DeleteButtonText { get; init; }
+    public required string SaveButtonText { get; init; }
+    public required string TabOverview { get; init; }
+    public required string TabEconomy { get; init; }
+    public required string TabStatistics { get; init; }
+    public required string TabJournal { get; init; }
+    public required string TabAppointments { get; init; }
+    public required string TabGiftcards { get; init; }
+    public required string TabActivity { get; init; }
+}
diff --git a/PlanTempus.Application/Features/Customers/Components/CustomerDetailView/Default.cshtml b/PlanTempus.Application/Features/Customers/Components/CustomerDetailView/Default.cshtml
new file mode 100644
index 0000000..f5c0ea0
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerDetailView/Default.cshtml
@@ -0,0 +1,123 @@
+@model PlanTempus.Application.Features.Customers.Components.CustomerDetailViewViewModel
+
+<swp-customer-detail-view id="customer-detail-view" data-customer="@Model.CustomerId">
+    <!-- Sticky Header (generic from page.css) -->
+    <swp-sticky-header>
+        <swp-header-content>
+            <!-- Page Header with Back Button -->
+            <swp-page-header>
+                <swp-back-link href="/kunder">
+                    <i class="ph ph-arrow-left"></i>
+                    <span>@Model.BackText</span>
+                </swp-back-link>
+                <swp-page-actions>
+                    <swp-btn class="secondary">
+                        <i class="ph ph-trash"></i>
+                        <span>@Model.DeleteButtonText</span>
+                    </swp-btn>
+                    <swp-btn class="primary">
+                        <i class="ph ph-floppy-disk"></i>
+                        <span>@Model.SaveButtonText</span>
+                    </swp-btn>
+                </swp-page-actions>
+            </swp-page-header>
+
+            <!-- Customer Header -->
+            @await Component.InvokeAsync("CustomerDetailHeader", Model.CustomerId)
+        </swp-header-content>
+
+        <!-- Tabs (outside header-content, inside sticky-header) -->
+        <swp-tab-bar>
+            <swp-tab class="active" data-tab="overview">@Model.TabOverview</swp-tab>
+            <swp-tab data-tab="economy">@Model.TabEconomy</swp-tab>
+            <swp-tab data-tab="statistics">@Model.TabStatistics</swp-tab>
+            <swp-tab data-tab="journal">@Model.TabJournal</swp-tab>
+            <swp-tab data-tab="appointments">@Model.TabAppointments</swp-tab>
+            <swp-tab data-tab="giftcards">@Model.TabGiftcards</swp-tab>
+            <swp-tab data-tab="activity">@Model.TabActivity</swp-tab>
+        </swp-tab-bar>
+    </swp-sticky-header>
+
+    <!-- Tab Contents -->
+    <swp-tab-content data-tab="overview" class="active">
+        <swp-page-container>
+            @await Component.InvokeAsync("CustomerDetailOverview", Model.CustomerId)
+        </swp-page-container>
+    </swp-tab-content>
+
+    <swp-tab-content data-tab="economy">
+        <swp-page-container>
+            @await Component.InvokeAsync("CustomerDetailEconomy", Model.CustomerId)
+        </swp-page-container>
+    </swp-tab-content>
+
+    <swp-tab-content data-tab="statistics">
+        <swp-page-container>
+            @await Component.InvokeAsync("CustomerDetailStatistics", Model.CustomerId)
+        </swp-page-container>
+    </swp-tab-content>
+
+    <swp-tab-content data-tab="journal">
+        <swp-page-container>
+            @await Component.InvokeAsync("CustomerDetailJournal", Model.CustomerId)
+        </swp-page-container>
+    </swp-tab-content>
+
+    <swp-tab-content data-tab="appointments">
+        <swp-page-container>
+            @await Component.InvokeAsync("CustomerDetailAppointments", Model.CustomerId)
+        </swp-page-container>
+    </swp-tab-content>
+
+    <swp-tab-content data-tab="giftcards">
+        <swp-page-container>
+            @await Component.InvokeAsync("CustomerDetailGiftcards", Model.CustomerId)
+        </swp-page-container>
+    </swp-tab-content>
+
+    <swp-tab-content data-tab="activity">
+        <swp-page-container>
+            @await Component.InvokeAsync("CustomerDetailActivity", Model.CustomerId)
+        </swp-page-container>
+    </swp-tab-content>
+</swp-customer-detail-view>
+
+<script>
+    // Tab switching
+    document.querySelectorAll('#customer-detail-view swp-tab').forEach(tab => {
+        tab.addEventListener('click', () => {
+            const tabName = tab.dataset.tab;
+            const container = document.getElementById('customer-detail-view');
+
+            // Update tab active state
+            container.querySelectorAll('swp-tab').forEach(t => t.classList.remove('active'));
+            tab.classList.add('active');
+
+            // Update content visibility
+            container.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/Components/CustomerTable/Default.cshtml b/PlanTempus.Application/Features/Customers/Components/CustomerTable/Default.cshtml
index 8b25c9f..5aa369a 100644
--- a/PlanTempus.Application/Features/Customers/Components/CustomerTable/Default.cshtml
+++ b/PlanTempus.Application/Features/Customers/Components/CustomerTable/Default.cshtml
@@ -10,7 +10,7 @@
             <i class="ph ph-export"></i>
             <span>@Model.ExportButtonText</span>
         </swp-btn>
-        <swp-btn class="primary">
+        <swp-btn class="primary" data-drawer-trigger="create-customer-drawer">
             <i class="ph ph-plus"></i>
             <span>@Model.CreateButtonText</span>
         </swp-btn>
diff --git a/PlanTempus.Application/Features/Customers/Data/customerDetailMock.json b/PlanTempus.Application/Features/Customers/Data/customerDetailMock.json
new file mode 100644
index 0000000..0f66107
--- /dev/null
+++ b/PlanTempus.Application/Features/Customers/Data/customerDetailMock.json
@@ -0,0 +1,1228 @@
+{
+  "anna-jensen": {
+    "id": "anna-jensen",
+    "header": {
+      "initials": "AJ",
+      "name": "Anna Jensen",
+      "customerSince": "2023-05-15",
+      "tags": ["stamkunde", "farve"],
+      "bookingAllowed": true,
+      "facts": {
+        "visits": 24,
+        "avgIntervalDays": 28,
+        "preferredHairdresser": "Nina K.",
+        "totalRevenue": 18750
+      }
+    },
+    "contact": {
+      "phone": "+45 22 33 44 55",
+      "email": "anna.j@hotmail.dk",
+      "address": "Skovvej 8",
+      "zip": "2800",
+      "city": "Lyngby"
+    },
+    "profile": [
+      { "title": "Hårtype", "value": "Tykt - Glat" },
+      { "title": "Porøsitet", "value": "Lav" },
+      { "title": "Hovedbund", "value": "Normal" },
+      { "title": "Naturlig farve", "value": "Mørkebrun (4)" },
+      { "title": "Nuværende farve", "value": "Varm brun med highlights" }
+    ],
+    "marketing": { "emailOptIn": true, "smsOptIn": true },
+    "payment": { "requirePrepayment": false, "allowPartialPayment": true },
+    "preferences": {
+      "preferredHairdresser": "Nina K.",
+      "preferredDays": "Fredag",
+      "specialRequests": "Ønsker altid en kop te under behandling. Foretrækker varme toner."
+    },
+    "warnings": [
+      { "title": "Hårskade", "value": "Let skadet i spidserne fra tidligere afblegning - vær forsigtig med kemiske behandlinger" }
+    ],
+    "group": { "groupId": "premium", "groupName": "Premium" },
+    "relations": [
+      { "id": "peter-jensen", "name": "Peter Jensen", "initials": "PJ", "type": "Ægtefælle" },
+      { "id": "mille-jensen", "name": "Mille Jensen", "initials": "MJ", "type": "Datter" }
+    ],
+    "statistics": {
+      "attendance": { "attended": 24, "cancelled": 2, "noShow": 0, "reliabilityPercent": 92 },
+      "topServices": [
+        { "name": "Klip + Farve", "count": 14 },
+        { "name": "Highlights", "count": 6 },
+        { "name": "Klip", "count": 4 }
+      ],
+      "topProducts": [
+        { "name": "Olaplex No. 3", "count": 8 },
+        { "name": "Kerastase Elixir", "count": 4 },
+        { "name": "Hårkur", "count": 3 }
+      ],
+      "bookingBehavior": {
+        "avgBookingNoticeDays": 10,
+        "preferredDay": "Fredag",
+        "preferredTimeSlot": "14:00 - 16:00",
+        "onlineBookingRate": 85,
+        "avgCancellationNoticeDays": 3
+      },
+      "loyalty": { "customerSinceYears": 1.7, "daysSinceLastVisit": 18, "churnRisk": "low", "avgIntervalDays": 28 }
+    },
+    "journal": [
+      {
+        "id": "aj-entry-1",
+        "type": "note",
+        "tag": "Note",
+        "subtags": [],
+        "text": "Anna er meget tilfreds med den nye varme farvetone. Hun ønsker at holde denne stil fremover. Husk te med mælk!",
+        "date": "2026-01-06",
+        "author": "Nina"
+      },
+      {
+        "id": "aj-entry-2",
+        "type": "colorFormula",
+        "tag": "Farveformel",
+        "subtags": [],
+        "text": "Måltone: Varm brun med kobber-highlights\nBund: 5/7 + 5/3 (2:1)\nHighlights: 8/43\nOxidant: 6% (bund), 9% (highlights)\nVirketid: 40 min\nPlacering: Bund hele håret, highlights i ansigtsindrammende partier\n\nResultat: Perfekt! Anna elskede det varme skær.",
+        "date": "2026-01-06",
+        "author": "Nina"
+      },
+      {
+        "id": "aj-entry-3",
+        "type": "note",
+        "tag": "Advarsel",
+        "subtags": ["Hårskade"],
+        "text": "OBS: Let hårskade i spidserne fra gammel afblegning (før hun kom til os). Undgå aggressive behandlinger og tilbyd altid Olaplex.",
+        "date": "2023-06-20",
+        "author": "Emma"
+      },
+      {
+        "id": "aj-entry-4",
+        "type": "analysis",
+        "tag": "Håranalyse",
+        "subtags": [],
+        "text": "Tilstand: God i rod og midterlængder, spidser let tørre\nPorøsitet: Lav til medium\nElasticitet: God\nHovedbudstilstand: Sund, ingen tørhed\n\nAnbefaling: Fortsat Olaplex hver behandling. Klip 1-2 cm af for at fjerne mest skadet område.",
+        "date": "2025-09-15",
+        "author": "Nina"
+      },
+      {
+        "id": "aj-entry-5",
+        "type": "colorFormula",
+        "tag": "Farveformel",
+        "subtags": ["Tidligere"],
+        "text": "Måltone: Varm chokoladebrun\nFormel: 4/7 + 5/3 (1:1)\nOxidant: 6%\nVirketid: 35 min\nPlacering: Hele håret\n\nResultat: God dækning, kunde ønsker lidt lysere næste gang.",
+        "date": "2025-06-12",
+        "author": "Nina"
+      },
+      {
+        "id": "aj-entry-6",
+        "type": "note",
+        "tag": "Note",
+        "subtags": ["Produkt"],
+        "text": "Anbefalet Kerastase Elixir til hjemmebrug. Anna købte og er meget glad for resultatet. Fortsæt anbefaling.",
+        "date": "2025-04-18",
+        "author": "Nina"
+      }
+    ],
+    "appointments": {
+      "upcoming": [
+        {
+          "date": "2026-02-07",
+          "time": "14:00",
+          "service": "Klip + Farve + Olaplex",
+          "hairdresser": "Nina K.",
+          "duration": "2t 30m"
+        },
+        {
+          "date": "2026-03-21",
+          "time": "15:00",
+          "service": "Klip + Highlights",
+          "hairdresser": "Nina K.",
+          "duration": "2t 45m"
+        }
+      ],
+      "history": [
+        { "date": "2026-01-06", "service": "Klip + Farve + Olaplex", "hairdresser": "Nina K.", "duration": "2t 30m", "price": 1850 },
+        { "date": "2025-12-06", "service": "Klip", "hairdresser": "Nina K.", "duration": "45 min", "price": 550 },
+        { "date": "2025-10-25", "service": "Klip + Farve", "hairdresser": "Nina K.", "duration": "2 timer", "price": 1450 },
+        { "date": "2025-09-15", "service": "Håranalyse + Behandling", "hairdresser": "Nina K.", "duration": "1 time", "price": 650 },
+        { "date": "2025-08-08", "service": "Highlights + Klip", "hairdresser": "Nina K.", "duration": "2t 45m", "price": 1950 },
+        { "date": "2025-06-12", "service": "Klip + Farve", "hairdresser": "Nina K.", "duration": "2 timer", "price": 1450 },
+        { "date": "2025-04-18", "service": "Klip + Olaplex", "hairdresser": "Nina K.", "duration": "1t 15m", "price": 850 },
+        { "date": "2025-02-28", "service": "Klip + Farve", "hairdresser": "Nina K.", "duration": "2 timer", "price": 1450 },
+        { "date": "2025-01-10", "service": "Highlights", "hairdresser": "Emma L.", "duration": "2t 30m", "price": 1750 },
+        { "date": "2024-11-15", "service": "Klip + Farve", "hairdresser": "Nina K.", "duration": "2 timer", "price": 1400 }
+      ]
+    },
+    "giftcards": {
+      "active": [
+        {
+          "id": "GK-2025-1234",
+          "type": "giftcard",
+          "label": "Gavekort #GK-2025-1234",
+          "originalValue": 1000,
+          "currentBalance": 650,
+          "expiresAt": "2026-06-15"
+        },
+        {
+          "id": "klip-5",
+          "type": "punchcard",
+          "label": "5-klip kort",
+          "totalPunches": 5,
+          "usedPunches": 3,
+          "expiresAt": "2026-12-31"
+        }
+      ],
+      "expired": [
+        {
+          "id": "GK-2023-0567",
+          "type": "giftcard",
+          "label": "Gavekort #GK-2023-0567",
+          "originalValue": 500,
+          "currentBalance": 0,
+          "expiresAt": "2024-12-01"
+        }
+      ]
+    },
+    "economy": {
+      "currentYear": { "year": 2025, "total": 12450 },
+      "lastYear": { "year": 2024, "total": 9800 },
+      "avgPerVisit": 889,
+      "avgPerMonth": 1038,
+      "chartData": {
+        "categories": ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
+        "series": [
+          {
+            "name": "Services",
+            "color": "#00897b",
+            "data": [
+              { "x": "Feb", "y": 1450 },
+              { "x": "Apr", "y": 1200 },
+              { "x": "Jun", "y": 1450 },
+              { "x": "Aug", "y": 1950 },
+              { "x": "Okt", "y": 550 },
+              { "x": "Nov", "y": 1200 },
+              { "x": "Dec", "y": 1450 }
+            ]
+          },
+          {
+            "name": "Produkter",
+            "color": "#1976d2",
+            "data": [
+              { "x": "Mar", "y": 349 },
+              { "x": "Maj", "y": 180 },
+              { "x": "Sep", "y": 425 },
+              { "x": "Dec", "y": 349 }
+            ]
+          }
+        ]
+      },
+      "purchases": [
+        { "invoice": "#1892", "date": "2025-12-09", "time": "14:30", "employee": "Nina K.", "services": "Klip + Farve", "type": "service", "amount": 1450 },
+        { "invoice": "#1892", "date": "2025-12-09", "time": "14:30", "employee": "Nina K.", "services": "Olaplex No. 3", "type": "product", "amount": 349 },
+        { "invoice": "#1845", "date": "2025-11-12", "time": "10:00", "employee": "Nina K.", "services": "Farve", "type": "service", "amount": 1200 },
+        { "invoice": "#1798", "date": "2025-10-15", "time": "15:45", "employee": "Nina K.", "services": "Klip", "type": "service", "amount": 550 },
+        { "invoice": "#1756", "date": "2025-09-20", "time": "11:15", "employee": "Emma L.", "services": "Kerastase Elixir", "type": "product", "amount": 425 },
+        { "invoice": "#1701", "date": "2025-08-08", "time": "13:00", "employee": "Nina K.", "services": "Highlights + Klip", "type": "service", "amount": 1950 }
+      ]
+    },
+    "activity": [
+      {
+        "date": "2026-01-22",
+        "time": "10:30",
+        "type": "communication",
+        "icon": "chat-text",
+        "title": "SMS påmindelse sendt om aftale d. 7. februar",
+        "actor": "System",
+        "badges": ["auto"]
+      },
+      {
+        "date": "2026-01-06",
+        "time": "16:40",
+        "type": "payment",
+        "icon": "credit-card",
+        "title": "Betaling modtaget — 1.850 kr",
+        "actor": "Dankort ****4521",
+        "badges": []
+      },
+      {
+        "date": "2026-01-06",
+        "time": "16:35",
+        "type": "edit",
+        "icon": "note-pencil",
+        "title": "Farveformel opdateret med ny varm tone",
+        "actor": "Nina K.",
+        "badges": []
+      },
+      {
+        "date": "2026-01-06",
+        "time": "16:30",
+        "type": "booking",
+        "icon": "check-circle",
+        "title": "Booking gennemført",
+        "actor": "Klip + Farve + Olaplex · Nina K.",
+        "badges": []
+      },
+      {
+        "date": "2026-01-06",
+        "time": "14:00",
+        "type": "customer",
+        "icon": "key",
+        "title": "Kunde ankom til aftale",
+        "actor": null,
+        "badges": []
+      },
+      {
+        "date": "2026-01-03",
+        "time": "19:22",
+        "type": "booking",
+        "icon": "calendar-plus",
+        "title": "Ny booking oprettet via online booking",
+        "actor": "7. feb 2026 kl. 14:00",
+        "badges": ["online"]
+      },
+      {
+        "date": "2025-12-20",
+        "time": "11:15",
+        "type": "communication",
+        "icon": "envelope",
+        "title": "Julehilsen email sendt",
+        "actor": "System",
+        "badges": ["auto", "marketing"]
+      },
+      {
+        "date": "2025-12-06",
+        "time": "15:50",
+        "type": "payment",
+        "icon": "credit-card",
+        "title": "Betaling modtaget — 550 kr",
+        "actor": "MobilePay",
+        "badges": []
+      },
+      {
+        "date": "2025-12-06",
+        "time": "15:45",
+        "type": "booking",
+        "icon": "check-circle",
+        "title": "Booking gennemført",
+        "actor": "Klip · Nina K.",
+        "badges": []
+      },
+      {
+        "date": "2025-10-25",
+        "time": "17:05",
+        "type": "payment",
+        "icon": "credit-card",
+        "title": "Betaling modtaget — 1.100 kr (350 kr fra gavekort)",
+        "actor": "Dankort ****4521",
+        "badges": ["gavekort"]
+      },
+      {
+        "date": "2025-10-25",
+        "time": "17:00",
+        "type": "edit",
+        "icon": "gift",
+        "title": "Gavekort #GK-2025-1234 tilføjet - Gave fra ægtefælle",
+        "actor": "Reception",
+        "badges": []
+      },
+      {
+        "date": "2025-09-15",
+        "time": "11:30",
+        "type": "edit",
+        "icon": "clipboard-text",
+        "title": "Håranalyse udført og gemt",
+        "actor": "Nina K.",
+        "badges": []
+      },
+      {
+        "date": "2025-08-01",
+        "time": "09:00",
+        "type": "customer",
+        "icon": "star",
+        "title": "Opgraderet til Premium kundegruppe",
+        "actor": "System",
+        "badges": []
+      },
+      {
+        "date": "2023-06-20",
+        "time": "10:45",
+        "type": "warning",
+        "icon": "warning",
+        "title": "Advarsel registreret — Hårskade noteret",
+        "actor": "Emma L.",
+        "badges": []
+      },
+      {
+        "date": "2023-05-15",
+        "time": "14:00",
+        "type": "customer",
+        "icon": "user-plus",
+        "title": "Kunde oprettet via telefon",
+        "actor": "Reception",
+        "badges": []
+      }
+    ]
+  },
+
+  "camilla-holm": {
+    "id": "camilla-holm",
+    "header": {
+      "initials": "CH",
+      "name": "Camilla Holm",
+      "customerSince": "2022-12-01",
+      "tags": ["vip"],
+      "bookingAllowed": true,
+      "facts": {
+        "visits": 25,
+        "avgIntervalDays": 35,
+        "preferredHairdresser": "Emma L.",
+        "totalRevenue": 28500
+      }
+    },
+    "contact": {
+      "phone": "+45 66 77 88 99",
+      "email": "camilla.h@outlook.dk",
+      "address": "Strandvejen 45",
+      "zip": "2900",
+      "city": "Hellerup"
+    },
+    "profile": [
+      { "title": "Hartype", "value": "Fint - Bolget" },
+      { "title": "Porositet", "value": "Hoj" },
+      { "title": "Hovedbund", "value": "Tor" },
+      { "title": "Naturlig farve", "value": "Lysblond (8)" }
+    ],
+    "marketing": { "emailOptIn": true, "smsOptIn": true },
+    "payment": { "requirePrepayment": false, "allowPartialPayment": false },
+    "preferences": {
+      "preferredHairdresser": "Emma L.",
+      "preferredDays": "Tirsdag",
+      "specialRequests": "Onsker altid en kop kaffe"
+    },
+    "warnings": [],
+    "group": { "groupId": "premium", "groupName": "Premium" },
+    "relations": [],
+    "statistics": {
+      "attendance": { "attended": 25, "cancelled": 1, "noShow": 0, "reliabilityPercent": 96 },
+      "topServices": [
+        { "name": "Klip + Farve", "count": 15 },
+        { "name": "Behandling", "count": 8 },
+        { "name": "Klip", "count": 2 }
+      ],
+      "topProducts": [
+        { "name": "Olaplex No. 3", "count": 4 },
+        { "name": "Harkur", "count": 3 }
+      ],
+      "bookingBehavior": {
+        "avgBookingNoticeDays": 14,
+        "preferredDay": "Tirsdag",
+        "preferredTimeSlot": "10:00 - 12:00",
+        "onlineBookingRate": 60,
+        "avgCancellationNoticeDays": 5
+      },
+      "loyalty": { "customerSinceYears": 2.1, "daysSinceLastVisit": 88, "churnRisk": "low", "avgIntervalDays": 35 }
+    },
+    "journal": [],
+    "appointments": { "upcoming": [], "history": [] },
+    "giftcards": { "active": [], "expired": [] },
+    "activity": []
+  },
+
+  "emma-larsen": {
+    "id": "emma-larsen",
+    "header": {
+      "initials": "EL",
+      "name": "Emma Larsen",
+      "customerSince": "2024-06-01",
+      "tags": [],
+      "bookingAllowed": true,
+      "facts": {
+        "visits": 8,
+        "avgIntervalDays": 30,
+        "preferredHairdresser": "Nina K.",
+        "totalRevenue": 5600
+      }
+    },
+    "contact": {
+      "phone": "+45 12 34 56 78",
+      "email": "emma.l@gmail.com",
+      "address": "Norrebrogade 100",
+      "zip": "2200",
+      "city": "Kobenhavn N"
+    },
+    "profile": [
+      { "title": "Hartype", "value": "Medium - Glat" },
+      { "title": "Porositet", "value": "Medium" },
+      { "title": "Hovedbund", "value": "Normal" },
+      { "title": "Naturlig farve", "value": "Morkbrun (3)" }
+    ],
+    "marketing": { "emailOptIn": true, "smsOptIn": false },
+    "payment": { "requirePrepayment": false, "allowPartialPayment": false },
+    "preferences": {
+      "preferredHairdresser": "Nina K.",
+      "preferredDays": "Lordag",
+      "specialRequests": ""
+    },
+    "warnings": [],
+    "group": { "groupId": "standard", "groupName": "Standard" },
+    "relations": [],
+    "statistics": {
+      "attendance": { "attended": 8, "cancelled": 0, "noShow": 0, "reliabilityPercent": 100 },
+      "topServices": [
+        { "name": "Klip", "count": 6 },
+        { "name": "Fon", "count": 2 }
+      ],
+      "topProducts": [],
+      "bookingBehavior": {
+        "avgBookingNoticeDays": 5,
+        "preferredDay": "Lordag",
+        "preferredTimeSlot": "11:00 - 13:00",
+        "onlineBookingRate": 100,
+        "avgCancellationNoticeDays": 0
+      },
+      "loyalty": { "customerSinceYears": 0.6, "daysSinceLastVisit": 50, "churnRisk": "low", "avgIntervalDays": 30 }
+    },
+    "journal": [],
+    "appointments": { "upcoming": [], "history": [] },
+    "giftcards": { "active": [], "expired": [] },
+    "activity": []
+  },
+
+  "freja-christensen": {
+    "id": "freja-christensen",
+    "header": {
+      "initials": "FC",
+      "name": "Freja Christensen",
+      "customerSince": "2022-08-01",
+      "tags": ["vip", "allergi"],
+      "bookingAllowed": true,
+      "facts": {
+        "visits": 31,
+        "avgIntervalDays": 28,
+        "preferredHairdresser": "Emma L.",
+        "totalRevenue": 42000
+      }
+    },
+    "contact": {
+      "phone": "+45 55 66 77 88",
+      "email": "freja.c@outlook.dk",
+      "address": "Frederiksberggade 50",
+      "zip": "1459",
+      "city": "Kobenhavn K"
+    },
+    "profile": [
+      { "title": "Hartype", "value": "Tykt - Krollet" },
+      { "title": "Porositet", "value": "Hoj" },
+      { "title": "Hovedbund", "value": "Sensitiv" },
+      { "title": "Naturlig farve", "value": "Rod (7)" }
+    ],
+    "marketing": { "emailOptIn": true, "smsOptIn": true },
+    "payment": { "requirePrepayment": false, "allowPartialPayment": false },
+    "preferences": {
+      "preferredHairdresser": "Emma L.",
+      "preferredDays": "Onsdag",
+      "specialRequests": "Skal altid have allergitjek for farve"
+    },
+    "warnings": [
+      { "title": "Allergi", "value": "Allergisk over for PPD - brug kun PPD-fri farver" }
+    ],
+    "group": { "groupId": "premium", "groupName": "Premium" },
+    "relations": [],
+    "statistics": {
+      "attendance": { "attended": 31, "cancelled": 2, "noShow": 0, "reliabilityPercent": 94 },
+      "topServices": [
+        { "name": "Klip + Farve", "count": 20 },
+        { "name": "Behandling", "count": 8 },
+        { "name": "Klip", "count": 3 }
+      ],
+      "topProducts": [
+        { "name": "Sensitiv Shampoo", "count": 6 },
+        { "name": "Harkur", "count": 4 }
+      ],
+      "bookingBehavior": {
+        "avgBookingNoticeDays": 10,
+        "preferredDay": "Onsdag",
+        "preferredTimeSlot": "09:00 - 11:00",
+        "onlineBookingRate": 80,
+        "avgCancellationNoticeDays": 3
+      },
+      "loyalty": { "customerSinceYears": 2.4, "daysSinceLastVisit": 65, "churnRisk": "low", "avgIntervalDays": 28 }
+    },
+    "journal": [
+      {
+        "id": "entry-1",
+        "type": "note",
+        "tag": "Advarsel",
+        "subtags": ["Allergi"],
+        "text": "PPD ALLERGI - Brug KUN PPD-fri farver. Kunden havde allergisk reaktion i 2021.",
+        "date": "2022-08-15",
+        "author": "Emma"
+      }
+    ],
+    "appointments": { "upcoming": [], "history": [] },
+    "giftcards": { "active": [], "expired": [] },
+    "activity": []
+  },
+
+  "ida-andersen": {
+    "id": "ida-andersen",
+    "header": {
+      "initials": "IA",
+      "name": "Ida Andersen",
+      "customerSince": "2025-10-01",
+      "tags": ["ny"],
+      "bookingAllowed": true,
+      "facts": {
+        "visits": 3,
+        "avgIntervalDays": 21,
+        "preferredHairdresser": "Sofie M.",
+        "totalRevenue": 1650
+      }
+    },
+    "contact": {
+      "phone": "+45 11 22 33 44",
+      "email": "ida@firma.dk",
+      "address": "Osterbrogade 80",
+      "zip": "2100",
+      "city": "Kobenhavn O"
+    },
+    "profile": [
+      { "title": "Hartype", "value": "Fint - Glat" },
+      { "title": "Porositet", "value": "Lav" },
+      { "title": "Hovedbund", "value": "Normal" },
+      { "title": "Naturlig farve", "value": "Blond (7)" }
+    ],
+    "marketing": { "emailOptIn": true, "smsOptIn": false },
+    "payment": { "requirePrepayment": false, "allowPartialPayment": false },
+    "preferences": {
+      "preferredHairdresser": "Sofie M.",
+      "preferredDays": "Torsdag",
+      "specialRequests": ""
+    },
+    "warnings": [],
+    "group": { "groupId": "standard", "groupName": "Standard" },
+    "relations": [],
+    "statistics": {
+      "attendance": { "attended": 3, "cancelled": 0, "noShow": 0, "reliabilityPercent": 100 },
+      "topServices": [
+        { "name": "Klip", "count": 3 }
+      ],
+      "topProducts": [],
+      "bookingBehavior": {
+        "avgBookingNoticeDays": 3,
+        "preferredDay": "Torsdag",
+        "preferredTimeSlot": "16:00 - 18:00",
+        "onlineBookingRate": 100,
+        "avgCancellationNoticeDays": 0
+      },
+      "loyalty": { "customerSinceYears": 0.2, "daysSinceLastVisit": 57, "churnRisk": "medium", "avgIntervalDays": 21 }
+    },
+    "journal": [],
+    "appointments": { "upcoming": [], "history": [] },
+    "giftcards": { "active": [], "expired": [] },
+    "activity": []
+  },
+
+  "katrine-berg": {
+    "id": "katrine-berg",
+    "header": {
+      "initials": "KB",
+      "name": "Katrine Berg",
+      "customerSince": "2024-04-01",
+      "tags": [],
+      "bookingAllowed": true,
+      "facts": {
+        "visits": 12,
+        "avgIntervalDays": 28,
+        "preferredHairdresser": "Nina K.",
+        "totalRevenue": 9600
+      }
+    },
+    "contact": {
+      "phone": "+45 55 66 77 88",
+      "email": "katrine.b@firma.dk",
+      "address": "Vesterbrogade 120",
+      "zip": "1620",
+      "city": "Kobenhavn V"
+    },
+    "profile": [
+      { "title": "Hartype", "value": "Medium - Bolget" },
+      { "title": "Porositet", "value": "Medium" },
+      { "title": "Hovedbund", "value": "Normal" },
+      { "title": "Naturlig farve", "value": "Morkblond (6)" }
+    ],
+    "marketing": { "emailOptIn": true, "smsOptIn": true },
+    "payment": { "requirePrepayment": false, "allowPartialPayment": false },
+    "preferences": {
+      "preferredHairdresser": "Nina K.",
+      "preferredDays": "Mandag",
+      "specialRequests": ""
+    },
+    "warnings": [],
+    "group": { "groupId": "standard", "groupName": "Standard" },
+    "relations": [],
+    "statistics": {
+      "attendance": { "attended": 12, "cancelled": 1, "noShow": 0, "reliabilityPercent": 92 },
+      "topServices": [
+        { "name": "Klip", "count": 8 },
+        { "name": "Farve", "count": 4 }
+      ],
+      "topProducts": [],
+      "bookingBehavior": {
+        "avgBookingNoticeDays": 7,
+        "preferredDay": "Mandag",
+        "preferredTimeSlot": "10:00 - 12:00",
+        "onlineBookingRate": 75,
+        "avgCancellationNoticeDays": 2
+      },
+      "loyalty": { "customerSinceYears": 0.8, "daysSinceLastVisit": 84, "churnRisk": "medium", "avgIntervalDays": 28 }
+    },
+    "journal": [],
+    "appointments": { "upcoming": [], "history": [] },
+    "giftcards": { "active": [], "expired": [] },
+    "activity": []
+  },
+
+  "line-frost": {
+    "id": "line-frost",
+    "header": {
+      "initials": "LF",
+      "name": "Line Frost",
+      "customerSince": "2024-05-01",
+      "tags": ["sensitiv"],
+      "bookingAllowed": true,
+      "facts": {
+        "visits": 9,
+        "avgIntervalDays": 35,
+        "preferredHairdresser": "Nina K.",
+        "totalRevenue": 7200
+      }
+    },
+    "contact": {
+      "phone": "+45 88 99 00 11",
+      "email": "line.f@mail.dk",
+      "address": "Amagerbrogade 55",
+      "zip": "2300",
+      "city": "Kobenhavn S"
+    },
+    "profile": [
+      { "title": "Hartype", "value": "Fint - Glat" },
+      { "title": "Porositet", "value": "Hoj" },
+      { "title": "Hovedbund", "value": "Sensitiv" },
+      { "title": "Naturlig farve", "value": "Lysblond (8)" }
+    ],
+    "marketing": { "emailOptIn": false, "smsOptIn": false },
+    "payment": { "requirePrepayment": false, "allowPartialPayment": false },
+    "preferences": {
+      "preferredHairdresser": "Nina K.",
+      "preferredDays": "Tirsdag",
+      "specialRequests": "Sensitiv hovedbund - brug milde produkter"
+    },
+    "warnings": [
+      { "title": "Sensitiv hovedbund", "value": "Brug kun milde, parfumefri produkter" }
+    ],
+    "group": { "groupId": "standard", "groupName": "Standard" },
+    "relations": [],
+    "statistics": {
+      "attendance": { "attended": 9, "cancelled": 0, "noShow": 0, "reliabilityPercent": 100 },
+      "topServices": [
+        { "name": "Klip", "count": 7 },
+        { "name": "Behandling", "count": 2 }
+      ],
+      "topProducts": [
+        { "name": "Sensitiv Shampoo", "count": 2 }
+      ],
+      "bookingBehavior": {
+        "avgBookingNoticeDays": 10,
+        "preferredDay": "Tirsdag",
+        "preferredTimeSlot": "13:00 - 15:00",
+        "onlineBookingRate": 90,
+        "avgCancellationNoticeDays": 0
+      },
+      "loyalty": { "customerSinceYears": 0.7, "daysSinceLastVisit": 101, "churnRisk": "medium", "avgIntervalDays": 35 }
+    },
+    "journal": [],
+    "appointments": { "upcoming": [], "history": [] },
+    "giftcards": { "active": [], "expired": [] },
+    "activity": []
+  },
+
+  "louise-hansen": {
+    "id": "louise-hansen",
+    "header": {
+      "initials": "LH",
+      "name": "Louise Hansen",
+      "customerSince": "2023-02-01",
+      "tags": ["stamkunde"],
+      "bookingAllowed": true,
+      "facts": {
+        "visits": 18,
+        "avgIntervalDays": 42,
+        "preferredHairdresser": "Emma L.",
+        "totalRevenue": 18900
+      }
+    },
+    "contact": {
+      "phone": "+45 33 44 55 66",
+      "email": "louise.h@gmail.com",
+      "address": "Gammel Kongevej 80",
+      "zip": "1850",
+      "city": "Frederiksberg C"
+    },
+    "profile": [
+      { "title": "Hartype", "value": "Tykt - Bolget" },
+      { "title": "Porositet", "value": "Medium" },
+      { "title": "Hovedbund", "value": "Normal" },
+      { "title": "Naturlig farve", "value": "Brun (5)" }
+    ],
+    "marketing": { "emailOptIn": true, "smsOptIn": true },
+    "payment": { "requirePrepayment": false, "allowPartialPayment": false },
+    "preferences": {
+      "preferredHairdresser": "Emma L.",
+      "preferredDays": "Onsdag/Torsdag",
+      "specialRequests": ""
+    },
+    "warnings": [],
+    "group": { "groupId": "standard", "groupName": "Standard" },
+    "relations": [],
+    "statistics": {
+      "attendance": { "attended": 18, "cancelled": 1, "noShow": 0, "reliabilityPercent": 95 },
+      "topServices": [
+        { "name": "Klip + Farve", "count": 10 },
+        { "name": "Klip", "count": 6 },
+        { "name": "Fon", "count": 2 }
+      ],
+      "topProducts": [
+        { "name": "Harkur", "count": 3 }
+      ],
+      "bookingBehavior": {
+        "avgBookingNoticeDays": 14,
+        "preferredDay": "Onsdag",
+        "preferredTimeSlot": "10:00 - 12:00",
+        "onlineBookingRate": 50,
+        "avgCancellationNoticeDays": 4
+      },
+      "loyalty": { "customerSinceYears": 1.9, "daysSinceLastVisit": 75, "churnRisk": "low", "avgIntervalDays": 42 }
+    },
+    "journal": [],
+    "appointments": { "upcoming": [], "history": [] },
+    "giftcards": { "active": [], "expired": [] },
+    "activity": []
+  },
+
+  "maja-petersen": {
+    "id": "maja-petersen",
+    "header": {
+      "initials": "MP",
+      "name": "Maja Petersen",
+      "customerSince": "2023-01-01",
+      "tags": ["stamkunde"],
+      "bookingAllowed": true,
+      "facts": {
+        "visits": 22,
+        "avgIntervalDays": 35,
+        "preferredHairdresser": "Emma L.",
+        "totalRevenue": 24200
+      }
+    },
+    "contact": {
+      "phone": "+45 98 76 54 32",
+      "email": "maja.p@mail.dk",
+      "address": "Jagtvej 150",
+      "zip": "2200",
+      "city": "Kobenhavn N"
+    },
+    "profile": [
+      { "title": "Hartype", "value": "Medium - Glat" },
+      { "title": "Porositet", "value": "Medium" },
+      { "title": "Hovedbund", "value": "Normal" },
+      { "title": "Naturlig farve", "value": "Morkblond (6)" }
+    ],
+    "marketing": { "emailOptIn": true, "smsOptIn": true },
+    "payment": { "requirePrepayment": false, "allowPartialPayment": false },
+    "preferences": {
+      "preferredHairdresser": "Emma L.",
+      "preferredDays": "Fredag",
+      "specialRequests": ""
+    },
+    "warnings": [],
+    "group": { "groupId": "standard", "groupName": "Standard" },
+    "relations": [],
+    "statistics": {
+      "attendance": { "attended": 22, "cancelled": 2, "noShow": 0, "reliabilityPercent": 92 },
+      "topServices": [
+        { "name": "Klip + Farve", "count": 12 },
+        { "name": "Klip", "count": 8 },
+        { "name": "Behandling", "count": 2 }
+      ],
+      "topProducts": [
+        { "name": "Olaplex No. 3", "count": 4 },
+        { "name": "Shampoo", "count": 2 }
+      ],
+      "bookingBehavior": {
+        "avgBookingNoticeDays": 10,
+        "preferredDay": "Fredag",
+        "preferredTimeSlot": "14:00 - 16:00",
+        "onlineBookingRate": 70,
+        "avgCancellationNoticeDays": 3
+      },
+      "loyalty": { "customerSinceYears": 2.0, "daysSinceLastVisit": 54, "churnRisk": "low", "avgIntervalDays": 35 }
+    },
+    "journal": [],
+    "appointments": { "upcoming": [], "history": [] },
+    "giftcards": { "active": [], "expired": [] },
+    "activity": []
+  },
+
+  "maria-olsen": {
+    "id": "maria-olsen",
+    "header": {
+      "initials": "MO",
+      "name": "Maria Olsen",
+      "customerSince": "2025-11-01",
+      "tags": ["ny"],
+      "bookingAllowed": true,
+      "facts": {
+        "visits": 2,
+        "avgIntervalDays": 14,
+        "preferredHairdresser": "Sofie M.",
+        "totalRevenue": 1100
+      }
+    },
+    "contact": {
+      "phone": "+45 44 55 66 77",
+      "email": "maria.o@mail.dk",
+      "address": "Istedgade 30",
+      "zip": "1650",
+      "city": "Kobenhavn V"
+    },
+    "profile": [
+      { "title": "Hartype", "value": "Fint - Bolget" },
+      { "title": "Porositet", "value": "Medium" },
+      { "title": "Hovedbund", "value": "Normal" },
+      { "title": "Naturlig farve", "value": "Blond (7)" }
+    ],
+    "marketing": { "emailOptIn": true, "smsOptIn": false },
+    "payment": { "requirePrepayment": false, "allowPartialPayment": false },
+    "preferences": {
+      "preferredHairdresser": "Sofie M.",
+      "preferredDays": "Lordag",
+      "specialRequests": ""
+    },
+    "warnings": [],
+    "group": { "groupId": "standard", "groupName": "Standard" },
+    "relations": [],
+    "statistics": {
+      "attendance": { "attended": 2, "cancelled": 0, "noShow": 0, "reliabilityPercent": 100 },
+      "topServices": [
+        { "name": "Klip", "count": 2 }
+      ],
+      "topProducts": [],
+      "bookingBehavior": {
+        "avgBookingNoticeDays": 2,
+        "preferredDay": "Lordag",
+        "preferredTimeSlot": "10:00 - 12:00",
+        "onlineBookingRate": 100,
+        "avgCancellationNoticeDays": 0
+      },
+      "loyalty": { "customerSinceYears": 0.1, "daysSinceLastVisit": 80, "churnRisk": "high", "avgIntervalDays": 14 }
+    },
+    "journal": [],
+    "appointments": { "upcoming": [], "history": [] },
+    "giftcards": { "active": [], "expired": [] },
+    "activity": []
+  },
+
+  "rikke-skov": {
+    "id": "rikke-skov",
+    "header": {
+      "initials": "RS",
+      "name": "Rikke Skov",
+      "customerSince": "2025-08-01",
+      "tags": [],
+      "bookingAllowed": true,
+      "facts": {
+        "visits": 4,
+        "avgIntervalDays": 28,
+        "preferredHairdresser": "Sofie M.",
+        "totalRevenue": 2800
+      }
+    },
+    "contact": {
+      "phone": "+45 77 88 99 00",
+      "email": "rikke.s@gmail.com",
+      "address": "Valby Langgade 100",
+      "zip": "2500",
+      "city": "Valby"
+    },
+    "profile": [
+      { "title": "Hartype", "value": "Medium - Glat" },
+      { "title": "Porositet", "value": "Lav" },
+      { "title": "Hovedbund", "value": "Normal" },
+      { "title": "Naturlig farve", "value": "Brun (4)" }
+    ],
+    "marketing": { "emailOptIn": true, "smsOptIn": true },
+    "payment": { "requirePrepayment": false, "allowPartialPayment": false },
+    "preferences": {
+      "preferredHairdresser": "Sofie M.",
+      "preferredDays": "Torsdag",
+      "specialRequests": ""
+    },
+    "warnings": [],
+    "group": { "groupId": "standard", "groupName": "Standard" },
+    "relations": [],
+    "statistics": {
+      "attendance": { "attended": 4, "cancelled": 0, "noShow": 0, "reliabilityPercent": 100 },
+      "topServices": [
+        { "name": "Klip", "count": 4 }
+      ],
+      "topProducts": [],
+      "bookingBehavior": {
+        "avgBookingNoticeDays": 5,
+        "preferredDay": "Torsdag",
+        "preferredTimeSlot": "15:00 - 17:00",
+        "onlineBookingRate": 100,
+        "avgCancellationNoticeDays": 0
+      },
+      "loyalty": { "customerSinceYears": 0.4, "daysSinceLastVisit": 96, "churnRisk": "medium", "avgIntervalDays": 28 }
+    },
+    "journal": [],
+    "appointments": { "upcoming": [], "history": [] },
+    "giftcards": { "active": [], "expired": [] },
+    "activity": []
+  },
+
+  "sofie-nielsen": {
+    "id": "sofie-nielsen",
+    "header": {
+      "initials": "SN",
+      "name": "Sofie Nielsen",
+      "customerSince": "2024-03-01",
+      "tags": ["vip"],
+      "bookingAllowed": true,
+      "facts": {
+        "visits": 14,
+        "avgIntervalDays": 32,
+        "preferredHairdresser": "Emma L.",
+        "totalRevenue": 12450
+      }
+    },
+    "economy": {
+      "currentYear": { "year": 2025, "total": 8450 },
+      "lastYear": { "year": 2024, "total": 4000 },
+      "avgPerVisit": 604,
+      "avgPerMonth": 704,
+      "chartData": {
+        "categories": ["Jan", "Feb", "Mar", "Apr", "Maj", "Jun", "Jul", "Aug", "Sep", "Okt", "Nov", "Dec"],
+        "series": [
+          {
+            "name": "Services",
+            "color": "#00897b",
+            "data": [
+              { "x": "Mar", "y": 550 },
+              { "x": "Jun", "y": 1200 },
+              { "x": "Aug", "y": 1600 },
+              { "x": "Okt", "y": 550 },
+              { "x": "Nov", "y": 1200 },
+              { "x": "Dec", "y": 1450 }
+            ]
+          },
+          {
+            "name": "Produkter",
+            "color": "#1976d2",
+            "data": [
+              { "x": "Apr", "y": 250 },
+              { "x": "Sep", "y": 349 }
+            ]
+          }
+        ]
+      },
+      "purchases": [
+        { "invoice": "#1893", "date": "2025-12-09", "time": "10:30", "employee": "Emma L.", "services": "Klip + Farve", "type": "service", "amount": 1450 },
+        { "invoice": "#1846", "date": "2025-11-12", "time": "14:00", "employee": "Emma L.", "services": "Farve", "type": "service", "amount": 1200 },
+        { "invoice": "#1799", "date": "2025-10-15", "time": "11:45", "employee": "Emma L.", "services": "Klip", "type": "service", "amount": 550 },
+        { "invoice": "#1757", "date": "2025-09-20", "time": "16:00", "employee": "Nina K.", "services": "Olaplex No. 3", "type": "product", "amount": 349 },
+        { "invoice": "#1702", "date": "2025-08-15", "time": "09:30", "employee": "Emma L.", "services": "Farve + Klip", "type": "service", "amount": 1600 }
+      ]
+    },
+    "contact": {
+      "phone": "+45 23 45 67 89",
+      "email": "sofie@email.dk",
+      "address": "Hovedgaden 12",
+      "zip": "2100",
+      "city": "Kobenhavn O"
+    },
+    "profile": [
+      { "title": "Hartype", "value": "Medium - Bolget" },
+      { "title": "Porositet", "value": "Medium" },
+      { "title": "Hovedbund", "value": "Normal" },
+      { "title": "Naturlig farve", "value": "Morkblond (6)" }
+    ],
+    "marketing": { "emailOptIn": true, "smsOptIn": false },
+    "payment": { "requirePrepayment": false, "allowPartialPayment": false },
+    "preferences": {
+      "preferredHairdresser": "Emma L.",
+      "preferredDays": "Tirsdag/Torsdag",
+      "specialRequests": "Foretraekker kold tone, ikke for mork"
+    },
+    "warnings": [
+      { "title": "Allergier / Folsomhed", "value": "Parfumeallergi - brug uparfumerede produkter" }
+    ],
+    "group": { "groupId": "standard", "groupName": "Standard" },
+    "relations": [
+      { "id": "emil-nielsen", "name": "Emil Nielsen", "initials": "EN", "type": "Barn" },
+      { "id": "luna-nielsen", "name": "Luna Nielsen", "initials": "LN", "type": "Barn" }
+    ],
+    "statistics": {
+      "attendance": { "attended": 47, "cancelled": 3, "noShow": 1, "reliabilityPercent": 92 },
+      "topServices": [
+        { "name": "Klip + Farve", "count": 12 },
+        { "name": "Farve", "count": 8 },
+        { "name": "Klip", "count": 6 }
+      ],
+      "topProducts": [
+        { "name": "Olaplex No. 3", "count": 5 },
+        { "name": "Shampoo", "count": 3 },
+        { "name": "Harkur", "count": 2 }
+      ],
+      "bookingBehavior": {
+        "avgBookingNoticeDays": 5,
+        "preferredDay": "Tirsdag",
+        "preferredTimeSlot": "10:00 - 12:00",
+        "onlineBookingRate": 78,
+        "avgCancellationNoticeDays": 2
+      },
+      "loyalty": { "customerSinceYears": 1.8, "daysSinceLastVisit": 13, "churnRisk": "low", "avgIntervalDays": 32 }
+    },
+    "journal": [
+      {
+        "id": "entry-1",
+        "type": "note",
+        "tag": "Note",
+        "subtags": [],
+        "text": "Kunden foretraekker naturlige farver og onsker lidt ekstra tid til konsultation. Husk at tjekke allergistatus inden farvebehandling.",
+        "date": "2025-12-09",
+        "author": "Emma"
+      },
+      {
+        "id": "entry-2",
+        "type": "note",
+        "tag": "Advarsel",
+        "subtags": ["Allergi"],
+        "text": "PARFUMEALLERGI - Brug kun uparfumerede produkter. Havde reaktion pa standard shampoo ved forste besog.",
+        "date": "2024-03-15",
+        "author": "Nina"
+      },
+      {
+        "id": "entry-3",
+        "type": "colorFormula",
+        "tag": "Farveformel",
+        "subtags": [],
+        "text": "Maltone: Kold\nOxidant: 6%\nFormel: 7/1 + 7/0 (1:1)\nVirketid: 35 min\nPlacering: Hele haret\n\nResultat: Flot ensartet farve, kunden meget tilfreds",
+        "date": "2025-11-12",
+        "author": "Emma"
+      },
+      {
+        "id": "entry-4",
+        "type": "analysis",
+        "tag": "Haranalyse",
+        "subtags": [],
+        "text": "Tilstand: God, let tort i spidserne\nPorositet: Medium\nElasticitet: Normal\n\nAnbefaling: Olaplex behandling hver 6. uge",
+        "date": "2025-10-01",
+        "author": "Maria"
+      }
+    ],
+    "appointments": {
+      "upcoming": [
+        {
+          "date": "2026-01-14",
+          "time": "10:00",
+          "service": "Klip + Farve",
+          "hairdresser": "Emma L.",
+          "duration": "2 timer"
+        }
+      ],
+      "history": [
+        { "date": "2025-12-09", "service": "Klip + Farve", "hairdresser": "Emma L.", "duration": "2 timer", "price": 1450 },
+        { "date": "2025-11-12", "service": "Farve", "hairdresser": "Emma L.", "duration": "1t 30m", "price": 1200 },
+        { "date": "2025-10-15", "service": "Klip", "hairdresser": "Emma L.", "duration": "45 min", "price": 550 },
+        { "date": "2025-09-20", "service": "Klip + Behandling", "hairdresser": "Nina K.", "duration": "1t 15m", "price": 750 },
+        { "date": "2025-08-15", "service": "Farve + Klip", "hairdresser": "Emma L.", "duration": "2t 15m", "price": 1600 }
+      ]
+    },
+    "giftcards": {
+      "active": [
+        {
+          "id": "GK-2024-0892",
+          "type": "giftcard",
+          "label": "Gavekort #GK-2024-0892",
+          "originalValue": 500,
+          "currentBalance": 350,
+          "expiresAt": "2026-03-15"
+        },
+        {
+          "id": "10-klip",
+          "type": "punchcard",
+          "label": "10-klip kort",
+          "totalPunches": 10,
+          "usedPunches": 7,
+          "expiresAt": null
+        }
+      ],
+      "expired": []
+    },
+    "activity": [
+      {
+        "date": "2025-12-10",
+        "time": "14:00",
+        "type": "communication",
+        "icon": "chat-text",
+        "title": "SMS pamindelse sendt om aftale i morgen",
+        "actor": "System",
+        "badges": ["auto"]
+      },
+      {
+        "date": "2025-12-10",
+        "time": "09:15",
+        "type": "customer",
+        "icon": "key",
+        "title": "Kunde loggede ind via online booking",
+        "actor": null,
+        "badges": ["online"]
+      },
+      {
+        "date": "2025-12-09",
+        "time": "12:30",
+        "type": "booking",
+        "icon": "check-circle",
+        "title": "Booking gennemfort",
+        "actor": "Farve + Behandling - Emma L.",
+        "badges": []
+      },
+      {
+        "date": "2025-12-09",
+        "time": "12:45",
+        "type": "edit",
+        "icon": "note-pencil",
+        "title": "Note tilfojet - Farveformel opdateret",
+        "actor": "Emma L.",
+        "badges": []
+      },
+      {
+        "date": "2025-11-15",
+        "time": "10:00",
+        "type": "warning",
+        "icon": "warning",
+        "title": "Allergi registreret - Parfumeallergi tilfojet til profil",
+        "actor": "Nina K.",
+        "badges": []
+      },
+      {
+        "date": "2024-03-01",
+        "time": "14:22",
+        "type": "customer",
+        "icon": "user-plus",
+        "title": "Kunde oprettet via online booking",
+        "actor": "System",
+        "badges": []
+      }
+    ]
+  }
+}
diff --git a/PlanTempus.Application/Features/Customers/Pages/Detail.cshtml b/PlanTempus.Application/Features/Customers/Pages/Detail.cshtml
index c1c8295..c172626 100644
--- a/PlanTempus.Application/Features/Customers/Pages/Detail.cshtml
+++ b/PlanTempus.Application/Features/Customers/Pages/Detail.cshtml
@@ -1,898 +1,7 @@
 @page "/kunder/{id}"
 @model PlanTempus.Application.Features.Customers.Pages.DetailModel
 @{
-    ViewData["Title"] = "Kundedetaljer - Sofie Nielsen";
+    ViewData["Title"] = "Kundedetaljer";
 }
 
-<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 frisør</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 omsætning</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 frisør</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 ønsker</swp-profile-box-label>
-                            <swp-profile-box-value>Foretraekker kold tone, ikke for mørk</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>
-}
+@await Component.InvokeAsync("CustomerDetailView", Model.Id)
diff --git a/PlanTempus.Application/Features/Customers/Pages/Index.cshtml b/PlanTempus.Application/Features/Customers/Pages/Index.cshtml
index 2122810..a6c827b 100644
--- a/PlanTempus.Application/Features/Customers/Pages/Index.cshtml
+++ b/PlanTempus.Application/Features/Customers/Pages/Index.cshtml
@@ -197,6 +197,80 @@
     </swp-drawer-body>
 </div>
 
+<!-- Create Customer Drawer -->
+<div id="create-customer-drawer" data-drawer="lg">
+    <swp-drawer-header>
+        <swp-drawer-title>
+            <i class="ph ph-user-plus"></i>
+            <span localize="customers.createDrawer.title">Opret ny kunde</span>
+        </swp-drawer-title>
+        <swp-drawer-close data-drawer-close>
+            <i class="ph ph-x"></i>
+        </swp-drawer-close>
+    </swp-drawer-header>
+
+    <swp-drawer-body>
+        <!-- Navn (påkrævet) -->
+        <swp-form-row>
+            <swp-form-label localize="customers.createDrawer.name">Navn *</swp-form-label>
+            <input type="text" id="createCustomerName" required>
+        </swp-form-row>
+
+        <!-- Kontaktoplysninger Card -->
+        <swp-card>
+            <swp-card-header>
+                <swp-card-title>
+                    <i class="ph ph-address-book"></i>
+                    <span localize="customers.drawer.contactInfo">Kontaktoplysninger</span>
+                </swp-card-title>
+            </swp-card-header>
+
+            <swp-edit-section>
+                <swp-edit-row>
+                    <swp-edit-label localize="customers.drawer.phone">Telefon</swp-edit-label>
+                    <swp-edit-input>
+                        <input type="tel" id="createCustomerPhone">
+                    </swp-edit-input>
+                </swp-edit-row>
+                <swp-edit-row>
+                    <swp-edit-label localize="customers.drawer.email">Email</swp-edit-label>
+                    <swp-edit-input>
+                        <input type="email" id="createCustomerEmail">
+                    </swp-edit-input>
+                </swp-edit-row>
+                <swp-edit-row>
+                    <swp-edit-label localize="customers.drawer.address">Adresse</swp-edit-label>
+                    <swp-edit-input>
+                        <input type="text" id="createCustomerAddress">
+                    </swp-edit-input>
+                </swp-edit-row>
+                <swp-edit-row>
+                    <swp-edit-label localize="customers.drawer.zipCity">Postnr + By</swp-edit-label>
+                    <swp-edit-input>
+                        <input type="text" id="createCustomerZip" class="short">
+                        <input type="text" id="createCustomerCity">
+                    </swp-edit-input>
+                </swp-edit-row>
+            </swp-edit-section>
+        </swp-card>
+
+        <!-- Note -->
+        <swp-form-row class="note-field">
+            <swp-form-label localize="customers.createDrawer.note">Note</swp-form-label>
+            <textarea id="createCustomerNote" rows="3" localize-placeholder="customers.createDrawer.notePlaceholder" placeholder="Skriv en note om kunden..."></textarea>
+        </swp-form-row>
+    </swp-drawer-body>
+
+    <swp-drawer-footer>
+        <swp-btn class="secondary" data-drawer-close>
+            <span localize="common.cancel">Annuller</span>
+        </swp-btn>
+        <swp-btn class="primary" id="saveNewCustomer">
+            <span localize="customers.createDrawer.save">Opret kunde</span>
+        </swp-btn>
+    </swp-drawer-footer>
+</div>
+
 @section Scripts {
     <script>
         // Row click - navigate to detail page
diff --git a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml
index 6df2554..d4a5723 100644
--- a/PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml
+++ b/PlanTempus.Application/Features/Employees/Components/EmployeeDetailSalary/Default.cshtml
@@ -144,10 +144,10 @@
                                 </swp-data-table>
                             </swp-accordion-table>
                             <swp-accordion-footer>
-                                <a href="/medarbejdere/loenspecifikation/@spec.PeriodKey" target="_blank" class="swp-btn secondary">
+                                <swp-btn class="primary" onclick="window.open('/medarbejdere/loenspecifikation/@spec.PeriodKey', '_blank')">
                                     <i class="ph ph-file-text"></i>
-                                    Se lønberegning
-                                </a>
+                                    Se lønspecifikation
+                                </swp-btn>
                             </swp-accordion-footer>
                         </swp-accordion-content>
                     </swp-accordion-item>
diff --git a/PlanTempus.Application/Features/Employees/Pages/SalarySpecification.cshtml b/PlanTempus.Application/Features/Employees/Pages/SalarySpecification.cshtml
index b667108..6c4c692 100644
--- a/PlanTempus.Application/Features/Employees/Pages/SalarySpecification.cshtml
+++ b/PlanTempus.Application/Features/Employees/Pages/SalarySpecification.cshtml
@@ -200,14 +200,17 @@
 
         .avoid-break { break-inside: avoid; page-break-inside: avoid; }
 
-        /* Print button */
-        .print-btn {
+        /* Action buttons */
+        .actions {
             position: fixed;
             top: 20px;
             right: 20px;
+            display: flex;
+            gap: 8px;
+            z-index: 100;
+        }
+        .btn {
             padding: 10px 20px;
-            background: #0ea5e9;
-            color: white;
             border: none;
             border-radius: 8px;
             font-size: 14px;
@@ -216,16 +219,33 @@
             display: flex;
             align-items: center;
             gap: 8px;
+            transition: all 0.15s ease;
         }
-        .print-btn:hover { background: #0284c7; }
+        .btn.primary {
+            background: #00897b;
+            color: white;
+        }
+        .btn.primary:hover { background: #00796b; }
+        .btn.secondary {
+            background: #f1f5f9;
+            color: #334155;
+            border: 1px solid #e2e8f0;
+        }
+        .btn.secondary:hover { background: #e2e8f0; }
     </style>
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@@phosphor-icons/web@@2.1.2/src/regular/style.css" />
 </head>
 <body>
-    <button class="print-btn no-print" onclick="window.print()">
-        <i class="ph ph-printer"></i>
-        Udskriv
-    </button>
+    <div class="actions no-print">
+        <button class="btn primary" onclick="window.print()">
+            <i class="ph ph-printer"></i>
+            Print / Gem som PDF
+        </button>
+        <button class="btn secondary" onclick="window.close()">
+            <i class="ph ph-x"></i>
+            Luk
+        </button>
+    </div>
 
     <div class="sheet">
         <!-- Header -->
diff --git a/PlanTempus.Application/Features/Localization/Services/JsonLocalizationService.cs b/PlanTempus.Application/Features/Localization/Services/JsonLocalizationService.cs
index 0c96748..a01a664 100644
--- a/PlanTempus.Application/Features/Localization/Services/JsonLocalizationService.cs
+++ b/PlanTempus.Application/Features/Localization/Services/JsonLocalizationService.cs
@@ -6,6 +6,7 @@ namespace PlanTempus.Application.Features.Localization.Services;
 public class JsonLocalizationService : ILocalizationService
 {
     private readonly string _translationsPath;
+    private readonly Dictionary<string, JsonDocument> _cache = new();
 
     public JsonLocalizationService(IWebHostEnvironment env)
     {
@@ -17,14 +18,11 @@ public class JsonLocalizationService : ILocalizationService
     public string Get(string key, string? culture = null)
     {
         culture ??= CurrentCulture;
-        var filePath = Path.Combine(_translationsPath, $"{culture}.json");
+        var doc = GetDocument(culture);
 
-        if (!File.Exists(filePath))
+        if (doc == null)
             return key;
 
-        var json = File.ReadAllText(filePath);
-        var doc = JsonDocument.Parse(json);
-
         var parts = key.Split('.');
         JsonElement current = doc.RootElement;
 
@@ -35,6 +33,23 @@ public class JsonLocalizationService : ILocalizationService
         return current.GetString() ?? key;
     }
 
+    private JsonDocument? GetDocument(string culture)
+    {
+        if (_cache.TryGetValue(culture, out var cached))
+            return cached;
+
+        var filePath = Path.Combine(_translationsPath, $"{culture}.json");
+
+        if (!File.Exists(filePath))
+            return null;
+
+        var json = File.ReadAllText(filePath);
+        var doc = JsonDocument.Parse(json);
+        _cache[culture] = doc;
+
+        return doc;
+    }
+
     public IEnumerable<SupportedCulture> GetSupportedCultures()
     {
         return new List<SupportedCulture>
diff --git a/PlanTempus.Application/Features/Localization/Translations/da.json b/PlanTempus.Application/Features/Localization/Translations/da.json
index 6109947..1683b3a 100644
--- a/PlanTempus.Application/Features/Localization/Translations/da.json
+++ b/PlanTempus.Application/Features/Localization/Translations/da.json
@@ -3,18 +3,24 @@
     "home": "Dashboard",
     "calendar": "Kalender",
     "pos": "Kasse",
+    "createBooking": "Opret booking",
+    "createSale": "Opret salg",
     "products": "Produkter & Lager",
     "suppliers": "Leverandører",
     "customers": "Kunder",
     "employees": "Medarbejdere",
     "services": "Services",
+    "booking": "Booking",
+    "website": "Website",
     "reports": "Statistik & Rapporter",
     "settings": "Indstillinger",
     "account": "Abonnement & Konto"
   },
   "groups": {
     "overview": "Overblik",
+    "quickActions": "Hurtigvalg",
     "data": "Data",
+    "online": "Online",
     "analytics": "Analyse",
     "system": "System"
   },
@@ -125,7 +131,7 @@
       "showingCount": "Viser {count} afstemninger",
       "exportSaft": "Eksporter SAF-T",
       "downloadCsv": "Download CSV",
-      "downloadPdf": "Download PDF",
+      "downloadPdf": "Download Z-Rapport",
       "viewTransactions": "Se transaktioner"
     },
     "revenue": {
@@ -575,12 +581,44 @@
       }
     }
   },
+  "suppliers": {
+    "title": "Leverandører",
+    "subtitle": "Administrer leverandører og indkøb",
+    "searchPlaceholder": "Søg leverandør, kontaktperson...",
+    "export": "Eksporter",
+    "create": "Ny leverandør",
+    "emptySearch": "Ingen leverandører matcher din søgning",
+    "stats": {
+      "total": "Leverandører i alt",
+      "active": "Aktive",
+      "purchasesThisMonth": "Indkøb denne måned",
+      "pendingOrders": "Afventende ordrer"
+    },
+    "column": {
+      "supplier": "Leverandør",
+      "contact": "Kontakt",
+      "products": "Produkter",
+      "lastOrder": "Sidste ordre",
+      "status": "Status"
+    },
+    "status": {
+      "active": "Aktiv",
+      "inactive": "Inaktiv"
+    }
+  },
   "customers": {
     "title": "Kunder",
     "subtitle": "Administrer kunder og kundekort",
     "searchPlaceholder": "Søg kunde (navn, telefon, email...)",
     "export": "Eksporter",
     "create": "Ny kunde",
+    "createDrawer": {
+      "title": "Opret ny kunde",
+      "name": "Navn *",
+      "note": "Note",
+      "notePlaceholder": "Skriv en note om kunden...",
+      "save": "Opret kunde"
+    },
     "emptySearch": "Ingen kunder matcher din søgning",
     "column": {
       "name": "Navn",
@@ -622,6 +660,114 @@
       "noteType": "Note",
       "colorFormula": "Farveformel",
       "seeAllNotes": "Se alle noter →"
+    },
+    "detail": {
+      "back": "Tilbage til kunder",
+      "delete": "Slet kunde",
+      "save": "Gem",
+      "tabs": {
+        "overview": "Oversigt",
+        "economy": "Økonomi",
+        "statistics": "Statistik",
+        "journal": "Journal",
+        "appointments": "Aftaler",
+        "giftcards": "Gavekort",
+        "activitylog": "Aktivitetslog"
+      },
+      "visits": "besøg",
+      "interval": "dage interval",
+      "preferredHairdresser": "foretrukken frisør",
+      "totalRevenue": "total omsætning",
+      "bookingAllowed": "Booking tilladt",
+      "bookingBlocked": "Booking blokeret",
+      "contactInfo": "Kontaktoplysninger",
+      "phone": "Telefon",
+      "email": "Email",
+      "address": "Adresse",
+      "zipCity": "Postnr + By",
+      "profile": "Profil",
+      "marketing": "Marketing",
+      "emailMarketing": "Email marketing",
+      "smsMarketing": "SMS marketing",
+      "paymentSettings": "Betalingsindstillinger",
+      "requirePrepayment": "Kræv forudbetaling",
+      "allowPartialPayment": "Tillad delvis betaling",
+      "preferences": "Præferencer",
+      "preferredDay": "Foretrukken dag",
+      "specialRequests": "Specielle ønsker",
+      "warnings": "Advarsler",
+      "groupAndRelations": "Kundegruppe & Relationer",
+      "economy": {
+        "thisYear": "I år ({0})",
+        "lastYear": "Sidste år",
+        "avgPerVisit": "Gns. pr. besøg",
+        "avgPerMonth": "Gns. pr. måned",
+        "revenueOverTime": "Omsætning over tid",
+        "services": "Services",
+        "products": "Produkter",
+        "purchaseHistory": "Købshistorik",
+        "seeAll": "Se alle transaktioner",
+        "noData": "Ingen økonomiske data tilgængelige"
+      }
     }
+  },
+  "onlineBooking": {
+    "title": "Online Booking",
+    "subtitle": "Konfigurer og preview din booking-side",
+    "status": {
+      "active": "Aktiv",
+      "inactive": "Inaktiv"
+    },
+    "url": {
+      "title": "Booking URL",
+      "copy": "Kopiér",
+      "open": "Åbn i ny fane"
+    },
+    "settings": {
+      "title": "Booking-indstillinger",
+      "enableBooking": "Aktivér online booking",
+      "enableBookingDesc": "Tillad kunder at booke tider online",
+      "bookAhead": "Book frem i tiden",
+      "minNotice": "Minimum varsel",
+      "cancelDeadline": "Aflysningsfrist"
+    },
+    "company": {
+      "title": "Virksomhedsoplysninger",
+      "edit": "Rediger",
+      "name": "Navn",
+      "address": "Adresse",
+      "zipCity": "Postnr + By",
+      "phone": "Telefon",
+      "email": "Email"
+    },
+    "hours": {
+      "title": "Åbningstider",
+      "edit": "Rediger",
+      "closed": "Lukket"
+    },
+    "preview": {
+      "title": "Preview",
+      "desktop": "Desktop",
+      "tablet": "Tablet",
+      "mobile": "Mobil"
+    },
+    "allSettings": "Alle indstillinger"
+  },
+  "settings": {
+    "title": "Indstillinger",
+    "tabs": {
+      "company": "Virksomhed",
+      "calendar": "Kalender",
+      "booking": "Online Booking",
+      "billing": "Faktura & Kvittering",
+      "reminders": "Påmindelser",
+      "payments": "Betalinger",
+      "modules": "Moduler",
+      "tracking": "Tracking"
+    }
+  },
+  "calendar": {
+    "title": "Kalender",
+    "subtitle": "Se og administrer bookinger"
   }
 }
diff --git a/PlanTempus.Application/Features/Localization/Translations/en.json b/PlanTempus.Application/Features/Localization/Translations/en.json
index b7adf82..23853e3 100644
--- a/PlanTempus.Application/Features/Localization/Translations/en.json
+++ b/PlanTempus.Application/Features/Localization/Translations/en.json
@@ -125,7 +125,7 @@
       "showingCount": "Showing {count} reconciliations",
       "exportSaft": "Export SAF-T",
       "downloadCsv": "Download CSV",
-      "downloadPdf": "Download PDF",
+      "downloadPdf": "Download Z-Report",
       "viewTransactions": "View transactions"
     },
     "revenue": {
@@ -574,5 +574,135 @@
         "dailysummary": "Email with daily summary"
       }
     }
+  },
+  "suppliers": {
+    "title": "Suppliers",
+    "subtitle": "Manage suppliers and purchases",
+    "searchPlaceholder": "Search supplier, contact person...",
+    "export": "Export",
+    "create": "New supplier",
+    "emptySearch": "No suppliers match your search",
+    "stats": {
+      "total": "Total suppliers",
+      "active": "Active",
+      "purchasesThisMonth": "Purchases this month",
+      "pendingOrders": "Pending orders"
+    },
+    "column": {
+      "supplier": "Supplier",
+      "contact": "Contact",
+      "products": "Products",
+      "lastOrder": "Last order",
+      "status": "Status"
+    },
+    "status": {
+      "active": "Active",
+      "inactive": "Inactive"
+    }
+  },
+  "customers": {
+    "title": "Customers",
+    "subtitle": "Manage customers and customer cards",
+    "searchPlaceholder": "Search customer (name, phone, email...)",
+    "export": "Export",
+    "create": "New customer",
+    "createDrawer": {
+      "title": "Create new customer",
+      "name": "Name *",
+      "note": "Note",
+      "notePlaceholder": "Write a note about the customer...",
+      "save": "Create customer"
+    },
+    "emptySearch": "No customers match your search",
+    "column": {
+      "name": "Name",
+      "phone": "Phone",
+      "email": "Email",
+      "visits": "Visits",
+      "lastVisit": "Last",
+      "hairdresser": "Hairdresser",
+      "created": "Created",
+      "tags": "Tags"
+    },
+    "stats": {
+      "total": "Total customers",
+      "newThisMonth": "New this month",
+      "avgVisits": "Avg. visits"
+    },
+    "drawer": {
+      "title": "Customer card",
+      "visits": "Visits",
+      "avgInterval": "Avg. interval",
+      "preferredHairdresser": "Preferred hairdresser",
+      "contactInfo": "Contact information",
+      "phone": "Phone",
+      "email": "Email",
+      "address": "Address",
+      "zipCity": "Zip + City",
+      "marketing": "Marketing",
+      "emailMarketing": "Email marketing",
+      "smsMarketing": "SMS marketing",
+      "profile": "Profile",
+      "hairType": "Hair type",
+      "porosity": "Porosity",
+      "preference": "Preference",
+      "warnings": "Warnings",
+      "revenueChart": "Revenue (last 6 months)",
+      "services": "Services",
+      "products": "Products",
+      "recentNotes": "Recent notes",
+      "noteType": "Note",
+      "colorFormula": "Color formula",
+      "seeAllNotes": "See all notes →"
+    },
+    "detail": {
+      "back": "Back to customers",
+      "delete": "Delete customer",
+      "save": "Save",
+      "tabs": {
+        "overview": "Overview",
+        "economy": "Economy",
+        "statistics": "Statistics",
+        "journal": "Journal",
+        "appointments": "Appointments",
+        "giftcards": "Gift cards",
+        "activitylog": "Activity log"
+      },
+      "visits": "visits",
+      "interval": "days interval",
+      "preferredHairdresser": "preferred hairdresser",
+      "totalRevenue": "total revenue",
+      "bookingAllowed": "Booking allowed",
+      "bookingBlocked": "Booking blocked",
+      "contactInfo": "Contact information",
+      "phone": "Phone",
+      "email": "Email",
+      "address": "Address",
+      "zipCity": "Zip + City",
+      "profile": "Profile",
+      "marketing": "Marketing",
+      "emailMarketing": "Email marketing",
+      "smsMarketing": "SMS marketing",
+      "paymentSettings": "Payment settings",
+      "requirePrepayment": "Require prepayment",
+      "allowPartialPayment": "Allow partial payment",
+      "preferences": "Preferences",
+      "preferredDay": "Preferred day",
+      "specialRequests": "Special requests",
+      "warnings": "Warnings",
+      "groupAndRelations": "Customer group & Relations",
+      "economy": {
+        "thisYear": "This year ({0})",
+        "lastYear": "Last year",
+        "avgPerVisit": "Avg. per visit",
+        "avgPerMonth": "Avg. per month",
+        "revenueOverTime": "Revenue over time",
+        "services": "Services",
+        "products": "Products",
+        "purchaseHistory": "Purchase history",
+        "seeAll": "See all transactions",
+        "noData": "No economic data available"
+      }
+    }
   }
 }
diff --git a/PlanTempus.Application/Features/Menu/Services/MockMenuService.cs b/PlanTempus.Application/Features/Menu/Services/MockMenuService.cs
index 229a7ff..e6b2f1d 100644
--- a/PlanTempus.Application/Features/Menu/Services/MockMenuService.cs
+++ b/PlanTempus.Application/Features/Menu/Services/MockMenuService.cs
@@ -71,7 +71,7 @@ public class MockMenuService : IMenuService
                         Id = "calendar",
                         Label = "Kalender",
                         Icon = "ph-calendar",
-                        Url = "/poc-calendar.html",
+                        Url = "/kalender",
                         MinimumRole = UserRole.Staff,
                         SortOrder = 2
                     },
@@ -87,12 +87,41 @@ public class MockMenuService : IMenuService
                 }
             },
 
+            // QUICK ACTIONS GROUP
+            new MenuGroup
+            {
+                Id = "quickActions",
+                Label = "Hurtigvalg",
+                SortOrder = 2,
+                Items = new List<MenuItem>
+                {
+                    new MenuItem
+                    {
+                        Id = "createBooking",
+                        Label = "Opret booking",
+                        Icon = "ph-calendar-plus",
+                        Url = "/opret-booking",
+                        MinimumRole = UserRole.Staff,
+                        SortOrder = 1
+                    },
+                    new MenuItem
+                    {
+                        Id = "createSale",
+                        Label = "Opret salg",
+                        Icon = "ph-shopping-cart",
+                        Url = "/opret-salg",
+                        MinimumRole = UserRole.Staff,
+                        SortOrder = 2
+                    }
+                }
+            },
+
             // DATA GROUP
             new MenuGroup
             {
                 Id = "data",
                 Label = "Data",
-                SortOrder = 2,
+                SortOrder = 3,
                 Items = new List<MenuItem>
                 {
                     new MenuItem
@@ -109,7 +138,7 @@ public class MockMenuService : IMenuService
                         Id = "suppliers",
                         Label = "Leverandører",
                         Icon = "ph-truck",
-                        Url = "/poc-leverandoerer.html",
+                        Url = "/leverandoerer",
                         MinimumRole = UserRole.Manager,
                         SortOrder = 2
                     },
@@ -143,12 +172,41 @@ public class MockMenuService : IMenuService
                 }
             },
 
+            // ONLINE GROUP
+            new MenuGroup
+            {
+                Id = "online",
+                Label = "Online",
+                SortOrder = 4,
+                Items = new List<MenuItem>
+                {
+                    new MenuItem
+                    {
+                        Id = "booking",
+                        Label = "Booking",
+                        Icon = "ph-calendar-check",
+                        Url = "/online-booking",
+                        MinimumRole = UserRole.Manager,
+                        SortOrder = 1
+                    },
+                    new MenuItem
+                    {
+                        Id = "website",
+                        Label = "Website",
+                        Icon = "ph-globe",
+                        Url = "/website",
+                        MinimumRole = UserRole.Manager,
+                        SortOrder = 2
+                    }
+                }
+            },
+
             // ANALYSE GROUP
             new MenuGroup
             {
                 Id = "analytics",
                 Label = "Analyse",
-                SortOrder = 3,
+                SortOrder = 5,
                 Items = new List<MenuItem>
                 {
                     new MenuItem
@@ -168,7 +226,7 @@ public class MockMenuService : IMenuService
             {
                 Id = "system",
                 Label = "System",
-                SortOrder = 4,
+                SortOrder = 6,
                 Items = new List<MenuItem>
                 {
                     new MenuItem
diff --git a/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingCompany/Default.cshtml b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingCompany/Default.cshtml
new file mode 100644
index 0000000..7baca13
--- /dev/null
+++ b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingCompany/Default.cshtml
@@ -0,0 +1,33 @@
+<swp-card>
+    <swp-card-header>
+        <swp-card-title>
+            <i class="ph ph-buildings"></i>
+            <span localize="onlineBooking.company.title">Virksomhedsoplysninger</span>
+        </swp-card-title>
+        <swp-section-action href="/indstillinger" localize="onlineBooking.company.edit">Rediger</swp-section-action>
+    </swp-card-header>
+    <swp-card-content>
+        <swp-edit-section>
+            <swp-edit-row>
+                <swp-edit-label localize="onlineBooking.company.name">Navn</swp-edit-label>
+                <swp-edit-value>Salon Beauty</swp-edit-value>
+            </swp-edit-row>
+            <swp-edit-row>
+                <swp-edit-label localize="onlineBooking.company.address">Adresse</swp-edit-label>
+                <swp-edit-value>Hovedgaden 123</swp-edit-value>
+            </swp-edit-row>
+            <swp-edit-row>
+                <swp-edit-label localize="onlineBooking.company.zipCity">Postnr + By</swp-edit-label>
+                <swp-edit-value>2100 København Ø</swp-edit-value>
+            </swp-edit-row>
+            <swp-edit-row>
+                <swp-edit-label localize="onlineBooking.company.phone">Telefon</swp-edit-label>
+                <swp-edit-value>+45 12 34 56 78</swp-edit-value>
+            </swp-edit-row>
+            <swp-edit-row>
+                <swp-edit-label localize="onlineBooking.company.email">Email</swp-edit-label>
+                <swp-edit-value>kontakt@salonbeauty.dk</swp-edit-value>
+            </swp-edit-row>
+        </swp-edit-section>
+    </swp-card-content>
+</swp-card>
diff --git a/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingCompany/OnlineBookingCompanyViewComponent.cs b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingCompany/OnlineBookingCompanyViewComponent.cs
new file mode 100644
index 0000000..be905df
--- /dev/null
+++ b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingCompany/OnlineBookingCompanyViewComponent.cs
@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace PlanTempus.Application.Features.OnlineBooking.Components;
+
+/// <summary>
+/// ViewComponent for displaying company information used in booking.
+/// </summary>
+public class OnlineBookingCompanyViewComponent : ViewComponent
+{
+    public IViewComponentResult Invoke()
+    {
+        return View();
+    }
+}
diff --git a/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingHours/Default.cshtml b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingHours/Default.cshtml
new file mode 100644
index 0000000..22eb848
--- /dev/null
+++ b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingHours/Default.cshtml
@@ -0,0 +1,93 @@
+<swp-card>
+    <swp-card-header>
+        <swp-card-title>
+            <i class="ph ph-clock"></i>
+            <span localize="onlineBooking.hours.title">Åbningstider</span>
+        </swp-card-title>
+        <swp-section-action href="/indstillinger" localize="onlineBooking.hours.edit">Rediger</swp-section-action>
+    </swp-card-header>
+    <swp-card-content>
+        <swp-hours-table>
+            <swp-hours-row>
+                <swp-hours-day localize="employees.detail.hours.monday">Mandag</swp-hours-day>
+                <swp-toggle-slider data-value="yes">
+                    <swp-toggle-option>Ja</swp-toggle-option>
+                    <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-hours-time>
+                    <input type="time" value="09:00">
+                    <span>-</span>
+                    <input type="time" value="17:00">
+                </swp-hours-time>
+            </swp-hours-row>
+            <swp-hours-row>
+                <swp-hours-day localize="employees.detail.hours.tuesday">Tirsdag</swp-hours-day>
+                <swp-toggle-slider data-value="yes">
+                    <swp-toggle-option>Ja</swp-toggle-option>
+                    <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-hours-time>
+                    <input type="time" value="09:00">
+                    <span>-</span>
+                    <input type="time" value="17:00">
+                </swp-hours-time>
+            </swp-hours-row>
+            <swp-hours-row>
+                <swp-hours-day localize="employees.detail.hours.wednesday">Onsdag</swp-hours-day>
+                <swp-toggle-slider data-value="yes">
+                    <swp-toggle-option>Ja</swp-toggle-option>
+                    <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-hours-time>
+                    <input type="time" value="09:00">
+                    <span>-</span>
+                    <input type="time" value="17:00">
+                </swp-hours-time>
+            </swp-hours-row>
+            <swp-hours-row>
+                <swp-hours-day localize="employees.detail.hours.thursday">Torsdag</swp-hours-day>
+                <swp-toggle-slider data-value="yes">
+                    <swp-toggle-option>Ja</swp-toggle-option>
+                    <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-hours-time>
+                    <input type="time" value="09:00">
+                    <span>-</span>
+                    <input type="time" value="19:00">
+                </swp-hours-time>
+            </swp-hours-row>
+            <swp-hours-row>
+                <swp-hours-day localize="employees.detail.hours.friday">Fredag</swp-hours-day>
+                <swp-toggle-slider data-value="yes">
+                    <swp-toggle-option>Ja</swp-toggle-option>
+                    <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-hours-time>
+                    <input type="time" value="09:00">
+                    <span>-</span>
+                    <input type="time" value="17:00">
+                </swp-hours-time>
+            </swp-hours-row>
+            <swp-hours-row>
+                <swp-hours-day localize="employees.detail.hours.saturday">Lørdag</swp-hours-day>
+                <swp-toggle-slider data-value="yes">
+                    <swp-toggle-option>Ja</swp-toggle-option>
+                    <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-hours-time>
+                    <input type="time" value="10:00">
+                    <span>-</span>
+                    <input type="time" value="14:00">
+                </swp-hours-time>
+            </swp-hours-row>
+            <swp-hours-row>
+                <swp-hours-day localize="employees.detail.hours.sunday">Søndag</swp-hours-day>
+                <swp-toggle-slider data-value="no">
+                    <swp-toggle-option>Ja</swp-toggle-option>
+                    <swp-toggle-option>Nej</swp-toggle-option>
+                </swp-toggle-slider>
+                <swp-hours-closed localize="onlineBooking.hours.closed">Lukket</swp-hours-closed>
+            </swp-hours-row>
+        </swp-hours-table>
+    </swp-card-content>
+</swp-card>
diff --git a/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingHours/OnlineBookingHoursViewComponent.cs b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingHours/OnlineBookingHoursViewComponent.cs
new file mode 100644
index 0000000..967019c
--- /dev/null
+++ b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingHours/OnlineBookingHoursViewComponent.cs
@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace PlanTempus.Application.Features.OnlineBooking.Components;
+
+/// <summary>
+/// ViewComponent for displaying opening hours used in booking.
+/// </summary>
+public class OnlineBookingHoursViewComponent : ViewComponent
+{
+    public IViewComponentResult Invoke()
+    {
+        return View();
+    }
+}
diff --git a/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingPreview/Default.cshtml b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingPreview/Default.cshtml
new file mode 100644
index 0000000..1726e5d
--- /dev/null
+++ b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingPreview/Default.cshtml
@@ -0,0 +1,130 @@
+<swp-online-booking-preview-container>
+    <swp-preview-header>
+        <swp-preview-title>
+            <i class="ph ph-eye"></i>
+            <span localize="onlineBooking.preview.title">Preview</span>
+        </swp-preview-title>
+        <swp-device-toggle>
+            <swp-device-btn class="active" data-device="desktop" title="Desktop">
+                <i class="ph ph-desktop"></i>
+            </swp-device-btn>
+            <swp-device-btn data-device="tablet" title="Tablet">
+                <i class="ph ph-device-tablet"></i>
+            </swp-device-btn>
+            <swp-device-btn data-device="mobile" title="Mobil">
+                <i class="ph ph-device-mobile"></i>
+            </swp-device-btn>
+        </swp-device-toggle>
+    </swp-preview-header>
+
+    <swp-preview-frame data-device="desktop">
+        <swp-preview-content>
+            <!-- Placeholder booking UI -->
+            <swp-booking-demo>
+                <swp-booking-demo-header>
+                    <swp-booking-demo-logo>SB</swp-booking-demo-logo>
+                    <swp-booking-demo-info>
+                        <h2>Salon Beauty</h2>
+                        <p>Hovedgaden 123, 2100 København Ø</p>
+                    </swp-booking-demo-info>
+                </swp-booking-demo-header>
+
+                <swp-booking-demo-section>
+                    <h3>Vælg service</h3>
+                    <swp-booking-demo-services>
+                        <swp-booking-demo-service class="selected">
+                            <span class="name">Dame klip</span>
+                            <span class="meta">45 min · 450 kr</span>
+                        </swp-booking-demo-service>
+                        <swp-booking-demo-service>
+                            <span class="name">Herre klip</span>
+                            <span class="meta">30 min · 350 kr</span>
+                        </swp-booking-demo-service>
+                        <swp-booking-demo-service>
+                            <span class="name">Farvning</span>
+                            <span class="meta">90 min · 850 kr</span>
+                        </swp-booking-demo-service>
+                        <swp-booking-demo-service>
+                            <span class="name">Balayage</span>
+                            <span class="meta">120 min · 1.450 kr</span>
+                        </swp-booking-demo-service>
+                    </swp-booking-demo-services>
+                </swp-booking-demo-section>
+
+                <swp-booking-demo-section>
+                    <h3>Vælg medarbejder</h3>
+                    <swp-booking-demo-employees>
+                        <swp-booking-demo-employee class="selected">
+                            <swp-avatar class="size-sm">MJ</swp-avatar>
+                            <span>Maria Jensen</span>
+                        </swp-booking-demo-employee>
+                        <swp-booking-demo-employee>
+                            <swp-avatar class="size-sm purple">AH</swp-avatar>
+                            <span>Anna Hansen</span>
+                        </swp-booking-demo-employee>
+                        <swp-booking-demo-employee>
+                            <swp-avatar class="size-sm blue">LP</swp-avatar>
+                            <span>Louise Petersen</span>
+                        </swp-booking-demo-employee>
+                    </swp-booking-demo-employees>
+                </swp-booking-demo-section>
+
+                <swp-booking-demo-section>
+                    <h3>Vælg dato og tid</h3>
+                    <swp-booking-demo-calendar>
+                        <swp-booking-demo-month>Januar 2026</swp-booking-demo-month>
+                        <swp-booking-demo-days>
+                            <span class="day-header">Ma</span>
+                            <span class="day-header">Ti</span>
+                            <span class="day-header">On</span>
+                            <span class="day-header">To</span>
+                            <span class="day-header">Fr</span>
+                            <span class="day-header">Lø</span>
+                            <span class="day-header">Sø</span>
+                            <span class="day other">27</span>
+                            <span class="day other">28</span>
+                            <span class="day other">29</span>
+                            <span class="day other">30</span>
+                            <span class="day other">31</span>
+                            <span class="day">1</span>
+                            <span class="day">2</span>
+                            <span class="day">3</span>
+                            <span class="day">4</span>
+                            <span class="day">5</span>
+                            <span class="day">6</span>
+                            <span class="day">7</span>
+                            <span class="day">8</span>
+                            <span class="day">9</span>
+                            <span class="day">10</span>
+                            <span class="day">11</span>
+                            <span class="day">12</span>
+                            <span class="day">13</span>
+                            <span class="day selected">14</span>
+                            <span class="day">15</span>
+                            <span class="day">16</span>
+                        </swp-booking-demo-days>
+                    </swp-booking-demo-calendar>
+                </swp-booking-demo-section>
+
+                <swp-booking-demo-footer>
+                    <swp-btn class="primary full-width">Book tid</swp-btn>
+                </swp-booking-demo-footer>
+            </swp-booking-demo>
+        </swp-preview-content>
+    </swp-preview-frame>
+</swp-online-booking-preview-container>
+
+<script>
+(function() {
+    const deviceBtns = document.querySelectorAll('swp-device-btn');
+    const previewFrame = document.querySelector('swp-preview-frame');
+
+    deviceBtns.forEach(btn => {
+        btn.addEventListener('click', () => {
+            deviceBtns.forEach(b => b.classList.remove('active'));
+            btn.classList.add('active');
+            previewFrame.setAttribute('data-device', btn.getAttribute('data-device'));
+        });
+    });
+})();
+</script>
diff --git a/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingPreview/OnlineBookingPreviewViewComponent.cs b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingPreview/OnlineBookingPreviewViewComponent.cs
new file mode 100644
index 0000000..4c3202f
--- /dev/null
+++ b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingPreview/OnlineBookingPreviewViewComponent.cs
@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace PlanTempus.Application.Features.OnlineBooking.Components;
+
+/// <summary>
+/// ViewComponent for the booking preview iframe with device toggle.
+/// </summary>
+public class OnlineBookingPreviewViewComponent : ViewComponent
+{
+    public IViewComponentResult Invoke()
+    {
+        return View();
+    }
+}
diff --git a/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingSettings/Default.cshtml b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingSettings/Default.cshtml
new file mode 100644
index 0000000..01e1c2a
--- /dev/null
+++ b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingSettings/Default.cshtml
@@ -0,0 +1,61 @@
+<swp-card>
+    <swp-card-header>
+        <swp-card-title>
+            <i class="ph ph-sliders"></i>
+            <span localize="onlineBooking.settings.title">Booking-indstillinger</span>
+        </swp-card-title>
+    </swp-card-header>
+    <swp-card-content>
+        <swp-toggle-row>
+            <swp-toggle-info>
+                <swp-toggle-label localize="onlineBooking.settings.enableBooking">Aktivér online booking</swp-toggle-label>
+                <swp-toggle-desc localize="onlineBooking.settings.enableBookingDesc">Tillad kunder at booke tider online</swp-toggle-desc>
+            </swp-toggle-info>
+            <swp-toggle-slider data-value="yes">
+                <swp-toggle-option>Ja</swp-toggle-option>
+                <swp-toggle-option>Nej</swp-toggle-option>
+            </swp-toggle-slider>
+        </swp-toggle-row>
+
+        <swp-section-divider></swp-section-divider>
+
+        <swp-edit-section>
+            <swp-edit-row class="wide-label">
+                <swp-edit-label localize="onlineBooking.settings.bookAhead">Book frem i tiden</swp-edit-label>
+                <swp-edit-select>
+                    <select id="booking-ahead">
+                        <option value="7">7 dage</option>
+                        <option value="14">14 dage</option>
+                        <option value="30" selected>30 dage</option>
+                        <option value="60">60 dage</option>
+                        <option value="90">90 dage</option>
+                    </select>
+                </swp-edit-select>
+            </swp-edit-row>
+            <swp-edit-row class="wide-label">
+                <swp-edit-label localize="onlineBooking.settings.minNotice">Minimum varsel</swp-edit-label>
+                <swp-edit-select>
+                    <select id="min-notice">
+                        <option value="0">Ingen begrænsning</option>
+                        <option value="1">1 time</option>
+                        <option value="2" selected>2 timer</option>
+                        <option value="4">4 timer</option>
+                        <option value="24">24 timer</option>
+                    </select>
+                </swp-edit-select>
+            </swp-edit-row>
+            <swp-edit-row class="wide-label">
+                <swp-edit-label localize="onlineBooking.settings.cancelDeadline">Aflysningsfrist</swp-edit-label>
+                <swp-edit-select>
+                    <select id="cancel-deadline">
+                        <option value="0">Ingen frist</option>
+                        <option value="2">2 timer før</option>
+                        <option value="4">4 timer før</option>
+                        <option value="24" selected>24 timer før</option>
+                        <option value="48">48 timer før</option>
+                    </select>
+                </swp-edit-select>
+            </swp-edit-row>
+        </swp-edit-section>
+    </swp-card-content>
+</swp-card>
diff --git a/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingSettings/OnlineBookingSettingsViewComponent.cs b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingSettings/OnlineBookingSettingsViewComponent.cs
new file mode 100644
index 0000000..f05ccde
--- /dev/null
+++ b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingSettings/OnlineBookingSettingsViewComponent.cs
@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace PlanTempus.Application.Features.OnlineBooking.Components;
+
+/// <summary>
+/// ViewComponent for online booking settings (toggle, booking ahead, notice, cancellation).
+/// </summary>
+public class OnlineBookingSettingsViewComponent : ViewComponent
+{
+    public IViewComponentResult Invoke()
+    {
+        return View();
+    }
+}
diff --git a/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingUrl/Default.cshtml b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingUrl/Default.cshtml
new file mode 100644
index 0000000..6b68c7e
--- /dev/null
+++ b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingUrl/Default.cshtml
@@ -0,0 +1,31 @@
+<swp-card>
+    <swp-card-header>
+        <swp-card-title>
+            <i class="ph ph-link"></i>
+            <span localize="onlineBooking.url.title">Booking URL</span>
+        </swp-card-title>
+    </swp-card-header>
+    <swp-card-content>
+        <swp-url-field>
+            <input type="text" value="https://book.plantempus.dk/salonbeauty" readonly id="booking-url">
+            <swp-url-copy title="Kopier link" onclick="copyBookingUrl()">
+                <i class="ph ph-copy"></i>
+            </swp-url-copy>
+        </swp-url-field>
+        <swp-url-actions>
+            <swp-btn class="secondary sm" onclick="window.open(document.getElementById('booking-url').value, '_blank')">
+                <i class="ph ph-arrow-square-out"></i>
+                <span localize="onlineBooking.url.open">Åbn i ny fane</span>
+            </swp-btn>
+        </swp-url-actions>
+    </swp-card-content>
+</swp-card>
+
+<script>
+function copyBookingUrl() {
+    const input = document.getElementById('booking-url');
+    navigator.clipboard.writeText(input.value).then(() => {
+        // Could show a toast notification here
+    });
+}
+</script>
diff --git a/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingUrl/OnlineBookingUrlViewComponent.cs b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingUrl/OnlineBookingUrlViewComponent.cs
new file mode 100644
index 0000000..4f7839d
--- /dev/null
+++ b/PlanTempus.Application/Features/OnlineBooking/Components/OnlineBookingUrl/OnlineBookingUrlViewComponent.cs
@@ -0,0 +1,14 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace PlanTempus.Application.Features.OnlineBooking.Components;
+
+/// <summary>
+/// ViewComponent for displaying the booking URL with copy and open actions.
+/// </summary>
+public class OnlineBookingUrlViewComponent : ViewComponent
+{
+    public IViewComponentResult Invoke()
+    {
+        return View();
+    }
+}
diff --git a/PlanTempus.Application/Features/OnlineBooking/Pages/Index.cshtml b/PlanTempus.Application/Features/OnlineBooking/Pages/Index.cshtml
new file mode 100644
index 0000000..7c98cb8
--- /dev/null
+++ b/PlanTempus.Application/Features/OnlineBooking/Pages/Index.cshtml
@@ -0,0 +1,42 @@
+@page "/online-booking"
+@model PlanTempus.Application.Features.OnlineBooking.Pages.IndexModel
+@{
+    ViewData["Title"] = "Online Booking";
+}
+
+<swp-sticky-header>
+    <swp-header-content>
+        <swp-page-header>
+            <swp-page-title>
+                <h1 localize="onlineBooking.title">Online Booking</h1>
+                <p localize="onlineBooking.subtitle">Konfigurer og preview din booking-side</p>
+            </swp-page-title>
+            <swp-page-actions>
+                <swp-status-indicator data-active="true">
+                    <i class="ph ph-check-circle icon"></i>
+                    <span localize="onlineBooking.status.active">Aktiv</span>
+                </swp-status-indicator>
+            </swp-page-actions>
+        </swp-page-header>
+    </swp-header-content>
+</swp-sticky-header>
+
+<swp-page-container>
+    <swp-online-booking-layout>
+        <!-- Column 1: Settings -->
+        <swp-online-booking-settings>
+            @await Component.InvokeAsync("OnlineBookingUrl")
+            @await Component.InvokeAsync("OnlineBookingSettings")
+            @await Component.InvokeAsync("OnlineBookingCompany")
+            @await Component.InvokeAsync("OnlineBookingHours")
+
+            <swp-all-settings-link href="/indstillinger">
+                <span localize="onlineBooking.allSettings">Alle indstillinger</span>
+                <i class="ph ph-arrow-right"></i>
+            </swp-all-settings-link>
+        </swp-online-booking-settings>
+
+        <!-- Column 2: Preview -->
+        @await Component.InvokeAsync("OnlineBookingPreview")
+    </swp-online-booking-layout>
+</swp-page-container>
diff --git a/PlanTempus.Application/Features/OnlineBooking/Pages/Index.cshtml.cs b/PlanTempus.Application/Features/OnlineBooking/Pages/Index.cshtml.cs
new file mode 100644
index 0000000..2686ad6
--- /dev/null
+++ b/PlanTempus.Application/Features/OnlineBooking/Pages/Index.cshtml.cs
@@ -0,0 +1,10 @@
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace PlanTempus.Application.Features.OnlineBooking.Pages;
+
+public class IndexModel : PageModel
+{
+    public void OnGet()
+    {
+    }
+}
diff --git a/PlanTempus.Application/Features/Settings/Pages/Index.cshtml b/PlanTempus.Application/Features/Settings/Pages/Index.cshtml
index 1ddb516..7b154bc 100644
--- a/PlanTempus.Application/Features/Settings/Pages/Index.cshtml
+++ b/PlanTempus.Application/Features/Settings/Pages/Index.cshtml
@@ -18,18 +18,10 @@
 
     <!-- Tab Bar -->
     <swp-tab-bar>
-        <swp-tab class="active" data-tab="general">
-            <i class="ph ph-buildings"></i>
-            <span localize="settings.tabs.company">Virksomhed</span>
-        </swp-tab>
-        <swp-tab data-tab="calendar">
+        <swp-tab class="active" data-tab="calendar">
             <i class="ph ph-calendar"></i>
             <span localize="settings.tabs.calendar">Kalender</span>
         </swp-tab>
-        <swp-tab data-tab="booking">
-            <i class="ph ph-globe"></i>
-            <span localize="settings.tabs.booking">Online Booking</span>
-        </swp-tab>
         <swp-tab data-tab="billing">
             <i class="ph ph-receipt"></i>
             <span localize="settings.tabs.billing">Faktura & Kvittering</span>
@@ -53,27 +45,13 @@
     </swp-tab-bar>
 </swp-sticky-header>
 
-<!-- Tab Content: Virksomhed -->
-<swp-tab-content data-tab="general" class="active">
-    <swp-page-container>
-        @await Component.InvokeAsync("SettingsGeneral")
-    </swp-page-container>
-</swp-tab-content>
-
 <!-- Tab Content: Kalender -->
-<swp-tab-content data-tab="calendar">
+<swp-tab-content data-tab="calendar" class="active">
     <swp-page-container>
         @await Component.InvokeAsync("SettingsCalendar")
     </swp-page-container>
 </swp-tab-content>
 
-<!-- Tab Content: Online Booking -->
-<swp-tab-content data-tab="booking">
-    <swp-page-container>
-        @await Component.InvokeAsync("SettingsBooking")
-    </swp-page-container>
-</swp-tab-content>
-
 <!-- Tab Content: Faktura & Kvittering -->
 <swp-tab-content data-tab="billing">
     <swp-page-container>
diff --git a/PlanTempus.Application/Features/Shared/Components/SideMenu/Default.cshtml b/PlanTempus.Application/Features/Shared/Components/SideMenu/Default.cshtml
index 2514a4b..cfc2f53 100644
--- a/PlanTempus.Application/Features/Shared/Components/SideMenu/Default.cshtml
+++ b/PlanTempus.Application/Features/Shared/Components/SideMenu/Default.cshtml
@@ -1,4 +1,4 @@
-@using PlanTempus.Application.Features.Menu
+@using PlanTempus.Application.Features.Menu
 @model SideMenuViewModel
 
 <swp-side-menu>
@@ -13,7 +13,7 @@
     <swp-side-menu-nav>
         @foreach (var group in Model.Groups)
         {
-            <swp-side-menu-group>
+            <swp-side-menu-group data-group="@group.Id">
                 <swp-side-menu-label>@group.Label</swp-side-menu-label>
                 @foreach (var item in group.Items)
                 {
diff --git a/PlanTempus.Application/Features/_Shared/Pages/_AuthLayout.cshtml b/PlanTempus.Application/Features/Shared/Pages/_AuthLayout.cshtml
similarity index 100%
rename from PlanTempus.Application/Features/_Shared/Pages/_AuthLayout.cshtml
rename to PlanTempus.Application/Features/Shared/Pages/_AuthLayout.cshtml
diff --git a/PlanTempus.Application/Features/_Shared/Pages/_Layout.cshtml b/PlanTempus.Application/Features/Shared/Pages/_Layout.cshtml
similarity index 96%
rename from PlanTempus.Application/Features/_Shared/Pages/_Layout.cshtml
rename to PlanTempus.Application/Features/Shared/Pages/_Layout.cshtml
index 9a6e870..399dbd9 100644
--- a/PlanTempus.Application/Features/_Shared/Pages/_Layout.cshtml
+++ b/PlanTempus.Application/Features/Shared/Pages/_Layout.cshtml
@@ -35,7 +35,9 @@
     <link rel="stylesheet" href="~/css/employees.css">
     <link rel="stylesheet" href="~/css/services.css">
     <link rel="stylesheet" href="~/css/customers.css">
+    <link rel="stylesheet" href="~/css/suppliers.css">
     <link rel="stylesheet" href="~/css/settings.css">
+    <link rel="stylesheet" href="~/css/online-booking.css">
     <link rel="stylesheet" href="~/css/reports.css">
     @await RenderSectionAsync("Styles", required: false)
 </head>
diff --git a/PlanTempus.Application/Features/_Shared/Pages/_ViewImports.cshtml b/PlanTempus.Application/Features/Shared/Pages/_ViewImports.cshtml
similarity index 100%
rename from PlanTempus.Application/Features/_Shared/Pages/_ViewImports.cshtml
rename to PlanTempus.Application/Features/Shared/Pages/_ViewImports.cshtml
diff --git a/PlanTempus.Application/Features/Shared/Pages/_ViewStart.cshtml b/PlanTempus.Application/Features/Shared/Pages/_ViewStart.cshtml
new file mode 100644
index 0000000..a44d928
--- /dev/null
+++ b/PlanTempus.Application/Features/Shared/Pages/_ViewStart.cshtml
@@ -0,0 +1,3 @@
+@{
+    Layout = "/Features/Shared/Pages/_Layout.cshtml";
+}
diff --git a/PlanTempus.Application/Features/_Shared/TagHelpers/LocalizeTagHelper.cs b/PlanTempus.Application/Features/Shared/TagHelpers/LocalizeTagHelper.cs
similarity index 92%
rename from PlanTempus.Application/Features/_Shared/TagHelpers/LocalizeTagHelper.cs
rename to PlanTempus.Application/Features/Shared/TagHelpers/LocalizeTagHelper.cs
index 9e77cf0..742e824 100644
--- a/PlanTempus.Application/Features/_Shared/TagHelpers/LocalizeTagHelper.cs
+++ b/PlanTempus.Application/Features/Shared/TagHelpers/LocalizeTagHelper.cs
@@ -1,7 +1,7 @@
 using Microsoft.AspNetCore.Razor.TagHelpers;
 using PlanTempus.Application.Features.Localization.Services;
 
-namespace PlanTempus.Application.Features._Shared.TagHelpers;
+namespace PlanTempus.Application.Features.Shared.TagHelpers;
 
 [HtmlTargetElement(Attributes = "localize")]
 public class LocalizeTagHelper : TagHelper
diff --git a/PlanTempus.Application/Features/Suppliers/Components/SupplierRow/Default.cshtml b/PlanTempus.Application/Features/Suppliers/Components/SupplierRow/Default.cshtml
new file mode 100644
index 0000000..9da30f7
--- /dev/null
+++ b/PlanTempus.Application/Features/Suppliers/Components/SupplierRow/Default.cshtml
@@ -0,0 +1,16 @@
+@model PlanTempus.Application.Features.Suppliers.Components.SupplierItemViewModel
+
+<swp-data-table-row data-name="@Model.Name" data-contact="@Model.ContactPerson" data-city="@Model.City" data-href="/leverandoerer/@Model.Id">
+    <swp-data-table-cell>
+        <swp-supplier-cell>
+            <swp-supplier-name>@Model.Name</swp-supplier-name>
+            <swp-supplier-city>@Model.City</swp-supplier-city>
+        </swp-supplier-cell>
+    </swp-data-table-cell>
+    <swp-data-table-cell>@Model.ContactPerson</swp-data-table-cell>
+    <swp-data-table-cell>@Model.ProductCount</swp-data-table-cell>
+    <swp-data-table-cell>@Model.LastOrderDate</swp-data-table-cell>
+    <swp-data-table-cell>
+        <swp-status-badge class="@Model.StatusClass">@Model.StatusText</swp-status-badge>
+    </swp-data-table-cell>
+</swp-data-table-row>
diff --git a/PlanTempus.Application/Features/Suppliers/Components/SupplierRow/SupplierRowViewComponent.cs b/PlanTempus.Application/Features/Suppliers/Components/SupplierRow/SupplierRowViewComponent.cs
new file mode 100644
index 0000000..7299679
--- /dev/null
+++ b/PlanTempus.Application/Features/Suppliers/Components/SupplierRow/SupplierRowViewComponent.cs
@@ -0,0 +1,11 @@
+using Microsoft.AspNetCore.Mvc;
+
+namespace PlanTempus.Application.Features.Suppliers.Components;
+
+public class SupplierRowViewComponent : ViewComponent
+{
+    public IViewComponentResult Invoke(SupplierItemViewModel supplier)
+    {
+        return View(supplier);
+    }
+}
diff --git a/PlanTempus.Application/Features/Suppliers/Components/SupplierTable/Default.cshtml b/PlanTempus.Application/Features/Suppliers/Components/SupplierTable/Default.cshtml
new file mode 100644
index 0000000..6207f1b
--- /dev/null
+++ b/PlanTempus.Application/Features/Suppliers/Components/SupplierTable/Default.cshtml
@@ -0,0 +1,39 @@
+@model PlanTempus.Application.Features.Suppliers.Components.SupplierTableViewModel
+
+<swp-action-bar>
+    <swp-search-input>
+        <i class="ph ph-magnifying-glass"></i>
+        <input type="text" id="supplierSearchInput" placeholder="@Model.SearchPlaceholder" />
+    </swp-search-input>
+    <swp-btn-group>
+        <swp-btn class="secondary">
+            <i class="ph ph-export"></i>
+            <span>@Model.ExportButtonText</span>
+        </swp-btn>
+        <swp-btn class="primary">
+            <i class="ph ph-plus"></i>
+            <span>@Model.CreateButtonText</span>
+        </swp-btn>
+    </swp-btn-group>
+</swp-action-bar>
+
+<swp-card class="suppliers-list">
+    <swp-data-table>
+        <swp-data-table-header>
+            <swp-data-table-cell>@Model.ColumnSupplier</swp-data-table-cell>
+            <swp-data-table-cell>@Model.ColumnContact</swp-data-table-cell>
+            <swp-data-table-cell>@Model.ColumnProducts</swp-data-table-cell>
+            <swp-data-table-cell>@Model.ColumnLastOrder</swp-data-table-cell>
+            <swp-data-table-cell>@Model.ColumnStatus</swp-data-table-cell>
+        </swp-data-table-header>
+        @foreach (var supplier in Model.Suppliers)
+        {
+            @await Component.InvokeAsync("SupplierRow", supplier)
+        }
+    </swp-data-table>
+
+    <swp-empty-state id="supplierEmptyState" style="display: none;">
+        <i class="ph ph-package"></i>
+        <span>@Model.EmptySearchText</span>
+    </swp-empty-state>
+</swp-card>
diff --git a/PlanTempus.Application/Features/Suppliers/Components/SupplierTable/SupplierTableViewComponent.cs b/PlanTempus.Application/Features/Suppliers/Components/SupplierTable/SupplierTableViewComponent.cs
new file mode 100644
index 0000000..6003e4d
--- /dev/null
+++ b/PlanTempus.Application/Features/Suppliers/Components/SupplierTable/SupplierTableViewComponent.cs
@@ -0,0 +1,116 @@
+using System.Globalization;
+using System.Text.Json;
+using Microsoft.AspNetCore.Mvc;
+using PlanTempus.Application.Features.Localization.Services;
+
+namespace PlanTempus.Application.Features.Suppliers.Components;
+
+public class SupplierTableViewComponent : ViewComponent
+{
+    private readonly ILocalizationService _localization;
+    private readonly IWebHostEnvironment _env;
+
+    public SupplierTableViewComponent(ILocalizationService localization, IWebHostEnvironment env)
+    {
+        _localization = localization;
+        _env = env;
+    }
+
+    public IViewComponentResult Invoke()
+    {
+        var data = LoadSupplierData();
+        var model = new SupplierTableViewModel
+        {
+            SearchPlaceholder = _localization.Get("suppliers.searchPlaceholder"),
+            ExportButtonText = _localization.Get("suppliers.export"),
+            CreateButtonText = _localization.Get("suppliers.create"),
+            ColumnSupplier = _localization.Get("suppliers.column.supplier"),
+            ColumnContact = _localization.Get("suppliers.column.contact"),
+            ColumnProducts = _localization.Get("suppliers.column.products"),
+            ColumnLastOrder = _localization.Get("suppliers.column.lastOrder"),
+            ColumnStatus = _localization.Get("suppliers.column.status"),
+            EmptySearchText = _localization.Get("suppliers.emptySearch"),
+            Suppliers = data.Suppliers
+                .OrderBy(s => s.Name)
+                .Select(s => new SupplierItemViewModel
+                {
+                    Id = s.Id,
+                    Name = s.Name,
+                    City = s.City,
+                    ContactPerson = s.ContactPerson,
+                    ProductCount = s.ProductCount,
+                    LastOrderDate = FormatLastOrder(s.LastOrder),
+                    IsActive = s.IsActive,
+                    StatusClass = s.IsActive ? "active" : "inactive",
+                    StatusText = s.IsActive
+                        ? _localization.Get("suppliers.status.active")
+                        : _localization.Get("suppliers.status.inactive")
+                })
+                .ToList()
+        };
+
+        return View(model);
+    }
+
+    private SupplierMockData LoadSupplierData()
+    {
+        var jsonPath = Path.Combine(_env.ContentRootPath, "Features", "Suppliers", "Data", "suppliersMock.json");
+        var json = System.IO.File.ReadAllText(jsonPath);
+        return JsonSerializer.Deserialize<SupplierMockData>(json, new JsonSerializerOptions
+        {
+            PropertyNameCaseInsensitive = true
+        }) ?? new SupplierMockData();
+    }
+
+    private static string FormatLastOrder(string dateStr)
+    {
+        if (DateTime.TryParse(dateStr, out var date))
+        {
+            return date.ToString("d. MMMM yyyy", new CultureInfo("da-DK"));
+        }
+        return dateStr;
+    }
+}
+
+public class SupplierTableViewModel
+{
+    public required string SearchPlaceholder { get; init; }
+    public required string ExportButtonText { get; init; }
+    public required string CreateButtonText { get; init; }
+    public required string ColumnSupplier { get; init; }
+    public required string ColumnContact { get; init; }
+    public required string ColumnProducts { get; init; }
+    public required string ColumnLastOrder { get; init; }
+    public required string ColumnStatus { get; init; }
+    public required string EmptySearchText { get; init; }
+    public required IReadOnlyList<SupplierItemViewModel> Suppliers { get; init; }
+}
+
+public class SupplierItemViewModel
+{
+    public required string Id { get; init; }
+    public required string Name { get; init; }
+    public required string City { get; init; }
+    public required string ContactPerson { get; init; }
+    public int ProductCount { get; init; }
+    public required string LastOrderDate { get; init; }
+    public bool IsActive { get; init; }
+    public required string StatusClass { get; init; }
+    public required string StatusText { get; init; }
+}
+
+internal class SupplierMockData
+{
+    public List<SupplierData> Suppliers { get; set; } = new();
+}
+
+internal class SupplierData
+{
+    public string Id { get; set; } = "";
+    public string Name { get; set; } = "";
+    public string City { get; set; } = "";
+    public string ContactPerson { get; set; } = "";
+    public int ProductCount { get; set; }
+    public string LastOrder { get; set; } = "";
+    public bool IsActive { get; set; }
+}
diff --git a/PlanTempus.Application/Features/Suppliers/Data/suppliersMock.json b/PlanTempus.Application/Features/Suppliers/Data/suppliersMock.json
new file mode 100644
index 0000000..53bb8e7
--- /dev/null
+++ b/PlanTempus.Application/Features/Suppliers/Data/suppliersMock.json
@@ -0,0 +1,112 @@
+{
+  "suppliers": [
+    {
+      "id": "beauty-group-denmark",
+      "name": "Beauty Group Denmark",
+      "city": "København",
+      "contactPerson": "Lars Hansen",
+      "productCount": 24,
+      "lastOrder": "2024-12-15",
+      "isActive": true
+    },
+    {
+      "id": "salon-supplies-aps",
+      "name": "Salon Supplies ApS",
+      "city": "Aarhus",
+      "contactPerson": "Mette Nielsen",
+      "productCount": 18,
+      "lastOrder": "2024-12-22",
+      "isActive": true
+    },
+    {
+      "id": "pro-hair-distribution",
+      "name": "Pro Hair Distribution",
+      "city": "Odense",
+      "contactPerson": "Anders Sørensen",
+      "productCount": 32,
+      "lastOrder": "2024-12-10",
+      "isActive": true
+    },
+    {
+      "id": "nordic-beauty-import",
+      "name": "Nordic Beauty Import",
+      "city": "Aalborg",
+      "contactPerson": "Pia Kristensen",
+      "productCount": 15,
+      "lastOrder": "2024-11-28",
+      "isActive": true
+    },
+    {
+      "id": "color-world-as",
+      "name": "Color World A/S",
+      "city": "Vejle",
+      "contactPerson": "Thomas Berg",
+      "productCount": 8,
+      "lastOrder": "2024-12-05",
+      "isActive": false
+    },
+    {
+      "id": "tools-and-more",
+      "name": "Tools & More",
+      "city": "Roskilde",
+      "contactPerson": "Karen Olsen",
+      "productCount": 12,
+      "lastOrder": "2024-12-18",
+      "isActive": true
+    },
+    {
+      "id": "scandinavian-cosmetics",
+      "name": "Scandinavian Cosmetics",
+      "city": "Helsingør",
+      "contactPerson": "Erik Madsen",
+      "productCount": 45,
+      "lastOrder": "2024-12-20",
+      "isActive": true
+    },
+    {
+      "id": "hair-products-international",
+      "name": "Hair Products International",
+      "city": "Frederiksberg",
+      "contactPerson": "Sofie Andersen",
+      "productCount": 67,
+      "lastOrder": "2024-12-12",
+      "isActive": true
+    },
+    {
+      "id": "danish-beauty-supply",
+      "name": "Danish Beauty Supply",
+      "city": "Esbjerg",
+      "contactPerson": "Michael Petersen",
+      "productCount": 21,
+      "lastOrder": "2024-11-15",
+      "isActive": false
+    },
+    {
+      "id": "salon-essentials",
+      "name": "Salon Essentials",
+      "city": "Kolding",
+      "contactPerson": "Anne Marie Larsen",
+      "productCount": 38,
+      "lastOrder": "2024-12-19",
+      "isActive": true
+    },
+    {
+      "id": "nordic-hair-care",
+      "name": "Nordic Hair Care",
+      "city": "Horsens",
+      "contactPerson": "Christian Holm",
+      "productCount": 29,
+      "lastOrder": "2024-12-08",
+      "isActive": true
+    },
+    {
+      "id": "beauty-wholesale-dk",
+      "name": "Beauty Wholesale DK",
+      "city": "Silkeborg",
+      "contactPerson": "Louise Jensen",
+      "productCount": 53,
+      "lastOrder": "2024-12-21",
+      "isActive": true
+    }
+  ]
+}
diff --git a/PlanTempus.Application/Features/Suppliers/Pages/Index.cshtml b/PlanTempus.Application/Features/Suppliers/Pages/Index.cshtml
new file mode 100644
index 0000000..ec69371
--- /dev/null
+++ b/PlanTempus.Application/Features/Suppliers/Pages/Index.cshtml
@@ -0,0 +1,39 @@
+@page "/leverandoerer"
+@model PlanTempus.Application.Features.Suppliers.Pages.IndexModel
+@{
+    ViewData["Title"] = "Leverandører";
+}
+
+<swp-sticky-header>
+    <swp-header-content>
+        <swp-page-header>
+            <swp-page-title>
+                <h1 localize="suppliers.title">Leverandører</h1>
+                <p localize="suppliers.subtitle">Administrer leverandører og indkøb</p>
+            </swp-page-title>
+        </swp-page-header>
+
+        <swp-stats-row class="cols-4">
+            <swp-stat-card class="highlight">
+                <swp-stat-value>12</swp-stat-value>
+                <swp-stat-label localize="suppliers.stats.total">Leverandører i alt</swp-stat-label>
+            </swp-stat-card>
+            <swp-stat-card>
+                <swp-stat-value>10</swp-stat-value>
+                <swp-stat-label localize="suppliers.stats.active">Aktive</swp-stat-label>
+            </swp-stat-card>
+            <swp-stat-card>
+                <swp-stat-value>45.230 kr</swp-stat-value>
+                <swp-stat-label localize="suppliers.stats.purchasesThisMonth">Indkøb denne måned</swp-stat-label>
+            </swp-stat-card>
+            <swp-stat-card class="warning">
+                <swp-stat-value>3</swp-stat-value>
+                <swp-stat-label localize="suppliers.stats.pendingOrders">Afventende ordrer</swp-stat-label>
+            </swp-stat-card>
+        </swp-stats-row>
+    </swp-header-content>
+</swp-sticky-header>
+
+<swp-page-container>
+    @await Component.InvokeAsync("SupplierTable")
+</swp-page-container>
diff --git a/PlanTempus.Application/Features/Suppliers/Pages/Index.cshtml.cs b/PlanTempus.Application/Features/Suppliers/Pages/Index.cshtml.cs
new file mode 100644
index 0000000..3ad2944
--- /dev/null
+++ b/PlanTempus.Application/Features/Suppliers/Pages/Index.cshtml.cs
@@ -0,0 +1,10 @@
+using Microsoft.AspNetCore.Mvc.RazorPages;
+
+namespace PlanTempus.Application.Features.Suppliers.Pages;
+
+public class IndexModel : PageModel
+{
+    public void OnGet()
+    {
+    }
+}
diff --git a/PlanTempus.Application/Features/_Shared/Components/SideMenu/Default.cshtml b/PlanTempus.Application/Features/_Shared/Components/SideMenu/Default.cshtml
deleted file mode 100644
index ae7de86..0000000
--- a/PlanTempus.Application/Features/_Shared/Components/SideMenu/Default.cshtml
+++ /dev/null
@@ -1,39 +0,0 @@
-@model PlanTempus.Application.Features.Menu.SideMenuViewModel
-
-<swp-side-menu>
-    <swp-side-menu-header>
-        <i class="ph ph-squares-four"></i>
-        <swp-side-menu-logo localize="sidebar.appName">Salon OS</swp-side-menu-logo>
-        <swp-menu-toggle id="menuToggle">
-            <i class="ph ph-caret-left"></i>
-        </swp-menu-toggle>
-    </swp-side-menu-header>
-
-    <swp-side-menu-nav>
-        @foreach (var group in Model.Groups)
-        {
-            <swp-side-menu-group>
-                <swp-side-menu-label>@group.Label</swp-side-menu-label>
-                @foreach (var item in group.Items)
-                {
-                    <a href="@item.Url" is="swp-side-menu-item"
-                       data-active="@(item.IsActive ? "true" : "false")"
-                       data-tooltip="@item.Label">
-                        <i class="ph @item.Icon"></i>
-                        <span>@item.Label</span>
-                    </a>
-                }
-            </swp-side-menu-group>
-        }
-    </swp-side-menu-nav>
-
-    <swp-side-menu-footer>
-        <swp-side-menu-action class="lock" id="lockScreen" title="Lås skærm">
-            <i class="ph ph-lock"></i>
-            <span localize="sidebar.lockScreen">Lås skærm</span>
-        </swp-side-menu-action>
-    </swp-side-menu-footer>
-</swp-side-menu>
-
-<!-- Tooltip for collapsed menu -->
-<span id="menuTooltip" class="swp-menu-tooltip" popover="manual"></span>
diff --git a/PlanTempus.Application/Features/_Shared/Pages/_TopBar.cshtml b/PlanTempus.Application/Features/_Shared/Pages/_TopBar.cshtml
deleted file mode 100644
index 41b140a..0000000
--- a/PlanTempus.Application/Features/_Shared/Pages/_TopBar.cshtml
+++ /dev/null
@@ -1,26 +0,0 @@
-<swp-app-topbar>
-    <swp-topbar-search>
-        <i class="ph ph-magnifying-glass"></i>
-        <input type="text" placeholder="Søg i Salon OS..." id="globalSearch">
-        <kbd>⌘K</kbd>
-    </swp-topbar-search>
-
-    <swp-topbar-actions>
-        <!-- Notifications -->
-        <swp-topbar-btn id="notificationsBtn" title="Notifikationer">
-            <i class="ph ph-bell"></i>
-            <swp-notification-badge>3</swp-notification-badge>
-        </swp-topbar-btn>
-
-        <swp-topbar-divider></swp-topbar-divider>
-
-        <!-- Profile (opens drawer) -->
-        <swp-topbar-profile id="profileTrigger">
-            <swp-profile-avatar>MJ</swp-profile-avatar>
-            <swp-profile-info>
-                <swp-profile-name>Maria Jensen</swp-profile-name>
-                <swp-profile-role>Administrator</swp-profile-role>
-            </swp-profile-info>
-        </swp-topbar-profile>
-    </swp-topbar-actions>
-</swp-app-topbar>
diff --git a/PlanTempus.Application/Features/_Shared/Pages/_ViewStart.cshtml b/PlanTempus.Application/Features/_Shared/Pages/_ViewStart.cshtml
deleted file mode 100644
index f9f7d10..0000000
--- a/PlanTempus.Application/Features/_Shared/Pages/_ViewStart.cshtml
+++ /dev/null
@@ -1,3 +0,0 @@
-@{
-    Layout = "/Features/_Shared/Pages/_Layout.cshtml";
-}
diff --git a/PlanTempus.Application/Features/_ViewStart.cshtml b/PlanTempus.Application/Features/_ViewStart.cshtml
index f9f7d10..a44d928 100644
--- a/PlanTempus.Application/Features/_ViewStart.cshtml
+++ b/PlanTempus.Application/Features/_ViewStart.cshtml
@@ -1,3 +1,3 @@
 @{
-    Layout = "/Features/_Shared/Pages/_Layout.cshtml";
+    Layout = "/Features/Shared/Pages/_Layout.cshtml";
 }
diff --git a/PlanTempus.Application/Startup.cs b/PlanTempus.Application/Startup.cs
index 06f1cd6..97630b3 100644
--- a/PlanTempus.Application/Startup.cs
+++ b/PlanTempus.Application/Startup.cs
@@ -37,8 +37,8 @@ public class Startup
         })
         .AddRazorOptions(options =>
         {
-            options.ViewLocationFormats.Add("/Features/_Shared/Pages/{0}.cshtml");
-            options.ViewLocationFormats.Add("/Features/_Shared/Components/{1}/{0}.cshtml");
+            options.ViewLocationFormats.Add("/Features/Shared/Pages/{0}.cshtml");
+            options.ViewLocationFormats.Add("/Features/Shared/Components/{1}/{0}.cshtml");
         });
 
         services.AddAntiforgery(x => x.HeaderName = "X-ANTI-FORGERY-TOKEN");
diff --git a/PlanTempus.Application/esbuild.config.js b/PlanTempus.Application/esbuild.config.js
new file mode 100644
index 0000000..cb77167
--- /dev/null
+++ b/PlanTempus.Application/esbuild.config.js
@@ -0,0 +1,14 @@
+import * as esbuild from 'esbuild';
+import { NovadiUnplugin } from '@novadi/core/unplugin';
+
+await esbuild.build({
+  entryPoints: ['wwwroot/ts/app.ts'],
+  bundle: true,
+  format: 'esm',
+  outfile: 'wwwroot/js/app.js',
+  sourcemap: 'inline',
+  target: 'es2020',
+  keepNames: true,
+  platform: 'browser',
+  plugins: [NovadiUnplugin.esbuild()]
+});
diff --git a/PlanTempus.Application/package-lock.json b/PlanTempus.Application/package-lock.json
index 603c53b..73a67c3 100644
--- a/PlanTempus.Application/package-lock.json
+++ b/PlanTempus.Application/package-lock.json
@@ -5,7 +5,9 @@
   "packages": {
     "": {
       "dependencies": {
+        "@novadi/core": "^0.6.0",
         "@sevenweirdpeople/swp-charting": "^0.2.5",
+        "calendar": "^0.1.7",
         "fuse.js": "^7.1.0"
       },
       "devDependencies": {
@@ -473,6 +475,66 @@
         "node": ">=12"
       }
     },
+    "node_modules/@jridgewell/gen-mapping": {
+      "version": "0.3.13",
+      "resolved": "http://npm.jarjarbinks:4873/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
+      "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/sourcemap-codec": "^1.5.0",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/remapping": {
+      "version": "2.3.5",
+      "resolved": "http://npm.jarjarbinks:4873/@jridgewell/remapping/-/remapping-2.3.5.tgz",
+      "integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/gen-mapping": "^0.3.5",
+        "@jridgewell/trace-mapping": "^0.3.24"
+      }
+    },
+    "node_modules/@jridgewell/resolve-uri": {
+      "version": "3.1.2",
+      "resolved": "http://npm.jarjarbinks:4873/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
+      "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/@jridgewell/sourcemap-codec": {
+      "version": "1.5.5",
+      "resolved": "http://npm.jarjarbinks:4873/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
+      "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
+      "license": "MIT"
+    },
+    "node_modules/@jridgewell/trace-mapping": {
+      "version": "0.3.31",
+      "resolved": "http://npm.jarjarbinks:4873/@jridgewell/trace-mapping/-/trace-mapping-0.3.31.tgz",
+      "integrity": "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/resolve-uri": "^3.1.0",
+        "@jridgewell/sourcemap-codec": "^1.4.14"
+      }
+    },
+    "node_modules/@novadi/core": {
+      "version": "0.6.0",
+      "resolved": "http://npm.jarjarbinks:4873/@novadi/core/-/core-0.6.0.tgz",
+      "integrity": "sha512-CU1134Nd7ULMg9OQbID5oP+FLtrMkNiLJ17+dmy4jjmPDcPK/dVzKTFxvJmbBvEfZEc9WtmkmJjqw11ABU7Jxw==",
+      "license": "MIT",
+      "dependencies": {
+        "unplugin": "^2.3.10"
+      },
+      "optionalDependencies": {
+        "@rollup/rollup-win32-x64-msvc": "^4.52.5"
+      },
+      "peerDependencies": {
+        "typescript": ">=5.0.0"
+      }
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",
@@ -484,12 +546,37 @@
         "node": ">=14"
       }
     },
+    "node_modules/@rollup/rollup-win32-x64-msvc": {
+      "version": "4.57.0",
+      "resolved": "http://npm.jarjarbinks:4873/@rollup/rollup-win32-x64-msvc/-/rollup-win32-x64-msvc-4.57.0.tgz",
+      "integrity": "sha512-Zv7v6q6aV+VslnpwzqKAmrk5JdVkLUzok2208ZXGipjb+msxBr/fJPZyeEXiFgH7k62Ak0SLIfxQRZQvTuf7rQ==",
+      "cpu": [
+        "x64"
+      ],
+      "license": "MIT",
+      "optional": true,
+      "os": [
+        "win32"
+      ]
+    },
     "node_modules/@sevenweirdpeople/swp-charting": {
       "version": "0.2.5",
       "resolved": "https://registry.npmjs.org/@sevenweirdpeople/swp-charting/-/swp-charting-0.2.5.tgz",
       "integrity": "sha512-bQa5FtAXsTjjFxsE79sD1+A74R7f9YgVp5fC1fsiHoaLXmapDEO2dWuGX/MQ8rEChDZFyN1ZlkV+OLUs6qtfZw==",
       "license": "MIT"
     },
+    "node_modules/acorn": {
+      "version": "8.15.0",
+      "resolved": "http://npm.jarjarbinks:4873/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
+      "license": "MIT",
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-6.2.2.tgz",
@@ -533,6 +620,17 @@
         "balanced-match": "^1.0.0"
       }
     },
+    "node_modules/calendar": {
+      "version": "0.1.7",
+      "resolved": "http://npm.jarjarbinks:4873/calendar/-/calendar-0.1.7.tgz",
+      "integrity": "sha512-9KLvHRMezHFwdpkpNSoOO0yi58D+tcXefo+2uSQznDK3hCKnUng1yBb6XG2XtUJD+SSyi5Y1/zOWRo9DxnxabA==",
+      "dependencies": {
+        "dayjs": "^1.11.0"
+      },
+      "peerDependencies": {
+        "@novadi/core": "^0.6.0"
+      }
+    },
     "node_modules/color-convert": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-2.0.1.tgz",
@@ -591,6 +689,12 @@
         "node": ">=4"
       }
     },
+    "node_modules/dayjs": {
+      "version": "1.11.19",
+      "resolved": "http://npm.jarjarbinks:4873/dayjs/-/dayjs-1.11.19.tgz",
+      "integrity": "sha512-t5EcLVS6QPBNqM2z8fakk/NKel+Xzshgt8FFKAn+qwlD1pzZWxh0nVCrvFK7ZDb6XucZeF9z8C7CBWTRIVApAw==",
+      "license": "MIT"
+    },
     "node_modules/eastasianwidth": {
       "version": "0.2.0",
       "resolved": "https://registry.npmjs.org/eastasianwidth/-/eastasianwidth-0.2.0.tgz",
@@ -820,6 +924,18 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/picomatch": {
+      "version": "4.0.3",
+      "resolved": "http://npm.jarjarbinks:4873/picomatch/-/picomatch-4.0.3.tgz",
+      "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/jonschlinkert"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.5.6",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
@@ -1029,6 +1145,35 @@
         "node": ">=8"
       }
     },
+    "node_modules/typescript": {
+      "version": "5.9.3",
+      "resolved": "http://npm.jarjarbinks:4873/typescript/-/typescript-5.9.3.tgz",
+      "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
+      "license": "Apache-2.0",
+      "peer": true,
+      "bin": {
+        "tsc": "bin/tsc",
+        "tsserver": "bin/tsserver"
+      },
+      "engines": {
+        "node": ">=14.17"
+      }
+    },
+    "node_modules/unplugin": {
+      "version": "2.3.11",
+      "resolved": "http://npm.jarjarbinks:4873/unplugin/-/unplugin-2.3.11.tgz",
+      "integrity": "sha512-5uKD0nqiYVzlmCRs01Fhs2BdkEgBS3SAVP6ndrBsuK42iC2+JHyxM05Rm9G8+5mkmRtzMZGY8Ct5+mliZxU/Ww==",
+      "license": "MIT",
+      "dependencies": {
+        "@jridgewell/remapping": "^2.3.5",
+        "acorn": "^8.15.0",
+        "picomatch": "^4.0.3",
+        "webpack-virtual-modules": "^0.6.2"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      }
+    },
     "node_modules/util-deprecate": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -1036,6 +1181,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.6.2",
+      "resolved": "http://npm.jarjarbinks:4873/webpack-virtual-modules/-/webpack-virtual-modules-0.6.2.tgz",
+      "integrity": "sha512-66/V2i5hQanC51vBQKPH4aI8NMAcBW59FVBs+rC7eGHupMyfn34q7rZIE+ETlJ+XTevqfUhVVBgSUNSW2flEUQ==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/PlanTempus.Application/package.json b/PlanTempus.Application/package.json
index 97b5fd0..1a827b0 100644
--- a/PlanTempus.Application/package.json
+++ b/PlanTempus.Application/package.json
@@ -5,11 +5,13 @@
     "purgecss": "^6.0.0"
   },
   "scripts": {
-    "build": "esbuild wwwroot/ts/app.ts --bundle --format=esm --outfile=wwwroot/js/app.js --sourcemap=inline --target=es2020 --keep-names --platform=browser",
+    "build": "node esbuild.config.js",
     "analyze-css": "node analyze-css.js"
   },
   "dependencies": {
+    "@novadi/core": "^0.6.0",
     "@sevenweirdpeople/swp-charting": "^0.2.5",
+    "calendar": "^0.1.7",
     "fuse.js": "^7.1.0"
   }
 }
diff --git a/PlanTempus.Application/wwwroot/css/components.css b/PlanTempus.Application/wwwroot/css/components.css
index de0e1ed..500e821 100644
--- a/PlanTempus.Application/wwwroot/css/components.css
+++ b/PlanTempus.Application/wwwroot/css/components.css
@@ -353,7 +353,8 @@ swp-status-badge {
     color: var(--color-blue);
   }
 
-  &.employee {
+  &.employee,
+  &.inactive {
     background: var(--color-background-alt);
     color: var(--color-text-secondary);
   }
diff --git a/PlanTempus.Application/wwwroot/css/customers.css b/PlanTempus.Application/wwwroot/css/customers.css
index a1d7b70..6e50864 100644
--- a/PlanTempus.Application/wwwroot/css/customers.css
+++ b/PlanTempus.Application/wwwroot/css/customers.css
@@ -617,68 +617,6 @@ 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
@@ -798,6 +736,12 @@ swp-attendance-segment.noshow {
   background: var(--color-red);
 }
 
+/* Empty state: all segments gray */
+swp-attendance-bar.empty swp-attendance-segment {
+  background: var(--color-gray-300);
+  color: var(--color-gray-500);
+}
+
 /* Top List */
 swp-top-list {
   display: flex;
@@ -1411,3 +1355,86 @@ swp-activity-time {
 swp-activity-actor {
   color: var(--color-text-secondary);
 }
+
+/* ===========================================
+   CREATE CUSTOMER DRAWER
+   =========================================== */
+
+/* Name field above card */
+#create-customer-drawer swp-form-row {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+  margin-bottom: var(--spacing-6);
+}
+
+#create-customer-drawer swp-form-label {
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text-secondary);
+}
+
+#create-customer-drawer swp-form-row input {
+  padding: var(--spacing-3) var(--spacing-4);
+  font-size: var(--font-size-base);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
+}
+
+#create-customer-drawer swp-form-row input:focus,
+#create-customer-drawer swp-form-row textarea:focus {
+  outline: none;
+  border-color: var(--color-teal);
+}
+
+/* Textarea for note */
+#create-customer-drawer swp-form-row textarea {
+  padding: var(--spacing-3) var(--spacing-4);
+  font-size: var(--font-size-base);
+  font-family: inherit;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface);
+  color: var(--color-text);
+  resize: vertical;
+  min-height: 80px;
+}
+
+/* Card inside drawer */
+#create-customer-drawer swp-card {
+  margin: 0;
+}
+
+/* Note field after card */
+#create-customer-drawer swp-form-row.note-field {
+  margin-top: var(--spacing-6);
+  margin-bottom: 0;
+}
+
+/* ===========================================
+   CUSTOMER DETAIL - ECONOMY TAB
+   =========================================== */
+.customer-economy {
+  swp-data-table {
+    grid-template-columns: 110px 110px 155px 1fr 110px 150px
+    
+  }
+
+  swp-data-table-header swp-data-table-cell:last-child,
+  swp-data-table-row swp-data-table-cell:last-child {
+    text-align: right;
+  }
+}
+
+/* Purchase type tags - matches chart legend colors (services=teal, products=blue) */
+swp-tag.service {
+  background: var(--bg-teal-strong);
+  color: var(--color-teal);
+}
+
+swp-tag.product {
+  background: var(--bg-blue-strong);
+  color: var(--color-blue);
+}
diff --git a/PlanTempus.Application/wwwroot/css/online-booking.css b/PlanTempus.Application/wwwroot/css/online-booking.css
new file mode 100644
index 0000000..b108a3a
--- /dev/null
+++ b/PlanTempus.Application/wwwroot/css/online-booking.css
@@ -0,0 +1,360 @@
+/**
+ * Online Booking - Preview and Settings page
+ *
+ * Feature-specific styling only.
+ * Reuses: swp-card, swp-card-header, swp-card-title, swp-edit-section,
+ *         swp-toggle-row, swp-url-field, swp-hours-table (components.css, settings.css)
+ */
+
+/* ===========================================
+   PAGE LAYOUT (Two-column)
+   =========================================== */
+swp-online-booking-layout {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--card-gap);
+  align-items: start;
+}
+
+@media (max-width: 1200px) {
+  swp-online-booking-layout {
+    grid-template-columns: 1fr;
+  }
+
+  swp-online-booking-preview-container {
+    order: -1;
+  }
+}
+
+/* ===========================================
+   SETTINGS COLUMN
+   =========================================== */
+swp-online-booking-settings {
+  display: flex;
+  flex-direction: column;
+  gap: var(--card-gap);
+}
+
+/* URL Actions (below URL field) */
+swp-url-actions {
+  display: flex;
+  gap: var(--spacing-3);
+  margin-top: var(--spacing-4);
+}
+
+/* All Settings Link */
+swp-all-settings-link {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-4);
+  color: var(--color-teal);
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-medium);
+  cursor: pointer;
+  transition: opacity var(--transition-fast);
+  text-decoration: none;
+
+  &:hover {
+    opacity: 0.8;
+  }
+
+  & i {
+    font-size: 18px;
+  }
+}
+
+/* ===========================================
+   PREVIEW COLUMN
+   =========================================== */
+swp-online-booking-preview-container {
+  display: flex;
+  flex-direction: column;
+  position: sticky;
+  top: calc(var(--sticky-header-height, 120px) + var(--section-gap));
+}
+
+swp-preview-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-4) var(--spacing-5);
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-bottom: none;
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+}
+
+swp-preview-title {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  text-transform: uppercase;
+  color: var(--color-text);
+
+  & i {
+    font-size: 18px;
+    color: var(--color-teal);
+  }
+}
+
+/* ===========================================
+   DEVICE TOGGLE
+   =========================================== */
+swp-device-toggle {
+  display: flex;
+  gap: var(--spacing-1);
+  padding: var(--spacing-1);
+  background: var(--color-background-alt);
+  border-radius: var(--radius-md);
+}
+
+swp-device-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 36px;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: var(--color-text-secondary);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+
+  & i {
+    font-size: 18px;
+  }
+
+  &:hover {
+    background: var(--color-background);
+    color: var(--color-text);
+  }
+
+  &.active {
+    background: var(--color-teal);
+    color: white;
+  }
+}
+
+/* ===========================================
+   PREVIEW FRAME
+   =========================================== */
+swp-preview-frame {
+  display: flex;
+  justify-content: center;
+  padding: var(--spacing-6);
+  background: var(--color-background-alt);
+  border: 1px solid var(--color-border);
+  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
+  min-height: 600px;
+  overflow: hidden;
+}
+
+swp-preview-content {
+  width: 100%;
+  max-width: 100%;
+  background: var(--color-surface);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-lg);
+  overflow: hidden;
+  transition: all var(--transition-normal);
+}
+
+/* Device variants */
+swp-preview-frame[data-device="desktop"] swp-preview-content {
+  max-width: 100%;
+}
+
+swp-preview-frame[data-device="tablet"] swp-preview-content {
+  max-width: 768px;
+}
+
+swp-preview-frame[data-device="mobile"] swp-preview-content {
+  max-width: 375px;
+}
+
+/* ===========================================
+   BOOKING DEMO (Placeholder UI)
+   =========================================== */
+swp-booking-demo {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+swp-booking-demo-header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  padding: var(--spacing-6);
+  background: linear-gradient(135deg, var(--color-teal), #00796b);
+  color: white;
+}
+
+swp-booking-demo-logo {
+  width: 48px;
+  height: 48px;
+  background: rgba(255, 255, 255, 0.2);
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: var(--font-size-lg);
+  font-weight: var(--font-weight-bold);
+}
+
+swp-booking-demo-info {
+  & h2 {
+    font-size: var(--font-size-lg);
+    font-weight: var(--font-weight-semibold);
+    margin: 0 0 var(--spacing-1) 0;
+  }
+
+  & p {
+    font-size: var(--font-size-sm);
+    opacity: 0.9;
+    margin: 0;
+  }
+}
+
+swp-booking-demo-section {
+  padding: var(--spacing-5);
+  border-bottom: 1px solid var(--color-border);
+
+  & h3 {
+    font-size: var(--font-size-sm);
+    font-weight: var(--font-weight-semibold);
+    text-transform: uppercase;
+    color: var(--color-text-secondary);
+    margin: 0 0 var(--spacing-4) 0;
+  }
+}
+
+/* Services list */
+swp-booking-demo-services {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+
+swp-booking-demo-service {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-3) var(--spacing-4);
+  background: var(--color-background-alt);
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+
+  &:hover {
+    background: var(--color-background-hover);
+  }
+
+  &.selected {
+    background: var(--bg-teal-strong);
+    border: 1px solid var(--color-teal);
+  }
+
+  & .name {
+    font-size: var(--font-size-base);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text);
+  }
+
+  & .meta {
+    font-size: var(--font-size-sm);
+    color: var(--color-text-secondary);
+  }
+}
+
+/* Employees list */
+swp-booking-demo-employees {
+  display: flex;
+  gap: var(--spacing-3);
+  flex-wrap: wrap;
+}
+
+swp-booking-demo-employee {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-4) var(--spacing-2) var(--spacing-2);
+  background: var(--color-background-alt);
+  border-radius: var(--radius-pill);
+  cursor: pointer;
+  transition: all var(--transition-fast);
+
+  &:hover {
+    background: var(--color-background-hover);
+  }
+
+  &.selected {
+    background: var(--bg-teal-strong);
+    border: 1px solid var(--color-teal);
+  }
+
+  & span {
+    font-size: var(--font-size-sm);
+    color: var(--color-text);
+  }
+}
+
+/* Calendar */
+swp-booking-demo-calendar {
+  background: var(--color-background-alt);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-4);
+}
+
+swp-booking-demo-month {
+  display: block;
+  text-align: center;
+  font-size: var(--font-size-base);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text);
+  margin-bottom: var(--spacing-4);
+}
+
+swp-booking-demo-days {
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: var(--spacing-1);
+  text-align: center;
+
+  & .day-header {
+    font-size: var(--font-size-xs);
+    font-weight: var(--font-weight-medium);
+    color: var(--color-text-secondary);
+    padding: var(--spacing-2);
+  }
+
+  & .day {
+    font-size: var(--font-size-sm);
+    padding: var(--spacing-2);
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    transition: all var(--transition-fast);
+
+    &:hover {
+      background: var(--color-background-hover);
+    }
+
+    &.selected {
+      background: var(--color-teal);
+      color: white;
+    }
+
+    &.other {
+      color: var(--color-text-muted);
+    }
+  }
+}
+
+swp-booking-demo-footer {
+  padding: var(--spacing-5);
+  margin-top: auto;
+}
diff --git a/PlanTempus.Application/wwwroot/css/print.css b/PlanTempus.Application/wwwroot/css/print.css
index 2609465..c6e2d0b 100644
--- a/PlanTempus.Application/wwwroot/css/print.css
+++ b/PlanTempus.Application/wwwroot/css/print.css
@@ -33,12 +33,12 @@ swp-z-report {
    PRINT ACTIONS (Screen only)
    =========================================== */
 swp-z-actions {
+  position: fixed;
+  top: 20px;
+  right: 20px;
   display: flex;
-  gap: var(--spacing-6);
-  justify-content: center;
-  margin-bottom: var(--spacing-16);
-  padding-bottom: var(--spacing-12);
-  border-bottom: 1px dashed var(--color-border);
+  gap: var(--spacing-3);
+  z-index: 100;
 }
 
 swp-z-actions swp-btn {
diff --git a/PlanTempus.Application/wwwroot/css/sidebar.css b/PlanTempus.Application/wwwroot/css/sidebar.css
index 58c9cfe..982b7f8 100644
--- a/PlanTempus.Application/wwwroot/css/sidebar.css
+++ b/PlanTempus.Application/wwwroot/css/sidebar.css
@@ -82,6 +82,7 @@ swp-side-menu-group {
   margin-bottom: var(--spacing-2);
 }
 
+
 swp-side-menu-label {
   display: block;
   padding: var(--spacing-2) var(--spacing-4) 6px;
@@ -125,6 +126,28 @@ a[is="swp-side-menu-item"] {
   }
 }
 
+/* ===========================================
+   QUICK ACTIONS GROUP - Highlighted
+   =========================================== */
+swp-side-menu-group[data-group="quickActions"] {
+  background: rgba(255, 235, 59, 0.15);
+  margin: var(--spacing-2) var(--spacing-2) var(--spacing-3);
+  padding: var(--spacing-2) 0;
+  border-radius: var(--border-radius-lg);
+  border: 1px solid rgba(255, 193, 7, 0.5);
+}
+
+swp-side-menu-group[data-group="quickActions"] swp-side-menu-label {
+  padding-left: var(--spacing-3);
+  padding-right: var(--spacing-3);
+}
+
+swp-side-menu-group[data-group="quickActions"] a[is="swp-side-menu-item"] {
+  padding-left: var(--spacing-3);
+  padding-right: var(--spacing-3);
+  border-left: none;
+}
+
 /* ===========================================
    FOOTER
    =========================================== */
@@ -223,6 +246,17 @@ swp-app-layout.menu-collapsed swp-side-menu-footer {
   padding: var(--spacing-3) var(--spacing-2);
 }
 
+/* Quick Actions - Collapsed State */
+swp-app-layout.menu-collapsed swp-side-menu-group[data-group="quickActions"] {
+  margin: var(--spacing-2) var(--spacing-1);
+  padding: var(--spacing-2) 0;
+}
+
+swp-app-layout.menu-collapsed swp-side-menu-group[data-group="quickActions"] a[is="swp-side-menu-item"] {
+  padding: var(--spacing-3);
+  justify-content: center;
+}
+
 /* ===========================================
    TOOLTIP (Collapsed State)
    =========================================== */
diff --git a/PlanTempus.Application/wwwroot/css/suppliers.css b/PlanTempus.Application/wwwroot/css/suppliers.css
new file mode 100644
index 0000000..a080019
--- /dev/null
+++ b/PlanTempus.Application/wwwroot/css/suppliers.css
@@ -0,0 +1,70 @@
+/**
+ * Suppliers - Page Styling
+ *
+ * Feature-specific styling only.
+ * Reuses:
+ *   - swp-sticky-header, swp-header-content, swp-page-container (page.css)
+ *   - swp-stats-row.cols-4, swp-stat-card (stats.css)
+ *   - swp-action-bar, swp-search-input (components.css)
+ *   - swp-data-table, swp-status-badge, swp-empty-state (components.css)
+ *   - swp-btn (components.css)
+ */
+
+/* ===========================================
+   SUPPLIER TABLE (uses swp-data-table from components.css)
+   =========================================== */
+swp-card.suppliers-list {
+  padding: 0;
+  overflow: hidden;
+}
+
+/* Table columns: Leverandør(1fr) | Kontakt(150px) | Produkter(80px) | Sidste(120px) | Status(100px) */
+swp-card.suppliers-list swp-data-table {
+  grid-template-columns: minmax(200px, 1fr) 150px 80px 120px 100px;
+}
+
+swp-card.suppliers-list swp-data-table-header,
+swp-card.suppliers-list swp-data-table-row {
+  padding: 0 var(--spacing-10);
+}
+
+swp-card.suppliers-list swp-data-table-header swp-data-table-cell {
+  padding-top: var(--spacing-5);
+  padding-bottom: var(--spacing-5);
+}
+
+swp-card.suppliers-list swp-data-table-row {
+  cursor: pointer;
+}
+
+swp-card.suppliers-list swp-data-table-cell {
+  padding: var(--spacing-5) 0;
+}
+
+/* Supplier cell (name + city) */
+swp-supplier-cell {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+swp-supplier-name {
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+}
+
+swp-supplier-city {
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+}
+
+/* Products column (center + mono) */
+swp-card.suppliers-list swp-data-table-row swp-data-table-cell:nth-child(3) {
+  font-family: var(--font-mono);
+  text-align: center;
+}
+
+/* Last order column (muted) */
+swp-card.suppliers-list swp-data-table-row swp-data-table-cell:nth-child(4) {
+  color: var(--color-text-secondary);
+}
diff --git a/PlanTempus.Application/wwwroot/ts/app.ts b/PlanTempus.Application/wwwroot/ts/app.ts
index db2d6f7..f54d6e9 100644
--- a/PlanTempus.Application/wwwroot/ts/app.ts
+++ b/PlanTempus.Application/wwwroot/ts/app.ts
@@ -14,8 +14,10 @@ import { EmployeesController } from './modules/employees';
 import { ControlsController } from './modules/controls';
 import { ServicesController } from './modules/services';
 import { CustomersController } from './modules/customers';
+import { SuppliersController } from './modules/suppliers';
 import { TrackingController } from './modules/tracking';
 import { ReportsController } from './modules/reports';
+import { CalendarController } from './modules/calendar';
 
 /**
  * Main application class
@@ -31,8 +33,10 @@ export class App {
   readonly controls: ControlsController;
   readonly services: ServicesController;
   readonly customers: CustomersController;
+  readonly suppliers: SuppliersController;
   readonly tracking: TrackingController;
   readonly reports: ReportsController;
+  readonly calendar: CalendarController;
 
   constructor() {
     // Initialize controllers
@@ -46,8 +50,10 @@ export class App {
     this.controls = new ControlsController();
     this.services = new ServicesController();
     this.customers = new CustomersController();
+    this.suppliers = new SuppliersController();
     this.tracking = new TrackingController();
     this.reports = new ReportsController();
+    this.calendar = new CalendarController();
   }
 }
 
diff --git a/PlanTempus.Application/wwwroot/ts/modules/calendar.ts b/PlanTempus.Application/wwwroot/ts/modules/calendar.ts
new file mode 100644
index 0000000..6ffda38
--- /dev/null
+++ b/PlanTempus.Application/wwwroot/ts/modules/calendar.ts
@@ -0,0 +1,119 @@
+/**
+ * Calendar Controller
+ *
+ * Integrates the calendar package into PlanTempus.
+ * Uses NovaDI for dependency injection and IndexedDB for offline storage.
+ */
+
+import { Container } from '@novadi/core';
+import {
+  registerCoreServices,
+  CalendarApp,
+  IndexedDBContext,
+  SettingsService,
+  ViewConfigService,
+  EventBus,
+  CalendarEvents
+} from 'calendar';
+import { registerSchedules } from 'calendar/schedules';
+
+export class CalendarController {
+  private app: Container | null = null;
+  private calendarApp: CalendarApp | null = null;
+
+  constructor() {
+    const containerEl = document.querySelector('swp-calendar-container');
+    if (!containerEl) return;
+    this.init(containerEl as HTMLElement).catch(err => {
+      console.error('[CalendarController] Init failed:', err);
+    });
+  }
+
+  private async init(containerEl: HTMLElement): Promise<void> {
+    console.log('[CalendarController] Starting init...');
+
+    // Create DI container using the pattern from README
+    const container = new Container();
+    const builder = container.builder();
+    registerCoreServices(builder, {
+      dbConfig: { dbName: 'PlanTempusCalendarDB', dbVersion: 1 }
+    });
+    registerSchedules(builder);
+    this.app = builder.build();
+    console.log('[CalendarController] Container built');
+
+    // Initialize IndexedDB
+    const dbContext = this.app.resolveType<IndexedDBContext>();
+    await dbContext.initialize();
+    console.log('[CalendarController] IndexedDB initialized');
+
+    // Seed required settings
+    await this.seedSettings();
+    console.log('[CalendarController] Settings seeded');
+
+    // Initialize CalendarApp
+    this.calendarApp = this.app.resolveType<CalendarApp>();
+    await this.calendarApp.init(containerEl);
+    console.log('[CalendarController] CalendarApp initialized');
+
+    // Render default view
+    const eventBus = this.app.resolveType<EventBus>();
+    eventBus.emit(CalendarEvents.CMD_RENDER, { viewId: 'simple' });
+    console.log('[CalendarController] Render command emitted');
+  }
+
+  private async seedSettings(): Promise<void> {
+    if (!this.app) return;
+
+    const settingsService = this.app.resolveType<SettingsService>();
+    const viewConfigService = this.app.resolveType<ViewConfigService>();
+
+    // Grid settings
+    await settingsService.save({
+      id: 'grid',
+      dayStartHour: 8,
+      dayEndHour: 18,
+      workStartHour: 9,
+      workEndHour: 17,
+      hourHeight: 64,
+      snapInterval: 15,
+      syncStatus: 'synced'
+    });
+
+    // Workweek settings
+    await settingsService.save({
+      id: 'workweek',
+      presets: {
+        standard: { id: 'standard', label: 'Standard', workDays: [1, 2, 3, 4, 5], periodDays: 7 }
+      },
+      defaultPreset: 'standard',
+      firstDayOfWeek: 1,
+      syncStatus: 'synced'
+    });
+
+    // View configuration
+    await viewConfigService.save({
+      id: 'simple',
+      groupings: [{ type: 'date', values: [], idProperty: 'date', derivedFrom: 'start' }],
+      syncStatus: 'synced'
+    });
+  }
+
+  navigatePrev(): void {
+    if (!this.app) return;
+    const eventBus = this.app.resolveType<EventBus>();
+    eventBus.emit(CalendarEvents.CMD_NAVIGATE_PREV);
+  }
+
+  navigateNext(): void {
+    if (!this.app) return;
+    const eventBus = this.app.resolveType<EventBus>();
+    eventBus.emit(CalendarEvents.CMD_NAVIGATE_NEXT);
+  }
+
+  toggleDrawer(): void {
+    if (!this.app) return;
+    const eventBus = this.app.resolveType<EventBus>();
+    eventBus.emit(CalendarEvents.CMD_DRAWER_TOGGLE);
+  }
+}
diff --git a/PlanTempus.Application/wwwroot/ts/modules/customers.ts b/PlanTempus.Application/wwwroot/ts/modules/customers.ts
index 8373d31..b149413 100644
--- a/PlanTempus.Application/wwwroot/ts/modules/customers.ts
+++ b/PlanTempus.Application/wwwroot/ts/modules/customers.ts
@@ -4,9 +4,11 @@
  * Handles:
  * - Fuzzy search with Fuse.js
  * - Customer drawer population
+ * - Customer detail economy chart
  */
 
 import Fuse from 'fuse.js';
+import { createChart } from '@sevenweirdpeople/swp-charting';
 
 interface CustomerItem {
   name: string;
@@ -233,3 +235,94 @@ export class CustomersController {
     return tag.charAt(0).toUpperCase() + tag.slice(1);
   }
 }
+
+/**
+ * Customer Economy Controller
+ *
+ * Handles the economy chart on customer detail page.
+ * Initializes chart lazily when economy tab is shown.
+ */
+interface ChartDataPoint {
+  x: string;
+  y: number;
+}
+
+interface ChartSeries {
+  name: string;
+  color: string;
+  data: ChartDataPoint[];
+}
+
+interface CustomerChartData {
+  categories: string[];
+  series: ChartSeries[];
+}
+
+class CustomerEconomyController {
+  private chartInitialized = false;
+  private chart: ReturnType<typeof createChart> | null = null;
+
+  constructor() {
+    this.setupTabListener();
+    // Check if economy tab is already active on page load
+    this.checkInitialTab();
+  }
+
+  private setupTabListener(): void {
+    document.addEventListener('click', (e: Event) => {
+      const target = e.target as HTMLElement;
+      const tab = target.closest<HTMLElement>('swp-tab[data-tab="economy"]');
+
+      if (tab) {
+        // Small delay to let tab content become visible
+        setTimeout(() => this.initializeChart(), 50);
+      }
+    });
+  }
+
+  private checkInitialTab(): void {
+    const activeTab = document.querySelector('swp-tab[data-tab="economy"].active');
+    if (activeTab) {
+      this.initializeChart();
+    }
+  }
+
+  private initializeChart(): void {
+    if (this.chartInitialized) return;
+
+    const container = document.getElementById('customerRevenueChart');
+    if (!container) return;
+
+    const dataScript = document.getElementById('customerRevenueChartData');
+    if (!dataScript) return;
+
+    try {
+      const data = JSON.parse(dataScript.textContent || '') as CustomerChartData;
+      this.createRevenueChart(container, data);
+      this.chartInitialized = true;
+    } catch (err) {
+      console.error('Failed to parse chart data:', err);
+    }
+  }
+
+  private createRevenueChart(container: HTMLElement, data: CustomerChartData): void {
+    this.chart = createChart(container, {
+      deferRender: true,
+      height: 200,
+      xAxis: {
+        categories: data.categories
+      },
+      series: data.series.map(s => ({
+        name: s.name,
+        color: s.color,
+        data: s.data
+      })),
+      legend: false
+    });
+  }
+}
+
+// Initialize economy controller if on customer detail page
+if (document.getElementById('customerRevenueChart') || document.querySelector('swp-tab[data-tab="economy"]')) {
+  new CustomerEconomyController();
+}
diff --git a/PlanTempus.Application/wwwroot/ts/modules/suppliers.ts b/PlanTempus.Application/wwwroot/ts/modules/suppliers.ts
new file mode 100644
index 0000000..7cb0f09
--- /dev/null
+++ b/PlanTempus.Application/wwwroot/ts/modules/suppliers.ts
@@ -0,0 +1,146 @@
+/**
+ * Suppliers Controller
+ *
+ * Handles:
+ * - Fuzzy search with Fuse.js
+ * - Row click navigation
+ */
+
+import Fuse from 'fuse.js';
+
+interface SupplierItem {
+  name: string;
+  contact: string;
+  city: string;
+  element: HTMLElement;
+}
+
+export class SuppliersController {
+  private fuse: Fuse<SupplierItem> | null = null;
+  private suppliers: SupplierItem[] = [];
+  private searchInput: HTMLInputElement | null = null;
+  private emptyState: HTMLElement | null = null;
+  private dataTable: HTMLElement | null = null;
+
+  constructor() {
+    // Only initialize if we're on the suppliers page
+    const suppliersTable = document.querySelector('swp-card.suppliers-list');
+    if (!suppliersTable) return;
+
+    this.init();
+  }
+
+  private init(): void {
+    this.searchInput = document.getElementById('supplierSearchInput') as HTMLInputElement;
+    this.emptyState = document.getElementById('supplierEmptyState');
+    this.dataTable = document.querySelector('swp-card.suppliers-list swp-data-table');
+
+    this.buildSupplierIndex();
+    this.setupSearch();
+    this.setupRowNavigation();
+  }
+
+  private buildSupplierIndex(): void {
+    const supplierRows = document.querySelectorAll('swp-card.suppliers-list swp-data-table-row');
+
+    supplierRows.forEach((row) => {
+      const element = row as HTMLElement;
+
+      const name = element.dataset.name || '';
+      const contact = element.dataset.contact || '';
+      const city = element.dataset.city || '';
+
+      this.suppliers.push({
+        name,
+        contact,
+        city,
+        element
+      });
+    });
+  }
+
+  private setupSearch(): void {
+    if (!this.searchInput) return;
+
+    // Initialize Fuse.js with multiple search keys
+    this.fuse = new Fuse(this.suppliers, {
+      keys: ['name', 'contact', 'city'],
+      threshold: 0.3,
+      minMatchCharLength: 2
+    });
+
+    // Listen for input with debounce
+    let debounceTimer: number;
+    this.searchInput.addEventListener('input', (e) => {
+      clearTimeout(debounceTimer);
+      debounceTimer = window.setTimeout(() => {
+        const query = (e.target as HTMLInputElement).value.trim();
+        this.filterSuppliers(query);
+      }, 150);
+    });
+  }
+
+  private filterSuppliers(query: string): void {
+    if (!query || query.length < 2) {
+      this.showAll();
+      return;
+    }
+
+    if (!this.fuse) return;
+
+    // Get matching suppliers
+    const results = this.fuse.search(query);
+    const matchingSuppliers = new Set(results.map(r => r.item.element));
+
+    let visibleCount = 0;
+
+    // Show/hide suppliers
+    this.suppliers.forEach(supplier => {
+      if (matchingSuppliers.has(supplier.element)) {
+        supplier.element.style.display = 'grid';
+        visibleCount++;
+      } else {
+        supplier.element.style.display = 'none';
+      }
+    });
+
+    // Show/hide empty state
+    this.updateEmptyState(visibleCount);
+  }
+
+  private showAll(): void {
+    this.suppliers.forEach(supplier => {
+      supplier.element.style.display = 'grid';
+    });
+    this.updateEmptyState(this.suppliers.length);
+  }
+
+  private updateEmptyState(visibleCount: number): void {
+    if (!this.emptyState || !this.dataTable) return;
+
+    if (visibleCount === 0) {
+      this.emptyState.style.display = 'flex';
+      // Hide header when no results
+      const header = this.dataTable.querySelector('swp-data-table-header') as HTMLElement;
+      if (header) header.style.display = 'none';
+    } else {
+      this.emptyState.style.display = 'none';
+      // Show header when results exist
+      const header = this.dataTable.querySelector('swp-data-table-header') as HTMLElement;
+      if (header) header.style.display = 'grid';
+    }
+  }
+
+  private setupRowNavigation(): void {
+    // Click on rows navigates to supplier detail page
+    document.addEventListener('click', (e) => {
+      const row = (e.target as HTMLElement).closest<HTMLElement>('swp-card.suppliers-list swp-data-table-row[data-href]');
+      if (!row) return;
+
+      const href = row.dataset.href;
+      if (href) {
+        window.location.href = href;
+      }
+    });
+  }
+}