diff --git a/app/modules/sag/templates/detail.html b/app/modules/sag/templates/detail.html
index e016d05..1d4bbca 100644
--- a/app/modules/sag/templates/detail.html
+++ b/app/modules/sag/templates/detail.html
@@ -1,909 +1,236 @@
-{% extends "shared/frontend/base.html" %}
-
-{% block title %}{{ case.titel }} - BMC Hub{% endblock %}
-
-{% block extra_css %}
-<style>
-    .back-link {
-        display: inline-flex;
-        align-items: center;
-        gap: 0.5rem;
-        color: var(--accent);
-        text-decoration: none;
-        margin-bottom: 1.5rem;
-        transition: all 0.2s;
-    }
-
-    .back-link:hover {
-        gap: 1rem;
-    }
-
-    .card {
-        border: none;
-        border-radius: 12px;
-        margin-bottom: 1.5rem;
-        box-shadow: 0 2px 8px rgba(0,0,0,0.05);
-        border: 1px solid rgba(0,0,0,0.1);
-    }
-
-    .card-header {
-        background: var(--accent-light);
-        border-bottom: 1px solid rgba(0,0,0,0.1);
-        padding: 1.2rem;
-        border-radius: 12px 12px 0 0;
-    }
-
-    .card-body {
-        padding: 1.5rem;
-    }
-
-    .card-footer {
-        background: transparent;
-        border-top: 1px solid rgba(0,0,0,0.1);
-        padding: 1rem;
-    }
-
-    .btn-sm {
-        padding: 0.4rem 0.8rem;
-        font-size: 0.85rem;
-        border-radius: 6px;
-    }
-
-    .relation-card {
-        padding: 1rem 0;
-        border-bottom: 1px solid rgba(0,0,0,0.1);
-    }
-
-    .relation-card:last-child {
-        border-bottom: none;
-    }
-
-    .relation-type {
-        display: inline-block;
-        background: var(--accent-light);
-        color: var(--accent);
-        padding: 0.3rem 0.8rem;
-        border-radius: 20px;
-        font-size: 0.75rem;
-        font-weight: 600;
-        margin-right: 0.5rem;
-        margin-bottom: 0.5rem;
-    }
-
-    .relation-link {
-        color: var(--accent);
-        text-decoration: none;
-        font-weight: 500;
-    }
-
-    .relation-link:hover {
-        text-decoration: underline;
-    }
-
-    .info-row {
-        display: flex;
-        justify-content: space-between;
-        padding: 0.8rem 0;
-        border-bottom: 1px solid rgba(0,0,0,0.05);
-    }
-
-    .info-row:last-child {
-        border-bottom: none;
-    }
-
-    .info-label {
-        font-weight: 600;
-        color: var(--text-secondary);
-        min-width: 150px;
-    }
-
-    .info-value {
-        color: var(--text-primary);
-    }
-
-    .tag {
-        display: inline-block;
-        background: var(--accent-light);
-        color: var(--accent);
-        padding: 0.4rem 0.8rem;
-        border-radius: 20px;
-        font-size: 0.85rem;
-        font-weight: 500;
-        margin-right: 0.5rem;
-        margin-bottom: 0.5rem;
-    }
-
-    .person-card {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-        padding: 1rem;
-        background: var(--bg-body);
-        border-radius: 8px;
-        margin-bottom: 0.5rem;
-    }
-
-    .person-info strong {
-        display: block;
-        color: var(--accent);
-    }
-
-    .person-info small {
-        color: var(--text-secondary);
-        display: block;
-    }
-
-    .action-buttons {
-        display: flex;
-        gap: 1rem;
-        flex-wrap: wrap;
-        margin-top: 2rem;
-    }
-
-    .btn-delete {
-        background-color: #e74c3c;
-        color: white;
-    }
-
-    .btn-delete:hover {
-        background-color: #c0392b;
-    }
-
-    .form-control, .form-select {
-        border-radius: 8px;
-        border: 1px solid rgba(0,0,0,0.1);
-    }
-
-    .tag-closed {
-        background-color: #e0e0e0;
-        color: #666;
-        text-decoration: line-through;
-    }
-
-    [data-bs-theme="dark"] .tag-closed {
-        background-color: #3a3a3a;
-        color: #999;
-    }
-
-    .tag-state-badge {
-        font-size: 0.75rem;
-        padding: 0.2rem 0.4rem;
-        border-radius: 4px;
-        margin-left: 0.5rem;
-        font-weight: 600;
-    }
-
-    .tag-state-open {
-        background: #d4edda;
-        color: #155724;
-    }
-
-    .tag-state-closed {
-        background: #f8d7da;
-        color: #721c24;
-    }
-
-    [data-bs-theme="dark"] .tag-state-open {
-        background: #1e4620;
-        color: #7fd98d;
-    }
-
-    [data-bs-theme="dark"] .tag-state-closed {
-        background: #5c2b2f;
-        color: #f8a5ac;
-    }
-
-    .tag-toggle-btn {
-        background: none;
-        border: 1px solid rgba(0,0,0,0.2);
-        padding: 0.2rem 0.5rem;
-        border-radius: 4px;
-        cursor: pointer;
-        font-size: 0.75rem;
-        margin-left: 0.5rem;
-        transition: all 0.2s;
-    }
-
-    .tag-toggle-btn:hover {
-        background: rgba(0,0,0,0.05);
-    }
-
-    .tag-toggle-open {
-        color: #28a745;
-        border-color: #28a745;
-    }
-
-    .tag-toggle-open:hover {
-        background: #28a745;
-        color: white;
-    }
-
-    .tag-toggle-closed {
-        color: #6c757d;
-        border-color: #6c757d;
-    }
-
-    .tag-toggle-closed:hover {
-        background: #6c757d;
-        color: white;
-    }
-</style>
-{% endblock %}
-
-{% block content %}
-<div class="container" style="margin-top: 2rem; margin-bottom: 2rem;">
-    <!-- Back Link -->
-    <a href="/cases" class="back-link">
-        <i class="bi bi-chevron-left"></i> Tilbage til sager
-    </a>
-
-    <!-- Main Info Card -->
-    <div class="card">
-        <div class="card-header">
-            <h1 style="margin: 0; color: var(--accent);">{{ case.titel }}</h1>
+<!DOCTYPE html>
+<html lang="da">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{{ sag.titel }} - BMC Hub</title>
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
+    <style>
+        :root {
+            --primary-color: #0f4c75;
+            --secondary-color: #3282b8;
+            --accent-color: #00a8e8;
+            --bg-light: #f7f9fc;
+            --bg-dark: #1a1a2e;
+        }
+        
+        body {
+            background-color: var(--bg-light);
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        }
+        
+        body.dark-mode {
+            background-color: var(--bg-dark);
+            color: #f0f0f0;
+        }
+        
+        .navbar {
+            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
+        }
+        
+        .content-wrapper {
+            padding: 2rem 0;
+        }
+        
+        .card {
+            border: none;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.05);
+            margin-bottom: 2rem;
+        }
+        
+        body.dark-mode .card {
+            background-color: #2a2a3e;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+        }
+        
+        .card-header {
+            background-color: var(--primary-color);
+            color: white;
+            border-radius: 8px 8px 0 0;
+        }
+        
+        body.dark-mode .card-header {
+            background-color: var(--secondary-color);
+        }
+        
+        .card-body label {
+            font-weight: 600;
+            color: var(--primary-color);
+            margin-top: 1rem;
+        }
+        
+        body.dark-mode .card-body label {
+            color: var(--accent-color);
+        }
+        
+        .btn-back {
+            background-color: transparent;
+            color: var(--primary-color);
+            border: 1px solid var(--primary-color);
+            padding: 0.5rem 1rem;
+            border-radius: 4px;
+            text-decoration: none;
+            display: inline-block;
+            margin-bottom: 2rem;
+        }
+        
+        body.dark-mode .btn-back {
+            color: var(--accent-color);
+            border-color: var(--accent-color);
+        }
+        
+        .btn-back:hover {
+            background-color: var(--primary-color);
+            color: white;
+        }
+        
+        .tag {
+            display: inline-block;
+            background-color: var(--primary-color);
+            color: white;
+            padding: 0.4rem 0.8rem;
+            border-radius: 4px;
+            font-size: 0.85rem;
+            margin-right: 0.5rem;
+            margin-bottom: 0.5rem;
+        }
+        
+        body.dark-mode .tag {
+            background-color: var(--secondary-color);
+        }
+        
+        .relation-card {
+            background-color: #f9f9f9;
+            padding: 1rem;
+            border-radius: 4px;
+            margin-bottom: 0.5rem;
+            border-left: 3px solid var(--accent-color);
+        }
+        
+        body.dark-mode .relation-card {
+            background-color: #3a3a4e;
+            border-left-color: var(--secondary-color);
+        }
+        
+        .relation-type {
+            font-weight: 600;
+            color: var(--secondary-color);
+            font-size: 0.85rem;
+        }
+        
+        .relation-link {
+            color: var(--accent-color);
+            text-decoration: none;
+        }
+        
+        .relation-link:hover {
+            text-decoration: underline;
+        }
+    </style>
+</head>
+<body>
+    <!-- Navigation -->
+    <nav class="navbar navbar-expand-lg navbar-dark">
+        <div class="container">
+            <a class="navbar-brand" href="/">🛠️ BMC Hub</a>
         </div>
-        <div class="card-body">
-            <div class="info-row">
-                <span class="info-label">Status</span>
-                <span class="tag">{{ case.status }}</span>
-            </div>
-            <div class="info-row">
-                <span class="info-label">Beskrivelse</span>
-                <span class="info-value">{{ case.beskrivelse or 'Ingen beskrivelse' }}</span>
-            </div>
-            <div class="info-row">
-                <span class="info-label">Oprettet</span>
-                <span class="info-value">{{ case.created_at|string|truncate(19, True, '') if case.created_at else 'Ikke sat' }}</span>
-            </div>
-            {% if case.deadline %}
-            <div class="info-row">
-                <span class="info-label">Deadline</span>
-                <span class="info-value">{{ case.deadline|string|truncate(19, True, '') if case.deadline else 'Ikke sat' }}</span>
-            </div>
-            {% endif %}
-        </div>
-    </div>
+    </nav>
 
-            <!-- Tags Card (Global) -->
-            <div class="card mb-4">
-                <div class="card-header d-flex justify-content-between align-items-center">
-                    <h5 class="mb-0" style="color: var(--accent);">📌 Tags</h5>
-                    <button class="btn btn-sm btn-outline-primary" onclick="window.showTagPicker('case', {{ case.id }}, () => window.renderEntityTags('case', {{ case.id }}, 'case-tags'))">
-                        <i class="bi bi-plus-lg"></i> Tilføj
-                    </button>
+    <!-- Main Content -->
+    <div class="content-wrapper">
+        <div class="container">
+            <a href="/sag" class="btn-back">← Tilbage til sager</a>
+
+            <!-- Main Card -->
+            <div class="card">
+                <div class="card-header">
+                    <h1 style="margin: 0; font-size: 1.5rem;">{{ sag.titel }}</h1>
                 </div>
                 <div class="card-body">
-                    <div id="case-tags" class="d-flex flex-wrap">
-                        <div class="text-center w-100 py-2">
-                             <span class="spinner-border spinner-border-sm text-muted"></span>
+                    <div class="row mb-4">
+                        <div class="col-md-6">
+                            <label>Beskrivelse</label>
+                            <p>{{ sag.beskrivelse or 'Ingen beskrivelse' }}</p>
+                        </div>
+                        <div class="col-md-6">
+                            <label>Status</label>
+                            <p><span style="background-color: var(--accent-color); color: white; padding: 0.3rem 0.7rem; border-radius: 4px;">{{ sag.status }}</span></p>
+                        </div>
+                    </div>
+
+                    <div class="row mb-4">
+                        <div class="col-md-6">
+                            <label>Type</label>
+                            <p>{{ sag.type }}</p>
+                        </div>
+                        <div class="col-md-6">
+                            <label>Deadline</label>
+                            <p>{{ sag.deadline[:10] if sag.deadline else 'Ikke sat' }}</p>
+                        </div>
+                    </div>
+
+                    {% if customer %}
+                    <div class="row mb-4">
+                        <div class="col-md-6">
+                            <label>Kunde</label>
+                            <p><a href="/customers/{{ customer.id }}" class="relation-link">{{ customer.name }}</a></p>
+                        </div>
+                    </div>
+                    {% endif %}
+
+                    <div class="row">
+                        <div class="col-12">
+                            <label>Oprettet</label>
+                            <p>{{ sag.created_at }}</p>
                         </div>
                     </div>
                 </div>
             </div>
 
-            <!-- Related Hardware -->
-            <div class="card mb-4">
-                 <div class="card-header d-flex justify-content-between align-items-center">
-                     <h5 class="mb-0" style="color: var(--accent);">💻 Hardware</h5>
-                     <button class="btn btn-sm btn-outline-primary" onclick="promptLinkHardware()">
-                        <i class="bi bi-link-45deg"></i> Link ID
-                    </button>
+            <!-- Tags Section -->
+            {% if tags %}
+            <div class="card">
+                <div class="card-header">
+                    <h5 style="margin: 0;">📌 Tags</h5>
                 </div>
-                <div class="card-body p-0">
-                     <div class="list-group list-group-flush" id="hardware-list">
-                         <div class="p-3 text-center text-muted">Henter hardware...</div>
-                     </div>
+                <div class="card-body">
+                    {% for tag in tags %}
+                    <span class="tag">{{ tag.tag_navn }}</span>
+                    {% endfor %}
                 </div>
             </div>
-
-            <!-- Related Locations -->
-            <div class="card mb-4">
-                 <div class="card-header d-flex justify-content-between align-items-center">
-                     <h5 class="mb-0" style="color: var(--accent);">📍 Lokationer</h5>
-                     <button class="btn btn-sm btn-outline-primary" onclick="promptLinkLocation()">
-                        <i class="bi bi-plus-lg"></i> Tilføj ID
-                    </button>
-                </div>
-                <div class="card-body p-0">
-                     <div class="list-group list-group-flush" id="locations-list">
-                          <div class="p-3 text-center text-muted">Henter lokationer...</div>
-                     </div>
-                </div>
-            </div>
-
+            {% endif %}
 
             <!-- Relations Section -->
+            {% if relationer %}
             <div class="card">
                 <div class="card-header">
                     <h5 style="margin: 0;">🔗 Relaterede sager</h5>
                 </div>
                 <div class="card-body">
-                    {% if relations %}
-                    {% for rel in relations %}
-                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #eee;">
-                        <div>
-                            <div class="relation-type" style="display: inline-block; background: var(--accent-light); color: var(--accent-color); padding: 0.2rem 0.5rem; border-radius: 4px; font-size: 0.85rem; margin-right: 0.5rem;">{{ rel.relationstype }}</div>
-                            {% if rel.kilde_sag_id == case.id %}
-                            → <a href="/cases/{{ rel.målsag_id }}" class="relation-link" style="color: var(--accent-color); text-decoration: none;">{{ rel.mål_titel }}</a>
-                            {% else %}
-                            ← <a href="/cases/{{ rel.kilde_sag_id }}" class="relation-link" style="color: var(--accent-color); text-decoration: none;">{{ rel.kilde_titel }}</a>
-                            {% endif %}
-                        </div>
-                        <button onclick="deleteRelation({{ rel.id }})" class="btn btn-sm" style="background-color: #e74c3c; color: white; padding: 0.25rem 0.5rem;">✕</button>
+                    {% for rel in relationer %}
+                    <div class="relation-card">
+                        <div class="relation-type">{{ rel.relationstype }}</div>
+                        {% if rel.kilde_sag_id == sag.id %}
+                        → <a href="/sag/{{ rel.målsag_id }}" class="relation-link">{{ rel.mål_titel }}</a>
+                        {% else %}
+                        ← <a href="/sag/{{ rel.kilde_sag_id }}" class="relation-link">{{ rel.kilde_titel }}</a>
+                        {% endif %}
                     </div>
                     {% endfor %}
-                    {% else %}
-                    <p style="color: #999;">Ingen relaterede sager.</p>
-                    {% endif %}
-                </div>
-                <div class="card-footer">
-                    <div style="display: flex; gap: 0.5rem; flex-wrap: wrap;">
-                        <div style="flex: 1; min-width: 200px; position: relative;">
-                            <input type="text" id="relationCaseSearch" placeholder="Søg efter relateret sag..." class="form-control" style="font-size: 0.9rem;">
-                            <div id="relationSearchResults" style="position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-body); border: 1px solid #ddd; max-height: 200px; overflow-y: auto; display: none; z-index: 10;"></div>
-                        </div>
-                        <select id="relationTypeSelect" class="form-control" style="flex: 1; min-width: 150px;">
-                            <option value="">Vælg relationstype</option>
-                            <option value="relateret">Relateret</option>
-                            <option value="afhænger af">Afhænger af</option>
-                            <option value="blokkerer">Blokkerer</option>
-                            <option value="duplikat">Duplikat</option>
-                        </select>
-                        <button onclick="addRelation()" class="btn" style="background-color: var(--accent-color); color: white; padding: 0.5rem 1rem;">+</button>
-                    </div>
-                </div>
-            </div>
-
-            <!-- Contacts Section -->
-            {% if contacts %}
-            <div class="card">
-                <div class="card-header">
-                    <h5 style="margin: 0;">👥 Tilknyttede kontakter</h5>
-                </div>
-                <div class="card-body">
-                    {% for contact in contacts %}
-                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #eee;">
-                        <div>
-                            <strong>{{ contact.contact_name }}</strong>
-                            <div style="font-size: 0.9rem; color: #666;">{{ contact.role }}</div>
-                            {% if contact.contact_email %}
-                            <div style="font-size: 0.85rem; color: #999;">{{ contact.contact_email }}</div>
-                            {% endif %}
-                        </div>
-                        <button onclick="removeContact({{ case.id }}, {{ contact.contact_id }})" class="btn btn-sm" style="background-color: #e74c3c; color: white; padding: 0.25rem 0.5rem;">✕</button>
-                    </div>
-                    {% endfor %}
-                </div>
-                <div class="card-footer">
-                    <div style="position: relative;">
-                        <input type="text" id="contactSearch" placeholder="Søg efter kontakt..." class="form-control" style="font-size: 0.9rem;">
-                        <div id="contactSearchResults" style="position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; max-height: 200px; overflow-y: auto; display: none; z-index: 10;"></div>
-                    </div>
-                </div>
-            </div>
-            {% else %}
-            <div class="card">
-                <div class="card-header">
-                    <h5 style="margin: 0;">👥 Tilknyttede kontakter</h5>
-                </div>
-                <div class="card-body">
-                    <p style="color: #999;">Ingen kontakter tilknyttet denne sag.</p>
-                </div>
-                <div class="card-footer">
-                    <div style="position: relative;">
-                        <input type="text" id="contactSearch" placeholder="Søg efter kontakt..." class="form-control" style="font-size: 0.9rem;">
-                        <div id="contactSearchResults" style="position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; max-height: 200px; overflow-y: auto; display: none; z-index: 10;"></div>
-                    </div>
-                </div>
-            </div>
-            {% endif %}
-
-            <!-- Customers Section -->
-            {% if customers %}
-            <div class="card">
-                <div class="card-header">
-                    <h5 style="margin: 0;">🏢 Tilknyttede kunder</h5>
-                </div>
-                <div class="card-body">
-                    {% for customer in customers %}
-                    <div style="display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid #eee;">
-                        <div>
-                            <strong><a href="/customers/{{ customer.customer_id }}" style="color: var(--accent-color); text-decoration: none;">{{ customer.customer_name }}</a></strong>
-                            <div style="font-size: 0.9rem; color: #666;">{{ customer.role }}</div>
-                            {% if customer.customer_email %}
-                            <div style="font-size: 0.85rem; color: #999;">{{ customer.customer_email }}</div>
-                            {% endif %}
-                        </div>
-                        <button onclick="removeCustomer({{ case.id }}, {{ customer.customer_id }})" class="btn btn-sm" style="background-color: #e74c3c; color: white; padding: 0.25rem 0.5rem;">✕</button>
-                    </div>
-                    {% endfor %}
-                </div>
-                <div class="card-footer">
-                    <div style="position: relative;">
-                        <input type="text" id="customerSearch" placeholder="Søg efter kunde..." class="form-control" style="font-size: 0.9rem;">
-                        <div id="customerSearchResults" style="position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; max-height: 200px; overflow-y: auto; display: none; z-index: 10;"></div>
-                    </div>
-                </div>
-            </div>
-            {% else %}
-            <div class="card">
-                <div class="card-header">
-                    <h5 style="margin: 0;">🏢 Tilknyttede kunder</h5>
-                </div>
-                <div class="card-body">
-                    <p style="color: #999;">Ingen kunder tilknyttet denne sag.</p>
-                </div>
-                <div class="card-footer">
-                    <div style="position: relative;">
-                        <input type="text" id="customerSearch" placeholder="Søg efter kunde..." class="form-control" style="font-size: 0.9rem;">
-                        <div id="customerSearchResults" style="position: absolute; top: 100%; left: 0; right: 0; background: white; border: 1px solid #ddd; max-height: 200px; overflow-y: auto; display: none; z-index: 10;"></div>
-                    </div>
                 </div>
             </div>
             {% endif %}
 
             <!-- Action Buttons -->
             <div style="margin-top: 2rem; display: flex; gap: 1rem; flex-wrap: wrap;">
-                <a href="/cases/{{ case.id }}/edit" class="btn" style="background-color: var(--accent-color); color: white;">✏️ Rediger</a>
-                <button class="btn" style="background-color: #e74c3c; color: white;" onclick="if(confirm('Slet denne sag?')) { fetch('/api/v1/cases/{{ case.id }}', {method: 'DELETE'}).then(() => window.location='/cases'); }">🗑️ Slet</button>
+                <a href="/sag/{{ sag.id }}/edit" class="btn" style="background-color: var(--accent-color); color: white;">✏️ Rediger</a>
+                <button class="btn" style="background-color: #e74c3c; color: white;" onclick="if(confirm('Slet denne sag?')) { fetch('/api/v1/sag/{{ sag.id }}', {method: 'DELETE'}).then(() => window.location='/sag'); }">🗑️ Slet</button>
             </div>
         </div>
     </div>
 
-    <script>
-        const caseId = {{ case.id }};
-        let contactSearchTimeout;
-        let customerSearchTimeout;
-
-        // Initialize search functionality when DOM is ready
-        function initializeSearch() {
-            const contactSearchInput = document.getElementById('contactSearch');
-            const customerSearchInput = document.getElementById('customerSearch');
-
-            if (contactSearchInput) {
-                contactSearchInput.addEventListener('input', function(e) {
-                    clearTimeout(contactSearchTimeout);
-                    const query = e.target.value.trim();
-                    
-                    if (query.length < 2) {
-                        document.getElementById('contactSearchResults').style.display = 'none';
-                        return;
-                    }
-                    
-                    contactSearchTimeout = setTimeout(async () => {
-                        try {
-                            const response = await fetch(`/api/v1/search/contacts?q=${encodeURIComponent(query)}`);
-                            const contacts = await response.json();
-                            
-                            const resultsDiv = document.getElementById('contactSearchResults');
-                            if (contacts.length === 0) {
-                                resultsDiv.innerHTML = '<div style="padding: 10px; color: #999;">Ingen kontakter fundet</div>';
-                            } else {
-                                resultsDiv.innerHTML = contacts.map(c => `
-                                    <div style="padding: 10px; border-bottom: 1px solid #eee; cursor: pointer;" 
-                                         onmouseover="this.style.background='#f5f5f5'"
-                                         onmouseout="this.style.background='white'"
-                                         onclick="addContact(${caseId}, ${c.id}, '${(c.first_name + ' ' + c.last_name).replace(/'/g, "\\'")}')">
-                                        <strong>${c.first_name} ${c.last_name}</strong>
-                                        <div style="font-size: 0.85rem; color: #999;">${c.email || ''} ${c.user_company ? '(' + c.user_company + ')' : ''}</div>
-                                    </div>
-                                `).join('');
-                            }
-                            resultsDiv.style.display = 'block';
-                        } catch (err) {
-                            console.error('Error searching contacts:', err);
-                        }
-                    }, 300);
-                });
-            }
-
-            if (customerSearchInput) {
-                customerSearchInput.addEventListener('input', function(e) {
-                    clearTimeout(customerSearchTimeout);
-                    const query = e.target.value.trim();
-                    
-                    if (query.length < 2) {
-                        document.getElementById('customerSearchResults').style.display = 'none';
-                        return;
-                    }
-                    
-                    customerSearchTimeout = setTimeout(async () => {
-                        try {
-                            const response = await fetch(`/api/v1/search/customers?q=${encodeURIComponent(query)}`);
-                            const customers = await response.json();
-                            
-                            const resultsDiv = document.getElementById('customerSearchResults');
-                            if (customers.length === 0) {
-                                resultsDiv.innerHTML = '<div style="padding: 10px; color: #999;">Ingen kunder fundet</div>';
-                            } else {
-                                resultsDiv.innerHTML = customers.map(c => `
-                                    <div style="padding: 10px; border-bottom: 1px solid #eee; cursor: pointer;" 
-                                         onmouseover="this.style.background='#f5f5f5'"
-                                         onmouseout="this.style.background='white'"
-                                         onclick="addCustomer(${caseId}, ${c.id}, '${c.name.replace(/'/g, "\\'")}')">
-                                        <strong>${c.name}</strong>
-                                        <div style="font-size: 0.85rem; color: #999;">${c.email || ''} ${c.cvr_number ? '(CVR: ' + c.cvr_number + ')' : ''}</div>
-                                    </div>
-                                `).join('');
-                            }
-                            resultsDiv.style.display = 'block';
-                        } catch (err) {
-                            console.error('Error searching customers:', err);
-                        }
-                    }, 300);
-                });
-            }
-        }
-
-        // Initialize when DOM is ready
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', initializeSearch);
-        } else {
-            initializeSearch();
-        }
-
-        async function addContact(caseId, contactId, contactName) {
-            try {
-                const response = await fetch(`/api/v1/cases/${caseId}/contacts`, {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({contact_id: contactId, role: 'Kontakt'})
-                });
-                
-                if (response.ok) {
-                    const contactSearch = document.getElementById('contactSearch');
-                    if (contactSearch) contactSearch.value = '';
-                    const contactResults = document.getElementById('contactSearchResults');
-                    if (contactResults) contactResults.style.display = 'none';
-                    window.location.reload();
-                } else {
-                    const error = await response.json();
-                    alert(`Fejl: ${error.detail}`);
-                }
-            } catch (err) {
-                alert('Fejl ved tilføjelse af kontakt: ' + err.message);
-            }
-        }
-
-        async function addCustomer(caseId, customerId, customerName) {
-            try {
-                const response = await fetch(`/api/v1/cases/${caseId}/customers`, {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({customer_id: customerId, role: 'Kunde'})
-                });
-                
-                if (response.ok) {
-                    const customerSearch = document.getElementById('customerSearch');
-                    if (customerSearch) customerSearch.value = '';
-                    const customerResults = document.getElementById('customerSearchResults');
-                    if (customerResults) customerResults.style.display = 'none';
-                    window.location.reload();
-                } else {
-                    const error = await response.json();
-                    alert(`Fejl: ${error.detail}`);
-                }
-            } catch (err) {
-                alert('Fejl ved tilføjelse af kunde: ' + err.message);
-            }
-        }
-
-        async function removeContact(caseId, contactId) {
-            if (confirm('Fjern denne kontakt fra sagen?')) {
-                const response = await fetch(`/api/v1/cases/${caseId}/contacts/${contactId}`, {method: 'DELETE'});
-                if (response.ok) {
-                    window.location.reload();
-                } else {
-                    alert('Fejl ved fjernelse af kontakt');
-                }
-            }
-        }
-
-        async function removeCustomer(caseId, customerId) {
-            if (confirm('Fjern denne kunde fra sagen?')) {
-                const response = await fetch(`/api/v1/cases/${caseId}/customers/${customerId}`, {method: 'DELETE'});
-                if (response.ok) {
-                    window.location.reload();
-                } else {
-                    alert('Fejl ved fjernelse af kunde');
-                }
-            }
-        }
-
-        // Tag Management Functions
-        async function addTag() {
-            const tagInput = document.getElementById('newTagInput');
-            const tagName = tagInput.value.trim();
-            
-            if (!tagName) {
-                alert('Indtast et tag navn');
-                return;
-            }
-            
-            try {
-                const response = await fetch(`/api/v1/cases/${caseId}/tags`, {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({tag_navn: tagName})
-                });
-                
-                if (response.ok) {
-                    tagInput.value = '';
-                    window.location.reload();
-                } else {
-                    const error = await response.json();
-                    alert(`Fejl: ${error.detail}`);
-                }
-            } catch (err) {
-                alert('Fejl ved tilføjelse af tag: ' + err.message);
-            }
-        }
-
-        async function deleteTag(tagId) {
-            if (confirm('Fjern dette tag?')) {
-                try {
-                    const response = await fetch(`/api/v1/cases/${caseId}/tags/${tagId}`, {method: 'DELETE'});
-                    if (response.ok) {
-                        window.location.reload();
-                    } else {
-                        alert('Fejl ved fjernelse af tag');
-                    }
-                } catch (err) {
-                    alert('Fejl: ' + err.message);
-                }
-            }
-        }
-
-        async function toggleTagState(tagId, currentState) {
-            const newState = currentState === 'open' ? 'closed' : 'open';
-            try {
-                const response = await fetch(`/api/v1/cases/${caseId}/tags/${tagId}/state`, {
-                    method: 'PATCH',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({state: newState})
-                });
-                if (response.ok) {
-                    window.location.reload();
-                } else {
-                    alert('Fejl ved opdatering af tag status');
-                }
-            } catch (err) {
-                alert('Fejl: ' + err.message);
-            }
-        }
-
-        // Relation Management Functions
-        let selectedRelationCaseId = null;
-
-        function initializeRelationSearch() {
-            const relationSearchInput = document.getElementById('relationCaseSearch');
-            if (!relationSearchInput) return;
-
-            relationSearchInput.addEventListener('input', function(e) {
-                clearTimeout(relationSearchTimeout);
-                const query = e.target.value.trim();
-                
-                if (query.length < 2) {
-                    document.getElementById('relationSearchResults').style.display = 'none';
-                    return;
-                }
-                
-                relationSearchTimeout = setTimeout(async () => {
-                    try {
-                        const response = await fetch(`/api/v1/search/cases?q=${encodeURIComponent(query)}`);
-                        const cases = await response.json();
-                        
-                        const resultsDiv = document.getElementById('relationSearchResults');
-                        if (cases.length === 0) {
-                            resultsDiv.innerHTML = '<div style="padding: 10px; color: #999;">Ingen sager fundet</div>';
-                        } else {
-                            resultsDiv.innerHTML = cases
-                                .filter(c => c.id !== caseId)  // Exclude current case
-                                .map(c => `
-                                    <div onclick="selectRelationCase(${c.id}, '${c.titel.replace(/'/g, "\\'")}');" style="padding: 10px; cursor: pointer; border-bottom: 1px solid #eee; transition: background 0.2s;" onmouseover="this.style.background='var(--accent-light)'" onmouseout="this.style.background='transparent'">
-                                        <div style="font-weight: 600; color: var(--accent-color);">${c.titel}</div>
-                                        <div style="font-size: 0.85rem; color: var(--text-secondary);">Status: ${c.status}</div>
-                                    </div>
-                                `).join('');
-                        }
-                        resultsDiv.style.display = 'block';
-                    } catch (err) {
-                        console.error('Error searching cases:', err);
-                    }
-                }, 300);
-            });
-        }
-
-        function selectRelationCase(caseIdValue, caseTitel) {
-            selectedRelationCaseId = caseIdValue;
-            document.getElementById('relationCaseSearch').value = caseTitel;
-            document.getElementById('relationSearchResults').style.display = 'none';
-        }
-
-        async function addRelation() {
-            const relationType = document.getElementById('relationTypeSelect').value;
-            
-            if (!selectedRelationCaseId) {
-                alert('Vælg en sag');
-                return;
-            }
-            
-            if (!relationType) {
-                alert('Vælg en relationstype');
-                return;
-            }
-            
-            try {
-                const response = await fetch(`/api/v1/cases/${caseId}/relations`, {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({
-                        målsag_id: selectedRelationCaseId,
-                        relationstype: relationType
-                    })
-                });
-                
-                if (response.ok) {
-                    selectedRelationCaseId = null;
-                    document.getElementById('relationCaseSearch').value = '';
-                    document.getElementById('relationTypeSelect').value = '';
-                    window.location.reload();
-                } else {
-                    const error = await response.json();
-                    alert(`Fejl: ${error.detail}`);
-                }
-            } catch (err) {
-                alert('Fejl ved tilføjelse af relation: ' + err.message);
-            }
-        }
-
-
-        // Initialize Global Elements
-        document.addEventListener('DOMContentLoaded', () => {
-            // Render Global Tags
-            if (window.renderEntityTags) {
-                window.renderEntityTags('case', {{ case.id }}, 'case-tags');
-            }
-
-            // Set default context for keyboard shortcuts (Option+Shift+T)
-            if (window.setTagPickerContext) {
-                window.setTagPickerContext('case', {{ case.id }}, () => window.renderEntityTags('case', {{ case.id }}, 'case-tags'));
-            }
-            
-            // Load Hardware & Locations
-            loadCaseHardware();
-            loadCaseLocations();
-        });
-
-        // ============ Hardware Handling ============
-        async function loadCaseHardware() {
-            try {
-                const res = await fetch(`/api/v1/cases/{{ case.id }}/hardware`);
-                const hardware = await res.json();
-                const container = document.getElementById('hardware-list');
-                
-                if (hardware.length === 0) {
-                    container.innerHTML = '<div class="p-3 text-center text-muted small">Ingen hardware tilknyttet</div>';
-                    return;
-                }
-                
-                container.innerHTML = hardware.map(h => `
-                    <div class="list-group-item d-flex justify-content-between align-items-center">
-                        <div>
-                            <div class="fw-bold text-primary">
-                                <a href="/hardware/${h.id}" class="text-decoration-none">
-                                    ${h.brand} ${h.model}
-                                </a>
-                            </div>
-                            <small class="text-muted">SN: ${h.serial_number || 'N/A'}</small>
-                        </div>
-                        <button class="btn btn-sm btn-outline-danger border-0" onclick="unlinkHardware(${h.id})" title="Fjern link">
-                            <i class="bi bi-x-lg"></i>
-                        </button>
-                    </div>
-                `).join('');
-            } catch (e) {
-                console.error("Error loading hardware:", e);
-                document.getElementById('hardware-list').innerHTML = '<div class="p-3 text-danger text-center">Fejl ved hentning</div>';
-            }
-        }
-
-        async function promptLinkHardware() {
-            const id = prompt("Indtast Hardware ID:");
-            if (!id) return;
-            
-            try {
-                const res = await fetch(`/api/v1/cases/{{ case.id }}/hardware`, {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({ hardware_id: parseInt(id) })
-                });
-                
-                if (!res.ok) throw await res.json();
-                loadCaseHardware();
-            } catch (e) {
-                alert("Fejl: " + (e.detail || e.message));
-            }
-        }
-
-        async function unlinkHardware(hwId) {
-            if(!confirm("Fjern link til dette hardware?")) return;
-            try {
-                await fetch(`/api/v1/cases/{{ case.id }}/hardware/${hwId}`, { method: 'DELETE' });
-                loadCaseHardware();
-            } catch (e) {
-                alert("Fejl ved sletning");
-            }
-        }
-
-        // ============ Location Handling ============
-        async function loadCaseLocations() {
-            try {
-                const res = await fetch(`/api/v1/cases/{{ case.id }}/locations`);
-                const locations = await res.json();
-                const container = document.getElementById('locations-list');
-                
-                if (locations.length === 0) {
-                    container.innerHTML = '<div class="p-3 text-center text-muted small">Ingen lokationer tilknyttet</div>';
-                    return;
-                }
-                
-                container.innerHTML = locations.map(l => `
-                    <div class="list-group-item d-flex justify-content-between align-items-center">
-                        <div>
-                            <div class="fw-bold">
-                                <i class="bi bi-geo-alt me-1 text-secondary"></i>
-                                ${l.name}
-                            </div>
-                            <small class="text-muted">${l.location_type || ''}</small>
-                        </div>
-                        <button class="btn btn-sm btn-outline-danger border-0" onclick="unlinkLocation(${l.id})" title="Fjern link">
-                            <i class="bi bi-x-lg"></i>
-                        </button>
-                    </div>
-                `).join('');
-            } catch (e) {
-                console.error("Error loading locations:", e);
-                document.getElementById('locations-list').innerHTML = '<div class="p-3 text-danger text-center">Fejl ved hentning</div>';
-            }
-        }
-
-        async function promptLinkLocation() {
-            const id = prompt("Indtast Lokations ID:");
-            if (!id) return;
-            
-            try {
-                const res = await fetch(`/api/v1/cases/{{ case.id }}/locations`, {
-                    method: 'POST',
-                    headers: {'Content-Type': 'application/json'},
-                    body: JSON.stringify({ location_id: parseInt(id) })
-                });
-                
-                if (!res.ok) throw await res.json();
-                loadCaseLocations();
-            } catch (e) {
-                alert("Fejl: " + (e.detail || e.message));
-            }
-        }
-
-        async function unlinkLocation(locId) {
-            if(!confirm("Fjern link til denne lokation?")) return;
-            try {
-                await fetch(`/api/v1/cases/{{ case.id }}/locations/${locId}`, { method: 'DELETE' });
-                loadCaseLocations();
-            } catch (e) {
-                alert("Fejl ved sletning");
-            }
-        }
-
-
-        // Initialize relation search when DOM is ready
-        let relationSearchTimeout;
-        if (document.readyState === 'loading') {
-            document.addEventListener('DOMContentLoaded', initializeRelationSearch);
-        } else {
-            initializeRelationSearch();
-        }
-    </script>
-</div>
-{% endblock %}
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
+</body>
+</html>