feat: Enhance case detail view with tab count badges and importance bubbles

app/modules/sag/templates/detail.html

@@ -1141,6 +1141,26 @@
         box-shadow: 0 0 0 2px rgba(20, 28, 36, 0.95);
     }
 
+    .case-tab-count-badge {
+        display: none;
+        margin-left: 0.42rem;
+        min-width: 1.25rem;
+        height: 1.25rem;
+        padding: 0 0.35rem;
+        border-radius: 999px;
+        font-size: 0.7rem;
+        font-weight: 700;
+        line-height: 1.25rem;
+        text-align: center;
+        background: color-mix(in srgb, var(--accent) 82%, #2f9e44);
+        color: #fff;
+        box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9);
+    }
+
+    [data-bs-theme="dark"] .case-tab-count-badge {
+        box-shadow: 0 0 0 2px rgba(20, 28, 36, 0.95);
+    }
+
     [data-bs-theme="dark"] .narrative-description {
         border-color: rgba(117, 194, 239, 0.24);
         background: linear-gradient(180deg, rgba(117, 194, 239, 0.14), rgba(117, 194, 239, 0.06));
@@ -1776,10 +1796,13 @@
         border-radius: 0;
         padding: 0.55rem 0.45rem;
         margin-bottom: 0.75rem;
+        width: 100%;
+        min-width: 0;
+        overflow-x: auto;
     }
 
     .case-tabs-topbar.topbar-primary {
-        grid-template-columns: 105px minmax(260px, 1.45fr) minmax(150px, 0.95fr) minmax(170px, 1fr) minmax(170px, 1fr) minmax(240px, 1.35fr);
+        grid-template-columns: repeat(8, minmax(130px, 1fr));
         background: linear-gradient(140deg, rgba(15,76,117,0.08), rgba(15,76,117,0.01));
         border: 1px solid rgba(15,76,117,0.22);
         border-radius: 0;
@@ -1968,11 +1991,9 @@
     .case-tabs-topbar.topbar-secondary {
         /* Vægt kolonner så dato-felter (som har indlejrede ikoner) får mere plads */
         grid-template-columns: 
-            minmax(110px, 0.75fr) /* Type */
-            minmax(110px, 0.8fr)  /* Prioritet */
             minmax(105px, 0.75fr) /* Oprettet */
-            minmax(195px, 1.3fr)  /* Arbejdsstart (2 knapper) */
+            minmax(180px, 1.2fr)  /* Arbejdsstart (2 knapper) */
-            minmax(195px, 1.3fr)  /* Start senest (2 knapper) */
+            minmax(180px, 1.2fr)  /* Start senest (2 knapper) */
             minmax(150px, 1.1fr)  /* Deadline (1 knap) */
             minmax(120px, 0.85fr) /* AnyDesk */
             minmax(140px, 1fr)    /* Dokumenter */;
@@ -2003,13 +2024,51 @@
         text-transform: uppercase;
         letter-spacing: 0.08em;
         color: var(--text-secondary);
-        opacity: 0.75;
+        opacity: 0.95;
         margin-bottom: 0.2rem;
         display: flex;
         align-items: center;
         gap: 0.25rem;
     }
 
+    .case-tabs-topbar-label .field-importance-bubble {
+        margin-left: auto;
+    }
+
+    .field-importance-bubble {
+        width: 0.78rem;
+        height: 0.78rem;
+        border-radius: 999px;
+        flex: 0 0 auto;
+        border: 1px solid rgba(0,0,0,0.18);
+        background: rgba(148, 163, 184, 0.45);
+        box-shadow: 0 0 0 1px rgba(255,255,255,0.65), 0 0 0 0.5px rgba(0,0,0,0.12) inset;
+    }
+
+    .field-importance-bubble.sev-neutral {
+        background: rgba(148, 163, 184, 0.55);
+        border-color: rgba(100, 116, 139, 0.55);
+    }
+
+    .field-importance-bubble.sev-ok {
+        background: #22c55e;
+        border-color: #15803d;
+    }
+
+    .field-importance-bubble.sev-warn {
+        background: #f59e0b;
+        border-color: #b45309;
+    }
+
+    .field-importance-bubble.sev-critical {
+        background: #ef4444;
+        border-color: #991b1b;
+    }
+
+    [data-bs-theme="dark"] .field-importance-bubble {
+        box-shadow: 0 0 0 1px rgba(10, 17, 26, 0.55);
+    }
+
     .case-tabs-topbar-value {
         font-size: 0.9rem;
         font-weight: 600;
@@ -2085,6 +2144,10 @@
         padding: 0.45rem 0.5rem;
     }
 
+    .case-tabs-topbar .dropdown-menu {
+        z-index: 1080;
+    }
+
     .topbar-secondary-inline {
         display: flex;
         align-items: center;
@@ -2379,11 +2442,24 @@
             grid-template-columns: 1fr;
         }
     }
+
+    .case-detail-page-shell {
+        --case-topbar-offset: 0px;
+        margin-top: calc(3rem + var(--case-topbar-offset));
+        margin-bottom: 2rem;
+        position: relative;
+    }
+
+    @media (max-width: 992px) {
+        .case-detail-page-shell {
+            margin-top: calc(2.2rem + var(--case-topbar-offset));
+        }
+    }
 </style>
 {% endblock %}
 
 {% block content %}
-<div class="container-fluid" style="margin-top: 2rem; margin-bottom: 2rem;">
+<div class="container-fluid case-detail-page-shell">
 
     <div class="case-tabs-topbar topbar-primary" role="region" aria-label="Primær sagsbar">
         <div class="case-tabs-topbar-item">
@@ -2404,16 +2480,38 @@
                 </div>
             </div>
         </div>
-        <div class="case-tabs-topbar-item">
+        <div class="case-tabs-topbar-item field-status-item">
-            <div class="case-tabs-topbar-label"><i class="bi bi-circle-half"></i>Status</div>
+            <div class="case-tabs-topbar-label"><i class="bi bi-circle-half"></i>Status <span class="field-importance-bubble {{ 'sev-ok' if (case.status or '')|lower in ['lukket', 'løst', 'closed', 'resolved'] else 'sev-warn' }}" data-field-bubble="status" aria-hidden="true"></span></div>
             <select id="topbarStatusSelect" class="case-inline-select" onchange="saveCaseStatusFromTopbar()">
                 {% for st in status_options %}
                 <option value="{{ st }}" {% if (case.status or '')|lower == st|lower %}selected{% endif %}>{{ st|capitalize }}</option>
                 {% endfor %}
             </select>
         </div>
-        <div class="case-tabs-topbar-item">
+        <div class="case-tabs-topbar-item field-type">
-            <div class="case-tabs-topbar-label"><i class="bi bi-person-check"></i>Ansvarlig</div>
+            <div class="case-tabs-topbar-label"><i class="bi bi-tag"></i>Type <span class="field-importance-bubble sev-ok" data-field-bubble="type" aria-hidden="true"></span></div>
+            <select id="topbarTypeSelect" class="case-inline-select" onchange="saveCaseTypeFromTopbar()">
+                {% set topbar_type = (case.template_key or case.type or 'ticket')|lower %}
+                <option value="ticket" {% if topbar_type == 'ticket' %}selected{% endif %}>Ticket</option>
+                <option value="pipeline" {% if topbar_type == 'pipeline' %}selected{% endif %}>Pipeline</option>
+                <option value="opgave" {% if topbar_type == 'opgave' %}selected{% endif %}>Opgave</option>
+                <option value="ordre" {% if topbar_type == 'ordre' %}selected{% endif %}>Ordre</option>
+                <option value="projekt" {% if topbar_type == 'projekt' %}selected{% endif %}>Projekt</option>
+                <option value="service" {% if topbar_type == 'service' %}selected{% endif %}>Service</option>
+            </select>
+        </div>
+        <div class="case-tabs-topbar-item field-priority">
+            <div class="case-tabs-topbar-label"><i class="bi bi-flag"></i>Prioritet <span class="field-importance-bubble {{ 'sev-critical' if (case.priority or 'normal')|lower == 'urgent' else ('sev-warn' if (case.priority or 'normal')|lower == 'high' else 'sev-ok') }}" data-field-bubble="priority" aria-hidden="true"></span></div>
+            <select id="topbarPrioritySelect" class="case-inline-select" onchange="saveCasePriorityFromTopbar()">
+                {% set topbar_priority = (case.priority or 'normal')|lower %}
+                <option value="low" {% if topbar_priority == 'low' %}selected{% endif %}>Lav</option>
+                <option value="normal" {% if topbar_priority == 'normal' %}selected{% endif %}>Normal</option>
+                <option value="high" {% if topbar_priority == 'high' %}selected{% endif %}>Hoj</option>
+                <option value="urgent" {% if topbar_priority == 'urgent' %}selected{% endif %}>Akut</option>
+            </select>
+        </div>
+        <div class="case-tabs-topbar-item field-assignee-item">
+            <div class="case-tabs-topbar-label"><i class="bi bi-person-check"></i>Ansvarlig <span class="field-importance-bubble {{ 'sev-ok' if case.ansvarlig_bruger_id else 'sev-critical' }}" data-field-bubble="assignee" aria-hidden="true"></span></div>
             <select id="tabsAssignmentUserSelect" class="case-inline-select" onchange="saveAssignmentFromTabsBar()">
                 <option value="">Ingen bruger</option>
                 {% for user in assignment_users or [] %}
@@ -2421,8 +2519,8 @@
                 {% endfor %}
             </select>
         </div>
-        <div class="case-tabs-topbar-item">
+        <div class="case-tabs-topbar-item field-group-item">
-            <div class="case-tabs-topbar-label"><i class="bi bi-people"></i>Gruppe</div>
+            <div class="case-tabs-topbar-label"><i class="bi bi-people"></i>Gruppe <span class="field-importance-bubble {{ 'sev-ok' if case.assigned_group_id else 'sev-warn' }}" data-field-bubble="group" aria-hidden="true"></span></div>
             <select id="tabsAssignmentGroupSelect" class="case-inline-select" onchange="saveAssignmentFromTabsBar()">
                 <option value="">Ingen gruppe</option>
                 {% for group in assignment_groups or [] %}
@@ -2430,8 +2528,8 @@
                 {% endfor %}
             </select>
         </div>
-        <div class="case-tabs-topbar-item">
+        <div class="case-tabs-topbar-item field-next-item">
-            <div class="case-tabs-topbar-label"><i class="bi bi-list-check"></i>Næste</div>
+            <div class="case-tabs-topbar-label"><i class="bi bi-list-check"></i>Næste <span class="field-importance-bubble sev-warn" data-field-bubble="next" aria-hidden="true"></span></div>
             <div id="topbarNextTodoValue" class="case-tabs-topbar-value multiline">Henter næste todo...</div>
             <div id="topbarNextTodoMeta" class="topbar-next-meta">-</div>
         </div>
@@ -2445,34 +2543,12 @@
         
         <div class="case-top-aux">
             <div class="case-tabs-topbar topbar-secondary" role="region" aria-label="Sekundær sagsbar">
-                <div class="case-tabs-topbar-item field-type">
-                    <div class="case-tabs-topbar-label"><i class="bi bi-tag"></i>Type</div>
-                    <select id="topbarTypeSelect" class="case-inline-select" onchange="saveCaseTypeFromTopbar()">
-                        {% set topbar_type = (case.template_key or case.type or 'ticket')|lower %}
-                        <option value="ticket" {% if topbar_type == 'ticket' %}selected{% endif %}>Ticket</option>
-                        <option value="pipeline" {% if topbar_type == 'pipeline' %}selected{% endif %}>Pipeline</option>
-                        <option value="opgave" {% if topbar_type == 'opgave' %}selected{% endif %}>Opgave</option>
-                        <option value="ordre" {% if topbar_type == 'ordre' %}selected{% endif %}>Ordre</option>
-                        <option value="projekt" {% if topbar_type == 'projekt' %}selected{% endif %}>Projekt</option>
-                        <option value="service" {% if topbar_type == 'service' %}selected{% endif %}>Service</option>
-                    </select>
-                </div>
-                <div class="case-tabs-topbar-item field-priority">
-                    <div class="case-tabs-topbar-label"><i class="bi bi-flag"></i>Prioritet</div>
-                    <select id="topbarPrioritySelect" class="case-inline-select" onchange="saveCasePriorityFromTopbar()">
-                        {% set topbar_priority = (case.priority or 'normal')|lower %}
-                        <option value="low" {% if topbar_priority == 'low' %}selected{% endif %}>Lav</option>
-                        <option value="normal" {% if topbar_priority == 'normal' %}selected{% endif %}>Normal</option>
-                        <option value="high" {% if topbar_priority == 'high' %}selected{% endif %}>Hoj</option>
-                        <option value="urgent" {% if topbar_priority == 'urgent' %}selected{% endif %}>Akut</option>
-                    </select>
-                </div>
                 <div class="case-tabs-topbar-item field-created">
-                    <div class="case-tabs-topbar-label"><i class="bi bi-plus-circle"></i>Oprettelses dato</div>
+                    <div class="case-tabs-topbar-label"><i class="bi bi-plus-circle"></i>Oprettelses dato <span class="field-importance-bubble sev-ok" data-field-bubble="created" aria-hidden="true"></span></div>
                     <div class="case-tabs-topbar-value">{{ case.created_at.strftime('%d/%m/%Y') if case.created_at else '-' }}</div>
                 </div>
                 <div class="case-tabs-topbar-item field-start">
-                    <div class="case-tabs-topbar-label"><i class="bi bi-play-circle"></i>Arbejdsstart</div>
+                    <div class="case-tabs-topbar-label"><i class="bi bi-play-circle"></i>Arbejdsstart <span class="field-importance-bubble {{ 'sev-ok' if case.start_date else 'sev-warn' }}" data-field-bubble="start" aria-hidden="true"></span></div>
                     <div class="topbar-secondary-inline" style="gap: 0.25rem;">
                         <input
                             id="topbarStartDateInput"
@@ -2501,7 +2577,7 @@
                     </div>
                 </div>
                 <div class="case-tabs-topbar-item field-start-before">
-                    <div class="case-tabs-topbar-label"><i class="bi bi-hourglass-split"></i>Start senest</div>
+                    <div class="case-tabs-topbar-label"><i class="bi bi-hourglass-split"></i>Start senest <span class="field-importance-bubble {{ 'sev-warn' if case.deferred_until else 'sev-neutral' }}" data-field-bubble="start_before" aria-hidden="true"></span></div>
                     <div class="topbar-secondary-inline" style="gap: 0.25rem;">
                         <input
                             id="topbarDeferredInput"
@@ -2545,7 +2621,7 @@
                     </div>
                 </div>
                 <div class="case-tabs-topbar-item field-deadline">
-                    <div class="case-tabs-topbar-label"><i class="bi bi-clock"></i>Deadline dato</div>
+                    <div class="case-tabs-topbar-label"><i class="bi bi-clock"></i>Deadline dato <span class="field-importance-bubble {{ 'sev-warn' if case.deadline else 'sev-neutral' }}" data-field-bubble="deadline" aria-hidden="true"></span></div>
                     <div class="topbar-secondary-inline" style="gap: 0.25rem;">
                         <input
                             id="topbarDeadlineInput"
@@ -2789,11 +2865,13 @@
         <li class="nav-item" role="presentation">
             <button class="nav-link active" id="details-tab" data-bs-toggle="tab" data-bs-target="#details" type="button" role="tab" onclick="forceCaseTabActivation('details', this)">
                 <i class="bi bi-card-text me-2"></i>Sagsdetaljer
+                <span class="case-tab-count-badge" id="detailsTabCountBadge"></span>
             </button>
         </li>
         <li class="nav-item" role="presentation">
             <button class="nav-link" id="solution-tab" data-bs-toggle="tab" data-bs-target="#solution" type="button" role="tab" data-module-tab="solution" onclick="forceCaseTabActivation('solution', this)">
                 <i class="bi bi-lightbulb me-2"></i>Løsning
+                <span class="case-tab-count-badge" id="solutionTabCountBadge"></span>
                 {% if solution %}
                 <span class="badge bg-success ms-1 rounded-pill"><i class="bi bi-check"></i></span>
                 {% endif %}
@@ -2802,32 +2880,38 @@
         <li class="nav-item" role="presentation">
             <button class="nav-link" id="emails-tab" data-bs-toggle="tab" data-bs-target="#emails" type="button" role="tab" data-module-tab="emails" onclick="forceCaseTabActivation('emails', this)">
                 <i class="bi bi-envelope me-2"></i>E-mail
+                <span class="case-tab-count-badge" id="emailsTabCountBadge"></span>
                 <span id="emailTabUnreadBadge" class="email-tab-unread-badge" aria-label="Ulæste emails"></span>
             </button>
         </li>
         <li class="nav-item" role="presentation">
             <button class="nav-link" id="sales-tab" data-bs-toggle="tab" data-bs-target="#sales" type="button" role="tab" data-module-tab="sales" onclick="forceCaseTabActivation('sales', this)">
                 <i class="bi bi-basket3 me-2"></i>Varekøb & Salg
+                <span class="case-tab-count-badge" id="salesTabCountBadge"></span>
             </button>
         </li>
         <li class="nav-item" role="presentation">
             <button class="nav-link" id="supplier-tab" data-bs-toggle="tab" data-bs-target="#supplier" type="button" role="tab" data-module-tab="supplier" onclick="forceCaseTabActivation('supplier', this)">
                 <i class="bi bi-receipt-cutoff me-2"></i>Leverandør
+                <span class="case-tab-count-badge" id="supplierTabCountBadge"></span>
             </button>
         </li>
         <li class="nav-item" role="presentation">
             <button class="nav-link" id="timetracking-tab" data-bs-toggle="tab" data-bs-target="#timetracking" type="button" role="tab"  onclick="forceCaseTabActivation('timetracking', this)">
                 <i class="bi bi-clock-history me-2"></i>Tidsforbrug
+                <span class="case-tab-count-badge" id="timetrackingTabCountBadge"></span>
             </button>
         </li>
         <li class="nav-item" role="presentation">
             <button class="nav-link" id="subscription-tab" data-bs-toggle="tab" data-bs-target="#subscription" type="button" role="tab" data-module-tab="subscription" onclick="forceCaseTabActivation('subscription', this)">
                 <i class="bi bi-repeat me-2"></i>Abonnement
+                <span class="case-tab-count-badge" id="subscriptionTabCountBadge"></span>
             </button>
         </li>
         <li class="nav-item" role="presentation">
             <button class="nav-link" id="reminders-tab" data-bs-toggle="tab" data-bs-target="#reminders" type="button" role="tab" data-module-tab="reminders" onclick="forceCaseTabActivation('reminders', this)">
                 <i class="bi bi-bell me-2"></i>Påmindelser
+                <span class="case-tab-count-badge" id="remindersTabCountBadge"></span>
             </button>
         </li>
     </ul>
@@ -3757,6 +3841,7 @@
         document.addEventListener('DOMContentLoaded', () => {
             hydrateTopbarStatusOptions();
             loadCaseCustomerTopAlerts();
+            applyTopbarImportanceBubbles();
             // Initialize modals
             contactSearchModal = new bootstrap.Modal(document.getElementById('contactSearchModal'));
             customerSearchModal = new bootstrap.Modal(document.getElementById('customerSearchModal'));
@@ -3813,6 +3898,36 @@
                 todoForm.addEventListener('submit', createTodoStep);
             }
 
+            ['topbarStatusSelect', 'tabsAssignmentUserSelect', 'tabsAssignmentGroupSelect', 'topbarTypeSelect', 'topbarPrioritySelect', 'topbarStartDateInput', 'topbarDeferredInput', 'topbarDeadlineInput'].forEach((id) => {
+                const el = document.getElementById(id);
+                if (el) {
+                    el.addEventListener('change', applyTopbarImportanceBubbles);
+                    el.addEventListener('input', applyTopbarImportanceBubbles);
+                }
+            });
+
+            const caseTabsContent = document.getElementById('caseTabsContent');
+            if (caseTabsContent && typeof MutationObserver !== 'undefined') {
+                let tabBadgeTimer = null;
+                const scheduleBadgeRefresh = () => {
+                    if (tabBadgeTimer) {
+                        clearTimeout(tabBadgeTimer);
+                    }
+                    tabBadgeTimer = setTimeout(() => updateCaseTabCountBadges(), 80);
+                };
+
+                const tabObserver = new MutationObserver(scheduleBadgeRefresh);
+                tabObserver.observe(caseTabsContent, {
+                    childList: true,
+                    subtree: true,
+                    characterData: true,
+                    attributes: true,
+                    attributeFilter: ['data-has-content', 'class']
+                });
+            }
+
+            updateCaseTabCountBadges();
+
             const caseTabs = document.getElementById('caseTabs');
             if (caseTabs) {
                 caseTabs.addEventListener('shown.bs.tab', async (event) => {
@@ -4917,10 +5032,42 @@
             if (!moduleContainer) return;
 
             try {
-                const response = await fetch(`/api/v1/tags/entity/case/${caseId}`);
+                let tags = [];
-                if (!response.ok) throw new Error('Kunne ikke hente tags');
+                let usingLegacyCaseTags = false;
+
+                const normalizeLegacyTags = (legacyTags) => (
+                    Array.isArray(legacyTags)
+                        ? legacyTags.map((row) => ({
+                            id: row.id || row.tag_id,
+                            name: row.tag_navn || row.name || 'Tag',
+                            color: row.color || '#0f4c75',
+                            icon: row.icon || 'bi-tag'
+                        }))
+                        : []
+                );
+
+                const loadLegacyTags = async () => {
+                    const legacyResponse = await fetch(`/api/v1/sag/${caseId}/tags`, { credentials: 'include' });
+                    if (!legacyResponse.ok) {
+                        throw new Error('Kunne ikke hente tags');
+                    }
+                    const legacyTags = await legacyResponse.json();
+                    usingLegacyCaseTags = true;
+                    return normalizeLegacyTags(legacyTags);
+                };
+
+                const response = await fetch(`/api/v1/tags/entity/case/${caseId}`);
+                if (response.ok) {
+                    const genericTags = await response.json();
+                    tags = Array.isArray(genericTags) ? genericTags : [];
+                    // Some hubs still store case tags via legacy sag endpoint.
+                    if (tags.length === 0) {
+                        tags = await loadLegacyTags();
+                    }
+                } else {
+                    tags = await loadLegacyTags();
+                }
 
-                const tags = await response.json();
                 if (!Array.isArray(tags) || tags.length === 0) {
                     moduleContainer.innerHTML = '<div class="p-3 text-center text-muted small">Ingen tags paaa sagen endnu</div>';
                     setModuleContentState('tags', false);
@@ -4936,6 +5083,13 @@
                     </span>
                 `).join('');
 
+                if (usingLegacyCaseTags) {
+                    moduleContainer.insertAdjacentHTML(
+                        'beforeend',
+                        '<div class="small text-muted mt-2">Viser tags via sag-endpoint</div>'
+                    );
+                }
+
                 setModuleContentState('tags', true);
             } catch (error) {
                 console.error('Error loading case tags module:', error);
@@ -5003,12 +5157,32 @@
         }
 
         async function removeCaseTagAndSync(tagId) {
+            try {
+                if (window.removeEntityTag) {
                     await window.removeEntityTag('case', caseId, tagId, 'case-tags-module');
+                } else {
+                    const legacyResponse = await fetch(`/api/v1/sag/${caseId}/tags/${tagId}`, {
+                        method: 'DELETE',
+                        credentials: 'include'
+                    });
+                    if (!legacyResponse.ok) {
+                        throw new Error('Kunne ikke slette tag');
+                    }
+                }
+            } catch (error) {
+                const legacyResponse = await fetch(`/api/v1/sag/${caseId}/tags/${tagId}`, {
+                    method: 'DELETE',
+                    credentials: 'include'
+                });
+                if (!legacyResponse.ok) {
+                    throw error;
+                }
+            }
             await syncCaseTagsUi();
         }
 
         async function syncCaseTagsUi() {
-            if (window.renderEntityTags) {
+            if (window.renderEntityTags && document.getElementById('case-tags')) {
                 await window.renderEntityTags('case', caseId, 'case-tags');
             }
             await loadCaseTagsModule();
@@ -5186,6 +5360,7 @@
                 valueEl.textContent = 'Ingen åbne todo-opgaver';
                 metaEl.textContent = 'Alt er færdigt';
                 setNextTodoOverrideId(null);
+                applyTopbarImportanceBubbles();
                 return;
             }
 
@@ -5201,6 +5376,104 @@
             metaEl.textContent = nextStep.due_date
                 ? `Forfald: ${formatTodoDate(nextStep.due_date)}`
                 : 'Ingen forfaldsdato';
+
+            applyTopbarImportanceBubbles();
+        }
+
+        function parseIsoDateToDay(value) {
+            const str = String(value || '').trim();
+            if (!str) return null;
+            const d = new Date(str + 'T00:00:00');
+            if (Number.isNaN(d.getTime())) return null;
+            return d;
+        }
+
+        function dayDiffFromToday(dateObj) {
+            if (!dateObj) return null;
+            const today = new Date();
+            today.setHours(0, 0, 0, 0);
+            return Math.round((dateObj.getTime() - today.getTime()) / 86400000);
+        }
+
+        function bubbleSeverityFromDate(rawValue, opts = {}) {
+            const dateObj = parseIsoDateToDay(rawValue);
+            if (!dateObj) return opts.empty || 'sev-neutral';
+            const diff = dayDiffFromToday(dateObj);
+            const warnDays = Number(opts.warnDays || 2);
+            if (diff < 0) return 'sev-critical';
+            if (diff <= warnDays) return 'sev-warn';
+            return 'sev-ok';
+        }
+
+        function applyTopbarImportanceBubbles() {
+            const statusValue = String(document.getElementById('topbarStatusSelect')?.value || '').toLowerCase();
+            const assigneeValue = String(document.getElementById('tabsAssignmentUserSelect')?.value || '').trim();
+            const groupValue = String(document.getElementById('tabsAssignmentGroupSelect')?.value || '').trim();
+            const typeValue = String(document.getElementById('topbarTypeSelect')?.value || '').toLowerCase();
+            const priorityValue = String(document.getElementById('topbarPrioritySelect')?.value || '').toLowerCase();
+            const startValue = String(document.getElementById('topbarStartDateInput')?.value || '').trim();
+            const startBeforeValue = String(document.getElementById('topbarDeferredInput')?.value || '').trim();
+            const deadlineValue = String(document.getElementById('topbarDeadlineInput')?.value || '').trim();
+
+            const nextValue = String(document.getElementById('topbarNextTodoValue')?.textContent || '').trim().toLowerCase();
+            const nextMeta = String(document.getElementById('topbarNextTodoMeta')?.textContent || '').trim().toLowerCase();
+
+            const createdText = String(document.querySelector('.field-created .case-tabs-topbar-value')?.textContent || '').trim();
+            let createdSeverity = 'sev-neutral';
+            const createdMatch = createdText.match(/^(\d{2})\/(\d{2})\/(\d{4})$/);
+            if (createdMatch) {
+                const createdDate = new Date(Number(createdMatch[3]), Number(createdMatch[2]) - 1, Number(createdMatch[1]));
+                const age = Math.abs(dayDiffFromToday(createdDate));
+                if (age > 120) createdSeverity = 'sev-critical';
+                else if (age > 45) createdSeverity = 'sev-warn';
+                else createdSeverity = 'sev-ok';
+            }
+
+            let statusSeverity = 'sev-neutral';
+            if (!statusValue) statusSeverity = 'sev-critical';
+            else if (['lukket', 'løst', 'closed', 'resolved'].includes(statusValue)) statusSeverity = 'sev-ok';
+            else if (['afventer', 'under behandling'].includes(statusValue)) statusSeverity = 'sev-warn';
+            else statusSeverity = 'sev-warn';
+
+            let nextSeverity = 'sev-neutral';
+            if (nextValue.includes('henter')) {
+                nextSeverity = 'sev-neutral';
+            } else if (nextValue.includes('ingen åbne')) {
+                nextSeverity = 'sev-warn';
+            } else if (nextMeta.includes('forfald:')) {
+                const metaDateMatch = nextMeta.match(/(\d{2})[./-](\d{2})[./-](\d{4})/);
+                if (metaDateMatch) {
+                    const due = new Date(Number(metaDateMatch[3]), Number(metaDateMatch[2]) - 1, Number(metaDateMatch[1]));
+                    const diff = dayDiffFromToday(due);
+                    if (diff < 0) nextSeverity = 'sev-critical';
+                    else if (diff <= 2) nextSeverity = 'sev-warn';
+                    else nextSeverity = 'sev-ok';
+                } else {
+                    nextSeverity = 'sev-warn';
+                }
+            } else {
+                nextSeverity = 'sev-ok';
+            }
+
+            const fieldSeverity = {
+                status: statusSeverity,
+                assignee: assigneeValue ? 'sev-ok' : 'sev-critical',
+                group: groupValue ? 'sev-ok' : 'sev-warn',
+                next: nextSeverity,
+                type: typeValue ? 'sev-ok' : 'sev-neutral',
+                priority: priorityValue === 'urgent' ? 'sev-critical' : (priorityValue === 'high' ? 'sev-warn' : 'sev-ok'),
+                created: createdSeverity,
+                start: bubbleSeverityFromDate(startValue, { empty: 'sev-warn', warnDays: 0 }),
+                start_before: bubbleSeverityFromDate(startBeforeValue, { empty: 'sev-neutral', warnDays: 2 }),
+                deadline: bubbleSeverityFromDate(deadlineValue, { empty: 'sev-neutral', warnDays: 2 })
+            };
+
+            document.querySelectorAll('[data-field-bubble]').forEach((bubble) => {
+                const key = String(bubble.getAttribute('data-field-bubble') || '').trim();
+                const sev = fieldSeverity[key] || 'sev-neutral';
+                bubble.classList.remove('sev-neutral', 'sev-ok', 'sev-warn', 'sev-critical');
+                bubble.classList.add(sev);
+            });
         }
 
         async function setNextTodoStep(stepId, isNext) {
@@ -10201,11 +10474,16 @@
                 return;
             }
 
-            if (!caseAnyDeskModal) {
             const modalEl = document.getElementById('caseAnyDeskModal');
-                if (!modalEl) return;
+            if (!modalEl || typeof bootstrap === 'undefined' || !bootstrap.Modal) return;
+
+            if (!caseAnyDeskModal || typeof caseAnyDeskModal.show !== 'function') {
+                if (typeof bootstrap.Modal.getOrCreateInstance === 'function') {
+                    caseAnyDeskModal = bootstrap.Modal.getOrCreateInstance(modalEl);
+                } else {
                     caseAnyDeskModal = new bootstrap.Modal(modalEl);
                 }
+            }
 
             const noteInput = document.getElementById('caseAnydeskNoteInput');
             if (noteInput) noteInput.value = '';
@@ -10241,8 +10519,10 @@
                 }
             }
 
+            if (caseAnyDeskModal && typeof caseAnyDeskModal.show === 'function') {
                 caseAnyDeskModal.show();
             }
+        }
 
         async function registerCaseAnyDeskSession() {
             if (caseAnyDeskConnectInFlight) {
@@ -10301,7 +10581,9 @@
                 }
 
                 const result = await res.json();
-                if (caseAnyDeskModal) caseAnyDeskModal.hide();
+                if (caseAnyDeskModal && typeof caseAnyDeskModal.hide === 'function') {
+                    caseAnyDeskModal.hide();
+                }
 
                 if (result?.deep_link) {
                     window.location.href = result.deep_link;
@@ -10325,6 +10607,54 @@
             }
         }
 
+        // Ensure inline handlers and fallback listeners can always resolve AnyDesk actions.
+        window.openCaseAnyDeskModal = openCaseAnyDeskModal;
+        window.registerCaseAnyDeskSession = registerCaseAnyDeskSession;
+        window.onCaseAnyDeskIdInputChange = onCaseAnyDeskIdInputChange;
+        window.setCaseAnyDeskInputFromSaved = setCaseAnyDeskInputFromSaved;
+
+        document.addEventListener('DOMContentLoaded', () => {
+            const adjustCaseTopbarOffset = () => {
+                const shell = document.querySelector('.case-detail-page-shell');
+                const nav = document.querySelector('.navbar.fixed-top');
+                if (!shell || !nav) return;
+
+                const navHeight = Math.ceil(nav.getBoundingClientRect().height || 0);
+                const bodyPaddingTop = parseFloat(getComputedStyle(document.body).paddingTop || '0') || 0;
+                const needed = Math.max(0, navHeight - bodyPaddingTop + 8);
+                shell.style.setProperty('--case-topbar-offset', `${needed}px`);
+            };
+
+            adjustCaseTopbarOffset();
+            window.addEventListener('resize', adjustCaseTopbarOffset);
+
+            const openBtn = document.getElementById('caseAnyDeskOpenBtn');
+            if (openBtn) {
+                openBtn.removeAttribute('onclick');
+                openBtn.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    openCaseAnyDeskModal();
+                });
+            }
+
+            const connectBtn = document.getElementById('caseAnyDeskConnectBtn');
+            if (connectBtn) {
+                connectBtn.removeAttribute('onclick');
+                connectBtn.addEventListener('click', (event) => {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    registerCaseAnyDeskSession();
+                });
+            }
+
+            const anydeskInput = document.getElementById('caseAnydeskIdInput');
+            if (anydeskInput) {
+                anydeskInput.removeAttribute('oninput');
+                anydeskInput.addEventListener('input', onCaseAnyDeskIdInputChange);
+            }
+        });
+
         async function openCaseModuleAddPanel() {
             if (typeof loadModulePrefs === 'function') {
                 await loadModulePrefs();
@@ -11091,6 +11421,8 @@
             if (initialValue) {
                 select.value = Array.from(known.values()).find((v) => v.toLowerCase() === initialValue.toLowerCase()) || initialValue;
             }
+
+            applyTopbarImportanceBubbles();
         }
 
         function saveCaseTypeFromTopbar() {
@@ -11368,6 +11700,7 @@
             if (!el) return;
             el.setAttribute('data-has-content', hasContent ? 'true' : 'false');
             applyViewLayout(currentCaseView);
+            updateCaseTabCountBadges();
         }
 
         function applyViewLayout(viewName) {
@@ -11432,6 +11765,13 @@
                     return;
                 }
 
+                // Moduler med indhold skal altid vises.
+                if (hasContent) {
+                    setVisibility(true);
+                    el.classList.remove('module-empty-compact');
+                    return;
+                }
+
                 // HVIS specifik præference deaktiverer den - Skjul den! Uanset content.
                 if (pref === false) {
                     setVisibility(false);
@@ -11446,13 +11786,6 @@
                     return;
                 }
 
-                // Default logic (ingen brugervalg) - har den content, så vis den
-                if (hasContent) {
-                    setVisibility(true);
-                    el.classList.remove('module-empty-compact');
-                    return;
-                }
-                
                 // Default logic - ingen content: se på layout defaults
                 if (standardModuleSet.has(moduleName)) {
                     setVisibility(true);
@@ -11510,6 +11843,63 @@
             }
         }
 
+        function _setCaseTabCountBadge(badgeId, count) {
+            const badge = document.getElementById(badgeId);
+            if (!badge) return;
+            const safeCount = Number(count || 0);
+            if (safeCount <= 0) {
+                badge.style.display = 'none';
+                badge.textContent = '';
+                return;
+            }
+            badge.style.display = 'inline-block';
+            badge.textContent = safeCount > 99 ? '99+' : String(safeCount);
+        }
+
+        function _countRows(selector) {
+            const container = document.querySelector(selector);
+            if (!container) return 0;
+            const rows = Array.from(container.querySelectorAll('tr'));
+            return rows.filter((row) => {
+                const cells = row.querySelectorAll('td');
+                if (cells.length === 0) return false;
+                const colspanCell = row.querySelector('td[colspan]');
+                if (colspanCell && cells.length === 1) return false;
+                return true;
+            }).length;
+        }
+
+        function updateCaseTabCountBadges() {
+            const detailCount = document.querySelectorAll('#details .right-module-card[data-has-content="true"]').length;
+            _setCaseTabCountBadge('detailsTabCountBadge', detailCount);
+
+            const solutionHasContent = String(document.getElementById('solution')?.getAttribute('data-has-content') || '').toLowerCase() === 'true';
+            _setCaseTabCountBadge('solutionTabCountBadge', solutionHasContent ? 1 : 0);
+
+            const emailThreads = Number(document.getElementById('linkedEmailThreadsCount')?.textContent || 0);
+            _setCaseTabCountBadge('emailsTabCountBadge', emailThreads);
+
+            const salesCount = _countRows('#saleItemsSalesBody') + _countRows('#saleItemsPurchaseBody');
+            _setCaseTabCountBadge('salesTabCountBadge', salesCount);
+
+            const supplierCount = _countRows('#supplierPurchaseLinesBody');
+            _setCaseTabCountBadge('supplierTabCountBadge', supplierCount);
+
+            const timeEntriesStore = (typeof timeV1EntriesById !== 'undefined' && timeV1EntriesById && typeof timeV1EntriesById === 'object')
+                ? timeV1EntriesById
+                : null;
+            const timeCount = timeEntriesStore
+                ? Object.keys(timeEntriesStore).length
+                : document.querySelectorAll('#timetracking tbody tr').length;
+            _setCaseTabCountBadge('timetrackingTabCountBadge', timeCount);
+
+            const subscriptionCount = _countRows('#subscriptionItemsBody');
+            _setCaseTabCountBadge('subscriptionTabCountBadge', subscriptionCount);
+
+            const reminderCount = document.querySelectorAll('#remindersList .list-group-item').length;
+            _setCaseTabCountBadge('remindersTabCountBadge', reminderCount);
+        }
+
         async function applyViewFromTags() {
             try {
                 const res = await fetch(`/api/v1/tags/entity/case/${caseIds}`);
@@ -11517,6 +11907,7 @@
                 const tags = await res.json();
                 const viewTag = tags.find(t => ['Pipeline', 'Kundevisning', 'Sag-detalje'].includes(t.name));
                 applyViewLayout(viewTag ? viewTag.name : 'Sag-detalje');
+                updateCaseTabCountBadges();
             } catch (e) {
                 console.error('View tag lookup failed', e);
             }
@@ -11532,6 +11923,7 @@
                     return acc;
                 }, {});
                 modulePrefs.time = true;
+                updateCaseTabCountBadges();
             } catch (e) {
                 console.error('Module prefs load failed', e);
             }